@charset "UTF-8";

:root{
    --bgcol:#fff; /*Gazzetta:#fde9eb*/
    --hrcol:#FFF; /*Gazzetta:#000 */
    --hrcol-height:40px; /*Gazzetta:50px*/
    --hrcol-height-mobile:185px; /*Gazzetta:50px*/
    --sitedesk:url("asset/sito-desktop.jpg");/*PATH SITO DESKTOP OVER 1440px*/
    --sitedesk-width:1214px;/*WIDTH SITO DESKTOP OVER 1440px*//*Gazzetta: 1140px*/
    --sitedesk-resize:url("asset/sito-desktop.jpg");/*PATH SITO DESKTOP UNDER 1440px*/
    --sitedesk-resize-width:1214px;/*WIDTH SITO DESKTOP OVER 1440px*//*Gazzetta: 980px*/
    --sitemob:url("asset/sito-mobile.jpg");/*PATH SITO MOBILE*/
    --sitemob-width:414px;/*Gazzetta:375px*/
	--shadow:none;/*GAZZETTA: 0 2px 4px 0 rgba(0,0,0,.5)*/

}




/*************************************************************************************
**************************************************************************************
=================================== PAGINA SITO ======================================
**************************************************************************************
*************************************************************************************/




.pagina {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bgcol);
    top: 0;
    left: 0;
}


.pagina:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--hrcol-height);
    background-color: var(--hrcol);
    box-shadow: var(--shadow);
}
.sito {
    position: absolute;
    overflow: hidden;
    top: 0;
    left:50%;
    transform:translate(-50%,0);
    width: var(--sitedesk-width);
    height: 100%;
    background-image: var(--sitedesk);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    background-color: transparent;
}


/*************************************************************************************
**************************************************************************************
================================= FINE PAGINA SITO ===================================
**************************************************************************************
*************************************************************************************/







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




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

@media screen and (max-width:1440px){
    
    .sito {
        width: var(--sitedesk-resize-width);
        background-image: var(--sitedesk-resize);
    }
	
}









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

@media screen and (max-width:820px){
	
    .pagina:before{
        height: var(--hrcol-height-mobile);
    }
	.sito {width: var(--sitemob-width); background-image: var(--sitemob);}
	

}




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

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




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

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

	
	
}




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

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

    
	
}


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

@media screen and (orientation:portrait) {
    
    
	
	
}



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

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

    
}