/***********************
 * Global styles
 **********************/
/*@font-face {*/
    /*font-family: AudiBold;*/
    /*src: url('../fonts/auditype-bold.woff');*/
/*}*/

@font-face {
    font-family: AudiExtendedBold;
    src: url('../fonts/auditype-extendedbold.woff');
}

@font-face {
    font-family: AudiNormal;
    src: url('../fonts/auditype-normal.woff');
}

@font-face {
    font-family: AudiExtendedNormal;
    src: url('../fonts/AudiType-ExtendedNormal.woff');
}

* {
  margin: 0; padding: 0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
*.ad-size{ 
  width: 100%; height: 100%;
}
*.hidden{ 
  opacity: 0;
}
sup{
  font-size: 0.5em;
}

body{
  margin: 0;
  padding: 0;
  font-family: 'AudiExtendedBold', Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 12px;
  font-style: normal;
}

div#container{
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  cursor: pointer;
  background: transparent no-repeat;
  background-position: center center;
  -webkit-transition: opacity 0.3s linear;
     -moz-transition: opacity 0.3s linear;
      -ms-transition: opacity 0.3s linear;
       -o-transition: opacity 0.3s linear;
          transition: opacity 0.3s linear;
}

#click-container {
  width: 100%;
  height: 50px;
  position: absolute;
  top:0;
  left:0;
  z-index: 101;
}

#arrow:after{
  content: '\203A';
  font-size: 1.5em;
  top: 2px;
  left: 4px;
  position: relative;
  display: inline-block;
  color: #d3224e;
}


/***********************
 * Layout styles
 **********************/
#header {
    width:100%;
    position: relative;
    height:50px;
}

#wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    left:300px;
    transition:left .5s ease-in-out;
}

.frame {
    width:298px;
    height: 248px;
    position: relative;
    float: left;
}

.content-box {
    width:100%;
    height:200px;
    position: relative;
}

.image {
    width:100%;
    height:100%;
    background-size: cover;
}

.content {
    top: 50%;
    transform: translateY(-45%);
    -webkit-transform: translateY(-45%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
    -ms-transform: translateY(-45%); /* IE 9 */
    position: relative;
    /*line-height: normal;*/
    letter-spacing: -1.7px;
    left: 14px;
}

.footer {
    height: 48px;
    width: 298px;
    position: absolute;
    bottom:0;
}

#wrapper .footer {
    z-index: 100;
}

#disclaimer {
    color: #6d7579;
    font-size: 8.5px;
    font-family: 'AudiNormal', Helvetica, Arial, "Lucida Grande", sans-serif;
    position: relative;
    transition: opacity .5s ease-in-out;
}

.logo, #logo2 {
    position: absolute;
    top:0;
    left:0;
    width: 100%; height: 100%;
    z-index: 2;
}

#logo2 {
    z-index: 1;
}

#cta {
    position: relative;
    transition: opacity .5s ease-in-out;
    /*float: left;*/
}

.cta {
    position: relative;
    z-index: 1000;
}

.frame.end-frame {
    width: 100%;
    height: 100%;
    position: relative;
    float: left;
    top: 0;
}

#ef-content {
    position: absolute;
    width: 270px;
}

#ef-title {
    font-size: 15px;
    position: relative;
    /*color: #434c53;*/
    font-weight:bold;
    font-family: 'AudiExtendedNormal', Helvetica, Arial, "Lucida Grande", sans-serif;
}

#ef-copy, #ef-details {
    font-size: 20px;
    line-height: normal;
    position: relative;
    letter-spacing: -1px;
    /*color: #434c53;*/
}

#ef-details {
    z-index: 1000;
}

#ef-alt-image {
    width:100%;
    height:100%;
    position: absolute;
    background-size: cover;
    z-index:0;
}

#ef-click {
    position: absolute;
    width:100%;
    height:156px;
    top:50px;
    z-index: 100;
}
.disclaimer {
    width: 64px;
    height: 10px;
    position: relative;
    z-index: 1001;
}

#overlay {
    position: absolute;
    width:300px;
    height:250px;
    top: 250px;
    z-index: 1000;
    transition: top .3s ease-in-out;
    color:white;
    font-family: 'AudiNormal', Helvetica, Arial, "Lucida Grande", sans-serif;
}

#overlay span {
    font-size: 12px;
    font-family: 'AudiBold', Helvetica, Arial, "Lucida Grande", sans-serif;
}

#overlay-content {
    top: 30px;
    position: relative;
    width: 220px;
    margin: 0 auto;
    height: 200px;
    overflow: auto;
    font-size: 10px;
}

#close {
    right: 3px;
    position: absolute;
    padding: 5px;
}


.open {
    top: 0 !important;
}

#replay {
    position: absolute;
    z-index: 999;
    opacity: 0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -ms-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

#replay img {
    width: 17px;
}

.slick-list, .slick-track {
    height:100%;
}

.slick-slide:focus { outline: none; }
.slick-slide { outline: none !important;}
.slick-slide a { outline: none !important;}