@font-face {
    font-family: 'Dinot';
    src: url('font/DINOT-Medium.otf');
    src: url('font/aDINOTMedium_f_4411.eot'); /* IE9 Compat Modes */
    src: url('font/aDINOTMedium_f_4411.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/aDINOTMedium_f_4411.woff') format('woff'), /* Modern Browsers */
    url('font/aDINOTMedium_f_4411.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Dinot', Arial, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing:subpixel-antialiased;
    -webkit-backface-visibility:hidden;
    -webkit-transform: translate3d(0,0,0);
}

.wrapper {
    width: 300px;
    height: 250px;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    background-color: #fff;
    box-sizing: border-box;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    cursor: pointer;
    z-index: 10000;
    overflow: hidden;
    position:relative;
}

#banner {
    width: 298px;
    height: 250px;
    position: absolute;
    visibility: hidden;
    overflow: hidden;
}



/* logos */

.logo-big, .logo-small {
    position: absolute;
    /*background: url('logo-scion.svg') no-repeat;*/
}

.logo-big {
    width: 80px;
    height: 54px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 98px;
}

.logo-small {
    width: 52px;
    height: 37px;
    left: 235px;
    top: 205px;
}

#hashtag {
    position: absolute;
    /*background: url('txt-hashtag.svg') no-repeat;*/
    width: 49px;
    height: 20px;
    left: 12px;
    top: 223px;
    color:white;
    opacity: 0.4;
}

#hashtag-grey {
    position: absolute;
    /*background: url('txt-hashtag-grey.svg') no-repeat;*/
    width: 49px;
    height: 20px;
    left: 12px;
    top: 223px;
    color:#939598;
}



/* panels */
.white, .blue, .red {
    position: absolute;
    width: 400px;
    height: 248px;
    /*height: 100%;*/
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -ms-transform:skew(-20deg);
    margin-left: -200px;
    left: 50%;
    overflow: hidden;

}


.blue {
    /*background-color: #1d4e8f;*/
    /*background: #1d4e8f; !* Old browsers *!*/
    /*background: -moz-radial-gradient(center, ellipse cover,  #2b6bce 0%, #1d4e8f 80%); !* FF3.6-15 *!*/
    /*background: -webkit-radial-gradient(center, ellipse cover,  #2b6bce 0%,#1d4e8f 80%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: radial-gradient(ellipse at center,  #2b6bce 0%,#1d4e8f 80%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b6bce', endColorstr='#1d4e8f',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/
    z-index: 8;
}
.red {
    /*!*background-color: #d9272e;*!*/
    /*background: #d9272e; !* Old browsers *!*/
    /*background: -moz-radial-gradient(center, ellipse cover,  #fe0405 0%, #d9272e 80%); !* FF3.6-15 *!*/
    /*background: -webkit-radial-gradient(center, ellipse cover,  #fe0405 0%,#d9272e 80%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: radial-gradient(ellipse at center,  #fe0405 0%,#d9272e 80%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe0405', endColorstr='#d9272e',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/
    z-index: 9;
}
.white {
    /*!*background-color: #d9272e;*!*/
    /*background: #d9272e; !* Old browsers *!*/
    /*background: -moz-radial-gradient(center, ellipse cover,  white 0%, #e6e6e6 80%); !* FF3.6-15 *!*/
    /*background: -webkit-radial-gradient(center, ellipse cover,  white 0%,#e6e6e6 80%); !* Chrome10-25,Safari5.1-6 *!*/
    /*background: radial-gradient(ellipse at center,  white 0%,#e6e6e6 80%); !* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *!*/
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='white', endColorstr='#e6e6e6',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/
    z-index: 10;
}



/* text */
.clipped {
  clip: rect(0px, 480px, 250px, 0px);
}

#text1, #text2, #text3, #text4, #text5 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    -webkit-font-smoothing: subpixel-antialiased;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);


}
#mask1, #mask2, #mask3, #mask4 {
    width: 600px;
    height: 400px;
    position: absolute;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

#mask1 {
    z-index: 16;
}

#mask2 {
    z-index: 15;
}

#mask3 {
    z-index: 14;
}

#mask4 {
    z-index: 13;
}

#text1 {
    left:-164px !important;
    width: 220px;
    height: 38px;
    top: 46px;
    color:#fff;
    text-align: center;
    z-index: 16;
}

#text2 {
    width: 180px;
    height: 54px;
    top: 29px;
    left: -300px;
    color:#fff;
    text-align: center;
    z-index: 15;
}

