@charset "UTF-8";

:root
{
	--app-overlay-background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
/*
	--app-overlay-background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
*/
	--app-gradient-color-light: linear-gradient(0deg, #eaeaea 0%, #fafafa 100%);
	--app-gradient-color-light-rv: linear-gradient(180deg,  #fafafa 0%, #eaeaea 100%);
	--app-gradient-light-modified: linear-gradient(180deg, rgba(255,255,255,0.7) 0%, #EAEAEA 100%);
	--app-gradient-color-dark-3: linear-gradient(0deg, #4f5658 0%, #2a2e2f 100%);
	--app-gradient-color-dark-4a5255: linear-gradient(180deg, var(--app-color-dark-3) 0%, #4A5255 100%);
	--app-gradient-color-dark-4a5255-rv: linear-gradient(0deg, var(--app-color-dark) 0%, #4A5255 100%);
	--app-gradient-color-brand-5: linear-gradient(0deg, var(--app-color-brand-5) 0%, #efefef 100%);
	--app-gradient-color-green-3: linear-gradient(0deg, var(--app-color-green-3) 0%, #efefef 100%);
		--app-gradient-color-green-1: linear-gradient(0deg, var(--app-color-green-1) 0%, #efefef 100%);
	--app-gradient-color-l-3: linear-gradient(0deg, var(--app-color-green-3) 0%, #efefef 100%);
	--app-gradient-white-fade: linear-gradient(0deg,
													rgba(255,255,255,0.7) 0%,
													rgba(255,255,255,0.5) 33%,
													rgba(255,255,255,0.1) 66%,
													rgba(255,255,255,0.0) 100% );
	--app-gradient-white-fade-small:  linear-gradient(0deg, #FFFFFF00 0%, #FFFFFF 100%);
}


h1,h2,h3,h4,h5,h6
{
 /*line-height: 1;*/
    padding: 0;
    margin: 0;
    font-weight: 800;
}
p.color-light,
h1.color-light,
h2.color-light,
h3.color-light,
h4.color-light,
h5.color-light,
h6.color-light
{
	color: var(--app-color-light) !important;
}
h1.color-light
{
	text-shadow: 0px 1px 8px rgba(0,0,0,0.1618);
}
h2.color-light
{
	text-shadow: 0px 1px 10px rgba(0,0,0,0.4);
}
h3.color-light
{
	text-shadow: 0px 1px 8px rgba(0,0,0,0.1618);
}
h4.color-light{
    text-shadow: 0px 1px 6px rgba(0,0,0,0.1618);
}

p{
    white-space: pre-line;
}

p.color-light-3,
h1.color-light-3,
h2.color-light-3,
h3.color-light-3,
h4.color-light-3,
h5.color-light-3,
h6.color-light-3
{
	color: var(--app-color-light-3) !important;
}

.color-light-3 p,
.color-light-3 h1,
.color-light-3 h2,
.color-light-3 h3,
.color-light-3 h4,
.color-light-3 h5,
.color-light-3 h6
{
	color: var(--app-color-light-3) !important;
}

h1.color-dark,
h2.color-dark,
h3.color-dark,
h4.color-dark,
h5.color-dark,
h6.color-dark
{
	color: var(--app-color-dark);
}
h1.color-dark
{
	text-shadow: 0px 1px 8px rgba(255,255,255,0.1618);
}
h2.color-dark
{
	text-shadow: 0px 1px 10px rgba(255,255,255,0.4);
}
h3.color-dark
{
	text-shadow: 0px 1px 8px rgba(255,255,255,0.1618);
}
h5.color-dark
{
	text-shadow: 0px 1px 8px rgba(255,255,255,0.1618);
}

p.color-dark
{
	color: var(--app-color-dark);
}

h1
{
	font-size: 120px;
}
h2
{
	font-size: 95px;
}
h3
{
	font-size: 80px;
}
h4
{
	font-size: 56px;
}
h5
{
	font-size: 40px;
}

label
{
	color: var(--app-color-brand);
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 900;
	/*line-height: 1;*/
}

.w2_3-1_3 > :first-child
{
	width: 60%;
	padding-bottom: 80px;
}
.w2_3-1_3 > :last-child
{
	width: 40%;
}

.w1_3-2_3 > :first-child
{
	width: 40%;
}
.w1_3-2_3 > :last-child
{
	width: 60%;
}


.poligono{
	max-width: 1360px;
	height: 39px;
	clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
	left: 40px;
}
.divisore-fine
{
	height: 3px;
}
.divisore
{
	height: 15px;
}

.divisore__bianco
{
	background: var(--app-color-white);
}

.divisore__verde-3
{
	background: var(--app-color-green-3);
}

.divisore__verde-1
{
	background: var(--app-color-green-1);
}

.divisore__giallo{
	background: var(--app-color-yellow-1);
}
.divisore__rosso{
	background: var(--app-color-brand);
}
.divisore__nero{
	background: var(--app-color-black);
}
.divisore__nero-5{
	background: var(--app-color-dark-5);
}


.overlay
{
	background: var(--app-overlay-background);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
	padding-left: 25px;
	padding-top: 300px

}


.carousel__container
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;

	transition: left var(--pp-transition-medium);

	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;
}

.carousel__item
{
	position: relative;
	min-width: 100vw;
	width: 100vw;
}

.carousel__control
{
	position: absolute;
    left: 140px;
    bottom: 60px;
    right: 140px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

	transition: left var(--pp-transition-default);
	transition: right var(--pp-transition-default);
}
.carousel__control2
{

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

	transition: left var(--pp-transition-default);
	transition: right var(--pp-transition-default);
}
.carousel__indicator
{
	cursor: pointer;
	display: inline-block;
	background: rgba(0,0,0,0.4);
	width: 20px;
	height: 20px;
	margin: 0 15px;
	border: 3px solid var(--app-color-white);
	border-radius: 50%;
}
.carousel__indicator.active,
.carousel__indicator:active
{
	border-color: var(--app-color-brand);
	background: var(--app-color-brand);
}
.carousel__indicator:hover
{
	background: var(--app-color-brand);
}

.scroll-arrow,
.carousel__arrow
{
	cursor: pointer;
	background: rgba(0,0,0,0.4);
    width: 40px;
    height: 40px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 3px solid var(--app-color-light);
    border-radius: 50%;
}
.scroll-arrow,
.carousel__arrow > *
{
	color: var(--app-color-light);
	font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 200, "opsz" 40;
    font-size: 40px;
}
.carousel__arrow:hover
{
	background: var(--app-color-brand);
}
.carousel__arrow:active
{
	border-color: var(--app-color-brand);
}
.carousel__arrow:active > *
{
	color: var(--app-color-black);
}
.carousel__arrow.right > *
{
    left: 2px;
    position: relative;
}

.sezioneInterna-padding{
	padding-left: 5.36vw;
	padding-right: 15px;
}

.sezione
{
    overflow: hidden;
	max-width: 1360px;
	height: 100%;
	padding-top: 114px;
	padding-bottom: 130px;
	margin-left: auto;
	margin-right: auto;
}

.sezione h1,
.sezione h2,
.sezione h3
{
	/*line-height: 1;*/
	margin-top: 40px;
}
.sezione h1 span,
.sezione h2 span,
.sezione h3 span
{
	color: var(--app-color-brand);

	/*line-height: 1;*/
}
.sezione h1 span
{
	font-size: 180px;
}
.sezione h2 span
{
	font-size: 145px;
}
.sezione h3 span
{
	font-size: 110px;

}
.sezione h3 span,
.sezione h2 span,
.sezione h1 span
{
    line-height: 0;
}

.sezione h5
{
	color: var(--app-color-dark-5);
	line-height: 1.15;
}

.sezione p
{
	line-height: 1.3;
	margin-top: 13px;
}

.sezione-color-light
{
	background: var(--app-color-light);
}
.sezione-color-light-rv
{
	background: var(--app-gradient-color-light-rv);
}
.sezione-gradient-color-light{
    background: var(--app-gradient-color-light);
}
.sezione-color-white
{
	background: var(--app-color-white);
}

.sezione-color-dark-3
{
	background: var(--app-gradient-color-dark-3);
	margin: 0 15px;
}
.sezione-color-dark-3 h3,
.sezione-color-dark-3 h5
{
	color: var(--app-color-light);
}

.sezione-color-brand-5
{
	background: var(--app-gradient-color-brand-5);
	margin: 0 15px;
}
.sezione-color-brand-5 h3,
.sezione-color-brand-5 h5
{
	color: var(--app-color-light);
}

.sezione-color-green
{
	background: var(--app-gradient-color-green);
	margin: 0 15px;
	
	color: var(--app-color-dark);
	font-size: 20px;
}


.sezione-color-green-3
{
	background: var(--app-color-green-3);
	
	color: var(--app-color-dark);
	font-size: 20px;
}

.sezione-color-green-gradient-3{
		background: var(--app-gradient-color-green-1);
	margin: 0 15px;

	color: var(--app-color-dark);
	font-size: 20px;
}

.sezione-color-green-3 h2,
.sezione-color-green-3 h3,
.sezione-color-green-3 h5
{
	color: var(--app-color-dark);
}

.sezione-color-yellow-1{
	background: var(--app-color-yellow-1);
}

.sezione-color-dark-gradient{
	background: var(--app-gradient-color-dark-4a5255);
}
.sezione-color-dark-gradient-rv{
	background: var(--app-gradient-color-dark-4a5255-rv);
}


.sezione-border-radius-right
{
	border-radius: 0px 200px;
}
.sezione-border-radius-left
{
	border-radius: 200px 0px;
}




#callToAction{
	width: 1440px;
	height: 910px;
}


.color-green-1{
	color: var(--app-color-green-1) !important;
}

.color-green-3{
	color: var(--app-color-green-3) !important;
}

.email-link {
    transition: color 0.2s;
    cursor: pointer;
	text-decoration: none;
    color: var(--app-color-brand) !important;
    font-weight: normal;
}

.email-link:hover {

	 text-decoration:underline;
}

.riduzioneFont{
	font-size: 16px;
}
.upper-case{
    text-transform: uppercase;
}










/*************************************************************************
|||||||||||||||||||||||||||||SETTING Call to action||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
**************************************************************************/





.redTitle{
    color: var(--app-color-brand);
    text-align: center;
    font: normal normal bold 32px Figtree;
    letter-spacing: 0px;

}



.input{
    border: 2px solid var(--app-color-light-7);
    background-color: transparent;
    border-radius: 20px;
    opacity: 1;
    margin-top: 10px auto;
    margin-bottom: 10px auto;
    text-align: left;
    font-size: 20px;
    letter-spacing: 0px;
    color: #F7F7F7;
    text-transform: uppercase;
    opacity: 1;
    padding-left: 12px;
}

input:focus,
textarea:focus {
    outline: none;
}
input.invalid,
textarea.invalid {
    border-color: var(--app-color-alert) !important;
}
.input-form1, .input-form2{
        width: 100%;
    max-width: 492px;
    min-height: 79px;
}
.input-form3{
        width: 100%;
    max-width: 605px;
    min-height: 79px;
}
.input-form4{
    width: 100%;
max-width: 377px;
min-height: 79px;
}



.sezioneContattiForm{
    padding: 60px;
    border-radius: 0px 100px 100px 100px;
    max-width: 1130px;
    min-height: 723px;
    background: #2C3133 0% 0% no-repeat padding-box;
    box-shadow: 5px 5px 20px #D5D7DB;
    border: 8px solid #FFFFFF;
    opacity: 1;
}

/*
Sezione Icone contatti sezione 1
*/

.iconaContatti {
    width: 250px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sezioneContattiForm_1{
    display:flex;
    gap:20px;
    margin-bottom:20px;
}

.input-form5{
    padding-top: 20px;
    padding-left: 12px;
    min-height:120px;
    margin-bottom:24px;
    width: 100%;
    max-width: 1004px !important;
    height: 186px;
    color: #F7F7F7;
    font: normal normal medium 20px/24px 'Figtree';
    text-transform: uppercase;
    opacity: 1;
    resize: none;
}


.input-form1::placeholder,
.input-form2::placeholder,
.input-form3::placeholder,
.input-form4::placeholder,
.input-form5::placeholder{
}

.input-form1,
.input-form2,
.input-form3,
.input-form4,
.input-form5{
    text-indent:10px;
}




.input-form5:focus,
.input-form5.valid,
.input-form5:valid {
}



.form-success-message>:last-child{
    padding-top: 20px;
}



.checkboxForm{
    display: flex;
    flex-direction: row;
}


.checkboxForm a{
    margin-top: 1px;
    color: var(--app-color-light-7);
    text-align: left;
    font: normal normal 20px 'Figtree';
    letter-spacing: 0px;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 1;
    margin-left: 10px;
    transition: color 0.2s;
    padding-top: 4px;
}
.checkboxForm a:hover{
    margin-top: 0;
    color: var(--app-color-light);
}

/* Illumina il link privacy quando la checkbox è selezionata o in focus */
.checkboxForm input[type="checkbox"]:checked + a,
.checkboxForm input[type="checkbox"]:focus + a {
    color: #fff;
}


.sezioneContattiForm h2{
    color: var(#FFFFFF);
    font-size: 48px;
    font-weight:900;
    margin-bottom:32px;
    text-transform: uppercase;
}


button{
        border-radius: 40px 0px;
}

.introduzioneContactForm {
    margin-left: auto;
    margin-right: auto;
        padding-bottom: 40px;
    }



.introduzioneContactForm h5{
    margin-bottom: 60px;
    color: var(--app-color-brand);
    font: normal normal bold 32px 'Figtree';
    letter-spacing: 0px;
    opacity: 1;
}


#map {
    /*
    margin-top: -120px;
    margin-left: -30px;
    width: calc(100% + 60px);
    height: calc(480px + 140px);
*/
    height: 800px;



    filter: 
        grayscale(100%) 
        brightness(0.8) 
        contrast(1.4);
    -webkit-filter: 
        grayscale(100%) 
        brightness(0.8) 
        contrast(1.4);
}

/* Stile base per la checkbox */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 36px;
    height: 36px;
    border: 2px solid #999999;
    border-radius: 8px;
    background-color: var(--app-color-dark-5);
    position: relative;
    cursor: pointer;
    margin-right: 10px;
    transition: border-color 0.2s, background-color 0.2s;
}

/* Stile quando la checkbox è selezionata */
input[type="checkbox"]:checked {
    border-color: var(--app-color-light);
    background-image: url('../../img/svg/Check_Form_Contacts.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70% 70%;
}

.icona1{
    margin-top: 13px;
}
.form-success-message{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin:0 auto;
    align-items:flex-start;
    text-align:left ;
    color: var(--app-color-light);
}

.form-success-message h5{
    color: var(--app-color-light);
}

.sezioneContattiForm.form-inviato {
    background: var(--app-color-brand) !important;
    transition: background 0.3s;
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* MEDIA QUERY */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media only screen and  (max-width: 993px)
{

}

@media only screen and (max-width: 501px)
{
    .sezione{
        padding-top: 80px;
        padding-bottom: 80px;
    }
    .overlay
{
	padding-left: 25px;
	padding-top: 200px
}
    .checkboxForm a {
        font-size: 16px !important;
        padding-top: 0px;
    }
        .checkboxForm p {
        font-size: 16px !important;
        padding-top: 0px;
    }
    
    .input{
        font-size: 16px !important;
    }
	.carousel__control
	{
		left: 1rem;
		right: 1rem;
	}
}
@media (max-width: 500px) {
    h4{
        font-size: 25px;
    }
}


@media only screen and (min-width:501px) and  (max-width: 993px)
{


}