@charset "utf-8";

/* RESET */
html, body, footer{width: 100%; height: 100%; margin: 0; padding: 0; border: none; font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;}
section{margin: 0; padding: 0;-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
ul{width: 100%; height: 100%; margin: 0; padding: 0; list-style-type: none;}
iframe{display: block; width: 100%; height: 100%; border: none;}
input, textarea{box-sizing: border-box;}

/* VARS */
:root {
  --color-yellow: #FCBF00;
  --color-dark-grey: #666666;
  --blue: #5587b4;
}

/* font´s */
h1{margin: 0; padding: 0; font-size: 38px; line-height: 45px; font-weight: 800; text-transform: uppercase;}
h2{margin: 0; padding: 0; font-size: 24px; line-height: 33px; font-weight: 800; text-transform: uppercase; color: #494949;}
h3{margin: 0; padding: 0; font-size: 24px; line-height: 30px; font-weight: 500;}

p{font-size: 16px; line-height: 23px; font-weight: 500; color: rgb(102, 102, 102);}

/* Span classes */
.yellow{color: var(--color-yellow) !important;}
.strong{font-weight: bold;}

/* Grid limits */
.grid_container{
	display: block;
	box-sizing: border-box;
	padding: 0 18px;
	width: 100%;
	height: 100%;
}


/* MOBILE VERSION */

/* NAV */
#contact_bar{
	width: 100vw;
	height: 31px;
	position: fixed;
	top: 0;
	z-index: 999999;
	background-color: #000000;
}
	#contact_bar ul{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
		#contact_bar li{
			margin-right: 13px;
		}
		#contact_bar i{
			margin-right: 3px;
		}
		#contact_bar a{
			font-size: 12px;
			line-height: 22px;
			font-weight: 600;
			color: #FFFFFF;
			text-decoration: none;
		}
nav{
	width: 100vw;
	height: 102px;
	position: fixed;
	top: 31px;
	background-color: #FFFFFF;
	z-index: 999999;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
	nav .grid_container{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px 0 14px;
	}
	nav #logo{
		height: 50%;
		object-fit: contain;
		object-position: center left;
	}
	nav #opener{
		font-size: 1.5em;
	}
	nav ul{
		display: none;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-end;
	}
		nav li{
			line-height: 102px;
			margin-right: 22px;
		}
		nav li a{
			text-decoration: none;
			font-size: 17px;
			font-weight: 600;
			letter-spacing: 1px;
			color: rgba(0, 0, 0, 0.6);
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
			transition: all 0.4s ease-in-out;
		}
			nav li a:hover{
				opacity: 0.7;
			}

/* Sections ********************************************************************************************************/
/* HEAD */
#head{
	height: 100vh;
	overflow: hidden;
	position: relative;
}
	#head video{
		min-width: 100%;
		min-height: 100%;
	}
	#head #content{
		position: absolute;
		z-index: 999998;
		padding-top: 102px;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

		text-align: center;
		color: #FFFFFF;
	}
		#content h1, #content h3{
			margin-bottom: 10px;
			width: 80vw;
		}
		#content a{
			display: block;
			width: 101px;
			height: 50px;
			margin: 50px auto 0 auto;
			border: 2px solid rgba(255, 255, 255, 0.6);
			border-radius: 3px;

			font-family: "Oswald", Helvetica, Arial, Lucida, sans-serif;
			font-size: 20px;
			line-height: 50px;
			font-weight: 500;
			color: #FFFFFF;
			text-decoration: none;

			-webkit-transition: all 0.2s;
			-moz-transition: all 0.2s;
			transition: all 0.2s;
		}
			#content a:after{
				display: none;
				content: attr(data-icon);
				opacity: 0;
				margin-left: -20px;
			}
			#content a:hover{
				width: 136px;
				background-color: rgba(255, 255, 255, 0.2);
				border-color: transparent;
				letter-spacing: 3px;
			}
				#content a:hover:after{
					display: inline-block;
					margin-left: 6px;
					opacity: 1;
				}
/* FEATURES */
#features{
	text-align: center;
	padding: 28px 0 14px 0;
}
	#features ul{
		display: flex;
		margin: 54px 0 28px 0;
		flex-direction: row;
		flex-wrap: wrap;
	}
		#features li{
			width: 100%;
			text-align: left;
			margin-bottom: 28px;
		}
			#features i{
				font-size: 34px;
				vertical-align: -11%;
				margin-right: 15px;
				color: var(--color-yellow);
			}
			#features h2{
				display: inline;
				padding-left: 15px;
				border-left: 1px solid rgba(102, 102, 102, 0.6);
			}
