@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rokkitt:wght@100;200;300;400&display=swap');
:root {

    --brightBlue: #0a84da;
    --blue: #021194;
    --darkBlue: #02073b;
	--lightBlue: #cde6f7;
    --offWhite: #f6f6f6;
    --silver: #c9c9cb;
    --lightGrey: #8d8d8e;
    --grey: #6d6e72;
    --darkGrey: #4c4a4c;
    --charcoal: #292829;
    --golden: #E4BB25;
}
body {
    background-color: #ffffff;
}
h1 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--blue);
font-weight: 700;
text-transform: uppercase;
font-size: 2.25rem;
/*line-height: 70%;*/
}
@media (min-width: 768px) {
    h1 {
    font-size: 3.75rem;
    }
    }
h1 span {
    display: block;
    font-weight: 500;
font-size: 1.25rem;
line-height:70%;
}
@media (min-width: 768px) {
    h1 span {
    font-size: 2rem;
    }
    }
h2 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--blue);
font-weight: 700;
text-transform: uppercase;
font-size: 2.125rem;
}
@media (min-width: 768px) {
    h2 {
   font-size: 2.5rem;
    }
    }
h3 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--blue);
font-weight: 700;
text-transform: uppercase;
font-size: 1.75rem;
}
h4 {
    font-family: 'Rajdhani', sans-serif;
    color: var(--blue);
font-weight: 700;
text-transform: none;
font-size: 1.60rem;
}
#headerWrapper {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    border-bottom-color: var(--blue);
    position: scroll;
    top: 0px;
    z-index: 1000;
}
@media (min-width: 768px) {
    #headerWrapper {
        position: fixed;
    }
}

#header .logo {
	padding-bottom:10px;
	text-align:center;
}
@media (min-width:768px) {
	#header .logo {
		padding-bottom:0;
	}
}
#header .contactInfo {
    text-align: right;
    padding-right: 30px;
	padding-bottom:10px;
}
#header .btn {
    background-color: var(--golden);
    color: #ffffff;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#header .btn:hover {
    background-color: var(--brightBlue);

}
#header .col-8 p {
    font-family: 'Lato', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--blue);
}
#header .col-8 a:link, #header .col-8 a:visited {
    color: var(--blue);
    text-decoration: none;
}
#header .col-8 a:hover {
    color: var(--brightBlue);
}
#mainNav {
    margin-top: -25px;
}
#mainNav a:link, #mainNav a:visited {
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--grey);
}
#mainNav a:hover {
    color: var(--brightBlue);
}
#mainNav .nav-item {
    margin-left: 10px;
}
.navbar-toggler {
	border-width:2px;
}
.navbar-light .navbar-toggler {
    color: rgba(0,0,0,.55);
    border-color: rgba(0,0,0,.4);
}

#hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    color: #ffffff;
    padding-top: 75px;
    padding-bottom: 75px;
    padding-left: 15px;
    margin-top: 0px;
}
@media (min-width: 768px) {
    #hero {
        background-attachment: fixed;
        color: #ffffff;
        padding-top: 125px;
        padding-bottom: 125px;
        padding-left: 75px;
        margin-top: 115px;
    }
      
}

#hero.index {
	background-image: url(../images/backHero.webp);
}
#hero.about {
	background-image: url(../images/backAbout.jpg);
}
#hero.metallic {
	background-image: url(../images/backMetallicEpoxy.jpg);
}
#hero.flake {
	background-image: url(../images/backFlake.jpg);
}
#hero.polished {
	background-image: url(../images/backPolishedConcrete.jpg);
}
#hero.urethane {
	background-image: url(../images/backUrethaneCement.jpg);
	background-position:bottom;
}
#hero.faq {
	background-image: url(../images/backFAQ.jpg);
}
#hero.contact {
	background-image: url(../images/backContact.jpg);
}


#hero p:nth-child(1) {
    font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1.5rem;
