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{font-size:100%;/*font:inherit*/;padding:0;border:0;margin:0;vertical-align:baseline}/*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}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

/* CSS is build Mobile First */

/* Generall Settings */

html{
	color: #fff;
	font-size: 1em;
	font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
	line-height: 1.4;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}


/* Layout */

header{
	width: 100%;
	background: #fff;
	margin: 0;
	padding: 0;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.32);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.32);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.32);
	position: fixed;
	top: 0;
	left: 0;
	-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;
  	display: block;
  	z-index: 6;
}

header.sticky{
	top: -6.875em;
	background: #fff;
}

header h1{
	font-size: 1em;
	margin-bottom: 0;
}

header h1 img{
	width: 7.188em;
	margin: 8.125em auto -9.375em auto;
	display: block;
}

header nav{
    padding: 1.563em;
    margin: 0 0 7.4em 0;
    min-width: 16.875em;
}

header nav ul{
	display: block;
}

header nav li{
	display: inline;
}

header nav a{
	display: block;
    padding: 0.8em 0;
    color: #3c3c3b;
    text-decoration: none;
    font-size: 0.750em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    width: 50%;
	float: left;
	text-align: left;
}

header nav li:nth-of-type(2) a{
	float: right;
	text-align: right;
}

header nav li:nth-of-type(4) a{
	float: right;
	text-align: right;
}

header nav a:hover{
	color: #b00835;
	text-decoration: none;
}

progress{
	width: 100%;
	height: 0.188em;
	display: block;
	margin: 0;
	padding: 0;

	/* Reset the appearance */
  	-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

  	/* Get rid of the default border in Firefox/Opera. */
  	border: none;

  	/* Progress bar container for Firefox/IE10+ */
  	background-color: #f1f1f1;

  	/* Progress bar value for IE10+ */
  	color: #b00835;
}

progress::-webkit-progress-bar {
  	background-color: #f1f1f1;
}

progress::-webkit-progress-value {
  	background-color: #b00835;
}

progress::-moz-progress-bar {
  	background-color: #b00835;
}

section {
	position: relative;
	top: 11.000em;
	z-index: 2;
	padding: 0;
	margin: 0;
}

section article{
	color: #000;
}

p{
	line-height: 1.8;
	margin: 0 0 1.8em;
}

