/* ========================== */
/* ========================== */
/* Root Colours */
:root {
    /* Main Colours */
    --main-orange: #FA6520;
    --main-orange-dark: #E05B1D;
    --main-orange-extradark: #AD3F0B;
    --main-brown-light: #7A3210;
    --main-brown-dark: #3B1808;
    /* Grayscale Colours */
    --white: #FFFFFF;
    --offwhite: #E8E8E8;
    --gray-light: #A8A8A8;
    --gray: #5D5D5D;
    --gray-dark: #424242;
    /* Light Shades */
    --light-orange: #FB996C;
    --light-orange-light: #FBCCB7;
    --light-brown: #C7A291;
    --light-brown-dark: #7A6459;
    --light-brown-extradark: #7A4B35;
    /* Contrast Colours */
    --contrast-green: #28AD54;
    --contrast-green-light: #2DFA71;
    --contrast-blue: #0565AD;
    --contrast-blue-light: #1497FA;
    --contrast-gold-light: #FFC33B;
    --contrast-gold-dark: #FFB100;
    /* Font Colour */
    --font-color: #424242;
    /* Error/Valid colours */
    --error-colour: #DE3E4C;
    --valid-colour: #3D994F;
}

/* ========================== */
/* ========================== */
/* Buttons */
.btn{
    padding: 5px 30px;
    background: var(--main-orange);
    margin: 5px;
    transition: all .1s ease-in;
}
    .btn span {
        color: var(--white);
        transition: all .1s ease-in;
    }
.btn-main{
    border-radius: 50px;
}
    .btn-main:hover{
        background: var(--main-orange-dark);
    }
    .btn-main:hover span{
        color: var(--white);
    }
.btn-main-white{
    border-radius: 50px;
    background: var(--white);
}
    .btn-main-white span{
        color: var(--main-orange-dark);
    }
    .btn-main-white:hover{
        background: var(--offwhite);
    }
.btn-main-outline{
    border-radius: 50px;
    background: transparent;
    border: 1px solid var(--main-orange);
}
    .btn-main-outline span{
        color: var(--main-orange);
    }
    .btn-main-outline:hover{
        background: var(--main-orange-dark);
    }
        .btn-main-outline:hover span{
            color: var(--white);
        }
.btn-main-outline-white {
    border-radius: 50px;
    background: transparent;
    border: 1px solid var(--white);
}
    .btn-main-outline-white span {
        color: var(--white);
    }
    .btn-main-outline-white:hover{
        background: var(--offwhite);
    }
        .btn-main-outline-white:hover span{
            color: var(--main-orange-dark);
        }
.btn-round-square{
    padding: 10px;
    border-radius: 10px;
}
    .btn-round-square:hover{
        background: var(--main-orange-dark);
    }
    .btn-round-square:hover span{
        color: var(--white);
    }
.btn-contrast-gold-main{
    background: var(--contrast-gold-light);
    border-radius: 50px;
}
    .btn-contrast-gold-main span{
        color: var(--main-orange-extradark);
    }
    .btn-contrast-gold-main:hover{
        background: var(--contrast-gold-dark);
    }
        .btn-contrast-gold-main:hover span{
            color: var(--white);
        }
.form-btn{
    color: var(--white);
}


/* ========================== */
/* ========================== */
/* Page setup */
html {
    height: 100%;
    overflow-x: hidden;
}
body {
    height: 100%;
    background: #FFF;
    color: var(--font-color);
}

/* ========================== */
/* ========================== */
/* Site-wide Classes */
/* Larger Container */
.container-lg {
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 1200px){
    .container-lg {
        max-width: 1300px;
    }
}
.subhead{
    color: var(--main-orange);
    font-family: "Open Sans SemiBold";
    font-size: 0.9rem;
}
/* List Item Bullet Points */
ul li::marker {
    color: var(--main-orange);
}
/* <a> Links */
a,
a span{
    color: var(--font-color);
}
    a:hover,
    a:hover span{
        color: var(--main-orange-dark);
        text-decoration: unset;
    }
