* {
  padding: 0;
  margin: 0
}

HTML,
BODY {
  background-color: var(--background-surface-light-2);
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-size: 16px;
  font-weight: 400;
  scroll-behavior: smooth !important;
}

:root {
  --H1: 40px;
  --H2: 34px;
  --H3: 24px;
  --H4: 20px;
  --text-xlarge: 20px;
  --text-large: 18px;
  --text-medium: 16px;
  --text-small: 14px;
  --text-xsmall: 12px;

  /* BRAND COLORS */
  --color-brand-900: #070B2C;
  --color-brand-500: #2436DB;
  --color-brand-200: #A7AFF1;
  --color-brand-100: #DFE5FA;

  /* GREY SCALE COLOR */
  --color-gray-700: #424242;
  --color-white: #ffffff;


  /* BRAND BACKGROUNDS */
  --background-surface-brand-900: #070B2C;
  --background-surface-brand-700: #162083;
  --background-surface-brand-500: #2436DB;
  --background-surface-brand-400: #505EE2;
  --background-surface-brand-200: #A7AFF1;
  --background-surface-brand-100: #DFE5FA;


  /* GREEN COLORS */
  --color-green-500: #20CD7A;

  /* LIGHT BACKGROUNDS */
  --background-surface-white: #ffffff;
  --background-surface-light: #F4F6FD;
  --background-surface-light-2: #E7F0FF;

  /* SHADOWS */
  --shadow: 0px 20px 12px -10px rgba(173, 172, 181, 0.20);

  --padding-xlarge: 80px;
  --padding-large: 64px;


  --text-left: left;
  --text-center: center;

  --cta-text: 16px;
  --cta-submit: 16px;
  --cta-padding: 3rem 4rem;

}

/* SPACING */
.py-10 {padding-top: var(--padding-xlarge); padding-bottom: var(--padding-xlarge)}
.px-10 {padding-left: var(--padding-xlarge); padding-right: var(--padding-xlarge)}
.pt-10 {padding-top: var(--padding-xlarge)}
.pb-10 {padding-bottom: var(--padding-xlarge)}

.py-8 {padding-top: var(--padding-large); padding-bottom: var(--padding-large)}
.px-8 {padding-left: var(--padding-large); padding-right: var(--padding-large)}
.pt-8 {padding-top: var(--padding-large)}
.pb-8 {padding-bottom: var(--padding-large)}


/* POSITION */
.relative {position: relative}

