/*----------------------------------------------------------------
[Master Stylesheet]

Project:    Onboarding
Version:    1.1
Last change:    26/02/2022
Assigned to:    Rachel Shepherd
Updated by:     Rachel Shepherd
Primary use:    Onboarding Styles 
-------------------------------------------------------------------*/

/*Overall Styles*/
.pb-20{
    padding-bottom: 20px;
}

.teal-bg{
    background: #91cdb9;
}

/*Navigation*/
.hamburgerNew {
    width: 24px;
    height: 18px;
    position: relative;
    margin: 0 10px;
    display: none;
    z-index: 200;
    cursor: pointer;
}

.hamburgerNew [class^=line-] {
    display: block;
    background-color: #2c2c2b;
    width: 24px;
    height: 2px;
    position: absolute;
    left: 0;
    border-radius: 2px;
    transition: all 300ms,opacity 100ms;
    outline: 1px solid transparent;
}

.hamburgerNew [class^=line-].line-2 {
    top: 8px;
}

.hamburgerNew [class^=line-].line-1 {
    top: 0;
}

.hamburgerNew [class^=line-].line-3 {
    bottom: 0;
}

@media screen and (max-width: 767px){
    .hamburgerNew {
        display: block;
    }

}

.main-nav.open{
    display: block !important
}

/* Welcome */

.roudned-left{
    border-radius: 15% 0 0 15%;
}

.roudned-right{
    border-radius: 0 15% 15% 0;
}

.bk-grey{
    background: #eee;
}

.backgroundImg{
    background: url("../images/WelcomePhoto.jpg");
    min-height: 500px;
    background-size: cover;
}

.centered{
    text-align: center;
    width: 100%;
}

.vcenter-item {
    height: 100%;
    display: flex;
    align-items: center;
}

/*Carousel*/
.carousel-indicators li{
    background-color: rgb(0 0 0 / 50%) !important;
}
.carousel-indicators .active {
    background-color: #000000 !important;
}


/*Benefits Sections*/
.benifits{
    font-weight: 700;
    min-height: 150px;
    background: #ffffffb8 !important;
    color: black !important;
    text-align: center !important;
    padding: 10px;
    font-size: 21px;
}

.mar-right {
    padding-right: 0 !important;
}

.pd-bottom{
    padding-bottom: 0 !important;
}

.yellow-brd{
    border: 5px solid #ffd618;
}


.benifits{
    min-height: 185px;
    background: #ffffffb8 !important;
    color: black !important;
    text-align: center !important;
    width:100%;
}

.benifits p {
    width:100%;
}

.yellowtext{
    color:#ffd618 !important;
}

.header-logo h1 {
    color: #deb88700;
    font-size: 0px;
}

.main-nav a {
    text-decoration: none !important;
}

.header {
    position: fixed !important;
    width: 100% !important;
}

.header .header-inner {
    padding: 21px 150px;
    position: relative;
}

.header {
    min-height: 111px !important;
}

.header .header-inner {
    padding: 17px;
    position: relative;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
}

.green-brd{
    border: 5px solid #194c52;
}
.red-brd{
    border: 5px solid #e3a9b4;
}
.blue-brd{
    border: 5px solid #93c2ec;
}
.purple-brd{
    border: 5px solid #9142d0;
}
.darkgreen-brd{
    border: 5px solid #52978a;
}
.yellow-brd{
    border: 5px solid #ffd618;
}

.show-mb{
    display: none;
}

#MeetTheTeam .section-text {
    min-height: 649px !important;
}

/* Media Queries*/
@media (max-width:991px){
    .header {
        min-height: unset !important;
    }
    #startingPoint{
        margin-top: 49px !important;
    }
    .header img {
        margin-bottom: 20px !important;
    }
    #MeetTheTeam .section-text {
        min-height: 498px !important;
    }
    .roudned-left {
        border-radius: 0;
    }
    img {
        margin: 0 auto;
        display: block;
    }
    #WorkingWithUs img.attachment-large.size-large {
        max-width: 180px;
    }

    #WorkwithUsCont .vcenter-item {
        display: block;
    }

    #Prohecrs img{
        max-width: 185px;
    }

    .mar-right {
        padding-right: 15px !important;
    }

    .grid-xs-12.grid-m-6.has-bg.dark-teal-bg {
        padding-bottom: 84px;
    }
    .hide-mb{
        display: none;
    }
    .show-mb{
        display: block !important;
    }

    #WorkingWithUs .vcenter-item {
        display: block;
    }
}


a {
    text-decoration: underline !important;
}

.main-nav .menu .menu-item {
    margin: 20px 0px !important;
    text-align: center;
}

.has-decoration:before {
    content: "";
    display: block;
    height: 0px !important;
    background-color: unset !important;
    margin-bottom: 0;
}