@charset "UTF-8";

:root {
	--is-preview:1;
}

*{
    cursor: pointer;
}

body {
	background-color:transparent; 
	overflow:hidden;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}

#myAd {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    opacity: var(--is-preview);
    background-color: #000;
    transition: opacity 0.4s;
	overflow: hidden;
}

#sfondo, #sfondo .bg {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%; 
    translate:-50% 0;
}

#sfondo {
    cursor: pointer;
}

#sfondo .bg {
    background-color: transparent;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 1920px auto;
    /*min-width:1280px;*/
    transition: opacity 0.4s
}

#sfondo .bg1 {
    background-image: url("assets/skin_desktop.jpg");
    opacity: 1;
}
#sfondo .bg2 {
    background-image: url("assets/skin_desktop.jpg");
    opacity: 0;
}
#sfondo .bg3 {
    background-image: url("assets/skin_desktop.jpg");
    opacity: 0;
}




/*************

PAGINA SITO

**************/


#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); pointer-events: none;}

.anta {
    position: absolute;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bgcol);
    top: 0px;
    transition-timing-function: ease-in-out;
    transition: transform 1.5s;
    transition-delay: 0.2s;
}
#anta-sx {
    left:0; 
    transform-origin: left;
    
}
#anta-dx {
    left:50%;
    transform-origin: right;
}


.anta .pagina {
	position: absolute;
	width:200%;
	height: 100%;
	top: 0;
}

#anta-sx .pagina {
	left: 0;
}
#anta-dx .pagina {
	left: -100%;
}

.lumen {position: absolute; width: 100%; height: 100%; top:0px; opacity: 0; transition: opacity 1.5s;}
#luce {background-color: rgba(255,255,255,0.7);}
#ombra {background-color: rgba(0,0,0,0.7);}






/**** VIDEO ****/


#video-container{position: absolute; left:50%; transform: translate(-50%, 0px); border-style: solid; border-width: 1px; border-color: #000; background-image: url("assets/ui/preloader.gif"); background-position: center; background-repeat: no-repeat; background-size: 60px 60px; display: flex; justify-content: center; align-items: center; transform-origin: center; line-height: 0;}

.vcont{
    width:40vw; 
    height:calc((40vw / 16) * 9); 
    top:180px; 
    background-color: rgba(0,0,0,0.75);
    transition: all 0.3s;
}
.vcont-exp {animation-name: vexp; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
.vcont-coll{animation-name: vcoll; animation-duration: 0.3s; animation-fill-mode: forwards; animation-timing-function: ease-in-out;}
@keyframes vexp {
	
	from {width:40vw; height:calc((40vw / 16) * 9); top:180px; background-color: rgba(0,0,0,0.75);}
	to {width: 100%; height: 100%; top: 0; background-color: #000;}
	
}
@keyframes vcoll {	
	
	from {width: 100%; height: 100%; top: 0; background-color: #000;}
	to {width:40vw; height:calc((40vw / 16) * 9); top:180px; background-color: rgba(0,0,0,0.75);}
	
}

#video-holder{position: absolute; width:100%; height:100%; top: 0px; left: 0px; opacity:0; transition: opacity 0.3s;}
#filmato {
    position: absolute;
	top:0;
	left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s;
}
#spot {
	position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
	cursor: pointer;
}
#dashboard {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: rgba(0,0,0,0.5);
    /* background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); */
}
#poster {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: url("assets/poster.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

#icone {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    pointer-events: none;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

#playicon {
    position: relative;
    width:10%;
    min-width: 20px;
    height: auto;
}
#playicon img {
    width:100%;
    height: auto;
}

#cta {
    position: relative;
    width: 100%;
    height: auto;
    font-family: 'Montserrat', sans-serif;
    font-size:max(1.4vw,12px);
    color: #FFF;
    text-align: center;
    line-height: normal;
}
#cta p {
    margin:0;
}

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

.bimbomix{position:absolute; width:40px; height:40px; background-color:transparent; 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/ui/replay.svg"); visibility: hidden;}







/************************************************************
*************************************************************
*************************************************************
******************* CHIUSURA E COUNTDOWN ********************
*************************************************************
*************************************************************
************************************************************/


#xchiudi {
    position: absolute;
    width: 30px;
    height: 30px;
    top: 8px;
    right: 8px;
    background-color:rgba(0,0,0,0.7);
    background-image: url("assets/ui/xchiudi.svg");
    background-size: 40%;
    background-position: center;
    background-repeat: no-repeat;
    color: #FFF;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    border:#FFF 2px solid;
    pointer-events: visible !important;
}


/**** COUNTDOWN ****/


#countdown {
    position: absolute;
    width: auto; 
    height: auto; 
    bottom: 0; 
    left: 50%;
    translate:-50% 0;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 16px;
    text-align: center; 
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
}
#countdown mark {
    background-color: rgba(0,0,0,1);
    color: white;
    padding: 0 0.4rem;
}










