/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}

/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
 
 /* ======= Fade effect =======*/

.fade-up {
    transform: translateY(100px);
    -webkit-transform: translateY(100px);
    opacity: 0;
    visibility: hidden;
}

.fade-right {
    transform: translateX(100px);
    -webkit-transform: translateX(100px);
    opacity: 0;
    visibility: hidden;
}

.fade-down {
    transform: translateY(-100px);
    -webkit-transform: translateY(-100px);
    opacity: 0;
    visibility: hidden;
}

.fade-left {
    transform: translateX(-100px);
    -webkit-transform: translateX(-100px);
    opacity: 0;
    visibility: hidden;
}

.fade-out {}

.active-fade .fade-up,
.active-fade .fade-right,
.active-fade .fade-down,
.active-fade .fade-left,
.active-fade.fade-up,
.active-fade.fade-right,
.active-fade.fade-down,
.active-fade.fade-left {
    transform: translateY(0);
    -webkit-transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/*=== Transitions ===*/
.delay-1 {
    transition: all 1.3s ease 0.2s;
    /*    transition: all 1.9s ease 0.8s;*/
}

.delay-2 {
    transition: all 1.3s ease 0.5s;
    /*    transition: all 1.9s ease 1.6s;*/
}

.delay-3 {
    transition: all 1.3s ease 0.8s;
    /*    transition: all 1.9s ease 2.4s;*/
}

.delay-4 {
    transition: all 1.3s ease 1.1s;
    /*    transition: all 1.9s ease 3.2s;*/
}

.delay-5 {
    transition: all 1.3s ease 1.4s;
    /*    transition: all 1.9s ease 4s;*/
}

.delay-6 {
    transition: all 1.3s ease 1.7s;
    /*    transition: all 1.9s ease 4.8s;*/
}

.delay-7 {
    transition: all 1.3s ease 2s;
    /*    transition: all 1.9s ease 5.6s;*/
}

.delay-8 {
    transition: all 1.3s ease 2.3s;
    /*    transition: all 1.9s ease 6.4s;*/
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

:root{
    --primary: #000;
    --secondary: #f5f5f5;
}

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.7;
    font-family: "Montserrat", sans-serif;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

body{
    margin: 0!important;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

section {
    width: 100%;
}

#mask {
    background-color: rgba(41, 47, 51, 0.9);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 40;
    display: none;
}

.content {
    margin: 0 auto;
    max-width: 1200px;
    width: 88%;
}

img{
    max-width: 100%;
}

.tc{
    text-align: center;
}

.flex{
    display: flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: -o-flex;
    display: -ms-flex;
}

.jsb{
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
}

.jc{
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
}

.ac{
    align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
}

.afe{
    align-items: flex-end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    -o-align-items: flex-end;
    -ms-align-items: flex-end;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #14203b;
}

h2 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #14203b;
}

h3 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #14203b;
}

h4 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    color: #14203b;
}

h5 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
}

h6 {
    font-family: "Marcellus", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 44px;
}

p {
    font-optical-sizing: auto;
    font-style: normal;
}

p a {
    color: #b29063;

    &:hover{
        text-decoration: none;
    }
}

h2 a {

}

ul {

}

ul li {

}

ul li a {

}

/* ==========================================================================
   Flex Box Grid System
   ========================================================================== */

