/* === Colton's Styles === */



/* ---------- NAV ---------- */


nav {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--FC-blue) 50%);
    background-position: 100% 195%;
    background-size: 100% 205%;
    position: fixed !important;
    width: 100%;
    transition: 200ms;
}

nav.sticky, .error404 .navbar  {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--FC-blue) 50%);
    background-position: 100% 105%;
    background-size: 100% 200%;
    transition: 200ms;
}


.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.navbar span {
	color: #FFF;
	font-size: var(--FC-font-size-18);
	transition: 200ms;
}

.navbar span:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #FFF;
  opacity: 0;
  transition: opacity 200ms, transform 200ms;
  transform: scale(0);
  transform-origin: left;
}

.navbar span:hover::after,
.navbar span:focus::after {
  opacity: 1;
  transform: scale(1);
}

.navbar span:hover {
	color: #FFF;
	transition: 200ms;
}


.error404 .nav-primary, .error404 .dashicons-before {
	display: none !important;
}


/* ---------- GENERAL ---------- */

.padding_0 {
    padding: 0 !important;
}


h1 {
    font-size: var(--FC-font-size-60);
    font-weight: 600;
    line-height: 1.1;
}


h2 {
    font-size: var(--FC-font-size-42);
    font-weight: 600;
    line-height: 1.1;
}

h3 {
    font-size: var(--FC-font-size-36);
    font-weight: 600;
    line-height: 1.1;
}

h6 {
    font-size: var(--FC-font-size-22);
    font-weight: 600;
    line-height: 1.1;
}

.color__blue-light {
    color: var(--FC-blue-light) !important; 
}

.color__blue {
    color: var(--FC-blue) !important; 
}

.color__blue-dark, .color__blue-dark * {
    color: var(--FC-blue-dark) !important; 
}


.gform_wrapper input, .gform_wrapper textarea {
    outline: solid 2px var(--FC-blue-navy);
}

.gform_wrapper input, .gform_wrapper textarea, .gform_wrapper placeholder {
    font-style: italic;
    font-weight: 600;
}

.gform_button {
    background-color: var(--FC-blue-dark);
    color: #FFF;
    font-weight: 600;
    font-size: var(--FC-font-size-20);
    padding: 15px 30px;
    border: none;    
    transition: 200ms;
    outline: solid 1px var(--FC-blue-dark) !important;
}

.gform_button:hover {
    background-color: var(--FC-white);
    color: var(--FC-blue-dark);
    border: none;    
    transition: 200ms;
    outline: solid 2px var(--FC-blue-dark) !important;
}


footer {
    background-color: var(--FC-blue);
    padding-top: 100px;
    padding-bottom: 50px;
}

.footer-headline-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 25px;
}

.footer-logo {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

.footer-para, .footer-para a {
    font-size: var(--FC-font-size-16);
    color: #FFF;
}

.footer-para a:hover {
    text-decoration: underline;
}

.footer-contact, .footer-contact a {
    color: #FFF;
}


.footer-copyright-container {
    margin-top: 50px;
}

.footer-copy {
    display: flex;
    flex-direction: row;
    gap: 25px;
    align-items: center;
}

.footer-copy, .footer-copy a {
    font-size: var(--FC-font-size-14);
    color: #FFF;
    margin-bottom: 0;
    text-align: left;
}

.footer-copy a {
    text-decoration: underline;
    text-align: right;
}



/* ---------- MEDIA QUERIES ---------- */


.hide-until-991, .hide-until-575 {
    display: none !important;
}


@media screen and (max-width: 991px) {

    .hide-until-991 {
        display: block !important;
    }

    .hide-at-991 {
        display: none !important;
    }    

    h6 {
        font-size: var(--FC-font-size-24);
    }


    nav {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, var(--FC-blue) 50%);
        background-position: 100% 105%;
        background-size: 100% 200%;
        transition: 200ms;
    }

    .navbar-nav {
        flex-direction: column;
    }


    .mobile__navWrapper {
        width: 50%;
        height: 100%;
        position: absolute;
        background-color: var(--FC-blue-dark);
        left: 100%;
        top: 0;
        transform: translateX(0%);
        transition: var(--FC-default-transition);
        pointer-events: all;
        padding: 115px 0 0 25px;
    }

    .mobile__navWrapper .nav-link {
        width: fit-content;
     }

     .mobile__navWrapper .nav-link span {
        color: #FFF;
     }

}



