/* ------------------------------------ IMPORTANT STYLE NOTES ------------------------------------ */

/* COLOURS
Blue used for links and other highlights                                    #00A0DD
Grey used for dark backgrounds (secondary header, accordion etc.)           #222
    - if a darker background is required                                    black
Normal text over grey (above) or black                                      rgb(120, 132, 135) or #788487
Text on black can also be                                                   white
*/

/* FONTS
Poppins - primary
Arial - secondary
*/

/* Global Styles
--------------------------------------------------------------------------------------------- */
html {
    font-family: sans-serif;
    line-height: 1.15;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -ms-overflow-style: scrollbar;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    scroll-behavior: smooth;
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Poppins", Arial;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.8;
    color: #788487;
    text-align: left;
    background-color: #fff;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}

hr { 
    margin-top: 1rem;
    margin-bottom: 0;
    border-width: 0px;
    height:1px;
    background-color: #222;
    transition: 0.5s;
}

hr.blue {
    background-color: #00A0DD;
    height: 2px;
}

hr.grey {
    background-color: #788487;
    height: 1px;
    margin: 0.5rem 0;
    width: 65%;
}

hr.section-separator {
    margin-top: 0;
    width: 85%;
}

hr.internal-separator {
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 85%;
}

hr.client-logo-border {
    margin: 3rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin-top: 0;
    margin-bottom: .625rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
    color: #222;
}

h1,
.h1 {
    font-size: 4rem;
    font-weight: bold;
}

@media only screen and (max-width: 991px) {
    h1,
    .h1 {
        font-size: 2.625rem;
    }
}

@media only screen and (max-width: 767px) {
    h1,
    .h1 {
        font-size: 2rem;
    }
}

h2,
.h2 {
    font-size: 2.625rem;
    font-weight: bold;
}

.page-intro h2 {
    display: inline;
}

h3,
.h3 {
    font-size: 2.625rem;
}

h4,
.h4 {
    font-size: 1.75rem;
}

h5,
.h5 {
    font-size: 1.125rem;
}

.page-intro h5 {
    display: inline;
    text-transform: uppercase;
}

h6,
.h6 {
    font-size: .875rem;
}

a {
    color: #00A0DD;
    text-decoration: none;
    background-color: transparent;
        -webkit-text-decoration-skip: objects;
    transition: 0.3s;
}

a:hover {
    color: #00C8FF;
    text-decoration: none;
}

p {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

.center {
    text-align: center;
}

.large-center {
    text-align: center;
    font-size: 0.9375rem;
    letter-spacing: .01875rem;
}

input {
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgb(237, 237, 237);
    border-radius: 3px;
    padding: 1.0625rem 0.875rem;
    color: #788487;
    display: block;
    font-size: .75rem;
    line-height: 1.5;
    text-align: start;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}

input:focus {
    border-color: rgb(217, 217, 217);
    outline: 0;
}

input[type="checkbox"] {
    display: inline;
    width: auto;
}
input[type="radio"] {
    display: inline;
    width: auto;
}

textarea {
    background-color: white;
    background-clip: padding-box;
    border: 1px solid rgb(237, 237, 237);
    border-radius: 3px;
    padding: 1.0625rem 0.875rem !important;
    color: #788487;
    display: block;
    font-size: .75rem;
    line-height: 1.5;
    text-align: start;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 100%;
}

textarea:focus {
    border-color: rgb(217, 217, 217);
    outline: 0;
}

.module {
    padding: 80px 0 80px;
}

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* below will change container width, based on screen size */
    @media only screen and (min-width: 576px) {
        .container {
            max-width: 540px;
        }
    }

    @media only screen and (min-width: 768px) {
        .container {
            max-width: 720px;
        }
    }

    @media only screen and (min-width: 992px) {
        .container {
            max-width: 960px;
        }
    }

    @media only screen and (min-width: 1200px) {
        .container {
            max-width: 1140px;
        }
}

.flex-reverse {
    display: flex;
    flex-direction: row-reverse;
}

.bg-grey {
    background-color: #f8f8f8;
}

.bg-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: white;
}

.bg-image h1,
.bg-image h2,
.bg-image h3,
.bg-image h4,
.bg-image h5,
.bg-image h6 {
    color: white;
}

/* this part makes the background image in the where we go section, actually parallax
    the first most important thing it does, is remove the original background image which is embedded in the html part*/
    @media only screen and (max-width: 991px) {
        .bg-image {
         background-image: none !important;
        }
        
        .mobile-bg-image {
            margin-top: -200vh;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(45deg, red, blue);
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            z-index: -10;
            background-position: center;
        }
     
        .mobile-bg-image + .bg-image {
            position: relative;
            margin-top: 100vh;
        }
     }

.slideshow > img {
    position: static;
    width: 100%;
}
  
.slideshow > img + img,
.slideshow > img + img + img {
    position: absolute;
    display: none !important;
}

.secondary-header {
    background-color: #222;
}
.secondary-header .container {
    height: 160px;
    padding: 90px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

@media only screen and (max-width: 991px) {
    .secondary-header .container {
        height: auto;
        padding: 100px 1rem 0;
        display: block;
        overflow: hidden;
    }
}

.secondary-header h5 {
    color: white;
}

.secondary-header-white {
    background-color: white;
    position: static;
}
.secondary-header-white .container {
    height: 160px;
    padding: 90px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

@media only screen and (max-width: 991px) {
    .secondary-header-white .container {
        height: auto;
        padding: 100px 1rem 0;
        display: block;
        overflow: hidden;
    }
}

.secondary-header-white h5 {
    color: white;
}

ul.left-breadcrumb {
    padding-left: 0;
    margin-bottom: 10px;
}

ul.left-breadcrumb h5 {
    display: inline;
}

ul.left-breadcrumb li {
    display: inline;
    font-size: 1.125rem;
    margin-top: 0;
    margin-bottom: .625rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.3;
}

ul.left-breadcrumb li+li:before {
    content: "- ";
    color: #00A0DD;
}

@media only screen and (max-width: 991px) {
    ul.right-breadcrumb {
        float: right;
    }
}

ul.right-breadcrumb li {
    display: inline;
    color: #788487;
    font-size: .8125rem;
}

ul.right-breadcrumb li+li:before {
    padding: 0.3rem;
    content: "/";
    color: #788487;
}

ul.right-breadcrumb li a {
    color: #788487;
}

ul.right-breadcrumb li a:hover {
    color: white;
}

/* using this will make the last bread-crumb on any page white instead of grey */
/* ul.right-breadcrumb li:last-child {
    color: white;
} */

.arrow-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.arrow-list > li {
    margin: 0 0 7px;
}

.arrow-list > li::before {
    display: inline-block;
    content: "⮕";
    margin-right: 18px;
}
/* ---------------------------------------------------------------------------------------------
Global Styles */















/* Global Grid Styles
--------------------------------------------------------------------------------------------- */
/* ------------------------------------ Global Grid Styles ------------------------------------ */
    /*  - simple grid of 4 columns - used for many pages of the website
        - everything used in this grid has a pre defined place in the grid */
.main-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    margin-bottom: 20px;
}

.main-content-grid > img,
.main-content-grid > a > img {
    width: 100%;
}

.main-text-left {
    grid-row: 1;
    grid-column: 1/3;
    align-self: center;
}

.main-text-right {
    grid-row: 1;
    grid-column: 3/5;
    align-self: center;
}

.main-text-left > p,
.main-text-right > p {
    font-size: 0.9375rem;
    letter-spacing: .01875rem;
}

.main-text-whole-page {
    grid-column: 1/5;
    align-self: center;
}

.main-image-left {
    grid-row: 1;
    grid-column: 1/3;
    align-self: center;
}

.main-image-right {
    grid-row: 1;
    grid-column: 3/5;
    align-self: center;
}

.feature-image-one {
    grid-row: 2;
    grid-column: 1;
}

.feature-text-one {
    grid-row: 3;
    grid-column: 1;
}

.feature-image-two {
    grid-row: 2;
    grid-column: 2;
}

.feature-text-two {
    grid-row: 3;
    grid-column: 2;
}

.feature-image-three {
    grid-row: 2;
    grid-column: 3;
}

.feature-text-three {
    grid-row: 3;
    grid-column: 3;
}

.feature-image-four {
    grid-row: 2;
    grid-column: 4;
}

.feature-text-four {
    grid-row: 3;
    grid-column: 4;
}

.feature-image-one,
.feature-image-two,
.feature-image-three,
.feature-image-four {
    border-radius: .1875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    position: relative;
    top: 0;
    transition: 0.3s;  
}

.feature-image-one > img,
.feature-image-two > img,
.feature-image-three > img,
.feature-image-four > img {
    border-radius: .1875rem;
}

.feature-image-one:hover,
.feature-image-two:hover,
.feature-image-three:hover,
.feature-image-four:hover {
    top: -5px;
}

.feature-text-one > hr,
.feature-text-two > hr,
.feature-text-three > hr,
.feature-text-four > hr {
    margin-top: 1rem;
    width: 10%;
}

@media only screen and (max-width: 768px) {
    .main-text-left {
        grid-row: 1;
        grid-column: 1/5;
    }

    .main-text-right {
        grid-row: 1;
        grid-column: 1/5;
    }
    
    .main-image-left {
        grid-row: 2;
        grid-column: 1/5;
    }

    .main-image-right {
        grid-row: 2;
        grid-column: 1/5;
    }
    
    .feature-text-one {
        grid-row: 3;
        grid-column: 1/5;
    }

    .feature-image-one {
        grid-row: 4;
        grid-column: 1/5;
    }
    
    .feature-text-two {
        grid-row: 5;
        grid-column: 1/5;
    }

    .feature-image-two {
        grid-row: 6;
        grid-column: 1/5;
    }
    
    .feature-text-three {
        grid-row: 7;
        grid-column: 1/5;
    }

    .feature-image-three {
        grid-row: 8;
        grid-column: 1/5;
    }
    
    .feature-text-four {
        grid-row: 9;
        grid-column: 1/5;
    }

    .feature-image-four {
        grid-row: 10;
        grid-column: 1/5;
    }
    
    .team-container {
        grid-column: 1/5;
    }

    .mobile-team-description {
        grid-column: 1/5;
    }
}

/* ------------------------------------ Two Column Grid ------------------------------------ */
    /*  - grid of 2 columns - used for facility pages (with image gallery and accordion to the right)
        - no set positions for elements - they just fill the grid automatically */
.two-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

@media only screen and (max-width: 768px) {
    .two-column-grid {
        grid-template-columns: 1fr;
    }
}

/* ------------------------------------ Three Column Grid ------------------------------------ */
    /*  - grid of 3 columns
        - used for freelance form page (for the tabs at top)
        - used for sales and integration page (for all brands)
        - no set positions for elements - they just fill the grid automatically */
.three-column-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1rem;
}

.three-column-grid img {
    width: 100%;
}

@media only screen and (max-width: 768px) {
    .three-column-grid {
        grid-template-columns: 1fr;
    }
}

.left-column-info {
    grid-column: 1/2;
    grid-row: 1/5;
    border-right: 1px solid black;
}

.left-column-info h5 {
    margin: 0 0 10px;
}

.left-column-info h5,
.left-column-info p,
.left-column-info a {
    display: block;
}

.left-column-text {
    margin: 0 0 5px;
}

.left-column-text-break {
    margin: 0 0 10px;
}

.left-column-info-end {
    margin: 0;
}

.right-column-one-two {
    grid-column: 2/4;
    display: block;
    margin: 0;
    padding: 0;
}

.right-column-one {
    grid-column: 2/3;
}

.right-column-two {
    grid-column: 3/4;
}

@media only screen and (max-width: 768px) {
    .left-column-info {
        grid-column: 1/2;
        grid-row: 1/2;
        border-right: none;
    }

    .right-column-one-two {
        grid-column: 1/2;
    }

    .right-column-one {
        grid-column: 1/2;
    }

    .right-column-two {
        grid-column: 1/2;
    }

    .left-column-info-end {
        padding-bottom: 1rem;
        border-bottom: 1px solid black;
    }
}

/* ------------------------------------ Margin Grid ------------------------------------ */
    /*  - grid of 4 collumns - but the 1st and 4th columns are really just margins with no content
        - used for the freelance forms 
        - content can be in column 2, column 3 or spread accross both columns */
.margin-grid {
    display: grid;
    grid-template-columns: 15% 1fr 1fr 15%;
    grid-gap: 1rem;
}

.margin-grid-left {
    grid-column: 2/3;
}

.margin-grid-right {
    grid-column: 3/4;
}

.margin-grid-full {
    grid-column: 2/4;
}

label.margin-grid-left {
    text-align: right;
}

@media only screen and (max-width: 575px) {
    .margin-grid-left {
        grid-column: 1/3;
    }
    .margin-grid-right {
        grid-column: 3/5;
    }
    .margin-grid-full {
        grid-column: 1/5;
    }
}
/* ---------------------------------------------------------------------------------------------
Global Grid Styles */















/* Buttons
--------------------------------------------------------------------------------------------- */
.btn-yellow-circle {
    color: rgb(33, 37, 41);
    background-color: rgb(255, 193, 7);
    display: block;
    text-align: center;
    text-transform: uppercase;
    transition: 0.15s;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: .1125rem;
    padding: 1.1875rem 2.25rem;
    border-radius: 30px;
    margin: 0 auto;
    width: fit-content;
}

.btn-yellow-circle:hover {
    color: rgb(33, 37, 41);
    background-color: rgb(224, 168, 0);
}

.submit-button {
    display: block;
    background-color: #505cfd;
    padding: 1rem 1.875rem;
    border: 2px solid #505cfd;
    border-radius: 0.1875rem;
    color: rgb(255, 255, 255);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .1125rem;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    transition: color .15s ease-in-out,
                background-color .15s ease-in-out,
                border-color .15s ease-in-out,
                box-shadow .15s ease-in-out;
}

.submit-button:hover {
    background-color: #2a39fd;
    border-color: #2a39fd;
}

.btn-close {
    background: none;
    border: none;
    color: white;
    opacity: 0.7;
    transition: all 0.4s;
    float: right;
}

.btn-close > i {
    font-size: 2em;
}

.btn-close:hover {
    opacity: 1;
}
/* ---------------------------------------------------------------------------------------------
Buttons */















/* Nav Bar Styles
--------------------------------------------------------------------------------------------- */
/* ------------------------------------ Nav Bar ------------------------------------ */
#navbar {
    overflow: hidden;
    background-color: transparent;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
    transition: 0.5s;
    display: flex;
    justify-content: space-between;
}