/****************************************************************
*****************************************************************
*****************************************************************
******************* MEDIA QUERIES RESPONSIVE ********************
*****************************************************************
*****************************************************************
****************************************************************/




/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:1440px){
    
    .sito {
        width: var(--sitedesk-resize-width);
        background-image: var(--sitedesk-resize);
    }
		
	.vcont{width:573px; height:322px; top:144px}
	@keyframes vexp {
	
		from {width:573px; height:322px; top:144px; background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; background-color: #000;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; background-color: #000;}
		to {width:573px; height:322px; top:144px; background-color: rgba(0,0,0,0.75);}		

	}

	
    #sfondo .bg {
        background-size: 1520px auto;
    }
	
}





/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:1024px), screen and (max-height:720px) {
	
    	
	.vcont{width:400px; height:225px; top:100px}
	@keyframes vexp {
	
		from {width:400px; height:225px; top:100px; background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; background-color: #000;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; background-color: #000;}
		to {width:400px; height:225px; top:100px; background-color: rgba(0,0,0,0.75);}		

	}
	#testocta{font-size:14px;}
	#sfondo .bg {background-size: 1050px auto}
	
		
}





/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:820px){
	
	
	.pagina:before{
        height: var(--hrcol-height-mobile);
    }
	.sito {width: var(--sitemob-width); background-image: var(--sitemob);}
	
	
	
	
	.vcont {width: 44vw; height: calc((44vw / 16) * 9); top:15vw;}
	
	
	@keyframes vexp {
	
		from {width: 44vw; height: calc((44vw / 16) * 9); top:15vw; background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; background-color: #000;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; background-color: #000;}
		to {width: 44vw; height: calc((44vw / 16) * 9); top:15vw; background-color: rgba(0,0,0,0.75);}
		

	}
	#sfondo .bg {background-size: 100vw auto}
	
	

}




/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:414px){
	
	.sito {width: 200%;}
}




/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:820px) and (orientation:landscape){

	
	.vcont {top:calc(15vw - 5vh);}
	
	
	@keyframes vexp {
	
		from {width: 44vw; height: calc((44vw / 16) * 9); top:calc(15vw - 5vh); background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; background-color: #000;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; background-color: #000;}
		to {width: 44vw; height: calc((44vw / 16) * 9); top:calc(15vw - 5vh); background-color: rgba(0,0,0,0.75);}
		

	}
	
}




/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-width:768px) and (orientation:landscape){
	
	#sfondo .bg {background-size:120vw auto;}
    
	
}





/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (orientation:portrait) {
    
    #sfondo {
        width: 100%;
        height: 100%;
    }
    
    #sfondo .bg {
        background-size: cover;
    }
    
    #sfondo .bg1 {
        background-image: url("assets/skin_mobile.jpg");
    }
	
	.vcont{width:calc((29vh / 9) * 16); height: 29vh; top: 28vh; max-width: 100vw; max-height: calc((100vw / 16) * 9);}
	@keyframes vexp {
	
		from {width:calc((29vh / 9) * 16); height: 29vh; top: 28vh; max-width: 100vw; max-height: calc((100vw / 16) * 9); background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; background-color: #000; max-width: 100%; max-height: 100%;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; background-color: #000; max-width: 100%; max-height: 100%;}
		to {width:calc((29vh / 9) * 16); height: 29vh; top: 28vh; max-width: 100vw; max-height: calc((100vw / 16) * 9); background-color: rgba(0,0,0,0.75);}
		

	}
	
	
}



/*////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////*/

@media screen and (max-aspect-ratio:9/16) {
	

    #sfondo .bg {
        background-size: 178vw auto;
    }
    
    
	.vcont{top:calc(50% - ((100vw / 16) * 4.5)); margin-top:-13vw}
	@keyframes vexp {
	
		from {width:calc((29vh / 9) * 16); height: 29vh; top:calc(50% - ((100vw / 16) * 4.5)); margin-top:-13vw; max-width: 100vw; max-height: calc((100vw / 16) * 9); background-color: rgba(0,0,0,0.75);}
		to {width: 100%; height: 100%; top: 0; margin-top:0; background-color: #000; max-width: 100%; max-height: 100%;}

	}
	@keyframes vcoll {
		
		from {width: 100%; height: 100%; top: 0; margin-top:0; background-color: #000; max-width: 100%; max-height: 100%;}
		to {width:calc((29vh / 9) * 16); height: 29vh; top:calc(50% - ((100vw / 16) * 4.5)); margin-top:-13vw; max-width: 100vw; max-height: calc((100vw / 16) * 9); background-color: rgba(0,0,0,0.75);}		

	}
}