.grid {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.grid-cell {
    -webkit-box-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
}

.grid--half>.grid-cell {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
}
.grid--third>.grid-cell {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 33.3333%;
    flex: 0 0 33.3333%;
}
.grid--quarter>.grid-cell {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
}

.grid--gutters {
    margin: -1em 0 1em -1em;
}

    .grid--gutters>.grid-cell {
        padding: 1em 0 0 1em;
    }

.small--gutters {
    margin: -0.5em 0 0.5em -0.5em;
}

    .small--gutters>.grid-cell {
        padding: 0.5em 0 0 0.5em;
    }

.double--gutters {
    margin: -2em 0 2em -2em;
}

    .double--gutters>.grid-cell {
        padding: 2em 0 0 2em;
    }

.triple--gutters {
    margin: -3em 0 3em -3em;
}

    .triple--gutters>.grid-cell {
        padding: 3em 0 0 3em;
    }

.gs-half {
    width: 50%!important;
}

.gs-third {
    width: 33.3333%!important;
}

.gs-third, .gs-twothirds {
    -webkit-box-flex: 0!important;
    -webkit-flex: none!important;
    flex: none!important;
}

.gs-twothirds {
    width: 66.6667%!important;
}

.gs-quarter {
    width: 25%!important;
}

.gs-quarter, .gs-threequarters {
    -webkit-box-flex: 0!important;
    -webkit-flex: none!important;
    flex: none!important;
}

.gs-threequarters {
    width: 75%!important;
}

.gs-1{
    width: 8.333333%!important;
}

.gs-2{
    width: 16.6666667%!important;
}

.gs-3{
    width: 25%!important;
}

.gs-4{
    width: 33.333333%!important;
}

.gs-5{
    width: 41.6666667%!important;
}

.gs-6{
    width: 50%!important;
}

.gs-7{
    width: 58.333333%!important;
}

.gs-8{
    width: 66.6666667%!important;
}

.gs-9{
    width: 75%!important;
}

.gs-10{
    width: 83.333333%!important;
}

.gs-11{
    width: 91.6666667%!important;
}

.gs-12{
    width: 100%!important;
}

.demo {
    background-color: rgba(0,0,0,0.2);
    text-align: center;
}

/* ==========================================================================
   Contact form standard code
   ========================================================================== */

#contact_form {
    background-color: #F9F9F9;
    padding: 1em 1.8em;
    border: 1px solid #DDD;
}

    .formRow {
        display: block;
        margin: 1em 0;
    }

        .formRow label {
            display: block;
            font-size: 0.9em;
            font-weight: 600;
            margin: 0 0 5px 0;
            color: #FFF;
        }

        .formRow input {
            display: block;
            width: 100%;
            margin: 10px 0;
            border: 1px solid #DDD;
            padding: 6px;
            height: 37px;
            font-size: 0.9em;
        }

        .formRow textarea {
            display: block;
            width: 100%;
            margin: 10px 0;
            border: 1px solid #DDD;
            padding: 6px;
            height: 214px;
            font-size: 0.9em;
        }

        .formRow button {
            display: block;
            background-color: #333;
            color: #FFF;
            font-weight: 600;
            font-size: 0.9em;
            text-align: center;
            border: none;
            width: 100%;
            padding: 13px 10px 15px;
            margin: 24px 0 0;
            transition: all 0.3s ease 0s;
        }

        .formRow button:hover {
            background-color: #000;
        }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

