@charset "UTF-8";

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

#container{ width:900px; height:250px; overflow:hidden; top:0; left:0; }
#collapsed{ width:298px; height:248px; border:1px solid #000; left:300px; top:0; display:none; background-color:#fff; background:url(bg.jpg) no-repeat; -webkit-perspective: 500px; perspective: 500px; }
#expanding{ width:598px; height:248px; 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:0px; left:300px; top:0; width:298px; height:248px; background-color:#FFF; background-image:url(preloader.gif); background-repeat:no-repeat; background-position:center; border:#000 solid 1px; }

/* Collapsed elements */
#expandingButton{ width:100%; height:64%; cursor:pointer; background:rgba(0,0,0,0); z-index: 100; }
#sunlight{ top: 42px; left: 1px; }
#copy1_mask{ width:298px; height:147px; overflow:hidden; }
#mask2{ width:298px; height:159px; overflow:hidden; }
#line1{ top:132px; left:74px; transform:scale(0.88); -webkit-transform:scale(0.88); }
#copyblock2a{ top: 53px; left: 79px; opacity:0; }
#copyblock2b{ top: 71px; left: 97px; opacity:0; }
#copyblock3{ top: 35px; left: 48px; opacity:0; }
#copyblock4{ top: 37px; left: 66px; opacity:0; }
#person1{ top: 91px; left: 83px; opacity:0; }
#person1_duplicate{ top: 91px; left: 83px; opacity:0; }
#person2{ top: 91px; left: 117px; opacity:0; }
#person3{ top: 91px; left: 156px; opacity:0; }
#col_cta{ top: 159px; left: 75px; }
#cta_collapsed{background-position:0px 0px; width:160px; height:37px; top:111px; left:74px; overflow: hidden;}
#CTAcol-over{ left:-140px;}

#clickTag2{ top: 161px; left: 85px; width: 115px; height: 16px; background:rgba(0,0,0,0); cursor:pointer; }
#clickTag3{ top: 175px; left: 50px; 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: 298px;
    height: 40px;
    top: 175px;
    left: 26px;
    cursor: pointer;
/*    background: yellow;*/
}

.clickTag5, .clickTag4{
	text-decoration: underline;
	cursor:pointer;
}

/* Expanded Elements */
#exp_watch_more_videos{ top: 176px; left: 26px; width: 297px; height: 39px; background:rgba(0,0,0,0); overflow: hidden; cursor:pointer; }
#CTAexp-over{ left:-150px; top:-15px;}

#clickTag6{ top: 223px; left: 110px; width: 120px; height: 13px; background:rgba(0,0,0,0); cursor:pointer; }
#clickTag7{ width: 95px; height: 12px; top: 234px; left: 80px; background:rgba(0,0,0,0); cursor:pointer; }
#exp_logo_exit{ width: 84px; height: 62px; left: 483px; top: 13px; background:rgba(0,0,0,0); cursor:pointer; }
#closeButton{ top:5px; right:5px; cursor:pointer; }

#mainVideo{ display:block; position:absolute; top:6px; left:26px; background:#000; }
#videoPoster{ top:6px; left:26px; }

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