body{
	//overflow: hidden;
}

body,p,h1,h2,h3,h4,h5,div{
	margin: 0px;
	padding: 0px;
}



.full-witdh{


}

.page-size{
	margin-left: auto;
	margin-right: auto;
	width:1024px;
}


section{
	/*margin-left: auto;
	margin-right: auto;
	width:1024px;
	background-color: white;*/
}

section.full-page{
	width: 100%;
	background-color: white;
}

section .body{
	margin-left: auto;
	margin-right: auto;
	width:100%;
}

section > .title{
	padding-top:64px;
	padding-bottom:64px;
	text-align: center;
	font-size: 30px;
}

@media only screen and (min-width: 1024px) {
	section .body{
		width:1024px;
	}
}

/* =======================================================
 Fonts
=========================================================*/
p,h1,h2,h3,h4,h5,div{
	font-family:Montserrat;
	color: #303036;
}

/* =======================================================
 body
=========================================================*/



/* =======================================================
 Prodotti home
=========================================================*/

section.prodotti{
	padding-top:64px;
	padding-bottom:64px;
	background-color: #f0f4f8;
}

section.prodotti > .title{

	padding-top:64px;
	padding-bottom:64px;
	text-align: center;
	font-size: 30px;
}

section.prodotti > .body{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;

}

.card{
	width:300px;
	border:1px solid #d4d4e1;
	border-radius:10px;
	overflow: hidden;
	margin-top:16px;
	margin-bottom:16px;
	background-color: white;
}

.card:hover{
	box-shadow: 2px 4px 20px 1.4px rgba(45, 45, 45, 0.13);
}

.card > .container{
	text-decoration: none;
	background-color: white;
}

.card > .container > .image{
	width: 100%;
	height: 230px;
	background-color: green;
	background-position: center;
	background-repeat: no-repeat;
	background-origin: border-box;
	background-size: cover;
}

.card > .container > .text{
	background-color: white;
	padding-bottom: 16px;
	min-height: 102px;
}

.card > .container > .text > p{
	text-align: center;

}

.card > .container > .text > h3{
	padding:16px 0px 16px 0px;
	text-align: center;
	text-transform: uppercase;
	display: flex;
	//min-height:50px;
	justify-content: center;

	align-items: center;

}

@media only screen and (min-width: 480px) {

	section.prodotti > .body{
		display: flex;
		flex-direction: row;
		justify-content: space-between;

	}

}

/* =======================================================
 Text banner
=========================================================*/
section.text-banner{
	padding-top:64px;
	padding-bottom:64px;
	background-color: white;
}

section.text-banner > .body > p{
	line-height: 30px;
	text-align: center;
	padding-left: 16px;
	padding-right: 16px;
}

section.text-banner > .title{
	padding-bottom:42px;
	color: #186adc;
}


@media only screen and (min-width: 1024px) {
	section.text-banner > .body > p{

		padding-left: 0px;
		padding-right: 0px;
	}
}
/* =======================================================
 Hero
=========================================================*/
.hero{

}

.hero .container{
	height: 600px;
}

.hero > .container > .image{
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
}

/* =======================================================
 Header
=========================================================*/

.header-spacer{
	width: 100%;
	//height: 52px;
}
.header{
	width: 100%;
	background-color: white;
	box-shadow: 0px 0px 14px 0px rgba(77,82,94,0.15);
	padding-top:16px;
	padding-bottom: 16px;
	//position: fixed;
	position: sticky;
	top: 0px;
	z-index: 10;
}

.header-container{
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: block;
}



.logo{


	width: 50px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;

}

.logo > svg{
	width: 100%;
	height: 100%;
}

.header .menu-icon{
	display: inline-flex;
	width: 48px;
}

.menu-icon > svg{
	fill:#186adc;

}
.menu-icon {

	position: absolute;
	left: 8px;
	top: 17px;
}

.header ul{

	display: none;
	margin: 0px;
	padding: 0px;

	flex-direction: column;
}