header{
    position: relative;
}

    .logo-container{
        min-width: 365px;
        max-width: 365px;
        height: 128px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #ded5c8;
    }

        .logo{
            width: 260px;
        }

    nav{
        width: 100%;
        border-top: 1px solid #ded5c8;
    }

        nav ul{
            list-style: none;
            padding-left: 87px;
            margin: 0;
            height: 94px;
            display: flex;
            align-items: center;
        }

            nav li{
                height: 100%;
                position: relative;
            }

                nav li a{
                    position: relative;
                    font-size: 12px;
                    color: #14203b;
                    text-transform: uppercase;
                    text-decoration: none;
                    height: 100%;
                    margin: 0 33px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                }

                nav > ul > li > a:before{
                    display: block;
                    content: "";
                    position: absolute;
                    left: -40px;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    width: 0;
                    height: 1px;
                    background-color: #14203b;
                    transition: all ease-in-out 0.3s;
                    -moz-transition: all ease-in-out 0.3s;
                    -webkit-transition: all ease-in-out 0.3s;
                    -o-transition: all ease-in-out 0.3s;
                    -ms-transition: all ease-in-out 0.3s;
                }

                nav li a.active:before, nav li a:hover:before{
                    width: 30px;
                }

                nav li:first-of-type a{
                    margin-left: 0;
                }

                nav li:last-of-type a{
                    margin-right: 0;
                }

                nav ul.subnav{
                    transform: scaleY(0);
                    transform-origin: top;
                    position: absolute;
                    top: 100%;
                    left: 4px;
                    height: auto;
                    padding-left: 0;
                    z-index: 3;
                    background: #fff;
                    width: 338px;
                    border: 1px solid #ded5c8;
                    transition: all ease-in-out 0.3s;
                    -moz-transition: all ease-in-out 0.3s;
                    -webkit-transition: all ease-in-out 0.3s;
                    -o-transition: all ease-in-out 0.3s;
                    -ms-transition: all ease-in-out 0.3s;

                    li{
                        padding: 0 36px;
                        width: 100%;

                        &:first-of-type{
                            padding-top: 26px;
                        }

                        &:last-of-type{
                            padding-bottom: 23px;
                        }

                        a{
                            overflow: hidden;
                            letter-spacing: 0.6em;
                            font-size: 11px;
                            color: #b29063;
                            text-transform: uppercase;
                            display: block;
                            margin: 12px 0;
                            font-weight: 400;
                            transition: padding .3s ease-out,color .3s ease-out;
                            padding-left: 0;

                            &:before{
                                content: '';
                                width: 30px;
                                position: absolute;
                                top: calc(50% - 1px);
                                background-color: #ded5c8;
                                height: 1px;
                                left: -40px;
                                opacity: 0;
                                transition: all ease-in-out 0.3s;
                            }

                            &:hover{
                                padding-left: 40px;

                                &:before{
                                    left: 0;
                                    opacity: 1;
                                }

                            }
                        }

                    }

                }

                nav li:hover ul.subnav{
                    transform: scaleY(1);
                }

        .nav-info{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 175px;
            border-left: 1px solid #ded5c8;
            height: 94px;
            cursor: pointer;
        }

            .nav-info p{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                color: #14203b;
                text-transform: uppercase;
            }

                .star{
                    position: relative;
                    display: block;
                    width: 31px;
                    cursor: pointer;
                }

                .nav-info .star{
                    margin-left: 13px;
                    margin-bottom: 5px;
                }

                    .star .rotated{
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: 0;
                        bottom: 0;
                        margin: auto;
                        transform: rotate(45deg);
                        width: 100%;
                        transition: all ease-in-out 0.6s;
                        -moz-transition: all ease-in-out 0.6s;
                        -webkit-transition: all ease-in-out 0.6s;
                        -o-transition: all ease-in-out 0.6s;
                        -ms-transition: all ease-in-out 0.6s;
                    }

                    .nav-info:hover .star .rotated, .menu-btn:hover .star .rotated{
                        width: 0;
                    }

            .info-sidebar{
                position: fixed;
                top: 0;
                bottom: 0;
                width: 500px;
                right: -500px;
                background: #14203b;
                z-index: 2;
                padding: 200px 65px 0;
                transition: all .6s cubic-bezier(.77,0,.175,1);
            }

            .show-info{
                right: 0;
            }

                .info-close{
                    display: block;
                    position: absolute;
                    right: 57px;
                    top: 69px;
                    width: 25px;
                    cursor: pointer;
                }

                .info-sidebar p{
                    color: #fff;
                    font-size: 16px;
                    text-transform: none;
                    font-weight: 300;
                }

    .menu-btn{
        display: none;
        cursor: pointer;
    }

    .mob-menu-active img{
        width: 0;
    }

    .mob-menu-active .rotated{
        width: 100%!important;
    }

    .mob-menu{
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        z-index: 10;
        margin: 0;
        padding: 2em 6%;
        background-color: #fff;
        list-style: none;
        display: none;
    }

        .mob-menu li{
            position: relative;
            overflow: hidden;

            &:first-of-type a{
                margin-top: 0;
            }

            a{
                overflow: hidden;
                position: relative;
                font-size: 12px;
                color: #14203b;
                text-transform: uppercase;
                display: block;
                margin: 6px 0;
                font-weight: 400;
                transition: padding .3s ease-out,color .3s ease-out;
                padding-left: 0;
                text-decoration: none;

                &:before{
                    content: '';
                    width: 30px;
                    position: absolute;
                    top: 8px;
                    background-color: #14203b;
                    height: 1px;
                    left: -40px;
                    opacity: 0;
                    transition: all ease-in-out 0.3s;
                }

                &:hover{
                    padding-left: 40px;

                    &:before{
                        left: 0;
                        opacity: 1;
                    }

                }
            }

            .mob-subnav{
                padding-left: 0;
                margin: 0;
                display: none;

                a{
                    color: #b29063;

                    &:before{
                        background-color: #b29063;
                    }

                }

            }

            img{
                width: 20px;
                position: absolute;
                top: 6px;
                right: 0;
                cursor: pointer;
                transition: all ease-in-out 0.3s;
                transform: rotate(0);

                &.show-sub{
                    transform: rotate(90deg);
                }

            }

        }

.home-hero{
    position: relative;
    height: 720px;
}

    .video-overlay{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-image: url(../img/video-bg.png);
        z-index: 1;
        padding: 5em;
        display: flex;
        align-items: center;
        color: #fff;
    }

        .video-overlay p{
            margin: 0;
            text-transform: uppercase;
        }

        .video-overlay p:first-of-type{
            letter-spacing: 7px;
            font-size: 11px;
            line-height: 1.2;
        }

        .video-overlay h2{
            color: #fff;
            font-size: 70px;
            margin: 0;
            line-height: 1.3;
        }

        .video-overlay .btn{
            margin-top: 0.5em;
        }

            .video-overlay .btn a{
                padding: 14px 65px 12px;
                border: 1px solid #fff;
                font-size: 12px;
                font-weight: 500;
                color: #fff;
                text-decoration: none;
                display: inline-block;
                transition: all ease-in-out 0.3s;
                -moz-transition: all ease-in-out 0.3s;
                -webkit-transition: all ease-in-out 0.3s;
                -o-transition: all ease-in-out 0.3s;
                -ms-transition: all ease-in-out 0.3s;
            }

            .video-overlay .btn a:hover{
                color: #14203b;
                background-color: #fff;
            }