.nav-left, .nav-center, .nav-right {
    height: 40px;
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 12px;
    letter-spacing: 1px;
}

.nav-left {
    width: 165px;
}

.nav-left > img {
    width: 165px;
    padding: 2.5px 0 2.5px 15px;
}

.nav-center {
    padding: 14px;
}

.nav-right {
    width: 165px;
    padding: 14px 15px;
}

#nav-colour-logo {
    opacity: 0;
}

#nav-white-logo {
    position: absolute;
}

#navbar > .nav-center > a,
#navbar > .nav-center > .dropdown > a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 0 20px;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    height: 46.5px;

    transition: 0s; /*this stops the border at the bottom from taking any time to appear */
}

#navbar .nav-center > a:hover,
#navbar .nav-center > div > a:hover {
    border-bottom: 2px solid rgba(255, 255, 255, 1);
    opacity: 0.5;
}

@media only screen and (max-width: 991px) {
    #navbar {
        background: white;
    }
    .nav-center {
        display: none; /* at small screen - makes the center nav menu go away */
    }
    #nav-colour-logo {
        opacity: 1;
    }
    #nav-white-logo {
        opacity: 0;
    }
}

/* ------------------------------------ Drop Downs ------------------------------------ */
.dropdown {
    float: left;
    overflow: hidden;
}