a{
	color: #b00835;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

section article ul{
	margin: 0 0 1.8em 0.95em;
	list-style: square;
	line-height: 1.8em;
}

section article ul li{
	color: #b00835;
}

section article ul li span{
	color: #2e2e2d;
}

footer{
	width: 100%;
	position: relative;
	text-align: center;
	top: 11em;
	padding: 1em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	color: #ccc;
	font-size: 0.8em;
}

footer a{
	color: #b00835;
	text-decoration: none;
	font-size: 0.8em;
}

footer a:hover{
	text-decoration: underline;
}

button{
	padding: 0.7em 1em;
	background-color: #b00835;
	border: 1px solid #fff;
	font-size: 0.938em;
	text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

button:hover{
	background-color: #7f001e;
}

.button{
	width: auto;
	padding: 0.7em 1em;
	background-color: #b00835;
	border: 1px solid #fff;
	font-size: 0.938em;
	text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #fff;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
  	-moz-transition: all 0.3s ease-in-out;
  	-o-transition: all 0.3s ease-in-out;
  	transition: all 0.3s ease-in-out;
}

.button:hover{
	background-color: #7f001e;
}

h1{
	font-size: 1.9em;
	font-weight: 600;
	text-transform: uppercase;
	color: #2e2e2d;
	margin-bottom: 0.6em;
}

h2{
	font-size: 1.313em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 0 0 0.625em 0;
}

form label{
	width: 100%;
	display: block;
}

form label em{
	color: #b00835;
}

form p{
	margin: 0 0 0.8em;
}

form input, form textarea{
	width: 100%;
	padding: 0.3em;
	font-weight: 300;
	font-size: 1.250em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #ccc;
	resize: none;
	font-family: 'Helvetica Neue',Arial,Helvetica,sans-serif;
}

/* Remove Rounded Corners on iOS */

textarea,
input[type="text"],
input[type="button"],
input[type="email"],
input[type="tel"],
input[type="submit"] {
     -webkit-appearance: none;
     border-radius: 0;
}

input.error, textarea.error{
	border: 1px solid #b00835;
}

.error{
	color: #b00835;
}

.antispam{
	display: none;
}


/* Section Styles */

.half{
	width: 50%;
	float: left;
	padding: 0 2em 0 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

div.half:nth-of-type(2){
	padding: 0 0 0 2em;
}

.wrap{
	padding: 3.125em 1.563em 1.8em;
	overflow: auto;
}

.praxis .wrap{
	padding: 1.563em;
	z-index: 5;
}

.praxis{
	width: 100%;
	background: #b00835;
	margin: 0;
	color: #fff;
}

.praxis-icon-close{
	display: none;
	cursor: pointer;
}

.praxis-icon-open{
	display: none;
	cursor: pointer;
}

.praxis h1{
	font-size: 1.313em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0 0 0.625em 0;
	color: #fff;
}

.praxis p{
	line-height: 1.8;
	margin: 0 0 0.5em 0;
}

.praxis a{
	font-weight: 600;
	text-decoration: none;
	color: #fff;
}

.praxis a:hover{
	text-decoration: underline;
}

.praxis a button{
	font-size: 0.750em;
	padding: 0.5em 0.8em;
	margin: 0.625em 0 1.250em;
}

.praxis a button:hover{
	background-color: #fff;
	color: #b00835;
}

.phone-white{
	background: url(../img/icon-phone-white.svg) no-repeat top left;
	padding-left: 1.750em;
}

.mail-white{
	background: url(../img/icon-mail-white.svg) no-repeat top left;
	padding-left: 1.750em;
}

.stage{
	width: 100%;
	margin: 0;
	z-index: 3;
}

.scrolldown{
	display: none;
}

.stage img{
	width: 100%;
	height: 100%;
}

#psychotherapie div.half:nth-of-type(2){
    color: #b00835;
}

#therapie{
	background: #eee;
}

.info{
	clear: both;
	background: #fff;
	padding: 1em;
}

h3{
	font-size: 1em;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin: 0 0 0.625em 0;
}

.info h3{
	background: url(../img/icon-info.svg) top right no-repeat;
}

.info p{
	margin: 0;
	font-size: 0.875em;
	line-height: 1.6;
	color: #444;
}

.extention{
	font-size: 0.6em;
	display: inline;
	text-transform: none;
}

#elternberatung img{
	width: 100%;
	height: 100%;
	margin-top: 0.438em;
}

#uebermich{
	background: #eee;
}

#uebermich img{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#uebermich ul{
	list-style: none;
	margin: 0;
}

#uebermich ul ul{
	margin: 0 0 1.8em 0.95em;
	list-style: square;
	line-height: 1.8em;
	font-size: 1em;
}

#uebermich ul ul li{
	color: #b00835;
}

#uebermich ul ul li span{
	color: #2e2e2d;
}

.year{
	font-style: italic;
	font-weight: 600;
	font-size: 0.9em;
	margin: 0;
	display: block;
}

.description{
	margin-bottom: 0.875em;
	line-height: 1.6;
	display: block;
	z-index: 0;
}

#map{
	width: 100%;
	height: 12.500em;
	margin: 0.438em 0 1.8em;
	background: #eee;
	position: relative;
}

#map noscript{
	position: absolute;
	top: 3em;
	left: 3em;
}

#formular{
	display: none;
}

.form-nojs{
	width: 100%;
	background: #eee;
	padding: 3em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin-top: 1.938em;
	position: relative;
}

#kontakt a{
	font-weight: 600;
	text-decoration: none;
	color: #2e2e2d;
}

