/* Scss Document */

@import 'reset';
@import 'variables';
@import 'header';
@import 'footer';
@import 'location';
@import 'contact';

body {
	font-family: $font2;
	position: relative;
	overflow-x: hidden;
	}
a {
	text-decoration: none;
	color: inherit;
	&:hover {
		color: inherit;
		}
	}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 35px;
	}
	
	
#social-widget {
	position: fixed;
	top: 200px;
	right: 0;
	opacity: 0;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	        transform: translateX(100%);
	z-index: 500;
	&.active {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-animation: widgetShow .2s linear;
		        animation: widgetShow .2s linear;
		-webkit-animation-fill-mode: forwards;
		        animation-fill-mode: forwards;
		}
	.widget {
		padding: 12px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-transition: .2s all ease-in-out;
		-o-transition: .2s all ease-in-out;
		transition: .2s all ease-in-out;
		border: 1px solid #fff;
		&:nth-of-type(1) {
			background: #3B5998;
			}
		&:nth-of-type(2) {
			background: $orange;
			border-top: none;
			border-bottom: none;
			}
		&:nth-of-type(3) {
			background: $grey;
			}
		&:hover {
				background: $grey + 50;
				}
		i {
			color: #fff;
			}
		}
	}
	
@-webkit-keyframes widgetShow {
	100% {
		-webkit-transform: none;
		        transform: none;
		opacity: 1;
		}
	}
	
@keyframes widgetShow {
	100% {
		-webkit-transform: none;
		        transform: none;
		opacity: 1;
		}
	}
	
	
#drone-hero {
	min-height: 100vh;
	min-width: 100%;
	position: relative;
	overflow: hidden;
	z-index: 100;
	/*&:after {
	 		content: "";
	 		height: 100%;
	 		width: 100%;
	 		top: 0;
	 		left: 0;
	 		position: absolute;
	 		background: rgba(0,0,0,.2);
	 		z-index: 400;
	 	}*/
	 #vid {
	 	position: absolute;
	 	top: 50%;
	 	left: 50%;
	 	-webkit-transform: translate(-50%, -50%);
	 	    -ms-transform: translate(-50%, -50%);
	 	        transform: translate(-50%, -50%);
	 	width: auto;
	 	height: auto;
	 	min-height: 100%;
	 	min-width: 100%;
	 }
	 #top-call {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
				-webkit-box-align: end;
				    -ms-flex-align: end;
				        align-items: flex-end;
		z-index: 500;
		text-align: right;
		position: absolute;
		top: 20%;
		right: 10%;
		transform: translateY(-20%);
		h1 {
			font-size: 58px;
			max-width: 20ch;
			line-height: 1.1;
			font-family: $serif;
			color: #fff;
			font-weight: 700;
			margin: 10px 0;
			text-shadow: 0px 0px 3px rgba(0,0,0,.5);
			}
		p {
			font-size: 21px;
			line-height: 1.4;
			max-width: 50ch;
			margin: 10px 0;
			color: #fff;
			}
		#btns {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin: 10px 0;
			position: relative;
			.btn {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				padding: 10px 70px;
				background: #fff;
				-webkit-transition: .15s all ease-in-out;
				-o-transition: .15s all ease-in-out;
				transition: .15s all ease-in-out;
				p {
					text-transform: uppercase;
					letter-spacing: 1px;
					font-size: 15px;
					color: $orange;
					i {
						margin-right: 5px;
						font-size: 16px;
						}
					}
				&:hover {
					background: $orange;
					> p {
						color: #fff;
						}
					}
				}
			}
		}
		#vid-controls {
			position: absolute;
			opacity: 0;
			bottom: 30px;
			left: 50%;
			width: 15%;
			min-width: 200px;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: .15s all ease-in-out;
			z-index: 50000;
			padding: 15px;
			transform: translateX(-50%);
			background: rgba($orange, .7);
			#pauseBtn {
				&::after {
					content: "\f04c";
					font-family: "Font Awesome 5 Free";
					font-size: 28px;
					color: rgba(white, .6);
					margin: 0 25px 0 25px;
					font-weight: 900;
				}
				&:hover {
					&::after {
						cursor: pointer;
						color: #fff;
					}
				}
				&.turn-to-play {
					&::after {
						content: "\f144";
					}
				}
			}
				#volumeBtn {
					&::after {
					content: "\f026";
					font-family: "Font Awesome 5 Free";
					font-size: 28px;
					color: rgba(white, .6);
					margin: 0 25px 0 25px;
					font-weight: 900;
				}
				&:hover {
					&::after {
						cursor: pointer;
						color: #fff;
					}
				}
					&.volume-off {
						&::after {
							content: "\f028";
						}
					}
				}
			}
			&:hover {
				background: $orange;
				 i {
					&:hover {
						color: #fff;
						cursor: pointer;
					}
				}
			}
		&:hover {
			> #vid-controls {
				opacity: 1;
			}
		}
}
	
