/* Website Kinderarztpraxis Schwanenkolonie
by Tim Glatthard */


/* Colors for this Website

	lightest-green for BG:		#d8ffad, rgb (199, 249, 167)
	light-green for Navi: 		#86d15a, rgb (134, 209, 90)
	middle-green for Container: #76ba4c, rgb (103, 170, 60)
	dark-green:					#2e7203, rgb (46, 114, 3)

	dark-grey for text:			#333333, rgb (51, 51, 51)

*/

/**************** RESET STYLES IS A GOOD THING *************************************************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em,
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup,
menu, footer, header, nav, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0;}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {display: block;}

/**********************************************************************************************************************/


/******************************************** CONTENT ********************************************/
/** default 1024 px width layout for desktop, all other layouts inherit styles from this layout **/

* {margin: 0; padding: 0;}
html, body {height: 100%; margin: 0; padding: 0;}

body {
	width: 100%;
	height: 100%;

    font-family: Myriad Pro, sans-serif;
    color: #333333;

	background-color: #d8ffad;

}



										/********* Container ********/
										/****************************/
#container {
	position: relative;
	margin: 0 auto;
	width: 1100px;
	height: auto !important;
	min-height: 700px;

	background-color: #76ba4c;

	margin-top: -530px;

	z-index: 1;

	-moz-box-shadow: -2px 2px 3px rgba(50,50,50,0.2);
	-webkit-box-shadow: -2px 2px 3px rgba(50,50,50,0.2);
	-o-box-shadow: -2px 2px 3px rgba(50,50,50,0.2);
	box-shadow: -2px 2px 3px rgba(50,50,50,0.2);
}

/*  ===== Container for Tablet ===== */
@media (max-width: 1023px){
  #container{
  	box-shadow: none;
    width: 100vw;
    margin: 0;
    background-color: #fff;
  }
}


										/********* Header mit Fotos und Sprachwahl ***********/
										/*****************************************************/

header {
	position: relative;
	width: 100%;
	height: 120px;
	margin: 0 auto;

	background-color: #76ba4c;
	z-index: 2;
}

img.header {
	position: relative;
	width: 200px;
	height: 130px;
	margin-top: -45px;
	margin-left: 210px;
}

img#banner2 {
	margin-left: 0px;
	margin-left: 3px;
}

img#banner3 {
	margin-left: 0px;
	margin-left: 3px;
}

/*  ===== Images & Header for Tablet ===== */
@media (max-width: 1023px){
  header{
  	height: 2em;
  }
  img.header{
  	display: none;
  }
}

li.lang-item{
	list-style: none;
	display: inline;
	padding: 5px;
	line-height: 1.5;
}


li.lang-item a {
	text-decoration: none;
	color: #2e7203;
	font-family: 'colaborate-thinregular';
	font-size: 1em;
}


li.lang-item a:hover {
	color: #e5fbda;
	text-decoration: none;
}

#language {
	position: relative;
	color: #76ba4c;
	font-family: 'colaborate-thinregular';
	font-size: 0.9em;

	padding: 5px 0 0 10px;
}

#language a {
	color: #76ba4c;
	text-decoration: none;
}

#language a:hover {
	color: #e5fbda;
	text-decoration: none;

	-webkit-transition: all 1s ease;
 	-moz-transition: all 1s ease;
  	-o-transition: all 1s ease;
  	transition: all 1s ease;
}

										/********* Navi + Balken + Logo ********/
										/***************************************/

/* balken */

#naviBalkenBack {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 45px;
	top: 165px;


	background-color: #86d15a;
	z-index: 3;

	-moz-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	-webkit-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	-o-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
}

#naviBalkenFront {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: 45px;
	top: -135px;


	background-color: #86d15a;
	z-index: 5;

}

/* naiv */

nav.haupt{
	position: relative;
	margin-left: 0%;
	margin-top: 12px;
	top: 11px;
}

nav.haupt ul li {
	display: inline;
}

.nav_small,
.overlay{
	display: none;
}

