  
  /* import fonts */
   
   /* Open Sans */
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-Light.ttf);
     font-weight: 300;
	 font-style:normal;
   }
   @font-face {
      font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-LightItalic.ttf);
     font-weight: 300;
	 font-style:italic;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-Regular.ttf);
     font-weight: 400;
	 font-style:normal;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-Italic.ttf);
     font-weight: 400;
	 font-style:italic;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-SemiBold.ttf);
     font-weight: 600;
	 font-style:normal;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf);
     font-weight: 600;
	 font-style:italic;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-BoldItalic.ttf);
     font-weight: 700;
	 font-style:italic;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-Bold.ttf);
     font-weight: 700;
	 font-style:normal;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf);
     font-weight: 800;
	 font-style:italic;
   }
   @font-face {
     font-family: Open Sans;
     src: url(fonts/Open_Sans/OpenSans-ExtraBold.ttf);
     font-weight: 800;
	 font-style:normal;
   }
   
   /* Open Sans */
    
   /* Playfair Display */
   
   @font-face {
     font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-Regular.ttf);
     font-weight: 400;
	 font-style:normal;
   }
   @font-face {
      font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-Italic.ttf);
     font-weight: 400;
	 font-style:italic;
   }	
    @font-face {
     font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-Bold.ttf);
     font-weight: 700;
	 font-style:normal;
   }
   @font-face {
      font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-BoldItalic.ttf);
     font-weight: 700;
	 font-style:italic;
   }
    @font-face {
     font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-Black.ttf);
     font-weight: 900;
	 font-style:normal;
   }
   @font-face {
      font-family: Playfair Display;
     src: url(fonts/Playfair_Display/PlayfairDisplay-BlackItalic.ttf);
     font-weight: 900;
	 font-style:italic;
   }
   /* Playfair Display */
	
  /* import fonts */

   a:hover {color: #189f84;}  
   .navbar-dark .navbar-toggler {
    color: #fff;
    border-color: transparent;
   }
   .navbar-toggler{font-size:2.5rem;}
   .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{word-break:break-all;}
  .weight-100{font-weight:100;}
  .weight-200{font-weight:200;}
  .weight-300{font-weight:300;}
  .weight-400{font-weight:400;}
  .weight-500{font-weight:500;}
  .weight-600{font-weight:600;}
  .weight-700{font-weight:700;}
  .weight-800{font-weight:800;}
  .weight-900{font-weight:900;}
  .spacing-7{letter-spacing:7px;}
  .font-25{font-size:25px;}
  .m-top-25{margin-top:25px;}
  .m-btm-0{margin-bottom:0px;}
  
   body{font-family:Open Sans;font-weight:400;}   
   .font-open-sans{font-family:Open Sans;}  
   .font-playfair{font-family:Playfair Display;}  
   
   .header-icons{width:16px;height:16px;}
   .width16{width:16px;}
   .weight900{font-weight:900;}
  
   section.first-section{padding:50px 50px;}
   section.second-section {padding: 50px 50px;background-color: #f8f8f8;}
   section.third-section{padding:50px 50px;}
   section.fourth-section {padding: 50px 50px 100px 50px; background-color: #f8f8f8;}
   .top-bg{background-color:rgba(32, 172, 148, .7);}
   .text-color{color:#EFEEED;}
   .color-white{color:#fff;}
   .color-black{color:#212529;}
   .color-theme{color:#189F84;}
   .mbtm2{margin-bottom:2px !important;}
   .new-container{max-width:720px;margin:0 auto;padding: 15px 0px;}
   .contact-btn{background-color:#EA5949;color:#fff;cursor:pointer;padding:10px 20px;border-radius:0px;border-color: transparent;}
   .contact-btn:hover,.contact-btn:focus{background-color:#EA5949;color:#fff;border-color: transparent;}
   .main-container {/*max-width: 1200px;*/ margin: 0 auto;}
   .bg-banner1{background: url(../../inc/img/header_bg.png)no-repeat;background-size: cover;}
   .carousel-control-prev-icon{background-image: url(../../inc/img/left-arrow.png);}
   .carousel-control-next-icon{background-image: url(../../inc/img/right-arrow.png);}
   .carousel-control-next-icon, .carousel-control-prev-icon{width:40px;height:40px;}
   .carousel-inner{padding:0px 40px;}
   .carousel-control-next, .carousel-control-prev{width:40px; top: 50%; bottom: 50%;}
   .modal-content {border-radius: 0px; border: 0px;}
   .modal-header {border-bottom: none;}
   .navbar-dark .navbar-nav .nav-link {color: #EFEEED;}
   .middle-div { padding: 7rem 3rem; text-align: center;}
   .grid-box img{width:100%;max-height: 200px; height: 200px; object-fit: cover;border-radius:90px;}
  i.fa.fa-phone {margin-right: 5px;}
   .grid-box a {color: #262B2A;}
   .grid-box a:hover{color:#a1a1a1;text-decoration: none;}
   .image-content{z-index:1;}
   .top-cover-img{width:100%;max-height:400px;object-fit:cover;min-height: 280px;z-index:-2;position:relative;}
   .third-section .image-content .third-content {
      max-width: 520px;
	  margin: 3rem auto auto auto;
	  
      /*background-color: #f8f8f8;
      padding: 25px;
      margin: -90px auto auto auto;
      z-index: 3;
      position: static;
      box-shadow: 1px 3px 9px rgba(208, 208, 208, 0.6); */
    }
	.width-full{width:100%;}
	.doctors-grid {margin-top: 40px;}
	#lightgallery .item {
      margin-bottom: 20px;
      padding-left: 10px;
      padding-right: 10px; 
    }
	#lightgallery .item img.width-full.img-responsive {min-height: 220px; object-fit: cover;}	
	.contact-form .form-control {
      background-color: #eaeaea;
      border-radius: 0px;
      border-color: transparent;
	  padding: 12px 15px;
    }
	.contact-form button.btn.btn-primary {
     background-color: #189F84;
     border-radius: 0px;
     border-color: transparent;
     cursor: pointer; 
	 width:140px;
    }
	.contact-text-color{color:#121A18; font-size: 14px;}
	.subtext-teamphoto{color:#121A18; font-size: 10px; margin: 10 0 0 0;}
	.contact-field-color{color:#495057;}
	form.contact-form {padding-top: 20px;margin-bottom:15px;}
	.addr-gap {margin-top: 20px;}
	.navbar p.h2.brand-title {display: none;}
	.menu-wrapper.fixed-top p.h2.brand-title {
		display: block;
        font-family: Playfair Display;
        color: #ededed;
        font-weight: 100;
        font-size: 22px;
	}
	.menu-wrapper.fixed-top { background-color: rgba(32, 172, 148, .9); padding: 5px;}
	.menu-wrapper.fixed-top .navbar { max-width: 900px; margin: 0 auto;}	
	p.contact-text-color.addr-line {margin-bottom: 5px;}
	button.close {font-size: 3rem; font-weight: 100;cursor:pointer;position: absolute; right: 20px; top: 5px; z-index: 999999;}
	.modal-one .carousel-inner p.h2 {margin-bottom: 20px;}
	.modal-header{padding-bottom:0;}
	.modal-one .modal-header {padding: 0;}	
	.carousel-item .col-xs-12.col-md-6 p {color: #262B2A; font-size: 15px;}
	.mbtm-30{margin-bottom:30px;}
	.mbtm-20{margin-bottom:20px;}
	.m-top-m15{margin-top:-15px;}
	.first-section .new-container {padding-top: 25px;}
	.navbar-toggler img {width: 35px; height: 35px;vertical-align:top;}
	.second-section p.h4{color:#262B2A;}	
	.mobile-carousel{display:none;}
	.div-footer p.text-color{margin-bottom:10px; font-size:14px;}
	.third-content p.sub-text {line-height: 1.8;}
	#mob-carousel .carousel-control-next, #mob-carousel .carousel-control-prev{width:60px;}
	
	/* carousel fade */
	
	.carousel-fade .carousel-inner .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-control {
  z-index: 2;
}
/* carousel fade */	
	
	/* overlay menu */
	/* The Overlay (background) */
		.overlay {
			/* Height & width depends on how you want to reveal the overlay (see JS below) */    
			height: 100%;
		    width: 0;
			position: fixed; 	
			z-index: 1031; /* Sit on top */
			left: 0;
			top: 0;
			background-color: rgb(0,0,0); /* Black fallback color */
			background-color: rgba(32, 172, 148, .9); /* Black w/opacity */
			overflow-x: hidden; /* Disable horizontal scroll */
			transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
		}

		/* Position the content inside the overlay */
		.overlay-content {
			position: relative;
			top: 25%; /* 25% from the top */
			width: 100%; /* 100% width */
			text-align: center; /* Centered text/links */
			margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
		}

		/* The navigation links inside the overlay */
		.overlay a {
			padding: 8px;
			text-decoration: none;
			font-size: 36px;
			color: #fff;
			display: block; /* Display block instead of inline */
			transition: 0.3s; /* Transition effects on hover (color) */
		}

		/* When you mouse over the navigation links, change their color */
		.overlay a:hover, .overlay a:focus {
			color: #333333;
		}

		/* Position the close button (top right corner) */
		.overlay .closebtn {
			position: absolute;
            top: 0px;
            right: 45px;
            font-size: 60px;
            left: 10px;
		}
		
		.overlay .contact-btn{position: absolute;right: 20px;top:25px;}

		/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
		@media screen and (max-height: 450px) {
			.overlay a {font-size: 20px}
			.overlay .closebtn {
				font-size: 40px;
				top: 15px;
				left: 35px;
			}
		}
	
	/* overlay menu */
	
	.contact-headline { color: #121A18; font-size: 20px;}
	 .swiper-container {
        width: 100%;
		max-width:430px;
        padding-top: 5px;
        padding-bottom: 90px;
    }
	.swiper-pagination-bullet-active {background: #27a690;}
    .swiper-slide { background-position: center; background-size: cover; width: 130px; height: 120px;}
	.swiper-slide img {margin-bottom: 10px;width:100%;height:100%;border-radius:50%;opacity:0.5;}
    .swiper-slide p.text-center{opacity:0.5;}	
	.swiper-slide.swiper-slide-active img{opacity:1.0;}
	.swiper-slide.swiper-slide-active p.text-center{opacity:1.0;}
	.swiper-slide a{color: #262B2A;}
	.swiper-slide a:hover, .swiper-slide a:focus{color: #a1a1a1; text-decoration: none;}
	.slash-container{display:none;}
	.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right{background-image: none;}
	.grid-box:hover img { box-shadow: 1px 3px 10px rgba(0,0,0,0.6);}
	
	.grid-box p.text-center{padding-top: 10px;}
	#lightgallery .item img:hover, #lightgallery .item img:focus {box-shadow: 1px 3px 10px rgba(0,0,0,0.6); cursor: pointer;}
    .mail-status p.error {background-color: red;padding: 10px;margin-top: 15px;color: #fff;}
	.mail-status p i.fa {margin-right: 5px;}
	.mail-status p.success {background-color: #2e9639;padding: 10px;margin-top: 15px;color: #fff;}
    .impressum{background-color: #189F84;border-radius: 0px;border-color: transparent;cursor: pointer;width: 140px;margin-top:0.7rem;} 
    .impressum:hover,.impressum:focus{background-color:#189F84;}   
    #impressum-modal .modal-header {padding: 0;}
	#impressum-modal .modal-content{background-color: #ededed;}
    .impressum-info .h2 {margin-bottom: 20px;font-size:1.6rem;}
	.impressum-info {padding: 0 2rem;}
	.mbtm5{margin-bottom:5px !important;}
	
	.grid-container {
		display: block;
				grid-template-columns: auto auto;
        padding: 0px;grid-gap:20px 20px; margin:10px auto;
    }  
	.grid-item {display: inline-block;width: 49%;vertical-align: top;}
    
	
	.grid-item1 {padding:25px 25px 20px 0px;}
	.grid-item2{padding:25px 0px 20px 25px;}
	
	.grid-item-content{
	  padding:30px;border-radius:20px;min-height:340px;
	  	-webkit-box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.08); -ms-box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.08); box-shadow: 0px 2px 12px 4px rgba(0, 0, 0, 0.08);
    -webkit-transition: box-shadow 0.2s ease-in; -moz-transition: box-shadow 0.2s ease-in;
    -o-transition: box-shadow 0.2s ease-in; transition: box-shadow 0.2s ease-in;
	}
	.grid-item-img{text-align:center;}
	.grid-item-img img {width: 170px;height: 230px;object-fit: cover;}

	/*  media queries */
  
    @media only screen and (min-width:768px){
			  
      .main-menu li.nav-item{margin-left:45px;}
	  .main-menu li.nav-item:first-child{margin-left:0px;}
      .right-div { position: absolute;right: 0px; bottom:0px; padding-right: 15px;} 	
      .grid-box img{max-height:150px;height:115px;object-fit: cover;}
      .grid-box{flex: 0 0 calc(100%/5);max-width: calc(100%/5);padding-left: 12px; padding-right: 12px;}	  
	}
	
	
	@media only screen and (max-width:767px){		
		 .grid-box{flex:0 0 calc(100%/2);max-width:calc(100%/2);padding-left:10px;padding-right:10px;}	
		 section.first-section, section.second-section, section.third-section, section.fourth-section{padding:15px 15px;}
		 .h1, h1 {font-size: 2rem;}
		 .middle-div {padding: 4rem 0rem;}
		 .bg-banner1{background-position: center;}
	}
	@media only screen and (max-width: 499px){
        .grid-box {
          flex: 0 0 100%;
          max-width:100%;
          padding-left: 10px;
          padding-right: 10px;
		  height:100%;
		  min-height:250px;
        }
		.grid-box img {
          min-height: inherit;
          height: inherit;
          max-height: 250px;
       }
	   .bg-banner1{background-position: center;}
	}
	@media only screen and (min-width:576px) and (max-width:767px){
	  .third-section .image-content .third-content {
         max-width: 450px;
		 padding: 10px;
      }		
	  .bg-banner1{background-position: center;}
	}
	@media only screen and (min-width:480px) and (max-width:575px){
	  .third-section .image-content .third-content {
         max-width: 380px;        
		 margin:3rem auto auto auto;
		  padding: 10px;
      }		
	  .bg-banner1{background-position: center;}
	}
	@media only screen and (min-width:420px) and (max-width:479px){
	  .third-section .image-content .third-content {
         max-width: 350px;        
		 margin:3rem auto auto auto;
		 padding: 10px;
      }		
	  .bg-banner1{background-position: center;}
	}
	@media only screen and (min-width:350px) and (max-width:419px){
	  .third-section .image-content .third-content {
        max-width: 280px;
        margin: 3rem auto auto auto;
		padding: 10px;
      }
	  .bg-banner1{background-position: center;}
	}
	
	@media only screen and (max-width:349px){
	  .third-section .image-content .third-content {
        max-width: 250px;
        margin: 3rem auto auto auto;
		padding: 10px;
      }		
	  .bg-banner1{background-position: center;}
	}
	
	@media (min-width: 576px){
      .modal-dialog {
        max-width: 750px;
       }
    }
	@media (min-width: 1200px){
        .first-section  .container {max-width: 100%;}
	}
	
	@media only screen and (min-width:768px){
		#lightgallery .item img.width-full.img-responsive{height:230px;}
	}
	
	@media only screen and (min-width:768px) and (max-width:991px){
		.grid-item-content{min-height:354px;padding:25px;}		
	}
	
	
	@media only screen and (min-width:791px) and (max-width:991px){
		.div-footer p.text-color{font-size:13px;}
	}
	@media only screen and (min-width:768px) and (max-width:790px){
		.div-footer p.text-color{font-size:12px;}
	}
	@media only screen and (min-width:768px) and (max-width:807px){
		.contact-text-color{font-size:13px;}
	}
	
	
	@media only screen and (max-width:767px){
		.grid-container{display:block;}
		.grid-item-content{min-height:auto;padding:20px;}
		.grid-item{max-width:100%;width:auto;padding:10px;}
		.second-section .leren-container{overflow-x:scroll;}
		.second-section .row{display:table;}
		.second-section .row .grid-box{display: table-cell; flex: 0 0 250px; max-width: 250px;}	
		.grid-box img {width: 250px; padding: 5px; height: 250px;}
		.carousel-inner {padding: 0px 15px;}
		.mobile-carousel{display:block;}
		.desktop-grid{display:none;}
		.menu-wrapper .navbar p.h2.brand-title{display: none;}
		.modal-one .modal-body { height: 400px; overflow-y: auto;}		
		.modal-one .modal-dialog {overflow-y: initial !important;}
		
		#impressum-modal .modal-body{height:400px;overflow-y:auto;}
		#impressum-modal .modal-dialog{overflow-y:initial !important;}
		
		.carousel-control-next, .carousel-control-prev {width: 15px;}
		.carousel-control-next-icon, .carousel-control-prev-icon {width: 15px; height: 15px;}
		.third-content p.h2 {font-size: 1.8rem;}
		.modal-one .carousel-inner p.h2 {padding-right: 17px; font-size: 1.2rem;word-break:break-word;}
		.mob-btm-20{margin-bottom:20px;}
		.slash-container{display:block;}
		.leren-container{display:none;}
	}	