.facebook {
    background: #3B5998;
    color: white;
}

.twitter {
    background: #55ACEE;
    color: white;
}

.google {
    background: #dd4b39;
    color: white;
}

.linkedin {
    background: #007bb5;
    color: white;
}
.youtube {
    background: #bb0000;
    color: white;
}

.instagram {
    background:#c82828;
    color: white;
}

.pinterest {
    background:#a26e59;
    color: white;
}

.icon-bar i {
    color:white;
}

.icon-bar {
    position: fixed;
    right:0px;
    top: 30%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index:999;
}


.icon-bar a {
    display: block;
    text-align: center;
    padding: 9px;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
    background-color: #000;
}

@media (max-width: 767px) {
    .icon-bar {
        top: 50%;
    }
}

.alert-success {
    color: rgba(0,0,0,0.7);
    border: 2px solid rgba(0,0,0, 0.05);
}

.tmplt_sales_color {
    border-color: rgba(0,0,0,0.1);
    color:rgba(0,0,0,0.7);
}
.tmplt_sales_color:hover {
    filter: brightness(85%);
    color:rgba(0,0,0,1);
}



.tmplt_base_color { 
  background-color:#f3f6f4 ;
}
.tmplt_base_color_text,ul.menu-vertical.tmplt_base_color_text a, .header *,.footer *,.menu-level-0 a { 
  color:#000000 ;
}
.tmplt_attention_color { 
  color:#000000 ;
}
.tmplt_sales_color,.tmplt_sales_color:hover { 
  background-color:#000000 ;
}
.alert-success { 
  background-color:#38761d ;
}
.container { 
  max-width:1024 ;
}
 { 
  :{artikeltype} ;
}
 { 
  :{amt_articles} artikelen uit {amt_articles_total} ;
}



@font-face {
    font-family: 'Jost';
    src: url('https://fonts.gstatic.com/s/jost/v4/92zPtBhPNqw79Ij1E865zBUv7mz9JQVGPokMmuHL.ttf');
}

* {
    font-family: 'Jost';
}


button:disabled {
     background-color:rgba(25, 25, 25, 0.3);
}

button:disabled:hover {
    background-color:rgba(25, 25, 25, 0.3);
}

button.selected {
    background-color:rgba(25,255,255,0.3);
}


@media (min-width: 0px) and (max-width: 45em ) {
    #sw_menu * {
        color:#000;
    }
}

.has-cms-content * {
    color:#000;
}

.has-cms-content a  {
    color:#000;
    text-decoration: underline;
}

/* menu styler */
@media (min-width:768px) {
    ul.menu-fat-sublevel1 ul.menu-level-1 > li > a {
        font-weight: 800;
    }

    ul.menu-margin-level2 ul.menu-level-2 {
        margin-left: 50px;
    }
}

/* Dit zorgt ervoor dat de website beter past op elk toestel */
* {
     box-sizing: border-box;
}

.btn-aanmelden {
    min-width: fit-content;
}

/* Dit zorgt ervoor dat de artikelfoto's passen */
.article_image_list {
     border: 1px solid rgba(0, 0, 0, 0.0);
     height: fit-content;
     width: fit-content;
}

/* Dit zorgt ervoor dat het SALE icoon rood wordt */
.overlay-discount {
     background-color: red;
}

/* Dit zorgt ervoor dat het NIEUW icoon zwart wordt */
.overlay-new {
     background-color: black;
}

/* Dit zorgt ervoor dat het handmatige overlay tekst icoon een kleur krijgt */
.overlay-article {
     background-color: ;
}

/* Dit is voor het stylen van de Filter functie */
[data-view="filter"] #filter-closer {
     color: black;
}
#category-filter-button {
    background-color: dimgrey;
}
div#filter-closer.tmplt_sales_color {
     background-color: white;
}
div#category-filter.col-md-2.active {
     background-color: white;
}
input.form-control.number-filter {
     margin-top: 1.5px;
}
select.form-control, textarea.form-control, input[type=text].form-control, input[type=password].form-control {
     margin-bottom: 5px;
}

/* Dit is voor het stylen van de knop "Afrekenen" en het icoontje van de winkelwagen */
.checkout_total_line {
    margin-left: -15;
}
.tmplt_sales_color {
     background-color: red;
     color: white;
     border: 1px solid rgba(0, 0, 0, 0.0);
     border-radius: 8px;
     font-size: larger;
     font-weight: 300;
     padding: inherit;
     margin-top: 5px;
}
.tmplt_sales_color:hover {
     background-color: black;
     color: white;
}
.shopping-cart-number.badge-warning.tmplt_sales_color {
     background-color: red;
     color: auto;
     border-radius: auto;
     font-size: auto;
     font-weight: auto;
     padding: auto;
     margin-top: auto;
}
#sw_customer_modify_button.tmplt_sales_color {
     width: 110;
}

