* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -moz-tap-highlight-color: rgba(255, 255, 255, 0);
    -ms-tap-highlight-color: rgba(255, 255, 255, 0);
    tap-highlight-color: rgba(255, 255, 255, 0);

    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    vertical-align: baseline;
    font-weight: inherit;
    font-family: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: none;
    border: none;
    padding: 0px;
    margin: 0px;
}

html,
body {
    line-height: 1em;
    height: 100%;
    text-rendering: optimizeLegibility;
    font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
}

div {
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#main {
    border: 1px solid #000000;
    opacity: 0;
    position: absolute;
    overflow: hidden;
    cursor: pointer;
    left: 0px;
    top: 0px;
    background-color: black;
    height: 248px;
    width: 298px;

    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;

}

.disclaimer{
        /* opacity: 1; */
    left: 12px;
    bottom: 12px;
    position: absolute;
    /* right: 12px; */
    /* width: 300px; */
    text-align: center;
    font-size: 8px;
    text-decoration: underline;
    /* border-bottom: 1px solid; */
    line-height: .89em;
    display: none;
    color: #fff;
    font-family: 'audi-normal', sans-serif;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

.threesec {
    transition: all .3s linear; 
    -webkit-transition: all .3s linear; 
    -moz-transition: all .3s linear; 
    -ms-transition: all .3s linear; 
    -o-transition: all .3s linear;  
}

#overlay {
    z-index: 100;
    width: 268px;
    height: 178px;
    background: #666666;
    color: #fff;
    padding: 50px 15px 20px 15px;
    top: 100%;
    position: absolute;
}

#overlay > p {
    margin: 0;
    height: 180px;
    font-family:'audi-normal';
    font-size: 11px;
    overflow: auto;
}

#close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-image: url(../images/close.png);
    background-repeat: no-repeat;
    cursor: pointer;
}

.clickTag {
    height: 248px;
    width: 298px;
    left: 0px;
    top: 0px;
    position: absolute;
}

#outer{
    position: absolute;
    color: #ffffff;
    height: 250px;
    width: 300px;
    left: -1px;
    top: -1px;
}


#inner {
    position: absolute;
    background-color: black;
    overflow: hidden;
    display: block;
    color: #ffffff;
    height: 125px;
    width: 300px;
    left: -1px;
    top: 124px;


}


#inner.innerShadow {
    animation: shady .63s linear;
    -webkit-animation: shady .63s linear;
    -ms-animation: shady .63s linear;
    -moz-animation: shady .63s linear;
    -o-animation: shady .63s linear;
}

@-webkit-keyframes shady {
  0% {box-shadow: 0px 0px 0px transparent}
  25% {box-shadow: 0px 0px 10px black, 0 0 4px black, 0 0 4px black}
  75% {box-shadow: 0px 0px 10px black, 0 0 4px black, 0 0 4px black}
  0% {box-shadow: 0px 0px 0px transparent}
}

@keyframes shady{
  0% {box-shadow: 0px 0px 0px transparent}
  25% {box-shadow: 0px 0px 10px black, 0 0 4px black, 0 0 4px black}
  75% {box-shadow: 0px 0px 10px black, 0 0 4px black, 0 0 4px black}
  0% {box-shadow: 0px 0px 0px transparent}
}

.guide{
    top: 0;
    left: 0;
    opacity: 0;
    width: 300px;
    height: 250px;
    position: absolute;
}


#outer .background-image {
    -webkit-transition: transform 4s linear;
    -o-transition: transform 4s linear;
    -ms-transition: transform 4s linear;
    -moz-transition: transform 4s linear;
    transition: transform 4s linear;
}

.background-image {
    position: absolute;
    left: 0px;
}


#outer .backgroundOne {
    position: absolute;
    height: 125px;
    width: 300px;
    left: 0px;
    top: 0px
}

#outer .backgroundTwo {
    position: absolute;
    height: 125px;
    width: 300px;
    left: 0px;
    top: 125px
}

.headline {
    position: absolute;
    width: 300px;
    top: 0px;
    text-align: center;
    display: block;
    opacity: 1;

}

.headline.hide {
    opacity: 0;

    
}



.headline-upper {
    /* text-align: ; */
    -webkit-transform: matrix(1, 0, 0, 1, -302, 0) rotate(0.01deg);
    -ms-transform: matrix(1, 0, 0, 1, -302, 0) rotate(0.01deg);
    -moz-transform: matrix(1, 0, 0, 1, -302, 0) rotate(0.01deg);
    -o-transform: matrix(1, 0, 0, 1, -302, 0) rotate(0.01deg);
    transform: matrix(1, 0, 0, 1, -302, 0) rotate(0.01deg);
    /* color: transparent; */
}


