/*
Theme Name:     Customizr Child
Theme URI:      http://themesandco.com/customizr
Description:    A child theme for the Customizr WordPress theme. This child theme simply includes 2 files : style.css to add your custom css and functions.php where you can extend Customizr's core code. In order to keep your code as clean and flexible as possible, try to use Customizr's hooks API for your customizations. Do something awesome and have fun !
Author:         Nicolas Guillaume (nikeo)
Author URI:     http://themesandco.com
Template:       customizr
Version:        1.0.0
*/

/* Your awesome customizations start right here !
-------------------------------------------------------------- */

/* =========================================================
   HEADER
=========================================================== */

/* Header Styling */
html, body {
  overflow-x: hidden;
}
#main-wrapper {
    padding: 0 20px!important;
	box-sizing: border-box;
}
body {
    padding-bottom: 0;
    color: #315873;
    background: #fff;
    line-height: 25px;
    overflow-x: hidden;
}
.tc-header {
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #0083c5;

}
.tc-sidebar .widget li a {
    text-shadow: none;
    color: #102864;
}
.tc-sidebar .widget li a:hover {
    color: #e94d51;
}
.tc-sidebar .widget li:hover {
    background-color: #fff;
}
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
   padding-right: 20px; 
	padding-left: 20px;
	padding-bottom: 10px;
    float: left;

}
.tc-regular-menu .navbar .nav>li.current-menu-ancestor>a  {
    color: #0082c4;
}
.tc-regular-menu .navbar .nav>li.current-menu-ancestor>a:hover  {
    color: #ffffff;
}

/* =========================================================
   Header & Navigation Menu
=========================================================== */

header .tc-header {
 
  min-height: 45px;
  margin-left: 20px;
  background-color: #fff; 
  background-repeat: no-repeat;
  background-size: cover;
  
}
.sticky-enabled .tc-header {
  background-color: #fff !important; 
  border-bottom: 1px solid #0083c5;
	float: left;
}

.sticky-enabled .tc-header .navbar .navbar-inner {
  margin: 17px 5px 5px -40px;
}
.sticky-enabled .tc-header .navbar .nav>li>a {
    font-size: 14px;
}

.logo-left .navbar div>ul.nav>.menu-item:last-child>a,
.pull-menu-right .navbar div>ul.nav>.menu-item:last-child>a,
.tc-header .btn-toggle-nav.pull-right {
  padding-right: 20px;
  border-right: none;
}

.pull-menu-left .navbar div>ul.nav>.menu-item:first-child>a,
.tc-header .btn-toggle-nav.pull-left {
  padding-left: 20px;
}
.navbar.resp {
    width: 100%;
    padding-top: 1%;
}
.navbar .navbar-inner {
   margin: 10px 5px 5px -40px;
}

.navbar .nav>li.current-menu-item>a, .tc-regular-menu .navbar .nav>li.current-menu-ancestor>a {
    color: #fff;
}

.navbar .nav > li > a {
    text-shadow: none;
    font-size: 14px;
    color: #315873;
    border-left: 1px solid #8db5d0;
}

.navbar .nav > li.current-menu-ancestor > a,
.navbar .nav > li.current-menu-item > a,
.tc-regular-menu .navbar .nav > li.current-menu-ancestor > a {
    background-color: #8db5d0;
    color: #fff;
}

.navbar .nav > li > a:hover {
    background-color: #ea4d51;
    border-left: 1px solid #ea4d51;
    color: #fff;
}

.navbar .btn-toggle-nav .icon-bar {
    background-color: #0083c5;
    color: #fff;
}

.navbar .btn-toggle-nav.hover .icon-bar {
    background-color: #ea4d51;
}

.nav .dropdown-menu {
    box-shadow: none;
}

.dropdown-menu {
    border: 1px solid #fff;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    -webkit-background-clip: none;
    -moz-background-clip: none;
    background-clip: none;
}
.dropdown-menu>li>a {
    display: block;
    padding: 5px 20px;
}
.dropdown-menu>li.current-menu-ancestor>a, .dropdown-menu>li.current-menu-item>a {
    background-color:#8db5d0;
    color: #fff;
}
.dropdown-menu > li > a:hover {
    background-color: #ea4d51!important;
    color: #fff!important;
}
.nav .dropdown-menu a {
    color: #315873;
}