@media screen and (max-width: 1200px){
	nav.haupt{
    position: relative;
    margin-left: 0%;
    margin-top: 12px;
    top: 11px;
  }
}

/* Logo und Box */

#LogoBoxBack {
	position: relative;
	width: 300px;
	height: 245px;
	margin-left: 69%;
	top: -20px;


	background-color: #86d15a;
	z-index: 4;

	-moz-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	-webkit-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	-o-box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
	box-shadow: 0px 5px 2px rgba(50,50,50,0.2);
}

#LogoBoxFront {
	position: relative;
	width: 300px;
	height: 245px;
	margin-left: 69%;
	top: -320px;


	background-color: #86d15a;
	z-index: 6;

}


img#Logo {
	margin-left: 15px;
	margin-top: 0px;
}

/*  ===== Navi, Balken, Logo for Tablet ===== */
@media (max-width: 1023px){
  #LogoBoxBack,
  #naviBalkenBack{
  	display: none;
  }

  #LogoBoxFront{
  	margin: 0 auto;
    top: 0;
  }

  #naviBalkenFront{
  	display: none;
  }

  nav.haupt ul{
  	display: none;
  }
  .overlay{
    position: fixed;
    z-index: 999;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
  }

  .overlay .overlay_wrapper{
  	width: 90%;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 2em 0;
  }

  .overlay .overlay_wrapper .closer{
		width: 90%;
    position: absolute;
    font-size: 3em;
    text-align: right;
  }

  .overlay .overlay_wrapper h2{
    padding-bottom: 0.5em;
  }

  .overlay .overlay_wrapper h4{
		font-size: 2em;
    color: #2e7203;
    padding-bottom: 0.5em;
  }

  .overlay .overlay_wrapper p.infoBox{
	  font-size: 0.9em;
  }

  .overlay .overlay_wrapper ul{
  	list-style: none;
  }

  .overlay .overlay_wrapper ul li{
    margin: 2em 0;
  }

  .overlay .overlay_wrapper ul li a{
	  font-size: 1.2em;
  }
}

@media (max-width: 767px){
  #LogoBoxFront{
  	width: 40%;
    height: auto;
  }

  #LogoBoxFront img#Logo{
  	width: 100%;
    margin-left: 0;
  }
}

/* Navi for smaller devices */
@media (max-width: 767px){
	.nav_small{
  	top: 0px !important;
  }

  .nav_small .left,
  .nav_small .right{
  	width: 50px;
    height: 50px;
  }

  .nav_small div img{
  	width: 30px;
  }
}

@media (max-width: 1023px){
	.nav_small{
		display: inline;
		position: absolute;
		top: 70px;
		width: 100%;
		height: 70px;
	}

	.nav_small div{
		height: 100%;
		width: 70px;
    background-color: #76ba4c;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.2);
		-moz-box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.2);
		box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.2);
	}

  .nav_small div:hover{
  	-webkit-box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.4);
		-moz-box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.4);
		box-shadow: 0px 3px 5px 0px rgba(50,50,50,0.4);
  }

	.nav_small .left{
		float: left;
	}
	.nav_small .right{
		float: right;
	}

  .nav_small div img{
  	display: block;
    margin: 0 auto;
    margin-top: 10px;
  }
}




										/********* left Sidebox (Infobox) ***********/
										/********************************************/
#leftSide {
	position: relative;
	width: 210px;
	height: auto !important;
	min-height: 500px;

}

/*  ===== left side for Tablet ===== */
@media (max-width: 1023px){
  #leftSide{
  	display: none;
  }
}


/* Content Infobox */

.leftSideContent {
	position: relative;
	width: 190px;
	height: auto;
	/* min-height: 450px; */
	left: 7px;
	top: 50px;

	/* border: 1px solid red; */

}

img.welleBox {
	margin-left: 0px;
}


										/********* Wrapper + Content ***********/
										/***************************************/