#kontakt a:hover{
	text-decoration: underline;
}

.phone{
	background: url(../img/icon-phone.svg) no-repeat top left;
	padding-left: 1.750em;
}

.mail{
	background: url(../img/icon-mail.svg) no-repeat top left;
	padding-left: 1.750em;
}


/* Responsive Styles */

@media only screen
and (min-width : 320px)
and (max-width : 499px){
    html{
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }

    .half{
    	width: 100%;
    	float: none;
    	padding: 0;
    }

    div.half:nth-of-type(2){
		padding: 0;
	}

    #psychotherapie div.half:nth-of-type(1){
    	margin-bottom: 2em;
    }

    #elternberatung img{
		width: 100%;
		height: 100%;
		margin-bottom: 2em;
	}

	#uebermich div.wrap{
		padding: 1.375em 1.563em 1.8em;
	}

    #uebermich div.half:nth-of-type(2){
    	margin-top: 2.500em;
    }

}


@media only screen
and (min-width : 500px)
and (max-width : 1023px){
    html{
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }

	header.sticky{
		top: -2.9em;
	}

	header h1 img{
		width: 11em;
		margin: 4.4em auto -7.1em auto;
		display: block;
	}

	header nav{
	    padding: 1.563em;
	    margin: 0 0 4em 0;
	    text-align: center;
	}

	header nav a{
	    padding: 0.8em 4% 0.8em 0;
	    font-size: 0.750em;
	    float: none;
	    display: inline;
	}

	header nav li:nth-of-type(2) a{
		float: none;
		text-align: left;
	}

	header nav li:nth-of-type(3) a{
		text-align: left;
	}

	header nav li:nth-of-type(4) a{
		float: none;
		text-align: left;
		padding: 0.8em 0;
	}

	progress{
		height: 0.2em;
	}

	section {
		top: 8.375em;
	}

	footer{
		top: 8.375em;
	}

	.wrap{
		padding: 3.125em 1.9em;
	}

	.half{
    	width: 100%;
    	float: none;
    	padding: 0;
    }

    div.half:nth-of-type(2){
		padding: 0;
	}

	.praxis .wrap{
		padding: 1.9em 1.9em 0.9em;
	}

	.praxis{
		width: 100%;
		background: #b00835;
		margin: 0;
		color: #fff;
	}

	.praxis .half{
		width: 50%;
		padding: 0;
		float: left;
	}

	.praxis h1{
		font-size: 1.313em;
		font-weight: 300;
		text-transform: uppercase;
		letter-spacing: 0.2em;
		margin: 0 0 0.625em 0;
	}

	.praxis a{
		font-weight: 600;
		text-decoration: none;
		color: #fff;
	}

	.praxis a:hover{
		text-decoration: underline;
	}

	.praxis a button{
		font-size: 0.750em;
		padding: 0.5em 0.8em;
		margin: 0.625em 0 1.250em;
	}

	.praxis a button:hover{
		background-color: #fff;
		color: #b00835;
	}

	.phone-white{
		background: url(../img/icon-phone-white.svg) no-repeat top left;
		padding-left: 1.750em;
	}

	.mail-white{
		background: url(../img/icon-mail-white.svg) no-repeat top left;
		padding-left: 1.750em;
	}

	.stage{
		width: 100%;
		margin: 0;
	}

	.stage img{
		width: 100%;
		height: 100%;
	}

    #psychotherapie div.half:nth-of-type(1){
    	margin-bottom: 2em;
    }

	.info h3{
		background: url(../img/icon-info.svg) center left no-repeat;
		padding-left: 1.625em; 
	}

    #elternberatung img{
		display: none;
	}

	#uebermich div.wrap{
		padding: 1.5em 1.9em 3.125em 1.9em;
	}

    #uebermich div.half:nth-of-type(2){
    	margin-top: 2.500em;
    }

    #uebermich .year{
    	float: left;
    	display: block;
    	width: 6.875em;
    }

    #uebermich ul ul{
    	margin-left: 7.125em;
    }
}

