/*
Theme Name: GP Developer Child Theme
Template: generatepress
Theme URI: https://leme.nl
Author: Leander Jansen
Author URI: https://leme.nl
Description: This is a child theme for GeneratePress for use in jumpstarting more customized development.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gpc
Tags: two-columns, three-columns, one-column, right-sidebar, left-sidebar, fluid-layout, fixed-layout, responsive-layout, flexible-header, full-width-template, buddypress, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, light, white, dark, black, blue, brown, gray, green, orange, pink, purple, red, silver, tan, yellow
*/

/*

CONTENTS:
1. Defaults
2. Header and Nav
3. Home Page
4. Content
5. Components
6. Widgets
7. Footer
8. Other
9. Animations

*/

/* ==========================================
=! DEFAULTS
------------------------------------------ */



/* ==========================================
=! HEADER AND NAV
------------------------------------------ */

/* html:not(.mobile-menu-open) .site-header {
    max-height: 100px;
} */

/* html .home .site-header {
    height: 30vh;
} */

/* .archive .page-header {
    display: none;
} */

/* .home .inside-header {
    height: 100%;
} */

.main-navigation {
    transition-timing-function: ease-in;
    transition: all .28s;
}

.main-navigation .inside-navigation {
    display: flex;
    align-items: unset;
    justify-content: unset;
    flex-direction: column;
}

/* @media screen and (min-width: 782px) {
    .main-navigation a {
        transition-timing-function: ease-in;
        transition: all .28s;
    }
    .main-navigation a:hover {
        margin-top: -.5rem;
    }
} */

#secondary-navigation {
    background: linear-gradient(90deg, #35a689, #1c7664);
}


.mepr-price-box {
    margin: 1.5% !important;
    padding: 40px 20px !important;
}
/* .mepr-price-box.highlighted {
    background: linear-gradient(90deg, #ce6b95, #4d3388, #ed372a, #1c7664, #e1eb89);
} */

.mepr-price-box .mepr-price-box-button {
    text-transform: lowercase;
}

.mepr-price-box-benefits-item:last-child {
    border-bottom: none !important;
}

/* Mobile Menu */
.menu-toggle {
    font-size: 25px;
    padding: 0 10px;
}

/* .mobile-menu-open .site-header .header-image,
.mobile-menu-open .icon-menu-bars {
    filter: invert(1);
} */

/* .mobile-menu-open .site-header {
    background-color: white;
} */

.mobile-menu-open .inside-header {
    /* height: 90vh; */
    padding-bottom: 0;
}

.mobile-menu-open .main-navigation .main-nav > ul {
    display: flex;
    overflow-y: scroll;
    height: 65vh;
}

#cca-social-menu {
    display: none;
}

.mobile-menu-open #cca-social-menu {
    display: block !important;
}

#cca-social-menu {
    order: 4;
    position: relative;
}

#cca-social-menu .cca-social-menu {
    min-height: 50px;
}

#cca-social-menu .menu {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    position: absolute;
    width: 100vw;
    left: -30px;
    background: linear-gradient(90deg, #ce6b95, #4d3388, #261a43, #ed372a, #35a689, #1c7664, #e1eb89);
}

#cca-social-menu img  {
    filter: invert(1);
    position: absolute;
    max-height: 20px;

    transform: translate(-50%, 0);
    top: 14px;
    left: 50%;
}

#cca-social-menu .menu a {
    font-size: 12px;
    color: white;
}

.mobile-menu-open .main-navigation #primary-menu a {
    color: black !important;
    border-bottom: 1px solid black;
    font-size: 18px;
    /* padding: 1rem 0; */
    padding: 0;
}

/* ==========================================
=! HOME PAGE
------------------------------------------ */
/* .home .main-navigation {
    display: none;
}

.home .inside-header {
    justify-content: center;
}

.home .entry-title {
    margin-bottom: 15vh;
} */

.entry-title {
    font-style: italic;
}


/* ==========================================
=! CONTENT
------------------------------------------ */
.site-content,
#page {
    min-height: calc(100vh - 100px);
}
.logged-in .site-content,
.logged-in #page {
    min-height: calc(100vh - 125px);
}

.site-content {
    position: relative;
    height: 100%;
    margin-left: 10px;
    margin-right: 10px;
}

#cca-footer-menu {
    font-size: 12px;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 0.2rem;
    background: var(--base-3);
    min-width: 100%;
}
@media screen and ( min-width: 782px ) {
    #cca-footer-menu {
        min-width: 0ch;
    }
}

#cca-footer-menu ul {
    display: flex;
    justify-content: flex-end;
}
#cca-footer-menu li {
    padding: 0 .4rem;
}
#cca-footer-menu a {
    text-transform: uppercase;
    color: black;
}

