.span-role {
    font-style: italic;
    font-size: 100% !important;
}

.p-position {
    margin-bottom: 0.75em !important;
}

.heading-left {
    text-align: left !important;
}

.section-directory {
    padding: 50px 0px 0px 0px !important;
}

.logo-small {
    height: 200px;
}

.accordion .ac-title {
    font-size: 20px !important;
    line-height: 42px;
}

.ac-content {
    font-size: 1.25em;
    line-height: 2em;
}

.vertical-center {
    position: relative !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

.fill-img {
    object-fit: cover;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.html,
.body {
    height: 100%;
}

.btn.btn-light.btn-light-hover:hover,
.btn.btn-light.btn-light-hover:focus,
.btn.btn-light.btn-light-hover:active,
.btn.btn-light.btn-light-hover.active {
    color: #FFF !important;
}

a:focus a:hover a:active .hover-light {
    color: #FFF !important;
}

#mainMenu nav>ul>li>a {
    font-size: 16px;
    letter-spacing: 3px;
}

#mainMenu nav>ul>li .dropdown-menu>li>a {
    padding-top: 16px;
    padding-bottom: 16px;
    display: block !important;
    font-size: 14px !important;
    line-height: 15px !important;
    font-family: "Raleway", "Helvetica", "Arial", sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    padding-left: 23px;
}

// Resetting from the mobile up!
// 
// Dropping the root* element font size to 14px is something
// I do on almost all projects, a 16px font size on mobiles
// is not normally needed. --> Only my opinion of course!
//
// At mobile size I used the scale "Major Second" from 
// type-cale.com to set out the heading sizes as well as the
// "Major Third" scale for the .display-* classes however my
// technique was to begin the scale from the h1's front size.
// To do this simply do the h1 font size * scale size. So in 
// in this example it was 1.602 * 1.250 = 2.0025 I went with 
// 2em to keep it simple.
//
//------------------------------------------------------------//
html,
body {
    font-size: 14px !important;
}

h1 {
    font-size: 1.602em;
}

h2 {
    font-size: 1.424em;
}

h3 {
    font-size: 1.266em;
}

h4 {
    font-size: 1.125em;
}

h5 {
    font-size: 0.889em;
}

h6 {
    font-size: 0.79em;
}

.display-1 {
    font-size: 3.906em;
}

.display-2 {
    font-size: 3.125em;
}

.display-3 {
    font-size: 2.5em;
}

.display-4 {
    font-size: 2em;
}

.heading-jumbo {
    font-size: 3.5em;
}

// Medium devices (tablets, 48em and up)
// 
// At this point you have overridden Bootstraps rem's and are
// into module based font sizes should you require it. 
//
// I took a while over this change because I felt that there
// is no reason why I cant use a modified scale on another 
// device size. So I did, the headings have now taken on
// "Perfect Fourth" and the dislpay-* has been put to the
// Bootstrap defaults.
//
//------------------------------------------------------------//
@media (min-width: 48em) {
    h1 {
        font-size: 2.441em;
    }

    h2 {
        font-size: 1.953em;
    }

    h3 {
        font-size: 1.563em;
    }

    h4 {
        font-size: 1.25em;
    }

    .display-1 {
        font-size: 6em;
    }

    .display-2 {
        font-size: 5.5em;
    }

    .display-3 {
        font-size: 4.5em;
    }

    .display-4 {
        font-size: 3.5em;
    }
}

// Large devices (desktops, 62em and up)
@media (min-width: 62em) {

    html,
    body {
        font-size: 16px !important;
    }
}

// Extra large devices (large desktops, 75em and up)
@media (min-width: 75em) {

    html,
    body {
        font-size: 18px !important;
    }
}

[data-slides] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: 1s linear;
}

.background-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0px;
    background-color: #fff;
    z-index: 1;
    overflow: hidden;
    opacity: 1.0;
    -webkit-transition: background-image 1.5s linear;
    -moz-transition: background-image 1.5s linear;
    -o-transition: background-image 1.5s linear;
    -ms-transition: background-image 1.5s linear;
    transition: background-image 1.5s linear;
}

.p {
    font-size: 4vw !important;
    line-height: 6vw !important;
    margin: 0 0 6vw !important;
}

.slider-heading {
    font-weight: 600;
    font-size: 3em;
}

.call-to-action {
    position: relative;
    overflow: hidden;
    padding: 36px 40px 36px;
    margin-bottom: 0px;
}

.call-to-action a.btn {
    margin-top: 0px;
}

@media screen and (min-width: 768px) {
    p {
        font-size: 18px;
    }
}

#page-title.page-title-right .breadcrumb {
    float: none;
    text-align: right;
    color: #FFF;
}

#page-title div>div>nav>ol>a {
    color: #FFF !important;
}

#page-title .page-title {
    width: 100%;
}

#page-title .breadcrumb {
    width: 100%;
}

