/* ====================== */
/* Mod Theme DESIGN BASE */
/* ====================== */

/* VARIABLES (**not supported by IE)
    use find and replace if deployment require IE support*/
/* ---------------------------------------------- */
body {

    /* -------- BRAND COLOURS -------- */

    --color-primary: #0082D9;
    --color-primary-d1: #0068b4;
    --color-primary-d2: #00589c;
    --color-primary-l1: #2f9eee;
    --color-primary-l2: #59b8ff;
    --color-primary-l3: #8bceff;
    --color-primary-l4: #b3dcff;
    --color-primary-a70: rgba(0, 130, 217, 0.7);

    /* note: grey-80 = #333333*/
    --color-secondary: #646464;
    --color-secondary-l1: #646464;
    --color-secondary-l2: #646464;
    --color-secondary-d1: #646464;
    --color-secondary-d2: #646464;


    --color-tertiary: #4d4d4d;
    --color-tertiary-l1: #4d4d4d;
    --color-tertiary-l2: #4d4d4d;
    --color-tertiary-d1: #4d4d4d;
    --color-tertiary-d2: #4d4d4d;

    /*--color-primary-d1: #d25d5a;*/
    /*--color-primary-l3: #ffd3d3;;*/
    /*--color-primary-l4: #ffe6e6;*/



    /* -------- B/W/G (standard colour vars) -------- */

    --white-90: rgba(255,255,255,0.9);
    --white-80: rgba(255,255,255,0.8);
    --white-75: rgba(255,255,255,0.75);
    --white-60: rgba(255,255,255,0.6);
    --white-50: rgba(255,255,255,0.5);
    --white-25: rgba(255,255,255,0.25);
    --white-20: rgba(255,255,255,0.2);
    --white-10: rgba(255,255,255,0.1);

    --black-90: rgba(0,0,0,0.9);
    --black-80: rgba(0,0,0,0.8);
    --black-75: rgba(0,0,0,0.75);
    --black-60: rgba(0,0,0,0.6);
    --black-50: rgba(0,0,0,0.5);
    --black-25: rgba(0,0,0,0.25);
    --black-20: rgba(0,0,0,0.2);
    --black-10: rgba(0,0,0,0.1);

    --grey-95: #111111;
    --grey-90: #1a1a1a;
    --grey-85: #262626;
    /*--grey-80: #111111;*/
    --grey-75: #404040;
    /*--grey-60: #575757;*/
    --grey-50: #808080;
    --grey-40: #9c9c9c;
    --grey-25: #c0c0c0;
    /*--grey-20: #111111;*/
    --grey-10: #e5e5e5;
    --grey-05: #f2f2f2;
    --grey-05: #f3f3f3;
    --grey-025: #f9f9f9;


    /* -------- Map color vars to WP Customizer Preset colors -------- */

    --color-primary: var(--wp--preset--color--primary);
    --color-primary-d1: var(--wp--preset--color--primary-d-1);
    --color-primary-d2: var(--wp--preset--color--primary-d-2);
    --color-primary-l1: var(--wp--preset--color--primary-l-1);
    --color-primary-l2: var(--wp--preset--color--primary-l-2);

    --color-secondary: var(--wp--preset--color--secondary);
    --color-secondary-d1: var(--wp--preset--color--secondary-d-1);
    --color-secondary-d2: var(--wp--preset--color--secondary-d-2);
    --color-secondary-l1: var(--wp--preset--color--secondary-l-1);
    --color-secondary-l2: var(--wp--preset--color--secondary-l-2);

    --color-tertiary: var(--wp--preset--color--tertiary);
    --color-tertiary-d1: var(--wp--preset--color--tertiary-d-1);
    --color-tertiary-d2: var(--wp--preset--color--tertiary-d-2);
    --color-tertiary-l1: var(--wp--preset--color--tertiary-l-1);
    --color-tertiary-l2: var(--wp--preset--color--tertiary-l-2);



    --grad-primary-d: linear-gradient(135deg, var(--color-primary-d1) 0%, var(--color-primary) 100%);
    --grad-primary-l: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-l1) 100%);

    --grad-secondary-d: linear-gradient(135deg, var(--color-secondary-d1) 0%, var(--color-secondary) 100%);
    --grad-secondary-l: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-l1) 100%);

    --grad-tertiary-d: linear-gradient(135deg, var(--color-tertiary-d1) 0%, var(--color-tertiary) 100%);
    --grad-tertiary-l: linear-gradient(135deg, var(--color-tertiary) 0%, var(--color-tertiary-l1) 100%);
}



/* Layout */
/* ================================================== */

/* CONTAINER Overrides */
/* ---------------------------------------------- */

/* Container */
.container {
    max-width: 1300px;
}

/* Container-2 (HALF) */
@media only screen and (min-width: 768px) {
    .container-2 {
        max-width: 650px;
    }
}

/* Magic Columns */
/* ---------------------------------------------- */


.magic-content {
    /*border: 1px solid orange;*/
}

