h1, h2, h3, h4, h5, h6, p, a, u, i, span, label, button {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #dedede;
}

.text-yellow {
    color: #f5b92a;
}

.text-white {
    color: #dedede !important;
}

header.masthead {
    background: linear-gradient(to bottom,rgba(58, 55, 53, 0.8),rgba(58, 55, 53, 0.8)),url(../img/hero\ header.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

footer p, footer a {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 8pt;
}

footer {
    background-color: #404040;
    color: #ffffff;
}

footer a {
    color: #ffffff;
}

footer a:hover {
    color: #f5b92a;
}

.container {
    margin-left: auto;
    margin-right: auto;
}

.page-section {
    padding: 0;
}

.layer {
    background-color: rgba(0, 0, 0, 0.57);
}

#about.page-section {
    background-image: url(../img/section1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#about.page-section .container .row .about{
    background-color: rgba(58, 55, 53, 0.8); 
    padding: 7.4% 5%;
}

#services.page-section {
    background-image: url(../img/section2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

#services.page-section .container .row .cont-define{
    background-color: rgba(58, 55, 53, 0.8); 
    padding: 8% 3%;
}

#contact.page-section {
    background-image: url(../img/section3.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

#contact.page-section .container .row .contact{
    background-color: rgba(58, 55, 53, 0.8); 
    padding: 7.6% 5%;
}

.simple-head {
    font-size: 29pt;
    display: inline;
}

ul.services {
    list-style-type: disc;
    font-size: 22pt;
    color: #f5b92a;
}

ul p {
    color: white;
    font-size: 1rem;
}

#mainNav.navbar-scrolled {
    background-color: #000000f2;
}

#mainNav.navbar-scrolled .navbar-brand {
    color: #ffffff;
}

#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link.active {
    color: #f5b92a!important;
}

#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
    color: #ffffff!important;
}

#mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
    color: #f5b92a;
}

.btn-primary {
    color: #f5b92a;
    background-color: #34343400;
    border: 1px #f5b92a solid;
}

.btn-primary:hover, .btn-primary:active {
    color: #000;
    background-color: #f5b92a;
}

.fab {
    color: #f5b932;
}

footer h5, h6 {
    color: #f5b932;
}

.about {
    right: -105px;
}

.cont-define {
    margin-left: 200px;
    margin-right: -105px;
}

.contact {
    right: -105px;
}

.service-subhead {
    font-size: 20pt;
}

/* EXTRA STYLE */

.loading-in-progress::before { /* background cover */
    content: '';
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background-color: #343434;
    z-index: 100000;
}

.loading-in-progress::after { /* spinner */
    content: '';
    position: fixed;
    left: 45vw; top: 48vh;
    transform: translate(-50%,-50%);
    width: 100px; height: 100px;
    background-image: url('../img/INSIGNIA/PNG/INS1-2.PNG');
    background-size: 50%;
    animation: 1s infinite forwards spin-animation;
    z-index: 100000;
}

@keyframes spin-animation { /* make the spinner spin */
    0% {transform: rotate(0deg)}
    100% {transform: rotate(360deg)}
}

/* width */
::-webkit-scrollbar {
    width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #343434; 
    border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #f5b92a8f; 
    border-radius: 20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #f5b92ac4; 
}

    @media only screen and (max-width: 768px) {
        .taglines {
            display:none;
        }

        .cont-define {
            margin-left: 0;
            margin-right: 0;
        }

        .about {
            right: 0;
        }

        .contact {
            right: 0;
        }
    }

    @media only screen and (width: 1024px) {

        .cont-define {
            margin-left: 80px;
            margin-right: -56px;
        }

        .about {
            right: 0;
        }

        .contact {
            right: 0;
        }
    }