@media (max-width: 991px) {

    #img-resp {
        display: block;
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    #btn-mobile {
        width: 100%;
        border-color: white;
        border-width: thin;
    }


}

.login-portal {
    font-family: "Raleway", "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #252525;
    text-transform: uppercase;
    transition: all .3s ease;
}

.login-border {
    border-left-width: 1px !important;
    border-left-color: #eeeeee !important;
    border-left-style: solid !important;
}


@media (max-width: 1025px) {
    #mainMenu nav>ul>li>a {
        font-size: 15px !important;
        letter-spacing: 0px !important;
    }

    #mainMenu nav>ul>li .dropdown-menu>li>a {
        font-size: 12px !important;

    }

    .login-portal {
        display: block;
        padding: 0px 0;
        font-size: 13px !important;
        border: 0;
        border-radius: 0;
        letter-spacing: 0px !important;
    }

    .login-mobile {
        margin-left: 0px !important;
    }

    .login-border {
        border-left: 0px solid #eeeeee !important;
    }

    .padding-mobile {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .margin-mobile {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .video-mobile {
        max-width: 100% !important;
    }

    .btn.btn-lg {
        padding-left: 20px;
        padding-right: 20px;
    }
}


.inspiro-slider .slide {
    display: inherit;
}

.btn.btn-light.btn-outline:hover {
    color: #ffffff !important;
}

.text-box p {
    color: #646464 !important;
    font-weight: 400;
    font-size: 14px;
}

.pw-continer,
.container {
    /* margin: auto !important; */
}

.form-text {
    font-size: 14px;
}

.card-header {
    font-size: 18px;
}

.form-control:focus {
    border-color: #1F510C;
    box-shadow: 0 0 0 0.2rem rgba(31, 81, 12, .25);
}

.btn-link {
    font-weight: 700;
    color: #FFF;
}

.btn-link:hover {
    font-weight: 700;
    color: #FFF;
    text-decoration: none;
}

.btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(31, 81, 12, .25);

}

#topbar .top-menu>li>a {
    font-weight: 600;
}

.portfolio-item.no-overlay .portfolio-description p,
.portfolio-item.no-overlay .grid-description p,
.grid-item.no-overlay .portfolio-description p,
.grid-item.no-overlay .grid-description p {
    font-weight: 700;
    font-size: 14px;
}


div.major-text p {
    font-size: 16px !important;
}

@media (max-width: 576px) {
    .container-mobile {
        max-width: 100% !important;
        padding-left: 0px !important;
        padding-right: 0px !important;

    }
}

.hide {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

.heading-title {
    font-family: "Montserrat", "Helvetica", "Arial", sans-serif !important;
    font-weight: 700 !important;
}

.text-box i {
    color: #565656 !important;
}

.hovered-cost {
    margin-top: -10px !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

.owl-carousel .owl-dots {
    margin-top: 10px;
}

.btn.btn-light:not(.btn-outline):not(.btn-icon-holder):hover {
    color: #FFF;
}

a:not(.btn):hover {
    color: #1F510C;
}

#scrollTop:hover {
    background-color: #1F510C !important;
}

@media (min-width: 1025px) {


    #mainMenu nav>ul>li>a {
        font-size: 16px;
        letter-spacing: 3px;
    }

    #mainMenu nav>ul>li .dropdown-menu {
        padding-left: 0px;
        border-left-width: 0px;
        padding-right: 0px;
        border-right-width: 0px;
        border-width: 0px !important;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15), 0 2px 6px 0 rgba(0, 0, 0, .15);
    }



    #mainMenu nav>ul>li .dropdown-menu>li>a {
        padding-top: 16px;
        padding-bottom: 16px;
        display: block !important;
        font-size: 14px !important;
        line-height: 15px !important;
        font-family: "Raleway", "Helvetica", "Arial", sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        white-space: nowrap;
        padding-left: 23px;
    }

    #mainMenu nav>ul>li .dropdown-menu>li>a:hover {
        background-color: rgb(221, 221, 221);
        color: #1F510C !important;
    }

    #mainMenu nav>ul>li .dropdown-menu>li>a:active {
        background-color: #1F510C;
        color: #FFF !important;
    }

    #mainMenu nav>ul>li .dropdown-menu>li.current>a {
        background-color: #1F510C;
        color: #FFF !important;
    }

    #mainMenu nav>ul>li:hover>a {
        color: #1F510C !important;
        /* background-color: rgba(221, 221, 221, 0.774); */
    }

    #mainMenu nav>ul>li.current>a {
        background-color: #FFF;
        color: #1F510C !important;
    }

}

@media (min-width: 1240px) {
    .container-fluid, .container-wide {
        padding-left: 0px !important; 
        padding-right: 0px !important;
    }
    }

    p > a:not(.btn) {
        color: #1F510C !important;
    }

    .text-box:hover {
        background: #F7F9FB;
    }

    #mainMenu nav > ul > li .dropdown-menu {
        min-width: 10rem !important;
    }