/* named wwd (what we do) in case there are more drop downs later on */
#wwd-dropdown {
    top: 80px;
}

/* used to add transparent gap at the top of the drop down */
.dropdown-filler {
    height: 5px;
    padding: 0;
    margin: 0;
}

.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
}

.dropdown-content {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s ease-in-out;
    position: fixed;
    padding-bottom: 0;
    margin-bottom: 0;
    min-width: 160px;
    border-radius: .1875rem;
    z-index: 15;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* maybe one day do this a bit better */
}

.dropdown-menu-item {
    line-height: 18px;
    padding-bottom: 24px;
    padding-left: 24px;
    padding-right: 24px;
    margin: 0;
    text-align: left;
    background-color: white;
}

.dropdown-content a:first-of-type {
    border-top-left-radius: .1875rem;
    border-top-right-radius: .1875rem;
    padding-top: 24px;
    margin-top: 0;
}

.dropdown-content a:last-of-type {
    border-bottom-left-radius: .1875rem;
    border-bottom-right-radius: .1875rem;
}

.dropdown-content > a {
    float: none;
    color: rgb(157, 157, 157);
    text-decoration: none;
    display: block;
    text-align: left;
    transition: 0.4s;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 1px;
}

.dropdown-content > a:hover {
    color: rgba(159, 159, 159, 0.5);
    text-decoration: none;
}

