html, body {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}

body{
  background-color: #6FAAB8;
}

.container { 
  width: 750px;
  height: 494px;
  position: relative;
  perspective: 600px;
  margin: 0px auto 0px auto;

  position: absolute;
  top: 100px;
  left: 50%;
  /*padding-top: 60px;  */

}

#card {
  position: relative;
  left: -50%;
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

#card { transform-origin: right center; }


#card > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

#card .front {
  background: #185D6E;
}
#card .back {
  background: #ffffef;
  transform: rotateY( 180deg );
}

#card.attiva {
    transform: translateX( -100% ) rotateY( -180deg );

}


/*###################################*/

/*                                   */

/*###################################*/


 .colonnaFront {
  float: left;
     width: 50%;
     height: 100%;
     border: 20px solid white;
     padding: 20px;
     /*margin: 20px;*/
     box-sizing: border-box;
 } 
 .colonnaFront:first-of-type {
     border-right: 0px solid white;
     padding: 20px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }

  .colonnaFront {
  float: left;
     width: 50%;
     height: 100%;
     border: 20px solid white;
     padding: 20px;
     /*margin: 20px;*/
     box-sizing: border-box;
 }


#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}


/*###################################*/

/*                                   */

/*###################################*/

.front img{
  width: 100%;
  height: 100%;
}

.colonna{
  width: 39%;
  height: 100%;
  /*background-color: #00f;*/
  float: left;
  /*padding-left: 20px;*/
}

#primaColonna{
  width: 60%;
  border-right: 2px solid black;
  /*background-color: #0f0;*/
}

#primaColonna > textarea{
  width: 380px;
  height: 360px;
  margin: 35px;
  resize: none;
  background: #ffffef;
  border: none;
  
  font: 400 26px 'Cookie', Helvetica, sans-serif;
  color: #555;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 

}

#primaColonna > input{
  width: 200px;
  margin-top: auto;
  margin-bottom: 35px;
  margin-left: 35px;
  background: #ffffef;
  border: none;
  border-bottom: 1px solid #111;

  font: 400 26px 'Cookie', Helvetica, sans-serif;
  color: #555;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}


/*##################################################*/

/*         SECONDA COLONNA RETRO CARTOLINA          */

/*##################################################*/


#francobollo{
  width: 80px;
  height: 100px;
  border : solid 2px black;
  margin-top: 30px;
  margin-right: 40px;
  margin-left: auto;
  margin-bottom: 120px;
}

address ul {
  list-style: none;
  padding: 30px;
  padding-bottom: 10px;
  /*text-decoration: none;*/
}

address ul  li{
  /*list-style: none;*/
  text-decoration: none;
  line-height: 30px;
  border-bottom: 1px solid #888;

  font: 400 26px 'Cookie', Helvetica, sans-serif;
  color: #555;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}



.social{
  margin: 0px auto; 
  text-align: center;
}




.social a {
  display: inline-block;
  text-indent: -9999px;
  font-size: 0;
  /*margin: 0px 8px;*/
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  margin-left: 5px;
  background-image: url("http://callmenick.com/_development/css-equal-height-columns/img/icons-svg/social.png");
  background: url("http://callmenick.com/_development/css-equal-height-columns/img/icons-svg/social.svg");
  background-size: 180px 30px;
}

.social a.fb {
  background-position: 0 0;
}

.social a.twitter {
  background-position: -30px 0;
}


.social a.googleplus {
  background-position: -60px 0;
}
.social a.rss {
  background-position: -90px 0;
}
.social a.email {
  background-position: -120px 0;
}