.header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    height: 128px;
    max-height: 100%;
    background: #fff;
}

.intro.home-intro{
    margin-bottom: 7em;
}

.main-content h3{
    font-weight: 500;
    font-size: 11px;
    line-height: 1.6em;
    letter-spacing: .6em;
    text-transform: uppercase;
    color: #b29063;
    margin-bottom: 0;
    font-family: "Montserrat", sans-serif;
}

.title-box + .intro, .hero + .main-content{
    padding-top: 5em;
}

table{
    width: 100%;
    border-collapse: collapse;

    tr{
        border: 1px solid #e1e1e1;
    }

    td{
        border-right: 1px solid #e1e1e1;
        padding: 5px 10px;
    }

}

.intro{
    margin-bottom: 3em;

    h1{
        margin: 0.6em 0;
        margin-bottom: 0;
        line-height: 1.3;
        font-size: 44px;
    }

    h2{
        font-weight: 400;
        font-size: 34px;
        line-height: 1.294em;
        color: #14203b;
        width: 70%;
        padding-top: 50px;
    }

    h2 + h3{
        font-weight: 500;
        font-size: 11px;
        line-height: 1.6em;
        letter-spacing: .6em;
        text-transform: uppercase;
        color: #b29063;
        margin-bottom: 0;
        margin-top: 55px;
        font-family: "Montserrat", sans-serif;
    }

    h6{
        margin: 0.6em 0;
        margin-bottom: 1em;
        line-height: 1.3;
    }

    h4{
        font-size: 1.5em;
        margin-bottom: 0;
    }

    h5{
        font-size: 27px;
        margin: 0;
    }

    p,ul,ol{
        margin-top: 20px;
        line-height: 1.75em;
        font-weight: 400;
        color: #262626;
        letter-spacing: 0;
    }

    .gs-10{

        .sub{
            padding: 0;
            margin-top: 55px;
        }

    }

    .sub{
        padding: 1em 0 2em;

        p{
            font-weight: 500;
            font-size: 11px;
            line-height: 1.6em;
            letter-spacing: .6em;
            text-transform: uppercase;
            color: #b29063;
            margin-bottom: 0;
        }

        h1{
            margin: 0;
        }
    }

    .sub + h6{
        margin-top: -25px;
    }

    h3 + h1{
        margin-top: 0;
    }

    .gs-1{
        border-left: 0.5px solid rgb(226, 226, 226);
    }

    .two-col ul{
        column-count: 2;
        column-gap: 60px;
    }

    .tick-area{
        padding-left: 3em;

        ul{
            list-style: none;
            padding-left: 30px;

            &.h1-list li:before{
                top: 12px;
                top: 6px;
            }

            li{
               position: relative; 
               margin: 10px 0;
               break-inside: avoid;

                &:before{
                    position: absolute;
                    top: 6px;
                    left: -22px;
                    content: "";
                    display: block;
                    width: 14px;
                    height: 14px;
                    background: url(../img/icons/check.svg) no-repeat;
                }

            }

        }

        p{
            margin: 0; 
        }

        h1{
            margin: 0;
            font-size: 28px;
        }
    }

    
}

.values{
    background-color: #F2F2F2!important;
    padding-top: 1em;
    padding-bottom: 1em;
    margin-bottom: 0;
}

.quote{
    margin-bottom: 3em;

    h2{
        font-weight: 400;
        font-size: 34px;
        line-height: 1.294em;
        color: #14203b;
        width: 70%;
    }

    h6{
        margin: 0;
    }

    h5{
        font-size: 20px;
        margin: 0;
    }

    p{
        margin-top: 30px;
        line-height: 1.75em;
        font-weight: 300;
        color: #262626;
        letter-spacing: 0;
    }

    .sub{
        margin-top: 55px;

        p{
            font-weight: 500;
            font-size: 11px;
            line-height: 1.6em;
            letter-spacing: .6em;
            text-transform: uppercase;
            color: #b29063;
        }
    }

    .gs-1{
        border-left: 0.5px solid rgb(226, 226, 226);
    }

    .tick-area{
        padding-left: 3em;

        p{
           margin: 0; 
        }

        h1{
            margin: 0;
        }
    }
}

