@import url(fontawesome-all.min.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400';
 
 @font-face {
    font-family: "Gotham Black";
    src: url("../webfonts/Gotham-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
}

@-ms-viewport {
	width: device-width;
}

body {
	-ms-overflow-style: scrollbar;
	background-color: black;
	color: rgba(255, 255, 255, 0.65);
	padding-bottom: 0;
}

body, input, select, textarea {
	font-family: "Source Sans Pro", sans-serif;
	font-size: 17pt;
	line-height: 1;
}

p{
	margin:0;
}

li{
	list-style-type: none;
}

strong{
	display:contents;
	white-space:pre-line;
}

.logo-cpn {
	width:400px; 
	padding-top: 5%; 
	padding-bottom: 5%
}

.title{
	color:#ff671f;
	font-family: 'Montserrat', sans-serif;
	
}

.page {
	background-color: #ffffff;
	color: #1D1B1C;
	border-radius: 0.25em;
	position:relative;
	overflow: hidden;      
    height: auto;   
    
    padding:5em 5em 3em 5em;
}

.paragraph{
	border-top:solid;
	border-color:#F8F8F4;
	display:flex;
	padding-top:2%;
	padding-bottom:2%;
	font-size:15pt;
}

.aButton{
	position:relative;
	display: inline-block;
  	text-decoration: none;
  	text-align: center;
  	padding: 14px 25px;
  	margin-top: 2em;
  	border: solid;
  	box-shadow: inset 0 0 0 0 #ff671f;
  	color: #ff671f;
  	transition: color .6s ease-in-out, box-shadow .6s ease-in-out;
}

.aButton:hover {
  box-shadow: inset 100vw 0 0 0 #D64E0E;
  color: white;
}

neon-pulse {
  position:relative;
}

.neon-pulse::before,
.neon-pulse::after {
  content:"";
  position:absolute;
  inset:-4px;
  border:2px solid #ff671f;
  border-radius:inherit;
  transform-origin: center;
  animation:pulseOut 2s ease-out infinite;
  opacity:0;
  pointer-events:none;
}

@keyframes pulseOut {
  0% {
    transform: scale(1,1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2,1.6); 
    opacity: 0; 
  }
}

#wrapper {
	width: 70%;
	max-width: calc(100% - 4em);
	margin: 0 auto;
}

#header {
	text-align:center;
}

#imageOne{
	display: block;      
    margin-left: auto;
	margin-bottom:2em;
	width:80%;
}

#imageTwo{
	float: right;
	width: 20%;
	bottom: 8%;
	right: 8%;
}

#imageThree{
	float:left;      
	width:27em;
	margin-right:3%;
	padding-top:2%;
}
#imageThreeCropped{
	float:left;      
	width:18em;
	margin-right:3%;
	padding-top:7%;
	display:none;
}

#hoverDiv{
	background-color: rgb(255, 103, 31,0.9);
 	color: white;
  	font-weight: bold;
 	font-size: 2.5vw;
  	position: absolute;
 	top: 15%;
 	left:10%;
 	padding: 3%;
  	width: 35%;
  	font-family: 'Montserrat', sans-serif;
}


/* contact-popUp */


#contact {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background: #e9e5d6;                        
	padding: 2em;
	border-radius: 4px;
	max-width: 90%;
	width: 650px;
    font-family: 'Montserrat', sans-serif;
    color: #333;
    margin: auto;
}

#contact a{    
	color: inherit;
	}
	
#contact a:hover{
	text-decoration:none;
}	

#contact h2 {
    color: #ff671f; 
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

#contact p {
    color: #666;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

#contact input[type="checkbox"] + label{
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  font-size: 1em;
  font-weight: 300;
  padding-left: 2.4em;
  padding-right: 0.75em;
  position: relative;
  color: #636363;
}

#contact select, textarea {
  color: #636363;
  background-color: rgba(222, 222, 222, 0.25);
  border-color: #dddddd;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 17pt;
  line-height: 1;
}

#contact select{
	font-weight: 300;
}

#contact .close-popup {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #333;
    cursor: pointer;
}

