/* GOOGLE FONT SOFIA */
@import url(http://fonts.googleapis.com/css?family=Sofia|Open+Sans|Oswald);

/* GENERALE */
body { background: #FAFAFA; margin: 0; padding: 0; color: #1A1A1A; font-family: 'Open Sans', verdana, arial, tahoma, sans-serif; font-size: 14px; }
a { color: #FF9900; text-decoration: underline; }
img { display: block; border: 0; }
h1 { font-weight: bold; padding: 0; margin: 0 0 5px 0; font-family: 'Sofia', cursive; font-size: 36px; color: #FF9900; }
h1.home { font-size: 24px; color: #777; }

/* FORM */
input, textarea { display: block; width: 100%; padding: 10px 5px; margin: 0; box-sizing: border-box; outline: none; background-color: #FFF; border: 1px solid #DDD; }
input { height: 35px; }
textarea { resize: none; }

/* STRUTTURA */
div#contenitore { position: relative; background: #FFF; border-left: 1px solid #DDD; border-right: 1px solid #DDD; width: 960px; margin: 0 auto; }
div#logo { position: relative; height: 80px; }
div#menu { position: relative; height: 40px; background: #EEE; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; }
div#contenuto { margin: 10px 10px 0 10px; padding-bottom: 60px; }
div#footer { position: absolute; bottom: 0; right: 10px; left: 10px; height: 60px; border-top: 1px solid #DDD; }

/* LOGO */
#logo img { position: absolute; top: 10px; left: 10px; width: 300px; height: 60px; }
#logo span { position: absolute; top: 10px; right: 10px; width: 290px; height: 60px; padding: 3px 5px; box-sizing: border-box; background: #FF9900; color: #FFF; font-size: 12px; line-height: 18px; }

/* MENU */
#mobilemenu-opener { display: none; }
#menu > ul { position: absolute; top: 0; left: 0; list-style-type: none; margin: 0; padding: 0; }
#menu li { float: left; }
#menu a { font-family: 'Oswald', sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 40px; display: block; padding: 0 8px; color: #777; border-left: 1px solid #FAFAFA; border-right: 1px solid #E0E0E0; text-decoration: none; text-shadow: 1px 1px #FFF; }
#menu a.ultimo { border-right: 0; }
#menu a:hover { background: #FF9900; color: #FFF; text-shadow: 1px 1px #444; }
#menu a.contatti { position: absolute; top: 5px; right: 10px; line-height: 30px; border-right: 0; background: #3CB300; color: #FFFFFF; text-shadow: 1px 1px #008000; border: 0; padding: 0; text-align: center; width: 120px; }
#menu a.contatti:hover { background: #44CC00; }

/* COPERTINA */
.cope { position: relative; width: 940px; height: 300px; margin-bottom: 10px; }
.cope img { display: block; z-index: 1; }
.cope div.caption { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 2; color: #FFFFFF; font-size: 22px; line-height: 30px; }

/* CONTENUTO */
#contenuto .nocol { width: 100%; }
#contenuto .txt { float: left; width: 620px; margin-right: 20px; }
#contenuto .col { float: left; width: 300px; } 
.txt p, .nocol p { line-height: 20px; text-align: justify; margin: 0 0 15px 0; padding: 0; }
.col .tit { background: #FF9900; color: #FFF; font-weight: bold; font-size: 12px; line-height: 26px; padding: 0 5px; margin-bottom: 10px;  }
.col p { line-height: 16px; text-align: justify; font-size: 12px; color: #777; margin: 0 0 15px 0; padding: 0; }

/* BXSLIDER */
.bx-wrapper { margin-bottom: 15px !important; }
ul#slideshow { list-style-type:none; margin: 0; padding: 0; }

/* BOX IN HOME */
.homeboxline { position: relative; height: 160px; border-top: 1px solid #DDD; }
.homebox { position: absolute; top: 10px; width: 150px; height: 150px; padding: 5px; background: #333; box-sizing: border-box; }
.homebox img { width: 100%; height: auto; }
.homebox div { position: absolute; bottom: 5px; left: 5px; right: 5px; padding: 5px; z-index: 2; font-size: 12px; color: #FFF; line-height: 18px; }

/* FOOTER */
#footer > div { position: absolute; top: 10px; line-height: 20px; font-size: 12px; color: #777; margin: 0; padding: 0; }
#footer > div.sx { left: 0; width: 540px; }
#footer > div.dx { right: 0; width: 380px; text-align: right; }
#footer > div.dx > img { position: absolute; top: 0; right: 0; }
#footer .mobile { display: none; }

/* TRITTICO */
.trittico { position: relative; width: 800px; height: 460px; margin: 0 auto; }
.trittico .b1,.trittico .b2,.trittico .b3 { position: absolute; border: 1px solid #DDD; box-sizing: border-box; }
.trittico .b1 { width: 250px; top: 40px; left: 0; bottom: 20px; border-right: none; background: #FAFAFA; }
.trittico .b2 { width: 300px; top: 0; left: 250px; bottom: 0; background: #FFF; }
.trittico .b3 { width: 250px; top: 40px; left: 550px; bottom: 20px; border-left: none; background: #FAFAFA; }
.trittico .tit { background: #777; padding: 0 5px; line-height: 30px; text-align: center; color: #FFF; }
.trittico img { width: 100%; height: auto; border-bottom: 1px solid #DDD; }
.trittico .dtt { padding: 5px 5px 50px 5px; font-size: 12px; color: #777; line-height: 16px; }
.trittico .btn { position: absolute; bottom: 10px; left: 15px; right: 15px; line-height: 26px; background: #FF9900; color: #FFF; text-align: center; }

/* SLIDESHOW */
div#slideshow { height: 300px; border-top: 1px solid #DDD; border-bottom: 1px solid #DDD; margin-bottom: 10px; }

/* CONTATTACI */
div.modulo-col { width: 460px; float: left; }
div.modulo-col.primo { margin-right: 20px; }
#contattaci input[type="text"], #contattaci textarea { background-color: #FAFAFA; }
#contattaci textarea { height: 145px; }
#contattaci label { display: block; line-height: 40px; font-size: 16px; }

/*
div.captcha-sx { float: left; width: 182px; }
div.captcha-dx { float: left; width: 276px; height: 73px; background: #efefee; border: 1px solid #DDD; }
.captcha-dx input { width: 234px; margin: 19px 0 0 19px; text-align: center; }
*/

/* CALL TO ACTION - CTA */
div.cta { background: #EEE; height: 60px; border-top: 1px solid #DDD; }
div.cta-contatti { height: 60px; margin-top: 40px; }
.cta-contatti a, .cta a { display: block; width: 220px; font-family: 'Sofia', cursive; font-size: 22px; line-height: 40px; margin: 10px auto 0; text-align: center; background: #3CB300; color: #FFFFFF; text-decoration: none; text-shadow: 1px 1px #008000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

/* CAPTION */
.textover { background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF990000, endColorstr=#FF990000); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF990000, endColorstr=#FF990000)"; color: #FFFFFF; font-size: 26px; line-height: 42px; }

/* VARIE */
.clearfix { clear: both; }
.err { padding: 20px; border: 3px solid #CC3300; color: #CC3300; text-align: center; font-size: 16px; font-weight: bold; }

/* === TUTTI I DEVICE NO DESKTOP === */
@media only screen and (max-width: 962px) {

div#contenitore { width: 100%; }

#menu > ul { display: none; top: 41px; background: #E0E0E0; width: 100%; z-index: 9999; }
#menu li { float: none; border-bottom: 1px solid #FAFAFA; }
#mobilemenu-opener { position: absolute; display: block; width: 30px; height: 30px; top: 5px; left: 10px; }
 
div.modulo-col { width: 100%; float: none; }
div.modulo-col.primo { margin-right: 0; }

#footer { height: 30px; }
#footer .sx, #footer .dx { display: none; }
#footer .mobile { position: relative; display: block; text-align: center; line-height: 30px; }
   
}

/* === TABLET === */
@media only screen and (min-width: 600px) and (max-width: 962px)  {

.cope { margin: 10px 0; width: auto; height: auto; }
.cope img { width: 100%; height: auto; }

#contenuto .txt { width: 63%; margin-right: 2%; }
#contenuto .col { width: 35%; } 

.trittico { width: 94%; }
.trittico .b1 { width: 30%; top: 40px; left: 0; bottom: 20px; border-right: none; background: #FAFAFA; }
.trittico .b2 { width: 40%; top: 0; left: 30%; bottom: 0; background: #FFF; }
.trittico .b3 { width: 30%; top: 40px; left: 70%; bottom: 20px; border-left: none; background: #FAFAFA; }

.homeboxline { height: auto; border-top: 0; margin-right: -3%; }
.homebox { position: relative; float: left; top: auto; left: auto !important; width: 30%; height: auto; margin: 0 3% 10px 0; }
   
}

/* === SMARTPHONE === */
@media only screen and (max-width: 600px) {

h1 { font-size: 28px; }

#logo { height: auto !important; padding: 10px 0; }
#logo img, #logo span { display: block; position: relative; top: auto; left: auto; right: auto; }
#logo img {  margin: 0 auto; width: 300px; height: auto;  }
#logo span { margin: 10px 10px 0 10px; width: auto; }

.cope { margin: 10px 0; width: auto; height: auto; }
.cope img { width: 100%; height: auto; }
.cope .caption { display: none; } 

#contenuto .txt, #contenuto .col { width: 100%; float: none; } 
#contenuto .cta { margin-bottom: 20px; }

.trittico { width: auto; height: auto; }
.trittico .b1, .trittico .b2, .trittico .b3 { position: relative; top: auto; left: auto; bottom: auto; width: 90%; background: #FAFAFA; border: 1px solid #DDD; margin: 0 auto 20px auto; padding-bottom: 46px; }
.trittico .b3 { margin-bottom: 0; }
.trittico img { width: 100%; height: auto; }

.homeboxline { margin-right: -2%; height: auto; border-top: 0; }
.homebox { position: relative; float: left; top: auto; left: auto !important; width: 48%; height: auto; margin: 0 2% 10px 0; }

div.captcha-sx { float: none; width: 182px; margin: 0 auto 20px; }
div.captcha-dx { float: none; width: auto; height: 73px; background: #FAFAFA; border: 1px solid #DDD; }
.captcha-dx input { width: 80%; margin: 19px auto 0; text-align: center; }

}