@charset "UTF-8";
/* Fade in Overlay */

.container-over {
  position: relative;
  width: 300px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    margin:0 auto;
}

.image-over {
  display: block;
  width: 100%;
  height: auto;
}

.overlay-over {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background: rgba(255, 255, 255, 0.8);
}

.container-over:hover .overlay-over {
  opacity: 1;
}

.text-over {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Card Flip with Text */



.flip-card {
  background-color: transparent;
  width: 350px;
  height: 350px;
  perspective: 1000px;
    margin:0 auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position:absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #ffffff;
  color: #323e48;
}

.flip-card-back {
  background-color: #898a8d;
  color: #ffffff;
  transform: rotateY(180deg);
}


.embed-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    width:350px;
    height: 350px; overflow: 
        hidden; max-width: 100%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);} 

.embed-container iframe, .embed-container object, .embed-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 350px; 
    height: 350px; }

.contatti {
  width: 350px;
  height: 350px;
}

.div-contatti {
  position: relative;
  width: 350px;
    height:350px;
    margin:0 auto;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* RESPONSIVE */
@media(max-width:1440px) {
  .container-over {width: 270px;}
}
@media(max-width:1366px) {
    
}
@media(max-width:1280px) {
 .flip-card {width: 320px; height: 320px;} 
    .container-over {width: 250px;}
    .embed-container {width:320px; height: 320px; }
    .div-contatti {width: 320px; height:320px;}
}
@media(max-width:1024px) {
    .flip-card {width: 250px; height: 250px;}   
    .embed-container {width:250px; height: 250px; }
    .container-over {width: 200px;}
    .div-contatti {width: 250px; height:250px;}
}
@media(max-width:991px) {
    
}
@media(max-width:800px) {
    .flip-card {width: 530px; height: 530px;} 
    .embed-container {width:250px; height: 250px; }
    .container-over {width: 250px;}
    .div-contatti {width: 250px; height:250px;}
}

@media(max-width:600px) {
    .flip-card {width: 500px; height: 500px;} 
    .embed-container {width:300px; height: 300px; }
    .container-over {width: 250px;}
    .div-contatti {width: 300px; height:300px;}
}

@media(max-width:480px) {
    .flip-card {width: 400px; height: 400px;} 
    .embed-container {width:400px; height: 400px; }
    .container-over {width: 400px;}
    .div-contatti {width: 400px; height:400px;}
}
@media(max-width:414px) {
    .flip-card {width: 335px; height: 335px;} 
    .embed-container {width: 335px; height: 335px;} 
    .container-over {width: 335px; height: 335px;} 
    .div-contatti {width: 335px; height: 335px;} 
    
}

@media(max-width:375px) {
    .flip-card {width: 315px; height: 315px;} 
    .embed-container {width: 315px; height: 315px;} 
    .container-over {width: 315px; height: 315px;} 
    .div-contatti {width: 315px; height: 315px;} 
    
}