#contact .button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	border-radius: 8px;
	border: 0;
	cursor: pointer;
	display: inline-block;
	font-weight: 300;
	height: 2.75em;
	line-height: 2.75em;
	min-width: 9.25em;
	padding: 0 1.5em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background-color: #ff671f;
	color: #000 ; 
}

#contact .button:hover {
	background-color: #e55a1a;
	color: #fff;
}

#contact .button:active {
	background-color: rgba(222, 222, 222, 0.5);
}

#contact .fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

#contact .field {
    flex: 1 1 100%; 
    display: flex;
    flex-direction: column;
}

#contact .field.half {
    flex: 1 1 calc(50% - 1rem); 
}

#contact .field.full {
    flex: 1 1 100%; 
}

#contact .field input,
#contact .field select {
    padding: 0.8rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    transition: border-color 0.3s;
	width: 90%;
}

#contact .field input:focus,
#contact .field select:focus {
    border-color: #ff671f; 
    outline: none;
}

#contact label {
  font-weight: 400;
  margin: 0 0 1em 0;
}

.popup-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 999;
}

/* contact-popUp end */

/* Footer */

#footer {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-top: 1em;
	padding-bottom:1em;
	padding-left: 3em;
	padding-right: 3em;
	width: calc(100% + 2em);
}

#footer>* {
	width: calc(50% - 2em);
	margin-left: 2em;
}

#footer	section{
	margin: 0;
	margin-right: 2em;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* Footer end*/

@media only screen and (max-width: 1800px) {
  #imageThree {
    display:none;
  }
   #imageThreeCropped {
    display:block;
  }
}

@media screen and (max-width: 1280px) {
	
	.title{
		font-size:18pt;
	}
	
  	.aButton{
		float:none!important;
	}
	
	#footer {
		padding: 4em 4em 2em 0em;
	} 
	
	#imageOne {
    	width:100%;
  	}
	#imageThree {
    	display:none;
  	}
   #imageThreeCropped {
   	 	display:none;
  	}
  	
}

@media screen and (max-width: 980px) {
	
	#footer {
		padding: 4em 3em 2em 3em;
		display: block;
		margin: 0 0 3em 0;
		width: 100%;
		font-size:12pt;
	}

	#footer>* {
		width: 100%;
		margin-left: 0;
		margin-bottom: 3em;
	}
	.page{
		font-size:12pt;
	}
	#imageTwo {
   	 	display:none;
  	}
}

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

	li{
		display:flex;
		flex-direction:column;
		flex-wrap:wrap;
		align-content:center;
	}
	#footer {
		padding: 3em 2em 1em 2em;
		font-size:8pt;
	}
	#imageOne {
    	margin:0;
  	}
	.logo-cpn{
		width: 200px;
	}
	.page{
		font-size:10pt;
		padding:1em;
	}
	.title{
		font-size:12pt;
	}
	.paragraph{
		font-size:10pt;
	}
	
	.aButton{
	  	background-color:#ff671f;
	  	color: white;
	  	transition: none; 
	  	display:block;
	  	width:50%;
	}
	
	.aButton:hover {
		box-shadow: none;
   	 	background-color: #e55a1a;
    	color: white;
	}
	
	.aButton:visited {
   	 	background-color:#FF590B;
	}
	
	#hoverDiv{
	 	font-size: 5vw;
	  	padding:5px;
	 	top: 6%;
	  	width: 65%;
	}
}

@media screen and (max-width: 480px) {
	html, body {
		min-width: 320px;
	}
	
	#wrapper {
		max-width: calc(100% - 2em);
	}
	
	#footer {
		padding: 1em;
	}
	
	#contact{
		padding:1em!important;
	}
	
	.button{
		font-size: 13pt!important;
	}
	
	.header{
		height:10vh!important;	
	}
	
	.CPN{
		font-size:3em!important;
	}
	
	.circle{
		width:20px!important;
		height:20px!important;
	}
	
	 :root {
    --rot1-translateX: -60px !important;
    --rot2-translateX: -20px !important;
    --rot3-translateX: -45px !important;
    
    --rot1-translateY: -28px !important;
    --rot2-translateY: -22px !important;
    --rot3-translateY: 10px !important;
  }
  
}

