@charset "UTF-8";

body {background-color:transparent; overflow-y:scroll; overflow-x:hidden; margin:0;	padding:0; width:100%;height:100%;}
#myAd{position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; text-align: center; opacity: 1; background-color: #FFFFFF;}
#sfondo {position: absolute; top:0px; left: 0px; width: 100%; height: 100%; background-color:transparent; background-image:url(../assets/skin_full.jpg); background-position:top center; background-repeat: no-repeat; z-index:800; cursor:pointer;}

#container{position:absolute; width:100%; height:100%; top:0px; left:0px; perspective:2000px; -webkit-perspective:2000px; perspective-origin: 50% 180px; -webkit-perspective-origin: 50% 180px; transform: translate3d(0,0,0); z-index:900; pointer-events: none;}

.pagina{position:absolute; width:50%; height:100%; overflow:hidden; background-color:#FFFFFF; top:0px;}
#pagina-sx {left:0%; transform-origin: left;}
#pagina-dx {left:50%; transform-origin: right;}

/****** CORRIERE ********/

.menu{position: absolute; top: 0px; width: 200%; height: 40px; background-color: #576071; background-image: url("../assets/sito/menuheader.gif"); background-position: top center; background-repeat: no-repeat;}
#menu-sx{left: 0px;}
#menu-dx{left:0px; transform: translate(-50%,0px)}

/****** fine CORRIERE ********/

.header{position: absolute; top: 40px; width: 200%; height: 126px; background-color: #FFF; background-image:url("../assets/sito/sito_desktop_01.gif"); background-position: top center; background-repeat: no-repeat;}
#header-sx{left: 0px;}
#header-dx{left:0px; transform: translate(-50%,0px)}

.sito {position:absolute; overflow:hidden; top:166px; width: 1024px; height: 100%; transform: translate(-50%, 0px); z-index: 900 !important; background-image: url("../assets/sito/sito_desktop_02.jpg"); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: transparent;}
/*.sito {position:absolute; overflow:hidden; top:70px; width: 1024px; height: 100%; transform: translate(-50%, 0px); z-index: 900 !important; background-image:url(https://services.serving-sys.com/custprojassets/prd/features/screenshot/2811/www_corriere_it.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; background-color: transparent;}*/
#sitesx{left:100%;}
#sitedx{left:0px;}

.lumen {position: absolute; width: 100%; height: 100%; top:0px; z-index: 99999999 !important; opacity: 0;}
#luce {background-color: rgba(255,255,255,0.4);}
#ombra {background-color: rgba(0,0,0,0.4);}

/*#video-container{position: absolute; width:720px; height:404px; top:180px; left:50%; transform: translate(-50%, 0px); z-index:99999;}*/
#video-container{position: absolute; width:720px; height:405px; top:180px; left:50%; transform: translate(-50%, 0px); z-index:800; border-style: solid; border-width: 1px; border-color: #FFF; background-color: rgba(0,0,0,0.75); background-image: url("../assets/ui/preloader.gif"); background-position: center; background-repeat: no-repeat; background-size: 60px 60px;}
#video-holder{position: absolute; width:100%; height:100%; top: 0px; left: 0px; opacity:0;}
#filmato{position: absolute; width:100%; height:100%; top: 0px; left: 0px; opacity:0;}
#dashboard{position: absolute; width:100%; height:100%; top:0px; left:0px; pointer-events:none; /*background-color:rgba(190,190,190,0.5);*/ background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%);z-index: 800;}
#poster{position:absolute; width:100%; height:100%;	top:0px; left:0px; background-image:url(../assets/poster.jpg); background-size:contain; background-repeat:no-repeat; pointer-events: none;}
#spot {cursor: pointer;}
#icone{position: absolute; width:100%; height:100%; top:0px; left:0px; pointer-events:none; background-color:transparent; }
#canvas {position:absolute; background-color:transparent; width:40px; height:40px; top:100%; left:50%; transform: translate(-50%,-100%); margin-top:-10px; margin-left: -100px;}
#cta{position:absolute; width:100%; height:30px; top:100%;left: 50%; transform: translate(-50%,-100%); margin-top:-35px; margin-left:30px;}
#cta2{position:absolute; width:95px; height:50px; font-family: 'Montserrat', sans-serif; font-size:11px; color:#FFFFFF; text-align:center; top:100%; left:50%; margin-left:-47px; margin-top:-22px;}
#testocta{font-family: 'Montserrat', sans-serif; font-size:22px; color:#FFFFFF; text-align:center;}

#btnvideo{position:absolute; width:100%; height:100%; background-color:rgba(0,124,255,0); top:0px; left:0px; z-index:9999 !important; cursor:pointer; visibility: hidden;}

.bimbomix{position:absolute; width:40px; height:40px; background-color:transparent; z-index:9999999 !important; top:100%; left:100%; transform: translate(-60px, -60px); cursor:pointer;}
#mute{background-image:url(../assets/ui/mute-button.svg); visibility:hidden;}
#unmute{background-image:url(../assets/ui/unmute-button.svg); visibility:hidden;}
#replay{background-image:url(../assets/dark/replay.svg); visibility: hidden;}

#btchiudi {position: absolute; width:60px; height:25px; z-index:9999999 !important; top:0px; left:100%; transform: translate(-61px,-35px); background-color: #000; border-style: solid; border-width: 1px; border-color: #FFF; color:#FFF; cursor:pointer; visibility: hidden; text-align: center;}
#btchiudi:hover{background-color: #FFF; color: #000;}
.btctxt {font-family: 'Montserrat', sans-serif; font-size:12px; line-height: 2px; font-weight:bold;}




@media screen and (max-width:1440px){
		
	#video-container{width:573px; height:322px; top:144px}
	.menu{background-image: url("../assets/sito/menuheader_small.gif");}
	#sfondo{background-size: 1520px auto}
}


@media screen and (max-width:1024px){
	
	
	
	#video-container{width:400px; height:225px; top:100px}
	#cta{margin-top:-24px; margin-left:10px;}
	#testocta{font-family: 'Montserrat', sans-serif; font-size:14px; color:#FFFFFF; text-align:center;}
	/*.btctxt{color:#FFFFFF}*/
	#sfondo {background-size: 1050px auto}
	
		
}


@media screen and (max-width:1024px) and (min-width:768px){
	
	#btchiudi{transform: translate(-100%,0); margin:4px 0 0 -4px;}	
	
}


@media screen and (max-width:768px){
	
	.sito {width: 200%; top: 0px; background-image: url(../assets/sito/sito_mobile.jpg);}
	.header {visibility: hidden;}
	
	/**** CORRIERE ****/
	
	.menu {visibility: hidden;}
	
	/**** fine CORRIERE ****/
}

@media screen and (max-width:720px){
	
	#sfondo {background-image:url(../assets/skin_vert.jpg); background-size: auto 100%; background-position: center;}
	#video-container{width:320px; height:180px; top: 50%; transform: translate(-50%,-80%); margin-left: 0px;}
	
}