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

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

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

  h1 {
  font-size: 34px;
  }

  h2 {
  font-size: 32px;
  }

  h3 {
  font-size: 26px;
  }

  h4 {
  font-size: 21px;
  }

  h5 {
  font-size: 18px;
  }

  h6 {
  font-size: 16px;
  }

  body {
  font-size: 15px;
  }

  body,
  .product-usps li,
  .stock-message {
  color: var(--dark);
  }

  h1, h2, h3, h4, h5, h6 {
  color: var(--dark) !important;
  }

  a,
  .woocommerce ul.products li.product .price,
  .woocommerce .price {
  color: var(--primary) !important;
  }

  a:hover,
  .woocommerce ul.products li.product .price,
  .woocommerce .price,
  .product-usps li i,
  .counter {
  color: var(--primary) !important;
  }

  .btn,
  .wpcf7-submit,
  .woocommerce span.onsale,
  .woocommerce a.button,
  .woocommerce .button,
  [type="submit"],
  .nf-form-content input[type=submit]
  {
  background: var(--primary) !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: var(--primary) !important;
  color: #fff !important;
  }

  div.social-media ul li a {
  background: var(--primary) !important;
  color: #fff !important;
  }

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

  div.social-media ul li a:hover {
  background: var(--primary) !important;
  color: #fff !important;
  }
  footer div.social-media ul li a {
  background: var(--primary) !important;
  }

  div.phone a.phone, div.email a.email {
  background: var(--primary) !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: var(--primary) !important;
  color: #fff !important;
  }

  header button.navbar-toggle {
  color: var(--primary);
  border-color: var(--primary);
  }

  .woocommerce-info,
  .woocommerce-message {
  border-top-color: var(--primary) !important;
  }

  .woocommerce-info::before,
  .woocommerce-message::before {
  color: var(--primary) !important;
  }

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

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



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

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

  header > div.wrapper {
  display: block;
  position: relative;
  }

  header div.header::after {
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
  }

  header > div.wrapper::after {
  background: url('https://salonnoblesseoblige.nl/wp-content/uploads/sites/214/2023/05/Header1.jpg');
  background-size: cover;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -2;
  }




  @media only screen and (min-width : 992px) {
  body.home header > div.wrapper {
  min-height: 350px;
      min-height: 362px;
    }
  body.home header > div.wrapper.above {
  min-height: 500px;
      min-height: 512px;
    }
  }

  @media only screen and (min-width : 992px) {
  body header > div.wrapper {
  min-height: 225px;
    }
  body header > div.wrapper.above {
  min-height: 375px;
    }
  body header > div.wrapper.above::after,
  body header > div.wrapper.above.shadow::before,
  body header > div.wrapper.above_shadow::before {
    }
  body header > div.wrapper.sticky_menu .header__content {
    }
  }

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

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





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

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

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

  nav.navbar-default div.navbar-collapse ul.navbar-nav>li a:hover {
  background-color: rgba(255, 255, 255, 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: var(--primary) !important;
  }
  }


  @media only screen and (min-width : 992px) {
  section.featured div.wrapper {
  margin-top: -100px;
  }
  header>div.wrapper .header__content {
  transform: translate3d(0, -40px, 0);
  }
  }





  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 var(--primary);
  }

  @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: var(--primary) !important;
  }
  }


  header div.header div.contact i {
  color: var(--primary);
  }

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

  section.featured div.item p,
  section.news div.item p {
  color: var(--dark) !important;
  }

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

  section.partners {
  background: var(--primary) !important;
  }

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

  footer,
  .footer-cta.center:after,
  .author {
  background: var(--primary) !important;
  }

  footer div.column > h4 {
  border-bottom: 1px solid var(--primary);
  }

  footer div.socket,
  .footer-sticky {
  background: var(--primary) !important;
  }


  section.treatments div.items div.item img {
  border-radius: 100% !important;
  }

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

  section.treatments div.button-wrap {
  background: var(--primary);
  margin-top: 30px;
  }

  section.treatments div.item a {
  color: var(--dark) !important;
  }

  section.prices table tr td a {
  color: var(--dark) !important;
  }

  aside div.block.treatments ul li a,
  .woocommerce .widget_product_categories ul li a,
  .woocommerce .widget_product_categories ul li span {
  color: var(--dark) !important;
  }

  aside div.block.treatments ul li:hover,
  .woocommerce .widget_product_categories ul li:hover {
  background: var(--primary);
  }

  :root {
--light:      #efe7f2;
--dark:       #0c0602;
--primary:    #631084;
--secondary:  #a62bd3;
--info:       #a540b5;
--accent1:    #ccd474;
--accent2:    #f2eca2;
--accent3:    #89a160;
--success:    #17b774;
--warning:    #e3d214;
--danger:     #f33008;
}

