@media only screen and (min-width : 320px) and (max-width : 480px) {
body {
margin-top: 0px;
margin:     0px auto 0;
}
html #container {
height: 1000px;
}
a.top:link {color:#FFCC00;}
a.top:visited {color:#FFCC00;}
a.top:hover {color:#FFFFFF;}
#container {
width: 100%;
background-color: #FFFFFF;
margin-right:auto;
min-height: 100%;
margin-left:auto;
margin-top: 0px;
}
#content {
width: 100%;
height: auto;
background-color: #FFFFFF;
margin-right:auto;
float: left;
min-height: 100%;
margin-left:auto;
margin-top: 0px;
}
#container2 {
width: 100%;
height: auto;
background-color: #FFFFFF;
margin-right:auto;
margin-left:auto;
margin-top: 0px;
margin-bottom: 0px; 
}

#top2 {
width: 100%;
height: auto;
margin-right:auto;
margin-left:auto;
}
#divsx {
width: 100%;
height: auto;
margin-right:auto;
margin-left:auto;
}
#divdx {
width: 100%;
height: auto;
margin-right:auto;
margin-left:auto;
}


 .tabtop { display: table; width: 100%; 
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right:auto;
margin-left:auto; color: #000000; }
.rowtop {clear: both; display: block; display: table-row; width: 100%;}
.coltop {  float: left; width: 100%; background-color: #000000; color: #FFFFFF; font-weight: bold; text-align: center; height: auto;  padding: 5px; background-repeat: no-repeat; display: table-cell;}
.coltop2 {  float: left; width: 100%; height: auto;  background-color: #000000; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; padding: 10px; background-repeat: no-repeat; }
.coltop3 {  float: left; width: 100%; height: auto;  background-color: #000000; color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px;font-weight: bold;  padding-left: 10px; background-repeat: no-repeat;  }
.coltop4 { float: left; width: 100%; text-align: right; margin-top: 5px; height: auto; display: table-cell;}

.icon {
vertical-align: middle;
margin-right: 2px;
}

#atleft {
width: 100%;
height: auto;
text-align: center;
font-size: 12px;
color: #FFFFFF; 
font-family: Verdana, Arial, Helvetica, sans-serif;
background-repeat: no-repeat;
}
#atright {
width: 100%;
height: auto;
text-align: right;
background-repeat: no-repeat;
}

#divcorpo {
width: 100%;
font-size: 13px;
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-top: -50px;
margin-right:auto;
margin-left:auto;
}
#box1 {
width: 100%;
height: auto;
font-size: 14px;
padding: 5px;
margin-top: 70px;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 50px;
}
#box2 {
width: 100%;
height: auto;
float: left;
padding: 5px;
font-size: 14px;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 50px;
}
#box3 {
width: 100%;
height: auto;
font-size: 14px;
padding: 5px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
position: relative;
margin-right:auto;
margin-left:auto;
margin-top: 70px;
margin-bottom: 50px;
}
#box4 {
width: 100%;
height: auto;
padding: 5px;
position: relative;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 50px;
}
#box5 {
width: 100%;
height: auto;
font-size: 14px;
padding: 5px;
margin-top: 70px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-left:auto;
margin-right:20px;
margin-bottom: 50px;
}
#box6 {
width: 100%;
height: auto;
padding: 5px;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 50px;
}

.post {
width: 100%;
height: auto;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 50px;
}

.post2 {
width: 100%;
height: auto;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin-right:auto;
margin-left:auto;
margin-bottom: 30px;
}

.orto {
width: 90%;
height: auto;
padding: 5px;
font-size: 13px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
border-radius: 10px 10px 10px 10px;
background-color: #D8E2C7;
margin-top: 20px;
}

#bottom {
width: 100%;
height: auto;
line-height: 30px;
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
color: #FFFFFF;
margin-right:auto;
margin-left:auto;
}

.camere {
width: 280px;
height: 250px;
vertical-align: middle;
display:table-cell;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
margin-right:auto;
margin-left:auto;
margin-bottom: 300px;
bottom: 300px;
background-image: url(../im-sito-villa-archirafi/post-it-2.png);
}


