@media only screen and (min-width: 0px) and (max-width: 667px) {
    .offering-sustainable-benefit {
        z-index: 1;
        margin-top: 0px;
    }
    .location-container-australia {
        height: 150px;
        background-image: url(../img/cards/fraser-mcgill-australian-office@3x.png);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .location-container-south-africa {
        height: 150px;
        background-image: url(../img/cards/fraser-mcgill-head-office@3x.png);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: 0px;
    }
}


/********** iPhone SE portrait ********/

@media only screen and (min-width: 320px) and (max-width: 568px) {}


/********** iPhone SE landscape ********/

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: landscape) {}


/********** iPhone 6,7,8  portrait********/

@media only screen and (min-width: 375px) and (max-width: 667px) and (orientation: portrait) {}


/********** iPhone 6,7,8 landscape ********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}


/********** Galaxy S9+ portrait ********/

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}


/********** Galaxy S9+ landscape ********/

@media screen and (min-width: 360px) and (max-height: 640px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}


/********** iPhone 6+,7+,8+ portrait ********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait) {}


/********** iPhone 6+,7+,8+ landscape ********/

@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {}


/********** Custom media quries ********/

@media only screen and (max-width: 1000px) {
    .video-bg video {
        width: auto;
        height: 100%;
    }
}

