@charset "UTF-8";

.banner {
    width:700px;
    height:600px;
    background:#fff;
    overflow:hidden;
    font-family:Arial;
    color:#848689;
}

#btn-exit{
    width:100%;
    height:100%;   
    cursor:pointer;
    opacity:0;
	position:absolute;
	top:0;
}

#btn-exit-expand{
    width:100%;
    height:100%;   
    cursor:pointer;
    opacity:0;
}

#collapsed-panel{
    left:200px;
    width:300px;
    height:600px;
    background:#000;
    box-sizing:border-box;
    border:1px solid #999;
    overflow:hidden;
}

#grayscale-placeholder{
    position:absolute;
    clip:rect(32px 346px 181px 350px);
    top:262px;
    left:-40px;
    transform:scale(.95);
    -webkit-transform:scale(.95);
    -moz-transform:scale(.95);
    background:url(grayscaleplaceholder.jpg) no-repeat;
    width:392px;
    height:220px;
}

#color-placeholder{
    top:-19px;
    left:-18px;
    width:392px;
    height:194px;
    background:url(placeholder-medium.jpg) no-repeat;
    opacity:0;
}

#expanded-panel{
    width:500px;
    height:600px;
    display:none;
    border:1px solid #999;
    box-sizing:border-box;
    overflow:hidden;
    background: #fff;
}

#box-white{
    top:350px;
    width:500px;
    height:170px;
    background:#fff url(diagonalslines.png) no-repeat;
}

#red-line{
    width:1px;
    height:5px;
    background:#ca3724;
	top:0;
}

#red-line-bottom{
    width:0px;
    height:3px;
    bottom:0;
    background:#ca3724;
}

#red-line-expand{
    bottom:243px;    
    width:1px;
    height:5px;
    right:0;
    background:#ca3724;
}

#box-blue{
    bottom:-160px;
    width:300px;
    height:159px;
    background:#8dd4d0;
}

#expand-button{
    width:132px;
    height:24px;
    text-align:center;
    top:204px;
    right:33px;
    border:1px solid #fff;
    opacity:0;
    cursor:pointer;
}

#references-button{
    width:499px;
    height:31px;
    bottom:-45px;
    right:0;
    background:url(references-bg.png) repeat-x;
    cursor:pointer;
}

#reference-title{
    margin:0 auto;
    top:11px;
    left:0;
    right:0;
    width:97px;
    height:16px;
    background:url(reference-title.png) no-repeat;
    cursor:pointer;
}

#references-container{
    width:498px;
    height:201px;
    bottom:-205px;
    background:#000;
}


#references{
    left:40px;
    width:386px;
    height:52px;
    top:82px;
    background:url(references.png) no-repeat;
}

#collapse-button {
    width:54px;
    height:54px;
    right:0;
    top:0;
    background:url(closebtn.png) 40px 0px no-repeat;
    cursor:pointer;
    z-index:100;
}

#close-reference-button {
    width: 25px;
    height: 25px;
    right: 0px;
    top: 0;
    background: url(closebtn.png) no-repeat right top;
    cursor:pointer;
}

#copy-1{
    top:-300px;
    left:31px;
    width:251px;
    height:225px;
    background:url(copy1.png) no-repeat;
}

#copy-2{
    margin:0 auto;
    bottom:40px;
    left:5px;
    right:0;
    width:235px;
    height:81px;
    background:url(copy2.png) no-repeat;
}

#line{
    margin:0 auto;
    bottom:91px;
    left:-6px;
    right:0;
    width:19px;
    height:2px;
    background:#fff;
}

#line2{
    margin:0 auto;
    bottom:-13px;
    left:-6px;
    right:0;
    width:19px;
    height:2px;
    background:#fff;
}

#copy-3{
    margin:0 auto;
    top:300px;
    left:-16px;
    right:0;
    width:218px;
    height:73px;
    background:url(copy3.png) no-repeat;
    opacity:0;
}

#copy-4{
    margin:0 auto;
    bottom:30px;
    left:-2px;
    right:0;
    width:215px;
    height:12px;
    background:url(copy4.png) no-repeat;
    opacity:0;
}

#copy-5{
    top:373px;
    left:50px;
    width:348px;
    height:101px;
    background:url(copy5.png) no-repeat;
}

#copy-6{
    margin:0 auto;
    bottom:21px;
    left:-173px;
    right:0;
    width:234px;
    height:29px;
    background:url(copy6.png) no-repeat;
}

#phase-3{
    margin:0 auto;
    bottom:20px;
    left:-517px;
    right:0;
    width:208px;
    height:197px;
    background:url(phase3.png) no-repeat;
}

#play-button_ex {
    left: 0;
    top: 0px;
    width: 498px;
    height: 280px;
    background: url(playbutton.png) center center no-repeat;
    opacity: 1;
    z-index: 2;
    display: none;
    cursor: pointer;
}

#expanded-blue-box{
    top:175px;
    width:500px;
    height:70px;
    background:#8dd4d0;
    cursor:pointer;
    display:none;    
}

#cta{
    width:120px;
    height:33px;
    bottom:16px;
    right:48px;
    background:url(cta.png); 
}

#mask-placeholder{
    width: 500px;
    height: 280px;
    overflow:hidden;
}


#placeholder{
    width: 500px;
    height: 280px;
    background: url(placeholder.jpg) no-repeat;
    cursor: pointer;
}

.play-button{
    margin:0 auto;
    left:0;
    right:0;
    top:15px;
    width:142px;
    height:142px;
    background:url(playbutton.png) no-repeat;
    opacity:0;
}

#placeholder .play-button{
   opacity:1;
   left:-70px;
   top:75px;
   transform:scale(1.43);
   -webkit-transform:scale(1.43);
   -moz-transform:scale(1.43);
}

#sound-icon{
    top:16px;
    left:40px;
    width:161px;
    height:161px;
    background:url(sound.png) no-repeat;
    cursor:pointer;
    opacity:0;
}

#replay-icon{
    top:58px;
    left:170px;
    width:161px;
    height:161px;
    background:url(replay.png) no-repeat;
    cursor:pointer;
    display:none;
}

#video-container{
    top:0;
    width:500px;
    height:280px;
    background:#000;
}

#video{
    width:500px;
    height:280px;
}

#logo-area{
    width:500px;
    height:86px;
    bottom:-90px;
    background:#000;
    cursor:pointer;
}

#logo{
    margin:0 auto;
    width:216px;
    height:65px;
    right:2px;
    left:0;
    bottom:4px;
    background:url(logo.png) no-repeat;
}

#arrow-up {
    margin:0 auto;
    left:0;
    right:0;
    bottom:0;
    width:0px;
    height:0px;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-bottom:5px solid #ca3724;
    opacity:0;
}

#mask-line-1{
    top:35px;
    left:368px;
    width:47px;
    height:1px;
}

#mask-line-2{
    top:53px;
    left:331px;
    width:119px;
    height:1px;
}

#line-3{
    top:24px;
}

.line{
    width:0;
    margin:0 auto;
    left:0;
    right:0;
    height:1px;
    background:#fff;
}

.direction-tr{
    left:200px;
}

.direction-br{
    left:200px;
}

.direction-bl{
    left:0; 
}

.direction-tl{
    left:0; 
}



video::-internal-media-controls-download-button {
    display:none;
}