/* RENTAL */
#rental{
	text-align: center;
	padding: 28px 0 14px 0;
	background-color: #000000;
}
	#rental h1{
		color: #FFFFFF;
	}
	#rental ul{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 54px 0 28px 0;
	}
		#rental li{
			width: 100%;
			margin-bottom: 48px;
		}
			#rental img{
				width: 90%;
				height: 80%;
				margin-bottom: 30px;
				object-fit: cover;
			}
			#rental h2{
				color: var(--color-yellow);
			}
/* PROTOCOLO */
#protocolo{
	text-align: center;
	padding: 28px 0 14px 0;
	background-color: var(--color-yellow);
}

	#protocolo h1 {
		margin-bottom: 40px;
	}
	#protocolo ul{
		display: flex;
		flex-direction: column;
		margin: 54px 0 28px 0;
	}
		#protocolo li {
			width: 100%;
		}
		#protocolo img {
			width: 100%;
			object-fit: cover;
			border-radius: 20px;
			box-shadow: 2px 2px 2px #000;
		}
		#protocolo p {
			color: #000000;
			text-align: left;
		}
		#protocolo a {
			color: var(--blue);
		}
		#protocolo #ul_prot {
			display: block;
			height: auto;
			text-align: left;
			margin: 12px 40px;
			padding: 12px 20px;
			list-style-type: circle;
		}
/* PORTFOLIO */
#portfolio{
	padding: 58px 0 54px 0;
}
	#portfolio .grid_container{
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
		#portfolio #info{
			width: 100%;
		}
			#portfolio #info h1{
				color: #494949;
			}
			#portfolio #info a{
				display: block;
				width: 117px;
				height: 50px;
				background-color: #2b2c2a;
				margin: 50px 0;
				padding-left: 20px;
				border: 2px solid #2b2c2a;
				border-radius: 3px;

				font-family: "Oswald", Helvetica, Arial, Lucida, sans-serif;
				font-size: 17px;
				line-height: 50px;
				font-weight: 500;
				letter-spacing: 2px;
				color: var(--color-yellow);
				text-transform: uppercase;
				text-decoration: none;

				-webkit-transition: all 0.2s;
				-moz-transition: all 0.2s;
				transition: all 0.2s;
			}
				#portfolio #info a:after{
					display: none;
					content: attr(data-icon);
					opacity: 0;
					margin-left: -15px;
				}
				#portfolio #info a:hover{
					width: 136px;
					background-color: rgba(255, 255, 255, 1);
					border: 2px solid #000000;
					padding-left: 12px;
					color: #000000;
				}
					#portfolio #info a:hover:after{
						display: inline-block;
						margin-left: 6px;
						opacity: 1;
					}
		#portfolio #videoslider{
			width: 100%;
			height: 55vh;
		}
			#videoslider iframe{
				width: 100%;
				height: 100%;
			}
			.swiper-container {
				width: 100%;
				height: 600px;
			}
			.swiper-slide {
				background-size: cover;
				background-position: center;
			}
			.gallery-top {
				height: 80%;
				width: 100%;
			}
			.gallery-thumbs {
				height: 20%;
				box-sizing: border-box;
				padding: 10px 0;
			}
			.gallery-thumbs .swiper-slide {
				width: 25%;
				height: 100%;
				opacity: 0.4;
			}
			.gallery-thumbs .swiper-slide-thumb-active {
				opacity: 1;
			}
