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


/* COLORI 
Blue #00708a
Grigio chiaro #babec1
Azzurro #add9d6
Blue scuro #303647
Blue scuro 2 #3d455c
*/


/* FONT
font-family: "Merriweather", serif;
font-family: "Montserrat", serif;
*/


html, body {
	margin:0px auto;
	height:100%;
	padding:0px;
	width:100%;
	padding:0px;
	font-family: "Montserrat", serif;
	font-size:14px;
	color:#3d455c;
	overflow:auto;
	background-color:#FFF;
	scroll-behavior: smooth;
}

.colore1 {color:#3d455c}
.colore1 strong { color:#00708}
.colore2 {color:#FFF}
.colore2 strong {color:#add9d6}

.cento {display: block; width: 100%;}
.inner {display: block; width: 70%; position: relative; margin-left: -35%; left: 50%;}

@media (max-width: 900px) {
.sx, .dx {display: block; vertical-align: top;}
}

@media (min-width: 901px) {
.sx, .dx {display: inline-block; vertical-align: top;}
}


/* TOP LINE */
#outertopline {height:auto; background-color:#00708a;}
#innertopline {color:#FFF;}
#toplinedx a img.contatti {text-decoration: none; }
#toplinedx a img.linkedin {text-decoration: none; }

@media (max-width: 900px) {
#innertopline .sx, .dx {width:50%; display: inline-block; vertical-align: top;}
#innertopline .sx {text-align: left;}
#innertopline .dx {text-align: right; }
#innertopline {font-size: 1em; padding: 15px 0 10px 0;}
#toplinedx a img.contatti { height: 15px; width: auto; margin: 0 15px 0;}
#toplinedx a img.linkedin { height: 19px; width: auto;}
}


@media (min-width: 901px) {
#innertopline .sx, .dx {width:50%;}
#innertopline .sx {text-align: left;}
#innertopline .dx {text-align: right;}
#innertopline {font-size: 1.2em; padding: 10px 0 10px 0;}
#toplinedx a img.contatti { height: 18px; width: auto; margin: 0 15px 0;}
#toplinedx a img.linkedin {height: 22px; width: auto;}
}


/* TOP LOGO */
#innertop { padding: 35px 0 35px 0;}
@media (max-width: 900px) {
#topsx, #topdx {display: block; vertical-align: top; text-align: center;}
#topsx img {width:70%; height: auto;}
}

@media (min-width: 901px) {
#topsx, #topdx {display: inline-block; vertical-align: top;}
#topsx {width: 30%; text-align: left;} #topdx {width:70%; text-align: right;}
#topsx img {width:80%; height: auto;}

}


/* RELATORE MOBILE */
.relatoresx, .relatoredx {display: inline-block; vertical-align: top;}
.relatoresx {width: 40%; text-align: right;} .relatoredx {width: 60%; text-align: center;}
#relatoremobile {display: block; background-color: #add9d6; text-align: center; height: 200px; vertical-align: baseline;}
#relatoremobile img {height:180px; width: auto; margin: 20px 0 0 0;}
#relatoremobile a {display: block; width: 40%; background-color:#00708a; color: #FFF; border-radius: 10px; text-align: center; margin: 90px 0 0 40px; padding: 10px; text-decoration: none; font-size: 3.6cqw;}


@media (min-width: 951px) { #relatoremobile{display:none}}

/* BIO */

#triangolo {background: #00708a;
width: 100%;
  --p: 70px; /* control the shape (can be percentage) */
  height: 80px;
  aspect-ratio: 1;
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--p)),0 100%);
}

#outerbio {background: #00708a;}



#datecorso {color:#add9d6; display: block;}
#datecorso h1, #datecorso h2 {margin: 0;}
#datecorso h1 {font-size: 4.1em;}
#datecorso h2 {font-size: 2em;}

@media (max-width: 900px) {
#innerbio {height: auto; padding: 20px 0 0 0; display:block;}
#biosx, #biodx {display: block; text-align: center;}
#biosx {margin: 0 0 25px 0;}
#biosx img {display:none}
#biodx .datecorso {display: none;}
#biosx .datecorso {}
#biosx .relatoredesk {display: none;}
#biosx .relatoremob {float: left;}
#biodx .gestisco {display: block; clear: both; margin: 15px 0 0 0; font-size: 1.1em;}
#biodx font {display: block; text-align: center; font-size: 1.1em;}
#datecorso { margin: 0 0 0 0;}
}


@media (min-width: 901px) {
#innerbio {height: auto; padding: 50px 0 0 0; display: flex; flex-wrap: wrap;}
#outerbio {height: auto;}
#biosx, #biodx {display:flex; vertical-align: top; align-self: stretch; }
#biosx {width: 30%;} #biodx {width:65%; margin-left: 5%;}
#biosx img.relatoredesk {width:95%; height: auto; max-height: none; /* Evita limitazioni sulla massima altezza */
    aspect-ratio: auto; /* Mantiene il rapporto d'aspetto dell'immagine */
    object-fit: contain; /* Facoltativo: adatta l'immagine al contenitore senza distorcerla */
}
#biodx font {vertical-align:middle;}
#datecorso {text-align: center;}
#biosx .datecorso {display: none;}
#biodx font {display: block; text-align: center; font-size: 1.5em;}
#datecorso { margin: 0 0 30px 0;}
}



