/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: LIDU
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1748415376
Updated: 2025-05-28 08:56:16

*/

@import "css/mobile.css";
@import "css/single-product.css";
@import "css/news.css";
@import "css/article.css";
@import "css/mandjie.css";
@import "css/cat.css";
@import "css/personeel.css";
@import "css/oorons.css";


:root {
  --RooiStandaard: #D6121C;
  --RooiDonker: #9e0e16;
  --RooiLig:#d16c71;
  --Turkoois: #3E9A9E;
  --TurkooisDonder:#2c6f72;
  --DonkerGrys: #888888;
  --Wit: #ffffff;
  --Swart: #000;
}

.woocommerce-store-notice, p.demo_store{background-color: var(--RooiStandaard)!important;}

body .woocommerce-error, body .woocommerce-info, body .woocommerce-message{padding:0!important; margin-top:20px!important}

.preorder-badge {
    background: var(--TurkooisDonder);
    color: var(--Wit);
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 0px;
    display: inline-block;
    margin-bottom: 5px;
}


h1{font-size: 40px!important; font-weight: 700!important; letter-spacing: 5px!important;}
h2{font-size: 25px!important}
h3{font-size: 16px!important}

body, 
span.woocommerce-Price-amount.amount, 
p,
label {font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important; line-height:1.8; font-size:16px; font-weight:normal; }


bdi{font-size: 18px!important; font-weight: bold!important;}

p{padding-bottom: 1.5em}

ol, ul{list-style-type: auto; margin-bottom: 20px; margin-left: 40px}

ol li, ul li{padding-left: 20px; line-height:1.8}


label, .frm_primary_label{color: var(--Swart)!important;font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important;}

.frm_html_container{color: var(--Turkoois)!important;font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important; font-size: 25px!important; font-weight: bold;}

/*Buttons*/


/* WooCommerce Buttons - Minimalist Style */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .woocommerce-message a.button {
  background: var(--RooiStandaard)!important;
  color: #fff!important;
  border: 2px solid #D91A21!important;
  padding: 10px!important;
  font-size: 16px!important;
  font-weight: 500!important;
  border-radius: 0px!important;
  text-transform: none!important;
  transition:none!important;
  box-shadow: none!important;
}

/* Hover effect */
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce .woocommerce-message a.button:hover {
  background: #D91A21!important;
  color: #fff!important;
  border-color: #D91A21!important;
}

/* Remove ETModules :after content on buttons */
.woocommerce button.button:after,
.woocommerce input.button:after,
.woocommerce input.button:before,
.woocommerce input.button.alt:after,
button.button:not(.button-confirm):after {
  content: none !important;
  display: none !important;
}


/*carousel*/


.onsale {
  background: var(--RooiStandaard);
  color: white;
  padding: 5px 10px;
  position: absolute;
  top: 10px;
  left: 10px;
  font-weight: normal;
  letter-spacing: 1px;
 
}

.myProductSwiper .swiper-slide{
    text-align: left;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.08); /* lighter border */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* softer, subtle */
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.myProductSwiper .swiper-slide:hover{
     transform: translateY(-5px);
}

.myProductSwiper {
  height: auto; /* or fixed height like 400px */
}

/* New inner wrapper for equalized height structure */
.myProductSwiper .slide-inner{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1 1 auto; /* allow JS to control height */
}

.slide-inner img{max-height: 350px;}

.myProductSwiper h3{
  min-height: 3em; /* Adjust as needed to balance titles */
  margin: 10px 0;
}

.myProductSwiper .skrywer {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--Swart);
}

.myProductSwiper .boeknaam,
#related-swiper-wrapper .boeknaam{
  margin: 10px 0 5px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.3;
   
}

.myProductSwiper .boeknaam a,
#related-swiper-wrapper .boeknaam a{ color: #000!important; font-size: 16px!important}

.myProductSwiper .price{
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
  color: var(--RooiStandaard)!important;
}

.myProductSwiper .button,
 .ur-submit-button,
 body .specialcart .button{
  background: var(--RooiStandaard)!important;
  color: white!important;
  padding: 8px 16px!important;
  border: none!important;
  cursor: pointer!important;
  border-radius: 0px!important;
  letter-spacing: 2px!important;
  font-size: 13px!important;
  width: 100%;
  font-weight: 500!important;
  margin-bottom: 10px;
}