/* CONTACT */
	#contact{
		background-color: #2b2c2a;
		padding: 58px 0 54px 0;
	}
		#contact .grid_container{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: top;
		}
		#contact_info{
			color: rgba(255, 255, 255, 0.8);
		}
			#contact h1{
				color: white;
			}
			#contact h2{
				color: white;
			}
			#contact_info #contact_links{
				height: auto;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: top;
				margin: 30px 0 60px 0;
			}
				#contact_links li{
					margin: 20px 0;
				}
				#contact_links i{
					color: var(--color-yellow);
					margin-right: 15px;
				}
				#contact_links a{
					color: rgba(255, 255, 255, 0.8);
					text-decoration: none;
					-webkit-transition: 0.5s;
					transition: 0.5s;
				}
					#contact_links a:hover{
						color: var(--color-yellow);
					}
		#form_container{
			margin: 30px 0 40px 0;
		}
			.flex-outer,
				.flex-inner {
				  list-style-type: none;
				  padding: 0;
				}

				.flex-outer {
				  max-width: 100%;
				}

				.flex-outer li{
				  display: flex;
				  flex-wrap: wrap;
				  align-items: center;
				}

				.flex-outer > li:not(:last-child) {
				  margin-bottom: 20px;
				}

				.flex-outer li label,
				.flex-outer li p {
				  padding: 8px;
				  font-weight: 300;
				  letter-spacing: .09em;
				  text-transform: uppercase;
				}

				.flex-outer > li > label,
				.flex-outer li p {
				  flex: 1 0 5px;
				      font-family: "Open Sans", Helvetica, Arial, Lucida, sans-serif;
				      letter-spacing: 0;
				      text-transform: none;
				}
				.flex-outer > li > label > a {
					color: #FFFFFF;
				}

				.flex-outer > li > label + *,
				.flex-inner {
				  flex: 1 0 280px;
				}

				.flex-outer li p {
				  margin: 0;
				}

				.flex-outer li input:not([type='checkbox']),
				.flex-outer li textarea {
					width: 100%;
				  padding: 15px;
				  border: none;
				}

				.flex-outer li button {
				  margin-left: auto;
				  margin-bottom: 80px;
				  padding: 8px 16px;
				  border: none;
				  background: #FF8533;
				  color: #060606;
				  text-transform: uppercase;
				  letter-spacing: .09em;
				  border-radius: 2px;
				  transition: .5s;
				}
					.flex-outer li button:hover {
						background-color: #060606;
						color: #FF8533;
					}

				/* VLIDATION */
				/* This is our style for the invalid fields */
					input.invalid{
					  border-color: #900;
					  background-color: #FDD;
					}

					input:focus.invalid {
					  outline: none;
					}

					/* This is the style of our error messages */
					.error {
					  width  : 100%;
					  padding: 0;
					 
					  font-size: 80%;
					  color: white;
					  background-color: #900;
					  border-radius: 0 0 5px 5px;
					  box-sizing: border-box;
					}

					.error.active {
					  padding: 0.3em;
					}	

			#form_message{
				display: none;
				position: fixed;
				z-index: 998;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, 0.3);
				color: #000;
			}
				#form_message .content{
					display: flex;
					justify-content: center;
					align-items: center;
					z-index: 999;
					position: fixed;

					background-color: #FEFEFE;
					margin: 0 auto;
					top: calc(50% - 10vh);
					left: calc(50% - 20vw);
					width: 40vw;
					height: 20vh;
				}
		#contact_map{
			width: 50%;
			height: 45vh;
		}
			#contact_map iframe{
				width: 300px;
				height: 300px;
				margin-top: 120px;
				flex: 1 1 auto;
    			display: flex;
			}
		
/* FOOTER */
	footer{
		width: 100%;
		height: auto;
		background-color: black;
	}
		footer ul{
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: space-between;
			align-items: center;
			padding: 20px 0;
		}
		footer .separator{
			display: none;
		}
			footer li{
				color: white;
				font-size: 14px;
				margin-bottom: 6px;
			}
			footer li a{
				color: white;
				text-decoration: none;
			}
/* DESKTOP ******************************************************************************************************/
@media (min-width: 700px){
	/*GRID CONTAINER LIMIT*/
	.grid_container{
		margin: 0 auto;
		padding: 0;
		width: 1136px;
	}
	h1{line-height: 78px;}
	h2{font-size: 22px;}

	/* NAV */
		#contact_bar ul{
			justify-content: flex-start;
		}
		nav #logo{
			height: 100%;
		}
		nav #opener{
			display: none;
		}
		nav ul{
			float: right;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-end;
		}
		nav.small{
			height: 58px;
		}
			nav.small li{
				line-height: 58px;
			}
			nav.small li a{
				font-size: 15px;
			}
	/* SECTIONS */
	/* HEAD */
		#head{
			height: 100vh;
		}
			#head h1 {
				font-size: 52px;
			}
	/* FEATURES */
		#features li{
			width: 50%;
		}
	/* RENTAL */
		#rental li{
			width: 50%;
		}
	/* PROTOCOLO */
		#protocolo ul{
			flex-direction: row;
		}
			#protocolo li {
				width: 100%;
			}
			#protocolo p {
				padding: 6px 40px;
			}
	/* PORTFOLIO */
		#portfolio .grid_container{
			flex-direction: row;
		}
			#portfolio #info{
				width: 30%;
			}
			#portfolio #videoslider{
				width: 65%;
			}
		.swiper-container{
			margin-left: auto;
			margin-right: auto;
		}
	/* CONTACT */
		#contact .grid_container{
			flex-direction: row;
		}
			.flex-outer {
			  max-width: 80%;
			}
			#contact_map{
				width: 50%;
				height: 65vh;
			}
	/* FOOTER */
		footer{
			height: 51px;
		}
			footer ul{
				flex-direction: row;
				padding: 0;
			}
				footer li{
					margin: 0;
				}
			footer .separator{
				display: block;
			}
}