@media only screen and (min-width: 1200px) {
    .video-bg video {
        width: 100%;
    }
    .dropdown-menu-case-studies {
        width: 280%;
    }
    .dropdown-menu {
        left: -28%;
    }
    .index-hero .container-hero {
        padding-top: 285px;
        padding-bottom: 140px;
    }
    .about-hero {
        margin-top: 150px;
        /* margin-bottom: 60px; */
    }
    .about-hero .image-container {
        margin-top: -150px;
    }
    .passion-container {
        /* background-image: url(../img/backgrounds/about-background.png); */
        /* background-size: 100% 100%;
        background-position: 0px 50%;
        background-repeat: no-repeat; */
    }
    .Passion123 {
        margin-top: 348px;
        /* margin-top: 100px; */
    }
    .ventilation-assessment .bg-dark-grey-gradient {
        padding: 51px 65px 51px 45px;
        margin-right: -30px;
    }
    .power-assessment .bg-dark-grey-gradient {
        padding: 52px 65px 52px 45px;
        margin-right: -30px;
    }
    /* Content Container */
    .methodology-benefit .timeline-container .bg-dark-grey {
        height: 100px;
    }
    /* Content Container with orange border */
    .methodology-benefit .timeline-container .bg-dark-grey.border-vivid-orange {
        height: 100px;
        border: solid 1px #ffa627;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .passion-container {
        /* background-image: url(../img/backgrounds/about-background.png);
        background-size: 100% 70%;
        background-position: top -100px left;
        background-repeat: no-repeat; */
    }
    .Passion123 {
        margin-top: 348px;
        /* margin-top: 100px; */
    }
    .index-hero .container-hero {
        padding-top: 185px;
        padding-bottom: 140px;
    }
    .ventilation-assessment .bg-dark-grey-gradient {
        padding: 64px 65px 64px 45px;
        margin-right: -30px;
    }
    .power-assessment .bg-dark-grey-gradient {
        padding: 52px 50px 52px 45px;
        margin-right: -30px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 991px) {
    .ventilation-assessment .bg-dark-grey-gradient {
        background: #121625;
        padding: 52px 30px 52px 30px;
        border-radius: 20px;
    }
    .power-assessment .bg-dark-grey-gradient {
        background: #121625;
        padding: 52px 30px 52px 30px;
        border-radius: 20px;
    }
    .founders-section .employees .tab-list {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        justify-content: center !important;
    }
    .founders-section .employees .tab-list a.list-group-item-action {
        flex-grow: 1;
        width: 100% !important;
        background: #121625;
    }
    .founders-section .employees .tab-list a img {
        filter: none;
        -webkit-filter: none;
        margin-right: 10px;
        margin-bottom: 0px;
    }
    .founders-section .employees .tab-list a.active {
        color: #fff;
        background: #0e99ff;
    }
    .founders-section .employees .tab-list a.active img {
        filter: brightness(0) invert(1);
        -webkit-filter: brightness(0) invert(1);
        margin-right: 10px;
    }
    .founders-section .employees .tab-list a.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 1.25rem;
        right: 1.25rem;
        height: 2px;
        background-color: transparent;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .video-bg video {
        width: auto;
        height: 100%;
    }
    .passion-container {
        /* background-image: url(../img/backgrounds/about-background.png);
        background-size: 110% 60%;
        background-position: top left;
        background-repeat: no-repeat; */
    }
    .Passion123 {
        margin-top: 348px;
        /* margin-top: 100px; */
    }
    .index-hero .container-hero {
        padding-top: 115px;
    }
    .case-study-5 {
        background-image: url(../img/mobile-backgrounds/mobile-case-study-5.png);
        background-size: cover;
        background-repeat: no-repeat;
    }
}

@media only screen and (min-width: 0px) and (max-width: 666px) {
    .navbar-nav .dropdown-menu {
        margin-left: -20px !important;
    }
    .navbar-nav .btn-primary {
        margin-left: -10px !important;
    }
    .video-bg video {
        width: auto;
        height: 100%;
    }
}


/********** Average Mobile Size **********/

@media only screen and (min-width: 0px) and (max-width: 767px) {
    h1 {
        font-size: 30px;
        line-height: 36px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 24px;
    }
    h4 {
        font-size: 18px;
    }
    h5 {
        font-size: 20px;
    }
    h6 {
        font-size: 16px;
    }
    p {
        font-size: 15px;
        line-height: 22px;
    }
    .h1-f {
        font-size: 30px;
        line-height: 36px;
    }
    .h2-f {
        font-size: 28px;
    }
    .community {
        background-image: url(../img/mobile-backgrounds/mobile-belAZ-getting-loaded.jpg);
        background-size: 100% 20%;
        background-repeat: no-repeat;
        background-position: top 56% left;
        margin-bottom: 5%;
    }
    .partnership-agreement {
        width: 100%;
        height: 80%;
        z-index: -1;
        margin-top: -5%;
        margin-bottom: 10%;
        padding-top: 27%;
        background-image: url(../img/mobile-backgrounds/mobile-offering-mine-shaft-mobile.jpg);
        background-position: left top;
        background-size: 100% 30%;
        background-repeat: no-repeat;
    }
    .decision-making {
        background-image: url(../img/mobile-backgrounds/mobile-offering-bucket-excavator.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top -60% right;
        margin-bottom: 6%;
    }
    .case-study {
        background-size: 130% 40%;
        background-repeat: no-repeat;
        background-position: top center;
        height: 80%;
        margin-top: -120px;
        margin-bottom: 8%;
    }
    .about-hero canvas {
        float: none;
        width: inherit;
    }
    .offering-hero canvas {
        float: none;
        width: inherit;
    }
    .project-footprint .project-footprint-container a.btn {
        font-size: 13px;
    }
    .best-foot-forward .second-btn a.btn-outline-white {
        font-size: 9px;
    }
    .xs-h-75 {
        height: 75% !important;
    }
    .offering-sustainable-benefit .list .list-group-item img {
        margin-right: 15px;
    }
    .border-top-radius-xs-10 {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }
    .border-bottom-radius-xs-10 {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    .passion-card {
        height: 230px;
    }
    .passion-container {
        /* height: 2050px;
        background-image: url(../img/backgrounds/about-background.png);
        background-size: contain;
        background-position: top 250px left;
        background-repeat: no-repeat;
        margin-bottom: 410px; */
    }
    .approach-solution {
        margin-top: 0px;
    }
    .index-hero .container-hero {
        padding-top: 125px;
    }
    /* Content Container */
    .methodology-benefit .timeline-container .bg-dark-grey {
        padding: 15px;
    }
    /* Content Container with orange border */
    .methodology-benefit .timeline-container .bg-dark-grey.border-vivid-orange {
        padding: 15px;
        border: solid 1px #ffa627;
    }
    .founders-section .employees .employees-info {
        position: relative;
        padding: 90px 25px 30px;
    }
    .founders-section .employees .employees-info::before {
        position: absolute;
        content: "";
        top: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        width: 45px;
        height: 45px;
        background-image: url("../../assets/img/icons/ico-profile.svg");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }
}

/* Smallest Screen Size (XXS) */
@media only screen and (min-width: 0px) and (max-width: 550px) {
    .ftco-location-section {
        margin-bottom: 15%;
    }
    .index-hero {
        background-image: url(../img/mobile-backgrounds/mobile-hero-index2.png);
        background-size: 100% 35%;
        background-repeat: no-repeat;
        background-position: top right;
        top: -1.22rem;
    }

    .botswana-location {
        padding: 3rem 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 575px) {
    .btn {
        font-size: 12px;
    }
    .btn span.right-arrow img {
        float: right;
        width: 50%;
    }
    .ftco-footer-cards a.btn-background-dark {
        font-size: 12px;
    }
    .ftco-footer-cards a.btn-background-dark span.right-arrow img {
        float: right;
        width: 50%;
    }
    .request-call-back {
        font-size: 13px;
    }
    .index-hero .container-hero a {
        width: 280px;
    }
    /* The Vertical Ruler */
    .methodology-benefit::after {
        left: 5%;
        margin-left: -3px;
    }
    /* Container around content */
    .methodology-benefit .timeline-container {
        margin-top: 100px;
        width: 100%;
    }
    /* The circles on the timeline */
    .methodology-benefit .timeline-container::after {
        top: 35px;
    }
    /* The circles on the left and right timeline container */
    .methodology-benefit .timeline-container.right::after,
    .methodology-benefit .timeline-container.left::after {
        left: -12px;
    }
    /* Place the container to the left and right */
    .methodology-benefit .timeline-container.right,
    .methodology-benefit .timeline-container.left {
        padding-left: 40px;
        padding-right: 0px;
        left: 0;
    }
    /* Add arrows to the left and right container (pointing left) */
    .methodology-benefit .timeline-container.right::before,
    .methodology-benefit .timeline-container.left::before {
        content: " ";
        height: 0;
        position: absolute;
        top: 35px;
        width: 0;
        z-index: 1;
        left: 26px;
        border: medium solid #121625;
        border-width: 15px 15px 15px 0;
        border-color: transparent #121625 transparent transparent;
    }
}

/* Small Screen Size (SM) */
@media only screen and (min-width: 551px) and (max-width: 767px) {
    .ftco-location-section {
        height: 85%;
        margin-bottom: 15%;
    }
    .index-hero {
        background-image: url(../img/mobile-backgrounds/mobile-hero-index2.png);
        background-size: 100% 45%;
        background-repeat: no-repeat;
        background-position: top right;
        top: -1.22rem;
    }

    .botswana-location {
        padding: 3rem 0;
    }
}

/* Small Screen Size (SM) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .botswana-location {
        padding: 5rem 0;
    } 
}

/* Large Screen Size (LG) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .index-hero {
        background-image: url(../img/backgrounds/hero-home2.png);
        background-size: 130% 49%;
        background-repeat: no-repeat;
        background-position: top right -150px;
    }
    .strategic-advice {
        background-image: url(../img/mobile-backgrounds/mobile-belAZ-silhouette.jpg);
        background-size: 120% 20%;
        background-repeat: no-repeat;
        background-position: top 5% left;
        margin-bottom: 8%;
    }
    .community {
        background-image: url(../img/mobile-backgrounds/mobile-belAZ-getting-loaded.jpg);
        background-size: 100% 50%;
        background-repeat: no-repeat;
        background-position: top 50% left;
        margin-bottom: 5%;
    }
    .partnership-agreement {
        width: 100%;
        height: 80%;
        z-index: -1;
        margin-top: -5%;
        margin-bottom: 10%;
        padding-top: 27%;
        background-image: url(../img/mobile-backgrounds/mobile-offering-mine-shaft-mobile.jpg);
        background-position: left top;
        background-size: 100% 70%;
        background-repeat: no-repeat;
    }
    .location-container-australia {
        height: 250px;
        background-image: url(../img/cards/fraser-mcgill-australian-office@3x.png);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .location-container-south-africa {
        height: 250px;
        background-image: url(../img/cards/fraser-mcgill-head-office@3x.png);
        background-size: cover;
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: 0px;
    }
    .decision-making {
        background-image: url(../img/backgrounds/offering-banner.png);
        background-size: 120% 110%;
        background-repeat: no-repeat;
        background-position: top -60% right;
        margin-bottom: 6%;
    }
    .case-study {
        background-size: 140% 60%;
        background-repeat: no-repeat;
        background-position: top center;
        height: 85%;
        margin-bottom: 8%;
    }
    .ftco-location-section {
        background-image: url(../img/tablet-images/tablet-map@2x.png);
        background-size: 130% 60%;
        background-repeat: no-repeat;
        background-position: top 10% left;
        height: 70%;
    }
    .index-hero .container-hero a {
        width: 310px;
    }
    .about-hero canvas {
        width: 768px;
    }
    /* Content Container */
    .methodology-benefit .timeline-container .bg-dark-grey {
        height: 100px;
    }
    /* Content Container with orange border */
    .methodology-benefit .timeline-container .bg-dark-grey.border-vivid-orange {
        height: 100px;
        border: solid 1px #ffa627;
    }
}


/********** iPad ********/

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .md-h-70 {
        height: 70% !important;
    }
    .md-h-75 {
        height: 75% !important;
    }
    .md-h-80 {
        height: 80% !important;
    }
    .offering-sustainable-benefit .list .list-group-item img {
        width: 100%;
    }
    .ftco-footer-cards a.btn-background-dark {
        font-size: 16px;
    }
    .ftco-footer-cards a.btn-call-back {
        font-size: 16px;
    }
    .passion-container {
        /* height: 2200px;
        background-image: url(../img/backgrounds/about-background.png);
        background-size: contain;
        background-position: top 250px left;
        background-repeat: no-repeat;
        margin-bottom: 410px; */
    }
    .location-container-south-africa {
        background-size: cover;
        background-position: 0px;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .location-container-australia {
        height: 230px;
        background-image: url(../img/cards/fraser-mcgill-australian-office@3x.png);
        background-size: contain;
        background-repeat: no-repeat;
        overflow: hidden;
    }
    .location-container-south-africa {
        height: 230px;
        background-image: url(../img/cards/fraser-mcgill-head-office@3x.png);
        background-size: contain;
        background-repeat: no-repeat;
        overflow: hidden;
        background-position: 0px -1px;
    }
}

@media only screen and (min-width: 933px) and (max-width: 991px) {
    .passion-container {
        height: 2600px;
    }
}


/*********** Tablet **************/

@media only screen and (min-width: 1024px) {
    .offering-sustainable-benefit .list .list-group-item img {
        margin-right: 15px;
    }
    .location-container-south-africa {
        background-size: cover;
    }
}


/* ----------- iPad Pro ----------- */


/* Portrait and Landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (-webkit-min-device-pixel-ratio: 1.5) {}


/* Portrait */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {}


/* Landscape */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {}

@media only screen and (min-width: 569px) and (max-width: 767px) {}

@media only screen and (min-width: 723px) and (max-width: 767px) {}


.journey-desc {
    width: 50%;
}

@media only screen and (max-width: 74.9375em) {
    .benefit-list p {
        width: 100%;
    }

    .digital-evolution {
        background-size: 100%, auto;
    }
}

/* General medium screens */
@media only screen and (max-width: 61.9375em) {
    .index-hero {
        top: -1.22rem;
    }

    .about-team-view {
        height: 35rem;
        margin-top: 14rem;
    }

    .about-team-view .img-container {
        bottom: 20rem;
    }

    .journey-desc {
        width: 100%;
    }

    .benefit-card {
        flex-direction: column;
    }

    .benefit-list, .benefit-desc {
        width: 100%;
    }

    .benefit-list {
        margin: 0;
    }

    .benefit-list p {
        width: calc(50% - 0.33rem);
    }
}

/* General small screens */
@media only screen and (max-width: 47.9375em) {
    .about-team-view {
        height: 26rem;
        margin-top: 14rem;
    }

    .about-team-view .img-container {
        bottom: 8rem;
    }

    .botswana-country {
        width: 50%;
        margin: auto auto 3rem auto;
    }
}

/* General extra small screens */
@media only screen and (max-width: 35.9375em) {
    .about-team-view {
        height: 34rem;
        margin-top: 11rem;
    } 

    .about-team-view .img-container {
        bottom: 17rem;
    }

    .benefit-list {
        flex-direction: column;
    }

    .benefit-list p {
        width: 100%;
    }
}

/* General extra-extra small screens */
@media only screen and (max-width: 22.5em) {
    .about-team-view {
        height: 33rem;
        margin-top: 7rem;
    }

    .about-team-view .img-container {
        bottom: 18rem;
    }
}

/* LG */
@media only screen and (max-width: 74.9375em) {

}

/* MD */
@media only screen and (max-width: 61.9375em) {
    .video-mobile-banner {
        position: relative;
        width: auto;
        height: 100%;
        z-index: 0;
        overflow: hidden;
      }
      
    .video-mobile-banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
        0deg,
        rgba(1, 5, 22, 1) 0%,
        rgb(1 5 22 / 45%) 20%,
        rgb(1 5 22 / 45%) 70%,
        rgba(1, 5, 22, 1) 100%
    );
    z-index: 1;
    }
    
    .video-mobile-banner img {
    width: auto;
    height: 100%;
    display: block;
    position: relative;
    z-index: 0;
    }

    .index-hero .video-mobile-banner img {
        right: 34rem;
    }

    .about-hero .video-mobile-banner img {
        right: 54rem;
    }

    .founders-section .video-mobile-banner img {
        right: 54rem;
    }

    .contact-hero .video-mobile-banner img {
        right: 61rem;
    }

    .contact-hero {
        margin-top: 5rem;
    }

    section.south-africa {
        padding: 11rem 0 10rem 0;
    }
}

/* SM */
@media only screen and (max-width: 47.9375em) {
    .about-hero .video-mobile-banner img {
        right: 44rem;
    }

    .index-hero .video-mobile-banner img {
        right: 64rem;
    }

    .founders-section .video-mobile-banner img {
        right: 54rem;
    }

    .contact-hero .video-mobile-banner img {
        right: 52rem;
    }
}

/* XS */
@media only screen and (max-width: 35.9375em) {
    .founders-section .video-mobile-banner img {
        right: 54rem;
    }
}

/* XXS */
@media only screen and (max-width: 22.5em) {
    .about-hero .video-mobile-banner img {
        right: 34rem;
    }

    .founders-section .video-mobile-banner img {
        right: 43rem;
    }

    .contact-hero .video-mobile-banner img {
        right: 39rem;
    }
}