/* =========================================================
   menu dermatologie - behandelingen
=========================================================== */
.widget li {
    list-style: inherit;
	font-size: 16px;
}
.widget h3:before {
	display: none;
}
.widget.widget_archive li:before, .widget.widget_calendar li:before, .widget.widget_categories li:before, .widget.widget_links li:before, .widget.widget_meta li:before, .widget.widget_nav_menu li:before, .widget.widget_pages li:before, .widget.widget_recent_comments li:before, .widget.widget_recent_entries li:before, .widget.widget_rss li:before {
   content: none;
}

.menu-behandelingen-dermatologie-container{
padding-left: 10px;
border-left: 1px solid #eee;
position: relative;
}

.menu-behandelingen-dermatologie-container ul.menu,
.menu-behandelingen-dermatologie-container ul.sub-menu {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}
.menu-behandelingen-dermatologie-container .menu-item-3881 > a {
    background-color: #f4f4f4;
    color: #315873 !important;
	font-size: 14px;
	line-height: 1.6em;
    padding: 5px 10px;
    display: block;
	list-style: none !important;
}

.menu-behandelingen-dermatologie-container .menu-item-3881 > a:hover {
    background-color: #8eb5d0;
    color: #fff !important;
}

.menu-menu-dermatologie-container .menu-item-has-children > a::after {
    content: none;
}
.menu-behandelingen-dermatologie-container .navbar .nav > li > a {
    font-size: 14px;
	line-height: 1.6em;
    color: #315873;
    border-left: 1px solid #8db5d0;
    padding: 3px 20px;
    text-decoration: none;
}
.menu-behandelingen-dermatologie-container .current-menu-item > a {
    background-color: #8db5d0;
	color:#fff !important;
}

.menu-behandelingen-dermatologie-container .menu-item-has-children > .sub-menu {
    display: block;
    padding-left: 0;
    margin-top: 10px;
    background-color: #fff;
 
}

.menu-behandelingen-dermatologie-container .sub-menu li > a {
    display: block;
    padding: 3px 20px;
    font-size: 14px;
    color: #315873;
    text-decoration: none;
}

.menu-behandelingen-dermatologie-container .sub-menu li > a:hover {
    background-color: #ea4d51;
    color: #fff;
}

/* =========================================================
   FOOTER
=========================================================== */
footer#footer a,
footer#footer p {
  font-size: 14px;
  line-height: 25px;
  text-align: left;
  color: #315873;
}

footer#footer h3,
footer#footer h4,
footer#footer h5,
footer#footer h6 {
  text-align: left;
}

.footer-widgets {
  padding: 20px;
}

footer#footer .colophon a,
footer#footer .colophon p {
  color: #315873;
  font-size: 10px;
}

footer#footer {
  color: #fff !important;
  background: #fff;
  border-top: 0;
  width: 100vw !important;
  margin-top: 40px;
}
#footer_two,
  #footer_three {
   margin-top: 30px;
  }

#footer_four {
  width: 100vw;
  box-sizing: border-box;
  background-color: #8db5d0 !important;
  color: #fff !important;
  padding: 10px;
  margin-top: -25px;
  margin-left: calc(-50vw + 50%);
  margin-bottom: 20px;
}

.social-block a {
  color: #8db5d0;
}

/* =========================================================
   BUTTONS
=========================================================== */
.homebutton,
.btn.btn-large.btn-primary {
 cursor: pointer;
 box-sizing: border-box;
 border-radius: 4px;
 background: transparent;
 border: 2px solid #ffffff;
 color: #ffffff;
 font-size: 16px;
 padding: 0.5em;
 padding-inline: 1em;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
}

.homebutton:hover,
.btn.btn-large.btn-primary:hover {
 background: #ffffff;
 border-color: #ea4d51 !important;
 color: #ea4d51;
}

.carousel-caption .btn {
    margin-top: 25px;
}
.so-widget-sow-button-wire-2e8bfe6cec06 .ow-button-base .sowb-button  {
 cursor: pointer;
 box-sizing: border-box;
 border-radius: 4px;
 background: transparent;
 border: 2px solid #ffffff;
 color: #ffffff;
 font-size: 16px;
 padding: 0.5em !important;
 padding-inline: 1em !important;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7);
}

