/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900');

/* COLORS
blue: #054ea0
55% Gray: #8a8c8e

FONTS:
font-family: 'Roboto', sans-serif;
*/

/*
============
UNIVERSAL 
============
*/

html, body {
  font-family: 'Roboto', sans-serif;
  color: #333;
  overflow-x: hidden;
 }
 
 a[href^="tel"] {
  color: inherit;
  text-decoration: none; 
}
  
a:hover, #contact .btn:hover, #contact-info a:hover {
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

#services h2, #projects h2, #about h2, #contact h2 {
	text-align: center;
	text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-size: 3em;
    font-weight: 900;
}

#services p, #projects p, #about p, #contact p {
	font-size: 1.2em !important;
	line-height: 1.5em;
	text-align: center;
	margin-bottom: 25px !important;
	margin: 0 auto;
}

.anchor {
	position: absolute;
	margin-top: -35px;
}

.bg-metal {
position: relative;
height: 25px;
background: #b1b3b6; /* Old browsers */
background: -moz-linear-gradient(left, #b1b3b6 0%, #ffffff 51%, #8a8c8e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #b1b3b6 0%,#ffffff 51%,#8a8c8e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #b1b3b6 0%,#ffffff 51%,#8a8c8e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b1b3b6', endColorstr='#8a8c8e',GradientType=1 ); /* IE6-9 */
}


/*
=======================
	Parallax BG
=======================
*/
	.parallax-01 {
		background: url('../img/parallax-01.webp') center no-repeat;
		background-size: cover;
		height: 250px;
	}

	.parallax-02 {
		background: url('../img/parallax-02.webp') center no-repeat;
		background-size: cover;
		height: 250px;
	}

/*
============
NAVIGATION 
============
*/

.navbar-brand img {
  width: 185px;
  height: auto;
 }

.navbar { 
  font-weight: 500;
  background: #fff;
  color: #054ea0;
  text-transform: uppercase;
  font-size: 1.2em;
  box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
 }

 .navbar-collapse {
	margin-top: 15px;
 	border-top: 1px solid rgba(250,250,250,0.6);
 }

.navbar-toggler .fa-bars {
	color: #054ea0;
	font-size: 1.25em;
	margin-top: -25px;
}

.navbar-nav a { color: #054ea0;}

/*
HOVER FX
*/

.navbar-nav a:hover, .navbar-nav a:focus, 
.navbar-nav a:active {
	border-bottom: 2px solid #054ea0;
}

.navbar-toggler .fa-bars:hover,
.navbar-toggler .fa-bars:focus, .navbar-toggler .fa-bars:active {
  border: none !important;
}


/*
============
HEADER SECTION 
============
*/

header {
background: url('../img/bg-header.webp') center no-repeat;
background-size: cover;
height: 450px;
}

.hero {	
position: relative;
}

.hero-overlay {
  position: absolute;
  background: -webkit-linear-gradient(bottom, rgba(0,0,0,.9), transparent);
  background: -o-linear-gradient(bottom, rgba(0,0,0,.9), transparent);
  background: linear-gradient(to top, rgba(0,0,0,.9), transparent);
  width: 100%;
  color: #fff;
  height: 100%;
}



.hero-text {
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.25em;
    padding: 15px 15px;
	margin-top: 175px;
}

.hero a {
	font-weight: 600;
	color: #fff;
	background: rgba(0,0,0,0.4);
	padding: 10px 35px;
	left: 0;
	right: 0;
	margin: auto;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to right, #b1b3b6, #fff, #8a8c8e) 1;
}

.hero a:hover, .hero a:focus, .hero a:active {
	background: #054ea0;
}

/*
=======================
	HEADER / ABOUT COLLAGES
=======================
*/

.header-collage {
    margin-top: 5px;
}

.about-collage {
    margin-top: 5px;
}

.header-collage .col-md-4, .about-collage .col-md-4 {
	padding: 0;
	margin: 0;
}

.header-collage-01 {
		background: url('../img/header-collage-01.webp') center no-repeat;
		background-size: cover;
		border-right: none;
		border-bottom: 5px solid #fff;
		height: 250px;
}

.header-collage-03 {
		background: url('../img/header-collage-03.webp') center no-repeat;
		background-size: cover;
		height: 250px;
		border-top: 5px solid #fff;
}

.about-collage-01 {
		background: url('../img/about-collage-01.webp') center no-repeat;
		background-size: cover;
		border-right: none;
		border-bottom: 5px solid #fff;
		height: 250px;
}

.about-collage-03 {
		background: url('../img/about-collage-03.webp') center no-repeat;
		background-size: cover;
		height: 250px;
		border-top: 5px solid #fff;
}

 .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            overflow: hidden;
			 height: 100%;
			 border: none;
        }
        
        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

/*
============
SERVICES SECTION
============
*/

#services {
	padding: 75px 10px;
	background: #054ea0;
	background-size: cover;
	position: relative;
	color: #fff;
}