/*GLOBAL*/
H1, H2, H3, H4 {font-family: "Montserrat", sans-serif;}
H1 {font-size: var(--H1); font-weight: 700; line-height: 1; color: var(--color-brand-900)}
H2 {font-size: var(--H2); font-weight: 700; line-height: 48px; color: var(--color-brand-900)}
H3 {font-size: var(--H3); font-weight: 700; line-height: 40px; color: var(--color-brand-900)}
H4 {font-size: var(--H4); _font-weight: 700; line-height: 32px;}
P, SPAN {color: var(--color-gray-700)}
STRONG {font-weight: 700}
.shadow {box-shadow: var(--shadow)}
.border-bottom {border-bottom: solid 1px #A7AFF1!important}
.color-white {color: var(--color-white)}
.background-light-2 {background-color: #F4F6FD}

.text-xlarge{font-size: var(--text-xlarge); line-height: 1.2;}
.text-large{font-size: var(--text-large); line-height: 1;}
.text-medium{font-size: var(--text-medium); line-height: 20px;}
.text-small{font-size: var(--text-small); line-height: 18px;}
.text-xsmall{font-size: var(--text-xsmall)!important; line-height: 16px;}

/* CTA */
.cta-fill {text-transform:uppercase; font-size: var(--text-medium); background: var(--background-surface-brand-500); color: var(--color-white); padding: 16px 24px; text-decoration: none; border-radius: 4px;}
.cta-fill:hover{background-color:  var(--background-surface-brand-400)}

.cta-ghost {text-transform:uppercase; font-size: var(--text-medium); border: solid 1px var(--background-surface-brand-500); color: var(--color-brand-500); padding: 10px 20px; text-decoration: none; border-radius: 4px;}
.cta-ghost:hover{border-color: var(--background-surface-brand-400); background: var(--background-surface-brand-100)}

.cta-ghost--alternative {font-size: var(--text-medium); border: solid 1px var(--background-surface-white); color: var(--color-white); padding: 10px 20px; text-decoration: none; border-radius: 4px;}
.cta-ghost--alternative:hover{color: var(--color-brand-500) ; border-color: var(--background-surface-brand-400); background: var(--background-surface-brand-100)}


/* BUTTONS */
.btn-primary {text-transform:uppercase; background-color: transparent!important; border: solid 1px var(--color-white)!important}
.btn-primary:hover {background-color: rgba(223, 229, 250, 0.1)!important; color:var(--color-brand-200)!important; border: solid 1px var(--color-brand-200)!important}
.btn-primary .disabled {opacity: .5}


/* ELEMENTS */
#announcement-bar{background-color: var(--color-brand-500);}
#announcement-bar I {color:#F3C412}
#announcement-bar P, #announcement-bar A {color:#ffffff; margin: 0px; padding: 8px}

#header .header {padding: 8px 0; background-color: var(--background-surface-light-2); font-size: var(--text-small)}
#header UL LI DIV A {text-decoration: none!important; color: #50545a;}
#header UL LI A.nav-link:HOVER,
#header UL LI.nav-link DIV A:HOVER {border-bottom: solid 2px var(--color-brand-500)!important;}
#header IMG {max-width:100%; height: 25px}
#header .navbar-brand {color: var(--color-brand-500);}


#header #navbar-cta,
#header #navbar-brand--mobile{font-size: var(--text-small); padding: 8px 16px!important;}

#container-navbar-cta-mobile{
  width: 100%;
  position: fixed;
  bottom: 10px;
  text-align: center;
  padding: 0 50px;
  z-index: 1;
}


/* HERO */
#hero {background-color: white; color: var(--color-brand-900); padding:148px 120px 0px 120px;}
#typ-hero {background-color: var(--background-surface-brand-900); color: var(--color-white); padding:80px 0;}
#hero H1, #typ-hero H1 {padding: 8px 0px 0px 0px; color: var(--color-brand-900)}
#hero IMG {border-radius:16px}
#hero P, #typ-hero P {color: var(--color-brand-900)}
#typ-hero P {color: var(--color-white)}
#hero UL, #typ-content UL {padding-left:16px!important; margin-bottom: 0px;}
#hero UL LI, #typ-content UL LI {padding: 8px 0px; list-style-type: "✔  ";}
#hero UL LI::marker, #typ-content UL LI::marker {color: var(--color-green-500)}
#typ-content P {color: var(--color-brand-900)}
#hero .promo-banner {padding: 16px; margin: 24px auto; border: solid 1px var(--color-brand-900); border-radius: 8px; background-color: rgba(223, 229, 250, 0.1)}
/* #hero .promo-banner {color: var(--color-brand-500)} */
#hero .promo-banner IMG {height:24px}
#hero P.trust-element{color: var(--color-brand-500); margin:0px}
#hero .trust-element IMG {height:40px}
.hero-image{border-radius: 16px; position: absolute; right: 0px; bottom:0px; width: 620px;}


/* CLASSE PER MARKETO */
#section-1, #section-2{scroll-margin-top: 100px; _background-color: var(--background-surface-light); padding-left: 0px;padding-right: 0px;}
#section-1 .row:nth-child(2),
#section-2 .row:nth-child(2){background-color: white; padding: 24px; border-radius: 24px 16px;}
#section-1 IMG, #section-2 {padding: 8px 0px}


/* CATALOGO LANDING */
#landing-catalogo {scroll-margin-top: 100px;}
#landing-catalogo .landing-single{background-color:white; border-radius: 16px; margin: 16px auto}
#landing-catalogo .landing-single IMG, .landing-info .landing-image {border-radius: 16px 16px 0 0}
#landing-catalogo .landing-info {padding: 16px}
#landing-catalogo .landing-info .landing-title {margin: 8px 0px; line-height:1.2; color: var(--color-brand-900)}
#landing-catalogo .landing-info .landing-list {padding-left: 16px; font-size: var(--text-medium)}
#landing-catalogo .landing-info .landing-list > UL {padding-left: 0px}
#landing-catalogo .landing-info UL LI {line-height:1.6}
#landing-catalogo A {display:block; text-align: center; color: var(--color-brand-500); text-decoration: none}
#landing-catalogo BUTTON.carousel-control{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-100); border-radius: 8px}
#landing-catalogo BUTTON.carousel-control:hover{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-500)}


/
/* CORSI */
#corsi-target, #corsi-catalogo, #corsi-obbligatori, #corsi-bonus, #corsi-seguiti {scroll-margin-top: 100px;}
.corso {background-color:white; border-radius: 16px; margin: 16px auto}
.corso-info {padding: 16px}
.corso IMG, .corso-info .corso-image {width:100%; border-radius: 16px 16px 0 0}
.corso-info .corso-title {margin: 16px 0 8px 0; line-height:1.2; color: var(--color-brand-900)}
.corso-info .corso-abstract {line-height:1.2}
.corso-info I {color: #F28F0E}
.corso-info .crediti {display: inline-block; background-color: var(--background-surface-brand-500); border-radius: 360px; padding:8px; color:white; text-align:center}

.corso-rank,
.corso-collana,
.corso-modello{
  display: inline-block; background-color: #F4F6FD; border-radius: 360px; padding: 8px; margin: 8px auto; color:var(--color-brand-900);
}

#corsi-bonus A, #corsi-preferiti A, #corsi-seguiti A {display:block; text-align: center; color: var(--color-brand-500); text-decoration: none}
#corsi-bonus BUTTON.carousel-control, #corsi-preferiti BUTTON.carousel-control,
#corsi-seguiti BUTTON.carousel-control{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-100); border-radius: 8px}
#corsi-bonus BUTTON.carousel-control:hover, #corsi-preferiti BUTTON.carousel-control:hover,
#corsi-seguiti BUTTON.carousel-control:hover{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-500)}



/* PROMO CATALOGO */
#promo-catalogo {background-color: var(--background-surface-brand-500); color: white}
#promo-catalogo H4, #promo-catalogo P {color: white}

#testimonianze {background-color: var(--background-surface-light)}
#testimonianze .review-content > DIV {border-radius: 8px; background-color: var(--background-surface-white); box-shadow: var(--shadow)}
#testimonianze H4 {color: var(--color-brand-900)}
#testimonianze P {font-size: var(--text-medium)}
#testimonianze SPAN {color: var(--color-gray-700)}
#testimonianze .fa-star {color: #F28F0E}


#testimonianze .carousel-inner {border-radius: 16px;}
#testimonianze .testimonianze--carousel-controls{padding: 8px 0px;}
#testimonianze .testimonianze--carousel-controls A.carousel-control{font-size: var(--text-small);color:var(--color-brand-900); text-decoration: none; font-weight: 700; padding: 8px 12px; border: solid 1px var(--color-brand-100); border-radius:100px}
#testimonianze .testimonianze--carousel-controls A.carousel-control:hover{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-500)}
#testimonianze BUTTON.carousel-control{background-color: var(--background-surface-brand-100); color:var(--color-brand-500); border: solid 1px var(--color-brand-100); border-radius: 8px}




#section-promo IMG, #section-1 IMG, #section-2 IMG, #section-3 IMG, #section-4 IMG, #section-5 IMG,
#section-6 IMG, #section-7 IMG, #section-8 IMG, #section-9 IMG, #section-10 IMG, #section-11 IMG, #section-12 IMG, #section-13 IMG {max-width:100%; border-radius:24px; _border: solid 1px var(--color-brand-100)}
#section-1 LI, #section-2 LI, #section-3 LI, #section-4 LI, #section-5 LI,
#section-6 LI, #section-7 LI, #section-8 LI, #section-9 LI, #section-10 LI, #section-11 LI, #section-12 LI, #section-13 LI {padding: 8px 0px}
/**/
#soluzioni {scroll-margin-top: 100px;}
#soluzioni .soluzioni P {font-size: var(--text-large); color: var(--color-brand-900)}
#soluzioni .soluzioni SPAN {font-size: var(--text-small)}
#soluzioni .soluzioni IMG {height: 120px}



/* SECTION BOTTOM + FORM */
#section-bottom {background: var(--background-surface-brand-700); color: var(--color-white); padding: 80px 0;}
#section-bottom H1 {_padding: 8px 0 24px 0px; color: var(--color-white)}
#section-bottom P {color: var(--color-white)}
#section-bottom H4 {color: var(--color-brand-200)}
#section-bottom UL {padding-left:16px!important; margin-bottom: 0px;}
#section-bottom UL LI {padding: 8px 0px; list-style-type: "✔  ";}
#section-bottom UL LI::marker {color: var(--color-green-500)}
#section-bottom .promo-banner {padding: 16px; margin: 24px auto; border: solid 1px var(--color-white); border-radius: 8px; background-color: rgba(223, 229, 250, 0.1)}

#form {scroll-margin-top: 150px;}
#form .form {padding: 0px!important}
FORM {padding:0px!important}
#form input{padding: 0px 8px!important; color: black!important; font-size: 14px!important}
#form select {font-size: 14px!important}
#form input::placeholder, #form select {color:black!important; font-size: 14px!important}
#form input[type=checkbox], #form input[type=radio]{width:16px!important; padding:0px!important}
#form details#details-collapse {padding:0px!important}
#form .mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList {margin-top:0px!important}
.mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList{
  display: -webkit-inline-box!important;
  right: 0px!important;
  position: absolute!important;
  width: 100px!important;
  top: 0px!important;
}
SUMMARY {padding-bottom: 12px!important;}

/* FORM MARKETO */
.mktoForm .mktoLabel {color: var(--color-white)}
.mktoForm .mktoFieldWrap {display:grid!important}
.mktoForm .mktoFieldWrap, .mktoForm .mktoField {width:100%!important}
.mktoFormCol P, .mktoFormCol span{display:inline-block;}
.mktoForm .mktoFieldWrap input{width: inherit!important}
.mktoForm .mktoFieldWrap input[type=checkbox]{width:auto!important}

/*Informative*/
#condizioni{display: flex; align-items: center; margin-bottom: 8px;}
.mktoForm .mktoFieldWrap input[type=checkbox]{width:auto!important; margin-right:8px;}
summary {list-style: none; padding-bottom: 8px}
summary::after{content:" ▶"; position: absolute; margin-left: 4px;transform: rotate(90deg)}





#footer P {font-size: var(--text-small)}

/* MOBILE */
@media screen and (max-width: 1400px) {.hero-image{_right: -170px;} }
@media screen and (max-width: 1200px) {.hero-image{width: 510px; _right: -70px} }
@media screen and (max-width: 991px) {.hero-image{position:static} }



@media screen and (max-width: 768px), screen and (max-width: 1200px){
:root {
  --H1: 32px;
  --H2: 24px;
  --H3: 20px;
  --H4: 18px;
  --text-large: 16px;
  --text-medium: 14px;
  --text-small: 12px;
  --text-xsmall: 10px;
}

H1 {font-size: var(--H1); line-height: 40px;}
H2 {font-size: var(--H2); line-height: 32px;}
H3 {font-size: var(--H3); line-height: 28px;}
H4 {font-size: var(--H4); line-height: 24px;}
P, UL {font-size: var(--text-medium)}

#header .navbar > DIV {align-items: baseline;}
#hero {padding: 120px 20px 0px 20px}
#soluzioni IMG {height: 60px}


}

@media screen and (max-width: 576px){
  #vantaggi .vantaggi--carousel-controls A.carousel-control {font-size: var(--text-xsmall); padding: 8px}
  #vantaggi IMG {width: 100%;}

  .hero--content H1 {font-size: 28px;}
}