/*
	Theme Name: Medea Costruzioni
	Description: Custom Theme for Medea Costruzioni
	Version: 1
	Author: Max Cavalli Cocchi
	Author URI: http://max.cavallicocchi.it
*/

/* GLOBAL */

* {
	margin: 0px;
	padding: 0px;
	font-size: 100%;
}

body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #676767;
	-webkit-text-smoothing: antialiased;
}

.row {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1440px;
	clear: both;
}

.row.fluid {
	max-width: 100%;
}

h1.section-title {
	margin-top: 50px;
	margin-bottom: 50px;
	font-family: 'Klavika', sans-serif;
	font-size: 30px;
	line-height: 100%;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-weight: 400;
	color: #000;
	text-align: center;
}

.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/loader.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 1000000;
}

.popup-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .85);
	z-index: 100;
	display: none;
}

	.popup-container .popup {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		max-width: calc(100% - 20px);
		max-height: calc(100% - 20px);
		margin: auto;
		display: inline-block;
		transform: scale(0.01,0.01);
		transition: all 0.3s ease-out;
		box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 1);
	}

	.popup-container .popup.active {
		transform: scale(1,1);
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 1);
	}

	.popup-container .popup-close-btn {
		position: absolute;
		top: 20px;
		right: 20px;
		width: 30px;
		height: 30px;
		cursor: pointer;
		transition: all 0.3s ease-out;
		opacity: 1;
	}

	.popup-container .popup-close-btn:hover {
		opacity: .5;
	}

/* HEADER */