#nav-hamburger-white {
    height: 80px;
    width: 71px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 31px 0;
    color: white;
    line-height: 18px;
    font-size: 18px;
    transition: 0.5s;
    cursor: pointer;
}

/* ------------------------------------ Hamburger Links ------------------------------------ */
#nav-hamburger-black {
    height: 60px;
    width: 71px;
    border-left: 1px solid rgba(240, 240, 240, 0.8);
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 31px 0;
    opacity: 0;

    color: black;
    line-height: 18px;
    font-size: 18px;   

    transition: 0.5s;
    cursor: pointer;
}

#nav-hamburger-black-resp {
    display: none;
    
    height: 80px;
    width: 71px;
    border-left: 1px solid rgba(240, 240, 240, 0.8);
    position: absolute;
    right: 0px;
    top: 0px;
    padding: 31px 0;

    color: black;
    line-height: 18px;
    font-size: 18px;   

    transition: 0.5s;
    cursor: pointer;
}


#nav-hamburger-white > img,
#nav-hamburger-black > img,
#nav-hamburger-black-resp > img {
    height: 16px;
    width: 18px;
}

@media only screen and (max-width: 991px) {
    #nav-hamburger-black {
        display: none;
    }
    #nav-hamburger-black-resp {
        display: block;
    }
}