/* CONTENUTO */

#testo {margin-top: 50px; margin-bottom: 50px; font-size: 1.4em;}
#testo .intro {text-align: center;}
#testo ul {margin: 40px 0 0 0;}
#testo ul li {list-style-type:none; padding: 0 0 0 27px; background-image: url(../bg/check.svg); background-repeat: no-repeat; background-position: top 10px left; background-size: 20px auto; margin: 0 0 15px 0;}
#testo font {display: block; margin: 50px 0 0 0; text-align: center;}


/* BOX BLUE */
#outerblue {background-color: #00708a; margin: 40px 0 0 0; padding: 40px 0 40px 0;}
#boxblue {text-align: center; color: #add9d6;}
#boxblue img {height: 38px; width: auto; margin: 0 0 15px 0;}

@media (max-width: 950px) {
.bluesx, .bluedx, .bluecc {display: block; font-size: 1.3em;}
.bluecc {margin:40px 0 40px 0; border-top:thin solid #add9d6; border-bottom:thin solid #add9d6; padding: 15px 0 15px 0;}
}


@media (min-width: 951px) {
#boxblue {display: flex; flex-wrap: wrap; }
.bluesx, .bluedx, .bluecc {display: flex; align-self: stretch; vertical-align: top; width: 32%; text-align: center; }
.bluecc {margin: 0 0.5% 0 0.5%;}
.bluesx {border-right:thin solid #add9d6;}
.bluedx {border-left:thin solid #add9d6;}
#boxblue font {display:block; width: 80%; position: relative; left: 50%; margin-left: -40%; font-size: 1.3em;}
}



/* ACQUISTA */
#acquista {margin: 40px 0 40px 0;}
#acquista a, #acquistatop a {display: block; padding: 9px 0 9px 0; color:#FFF; text-align: center; font-size: 1.2em; text-transform: uppercase; text-decoration: none; position: relative;  background-color: #00708a; border-radius: 10px;}
#acquista a:hover, #acquistatop a:hover {background-color: #303647;}

@media (max-width: 950px) {
#acquistatop {display: none;}
#acquista a, #acquistatop a {width: 40%; left: 50%; margin-left: -20%;}
}

@media (min-width: 951px) {
#acquistatop {margin: 30px 0 0 0; text-align: center;}
#acquista a, #acquistatop a {width: 32%; left: 50%; margin-left: -16%;}
}




/* RECENSIONI */
#outerrecensioni {background-color: #EBECF0; padding:60px 0 60px 0 }
#recensioni {text-align: center; }
#recensioni font {display: block; color:#00708a; font-weight: bold; margin: 0 0 20px 0; font-size: 1.4em; font-style: italic;}


/* FOOTER */
#outerfooter {margin: 40px 0 0 0; background-color: #303647; padding: 40px 0 20px 0; color: #FFF;}
#testofoot {display: block; padding: 0 0 35px 0; text-align: center;}

#footsx font {display: block;}
#footsx .campo {background-color:#3d455c; color: #FFF; border: none; padding: 5px; margin:0 0 15px 0;}
#footdx textarea {background-color:#3d455c; color: #FFF; border: none; padding: 5px; resize: none;}
#footdx .invia {background-color:#3d455c; color: #FFF; border: none; padding: 7px; width: 40%; cursor: pointer;}
#footdx .invia:hover { background-color: #00708a;}

#footsx .selezione {display: inline-block; width: 50%; vertical-align: top;}

#footdx a {color: #FFF; text-decoration: none;}
#footdx a:hover {color: #00708a;}



@media (max-width: 950px) {
#footdx, #foots {display: block;}
#footdx {margin:30px 0 0 0;}
#footsx .selezione select, .selezione-dx font {width: 90%;}
.selezione-dx select, .selezione-dx font  { margin: 0 0 0 10%;}
#footdx textarea, #footsx .campo {width:98.5%}
#footdx textarea {height: 150px;}
.datisx, .datidx {display: inline-block; vertical-align: top; margin: 25px 0 0 0;}
.datisx {width: 50%; text-align: left;} .datidx {width: 50%; text-align: right;}
}


@media (min-width: 951px) {
#footdx, #footsx {display: inline-block; vertical-align: top;}
#footsx {width:48%; margin-right: 2%;}  #footdx {width: 50%;}
#footdx {text-align: right;}
#footdx textarea {margin: 25px 0 35px 0; height: 145px;}
#footsx font {margin: 0 0 6px 0;}
.datisx, .datidx {display: inline-block; vertical-align: top;}
.datisx {width: 54%; margin: 0 0 0 0; text-align: left;} .datidx {width: 40%; text-align: right;}
#footsx .selezione select {width: 85%;}
#footdx textarea, #footsx .campo {width:90%}
}

#credits {text-align:center; margin-top: 70px; }