@charset "UTF-8";

.banner {
    width:700px;
    height:250px;
    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:250px;
    background:#000;
    box-sizing: border-box;
    border:1px solid #999;
    overflow:hidden;
}

#grayscale-placeholder{
	position: absolute;
	clip: rect(21px, 147px, 158px, 147px); transform:scale(0.73);
    top: 108px;
    left: 53px;
}

#color-placeholder{
    width:302px;
    height:182px;
    background: url(placeholder-medium.jpg) no-repeat;
    opacity:0;
	transform:translate3d(0,0,0);
    display: none;
}

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

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

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

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

#box-blue{
    bottom:0;
    right:0;
    width:0;
    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;
    right:0;
    background:#ca3724;
    cursor:pointer;
}

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

#references-container{
    width:382px;
    height:166px;
    top:200px;
    left:0px;
    background:#000;
}

#references-container-mask{
    width:395px;
    height:166px;
    top:0px;
    right:0px;
	overflow:hidden;
	display:none;
}


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

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

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

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

#copy-2{
    top:250px;
    left:17px;
    width:224px;
    height:71px;
    background:url(copy2.png) no-repeat;
}

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

#copy-4{
    margin:0 auto;
    bottom: -20px;
    left: 7px;
    right: 0;
    width: 209px;
    height: 12px;
    background: url(copy4.png) no-repeat;
}

#copy-5{
    top: 30px;
    left: 335px;
    width:152px;
    height:108px;
    background: url(copy5.png) no-repeat;
}

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

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

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

#expanded-blue-box{
    bottom:0;
    width:500px;
    height:68px;
    background: url(box-blue.png) no-repeat;
    cursor:pointer;    
}

#cta{
    width:134px;
    height:52px;
    bottom: 5px;
    right: 24px;
    background:url(cta.png); 
}

#mask-placeholder{
    width: 324px;
    height: 182px;
    overflow:hidden;
}

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

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

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

#video-container{
    width: 324px;
    height: 182px;
    background:#000;
    /* display:none; */
    opacity:0;
}

#video{
    width:324px;
    height:182px;
}

#logo{
    width:92px;
    height:31px;
    left:18px;
    bottom:20px;
    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: 23px;
    left: 390px;
    width:47px;
    height:1px;
}

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

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

.line{
    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; 
}