@media only screen
and (min-width : 1024px)
and (max-width : 1489px){
    html{
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }

	header.sticky{
		top: 0;
	}

	header h1 img{
		width: 13em;
		margin: 3.438em auto -5.500em auto;
		display: block;
	}

	header nav{
	    padding: 1.563em 3.750em;
	    margin: 1.875em 0 1.875em 0;
	}

	header nav a{
	    padding: 0.8em 7% 0.8em 0;
	    font-size: 0.9em;
	    float: none;
	    display: inline;
	}

	header nav li:nth-of-type(2) a{
		float: none;
		text-align: left;
	}

	header nav li:nth-of-type(3) a{
		width: auto;
		float: none;
		position: absolute;
		top: 3.750em;
		right: 19%;
		text-align: right;
		padding: 0.8em 0;
	}

	header nav li:nth-of-type(4) a{
		width: auto;
		float: none;
		position: absolute;
		top: 3.750em;
		right: 3.750em;
		text-align: right;
		padding: 0.8em 0;
	}

	progress{
		height: 0.375em;
	}

	section {
		top: 9.375em;
	}

	.wrap{
		padding: 4.750em 3.750em 3em;
	}

	.half{
		padding: 0 1em 0 0; 
	}

	div.half:nth-of-type(2){
		padding: 0 0 0 1em;
	}

	.praxis .wrap{
		padding: 1.563em;
		overflow: hidden;
	}

	.praxis{
		width: 14.375em;
		margin: 0;
		position: fixed;
		top: 15em;
		right: 0;
		z-index: 1;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	}

	.praxis .half{
		padding: 0;
		float: none;
	}

	.praxis.disabled{
		right: -14.375em;
	}

	.praxis-icon-close{
		display: block;
		width: 14.375em;
		height: 4em;
		background: url(../img/arrow-right.svg) no-repeat 1.625em 1.625em #b00835;
		position: absolute;
		top: -2em;
		right: 0;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	}

	.praxis-icon-open{
		display: block;
		width: 3.9em;
		height: 3.9em;
		background: url(../img/pin.svg) no-repeat 1.438em 1.375em #b00835;
		position: fixed;
		top: 13em;
		right: -3.9em;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	}

	.praxis-icon-open.enabled{
		right: 0;
	}

	.praxis p.half{
    	width: 100%;
    	float: none;
    }

	.stage{
		width: 100%;
		margin: 0;
	}

	.info{
		padding: 2em;
		margin: 0 0 2em;
	}

	.info h3{
		background: url(../img/icon-info.svg) center left no-repeat;
		padding-left: 1.625em; 
	}

	#uebermich div.wrap{
		padding: 0 3.750em 0;
		position: relative;
		bottom: 4.375em;
	}

	#ubermich img{
		z-index: 0;
	}

	#uebermich h1{
		color: #fff;
		margin-bottom: 2em;
	}

	#uebermich .year{
    	float: left;
    	display: block;
    	width: 6.875em;
    }

    #uebermich span.description{
    	display: flex;
    }

    #uebermich ul ul{
    	margin-left: 7.125em;
    }

    #map{
		height: 23.750em;
	}

	form p.half:nth-of-type(2), form p.half:nth-of-type(4){
		padding-right: 0;
	}
}

