@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;500;700&family=Roboto:wght@300;400;500&display=swap');


@font-face {
    font-family: 'charme';
    src: url('../fonts/charme.eot');
    src: url('../fonts/charme.eot') format('embedded-opentype'),
         url('../fonts/charme.woff2') format('woff2'),
         url('../fonts/charme.woff') format('woff'),
         url('../fonts/charme.ttf') format('truetype'),
         url('../fonts/charme.svg#charme') format('svg');
}

@font-face {
    font-family: 'Comfortaa', sans-serif;
    font-family: 'Roboto', sans-serif;
}

/* variables */
:root {
    --font: Roboto;
    --headerfont: Comfortaa;
    --white: #ffffff;
    --lightgrey: #E2E2E2;
    --mediumgrey: #999999;
    --lightbeige: #D6BDA7;
    --mediumbeige: #d3a085;
    --darkgrey: #868c7a;
    --darkblue: #343b59;
    --black: #111111;
    --quotecolor: #e7b8b8;
    --yellow: #FBBC04;
    --shadowcolor:rgba(0,0,0,0.6);
    --newgrey:#746d65;
}

html {
  min-height: 100%;
  background:var(--white)
}

body {
    font-family: var(--font), Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     height:100%;
}

body > .container {
  padding: 150px 0.5rem 0;
}

.gradient-bg {
    background: rgb(214,189,167);
    background: linear-gradient(50deg, rgba(214,189,167,1) 35%, rgba(211,160,133,1) 100%);
}

.inset-shadow {
    -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 30px 0px rgba(0,0,0,0.75);
}

.bg-white {background:var(--white)}
.bg-lightgrey {background:var(--lightgrey)}
.bg-lightbeige {background:var(--lightbeige)}
.bg-mediumbeige {background:var(--mediumbeige)}
.bg-darkgrey {background:var(--darkgrey)}
.bg-darkblue {background:var(--darkblue)}
.bg-black {background:var(--black)}
.bg-newgrey {background:var(--newgrey)}
.bg-superlightgrey {background:#f3f3f3}

.color-white {color:var(--white)}
.color-lightgrey {color:var(--lightgrey)}
.color-lightbeige {color:var(--lightbeige)}
.color-mediumbeige {color:var(--mediumbeige)}
.color-darkgrey {color:var(--darkgrey)}
.color-darkblue {color:var(--darkblue)}
.color-black {color:var(--black)}
.color-quote {color:var(--quotecolor)}
.color-yellow {color:var(--yellow)}
.color-newgrey {color:var(--newgrey)}

.hidden {display:none}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--headerfont), Arial, Helvetica, sans-serif;
    font-weight:500;
}

.fat {
    font-weight:800 !important;
}

.mt-minus-180 {
    margin-top:-180px
}

.quote-header {
    position:relative;
    padding-left:22px;
    color:var(--white) !important;
    margin-top:80px;
    text-shadow: 1.5px 1.5px var(--shadowcolor);
}

.quote-header:before {
    content:'';
    display:block;
    position:absolute;
    left:0;
    width:6px;
    height:100%;
    background:var(--mediumbeige)
}

.quote-sub-header {
    text-shadow: 0.2px 0.2px var(--shadowcolor);
    text-align:center;
}

.page-header {
    position:relative;
    padding-left:22px;
    color:var(--white) !important;
    margin-top:130px;
    text-shadow: 1.5px 1.5px var(--shadowcolor);
}

.logotxt {
    font-family: 'charme';
    font-size: 40px;
    font-weight:500;
    line-height:20px;
    position: relative;
    display:block
}

.logotxt-sub {
    position: relative;
    font-size:12px;
    font-weight:300;
    margin-top:-20px;
    display:block
}

.subheader {
    font-size: 18px;
    font-weight:400;
    text-shadow: 1px 1px var(--shadowcolor);
    color: var(--white);
}

.btn, .nav-link {
    border-radius:0 !important;
    padding:12px 20px;
}

.btn-primary, .nav-pills .nav-link {
    background:var(--mediumbeige);
    color:var(--white);
    border-color:var(--lightbeige);
}

.btn-primary:hover, .nav-pills .nav-link:hover {
    background:var(--lightbeige);
    color:var(--white);
    border-color:var(--mediumbeige);
}