#wrapper {
	position: relative;
	width: 775px;
	height: auto !important;
	min-height: 513px;


	margin-left: 210px;
	margin-top: -500px;

	background-color: white;

	bottom: 0;
}

#post{
	position: relative;
	width: 695px;
	height: auto;
	min-height: inherit;

	padding-top: 69px;
	padding-left: 35px;

	background-color: white;
}

.page.type-page {
	position: relative;
	min-height: inherit;
}

.content {
	position: relative;
    color: #333333;
}


.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.clearfix {
	display: inline-block;
	clear: both;
}

/*  ===== wrapper & post for Tablet ===== */
@media (max-width: 1023px){
  #wrapper{
    width: 100%;
    margin: 0;
  }

  #post{
  	width: 85%;
  	margin: 0 auto;
    padding-left: 0;
  }
}


										/********* Footer ***********/
										/****************************/

#footer {
	position: relative;
	width: 1100px;
	margin: 0 auto;
	padding: 5px 0 5px 0;

	font-family: 'colaborate-thinregular';
	font-size: 0.8em;
	color: #bcbcbc;
}

/*  ===== footer for Tablet ===== */
@media (max-width: 1023px){
  #footer{
	  width: 100%;
  }
}


										/********* diverse Unternavis ***********/
										/****************************************/
		/** allgemein **/

a.mehrzeilig {
 line-height: 0.5;
}

		/** TEAM **/

nav.teamNavi {
	padding-top: 10px;
	margin-left: 13px;
}

nav.teamNavi li a {
	height: auto;
	text-decoration: none;
	color: #333;
	font-family: Myriad Pro, sans-serif;
	font-size: 0.9em;

	display: block;
	padding: 8px 10px 8px 0;
}

nav.teamNavi li a:hover {
	color: #FFF;

}

nav.teamNavi ul {
	list-style: none;
	margin: 0;
	padding: 0;
}



										/********* right Sidebox ***********/
										/**********************************/
#rightSide {
	position: relative;
	width: 115px;
	height: auto !important;
	min-height: 700px;

	margin-left: 985px;
	margin-top: -700px;

	background-color: #76ba4c;

}

/******************************************** TEST BEREICH *****************************************************/
/***************************************************************************************************************/



/******************************************** Typo *************************************************************/
/***************************************************************************************************************/

h4 {
	font-family: 'colaborate-thinregular';
	font-size: 1.2em;
	font-weight: 100;
	color: #e5fbda;
	text-align: center;
  margin-top: 1em;
}


h2 {
	font-family: 'colaborate-thinregular';
	font-size: 2em;
	color: #2e7203;
}

h3{
	font-family: Myriad Pro, sans-serif;
	font-size: 1.6rem;
	font-weight: bold;
	color: #2e7203;
	padding-top: 20px;
}

p.infoBox {
	font-family: Myriad Pro, sans-serif;
	font-size: 0.8em;
	color: #333;

	padding-top: 5px;
	padding-left: 9px;
}

nav.haupt ul li a {
	text-decoration: none;
	color: #2e7203;
	font-family: 'colaborate-thinregular';
	font-size: 1.2em;

	margin-left: 25px;
}

nav ul li a:hover {
	color: #e5fbda;
	-webkit-transition: all 1s ease;
 	-moz-transition: all 1s ease;
  	-o-transition: all 1s ease;
  	transition: all 1s ease;
}

@media (max-width: 1023px){
  h2,
  p{
  	hyphens: auto;
  }
}

@media screen and (min-width: 1500px){
	nav.haupt{
		margin-left: 12%;
	}
}

										/****** FONTS ******/
										/*******************/


@font-face {
    font-family: 'colaborate-thinregular';
    src: url('../fonts/ColabThi-webfont.eot');
    src: url('../fonts/ColabThi-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ColabThi-webfont.woff') format('woff'),
         url('../fonts/ColabThi-webfont.ttf') format('truetype'),
         url('../fonts/ColabThi-webfont.svg#colaborate-thinregular') format('svg');
    font-weight: normal;
    font-style: normal;

}