.magic-column {

}
@media only screen and (max-width: 1230px) {
    .magic-column.magic-small {
        max-width: 37.5% !important;
        /*flex: 0 0 37.5%;*/
    }
    .magic-column.magic-large {
        max-width: 62.5% !important;
        /*flex: 0 0 62.5%;*/
    }
    .magic-content {
        max-width: 100% !important;
    }
}
@media only screen and (min-width: 1430px) {
    .p-magic-0 {
        padding: 0 !important;
    }
    .pt-magic-0,
    .py-magic-0 {
        padding-top: 0 !important;
    }
    .pr-magic-0,
    .px-magic-0 {
        padding-right: 0 !important;
    }
    .pb-magic-0,
    .py-magic-0 {
        padding-bottom: 0 !important;
    }
    .pl-magic-0,
    .px-magic-0 {
        padding-left: 0 !important;
    }
}
@media only screen and (max-width: 991px) {
    .magic-column.magic-small {
        max-width: 50% !important;
        /*flex: 0 0 37.5%;*/
    }
    .magic-column.magic-large {
        max-width: 50% !important;
        /*flex: 0 0 62.5%;*/
    }
}
@media only screen and (max-width: 767px) {
    .magic-column.magic-small {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }
    .magic-column.magic-large {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100%;
    }
}


#layout-content .wp-block-columns > .wp-block-column[class*="col-"]
/*,#layout-content .wp-block-columns > .wp-block-column.col */
{
    flex-basis: 100%!important;
}









/* Design Utilities */
/* ================================================== */


.f-primary {
    color: var(--color-primary) !important;
}
.f-secondary {
    color: var(--color-secondary) !important;
}
.f-tertiary {
    color: var(--color-tertiary) !important;
}


/* Utils - BORDERS */
/* ---------------------------------------------- */
/*.border-grey-1  { border-color: #eeeeee !important; }*/
.border-primary     { border-color: var(--color-primary) !important; }
.border-secondary   { border-color: var(--color-secondary) !important; }


/* Utils - BACKGROUNDS */
/* ---------------------------------------------- */

.bg-black       { background-color: black }
.bg-primary     { background-color: var(--color-primary) !important; }
.bg-secondary   { background-color: var(--color-secondary) !important; }
.bg-tertiary    { background-color: var(--color-tertiary) !important; }
.bg-primary-d1     { background-color: var(--color-primary-d1) !important; }
.bg-primary-d2     { background-color: var(--color-primary-d2) !important; }

.bg-primary-l     { background-color: var(--grad-primary-l); }
.bg-primary-d     { background-color: var(--grad-primary-d); }

.bg-secondary-l     { background-color: var(--grad-secondary-l); }
.bg-secondary-d     { background-color: var(--grad-secondary-d); }

.bg-tertiary-l     { background-color: var(--grad-tertiary-l); }
.bg-tertiary-d     { background-color: var(--grad-tertiary-d); }