#services h2 {
  background: linear-gradient(to right, #b1b3b6 5%,#ffffff 5%,#8a8c8e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#services .container {
	position: relative;
	z-index: 2;
}

#services-display {margin-top: -25px;}

.card {
	padding: 5px;
	border: none;
    margin: auto;
    margin-top: 35px;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.4);
    border-radius: 0;
    /*height: 375px;*/
}

.card-body {
	margin: 0;
	color: #8a8c8e;
	text-align: left;
}

.card hr {
	border: 1px solid rgba(138, 140, 142, 0.5);
	width: 85%;
}

.card h4 {
	padding-top: 10px;
	color: #054ea0;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
}

.card h5 {
	padding: 0;
	font-size: 1em;
	line-height: 1.5em;
	color: #000;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.card ul {
    padding: 0;
    margin: 0;
}

/*
============
PROJECTS SECTION
============
*/

#projects {	
	padding: 75px 0;
	color: #8a8c8e;
}

#projects h2 {
  background: linear-gradient(to right, #b1b3b6 5%,#ffffff 5%,#8a8c8e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#projects p {margin-top: 10px !important;}

#projects .row {
	margin-bottom: 30px;
}

#projects img {	max-width: 150px;}

#projects h3 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1em;
	padding: 15px 5px;
	color: #000;
}

#projects p {
	font-size: 0.9em;
	line-height: 1.5em;
	max-width: 900px;
	margin-top: -10px;
	margin-bottom: 20px;
	padding: 0 10px;
}

/*
============
ABOUT SECTION
============
*/

#about {
    background: #054ea0;
    width: 100%;
    padding: 75px 10px;
}

#about h2 {
  background: linear-gradient(to right, #b1b3b6 5%,#ffffff 5%,#8a8c8e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#about p { 
    text-align: left;
    max-width: 900px;
    margin: auto;
    font-size: 1.2em;
    line-height: 2em;
    color: #fff;
    padding: 0 10px;
}

#about p:nth-of-type(2) { margin-top: 10px; }

/*
============
CONTACT SECTION 
============
*/

#contact {
	padding: 75px 10px;
	text-align: left;
	background: #fff;
	color: #8a8c8e;
}


#contact h2 {
  background: linear-gradient(to right, #b1b3b6 5%,#ffffff 5%,#8a8c8e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


#contact p {
	color: #8a8c8e;
    text-align: center;
    margin-bottom: 30px;
}

#contact-info ul { 
	list-style-type: none;
	margin-left: -45px;
}

#contact-info ul li { 
    margin: 8px 0 35px; 
  }

#contact-info a {
    position: relative;
    background: #fff;
	color: #b1b3b6;
    width: 50px;
    height: 50px;
    padding: 10px 12px;
    font-size: 1em;
    border-width: 2px;
    border-style: solid;
    border-image: linear-gradient(to right, #b1b3b6, #fff, #8a8c8e) 1;
}

#contact-info .text {
	position: relative;
	margin-left: 10px;
	font-size: 1.1em;
	font-weight: 600;
    border: none !important;
    background: none !important;
}

.form-control {
	background: rgba(0,0,0,0);
	border: 2px solid #8a8c8e;
	color: #8a8c8e !important;
	border-radius: 0;
}

textarea.form-control {	height: 150px;}

