/* inizia RESPONSIVE */

@media (max-width: 768px) {

  .custom-wrapper {
    height:100px;
}
  .pure-menu-heading {
    font-size: 26px;
    line-height: 26px;
}

.pure-menu-link:hover {
border-top: none;
}

.pure-menu-heading .piccolo {
    font-size: 22px;
}

.pure-menu-heading .molto-piccolo {
    font-size: 15px;
}

  .pure-menu-horizontal {
    margin-top: 5px;
}

.testo-volante {
    margin-top: -90px;
}

.mondo {margin-top: 0px}

  .pure-menu-link {
    border-top: none;
    padding: 46px 15px 46px 15px;
}

  .pure-menu-heading {
    padding: 8px 20px 0px 0px !important;
    }

  span.sottotitolo-sezione {
      font-size: 23px;
      line-height: 23px;
      color: #333;
  }
.p-normale {font-size: 18px}
.p-grande {font-size: 18px}
h2.titolo-sezione {font-size: 30px !important;
    margin-top: 90px !important;
    margin-bottom: 10px !important;
    line-height: 30px !important;
}
.left-center, .justify-center, .right-center{text-align: center !important;}

.banner {
  background-image: url(../img/banner-resp.jpg) !important;
  background-position: top;
  background-size: cover;
  height: auto !important;																															/* altezza banner default */
}

.pure-menu-link {padding: 10px 3px !important}

.nav-menu {font-size: 16px;}

.testo-banner, .testo-banner-2{float: none; max-width: 100%}

.p0-50-20m{padding: 0 20px}
.desktop{display: none !important}

.h1-banner-home{text-align: center;
 font-size: 16px;
 color: white !important
}

.h2-banner-home{text-align: center;
 font-size: 45px;
 line-height: 40px;
 color: white !important
}

.h3-banner-home{text-align: center;
font-size: 18px;
color: white !important}

.recensione{margin-top:20px}
.img-testim {border-left:none !important}
.circolo-resp{border-radius: 50%; max-width: 40%; z-index: 1000; position: relative; border: 3px solid #FA0}


.bottone-home{text-align: center;}

.pure-menu-heading {text-align: center;}
.pure-menu-horizontal .pure-menu-list {padding-right: 0px}

li.sottomenu{display: block !important}

.custom-toggle {
display: block;
}

.custom-wrapper {																														/* in responsive torna nascosto*/
overflow: hidden;
}

.pure-menu-children{overflow: visible;}

.pure-menu-link {																															/* voci di menu in versione responsive */
padding: 5px 10px;
height: 23px;
text-align:center;
}

.p-boxato-giallo, .p-boxato-azzurro {
    padding: 20px;
    font-size: 19px;
}

.lista-corso li, .lista-vantaggi li {
    font-size: 18px;
}

.p-medio {
    font-size: 17px;
}

.mail p{text-align: center;}

#social, #copyright{text-align: center !important;}
}


/* ************** Fine 768 ************** */

@media (max-width: 420px) {
 h2.titolo-home{font-size:40px}

 .pure-menu-heading {                           /* logotipo */
   font-size: 20px;
   text-align: left !important;
   padding: 17px 20px 17px 20px !important;}

   .h2-banner-home {                            /* frase grande home */
    text-align: center;
    font-size: 36px;
    line-height: 36px;
}

h3.h3-banner-home {                             /* frasi in home */
    margin-top: 20px;
    margin-bottom: 20px;
}

.h3-banner-home {
    font-size: 17px;
}

h2.titolo-home {                              /* I titoli delle sezioni */
    font-size: 30px;
    margin-top: 30px;
    line-height: 30px;
}
input, textarea, select {
    padding: 6px 0px;
    font-size: 16px;
    border-radius: 4px;
}

#copyright {
    font-size: 12px;
}

}

@media(max-width:950px) {
 .pure-menu-link {padding: 15px 5px !important}
}

@media(max-width:880px) {
.pure-menu-link {padding: 10px 3px !important}

.nav-menu {font-size: 16px;}
}


/*
* -- TABLET MEDIA QUERIES --
* On tablets, we want to slightly adjust the size of the banner
* text and add some vertical space between the various pricing tables
*/
@media(min-width: 480px) and (max-width:768px) {

   .banner-head {
       font-size: 3em;																													/* dimensione h1 banner tablet*/
   }

.banner, .banner-404 {height: auto;}																						/* altezza banner tablet */

/*
* -- PHONE MEDIA QUERIES --
* On phones, we want to reduce the height and font-size of the banner further
*/
@media (max-width: 480px) {
   .banner, .banner-404 {height: 200px;}


   .banner-head {font-size: 2em;}																							/* dimensione h1 banner smartphone*/

   input, textarea{																															/* sovrascrittura CSS form */
     max-width: 260px;}
}