.btn-primary:active,  .nav-pills .nav-link:active {
    background:var(--lightbeige) !important;
    color:var(--white) !important;
    border-color:var(--white) !important;
    position:relative;
}

.nav-pills .nav-link.active {
    font-weight:400;
}

.btn-outline-secondary {
    color:var(--white);
    border-color:var(--white);
}

.btn-outline-secondary:hover {
    background:transparent;
    color:var(--lightgrey);
    border-color:var(--lightgrey);
}

.angle-bg {
 background-image: linear-gradient(135deg, #EECE13 0%, #B210FF 100%);
  color: white;
  -webkit-clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0% 100%);
          clip-path: polygon(0 0%, 100% 0%, 100% 90%, 0% 100%);   
}

.form-group {
    padding:10px;
}

 .card-columns {
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    height:auto;
}

.card-columns .card {
    padding:2rem;
    display:flex;
    width:auto;
    margin-bottom:1rem;
    width:98%;
    margin:1%;
}

@media (min-width: 767.98px) {
    .card-columns {
        height:auto;
    }
    .card-columns .card {
        width:98%;
    }
}

@media (min-width: 991.98px) {
    .card-columns {
        height:2600px;
    }
    .card-columns .card {
        width:48%;
    }
    .navbar-nav .nav-link.active {
        border-bottom:var(--mediumbeige) 1.5px solid; 
    }
}

@media (min-width: 1199.98px) {
    .card-columns {
        height:2200px;
    }
    .card-columns .card {
        width:48%;
    }
}

@media (min-width: 1399.98px) {
    .card-columns {
        height:2000px;
    }
    .card-columns .card {
        width:48%;
    }
}


.card-columns .card .card-title  {
    margin-bottom:1rem;
}

.card-columns .card .card-text  {
    margin-bottom:1rem;
}

.list-group:not(.small-list-group) .list-group-item {
    padding:20px;
    min-height:250px;
    padding-right:30px
}

.list-group:not(.small-list-group) .list-group-item:hover, .table-hover tr:hover td, .card-columns .card:hover  {
    background: rgba(214,189,167,0.2)
}

.list-group:not(.small-list-group) .list-group-item div.col-12{
    min-height:200px;
}

.list-group:not(.small-list-group) .list-group-item div.col-4 {
    max-height:300px;
}

.hero {
    width:100%; 
    height:80vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    background:var(--lightgrey);
    position:relative;
    overflow: hidden
}

.hero .carousel {
    position: absolute;
    z-index:1
}

.hero .carousel-item {
    height:100%;
    -webkit-box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
    box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
}

.sub-hero { 
    width:100%; 
    height:80vh; 
    display: flex;
    justify-content: center;
    align-items: center;
    height:60vh; 
    position:relative;
    -webkit-box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
    -moz-box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
    box-shadow: inset 93px 10px 300px 91px rgba(0,0,0,0.6);
}

.sub-intro, .sub-intro-quote {
    padding:50px;
    padding-top:30px;
    margin-bottom:50px
}

.sub-intro h1, .sub-intro-quote h1 {
    text-align:center;
    margin-bottom:30px;
}

.sub-intro hr, .sub-intro-quote hr {
   color: var(--mediumgrey);
   clear: both;
   display: block;
   margin:0 auto;
}

.sub-intro hr:before, .sub-intro-quote hr:before {
    content:"";
    width:10px;
    height:10px;
    position: absolute;
    left: 50%;
    background: var(--newgrey);
    display: inline-block;
    margin-top:-5px;
    margin-left:-5px;
    transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
}

.sub-intro p {
    text-align:center;
    padding:50px;
    font-size:1.1rem;
}

.sub-intro-quote h2 {
    text-align:center;
    padding-top:50px;
    padding-bottom:0;
}

.sub-intro-quote p {
    text-align:center;
    padding:50px;
    padding-top:0;
    font-size:1.1rem;
}

.navbar-brand, .navbar-brand:hover {
    margin-top:20px;
    margin-bottom: 20px;
    color:#fff
}

.navbar-nav .nav-link {
    line-height:1rem;
    color:#fff
}

.navbar {
    background:transparent; 
    z-index:2;
    position:absolute; 
    width:100%;
}

.navbar .nav-link, .navbar .dropdown-item {
    font-family:  'Roboto', sans-serif;
    font-weight:400;
}

