/*-------------------------------------------------------
 Theme Name:   Divi for Sparkmate
 Theme URI:    https://sparkmate.ch
 Description:  A child theme template for Divi
 Author:       Philip Gross
 Author URI:   https://sparkmate.ch
 Template:     Divi
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  divi-for-sparkmate
----------------- ADDITIONAL CSS GOES BELOW ------------------*/









/*----------------- [ADJUSTING THE STYLE AND LOOKS OF THE HEADER MENU] ------------------*/
/*----------------- [[ADJUSTING THE STYLE AND LOOKS OF THE MAIN MENU ITEMS]] ------------------*/
.et_pb_section_0_tb_header {
    display: flex;
    align-items: center;
}

.et-menu a,
.et-menu a:hover {
    transition: none;
}

.et-menu a:hover {
    font-weight: 600;
    opacity: 1.0
}

.et_pb_menu_0_tb_header.et_pb_menu li a {
    color: #2D2C2B;
}

.et_pb_menu_0_tb_header.et_pb_menu li a:hover {
    color: #000000;
}

.et_pb_row_0_tb_header,
body #page-container .et-db #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row,
body.et_pb_pagebuilder_layout.single #page-container #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row,
body.et_pb_pagebuilder_layout.single.et_full_width_page #page-container #et-boc .et-l .et_pb_row_0_tb_header.et_pb_row {
    width: 100vw;
    max-width: 100vw !important;
    padding: 0px 20px !important;
    align-items: center;
}




/*----------------- [[ADJUSTING THE SPACE DISTRIBUTION OF THE MODULES IN THE MENU]] ------------------*/
/*---fixing the width of the button-column on the right---*/
.et_pb_column.et_pb_column_1_4.et_pb_column_2_tb_header.et_pb_css_mix_blend_mode_passthrough.et-last-child {
    width: 300px;
}

/*---fixing the width of the logo-column on the left---*/
@media (min-width: 1230px) /*---if this breakpoint is changed also change the breakpoint below for the corresponding max-width and the ones further below for min-/max-widths for the logo swap---*/{
.et_pb_column.et_pb_column_1_4.et_pb_column_0_tb_header.et_pb_css_mix_blend_mode_passthrough {
    width: 300px;
}

/*---setting the width of the column with the menu items at the residual space between what is fixed for the logo to the left and the button to the right---*/
.et_pb_column.et_pb_column_1_2.et_pb_column_1_tb_header.et_pb_css_mix_blend_mode_passthrough.et_pb_column--with-menu {
    width: calc(100% - 2 * 300px);
}
}

@media (max-width: 1229px) /*---if this breakpoint is changed also change the breakpoint above for the corresponding min-width and the ones further below for min-/max-widths for the logo swap---*/ {
.et_pb_column.et_pb_column_1_4.et_pb_column_0_tb_header.et_pb_css_mix_blend_mode_passthrough {
    width: 100px;
}

/*---setting the width of the column with the menu items at the residual space between what is fixed for the logo to the left and the button to the right---*/
.et_pb_column.et_pb_column_1_2.et_pb_column_1_tb_header.et_pb_css_mix_blend_mode_passthrough.et_pb_column--with-menu {
    width: calc(100% - 100px - 300px);
}
}



/*----------------- [[MAKING THE HEADER LOGO SWAP "LOGO-FULL" <-> "LOGO-LETTER" AT SPECIFIED BREAKPOINT]] ------------------*/
/*---absolute positioning + start hidden---*/
.logo-full,
.logo-letter {
/*   position: absolute;
  top: 0;
  left: 0; */
  display: none !important;
  z-index: 1;
}

/*---show full logo above custom breakpoint + z-index if it ever overlaps---*/
@media (min-width: 1230px) /*---if this breakpoint is changed also change the breakpoint below for the corresponding max-width and the ones above for min-/max-widths for the width of the logo column and the calc setting of the column with the menu items---*/ {
  .logo-full {
    display: block !important;
    z-index: 2;
  }
}

/*---show letter logo below custom breakpoint---*/
@media (max-width: 1229px) /*---if this breakpoint is changed also change the breakpoint above for the corresponding min-width and the ones further above for min-/max-widths for the width of the logo column and the calc setting of the column with the menu items---*/ {
  .logo-letter {
    display: block !important;
  }
}




/*----------------- [ADJUSTING THE STYLE AND LOOKS OF THE SUB-MENU DROP-DOWN BOX & ITEMS] ------------------*/
/*----------------- [[ELIMINATING THE AFTER-ELEMENT (ARROW DOWN) ON MENU ITEMS THAT HAVE SUB-MENUS]] ------------------*/
.et-menu .menu-item-has-children a:first-child:after {
    font-family: ETmodules;
    content: none !important;
    display: none !important;
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 0;
    font-weight: 800;
}

.et-menu .menu-item-has-children a:first-child {
    padding-right: 0px;
}

/*----------------- [[ADJUSTING THE POSITION OF THE DROP-DOWN BOX AND THE ITEMS WITHIN]] ------------------*/
.et_pb_menu .et_pb_menu__menu nav ul li ul {
    top: calc(100% - 1px);
    left: auto;
}

.et_pb_menu .et-menu-nav ul ul {
    padding: 30px 0 20px 0;
    text-align: left;
}

/*---.nav li li {
    padding: 0;
    margin: 0;
}

.et-menu li li a {
    padding: 6px 0px;
    width: 200px;
}---*/

/*----------------- [[ADJUSTING THE STYLE OF THE DROP-DOWN BOX AND THE ITEMS WITHIN]] ------------------*/
.nav li ul {
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a,
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item a {
    color: #2d2c2b;
}

.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a:hover,
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu li.current-menu-item a:hover {
    color: #000000;
}

.et_mobile_menu li a:hover,
.nav ul li a:hover {
    background-color: transparent;
    opacity: 1.0;
}