/* 
    Created on : 5-nov-2016, 22.42.52
    Author     : daniele cuder per Clyco Srl
*/
html,body{font-size: 16px;margin:0;}
body{
/*    padding-top: 80px;*/
    padding-bottom: 30px;
    font-family: 'Roboto',sans-serif;
    color: #444;
}
h1{
    
}
h2{
	margin-bottom: 0.5rem;
	font-family: 'Great Vibes',cursive;
	font-size: 2rem;
	font-weight: normal;
	color: hsl(40,30%,35%);
}
a, a:active, a:visited{color:hsl(40,30%,35%);}
a:hover{color:#888;}
header{
    position: fixed;
    top: 0;
    width:100%;
    height: 80px;
/*    background-color: #fff;*/
    z-index: 9;
}
header #brand{
    position:fixed;
		z-index: 999;
    top:0.5rem;
    left:2rem;
    font-family: 'Great Vibes',cursive;
    font-size: 3rem;
    color: #111;
    text-shadow: 1px 1px 5px #ccc;
}
header #slogan{
    position:fixed;
    top: 2rem;
    left:20rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #fff;
    text-shadow: 1px 1px 1px hsl(40,30%,35%);
}
footer{
    position: fixed;
    bottom:0;
    width: 100%;
    background-color: hsl(40,30%,75%);
    padding: 5px;
    text-align: center;
    border-top: solid 1px hsl(40,30%,50%);
    font-size: 0.8rem;
}
#menu{display: none;}
/* GRID SYSTEM */
.center-div{
	text-align: center;
	margin: 0 auto;
}
.flex{
    display: flex;
    align-items: center;
    width: 100%;
}
.clear{clear: both;}
.col-1{
    width:10%;
    float: left;
}
.col-2{
    width:20%;
    float: left;
}
.col-3{
    width:30%;
    float: left;
}
.col-4{
    width:40%;
    float: left;
}
.col-5{
    width:50%;
    float: left;
}
.col-6{
    width:60%;
    float: left;
}
.col-8{
    width:80%;
    float: left;
}

.padded-1{padding:1rem;}
.padded-2{padding:2rem;}
.smaller-p{
	font-size:0.85rem;
	line-height: 1.8rem;
}
.text-center{text-align: center;}

/* Gestione pagina */
.page{
	height: 100vh;
	position: relative;
}

#chi-siamo p, #servizi p{
	line-height: 150%;
	padding-right: 1rem;
}

#chi-siamo .col-4, #servizi .col-4, #contatti .col-4{
	border-right: dashed 1px hsl(40,30%,75%);
}
#chi-siamo .col-6, #servizi .col-6, #contatti .col-6{
	padding-left: 1rem;
}
.foto-interno, .foto-esterno{
	width: 100%;
	max-width: 100%;
	box-shadow: 1px 1px 10px #888;
}
.credit-cards{
	position: absolute;
	bottom: 40px;
	width: 100%;
	text-align: center;
}
.pan-interno, .pan-esterno{
	width: 97vw;
	height: 96vh;
	border: none;
}

#contatti .col-4 p{
	margin: 0 0 2rem 0;
	font-size:1.5rem;
	font-weight:100;
}
#contatti .col-4 p + p{
	margin: -1.5rem 0 2rem 0;
	font-size:1rem;
}
#contatti h2{position: relative;}
#contatti h2 .fa{
	position: absolute;
	left:3rem;
}
/* MENU */
nav{
    position: fixed;
    top:0;
    width: 100%;
    background-color: hsl(40,30%,85%);
    padding: 5px;
    text-align: right;
    border-bottom: solid 1px hsl(40,30%,65%);
}
nav ul{
	height: 1.5rem;
}
nav ul li{
	padding: 0.3rem 1rem;
}
nav ul, nav ul li{
    display: inline;
    list-style: none;
}

nav ul a, nav ul a:active, nav ul a:visited, nav a{
    color: hsl(40,30%,25%);
		font-size:0.8rem;
    text-decoration: none;
}
nav ul li:hover, nav ul li.active{
	background-color: hsl(40,30%,35%);
}
nav ul li:hover a, nav ul li.active a{color: #fff;}


/* OWL Carousel */
#owl-demo .owl-item img{
    display: block;
    width: 100%;
    height: auto;
}
.owl-description{
    position: absolute;
    top: 120px;
    left: 2rem;
    z-index: 999;
    font-family: 'Great Vibes';
    font-size: 2rem;
    color: hsla(0,0%,100%,0.8);
}

.owl-prev{
	position: absolute;
	top: 48%;
	left: 10px;
	
}
.owl-next{
	position: absolute;
	top: 48%;
	right: 10px;
}
.owl-theme .owl-controls .owl-buttons div{
	opacity:1;
	font-size:1.5rem;
	background-color: hsla(0,0%,50%,0.3);
}
.owl-theme .owl-controls .owl-buttons div:hover{
	background-color: hsla(0,0%,50%,0.8);
}

/* ***********************************************************************	*/

/*									MEDIA QUERY																							*/

/* ***********************************************************************	*/

@media (max-width: 990px) {
	header #brand{
		left: 1rem;
		font-size: 2rem;
	}
	header #slogan{
		top: 3rem;
		left: 2rem;
		font-size: 1rem;
	}
	.padded-2{padding:1rem;}
	#chi-siamo .col-6, #servizi .col-6, #contatti .col-6{padding:0;}
	nav, footer{
		width: 100vw;
	}
	#chi-siamo .col-4, #servizi .col-4{
		border: none;
	}
	#chi-siamo p, #servizi p{
		padding-right: 0;
	}

	#menu{
		display: block;
		margin-right: 1rem;
		font-size: 1.2rem;
	}
	.flex{
		display: block;
		width: 100vw;
	}
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,.col-7, .col-8{
		display: block;
		width: 100%;
		float:left;
		padding: 0 !important;
	}
	.col-4 p{
		padding: 1rem;
	}
	
	#owl-demo{
		margin-top: 25vh;
	}
	.pan-interno{width: 100%;display: block;}
	nav{z-index: 99;}
	nav ul{
		position: absolute;
		top: 1.5rem;
		right: 0;
		width: 100%;
		height: auto;
		display: none;
		background-color: hsla(40,30%,85%,0.8);
	}
	nav ul li{
		display: block;
		width: auto;
	}
	nav ul li:hover a{
		color: #aaa;
	}
	nav ul li:hover, nav ul li.active{
		background-color: hsl(40,30%,35%);
	}
	nav ul li:hover a, nav ul li.active a{color: #fff;}
}

.credit-cards{display:block;}
.no-responsive{display:none;}