/* ------------------------------------ Responsive Navbar ------------------------------------ */
#responsive-nav {
    width: 100%;
    background-color: #222;
    margin-top: 80px;
    position: fixed;
    top: 0;
    z-index: 10;
    
    display: none;
    
    text-align: left;
    padding: 20px 0;

    transition: 0.5s;
}

#responsive-nav > a {
    display: block;
    color: white;

    padding: 15px 10px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;

    letter-spacing: .05625rem;
    cursor: pointer;
}
#responsive-nav > a:hover {
    color: rgba(255, 255, 255, .7);
}

#responsive-dropdown {
    width: 100%;
    background-color: rgb(0, 0, 0);
    margin-top: 0;
    position: relative;
    top: 0;
   
    display: none;
 
    text-align: left;
    padding: 10px 15px;
}

#responsive-dropdown > a {
    display: block;
    color: white;

    background-color: rgb(0, 0, 0);
    padding: 10px 10px;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.75rem;

    letter-spacing: .0625rem;
    line-height: 1.8;
}
#responsive-dropdown > a:hover {
    opacity: 0.5;
}
/* ---------------------------------------------------------------------------------------------
Nav Bar Styles */















/* Hero Section
--------------------------------------------------------------------------------------------- */
.hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    background-attachment: fixed;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* this part makes the background image in the hero sections parallax properlly on mobile displays */