/* Gradients */
.bg-primary-gradient {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1eb097+0,0db7bd+100 */
    /*background: #f37169; !* Old browsers *!*/
    background:
            -webkit-radial-gradient(rgba(0,0,0,0.1), transparent),
            -moz-linear-gradient(45deg, var(--color-primary-l1) 0%, var(--color-primary-d1) 100%); /* FF3.6-15 */
    background:
            -webkit-radial-gradient(rgba(0,0,0,0.1), transparent),
            -webkit-linear-gradient(45deg, var(--color-primary-l1) 0%, var(--color-primary-d1) 100%); /* Chrome10-25,Safari5.1-6 */
    background:
            radial-gradient(rgba(0,0,0,0.1), transparent),
            linear-gradient(45deg, var(--color-primary-l1) 0%, var(--color-primary-d1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff918b', endColorstr='#ef6158',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/
}
.bg-grey-75-90-gradient {

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1eb097+0,0db7bd+100 */
    /*background: #f37169; !* Old browsers *!*/
    background:
            -webkit-radial-gradient(rgba(0,0,0,0.1), transparent),
            -moz-linear-gradient(45deg, var(--grey-75) 0%, var(--grey-90) 100%); /* FF3.6-15 */
    background:
            -webkit-radial-gradient(rgba(0,0,0,0.1), transparent),
            -webkit-linear-gradient(45deg, var(--grey-75) 0%, var(--grey-90) 100%); /* Chrome10-25,Safari5.1-6 */
    background:
            radial-gradient(rgba(0,0,0,0.1), transparent),
            linear-gradient(45deg, var(--grey-75) 0%, var(--grey-90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff918b', endColorstr='#ef6158',GradientType=1 ); !* IE6-9 fallback on horizontal gradient *!*/
}
/* Z-panel Backgrounds*/
@media only screen and (max-width: 768px) {
    .z-panel-alt {
        background: #222!important;
    }
}
/* tints */
.tinted {
    background: rgba(0,0,0,0.3);
}



/* one-off width utils */
/* ---------------------------------------------- */
.max-w-13em { max-width:13em; }

/* hover-alpha */
.hover-alpha {
    opacity: 0.5;
}
.hover-alpha:hover {
    opacity: 1;
}









/* Content Mods */
/* ================================================== */

/* UI - Content LINKS */
/* - todo make theme-control : so we can attach js and animate the scroll */
/* ------------------------------- */
.content-link {
    display: inline-block;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    padding: 8px 13px;
    margin-top: 10px;
}
.content-link,
.content-link:visited {
    color: #606060;
}
.content-link:first-of-type {
    margin-left: -13px;
}
.content-link:hover {
    background: rgba(0,0,0,0.025);
}
.content-link:after {
    color: var(--color-primary-l1);
    font-family: FontAwesome;
    content: '\f061';
    font-size: 10px;
    margin-left: 0.5em;
    position: relative;
    top: -1px;
}

.content-link.anchor-link {
    opacity: 0.8;
    margin-top: 0;
}
.content-link.anchor-link:after {
    content: '\f063';
    /*content: none;*/
}

.text-white .content-link,
.text-white .content-link:visited {
    /*color: #808080;*/
    color: #b4c6d0;
}


.content-link:after {
    color: var(--color-primary-l1);
}


/* Social - Icons */
/* ------------------------------- */
/* HOVER STATES */
a.social-icon:hover,
.circle-icons .social-icon:hover{
    /* PRIMARY Hover*/
    /*border-color: var(--color-primary);*/
    /*color: var(--color-primary);*/
    text-decoration: none;

    opacity: 0.6;
}
.text-white .circle-icons .social-icon:hover {
    /* PRIMARY lite Hover*/
    /*border-color: var(--color-primary-l1);*/
    /*color: var(--color-primary-l1);*/
    text-decoration: none;
}


/* Star Ratings - Icons */
/* ------------------------------- */
.star-rating .star {
    color: var(--color-primary);
}


/* Menu Inline */
/* ------------------------------- */
.menu-items-inline .menu li {
    width: auto!important;
    margin-right: 20px!important;
}









/* Block Column Overrides */
/* ================================================== */

/* Override wp-block-columns */
/* ------------------------------- */
#editor .wp-block-columns > .wp-block-column[class*="col-"],
#layout-content .wp-block-columns > .wp-block-column[class*="col-"]
{
    /*flex-basis: 100%!important;*/
}








/* WCAG Slides */
/* ================================================== */

/* WCAG Slide content container */
/* ------------------------------- */
.wcag .slide-content > div {
    width: auto;
    background: var(--grad-tertiary-d);
    display: inline-block;
    padding: 15px;
}
@media (max-height: 480px) {
    .home .slide-content h1 {
        font-size: 21px;
    }
    .home .wcag .slide > .container {
        height: 75vh!important;
    }
}


/* WCAG Slide padding */
/* ------------------------------- */
/*.wcag .slide-content-wrap.align-items-end .slide-content.text-center > div,*/
@media (min-width: 480px){
    .wcag .slide-content > div {
        padding: 30px;
    }
}
@media (max-height: 480px) {
    .home .wcag .slide-content > div {
        padding: 10px 15px;
    }
}
.wcag .slide-content-wrap.align-items-end .slide-content > div {
    padding-bottom: 25px;
}
@media (min-width: 768px) {
    .wcag .slide-content-wrap.align-items-end .slide-content > div {
        padding-bottom: 45px;
    }
}
.wp-block-cwb-slider-block.wcag .slide,
.wp-block-cwb-slider-block.wcag .slide > .container {
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.wp-block-cwb-slider-block.wcag .slide > .container  .slide-content-wrap {
    padding-top: 0.75rem!important;
    padding-bottom: 0.6rem!important;
}


/* WCAG Slide content width */
/* ------------------------------- */
.wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-left,
.wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-right {
    max-width: 62.5%;
}
@media (min-width: 768px) {
    .wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-left,
    .wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-right {
        max-width: 50%;
    }
}
@media (min-width: 1024px) {
    .wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-left,
    .wp-block-cwb-slider-block.wcag .slide > .container .slide-content.text-right {
        max-width: 38.5%;
    }
}




/* WCAG Misc */
/* ================================================== */

/* WCAG Focus Styles */
/* ------------------------------- */

.focus-accessible .yt-modal-trigger:focus,
.focus-accessible .the-gallery .image-wrapper:focus,
.focus-accessible .focus-dark *:focus,
.focus-accessible a:focus,
.focus-accessible button:focus ,
.focus-accessible [type="button"]:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--color-primary);
}
.focus-accessible .btn-secondary:focus, .btn-secondary.focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #000;
}

.focus-accessible .screenreader-text:focus,
.focus-accessible .slider *:focus,
.focus-accessible .btn-alt:focus,
.focus-accessible input[type="submit"]:focus,
.focus-accessible .focus-light *:focus,
.focus-accessible .text-white a:focus,
.focus-accessible .text-white button:focus,
.focus-accessible .text-white [type="button"]:focus {
    z-index: 2;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #ffe500;
}


/* Skip-nav link */
/* ------------------------------- */
.screenreader-text {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}
.screenreader-text:focus {
    color: black;
    display: inline-block;
    height: auto;
    width: auto;
    /*position: static;*/
    left: 0;
    margin: auto;
    z-index: 10000!important;
    padding: 10px;
    background: white;
    outline: 0;
    box-shadow: 0 0 0 0.2rem #ffe500;
}