@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700&display=swap');
  @import url('https://fonts.googleapis.com/css?family=Cinzel:400,700&display=swap');

  body {
  font-family: 'Noto Sans', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
  font-family: 'Cinzel', serif;
  }

  h1 {
  font-size: 40px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 28px;
  }

  h4 {
  font-size: 24px;
  }

  h5 {
  font-size: 20px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 16px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: #645a50;
  }

  h1, h2, h3, h4, h5, h6 {
  color: #645a50 !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: #000000 !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: #8a837c !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: #000000 !important;
  color: #fff !important;
  }

  .btn:hover,
  .wpcf7-submit:hover,
  .woocommerce span.onsale:hover,
  .woocommerce a.button:hover,
  .woocommerce .button:hover,
  [type="submit"]:hover,
  .nf-form-content input[type=submit]:hover
  {
  background: #8a837c !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: #645a50 !important;
  color: #fff !important;
  }

  div.social-media ul li a i {
  color: #fff !important;
  }

  div.social-media ul li a:hover {
  background: #8a837c !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: #000000 !important;
  }

  div.phone a.phone, div.email a.email {
  background: #645a50 !important;
  color: #fff !important;
  }

  div.phone a.phone, div.email a.email i {
  color: #fff !important;
  }

  div.phone a.phone:hover, div.email a.email:hover {
  background: #8a837c !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: #645a50;
  border-color: #645a50;
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: #645a50 !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: #645a50 !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  .modal__container,
  .footer-cta-box,
  .rimg,
  [type="submit"] {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  border-radius: 0px !important;
  }

  .img-responsive {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  }



  header div.header {
  background-color: rgba(230, 225, 220, 1) !important;
  }
  header .sticky_menu_small div.header {
  background-color: rgb(230, 225, 220) !important;
  }

  @media only screen and (max-width : 992px) {
  header nav.navbar-default {
  background: none !important;
  }
  }


    header .sticky_menu_small div.header {
    background-color: rgba(230, 225, 220, 1) !important;
    }
    @media only screen and (min-width : 992px) {
  header .wrapper.sticky_menu div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav>li>a {
  color: #645a50 !important;
  }
  }



  @media only screen and (min-width : 992px) {
  header > div.wrapper {
  min-height: 160px;
  }
  header > div.wrapper.above {
  min-height: 310px;
  }

  header div.header div.holder {
  height: 60px;
  }
  }





  nav.navbar-default, div.navbar-collapse {
  background-color: #e3cfbe; !important;
  }

  @media only screen and (min-width : 992px) {
  
  div.navbar-collapse {
  background: none !important;
  }

  header nav.navbar-default {
  background-color: rgba(227, 207, 190, 1) !important;
  }

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(227, 207, 190, 1) !important;
  -webkit-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  -moz-box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.1);
  }

  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:hover,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:focus,
  header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a:active {
  color: #645a50 !important;
  }
  }


  section.featured div.wrapper {
  margin-top: 60px;
  }





  header div.header {
  text-align: left;
  }

  header div.navbar-collapse ul.navbar-nav li a, .nav .open>a, .nav .open>a:focus, .nav .open>a:hover {
  border-bottom: 1px solid #000000;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse ul.navbar-nav li a, header nav.navbar-default div.navbar-collapse ul.navbar-nav li ul.dropdown-menu li.active > a {
  color: #000000 !important;
  }
  }


  header div.header div.contact i {
  color: #000000;
  }

  @media only screen and (min-width : 992px) {
  header div.navbar-collapse {
  text-align: right;
  }
  }

  section.featured div.item p,
  section.news div.item p {
  color: #645a50 !important;
  }

  section.featured div.item,
  section.news div.item {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  }

  section.partners {
  background: #000000 !important;
  }

  section.partners img {
  border-radius: 0 !important;
  }

  footer,
  .footer-cta.center:after,
  .author {
  background: #645a50 !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid #000000;
  }

  footer div.socket,
  .footer-sticky {
  background: #8a837c !important;
  }


  .img-circle {
  border-radius: 0 !important;
  }

  section.treatments div.button-wrap {
  background: #bea082;
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: #645a50 !important;
  }

  section.prices table tr td a {
  color: #645a50 !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: #645a50 !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: #645a50;
  }

  :root {
--main: #000;
}

.wrapper {
  position: relative;
}

.default-icon {
  height: 30px;
  font-size: 3em;
  color: #dadada !important;
}

.social {
  text-align: right;
  padding-right: 0.1em;
  margin-top: 0.6em;
  width: auto;
  float: right;
  height: auto;
  display: flex;
}

.social {
  text-align: right;
  padding-right: 0.1em;
  margin-top: 0.6em;
}


