@charset "utf-8";

html, body {width: 100vw; height: 100vh; margin: 0; padding: 0; border: none; font-family: "Asap Condensed", sans-serif;}
div {box-sizing: border-box;}
iframe {width: 100%; height: 100%;}

img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

ul {list-style-type: none; margin: 0; padding: 0;}

a {text-decoration: none;}
a, a:active, a:focus{outline: none;}

p { line-height: 1.3em; }

/* COLORS */
:root {
	--lightOrange: #FF8533;
	--midLightOrange: #FF6600;
	--midDarkOrange: #B34700;
}

/* GRAYSCALE */
/* picture {
	-webkit-filter: grayscale(100%); 
	filter: grayscale(100%);
} */

/**************************************************************************** MOBILE */
/* PREDEFINED CLASSES */
.container {
	width: 100vw;
	height: 100%;
	margin: 0 auto;
	padding: 0 12px;
}
.full {
	width: 100vw;
	height: 100%;
}

/* FONT STYLES */
h1 {font-size: 2em; color: var(--midDarkOrange); font-weight: 900;}
h2 {font-size: 2em; font-weight: 900;}
h3 {font-size: 1.5em; font-weight: 700; color: #777777;}
h4 {font-size: 1.2em; font-weight: 700;}
h6 {font-size: 0.9em; font-weight: 700; text-transform: uppercase;}

input, textarea, select { font-family:inherit; }

/* NAV BAR */
#main_nav{
	width: 100vw;
	height: 102px;
	position: fixed;
	top: 0;
	background-color: rgba(0, 0, 0, 0);
	z-index: 999;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
	#main_nav div{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24px 0 14px;
	}
	#main_nav img{
		height: 50px;
		object-fit: contain;
		object-position: center left;
	}
	#main_nav button{
		border: none;
		color: rgba(255, 255, 255, 0.8);
		background-color: transparent;
		font-size: 1.5em;
	}
	#main_nav ul{
		display: none;
		flex-flow: row nowrap;
		justify-content: flex-end;
	}
		#main_nav li{
			margin-right: 22px;
		}
		#main_nav li img {
			width: 0.9em;
			height: 0.9em;
		}
		#main_nav li a{
			text-transform: uppercase;
			text-decoration: none;
			font-size: 0.9em;
			font-weight: 400;
			letter-spacing: 1px;
			color: rgba(255, 255, 255, 0.8);
			-webkit-transition: all 0.4s ease-in-out;
			-moz-transition: all 0.4s ease-in-out;
			transition: all 0.4s ease-in-out;
		}
		#main_nav a:after {
		    content: ""; /* This is necessary for the pseudo element to work. */ 
		    display: block; /* This will put the pseudo element on its own line. */
		    width: 0; /* Change this to whatever width you want to have before hover. */
		    margin: 0 auto;
		     /* This creates some space between the element and the border. */
		    border-bottom: 1px solid rgba(255, 255, 255, 0.8); /* This creates the border. Replace black with whatever color you want. */
		    transition: .5s; /* This establishes the amount of time in seconds the animation should take from start to finish */
		}
			#main_nav a:hover:after {
			    width: 60%; /* This will be the new width of your border when on hover */
			}
		#main_nav a.changed:after{
		    border-bottom: 1px solid rgba(38, 38, 38, 1) !important;
		}

/* HEADER */
header {
	overflow: hidden;
}
	header img {
		min-height: 100%;
	}

/* SERVICES */
#services section{
	height: auto;
	padding: 0 0 40px 0;
	-webkit-display: flex;
	-webkit-flex-flow: column nowrap;
	display: flex;
	flex-flow: column nowrap;
}

	#services #show {display: block;}
	#services #hide {display: none;}

	#services section:nth-child(odd) {
		background-color: #111;
	}
	#services section:nth-child(odd) p{
		color: #FFF;
	}
		#services section img{
			width: 100vw;
			height: 100px;
			object-position: 40% center;
		}
		#services section .wrapper{
			width: 100vw;
			padding: 10px 12px;
		}

	#services button {
		border: 1px solid #000;
		background-color: #E0E0E0;
		text-transform: uppercase;
		padding: 8px 16px;
		font-size: 1em;

		transition: 0.5s;
		-moz-transition: 0.5s;
		-webkit-transition: 0.5s;
	}
		#services button:after {
			content: ">";
			display: inline;
			margin-left: 6px;
		}
		#services button:hover {
			border: 1px solid #0E0E0E;
			background-color: #0E0E0E;
			color: #E0E0E0;
		}
			#services button:hover:after {
				margin-left: 15px;
			}