.box-section{
    margin-bottom: 3em;

    .gs-half{

        img{
            transform: scaleX(1.05) translateX(0px);
            transition: transform .45s cubic-bezier(.61,1,.88,1);
        }

        a{
            overflow: hidden;
            display: block;
            position: relative;

            &.overlay-link{
                position: absolute;
                top: 1em;
                right: 0;
                bottom: 0;
                left: 1em;
                z-index: 1;
            }

            .box-text{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                padding: 41px 48px;
                display: flex;
                align-items: flex-end;
            }

        }

        a:hover img{
            transform: scaleX(1.05) translateX(6px);
        }

    }

    .gs-third{
        position: relative;
    }

    .boxfour{
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin: 0;

        .box2{
            
            /* padding: 41px 48px; */
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;

            h4{
                font-weight: 400;
                font-size: 28px;
                line-height: 1.285em;
                color: white;
                text-decoration: none;
                margin: 0;
            }

            .gs-9 {

                a{
                    text-decoration: none;
                }

            }

            .gs-3{
            
                .arrow-right {
                    fill: none;
                    stroke: white;
                    margin-left: 2em;
                }
            
            }

        }

        .box4{
            /* background: url("../img/bloc4.jpg") no-repeat center;
            background-size: cover;
            padding: 41px 48px; */
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;


            h4{
                font-weight: 400;
                font-size: 28px;
                line-height: 1.285em;
                color: white;
                text-decoration: none;
                margin: 0;
            }

            .gs-9 {
                a{
                    text-decoration: none;
                }
            }

            .gs-3{
                .arrow-right {
                    fill: none;
                    stroke: white;
                    margin-left: 2em;
                }
            }
        }
    }

    .overlap{
        display: flex;
        flex-direction: column;
        position: relative;
        justify-content: center;
        align-items: center;
    }

    .white-box{
        background-color: white;
        padding: 2em;
        margin: 3em;
        position: absolute;

        h1{
            margin: 0;
            line-height: 1.4;
        }

        a{
            color: #111;
            background-color: #f4f4f4;
            border: 0;
            font-size: 1rem;
            border-style: solid; 
            padding: 13px 46px; 
            text-decoration: none;
            display: inline-block;
            transition: all ease-in-out 0.3s;

            &:hover{
                background-color: #111;
                color: #fff;
            }

        }

        p{
            font-weight: 100;
            margin-bottom: 0;
        }
    }
}

.end-boxes{
    margin-bottom: 4em;

    img{
        transform: none!important;
        width: 100%;
    }

}

.home-team{
    margin-top: 10em;

    h2{
        font-size: 44px;
        margin-bottom: 0;
    }

    a{
        margin-top: 50px;
        background-color: #d4bfa3;
        border: 1px solid #d4bfa3;
        color: #000;
        font-size: 12px;
        padding: 12px 55px 10px;
        text-decoration: none;
        display: inline-block;
        transition: all ease-in-out 0.3s;
        -moz-transition: all ease-in-out 0.3s;
        -webkit-transition: all ease-in-out 0.3s;
        -o-transition: all ease-in-out 0.3s;
        -ms-transition: all ease-in-out 0.3s;
    }

    a:hover{
        background-color: transparent;
    }
}

.name{
    position: absolute;
    top: 0;
    left: 0.5em;
    bottom: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0) 84%);
    transition: opacity .3s ease-out;
    padding: 35px 40px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    h4{
        font-size: 28px;
        line-height: 1.285em;
        margin: 0;
        color: white;
    }

    p{
        font-weight: 500;
        font-size: 11px;
        line-height: 1.6em;
        letter-spacing: .6em;
        text-transform: uppercase;
        color: white;
        margin-bottom: 0;
    }

    img{
        width: 16px;
        opacity: 1;
        transition: all ease-in-out 0.3s;
        -moz-transition: all ease-in-out 0.3s;
        -webkit-transition: all ease-in-out 0.3s;
        -o-transition: all ease-in-out 0.3s;
        -ms-transition: all ease-in-out 0.3s;

        &:hover{
            opacity: 0.5;
        }

    }

}

.no-mb{
    margin-bottom: 0!important;
}


    

    .gs-5 img{
        height: 100%;
        object-fit: cover;
    }


.map-banner + .team-grey{
    margin-top: 0;
}