.navbar-collapse.collapse.show, .navbar-collapse.collapsing {
    background: #fff !important;
}

#navbarStephanies .nav-link {
    color:#fff
}

#navbarStephanies.show .nav-link {
    color:#000
}

.navbar-collapse.collapse.show .nav-link, .navbar-collapse.collapsing .nav-link {
    color:#000
}

#mainNav.fixed-top .nav-link {
    color:#000
}

.navbar.fixed-top {
    position:fixed;
    margin-top:0; 
    z-index:999;
}

.navbar.fixed-top .navbar-brand, .navbar.fixed-top .navbar-brand:hover {
    color:#000
}

.fixed-top.fadeOut {
    animation-name: fadeOutBg;
    -webkit-animation-name: fadeOutBg;
    animation-duration: 5s;
    -webkit-animation-duration: 5s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease
}

.fixed-top.slideUp {
    animation: slideUp .4s forwards;
    -webkit-animation: slideUp .4s forwards;
    visibility: visible;
    background:#ffffff;
}

.fixed-top.slideDown {
    animation-name: slideDown;
    -webkit-animation-name: slideDown;
    animation-duration: .3s;
    -webkit-animation-duration: .3s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
    position:fixed;
    visibility: visible;
    background:#ffffff;
}

@keyframes fadeOutBg {
    0% {
        background: #fff
    }
    100% {
        background: rgba(255, 255, 255, 0)
    }
}

@keyframes slideUp {
    0% {
        transform: translateY(0%);
        visibility:visible;
    }
    100% {
        transform: translateY(-100%);
        visibility:hidden;
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%)
    }
    100% {
        transform: translateY(0%);
    }
}

section.section {
  display: flex;
  justify-content: center;
  align-items: center;
  position:relative;
  overflow:hidden;
  background:#fff;
  padding:40px;
}

.home-section {
    padding-top:80px;
    padding-bottom:80px;
}

.page-section {
    padding-top:80px;
    padding-bottom:80px;
}

section.diensten {
    width:100%; 
    background:var(--white);
}

section.behandelingen {
    width:100%; 
    background:var(--white);
}

section.wellness {
    width:100%; 
    background:var(--white);
}

.footer {
    width: 100%;
    background:var(--white) !important;
    padding-top:100px;
    padding-bottom:40px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

main > .container {
  padding: 100px 15px 0;
}

.wellness-table tbody tr td {
    width:50%
}

.wellness-table tbody tr td:first-child {
    padding-left:0 !important
}

.services-table {
    margin-bottom:30px
}

.services-table tbody tr td {
    vertical-align: middle;
    padding:15px;
}

.services-table tbody tr th:first-child, .wellness-table tbody tr th:first-child {
   /* padding-left:0 !important */
}

.services-table tbody tr td:first-child {
    width:80%;
    /* padding-left:0 !important */
}

.services-table tbody tr td:last-child:not(.service-info) {
    text-align: center; 
    width:10%
}

.pattern-bg {
     --s: 50px; /* control the size */
    --_g: #0000 83%,var(--darkgrey) 85% 99%,#0000 101%;
    background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--newgrey);
    background-size: calc(2*var(--s)) calc(2*var(--s));
}

.pattern-bg-2 {
    --s: 25px; /* control the size */
    --_g: #0000 83%,var(--darkgrey) 85% 99%,#0000 101%;
    background:
    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
    var(--newgrey);
    background-size: calc(2*var(--s)) calc(2*var(--s));
}

.hamburger {
    display: inline-block;
    border:0
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

.navbar .lines,
.navbar .lines:before,
.navbar .lines:after {
    content:"";
    background-color: var(--white);
    height: 2px;
    width: 20px;
    display: block;
}

.navbar.fixed-top .lines,
.navbar.fixed-top .lines:before,
.navbar.fixed-top .lines:after {
    content:"";
    background-color: var(--darkgrey);
    height: 2px;
    width: 20px;
    display: block;
}

.navbar .lines {
    position: relative;
}
  
.navbar .lines::before {
    content: "";
    position: absolute;
    top: -6px;
}

.navbar .lines::after {
    content: "";
    position: absolute;
    top: 6px;
}

.lines,
.lines::before,
.lines::after {
    transition: transform .2s, top .6s ease .2s;
}

.hamburger:hover .lines {
    transform: scale(1.25);
  }