@media only screen
and (min-width : 1490px){
    html{
        -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
    }

	header.sticky{
		top: 0;
	}

	header h1 img{
		width: 13em;
		margin: 3.438em auto -5.500em auto;
		display: block;
	}

	header nav{
		width: 85.625em;
	    margin: 1.875em auto 1.875em auto;
	}

	header nav a{
	    padding: 0.8em 7% 0.8em 0;
	    font-size: 1em;
	    float: none;
	    display: inline;
	}

	header nav li:nth-of-type(2) a{
		float: none;
		text-align: left;
	}

	header nav li:nth-of-type(3) a{
		width: auto;
		float: none;
		position: relative;
		left: 33.750em;
		text-align: right;
		padding: 0.8em 0;
	}

	header nav li:nth-of-type(4) a{
		width: auto;
		float: none;
		position: relative;
		left: 41.875em;
		text-align: right;
		padding: 0.8em 0;
	}

	progress{
		height: 0.375em;
	}

	h1{
		font-size: 2.750em;
		margin-bottom: 1em;
	}

	section {
		top: 9.375em;
	}

	section article p, section article ul{
		font-size: 1.125em;
	}

	section article h2, .praxis h1{
		font-size: 1.500em;
	}

	.wrap{
		width: 85.625em;
		margin: 0 auto;
		padding: 7.5em 0 5.5em;
	}

	.praxis .wrap{
		width: 19.375em;
		padding: 3.563em;
		overflow: hidden;
	}

	.praxis{
		width: 19.375em;
		margin: 0;
		position: fixed;
		top: 15em;
		right: 0;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	  	z-index: 1;
	}

	.praxis .half{
		padding: 0;
		float: none;
	}

	.praxis.disabled{
		right: -19.375em;
	}

	.praxis-icon-close{
		display: block;
		width: 19.375em;
		height: 4em;
		background: url(../img/arrow-right.svg) no-repeat 1.625em 1.625em #b00835;
		position: absolute;
		top: -2em;
		right: 0;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	}

	.praxis-icon-open{
		display: block;
		width: 3.9em;
		height: 3.9em;
		background: url(../img/pin.svg) no-repeat 1.438em 1.375em #b00835;
		position: fixed;
		top: 13em;
		right: -3.9em;
		-webkit-transition: all 1s ease-in-out;
	  	-moz-transition: all 1s ease-in-out;
	  	-o-transition: all 1s ease-in-out;
	  	transition: all 1s ease-in-out;
	}

	.praxis-icon-open.enabled{
		right: 0;
	}

	.praxis p.half{
    	width: 100%;
    	float: none;
    }

	.stage{
		width: 100%;
		height: 88vh;
		margin: 0;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}

	.stagepic{
		display: block;
  		width: 100vw;
  		height: 100vh;
  		object-fit: cover;
	}

	.scrolldown{
		width: 4em;
		height: 4em;
		display: block;
		position: absolute;
		margin-left: -2em;
		bottom: 4em;
		left: 50%;
	}

	.scrolldown img{
		-webkit-animation: scroll 2s infinite;
	}

	@-webkit-keyframes scroll {
        0% {
            margin-top: 0; 
        }
        50% {
            margin-top: 1em;
        }
        100% {
            margin-top: 0;
        }
    }

	.info{
		padding: 3em;
		margin: 3em 0;
		font-size: 1.1em;
	}

	.info h3{
		background: url(../img/icon-info.svg) center left no-repeat;
		padding-left: 1.6em;
	}

	.info p{
		margin: 0;
		font-size: 0.875em;
		line-height: 1.6;
		color: #444;
	}

	#uebermich div.wrap{
		padding: 0 3.750em 0;
		position: relative;
		bottom: 5.750em;
	}

	#ubermich img{
		z-index: 0;
	}

	#uebermich h1{
		color: #fff;
		margin-bottom: 2em;
	}

	#uebermich .year{
    	float: left;
    	display: block;
    	width: 6.875em;
    	font-size: 1em;
    }

    #uebermich span.description{
    	display: flex;
    }

    #uebermich ul ul{
    	margin-left: 7.8em;
    }

    #map{
		height: 26.563em;
	}

	#kontakt div.half:nth-of-type(2){
		margin-top: -5.313em;
	}

	#kontakt div.half:nth-of-type(2) h2{
		margin-bottom: 1.1em;
	}

	form p.half:nth-of-type(2), form p.half:nth-of-type(4){
		padding-right: 0;
	}

}