/* @override 
	http://kosmetik-im-fronhof2019.kosmetik-im-fronhof.de/css/styles.css?*
	https://kosmetik-im-fronhof.de/css/styles.css?* */

@import url(//fonts.googleapis.com/css?family=Lato:300,400,700);

/* @group reset */

body{-webkit-text-size-adjust:none;font-size:12px;line-height:1.3em;font-family:Verdana,Arial,Helvetica,sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}h4{font-size:16px}h5{font-size:14px}h6{font-size:12px}h1,h2,h3,h4,h5,h6{line-height:1em;padding-bottom:.5em}ol,ul{padding-left:2em}p,ul,ol{padding-bottom:.5em}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}a:hover,a:active,:focus{outline:0}body{color:black;background:white}a img{border:0}pre,code,samp,kbd,var,input[type="password"]{font-family:"DejaVu Sans Mono","Bitstream Vera Sans Mono",Consolas,Monaco,"Liberation Mono",Andale Mono,monospace;font-size:.9em}dt,strong,th,samp,dfn,h1,h2,h3,h4,h5,h6{font-weight:bold}blockquote,q{font-style:italic}blockquote cite,q cite{font-style:normal}acronym,abbr{cursor:help}acronym{letter-spacing:.07em}ul,ol,dl{position:relative}.clear{clear:both}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}textarea{overflow:auto}

/* @end */

/* @group stay down */

html, body, #wrap {
	height: 100%;
}

body > #wrap {
	height: auto;
	min-height: 100%;
}

#main {
	padding-top: 20px/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<*/;
	padding-bottom: 350px; /* #1# */
}

#footer {
	position: relative;
	margin-top: -350px; /* #-1# */
	height: 350px; /* #1# */
	clear: both;
	background: url(footer.bg.png) repeat-x center top;
}
.footer{
	height: 350px; /* #1# */
}

/* @end */


body{
	font-family: 'Lato', sans-serif;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}


.cookiebanner {
	background: #0078b8;
	padding: 3px;
	text-align: center;
}
.cookiebanner, .cookiebanner * {
	color: #fff;
}
.cookiebanner input {
	border: none;
	background: #4f8fc3;
	padding: 2px 5px;
	margin-left: 5px;
}

@media (max-width: 1000px) {
	body{
		background-position: left !important;
	}
}

#main, .footer{
	width: 1000px;
	margin: 0 auto;
}

#main{
	background: url(main.bg.abdecker.png) no-repeat;
}

.main, .footer{
	position: relative;
}

.logo{
	position: absolute;
	top: 25px;
	left: 95px;
}
.moodimg{
	position: absolute;
	right: 0;
	right: 110px;#<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
}

/* @group navi */

.navi{
	padding: 285px 0 30px 10px;
	width: 185px;
}
.navi *{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}

.navi a{
	display: block;
	padding: 4px 8px;
	margin-bottom: 4px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	font-size: 14px;
}

.navi ul ul{
	margin-left: 20px;
}
.navi a{
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
.navi a:hover{
	-webkit-transition: all 0.1s;
	transition: all 0.1s;
}
.navi ul ul a, .navi ul ul a:hover{
	-webkit-transition: all 0s;
	transition: all 0s;
}
.navi, .text {
	float: left;
}

.navi ul ul{
	display: none;
}

.navi .current>ul{
	display: block;
}

.navi li span {
	display: inline-block;
	width: 8px;
}

/* @end */

.footertext{
	position: absolute;
	left: 265px;
	top: 150px;
}
.footertext, .footertext td a{
	font-size: 14px;
	line-height: 1.1em;
}
.footertext .current{
	font-weight: bold;
}
.footertext td {
}

#footer .kontakt{
	display: inline-block;
	padding: 4px 28px;
	text-decoration: none;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	margin: -4px 0 0 0;
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
	margin-bottom: 8px;
}

#footer .logos{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid red;
	width: 600px;
	height: 100px;
}
#footer .logos img{
	margin-right: 10px;
	cursor: pointer;
}


.text{
	margin-left: 20px;
	padding: 280px 0 0 50px;
	width: 600px;
	font-size: 15px;
	line-height: 1.4em;
	color: #333;
}

.text.team td{
	padding: 0 40px 20px 0;
}

.gal img{
	margin: 0 5px 5px 0;
	border: 1px solid #0D76BB;
}

.gal a:hover img{
	border: 1px solid #999;
	opacity: 0.9;
}


h1{
	font-weight: 300;
	font-size: 32px;
	margin-bottom: 0.7em;
}

h2{
	margin-top: 20px;
	font-weight: 300;
}

h3{
	margin-top: 20px;
	font-weight: 300;
}

.fr{
	float: right;
	margin: 0 -70px 30px 30px;
}

hr {
	border: none;
	height: 1px;
	background: #0E76BB;
}





