@charset "UTF-8";
/* CSS Document */

@font-face {
    font-family: 'Gellix';
    src: url('../fonts/Gellix-Light.woff2') format('woff2');
    font-weight: 300;
	font-display: swap; /* Inserisce font default in attesa del caricamento */
}

@font-face {
    font-family: 'Gellix';
    src: url('../fonts/Gellix-Medium.woff2') format('woff2');
    font-weight: 500;
	font-display: swap;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Gellix', sans-serif;
	font-size: 20px;
	color: var(--SecondaryColor);
}

/************STRUTTURA************/

section {
	width: 100%;
	height: auto;
	position: relative;
}

.section_vh_padding_top {
	padding-top: 15vh;
}

.section_vh_padding_bottom {
	padding-bottom: 15vh;
}

.boxContainer {
	width: 80%;
	max-width: 1400px;
	height: auto;
	margin: 0 auto;
}

.testo_2_colonne {
    column-count: 2;
    column-gap: 90px;
}

.testo_3_colonne {
    column-count: 3;
    column-gap: 90px;
}

/************COLORI************/

.primaryColor {
	background-color: var(--PrimaryColor);
}

.secondaryColor {
	background-color: var(--SecondaryColor);
}

/************INTESTAZIONI************/

h1 {
	color: #fff;
	font-weight: 300;
	font-size: 1.5rem;
}

h2 {
	font-weight: 300;
}

h3 {
	font-size: 1.3rem;
	font-weight: 300;
	margin-bottom: 25px;
	text-transform: uppercase;
}

/************BOTTONI************/

.btn-green,
.radarmeteo__text a,
.service_popup a {
    display: inline-block;
    color: var(--PrimaryColor);
    background: #fff;
    width: auto;
    min-width: 100px;
    text-align: center;
    height: 61px;
    border: 2px solid var(--PrimaryColor);
    border-radius: 20px;
    padding: 11px 40px 15px 40px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
	cursor: pointer;
}

.btn-green:hover,
.radarmeteo__text a:hover,
.service_popup a:hover {
	color: #fff;
    background: var(--PrimaryColor);
    text-decoration: none;
}

.service_popup .btn-green {
	color: #fff;
	background: var(--PrimaryColor);
}

.service_popup .btn-green:hover {
	color: var(--PrimaryColor);
	background: #fff;
}

.btn-green--form {
    color: #fff;
    background: var(--PrimaryColor);
	border: none;
	cursor: pointer;
}

.btn-green--form:hover {
	color: #fff;
    background: var(--SecondaryColor);
    text-decoration: none;
}

.btn-white,
.hypermeteo__col-right a {
    display: inline-block;
    color: #fff;
    background: var(--PrimaryColor);
    width: auto;
    min-width: 100px;
    text-align: center;
    height: 61px;
    border: 2px solid #fff;
    border-radius: 20px;
    padding: 11px 40px 15px 40px;
    font-weight: 700;
    margin-top: 30px;
    margin-bottom: 30px;
    transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
}

.btn-white:hover,
.hypermeteo__col-right a:hover {
	color: var(--PrimaryColor);
    background: #fff;
    text-decoration: none;
}



/************MENU************/
/*MENU DROPDOWN*/
/*HAMBURGER MENU*/
/*MENU DROPDOWN MOBILE*/



/************************ 
HEADER
************************/

.overlay-landscape {
	display: none;
}

.header-fixed {
	position: fixed;
	width: 100%;
	height: auto;
	z-index: 20;
	background-color: rgba(60,61,61,0);
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}

.header {
	width: 80%;
	max-width: 1400px;
	margin: 0	auto;
	display: flex;
    justify-content: space-between;
	opacity: 0;
	transition: all 1s cubic-bezier(.215, .61, .355, 1);
}

.header--load {
	opacity: 1;
}

.header__left, .header__right {
	width: 330px;
	height: auto;
	padding-top: 50px;
	transition: all 0.8s cubic-bezier(.215, .61, .355, 1);
}

.header__left h1, .header__right h1 {
	transition: all 0.8s cubic-bezier(.215, .61, .355, 1);
}

.header__left img, .header__right img {
	width: 100%;
	max-width: 330px;
	margin-bottom: 20px;
	transition: all 0.8s cubic-bezier(.215, .61, .355, 1);
}

.header__right {
	text-align: right;
}


/**** Stili allo scroll ****/

.header-scroll .header-fixed  {
	background-color: rgba(60,61,61,1);
}

.header-scroll .header__left, .header-scroll .header__right {
	width: 250px;
	height: auto;
	padding: 10px 0;
}

.header-scroll .header__left h1, .header-scroll .header__right h1 {
	display: none;
}

.header-scroll .header__left img, .header-scroll .header__right img {
	margin-bottom: 10px;
}

/************************ 
LANGUAGE BTN
************************/

.language-btn {
	position: absolute;
	right: 0;
	top: 65px;
	width: 50px;
	height: 50px;
	background: #000;
	cursor: pointer;
	display: flex;
    align-items: center;
    justify-content: left;
	padding-left: 12px;
	opacity: 1;
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}

.language-btn img {
	width: 24px;
}

.language-btn:hover {
	width: 60px;
}

.language-btn--load {
	opacity: 1 !important;
}

.header-scroll .language-btn {
	top: 15px;
}  

@media (max-width: 1200px) {
	.language-btn {
		top: 38px;
		width: 40px;
		height: 40px;
		padding-left: 10px;
	}
	
	.language-btn img {
		width: 20px;
	}
	
	.header-scroll .language-btn {
		top: 30px;
	}  
	
}

/************************ 
POPUP
************************/

.popup-overlay {
	position: fixed;
	width: 100vw;
	height: 100% !important;
	background: rgba(0, 0, 0, 0.8);
	z-index: 30;
	opacity: 0;
	visibility: hidden;
	transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
	
}

.popup-overlay--open {
	visibility: visible;
	opacity: 1;
}

.service_popup {
	position: absolute;
	width: 90%;
	max-width: 1200px;
	height: auto;
	left: 50%;
	top: 10%;
    transform: translateX(-50%);
	background: #fff;
	border-radius: 28px;
	z-index: 35;
	opacity: 0;
	visibility: hidden;
	padding: 30px;
	transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
}

.service_popup--open {
	visibility: visible !important;
	opacity: 1 !important;
}


.popup-close {
	position: absolute;
	width: 50px;
	height: 50px;
	background: var(--PrimaryColor);
	top: 30px;
	right: 30px;
	border-radius: 16px;
	cursor: pointer;
	z-index: 40;
	transition: all 0.2s cubic-bezier(.215, .61, .355, 1);
}

.popup-close:hover {
	background: var(--SecondaryColor);
}

.popup-close img {
	width: 24px;
	height: 24px;
	margin-top: 13px;
	margin-left: 13px;
}

.service_popup__text h2 {
	font-weight: 500;
	margin-bottom: 30px;
}

.service_popup__text {
	font-weight: 300;
}

.service_popup__text img {
	width: 90%;
	margin-left: 5%;
}