.site-footer {
    display: none;
}

/* Page animations */
.site-content .inside-article>*:not(section.arrow_links) {
    -webkit-transition: -webkit-transform .28s, opacity .28s;
    -ms-transition: -o-transform .28s, opacity .28s;
    -o-transition: -o-transform .28s, opacity .28s;
    transition: transform .28s, opacity .28s;
}

.page-animate .site-content .inside-article>*:not(section.arrow_links) {
    -webkit-transform: translate3d(0, 70px, 0);
    -ms-transform: translate3d(0, 70px, 0);
    -o-transform: translate3d(0, 70px, 0);
    transform: translate3d(0, 70px, 0);
    opacity: 0;
}


/* ==========================================
=! COMPONENTS
------------------------------------------ */
.mp_wrapper {
    background-color: var(--base);
    padding: 1rem;
}
#mepr-account-nav {
    background-color: var(--contrast);
}
#mepr-account-nav * {
    color: var(--base-3);
    text-transform: lowercase;
}

@media screen and ( min-width: 782px ) {
    #mepr-account-nav {
        display: flex;
        justify-content: space-around;
        padding: 1rem 1rem;
    }

    .mp_wrapper {
        padding: 2rem;
    }

}
.mp_wrapper .mp-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.mp_wrapper .mp-form-label {
    line-height: 1;
    width: 16ch;
    padding-right: 1rem;
}

.mp_wrapper .mepr-form-has-errors,
.mp_wrapper .mp-form-label .cc-error {
    font-size: .6rem;
}