/* Dit zorgt ervoor dat de SALE & NIEUW overlay links komt te staan en 360 graden */
.aio_rotated {
     position: absolute;
     top: -0px;
     right: auto;
     -webkit-transform: rotate(360deg);
     z-index: 4;
}

/* Dit schuift de mini thumbnails op de product pagina naar links */
ul.article_images_all {
     margin-left: -50;
}

/* Dit zorgt ervoor dat de opacity van afbeeldingen aangepast wordt */
.cms_content figure img:hover {
     opacity: 0.7;
     transition: 0.5s ease;
}
.img-article:hover .img-fluid {
     opacity: 0.8;
     transition: 0.5s ease;
}

/* Dit zorgt ervoor dat de tekst in "menutop" 0 pixels margin krijgt */
ul.menu-horizontal {
     margin: 0px;
}

/* Dit zorgt ervoor dat de Facebook widget links -14 pixels margin krijgt */
.fb_iframe_widget {
     margin-left: -14px;
}

/* Dit verlaagt de Social Bar */
.icon-bar {
    top: 60%;
}

/* Dit is voor het stylen van "mainmenu" */
div#sw_menu  {
     border-top: solid 1px rgb(0,0,0,0.1);
     border-bottom: solid 1px rgb(0,0,0,0.1);
     margin-top: 0px;
     margin-bottom: 5px;
}
.menu-level-0 {
     margin: 5px;
}
.menu-level-1 {
     left: auto;
     width: 50%;
}

/* Dit is voor het stylen van de "Bijbehorende producten" */
.article_content .article_image_list {
    padding: 0px;
    max-width: fit-content;
    max-height: fit-content;
    margin-left: 12.5px;
}
.article_content .article_header b {
font-size: 1.2rem;
}
.article_content #article_original_price {
    font-size: 1.0rem;
font-weight: normal;
}
.article_content h3#article_baseprice {
font-weight: normal;
}
.article_header, .article_content h3 {
    font-size: 1.2rem !important;
}

/* Dit is om invulvelden te stylen */
select#item_amount, select#sort_order  {
     margin-top: 0px;
     margin-bottom: 5px;
}
form#customer_login_form {
     width: 300px;
}

/* Dit zorgt voor een mooiere afstand in de hoogte van de producten */
.mb-5, .my-5 {
     margin-bottom: 1.0rem!important;
}

/* Merkenpagina */
div.col-3 {
padding: 5;
}

/* Dit zorgt voor het stylen van de footer zodat de betaalmethodes iconen allemaal passen */
.col-12.col-md-3 {
padding: 0;
}
.footer ul {
    padding: 0;
}

/* Media query [Tablet] */
@media only screen 
  and (min-device-width: 768px)
  and (max-device-width: 1024px) {
     .footer ul { padding-left: 0px; }
     div.filter-block-options { width: 135; }
     input.form-control.number-filter { width: 60; }
     .menu-level-1 { left: auto; width: 50%; }
}

/* Media query [All] */
@media only screen 
  and (min-device-width: 0px)
  and (max-device-width: 1024px) {
     .menu-level-0 { margin: auto; }
}

/* Dit is nodig voor het stylen van het "Back to top" button */
#back-to-top-btn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 20px;
     font-size: 26px;
     width: 50px;
     height: 50px;
     background-color: #fff;
     color: #333;
     cursor: pointer;
     outline: none;
     border: 3px solid #333;
     border-radius: 50%;
     transition-duration: 0.2s;
     transition-timing-function: ease-in-out;
     transition-property: background-color, color;
     z-index: 100;
}
#back-to-top-btn:hover, #back-to-top-btn:focus {
     background-color: #333;
     color: #fff;  
}

.menu_customer {
    top: 15px;
    padding: 7px 10px 10px 10px;
}

/* Animations */
.btnEntrance { animation-duration: 0.5s; animation-fill-mode: both; animation-name: btnEntrance; }

/* zoomIn */
/* @keyframes btnEntrance { 
     from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
     to { opacity: 1; }    
} */

/* fadeInUp */
@keyframes btnEntrance {
     from { opacity: 0; transform: translate3d(0, 100%, 0); }
     to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Dit is nodig voor het stylen van het "Back to top" button */
.btnExit { animation-duration: 0.25s; animation-fill-mode: both; animation-name: btnExit; }

/* zoomOut */
/* @keyframes btnExit {
     from { opacity: 1; }
     to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
} */

/* fadeOutDown */
@keyframes btnExit {
     from { opacity: 1; }
     to { opacity: 0; transform: translate3d(0, 100%, 0); }
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
  margin-bottom: 15px;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.cms_content a {
    color: black;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}



 .menu-item-active > a:first-child{
    font-weight:800;
 }