/* ---------- Allgemein ---------- */

@import url("//hello.myfonts.net/count/2bc549");



/* ---------- Schrift ---------- */

body{
	font-size: 18px;
	font-family: Lucida Grande, "Lucida Sans Unicode", "Lucida Grande", "Corbel", Corbel, Helvetica, Arial, sans-serif;
	height:auto !important;
	}

p{
	font-size: 18px;
	color:#ffffff;
	font-family: Lucida Grande, "Lucida Sans Unicode", "Lucida Grande", "Corbel", Corbel, Helvetica, Arial, sans-serif;
	line-height:1.4;
	}
	
h1, h2, h3, h4, h5, h6{
	font-family: 'Nanami-Rounded-Book', Helvetica, Arial, sans-serif;
	font-weight:normal;
	}
	
h2{
	font-size:45px;
	line-height:51px;
	color:#ffffff;
	letter-spacing:5px;
	margin:26px 0 10px 0;
	text-transform:uppercase;	
	}
	
h3{
	font-size:24px;
	color:#ffffff;
	letter-spacing:3px;
	text-transform:uppercase;
	}
	
.teaser h3{
	font-size:32px;
	color:#ffffff;
	letter-spacing:3px;
	text-align:center;
	margin:17px 0 12px 0;
	text-transform:uppercase;
	}
	
.bg_blue h3{
	margin:74px 0 5px 0;
	}
	
h5{
	font-family: Lucida Grande, "Lucida Sans Unicode", "Lucida Grande", "Corbel", Corbel, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight:bold;
	color:#ffffff;
	line-height:1.4;
	}
	
.title_small{
	font-size:42px;
	line-height:1.2;
	letter-spacing:5px;
	text-transform:uppercase;	
	margin:50px 0 0 0;
	}
	
.subtitle_small{
	font-size:28px;
	line-height:1.2;
	letter-spacing:3px;
	text-transform:uppercase;	
	margin:0 0 20px 0;
	}

.text_yellow, .text_yellow ul li, .text_yellow p{
	color:#ffdd00;
	}
	
.text_yellow p{
	margin-bottom:0;
	}
	
.text_19 ul li, .text_19{
	font-size:19px;
	}
	
.text_15 ul li, .text_15{
	font-size:15px;
	}
	
a{
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
	
p a{
	color:#ffffff;
	text-decoration:underline;
	}
	
li{
	font-family: Lucida Grande, "Lucida Sans Unicode", "Lucida Grande", "Corbel", Corbel, Helvetica, Arial, sans-serif;
	font-size: 15px;
	color:#ffffff;
	line-height:1.5;
	}
	
.padding-bottom{
	padding-bottom:200px !important;
	}
	
.margin-top45{
	margin-top:45px;
	margin-bottom:15px;
	}
	
/* ---------- Header ---------- */
.header_home{
	background: #ffffff;
	/*height:394px;*/
	z-index:999;
	width:100%;
	max-width:none;
	}
	
.header_home_sticky{
	position:fixed;
	z-index:999;
	top:0;
	width:100%;
	max-width:none;
	height:0;
	overflow:hidden;
	background:#ffffff;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.header_home_sticky.show{
	height:110px;
}

.header_home_sticky.visible{
	overflow:visible;
}


.header_home h1#logo, .header_home_sticky h1#logo {
	width: 256px;
	height: 195px;
	text-decoration: none;
	margin:23px auto 76px;
	display:block;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
	}

.header_home h1#logo a, .header_home_sticky h1#logo a{
	text-indent: -1000px;
	overflow: hidden;
	background-image: url(../img/handl_logo.png);
	background-size: cover;
	background-repeat: no-repeat;
	text-decoration: none !important;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
	}
		  
.header_home_sticky h1#logo{
	height: 32px;
	width: 170px;
	margin: 23px auto 5px;
	}
	  
.header_home_sticky h1#logo a{
	background-image: url(../img/handl_logo_klein.png);
	}

/* ---------- Navigation ---------- */