#hero {
	margin: 0 10px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 400px;
	&.about-hero {
		background-color: rgba($grey, .6);
		background-image: url("../graphics/windmill.jpg");
		background-position: 50% 85%;
		}
	&.contact-hero {
		background-image: url("../graphics/contact.jpg");
		background-position: 50% 60%;
		#top-call {
			min-height: 300px;
			}
		}
	#top-call {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
				-webkit-box-align: end;
				    -ms-flex-align: end;
				        align-items: flex-end;
		z-index: 500;
		text-align: right;
		h1 {
			font-size: 58px;
			max-width: 20ch;
			line-height: 1.1;
			font-family: $serif;
			color: #fff;
			font-weight: 700;
			margin: 10px 0;
			text-shadow: 0px 0px 3px rgba(0,0,0,.5);
			}
		p {
			font-size: 21px;
			line-height: 1.4;
			max-width: 50ch;
			margin: 10px 0;
			color: #fff;
			}
		#btns {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			margin: 10px 0;
			position: relative;
			.btn {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
				padding: 10px 70px;
				background: #fff;
				-webkit-transition: .15s all ease-in-out;
				-o-transition: .15s all ease-in-out;
				transition: .15s all ease-in-out;
				p {
					text-transform: uppercase;
					letter-spacing: 1px;
					font-size: 15px;
					color: $orange;
					i {
						margin-right: 5px;
						font-size: 16px;
						}
					}
				&:hover {
					background: $orange;
					> p {
						color: #fff;
						}
					}
				}
			}
		}
	}
	
	
#mid-sec {
	#inner-mid {
		padding: 2rem 10px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		#mid-left {
			margin: 10px;
			img {
				max-width: 90%;
				}
			}
		#mid-right {
			margin: 10px;
			h1 {
				font-family: $serif;
				font-size: 26px;
				max-width: 35ch;
				line-height: 1.3;
				letter-spacing: 1px;
				text-transform: uppercase;
				font-weight: 700;
				color: $grey;
				span {
					text-transform: none;
					font-size: 22px;
					font-style: italic;
					font-weight: 400;
					color: $grey + 40;
					}
				}
			}
		}
	}
	
#main-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	.lr-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 10px;
		width: 100%;
		.left, .right {
			margin: 10px;
			height: 200px;
			}
		.left {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			background: -webkit-linear-gradient(left, $grey, $grey + 35);
			background: -o-linear-gradient(left, $grey, $grey + 35);
			background: linear-gradient(90deg, $grey, $grey + 35);
			h1 {
				text-align: center;
				color: #fff;
				font-size: 42px;
				}
			img {
				max-width: 100%;
				}
			}
		.right {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-flex: 2;
			    -ms-flex: 2;
			        flex: 2;
			background: url("../graphics/row.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			background-color: rgba(0,0,0,.6);
			background-blend-mode: multiply;
			h1 {
				font-size: 42px;
				color: #fff;
				margin: 15px 25px 5px;
				}
			p {
				color: #fff;
				line-height: 1.4;
				font-size: 21px;
				max-width: 65ch;
				margin: 5px 25px;
				}
			}
		}
	.full {
		height: 400px;
		width: calc(100% - 20px);
		background: url("../graphics/warehouse.JPG");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-color: rgba(0,0,0,.6);
		background-blend-mode: multiply;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		h1 {
			color: #fff;
			font-size: 44px;
			text-align: center;
			margin: 10px;
			padding-bottom: 5px;
			border-bottom: 1px solid #fff;
			}
		p {
			margin: 10px;
			text-align: center;
			color: #fff;
			line-height: 1.4;
			max-width: 77ch;
			font-size: 18px;
			font-family: $font1;
			}
		}
	.rl-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: 10px;
		width: 100%;
		.left, .right {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			min-height: 300px;
			margin: 10px;
			}
		.left {
			-webkit-box-flex: 2.75;
			    -ms-flex: 2.75;
			        flex: 2.75;
			background: url("../graphics/bg.png");
			background-size:cover;
			background-position: center;
			background-repeat: no-repeat;
			background-color: $grey + 50;
			background-blend-mode: multiply;
			h1 {
				margin: 20px 20px 5px;
				font-size: 36px;
				color: #fff;
				font-weight: 700;
					&.habla {
						margin-bottom: 20px;
						font-size: 34px;
						color: $orange + 30;
						letter-spacing: 1px
					}
				}
			p {
				margin: 20px 20px 5px;
				color: #fff;
				line-height: 1.4;
				max-width: 77ch;
				font-size: 16px;
				font-family: $font1;
					&.request {
						color: $orange + 90;
						font-size: 18px;
					}
				}
			}
		.right {
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			background: url("../graphics/mech1.jpg");
			background-size: cover;
			background-position: 65% 50%;
			background-repeat: no-repeat;
			background-color: rgba(0,0,0,.5);
			background-blend-mode: multiply;
			h1 {
				margin: 15px 15px;
				font-size: 44px;
				font-style: italic;
				color: #fff;
				line-height: 1.3;
				&:nth-of-type(2) {
					color: $orange + 60;
					font-size: 52px;
					text-shadow: 0px 0px 3px rgba(0,0,0,.4);
					font-weight: 700;
					}
				}
			}
		}
	}
