/* reset */
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*GLOBAL*/

html{}
body{ background-color:#eeeeee; font-family:Arial, Helvetica, sans-serif;
	}

/* headings*/
h1,h2,h3,h4,h5,h6 {font-weight:bold;color:#3C5E11}

p { -webkit-hyphens: auto; hyphens: auto;}

/* links*/
a {text-decoration: none; }

/*container*/

#wrapper {
	width:100%; margin:0px auto; background-color:#E9FFCA ;
}

#top {background-color:#3C5E11;	width:100%; padding:15px 0px; overflow:hidden; border-bottom:2px #E9FFCA solid;

}


#logo{margin: 10px 0 0 10px; float:left;

}

#logo img {
	}

#text_index {
	float:right; margin:0px 20px ;
}

@media screen and (max-width: 60em) {
    #text_index {
        
        float:left; margin:20px 20px ;
    }
}

#text_index  h1 {
	color:#E9FFCA; font-size:36px; font-weight:bold;
}

#text_index  h3 {
	color:#E9FFCA; font-size:20px; font-weight:bold;
}

#text_index a:link    {color:#E9FFCA; font-size:36px}
#text_index a:visited {color:#E9FFCA}
#text_index a:active  {color:#E9FFCA}
#text_index a:hover   {color:#E9FFCA; background-color:#3C5E11; }
#text_index a:focus   {color:#E9FFCA} 


#logo_sub{margin: 0 0 0 10px; float:left;

}


#logo_sub img {margin: 20px 0 0 0px;
	}


#text {
	float:right; margin:30px 20px ;
}

@media screen and (max-width: 60em) {
    #text{
        
        float:left;
    }
}

#text h1 {
	color:#E9FFCA; font-size:36px; font-weight:bold;
}



#text h3 {
	color:#E9FFCA; font-size:20px; font-weight:bold;
}

#topnav {
	background-color:#76BD23; clear:both;
}
#topnav ul {
	width:100%;float:left;margin:0px; background-color:#76BD23; border-bottom:5px #E9FFCA solid;
}
#topnav ul li {
	display:inline;
}

#topnav ul li a {
	float:left; padding: 10px 20px;
}

#topnav a:link    {color:#3C5E11; font-size:24px}
#topnav a:visited {color:#3C5E11 }
#topnav a:active  {color:#3C5E11 }
#topnav a:hover   {color:#3C5E11 ; background-color:#E9FFCA; }
#topnav a:focus   {color:#3C5E11 }

#laufleiste {
	clear: both
}

#banner {width: 100%;text-align:center;

}

#banner img {width: 50%;height:auto;

}
#banner_text {
	background-color:#3C5E11; width: 100%;height:auto; padding: 10px 0px 30px 0px; 
    margin: 0px 0px 0px 0px;

}


#banner_text img {  float:left;width: 120px;
    height: 120px;
 	margin: 10px 0px 0px 60px;}

#banner_text p {
			text-align:center;	color:#E9FFCA; font-size:30px; font-weight:bold; vertical-align:middle; padding:30px 0px 0px 0px;
}

#subbanner {
	width:100%; background-color:#76BD23; padding:15px 0px 15px 0px; overflow:hidden;
}

#subbanner h2 {
	color:#3C5E11 ; font-size:20px; font-weight:bold; text-align:center;
}



#content {width:100%; margin:20px 30px 20px 30px;

}

#content h2 {padding:10px 10px;

}

#content p {
	color:#3C5E11 ; font-size:16px; font-weight:normal; text-align:justify; padding:20px 30px 20px 0px; line-height:150%;margin:0px 30px 10px 10px;
}

#content ul  {
	color:#3C5E11 ; font-size:16px; font-weight:normal; text-align:justify; padding:10px 30px; line-height:150%;margin:0px 30px 10px 10px;
	list-style:disc;
}

#content ul li a:link    {color:#3C5E11 }
#content ul li a:visited {color:#3C5E11 }
#content ul li a:active  {color:#3C5E11 }
#content ul li a:hover   {color:#E9FFCA; background-color:#76BD23; }
#content ul li a:focus   {color:#3C5E11 }

#content p  a:link    {color:#3C5E11 }
#content p  a:visited {color:#3C5E11 }
#content p  a:active  {color:#3C5E11 }
#content p  a:hover   {color:#E9FFCA; background-color:#76BD23; }
#content p  a:focus   {color:#3C5E11 }


#subbanner2 {
	width:100%; background-color:#76BD23; padding:5px 0px 5px 0px; overflow:hidden;
}

#subbanner2 h2 {
	color:#3C5E11 ; font-size:20px; font-weight:bold; text-align:center;
}


#about img {
	float:left; margin:10px 50px 20px 0px
}

#about p { padding:10px 50px 10px 10px; text-align:justify;margin:40px 20px;
}