.top-bar {
  height: 45px;
  line-height: 45px;
  background: none;
  margin-bottom: 28px; }

  
.top-bar-section{
	 text-align:center;
	 }
  
.top-bar-section ul{
	 text-align:center;
	 }
  
.top-bar-section ul li {
    background: none;
	display: inline-block;
	float: none;
	}
	
.top-bar-section ul li > a {
	color:#cecece;
	padding: 12px 0 12px 0;
    padding-left: 15px;
    font-family: 'Nanami-Rounded-Book', Helvetica, Arial, sans-serif;
	font-weight:normal;
    letter-spacing:1.4px;
	text-transform:uppercase;
	text-decoration:none;
    font-size: 18px;
	  
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
	
.header_home_sticky .top-bar-section ul li > a{
	font-size: 16px;
	}

.top-bar-section ul li:hover:not(.has-form) > a {
      background-color:none;
      background:none;
      color: #e7501e; }
	  
.top-bar-section .has-dropdown > a:after {
      border: none;}
	  
.top-bar-section .dropdown li{
	text-align:left;
	}
	  
.top-bar-section .dropdown li a {
	font-weight: normal;
	padding: 8px 15px; }
	
.top-bar-section li:not(.has-form) a:not(.button):hover{
	background-color: #ffffff;
	background: #ffffff;
	color: #e7501e;
	}
	
.top-bar-section li.hover > a:not(.button) {
      background-color: #ffffff;
      background: #ffffff;
      color: #e7501e; }
	  
    .top-bar-section li:not(.has-form) a:not(.button) {
      padding: 0 15px;
      line-height: 32px;
      background: none; }
	  	
      .top-bar-section li:not(.has-form) a:not(.button):hover {
        background-color: #ffffff;
        background: #ffffff; }
		
.header_home .top-bar-section .has-dropdown > a {
      padding-right:15px !important;
	  padding-bottom:33px !important;}
	  
.header_home_sticky .top-bar-section .has-dropdown > a {
	  padding-right:15px !important;
	  padding-bottom:8px !important;}	 
	  
.top-bar .toggle-topbar.menu-icon a{
	padding: 0 40px 0 15px;
	color: #cecece;
	}
	
.top-bar .toggle-topbar.menu-icon a span::after{
	content: "";
	position: absolute;
	display: block;
	height: 0;
	top: 50%;
	margin-top: -8px;
	right: 15px;
	box-shadow: 0 0px 0 1px #cecece, 0 7px 0 1px #cecece, 0 14px 0 1px #cecece;
	width: 16px;
	}
	
.top-bar.expanded .title-area, .top-bar.expanded{
	background:#ffffff;
	}
	
.top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button){
	background:#ffffff;
	color:#cecece;
	}
	
.top-bar-section .dropdown li:not(.has-form):not(.active):hover > a:not(.button){
	color:#e7501e;
	background:#ffffff;
	}
	
.top-bar-section li.title a:not(.button){
	background:#cecfd1;
	color:#ffffff;
	}
	
.top-bar-section .right li .dropdown{
	left:0;
	right:auto;
	}

	
/* ---------- Teaser ---------- */

.teaser_pattern{
	width:100%;
	background: url(../img/teaser_pattern.jpg) repeat-x;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
	}

.teaser{
	background: url(../img/teaser_bg.jpg) no-repeat top center;
	padding:50px 0 100px 0;
	background-size:cover;
	}
	
.teaser img{
	width:140px;
	height:130px;
	margin:0 auto;
	display:block;
	}
	
.teaser p{
	text-align:center;
	line-height: 1.3;
	}
	
.teaser a{
	font-size: 14px;
	color:#ffffff;
	font-family: Lucida Grande, "Lucida Sans Unicode", "Lucida Grande", "Corbel", Corbel, Helvetica, Arial, sans-serif;
	font-weight:bold;
	line-height:1.4;
	text-align:center;
	text-transform:uppercase;
	margin:7px 0 0 0;
	padding:3px 12px 2px;
	display: inline-block;
	text-decoration:none;
	
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	}
	
.teaser a:hover{
	background:#e7501e;
	}
	
/* ---------- Farbige Inhaltsbalken ---------- */

.bg_red, .bg_green, .bg_yellow, .bg_magenta, .bg_blue, .bg_tuerkis, .bg_maigruen, .bg_sommerblau, .bg_zwetschge, .bg_khaki, .bg_senf{
	width:100%;
	padding:45px 0 25px;
	float:left;
	}
	
.bg_red{
	background:#e7501e;
	}
	
.bg_yellow{
	background:#ffc600;
	}
	
.bg_magenta{
	background:#d85094;
	}
	
.bg_tuerkis{
	background:#65bab4;
	}
	
.bg_maigruen{
	background:#97b812;
	}
	
.bg_sommerblau{
	background:#50b9e2;
	}
	
.bg_zwetschge{
	background:#af2d73;
	}
	
.bg_khaki{
	background:#c5c590;
	}
	
.bg_blue{
	background:#002d69;
	padding-bottom:200px;
	}
	
.bg_senf{
	background:#dee442;
	}
	
a.top{
	float:right;
	font-family: 'Nanami-Rounded-Book', Helvetica, Arial, sans-serif;
	font-weight:normal;
	font-size:12px;
	letter-spacing:2px;
	color:#ffffff;
	text-decoration:none;
	text-transform:uppercase;
	background: url(../img/icon_top.png) no-repeat 0 4px;
	padding-left: 19px;
	line-height: 1.8;
	margin-top:20px;
	}
	
a.top:hover{
	background: url(../img/icon_top.png) no-repeat 0 1px;
	}
	
	
/* ---------- Kreativgruppen ---------- */	
	
h2.font_kreativitaet{
	width:80%;
	max-width:443px;
	height:67px;
	background:url(../img/font_kreativitaet.png) no-repeat;
	text-indent:-10000px;
	overflow:hidden;
	display:block;
	margin-top:114px;
	margin-bottom: 20px;
	background-size:contain;
	}
	
.button_kreativitaet{
	width:152px;
	height:151px;
	background:url(../img/button_kreativitaet.png) no-repeat;
	text-indent:-10000px;
	overflow:hidden;
	display:inline-block;
	float:right;
	}
	
h4.subtitle{
	font-size:30px;
	line-height: 1.2;
	color: #d85094;
	}
	
.header_home h1#logo {
	width: 256px;
	height: 195px;
	text-decoration: none;
	margin:23px auto 76px;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
	}

.header_home h1#logo a{
	text-indent: -1000px;
	overflow: hidden;
	background-image: url(../img/handl_logo.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-decoration: none !important;
	display: block;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.9s ease-in-out;
	-moz-transition: all 0.9s ease-in-out;
	-o-transition: all 0.9s ease-in-out;
	transition: all 0.9s ease-in-out;
	}
	
	
/* ---------- Slideshow Praxis ---------- */	

.praxis_slider{
	background:#ffffff;
	width:100%;
	float:left;
	}

.flexslider {
	margin: 0 auto;
	background: #fff;
	border:none;
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	-o-box-shadow: none;
	box-shadow: none;
	max-height:656px;
	overflow: hidden;
	/*max-width: 1700px;*/
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
}

.flex-direction-nav a{
	overflow:hidden;
	width: 32px;
	height: 32px;
	margin: -16px 0 0;
	text-shadow: none;
	}
	
.flex-direction-nav .flex-prev{
	background:url(../img/slideshow/arrow_left.png) no-repeat;
	text-indent:-10000px;
	}
	
.flex-direction-nav .flex-next{
	background:url(../img/slideshow/arrow_right.png) no-repeat;
	text-indent:10000px;
	}
	
.flex-direction-nav a.flex-next:before, .flex-direction-nav a.flex-prev:before{
	content:inherit;
	font-size: 32px;
	line-height: 1;
	display: inline-block;
	}
	
.flexslider:hover .flex-prev{
	opacity: 0.7;
	left: 4%;
	}
	
.flexslider:hover .flex-next{
	opacity: 0.7;
	right: 4%;
	}
	
.portrait img{
	-webkit-border-radius: 133px;
	-moz-border-radius: 133px;
	border-radius: 133px;
	}
	
.map{
	height:440px;
	width:100%;
	float:left;
	}	
	
.map iframe{
	height:440px;
	margin-bottom:-7px;
	}
	
.overlay {
   background:transparent;
   position:relative;
   height:440px; /* your iframe height */
   top:440px;  /* your iframe height */
   margin-top:-440px;  /* your iframe height */
}
	
/* ---------- Webfont MyFonts ---------- */
	
@font-face {font-family: 'Nanami-Rounded-Book';src: url('../fonts/2BC549_0_0.eot');src: url('../fonts/2BC549_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/2BC549_0_0.woff') format('woff'),url('../fonts/2BC549_0_0.ttf') format('truetype');}

/* ---------- Webyep Icons ---------- */

.WebYepShortTextEditButton, .WebYepShortTextEditButton img, .WebYepShortTextEditButton:hover, .WebYepShortTextEditButton img:hover,
.WebYepLongTextEditButton, .WebYepLongTextEditButton img, .WebYepLongTextEditButton:hover, .WebYepLongTextEditButton img:hover{
	max-width:26px !important;
	height:auto !important;
	background:none !important;
	}
	
.WebYepLoopUpButton, .WebYepLoopDownButton, .WebYepLoopEnabledButton{
	display:none;
	}
	
	
@media only screen 
and (max-width : 970px) {
	/* ---------- Sticky Nav ---------- */
	.row{
		padding:0 15px;
		}
}


@media only screen 
and (max-width : 870px) {	
		
	/* ---------- Cover ---------- */
		
	.teaser{
		background-size:cover;
		}
		
	/* ---------- Farbige Inhaltsbalken ---------- */	
		
	#leben img, #familie img, #erziehung img{
		padding-right:20%;
		}
		
	#portrait img{
		width:80%;
		}
		
	/* ---------- Google Map ---------- */	
		
	.map iframe{
		height: 280px;
		}
		
	.map{
		height:280px;
		}	
		
	.overlay {
	   height:280px; /* your iframe height */
	   top:280px;  /* your iframe height */
	   margin-top:-280px;  /* your iframe height */
	}
}