.header {
	position: fixed;
	height: 145px;
	background-image: url(../images/header_bg.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-repeat: no-repeat;
	z-index: 10;
	transition: all 0.5s ease-in-out;
}

@media (max-width: 450px) {
	.header {
		display: none;
	}
}

.header.sticky {
	height: 114px;
}

	.header .logo {
		position: absolute;
		top: 17px;
		height: 59px;
		left: 0;
		right: 0;
		margin: 0 auto;
		transition: all 0.5s ease-in-out;
	}

	.header.sticky .logo {
		height: 40px;
	}

	.header .main-menu {
		position: absolute;
		top: 103px;
		margin: 0 auto;
		left: 0;
		right: 0;
		height: 41px;
		text-align: center;
		transition: all 0.5s ease-in-out;
	}

	.header.sticky .main-menu {
		top: 73px;
	}

		.header .main-menu .menu-item {
			margin-right: 85px;
			font-family: 'Klavika', sans-serif;
			font-size: 14px;
			line-height: 100%;
			font-weight: 400;
			color: #fff;
			letter-spacing: 3px;
			text-transform: uppercase;
			display: inline-block;
			cursor: pointer;
			transition: all 0.3s linear;
		}

		@media (max-width: 960px) {
			.header .main-menu .menu-item {
				margin-right: 40px;
			}
		}

			.header .main-menu .menu-item:last-of-type {
				margin-right: 0;
			}

			.header .main-menu .menu-item:hover,
			.header .main-menu .menu-item.active {
				color: #ff0000;
			}

		.header .main-menu .main-menu-selection {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100px;
			height: 3px;
			background-color: #ff0000;
			transition: all 0.3s ease-in-out;
		}


/* HOME */

section.home {
	height: 690px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

@media (max-width: 960px) {
	section.home {
		height: 400px;
	}
}

@media (max-width: 450px) {
	section.home {
		height: 300px;
	}
}


/* CHI SIAMO */

section.chi-siamo p {
	text-align: center;
	margin-bottom: 20px;
}

section.chi-siamo .servizi-container {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

@media (max-width: 450px) {
	section.chi-siamo .servizi-container {
		display: block;
	}
}

	section.chi-siamo .servizi-container .servizio {
		position: relative;
		width: 16.666%;
		padding: 0 10px;
		box-sizing: border-box;
		min-height: 150px;
		display: inline-block;
		text-align: center;
	}

	@media (max-width: 450px) {
		section.chi-siamo .servizi-container .servizio {
			width: 100%;
			float: left;
			clear: both;
			min-height: 0;
			margin-bottom: 20px;
		}
	}


		section.chi-siamo .servizi-container .servizio .servizio-icon {
			margin-bottom: 5px;
		}


		section.chi-siamo .servizi-container .servizio .servizio-name {
			font-family: 'Klavika', sans-serif;
			font-size: 14px;
			line-height: 100%;
			font-weight: 600;
			color: #000;
			text-transform: uppercase;
		}

section.chi-siamo .certificazioni-container {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

@media (max-width: 450px) {
	section.chi-siamo .certificazioni-container {
		display: block;
	}
}

	section.chi-siamo .certificazioni-container .certificazione {
		position: relative;
		width: 16.666%;
		padding: 0 10px;
		box-sizing: border-box;
		min-height: 150px;
		display: inline-block;
		text-align: center;
	}

	@media (max-width: 450px) {
		section.chi-siamo .certificazioni-container .certificazione {
			width: 100%;
			float: left;
			clear: both;
			min-height: 0;
			margin-bottom: 20px;
		}
	}

		section.chi-siamo .certificazioni-container .certificazione .certificazione-icon {
			margin-bottom: 5px;
			cursor: pointer;
			transition: all 0.3s ease-out;
		}

			section.chi-siamo .certificazioni-container .certificazione .certificazione-icon:hover {
				margin-top: -10px;
				margin-bottom: 15px;
			}


		section.chi-siamo .certificazioni-container .certificazione .certificazione-name {
			font-family: 'Klavika', sans-serif;
			font-size: 14px;
			line-height: 100%;
			font-weight: 600;
			color: #000;
			text-transform: uppercase;
		}


/* ULTIMI INTERVENTI */

section.ultimi-interventi {
	background-image: url(../images/ultimiinterventi_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 75px;
	padding-bottom: 50px;
	text-align: center;
}

	section.ultimi-interventi .interventi-container {
		display: inline-block;
	}

		section.ultimi-interventi .interventi-container .intervento {
			position: relative;
			float: left;
			width: calc(33.333% - 20px);
			padding-top: 22.222%;
			margin: 10px;
			background-size: cover;
			background-position: center center;
		}

		@media (max-width: 768px) {
			section.ultimi-interventi .interventi-container .intervento {
				width: calc(50% - 20px);
				padding-top: 33.222%;
			}
		}

		@media (max-width: 450px) {
			section.ultimi-interventi .interventi-container .intervento {
				width: calc(100% - 20px);
				padding-top: 43.222%;
			}
		}

			section.ultimi-interventi .interventi-container .intervento .hover {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, .85);
				display: flex;
				text-align: center;
				align-items: center;
				font-family: 'Klavika', sans-serif;
				font-size: 14px;
				line-height: 100%;
				font-weight: 600;
				text-transform: uppercase;
				color: #fff;
				opacity: 0;
				transition: opacity 0.3s linear;
				cursor: pointer;
			}

				section.ultimi-interventi .interventi-container .intervento .hover:hover {
					opacity: 1;
				}


/* CONTATTI */

section.contatti #map{
	position: relative;
	width: 100%;
	height: 310px;
	margin-bottom: 50px;
	clear: both;
}

section.contatti .col-9 {
	float: left;
	width: 75%;
	padding: 0 10px;
	box-sizing: border-box;
}

@media(max-width: 960px) {
	section.contatti .col-9  {
		width: 100%;
	}
}

	section.contatti .col-9 .contatti-intro {
		margin-bottom: 30px;
	}

	section.contatti .col-9 form br {
		display: none;
	}

	section.contatti .col-9 .textfield-3 {
		position: relative;
		float: left;
		padding: 12px;
		border: 1px solid #d2d2d2;
		box-sizing: border-box;
		width: calc(33.333% - 10px);
		margin-right: 15px;
		margin-bottom: 15px;
	}

	@media(max-width: 450px) {
		section.contatti .col-9 .textfield-3 {
			width: 100%;
			margin-right: 0;
		}
	}

	section.contatti .col-9 .textfield-3[name="Telefono"] {
		margin-right: 0;
	}

	section.contatti .col-9 .textarea {
		position: relative;
		float: left;
		height: 180px;
		padding: 12px;
		border: 1px solid #d2d2d2;
		box-sizing: border-box;
		width: 100%;
		margin-bottom: 15px;
	}

	section.contatti .col-9 .send-btn {
	  border-radius: 3px;
	  background-image: -moz-linear-gradient( 90deg, rgb(118,0,0) 0%, rgb(255,6,6) 99%);
	  background-image: -webkit-linear-gradient( 90deg, rgb(118,0,0) 0%, rgb(255,6,6) 99%);
	  background-image: -ms-linear-gradient( 90deg, rgb(118,0,0) 0%, rgb(255,6,6) 99%);
	  box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.5),inset 0px 1px 2px 0px rgba(255, 255, 255, 0.004);
	  border: none;
	  width: 134px;
	  height: 34px;
	  position: relative;
	  float: left;
	  font-size: 16px;
	  color: #fff;
	  text-transform: uppercase;
	  letter-spacing: 4px;
	  font-weight: 700;
	  transition: all 0.2s linear;
	  cursor: pointer;
	}

	@media(max-width: 450px) {
		section.contatti .col-9 .send-btn  {
			margin-left: auto;
			margin-right: auto;
			display: inherit;
			float: none;
		}
	}

	section.contatti .col-9 .send-btn:hover {
		background-image: -moz-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(25,25,25) 99%);
	  background-image: -webkit-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(25,25,25) 99%);
	  background-image: -ms-linear-gradient( 90deg, rgb(0,0,0) 0%, rgb(25,25,25) 99%);
	}

	.wpcf7-not-valid {
		border-color: #fb0606 !important;
	}

	.wpcf7-not-valid-tip, .screen-reader-response {
		display: none;
	}

	.wpcf7-response-output {
		float: left;
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		background-color: #fb0606;
		text-align: center;
		font-weight: 700;
		text-transform: uppercase;
		color: #fff;
		letter-spacing: 2px;
		margin-top: 20px;
	}

	.wpcf7-response-output.wpcf7-mail-sent-ok {
		background-color: #356c2e;
	}

	.wpcf7-display-none {
		display: none;
	}


section.contatti .col-3 {
	float: left;
	width: 25%;
	padding: 0 10px;
	box-sizing: border-box;
}

@media(max-width: 960px) {
	section.contatti .col-3  {
		width: 100%;
		margin-top: 40px;
		text-align: center;
	}
}

/* FOOTER */

footer.row.fluid {
	position: relative;
	clear: both;
	margin-top: 50px;
	padding: 15px 25px;
	box-sizing: border-box;
	background-color: #282a2b;
	font-size: 12px;
	color: #8c8989;
	display: inline-block;
}

@media(max-width: 768px) {
	footer.row.fluid {
		text-align: center;
	}
}