.mp_wrapper {
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

.mp_wrapper .mepr-login-form-wrap {
    /* max-width: 50ch; */
    margin: auto;
}


.mp_wrapper .mepr_username,
.mp_wrapper .mepr_password {

}

.mp_wrapper .mepr_password .mp-form-label {
    display: flex;
    width: 100%;
    padding-right: 0;
}

.mp_wrapper .mepr_password .mp-form-label > div {
    width: 100%;
}

.mp_wrapper .mepr_password label[for=user_pass] {
    width: unset !important;
    padding-right: 1rem;
}

.mp_wrapper .mepr_password input[type=password] {
    width: 100%;
}

.mp_wrapper input[type="button"],
.mp_wrapper input[type="reset"],
.mp_wrapper input[type="submit"] {
    color: var(--contrast);
    background-color: unset;
    border-bottom: 2px solid var(--contrast);
    padding-bottom: .5rem;
    border-left: 2px solid var(--contrast);
}

.mp_wrapper textarea,
.mp_wrapper select,
.mp_wrapper input[type=text],
.mp_wrapper input[type=url],
.mp_wrapper input[type=email],
.mp_wrapper input[type=tel],
.mp_wrapper input[type=number],
.mp_wrapper input[type=password] {
    background-color: transparent;
    border: none;
    padding: 2px;
}

.mp_wrapper textarea,
.mp_wrapper select,
.mp_wrapper input[type=text],
.mp_wrapper input[type=url],
.mp_wrapper input[type=email],
.mp_wrapper input[type=tel],
.mp_wrapper input[type=number],
.mp_wrapper input[type=password] {
    border-bottom: 1px solid black;
}

.mp_wrapper textarea {
    /* display: inline; */
    border-left: 1px solid black;
}



.ledenlijst table,
.ledenlijst td,
.ledenlijst th {
    border-width: 0px;
    vertical-align: baseline;
}

@media screen and (max-width: 782px) {
    .ledenlijst table,
    .ledenlijst td,
    .ledenlijst th {
        font-size: 10px;

    }

    .ledenlijst td:last-child {
        min-width: 90px;
    }
}

.ledenlijst td {
    padding: 4px 2px;
}

.no-list-style ul {
    list-style: none;
    margin: unset;
}

/* Arrow layout */
.hr_link,
.arrow_link {
    --arrow-size: 20px;
    --arrow-width: 3px;
    --arrow-width: 0px;
    --long: 60px;
}
@media screen and (min-width: 782px) {
    .hr_link,
    .arrow_link {
        --arrow-size: 25px;
        /* --arrow-width: 3px; */
        --long: 100px;
    }
}

.arrow_links {
    position: relative;
    margin: 0 .8rem;
}
.arrow_link {
    position: absolute;
    top: 8px;
    width: 20px;
}
/* .arrow_link img {
    display: none;
} */
.hr_link {
    display: flex;
    justify-content: space-around;
}

/* Arrow styles */
.hr_link a,
.arrow_link a {
    content: '';
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-width: var(--arrow-width) var(--arrow-width) 0 0;
    border-style: solid;
    border-color: var(--contrast-2);
    transition: .28s ease;
    display: block;
}

/* .hr_link.right_arrow,
.right_arrow a {
    transform: rotate(45deg);
} */
.right_arrow {
    right: 0;
}
/* .left_arrow a {
    transform: rotate(225deg);
} */
.left_arrow {
    left: 0;
}


.down_arrow {
    /* margin-top: var(--arrow-size); */
    padding-top: var(--long);
}
.down_arrow:not(.clicked) a {
    margin-bottom: 28rem;
}
.down_arrow a {
    transform: rotate(135deg);
}
.down_arrow.clicked a {
    transform: rotate(315deg);
}
.down_arrow.clicked a::after {
    opacity: 0;
}

.down_arrow a:after {
    content: '';
    float: left;
    position: absolute;
    top: -1px;
    width: var(--arrow-size);
    height: var(--arrow-size);
    height: var(--long);
    border-width: 0 var(--arrow-width) 0 0;
    border-style: solid;
    border-color: red;
    border-color: var(--contrast-2);
    transform-origin: 100% 0;
    transition: .2s ease;
    transform: rotate(45deg);
}

.wp-block-separator.is-style-default {
    opacity: 0;
}

/* --- fixes potential theme css conflict --- */
.acf-map img {
    max-width: inherit !important;
}

/* --- responsive embed --- */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.embed-container iframe, .embed-container object, .embed-container embed, .embed-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* --- breadcrumbs --- */
.breadcrumbs {
    font-size: 14px;
    margin-bottom: 10px;
}


/* ==========================================
=! TAFELS
------------------------------------------ */

.table_title {
    background: linear-gradient(90deg, #35a689, #1c7664);
    color: var(--base3);
    padding: 1rem;

    position: relative;
}

.table_title:before {
    position: absolute;
    right: 0;
    top: 0;

    content: '';
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-width: var(--arrow-width) var(--arrow-width) 0 0;
    border-style: solid;
    border-color: var(--contrast-2);
    transition: .28s ease;
    display: block;
    transform: rotate(135deg);
}

/* .down_arrow a:after {
    content: '';
    float: left;
    position: absolute;
    top: -1px;
    width: var(--arrow-size);
    height: var(--arrow-size);
    height: var(--long);
    border-width: 0 var(--arrow-width) 0 0;
    border-style: solid;
    border-color: red;
    border-color: var(--contrast-2);
    transform-origin: 100% 0;
    transition: .2s ease;
    transform: rotate(45deg);
} */



/* ==========================================
=! WIDGETS
------------------------------------------ */

/* --- GPC Sub Menu Widget --- */
/* .widget_gpc_sub_menu_widget .dropdown-menu-toggle { display: none; } */
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu { margin-left: 1.2em; }
.widget_gpc_sub_menu_widget .menu-item-has-children .sub-menu li { list-style: disc; }
.widget_gpc_sub_menu_widget .current-menu-item > a { font-weight: bold; }

/* ==========================================
=! FOOTER
------------------------------------------ */



/* ==========================================
=! OTHER
------------------------------------------ */



/* ==========================================
=! ANIMATION
------------------------------------------ */

/* --- do all the preload stuff --- */
@media (min-width: 768px) {
    .preload * {
        -webkit-transition: none !important;
        transition: none !important;
        -webkit-animation: none !important;
        animation: none !important;
    }
    .has-js .prep-animation,
    .has-js .prep-scroll-animation {
        visibility: hidden;
    }
    .has-js .do-animation,
    .has-js .do-scroll-animation {
        visibility: visible;
    }
}

/* ----------------------------------------------
 * Generated by Animista
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

 @media (min-width: 768px) {
    .fade-in-left {
        -webkit-animation: fade-in-left 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in-left 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .fade-in {
        -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .fade-in-bottom {
        -webkit-animation: fade-in-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in-bottom 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }

    .fade-in-right {
        -webkit-animation: fade-in-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
                animation: fade-in-right 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    }
}

/* --- animation fade-in-left --- */
@-webkit-keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-left {
    0% {
        -webkit-transform: translateX(-75px);
                transform: translateX(-75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}

/* --- animation fade-in --- */
@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* --- animation fade-in-bottom --- */
@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(75px);
                transform: translateY(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
    }
}

/* --- animation fade-in-right --- */
@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}
@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(75px);
                transform: translateX(75px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
                transform: translateX(0);
        opacity: 1;
    }
}


/* --- delay classes --- */
.delay-250 {
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}
.delay-500 {
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
}
.delay-750 {
    -webkit-animation-delay: 750ms;
    animation-delay: 750ms;
}
.delay-1000 {
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}
.delay-1250 {
    -webkit-animation-delay: 1250ms;
    animation-delay: 1250ms;
}
.delay-1500 {
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
}