.slider .homebutton {
    display: inline-block;
    background-color: #8db5d0;
    color: white;
    font-size: 16px;
 	padding: 0.5em;
 	padding-inline: 1em;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.downloadbutton {
  cursor: pointer;
  box-sizing: border-box;
  border-radius: 0.25em;
  background: #8db5d0;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-size: 14px;
  padding: 0.5em;
  padding-inline: 1em;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.downloadbutton:hover {
  background: #ffffff;
  border-color: #ea4d51 !important;
  color: #ea4d51;
}

/* =========================================================
   CAROUSEL
=========================================================== */

img {
  background-color: transparent !important;
  image-rendering: auto;
  filter: none !important;
  opacity: 1 !important;
}

#customizr-slider {
   background-color: #000;
}

#customizr-slider.carousel .item {
   height: 400px;
   min-height: 400px;
   line-height: 400px;
   background-color: #000;
}

.carousel-caption {  
    background-color: rgba(0,0,0,0);
    max-width: 60%;
    padding: 5%;
    line-height: 14px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    margin-left: 30px;
    text-align: left;
}

.czr-item .carousel-caption h1,
  .so-widget-sow-hero h1,
  .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper h1{
    margin: 0;
	font-size: 50px;
    line-height: 60px;
    font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

  .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper h3 {
	margin-top: 20px;
    font-size: 22px !important;
    line-height: 27px !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 
  }

.sow-slider-base {
    margin-top: -20px;
}
[data-aos="custom-fade"] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 600ms !important;
  transition-timing-function: ease-in !important;
  transform: translateY(20px);
}

[data-aos="custom-fade"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   TEXT STYLES (H1, H2, etc.)
=========================================================== */

h1.entry-title {
	position: relative;
    z-index: 10;
    font-size: 30px;
    font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
    color: #315873;
}

h1 {
    color: #315873;
    font-size: 30px;
    line-height: 40px;
}

h2 {
    color: #315873;
    font-size: 20px;
    line-height: 30px;
}

h3 {
    font-size: 18px;
    color: #315873;
	line-height: 25px;
}

h4 {
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.5;
}

h5 {
  font-size: 16px;
  font-weight: bold;
  line-height: 25px;
}

h6 {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.7;
}

/* Paragraphs */
p {
  font-size: 16px;
  line-height: 25px;
  color: #315873;
  margin-bottom: 20px;
}
strong {
    font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
}
/* Links */
a {
  color: #0083c5;
  text-decoration: none!important;
}

a:hover {
  color: #ea4d51;
  text-decoration: none;
}
.close,
h1, h2, h3, h4, h5, h6 {
    text-shadow: none;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
}

dd, dt, li {
    line-height: 30px;
}

blockquote {
    border-left: 5px solid #ea4d51;
	color:#0083c5;
}

blockquote p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.65;
    color: #0083c5;
}
.fa,
.fas {
    color: #315873;
}
.toggle:before {
	content: "Menu";
	color: #fff;
}

/* =========================================================
   MISC
=========================================================== */
.page-id-13 h1.entry-title,
.page-id-13 .featurette-divider,
.page-id-15 h1.entry-title,
.page-id-15 .featurette-divider,
.page-id-43 h1.entry-title,
.page-id-43 .featurette-divider,
.page-id-324 h1.entry-title,
.page-id-324 .featurette-divider {
  display: none;
}

/* Zorg dat het menu-item altijd lichtgrijs is */
.menu-item-4151 > a {
    background-color: #f4f4f4 !important;
    color: #315873 !important;
}

/* Voorkom dat hover of active dit overschrijft */
.menu-item-4151 > a,
.menu-item-4151:hover > a,
.menu-item-4151:focus > a,
.menu-item-4151:active > a,
.menu-item-4151.current-menu-item > a,
.menu-item-4151.current-menu-ancestor > a,
.nav-collapse .dropdown-menu > li.menu-item-4151 > a:hover,
.nav-collapse .dropdown-menu > li.menu-item-4151 > a:focus,
.nav-collapse .dropdown-menu > li.menu-item-4151 > a:active {
    text-decoration: none !important;
    transition: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #f4f4f4 !important;
	color: #315873 !important; 
	margin: 0 !important;
    padding: 10px 15px !important; /* kies hier wat je normaal gebruikt */
    outline: none !important;
    transform: none !important;
    position: relative !important;
	
}