@media only screen and (max-width: 1450px) {
footer div.socket {
    padding-bottom: 80px!important;
}
}

.single-behandelingen figure, .single-behandelingen figure img {
  width: 100% !important;
  max-height: 300px;
  object-fit: cover;
}

header .page-header {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}

header nav.navbar-default {
  background-color: var(--light) !important;
}

.nf-form-cont hundefined {
  visibility: hidden;
}



section.archive.treatments div.items div.treatments div.item a span, section.archive.treatments div.treatments div.item h4, section.archive.treatments div.treatments div.items div.item a span, section.treatments.shortcode div.items div.treatments div.item a span, section.treatments.shortcode div.treatments div.item h4, section.treatments.shortcode div.treatments div.items div.item a span {
  display: inline-block;
  font-size: 15px;
  font-weight: normal;
  line-height: 20px;
  margin-top: 15px;
  text-transform: none;
  word-break: break-word;
  max-width: 100%;
  font-family: 'Rubik', sans-serif;
}

.links__behandelingen {
  max-width: 350px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 4rem;
}

.intro__blok {
  padding-top: 0 !important;
  margin-top: -120px;
}

.intro__child img {
  position: relative;
border-radius: 6px;
box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
}

.intro__parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
grid-gap: var(--spacing);
}

.intro__child {
  position: relative;
}

.intro__child .hero__text {
  color: #fff !important;
  font-size: 32px;
}


.hero__text h1 {
  margin-top: -10px;
  margin-bottom: 3rem;
}

.hero__text h3 {
  font-size: 18px;
  letter-spacing: 0.65px;
  text-transform: uppercase;
}

.hero__image img {
height: 52vh;
width: 100%;
  object-fit: cover;
  filter: brightness(0.8);
}

.hero__image img {
height: 52vh;
width: 100%;
  object-fit: cover;
border-radius: 6px;
}

.hero__text {
  position: absolute;
  right: 50%;
  z-index: 2;
  top: 50%;
  transform: translate(50%, -50%);
}
.hero__image {
  position: relative;
}

.fw__container .container {
  width: 100%;
  margin: 0;
  max-width: 100vw;
}

.beh__title {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
}

.beh__image img {
  width: 100%;
  min-height: 600px;
  object-fit: cover;
  position: relative;
  border-radius: 1rem;
}

.behandelingengrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: var(--gap);
  text-align: left;
}

.col-md-32.col-md-offset-8 h3 {
  color: #fff !important;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 1px;
}

.uitgelicht__blok {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--gap);
  margin-top: -200px;
  background: #fff;
  padding: 3rem;
  text-align: center;
  box-shadow: 0 0 30px -5px rgba(0,0,0,.15);
border-radius: 2rem;
}

.ubc_image img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 100%;
}


div.page-header h1 {
  border-bottom: 1px solid var(--primary);
}


.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

div.breadcrumbs {
  margin-bottom: var(--gap);
}

footer div.column > h4 {
  border-bottom: 0px solid var(--primary);
}

footer .column a {
  color: #fff !important;
  text-decoration: underline;
}


#nf-field-30 {
  margin: 0 auto;
}


#nf-form-title-4 {
  visibility: hidden;
}
.populaire__behandelingen__tekst {
  margin-bottom: var(--spacing);
}

.behandelingen__item > a {
  flex-grow: 1;
  border-radius: 5px;
  object-fit: cover;
}


.afspraak__maken {
  max-width: 800px;
  margin: 0 auto;
  display: block;
  text-align: center;
  background: var(--light);
  padding: 2rem;
}

.btn.btn-behandelingen {
  background: none !important;
  color: var(--light) !important;
  border: 1px solid var(--light);
  width: 65px;
  padding: 0 !important;
  height: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
 transition: background .2s,color .2s,border .2s;
}

.behandelingen__item img {
  filter: brightness(0.6);
height: 100%;
 border-radius: 5px;
 object-fit: cover;
}

