html, body{ margin: 0; padding:0; }
img, video, a, div{ position: absolute; }
a{ display:block; cursor:pointer; }

.center, #preloader-spinner{ margin:auto; top:0; left:0; bottom:0; right:0; }

/** preloader **/
.rotator {
        border: 5px solid #000;
        border-radius: 50%;
        border-top: 5px solid transparent;
    }

    .rotatorSpin {
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
    }

    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg);}
        100% { -webkit-transform: rotate(360deg);}
    }

    @keyframes spin {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(360deg);}
    }

#preloader, #adapt-ad{
    
    width:100%;
    right: 0;
	height:600px;
    
}

#preloader-spinner{ width: 40px; height: 40px; left: 300px; }


/** preloader end **/
#adapt-ad{ visibility:hidden; opacity:0; overflow: hidden; }

.container{ width: 300px; height: 600px; right: 0; top: 0; background-color: #f4f4f4; overflow: hidden; }

.mainImage{
    background-image: url(contracted.jpg);
    background-repeat: no-repeat;
    width: 450px;
    height: 600px;
    left: -75px;
    transform-origin: bottom center;
}

.expanded{
    width: 100%;
    height: 600px;
    background-image: url(expanded.jpg);
    background-position: top center;
    visibility: hidden;
}
.sprites{background-image:url(spritesheet.png);}
.close { width:71px; height:16px; background-position: 0px 0px;}
.cta { width:164px; height:36px; background-position: -86px 0px;}
.ctaExpand { width:160px; height:34px; background-position: -265px 0px;}
.fold { width:284px; height:39px; background-position: -440px 0px;}
.foldContracted { width:206px; height:28px; background-position: -739px 0px;}
.logo { width:193px; height:30px; background-position: 0px -54px;}
.subheading { width:195px; height:23px; background-position: -208px -54px;}
.logoContracted { width:114px; height:18px; background-position: -418px -54px;}
.tandcs { width:417px; height:16px; background-position: -547px -54px;}
.text { width:253px; height:51px; background-position: 0px -99px;}

/*contracted*/
.ctaExpand { left:0; top:208px; }
.foldContracted { left:0; top:115px; }
.logoContracted { left:20px; top:20px; }
.subheading { left:0; top:163px; }

.ctaExpand, .foldContracted, .subheading{
    margin: auto;
    left: 0;
    right: 0;
}

/*expanded*/
.cta, .fold, .logo, .text{
    left: 27px;
}

.logo{
    top: 26px;
}
.fold{
    top: 80px;
}
.text{
    top: 137px;
}
.cta{
    top: 213px;
}

.close{
    top: 16px;
    left: 507px;
}

.tandcs{
    bottom: 4px;
    left: 173px;
}

.cta, .ctaExpand{
    border: 1px solid #000;
    box-sizing: border-box;
}
.cta{ border-radius: 18px; background-position: -87px -1px;}
.ctaExpand{ border-radius: 17px; background-position: -266px -1px; }

.videoPlayer{
    width: 600px;
    height: 600px;
}

.ctaButton, .border{ width: 100%; height: 100%; }
.border{ box-sizing: border-box; border: 1px solid #000; }

.closeButton{ width: 72px;
    height: 20px;
    right: 22px;
    top: 16px;
    visibility: hidden;
}