.enquire{
    margin: 4em 0 7em;

    p{
        font-weight: 500;
        font-size: 11px;
        line-height: 1.6em;
        letter-spacing: .6em;
        color: #b29063;
    }

    h1{
        font-weight: 400;
        font-size: 44px;
        line-height: 1.227em;
        color: #14203b;
    }

    a{
        margin-top: 50px;
        /* background-color: #d4bfa3; */
        color: #000;
        font-size: 14px;
        /* padding: 12px 55px 10px; */
        text-decoration: none;
    }

    .user-box{
        position: relative;
        color: #14203b;
        margin-bottom: 26px;
        border: none;
        outline: none;

        label {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            font-weight: 100;
            color: #6c6c6c;
        }

        input {
            width: 100%;
            font-size: 16px;
            color: #14203b;
            border: none;
            outline: none;
            background: transparent;
            border-bottom: 0.5px solid #c5c5c5;
            padding: 8px 0;
            font-weight: 300;
        }

        textarea{
            width: 100%;
            font-size: 16px;
            color: #14203b;
            border: none;
            outline: none;
            background: transparent;
            border-bottom: 0.5px solid #c5c5c5;
            padding: 8px 0;
            height: 97px;
            font-weight: 300;
        }

        select{
            width: 100%;
            font-weight: 300;
            font-size: 16px;
            color: #14203b;
            border: none;
            outline: none;
            background: transparent;
            border-bottom: 0.5px solid #c5c5c5;
            padding: 8px 0;
        }

        button{
            font-size: 12px;
            font-weight: 500;
            line-height: 1.7em;
            margin: 0 !important;
            outline: 0 !important;
            text-decoration: none !important;
            text-transform: uppercase !important;
            transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out !important;
            width: auto !important;
            padding: 12px 55px 10px !important;
            cursor: pointer;
            margin: 4px 0 0 0 !important;
            color: #14203b !important;
            background-color: #d4bfa3 !important;
            border: 1px solid transparent !important;

            &:hover{
                background-color: transparent !important;
                border-color: #d4bfa3 !important;
            }

        }

    }

    .message{
        margin-bottom: 15px;
    }

    .address{
        background-color: #F2F2F2;
        background-size: cover;
        padding: 50px;
        
        h1, p{
            color: black;
            margin: 0;
        }

        img{
            padding-right: 7px;
        }

        p{
            font-weight: 300;
            font-size: 14px;
            line-height: 1.6em;
            letter-spacing: 0;
        }

        .visit-us{
            margin-top: 10px;

        
            a{
                font-size: 12px;
                font-weight: 500;
                line-height: 1.7em;
                outline: 0 !important;
                text-decoration: none !important;
                transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out !important;
                width: auto !important;
                padding: 8px 38px 8px !important;
                cursor: pointer;
                margin: 10px 0 0 0 !important;
                color: #14203b !important;
                background-color: #d4bfa300 !important;
                border: 1px solid #d4bfa3 !important;
    
                &:hover{
                    background-color: transparent !important;
                    border-color: #ab977c !important;
                }
    
            }
            
            
        }
    }
}


/* Inner */

.hero{
    height: 550px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;

    .content{
        position: relative;
        z-index: 1;
    }

}

.home-hero h1 {
    max-width: 900px;
}

.hero h1 {
    line-height: 1.2;
    font-size: 3em;
    margin: 0 0 10px;
}

.team-title{
    h1{
        width: 50%;
        line-height: 1.4em;
        margin: 2em 0;
        font-size: 2.4em;
    }
}

.title-box{

    margin-top: 5em;

    .gs-half:first-of-type{
        background-color: #f6f6f6;
        padding: 4em;
    }

    h1{
        margin:0;
        padding:0;
    }

    p{
        font-size: 1.3em;
        font-weight: 100;
        margin: 0;
    }

    img{
        height: 400px;
        width: 100%;
        object-fit: cover;
    }

}

.team-grey{
    background-color: #ebebeb;
    padding: 0.1em 0;
    margin: 2em 0 2em 0;

    h1{
        line-height: 1.4em;
        margin: 2em 0;
        font-size: 2em;
        text-align: center;
    }
}

.training{

    .grid{
        margin-top: 0;
    }

    .grey{
        background-color: #ebebeb;
        padding: 3em!important;
        height: 100%;
    }
    .gs-half{
/*        padding: 0;*/
    }

    img{
        height: 100%;
        object-fit: cover;
        width: 100%;
/*        max-height: 400px;*/
    }

}

/*===== Clubs Dropdowns =====*/
.active-heading img {
    transform: rotate(180deg)!important;
}

.active-heading img:first-of-type {
    transform: rotate(0deg)!important;
}


.region-container{
    overflow: hidden;
    background-color: white;
    margin-bottom: 10px;
    /* display: flex;
    flex-wrap: wrap;
    align-items: center; */
}

.grey-box{
    background-color: #f1efef!important;
}

    .region-container h3{
        font-size: 1.4em;
        font-weight: 500;
        margin: 0;
        padding: 15px 1em;
        cursor: pointer;
        color: #2e2e2e;
    }


        .region-container h3 img{
            min-width: 20px;
            transform: rotate(0deg);
            transition: all ease-in-out 0.3s;
            -moz-transition: all ease-in-out 0.3s;
            -webkit-transition: all ease-in-out 0.3s;
            -o-transition: all ease-in-out 0.3s;
            -ms-transition: all ease-in-out 0.3s;
            margin-right: 1em;
        }

    /* .region-dropdown{
        background-color: #e8e8e8;
    } */
    .region-dropdown, .club-dropdown, .county-dropdown{
        display: none;
    }

        .region-dropdown p:first-of-type{
            margin-top: 0;
        }

        .region-dropdown p:last-of-type{
            margin-bottom: 10px;
        }

        .region-dropdown p{
            font-weight: 400;
            padding-left: 1.4em;
            font-size: 0.9em;
        }

        .region-dropdown p span{
            font-weight: 400;
            display: inline-block;
            width: 100px;
        }

        .region-dropdown h3{
            font-size: 1.2em;
            font-weight: 500;
            margin: 0;
            padding: 15px 1em;
            cursor: pointer;
            color: #032454;
        }

        .region-dropdown h3.county-heading{
            background-color: #1a437e;
            color: #fff;
        }

        .region-dropdown h3 img{
            margin-right: 1em;
        }

        .club-dropdown a{
            color: #da3439;
            font-size: 1em;
        }