/* Page Bottom Break - for breaking page from footer */
.page-bottom-break {
    position: relative;
    height: 3px;
    background: var(--light-orange-light);
    width: 100%;
    bottom: 0;
    box-shadow: 0px 0px 11px rgba(66,66,66,0.2);
    z-index: -1;
}


/* ========================== */
/* ========================== */
/* Homepage */
/* Welcome Content */
.welcome-content{
    display: flex;
    align-items: center;
    height: 70%;
}
.welcome-content .content{
    position: absolute;
    top: 30%;
    width: 100%;
}
.welcome-content .content .content-wrap{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.welcome-content .content .tagline h1{
    color: var(--white);
    font-size: 3.5rem;
}
.bg-top{

}
    .bg-top .cover,
    .bg-top .image {
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        background-position: center;
    }
    .bg-top .cover {
        background-image: url(../images/photos/homepage-bg-top-cover.svg);
        z-index: -1;
        opacity: 0.85;
    }
    .bg-top .image {
        background-image: url(../images/photos/homepage-bg-top-image.svg);
        z-index: -2;
    }
.welcome-content .related-jobs-wrap .btn {
    box-shadow: 0px 0px 10px rgba(23, 21, 20, 0.25);
    padding: 10px 15px;
}
    .welcome-content .related-jobs-wrap .btn:last-child {
        margin-right: unset;
    }
.welcome-content .content .content-wrap .search {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
}
/* REPLACE WITH SEARCH BOX STYLE WHEN FUNCTIONAL SEARCH BOX INSERTED */
.welcome-content .search-box-wrap .temp-search-box {
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0px 0px 10px rgba(23, 21, 20, 0.25);
    padding: 10px 20px;
    width: 400px;
}
    .welcome-content .search-box-wrap .temp-search-box p{
        color: var(--gray-light);
    }
/* ========================== */
/* Latest Jobs Carousel */
.latest-jobs-carousel .owl-dots{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 2px;
    height: 20px;
}
.latest-jobs-carousel .owl-nav button.owl-prev{
    left: -40px;
    position: relative;
}
.latest-jobs-carousel .owl-nav button.owl-next {
    right: -40px;
    position: relative;
}
.latest-jobs-carousel .owl-dots button.owl-dot span {
    background: transparent;
    border: 1px solid #AD3F0B;
}
    .latest-jobs-carousel .owl-dots button.owl-dot span:hover {
        background: #AD3F0B;
    }
    .latest-jobs-carousel .owl-dots button.owl-dot.active span {
        background: #AD3F0B;
    }
.latest-jobs-carousel .owl-nav [class*='owl-']:hover {
    background: rgba(250, 101, 32, 0.2) !important;
}
.latest-jobs-carousel.owl-carousel .owl-stage-outer{
    overflow: visible;
}
/* ========================== */
/* About Us */
.about-us-wrap .about-us-block {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(66, 66, 66, 0.2);
    overflow: hidden;
}
    .about-us-wrap .about-us-block .color-stripe{
        position: relative;
        height: 15px;
        top: 0;
        width: 100%;
    }
.about-us-wrap .about-us-block .info {
    padding: 25px;
}
.about-us-wrap .about-us-block .info .img img{
    height: 74px;
    width: 74px;
}
.about-us-bg {
    background: var(--light-brown-dark);
    height: 150%;
    width: 100%;
    position: absolute;
    top: -50%;
    z-index: -1;
}
/* ========================== */
/* Referral CTA Block */
.referral-cta-home {
    background: #ad3f0b; /* Old browsers */
    background: -moz-linear-gradient(left, #ad3f0b 0%, #e05b1d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ad3f0b 0%,#e05b1d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ad3f0b 0%,#e05b1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    position: relative;
}
    .referral-cta-home .bg-top {
        position: relative;
    }
        .referral-cta-home .bg-top img {
            position: absolute;
            bottom: -2px;
            z-index: -1;
        }
.referral-cta-home .ref-info-block{
    display: flex;
    justify-content: space-between;
    margin-bottom: 1.3rem;
}
.referral-cta-home .ref-info-block .ref-img{
    margin: 0 40px;
}
.referral-cta-home .ref-info-block .ref-img svg{
    height: 75px;
    width: 75px;
}
    .referral-cta-home .ref-info-block .ref-img svg,
    .referral-cta-home .ref-info-block .ref-img svg path{
        fill: white !important;
    }
    


/* ========================== */
/* ========================== */
/* Latest Jobs */
.latest-jobs .latest-jobs-carousel .item .latest-job-wrap {
    margin: 15px;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 0 10px rgba(51, 47, 45, 0.1);
    min-width: 300px;
}
.latest-jobs .latest-jobs-carousel .item .latest-job-wrap .lj-read-more {
    display: flex;
    justify-content: flex-end;
}
    .latest-jobs .latest-jobs-carousel .item .latest-job-wrap .lj-read-more .btn-main-outline{
        display: flex;
        padding: 5px 15px;
    }
.latest-jobs .latest-jobs-carousel .item .latest-job-wrap .lj-info-block{
    display: flex;
    flex-direction: row;
    align-content: center;
    margin-bottom: 5px;
}
.latest-jobs .latest-jobs-carousel .item .latest-job-wrap .lj-info-block svg{
    height: 20px;
    width: 20px;
    margin-right: 5px;
    position: relative;
    top: 2px;
    stroke-width: 1;
}

/* ========================== */
/* ========================== */
/* Page Heads */
.page-top-head,
.content-page-top-head{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.content-page-top-head{
    display: flex;
    align-items: center;
}
.page-top-head .cover-bg,
.content-page-top-head .cover-bg{
    width: 100%;
    background: #ad3f0b; /* Old browsers */
    background: -moz-linear-gradient(left, #ad3f0b 0%, #e05b1d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ad3f0b 0%,#e05b1d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ad3f0b 0%,#e05b1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    position: absolute;
    opacity: 0.85;
    z-index: -1;
    height: 100%;
}
.page-top-head .bg-img,
.content-page-top-head .bg-img{
    z-index: -2;
    position: absolute;
    top: 180%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.content-page-top-head .bg-img{
    top: 100%;
}
.page-top-head .header-wrap{
    padding: 5rem 0 1rem 0;
}
.content-page-top-head .header-wrap{
    position: relative;
    margin: 6rem auto 3rem;
}
.content-page-top-head .btn{
    padding: 7px 50px;
}

/* ========================== */
/* ========================== */
/* Register CTA Block */
.register-cta-block-wrap {
    background: #ad3f0b; /* Old browsers */
    background: -moz-linear-gradient(left, #ad3f0b 0%, #e05b1d 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ad3f0b 0%,#e05b1d 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ad3f0b 0%,#e05b1d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

/* ========================== */
/* ========================== */
/* Referral Page */
.referral .how-it-works-info-box h1,
.referral .how-it-works-info-box h2,
.referral .how-it-works-info-box h3,
.referral .how-it-works-info-box h4{
    font-family: "Open Sans Bold";
    color: var(--main-orange);
}
.referral .how-it-works-info-box p {
    font-family: "Open Sans Regular";
}
.referral .how-it-works-info-box .cta-btns {
    display: flex;
}
    .referral .how-it-works-info-box .cta-btns .btn{
        flex-basis: 100%;
        padding: 5px 0px;
    }
.referral .reward-table-wrap{
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(66, 66, 66, 0.2);
    overflow: hidden;
}
.referral .reward-table-wrap .color-stripe{
    height: 13px;
    position: relative;
    top: 0;
}
.referral .reward-table-wrap .reward-table{
    width: 100%;
}
/* Solution for padding on table rows*/
.referral .reward-table-wrap {
    flex: 1;
}
.referral .reward-table-wrap .table-outer{
    padding: 0 20px 1rem;
}
.referral .reward-table-wrap .reward-table tr {
    border-bottom: 1px solid var(--gray-light);
}
    .referral .reward-table-wrap .reward-table tr:last-of-type {
        border-bottom: unset;
    }
.referral .reward-table-wrap .reward-table td {
    padding: 15px 0;
}
    .referral .reward-table-wrap .reward-table td:last-child {
        padding: 0 0 0 10px;
    }
.referral .reward-table-wrap .reward-table td:first-child {
    border-right: 1px solid var(--gray-light);
}

/* ========================== */
/* ========================== */
/* Downloads Page */
.downloads-block{
    box-shadow: 0px 0px 10px rgba(66, 66, 66, 0.2);
    border-radius: 3px;
    padding: 15px;
}
.downloads-block .img{
    display: flex;
    justify-content: center;
}
    .downloads-block .img svg{
        height: 100px;
        width: 100px;
        stroke-width: 1;
        stroke: var(--main-orange-dark);
    }
.downloads-block .name{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* ========================== */
/* ========================== */
/* Contact Page */
.contact-item-wrap {
    padding: 25px;
}
.contact-item-wrap .map iframe {
    height: 250px;
    border: 0;
    width: 100%;
}
.contact-item-wrap .map {
    position: relative;
}
    .contact-item-wrap .map:after {
        content: "";
        background: var(--main-orange-dark);
        height: 5px;
        position: absolute;
        bottom: 1px;
        width: 100%;
        left: 0;
        z-index: -1;
    }
.contact-item-wrap .contact-info-box .detail-wrap{
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}
.contact-item-wrap .contact-info-box .detail-wrap .img {
    margin-right: 0.5rem;
}
.contact-item-wrap .contact-info-box .detail-wrap .img svg {
    height: 20px;
    width: 20px;
}
.contact-item-wrap .contact-info-box .detail-wrap .info p {
    margin-bottom: unset;
}
.contact-item-wrap .contact-info-box .detail-wrap .info a {
    display: block;
}

/* ========================= */
/* Referral Form Page */
.refer-form-modal {
    min-height: 20rem;
}
.form-divider-right{
    border-right: 1px solid var(--main-orange-extradark);
}

/* ============================= */
/* Form Input Styling */
.form-box {
    display: flex;
    margin: 1rem 0;
}
.form-box-img {
    height: 100%;
}
    .form-box-img img {
        position: relative;
        top: -3px;
    }
.form-box-input {
    flex-grow: 1;
    overflow: hidden;
}
    .form-box-input input:not([type='checkbox']),
    .form-box-input textarea,
    .e-input-group.e-control-wrapper,
    .e-upload.e-control-wrapper {
        width: 100%;
        padding: 5px 10px;
        border-radius: 5px !important;
        border: 1px solid var(--main-orange);
        background: white;
    }
        .form-box-input input:focus,
        .form-box-input textarea:focus {
            border: 1px solid var(--main-orange-dark);
            outline: none;
        }
    .form-box-input input.modified.invalid {
        border: 1px solid var(--error-colour);
    }
    .form-box-input input.modified.valid {
        border: 1px solid var(--valid-colour);
    }
.form-errors-wrap {
    background: var(--error-colour);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    z-index: -1;
}
input.invalid + .form-errors-wrap:before {
    content: "";
    width: 100%;
    position: absolute;
    background: var(--error-colour);
    height: 10px;
    left: 0;
    display: block;
    z-index: -1;
    top: -5px;
}
@keyframes formErrorAppear {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}
input.invalid + .form-errors-wrap {
    animation: 0.25s formErrorAppear forwards ease-in-out;
    padding: 1px 10px;
}
.form-errors-wrap .validation-message {
    color: var(--white);
    font-size: 0.7rem !important;
}
.e-input-group.e-control-wrapper {
    border-color: var(--main-orange) !important;
}
.e-control.e-combobox {
    padding: unset !important;
    font-size: 1rem !important;
    color: var(--font-base) !important;
    line-height: inherit !important;
    height: 24px !important;
}
.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    min-height: 100% !important;
}
.e-control.e-richtexteditor {
    border-radius: 5px;
    border: 1px solid var(--main-orange) !important;
    background: white;
    max-width: 100%;
}
.e-rte-toolbar,
.e-toolbar-items {
    border-radius: 5px;
}
.e-rte-content {
    border-bottom: unset;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}