#about ul {
	color:#3C5E11 ; font-size:16px; font-weight:normal; text-align:justify; padding:10px 30px;margin:10px 30px 10px 10px;
	list-style:disc;

}

#kontakt {padding: 10px 20px;}

#banner_kon {width: 100%;text-align:center;

}

#banner_kon img {width: 40%;height:auto;}

#kontakt h2{color:#3C5E11 ; font-size:20px; font-weight:bold; padding: 10px 20px; text-align:center;
}


#contact_content {padding :10px 10px 0px 10px; text-align: center;

}

#contact_content p {
	color:#3C5E11 ; font-size:18px; font-weight:normal; text-align:center; padding:20px 20px 0px 0px; line-height:150%;margin:0px 10px 10px 350px;
}

#contact_content ul  {
	color:#3C5E11 ; font-size:18px; font-weight:normal; text-align:center; padding:0px 10px 0px 10px; line-height:150%;
	list-style:none;
}

#contact_content ul li a:link    {color:#3C5E11 }
#contact_content ul li a:visited {color:#3C5E11 }
#contact_content ul li a:active  {color:#3C5E11 }
#contact_content ul li a:hover   {color:#E9FFCA; background-color:#76BD23; }
#contact_content ul li a:focus   {color:#3C5E11 }

#contact_content p  a:link    {color:#3C5E11 }
#contact_content p  a:visited {color:#3C5E11 }
#contact_content p  a:active  {color:#3C5E11 }
#contact_content p  a:hover   {color:#E9FFCA; background-color:#76BD23; }
#contact_content p  a:focus   {color:#3C5E11 }

#subbanner2 {
	width:100%; background-color:#76BD23; padding:15px 0px 15px 0px; overflow:hidden; margin-top:20px;
}
#subbanner2 h2 {
	color:#3C5E11 ; font-size:20px; font-weight:bold; text-align:center;
}



/*
#rightside   {margin-top: 150px;}

#rightside  p {padding :10px 20px 10px 30px;margin-top: 10px;
}

#rightside2   {margin-top: 150px;}

#rightside2  p {padding :10px 20px 10px 30px;margin-top: 10px;
}
*/




#map {
	width:97%;padding :40px 30px 20px 30px;margin:0 auto;

}

#map h2 {color:#3C5E11 ; font-size:20px; font-weight:bold; text-align:left; padding: 10px; }

#map p { 	color:#3C5E11 ; font-size:18px; font-weight:normal; text-align:justify; padding:0px 0px; line-height:150%;margin:0px 30px 10px 10px;
}

#map small {font-size:14px; font-weight:bold; text-align:justify; padding:0px 0px; line-height:150%;margin:0px 30px 10px 10px;
}

#map small  a:link    {color:#3C5E11 }
#map small  a:visited {color:#3C5E11 }
#map small  a:active  {color:#3C5E11 }
#map small  a:hover   {color:#E9FFCA; background-color:#76BD23; }
#map small  a:focus   {color:#3C5E11 }


@media screen and (max-width: 60em) {
    #map { width: 80%; margin: 0 auto}
    
    #banner_kon img {width: 80%;height:auto;}


}



.contactTextarea{
/* Breite und Höhe werden angepasst */
width:300px;
height:80px;
margin:0px 30px 10px 20px;
border:1px solid #3C5E11;
color:#3C5E11;
}
.contactField{
/* Breite und Höhe werden angepasst */
width:300px;
height:30px;
margin:0px 30px 10px 20px;
border:1px solid #3C5E11;
color:#3C5E11;
}

.contactSubject {
	color:#3C5E11; font-size:14px; font-weight:normal; text-align:left; padding:0px 0px 0px 320px; line-height:150%;/*margin-left:480px;*/
}

.captcha_code {
	color:#3C5E11;
}

input {margin-left:500px;
}




#footer {
	clear:both; background-color:#3C5E11; padding:10px 0;
}

#footer ul li {
	color:#E9FFCA; font-size:16px; font-weight:normal; text-align:center; padding:10px 10px; line-height:120%;}

#footer ul li a:link    {color:#E9FFCA}
#footer ul li a:visited {color:#E9FFCA}
#footer ul li a:active  {color:#E9FFCA}
#footer ul li a:hover   {color:#E9FFCA; background-color:#76BD23; }
#footer ul li a:focus   {color:#E9FFCA}

#footer ul li a img {
	width:30px; height:auto;
}






/* slider banner style */



/* Slideshow container */



#slideshow-container {
text-align:center;
  max-width:100%;
  position: relative;
  margin: auto;
  clear:both;

}

/* Hide the images by default */
.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0px 2px 10px 2px;
  background-color: #76BD23;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #3C5E11 ;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2.5s;
  animation-name: fade;
  animation-duration:2s;
}