@media screen and (max-width: 575px) {

    .hide-until-575 {
        display: block !important;
    }

    .hide-at-575 {
        display: none !important;
    }    

    .mobile__navWrapper {
        width: 75%;
    }


    footer * {
        text-align: center;
    }

    .footer-para, .footer-para a {
        font-size: var(--FC-font-size-20);
    }

    .footer-copy, .footer-copy a {
        font-size: var(--FC-font-size-16);
    }

}

@media screen and (max-width: 400px) {
    .navbar svg, .navbar object {
        height: 50px;
        pointer-events: none;
    }

    h1 {
        font-size: var(--FC-font-size-52);
    }

    h6 {
        font-size: var(--FC-font-size-22);
    }

}




/* ---------- NOTCHES ---------- */


/* ==========================================
   BASE NOTCH
========================================== */

.notch {
    --notch-size:50px;
}


/* ==========================================
   TOP LEFT - NORTH (/)
   50px from left
========================================== */

.notch-top-left-north {

    clip-path: polygon(
        0 0,
        50px 0,
        calc(20% + var(--notch-size)) 0,
        calc(20% + (var(--notch-size) * 2)) var(--notch-size),
        100% var(--notch-size),
        100% 100%,
        0 100%
    );

    margin-top:calc(var(--notch-size) * -1) !important;

}

/* ==========================================
   TOP LEFT - SOUTH (\)
   50px from left
========================================== */

.notch-top-left-south {

    clip-path:polygon(
        0 0,
        calc(20% + (var(--notch-size) * 2)) 0,
        calc(20% + var(--notch-size)) var(--notch-size),
        100% var(--notch-size),
        100% 100%,
        0 100%
    );

    margin-top:calc(var(--notch-size) * -1) !important;

}


/* ==========================================
   TOP RIGHT - NORTH (/)
   50px from right
========================================== */

.notch-top-right-north {

    clip-path:polygon(
        0 0,
        100% 0,
        calc(100% - 50px) 0,
        calc(100% - (20% + var(--notch-size))) var(--notch-size),
        calc(100% - (20% + (var(--notch-size) * 2))) 0,
        100% 0,
        100% 100%,
        0 100%
    );

    margin-top:calc(var(--notch-size) * -1) !important;

}


/* ==========================================
   TOP RIGHT - SOUTH (\)
   20% from right
========================================== */

.notch-top-right-south {

    clip-path:polygon(
        0 0,
        calc(100% - (20% + (var(--notch-size) * 2))) 0,
        calc(100% - (20% + var(--notch-size))) var(--notch-size),
        100% var(--notch-size),
        100% 100%,
        0 100%
    );

    margin-top:calc(var(--notch-size) * -1) !important;

}


.notch-bottom-left-north {

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(20% + (var(--notch-size) * 2)) 100%,
        calc(20% + var(--notch-size)) calc(100% - var(--notch-size)),
        0 calc(100% - var(--notch-size))
    );

    margin-bottom:calc(var(--notch-size) * -1) !important;

}


.notch-bottom-right-north {

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--notch-size)),
        calc(80% - var(--notch-size)) calc(100% - var(--notch-size)),
        calc(80% - (var(--notch-size) * 2)) 100%,
        0 100%
    );

       margin-bottom:calc(var(--notch-size) * -1) !important;

}

.review-notch {

clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 25px),
    calc(80% - 25px) calc(100% - 25px),
    calc(80% - 50px) 100%,
    0 100%
);

    padding-bottom: 50px !important;
}


.notch-bottom-right-south {

    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        calc(100% - (20% + var(--notch-size))) 100%,
        calc(100% - (20% + (var(--notch-size) * 2))) calc(100% - var(--notch-size)),
        0 calc(100% - var(--notch-size))
    );

}


.notch-bottom-triangle-south {

    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--notch-size)),
        50% 100%,
        0 calc(100% - var(--notch-size))
    );

}


.notch-bottom-triangle-north {

clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    50% calc(100% - var(--notch-size)),
    0 100%
);

}





.notch-top-triangle {

    clip-path: polygon(
        0 0,
        50% 75px,
        100% 0,
        100% 100%,
        0 100%
    );

    position: relative;
    bottom: -1px;
    margin-top: -80px;

}