#contact .btn {
	font-weight: 700;
	background: #fff;
    border-width: 2px;
    border-image: linear-gradient(to right, #b1b3b6, #fff, #8a8c8e) 1;
	color: #8a8c8e;
	padding: 10px 25px;
	margin-top: -25px;
	margin-bottom: 25px;
}

#contact .form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #8a8c8e;
}
#contact .form-control::-moz-placeholder { /* Firefox 19+ */
  color: #fff8a8c8e
}
#contact .form-control:-ms-input-placeholder { /* IE 10+ */
  color: #8a8c8e;
}
#contact .form-control:-moz-placeholder { /* Firefox 18- */
  color: #8a8c8e;
}

/* Hover FX */

#contact-info a:hover, #contact-info a:focus,
#contact-info a:active {
	background: #054ea0;
	color: #fff;
}

#contact .btn:hover, #contact .btn:focus,
#contact .btn:active {
	background: #054ea0;
	color: #fff;
}

/*
============
TERMS SECTION
============
*/

#terms {
	margin-top: 125px;
}

#terms h1 {
	margin-bottom: 35px;
    font-weight: 700;
}

#terms h2 {
    background: #C5C5C5;
    padding: 10px;
	text-transform: uppercase;
	font-weight: 600;
}

#terms p {
	text-align: left;
}


/*
============
FOOTER SECTION
============
*/

footer {
	padding-top: 5px;
	background: #054ea0;
	color: #fff;
	font-weight: 500;
}

footer img {
	width: 150px;
	height: auto;
}

footer p {
	font-size: 1em;
	padding: 5px 10px;
}

footer a {
	color: #fff;
	text-decoration: underline;
}

footer a:hover, footer a:focus, footer a:active {
	text-decoration: none;
	opacity: .6;
	color: #fff;
	}

/*
============
Thank You Modal
============
*/

#thankyou {	background: rgba(250,250,250,0.9);}

#thankyou .btn {
	border: none;
	background: #333;
	color: #fafafa;
	text-transform: uppercase;
}

#thankyou .btn:hover, #thankyou .btn:focus, #thankyou .btn:active {
	background: #054ea0;
}

/*
============
MEDIA QUERIES 
============
*/

@media (min-width: 768px) {

	   .navbar {  font-size: 1.2em;	  }

  	   .navbar-collapse {border-top: none; 	}

  	   .card h5 { padding: 0; }
	

.hero-text {
	margin-top: 250px;
	padding: 15px 25px;
}
	
.header-collage-01 {
		border-right: 5px solid #fff;
		height: 100%;
		border-bottom: none;
}

.header-collage-03 {
		height: 100%;
		border-top: none;
}

.about-collage-01 {
		border-bottom: none;
		border-right: 5px solid #fff;
		height: 100%;
}

.about-collage-03 {
		height: 100%;
		border-top: none;
}

 .video-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            overflow: hidden;
			 height: 100%;
			 border-right: 5px solid #fff;
        }
        
        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }

}


@media (min-width: 1024px) {

.hero {
	height: 650px;
}

      .navbar-brand img {
      width: 250px;
      height: auto;
 }

	  .navbar-nav {
	  	position: absolute;
        right: 10px;
	  }

	.hero-text {
    position: absolute;
    left:0;
    right:0;
    margin: auto;
    bottom: 100px;
    font-weight: 700;
    padding: 0 5px;
    max-width: 950px;
}

.hero a {
	position: absolute;
	bottom: 45px;
	font-weight: 600;
	color: #fff;
	border: 1px solid #fff;
	background: rgba(0,0,0,0.4);
	border-radius: 0;
	padding: 10px 35px;
	width: 175px;
	left: 0;
	right: 0;
	margin: auto;
}


	
	#contact-info a, #contact-info .text {font-size: 1.25em;}


/*
=======================
	Parallax BG
=======================
*/
	.parallax-01 {
		background: url('../img/parallax-01.webp') center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		height: 300px;
	}

	.parallax-02 {
		background: url('../img/parallax-02.webp') center;
		background-attachment: fixed;
		background-repeat: no-repeat;
		background-size: cover;
		height: 300px;
	}
}