.clearfix:before, .clearfix:after {content:""; display:table; font-size:0em;}
.clearfix:after {clear:both;}
.clearfix: {zoom:1;}

* {box-sizing:border-box; margin:0px; padding:0px; border:none;}
.mobile{display:none;}
.left{text-align:left;}
.center{text-align:center;}

/* 1. CSS Imports
--------------------------------------- */
@import url('http://fonts.googleapis.com/css?family=Open Sans:300,400,700');

html, body {height:100%; overflow:visible;}
body {

	font-family: 'Open Sans', sans-serif; 
	font-size:14px;
	color:#534D4F;
	background-color: #FFFFFF;
}

/* struttura */
#container {width:100%; height:100%; overflow:visible;}
header {
	background-color:#FFFFFF;
	background-image:url(images/logo.png);
	background-position:1em center;
	background-repeat:no-repeat;
	background-size:auto 100%;
	height:60px;
	width:100%;
	border-bottom-color: #CCCCCC;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.content{position:relative; max-width:1200px; margin:auto; padding-bottom:4em; background:#fff;}
footer {
	background-color:#FFFFFF;
	width:100%;
}

/* navigazione */
nav{width:100%; max-width:1600px; margin:auto; height:100%; line-height:100%; text-align:center;}
nav > ul{display:inline-block; width:auto; margin:auto; letter-spacing:0.1em; font-size:0.85em; height:100%; padding-top:5px;}
nav > ul li{list-style:none; float:left; height: 40px; border-right:1px solid #fff;}
nav > ul li:last-child{border:none;}
nav > ul li a{color:#fff; display:inline-block; height: 100%; line-height: 40px; padding:0px 1.5em; font-size:1.25em; text-decoration:none; transition:background-color 0.5s;}
.noTouch nav > ul li a:hover{background-color:#0A3356}

.loggato{position:absolute; right:1.0em; top:8px; font-size:0.9em; color:#fff;}
.loggato span{display:block; color:#F5FF03;}

/*contenuto */
main{min-height: calc(100% - 102px);}

/* footer */
footer {height:50px;}

.text{padding:0.5em;}

/* gallery */
.gallery div {text-align:center;}
.gallery div a{text-decoration:none; color:#333;}
.gallery div a:visited, gallery div a:active{color:#333;}
.gallery div a p.title{color:#0961A9; font-weight:bold; font-size:1.15em; text-transform:uppercase;}
.gallery div a p.description{font-size:0.75em;}
.gallery div img {display:block; border:1px solid #ddd; width:98%; margin:auto; height:auto;}
.fancybox-caption{text-align:center;}

/*tipografia */
h1, h2{ font-size:1.75em; font-weight:normal; text-transform:uppercase;}

select, input[type="text"], input[type="password"], textarea {min-height:40px; width:100%; border:1px solid #333; font-size:1.5em; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.input select{background:url(images/select-arrow.png) 99% center no-repeat; background-size:auto 50%; padding:0em 1.0em 0em 0.25em;}
input[type="checkbox"]{-webkit-appearance: none; -moz-appearance: none; appearance: none; height:3.5em; width:3.5em; border:1px solid #333; transition:all 0.5s; background:transparent center center;}
input[type="checkbox"]:checked{background:#000000 url(images/check-arrow.png) no-repeat center center;}

textarea{height:120px;}

.twin{width:50%; float:left;}
.twin-container .twin:nth-child(1){padding-right:0.5em;}
.twin-container .twin:nth-child(2){padding-left:0.5em;}
.input div{padding:0.5em 0em;}
.input div.twin{padding-top:0em;}
.input label{
	display:block;
	font-size:1.4em;
	font-weight:bold;
	color: #003366;
	text-transform:uppercase;
	margin-bottom:0.25em;
}

.twin-container.inline {margin-top:1em;}
.twin-container.inline .row{padding:1em; max-width:810px; margin:auto;}
.twin-container.inline .input label {display:inline-block; padding-right:1em;}
.twin-container.inline .input input[type="text"] {width:4em;}

/* preventivo */
.prodotto {padding:2.5em 0em; border-bottom: 2px dotted #CECECE;}
.prodotto .image {float:left; width: 30%;}
.prodotto .image img {display:block; width: 90%; height:auto; margin:auto; border:1px solid #ececec;}
.prodotto .text {float:left; width: 70%; padding:0em 0.5em;}
.prodotto .text h1 {font-size:2.2em; color:#0961A9; font-weight:bold;}
.prodotto .text .specifiche {font-size:1.25em; padding: 0.5rem 0em;}
.descrizione {font-style:italic;}
.prodotto .text .prezzo {font-size:2em; font-weight:bold; padding:0.5em 0em;}

.opzioni{padding:2.5em 0em; border-bottom: 2px dotted #CECECE; margin-bottom:2.5em;}
.form .opzioni:last-of-type {border:none; margin:0em; padding:2.5em 0em 0em 0em;}
.opzioni .row {padding:1em; margin-bottom:1em;}
.opzioni .row:last-of-type{margin-bottom:0px;}
.opzioni .row div{float:left;}
.opzioni .input{width:4em; padding:0em;}
.opzioni .text{width:calc(100% - 17.5em); padding:0em; font-size:0.9em;}
.opzioni .text strong{display:block; margin-bottom:0.25em; font-size:1.4em;}
.opzioni .text .note{display:block; margin-top:0.5em; font-size:0.9em; color:#cc0000;}
.opzioni .prezzo {font-size:1.8em; font-weight:bold; width:10rem; text-align:right;}
.opzioni .prezzo_iva {font-size:1.1em; width:10rem; text-align:right;}
.opzioni .prezzo .quantita {float:none; margin-top:1em;}
.opzioni .prezzo .quantita span{display:inline-block; width:40px; text-align:center; height:40px;}
.opzioni .prezzo .quantita span:nth-child(2) {width:2.25em;}
.opzioni .prezzo .quantita span input {font-size:1.5rem; background:transparent; border:none; text-align:center; color: #0961A9; font-weight:bold;}
.opzioni .prezzo .quantita span img {width:40px; height:40px; border-radius:25px; border:4px solid #534D4F; font-size:40px; line-height:40px; vertical-align:middle;}

/* elenco preventivi */
.preventivi h1 + p {padding-bottom: 1em; margin-bottom:2.5em; border-bottom: 2px dotted #CECECE; font-style:italic;}
.preventivi .button.small{font-size:1.5rem; font-weight:normal; float:left; padding:0.5em 1em;}
.preventivi .text {font-size: 1.25em; font-style: italic; width: calc(100% - 245px); min-height:55px;}
.preventivi .text strong{font-style:normal; font-size:1.1em;}
.preventivi .comandi {width: 245px;}
.preventivi .button.small.black{margin-right:1rem;}
.preventivi .button.small.red {font-weight:bold; font-size: 2rem; padding:0.22em; width:55px;}
.opzioni.preventivi {border-bottom:none;}

.button{display:block; text-align:center; font-size:2.5em; padding:0.5em 0em; text-decoration:none;}
.button.small{font-size:1.5em;}
.grey {background: #F0F0F0;}
.blue{background:#0961A9; color: #fff;}

.button:hover{
	background-color:#0A64AD;
	color: #fff;
}

.red{
	color: #fff;
	background-color: #003366;
}
.black{background:#000; color: #fff;}

span.blue {color:#0961A9; background: transparent;}

.calcola{padding:2.5em 0em; border-bottom: 2px dotted #CECECE;}
.calcola .row {margin-bottom:2em;}
.calcola .row:last-of-type{margin-bottom:0px;}
.calcola .totale{font-size:2.0em; font-weight:bold;}
.calcola .totale span{display:block; color: #0961A9; font-size:1.55em;}
.calcola .dettagli{text-align:right; font-size:1.5em; font-weight:bold;}
.calcola .dettagli span{display:block; color: #0961A9; font-size:1.25em; margin-bottom:0.8em;}
.calcola .dettagli p:last-child span{margin-bottom:0em;}

.form{padding:2.5em 0em; border-bottom: 2px dotted #CECECE; margin-bottom:2.5em;}

.row > .button{margin-bottom:1em;}

.cercaditta input {width:calc(100% - 130px) !important;}
.cercaditta input ::-moz-placeholder {color:#cecece;}
.cercaditta input ::-webkit-placeholder {color:#cecece;}
.cercaditta input ::-ms-placeholder {color:#cecece;}
.cercaditta input ::placeholder {color:#cecece;}
.cercaditta input  + a{display:inline-block; padding:0px 1em; line-height:40px; width:120px;}
.cercaditta .row.grey {padding:0.5em; margin-bottom:1em;}
.cercaditta .row.grey:last-of-type {margin-bottom:0px;}
.cercaditta  .row div{float:left;}
.cercaditta .text{width:calc(100% - 18em);}
.cercaditta .text strong{font-size:16px; padding:12px 0px;}
.cercaditta .text + div{font-size:1.4em; float:right; font-weight:bold; line-height:40px;}
.cercaditta  span{ width:40px; text-align:center; height:40px; margin-left: 1em;}
.cercaditta span img {width:40px; height:40px; border-radius:25px; border:4px solid #534D4F; font-size:40px; line-height:40px; vertical-align:middle;}
.cercaditta  {border:none;}
.form.cercaditta   {margin:0; padding-bottom:1em;}

/* media query */
@media screen and (min-width:1280px){
	header{height:50px; z-index:4}
	main .content:first-child{position:relative; margin: auto auto; z-index:3;}
	nav{text-align:center;}
	.gallery div{float:left; width:25%; padding:0.5%;}
	}

@media screen and (max-width:1279px){
	.content{margin:auto; padding:0.5em;}
	.gallery div{float:left; width:25%; padding:0.5%;}
	}

@media screen and (max-width:979px){
	header{height:50px; background-position:center center;}
	#slideshow{margin-top:66px;}
	.mobile{display:block;}
	nav{ padding-top:0px;}
	nav > ul{position: absolute; height:0px; overflow:hidden; left:0px; padding-top:0px; top:50px; opacity:0; z-index:4; transition:all 0.5s; width:300px;}
	nav > ul.opened{display:block; height:auto; opacity:1.0; background-color:#0961A9;}
	nav > ul li{float:none; height: 40px; border-right: none; border-bottom:1px solid #fff; text-align:left;}
	nav > ul li:last-child{border:none;}
	nav > ul li a{display:block; height: 100%; line-height: 40px;}
	.toggle-nav{position: absolute; top:0px; padding: 9px 10px; margin: 4px 15px; background-color: transparent; border: 1px solid rgba(255, 255,255,0.5); border-radius: 4px; cursor:pointer;}
	.toggle-nav.active{border: 1px solid #fff;}
	.ico-nav{background-color:#fff; display: block; width: 1.5em; height: 2px; border-radius: 1px; margin:0.25em 0em;}
	.gallery div{float:left; width:50%; padding:0.5%;}
	}

@media screen and (max-width:640px){
	header{height:50px; background-position:60px center; background-size: auto 80%;}
	nav > ul{width:100%; background-color:#0961A9; left:0px;}
	footer div p{line-height:1.35em; padding:0.5em 0em;}
	.form div{width:100%; float:none; text-align:left;}
	.form div input, .form div select, .form div textarea{width:100%;}
	.prodotto .image {float:none; width: 100%; max-width: 360px; margin:auto;}
	.prodotto .image img{width: 100%;}
	.image + .text{margin-top:1.5em;}
	.prodotto .text {float:none; width: 98%;}
	.prodotto .text h1 {font-size:2.0em;}
	.prodotto .text .specifiche {font-size:1em; padding: 0.5rem 0em;}
	.descrizione {font-style:italic;}
	.prodotto .text .prezzo {font-size:1.5em;}
	.opzioni .row div{float:left;}
	.opzioni .input{width:4em; padding:0em 0em;}
	.opzioni .text{width:calc(100% - 5em);}
	.opzioni .prezzo {float:none; font-size:1.4em; font-weight:bold; width:100%;}
	.twin{float:none; width:100%; padding:0em !important;}
	.calcola .totale{font-size:1.5em; text-align:center;}
	.calcola .totale span{display:block; color: #0961A9; font-size:1.25em;}
	.calcola .dettagli{font-size:1.15em; text-align:center;}
	.calcola .dettagli span{display:block; color: #0961A9; font-size:1.25em; margin-bottom:0.8em;}
	.calcola .dettagli p:last-child span{margin-bottom:0em;}
	.cercaditta  .row div{float:none;}
	.cercaditta .text{width:100%;}
	.cercaditta .text strong{font-size:14px; padding:12px 0px;}
	.cercaditta .text + div{font-size:1.25em; float:none; font-weight:bold; line-height:40px; text-align:right;}
	.button{font-size:1.5em; padding:0.5em 0.5em; text-decoration:none;}
	.button.small{font-size:1.15em;}
	.preventivi {padding:0em;}
	.preventivi .text {float:none !important; width: 100%;font-size:1em; }
	.preventivi .comandi {float:none !important; text-align:center; padding-top:1em; width:245px; margin:auto;}
	.preventivi .button.small.black{margin-right:1rem; font-size: 1.25rem;}
	.preventivi .button.small.red {font-weight:bold; font-size: 1.25rem; padding:0.5em; width:55px;}
	.preventivi h1 + p {margin-bottom:1em;}
	.twin-container.inline .row{padding:1em; max-width:600px; margin:auto;}
	.twin-container.inline .input.twin:first-of-type {margin-bottom:0.5em;}
	.twin-container.inline .input label {display:inline-block; width:50%; padding-right:1em;}
	.twin-container.inline .input input[type="text"] {width:4em;}
	}
	
@media screen and (max-width:480px){
	.gallery div{float:none; width:100%; padding:0.5%;}
	}