.specialcart .button{width: auto!important;}

a.wp-block-button__link.wp-element-button,
.frm_button,
input.user-registration-Button.button {
  background: var(--RooiStandaard)!important;
  color: white!important;
  padding: 8px 16px!important;
  border: none!important;
  cursor: pointer!important;
  border-radius: 0px!important;
  letter-spacing: 2px!important;
  font-size: 13px!important;
  font-weight: 500!important;
  width: auto!important;
}

a.wp-block-button__link.wp-element-button{margin:20px 0px}

.myProductSwiper .button:hover,
.ur-submit-button:hover,
.myRelatedSwiper .button:hover,
a.wp-block-button__link.wp-element-button:hover,
input.user-registration-Button.button:hover,
body .specialcart .button:hover {
  background: var(--RooiDonker)!important;
}


button.woosw-btn {background: var(--Turkoois);
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  letter-spacing: 2px;
  font-size: 13px!important;
  width: 100%;
}

.page-id-2970 button.woosw-btn{width: auto!important;}


  button:hover.woosw-btn{ background-color:var(--TurkooisDonder); }
}

.woocommerce div.product form.cart{margin: 0!important}


.swiper-button-prev, .swiper-rtl .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, -40px)!important;
    right: auto;
}


.swiper-button-next, .swiper-rtl .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, -40px)!important;
    left: auto;
}


.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: var(--swiper-navigation-top-offset, 50%);
    width: 30px!important;  /* match your icon size */
    height: 32px!important;
    margin-top: calc(0px - 16px); /* half height */
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-family: "Font Awesome 6 Free" !important; /* your FA version */
    font-size: 20px !important;
    background: var(--Turkoois);  /* add background here or to the icon */
    border-radius: 50%;
}


.swiper-button-next:after,
.swiper-button-prev:after {
  content: none !important;
  display: none !important;
}



/*headings*/

.grootheading {
  position: relative;
  text-align: center;
  margin: 10px 0;
}

.grootheading h1 {
  display: inline-block;
  background: white; /* Match your background */
  padding: 0 15px;
  position: relative;
  z-index: 1;
  font-size: 55px!important;
  text-transform: uppercase;
  color: var(--Swart)!important;
}

.grootheading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--Turkoois); /* Border color */
  z-index: 1;
}

h2.wp-block-heading{
  display: inline-block;
  background: white; /* Match your background */
  padding: 0 15px;
  position: relative;
  z-index: 1;
  font-size: 55px!important;
  text-transform: uppercase;
  color: var(--Swart)!important;
}

.line-heading {
  position: relative;
  display: inline-block;
  background: white;
  padding: 0 15px;
  text-transform: uppercase;
  color: var(--Swart)!important;
}

.line-heading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -100vw;
  width: 200vw;
  height: 2px;
  background: #ccc;
  z-index: -1;
}



.kleinheading p,
.kleinheading{text-transform: uppercase; color: var(--Turkoois); font-size: 25px!important; margin: 0 0 10px!important; letter-spacing: 8px; font-weight: 500}

#headergroot{text-transform: uppercase;  margin: 0!important; letter-spacing: 1px; background-color: var(--DonkerGrys)!important;}
#headergroot h1.et_pb_module_heading, 
#headergrootblou h1.et_pb_module_heading{padding: 10px 0!important; color: var(--Wit);}

#headergrootblou{text-transform: uppercase;  margin: 0!important; letter-spacing: 1px; background-color: var(--Turkoois)!important;}

.lidu-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0;
  background-color: var(--DonkerGrys);
  color: #fff;
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  border: none;
  border-radius: 0px;
  transition: background-color 0.3s ease;
  width: 100%;
  font-size: 20px!important;
}


.lidu-button:hover {
  /*background-color: var(--RooiDonker);*/
}

.button-text{padding: 10px;}
.lidu-button-icon{background-color:var(--RooiStandaard); padding:10px; }