.btn__behandelingen {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn.btn-behandelingen:hover {
  background: var(--primary) !important;
  color: #fff !important;
  border: 1px solid var(--primary);
}

.behandelingen__cta {
  position: absolute;
  bottom: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  padding: 2rem;
  align-items: center;
}


.behandelingen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  gap: var(--gap);
}

.row.merken {
  margin: var(--spacing) 0 0 0;
}
.row.merken img {
  filter: brightness(0);
}



.image__in__header {
  min-height: 50vh;
  object-fit: cover;
}


body.home header > div.wrapper {
  min-height: 350px;
  min-height: 150px;
}



  @media (min-width: 1200px) {
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 120em;
  margin-right: auto;
  margin-left: auto;
}

}

nav.navbar-default div.navbar-collapse ul.navbar-nav > li > a, 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 {
  color: var(--dark) !important;
}


section.featured a div.item h3 {
  font-size: 21px;
  font-weight: 400;
  margin-bottom: 15px;
  margin-top: 0;
  font-family: var(--font-depositphotos);
  font-weight: bold;
  background: radial-gradient(22.63% 53.02% at 39.02% 24.8%,#c0e3fb 4.17%,#efd1e8 50.52%,#b7a0df 93.23%);
    background-clip: border-box;
  background-clip: border-box;
  -webkit-background-clip: text;
  color: transparent !important;
}


footer, .footer-cta.center::after, .author, section.partners, footer div.socket {
  background: var(--dark) !important;
}



/*style*/
.color__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3rem;
  text-align: center;
}
.c-light {
  background: var(--light);
}
.c-dark {
  background: var(--dark);
}
.c-primary {
  background: var(--primary);
}
.c-secondary {
  background: var(--secondary);
}
.c-info {
  background: var(--info);
}
.c-accent1 {
  background: var(--accent1);
}
.c-accent2 {
  background: var(--accent2);
}
.c-accent3 {
  background: var(--accent3);
}
.c-succes {
  background: var(--success);
}
.c-warning {
  background: var(--warning);
}
.c-danger {
  background: var(--danger);
}
.color__grid > div {
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff !important;
  font-size: 20px;
}
/*end*/

.cw * {
    color: #ffffff!important;
}


section.treatments div.items div.item a span {
  text-transform: inherit;
  font-weight: normal;
}