.header ul > li{
	list-style-type: none;

}
.header a{
	color: black;
	padding: 16px;
	text-decoration: none;
	display: block;
}


.header a:visited{
	color: #303036;
	background-color: white;
}

.header a.active{
	color: #186adc;
	background-color: white;
}

.header a:hover{
	color: #186adc;
	background-color: white;

}


.header-menu > li > .submenu{
	display: block;
	position: absolute;
	background-color: white;
	display: none;
	box-shadow: 0px 0px 14px 0px rgba(77,82,94,0.15);
}

.header-menu > li:hover > .submenu{
	display: block;
}

.header-menu.open{
	display: block;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: white;
	top: 0px;
	left: 0px;
}

#menu-button-close > svg{
	height: 50px;
}
#menu-button-close{
	text-align: center;
	padding-top: 16px;
	border-bottom: 1px solid gray;
	padding-bottom: 16px;
}

#menu-button-close-icon{
	float: right;
	position: absolute;
	right: 8px;
	top: 20px;
}

@media only screen and (min-width: 1024px) {



	.header-container{
		display: flex;
		flex-flow: row;
		justify-content: center;
	}


	.header .menu-icon{
		display: none;
	}

	.header ul{
		display: flex;
		margin: 0px;
		padding:0px;
		float: right;
		flex-direction: row;
	}

	.header-container{
		width:1024px;
	}


	.logo{
		width:50px;
		height: 100%;
		margin-right: auto;
		margin-left: 0px;
	}

	.header-menu.open{
		display: flex;
		position: relative;
		width: auto;
		height: auto;
	}
/*
	.header-menu.open{
		display: block;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: white;
		top: 0px;
		left: 0px;
	}*/


	#menu-button-close{
		display: none;
	}

}






/* =======================================================
 Footer
=========================================================*/
.footer{

	width:100%;
	background: #303036;


}

.footer .container{
	margin-left: auto;
	margin-right: auto;

	width:100%;
}

.footer .footer-main{

	height: 200px;
	border-top: 1px solid #d4d4e1;


}

.footer .footer-bottom{

	border-top: 1px solid #d4d4e1;
	padding:0px 16px 0px 16px;
}

.footer .footer-bottom p{
	padding-top:16px;
	padding-bottom: 16px;
	color:#d4d4e1;
}

@media only screen and (min-width: 1024px) {
	.footer .container{
		width:1024px;
	}

	.footer .footer-bottom{

		padding:0px;
	}
}


/* =============================================================================
 Page azienda
==============================================================================*/
.section-dettagli-azienda{


}


.section-dettagli-azienda > .body{
	width:100%;
}


.section-dettagli-azienda > .body > .title{
	padding-top: 64px;
	padding-bottom: 64px;
	text-align: center;
	font-size: 30px;
	padding-bottom: 42px;
	color: #186adc;
}



.page-azienda{
	display:flex;
	flex-direction: column;
}

.page-azienda.reverse{
	flex-flow: column-reverse;
}

.page-azienda > .image{
	width:100%;
	flex-basis: 50%;
}
.page-azienda > .image > img{
	width:100%;

}

/*
.page-azienda > .image{
	width:400px;
	height: 400px;
	min-width: 600px;
	flex-basis: 400px;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}*/

.page-azienda > .text{
	flex-basis: 50%;
	padding-left: 32px;
	padding-right: 32px;
	box-sizing: border-box;
	display: flex;
	flex-flow: column;

	justify-content: center;
}


.page-azienda > .text > p{
	padding-top: 16px;
	padding-bottom: 16px;
	line-height: 25px;
	letter-spacing: 1px;
}


@media only screen and (min-width: 1200px) {

	.page-azienda > .image{
		width:50%;
		flex-basis: 50%;
	}

	.page-azienda{
		display:flex;
		flex-direction: row;

	}

	.page-azienda.reverse{
		flex-flow: row;
	}


}

