*{ box-sizing: border-box; }
body{ padding:0; margin: 0; font-size: 20px; color: #ffffff; font-family: 'Roboto',sans-serif; }
img{ max-width: 100%; }
a,a:hover,a:visited,a:focus,a:active{ text-decoration: none; }

h2{ font-size: 42px; margin: 0 0 30px; font-weight: bold; text-transform: uppercase; }

.btn-primary{ color: #ffffff; background-color: #0880C4; border-color: #0880C4; border-radius: 4px; font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 15px 20px; line-height: 18px; box-shadow: 6px 6px 6px rgba(0,0,0,.15); }
.btn-primary:hover{ background-color: #EDC564; border-color: #EDC564; }
form .btn-primary{ padding: 15px 50px; }
.btn-secondary{ color: #ffffff; background-color: #1E1951; border-color: #1E1951; border-radius: 4px; font-size: 18px; font-weight: bold; text-transform: uppercase; padding: 15px 20px; line-height: 18px; box-shadow: 6px 6px 6px rgba(0,0,0,.15); }
.btn-secondary:hover{ background-color: #EDC564; border-color: #EDC564; }

#link_bar{ background-color: #EDC564; padding: 12px 0; }
#link_bar a{ display: inline-block; color: #1E1951; text-transform: uppercase; font-size: 16px; font-weight: bold; }
#link_bar span{ display: inline-block; color: #1E1951; margin: 0 12px; }

header{ padding: 12px 30px ; background-color: #ffffff; }
header .header-left{ display: flex; align-items:center; align-content: center; flex-wrap: nowrap; }
header .header-left .socials{ margin-left: 30px; }
header .header-left img{ width: 24px; }
header .header-left .logo img{ width: 200px; }
header .header-left a{ display: inline-block; }
header .header-left a + a{ margin-left: 12px; }
header .header-right{ display: flex; align-items: center; align-content: center; flex-wrap: nowrap; }
header ul{ margin: 0; padding: 0; list-style-type: none; }
header ul li{ display: inline-block; padding: 0 15px; }
header ul li a{ display: block; text-transform: uppercase; font-size: 16px; font-weight: bold; color: #1E1951; }
header .header-right ul + a{ margin-left: 30px; }
header .btn{ font-size: 16px; }

.sticky-header header{ position: fixed; top: 0; left: 0; width: 100%; z-index: 100; }
.sticky-header{ padding-top: 126px; }

#hero{ background-repeat: no-repeat; background-size: cover; background-position: center; height: 600px; }
#hero img{ width: 175px; }

#hero h1{ font-size: 60px; font-weight: bold; margin: 30px 0 45px; }
#hero img + *{ margin-top: 100px; }
#hero .btn-primary{ font-size: 20px; line-height: 20px; padding: 20px 40px; }
#hero .carousel-item{ background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; }
.shade{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.3); z-index: 1; }
#hero .carousel-item .container-fluid{ position: relative; z-index: 2; }
#hero .carousel-indicators{ z-index: 3; }

.service-banner{ background-color: #1E1951; padding: 60px 15px; text-align: center; height: 100%; }
.service-banner-image{ width: 200px; height: 200px; border-radius: 100%; overflow: hidden; border: 3px solid #0880C4; background-repeat: no-repeat; background-size: cover; background-position: center; margin: auto; }
.service-banner h3{ font-size: 26px; text-transform: uppercase; font-weight: bold; margin: 45px 0 0; }
.service-banner hr{ border-color: #ffffff; margin: 15px auto 30px; border-width: 3px; width: 65px; opacity: 1; }
.service-banner p{ font-size: 16px; font-weight: 500; margin: auto; width: 90%; }

#about{ background-color: #2D358B; padding: 60px 0; }
#about p{ font-size: 18px; font-weight: 500; margin: 0; }
#about p a{ display: inline-block; color: #EDC564; }
#about p span{ display: inline-block; color: #EDC564; margin: 0 5px; }
#about p span:last-of-type{ display: none; }
#about .btn + .btn{ margin-left: 15px; }

#projects{ padding: 60px 0; }
#projects h2{ color: #1E1951; }
#projects p{ color: #000000; font-size: 18px; font-weight: 500; margin: 0; }
#projects p + p{ margin-top: 15px; }

.projects{ position: relative; }
.project{ flex: 0 1 calc(100% / 3); padding: 0 12px; margin-bottom: 24px;  }
.project-content{ background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; height: 320px; display: flex; align-content: center; align-items: center; flex-wrap: nowrap; cursor: pointer;  }
.project-content h3{ font-size: 17px; text-transform: uppercase; color: #ffffff; font-weight: bold; margin: 0; text-align: center; background-color: rgba(8,128,196,.75); padding: 29px; width: 100%; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; }
#projects .project-content h3 p{ font-size: 14px; color: #ffffff; margin: 5px 0 0; }
.project-content:hover h3{ background-color: rgba(237, 197, 100,.75); }
.project-details{ display: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 10; background-color: #0880C4; margin: 0 12px 24px; }
.project-details.show{ display: block; }
#projects .project-details *{ color: #ffffff; }
#projects p.project-details-title{ font-size: 30px; text-transform: uppercase; font-weight: bold; margin: 0; }
#projects p.project-details-location{ font-size: 18px; text-transform: uppercase; margin: 0 0 30px; }
.project-details-content{ display: flex; align-items: stretch; align-content: stretch; height: 100%; }
.project-details-image{ flex: 0 1 50%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }
.project-details-text{ flex: 0 1 50%; text-align: center; padding: 60px 30px; height: calc(100% - 200px); overflow: auto; height: 100%; }
.close-project-details{ position: absolute; top: 0; right: 15px; font-size: 30px; font-weight: bold; }

#news{ background-color: #1E1951; padding: 60px 0; }
#news h2{ text-align: center; }
#news_slider{ display: flex; align-items: center; align-content: center; }
#news_slider .slick-list{ min-width: 100%; }
#news_slider .news-link{ flex: 0 1 calc(50% - 25px); width: calc(50% - 25px); height: 580px; padding: 0 25px; }
#news_slider .news-link a{ width: 100%; height: 100%; display: flex;  align-items: center; align-content: center; flex-wrap: nowrap;  border: 5px solid #0880C4; position: relative;  background-repeat: no-repeat; background-position: center; background-size: cover; }
#news_slider .news-link a:hover .news-text{ background-color: rgba(237, 197, 100,.75); }
.news-text{ background-color: rgba(8,128,196,.75); width: 100%; text-align: center; padding: 30px; transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; }
.news-title{ text-transform: uppercase; color: #ffffff; font-size: 20px; font-weight: bold; margin: 0; }
.news-title + p{ color: #ffffff; font-size: 14px; margin: 10px 0 0; }
.slick-prev{ padding-right: 15px; }
.slick-next{ padding-left: 15px; }
.slick-arrow img{ width: 120px; }

footer{ padding: 60px 0; border-bottom: 30px solid #EDC564; }
footer img{ width: 180px; }
footer .footer-right{ flex: 0 1 280px; width: 280px; }
footer .socials img{ width: 32px; }
footer .socials a{ display: inline-block; }
footer .socials a + a{ margin-left: 16px; }
footer p{ font-size: 16px; font-weight: bold; color: #1E1951; text-align: left; }
footer p a{ color: #1E1951; }

#footer_signup{ border-bottom: 2px solid #1E1951; }
#footer_signup h3{ font-size: 30px; margin: 0 0 30px; color: #1E1951; font-weight: bold; text-transform: uppercase; }
#footer_signup .form-control{ border: 2px solid #0880C4; font-size: 20px; padding: 15px; }
#footer_signup .mc4wp-error{ color: red; margin: 5px 0 0; }
#footer_signup .mc4wp-success{ color: #0880C4; margin: 5px 0 0; }

#quote{ background-color: #1E1951; padding: 60px 0; }
#quote p{ font-size: 18px; font-weight: 500; margin: 0 0 60px; }

.form-control,.form-select{ border: 3px solid #0880C4; border-radius: 0; height: auto; font-size: 26px; padding: 20px; color: #000000; }
.form-control:focus,.form-select:focus{ box-shadow: none; border-color: #0880C4; }
#quote span + p{ font-size: 14px; margin: 0; }

.wpcf7-spinner{ display: none; }

.open-mobile-nav{ display: none; }
.open-mobile-nav img{ width: 30px; }
#mobile_nav{ display: none; padding: 30px; position: relative; background-color: #ffffff; }
#mobile_nav.open{ display: block; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; }
#mobile_nav ul{ padding: 0; margin: 0; list-style-type: none; text-align: center; }
#mobile_nav ul li{ padding: 10px 0; }
#mobile_nav ul li a{ display: inline-block; text-transform: uppercase; font-size: 16px; color: #000000; font-weight: bold; }
.close-mobile-nav{ position: absolute; top: 0; right: 15px; color: #000000; font-size: 30px; font-weight: bold; }

#project hr{ border-color: #0880C4; border-width: 4px; margin: 15px auto 45px; width: 200px; opacity: 1; }
.news-item{ padding-top: 100%; }

.news-list .news-link{ flex: 0 1 calc(100% / 3); height: 400px; padding: 0 15px; margin-bottom: 30px; }
.news-list .news-link a{ height: 100%; display: flex; align-items: center; align-content: center; flex-wrap: nowrap; background-repeat: no-repeat; background-size: cover; background-position: center; background-color: rgba(0,0,0,.5); }
.news-list .news-link a:hover .news-text{ background-color: rgba(237, 197, 100,.75); }

#hero .container-fluid{ position: relative; padding-left: 30px; }
#hero img{ position: absolute; top: 45px; left: 55px; }

#news h2 + p{ font-size: 18px; font-weight: 500; }

.wpcf7 form.sent .wpcf7-response-output{ position: fixed; top: 20vh; z-index: 99999; background-color: #ffffff; color: #1E1951; width: 50vw; left: 25vw; min-height: 30vh; display: flex; align-items: center; align-content: center; justify-content: center; border-width: 5px;}

@media only screen and (max-width: 991px){
    .service-banner-image{ width: 150px; height: 150px; }
    .service-banner p{ width: 75%; }
    .project{ flex: 0 1 50%; padding: 0 6px; margin-bottom: 12px; }
    #news_slider .news-link{ height: 400px; flex: 0 1 calc(50% - 12px); width: calc(50% - 12px); padding: 0 12px; }
    #news_slider .news-link a{ border-width: 3px; }
    header ul li{ padding: 0 8px; }
    header ul li a{ font-size: 14px; }
    header .header-right ul + a{ margin-left: 15px; }
    header .btn{ font-size: 14px; padding: 12px 24px; }
    .news-list .news-link{ flex: 0 1 50%; }
    #hero img{ top: 35px; }
}

@media only screen and (max-width: 767px){
    .service-banner{ padding: 30px 15px; }
    h2{ font-size: 36px; margin: 0 0 20px; }
    #about{ padding: 30px 0; }
    #projects{ padding: 30px 0; text-align: center; }
    header{ padding: 15px 0; }
    .project-details-content{ flex-wrap: wrap; }
    .project-details-image{ flex: 0 1 100%; height: 200px; }
    .project-details-text{ flex: 0 1 100%; padding: 30px; }
    #projects p.project-details-title{ margin: 0 0 15px; }
    #news{ padding: 30px 0; }
    #news_slider .news-link{ height: 380px; }
    footer .d-flex > *{ flex: 0 1 100%; text-align: center; }
    footer .d-flex > * + *{ margin-top: 15px; }
    footer p{ text-align: center; }
    footer{ padding: 30px 0; }
    #hero img{ width: 150px; }
    #hero{ height: 450px; text-align: center; }
    #hero h1{ font-size: 50px; margin: 20px 0 30px; }
    #hero img + *{ margin-top: 175px; }
    #link_bar{ padding: 8px 0 ;}
    #link_bar a{ font-size: 14px; }
    #quote{ padding: 30px 0; }
    .form-control,.form-select{ font-size: 20px; padding: 15px; }
    .open-mobile-nav{ display: inline-block; }
    .header-right ul, .header-right .btn{ display: none; }
    .sticky-header{ padding-top: 108px; }
    #project_list .project{ flex: 0 1 50%; }
    .news-list .news-link{ flex: 0 1 100%; }
    #about .btn + .btn{ margin-left: 0; margin-top: 15px; }
    #hero img{ top: 45px; left: 35px; }

}

@media only screen and (max-width: 575px){
    .project{ flex: 0 1 100%; }
    .project-details{ position: fixed; z-index: 9999; margin: 0; }
    footer img{ width: 140px; }
    #hero h1{ font-size: 40px; margin: 15px 0 20px; }
    #hero .btn-primary{ font-size: 16px; line-height: 16px; padding: 15px 30px; }
    #news_slider{ padding: 0 40px 0 15px; }
    .slick-arrow{ padding: 10px; position: relative; }
    .slick-arrow > img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
    header .header-left .logo img{ width: 150px; }
    .sticky-header{ padding-top: 85px; }
    #project_list .project{ flex: 0 1 100%; }
    #link_bar a{ font-size: 12px; }
    #hero img{ width: 125px; left: 25px; top: 15px; }

}