/*laptop*/
@media screen and (max-width: 1500px) {
  .content { width: 98%; margin: 0 auto; padding: 20px 0 }
  .menu{width: 98%;}
  .progressPanel-cont {padding: 0 0 0 2%}
  .actual-pos {padding: 0 15px 0 40px;}
  nav#menu-nav ul li a {font-size: 18px}
}

/*tablet new*/
@media screen and (max-width: 980px) {

  header {min-height: 80vh; background: url(img/aereo_scia.png), url(img/macchia1.png), url(img/macchia2.png), url(img/macchia3.png), url(img/macchia3.png), url(img/macchia2.png);background-repeat: no-repeat; background-position: -40% -10%, -10% 20%, 100% 90%, 90% 50%, 0% 100%, 100% 0%;background-size: 700px,200px,200px,200px,200px,200px;}

  header .col23 {margin: 20vh 0 0 0; width: 96%}
  .box4scroll>section {min-height: 50vh; padding: 10vh 0; height: auto }

    footer .col13{padding: 5% 0}
    footer h5 {clear: both; margin: 40px 0 0px 0 }
    footer nav {clear: both; margin: 0 0 50px 0; height: 260px}

    .progressPanel-cont {padding: 0}
    .post_excerpt {display:none}
    .head_post .title_post {margin: 0 0 -710px 0; padding: 120px 0 0 0; }



  #crea-viaggio {background: url(img/macchia1.png);background-repeat: no-repeat;background-position: 90% 0%;background-size: 100px;}
  #crea_form #crea-viaggio{background: none;}

  .cont_menu {height: 70px}

  h1 {font-size: 80px}
  h2 {font-size: 25px}
  .grey_content>.three>h2 , .col > h2, .col23 > h2, .three > h2, .content > h2, .col79 > h2, h2 a span {font-size: 50px;}
  .choice h2 {font-size: 25px}

  h3 {font-size: 15px}
  #itinerario h1 {font-size: 80px}

  p, li, details, details:hover, details[open] {font-size: 13px; line-height: 20px}
  p span, li span {font-size: 13px}

  #itinerario h3 {padding: 0;}
  #itinerario h5 {padding: 0; background: none;}

  .sp-slide-text h2 {font-size: 25px; margin-bottom: 0}

  .avatar img{width: 100%; margin: 0 auto;}

  #contenitori p {min-height: 60px}

  .content, .content .post_list, .content .sidebar, .no_col {width: 95% !important; border-left: none}
  .col45, .col89, .dati_lista, article.col23 {width: 96%;  padding: 0 2%; }

  .col, .col13, .col23, .col14, .col-md-6 {width: 44%; float: left; padding: 0 3%; margin: 1% 0}
  .col15  {width: 24%; float: left; padding: 2% 3%; margin: 1% 0 1% 3%}

  .col79, .col19 {width: 90%;  padding: 0 5%; }

  .three .col13{width: 28%; padding: 0 1% 3% 1%; margin: 1%; float: left; clear: none }
  #articolo_blog {width: 30%; padding: 0 0 3% 0; margin: 1%; float: left; clear: none }

  .post .col23 {width: 62%; float: left; clear: none}
  .post .col13 {float: left; }

 .col .expl_img, .col13 .expl_img { width: 100%; margin: 0;}


  #menu-nav ul {display: none}
  .menu {width: 100%}

  #viaggio-a-sorpresa .col13 {clear: none; width: 27%; margin: 0 0% 0 0 }
  #viaggio-a-sorpresa .col13 .casuale {display: block}

  .nav_mobile {display: block;  float: right; font-size: 30px;  border-radius: 20px 40px;}
  #menu-principale {display: none; float: none}

  .cont_menu, .bar .cont_bar {width: 100%; }
  .menu nav li {width: 100%; line-height: 70px; height: auto; background: rgb(84,172,168,0.95); border-top: 1px solid rgb(255,255,255,0.3); border-bottom: 1px dotted rgb(0,0,0,0.4) }
  .menu nav li a {height: 70px;}
  .menu nav ul ul {position: relative; z-index:2; display:none;width: 100%; }
  .menu nav li ul {display:block; }
  .menu nav li li {width: 100%; border: none;}

  .polaroid, .polaroid#uno, .polaroid#tre { top: 0;  margin: 50px 0; float: none;width: 100%;}
  .info-post p {padding: 3% 0}

  .three .vg_dettagli {width: 44%; padding: 0 1%; margin: 20px 0 0 2%}
  #lista-info {display: block}

  #lista-info a { width: 50%; padding: 5%}

  .cloud img {width: 64px; height: 64px;}
  .cloud span {margin: 0}
  .cloud span img {width: 10%; margin: 0; height: auto; }
  .tab button {}

  img.thumb {float: none; margin: 0 auto}
  .fase { font-size: 30px; margin: 0;   width: 30%; }
  .checkbox-list:checked + label, .checkbox-list:not(:checked) + label {width: 11%; min-height: 80px; margin: 20px 2%;padding: 5%; }
  #scegli .checkbox-list:checked + label, #scegli .checkbox-list:not(:checked) + label {height: 120px}
  .checkbox-dispari:checked + label, .checkbox-dispari:not(:checked) + label {width: 19%}


  .butt-list {margin: 10px 0 30px 0;}
  .choice input[type="text"], .choice input[type="date"] {width: 90%; }

  #viaggio_sorpresa .checkbox-list:checked + label, #viaggio_sorpresa .checkbox-list:not(:checked) + label {width: 15%}
  table.identikit {width: 18%}
  #red_bg span.number, #blu_bg span.number {margin: 10px 0}
  .frase_consulente p span {width: auto; font-size: 90px;}

  .login, .login:hover {margin: 0; padding: 250px 0 0 0; margin: 0 0 0 30%}
  .biglietto_corpo h2 {font-size: 38px; }
  .biglietto {margin: 0 2% ; padding: 5% 3%; width: 90%;}
  .biglietto .countdown {margin: -50px 50px 0 0; padding: 20px; }
  .biglietto p.biglietto_info {width: 90%; padding: 10px 0 0 0; font-size: 25px; background: linear-gradient(to right, rgb(255,255,255, 1) , #fefefe); border-radius: 10px;box-shadow: 1px 1px 0px 1px rgb(0,0,0,0.1)}

  #bar_nav {clear: both; }
  .bar {height: auto;}
  .cont_bar .logo, .cont_bar .logo img {width: 100px; height: 100px;  top: -10px; margin: 0 10px -25px 0;}
  .partecipanti_messaggio, .partecipanti_data {display: none}

  .start {left:30%}
  .right_cv {box-shadow: 10px 0px 0px 10px rgb(84,172,168,1);}
  .right_in {box-shadow: -10px 0px 0px 10px rgb(84,172,168,1) inset;}
  .left_cv {box-shadow: -10px 0px 0px 10px rgb(84,172,168,1);}
  .left_in {box-shadow: 10px 0px 0px 10px rgb(84,172,168,1) inset;}
  .crea-navigation {width: 100%; margin: 0; }

  span.cartello, .left_in span.cartello {display: none;}
  span.aereo {background-size: 45%; width: 100%; height: 100%; top: 60px; }


  .schedule #legend_uno, .schedule #legend_due, .schedule #legend_tre  {background: none}
  #itinerario td, #itinerario th {padding: 10px 5%; width: 40%;}
  .dx#day strong {font-size: 15px; padding: 11px 10px 8px 30px;}
  span.marker, #itinerario .dx span.marker{float: left; margin: 0;}

  .spacer13 {width: 12%}


  .corpo_sorpresa img {margin: 0}

  .grey_content .content .col13 {width:25%}

  .grey_content .content .col13 {width:30%; padding:  1%; margin: 0 }
 #red_bg span.number, #blu_bg span.number  {  width: 30%;float: none; margin: 0 auto}
   #red_bg p,  #blu_bg p {width: 100%}

}

/*mobile verticale*/
@media screen and (max-width: 480px) {
  header {min-height: 80vh;background: url(img/aereo_scia.png), url(img/macchia1.png), url(img/macchia2.png), url(img/macchia3.png), url(img/macchia3.png), url(img/macchia2.png);background-repeat: no-repeat;background-position: 150% 0%, -30% 20%, 170% 80%, 140% 50%, -20% 100%, 100% -10%;background-size: 500px,200px,200px,200px,200px,200px;}
  #crea-viaggio {background: url(img/macchia1.png);background-repeat: no-repeat;background-position: 90% 0%;background-size: 100px;}
  .logo {width: 120px; height: 120px; top: -20px}
  .logo img { width: 120px; height: 120px; }
  .cont_menu {height: 70px}

  h1 {font-size: 80px}
  h2 {font-size: 25px}
  .grey_content>.three>h2 , .col > h2, .col23 > h2, .three > h2, .content > h2, .col79 > h2, h2 a span {font-size: 50px;}
  .choice h2 {font-size: 25px; line-height: 40px}
  h3 {font-size: 15px}
  .col img, .col13 img, .col23 img, .col15 img {width: 90%; margin: 0 5%}
  #itinerario h1 {font-size: 80px}

  p, li {font-size: 13px; line-height: 20px}
  p span, li span {font-size: 13px}

  #itinerario h3 {padding: 0;}
  #itinerario h5 {padding: 0; background: none;}


  .sp-slide-text h2 {font-size: 25px; margin-bottom: 0}


  header .col23 {margin: 5vh 0 0 0;}
  .box4scroll>section {min-height: 60vh; padding: 10vh 0; height: auto }
  footer .col13{padding: 5% 0}
  footer h5 {clear: both; margin: 40px 0 0px 0 }
  footer nav {clear: both; margin: 0 0 50px 0; height: 260px}

  .col img, .col13 img, .col23 img, .col15 img {width: 50%; margin: 0 25%;}
  .avatar img{width: 100%; margin: 0 0 0 -15px; width: 108px; max-width: 108px}

  .progressPanel-cont {padding: 0}

  #contenitori p {min-height: 60px}

  .content {width: 95%}
  .col, .col13, .col23, .col14, .col15, .col45, .col89, .dati_lista, article.col23, .grey_content .content .col13, .col-md-6 {width: 96%; float: none; padding: 0 2%; clear: both; }
  .col79, .col19 {width: 90%; float: none; padding: 0 5%; clear: both;}
  .col15 {padding: 2% 0; margin: 2% 0}
  .three .col13, #articolo_blog {width: 88%; padding: 3%; margin: 2%  }
  /* #articolo_blog {height: 450px} */
  .post .col23 {width: 62%; float: left; clear: none}
  .post .col13 {float: left; }
  .post .rubrica13 {width: 25% !important; float: left !important}
  .post .rubrica23 {width: 65% !important; float: left !important}

  #menu-nav ul {display: none}
  .menu {width: 100%}

  #viaggio-a-sorpresa .col13 {width:50%; float : left}
  #viaggio-a-sorpresa .col13 .casuale {display: block}

  .nav_mobile {display: block;  float: right; font-size: 30px}
  #menu-principale {display: none; float: none}

  .cont_menu, .bar .cont_bar {width: 100%; }
  .menu nav li {width: 100%; line-height: 70px; height: auto; background: rgb(84,172,168,0.95); border-top: 1px solid rgb(255,255,255,0.3); border-bottom: 1px dotted rgb(0,0,0,0.4) }
  .menu nav li a {height: 70px;}
  .menu nav ul ul {position: relative; z-index:2; display:none;width: 100%; }
  .menu nav li ul {display:block; }
  .menu nav li li {width: 100%; border: none;}

  .polaroid, .polaroid#uno, .polaroid#tre { top: 0;  margin: 50px 0; float: none;width: 100%;}
  .info-post p {padding: 3% 0}

  .three .vg_dettagli {width: 90%; padding: 0 0 0 10%; margin: 20px 0 0 0}
  #lista-info {display: block}

  #lista-info a { width: 100%; padding: 5%}

  .cloud {background-size: 100%;  width: 100%; }
  .cloud img {width: 64px; height: 64px;}
  .cloud span {margin: 0}
  .cloud span img {width: 10%; margin: 0; height: auto; }
  .tab button {width: 100%}

  img.thumb {float: none; margin: 0 auto}
  .fase { font-size: 30px; margin: 0;   width: 30%; }
.checkbox-list:checked + label, .checkbox-list:not(:checked) + label {width: 36%; /*height: 120px;*/  }
  #crea-viaggio .checkbox-list:checked + label, #crea-viaggio .checkbox-list:not(:checked) + label {width: 19%;  }

  #scegli .checkbox-list:checked + label, #scegli .checkbox-list:not(:checked) + label {height: 120px}

  .butt-list {margin: 10px 0 30px 0;}
  .choice input[type="text"], .choice input[type="date"] {width: 90%; }

  #viaggio_sorpresa .checkbox-list:checked + label, #viaggio_sorpresa .checkbox-list:not(:checked) + label {clear: both; width: 40%}
  table.identikit {width: 58%}
  #red_bg span.number, #blu_bg span.number {margin: 10px 1% 10px 0; float: left; width: 19%}

  #red_bg p, #blu_bg p {width: 78%}

  .frase_consulente p span {width: auto; font-size: 90px;}

  .login, .login:hover {margin: 0; padding: 250px 0 0 0}
  .biglietto_corpo h2 {font-size: 38px; }
  .biglietto {margin: -15% 2% ; width: 90%;background-size: cover;background-position: center;}
  .biglietto .countdown {margin: 0; padding: 20px; }
  .biglietto p.biglietto_info {width: 90%; margin: 0 0 0 10%; font-size: 25px; background: linear-gradient(to right, rgb(255,255,255, 1) , #fefefe); border-radius: 10px;box-shadow: 1px 1px 0px 1px rgb(0,0,0,0.1)}

  #bar_nav {clear: both; }
  .bar {height: auto;}
  .cont_bar .logo, .cont_bar .logo img {width: 100px; height: 100px;  top: -10px; margin: 0 10px -25px 0;}
  .partecipanti_messaggio, .partecipanti_data {display: none}

  .start {left:30%}
  .right_cv {box-shadow: 10px 0px 0px 10px rgb(84,172,168,1);}
  .right_in {box-shadow: -10px 0px 0px 10px rgb(84,172,168,1) inset;}
  .left_cv {box-shadow: -10px 0px 0px 10px rgb(84,172,168,1);}
  .left_in {box-shadow: 10px 0px 0px 10px rgb(84,172,168,1) inset;}
  .crea-navigation {width: 100%; margin: 0; }

  span.cartello, .left_in span.cartello {display: none;}
  span.aereo {background-size: 100%; width: 100%; height: 100%; top: 60px; left: 100px}
  .spacer {float: left; width: 17%}
  .spacer14 {width: 33%; display: block}
  .spacer15 {width: 25%; display: block}


  .schedule #legend_uno, .schedule #legend_due, .schedule #legend_tre  {background: none}
  #itinerario td, #itinerario th {padding: 10px 5%; width: 40%;}
  .dx#day strong {font-size: 15px; padding: 11px 10px 8px 30px;}
  span.marker, #itinerario .dx span.marker{float: left; margin: 0;}

  .spacer13 {width: 0%}
  .progressPanelContainer {display: none}
  #viaggio-a-sorpresa .col13 {clear: none; width: 29%; margin: 0 0% 0 0 }
  .avatar a {width: 105px; position: relative; left:-15px; font-size: 13px; line-height: 35px}
  .corpo_sorpresa img {margin: 0}
}