.service_popup__logo {
	margin-bottom: 50px;
}

.service_popup__logo img {
	width: 70%;
    max-width: 320px;
}

@media (max-width: 992px) {
	.service_popup__text img {
		width: 60%;
		margin-left: 20%;
		margin-bottom: 35px;
	}  
}


/************************ 
INTRO
************************/
.intro {
	position: relative;
	width: 100%;
	height: 100vh;
	background: var(--SecondaryColor);
	overflow: hidden;
}

.intro__scroll {
	position: absolute;
	width: 33px;
	height: 66px;
	right: 30px;
	bottom: 30px;
	z-index: 10;
}

.grid,
.grid__vertical-lines, 
.grid__vertical-lines--showdiv,
.grid__horizontal-lines,
.grid__dots {
	position: absolute;
	width: 100%;
	height: 592px;
	bottom: 0;
}

.grid__vertical-lines {
	z-index: 1;
	display: flex;
	justify-content: center;
	overflow: hidden;
}


.grid__vertical-lines--showdiv {
	z-index: 2;
	background: var(--SecondaryColor);
	transition: all 1.8s ease-in-out;
	transition-delay: 0.8s;
}

.intro-load .grid__vertical-lines--showdiv {
	height: 0;
}

.grid__horizontal-lines {
	z-index: 3;
}

.line1, .line2, .line3, .line4, .line5, .line6, .line7, .line8,
.line9, .line10, .line11, .line12, .line13, .line14, .line15, .line16 {
	position: absolute;
	width: 0;	
	height: 3.5px;
	background: #4d4e4e;
	transition: all 1.8s ease-in-out;
}

.line1 { bottom: 66px; transition-delay: 1.5s; }
.line2 { bottom: 139px; transition-delay: 1.4s; }
.line3 { bottom: 197px; transition-delay: 1.3s; }
.line4 { bottom: 254px; transition-delay: 1.2s; }
.line5 { bottom: 300px; transition-delay: 1.1s; }
.line6 { bottom: 345px; transition-delay: 1s; }
.line7 { bottom: 384px; transition-delay: 0.9s; }
.line8 { bottom: 423px; transition-delay: 0.8s; }
.line9 { bottom: 453px; transition-delay: 0.7s; }
.line10 { bottom: 483px; transition-delay: 0.6s; }
.line11 { bottom: 506px; transition-delay: 0.5s; }
.line12 { bottom: 530px; transition-delay: 0.4s; }
.line13 { bottom: 549px; transition-delay: 0.3s; }
.line14 { bottom: 568px; transition-delay: 0.2s; }
.line15 { bottom: 581px; transition-delay: 0.1s; }
.line16 { bottom: 591px; transition-delay: 0s; }

.intro-load .line1, .intro-load .line2, .intro-load .line3, .intro-load .line4, .intro-load .line5,
.intro-load .line6, .intro-load .line7, .intro-load .line8, .intro-load .line9, .intro-load .line10, 
.intro-load .line11, .intro-load .line12, .intro-load .line13, .intro-load .line14, .intro-load .line15, 
.intro-load .line16 { width: 100%; }


