/*FONTS*/
@font-face {
    font-family: 'argoscondensed_book';
    src: url('../font/argos-condensedbook-webfont.eot');
    src: url('../font/argos-condensedbook-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/argos-condensedbook-webfont.woff2') format('woff2'),
         url('../font/argos-condensedbook-webfont.woff') format('woff'),
         url('../font/argos-condensedbook-webfont.ttf') format('truetype'),
         url('../font/argos-condensedbook-webfont.svg#argoscondensed_book') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'argoscondensed_extrabold';
    src: url('../font/argos-condensedextrabold-webfont.eot');
    src: url('../font/argos-condensedextrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/argos-condensedextrabold-webfont.woff2') format('woff2'),
         url('../font/argos-condensedextrabold-webfont.woff') format('woff'),
         url('../font/argos-condensedextrabold-webfont.ttf') format('truetype'),
         url('../font/argos-condensedextrabold-webfont.svg#argoscondensed_extrabold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'argoscompressed_bold';
    src: url('../font/argos-compressedbold-webfont.eot');
    src: url('../font/argos-compressedbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/argos-compressedbold-webfont.woff2') format('woff2'),
         url('../font/argos-compressedbold-webfont.woff') format('woff'),
         url('../font/argos-compressedbold-webfont.ttf') format('truetype'),
         url('../font/argos-compressedbold-webfont.svg#argoscompressed_bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*MAIN*/

body{
	background:#fff;
	color:#000;
	font-family: 'argoscondensed_book', sans-serif;
}

h1, h2, h3, h4, h5{
    font-family: 'argoscondensed_extrabold', sans-serif;
}

a{
    color:#0066b3;
}

a:hover{
    color:#2383c5;
}

a:visited{
    color:#034da1;
}

.reveal-modal-bg {
    background: #000000;
    background: rgba(0, 0, 0, 0.85);
}

.reveal-modal{
    background: rgba(0, 0, 0, 0.2);
    border:none;
}

.reveal-modal .close-reveal-modal{
    top:0.1rem;
    right:0.6rem;
}

.argoslogo{
	width:75px;
	height:auto;
}

.applogo{
		width:100px;
		height:auto;
	}
.infoone{
        background: url(../img/awl-snowbg.png) top center repeat-x;
        width:100%;
    }
.infothree{
        background: url(../img/infothree-bg.png) top center repeat-x;
        width:100%;
    }
.infofive{
        background: url(../img/infofive-bg.png) top center repeat-x;
        width:100%;
    }
#moodboard, #selfie, #parental{
    visibility: hidden;
}
footer{
    background: url(../img/footer-bg.png) top center repeat-x;
        width:100%;
}

/*Quotes*/

footer blockquote{
    color:#000;
    border-left:none;
}

footer span strong{
    font-family: 'argoscompressed_bold';
}

footer .slick-prev:before, footer .slick-next:before{
    color:#008CBA;
}

footer .footer-applogo{
    text-align:center;
}

footer .storebox{
    padding:3.5% 0;
}

footer .storebox .appstore{
    text-align:right;
}

footer .appsupport{
    text-align:right;
}

/*Responsive Youtube*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Small*/
@media only screen and (max-width: 40em) { 

	body{
		text-align:center;
	}

	.header-large{
		font-size:1.9em;
	}

    p, ul, blockquote, footer span{
        font-size:1.250rem;
    }

    .topimg{
        visibility: hidden;
        display:none;
    }

    .reveal-modal{
        padding:0.5em;
        min-height: 0;
        top:25% !important;
    }
    .argoslogo{
        margin:0.8em 0 0.5em 0;
    }

    .info-content ul{
        text-align:left;
    }

    .header-appbtn{
        text-align: center;
        width:100%;
    }
    .store-btn{
        width:50%;
        margin:0.8em 0;
    }

    .infoone{
        padding: 2% 0;
    }

    .infothree, .infofour, .infofive{
        padding:8.58% 0;
    }
    .mobile-img{
        overflow:hidden;
    }
    #moodboard, #selfie, #parental{
        position:relative;
        right:30%;
        max-width:none;
    }
    .quotes{
        padding:10%;
    }

    ul.slick-dots{
        margin-left:0;
    }

    .footerbar{
        font-size:1.125rem;
        border-top:1px solid #d9e2e7;
        padding: 1.2% 0;
    }  

    footer .argosweb{
        text-align:left;
    }
    footer .storebox .appstore{
        text-align:center;
    }
}

/*Medium*/
@media only screen and (min-width: 40.063em) { 
	body{
		text-align:left;
	}
    p, ul, blockquote, footer span{
        font-size:1.5rem;
    }

    .argoslogo{
    margin:0;
    }

    .header-large{
        font-size:2.250em;
    }

    .reveal-modal{
        max-width:none;
        width:70%;
    }

    .topimg{
        visibility: visible;
        display: block;
    }

    .info-valign{
        padding-top:15.5%;
    }

    .info-content{
        padding-left:7.3%;
    }

    .store-btn{
        height:44px;
        width:auto;
    }

    .infoone{
        padding: 1.2% 0;
    }

    .infothree, .infofive{
        padding:8.58% 0;
    }

    .footerbar{
        font-size:1.125rem;
        border-top:1px solid #d9e2e7;
        padding: 1.2% 0;
    }
     .quotes{
        padding:5%;
    }

    .quotebox{
        padding:6% 0 0 0;
        width:100%;
        display:inline-block;
    }

    footer span{
        padding-left:1.1875rem;
    }

    footer .footer-applogo{
    padding-top:6%;
    }

}
/*Large*/
@media only screen and (min-width: 64.063em) { 
    .header-icon{
        padding:0;
    }
}