#text3 {
    width: 200px;
    height: 13px;
    top: 48px;
    color:#fff;
    text-align: center;
    z-index: 14;
}

#text4 {
    width: 200px;
    height: 13px;
    top: 48px;
    text-align: center;
    z-index: 13;
}

#text5 {
    width: 180px;
    top: 84px;
    font-size: 13px;
    font-weight: bold;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 12;
}


/* cars */
/*.car-body, .wheel, .shadow, #car1, #car2, #car3, #car4, #car5 {*/
    /*background: url('sprites.png') no-repeat;*/
/*}*/

/* iM */
#iM {
    position: absolute;
    width: 288px;
    height: 94px;
    left: 6px;
    top: 94px;
    z-index: 11;
}
#iM .car-body {
    width: 288px;
    height: 94px;
    background-position: 0 -200px;
    position: absolute;

}

#iM .wheel {
    position: absolute;
    background-position: -288px -200px;
    width: 45px;
    height: 45px;
    /*top: 57px;*/
}

/*#iM .rear {*/
    /*left: 29px;*/
/*}*/
/*#iM .front {*/
    /*left: 211px;*/
/*}*/

.shadow {
    position: absolute;
    background-position: 0 0;
    width: 295px;
    height: 15px;
    left: 0;
    top: 88px;
    opacity: 0.6;
    background-blend-mode: multiply;
}



/* frs */
#frs {
    /*visibility: hidden;*/
    position: absolute;
    width: 282px;
    height: 89px;
    left: 6px;
    top:100px;
    z-index: 10;
}
#frs .car-body {
    width: 282px;

    height: 89px;
    background-position:  0 -15px;
    position: absolute;

}

#frs .wheel {
    position: absolute;
    background-position: -325px -15px   ;
    width: 45px;
    height: 45px;
    /*top: 46px;*/
}

/*#frs .rear {*/
    /*left: 25px;*/
/*}*/
/*#frs .front {*/
    /*left: 205px;*/
/*}*/

/*#frs .shadow {*/
    /*top: 77px;*/
/*}*/


/* iA*/

#iA {
    position: absolute;
    width: 2911px;
    height: 100px;
    left: 6px;
    top: 85px;
    z-index: 10;
}
#iA .car-body {
    width: 291px;
    height: 99px;
    background-position: 0 -102px;
    position: absolute;

}

#iA .wheel {
    position: absolute;
    background-position: -288px -200px;
    width: 45px;
    height: 45px;
    /*top: 57px;*/
}

/*#iA .rear {*/
    /*left: 37px;*/
/*}*/
/*#iA .front {*/
    /*left: 218px;*/
/*}*/

/* end frame */

#endframe {
    position: absolute;
    width: 300px;
    height: 250px;

}

#button {
    position: absolute;
    left: 11px;
    top: 205px;
    background-color: #1d4e8f;
    border-radius: 4px;
    z-index: 1000;
}

.cta-label {
    position: relative;
    /*background: url('txt-cta.svg') no-repeat;*/
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    line-height: 12px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 12px;
    width: 100%;
    text-align: center;
    /*text-transform: uppercase;*/
    color:white;
}



/* GenOne logo */

.genone {
    position: absolute;
    width: 147px;
    height: 77px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 31px;
}



/* disclaimer */

#disclaimer-btn {
    position: absolute;
    font-family: sans-serif;
    font-size: 0.4375em; /* 7pt */
    text-decoration: underline;
    color: #4f4f4f;
    left: 180px;
    top: 221px;
    z-index: 1000;
    display: none;
}



#disclaimer-panel{
    position: absolute;
    background-color: #ccc;
    width: 300px;
    height: 100px;
    top: 250px;
    z-index: 2000;
    overflow-y: auto;
}

#disclaimer-panel p {
    margin: 0;
    padding: 5px 5px 5px 15px;
    font-family: sans-serif;
    font-size: 8px;
}
#disclaimer-x {
    width: 20px;
    font-family: sans-serif;
    font-size: 8px;
    font-weight: bolder;
    padding: 5px;
}

#disclaimer-text {
    padding:0 5px;
    font-size:8px;
}


/* scion family */

#car1, #car2, #car3, #car4, #car5 {
    /*visibility: hidden;*/
}

.car-wrapper {
    width: 300px;
    height: 250px;
    position: absolute;
}

#endframe {
    opacity:0;
    z-index: 10;
    transition:all 2s ease;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
}

.genone, #text5, .cta, .logo-small {
    z-index: 1000;
}