@charset "UTF-8";
/* CSS Document */

ta,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
html{line-height:1;}
ol,ul{list-style:none !important;}
table{border-collapse:collapse;border-spacing:0}
caption,td,th{text-align:left;font-weight:400;vertical-align:middle}
blockquote,q{quotes:none !important;}
blockquote:after,blockquote:before,q:after,q:before{content:"";content:none !important;}
a img{border:none !important;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
  
/*#click-through,#container,.ab-pos{position:absolute;top:0;left:0;width:300px;height:250px}*/


.hide{visibility:hidden}
.gpu{backface-visibility:hidden;transform:translateZ(0);transform:rotate(0.01deg);will-change:transform}

img,div{position:absolute}

* {
    outline: none !important;;
}

a {
    outline: none !important;;
}

input:focus, textarea:focus {
    outline: none !important;;
}

div{
  position: absolute;
  top:0;
  width:0;
}

#body-copy1{
  top:0;
  left:0;
  width:276px;
  height:220px;
  background: url("spriteSheet.png") -338px -222px no-repeat;
  background-size: 900px 600px;
 
}

#box1, #box2, #box3{
  width:247px;
  height:289px;
  top: 127px;
  left:-276px;
  border: 10px #FFF solid;
  background-color: #e9e6d5;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
}

#box2{
  top:-175px;
  left:28px;
  width:243px;
  height:176px;
}

#box3{
  top:-190px;
  left:25px;
  width:248px;
  height:185px;
  opacity: 0;
}

#blurb{
  top:600px;
  left:0;
  width:300px;
  height:32px;
  background: url("spriteSheet.png") -600px -558px no-repeat;
  background-size: 900px 600px;
}

 #click-through {
  top: 0;
  left: 0;
  width: 300px;
  height: 600px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
       -o-box-sizing: border-box;
          box-sizing: border-box;
  background-color: transparent;
  border: 1px #000 solid;
  padding:0;
  margin:0;
  cursor: pointer;
}

#container {
  position: relative;
  width: 300px;
  height: 600px;
  overflow:hidden;
  /* comment out when approved 
    position: absolute;
    margin: -360px 0 0 -150px;
    top: 50%;
    left: 50%;
   comment out when approved */
  background: url("bkgd.jpg") 0 0 no-repeat;
  background-size: 300px 600px;
}

#cta-copy{
  top:0;
  left:0;
  width:100%;
  height:90px;
  background: url("spriteSheet.png") -645.4px -162.4px no-repeat;
  background-size: 900px 600px;
}

#cta-button{
  top:110px;
  left:90px;
  width:48px;
  height: 31px;
  border-radius: 8px;
  background-color: #9d002e;
  background-image: url("spriteSheet.png");
  background-position: -727.2px -253.3px;
  background-repeat: no-repeat;
  background-size: 900px 600px;
}

.image-wrapper{
  top:0;
  left:0;
  width:300px;
  height:600px;
}

#headline1 {
  top:0;
  left:0;
  width:274px;
  height:255px;
  background: url("spriteSheet.png") -45px -165px no-repeat;
  background-size: 900px 600px;
}

#headline2 {
  top: 0;
  left: 0;
  background: url("spriteSheet.png") -21px -341.5px no-repeat;
  background-size: 900px 600px;
  opacity: 0;
}

#layout{
  opacity:0.5;
}

#line{
  top:555px;
  left:74px;
  width:153px;
  height:1px;
  background-color: #9d002e;
  opacity: 0;
}

#logo{
  top:542px;
  left:0;
  width:300px;
  height:58px;
  background: url("spriteSheet.png") -600px -496px no-repeat;
  background-size: 900px 600px;
  -webkit-transform: scale(0.8);
     -moz-transform: scale(0.8);
      -ms-transform: scale(0.8);
       -o-transform: scale(0.8);
          transform: scale(0.8);
}

#rec-behind-logo{
  width:300px;
  height:140px;
  top:544px;
  left:0;
  background-color:#FFF;
} 