@media only screen and (max-width: 575px) {
    .hero-section {
        background-image: none !important;
        height: 424px;
        margin-top: -57vh;
    }

    .mobile-hero-section {
        width: 100%;
        height: 500px;
        background: linear-gradient(45deg, red, blue);
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        z-index: -10;
        background-position: center;
    }
}

.hero-text {
    flex: 0 1 auto;
}

.hero-text > h1,
.hero-text > p {
    color: white;
    text-align: center;
}

.hero-text > p {
    font-size: 0.9375rem;
    margin-bottom: 40px;
}
/* ---------------------------------------------------------------------------------------------
Hero Section */















/* Index - Where We Go Section
--------------------------------------------------------------------------------------------- */
.countries {
    fill: lightgrey;
    opacity: 0.8;
    transition: all 1s ease-in-out;
}

.countries a {
    fill: #02BC0F;
    transition: all 0.3s ease-in-out;
    opacity: 0.7;
    stroke-width: 2.5;
}

.countries a:hover {
    stroke-width: 5;
    opacity: 1;
    cursor: pointer;
}

#where-we-go-tabs img {
    width: 100%;
    border-radius: .1875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    position: relative;
    top: 0;
    transition: 0.3s;  
}

#where-we-go-tabs img:hover {
    top: -5px;
}

#where-we-go-map {
    background-color: #1CA3D5;
    border: 1px solid black;
    border-radius: 1.5rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#tab1 {
    z-index: 2;
}

.location-description {
    background-color:#f8f8f8;
    padding: 1rem;
    border-radius: .1875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    position: relative;
    top: -50px;
}

.location-description h6 {
    color: black;
}
.location-description p {
    color: #788487;
}

/* ------------------------------------ Where We Go Tabs ------------------------------------ */
    /*  - grid with no set collumns or rows - used for the where we go map on home page
        - very specific where items need to go */
#where-we-go-tabs {
    display: grid;
}

#where-we-go-tabs > div {
    grid-row: 1;
    grid-column: 1/5;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;    
}

@media only screen and (max-width: 768px) {
    #where-we-go-tabs > div {
        grid-template-columns: 1fr;
    }
}

#where-we-go-tabs article {
    grid-column: 3/5;
}

@media only screen and (max-width: 768px) {
    #where-we-go-tabs article {
        grid-column: 1/2;
        grid-row: 3/5;
    }
}
/* ---------------------------------------------------------------------------------------------
Index - Where We Go Section */















/* Index - Who We Work With Section
--------------------------------------------------------------------------------------------- */
.slick-slide {
    margin: 0px 20px;
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    opacity: 0.6;
    transition: 0.5s;
}

.slick-slide:hover {
    opacity: 1;
}
.slick-slide img {
    width: 100%;
    display: block
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
        touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

/* not 100% sure why this is here, but I'll keep it in case */
/* .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
} */

[dir='rtl'] .slick-slide {
    float: right;
}

/* not 100% sure why this is here, but I'll keep it in case */
/* .slick-slide img {
    display: block;
} */

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}
/* ---------------------------------------------------------------------------------------------
Index - Who We Work With Section */















/* Modal Styles
--------------------------------------------------------------------------------------------- */
/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 30;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

/* The Close Button */
.modal .close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.modal .close:hover,
.modal .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}
  
.modal-slide {
    display: none;
}
  
/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}
  
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* img {
    margin-bottom: -4px;
} */
  
.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}

.modal-demo {
    opacity: 0.6;
    cursor: pointer;
    float: left;
    width: 25%;
}

.modal-demo-container {
      margin-bottom: 60px;
}

