/* DOUBLE CLICK STUDIO MASTHEAD CSS */

@font-face {
    font-family: 'godofwarregular';
    src: url('godofwar-webfont.eot');
    src: url('godofwar-webfont.eot?#iefix') format('embedded-opentype'),
         url('godofwar-webfont.woff2') format('woff2'),
         url('godofwar-webfont.woff') format('woff'),
         url('godofwar-webfont.ttf') format('truetype'),
         url('godofwar-webfont.svg#godofwarregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

.scale150 {
	-webkit-transform: scale(1.5,1.5);
    -moz-transform: scale(1.5,1.5);
    -o-transform: scale(1.5,1.5);
    -ms-transform: scale(1.5,1.5);
    transform: scale(1.5,1.5);
}

.scale125 {
	-webkit-transform: scale(1.25,1.25);
    -moz-transform: scale(1.25,1.25);
    -o-transform: scale(1.25,1.25);
    -ms-transform: scale(1.25,1.25);
    transform: scale(1.25,1.25);
}

* {
	padding: 0;
	margin: 0;
}

#main-panel{
  	top: 0px;
  	left: 0px;
  	width: 970px;
  	height: 250px;
  	position: relative;
  	background: #000;
  	overflow: hidden;
}

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

#introVideo {
  	position: absolute;
  	top: 0px;
  	right: 0px;
  	width: 970px;
  	height: 250px;   
  	background-color: #000;
  	pointer-events: none;
}


#clickSoundBtn{
	position: absolute;
  	top: 20px;
  	left: 55px;
  	width: 356px;
  	height: 200px;
  	text-align: center;
  	opacity: 0;
  	-webkit-transition:opacity 1.25s cubic-bezier(.33,.38,.33,1);;
  	transition:opacity 1.25s cubic-bezier(.33,.38,.33,1);
  	transition-delay: .25s;
}

#clickSoundBtn p {
	margin-top: 80px;
	font-family: sans-serif;
	font-size: 18px;
	color: #FFF;
}

#clickSoundBtn p:hover {
	color: #FFC400;
}

#video-player {
  	position: absolute;
  	top: 20px;
  	left: 60px;
  	width: 356px;
  	height: 200px;   
  	background-color: #000;
  	opacity: 0;
  	border: 1.5px solid black;
  	-webkit-transition:opacity 1.25s cubic-bezier(.33,.38,.33,1);;
  	transition:opacity 1.25s cubic-bezier(.33,.38,.33,1);
}


#canvasOutput2 {
	display: block;
	position: absolute;
	top: -10px;
	right: 30px;
	width: 590px;
	height: 250px;
	opacity: 0;
	-webkit-transition: opacity 1.3s ease-out, top 1.2s cubic-bezier(.25,.5,.5,1), right 1.2s cubic-bezier(.25,.5,.5,1), -webkit-transform 1.6s cubic-bezier(.25,.5,.5,1);
    transition: opacity 1.3s ease-out, top 1.2s cubic-bezier(.25,.5,.5,1), right 1.2s cubic-bezier(.25,.5,.5,1), transform 1.2s cubic-bezier(.25,.5,.5,1);
    pointer-events: none;
}

#canvasOutput2.revealLava {
	-webkit-transform: scaleX(1,1);
	-moz-transform: scaleX(1,1);
	-o-transform: scaleX(1,1);
	-ms-transform: scaleX(1,1);
    transform: scaleX(1,1);
    opacity: 1 !important;
    top: 0px !important;
    right: 0px !important;
}

#lavaGuy {
	object-fit: contain;
	display: none;
	pointer-events: none;
}

#output2 {
	width: 590px;
	height: 250px;
}

#buffer2 {
	display: none;
}