@media only screen and (min-width: 992px) {
  :root {
  --spacing: 8rem;
  --gap: 3rem;
  } 

main .page-header {
  display: none;
}

.intro.text.block0.cw.fw__container.pdb-0 {
  z-index: 0;
  position: relative;
}

.home section.treatments div.items div.item a span {
  margin-top: -30px;
}

body header > div.wrapper {
  min-height: 600px;
}

.behandelingen__home__tekst {
  padding-right: calc(var(--spacing)*2);
}

header > div.wrapper .header__content {
  transform: translate3d(0, -170px, 0);
}

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

/*figure, .page-header {
  margin-bottom: var(--spacing);
}*/


/*.single-behandelingen  figure {
  width: 54%;
  float: left;
  display: block;
  height: 300px;
}*/

/*div.page-header h1 {
  margin-bottom: 50px !important
}*/

/*.single-behandelingen   figure img {
  min-height: 100%;
  object-fit: cover;
}*/



/*section.page {
  padding: var(--spacing) 0;
}*/


/*.single-behandelingen  .page-header {
  width: 46%;
  float: left;
  display: block;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}*/

.header__blok h1 {
  font-size: 60px;
}
.header__blok h1 {
  margin-bottom: var(--spacing);
  margin-top: 0;
}

.populaire__behandelingen__tekst h1 {
  margin-bottom: calc(var(--gap) / 2);
}


.home header > div.wrapper::after {
  background: none;
}

body.home header > div.wrapper {
  height: 0;
}
section.intro {
  padding: var(--spacing) 0;
}
.behandelingen__item img {
  flex-grow: 1;
border-radius: 5px;
object-fit: cover;
}
.behandelingen__text {
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.behandelingen__item {
position: relative;
height: 50vh;
display: flex;
flex-direction: column;
min-height: 300px;
}


.section__behandelingen div.items {
  grid-column: 2;
  grid-row: 1;
}
.populaire__behandelingen__tekst {
    grid-column: 1;
    grid-row: 1;
}

.populaire__behandelingen__tekst {
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}

.col-xs-24.col-sm-16.col-md-8 {
  width: calc(100% / 3);
}
.image__in__header {
  width: 100%;
}

.header__image {
  max-height: 100%;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.header__blok {
  height: calc(100vh - 300px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
}
.header__tekst {
  min-height: 350px;
  max-width: 800px;
  display: block;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.header__blok {
  height: calc(100vh - 300px);
}

}



.header__section .container {
  width: 100%;
  max-width: 100%;
  padding: 0;
}


.btn {
  padding: 14px 25px;
  border-radius: 200px !important;
ransition: background-color 250ms cubic-bezier(0, .301, .69, .997), box-shadow 200ms ease;
}


@media only screen and (max-width: 991px) {
   :root {
  --gap: 1rem;
  --spacing: 3em;
  }

header .page-header {
display: none;
}



section.treatments div.items div.item img {
  object-fit: cover;
}

.home section.treatments div.items div.item img {
  margin-bottom: -1rem;
}


.home section.treatments div.items div.item a span {
  margin-top: -20px;
  text-align: center;
  width: 100%;
}
.fw__container .container {
  padding: 6px;
}
.hero__text {
  width: 99%;
  text-align: center;
}


.intro__parent {
grid-template-columns: auto;
padding: 0rem;
grid-gap: var(--gap);
}

.intro__child img {
  filter: brightness(0.75);
}

header > div.wrapper::after {
  background-position: center;
}

.uitgelicht__blok {
  margin-top: 0;
  grid-template-columns: auto;
}

body.home header > div.wrapper {
  min-height: 0px;
}

.behandelingen__item {
  min-width: 75vw;
}

.behandelingen__item {
  position: relative;
  height: 50vh;
  display: flex;
  flex-direction: column;
  min-height: 300px;
}


.behandelingen__cta {
  color: #fff;
  bottom: 0;
}

.behandelingen__item {
  position: relative;
}
.behandelingen__grid {
overflow-x: scroll;
overflow-y: hidden;
}

.populaire__behandelingen__tekst {
  padding-bottom: var(--spacing);
}
.section__behandelingen {
  padding: var(--spacing) 0;
}

.btn.btn-primary {
  font-size: 14px;
}

.txt__behandelingen {
  display: none;
}

.populaire__behandelingen__tekst {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  gap: 2rem;
}

.populaire__behandelingen__tekst h1 {
  font-size: 23px;
}

header .type-fullsize .navbar-collapse {
  left: 16px;
}


html.navbar-open body.mm-fullsize nav.type-fullsize button.navbar-toggle {
  color: var(--primary);
}

header div.header div.wrapper img.logo {
max-width: 200px;
float: left;
}

.navbar-toggle.default {
  right: 60px;
}
header div.header div.cta {
  font-size: 17px;
  position: absolute;
  right: 20px;
  top: 0;
  left: auto;
}

.header__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  min-height: calc(100vh - 150px);
}
.image__in__header {
  object-fit: cover;
  height: 100%;
}

.sub {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 22px !important;
}
.header__image {
  height: 100%;
  flex-grow: 1;
}
.header__tekst h1 {
  margin: 0 0 50px 0;
}

.header__section {
  padding-top: 0;
}
.header__tekst {
  max-width: 800px;
  padding: 0px 15px var(--spacing);
margin: 0 auto;
}
.header__section .container {
  max-width: 100%;
  text-align: center;
  padding: 0;
}


}

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}​

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



html {font-size: 100%;} /*16px*/

body {
  font-weight: 400;
 font-size: 1rem;
  line-height: 1.75;
}

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: 3rem 0 1.38rem;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: 2.488rem;
}

h2 {font-size: 2.074rem;}

h3 {font-size: 1.728rem;}

h4 {font-size: 1.44rem;}

h5 {font-size: 1.2rem;}

small, .text_small {font-size: 0.833rem;}


@media (max-width:1400px) and (min-width:992px) {


/*.single-behandelingen .page-header {
  width: 50%;
}*/

.single-behandelingen figure {
  width: 50%;
}

.behandelingen__home__tekst {
  padding-right: 3rem;
}

section.treatments div.items div.item img {
  object-fit: cover;
  height: auto;
  width: auto;
}
.home section.treatments div.items div.item a span {
  margin-top: -30px;
  height: auto !important;
}

}​