.grid__dots {
	z-index: 4;
	background-image: url("../img/dots.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: all 1s ease-in-out;
}

.intro-load .grid__dots {
	background-image: url("../img/dots-desktop.svg");
	opacity: 1;
}

.grid__back-mountain {
	z-index: 5;
	position: absolute;
	width: 90%;
	max-width: 1530px;
	height: 0px;
	left: 50%;
	bottom: 591px;
	transform: translateX(-50%);
	transition: all 2s ease-in-out;
	overflow: hidden;
}

.grid__back-mountain img {
	position: absolute;
	bottom: 0;
}

.intro-load .grid__back-mountain {
	height: 185px;
	transition-delay: 1s;
}

.grid__left-mountain {
	z-index: 6;
	position: absolute;
	width: 250px;
	height: 680px;
	left: 0;
	bottom: 89px;
	opacity: 0;
	background-image: url("../img/left-mountain.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	transition: all 1s ease-in-out;
}

.intro-load .grid__left-mountain {
	opacity: 1;
}

.grid__right-mountain {
	z-index: 7;
	position: absolute;
	width: 250px;
	height: 710px;
	right: 0;
	bottom: 91px;
	opacity: 0;
	background-image: url("../img/right-mountain.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: bottom;
	transition: all 1s ease-in-out;
}

.intro-load .grid__right-mountain {
	opacity: 1;
}

.grid__cubes {
	z-index: 8;
	position: absolute;
	width: 90%;
	max-width: 1600px;
	height: 595px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.grid__cubes__radarmeteo {
	position: absolute;
	width: 50%;
	max-width: 800px;
	height: 595px;
	bottom: 0;
	right: 50%;
	visibility: visible;
	opacity: 1;
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}
.grid__cubes__hypermeteo {
	position: absolute;
	width: 50%;
	max-width: 800px;
	height: 595px;
	bottom: 0;
	left: 50%;
	visibility: visible;
	opacity: 1;
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}

.intro__touch-text {
	position: absolute;
	width: 200px;
	height: auto;
	color: #fff;
	font-size: 1rem;
	font-weight: 300;
	text-align: center;
	bottom: 30px;
	left: 50%;
	margin-left: -100px;
	z-index: 8;
}

/*** CUBI ***/

/* Stili uguali per tutti i cubi */
.cube-1, .cube-2, .cube-3, .cube-4, .cube-5,
.cube-6, .cube-7, .cube-8, .cube-9 {
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	cursor: pointer;
	transform: translateY(-10px);
	opacity: 0;
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
	overflow: hidden;
}

.cubes-load .cube-1, .cubes-load .cube-2, .cubes-load .cube-3, .cubes-load .cube-4, .cubes-load .cube-5,
.cubes-load .cube-6, .cubes-load .cube-7, .cubes-load .cube-8, .cubes-load .cube-9 {
	transform: translateY(0px);
	opacity: 1;
}

.template-monitor .cube-1, .template-monitor .cube-2, .template-monitor .cube-3, 
.template-monitor .cube-4, .template-monitor .cube-5, .template-monitor .cube-6, 
.template-monitor .cube-7, .template-monitor .cube-8, .template-monitor .cube-9 {
	cursor: default;
}

/* Dimensioni */ 
.cube_100 { width: 100px; height: 116px; }
.cube_90 { width: 90px;	height: 105px; }
.cube_80 { width: 80px;	height: 95px; }
.cube_70 { width: 70px;	height: 82px; }

/* Posizione e animazioni Cubi Radarmeteo */
.cube-1 {
	animation: green_cube_animation_cloud  5s infinite ease-in-out;
	width: 70px;	
	height: 82px;
	right: 376px;
	bottom: 465px;
	transition-delay: 0.1s;
}
.cube-2 {
	animation: green_cube_animation_drop  6s infinite ease-in-out;
	width: 70px;	
	height: 82px;
	right: 66px;
	bottom: 516px;
	transition-delay: 0.2s;
}
.cube-3 {
	animation: green_cube_animation_lightning  8s infinite ease-in-out;
	width: 80px;	
	height: 95px;
	right: 184px;
	bottom: 360px;
	transition-delay: 0.1s;
}
.cube-4 {
	animation: green_cube_animation_thermometer  4.5s infinite ease-in-out;
	width: 100px; 
	height: 116px; 
	right: 435px;
	bottom: 215px;
	transition-delay: 0.2s;
}
.cube-5 {
	animation: green_cube_animation_cloud  7s infinite ease-in-out;
	width: 100px; 
	height: 116px; 
	right: 55px;
	bottom: 160px;
	transition-delay: 0.1s;
}

/* Animazioni icone che cambiano cubi Radarmeteo */

@keyframes green_cube_animation_cloud {
	0% { background-image: url("../img/cloud-green-cube.png"); }
	8% { background-image: url("../img/cloud-green-cube.png"); }
	16% { background-image: url("../img/cloud-green-cube.png"); }
	25% { background-image: url("../img/drop-green-cube.png"); transform: translateY(5px);}		
	33% { background-image: url("../img/drop-green-cube.png"); }
	41% { background-image: url("../img/drop-green-cube.png"); }
	50% { background-image: url("../img/thermometer-green-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/thermometer-green-cube.png"); }
	66% { background-image: url("../img/thermometer-green-cube.png"); }
	74% { background-image: url("../img/lightning-green-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/lightning-green-cube.png"); }
	91% { background-image: url("../img/lightning-green-cube.png"); }
	100% { background-image: url("../img/cloud-green-cube.png"); transform: translateY(0px); }
}

@keyframes green_cube_animation_drop {
	0% { background-image: url("../img/drop-green-cube.png");}
	8% { background-image: url("../img/drop-green-cube.png");}
	16% { background-image: url("../img/drop-green-cube.png");}
	25% { background-image: url("../img/lightning-green-cube.png"); transform: translateY(5px);}		
	33% { background-image: url("../img/lightning-green-cube.png");}
	41% { background-image: url("../img/lightning-green-cube.png");}
	50% { background-image: url("../img/cloud-green-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/cloud-green-cube.png");}
	66% { background-image: url("../img/cloud-green-cube.png");}
	74% { background-image: url("../img/thermometer-green-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/thermometer-green-cube.png");}
	91% { background-image: url("../img/thermometer-green-cube.png");}
	100% { background-image: url("../img/drop-green-cube.png"); transform: translateY(0px); }
}

@keyframes green_cube_animation_lightning {
	0% { background-image: url("../img/lightning-green-cube.png"); }
	8% { background-image: url("../img/lightning-green-cube.png"); }
	16% { background-image: url("../img/lightning-green-cube.png"); }
	25% { background-image: url("../img/thermometer-green-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/thermometer-green-cube.png"); }
	41% { background-image: url("../img/thermometer-green-cube.png"); }
	50% { background-image: url("../img/drop-green-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/drop-green-cube.png"); }
	66% { background-image: url("../img/drop-green-cube.png"); }
	74% { background-image: url("../img/cloud-green-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/cloud-green-cube.png"); }
	91% { background-image: url("../img/cloud-green-cube.png"); }
	100% { background-image: url("../img/lightning-green-cube.png"); transform: translateY(0px); }
}

@keyframes green_cube_animation_thermometer {
	0% { background-image: url("../img/thermometer-green-cube.png"); }
	8% { background-image: url("../img/thermometer-green-cube.png"); }
	16% { background-image: url("../img/thermometer-green-cube.png"); }
	25% { background-image: url("../img/drop-green-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/drop-green-cube.png"); }
	41% { background-image: url("../img/drop-green-cube.png"); }
	50% { background-image: url("../img/cloud-green-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/cloud-green-cube.png"); }
	66% { background-image: url("../img/cloud-green-cube.png"); }
	74% { background-image: url("../img/lightning-green-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/lightning-green-cube.png"); }
	91% { background-image: url("../img/lightning-green-cube.png"); }
	100% { background-image: url("../img/thermometer-green-cube.png"); transform: translateY(0px); }
}

/* Posizione e animazioni Cubi Hypermeteo */
.cube-6 {
	animation: white_cube_animation_cloud  5s infinite ease-in-out;
	width: 70px;	
	height: 82px;
	left: 128px;
    bottom: 496px;
	transition-delay: 0.2s;
}
.cube-7 {
	animation: white_cube_animation_drop  6.5s infinite ease-in-out;
	width: 80px;	
	height: 95px;
	left: 369px;
    bottom: 466px;
	transition-delay: 0.1s;
}
.cube-8 {
	animation: white_cube_animation_lightning  6s infinite ease-in-out;
	width: 80px;	
	height: 95px;
	left: 34px;
	bottom: 360px;
	transition-delay: 0.2s;
}
.cube-9 {
	animation: white_cube_animation_thermometer  5.5s infinite ease-in-out;
	width: 100px; 
	height: 116px;
	left: 338px;
	bottom: 215px;
	transition-delay: 0.1s;
}

/* Animazioni icone che cambiano cubi Hypermeteo */

@keyframes white_cube_animation_cloud {
	0% { background-image: url("../img/cloud-white-cube.png"); }
	8% { background-image: url("../img/cloud-white-cube.png"); }
	16% { background-image: url("../img/cloud-white-cube.png"); }
	25% { background-image: url("../img/drop-white-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/drop-white-cube.png"); }
	41% { background-image: url("../img/drop-white-cube.png"); }
	50% { background-image: url("../img/thermometer-white-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/thermometer-white-cube.png"); }
	66% { background-image: url("../img/thermometer-white-cube.png"); }
	74% { background-image: url("../img/lightning-white-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/lightning-white-cube.png"); }
	91% { background-image: url("../img/lightning-white-cube.png"); }
	100% { background-image: url("../img/cloud-white-cube.png"); transform: translateY(0px); }
}

@keyframes white_cube_animation_drop {
	0% { background-image: url("../img/drop-white-cube.png"); }
	8% { background-image: url("../img/drop-white-cube.png"); }
	16% { background-image: url("../img/drop-white-cube.png"); }
	25% { background-image: url("../img/lightning-white-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/lightning-white-cube.png"); }
	41% { background-image: url("../img/lightning-white-cube.png"); }
	50% { background-image: url("../img/cloud-white-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/cloud-white-cube.png"); }
	66% { background-image: url("../img/cloud-white-cube.png"); }
	74% { background-image: url("../img/thermometer-white-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/thermometer-white-cube.png"); }
	91% { background-image: url("../img/thermometer-white-cube.png"); }
	100% { background-image: url("../img/drop-white-cube.png"); transform: translateY(0px); }
}

@keyframes white_cube_animation_lightning {
	0% { background-image: url("../img/lightning-white-cube.png"); }
	8% { background-image: url("../img/lightning-white-cube.png"); }
	16% { background-image: url("../img/lightning-white-cube.png"); }
	25% { background-image: url("../img/thermometer-white-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/thermometer-white-cube.png"); }
	41% { background-image: url("../img/thermometer-white-cube.png"); }
	50% { background-image: url("../img/drop-white-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/drop-white-cube.png"); }
	66% { background-image: url("../img/drop-white-cube.png"); }
	74% { background-image: url("../img/cloud-white-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/cloud-white-cube.png"); }
	91% { background-image: url("../img/cloud-white-cube.png"); }
	100% { background-image: url("../img/lightning-white-cube.png"); transform: translateY(0px); }
}

@keyframes white_cube_animation_thermometer {
	0% { background-image: url("../img/thermometer-white-cube.png"); }
	8% { background-image: url("../img/thermometer-white-cube.png"); }
	16% { background-image: url("../img/thermometer-white-cube.png"); }
	25% { background-image: url("../img/drop-white-cube.png"); transform: translateY(5px); }		
	33% { background-image: url("../img/drop-white-cube.png"); }
	41% { background-image: url("../img/drop-white-cube.png"); }
	50% { background-image: url("../img/cloud-white-cube.png"); transform: translateY(0px); }
	58% { background-image: url("../img/cloud-white-cube.png"); }
	66% { background-image: url("../img/cloud-white-cube.png"); }
	74% { background-image: url("../img/lightning-white-cube.png"); transform: translateY(5px); }
	83% { background-image: url("../img/lightning-white-cube.png"); }
	91% { background-image: url("../img/lightning-white-cube.png"); }
	100% { background-image: url("../img/thermometer-white-cube.png"); transform: translateY(0px); }
}

.cube-1:hover, .cube-2:hover, .cube-3:hover, .cube-4:hover, .cube-5:hover,
.cube-6:hover, .cube-7:hover, .cube-8:hover, .cube-9:hover {
	transition-delay: 0s !important;
/*	transform: translateY(5px);*/
	overflow: visible;
}

.template-monitor .cube-1:hover, .template-monitor .cube-2:hover, .template-monitor .cube-3:hover, 
.template-monitor .cube-4:hover, .template-monitor .cube-5:hover, .template-monitor .cube-6:hover, 
.template-monitor .cube-7:hover, .template-monitor .cube-8:hover, .template-monitor .cube-9:hover {
	transform: none;
}



.label-radar, .label-hyper {
	position: absolute;
	width: 240px;
	height: auto;
	padding: 10px 18px;
	border-radius: 14px;
	text-align: center;
	font-weight: 500;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
}

.label-radar {
	color: #fff;
	background: var(--PrimaryColor);
}

.label-hyper {
	color: var(--SecondaryColor);
	background: #fff;
}

.cube-1 .label-radar {bottom: 100px;}
.cube-2 .label-radar {bottom: 100px;}
.cube-3 .label-radar {bottom: 115px;}
.cube-4 .label-radar {bottom: 138px;}
.cube-5 .label-radar {bottom: 138px;}
.cube-6 .label-hyper {bottom: 100px;}
.cube-7 .label-hyper {bottom: 115px;}
.cube-8 .label-hyper {bottom: 115px;}
.cube-9 .label-hyper {bottom: 138px;}


[class*='cube-']:hover .label-radar,
[class*='cube-']:hover .label-hyper {
	opacity: 1;
}

.label-radar::after, .label-hyper::after {
	position: absolute;
	content: "";
	width: 26px;
	height: 15px;
	left: 50%;
	margin-left: -13px;
	bottom: -14px;
	background-repeat: no-repeat;
}

.label-radar::after {
	background-image: url("../img/green-label-triangle.svg");
}

.label-hyper::after {
	background-image: url("../img/white-label-triangle.svg");
}

/*************************
Animazioni ciclica label radarmeteo e hypermeteo
*************************/
.toggle-overflow {
	overflow: visible;
}

.toggle-opacity {
	opacity: 1;
}

.antenna {
	position: absolute;
	width: 56px;
	height: 44px;
	bottom: 142px;
    left: 620px;
	background-image: url("../img/antenna.svg");
	background-repeat: no-repeat;
}

.antenna__wave {
	position: absolute;
	width: 140px;
	height: 150px;
	bottom: 44px;
    left: 50%;
	margin-left: -70px;
	background-image: url("../img/antenna-0-wave.svg");
	background-repeat: no-repeat;
	transform-origin: bottom center;
	animation: antenna-wave 20s infinite;
}

@keyframes antenna-wave {
	0% { }
	5% { transform: rotate(0deg); }		
	10% { }
	15% { }
	20% { transform: rotate(45deg); }
	25% { }
	30% { }
	35% { transform: rotate(0deg); }
	40% { }
	45% { }
	50% { transform: rotate(-45deg); }
	55% { background-image: url("../img/antenna-0-wave.svg"); }
	60% { background-image: url("../img/antenna-1-wave.svg"); }
	65% { background-image: url("../img/antenna-2-wave.svg"); }
	70% { background-image: url("../img/antenna-3-wave.svg"); }
	75% { background-image: url("../img/antenna-2b-wave.svg"); }
	80% { background-image: url("../img/antenna-3b-wave.svg"); }
	85% { background-image: url("../img/antenna-0-wave.svg"); }
	90% { transform: rotate(-45deg); }
	95% { }
	100% { transform: rotate(0deg); }
}

.centralina {
	position: absolute;
	width: 92px;
	height: 130px;
	bottom: 384px;
    right: 539px;
	background-image: url("../img/centralina.svg");
	background-repeat: no-repeat;
}
.centralina__left {
	position: absolute;
	top: -8px;
	left: -10px;
	width: 54px;
	height: 18px;
	text-align: center;
}
.centralina__left img {
	width: 54px;
	height: 18px;
	margin-top: -16px;
	transform-style: preserve-3d; /* Conserva la prospettiva 3D */
  	animation: rotate3d 2s linear infinite; /* Esegui l'animazione di rotazione 3D */
}


@keyframes rotate3d {
  0% {
    transform: rotate3d(0, 1, 0, 0deg); /* Angolo di partenza */
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg); /* Angolo di fine (una rotazione completa) */
  }
}

.centralina__right {
}

@media (max-width: 1900px) {
	.grid__left-mountain, .grid__right-mountain {
		width: 180px;
	}
}

@media (min-width: 2500px) {
	.grid__dots {
		background-size: inherit !important;
	}  
}


/**************************
INTRO STILI MOBILE
**************************/

@media screen and (max-height: 670px) {
	.intro {
		height: 720px;
	}
	
	.intro__scroll {
		display: none;
	}
}

@media screen and (max-width: 1400px) {
	.grid__left-mountain, .grid__right-mountain {
		display: none;
	}
}

/**/
@media screen and (max-height: 700px) and (min-width: 768px) {
	.grid__back-mountain {
		display: none;
	}
}

@media screen and (max-width: 1201px) {
	
	.header-fixed {
		height: 83px;
	}
	
	.progress-bar {
		width: 100%;
		height: 5px;
		background: var(--PrimaryColor);
		opacity: 1;
		animation: progress-bar 7.5s infinite linear;
	}
	
	.header-scroll .progress-bar {
		height: 5px;
	}
	
	.grid__dots {
		animation: grid-dots 15s infinite linear !important;
	}
		
	.grid__cubes {
		left: 5%;
		transform: scale(1);
		bottom: 28px;
	}
	
	.grid {
		bottom: -100px;
	}
	
	.intro {
		overflow: hidden;
	}
		
	/* Posizione Cubi Radarmeteo */
	.cube-1 {
		width: 56px;	
		height: 66px;
		right: calc(50% + 135px);
    	bottom: 467px;
	}
	.cube-2 {
		width: 56px;	
		height: 66px;
		right: calc(50% - 191px);
    	bottom: 467px;
	}
	.cube-3 {
		width: 64px;	
		height: 76px;
		right: calc(50% + -32px);
    	bottom: 370px;
	}
	.cube-4 {
		width: 80px; 
		height: 93px;
		right: calc(50% + 154px);
    	bottom: 185px;
	}
	.cube-5 {
		width: 80px; 
		height: 93px;
		right: calc(50% + -233px);
    	bottom: 185px;
	}
	
	/* Posizione Cubi Hypermeteo */
	.cube-6 {
		width: 56px;	
		height: 66px;
		left: unset;
		right: calc(50% + 135px);
    	bottom: 467px;
	}
	.cube-7 {
		width: 56px;	
		height: 66px;
		left: unset;
		right: calc(50% - 191px);
    	bottom: 467px;
	}
	
	.cube-8 {
		width: 80px; 
		height: 93px;
		left: unset;
		right: calc(50% + 154px);
    	bottom: 185px;
	}
	.cube-9 {
		width: 80px; 
		height: 93px;
		left: unset;
		right: calc(50% + -233px);
    	bottom: 185px;
	}
	
	.header__left, .header__right {
		position: absolute;
		width: 80%;
		text-align: center;
		padding-top: 20px;
	}
		
	.header__left img, .header__right img {
		width: 280px;
	}
	
	h1 {
		font-size: 1.2rem;
	}
	
	.header__left {
		visibility: visible;
		opacity: 1;
		z-index: 8;
		animation: radarmeteo__slider 15s infinite ease-in-out;
	}

	.header__right {
		visibility: hidden;
		opacity: 0;
		z-index: 7;
		animation: hypermeteo__slider 15s infinite ease-in-out;
	}
	
	.grid__cubes__radarmeteo, .grid__cubes__hypermeteo {
		width: 100%;
		max-width: inherit;
	}
	
	/******************* Stili cubi ******************/
	
	.grid__cubes__radarmeteo {
		right: 0;
		visibility: visible;
		opacity: 1;
		z-index: 8;
		animation: radarmeteo__slider 15s infinite ease-in-out;
	}
	
	.grid__cubes__hypermeteo {
		left: 0;
		visibility: hidden;
		opacity: 0;
		z-index: 7;
		animation: hypermeteo__slider 15s infinite ease-in-out;
	}
			
	.service_cube {
		overflow: visible;
	}
	
	.label-radar, .label-hyper {
		width: 145px;
		font-size: 0.9rem;
		opacity: 1;
		padding: 8px 8px;
	}
	
	[class*='cube-']:hover .label-radar,
	[class*='cube-']:hover .label-hyper {
		opacity: inherit;
	}
	
	.cube-1 .label-radar {bottom: 85px;}
	.cube-2 .label-radar {bottom: 85px;}
	.cube-3 .label-radar {bottom: 95px;}
	.cube-4 .label-radar {bottom: 110px;}
	.cube-5 .label-radar {bottom: 110px;}
	.cube-6 .label-hyper {bottom: 85px;}
	.cube-7 .label-hyper {bottom: 85px;}
	.cube-8 .label-hyper {bottom: 110px;}
	.cube-9 .label-hyper {bottom: 110px;}
	
}

@keyframes radarmeteo__slider {
	0% {}
	45%{visibility: visible; opacity: 1; z-index: 8;}
	50%{visibility: hidden; opacity: 0; z-index: 7;}
	95% {visibility: hidden; opacity: 0; z-index: 7;}
}

@keyframes hypermeteo__slider {
	0% {}
	45%{visibility: hidden; opacity: 0; z-index: 7;}
	50%{visibility: visible; opacity: 1; z-index: 8;}
	95% {visibility: visible; opacity: 1; z-index: 8;}
}

@keyframes grid-dots {
	0% {background-image: url("../img/dots-green.svg");}
	45%{background-image: url("../img/dots-green.svg");}
	50%{background-image: url("../img/dots-white.svg");}
	95% {background-image: url("../img/dots-white.svg");}
	100% {background-image: url("../img/dots-green.svg");}
}

@keyframes progress-bar{
		0% {width: 0%;}
		100% {width: 100%;}
	}

@media (max-width: 768px) {
	
	.grid__dots {
		animation: grid-dots-mobile 15s infinite linear !important;
	}
	
	.header__left, .grid__cubes__radarmeteo {
		animation: radarmeteo__slider--mobile 15s infinite ease-in-out;
	}

	.header__right, .grid__cubes__hypermeteo {
		animation: hypermeteo__slider--mobile 15s infinite ease-in-out;
	}
	
	.progress-bar {
		animation: progress-bar-mobile 7.5s infinite linear;
	}
	
	/* Posizione Cubi Radarmeteo */
	.cube-1 {
		animation: green_cloud_mobile  5s infinite ease-in-out;
		width: 56px;	
		height: 66px;
		right: calc(50% + 80px);
    	bottom: 467px;
	}
	.cube-2 {
		animation: green_drop_mobile  6s infinite ease-in-out;
		width: 56px;	
		height: 66px;
		right: calc(50% - 135px);
    	bottom: 467px;
	}
	.cube-3 {
		animation: green_lightning_mobile  8s infinite ease-in-out;
		width: 64px;	
		height: 76px;
		right: calc(50% + -32px);
    	bottom: 370px;
	}
	.cube-4 {
		animation: green_thermometer_mobile  4.5s infinite ease-in-out;
		width: 80px; 
		height: 93px;
		right: calc(50% + 56px);
    	bottom: 185px;
	}
	.cube-5 {
		animation: green_cloud_mobile  7s infinite ease-in-out;
		width: 80px; 
		height: 93px;
		right: calc(50% + -135px);
    	bottom: 185px;
	}
	
	/* Posizione Cubi Hypermeteo */
	.cube-6 {
		animation: white_cloud_mobile  5s infinite ease-in-out;
		width: 56px;	
		height: 66px;
		left: unset;
		right: calc(50% + 80px);
    	bottom: 467px;
	}
	.cube-7 {
		animation: white_drop_mobile  6.5s infinite ease-in-out;
		width: 56px;	
		height: 66px;
		left: unset;
		right: calc(50% - 135px);
    	bottom: 467px;
	}
	
	.cube-8 {
		animation: white_lightning_mobile  6s infinite ease-in-out;
		width: 80px; 
		height: 93px;
		left: unset;
		right: calc(50% + 56px);
    	bottom: 185px;
	}
	.cube-9 {
		animation: white_thermometer_mobile  5.5s infinite ease-in-out;
		width: 80px; 
		height: 93px;
		left: unset;
		right: calc(50% + -135px);
    	bottom: 185px;
	} 
	
	.intro__scroll {
		display: none;
	}
}

@keyframes radarmeteo__slider--mobile {
	0% {}
	45%{visibility: visible; opacity: 1; z-index: 8;}
	50%{visibility: hidden; opacity: 0; z-index: 7;}
	95% {visibility: hidden; opacity: 0; z-index: 7;}
}

@keyframes hypermeteo__slider--mobile {
	0% {}
	45%{visibility: hidden; opacity: 0; z-index: 7;}
	50%{visibility: visible; opacity: 1; z-index: 8;}
	95% {visibility: visible; opacity: 1; z-index: 8;}
}

@keyframes grid-dots-mobile {
	0% {background-image: url("../img/dots-green-mobile.svg");}
	45%{background-image: url("../img/dots-green-mobile.svg");}
	50%{background-image: url("../img/dots-white-mobile.svg");}
	95% {background-image: url("../img/dots-white-mobile.svg");}
	100% {background-image: url("../img/dots-green-mobile.svg");}
}

@keyframes progress-bar-mobile {
	0% {width: 0%;}
	100% {width: 100%;}
}

/* Animazioni icone che cambiano cubi Radarmeteo */

@keyframes green_cloud_mobile {
	0% { background-image: url("../img/cloud-green-cube.png"); }
	8% { background-image: url("../img/cloud-green-cube.png"); }
	16% { background-image: url("../img/cloud-green-cube.png"); }
	25% { background-image: url("../img/drop-green-cube.png"); }		
	33% { background-image: url("../img/drop-green-cube.png"); }
	41% { background-image: url("../img/drop-green-cube.png"); }
	50% { background-image: url("../img/thermometer-green-cube.png"); }
	58% { background-image: url("../img/thermometer-green-cube.png"); }
	66% { background-image: url("../img/thermometer-green-cube.png"); }
	74% { background-image: url("../img/lightning-green-cube.png"); }
	83% { background-image: url("../img/lightning-green-cube.png"); }
	91% { background-image: url("../img/lightning-green-cube.png"); }
	100% { background-image: url("../img/cloud-green-cube.png"); }
}

@keyframes green_drop_mobile {
	0% { background-image: url("../img/drop-green-cube.png"); }
	8% { background-image: url("../img/drop-green-cube.png"); }
	16% { background-image: url("../img/drop-green-cube.png"); }
	25% { background-image: url("../img/lightning-green-cube.png"); } 		
	33% { background-image: url("../img/lightning-green-cube.png"); }
	41% { background-image: url("../img/lightning-green-cube.png"); }
	50% { background-image: url("../img/cloud-green-cube.png"); }
	58% { background-image: url("../img/cloud-green-cube.png"); }
	66% { background-image: url("../img/cloud-green-cube.png"); }
	74% { background-image: url("../img/thermometer-green-cube.png"); }
	83% { background-image: url("../img/thermometer-green-cube.png"); }
	91% { background-image: url("../img/thermometer-green-cube.png"); }
	100% { background-image: url("../img/drop-green-cube.png"); }
}

@keyframes green_lightning_mobile {
	0% { background-image: url("../img/lightning-green-cube.png"); }
	8% { background-image: url("../img/lightning-green-cube.png"); }
	16% { background-image: url("../img/lightning-green-cube.png"); }
	25% { background-image: url("../img/thermometer-green-cube.png"); }		
	33% { background-image: url("../img/thermometer-green-cube.png"); }
	41% { background-image: url("../img/thermometer-green-cube.png"); }
	50% { background-image: url("../img/drop-green-cube.png"); }
	58% { background-image: url("../img/drop-green-cube.png"); }
	66% { background-image: url("../img/drop-green-cube.png"); }
	74% { background-image: url("../img/cloud-green-cube.png"); }
	83% { background-image: url("../img/cloud-green-cube.png"); }
	91% { background-image: url("../img/cloud-green-cube.png"); }
	100% { background-image: url("../img/lightning-green-cube.png"); }
}

@keyframes green_thermometer_mobile {
	0% { background-image: url("../img/thermometer-green-cube.png"); }
	8% { background-image: url("../img/thermometer-green-cube.png"); }
	16% { background-image: url("../img/thermometer-green-cube.png"); }
	25% { background-image: url("../img/drop-green-cube.png"); }		
	33% { background-image: url("../img/drop-green-cube.png"); }
	41% { background-image: url("../img/drop-green-cube.png"); }
	50% { background-image: url("../img/cloud-green-cube.png"); }
	58% { background-image: url("../img/cloud-green-cube.png"); }
	66% { background-image: url("../img/cloud-green-cube.png"); }
	74% { background-image: url("../img/lightning-green-cube.png"); }
	83% { background-image: url("../img/lightning-green-cube.png"); }
	91% { background-image: url("../img/lightning-green-cube.png"); }
	100% { background-image: url("../img/thermometer-green-cube.png"); }
}

/* Animazioni icone che cambiano cubi Hypermeteo */

@keyframes white_cloud_mobile {
	0% { background-image: url("../img/cloud-white-cube.png"); }
	8% { background-image: url("../img/cloud-white-cube.png"); }
	16% { background-image: url("../img/cloud-white-cube.png"); }
	25% { background-image: url("../img/drop-white-cube.png"); }		
	33% { background-image: url("../img/drop-white-cube.png"); }
	41% { background-image: url("../img/drop-white-cube.png"); }
	50% { background-image: url("../img/thermometer-white-cube.png"); }
	58% { background-image: url("../img/thermometer-white-cube.png"); }
	66% { background-image: url("../img/thermometer-white-cube.png"); }
	74% { background-image: url("../img/lightning-white-cube.png"); }
	83% { background-image: url("../img/lightning-white-cube.png"); }
	91% { background-image: url("../img/lightning-white-cube.png"); }
	100% { background-image: url("../img/cloud-white-cube.png"); }
}

@keyframes white_drop_mobile {
	0% { background-image: url("../img/drop-white-cube.png"); }
	8% { background-image: url("../img/drop-white-cube.png"); }
	16% { background-image: url("../img/drop-white-cube.png"); }
	25% { background-image: url("../img/lightning-white-cube.png"); }		
	33% { background-image: url("../img/lightning-white-cube.png"); }
	41% { background-image: url("../img/lightning-white-cube.png"); }
	50% { background-image: url("../img/cloud-white-cube.png"); }
	58% { background-image: url("../img/cloud-white-cube.png"); }
	66% { background-image: url("../img/cloud-white-cube.png"); }
	74% { background-image: url("../img/thermometer-white-cube.png"); }
	83% { background-image: url("../img/thermometer-white-cube.png"); }
	91% { background-image: url("../img/thermometer-white-cube.png"); }
	100% { background-image: url("../img/drop-white-cube.png"); }
}

@keyframes white_lightning_mobile {
	0% { background-image: url("../img/lightning-white-cube.png"); }
	8% { background-image: url("../img/lightning-white-cube.png"); }
	16% { background-image: url("../img/lightning-white-cube.png"); }
	25% { background-image: url("../img/thermometer-white-cube.png"); }		
	33% { background-image: url("../img/thermometer-white-cube.png"); }
	41% { background-image: url("../img/thermometer-white-cube.png"); }
	50% { background-image: url("../img/drop-white-cube.png"); }
	58% { background-image: url("../img/drop-white-cube.png"); }
	66% { background-image: url("../img/drop-white-cube.png"); }
	74% { background-image: url("../img/cloud-white-cube.png"); }
	83% { background-image: url("../img/cloud-white-cube.png"); }
	91% { background-image: url("../img/cloud-white-cube.png"); }
	100% { background-image: url("../img/lightning-white-cube.png"); }
}

@keyframes white_thermometer_mobile {
	0% { background-image: url("../img/thermometer-white-cube.png"); }
	8% { background-image: url("../img/thermometer-white-cube.png"); }
	16% { background-image: url("../img/thermometer-white-cube.png"); }
	25% { background-image: url("../img/drop-white-cube.png"); }		
	33% { background-image: url("../img/drop-white-cube.png"); }
	41% { background-image: url("../img/drop-white-cube.png"); }
	50% { background-image: url("../img/cloud-white-cube.png"); }
	58% { background-image: url("../img/cloud-white-cube.png"); }
	66% { background-image: url("../img/cloud-white-cube.png"); }
	74% { background-image: url("../img/lightning-white-cube.png"); }
	83% { background-image: url("../img/lightning-white-cube.png"); }
	91% { background-image: url("../img/lightning-white-cube.png"); }
	100% { background-image: url("../img/thermometer-white-cube.png"); }
}

@media screen and (min-width: 1201px) and (max-height: 800px) {
	.grid, .grid__vertical-lines, .grid__vertical-lines--showdiv, 
	.grid__horizontal-lines, .grid__dots, .grid__cubes {
		bottom: -50px;
	}
	
	.header__left, .header__right {
		padding-top: 20px;
	}
		
	.header__left img, .header__right img {
		width: 280px;
	}
	
	h1 {
		font-size: 1.2rem;
	}
	
	.grid__back-mountain {
		bottom: 541px;
	}
			
	.label-radar, .label-hyper {
		font-size: 1rem;
	}
	
}


/************************ 
RADARMETEO
************************/
.radarmeteo {
	width: 100%;
	min-height: 500px;
	height: auto;
	padding: 15vh 0;
	font-weight: lighter;
}

.radarmeteo__text {
	padding: 50px 0;
}

.radarmeteo img {
	width: 100%;
}

/************************ 
HYPERMETEO
************************/
.hypermeteo {
	display: flex;
    flex-flow: row;
    flex-wrap: wrap;
	width: 100%;
	height: auto;
	font-weight: lighter;
}

.hypermeteo__col-left,
.hypermeteo__col-right {
	width: 50%;
}

.hypermeteo__col-left {
	background: #dadada;
	display: flex;
	justify-content: right; /* Allineamento orizzontale al centro */
	align-items: center;
	padding-right: 70px;
}

.hypermeteo__col-left img {
	width: 90%;
}

.hypermeteo__col-right {
	background: var(--PrimaryColor);
	color: #fff;
	padding: 15vh 80px;
}

.hypermeteo__col-right div {
	width: 80%;
	max-width: 700px;
}



@media screen and (max-width: 1200px) {
	
	.hypermeteo {
		flex-direction: column-reverse;
	}
	
	.hypermeteo__col-left, .hypermeteo__col-right {
		width: 100%;
	}
	
	.hypermeteo__col-left {
		justify-content: center;
		padding-right: 0px;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	.hypermeteo__col-right {
		padding: 15vh 0px;
	}
	
	.hypermeteo__col-right div {
		width: 80%;
		max-width: unset;
	    margin: 0 auto;
	}

}

/************************ 
CONTACT US
************************/

.form {
	margin: 150px 0 100px 0;
    height: 250px;
	overflow: hidden;
	transition: all 0.8s cubic-bezier(.215, .61, .355, 1);
}

.form--open {
	height: auto;
}

.send-email--close {
	visibility: hidden;
	opacity: 0;
}

.form .row {
	margin-bottom: 50px;
}

.form__title {
	text-align: center;
	margin-bottom: 60px;
	font-weight: 300;
}

.form__title h2 {
	font-weight: 500;
}

.form__campi {
	position: relative;
    font-weight: 300;
    color: #606060;
    display: block;
    width: 100%;
    height: 70px;
    border: none !important;
    border-bottom: 1px solid var(--SecondaryColor) !important;
    border-radius: 0 !important;
    background-color: #fff;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0;
    text-decoration: none;
}

.form__campi--textarea {
    padding-top: 30px;
    resize: none;
}

.form__text {
    padding-top: 40px;
    font-weight: 300;
    font-size: 1rem;
}

.wpcf7-list-item {
    margin: 0 0 0 0 !important;
}

.wpcf7-spinner {
    display: block !important;
    margin: 0 auto !important;
}

@media (max-width: 992px) {
	form [class*='col-'] {
		margin-bottom: 30px;
	}

	.form .row {
		margin-bottom: 0px;
	}  
}


/************************ 
FOOTER
************************/

.footer__image {
	width: 100%;
	height: auto;
	margin: 0 0 -2px 0;
}

.footer__contacts {
	padding: 10vh 0;
	background: var(--SecondaryColor);
	color: #fff;
	height: auto;
	font-weight: 300;
	font-size: 1.1rem;
}

.footer__contacts .boxContainer {
	display: flex;
	gap: 25px;
}

.footer__column {
	width: 33%;
	flex-grow: 1;
}


.footer__contacts hr {
	border-top: 1px solid #fff;
	width: 80%;
	margin-left: 0;
}

.footer__contacts span {
	font-weight: 500;
	color: var(--PrimaryColor);
	font-size: 1.2rem;
}

.footer__contacts img {
	height: 30px;
    width: auto;
	margin: 20px 18px 20px 0;
}

.footer__certification img {
	height: 92px;
}

.footer__certification p {
	margin-top: 40px;
}

.footer__certification a {
	color: #fff;
}

.footer__certification a:hover {
	color: var(--PrimaryColor);
	text-decoration: none;
}

.footer__credits {
	height: auto;
	min-height: 80px;
	width: 100%;
	background: #1e1e1e;
	color: #fff;
	padding: 24px 0;
	font-weight: 300;
	font-size: 1rem;
}

.footer__credits__right {
	text-align: right;
}

.footer__credits a {
	color: #B4B4B4;
}

.footer__credits a:hover {
	text-decoration: none;
}

@media (max-width: 1350px) {
	.footer__certification br {
		display: none;
	}  
}

@media (max-width: 992px) {
	.footer__contacts .boxContainer {
		flex-wrap: wrap;
	}
	
	.footer__column {
		width: 100%;
		flex-grow: 1;
	} 
	
	.footer__credits__right {
		text-align: left;
	}
}


/**** Posizione landscape *****/
@media screen and (orientation: landscape ) and (max-height: 650px) {
  /* Stili CSS da applicare quando il dispositivo è in posizione landscape */
	
/*
	body {
		overflow: hidden;
	}
	
	.overlay-landscape {
		display: flex;
		position: fixed;
		width: 100vw;
		height: 100%;
		background: #000;
		z-index: 80;
		text-align: center;
		color: #fff;
		font-weight: 300;
		justify-content: center;
		align-items: center;
	}
	
	.overlay-landscape div {
		width: 600px;
		height: 200px;
	}
	
	.overlay-landscape img {
		padding-bottom: 30px;
	}
*/
}


/****************************************************
STILI TEMPLATE MONITOR
****************************************************/

.see-solutions {
	cursor: pointer;
}


/*Slider*/

.carousel {
	position: absolute;
    width: 90%;
    max-width: 1300px;
    height: auto;
	min-height: 700px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -45%);
    background: rgba(255,255,255, 0.97);
    border-radius: 28px;
    z-index: 50;
	opacity: 1;
    padding: 40px;
	visibility: visible;
	transition: all 0.4s cubic-bezier(.215, .61, .355, 1);
}

/*
.carousel--open {
	z-index: 50;
	opacity: 1;
	visibility: visible;
}
*/

.carousel-item [class*='col-'] {
	padding: 20px;
}

.carousel-item h2 {
	font-weight: 500;
	margin-bottom: 30px;
}

.carousel-item  {
	font-weight: 300;
}

.carousel-item__text img {
	max-width: 320px;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-right: 6px;
    margin-left: 6px;
    text-indent: -999px;
    cursor: pointer;
    background-color: var(--SecondaryColor);
    background-clip: padding-box;
    border: 0;
	border-radius: 7px;
    border-top: none;
    border-bottom: none;
    opacity: 1;
    transition: opacity .6s ease;
	margin-bottom: 12px;
}

.carousel-indicators .active {
    background-color: var(--PrimaryColor);
}


.carousel-control-next, .carousel-control-prev {
    position: absolute;
    top: 50%;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    padding: 0;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: 1 !important; 
    transition: none;
    height: 60px;
    transform: translateY(-50%);
}

.carousel-control-next:hover, 
.carousel-control-prev:hover {
	opacity: 1 !important;
}

.carousel-control-prev {
	left: -30px;
}

.carousel-control-next {
	right: -30px;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
	border-radius: 15px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
    background-color: var(--PrimaryColor);
	transition: all 0.2s cubic-bezier(.215, .61, .355, 1);
}

.carousel-control-next-icon:hover, 
.carousel-control-prev-icon:hover {
    background-color: var(--SecondaryColor);
}

.carousel-control-next-icon {
    background-image: url("../img/next.svg");
}

.carousel-control-prev-icon {
	background-image: url("../img/prev.svg");
}


/**** Stili template policy ****/

.template-policy .header-fixed  {
	background-color: rgba(60,61,61,1);
}

.template-policy .header__left, .template-policy .header__right {
	width: 250px;
	height: auto;
	padding: 10px 0;
}

.template-policy .header__left h1, .template-policy .header__right h1 {
	display: none;
}

.template-policy .header__left img, .template-policy .header__right img {
	margin-bottom: 10px;
}


/****************************************************
ANIMAZIONI RADARMETEO E HYPERMETEO
****************************************************/

.iframe-size {
	width: 600px;
	height: 600px;
}

@media (max-width: 768px) {
	.iframe-size,
	#animation_container, 
	#canvas,
	#dom_overlay_container {
		width: 400px !important;
		height: 400px !important;
	}
  
}

@media (max-width: 576px) {
	.iframe-size,
	#animation_container, 
	#canvas,
	#dom_overlay_container {
		width: 300px !important;
		height: 300px !important;
	}
  
}


.mc4wp-checkbox-contact-form-7 span {
	display: none;
}


/********************* STILI PAGINA 404 **********************/

.intro--page404 {
	display: flex;
	align-items: center;
}

.intro--page404 .boxContainer {
	text-align: center;
}

.intro--page404 .boxContainer a {
	color: var(--PrimaryColor);
	text-decoration: underline;
}


/******************* Stili cubi inquadrati dal qrcode con la classe aggiunta tramite php in base alla query string ******************/

@media (max-width: 1201px) {
	
	.company-radarmeteo .grid__dots,
	.company-hypermeteo .grid__dots {
		animation: none !important;
	}
	
	.company-radarmeteo .progress-bar,
	.company-hypermeteo .progress-bar {
		display: none;
	}
	
	.company-radarmeteo .copy__divider,
	.company-hypermeteo .copy__divider {
		display: none;		
	}
	
	/**************** Se è Radarmeteo ****************/
	
	.company-radarmeteo .header__left, 
	.company-radarmeteo .grid__cubes__radarmeteo {
		visibility: visible;
		opacity: 1;
		z-index: 8;
		animation: none;
	}
	
	.company-radarmeteo .header__right, 
	.company-radarmeteo .grid__cubes__hypermeteo {
		visibility: hidden;
		opacity: 0;
		z-index: 7;
		animation: none;
	}
	
	.company-radarmeteo .grid__dots {
		background-image: url(../img/dots-green.svg);
	}
	
	/* Sezione Hypermeteo */
	.company-radarmeteo .hypermeteo {
		display: none;
	}
	
	.company-radarmeteo .form {
		margin: 0 0 100px 0;
	}
	
	/* Footer */
	.company-radarmeteo .footer__contacts .footer__column:nth-child(2) {
		display: none;		
	}
	
	.company-radarmeteo .copy__hypermeteo {
		display: none;
	} 
	
	
	/**************** Se è Hypermeteo ****************/
	
	.company-hypermeteo .header__right, 
	.company-hypermeteo .grid__cubes__hypermeteo {
		visibility: visible;
		opacity: 1;
		z-index: 8;
		animation: none;
	}
	
	.company-hypermeteo .header__left, 
	.company-hypermeteo .grid__cubes__radarmeteo {
		visibility: hidden;
		opacity: 0;
		z-index: 7;
		animation: none;
	}
	
	.company-hypermeteo .grid__dots {
		background-image: url(../img/dots-white.svg);
	}
	
	/* Sezione Radarmeteo */
	.company-hypermeteo .radarmeteo {
		display: none;
	}
	
	/* Footer */
	.company-hypermeteo .footer__contacts .footer__column:nth-child(1) {
		display: none;		
	}
	
	.company-hypermeteo .copy__radarmeteo {
		display: none;
	} 
  
}


@media (max-width: 768px) {
	
	.company-radarmeteo .grid__dots {
		background-image: url(../img/dots-green-mobile.svg);
	}
	
	.company-hypermeteo .grid__dots {
		background-image: url(../img/dots-white-mobile.svg);
	}	
	
}

/******************* Fine stili basati sulla query string *******************/






/*Padding incluso nella misura del box*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}