@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: 'fontello';
  src: url('../_font/fontello.eot?32663548');
  src: url('../_font/fontello.eot?32663548#iefix') format('embedded-opentype'),
       url('../_font/fontello.woff2?32663548') format('woff2'),
       url('../_font/fontello.woff?32663548') format('woff'),
       url('../_font/fontello.ttf?32663548') format('truetype'),
       url('../_font/fontello.svg?32663548#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?32663548#fontello') format('svg');
  }
}
*/
 
 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  
  color:#81756a;
  border-radius: 10%;  
 
  display: inline-block;
  text-decoration: inherit;
  
  font-size: 29px; 
  
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1.25em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .5em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-info-circled:before { content: '\e800'; } /* '' */
.icon-chat:before { content: '\e801'; } /* '' */
.icon-home:before { content: '\e802'; color: #000; line-height: 0.8em; } /* '' */
.icon-phone:before { content: '\e803'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-rss:before { content: '\f09e'; } /* '' */
.icon-menu:before { content: '\f0c9'; color: #000; margin-left: 0; } /* '' */
.icon-pinterest-squared:before { content: '\f0d3'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-circle:before { content: '\f111'; } /* '' */
.icon-rss-squared:before { content: '\f143'; } /* '' */
.icon-instagram:before { content: '\f16d'; margin-left: 0; } /* '' */
.icon-tumblr:before { content: '\f173'; } /* '' */
.icon-tumblr-squared:before { content: '\f174'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */
.icon-pinterest:before { content: '\f231'; } /* '' */
.icon-twitter-squared:before { content: '\f304'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */
.icon-linkedin-squared:before { content: '\f30c'; } /* '' */

[class^="icon-"]:hover:before, [class*=" icon-"]:hover:before { color: #81756a; }
.icon-home:hover:before, .icon-home.active:before { color: #fff; }

.container { max-width: 1900px; }

A:hover { text-decoration: none; border: 0; }

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

.logoblok { position: absolute; left: 20px; top: 20px; z-index: 2; }
.logo { width: 200px; height: auto; }

header { background: rgb(129,117,106); background: linear-gradient(90deg, rgba(129,117,106,1) 0%, rgba(226,209,206,1) 66%, rgba(186,169,157,1) 100%); height: 400px; }
.navbar-expand-lg .navbar-nav .nav-link { padding-left: 0.75rem; padding-right: 0.75rem; }
.nav-item { background-image: none; padding-left: 0; }
.nav-link { font-size: 20px !important; font-weight: normal; color: #333; }
.nav-link:hover,
.nav-link.active { color: #fff; }

.fotoblok { margin-top: -200px; z-index: 0; }
.roodblok { background-color: #000; width: 300px; font-size: 35px; font-weight: normal; color: #fff; padding: 30px 20px; text-align: center; margin-top: -22%; }

.contact { width: 182px; height: 182px; position: absolute; right: 0; top: 0; background-image: url(../_img/afspraakbol.png); background-repeat: no-repeat; background-size: 100%; background-position: top right; }
.contact A { color: #000; font-size: 22px; font-weight: bold; padding-top: 79px; }

.btn.afspraakbalk { background-color: #fff; color: #000; font-size: 22px; font-weight: bold; border-radius: 0; border: 1px solid #fff; }
.btn:hover, .btn.focus, .btn:focus { border: 1px solid #000; box-shadow: none; }

H1 { font-size: 35px; font-weight: bold; color: #000; margin: 0; padding: 0 0 30px 0; }
H2 { font-size: 22px; font-weight: normal; color: #000; margin: 0; padding: 0; }
P { font-size: 18px; font-weight: normal; color: #666; margin: 0; padding: 0 0 30px 0; }
.infotekst UL { list-style: none; margin: -30px 0 0 1em; padding: 0 0 20px 0; }
.infotekst UL + H2 { margin: 0 0 0 1em; }
.infotekst UL LI::before { content: "•"; display: inline-block; width: 1em; margin-left: -1.5em; margin-right: 0.5em; text-align: right; direction: rtl; color: #000; }
.infotekst UL LI { font-size: 18px; font-weight: normal; color: #666; }
A { font-size: 18px; font-weight: normal; color: #000; margin: 0; padding: 0 0 30px 0; }

.table { color: #666; font-size: 18px; width: 75%; }
.table.smal { width: 60%; }
.table td, .table th { padding: .25rem 0; border-top: 0; border-bottom: 1px solid #e2d1ce; }

.verzorging { background: rgb(129,117,106); background: linear-gradient(90deg, rgba(129,117,106,0.7) 0%, rgba(226,209,206,0.7) 66%, rgba(186,169,157,0.7) 100%); }
.verzorging .gegevens { padding: 35px; }
.verzorging DIV.verzorgingsfoto::after { content: ''; display: block; padding-bottom: 60%; } 

.fotobol { margin-top: -40px; }
.fotobol.prijzen { margin-bottom: 30px; }
.bol { border-radius: 50%; z-index: 5; position: relative; }
.tekstbol { float: right; width: 40%; margin-right: -200px; margin-top: -50px; margin-bottom: 40px; margin-left: 40px; }
.tekstbol.links { float: left; margin-left: -200px; margin-top: -20px; margin-bottom: 40px; margin-right: 0; }

.bol.img-fluid { max-width: 80%; }

UL.prijs LI { background-image: none; }

.prijsinfo .bol.img-fluid { max-width: 75%; }

.gegevens { font-size: 18px; font-weight: normal; color: #000; padding: 0; margin: 0; padding: 35px 0 35px 70px; }
.gegevens H2 { color:#000; }
.gegevens P { color: #000; }
.gegevens P.tijden { padding: 0; }
.gegevens UL { margin: -30px 0 0 -38px; }
.gegevens UL LI { color: #000; }

.salon { background: rgb(129,117,106); background: linear-gradient(90deg, rgba(129,117,106,0.7) 0%, rgba(226,209,206,0.7) 66%, rgba(186,169,157,0.7) 100%); position: relative; z-index: 0; top: -140px; margin-bottom: -140px; }
.salonfoto { padding-right: 0; }
.salonfoto IMG { max-height: 400px; }

.footermenu A { color: #81756a; font-size: 20px; padding: 0; }
.footermenu A.active,
.footermenu A:hover { color: #000; }
A.telefoon { color: #81756a; }
A:hover.telefoon, A.active.telefoon { color: #81756a; }
.footerlogo A { padding: 0; }

@media (max-width: 1200px) { 
.fotoblok { margin: 0; }
header { height: auto; }
}

@media (max-width: 992px) { 
.nav-link { font-size: 24px !important; }
.roodblok { margin-top: 0; width: 115%; }
.mobielmargin { margin-right: 0; margin-right: 0; }
.mobielpadding { padding-right: 0; padding-left: 0; }
.salonfoto { padding-left: 0; }
.salonfoto IMG { max-height: unset; }
.bol { margin: 50px 0; }
.bol.tekstbol, .mooiwerk.tekstbol { margin: 0 -180px 50px 20px; }
.tekstbol { width: 50%; }
.gegevens { padding: 35px 0; }
.prijzen .bol.img-fluid { margin-top: 0; margin-bottom: 20px; }
.salon { top: 0; margin-bottom: 0; }
.table { width: 100%; }
.logoblok { left: 7px; top: 7px; }
 }
 
 
@media (max-width: 768px) { 
.fotobol { margin: 0; }
.bol { margin: 0 0 40px 0; }
.bol.tekstbol, .mooiwerk.tekstbol { margin: -20px 0 20px 10px; }
.roodblok { margin-top: -20px; font-size: 24px; padding: 15px; width: 100%; }
}

@media (max-width: 576px) {

  .table.smal { width: 100%; }
}