/* Large desktop */
@media (min-width: 1200px) {}

@media (min-width: 979px) and (max-width: 1024px) {
    #icon-container ul li:nth-child(1) a{ background-image: url('img/icon-dribbble-2x.png') !important; }
    #icon-container ul li:nth-child(2) a{ background-image: url('img/icon-twitter-2x.png') !important;}
    #icon-container ul li:nth-child(3) a{ background-image: url('img/icon-facebook-2x.png')!important;}
    #icon-container ul li:nth-child(4) a{ background-image: url('img/icon-lin-2x.png')!important;}
    #logo{background-image: url('img/logo-2x.png') !important;}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    #icon-container ul li:nth-child(1) a{ background-image: url('img/icon-dribbble-2x.png') !important; }
    #icon-container ul li:nth-child(2) a{ background-image: url('img/icon-twitter-2x.png') !important;}
    #icon-container ul li:nth-child(3) a{ background-image: url('img/icon-facebook-2x.png')!important;}
    #icon-container ul li:nth-child(4) a{ background-image: url('img/icon-lin-2x.png')!important;}
    #logo{background-image: url('img/logo-2x.png') !important;}
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
    #icon-container ul li:nth-child(1) a{ background-image: url('img/icon-dribbble-2x.png') !important; }
    #icon-container ul li:nth-child(2) a{ background-image: url('img/icon-twitter-2x.png') !important;}
    #icon-container ul li:nth-child(3) a{ background-image: url('img/icon-facebook-2x.png')!important;}
    #icon-container ul li:nth-child(4) a{ background-image: url('img/icon-lin-2x.png')!important;}
    #logo{background-image: url('img/logo-2x.png') !important;}
}

/* Landscape phones and down */
@media (max-width: 480px) {
    .text{
        font-size: 20px !important;
    }
    #icon-container ul li:nth-child(1) a{ background-image: url('img/icon-dribbble-2x.png') !important;}
    #icon-container ul li:nth-child(2) a{ background-image: url('img/icon-twitter-2x.png') !important;}
    #icon-container ul li:nth-child(3) a{ background-image: url('img/icon-facebook-2x.png') !important;}
    #icon-container ul li:nth-child(4) a{ background-image: url('img/icon-lin-2x.png') !important;}
    #logo{background-image: url('img/logo-2x.png') !important;}
    #content{ width: 300px !important; margin-left: -150px !important; /* Half the width */}
}

@media (max-width: 320px) {
    .text{
        font-size: 16px !important;
    }
    #icon-container ul li:nth-child(1) a{ background-image: url('img/icon-dribbble-2x.png') !important;}
    #icon-container ul li:nth-child(2) a{ background-image: url('img/icon-twitter-2x.png') !important;}
    #icon-container ul li:nth-child(3) a{ background-image: url('img/icon-facebook-2x.png') !important;}
    #icon-container ul li:nth-child(4) a{ background-image: url('img/icon-lin-2x.png') !important;}
    #logo{background-image: url('img/logo-2x.png') !important;}
    #content{ width: 240px !important; margin-left: -120px !important; /* Half the width */}
}

@font-face {
    font-family: 'proxima_nova_rgregular';
    src: url('fonts/proximanova-regular-webfont.eot');
    src: url('fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('fonts/proximanova-regular-webfont.woff') format('woff'),
    url('fonts/proximanova-regular-webfont.ttf') format('truetype'),
    url('fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html{
    background-color: #2470a9;
    height: 100%;
    width: 100%
}


body{
    font-family: 'proxima_nova_rgregular';
}


#pageContainer{
    width: 100%;
    height: 100%;
}

#content{
    width: 430px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /* Half the height */
    margin-left: -215px; /* Half the width */
}

#logo{
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    left:0;
    right: 0;
    opacity: 0;
    background: url('img/logo-2x.png') no-repeat center;
    background-size: 100%;
    width: 150px;
    height: 150px;
}

.text{
    color: #ffffff;
    font-size: 28px;
}
#screen-2{
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 78px;
    display: none;
}

#screen-3{
    display: block;
}

#screen-3 ul{
    list-style: none;
    overflow: hidden;
    width: 190px;
    margin: 0 auto;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: 82px;
}

#screen-3 ul li{
    display: none;
    float: left;
    overflow: hidden;
    width: 38px;
    height: 36px;
    margin-right: 12px;
}
#screen-3 ul li:last-child{
    margin-right: 0;
}

#screen-3 ul li a{
    width: 36px;
    height: 36px;
    display: block;
}

#icon-container{
    overflow: hidden;
}

#icon-container ul li:nth-child(1) a{ background: url('img/icon-dribble.png') no-repeat center; background-size: 100%;}
#icon-container ul li:nth-child(2) a{ background: url('img/icon-twitter.png') no-repeat center; background-size: 100%;}
#icon-container ul li:nth-child(3) a{ background: url('img/icon-fb.png') no-repeat center; background-size: 100%;}
#icon-container ul li:nth-child(4) a{ background: url('img/icon-lin.png') no-repeat center; background-size: 100%;}

#icon-container ul li:nth-child(1) a:hover{ background: url('img/icon-dribble-hover.png') no-repeat center;background-size: 100%;}
#icon-container ul li:nth-child(2) a:hover{ background: url('img/icon-twitter-hover.png') no-repeat center;background-size: 100%;}
#icon-container ul li:nth-child(3) a:hover{ background: url('img/icon-fb-hover.png') no-repeat center;background-size: 100%;}
#icon-container ul li:nth-child(4) a:hover{ background: url('img/icon-lin-hover.png') no-repeat center;background-size: 100%;}

#icons-top{
    text-align: center;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
}