/*@import url(//db.onlinewebfonts.com/c/15a478cc0eb1d84f4077a2a9d28df0b2?family=DIN+Pro+Regular);*/
/*@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');*/
@font-face {
    font-family: 'DINPro-Medium';
    font-style: normal;
    font-weight: normal;
    src: local('DINPro-Medium'), url(fonts/DINPro-Medium_13936.woff) format('woff');
}

 /*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) { }

/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) { }

/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {  }

/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { }



* {
    margin:0;
    padding: 0;
    font-family: "DINPro-Medium";
    /*font-family: "beta-sans"; */
    /*font-family: "PT Sans", sans-serif, "Arial", Arial;*/

}

.headerback {
    /*background-image: url("images/blueback.png");*/
    /*background-repeat: no-repeat;*/
    background-image: linear-gradient(#6d9fe1, #fff);
}

#navbarSupportedContent ul {
    margin-top: 1rem;
}

#navbarNav {
    margin-top: -10px;
    margin-right: -10px;
}

#navbarNav ul li a {
    padding: 1rem 1.5rem;
    color: #000;
}

#navbarNav ul li a:hover {
    background-color: #007bff;
    color: #fff;
}

.navbar-brand {
    margin-right: 0;
}

 .navbar {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

    /*.navbarRight {*/
/*    margin-left: 20%;*/
/*}*/

.navbarRight .col-lg-9 {
    margin-right: -5rem;
    margin-top: 1rem;
}

img.threed {
    width: 250px;
  }

.topnav {
    padding-top: 2rem;
}

.topnav ul li {
    padding: 0 20px;
    /*background-color: #fff;*/
}

.topnav ul li a {
    font-size: 1.125rem;
    color: #000;
}



.topnav ul li a:hover {
    background-color: #0b1d81;
    color: #fff;
}



.logoimage {
    width: 15rem;
}

.round {
    width: 200px;
    height: 200px;
    margin-right: 4rem;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    float: left;
    shape-outside: circle();
}

h1.indent {
    margin-top: -1rem;
    margin-left: 9rem;
}

.indentText {
    margin-left: 6rem;
}

 .jumbotron h1.pageheading {
    color: #75a2d4  ;
}

.fourtyears {
    width: 13.5rem;
}

.bluetext {
    margin-top: -1rem;
    margin-left: -5.6rem;
    font-size: 1.4rem;
    color: #303879;
    font-weight: bold;
}

.blackText {
    color: #000;
}

span.experience {
    font-size: 2rem;
}


.greybackground {
    background-image: url('images/BACKGROUND1.png');
    /*background-image: url("images/greybacksicons.png");*/
    /*background-image: url("images/background.svg");*/
    background-repeat: repeat-x;
    margin-bottom: 1rem;
    padding: 26px 0 30px 0;
    background-position: center;
    background-color: grey;
}

.greybackground .col-lg-3 {
    min-height: 250px;
}

.greybackground .col-md-4 {
    min-height: 270px;
}

.offering {
    padding: 0 20px;
    background-color: #fff;
}

.offering h4 {
    margin-top: 1.4rem;
    color: #003778;
}

.offering p {
    margin-top: 1rem;
}

.bluestrip, .cardBluestrip {
    color: #fff;
    background-image: linear-gradient(#35a3e1, #000048);
    font-weight: bold;
}

.cardBluestrip p a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    /*padding: 0.5rem 6.6rem;*/
}

.cardBluestrip p {
    padding: 0.5rem 0 0.8rem 1.6rem;
}

.bluestrip  {
    margin: 2rem 0 0 0;
    padding: 0.8rem 3rem;
}

.bluestripclient {
    margin-left: -15px;
}

.bluestrip p a {
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

#greyCol .col-lg-4 {
    max-width: 30%;
}

.icon {
    margin-top: -6rem;
    margin-left: 13.5rem;
}

.icon img {
    width: 90px;
}

.services {
    color: #003778;
}

#myTabContent h4.services {
    margin-top: 2rem;
}

.services-content {
    font-weight: bold;
}

.contact {
    margin-top: 1%;
}

/* Portfolio */
#portfolio img {
    width: 100%;
}

/*  Porperty clients */
.propclients img {
    margin:5px 0;
}

/* Contact */
.contact-image img {
    max-width: 640px;
    width: 100%;
}



/* Footer icons */
.fa {
    padding: 10px;
    font-size: 20px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
    background: #3B5998;
    color: white;
}

.fa-linkedin {
    background: #007bb5;
    color: white;
}

.fa-instagram {
    background: #125688;
    color: white;
}

#ourproducts .row {
    margin: 1rem 0 2rem 0;
}





/* Overides */
#myCarousel {
    margin-left: 17%;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    background-color: #80808070;
}

.jumbotron {
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 1rem;
    background-color: transparent;
}

.jumbotron h1 {
    color: #fff;
}

.container-fluid {
    padding: 0;
}

.card {
    /*min-height: 210px;*/
    border: none;
    border-radius: 0;
    position: static;
}

.greyBlock {
    padding: 2rem 0 2rem 2rem;
    background-color: #AFADAE;
    background-image: linear-gradient(#afadae, #eee);
}

.whyChooseUs {
    font-size: 1.8rem;
    color: #75a2d4;
    font-weight: bold;
    margin-top: 10px;
}


.clients a {
    margin-bottom: 5px;
    padding: 0.5rem 0rem;
    display: block;
    width: 90%;
}

.clients a img {
    width: 90%;
}

.client_logos {
    margin-left:-4.5%;
    width: 40%;
}

.column a img {
    width: 100%;
}

.carousel-control-next, .carousel-control-prev {
    width: 5%;
}

img.draw {
    width: 80%;
}

/* Form */
.collapse {
    width: 100%;
}

/* modal */
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* Responsive overrides */

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }


}


/*// Small devices (landscape phones, 576px and up)*/
@media screen and (max-width: 575.98px) {
    .icon img {
        display: none;
    }

    h1.pageheading {
        font-size: 3.5rem;
    }

    h1.mobileText, h1.display-3 {
        font-size: 2.5rem;
    }

h1.indent {
    margin-top: -1rem;
    margin-left: 5rem;
}

.round{
    float: none;
}
.bluetext {
    margin-left: 0;
}


}


/*// Small devices (landscape phones, less than 768px)*/
@media  (max-width: 767.98px) {
    .icon img {
        display: none;
    }

    .greybackground {
        background-image: none;
    }

#myCarousel {
    margin-left:0;
}

}

@media (max-width: 991.98px) {

    .navbarRight {
        margin-left: 9rem;
    }

    .icon img {
        display: none;
    }


}


/* Large devices */
@media (min-width: 992px) and (max-width: 1199.98px) {

    .navbarRight {
        margin-left: 29rem;
    }

}