/* team profile */
.flex-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;

    .team-bio{
        padding: 2em;

            h2, h5{
                margin: 0;
            }

            p{
                padding: 1em 0;
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: #cccccc;
                border-top-width: 1px;
                border-top-style: solid;
                border-top-color: #cccccc;
            }
    }
}

.flex-container >div {
    width: 50%;
}



/* Footer */
footer{
    background: url("../img/footer.jpg") no-repeat center;
    background-size: cover;
    padding-top: 10em;
    overflow: hidden;
    

    .grid{
        margin-bottom: 0;
    }

    h1{
        color: white;
        font-weight: 400;
        font-size: 20px;
        line-height: 1.4em;
    }

    p,a{
        font-size: 16px;
        line-height: 1.75em;
        font-weight: 300;
        color: #b3b3b5;
        text-decoration: none;
        line-height: 30px;
    }

    li{
        list-style: none;
        margin-bottom: 10px;
    }

    li a{
        font-size: 16px;
        line-height: 1.75em;
        font-weight: 400;
        color: #b7b8be;
        text-decoration: none;

        &:hover{
            color: #fff;
        }
    }

    .copyright{
        border-top: solid #e1e1e16e 0.5px;
        width: 100vw;
        margin-top: 10em;
        
        ul{
            display: flex;
            padding: 0;
        }

        li{
            list-style-type:none;
            border-right: white 0.5px solid;

            &:last-of-type{
                border-right: 0;
            }

        }

        a{
            padding: 10px;
        }
    }
    
}


.hero-404{
    min-height: 100vh;
    background-size: cover;
    background-position: bottom;

    div{
        padding: 7em 0;

        h3{
            font-weight: 500;
            font-size: 11px;
            line-height: 1.6em;
            letter-spacing: .6em;
            text-transform: uppercase;
            font-family: Montserrat, sans-serif;
            color: #b29063;
            margin: 0;
            -ms-word-wrap: break-word;
            word-wrap: break-word;
        }

        h1{
            font-weight: 400;
            font-size: 100px;
            line-height: 1.163em;
            font-family: Marcellus, serif;
            color: var(--qode-main-color);
            margin: 0;
            -ms-word-wrap: break-word;
            word-wrap: break-word;
        }

        p{
            font-size: 18px;
            margin: 6px 0 0 0;
            max-width: 400px;
            font-weight: 300;
        }

        a{
            border-radius: 0;
            display: inline-flex;
            font-family: Montserrat, sans-serif;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.7em;
            margin: 0;
            outline: 0;
            position: relative;
            text-decoration: none;
            text-transform: uppercase;
            transition: color .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
            width: auto;
            padding: 12px 55px 10px;
            color: #fff;
            background-color: #14203b;
            border: 1px solid transparent;
            font-weight: 400;
            margin-top: 52px;

            &:hover{
                color: #14203b;
                background-color: transparent;
                border-color: #14203b;
            }

        }

    }

}

.fail-response{
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #cc0000;
    padding: 20px;
    color: #fff;
    max-width: 250px;
    z-index: 100;
}

.success-response{
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #14203b;
    padding: 20px;
    color: #fff;
    max-width: 250px;
    z-index: 100;
    border: 1px solid #fff;
}

    .fail-close img{
        width: 15px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }

    .form-response h2{
        font-size: 1.2em;
        margin: 0;
        color: #fff;
    }

    .form-response h2:after{
        display: none;
    }

    .form-response p{
        color: #fff;
        margin: 0;
        font-size: 0.9em;
    }


/*===================== Responsive Styling =========================*/
@media only screen and (max-width: 1400px) {

    header{

        .logo-container{
            min-width: 320px;
            max-width: 320px;

            .logo{
                width: 220px;
            }

        }

        nav{

            ul{
                padding-left: 50px;

                li a{
                    margin: 0 23px;

                    &:before{
                        left: -25px;
                    }

                    &:hover:before{
                        width: 20px;
                    }

                }

            }

            .nav-info{
                width: 125px;
            }

        }

    }

}

