


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

/* VARIABLES (**not supported by IE)
    use find and replace if deployment require IE support*/
/* ---------------------------------------------- */
body {
    --color-primary: #FF4800;
    --color-primary-d1: #c93c00;
    --color-primary-d2: #992400;
    --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: #000000;
    --color-secondary-75: rgba(0, 0, 0, 0.75);
    --color-secondary-l1: #222;
    --color-secondary-l2: #333;
    /*--color-primary-l3: #ffd3d3;;*/
    /*--color-primary-l4: #ffe6e6;*/



    --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: #111111;*/
    --grey-50: #808080;
    --grey-40: #9c9c9c;
    --grey-25: #c0c0c0;
    /*--grey-20: #111111;*/
    --grey-10: #e5e5e5;
}


.border-white-90 { border-color: var(--white-90) !important; }
.border-white-90 { border-color: var(--white-90) !important; }
.border-white-80 { border-color: var(--white-80) !important; }
.border-white-75 { border-color: var(--white-75) !important; }
.border-white-60 { border-color: var(--white-60) !important; }
.border-white-50 { border-color: var(--white-50) !important; }
.border-white-25 { border-color: var(--white-25) !important; }
.border-white-20 { border-color: var(--white-20) !important; }
.border-white-10 { border-color: var(--white-10) !important; }


.border-black-90 { border-color: var(--black-90) !important; }
.border-black-80 { border-color: var(--black-80) !important; }
.border-black-75 { border-color: var(--black-75) !important; }
.border-black-60 { border-color: var(--black-60) !important; }
.border-black-50 { border-color: var(--black-50) !important; }
.border-black-25 { border-color: var(--black-25) !important; }
.border-black-20 { border-color: var(--black-20) !important; }
.border-black-10 { border-color: var(--black-10) !important; }


.border-2 { border-width: 2px!important; }
.border-3 { border-width: 3px!important; }
.border-4 { border-width: 4px!important; }
.border-5 { border-width: 5px!important; }


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

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

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

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

/* ~ Container WP Elementor Mods */
/*#global-wrapper .elementor-container,*/
.elementor-section.-boxed > .elementor-container, /* newer version of elementor */
.elementor-section-boxed.elementor-section > .elementor-container {
    max-width: 1200px;
}
.elementor-section.-full_width .swiper-slide-inner, /* newer version of elementor */
.elementor-section-full_width .swiper-slide-inner {
    max-width: 1200px;
}


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

    .container-2.elementor-container {
        max-width: 100%;
    }

    .elementor .container-2.left {
        /*text-align: right;*/
        /*position: relative;*/
        /*right: 0;*/
        /*left: unset;*/
        /*float: right;*/
    }
    .elementor .container-2.left > .elementor-container {
        margin-right: 0;
        /*display: inline-block;*/
    }
    /*.z-panel-content-l > .elementor-column-wrap > .elementor-widget-wrap > .container-2 {*/
        /*display: inline-block;*/
        /*text-align: left;*/
    /*}*/
}


/* Z-PANELS (...tbd) */
/* ---------------------------------------------- */






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

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



/* shadows */
/* ---------------------------------------------- */
.form-shadow-wrap {
    box-shadow: 10px 10px 0 rgba(0,0,0,1);
}





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

hr {
    border: none;
    height: 1px;
    /* Set the hr color */
    color: #000; /* old IE */
    background-color: #000; /* Modern Browsers */
}
hr.hr-1 { height: 1px;}
hr.hr-2 { height: 2px;}
hr.hr-3 { height: 3px;}
hr.hr-4 { height: 4px;}
hr.hr-5 { height: 5px;}

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




/*[class^="icon-"]:before, [class*=" icon-"]:before {*/
/*    top: 0.2em;*/
/*    position: relative;*/
/*}*/









