@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDarker: #1e282d;
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: #445156;
    --borderMedium: rgba(38, 50, 56, 1); 
    --borderLight: rgba(38, 50, 56, 0.3);
    --accent: #f3353e;
    --accentDarker: rgb(49, 55, 74);
    --accentHover: #fd5c5c;
    --accentDarkerHover: rgb(84, 90, 110);
    --light: rgba(38, 50, 56, 0.035);
}
/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {filter: grayscale(0);}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8)!important;}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map:not(section)::after, .black_2_textDark {filter: contrast(0.7) sepia(1) hue-rotate(160deg)!important;}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4)!important;}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {filter: contrast(0.11) sepia(1) hue-rotate(340deg) contrast(13)!important;}


/*------------------------ CSS overrides below ------------------------*/

html {line-height: 1.5}

.text-gradient-light {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#d50711, #fd5c5c);
    background-clip: text;
}

.text-gradient-dark {
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(93deg,#6368a0,#0b89bb);
    background-clip: text;
}

.button, button {
    font-weight: 400;
    border-radius: 0.3rem;
    transition: all .3s;
    font-size: 0.9rem;
}
 
h1, h2 {letter-spacing: -.03em;font-weight: 600;}

ul.tabs li a {
    font-weight: 600;
    letter-spacing: -.03em;
}


.button.secondary {background: var(--accentDarker);}
.button.smaller,.button.smaller2 {
    background: white; 
    color: var(--textMedium);
    border: 1.2px solid var(--borderLight);
}
@media (min-width: 600px) {
    .button:hover {
        transform: scale(1.0);
        background: var(--accentHover);
        }
    .button.secondary:hover {
        transform: scale(1.0);
        background: var(--accentDarkerHover);
        }
    .button.smaller:hover,.button.smaller2:hover {
        transform: scale(1.0);
        background: white;
        border: 1.2px solid var(--borderMedium);
        }
    }
    
p {
    font-size: 1.25em;
    line-height: 1.3;
}

section .container.small {max-width: 60rem;}

.tabs_container .twocols {
    margin-bottom: 0rem;
    padding: 0;
}

.tabs_container p {
    margin-bottom: 1.0em;
}

.image p {
    margin-bottom: 1.2em;
}

section.image {
    padding: 0.5rem 0 5rem;
}

ul.reviews li div.box .customers {display: flex; gap: 0.25rem; margin: 0 0 1.5rem;}
ul.reviews li div.box .customers img {height: 3rem;}

section.cta .twocols {padding: 2.5rem clamp(2rem, 5vw, 5rem)}

.big_font_size {
    font-size: 5em;
    line-height: 0.1em;
}


.eev-menu-icon {
    height: 16px !important; vertical-align:middle; display: inline;
}

body.mobilemenu.menushown header .navnav > ul > li > ul > li > a > img.eev-menu-icon {
    filter: invert(2);
}

section.intro img {width: 100%;}


.eevid-footer-grid {
    flex-shrink: 0 !important;
    flex-grow: 1 !important;
    display: grid !important;
    grid-template-columns: 200px 200px 200px;
    gap: 10px;
    align-items: start !important;
    gap: 5px;
    padding-bottom: 0px;
}

@media only screen and (max-width: 600px) {
    .eevid-footer-grid {
        grid-template-columns: 115px 115px 115px;
    }
}

.eevid-success-avatar * img {
    max-width: 300px;
}