/* =============================================================================
Slideshow
==============================================================================*/
section.slideshow{
	height: 600px;
	width: 100%;

}
/* Slideshow container */
.slideshow-container {
	//max-width: 1000px;
	width:100%;
	height: 100%;
	position: relative;
	margin: auto;
}

.slideshow-image{
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;

}

.slideshow-text-background{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color:     #ffffff94;

}
.slideshow-text-background > h1{
	font-size: 50px;
	color:#186adc;
	text-align: center;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.caption-text {
	color: #f2f2f2;
	font-size: 15px;
	padding: 8px 12px;
	position: absolute;
	bottom: 8px;
	width: 100%;
	text-align: center;
	display:none;
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/* The dots/bullets/indicators */
.dot {
	cursor: pointer;
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
	-webkit-animation-name: fade;
	-webkit-animation-duration: 1.5s;
	animation-name: fade;
	animation-duration: 1.5s;
}

@-webkit-keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}

@keyframes fade {
	from {opacity: .4}
	to {opacity: 1}
}


/* ===========================================================================
 WALL
===============================================================================*/

.wall-under-construction{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 11;
	background: #ffffff9c;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.wall-under-construction > h2{
	font-size: 64px;
}



/* ===========================================================================
 BANNER LIST PRODOTTI
===============================================================================*/
.banner-list-prodotti{
	width:100%;
	height:300px;

}

.banner-list-prodotti > div{
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: contain;


}

.banner-list-prodotti > div > div{
	width: 100%;
	height: 100%;
	background-color: #ffffff8a;
	display: flex;
	justify-content: center;
	align-items: center;

}

.banner-list-prodotti > div > div > h2{
	padding:24px;
	font-size: 52px;
	color: #186adc;
	text-transform: uppercase;

}



/* ===========================================================================
	CONTATTI
===============================================================================*/
/*
.gmap_canvas {
	overflow:hidden;
	background:none!important;
	height:100%;
	width:100%;
}


.mapouter{
	position:relative;
	text-align:right;
	height:100%;
	width:100%;
}*/


.section-contatti{
	margin-top:64px;
	margin-bottom: 64px;
}
.card-contatti-container{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	row-gap: 32px;
	column-gap: 32px;
}

.card-contatto{
	border: 1px solid #186adc;
	width: 300px;
	height: 200px;
	border-radius: 10px;
	text-align: center;
	text-decoration: none;
	color: black;
}
.card-contatto:hover{
	box-shadow: 2px 4px 20px 1px #186adc;
	border: none;
}


.card-contatto > .image{
	padding-top:32px;
	padding-bottom:32px;
}
.card-contatto > .image > svg{
	fill:#186adc;
}
.card-contatto > p{
	//font-weight: bold;
}
.card-contatto > a{
	text-decoration: none;
	color: black;
}
.card-contatto:hover > p{
	color:#186adc;
}
.card-contatto:hover > a{
	color:#186adc;
}

.section-contatti{

}

.form-map-container{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;

}

.form-container{
	width: 100%;
	padding:32px;
	box-sizing: border-box;
}

.form-input{
	width: 100%;
	margin-bottom: 32px;
}

.form-input > label{
	display: block;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.form-input > input{
	padding: 8px 4px 8px 4px;
	box-sizing: border-box;
	width: 100%;
}

.form-input > textarea{
	padding: 8px 4px 8px 4px;
	box-sizing: border-box;
	width: 100%;
}

.form-container > button{
	width: 100%;
	padding-top: 8px;
	padding-bottom: 8px;
	text-transform: uppercase;
}


.contatti-maps > .body > iframe{
	height: 500px;
	width: 100%;
}


.contatti-form > .body > h2{
	font-size: 36px;
	text-align: center;
	text-transform: uppercase;
	color: #186adc;
}
.contatti-form{
	padding-top:64px;
}

@media only screen and (min-width: 1200px) {
	.form-container{
		width: 50%;
	}
/*
	.map-container{
		width: 50%;
	}*/

}