footer .navbar .nav > li a {
  color: #333 !important;
  font-size: 1.2em;
}

footer .row-fluid .span10 {
  width: 82.90598290598291% !important;
  *width: 82.83455433455434%;
}

#bubbles-container {
  display: flex;
  flex-direction: column;
}


img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

/*standaard instellingen*/


header > div.wrapper {
  min-height: 0;
}
.socket {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600!important;
    line-height: 2em!important;
    margin: 5px 0 0!important;
font-family: 'Ubuntu', sans-serif;
}

h1 {font-size: 1.8em!important;}
h2 {font-size: 1.6em!important;}
h3 {font-size: 1.5em!important;}
h4 {font-size: 17.5px!important;}

body {
    font-weight: 400;
}


section {
    padding: 0;
}

.page-header, .breadcrumbs {
    display: none;
}



header div.header.full-width nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
background: var(--main);
}



@media only screen and (min-width: 992px) {

  nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a {
    color: #645a50 !important;
}
header nav.navbar-default ul.navbar-nav .active > a:focus, header nav.navbar-default ul.navbar-nav .active > a:hover, header nav.navbar-default ul.navbar-nav .active > a:visited {
  background: none;
  color: #645a50 !important;
}
header > div.wrapper div.wrapper img.logo {
  float: left;
  width: auto;
}

nav.navbar-default div.navbar-collapse ul.navbar-nav > li:nth-child(1) {
  margin-left: 1rem;
}




nav.navbar-default div.navbar-collapse ul.navbar-nav > li {
  background: transparent !important;
  padding: 0.6rem;
  min-height: 40PX;
  display: inline-flex;
}


}



@media only screen and (max-width: 991px) {

header div.navbar-collapse ul li a {
  color: #645a50 !important;
}

}




/* Colums settings */

@media only screen and (min-width: 992px) {
.container {
    width: 960px;
}
.row-fluid {
    width: 100%;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}
.row-fluid .span12 {
    width: 100%;
}
.row-fluid [class*="span"] {
    display: block;
    width: 100%;
    min-height: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
/*    margin-left: 2.857142857142857%;*/
}
.row-fluid .span4 {
    width: 31.623931623931625%;
}
.row-fluid .span8 {
    width: 65.81196581196582%;
}
.row-fluid .span12 {
    width: 100%;
}
.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid {
    width: 100%;
}
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 30px;
}
.span12 {
    width: 700px;
}
.row-fluid .span6 {
    width: 48.717948717948715%;
}
[class*="span"] {
    float: left;
    min-height: 1px;
    margin-left: 20px;
}
}

