/*
 Theme Name:   A Touch of Spring
 Description:  child theme
 Author:       Ilse Spaan
 Template:     Divi
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  atos
*/

/*
______________________
   
   Text Module
______________________

*/

/* Spacing underneath headers */ 
.atos-text h1,
.atos-text h2,
.atos-text h3,
.atos-text h4,
.atos-text h5,
.atos-text h6 {
    padding-bottom:.75em;
}

.atos-text h1:not(:first-child),
.atos-text h2:not(:first-child),
.atos-text h3:not(:first-child),
.atos-text h4:not(:first-child),
.atos-text h5:not(:first-child),
.atos-text h6:not(:first-child) {
    padding-top:1.25em;
}

.atos-text a {
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-color: #E7B62F;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

/* ET icoon als opsommingstekens */
.atos-opsomming ul li {
    padding-left: 20px;  /*buffer links van je opsomming om ruimte te creëren voor icoon*/
    list-style:none;
    }
 
.atos-opsomming ul li::before {
    content: '';
    display: inline-block;
    margin-left: -31px;   /*inspringafstand volgende regel*/
    padding-right: 10px;   /*buffer rechts van je icoontje*/
    font-family:'ETmodules';
    color: #5f5b5b;   
    font-size: 1.2em;   /*formaat icoontje uit te drukken in em*/
    vertical-align: middle;
    }
 
.atos-opsomming-icoon ul li::before {
    content: '\24';
    }

.atos-text ul li, 
.atos-text ol li {
    padding-bottom: .5em;
}

.atos-text p:last-of-type {
    padding-bottom: 1em;
}

.atos-text p:last-child {
    padding-bottom: 0;
}

/* Buttons */
.atos-btn.et_pb_button {
    border-radius: 25px 0px!important;
}


/* Slider */
.et_pb_slide_description {
    text-shadow: none!important;
}

/*
______________________
   
   Header
______________________

*/

/* Column alignment */   
#atos-header .et_pb_row {
    align-items: center;
}


/* Sticky Section background */
#atos-header {
    backdrop-filter: blur(7px)
}

/* Main Menu Module */
#page-container #et-boc #atos-header .et_pb_menu .et-menu>li {
    padding:10px 20px;
}

#page-container #et-boc #atos-header .et_pb_menu .et-menu>li a:hover {
    opacity:1;
}

/* Top Level Menu Hover Effect */
#page-container #et-boc #atos-header .et_pb_menu ul.et-menu > li > a:before {
    content: '';
    width: 0;
    left: 50%;
    height: 2px;
    background: #92AC87;
    position: absolute;
    z-index: -1;
    bottom: 1px;
    opacity: 0;
    transition: .3s cubic-bezier(.25,.01,.32,1.61);
}

#page-container #et-boc #atos-header .et_pb_menu ul.et-menu > li > a:hover:before,
#page-container #et-boc #atos-header .et_pb_menu ul.et-menu > li.current-menu-item > a:before  {
    width: 110%;
    left: -5%;
    opacity: 1;
}

#page-container #et-boc #atos-header .et_pb_menu ul.et-menu > li > a {
    z-index: 1;
}

/* Submenu */
#page-container #et-boc #atos-header .sub-menu {
    border:none;
    border-radius:2px;
    padding:20px;
    width:250px;
    transition:all .3s ease-in-out;
    top:calc(100% + 9px);
}

#page-container #et-boc #atos-header .sub-menu li {
    width:100%;
    padding:0;
}

#page-container #et-boc #atos-header .sub-menu li a {
    padding:0 0 10px;
    font-weight:400;
    font-size:16px;
    text-transform:none;
    letter-spacing:0;
    background:none;
    transition:all .3s ease-in-out;
}

#page-container #et-boc #atos-header .sub-menu li:last-child a {
    padding:0;
}

#page-container #et-boc #atos-header .sub-menu li a:hover {
    padding-left:5px;
}

#page-container #et-boc #atos-header .nav li:hover > ul, #atos-header .nav li.et-touch-hover > ul {
    top:calc(100% - 1px)
}  