.verloopvlak {
    top: 0;
    left: 0;
    background: linear-gradient(to right, black, transparent);
	height: 100%;
    width: auto;
    }

.verloopvlak-wit {
    top: 0;
    left: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
	height: 100%;
    width: auto;
    }

.aandacht,
.aandacht-wit,
.aandacht-rood,
.aandacht-blauw  {
  width: 100% !important;
  max-width: 700px;
  height: auto;
  margin: 0 auto 20px auto;
  padding: 25px;
  border-left: 5px solid;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  font-size: 1em;
  line-height: 1.7;
  box-sizing: border-box;
}

.aandacht-wit {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
  border-color: #ea4d51;
}
.aandacht-rood {
  background: linear-gradient(135deg, #fff5f5, rgba(255, 234, 234, 0.5));
  border-color: #ea4d51;
}

.aandacht-blauw {
  background: #f8fafd;
  border-color: #0083c5;
}
.openingstijden-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 10px;
}

.tijden {
  border: 1px solid #ccc;
  padding: 30px 30px;
  flex: 1; 
  margin-right: 20px; 
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
}

table {
  width: 100%;
}
.button-blok {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 30px;
}

button {
  margin-top: 0;
}

.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in-section.visible {
  opacity: 1;
  transform: none;
}

/* =========================================================
   RESPONSIVE DESIGN
=========================================================== */
@media (max-width: 979px) {

	h1, h2, h3, h4, h5, h6 {
    text-shadow: none;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
}
   strong {
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
	}
	
.tc-header .brand .site-logo img, .tc-header .brand .site-title {
    max-width: 80%;
    height: auto;
}
   .navbar-wrapper.clearfix.span9 {
        width: 100%;
        margin: 0;
        display: none;
}

  .navbar .btn-toggle-nav .btn {
    display: none;
}
	
/* Verberg de sub-menu's standaard */
.menu-behandelingen-dermatologie-container .sub-menu {
  display: none;
  list-style: none;
  padding-left: 0;
}

/* Toon het sub-menu als de menu-item een 'open' klasse heeft */
.menu-behandelingen-dermatologie-container .menu-item-has-children.open .sub-menu {
  display: block;
}

/* Voeg wat styling toe voor de menu-items */
.menu-behandelingen-dermatologie-container .menu-item a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
}

.menu-behandelingen-dermatologie-container .menu-item a:hover {
  background: #ea4d51;
}
	
  /* Header Adjustment */
  .tc-header .brand {
    max-width: 90%;
  height: auto;
  }

  /* Footer Adjustment */
  #footer_one,
  #footer_two,
  #footer_three {
    border-bottom: 1px solid #fff;
    padding: 10px;
    text-align: left;
  }

  #footer_two,
  #footer_three {
    margin-top: -10px;
  }

  #main-wrapper {
    padding-left: 20px!important;
    padding-right: 20px!important;
  }

  .aandacht-wit,
  .sow-hero-buttons {
     max-width: 400px;
     width: 100%;
     margin: 0 auto;
     box-sizing: border-box;
  }

	/* Verkleinen van de openingstijden-wrapper op mobiel */
 
.openingstijden-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 20px 5px 0 0;
    margin: 0;
    box-sizing: border-box;
    transform: scale(0.95);
	order: 1;
  }
    .tijden {
    font-size: 14px;
	line-height: 17px !important;
    padding: 10px 10px 20px 10px!important;
}
    
  .button-blok {
    display: block;
    margin-top: -30px;
    width: 100%;
    text-align: center;
	order: 2;
  }

  /* De knop styling */
  .button-blok button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    background-color: #ea4d51;
    color: white;
    border: none;
    border-radius: 4px;
  }

/* Carousel Styling */
  .carousel-caption {
    max-width: 80%;
    margin-left:10px;
  }
  @media only screen and (max-width: 768px) {
  .czr-item .carousel-caption h1,
  .so-widget-sow-hero h1,
  .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper h1 {
    font-size: 35px !important;
    line-height: 38px !important;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 900 !important; 
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  }

  .sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container .sow-slider-image-wrapper h3 {
	margin-top: 20px;
    font-size: 18px !important;
    line-height: 22px !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
 
  }

}