.aktuelles{
	float: right;
	width: 200px;
	margin: 10px -100px 80px 50px;
	padding: 10px;
	font-size: 13px;
	line-height: 1.3em;
	border: 1px solid #8ec1e0;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0px 0px 10px #0e76bb;
	-webkit-box-shadow: 0px 0px 10px #0e76bb;
	box-shadow: 0px 0px 10px #0e76bb;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
.aktuelles h1{
	font-size: 1.3em;
	font-weight: bold;
	margin: 0;
	padding: 0;
}
.aktuelles h2{
	font-size: 1.2em;
	margin: .5em 0 .1em 0;
	padding: 0;
	font-weight: 400;
}








.flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.flex>div {
	width: 160px;
	margin: 0 10px 10px 0;
}

.flex img {
	width: 160px;
	height: 110px;;
}





#accordion {
	margin-bottom: 20px;
}

.ui-accordion .ui-accordion-content {
	margin-top: 1.5em;
}








.partner {
}

.partner div {
	width: 170px;
	height: 100px;
	text-align: center;
	border: 1px solid #bd8c53;
	float: left;
	margin: 0 10px 10px 0;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.partner img {
	//width: auto;
	height: auto;
	max-height: 80px;
	max-width: 120px;
}






.menuOverText {
	margin: 6px 0;
	color: #aaa;
}








.text ul {
	list-style-image: url('ul.bullet.png');
	padding: 15px;
}









.footer h3 {
	margin: 0;
}









/* @group kontaktform */

.bd_kontaktform{
	padding-top: 1em;
	width: 680px;
}

.bd_kontaktform td{
	padding: .2em;
}

.bd_kontaktform label:hover{
	background-color: #fdf6b5;
	padding: .1em;
	margin: -.1em;
	cursor: pointer;
}

.bd_kontaktform input, .bd_kontaktform textarea {
	background: #FFF;
	border: 1px solid #aaa;
	padding: .2em;
	margin-right: .5em;
	font-size: 1em;
	font-weight: 300;
}

.bd_kontaktform textarea {
	width: 450px !important;
	height: 5em !important;
}

.bd_kontaktform .bd_formfehler {
	background: #ffd0c9;
	border: 1px solid #FD0000;
}

.bd_kontaktform #send {
	padding: 0 1em;
}

.bd_kontaktformok {
	padding: 4px 5px;
	background: #bc8e4c;
	color: #fff;
	margin-bottom: 0.5em;
	font-size: 14px;
	font-weight: 700;
	width: 670px;
}

.bd_kontaktformfehler {
	padding: 2px 5px;
	background: #FD0000;
	color: #fff;
	border: 1px solid #FD0000;
	margin-bottom: 0.5em;
	width: 670px;
}

