/* CSS aggiuntivo per la pagina della Scuola del Futuro - Realizzazione: Carlo Mariani */
.bottom-dotted{border-bottom: 1px dotted #666}
.box a:hover{background-color: #e0e0e0;}
.bgimg-2,.bgimg-3,.bgimg-4   {background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;  margin: 0 auto; top:0; left: 0;}
.bgimg-2 {background-image: url("../img/manifesto1+4-blu.png");min-height: 100%;}
.bgimg-3 {background-image: url("../img/manifesto_gruppo.jpg");min-height: 50%; }
.bgimg-4 {background-image: url("../img/manifesto1+4-bn.png");min-height: 100%;}
.bg-manifesto{background:url('../img/manifesto1+4-bn.png'); background-size:auto; border-left:0px solid #1e1e1e}
.bg-manifesto2{background:url('../img/manifesto1+4-blu.png'); background-size:auto; border-left:0px solid #1e1e1e}
.bg-manifesto3{background:url('../img/manifesto-ddd.png'); background-size:auto; border-left:0px solid #1e1e1e}

@media only screen and (max-device-width: 1024px) {
.bgimg-2, .bg-manifesto3, .bgimg-4 { background-attachment: scroll;    }}


.bg-grey {background-color: #f6f6f6;}
.bg-gray {background-color: #f6f6f6;}


/* RESPONSIVE GRID */
.header-image {  text-align: center;  padding: 32px;}
.row-image {  display: -ms-flexbox; /* IE10 */  display: flex;  -ms-flex-wrap: wrap; /* IE10 */  flex-wrap: wrap;  padding: 0 0px;}

/* Imposta larghezza colonne in % in base al width 100% e al numero di colonne */
.column-image {
  -ms-flex: 20%; /* IE10 */  flex:20%;  max-width: 20%;  padding: 0 0px;}

.column-image img {  margin-top: 0px;  vertical-align: middle;}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column-image {    -ms-flex: 50%;    flex: 50%;    max-width: 50%;  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column-image {    -ms-flex: 100%;    flex: 100%;    max-width: 100%;  }
}

/* Clear floats after the columns */
.row:after {    content: "";    display: table;    clear: both;}
.wp-caption {position: relative;padding: 0;margin:0;display: inline-block;}
.wp-caption img {display: block;max-width: 100%;height: auto;}
.wp-caption-text {opacity: 0;position: absolute;width: 100%;height:100%;color: #fff;left: 0;bottom: 0;padding: 0.75em 1em;font-weight: 700;
z-index: 2;-webkit-box-sizing: border-box;box-sizing: border-box;background-color: rgba(0,0,0,.7);-webkit-transition: opacity .3s ease-in-out ;transition: all 0.1s ease ;}
.wp-caption:hover .wp-caption-text {opacity: 1;}

/* Immagine con Overlay */
.contenitore {position: relative; background-color: #00868e; }
.image {opacity: 1;  display: block;  width: 100%;  height: auto;  transition: .2s ease;  backface-visibility: hidden;}
.middle {transition: .1s ease;opacity: 0;position: absolute;  top: 50%; left: 50%;transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);  text-align: left; width:80%}
.contenitore:hover .image { opacity: 0.1;}
.contenitore:hover .middle {  opacity: 1;}
.testocontenitore {  background-color: #;  color: white;  font-size: 0.9rem; font-weight:normal }
/* Immagine con Overlay*/
/* END RESPONSIVE GRID */


/* EFFETTO DISSOLVENZA */

  .slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(30%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(30%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
    .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
  }
  .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }