/* ====================== */
/* 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: 1200px;
}

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


/* mc-padding */
@media only screen and (min-width: 1230px) {
    .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;
    }
}















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


/* 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-l1     { background-color: var(--color-primary-l1) !important; }
.bg-primary-l2     { background-color: var(--color-primary-l2) !important; }
.bg-primary-d1     { background-color: var(--color-primary-d1) !important; }
.bg-primary-d2     { background-color: var(--color-primary-d2) !important; }

.bg-secondary-l1   { background-color: var(--color-secondary-l1) !important; }
.bg-secondary-l2   { background-color: var(--color-secondary-l2) !important; }
.bg-secondary-d1   { background-color: var(--color-secondary-d1) !important; }
.bg-secondary-d2   { background-color: var(--color-secondary-d2) !important; }

.bg-tertiary-l1    { background-color: var(--color-tertiary-l1) !important; }
.bg-tertiary-l2    { background-color: var(--color-tertiary-l2) !important; }
.bg-tertiary-d1    { background-color: var(--color-tertiary-d1) !important; }
.bg-tertiary-d2    { background-color: var(--color-tertiary-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);
}



/* Utils - FONT COLORS */
/* ---------------------------------------------- */

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


.f-primary-l1 *,
.f-primary-l1     { color: var(--color-primary-l1) !important; }
.f-primary-l2 *,
.f-primary-l2     { color: var(--color-primary-l2) !important; }
.f-primary-d1 *,
.f-primary-d1     { color: var(--color-primary-d1) !important; }
.f-primary-d2 *,
.f-primary-d2     { color: var(--color-primary-d2) !important; }

.f-secondary-l1 *,
.f-secondary-l1   { color: var(--color-secondary-l1) !important; }
.f-secondary-l2 *,
.f-secondary-l2   { color: var(--color-secondary-l2) !important; }
.f-secondary-d1 *,
.f-secondary-d1   { color: var(--color-secondary-d1) !important; }
.f-secondary-d2 *,
.f-secondary-d2   { color: var(--color-secondary-d2) !important; }

.f-tertiary-l1 *,
.f-tertiary-l1    { color: var(--color-tertiary-l1) !important; }
.f-tertiary-l2 *,
.f-tertiary-l2    { color: var(--color-tertiary-l2) !important; }
.f-tertiary-d1 *,
.f-tertiary-d1    { color: var(--color-tertiary-d1) !important; }
.f-tertiary-d2 *,
.f-tertiary-d2    { color: var(--color-tertiary-d2) !important; }



/* Utils - FONT COLORS (via Block-editor) */
/* ---------------------------------------------- */

.has-text-color.has-primary-l-2-color,
.has-inline-color.has-primary-l-2-color {
    color: var(--color-primary-l2);
}
.has-text-color.has-primary-l-1-color,
.has-inline-color.has-primary-l-1-color {
    color: var(--color-primary-l1);
}
.has-text-color.has-primary-color,
.has-inline-color.has-primary-color {
    color: var(--color-primary);
}
.has-text-color.has-primary-d-1-color,
.has-inline-color.has-primary-d-1-color {
    color: var(--color-primary-d1);
}
.has-text-color.has-primary-d-2-color,
.has-inline-color.has-primary-d-2-color {
    color: var(--color-primary-d2);
}


.has-text-color.has-secondary-l-2-color,
.has-inline-color.has-secondary-l-2-color {
    color: var(--color-secondary-l2);
}
.has-text-color.has-secondary-l-1-color,
.has-inline-color.has-secondary-l-1-color {
    color: var(--color-secondary-l1);
}
.has-text-color.has-secondary-color,
.has-inline-color.has-secondary-color {
    color: var(--color-secondary);
}
.has-text-color.has-secondary-d-1-color,
.has-inline-color.has-secondary-d-1-color {
    color: var(--color-secondary-d1);
}
.has-text-color.has-secondary-d-2-color,
.has-inline-color.has-secondary-d-2-color {
    color: var(--color-secondary-d2);
}


.has-text-color.has-tertiary-l-2-color,
.has-inline-color.has-tertiary-l-2-color{
    color: var(--color-tertiary-l2);
}
.has-text-color.has-tertiary-l-1-color,
.has-inline-color.has-tertiary-l-1-color{
    color: var(--color-tertiary-l1);
}
.has-text-color.has-tertiary-color,
.has-inline-color.has-tertiary-color{
    color: var(--color-tertiary);
}
.has-text-color.has-tertiary-d-1-color,
.has-inline-color.has-tertiary-d-1-color{
    color: var(--color-tertiary-d1);
}
.has-text-color.has-tertiary-d-2-color,
.has-inline-color.has-tertiary-d-2-color{
    color: var(--color-tertiary-d2);
}



/* Scale marked text */
/* ---------------------------------------------- */
.scale-mark mark {
    font-size: 1.5em;
    /*margin-left: -0.2em;*/
}



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



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



/* Admin Bar margin fix */
/* ---------------------------------------------- */
.admin-bar .mt-n-admin-bar {
    margin-top: -46px!important;
}
@media (min-width: 768px) {
    .admin-bar .mt-n-admin-bar {
        margin-top: -32px!important;
    }
}



/* External Link Icon */
/* ---------------------------------------------- */
.external-link a:after,
a.external-link:after {
    font-family: 'themify';
    content: "\e732";
    font-size: 0.8em;
    margin-left: 10px;
}



/* Admin Bar margin fix */
/* ---------------------------------------------- */
.admin-bar .mt-n-admin-bar {
    margin-top: -46px!important;
}
@media (min-width: 768px) {
    .admin-bar .mt-n-admin-bar {
        margin-top: -32px!important;
    }
}








/* 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);
}





/* Accordion-Block */
/* ------------------------------- */
.accordion-block .accordion {
    /*background: var(--color-ma-cream);*/
}

/* borders & padding */
.accordion-block .accordion:first-child .accordion-header,
.accordion-block .accordion:first-child .accordion-content {
    /*border-top: 1px solid black;*/
    border-bottom: 1px solid black;
}
/*.accordion-block .accordion + .accordion .accordion-header,*/
/*.accordion-block .accordion + .accordion .accordion-content {*/
/*    border-bottom: 1px solid black;*/
/*}*/
.accordion-block .accordion-wrapper.row {
    margin-right: -15px;
    margin-left: -15px;
}

/* accordion icon */
/*.accordion-icon:before {*/
/*    content: '\f347';*/
/*    font-family: Dashicons;*/
/*}*/
/*.accordion.-open .accordion-icon:before {*/
/*    content: '\f343';*/
/*}*/

/* animated bg-color */
.accordion-block .accordion .accordion-header,
.accordion-block .accordion .accordion-content {
    background-color: rgba(255,255,255, 0);
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}
.accordion-block .accordion.-open .accordion-header,
.accordion-block .accordion.-open .accordion-content {
    background-color: rgba(255,255,255, 0.4);
}







/* 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 */
/* ------------------------------- */
#skip-nav {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}
#skip-nav: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;
}