@media only screen 
and (max-width : 784px) {	
	.header_home h1#logo{
		margin: 23px auto 34px;
		}
		
	.header_home .top-bar-section .has-dropdown > a{
		padding-bottom: 0px !important;
		}
		
	.top-bar-section ul{
		display:block;
		}
}


@media only screen 
and (max-width : 640px) {
	
	/* ---------- Header ---------- */
	
	.header_home h1#logo{
		margin: 23px auto 29px;
		}
		
	.top-bar-section ul li {
		display: block;
		}
		
	.header_home .top-bar-section .has-dropdown > a{
		padding-bottom: 0 !important;
		}
	
		
	/* ---------- Farbige Inhaltsbalken ---------- */	
		
	#leben img, #familie img, #erziehung img{
		display:none !important;
		}
		
	h2{
		font-size: 41px;
		}
		
	#portrait img{
		max-width:266px;
		margin:0 auto 20px;
		display:block;
		}
}

@media only screen 
and (max-width : 450px) {
	.title_small{
		font-size: 32px;
		margin: 40px 0 20px 0;
		letter-spacing:0;
		}
		
	h2.font_kreativitaet{
		margin-top:134px;
		margin-bottom: 10px;
		}
}

	  
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	/* iPhone */
	.header_home h1#logo a{
		background-image: url(../img/handl_logo2x.png);
		-webkit-background-size: 100%  100% ;
		-moz-background-size: 100%  100% ;
		background-size: 100%  100% ;
		}
		
	.header_home_sticky h1#logo a{
		background-image: url(../img/handl_logo_klein2x.png);
		-webkit-background-size: 100%  100% ;
		-moz-background-size: 100%  100% ;
		background-size: 100%  100% ;
		}
}