@media screen and (max-width: 370px) {
    .button{
        font-size: 11pt!important;
    }
   
    #wrapper {
		max-width: 100%;
	}
}


/* =================================================
   CHECKBOX + RADIO CON LABEL:before — AREA #CONTACT
================================================= */

/* Colore label */
#contact input[type="checkbox"]+label,
#contact input[type="radio"]+label {
	color: #636363;
}

/* Stato base del quadratino/circle */
#contact input[type="checkbox"]+label:before,
#contact input[type="radio"]+label:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	text-transform: none !important;
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;

	border-radius: 8px;
	border: 1px solid #333;   
	content: '';
	display: inline-block;
	font-size: .8em;
	height: 2.0625em;
	width: 2.0625em;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 2.0625em;
	background: rgba(222, 222, 222, 0.25);
}

/* Stato checked */
#contact input[type="checkbox"]:checked+label:before,
#contact input[type="radio"]:checked+label:before {
	font-family: "Font Awesome 5 Free";
	content: '\f00c';
	background-color: #636363;
	border-color: #636363;
	color: #ffffff;
}

/* Stato focus */
#contact input[type="checkbox"]:focus+label:before,
#contact input[type="radio"]:focus+label:before {
	border-color: #8cc9f0;
	box-shadow: 0 0 0 1px #8cc9f0;
}


/* =================================================
   CHECKBOX CUSTOM 
================================================= */
#contact .field .checkbox input[type="checkbox"] {
	width: 20px;
	height: 20px;
	border: 1px solid #000;
	margin-right: 0.5rem;
	appearance: none;
	background-color: #fff;
	cursor: pointer;
	transition: background-color .3s, border-color .3s;
}

/* Hover e checked (stessi valori → raggruppati) */
#contact .field .checkbox input[type="checkbox"]:hover,
#contact .field .checkbox input[type="checkbox"]:checked {
	background-color: #e9e5d6;
	border-color: #e9e5d6;
}

#contact .field .checkbox input[type="checkbox"]:checked {
	position: relative;
}

#contact .field .checkbox input[type="checkbox"]:checked::after {
	content: '✔';
	color: green;
	font-size: 14px;
	position: absolute;
	top: 2px;
	left: 4px;
}

#contact .field .checkbox label {
	font-size: .9rem;
	font-weight: bold;
	color: #333;
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}


.header {
    height: 25vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
  }
 
.CPN{
	font-family: "Gotham Black", sans-serif;
	font-weight: bold;
    font-size:6em;
    color:white;
}


    
.headerContainer{
	position: relative; 
    display: inline-block;
    width:auto;
}

.circle {
    position: absolute;
    background: white;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    opacity: 0;
    top:35%;
  }

  .circle1 {
    animation:rot1 1s ease-out forwards;
    animation-delay: 2s;
  }
  
  .circle2 {
    animation: rot2 1s ease-out forwards 0.2s; 
    animation-delay: 2s;
  }

  .circle3 {
    animation: rot3 1s ease-out forwards 0.4s;
    animation-delay: 2s;
  }
  
  :root {
  --rot1-translateX: -105px;
  --rot2-translateX: -35px;
  --rot3-translateX: -78px;
  
  --rot1-translateY: -45px;
  --rot2-translateY: -33px;
  --rot3-translateY: 28px;
}
  
  @keyframes rot1 { 0% {transform: rotate(0deg)  rotate(0deg); opacity:0;}
    100% {transform: rotate(360deg) translateX(var(--rot1-translateX)) translateY(var(--rot1-translateY)) rotate(0deg);  opacity:1;} }
  @keyframes rot2 { 0% {transform: rotate(0deg)  rotate(0deg); opacity:1;}
    100% {transform: rotate(360deg) translateX(var(--rot2-translateX)) translateY(var(--rot2-translateY)) rotate(0deg);  opacity:1;} }
  @keyframes rot3 { 0% {transform: rotate(0deg) translateX(-3vw) rotate(0deg); opacity:0;}
    100% {transform: rotate(360deg) translateX(var(--rot3-translateX)) translateY(var(--rot3-translateY)) rotate(0deg);  opacity:1;} }