.modala.attiva {display: block}

.modala-wrapper{
  width:100%;
  height:100%;
  position:fixed;
  top:0; left:0;
  visibility:hidden;
  opacity:0;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 1000;
  background: rgba(124, 124, 124, 0.4); 
}

.modala-wrapper.open{
  opacity:1;
  visibility:visible;
}

.modala{
  width:960px;
  height:600px;
  display:block;
  margin:50% 0 0 -530px;
  position:relative;
  top:50%; left:50%;
  opacity:0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}



.modala .img-resp { width: 100%; height: auto !important}

.modala-wrapper.open .modala{
  margin-top:-300px;
  opacity:1;
}

.head{
  width:100%;
  position: absolute;
  height:100px;
  padding:0;
  overflow:hidden;
}

.btn-close{
  width:32px;
  height:32px;
  display:block;
  float:right;
  right: -5px;
  top:10px; position: absolute;
}

.btn-close::before, .btn-close::after{
  content:'';
  width:32px;
  height:6px;
  display:block;
  background:#000;
}

.btn-close::before{
  margin-top:12px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  transform:rotate(45deg);
}

.btn-close::after{
  margin-top:-6px;
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

.content{
  padding:5%;
}

.chiusa { background-color: #ffbba3}

@media only screen and (max-width: 768px) {
  .modala{
   width:300px;
   height:188px;
   margin:50% 0 0 -170px;
   top:80%
  }
}