font-weight: 900;
}
@media (min-width: 768px) {
    #hero p:nth-child(1) {
    font-size: 3rem;
    }
      
}
#hero p:nth-child(2) {
    font-family: 'Lato', sans-serif;
font-size: .85rem;
font-weight: 500;
margin-top: -15px;
}
@media (min-width: 768px) {
    #hero p:nth-child(2) {
    font-size: 2.5rem;
    margin-top: -25px;
    }
      
}

#hero a:link {
	color: #ffffff;
	text-decoration:none;
}
#hero .btn {
    background-color: var(--golden);
    color: #ffffff;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 50px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#hero .btn:hover {
    background-color: var(--brightBlue);

}
#content {
    padding-top: 75px;
    padding-bottom: 75px;
}
@media (min-width:768px) {
	#content.employment {
		margin-top:115px;
	}
}
@media (min-width:768px) {
	#content.gallery {
		margin-top:115px;
	}
}
#content.gallery img {
	margin-bottom:15px;
}

#content.gallery ul.gallery-nav {
	list-style:none;
}
#content.gallery .gallery-nav a {
	text-decoration:none;
    color: var(--charcoal);
}
#content.gallery .gallery-nav a:hover {
	color: var(--brightBlue);
}

#gallery-metallic,
#gallery-flake,
#gallery-polished,
#gallery-urethane {
	scroll-margin-top:30px;
	text-align:center;
}

@media (min-width: 768px) {
	#gallery-metallic,
	#gallery-flake,
	#gallery-polished,
	#gallery-urethane {
		scroll-margin-top:130px;
	}
}

#topBtn {
	display: none;
	position: fixed;
	bottom: 0px;
	right: 0px;
	z-index: 99;
	width:50px;
	height:50px;
	outline: none;
	background-color: var(--brightBlue);
	color: white;
	font-size:1rem;
	font-weight:bold;
	padding-top:.75rem;
	text-align:center;
	border-color: #476e1e;
	border-width:0;
	border-radius: 50px 0 0 0;
		-moz-border-radius: 50px 0 0 0;
		-webkit-border-radius: 50px 0 0 0;
  
}

#topBtn:hover {
	background-color: var(--golden);
}


#content h1 {
	line-height:100%;
}

#content p,
#content ul {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: .925rem;
    color: var(--darkGrey);
}
@media (min-width: 768px) {
    #content p,
	#content ul {
        font-size: 1.125rem;
    }  
}
#content.sitemap ul {
	list-style:none;
}
#content.sitemap a:link,
#content.sitemap a:visited {
    color: var(--darkGrey);
	text-decoration:none;
}
#content.sitemap a:hover {
    color: var(--brightBlue);
}
#content .btn {
    background-color: var(--golden);
    color: #ffffff;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#content .btn:hover {
    background-color: var(--brightBlue);

}

#accordionFAQ .accordion-button {
	background-color: #ffffff;
	color: var(--darkGrey);
	font-weight:700;
}
#accordionFAQ .accordion-button:not(.collapsed) {
	background-color: #ffffff;
	color: var(--darkGrey);
}
#accordionFAQ .accordion-button:focus {
    border-color: #000000;
    outline: 1px inset var(--darkGrey);
    box-shadow: none;
}

@media (min-width: 768px) {
	.modal-dialog {
		max-width: 700px;
		margin: 1.75rem auto;
	}
}

#content .contactFillerImg {
	background-image:url(../images/contactFiller.jpg);
	background-position:bottom;
	margin-top: 10px; 	
}

.line {
    display: block;
    height: 5px;
    width: 125px;
    background-color: var(--silver);
    margin-top: 25px;
    margin-bottom: 25px;
}