/* PORTFOLIO */
#portfolio {
	background-color: #FFF;
}
	#portfolio nav {
		display: none;
	}

	#portfolio div section {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		-webkit-display: flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: space-between;
		-webkit-align-items: center;
		text-align: center;
		margin-bottom: 80px;
	}
		#portfolio .portfolio_nav_link {
			width: 10%;
			font-size: 3em;
			color: #000;
			transition: 0.5s;
			-moz-transition: 0.5s;
			-webkit-transition: 0.5s;
		}
			#portfolio .portfolio_nav_link:hover {
				color: var(--lightOrange);
			}
		#portfolio #works {
			width: 80%;
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			-webkit-display: flex;
			-webkit-flex-flow: row wrap;
			-webkit-justify-content: center;
		}

			#portfolio #works .square_img {
				width: 20%;
				height: 100px;
				overflow: hidden;
				transition: 0.5s;
				margin: 20px 20px;
			}
				#portfolio #works .square_img:hover {
					width: 25%;
					height: 133px;
					margin: 2px 2px;
				}
		
			#portfolio #works .video_link {
				display: block;
				width: 100%;
				height: 100%;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}


			/*WORK CONTAINER*/
			#work_container{
				display: none;
				width: 100vw;
				height: 100vh;
				position: fixed;
				top: 0;
				left: 0;
				z-index: 1001;
				background-color: rgba(0,0,0,0.5);
			}
			.work_info{
				position: fixed;
				z-index: 1002;
				width: 60vw;
				height: 65vh;
				margin: 12.5vh 20vw;
				background-color: #FEFEFE;
				display: flex;
				flex-flow: row wrap;
			}
				.work_info .video{
					display: block;
					width: 70%;
					height: 80%;
				}
					.work_info .video iframe{
						width: 100%;
						height: 100%;
						border: none;
					}
				.work_info .info_lateral{
					padding: 20px;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: 30%;
					height: 80%;
					background-color: #EFEFEF;
				}
					.work_info .info_lateral li {
						line-height: 1.8em;
					}
				.work_info .info{
					padding: 20px;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;
					height: 20%;
					background-color: #EFEFEF;
				}
					.work_info .info h1, h4{
						margin: 0;
					}
					.work_info .info h3 {
						color: #000;
					}
					.work_info .info_lateral h4 {
						font-size: 0.9em !important;
					}
					.work_info .info_lateral strong {
						text-decoration: none;
					}

					.work_info .info .primary-info{
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: flex-start;
						text-align: left;
					}

					.work_info .info .secondary-info{
						display: flex;
						flex-direction: column;
						justify-content: space-aroun;
						align-items: flex-start;
						text-align: right;
					}
					.work_info .work_close{
						position: absolute;
						bottom: 10px;
						right: 20px;
						color: #000000;
					}

/* TEAM */
#team {
	background-color: #232323;
	height: 60vh;
	overflow: hidden;
	display: none;
}
	#team div {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
		-webkit-display: flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: space-around;
	}
		#team section {
			width: 33vw;
			text-align: center;
			position: relative;
			overflow: hidden;
		}
			#team section div {
				position: absolute;
				top: 0; left: 0;
				width: 100%; 
				height: 100%;
			}
				#team section img {
					height: 100%;
					z-index: 8;
					object-position: center 40%;
					transition: 0.5s;
					-moz-transition: 0.5s;
					-webkit-transition: 0.5s;
				}
				#team section .opacity_layer{
					background-color: #000;
					opacity: 0;
					z-index: 9;
					transition: 0.5s;
					-moz-transition: 0.5s;
					-webkit-transition: 0.5s;
				}
				#team section .wrapper_position {
					display: flex;
					flex-flow: column wrap;
					justify-content: flex-end;
					-webkit-display: flex;
					-webkit-flex-flow: column wrap;
					-webkit-justify-content: flex-end;

					color: #FFF;
					z-index: 10;
				}
					#team .wrapper_position h4 {
						margin-bottom: 0;
						transition: 0.5s;
						-moz-transition: 0.5s;
						-webkit-transition: 0.5s;
					} 
					#team .wrapper_position h5 {
						opacity: 0;
						transition: 0.5s;
						-moz-transition: 0.5s;
						-webkit-transition: 0.5s;
					} 
			#team section:hover .opacity_layer {
				opacity: 0.7;
			}
			#team section:hover img {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
			}
			#team section:hover .wrapper_position h5 {
				opacity: 1;
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
			}
			#team section:hover .wrapper_position h4 {
				transform: scale(1.2);
				-webkit-transform: scale(1.2);
			}