/* Mobile Header Structure & Menu */
@media (max-width:980px) {
    #page-container #et-boc #atos-header .et_pb_row {
        display: flex;
        align-items:center;
    }

    #page-container #et-boc #atos-header .et_pb_column {
        margin-bottom:0;
    }

    #page-container #et-boc #atos-header .et_pb_menu__wrap {
        justify-content:flex-end;
    }
    
    /* Mobile Menu */

    /* Page Container overflow */
    #page-container {
    overflow-x: hidden;
    overflow-y: auto;
    }

    #page-container #et-boc #atos-header .mobile_menu_bar:before {
        font-size: 40px;
    }

    #page-container #et-boc #atos-header .opened .mobile_menu_bar:before {
        content:'\4d';
    }

    #page-container #et-boc #atos-header .et_mobile_menu {
        position: fixed;
        display: block!important;
        margin: 0!important;
        height: 100%!important;
        min-height: 100vh;
        padding: 70px 0 0!important;
        max-width: 300px;
        left: auto;
        right: -300px;
        top: 0;
        z-index: 39;
        transition: all 1s ease-in-out;
    }

    #page-container #et-boc #atos-header .opened .et_mobile_menu {
        right: 0;
    }

    #page-container #et-boc #atos-header .mobile_menu_bar {
        z-index: 40;
    }
    
    /* Position "Fixed" inside the Sticky Section fix */
    #page-container #et-boc #atos-header.et_pb_sticky * {
        transform:none!important;
    }
    
    /* Mobile Sub-menu */
    #page-container #et-boc #atos-header .sub-menu {
        width:auto;
        padding:0;
    }

    #page-container #et-boc #atos-header .sub-menu li a,
    #page-container #et-boc #atos-header .sub-menu li a:hover,
    #page-container #et-boc #atos-header .sub-menu li:last-child a {
        padding:10px 25px 10px 35px;
    }

}

/*adjust the new toggle element which is added via jQuery*/

#atos-header ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
    width: 44px;
    height: 100%;
    padding: 0px !important;
    max-height: 44px;
    border: none;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 999;
    background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
    position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
    background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
    display: none !important;
    visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
    display: block !important;
    visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
    text-align: center;
    opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
    top: 10px;
    position: relative;
    font-family: "ETModules";
    content: '\33';
    color: #92AC87;
}

/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
    content: '\32';
}

/*
______________________
   
   Pop-up
______________________

*/

/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .dl-popup-wrapper {
  position:fixed;
  z-index:990;
  top:0;
  right:0;
  bottom:0;
  left:0;
  transition: all .5s cubic-bezier(.14,.06,.41,1.39);
  opacity:0;
  visibility:hidden;
}

body:not(.et-fb) .dl-popup-wrapper.popup-is-visible {
  opacity:1;
  visibility:visible;
}


/* Allow the content inside the popup wrapper to scroll */
.dl-popup-inside {
  height:100%;
  overflow-y: scroll;
}


/* Prevent Body from Scrolling when Popup is visible */
body.dl-noscroll {
  overflow: hidden;
}

/* Center Align Popup Content inside the Section */
.dl-popup-content {
  display:flex;
  flex-direction:column;
  justify-content: center;
}

.dl-popup-content .et_pb_row {
  margin-top:0;
  margin-bottom:0;
}


/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:46px;
  }
}

@media (min-width:783px) {
  body:not(.et-fb).admin-bar .dl-popup-wrapper {
    top:32px;
  }
}

/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
  z-index:99999;
}

/* Add a hand cursor to the close trigger element */
.dl-popup-close {
  cursor:pointer;
}

/* Add Row animation when popup is triggered */
.dl-popup-wrapper.popup-is-visible .et_pb_row:not(.dl-popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}


/*
______________________
   
   Woocommerce
______________________

*/

.woocommerce div#respond input#submit, .woocommerce-page div#respond input#submit {
    background: #E7B62F!important;
    border-radius: 0px;
    border: none;
    font-family: 'Amatic SC';
    color: #ffffff;
    font-size: 24px;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 7.2px 24px!important;
}

.woocommerce div#respond input#submit:hover, .woocommerce-page div#respond input#submit:hover {
    color: #5f5b5b;
    background: #ffffff!important;
    border: 1px solid #5f5b5b!important;
    padding: 7.2px 24px!important;
}

.woocommerce div.product div.images .flex-control-thumbs {
    overflow: hidden;
    zoom: 1;
    margin: 20px;
    padding: 0;

/*
______________________
   
   Responsive Styles between 981px and 1330px
______________________

*/

@media all and (min-width: 981px) and (max-width: 1330px) {
    div.et_pb_section.et_pb_section_0 {
    background-size: 70% auto;
    background-position: right -194px;
}

div.et_pb_module.et_pb_text.et_pb_text_4.atos-text {
    padding-right: 50px!important;
    padding-left: 50px!important;
}

div.et_pb_module.et_pb_text.et_pb_text_5.atos-text {
    padding-right: 50px!important;
    padding-left: 50px!important;
}

img.wp-image-2042 {
    padding-top: 70px;
}

div.et_pb_module.et_pb_text.et_pb_text_6.atos-text {
    padding-left: 20px!important;
    padding-right: 20px!important;
}

h4.et_pb_blurb_3.et_pb_blurb .et_pb_module_header {
    font-size: 14px!important;
}

}