@media only screen and (max-width: 1200px) {

    .home-hero{
        height: 575px;
    }

    .video-overlay {
        padding: 4em;

        h2{
            font-size: 50px;
        }

    } 

    header{
        padding: 18px 6%;

        .logo-container{
            border-right: 0;
            min-width: 0;
            max-width: 100%;
            height: auto;

            .logo{
                width: 161px;
            }

        }

        nav{
            display: none!important;
        }

        .menu-btn{
            display: block;
        }

    }

}

@media only screen and (max-width: 1024px) {
    .box-section{
        .gs-half{
            width: 100%!important;
        }

    .boxfour{
        .gs-half{
            width: 50%!important;
        }
    }
    }

    .flex-container {
        flex-direction: column;
    }

    .flex-container >div {
        width: 100%;
    }

    .flex-container img{
        margin-bottom: 2em;
    }
}

@media only screen and (max-width: 1000px) {

    .hero{
        height: 400px;

        h1{
            font-size: 2.5em;
        }

    }

    .team-title {
        h1 {
            width: 100%;
            font-size: 2em;
        }
    }

    .title-box{
        margin-top: 3em;
    }

    .intro{

        &.home-intro{
            margin-bottom: 4em;
        }

        .tick-area{
            padding-left: 0!important;

            .gs-half{
                width: 100%!important;

                &:last-of-type{
                    padding-top: 0;

                    ul{
                        margin-top: 0;
                    }

                }

                ul{
                    margin-bottom: 0;
                }

            }

        }

        

        .gs-1{
            width: 1%!important;
        }

        .gs-10{
            width: 99%!important;
            padding-left: 2em;
            
            h2{
                width: 100%;
                font-size: 26px;
                padding-top: 20px;
            }

            .sub{
                margin-top: 30px;
            }

        }

    }

    

    .home-team{
        margin-top: 4em;

        a{
            margin-top: 20px;
        }

    }

    .home-team + .map-banner{
        margin: 4em 0;
    }

    .quote{

        .gs-1{
            width: 1%!important;
        }

        .gs-10{
            width: 99%!important;
            padding-left: 2em;
            
            h2{
                width: 100%;
                font-size: 26px;
                padding-top: 20px;
            }

            .sub{
                margin-top: 30px;
            }

        }

    }

    .end-boxes{

        .overlap{
            overflow: hidden;

            img{
                position: absolute;
                top: 1em;
                right: 0;
                bottom: 0;
                left: 1em;
                height: 100%;
            }

            .white-box{
                position: relative;
            }

        }

    }

    .enquire .gs-4{
        display: none;
    }

    .map-banner .gs-6:first-of-type{
        display: none;
    }

    footer{
        padding-top: 5em;

        .copyright{
            margin-top: 5em;
        }

    }

}

@media only screen and (max-width: 900px) {

    .video-overlay{
        h2{
            font-size: 2.5em;
            margin: 7px 0 15px;
        }
    }

}

@media only screen and (max-width: 768px) {
    .gs-half{
        width: 100%!important;
    }

    .gs-third {
        width: 100%!important;
    }

    .gs-7{
        width: 100%!important;
    }

    .video-overlay{
        padding: 2.5em;
    }

    .enquire{
        margin: 4em 0 2em;

        .gs-8 .grid .gs-half:last-of-type{
            padding-top: 0;
        }

    }

    .intro{

        .sub{
            padding: 2em 0 0;

            h1{
                margin-top: 7px;
            }

        }

    }

    .title-box + .intro, .hero + .main-content{
        padding-top: 2em;
    }

    h1{
        line-height: 1.3;
    }

    footer{

        ul{
            padding-left: 0;
            list-style: none;
        }

        .copyright{

            ul{
                display: block;

                li{
                    display: inline-block;
                    margin: 6px 0;
                }

            }

        }

    }

    
    
}

@media only screen and (max-width: 700px) {

    .hero {
        height: 275px;

        h1{
            font-size: 2em;
        }

    }

    .home-hero{
        height: 400px;
    }

}


@media only screen and (max-width: 680px) {
    .box-section{
        .boxfour{
            .gs-half{
                width: 100%!important;
            }
        }

        .gs-third{
            width: 100%!important;
        }
    }
}


@media only screen and (max-width: 500px) {

    .video-overlay{
        h2{
            font-size: 2em;
        }
    }


    .end-boxes {
        & .overlap {
            .white-box {
                margin: 1.5em;
            }
        }
    }

}

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 375px) {}

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


/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap; /* 1 */
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
    white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}


/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

   @media only screen and (max-width : 1000px) {}
   @media only screen and (max-width : 768px) {}
   @media only screen and (max-width : 660px) {}
   @media only screen and (max-width : 460px) {}
   @media only screen and (max-width : 380px) {}