/*!
 *
 * http://www.zoomchicago.com
 * layout.css
 * Copyright 2018 Zoom Advertising
 * Design/Code by @m2robinson.
 *
 */

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,600i,700,700i);

body {
    color: #333;
    background-color: #09f;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.bg {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent url('../img/bgs/dark/chiBG-mobile.jpg') center top no-repeat;
}
.slides { display:none; }

.jumbo { font-size:42px; color:#09f; }
.jumbo, h1, .h1, h2, .h2 { font-weight: 700; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, header, footer  {
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

h1, .h1, header, footer  { text-transform: uppercase; }

a       { color:#666; }
a:hover { color:#09f; cursor:pointer; }

button, .button { color:#09f; background-color:#fff; font-size:16px; }
button:hover, .button:hover { color:#fff; background-color:#09f; }

.blue   { color:#09f; }

.blueBg {
    color: #fff; 
    background-color: #09f; 
}

.blueTransBg { background: transparent url('../img/bgs/blueTile.png') 0 0 repeat; }

.blueBg a, .blueTransBg a { color:#fff; }
.blueBg a:hover, .blueTransBg a:hover { color:#ccc; }

.whiteBg { background-color:#fff; }

/* hide text for logo/icon buttons */
#zoomLogo, .icon {
    font-size: 1px;
    color: transparent;
    text-indent: 101%;
    white-space: nowrap;
    overflow: hidden;
    background: transparent url('../img/zoomSprite.svg') 0 0 no-repeat;
    background-size: 1000px 500px;
}

/* header */
header {
    position: fixed;
    z-index: 999;
    left: 0;
    width: 100%; 
    padding: 18px 0;
    text-align: center;
    color: #fff;
    background-color: #000;
    /* background: transparent url('../img/bgs/blackTile80.png') 0 0 repeat; */
}

header .row, 
header .column, 
header .columns, 
footer .row, 
footer .column, 
footer .columns { padding-top:0; padding-bottom:0; }

#zoomLogo {
    display: inline-block;
    width: 272px;
    height: 50px;
    background-position: -6px -50px;
}

header nav          { clear:both; }
header nav ul       { display:block; list-style:none; margin:0; padding:0; width:100%; text-align:center; }
header nav li       { display:inline-block; padding:9px 6px; margin:0; }
header nav a        { display:block; width:30px; text-indent:101%; white-space:nowrap; overflow:hidden; }
header .active a    { border-bottom: 2px solid #09d; }
header nav .icon    { display:inline-block; float:left; margin-right:6px; width:30px; height:30px; }

#workIcon       { background-position:-350px 0; }   .active #workIcon       { background-position:-350px -50px; }
#teamIcon       { background-position:-400px 0; }   .active #teamIcon       { background-position:-400px -50px; }
#aboutIcon      { background-position:-450px 0; }   .active #aboutIcon      { background-position:-450px -50px; }
#contactIcon    { background-position:-500px 0; }   .active #contactIcon    { background-position:-500px -50px; }
#autoIcon       { background-position:-550px 0; }   .active #autoIcon       { background-position:-550px -50px; }

/* footer */
footer {
    width: 100%; 
    padding: 12px 0;
    color: #fff;
    background-color: #000;
    /* background: transparent url('../img/bgs/blackTile.png') 0 0 repeat; */
}

.social .icon   { margin:6px; width:36px; height:36px; }
.socialLg .icon { margin:0 12px; width:48px; height:48px; }

#fbIcon     { background-position:-600px 0; }       #fbIcon:hover   { background-position:-600px -50px; }
#twIcon     { background-position:-650px 0; }       #twIcon:hover   { background-position:-650px -50px; }
#ytIcon     { background-position:-700px 0; }       #ytIcon:hover   { background-position:-700px -50px; }
#fbIconLg   { background-position:0 -150px; }       #fbIconLg:hover { background-position:0 -250px; }
#twIconLg   { background-position:-100px -150px; }  #twIconLg:hover { background-position:-100px -250px; }
#ytIconLg   { background-position:-200px -150px; }  #ytIconLg:hover { background-position:-200px -250px; }

/* pages
============================================================ */
.page           { width:100%; padding:100px 0; overflow-x:hidden; }
.content h1     { display:block; width:100%; clear:both; text-align:center; color:#09f; }

/* home page */
#home   { padding:80px 0 0 0; }
#videoContainer { display:block; top:80px; left:0; width:100%; }
#videoContainer img, #videoContainer video { width:100%; height:auto; }

/* slides
.slider { height:600px; padding:0; margin:0; color:#fff; font-weight:bold; font-size:24px; line-height:30px; }
.slide { height:200px; padding:250px 0 150px 0; background-position:center center; background-size:100% auto; }
.slick-dots li button:before { font-size: 9px; color: #000; }
.slick-dots li.slick-active button:before { color: #000; }

#slide1 { background-image:url('../img/bgs/color/chiBg.jpg'); }
#slide2 { background-image:url('../img/bgs/color/cloudGateBg.jpg'); }
#slide3 { background-image:url('../img/bgs/color/stadiumBg.jpg'); }
#slide4 { background-image:url('../img/bgs/color/lionBG.jpg'); }
 */

/* about page */
#about      { background-color:#fff; }
.quote      { text-align:center; font-size:18px; line-height:30px; margin:18px 0; }
#startQuote, 
#endQuote   { display:inline-block; width:30px; height:30px; }
#startQuote { background-position:-800px -250px; margin-right:12px; vertical-align:-3px; }
#endQuote   { background-position:-850px -250px; margin-left:12px; vertical-align:-12px; }

/* contact page */
#contact, #contact h1 { color:#fff; }

#contact a { 
    color:#fff;
    font-weight:normal;
    text-decoration:none;
}

.address {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-weight: 400;
    /* text-transform: uppercase; */
    font-size: 18px;
    line-height: 24px;
}

.address li         { padding:0; margin:0; min-height:24px; }
.address .wIcon     { line-height:36px; }
.address .icon      { height:36px; width:36px; float:left; margin:0 6px 0 0; }
.address .buttons   { text-align:left; }

#phoneIcon  { background-position:-800px 0; }
#faxIcon    { background-position:-850px 0; }
#emailIcon  { background-position:-900px 0; }

#emailText  { font-size:14px; }

input, textarea { width:100%; }
textarea        { min-height:200px; }

.grecaptcha-badge { z-index:1000; }

/* preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#000;
    z-index: 9999;
    text-align: center; 
}
.loader {
    width: 120px;
    height: 120px;
    background:transparent url('../img/zoomIcon.svg') center center no-repeat;
    background-size:100% auto;
    animation: spin 1s linear infinite;
    margin:300px auto;
}
@keyframes spin {
    0% {
      transform: rotate(0deg); }
    100% {
      transform: rotate(-360deg); } 
}


/* Media Queries (mobile first)
============================================================ */

/* extra small screens only */
@media only screen and (max-width: 623px) {
    
    .page       { padding-top: 140px; padding-bottom: 140px; }
    #home       { padding:140px 0 0 0; }
    .row        { padding-top:0; padding-bottom:0; }
    h1, .h1     { font-size:34px; line-height:40px; }
    h2, .h2     { font-size:28px; line-height:34px; }
    h3, .h3     { font-size:22px; line-height:28px; }
        
    #thumbnails { padding-left:6px; padding-right:6px; text-align:center; }
    #thumbnails .four, 
    #thumbnails .three, 
    #thumbnails .columns, 
    #thumbnails .padded { display:inline-block; padding:6px; width:130px; }
    .thumb { height:130px; background-size:140px 140px; }
    #work .overlay { display:none; }
    #team .overlay { display:none; }
    
    .teamCircle     { width:200px; height:200px; }
    .teamCircle a   { display:none; }
    .teamTitle      { display:block; width:100%; text-align:center; }
    .teamTitle:hover { color:#666; }
    #bios, .smBio   { display:none; }
    .smBio          { text-align:center; font-size:13px; line-height:15px; }

}

/* small screens and up */
@media only screen and (min-width: 624px) {
    
    #zoomLogo       { float:left; width:300px; background-position:0 0; }
    header nav      { float:right; clear:none; }
    .jumbo          { font-size:48px; }

    #autoButtons    { display:block; }

}

/* small screens only */
@media only screen and (min-width: 624px) and (max-width: 743px) {

    .three .thumb,
    .three .teamCircle  { height:126px; background-size:126px 126px; }
    .four .thumb,
    .four .teamCircle   { height:176px; background-size:176px 176px; }
    
    #bios p { font-size:13px; line-height:15px; }

} 

/* medium screens and up */
@media only screen and (min-width: 744px) {

    .slider { font-size:28px; line-height:34px; }
    
    #work .overlay  { display:block; }

    .quote  { font-size:24px; line-height:30px; margin:24px 0; }

    .teamCircle { width:100%; height:auto; }
    
    #team .overlay  { padding-top:40%; height:60%; }

    #contact .content   { padding-bottom:100px; }

    #emailText  { font-size:inherit !important; }

    footer {
        position: fixed;
        z-index: 999;
        left: 0;
        bottom: 0;
    }
    
}

/* medium screens only */
@media only screen and (min-width: 744px) and (max-width: 995px) {

    #brands li { height:40px; }

    .three .thumb,
    .three .teamCircle  { height:156px; background-size:156px 156px; }
    .four .thumb,
    .four .teamCircle   { height:216px; background-size:216px 216px; }

} 

/* large screens and up */
@media only screen and (min-width: 996px) {
    
    header nav a    { color:#fff; text-indent:0; font-size:12px; line-height:30px; width:auto !important; }
    
    #home           { min-height:550px;}
    #videoContainer { position:fixed; z-index:-1; top:80px; left:0; width:100%; margin:0; }

    #about      { background-image: url('../img/bgs/showroomCloseWhiteBg.jpg'); }
    #startQuote, 
    #endQuote   { display:inline-block; width:50px; height:50px; }
    #startQuote { background-position:-600px -250px; margin-right:12px; vertical-align:-14px; }
    #endQuote   { background-position:-700px -250px; margin-left:12px; vertical-align:-20px; }

    #work .overlay  { padding-top:35%; height:65%; }

    #contact { background-image: url('../img/bgs/showroomFarBlueBg.jpg'); }

}

/* large screens only */
@media only screen and (min-width: 996px) and (max-width: 1235px) {
    
    #brands li { height:40px; padding:30px; }

    .three .thumb,
    .three .teamCircle  { height:204px; background-size:204px 204px; }
    .four .thumb,
    .four .teamCircle   { height:284px; background-size:284px 284px; }


} 

/* extra large screens */
@media only screen and (min-width: 1236px) {

    header nav a    { font-size:14px; }
    
    #home { min-height:750px;}

    #brands li { height:60px; padding:36px; }

    .three .thumb,
    .three .teamCircle  { height:264px; background-size:264px 264px; }
    .four .thumb,
    .four .teamCircle   { height:364px; background-size:364px 364px; }
    
    .overlay .h3     { font-size:28px; line-height:34px; }
    .overlay .h4     { font-size:18px; line-height:24px; }
    .overlay .h5     { font-size:18px; line-height:24px; }

} 

/* retina high res devices */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

    #zoomLogo, .icon { 
        background-image: url('../img/zoomSprite.svg');
        background-size: 1000px 500px;
    }

}