.row-fluid .box {
    position: relative;
    margin-bottom: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.row-fluid .box .box-inner {
    min-height: 150px;
    padding: 15px 25px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.bubbles-container {
    min-height: 150px;
}

.bubbles-container .row-fluid:last-child {
    padding-bottom: 10px;
}
.row-fluid {
    position: relative;
}

.row-fluid .btn-bubble, .row-fluid .box-options-panel {
    display: none;
}
.row-fluid .box .box-inner .box-content {
    overflow: hidden;
}
.box.box-empty {
    display: none;
}

.row-fluid .box.box-openinghours .day-name {
    display: inline-block;
    width: 40px;
}


section.eigenview .container {
    padding: 0px 41px;
}


/*Ook nog ff het menu instellen bij de andere instellingen dan ben je al een eind.*/
/*Vul hierboven de kleur van het menu in want dat is vaak ook de main kleur op de websites*/



section.partners {
  display: none;
}


header > div.wrapper div.wrapper img.logo {
padding: 5px 0 !important;
max-height: 140px;
}
.navbar .container {
        padding: 0;
}

nav.navbar-default div.navbar-collapse ul.navbar-nav > li {
padding: 0.6rem;
}

nav.navbar-default div.navbar-collapse ul.navbar-nav > li a {
  padding: 0 15px;
  white-space: nowrap !important;
    font-family: 'Ubuntu',sans-serif;
    font-size: 14px;
    letter-spacing: 1.5px;
    font-weight: bold;
}
header div.header div.cta a {
  font-size: 2em;
  color: #dadada !important;
}

div.social-media ul li a {
  height: 50px;
  width: 50px;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media only screen and (min-width: 992px) {
nav.navbar-default div.navbar-collapse ul.navbar-nav > li a {
  padding: 0 15px;
  white-space: nowrap !important;
}

header div.header div.holder {
  height: auto;
}


}


/* footer*/

footer {
    position: relative;
}
footer div.column > h4 {
    display: none!important;
}
footer a {
    color: #fff!Important;
}
footer a:hover {
    color: #fff!important;
    opacity: 0.8;
}
footer ul.nav-sub-menu {
    padding: 0;
    list-style: none;
}
footer .navbar .nav > li a {
    padding: 0 10px;
}

footer .navbar .nav > li {
    float: left;
    margin: 0 10px;
}
footer .nav {
    list-style: none;
}
footer a:hover {
    background-color: transparent!Important;
}
footer div.column {
    margin-bottom: 0;
}
footer .navbar .nav > li p {
    display: none;
}
footer {
    background: transparent!important;
}


/*GROTE FOTO OP ELKE PAGINA*/

#main-picture-container {
    padding: 15px!important;
}

<script>jQuery(document).ready(function() {
jQuery('<section class="salonfoto"><div class="container"><div id="main-picture-container"><img  src="/wp-content/uploads/sites/237/2023/06/grotefoto.png"></div></div></section>' ).insertAfter('header');
});
</script>


/*BORDERS*/

header nav.navbar-default .container {
    border-top: 1px solid var(--main);
}
section.salonfoto .container  {
    border-bottom: 1px solid var(--main);
}
footer .container {
    border-top: 1px solid var(--main);
}


/* MEDEWERKER */

@media only screen and (min-width: 992px) {
ul.employees-wrapper.thumbnails .span6 {
    width: 48%;
    margin-left: 2%;
}
ul.employees-wrapper.thumbnails .span6.employee-image {
    width: 48%;
}
}



.employees-wrapper .employee-description-content, .employees-wrapper .opening-hours-content {
    font-size: 12px;
}
.thumbnails:before, .thumbnails:after {
    display: table;
    content: "";
    line-height: 0;
}
.employees-wrapper .thumbnail {
    border: 0;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}
.thumbnail {
    display: block;
    padding: 4px;
    line-height: 20px;
    border: 1px solid #ddd;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.employees-wrapper .thumbnail .employee-image {
    text-align: center;
    overflow: hidden;
    max-height: 212px;
}
.employees-wrapper .thumbnail .employee-image img {
    max-width: 212px;
}
.employees-wrapper .thumbnail img {
    padding: 0 5px 0 0;
}
.employees-wrapper .employee-description-content, .employees-wrapper .opening-hours-content {
    padding-bottom: 28px;
}
#bubbles-container .box-content p, #wizard-preview .box-content p {
    font-size: 1.2em;
    line-height: 1.5em;
    margin: 5px 0 0;
    word-wrap: break-word;
}
.employees-wrapper .employee-description-content, .employees-wrapper .opening-hours-content {
    padding-bottom: 28px;
}
.employees-wrapper .no-margin {
    margin: 0 !important;
}
.employees-wrapper .new-line {
    clear: left;
}
.employees-wrapper .no-margin {
    margin: 0 !important;
}
.employees-wrapper .employees-show-description, .employees-wrapper .employees-show-opening-hours {
    display: block;
    width: 95%;
    margin: 0 auto;
    margin-top: -28px;
}
.employees-show-description {
    background: #0d0d1c;
    border: 0;
    color: #ffffff;
    border-radius: 0;
    padding: 6px 16px;
    line-height: 1.2em;
 }



<div id="bubbles-container" class="boxes" style="min-height: 874px;">
<div id="block-1" class="row-fluid">
<div id="column-1-1" class="span12">
<div id="box-16489" class="box box-employees mandatory" data-allowedit="" data-row="1" data-col="1" data-sizex="3" data-sizey="1" data-page="1185" data-type="20" data-block="1" data-valid="1 withNoPadding=">
<div class=" box-outer">
<div class="box-inner">
<div class="box-options-panel"></div>
<div class="box-content">
<ul class="employees-wrapper thumbnails">
 	<li class="span6">
<div class="thumbnail">
<div class="span6 employee-image"><img class="alignnone size-full wp-image-510" src="https://magusti.nbsals4.nl/wp-content/uploads/sites/224/2023/05/mart.jpg" alt="" width="240" height="320" /></div>
<div class="span6">
<div class="opening-hours-content">
<h4>Wanneer werkt Mart?</h4>
<span class="day-name">Di</span> <span class="day-hours">08:30 – 12:00</span> / <span class="day-hours">13:00 – 17:30</span>
<span class="day-name">Vr</span> <span class="day-hours">08:30 – 12:00</span> / <span class="day-hours">13:00 – 17:30</span>
<span class="day-name">Za</span> <span class="day-hours">08:00 – 14:00</span>

</div>
<div class="employee-description-content">

Hallo allemaal! Mijn naam is Mart, Ik ben 23 jaar oud en ik woon in Almelo. Ik ben een enthousiaste leerling die vanaf 9 mei klaar staat om jullie haar super mooi te maken. Op dit moment volg ik de opleiding Haarstylist Dame niveau 3 en zit ik in mijn tweede jaar. Voordat ik aan deze opleiding begon, heb ik een opleiding afgerond als barbier. Het knippen van heren vind ik geweldig en ik heb hier dan ook veel ervaring mee. Naast het knippen ben ik ook gepassioneerd over alles wat met haar en styling te maken heeft. Ik ben altijd op de hoogte van de nieuwste trends en technieken om mijn vaardigheden te verbeteren Ik hecht veel waarde aan een goede klantenservice en ik zal er altijd naar streven om jullie tevreden en stralend de salon te laten verlaten. Ik werk met passie, precisie en oog voor detail, zodat jullie met het kapsel van jullie dromen de deur uitgaan. Ik ben altijd enthousiast om nieuwe uitdagingen aan te gaan en te leren van ervaren kappers in de industrie. Als leerling ben ik gemotiveerd om mijn vaardigheden verder te ontwikkelen en mijn passie voor het kappersvak te blijven uitbreiden Lijkt het je leuk om plaats te nemen bij mij in de stoel? Ik kijk ernaar uit om jullie snel te verwelkomen. Tot binnenkort!

</div>
<div class="span6 new-line no-margin"></div>
<div class="span6 no-margin"><button class="toggle-btn" type="button">Meer info</button></div>
</div>
</div></li>
 	<li class="span6">
<div class="thumbnail">
<div class="span6 employee-image"><img class="alignnone size-full wp-image-511" src="https://magusti.nbsals4.nl/wp-content/uploads/sites/224/2023/05/maarten.jpg" alt="" width="130" height="160" /></div>
<div class="span6">
<div class="opening-hours-content">
<h4>Wanneer werkt Maarten?</h4>
<span class="day-name">Di</span> <span class="day-hours">08:30 - 12:00</span> / <span class="day-hours">13:00 - 17:30</span>
<span class="day-name">Wo</span> <span class="day-hours">08:30 - 12:00</span>
<span class="day-name">Do</span> <span class="day-hours">08:30 - 12:00</span> / <span class="day-hours">13:00 - 17:30</span>
<span class="day-name">Vr</span> <span class="day-hours">08:30 - 12:00</span> / <span class="day-hours">13:00 - 17:30</span>
<span class="day-name">Za</span> <span class="day-hours">08:00 - 14:00</span>

</div>
<div class="employee-description-content">

Mag ik me even voorstellen: mijn naam is Maarten Zurhorst. Ik ben eigenaar van Magusti Hair Design. De naam Magusti is ontstaan door mijn voor- en doopnaam samen te voegen: Maarten + Gusti = Magusti. Ik ben geboren in Oldenzaal en heb daarna in nog 4 andere steden gewoond. Uiteindelijk ben ik met veel plezier weer terug gegaan naar Oldenzaal om hier een salon te openen. Ik was 26 toen ik aan dit avontuur begon. Mijn kappers carrière begon in Enschede bij Salon Martin. Daar heb ik 9 jaar gewerkt en was daar de laatste 2 jaar bedrijfsleider. Tevens gaf (en geef) ik weer trainingen door het land voor en met salons en firma’s. Wij werken met het merk REDKEN en zijn daarvan ook erkend REDKEN PREMIUM ambassadeur. Er werken momenteel 4 spontane dames in mijn salon. U kunt ze hier zien wie ze zijn en wanneer ze werken. VIVIR MI VIDA


</div>
<div class="span6 new-line no-margin"></div>
<div class="span6 no-margin"><button class="toggle-btn" type="button">Meer info</button></div>
</div>
</div></li>
 	</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


<style>


.toggle-btn {
  background: #0d0d1c;
  border: 0;
  color: #ffffff;
  border-radius: 0;
  padding: 6px 16px;
  line-height: 1.2em;
  font-size: 1.2em;
  position: absolute;
  bottom: 0;
  width: auto;
  width: 43%;
}


.span6 {
  height: 100%;
}
li.span6 {
  position: relative;
}
.span6.new-line.no-margin {
  display: none;
}

  .opening-hours-content {
    display: block;
  }

  .employee-description-content {
    display: none;
  }

  .opened .opening-hours-content {
    display: none;
  }

  .opened .employee-description-content {
    display: block;
  }

#info-div {
  display: none; /* Start verborgen */
}


.employees-show-description {
  background: #0d0d1c;
  border: 0;
  color: #ffffff;
  border-radius: 0;
  padding: 6px 16px;
  line-height: 1.2em;
  font-size: 1.2em;
}

</style>

<script>
  jQuery(document).ready(function() {
    jQuery('#bubbles-container .toggle-btn').click(function() {
      var wrapper = jQuery(this).closest('.thumbnail');
      wrapper.toggleClass('opened');
    });
  });
</script>