/*@font-face { font-family: TTNorms; src: url(https://www.dr-spiller.nl/fonts/tt_norms/TTNorms-Regular.otf); font-weight: 400;}*/
/*@font-face { font-family: TTNorms; src: url(https://www.dr-spiller.nl/fonts/tt_norms/TTNorms-Bold.otf); font-weight: 600;}*/
/*@font-face { font-family: TTNorms; src: url(https://www.dr-spiller.nl/fonts/tt_norms/TTNorms-Black.otf); font-weight: 800;}*/

/* General */
* { font-family: 'Quicksand', sans-serif; font-weight: 300; color: #393939; font-size: 16px; line-height: 1.5em; }
.b{ font-weight: 700;}
.center{ text-align: center; }
a { text-decoration: none; }
a:hover { text-decoration: underline;}
h1{ font-size: 45px !important; font-weight: 700; line-height: 60px; margin-bottom: 15px; }
h2{ font-size: 30px !important; font-weight: 700; line-height: 40px; margin-bottom: 15px; }
h3{ font-weight: 700;}
.button { font-size: 14px !important; padding: 8px 25px; display: inline-block; text-transform: uppercase; border: 1px solid #393939; font-weight: 700; border-radius: 20px;}
.button:hover { background: #2e2e2e; border: 1px solid #2e2e2e; text-decoration: none; color: #ffffff;}
input[type="text"], input[type="numeric"], textarea, select{ border: 1px solid #f5f3f0; padding: 5px 10px; }
input[type="submit"] { background-color: #393939; border: none; text-align: center; cursor: pointer; color: #ffffff; padding: 5px 10px; border-radius: 20px;}
input[type="checkbox"]{ -webkit-appearance: checkbox; border-radius: 0; width: auto !important; }
table th, table td{ vertical-align: top;}
strong { font-weight: 700; }

/* General elements */
div.content-width{ max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; padding: 0 50px; }
div.content-width-medium{ max-width: 1000px; margin-left: auto; margin-right: auto; position: relative; padding: 0 50px; }
div.content-width-small{ max-width: 800px; margin-left: auto; margin-right: auto; position: relative; padding: 0 50px; }
div.content-width.margin, div.content-width-medium.margin, div.content-width-small.margin { margin-top: 50px;}
div.icon-grid { max-width: 800px; }
div.icon-grid > div{ text-align: center; font-weight: 700; font-size: 12px !important; }
div.icon-grid > div img { height: 60px; margin-bottom: 5px; }
.tabs ul.tabs-header li.tabs-active{ background-color: #2e2e2e; color: #ffffff; }

div.content-width ul { margin-left: 18px; }

div#promo-container{ background-color: #f5f3f0; text-align: center; padding: 5px 20px; font-weight: 700; }
div#promo-container * { color: #ffffff; }

/* Top bar */
div#topbar{ display: block; height: 46px; background: #2e2e2e; line-height: 46px; text-align: center; color: #ffffff; position: relative;}
div#topbar *{ color: #ffffff; }
div#topbar a#topbar-findsalon { position: absolute; left: 0px; }
div#topbar a#topbar-findsalon img { float: left; margin: 10px 5px 0px 30px;}
div#topbar a:hover { text-decoration: none; }
@media only screen and (max-width: 800px) {
	div#topbar{ display: none; }
}

/*div#topbar *{ color: #ffffff; }*/
div#topbar > *{ line-height: 46px; height: 46px; }
/* Header */
div#header-container {  padding: 20px 0px; } /* border-bottom: 1px solid #f4f5f4; */
div#header-container div.content-width { display: flex; justify-content: space-between; align-items: flex-start;}
div#header-container div.content-width * { text-transform: lowercase !important; vertical-align: top;}
div#header-container div.content-width a.logo{ display: block; }
div#header-container div.content-width .header-right{ display: flex; flex-direction: column; align-items: flex-end; }
div#header-container div.content-width .top-menu{ }
div#header-container div.content-width .top-menu a{ font-size: 14px; }
div#header-container div.content-width .top-menu a:not(:first-child){ margin-left: 20px; }
div#header-container div.content-width .top-menu a.active, div#header-container .top-menu a:hover{ text-decoration: underline; }
div#header-container div.content-width .main-menu{ margin-top: 10px; }
div#header-container div.content-width .main-menu > *{ line-height: 40px; }
div#header-container div.content-width .main-menu > a{ font-weight: 700; margin-right: 20px; }
/*div#header-container div.content-width .main-menu a:not(:first-child){ margin-left: 20px; }*/
div#header-container div.content-width .main-menu > a.active, div#header-container .main-menu a:hover{ text-decoration: underline; }
div#header-container div.content-width .main-menu input { line-height: 1em; margin-top: 5px; margin-right: 15px;}
div#header-container div.content-width .icon-bar{ display: inline-block; }
div#header-container div.content-width .icon-bar.mobile{ display: none; }
div#header-container div.content-width .icon-bar * { line-height: 1em; }
div#header-container div.content-width .icon-bar > * { display: inline-block; text-decoration: none; }
div#header-container div.content-width .icon-bar > a { width: 34px; height: 40px; margin-left: 0px; background-position: center center; background-repeat: no-repeat; }
div#header-container div.content-width a.webshop-search{ background-image: url(../img/icons/search-icon.png); }
div#header-container div.content-width a.webshop-account{ background-image: url(../img/icons/account-icon.png); }
div#header-container div.content-width a.webshop-favorite{ background-image: url(../img/icons/favorite-icon.png); }
div#header-container div.content-width a.webshop-shopping-cart{ background-image: url(../img/icons/shopping-bag-icon.png); }
div#header-container div.content-width .counter{ font-weight: 700; width: 22px; height: 22px; text-align: center; margin-top: -5px; margin-right: -8px; background: #ff9090; font-size: 12px; text-decoration: none; border-radius: 11px; float: right; line-height: 22px;}
div#header-container .mobile-search{ width: 100%; background: #f5f3f0; margin-top: 15px; display: none; text-align: center; }
div#header-container .mobile-search input { line-height: 1em; margin: 0 5px; width: 100%; max-width: 300px;}
div#header-container .menu-mobile{ width: 100%; background: #f5f3f0; margin-top: 15px; display: none;}
div#header-container .menu-mobile a{ display: block; text-align: center; }
div#header-container .menu-mobile .seperator{ border-bottom: 1px solid #cfcbcb;}

/* Menu */
#mobile-menu-btn{ display: none; position: absolute; left: 20px; top: 20px; text-decoration: none; z-index: 100;}
/*div#menu { background: #ffffff; text-align: center; border--menu: 1px solid #f4f5f4; height: 40px; }*/
/*div#menu * { text-transform: uppercase; font-size: 12px !important; }*/
/*div#menu ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline-block; }*/
/*div#menu ul li { float: left; }*/
/*div#menu ul li a { display: block; color: #000000; text-align: center; padding: 0px 16px; line-height: 40px; text-decoration: none; }*/
/*div#menu ul li a:hover { background-color: #f5f3f0; color: #ffffff; }*/

/* Search */
div.searchresults{ display: none; position: absolute; background: #ffffff; width: 100%; z-index: 100; padding: 10px 20px; border-bottom: 1px solid #f4f5f4; box-shadow: 0 30px 30px -30px #2e2e2e; }

/* Footer */
div#footer-sm{ margin-top: 50px; border-top: 1px solid #f4f5f4; }
div#footer-sm:after{ content: ""; display: table; clear: both; }
div#footer-sm div.left{ float: left;}
div#footer-sm div.left > *{ white-space: nowrap; }
div#footer-sm div.right{ float: right;}
div#footer-sm div.right > *{ white-space: nowrap; }
div#footer-sm * { line-height: 60px; }
div#footer-sm .title{ font-weight: 700; font-size: 20px !important; }
div#footer-sm .sm-icons { margin-left: 20px; }
div#footer-sm i{ font-size: 20px !important; padding: 0px 7px; font-weight: 800; }
div#footer{ background: #f5f3f0; padding-top: 30px; }
div#footer .grid > div { margin-bottom: 30px;}
div#footer * { text-align: left; line-height: 26px; font-size: 14px;}
div#footer .normallineheight { line-height: 22px; }
div#footer .title { font-weight: 700; text-transform: uppercase; display: block; margin-bottom: 5px; }
div#footer a { display: block; }
div#footer input[type="text"] { width: 100%; border: none; background: #ffffff; color: #393939; text-align: center;}
div#footer input[type="submit"] { background-color: #2e2e2e; width: 100%; border: none; text-align: center; cursor: pointer; color: #ffffff; }

/* Home */
div#banner{ height: 600px; position: relative;  }
div#banner div.banner { display: none; }
div.banner{ background: no-repeat center center; background-size: cover; height: 100%; }
div.banner-text{ position: absolute; left: 50%; top: 120px; padding-left: 50px;}
div.banner-text.left{ left: auto; right: 50%; }
div.banner-text.bottom{ top: auto; bottom: 60px; }
div.banner-text * { color: #ffffff; }
div.banner-text .intro { font-size: 20px !important; font-weight: 700; margin-bottom: 5px;}
div.banner-text .headline { margin-bottom: 15px; }
div.banner-text .headline, div.banner-text .headline * { font-size: 50px !important; line-height: 55px;}
div.banner-text .body { font-size: 18px !important; margin-bottom: 15px; max-width: 400px; line-height: 24px; }
div.banner-text .button { background: #2e2e2e; border: 1px solid #2e2e2e; color: #ffffff; }

div.home-genes{ background-image: url('../img/banners/promise-banner.png'); background-size: cover; background-position: center center; height: 500px;}
div.home-genes div.text{ max-width: 400px; padding-top: 50px; }

div.home-science-left{ float: left; width: 50%; text-align: left; padding-right: 20px;}
div.home-science-right{ float: left; width: 50%; }
div.home-science-right img{ max-width: 100%; }

div.home-sensory{ background-image: url('../img/banners/sensory-banner.jpg'); background-size: cover; background-position: center center; height: 300px;}
div.home-sensory div.text{ max-width: 500px; padding-top: 50px; position: absolute; right: 0px;}
div.home-treatment-left{ float: left; width: 50%; padding-right: 20px; }
div.home-treatment-left img{ max-width: 100%;}
div.home-treatment-right{ float: left; width: 50%; }
div.home-team{ background-image: url('../img/banners/team-banner.jpg'); background-size: cover; background-position: center center; height: 300px; font-size: 14px;}
div.home-team div.text{ max-width: 550px; padding-top: 50px; position: absolute; right: 0px;}
/*div.home-genes div.text h2{ max-width: 400px; }*/

/* Webshop */
div.webshop div.productgroups-container h1, div.webshop div.products-container h1{ text-align: center; }
div.webshop div.productgroups-container .product-group:after, div.webshop div.products-container .product:after{ opacity: 0.1; content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0; transition: all 1s; -webkit-transition: all 1s; }
div.webshop div.productgroups-container.home div.image { border-radius: 20px; }
div.page-banner{ width: 100%; height: 400px; background-size: cover; background-position: center center !important;}
div.productgroups a.product-group div.product-hover-text, div.products a.product div.product-hover-text{ background: rgba(245, 243, 240, 0.8) !important; }
div.productgroups a.product-group div.product-hover-text, div.products a.product div.product-hover-text *, div.productgroups a.product-group div.product-hover-text *, div.products a.product div.product-hover-text *{ color: #393939 !important; }
div.product-category-banner{ max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; padding-top: 200px; }
div.product-category-banner * { color: #ffffff;}
div.product-category-banner h2 { font-size: 42px !important; text-align: center; text-transform: uppercase; }
div.product-category-banner div.description { max-width: 350px; font-size: 18px; font-weight: 500; }
div.product-category-banner div.description * { font-size: 18px; font-weight: 500; }
div.products-container div.description h1 { text-transform: uppercase; color: #c3c1b9; font-size: 16px !important; text-align: left; line-height: 1em; margin-bottom: 0; font-weight: 700; }
div.products-container div.description h1.hasimage { padding-top: 90px; }
div.products-container div.description .subtitle { font-weight: 700; font-size: 18px; margin-bottom: 10px;}

div.product-container div.tabs *{ font-size: 15px; }
div.product-container div.tabs-page{ padding: 20px;}

/*form.orderform input, form.orderform select, textarea{  }*/
form.orderform input, form.orderform select, textarea{ margin-bottom: 5px;width: 100%; max-width: 300px; }
form.orderform table tr td:nth-child(1){ padding-right: 30px;}
form.orderform table tr td:nth-child(2){ width: 100%; max-width: 300px; }

/* Blog */
div.blogs-container .blog h2{ font-size: 22px !important; line-height: 24px; }
div.blogs-container .blog a{ display: inline-block; background-color: #393939; border: none; text-align: center; cursor: pointer; color: #ffffff; padding: 0 15px; margin-top: 10px;  }
div.blogs-container .blog{ border-bottom: 1px solid #393939; padding-bottom: 20px; }
div.blog-container p{ margin-bottom: 1em;}

/* Specialists */
div.contact-specialist .left, div.contact-specialist .right { float: left; width: 50%; margin-bottom: 20px; }
div.contact-specialist .left img { max-width: 100%;}
div.contact-specialist input[type="text"], div.contact-specialist textarea{ width: 100%; max-width: 400px; margin-top: 5px;}
div.contact-specialist textarea{ height: 200px;}

/* Contact */
.contact-left, .contact-right{ float: left; text-align: left; width: calc(50% - 10px); }
.contact-left { margin-right:20px; }
.contact-right input[type="text"], .contact-right textarea{ width: 100%; max-width: 400px; margin-top: 5px;}
.contact-right textarea{ height: 200px;}

span.error{ color: #ff0000; font-weight: 700;}


/* Responsive */
@media only screen and (max-width: 560px) {
	div.banner-text, div.banner-text.left{ left: 0px; right: 0px; }
}
@media only screen and (max-width: 800px) {
	#mobile-menu-btn{ display: block; }
	div#header-container * { line-height: 40px; }
	div#header-container img#logo { width: 123px; }
	div#header-container div.top-menu { display: none; }
	div#header-container div.main-menu { display: none; }
	div#header-container div.content-width .icon-bar.mobile{ display: inline-block; }
	div#header-container .menu-mobile.visible{ display: block; }
	div#header-container .mobile-search.visible{ display: block; }
	/*div#menu{ position: absolute; top: 106px; z-index: 100; width: 100%; display: none; border-bottom: 2px solid #393939; }*/
	/*div#menu.visible{ display: block; }*/
	/*div#menu div.content-width { padding: 0px; }*/
	/*div#menu ul { width: 100%; }*/
	/*div#menu ul li { float: none; display: block; }*/
	/*div#menu ul li a { display: block; width: 100%;}*/

	/*div#menu { background: #ffffff; text-align: center; border-bottom: 1px solid #f4f5f4; }*/
	/*div#menu * { text-transform: uppercase; font-size: 12px !important; }*/
	/*div#menu ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; display: inline-block; }*/
	/*div#menu ul li { float: left; }*/
	/*div#menu ul li a { display: block; color: #000000; text-align: center; padding: 0px 16px; line-height: 40px; text-decoration: none; }*/
	/*div#menu ul li a:hover { background-color: #f5f3f0; color: #ffffff; }*/
}
@media only screen and (max-width: 900px) {
	/* Home */
	div.home-science-left{ width: 100%; padding-right: 0px; text-align: center; }
	div.home-science-right{ width: 100%; margin-top: 20px;}
	div.home-treatment-left{ width: 100%; padding-right: 0px; text-align: center; }
	div.home-treatment-left img{ max-width: 200px;}
	div.home-treatment-right{ width: 100%; margin-top: 20px;}

	/* Specialist */
	div.contact-specialist .left, div.contact-specialist .right { width: 100%; }
	div.contact-specialist .left img { max-width: 300px; max-height: 200px;}

	/* Contact */
	div.contact-left { width: 100%; margin-bottom: 30px;}
	div.contact-right { width: 100%; }
	/*div.contact-specialist .left img { max-width: 300px; max-height: 200px;}*/
	/*div.contact-specialist .right input[type="text"], div.contact-specialist .right textarea{ width: 100%; max-width: 400px; margin-top: 5px;}*/
	/*div.contact-specialist .right textarea{ height: 200px;}*/

	div.products-container div.description h1.hasimage { padding-top: 0px; }
	div.products-container div.description img.groupimage { display: none; }
}