/*
#lavaGuy {
	position: absolute;
	top: -10px;
	right: 30px;
	opacity: 0;
	pointer-events: none;
	cursor: none;
	-webkit-transition: opacity 1.3s ease-out, top 1.2s, right 1.2s, -webkit-transform 1.6s cubic-bezier(.38,.38,.52,1);
    transition: opacity 1.3s ease-out, top 1.2s, right 1.2s, transform 1.2s cubic-bezier(.38,.38,.52,1);
}

#lavaGuy.revealLava {
	-webkit-transform: scaleX(1,1);
	-moz-transform: scaleX(1,1);
	-o-transform: scaleX(1,1);
	-ms-transform: scaleX(1,1);
    transform: scaleX(1,1);
    opacity: 1 !important;
    top: 0px !important;
    right: 0px !important;
}
*/

#foreground {
	position: absolute;
	bottom: 0px;
	left: -70px;
	opacity: 0;
	pointer-events: none;
	cursor: none;
	-webkit-transition: opacity 1.3s ease, bottom 1.6s, left 1.6s, -webkit-transform 1.6s cubic-bezier(.25,.4,.4,1);
    transition: opacity 1.3s ease, bottom 1.6s, left 1.6s, transform 1.6s cubic-bezier(.25,.4,.4,1);
}

#foreground.contract {
	-webkit-transform: scaleX(1,1); /* Chrome, Safari, Opera */
	-moz-transform: scaleX(1,1);
	-o-transform: scaleX(1,1);
	-ms-transform: scaleX(1,1); /* IE 9 */
    transform: scaleX(1,1);
    bottom: 0px;
    left: 0px;
    opacity: 1;
}

#canvasOutput {
	display: block;
	position: absolute;
	bottom: -20px;
	right: -200px;
	width: 230px;
	height: 220px;
	z-index: 99999;
	-webkit-transition: right 1.2s cubic-bezier(0,.35,.3,1), bottom 1.2s cubic-bezier(0,.35,.3,1);
    transition: right 1.2s cubic-bezier(0,.35,.3,1), bottom 1.2s cubic-bezier(0,.35,.3,1);
    transition-delay: .2s;
    pointer-events: none;
}

#canvasOutput.slideIn {
	right: 0px !important;
	bottom: 0px !important;
}

#heroVideo {
	object-fit: contain;
	display: none;
	pointer-events: none;
}

canvas {
	display: inline-block;
}

#output {
	width: 230px;
	height: 220px;
}

#buffer {
	display: none;
}

#endCopy {
	position: absolute;
	top: 50px;
	left: 520px;
	width: 344px;
	height: 50px;
	pointer-events: none;
}

#logo {
	opacity: 0;
	pointer-events: none;
	cursor: none;
	-webkit-transition:opacity 1s cubic-bezier(.33,.38,.33,1);
    transition:opacity 1s cubic-bezier(.33,.38,.33,1);
}

#tagline {
	font-family: 'godofwarregular';
	font-size: 18px;
	color: #FFC400;
	text-align: center;
	opacity: 0;
	margin-top: -10px;
	-webkit-transition:opacity 1s cubic-bezier(.33,.38,.33,1);
    transition:opacity 1s cubic-bezier(.33,.38,.33,1);
    transition-delay: .25s;
    pointer-events: none;
}

#sonyWave {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	cursor: none;
}

#veep {
	position: absolute;
	bottom: 6px;
	left: 6px;
	pointer-events: none;
	cursor: none;
}

#ctaBtn {
	position: absolute;
	display: block;
	top: 210px;
	left: 675px;
	pointer-events: none;
	cursor: default;
	opacity: 0;
	-webkit-transition:all 1s cubic-bezier(.33,.38,.33,1);
    transition:all 1s cubic-bezier(.33,.38,.33,1);
    transition-delay: .5s;
}

#ctaBtn p {
	font-family: 'godofwarregular';
	color: #FFF;
	text-align: center;
	font-size: 20px;
	padding-top: 7px;
}

.rollover p {
	color: #FFC400 !important;
}

#border {
  	position: absolute;
  	top: 0px;
  	left: 0px;
  	width: 968px;
  	height: 248px;
  	border: 1px solid #000; 
  	pointer-events: none;
}


#ytCloseBtn{
  	position: absolute;
  	top: 0px;
  	left: 820px;
}

.fadeIn {
	opacity: 1 !important;
}

.fadeIn2 {
	opacity: .9 !important;
}