/*
Theme Name: CPEinc
Theme URI: https://cpeinc.ca
Description: Child theme for AccessPress Staple customized for CPE Inc.
Author: CPE Inc
Template: accesspress-staple
Version: 1.0
Text Domain: cpeinc
*/

body.page-id-986 #masthead {margin-bottom:0; border-bottom: 3px solid #d30b1a;}
body.page-id-986 .site-branding {padding:15px 0 !Important;}
body.page-id-986 .site-branding.logo-left {max-height:unset;}
body.page-id-986 .site-branding img {max-height: 100px;}
body.page-id-986 #site-navigation .staple-menu > ul > li:hover > a {background: #e9e9e9 !Important;}
body.page-id-986 li.sow-slider-image {z-index: 9 !important; }

.homePRODS li.sow-features-feature {
    border: 1px solid #dfdfdf;
    padding: 0 15px;
}

/*SHAPE DIVIDER*/
.cpe-shape {
    position: relative;
    overflow: hidden;
}

/* REQUIRED wave system */
.cpe-shape::after {
    transform: scaleY(-1);
    z-index:9;
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;

    background: #fff;

    --s: 45px;   /* wave size (bigger = wider waves) */
    --p: 1.5;    /* curvature (0.3 = soft, 1 = tight, 1.5 = aggressive) */

    --R: calc(var(--s) * sqrt(var(--p)*var(--p) + 1)) at 50%;

    mask:
        radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%)
            calc(50% - 2*var(--s)) 0 / calc(4*var(--s)),
        radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%)
            50% calc(-1*var(--s)) / calc(4*var(--s)) repeat-x;

    -webkit-mask:
        radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%)
            calc(50% - 2*var(--s)) 0 / calc(4*var(--s)),
        radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%)
            50% calc(-1*var(--s)) / calc(4*var(--s)) repeat-x;
}

/*.cpe-shape::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;

    background: #fff;

    opacity: 0.55;
    transform: scaleY(-1) translateY(6px);
    z-index: 10;

    --s: 55px;   
    --p: 0.5;   

    --R: calc(var(--s) * sqrt(var(--p)*var(--p) + 1)) at 50%;

    mask:
        radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%)
            calc(50% - 2*var(--s)) 0 / calc(4*var(--s)),
        radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%)
            50% calc(-1*var(--s)) / calc(4*var(--s)) repeat-x;

    -webkit-mask:
        radial-gradient(var(--R) calc(100% - var(--s)*(1 + var(--p))), #000 99%, #0000 101%)
            calc(50% - 2*var(--s)) 0 / calc(4*var(--s)),
        radial-gradient(var(--R) calc(100% + var(--s)*var(--p)), #0000 99%, #000 101%)
            50% calc(-1*var(--s)) / calc(4*var(--s)) repeat-x;
}*/