#leadIns {
    padding: 0px;
}
#leadIns .card {
    background-color: var(--offWhite);
    border-left-style: solid;
    border-left-width: 5px;
    border-left-color: #ffffff;
    border-right-style: solid;
    border-right-width: 5px;
    border-right-color: #ffffff;
    border-top-style: none;
    border-bottom-style: none;
}
#leadIns .card p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: .95rem;
    color: var(--darkGrey);
    line-height: 130%;
}
#leadIns .card-footer {
    border-style: none;
    background-color: var(--offWhite);
}
#leadIns .btn {
    background-color: var(--golden);
    color: #ffffff;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 2px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#leadIns .btn:hover {
    background-color: var(--brightBlue);

}
#commercial {
    padding: 0px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}
#commercial .col-md-6:nth-child(2) {
    padding: 25px;
}
@media (min-width: 768px) {
    #commercial .col-md-6:nth-child(2) {
        padding: 75px;
    }
    
}
#commercial p {
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: .925rem;
    color: var(--darkGrey);
}
@media (min-width: 768px) {
    #commercial p {
        font-size: 1.125rem;
    }
    }
.carousel-inner img {
    width: 100%;
}
#testimonial {
    background-color: var(--grey);
    color: #ffffff;
    padding-top: 70px;
    padding-bottom: 50px;
}
#testimonial p:nth-child(1) {
    font-family: 'Rokkitt', serif;
    font-size: 1.75rem;
    font-weight: 200;
    font-style: italic;
    line-height: 90%;
}
@media (min-width: 768px) {
    #testimonial p:nth-child(1) {
        font-size: 2.25rem;
    }
    }
#cta {
    text-align: center;
    background-color: var(--blue);
    color: #ffffff;
    padding-top: 70px;
    padding-bottom: 50px;

}
#cta .btn {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--blue);
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#cta .btn:hover {
    background-color: transparent;
color: #ffffff;
}
#cta p:nth-child(1) {
    font-family: 'Rajdhani', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 3rem;
line-height: 70%;
}
@media (min-width: 768px) {
    #cta p:nth-child(1) {
    font-size: 4rem;
    }
    }
@media (min-width: 992px) {
    #cta p:nth-child(1) {
    font-size: 5rem;
    }
    }
#cta p:nth-child(2) {
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    font-size: .975rem;
    line-height: 110%;
}
@media (min-width: 768px) {
    #cta p:nth-child(2) {
        font-size: 1.5rem;
        font-weight: 400;

    }  
}
#partners {
    background-color: #000000;
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
}
#partners h2 {
    color: #ffffff;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: var(--darkGrey);
    padding-bottom: 15px;
    margin-bottom: 25px;
}
#partners img {
width: 90%;
}
@media (min-width:992px) {
	#partners img {
		width:75%;
	}
}
#partners .btn {
    background-color: var(--golden);
    color: #ffffff;
    border-radius: 0px;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    margin-top: 50px;
    -webkit-transition: all .5s linear;
-moz-transition: all .5s linear;
-ms-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;
}
#partners .btn:hover {
    background-color: var(--brightBlue);

}

#areas {
    background-color: var(--lightBlue);
    color: var(--blue);
    padding-top: 70px;
    padding-bottom: 50px;
}
#areas h2 {
	color: var(--blue);
}
#areas p {
	margin-bottom:.3rem;
}

#nowHiring .btn-close-modal {
  background-color:var(--grey);
  color:#ffffff;
}
#nowHiring .modal-header {
  background-color:var(--blue);
}
#nowHiring h2 {
  color:#ffffff;
}
#nowHiring .btn-nowHiring {
  background-color:var(--blue);
  color:#ffffff;
  font-size:1.25rem;
}

#footer {
    background-color: var(--charcoal);
    padding-top: 25px;
    padding-bottom: 25px;
    color: #ffffff;
    padding-left: 0px;
    text-align: center;
}

#footer .phone {
	font-size:1.2rem;
}
#footer .col-md-3 {
    padding-top: 10px;
}
#footer .fa-facebook {
    font-size: 3rem;
}
#footer a:link, #footer a:visited {
    text-decoration: none;
    color: #ffffff;
}
#footer a:hover {
    color: var(--grey)
}