.bd_kontaktform input[type="submit"]{
	padding: 4px 12px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #bc8e4c;
	color: #fff;
	font-weight: 300;
	border: none;
	cursor: pointer;
	font-size: 1em;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
.bd_kontaktform input[type="submit"]:hover{
	cursor: pointer;
	background: #000;
	color: #fff;
}

.bd_kontaktform input[disabled],.bd_kontaktform input[disabled="disabled"]{
	opacity: 0.1;
	background: #000;
	color: #fff;
	cursor: wait !important;
}

.bf_kform_pstar, .bf_kform_pflicht{
	color: #999;
	font-size: .7em;
	margin-left: -.6em;
	position: absolute;
}
label .bf_kform_pstar {
	margin-left: 0;
}

.bf_kform_pflicht{
	font-style: italic;
}

.bd_captchaimg{
	margin-bottom: -6px;
	margin-right: 3px;
	height: 1.4em;
}

.mailformcounter{
	cursor: default;
	color: #fed0c9;
	font-weight: 600 !important;
}



.bd_kontaktform table tr:first-child td:first-child{
	white-space: nowrap;
}








/* @end */






/* @group galerie */

/* @group übersicht */

.bd_galery_overview>div{
	float: left;
	overflow: hidden;
	position: relative;
	margin: 0 1em 1em 0;
	border:  1px solid transparent;
}
.bd_galery_overview>div:hover{
	border: 1px solid #00f;
}
.bd_galery_overview .bd_galery_overview_link{
	width: 100%;
	background: #000;
	background-color: rgba(0,0,0,.3);
	position: absolute;
	bottom: 0;
	color: #fff !important;
	text-decoration: none;
	font-size: .9em;
	line-height: 1em;
	padding: .1em;
	-webkit-backdrop-filter: blur(10px);
	-moz-backdrop-filter: blur(10px);
	-ms-fbackdrop-filter: blur(10px);
	-o-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* @group quadratische bildausschnitte */

.bd_galery_overview>div div {
	position: relative;
	width: 7em;
	height: 7em;
	overflow: hidden;
}
.bd_galery_overview>div div img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.bd_galery_overview>div div img.portrait {
	width: 100%;
	height: auto;
}


/* @end */

/* @end */

/* @group einzelgalerie */

.bd_galerie a, .bd_galerie a:hover{
	margin: 0;
	padding: 0;
}

.bd_galerie figure,
.bd_galerie div{
	float: left;
	margin: 0 1em 1em 0;
}

.bd_galerie figure,
.bd_galerie div{
	border: 1px solid transparent;
	float: left;
}

.bd_galerie figure:hover,
.bd_galerie div:hover{
	border: 1px solid #bc8e4c;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
}

/* @group quadratische bildausschnitte */

.bd_galerie figure,
.bd_galerie div {
	position: relative;
	width: 7em;
	height: 7em;
	overflow: hidden;
}
.bd_galerie figure img,
.bd_galerie div img {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.bd_galerie figure img.portrait,
.bd_galerie div img.portrait {
	width: 100%;
	height: auto;
}

/* @end */

/* @end */

/* @end */







/* @group colors */

/* @group dermatologie */

.dermatologie #footer{
	background: url(footer.dermatologie.bg.png) center;
}
.dermatologie .footer{
	background-image: url(footer.dermatologie.bg2.png);
}
.dermatologie{
	background: url(bg.dermatologie.png) repeat-y center top;
}
.dermatologie #footer .kontakt{
	background-color: #0A76BB;
	color: #fff;
}
.dermatologie #footer .kontakt:hover{
	background-color: #fff;
	color: #0A76BB;
}
.dermatologie .navi a{
	background-color: #0A76BB;
	color: #fff;
}
.dermatologie .navi ul ul a{
	background-color: #3d8fd3;
	background-image: -o-linear-gradient(44deg, #3D8FD3 0.00%, #5BA5E2 100.00%);
	background-image: -moz-linear-gradient(44deg, #3D8FD3 0.00%, #5BA5E2 100.00%);
	background-image: -webkit-linear-gradient(44deg, #3D8FD3 0.00%, #5BA5E2 100.00%);
	background-image: -ms-linear-gradient(44deg, #3D8FD3 0.00%, #5BA5E2 100.00%);
	background-image: linear-gradient(44deg, #3D8FD3 0.00%, #5BA5E2 100.00%);
}
.dermatologie .navi ul ul ul a{
	background-color: #72b0ec;
	background-image: none;
}
.dermatologie .navi .current>a, .dermatologie .navi a:hover{
	background-color: #fff;
	background-image: none;
	color: #0A76BB;
}
.dermatologie h1, .dermatologie h2, .dermatologie h3, .dermatologie .text a,
.dermatologie .footertext, .dermatologie .footertext a{
	color: #0A76BB;
}
.dermatologie .text a:hover,
.dermatologie .footertext a:hover{
	color: #064771;
}
.dermatologie #footer .logos{
	border-top-color: #0A76BB;
}

/* @end */

/* @group kosmetik */

.kosmetik #footer{
	background: url(footer.kosmetik.bg.png) center;
}
.kosmetik .footer{
	background-image: url(footer.kosmetik.bg2.png);
}
.kosmetik{
	background: url(bg.kosmetik.png) repeat-y center top;
}
.kosmetik hr {
	border: none;
	height: 1px;
	background: #bc8e4c;
}
.kosmetik #footer .kontakt{
	background-color: #bc8e4c;
	color: #fff;
}
.kosmetik #footer .kontakt:hover{
	background-color: #fff;
	color: #bb8e4b;
}
.kosmetik .navi a{
	background-color: #bd8e4d;
	color: #fff;
}
.kosmetik .navi ul ul a{
	background-color: #cca267;
	background-image: -o-linear-gradient(44deg, #CCA267 0.00%, #D7AC70 100.00%);
	background-image: -moz-linear-gradient(44deg, #CCA267 0.00%, #D7AC70 100.00%);
	background-image: -webkit-linear-gradient(44deg, #CCA267 0.00%, #D7AC70 100.00%);
	background-image: -ms-linear-gradient(44deg, #CCA267 0.00%, #D7AC70 100.00%);
	background-image: linear-gradient(44deg, #CCA267 0.00%, #D7AC70 100.00%);
}
.kosmetik .navi .current>a, .kosmetik .navi a:hover{
	background-color: #fff;
	background-image: none;
	color: #C79E65;
}
.kosmetik h1, .kosmetik h2, .kosmetik h3, .kosmetik .text a,
.kosmetik .footertext, .kosmetik .footertext a{
	color: #BC8E4C;
}
.kosmetik .text a:hover,
.kosmetik .footertext a:hover{
	color: #966f38;
}
.kosmetik #footer .logos{
	border-top-color: #bc8e4c;
}


.kosmetik strong {
	color:  #bb8e4b;
}





/* @end */



/* @end */