@charset "UTF-8";

div, img{ position:absolute; display:block; margin:0; padding:0; }
video::-webkit-media-controls-fullscreen-button {
    display: none;
}

#container{ width:728px; height:630px; overflow:hidden; top:0; left:0; }
#collapsed{ width:726px; height:88px; border:1px solid #000; left:0px; top:270px; display:none; background-color:#fff; background:url(bg.jpg) no-repeat; -webkit-perspective: 500px; perspective: 500px; }
#expanding{ width:726px; height:358px; border:1px solid #000; display:none; background-color:#fff; background-image:url(expBackground.jpg); background-repeat:no-repeat; overflow:hidden; z-index:5000; }
#preloader{ position:absolute; top:270px; left:0px; width:726px; height:88px; background-color:#FFF; background-image:url(preloader.gif); background-repeat:no-repeat; background-position:center; border:#000 solid 1px; }

/* Collapsed elements */
#expandingButton{ width: 486px; height: 73px; cursor:pointer; background:rgba(0,0,0,0); z-index: 100; }
#sunlight{ top: 42px; left: 1px; }
#copy1_mask{ width: 486px; height: 68px; overflow:hidden; }
#mask2{ width: 417px; height: 73px; overflow:hidden; }
#line1{ top: 129px; left: 95px; transform:scale(0.88); -webkit-transform:scale(0.88); }
#copyblock2a{ top: 17px; left: 85px; opacity:0; }
#copyblock2b{ top: 17px; left: 85px; opacity:0; }
#copyblock3{ top: 16px; left: 85px; opacity:0; }
#copyblock4{ top: 8px; left: 150px; opacity:0; }
#person1{ top: 0px; left: 72px; opacity:0; }
#person1_duplicate{ top: 91px; left: 83px; opacity:0; }
#person2{ top: -1px; left: 135px; opacity:0; transform:translate(20px, 0px); -webkit-transform:translate(20px, 0px); }
#person3{ top: 0px; left: 70px; opacity:0; transform:translate(20px, 0px); -webkit-transform:translate(20px, 0px); }
#col_cta{ top: 4px; left: 192px; opacity:0; }
#cta_collapsed{background-position:0px 0px; width:160px; height:37px; top:111px; left:74px; overflow: hidden;}
#CTAcol-over{ left:-140px;}

#clickTag2{ top: 72px; left: 92px; width: 115px; height: 16px; background:rgba(0,0,0,0); cursor:pointer; }
#clickTag3{ top: 75px; left: 240px; width: 95px; height: 11px; background:rgba(0,0,0,0); cursor:pointer; }

#signoff { text-align:justify; margin-bottom:0; height:15px; overflow:hidden; }
#signoff:after{ content: ""; display: inline-block; width: 100%;}
#signoff span{ display:inline-block; }

/* CLICKTAGS */

#clickTag1 {
    position: absolute;
    width: 310px;
    height: 40px;
    top: 290px;
    left: 100px;
    cursor: pointer;
}
.clickTag5, .clickTag4{
	text-decoration: underline;
	cursor:pointer;
}
/* Expanded Elements */
#exp_watch_more_videos{ top: 289px; left: 105px; width: 297px; height: 36px; background:rgba(0,0,0,0); overflow: hidden; cursor:pointer; }
#CTAexp-over{ left:-150px; top:-15px;}

#clickTag6{ top: 342px; left: 92px; width: 115px; height: 13px; background:rgba(0,0,0,0); cursor:pointer; }
#clickTag7{ width: 95px; height: 12px; top: 342px; left: 238px; background:rgba(0,0,0,0); cursor:pointer; }
#exp_logo_exit{ width: 88px; height: 62px; left: 608px; top: 14px; background:rgba(0,0,0,0); cursor:pointer; }
#closeButton{ top:5px; right:5px; cursor:pointer; }

#mainVideo{ display:block; position:absolute; top: 17px; left: 12px; background:#000; border:1px solid #3f47b3; }
#videoPoster{ top: 18px; left: 13px; }

	/* CSS classes to determine expansion direction */
	.direction-tl { left: 0px; top: 0px; }
	.direction-tr { left: 0px; top: 0px; }
	.direction-bl { left: 0px; top: 270px; }
	.direction-br { left: 0px; top: 270px; }