.active,
.modal-demo:hover {
    opacity: 1;
}
/* ---------------------------------------------------------------------------------------------
Modal Styles */















/* All Facilities
--------------------------------------------------------------------------------------------- */
#facility-details img {
    width: 100%;
}

.facility-image {
    transition: 0.3s;
}

.facility-image:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
}

.accordion-specs {
    position: -webkit-sticky;
    position: sticky;
    top: calc(1rem + 60px);
    background-color: #222;
  }

@media only screen and (max-width: 576px) {
    .accordion-specs {
        margin-top: 1rem;
    }
}

.accordion-specs-title {
    padding: 1.25rem;
}

.accordion-specs-title h6 {
    color: white;
}

.accordion-specs-downloads {
    color: green;
    padding: 1.25rem;
}

.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #222;
    background-clip: border-box;
    border: none;
    border-radius: 0px;
}

.card-header {
    padding: 1rem 0.5rem;
    margin-bottom: 0;
    background-color: #222;
    border-bottom: none;
}

.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
    background-color: black;
}

.accordion-specs .btn {
    color: white;
    font-size: 0.9rem;
    text-align: left;
    width: 100%;  
}

#floor-plan img {
    width: 100%;
}
/* ---------------------------------------------------------------------------------------------
All Facilities */















/* Our Team
--------------------------------------------------------------------------------------------- */
.team-container {
    position: relative;
    background-color: black;
    top: 0;
    transition: 0.3s;
    border-radius: .1875rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
    overflow: hidden;
    cursor: default;
}

.team-container:hover {
    top: -5px;
}
  
.team-image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    border-radius: .1875rem;
}
  
.team-description {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    transform: translate(-0, -100%);
    -ms-transform: translate(-0, -100%);
    padding: 0.5rem 1rem;
    font-size: .75rem;
}

.team-description p {
    color: white;
    opacity: 0.6;
}
  
.team-container:hover .team-image {
    opacity: 0.6;
}

@media only screen and (max-width: 768px) {
    .team-description {
        display: none;
    }
    .team-container:hover {
        top: 0;
    }
    .team-container:hover .team-image {
        opacity: 1;
    }
}
  
.team-container:hover .team-description {
    opacity: 1;
}

.team-heading h6 {
    margin-bottom: 0px;
    color: white;
}

.team-heading p {
    color: white;
    font-weight: bold;
}

.mobile-team-heading h6,
.mobile-team-heading p {
    font-weight: bold;
}

@media only screen and (min-width: 769px) {
    .mobile-team-description {
        display: none;
    }
}
/* ---------------------------------------------------------------------------------------------
Our Team */















/* Freelance Form
--------------------------------------------------------------------------------------------- */
.regions {
    /* fill: lightgrey; */
    opacity: 0.8;
    transition: all 1s ease-in-out;
}

.regions #AU-map {
    fill: #02BC0F;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
    stroke-width: 2.5;
}

.regions #AU-map:hover {
    stroke-width: 5;
    opacity: 1;
    cursor: pointer;
}

.regions #US-map {
    fill: yellow;
    opacity: 0.7;
    transition: all 0.3s ease-in-out;
    stroke-width: 2.5;
}

.regions #US-map:hover {
    stroke-width: 5;
    opacity: 1;
    cursor: pointer;
}

.regions #Other-map {
    fill: lightgrey;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    stroke-width: 1;
}

.regions #Other-map:hover {
    stroke-width: 1.5;
    opacity: 0.3;
    cursor: pointer;
}

#freelance-forms-map {
    background-color: #1CA3D5;
    border: 1px solid black;
    border-radius: 1.5rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#form-tabs {
    padding-top: 2rem;
}

#form-tabs h3 {
    text-align: center;
    padding-bottom: 2rem;
}

#hr-aus,
#hr-usa,
#hr-other {
    margin-top: 0;
    width: 0;
}

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

.role-rate {
    display: none;
    padding: 0.23rem 0.5rem;
}

.role-checkbox:checked + label + .role-rate {
    display: block;
}
/* ---------------------------------------------------------------------------------------------
Freelance Form */