#sfondo {
width: 100%;
height: 160px;
position: relative;
background-image: url(../im-sito-villa-archirafi/sfondo-sm.jpg);
}
#sfondo2 {
width: 100%;
height: 90px;
position: relative;
background-image: url(../im-sito-villa-archirafi/sfondo-2-sm.jpg);
}
#sfondo3 {
width: 100%;
height: 90px;
position: relative;
background-image: url(../im-sito-villa-archirafi/sfondo-3-sm.jpg);
}
#sfondo4 {
width: 100%;
height: 90px;
position: relative;
background-image: url(../im-sito-villa-archirafi/sfondo-4-sm.jpg);
}
#sfondo5 {
width: 100%;
height: 90px;
position: relative;
background-image: url(../im-sito-villa-archirafi/sfondo-5-sm.jpg);
}

.tariffeprenota {
margin-right: auto; margin-left: auto; margin-top: 40px; margin-bottom: 50px; 
display: table; width: 100%; 
 float: left; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;}
.rigaprenota {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.colprenota { float: left; width: 45%; height: 30px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.colprenota2 { float: left; width: 45%; height: 30px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.prenota {
width: 90%;
height: auto;
margin-right:auto;
margin-left:auto;
margin-bottom: 40px;
background-color: #FFFFFF;
top: 60px;
bottom: 100px;
position: relative;
}
#divfinale {
width: 100%;
height: 150px;
margin-right:auto;
margin-left:auto;
background-color: #000000;
}
#divfinale2 {
width: 100%;
height: 30px;
margin-right:auto;
margin-left:auto;
background-color: #000000;
}
.statistiche {
width: 100%;
height: 60px;
}

.immagine {
margin-right:auto;
margin-left:auto;
}

.tariffe {
margin-right: auto; margin-left: auto; margin-top: 40px; margin-bottom: 50px; 
display: table; width: 100%; 
 float: left; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;}
.rigatar {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatar2 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatar3 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatar4 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.coltar1 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar2 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar3 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar4 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar5 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar6 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar7 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltar8 { background-color: #E3D5D5; float: left; width: 45%; height: 60px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}


.tariffea {
margin-right: auto; margin-left: auto; margin-top: 40px; margin-bottom: 50px; 
display: table; width: 100%; 
 float: left; font-size: 14px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #000000;}
.rigatara {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatara2 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatara3 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatara4 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.rigatara5 {clear: both; display: block; display: table-row; width: 100%; background-color: #FFFFFF;}
.coltara1 { background-color: #6CA9EC; float: left; width: 48%; height: 60px; margin: 2px; font-size: 15px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara2 { background-color: #6CA9EC; float: left; width: 48%; height: 60px; margin: 2px; font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #663366; font-weight: bold; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara3 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara4 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara5 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara6 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara7 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara8 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara9 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}
.coltara10 { background-color: #F3F3F3; float: left; width: 48%; height: 30px; margin: 2px; text-align: center; line-height: 30px; background-repeat: no-repeat; display: table-cell;}

}


/* ----------------------------------TABELLA MODULO NELLA PAGINA CONTATTI------------------------------------------------- */

@media only screen and (min-width : 320px) and (max-width : 480px) {
.contactapp { width: 90%; 
left: +5px; 
top: 30px;
margin-left: +5px;
margin-top: +30px; background-color: #FFFFFF; }
.rowcontact1 {clear: both; width: 100%;}
.rowcontact2 {clear: both; width: 100%;}
.rowcontact3 {clear: both; width: 100%;}
.rowcontact4 {clear: both; width: 100%;}
.rowcontact5 {clear: both; width: 100%;}
.rowcontact6 {clear: both; width: 100%;}
.rowcontact7 {clear: both; width: 100%;}
.colcontact1 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat; }
.colcontact2 { background-color: #FFFFFF; width: 100%; height: 80px; }
.colcontact3 { background-color: #FFFFFF; width: 100%; height: 80px; text-align: top; }
.colcontact4 { background-color: #FFFFFF; width: 100%; height: 80px;}
.colcontact5 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat;}
.colcontact6 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat;}
.colcontact7 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat; }
.colcontact8 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat; }
.colcontact9 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat;}
.colcontact10 { background-color: #FFFFFF; width: 100%; height: 80px; background-repeat: no-repeat; }
.colcontact11 { background-color: #FFFFFF; width: 100%; height: 120px; background-repeat: no-repeat; }
.colcontact12 { background-color: #FFFFFF; width: 100%; height: 120px; background-repeat: no-repeat; }
.colcontact13 { background-color: #FFFFFF; width: 100%; height: 120px; background-repeat: no-repeat; }
.colcontact14 { background-color: #FFFFFF; width: 100%; height: 120px; background-repeat: no-repeat; }

label, input, select { /* Stili comuni agli elementi del form */
    color: #333333; /* Colore del testo */
    font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
	width: 230px;
	height: 40px;
	font-size: 14px;
}
fieldset { /* Stili comuni agli elementi del form */
    color: #333333; /* Colore del testo */
    font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
	width: 210px;
	height:50px;
	font-size: 14px;
}

label2 { /* Stili comuni agli elementi del form */
    color: #333333; /* Colore del testo */
    font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
	width: 210px;
	height: 30px;
	font-size: 14px;
}

textarea { /* Stili comuni agli elementi del form */
    color: #333333; /* Colore del testo */
    font-family: Verdana, sans-serif; /* Tipo di carattere per il testo */
	width: 210px;
	height: 80px;
	font-size: 14px;
}

#submit {
  background-color: #72B3FA; /* colore di sfondo    */
  border: 1px solid #2187F8; /* bordo dell'elemento */
  color: #fff;               /* colore del testo    */
  font-weight: bold;         /* testo in grassetto  */
  padding: 0;                /* padding             */
  height: 40px;              /* altezza             */
  width: 90px;
  margin: 10px;
  text-shadow: 2px 2px 3px #000000;
box-shadow: -1px 1px 4px 1px #999999;
            /* larghezza           */
}
#pulisci {
  background-color: #72B3FA; /* colore di sfondo    */
  border: 1px solid #2187F8; /* bordo dell'elemento */
  color: #fff;               /* colore del testo    */
  font-weight: bold;         /* testo in grassetto  */
  padding: 0;                /* padding             */
  height: 30px;              /* altezza             */
  width: 130px;
  margin: 10px;
  text-shadow: 2px 2px 3px #000000;
  box-shadow: -1px 1px 4px 1px #999999;
                /* larghezza           */
}
#button {
  background-color: #056192; /* colore di sfondo    */
  border: 2px solid #CCCCCC;
 text-shadow: 2px 2px 3px #000000; /* bordo dell'elemento */
  color: #FFFFFF;               /* colore del testo    */
  font-weight: bold;         /* testo in grassetto  */
  padding: 0;                /* padding        */
  height: 30px;              /* altezza             */
  width: 250px;
            /* larghezza           */
}

/* Focus sui campi */
input:focus, textarea:focus, select:focus, .focus {
  border: 2px solid #67B5DA; /* bordo degli elementi */
  color: #333333;       
  box-shadow: -1px 1px 4px 1px #7DBFDF;/* colore del testo     */
}
fieldset input{
width:auto;
height: auto;
margin-right:5px;
  border: none;
}

.divgrazie {
width: 480px;
height: 480px;
left: -8px; 
top: 0px;
bottom: 0px;
margin-left: -8px;
margin-top: +0px;
margin-bottom: +0px;
background-color: #FFFFFF;
align:top;
}
.flex {
max-width:100px;
max-height:30px;
margin-top: 20px;
}
.flex2 {
max-width:120px;
max-height:70px;
}
.flex3 {
max-width:300px;
max-height:180px;
}
.flex4 {
max-width:100px;
max-height:30px;
}
.flex5 {
max-width:280px;
max-height:174px;
}
.flex6 {
max-width:130px;
max-height:90px;
}

.flex7 {
max-width:150px;
max-height:60px;
}
}