#main-btm {
	margin: 10px 20px 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 2rem 0;
	&.location-btm {
		padding: 1rem 0;
		}
	h1#service-call {
		text-align: center;
		margin: 20px 0 0;
		color: $grey;
		font-family: $serif;
		font-size: 36px;
		font-weight: 700;
		}
	#about-info {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		    -ms-flex-pack: justify;
		        justify-content: space-between;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		padding: 2rem 0;
		.about-par {
			margin: 15px;
			p {
				line-height: 1.5;
				font-size: 17px;
				font-family: $font1;
				max-width: 65ch;
				text-align: justify;
				}
			}
		}
	#services {
		padding: 10px 0;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-pack: distribute;
		    justify-content: space-around;
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;
		margin: 15px 0;
		.service-list {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			text-align: center;
			margin: 15px;
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1;
			i {
				font-size: 28px;
				color: $grey;
				}
			h1 {
				font-size: 24px;
				text-transform: uppercase;
				margin: 5px 0;
				line-height: 1.1;
				color: $orange;
				}
			p {
				font-family: $font1;
				max-width: 40ch;
				margin: 5px 0;
				line-height: 1.4;
				color: $grey;
				}
			}
		}
	}
	
#btm-hero {
	background-image: url("../graphics/road.jpg");
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-color: rgba(black,.5);
	background-blend-mode: multiply;
	margin: 0 10px 10px;
	#inner-btm-hero {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		color: #fff;
		padding: 4rem 0 3rem;
		h1 {
			font-size: 36px;
			font-family: $serif;
			font-weight: 700;
			margin: 15px;
			}
		.breaker {
			margin: 15px;
			width: 40%;
			background: $orange;
			height: 3px;
			}
		p {
			max-width: 66ch;
			line-height: 1.5;
			font-size: 21px;
			margin: 15px;
				&.habla {
					font-size: 32px;
					font-style: italic;
				}
			}
		}
	}
	
@media all and (max-width: 890px) {
	#main-info {
		.lr-wrap {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			.right {
				height: auto;
				padding: 20px 0;
				}
			}
		}
		.rl-wrap {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	.left, .right {
		padding: 20px 0;
		}
	}
}
	

	
@media all and (max-width: 800px) {
	#drone-hero {
		min-height: 75vh;
		#top-call {
			right: 5%;
			h1 {
				font-size: 28px;
			}
			p {
				font-size: 18px;
				margin: 5px;
				max-width: 77%;
				text-shadow: 0px 0px 1px rgba(0,0,0,.5);
			}
			#btns {
				.btn {
					padding: 5px 30px;
					p {
						text-shadow: none;
						text-align: center;
						letter-spacing: 0;
						display: inline-block;
						max-width: 100%;
					}
				}
			}
		}
	}
		#mid-sec {
		#inner-mid {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			#mid-right {
				h1 {
					font-size: 21px;
					}
				}
			}
		}
	}
	
	
@media all and (max-width: 650px) {
	#hero {
		min-height: none;
		height: auto;
		&.about-hero {
			#top-call {
				min-height: 300px;
				}
			}
		#top-call {
			h1 {
				font-size: 32px;
				}
			p {
				font-size: 18px;
				}
			#btns {
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				    -ms-flex-direction: column;
				        flex-direction: column;
				#or {
					top: 35%;
					}
			.btn {
				p {
					font-size: 15px;
					}
				}
			}
		}
	}
	#main-btm {
		margin: 10px;
		#about-info {
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			    -ms-flex-direction: column;
			        flex-direction: column;
			}
		#services {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
				-webkit-box-pack: center;
				    -ms-flex-pack: center;
				        justify-content: center;
				-webkit-box-align: center;
				    -ms-flex-align: center;
				        align-items: center;
		margin: 0;
		.service-list {
			-webkit-box-pack: center;
			    -ms-flex-pack: center;
			        justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center;
			width: 100%;
			margin: 10px 0;
			}
		}
	}

}