.lidu-button-icon::before {
  content: attr(data-icon);
  font-family: 'ETmodules'; /* Make sure this font is loaded if you're using Divi's icon set */
  font-size: 1em;
  display: inline-block;
}

 
 /**FEAT BOOK**/

 .single-product-box {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        padding: 0 5%;
      }

      .product-image{ margin-top:-130px }

      .single-product-box .product-image {
        flex-shrink: 0;
      }
      .single-product-box .product-image img {
        max-width: 400px!important;
        height: auto;
        display: block;
      }
      .single-product-box .product-info {
        flex-grow: 1;
      }
      
      .product-info{padding:2%}

      .single-product-box .product-title {
        margin-top: 0;
        margin-bottom: 10px;
        font-weight: bold;
        font-size: 40px!important;
        color: var(--Turkoois);
      }
      .single-product-box .product-description {
        margin-bottom: 10px;
      }

      .single-product-box .product-description p{color: var(--Swart);}

      .single-product-box .product-price {
        font-weight: bold;
        margin: 20px 0;
        color: red;
        font-size: 20px!important;

      }
      .single-product-box .add-to-cart.button {
        background: var(--Turkoois);
        color: white;
        padding: 8px 16px;
        border: none;
        cursor: pointer;
        border-radius: 0px;
        letter-spacing: 2px;
        display: inline-block;
        margin:20px 0px;
      }
      .single-product-box .add-to-cart.button:hover {
        background-color: var(--TurkooisDonder);
      }

.price del,
.price del span.woocommerce-Price-amount {
  text-decoration: line-through !important;
  color: #888; /* optional: grey color for regular price */
}

.price ins,
.price ins span.woocommerce-Price-amount {
  text-decoration: none !important;
  color: #d00; /* optional: red for sale price */
  font-weight: bold;
}


/*Nuus form*/
/* Target Formidable Forms inputs and textareas */
.frm_forms input[type="text"],
.frm_forms input[type="email"],
.frm_forms input[type="number"],
.frm_forms input[type="url"],
.frm_forms input[type="tel"],
.frm_forms input[type="password"],
.frm_forms textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid #000;
  padding: 8px 10px;
  height: 40px; /* match the button height */
  box-sizing: border-box;
  border-radius: 0;
}

/* Remove resize handle on textareas if inline */
.frm_forms textarea {
  resize: none;
}

/* Style the submit button */
.frm_forms button {
  background: var(--Turkoois)!important;
  border: none!important;
  border: none!important;
  padding: 8px 15px!important;
  height: 40px!important; /* same as inputs */
  box-sizing: border-box!important;
  cursor: pointer!important;
  border-radius: 0!important;
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important; font-size: 17px!important;
  width: 100%!important;
}

/* Optional: remove focus outline and change border color */
.frm_forms input:focus,
.frm_forms textarea:focus,
.frm_forms input[type="submit"]:focus {
  outline: none;
  border-bottom-color: #555;
}


/* Placeholder styling for Formidable Forms */
.frm_forms input::placeholder,
.frm_forms textarea::placeholder {
  color: #000!important;        /* placeholder text color */
  font-weight: 500;  /* bold placeholder */
  font-size: 17px;   /* slightly smaller text */
  opacity: 1;         /* make sure it's fully visible in some browsers */
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important; font-size: 17px!important
}



/*menu single item*/
/* Latest Product Shortcode Layout */
.lp-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;    
    padding: 15px; 
    background: #fff;
    max-width: 600px; /* optional, keeps it neat */
    margin: 20px auto;     
}

.lp-image img {
    max-width: 150px;
    height: auto;
    border-radius: 6px;
}

.lp-content {
    flex: 1;
}

.lp-title {
    font-size: 20px;
    margin: 0 0 10px;
}

.lp-title a {
    text-decoration: none;
    color: #333;
}

.lp-title a:hover {
    color: #0073aa; /* WP blue */
}

.lp-price {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #111;
}

.lp-btn {
  background: var(--RooiStandaard);
  color: white;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  border-radius: 0px;
  letter-spacing: 2px;
  font-size: 13px!important;
}

.lp-btn:hover {
    background: var(--RooiDonker);
}


