@charset "UTF-8";

#loader {
    display: none;
}

.banner {
    width:728px;
    height:270px;
    background:#fff;
    overflow:hidden;
    display:block !important;
    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{
    top:90px;
    width:728px;
    height:90px;
    background:#000;
    box-sizing: border-box;
    border:1px solid #999;
    overflow:hidden;
}

#grayscale-placeholder{
    top: -26px;
    left: 465px;
    width: 341px;
    height: 149px;
	clip:rect(2px,360px,138px,170px); 
    transform:scale(.62);
    background:url(grayscaleplaceholder.jpg)
}

#color-placeholder{
    top:-14px;
    left:0;
    width:302px;
    height:182px;
    background:url(placeholder-medium.jpg) no-repeat;
    opacity:0;
}

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

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

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

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

#box-blue{
    bottom:0;
    right:0;
    width:310px;
    height:100px;
    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:175px;
    height:40px;
    bottom:-45px;
    left:318px;
    background:#ca3724;
    cursor:pointer;
    z-index: 12;
}

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

#references-container{
    width:393px;
    height:166px;
    top:200px;
    left:318px;
    background:#000;
    z-index: 11;
}

#references{
    margin:0 auto;
    left:16px;
    right:2px;
    width:337px;
    height:51px;
    top:60px;
    z-index: 4;
    background:url(references.png) no-repeat;
}

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

#close-reference-button {
  width:30px;
  height:30px;
  right: -15px;
  top:3px;
  background:url(closebtn.png) no-repeat top right;
  cursor:pointer;
  z-index: 15;
}

#copy-1{
    top:18px;
    left:11px;
    width:351px;
    height:57px;
    background: url(copy1.png) no-repeat;
}

#copy-2{
    top:21px;
    right:145px;
    width:109px;
    height:59px;
    background:url(copy2.png) no-repeat;
}

#copy-3{
    margin:0 auto;
    top:300px;
    left:128px;
    right:0;
    width:174px;
    height:47px;
    background: url(copy3.png) no-repeat;
}

#copy-4{
    bottom:-40px;
    left:583px;
    width:106px;
    height:30px;
    background: url(copy4.png) no-repeat;
}

#copy-5{
    top:30px;
    left:330px;
    width:153px;
    height:114px;
    background: url(copy5.png) no-repeat;
    opacity:0;
}

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

#play-button{
    left:83px;
    top:-22px;
    width:132px;
    height:132px;
    background:url(playbutton.png) no-repeat;
    opacity:0;
    transform:scale(.6);
    -webkit-transform:scale(.6);
    -moz-transform:scale(.6);
}

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

#expanded-blue-box{
    right:-300px;
    width:233px;
    height:180px;
    background:#8dd4d0;
    cursor:pointer;    
}

#cta{
    margin:0 auto;
    width:194px;
    height:150px;
    top:21px;
    right:0;
    left:0;
    background:url(cta.png) no-repeat; 
}

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

#mask-placeholder{
    width:319px;
    height:180px;
    top:500px;
    overflow:hidden;
}

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

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

#video-container{
    top:500px;
    width:319px;
    height:180px;
    background:#000;
}

#video{
    width:319px;
    height:180px;
}

#logo{
    width:92px;
    height:31px;
    left:18px;
    bottom:20px;
    background: url(logo.png) no-repeat;
}

#line-1{
    top:117px;
    width:0;
}

#line-2{
    top:135px;
    width:0;
}

#line-3{
    top:12px;
    width:0;
}

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

#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;
}

.direction-tr{
    top:0;
}

.direction-br{
    top:90px;
}

.direction-bl{
    top:90px;
}

.direction-tl{
    top:0;
}



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