/* Sales and Systems Integration
--------------------------------------------------------------------------------------------- */
.brand-details {
    text-align: center;
}
/* ---------------------------------------------------------------------------------------------
Sales and Systems Integration */















/* Back to top button
--------------------------------------------------------------------------------------------- */
#to-top-btn {
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not hide behind something */
    background-color: white; /* Set a background color */
    color: #788487; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    opacity: 0.6;
    border-radius: 30px; /* Rounded corners */
    font-size: 2.2rem; /* Increase font size */
    transition: 0.5s;
}

#to-top-btn:hover {
    bottom: 25px;
}

@media only screen and (max-width: 767px) {
    #myBtn {
        display: none;
    }
}
/* ---------------------------------------------------------------------------------------------
Back to top button */















/* Footer Section
--------------------------------------------------------------------------------------------- */
footer {
    background-color: rgb(34, 34, 34);
    padding: 90px 0 0 0;
}

.footer-widgets {
    padding: 0 0 85px 0;
}

@media only screen and (max-width: 575px) {
    .footer-widget {
        margin-bottom: 1rem;
    }
    .footer-widgets {
        padding: 0;
    }
}

.footer-widgets h6 {
    color: white;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.footer-widgets p,
.footer-widgets a {
    color: #788487;
    font-weight: 400;
    font-size: .8125rem;
    display: block;
    padding: 0;
    margin: 0 0 5px;
}
.footer-widgets a:hover {
    color: white;
}
.footer-bar {
    padding: 20px 0;
    margin: 0;
    border-top: 1px solid rgb(44, 44, 44);
    text-align: center;
}

.footer-bar > p {
    padding: 0;
    margin: 0;
    font-size: .75rem;
}

#social-media > .social-link {
    background-position: center;
    background-size: contain;
    height: 48px;
    width: 48px;
    display: inline-block;
}
#social-media > .social-link > img {
    width: 100%;
    opacity: 1;
    transition: 0.3s;
}
#social-media > .social-link > img:hover {
    opacity: 0;
}

#social-media a:last-child {
    margin-top: 2rem;
    display: block;
}
/* ---------------------------------------------------------------------------------------------
Footer Section */















/* Offcanvas Section
--------------------------------------------------------------------------------------------- */
.offcanvas-active{
	overflow: hidden;
}

.screen-overlay {
    width: 0%;
    height: 100%;
    z-index: 30;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    background-color: rgba(34, 34, 34, 0.6);
    transition: opacity .2s linear, visibility .1s, width 1s ease-in;
}

.screen-overlay.show {
    transition: opacity .5s ease, width 0s;
    opacity: 1;
    width: 100%;
    visibility: visible;
}

#offcanvas-login {
    background-color: #222;
    
}

.offcanvas {
    width:400px;
    padding: 40px;
	visibility: hidden;
	transform: translateX(-100%);
	transition: all .2s;
    border-radius: 0; 
    box-shadow: 0 5px 10px rgba(0,0,0, .2);
	display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1200;
    overflow-y: scroll;
    overflow-x: hidden;
}

.offcanvas-header {
    padding-bottom: 100px;
}

.offcanvas.offcanvas-right {
    right: 0;
    left: auto;
    transform: translateX(100%); 
}

.offcanvas.show {
	visibility: visible;
    transform: translateX(0);
    transition: transform .2s;
}

.offcanvas .btn-close {
    position: absolute;
    right:15px;
    top:15px;
}

.offcanvas-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 60px;
}

.offcanvas-logo img {
    width: 75%;
}

#offcanvas-login input {
    background-color: rgb(29, 29, 29);
    border: 1px solid rgb(29, 29, 29);
    color: white;
    margin-bottom: 1rem;
}

#offcanvas-login input:focus {
    background-color: rgb(29, 29, 29);
    border: 1px solid rgb(49, 49, 49);
    color: white;
}
/* ---------------------------------------------------------------------------------------------
Offcanvas Section */