.headline-lower {
    /* text-align: left; */
    -webkit-transform: matrix(1, 0, 0, 1, 302, 0) rotate(0.01deg);
    -ms-transform: matrix(1, 0, 0, 1, 302, 0) rotate(0.01deg);
    -moz-transform: matrix(1, 0, 0, 1, 302, 0) rotate(0.01deg);
    -o-transform: matrix(1, 0, 0, 1, 302, 0) rotate(0.01deg);
    transform: matrix(1, 0, 0, 1, 302, 0) rotate(0.01deg);
}



.headline-text {
    font-family: "audi-extendedbold", sans-serif;
    letter-spacing: -0.05em;
    line-height: 1.095em;
    font-size: 21px;
    opacity: 0;
    font-style: italic;
    position: relative;
    width: 210px;
    display: inline-block;

    -webkit-transition:
    text-shadow .25s ease-out ,
    font-style .25s ease-out ,
    color .25s ease-out ,
    opacity .15s ease-out ;
    -o-transition:
    text-shadow .25s ease-out ,
    font-style .25s ease-out ,
    color .25s ease-out ,
    opacity .15s ease-out ;
    -moz-transition:
    text-shadow .25s ease-out ,
    font-style .25s ease-out ,
    color .25s ease-out ,
    opacity .15s ease-out ;
    transition:
    text-shadow .25s ease-out ,
    font-style .25s ease-out ,
    color .25s ease-out ,
    opacity .15s ease-out ;
    -ms-transition:
    text-shadow .25s ease-out ,
    font-style .25s ease-out ,
    color .25s ease-out ,
    opacity .15s ease-out ;
    color: transparent;
    text-shadow: 0 0 5px rgba(255,255,255);

    
}



.headlineEnd {
    position: absolute;
    width: 300px;
    top: 0px;
    left: 1px;
    display: block;
    text-align: left;
    opacity: 1;



}

.headlineEnd.hide {
    opacity: 0;
}



.headline-endText {
    font-family: "audi-extendedbold", sans-serif;
    letter-spacing: -0.08em;
    line-height: .79em;
    word-spacing: .06em;
    font-size: 53px;
    position: relative;
    /* width: 300px; */
    display: inline-block;


    text-shadow:
    -0.01em -0.01em 0 #d8dada, 0.01em -0.01em 0 #d8dada, -0.01em 0.01em 0 #d8dada, 0.01em 0.01em 0 #d8dada;
}




.inline_mod{
    display: inline-block;
    height: 38px;
    top: 4px;
    position: relative;
    left: 14px;

}

.fullframe_mod{
    display: block;
    height: 250px;
    width: 300px;
    top: 0px;
    position: relative;
    left: 0px;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
  
}

.modelLockup {
    max-width: 400px;
    max-height:  69px;
    top: 139px;
    left: 185px;
    position: absolute;
    display: block;
    opacity: 0;

   
}



.logo_text{
    display: inline-block;
    position: relative;
    font-size: 8px;
    color: white;
    line-height: 1.4em;
    left: 4px;
    text-align: center;
    font-family: 'audi-extendedbold', sans-serif;
}

.cta{
    font-size: 12px;
    font-family: 'audi-extendedbold', sans-serif;
    left: 12px;
    bottom: 12px;
    position: absolute;
    opacity: 0;

    -webkit-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.logo{
    position: absolute;
    left: 12px;
    top: 12px;
    display: block;
}
#logo_img{
    max-height: 20px;
    width: auto;
    color: white;
    /* fsill: #fff; */
    display: inline-block;
}

.replay{
    /* bottom: 12px; */
    position: absolute;
    left: 257px;
    top: 227px;
    font-size: 9px;
    border-bottom: 1px solid;
    line-height: .89em;
    /* display: none; */
    color: #fff;
    font-family: 'audi-normal', sans-serif;
    opacity: 0;
    z-index: 1;

    -webkit-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

sup {
    position: relative;
    font-size: .5em;
    top: -0.65em;
}
/* 
_::-webkit-full-page-media, _:future, :root .headline-endText{

  text-shadow:
    -0.02em -0.02em 0 #d8dada, 0.02em -0.02em 0 #d8dada, -0.02em 0.02em 0 #d8dada, 0.02em 0.02em 0 #d8dada;

} */

@media only screen and (-webkit-min-device-pixel-ratio: 1) {
     ::i-block-chrome, .headline-endText { 

    text-shadow: -0.02em -0.02em 0 #d8dada, 0.02em -0.02em 0 #d8dada, -0.02em 0.02em 0 #d8dada, 0.02em 0.02em 0 #d8dada;


    }

@media not all and (min-resolution:.001dpcm) { @media {

    .headline-endText { 

    text-shadow: -0.02em -0.02em 0 #d8dada, 0.02em -0.02em 0 #d8dada, -0.02em 0.02em 0 #d8dada, 0.02em 0.02em 0 #d8dada;


    }
}}