/**HEADER LINKS**/
.custom-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  justify-content: flex-end;
}

.custom-links i{color: var(--Turkoois);}

.custom-links a {
  text-decoration: none;
  color: var(--Swart);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}

.custom-links a:hover {
  color: var(--RooiStandaard); /* change to your theme accent */
}

.custom-links .divider {
 color: var(--Swart);
}


#frm_form_7_container .frm_upload_text button{background-color: transparent!important;}


/*kontak ons*/

.wp-font-awesome-icon path{fill: var(--Turkoois);}
.wp-font-awesome-icon svg{font-size: 30px; margin-bottom: 20px}
.wp-block-column {text-align: center;}
.wp-block-column h4{color: var(--Turkoois);}



.woosw-list table.woosw-items{width: 100%}
.woosw-list .woosw-actions{display: none}


.cart-total {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
}

.custom-woosw-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 18px;
  color: #222;
  text-decoration: none;
}

.custom-woosw-menu .woosw-count,
.cart-total .cart-count {
  background: var(--RooiDonker);
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
  width: 25px;
    height: 25px;
    margin-left: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
  margin-left: 3px;
}



/*rekening*/
div#ur-frontend-form {
    border: none;
    padding: 0;
}

.user-registration-LostPassword a,
.user-registration-MyAccount-content a{color: var(--RooiStandaard)!important;}

.user-registration-MyAccount-content{color: var(--Swart)!important}


body #user-registration.horizontal .user-registration-MyAccount-navigation-link.is-active a {
    border-bottom-color: var(--RooiDonker)!important;
    color: var(--Wit)!important;
    background: var(--RooiLig)!important;
}

body #user-registration.horizontal .user-registration-MyAccount-navigation-link  a:hover{
  background-color: var(--RooiDonker)!important;
  color: var(--Wit)!important;
  border-bottom-color: var(--RooiStandaard);
}

#user-registration.horizontal, #user-registration.vertical {
    border-radius: 16px;
    background: #fff;
    box-shadow: none!important;
}


.my-custom-link-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.my-custom-link-list li {
    width: 33.33%;           /* 3 columns */
    margin-bottom: 10px;
}

.my-custom-link-list a {
    text-decoration: none;
    color: #222;
    transition: color 0.3s;
}

.my-custom-link-list a:hover {
    color: #d00;
}


/*handelaar*/

.ur-frontend-form{border:none!important; padding: 0!important; width: 100% !important;
    max-width: 100% !important; box-shadow: none !important;}

.ur-frontend-form label{font-size: 17px!important}

.ur-frontend-form .ur-form-row .ur-form-grid input {
    border: none !important; /* remove plugin’s rule */
    border-bottom: 2px solid #000 !important; /* apply bottom border */
    background: transparent;
    padding: 8px 10px;
    height: 40px;
    box-sizing: border-box;
    border-radius: 0!important;
}

 

.ur-form-row input::placeholder,
.ur-form-row textarea::placeholder {
  color: #000!important;        /* placeholder text color */
  font-weight: 500;  /* bold placeholder */
  font-size: 17px;   /* slightly smaller text */
  opacity: 1;         /* make sure it's fully visible in some browsers */
  font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif!important; font-size: 17px!important
}

/*SM ICONS*/

.my-social-icons {
  display: flex;
  gap: 12px;
}

.my-social-icons.icons-white{justify-content: flex-end;}

.my-social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 18px;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.my-social-icons.icons-color a {
  background: var(--Turkoois)!important;
  color: var(--Wit)!important;
}
.my-social-icons.icons-color a:hover {
  opacity: 0.8;
}

.my-social-icons.icons-white a {
  background: transparent;
  border: 2px solid #fff!important;
  color: #fff!important;
}
.my-social-icons.icons-white a:hover {
 background: var(--Turkoois)!important;
  color: #000;
}



#kortlinks .et_pb_column{width: 24%!important; margin-right: 1%!important}

/* Pagination wrapper */
.pagination {
  display: flex;
  justify-content: center; /* center pagination */
  margin: 30px 0;
  font-family: Arial, sans-serif;
}