/* CONTACT */
#contact {
	padding-top: 88px;
	background-color: #F0F0F0;
	text-align: center;
}

	#contact #info ul {
		padding: 20px 12px;
	}
		#contact #info li {
			margin: 16px 0;
		}
		#contact #info i {
			margin-right: 10px;
		}
		#contact #info a {
			color: #000;

			transition: 0.5s;
			-moz-transition: 0.5s;
			-webkit-transition: 0.5s;
		}
			#contact #info a:hover{
				color: var(--lightOrange);
				text-decoration: underline;
			}

	#contact #info input:not([type=checkbox]) {
		width: 100%;
		height: 48px;
		box-sizing: border-box;
		margin-bottom: 20px;
		padding: 0 15px;
		border: none;
	}
	#contact #info textarea {
		border: none;
		box-sizing: border-box;
		margin-bottom: 20px;
		padding: 15px;
		width: 100%;
		height: 80px;
	}
	#contact #info input[type=checkbox] {
		margin: 0 10px 20px 0;
	}
	#contact #info button {
		border: none;
		border-radius: 2px;
		box-sizing: border-box;
		padding: 10px 18px;
		margin: 40px 0 80px;
		text-transform: uppercase;
		background-color: var(--lightOrange);
		color: #000;
		transition: 0.5s;
		-moz-transition: 0.5s;
		-webkit-transition: 0.5s;
	}
		#contact #info button:hover {
			background-color: #000;
			color: var(--lightOrange);
		}

	#contact #map{
		display: none;
	}

	#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 #form_message_wrapper{
			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;
			color: #000;
		}

/* FOOTER */
footer {
	background-color: #000;
	color: #FFF;
}
	footer div {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		-webkit-display: flex;
		-webkit-flex-flow: row wrap;
		-webkit-justify-content: space-between;
	}
	footer section {
		width: 50%;
		text-align: center;
	}
		footer section a {
			color: #FFF;
		}
			footer section a:hover {
				color: var(--lightOrange);
				text-decoration: underline;
			}

		footer div p {
			padding: 40px 0 20px;
			text-align: center;
		}

#copyr {
	justify-content: left;
}
#partners {
	max-width: 300px;
    margin-top: 20px;
}


/**************************************************************************** DESKTOP */
@media (min-width: 700px){
	/* PREDEFINED CLASSES */
	.container {
		max-width: 1360px;
	}
	.full {
		padding: 0;
	}

	/* NAV BAR */
	#main_nav button{
		display: none;
	}
	#main_nav ul{
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
	}

	/* HEADER */
	header {
		height: 50vh;
	}

	/* SERVICES */
	#services section{
		height: 50vh;
		-webkit-display: flex;
		-webkit-flex-flow: row nowrap;
		display: flex;
		flex-flow: row nowrap;
		padding: 10px 0;
	}
		#services #show {display: none;}
		#services #hide {display: block;}

		#services section:nth-child(odd) {
			justify-content: flex-end;
		}
		#services section img{
			width: 60vw;
			height: 100%;
		}
		#services section .wrapper{
			margin: 0px 60px 20px 60px;
			width: 30vw;
			padding-top: 0;
		}

	/* PORTFOLIO */
	#portfolio nav {
		display: block;
		margin: 60px auto;
	}
		#portfolio nav ul {
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			-webkit-display: flex;
			-webkit-flex-flow: row nowrap;
			-webkit-justify-content: center;
		}
		#portfolio nav a {
			margin: 0 20px;
			color: #000;
			font-size: 1.2em;
			transition: 0.2s;
			-moz-transition: 0.2s;
			-webkit-transition: 0.2s;
		}
			#portfolio nav a:hover {
				border-bottom: 3px solid var(--lightOrange);
			}
		#portfolio nav .selected {
			border-bottom: 3px solid var(--lightOrange);
		}

	/* TEAM */
	#team {
		display: block;
	}

	/* CONTACT */
	#contact {
		text-align: left;
	}
	#contact div.container {
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		-webkit-display: flex;
		-webkit-flex-flow: row nowrap;
		-webkit-justify-content: space-between;
	}
		#contact section {
			width: 50%;
		}

		#contact #info form {
			padding-right: 80px;
		}

		#contact #map {
			display: block;
		}
		#map iframe{
			width: 300px;
			height: 300px;
			margin-top: 120px;
		}

	/* FOOTER */
	footer section {
		width: 25%;
		text-align: left;
	}
	
}

@media (min-width: 1316px) {
	#services section {
		height: 40vh;
		padding: 40px 0;
	}
		#services section img{
			width: 60vw;
		}
		#services section h1 {
			margin: 0 0 32px;
		}
}
@media (min-width: 1516px) {
	#services section {
		height: 40vh;
		padding: 40px 0;
	}
	#services section .wrapper{
	}
		#services section img{
			width: 70vw;
		}
		#services section h1 {
			margin: 32px 0 32px;
		}
}