@-webkit-keyframes fade {
  from {opacity: .1}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .1}
  to {opacity: 1}
}




/* IMPRESSUM STYLE */

#impressum {text-align:justify; padding:30px 30px;

}
#impressum h1 {color:#3C5E11 ; font-size:36px; font-weight:bold;margin: 20px 0 30px 10px;

}

#impressum h2{color:#3C5E11 ; font-size:20px; font-weight:bold;margin: 0 0 20px 10px;

}

#impressum h3{color:#3C5E11 ; font-size:16px; font-weight:bold;margin: 0 0 20px 10px;

}


#impressum ul {color:#3C5E11 ; font-size:16px; font-weight:bold;margin: 0 0 30px 10px; line-height:130%;

}

#impressum p {color:#3C5E11 ; font-size:16px; font-weight:normal;margin: 0 0 30px 10px;

}



/* Hebammenpraxis */


#hebprax{text-align:center; padding:20px 30px;

}
#hebprax h1 {color:#3C5E11 ; font-size:40px; font-weight:bold;margin: 20px 0 10px 10px;

}

/*#hebprax{
	background-image:url("images/schwa1.png");
	background-color: white;
}


#content_hp{
	background-image:url("images/schwa1.png");
	background-repeat:no-repeat;
	background-position:left center;
	background-position:right center;
	
}*/

#content_hp{
	background:
        url('../images/schwa1.png') no-repeat left center,
		url('../images/schwa1.png') no-repeat right center;
    

}


#content_hp {text-align:center;
	
}

#content_hp h2{color:#3C5E11 ; font-size:24px; font-weight:bold;margin: 20px 10px 30px 10px;

}

#content_hp p {color:#3C5E11; font-size:18px; font-weight:normal; margin: 20px 300px 30px 300px; line-height:130%; text-align:justify;
	
}

#content_about {text-align:center;
}

#content_about p {color:#3C5E11; font-size:18px; font-weight:normal; margin: 20px 400px 30px 400px; line-height:130%; text-align:justify;
	
}

#content_ang {text-align:center;
	
}

#content_ang h2 {color:#3C5E11 ; font-size:24px; font-weight:bold;margin: 20px 0 30px 10px;

	
}

#content_ang p {color:#3C5E11; font-size:16px; font-weight:normal; margin: 20px 300px 30px 300px; line-height:130%; text-align:justify;  -webkit-hyphens: auto; hyphens: auto;
	
}



#content_ang ul {color:#3C5E11 ; font-size:16px; font-weight:normal;
    margin: 0 10px 30px 20px; line-height:200%; display: inline-block; 
    text-align:justify;  list-style-type: disc;    -webkit-hyphens: auto; hyphens: auto;

}

#content_ang a {color:#3C5E11 ; font-size:24px; font-weight:bold;margin: 0;}
#content_ang a:link    {color:#3C5E11;}
#content_ang a:visited {color:#3C5E11; background-color: #E9FFCA;}
#content_ang a:active  {color:#3C5E11; background-color: #E9FFCA;}
#content_ang a:hover   {color:#E9FFCA; background-color:#76BD23; }
#content_ang a:focus   {color:#3C5E11}


/* First the Grid */
.gallery-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 1.5rem;
  justify-items: center;
  margin: 0px 20px;
  padding: 0;
}

/* The Picture Frame 
.gallery-frame {
  padding: .5rem;
  font-size: 1.2rem;
  text-align: center;
  background-color: #333;
  color: #d9d9d9;
}*/

/* The Images */
.gallery-img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  transition: opacity 0.25s ease-in-out;
}

.gallery-img:hover {
  opacity: .7;
}





@media screen and (max-width: 60em) {
    #content_hp p{
        /*width: 80%;*/

        margin: 20px 20px;
    }
    
    #content_hp img{width: 80%;
	
	}
	
	#content_hp{
	background:
		url("images/schwa1.png") no-repeat bottom center;

	}
	
	#content_ang p{margin: 20px 20px;
	
	}
	
	#content_ang ul{ display: inline-block; text-align:left;
	
    }
    
    #content_ang img {width: 80%}
    
    #content_about img{ min-height: 200px; min-width: 200px;}
    
    
  
    #content_about p{
        margin: 20px 20px;
    }
   
    
}

/* Clearfix (clear floats) 
.row::after {
    content: "";
    clear: both;
    display:inline-block;
}*/

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other 
@media screen and (max-width: 60em) {
    .row {
        width: 100%;
        float:none;
        
    }
}*/




/* modals on technik sub page */



/* Responsive layout - makes the three columns stack on top of each other instead of next to each other 
@media screen and (max-width: 60em) {
    .column {
        width: 100%;
        float:none;
        
    }
}*/