/* Links inside pagination */
.pagination a,
.pagination span {
  display: inline-block;
  margin: 0 4px;
  padding: 8px 14px;
  border: 1px solid var(--Turkoois);
  border-radius: 4px;
  text-decoration: none;
  color: var(--Swart);
  transition: all 0.3s ease;
}

/* Hover effect */
.pagination a:hover {
  background-color: var(--TurkooisDonder);
  border-color: var(--TurkooisDonder);
  color: var(--Wit);
}

/* Current page */
.pagination .current {
  background-color: var(--Turkoois);
  color: #fff;
  border-color: var(--Turkoois);
  cursor: default;
}

/* Dots (…) */
.pagination .dots {
  border: none;
  background: none;
  color: #666;
  padding: 8px 10px;
}


    /* All list items with a nested <ul> (i.e., parents) are bold */
.tags ul li:has(ul) > a {
    font-weight: bold;
}

/* Normal weight for leaf categories (no children) */
.tags ul li:not(:has(ul)) > a {
    font-weight: normal;
}

/* Remove bullets and spacing */
.tags ul, .tags li {
    list-style-type: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Optional: indent child levels */
.tags ul li ul li {
    margin-left: 10px !important;
}

/* Links color */
.tags a {
    color: #000 !important;
}

.tags a:hover{color: var(--RooiStandaard)!important}


#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    color: black;
    font-family: inherit;
    font-size: 16px;
    text-transform: none;
    text-decoration: none; /* disable browser underline */
    font-weight: bold;
    text-align: left;
    margin: 0;
    padding: 0;
    vertical-align: top;
    display: inline-block!important;  /* <-- change this */
    border: 0;
    border-bottom: 1px solid #000;
}


#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column-standard > a.mega-menu-link:hover,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
    border-bottom: 1px solid var(--RooiStandaard)!important; /* or another color */
 
}


.lidu-addtocart-message a{color: #fff!important; font-size: 16px!important}


span.woo-selected-variation-item-name {
    display: none !important;
    background: green;
}


.lsdp-wrapper.horizontal ul {
    justify-content: flex-end!important;
}

.lsdp-wrapper ul li a div:not(.lsdp-lang-image){background-color: var(--RooiStandaard)!important; color: var(--Wit)!important; padding: 5px 10px!important}
.lsdp-language-list li{background-color: var(--RooiStandaard)!important; padding: 0!important}

.page-id-1148 #lsdp-wrapper,
.page-id-1723 #lsdp-wrapper{display: none!important}




    /* Hide on desktop */
    @media only screen and (min-width: 769px) {
        .mobile-only-item {
            display: none !important;
        }
    }

    /* Show on mobile (optional, as it's the default) */
    @media only screen and (max-width: 768px) {
        .mobile-only-item {
            display: block !important; /* Or display: list-item !important; for list items */
        }
    }



.custom-slider-wrapper {
    overflow: hidden; 
    width: 100%; /* Ensure the wrapper takes up the full container space */
     position: relative;
}

.slider-container {
    display: flex; 
    /* The JS will calculate and set the exact width dynamically */
    transform: translateX(0);
    transition: transform 0.8s ease-in-out; /* Slower, smoother transition */
}

.slider-slide {
    flex-shrink: 0; 
    width: 100%; 
    
    /* 1. Remove fixed height */
    height: 30vh; 
    
    /* 2. Set the aspect ratio using padding-bottom */
    /* Calculation: (Height / Width) * 100 = (300 / 1920) * 100 = 15.625% */
    /*padding-bottom: 15.625%; */
    position: relative; /* Needed for the absolute positioning of the image */
}

.slider-slide img {
    /* 3. Position the image to fill the *relative* slide container */
    position: absolute;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    /* Use 'contain' to ensure the whole image is visible (may leave bars if container ratio is off) 
       or use 'cover' (crops, but looks better if the ratio is close).
       For a perfect fit with no crop, use 'cover' if the container ratio is maintained by padding-bottom. */
    object-fit: contain; 
    display: block;
}


.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
}

.slider-arrow.prev {
    left: 10px;
}

.slider-arrow.next {
    right: 10px;
}

.slider-arrow:hover {
    background: rgba(0,0,0,0.7);
}