/*Landing Page*/

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,500,700');
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow");

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	color: #222;
	font-family: 'Titillium Web', sans-serif;
}

#map {
	width: 100%;
	height: 315px;
}

.page-header {
	height: 100vh;
	background-image: url("Images/landing.jpg");
	background-size: cover;
}

.page-header:after {
	animation: grain 1s steps(5) infinite;
	background-image: url("Images/grains.png");
	content: "";
	height: 300%;
	left: -50%;
	opacity: 0.25;
	position: fixed;
	top: -110%;
	width: 300%;
}

@keyframes grain {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-5%, -10%); }
	20% { transform: translate(-15%, 5%); }
	30% { transform: translate(7%, -25%); }
	40% { transform: translate(-5%, 25%); }
	50% { transform: translate(-15%, 10%); }
	60% { transform: translate(15%, 0%); }
	70% { transform: translate(0%, 15%); }
	80% { transform: translate(3%, 35%); }
	90% { transform: translate(-10%, 10%); }
}

.content {
	position: absolute;
	top: 48%;
	left: 35%;
	transform: translate(-50%, -50%);
	color: #fff;
	font-family: "Titillium Web", sans-serif;
	z-index: 1;
}

.content h1 {
	font-weight: 700;
	font-size: 48px;
	margin-bottom: 0;
	color: #fff;
	font-family: "Titillium Web", sans-serif;
}

.content p {
	margin-top: 0;
	width: 80%;
	font-weight: lighter;
}

.content a {
	text-decoration: none;
	color: #fff;
	letter-spacing: 4px;
	font-size: 12px;
	text-transform: uppercase;
	border: 2px solid #fff;
	padding: 16px 42px;
}

.delay-1 {
	animation-delay: 2s;
}

.delay-2 {
	animation-delay: 2.2s;
}

.delay-3 {
	animation-delay: 2.4s;
}

.navbar {
	padding: .8rem;
}
.navbar-nav li {
	padding-right: 20px;
}
.nav-link {
	font-size: 1.1em !important;
}
.mainpic {
	width: 100%;
	height: 100%;
}
.carousel-caption {
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
}
.carousel-caption h1 {
	font-size: 400%;
	text-transform: uppercase;
	text-shadow: 1px 1px 8px #000;
	font-family: "PT Sans Narrow", sans-serif;
	letter-spacing: 5px;
}
.btn-primary {
	background-color: #A9A9A9;
	border: 1px solid #DCDCDC;
	color: white;
	margin-top: 64px;
}
.btn-outline-secondary {
	margin-bottom: 40px;
}
.jumbotron {
	padding: 1rem;
	border-radius: 0;
}
.img-modal {
	background-size: cover;
	transform: translateY(0%);
	transform: translateX(08%);
}
.welcome {
	width: 75%;
	margin: 0 auto;
}
.welcome hr {
	border-top: 2px solid #b4b4b4;
	width: 95%;
	margin-top: .3rem;
	margin-bottom: 1rem;
}
.fa-home {
	color: #e54d26; 
}
.fa-chart-bar {
	color: #2163af;
}
.fa-home, .fa-chart-bar {
	font-size: 4em;
	margin-top: 1em;
}
#contactform {
	margin-top: 17px;
}
.alert {
	text-align: center;
	background: #79c879;
	color: #fff;
	display: none;
}
.light-social {
	padding-bottom: 2.75rem;
	padding-top: 2.74rem;
}
.social a {
	font-size: 3em;
	padding: 2rem;
}
.fa-facebook {
	color: #3b5998;
}
.fa-linkedin {
	color: #0077B5;
}
.fa-facebook:hover,
.fa-linkedin:hover {
	color: #A9A9A9;
}
footer {
	background-color: #DCDCDC;
	color: #000000;
	padding-top: 1rem;
}

/*---Media Queries --*/
@media (max-width: 992px) {
	.social a {
		font-size: 4em;
		padding: 1rem;
	}
  }
@media (max-width: 768px) {
 .carousel-caption {
	top: 40%;
}
.carousel-caption h1 {
	font-size: 300%;
	text-transform: uppercase;
	text-shadow: 1px 1px 8px #000;
	font-family: "PT Sans Narrow", sans-serif;
}
.carousel-caption .btn {
	font-size: 95%;
}
.display-4 {
	font-size: 200%
}
.social a {
		font-size: 2.5em;
		padding: 0.7rem;
	}
@media (max-width: 576px) {
   .carousel-caption {
	top: 40%;
}
.carousel-caption h1 {
	font-size: 170%;
	text-transform: uppercase;
	text-shadow: 1px 1px 8px #000;
	font-family: "PT Sans Narrow", sans-serif;
}
.carousel-caption .btn {
	font-size: 80%;
}
#img-modal {
	height: 100%;
	width: auto;
}
.btn-primary {
	margin-top: 34px;
}
.display-4 {
	font-size: 200%
}
.social a {
		font-size: 2.5em;
		padding: 0.7rem;
	}
}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/