/*====================*/
/*=== Reset Styles ===*/
/*====================*/
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-family:"Century Gothic",Arial, Helvetica, Sans-Serif;
	font:"Century Gothic";
	font-style:normal;	
	font-size:2.5vh;	
	font-weight:normal;
	vertical-align:baseline;
}

/* SEITENBESCHREIBUNG*/
Name: Haarmoonie;
Description: Haarmoonie Marion Adler Friseursalon Startseite;
Author: Marion Adler | https://www.van-der-biezen.de;
Version: 1.0 | Release: 2025-04-01;
Copyright: © job e.K. 2025;


*, p, label, h1, h2, ul, li {
color:rgba(31, 0, 0, 1.0);
font-size:2.5vh; 
max-height:;
}

h1 {color:rgba(31,0,0,1.0);font-size:6vh; line-height:6vh;}
h2 {font-weight:700}
ul {list-style-type:none;} 
a {text-decoration:none;outline:0;}


html, body{
line-height:;
width:100%;
height:100%;
overflow-x:hidden;
background:url(../img/back.jpg) rgba(255,255,255,1.0) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-ot-overflow-scrolling:touch;
overflow-scrolling:touch;
}

/* WRAPPER MAIN */
.main {
overflow-x:hidden;
position:absolute;
top:0;
width:100%;
height:100%;
z-index:1000;;
}

/*HEADER*/

#header{
position:fixed;
background:rgba(32,0,0,0.8);
width:inherit;
height:12.5vh;
margin:0 0 0 -1.25%;
padding:0 -1.25%;
overflow:hidden;
box-sizing:border-box;
}
#header p, #header li,#header a,#header ul {
color:rgba(0,0,0,1.0);
}

#h_banner{
float:;
position:;
display:;
background:;
border:;
border-radius:0;
width:;
padding:;
margin:;
}

#h_menue {
float:right;
display:inline-block;
position:;
width:auto;
height:6vh; /* HÖHE HEADER - PADDING TOP */
padding:6vh 1vw 0 0 ;
margin:0; /* Positionierung Menü */
zindex:;
}

#menu_back{
list-style-type:none;
}


#header a{font-size:2.5vh; color:rgba(255,255,255,1.0);} /* TEXTFARBE MENUE */
#header a:hover{color:rgba(179, 149, 70, 1.0);}  /* HOVERFARBE MENUE */

/*WRAPPER CLASS BLACK WHITE TRANSPARENT*/

.wrapper_white, .wrapper_black, .wrapper_brown, .wrapper_transparent {
float:left;
display:block;
width:100vw;
height:auto;
min-height:;
margin:0 0 0 0;
text-align:justify;
}

.wrapper_white {
color:rgba(0,0,0,1.0);
background:rgba(255,255,255,0.4);
background:url(../img/) rgba(255,255,255,0.4) no-repeat top left;
background-size: 100% 100%;
}

.wrapper_black {
color:rgba(255,255,255,1.0);
background:rgba(0,0,0,0.6);
}

.wrapper_brown {
color:rgba(255,255,255,1.0);
background:rgba(32,0,0,0.2);
}

.wrapper_transparent {
color:rgba(255,255,255,1.0);
background:rgba(0,0,0,0);
}

.wrapper_brown p, .wrapper_brown h1, .wrapper_brown td, .wrapper_brown span, .wrapper_brown a {
color:rgba(255,255,255,1.0);
}

.wrapper_brown a {display:inline; font-size:2.2vh;}
.wrapper_brown a:hover{color:rgba(179, 149, 70, 1.0);}

/*SECTION HOME*/
#section_home {
}

#img_home {float:left; margin:0 10vh 2vh 0};



/*SECTION SIE*/
#section_sie {
}

#sie_text{
float:left;
width:auto;
height:;
margin:0;
padding:2vh 2vw;
text-align:justify;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

#sie_img {
float:left;
width: auto; /*or your image's width*/
height: 50vh; /*or your image's height*/
margin: 0vh 5vw 0vh 10vw;
padding: 0;
}

#sie p, #sie h1 {
color:rgba(0,0,0,1.0);
}

/*SECTION SALON*/
#section_salon {
}

/*SECTION FRISUREN*/
#section_frisuren {
}

/*IFRAME FRISUREN*/
#iframe_frisuren{
width:100%;
height:90vh;
}

/*SECTION ZWEITHAAR*/
#section_zweithaar {
}

/*IFRAME ZWEITHAAR*/
#iframe_zweithaar{
width:70vw;
height:100vh;
}

/*SECTION WIR*/
#wir_img {
display:;
width:24%;
height:auto;
margin:0;
padding:0 1% 4% 0;
}

#wir .bold{
font-weight:700;
}

/*SECTION AUFTRITT*/
#img_auftritt {float:left;margin:0 10vh 2vh 0};

/*SECTION JOBS*/
#img_jobs {float:left;margin:0 10vh 2vh 0};

/*SECTION KONTAKT*/
#kontakttabelle {
width:100%;
height:100%;
position:relative;
margin:;
padding:0;
background:rgba(32,0,0,0);
-moz-user-select:none;
-khtml-user-select:none;
}

#kontakttabelle .bold{
font-weight:700;
}

#kontakttabelle p.caption{
text-align:left;
color:rgba(32, 0, 0, 1.0);
background:;
font-size:2.5vh;
line-height:6vh;
font-weight:700;
margin:0;
padding:0 0 2vh 0;
}

#kontakttabelle .map {
padding:0;
} 

#kontakttabelle .open {
padding:0;
} 

#kontakttabelle .text {
padding:0;
font-size:2.2vh;
} 

#kontakttabelle .text span {
font-size:2.2vh;
display:inline-block;
width:5vw;
}

#kontakttabelle .text a {
font-size:2.2vh;
color:rgba(32, 0, 0, 1.0);
}

#kontakttabelle .text a:hover {
color:rgba(179, 149, 70, 1.0);
}

#kontakttabelle p, #kontakttabelle span, #kontakttabelle td {
font-size:2.2vh;
line-height:2.2vh;
text-align:left;
}

#kontakttabelle td {
width:50%;
vertical-align:top;
}

#kontakttabelle .right {text-align:right;}
#kontakttabelle .left {text-align:left;, width:auto;}
#kontakttabelle .center {text-align:center;}



/*CONTENT*/
#content{
float:left;
width:;
}


/*CAPTION*/
#wrapper_caption, wrapper_caption_light {
display:block;
position:relative;
margin:5vh 12vw 2vh 0vw;
padding:0;
font-size:3vw;
text-indent:;
color:rgba(32,0,0,1.0);
width:75vw;
height:10vh;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
border:;
border-radius:0;
box-shadow:;
}

#wrapper_caption{
background:url(../img/)  rgba(0,0,0,0)  ;
background-size: 30vw 15vh;
}


#wrapper_caption_light {
background:url(../img/) rgba(0,0,0,0)  ;
background-size:30vw 15vh;
}

#wrapper_caption h1, #wrapper_caption_light h1  {
color:rgba(32,0,0,1.0);
font-size:3vw;
line-height:8vh;
text-align:left;
vertical-align:;
text-shadow:;
}

#wrapper_caption_space_h1 {
margin-top:0vh;
text-align:left;
}

#intro, #agb, #impressum, #sitemap{
width:auto;
height:auto;
position:relative;
padding:5vh;
margin:40vh 12vw 5vh 12vw;
text-align:justify;
color:rgba(255,255,255,1.0);
background:rgba(100,116,139,0);
border:;
border-radius:0;
box-shadow:;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
} 

#agb, #impressum, #sitemap{
min-height:;
} 

#intro p, #intro a, #agb p, #agb a, #impressum p, #impressum a, #sitemap p, #sitemap a  {font-size:2.5vh;color:rgba(31, 0, 0, 1.0);}
#intro a:hover, #agb a:hover, #impressum a:hover, #sitemap a:hover{color:rgba(179, 149, 70, 1.0);}
#intro td, #agb td, #impressum td, #sitemap td {color:rgba(179, 149, 70, 1.0);}
#intro h1, #agb h1, #impressum h1, #sitemap h1 {color:rgba(31, 0, 0, 1.0);}

#agb p, #agb a, #impressum p, #impressum a, #sitemap p, #sitemap a  {font-size:2.2vh;}

#rahmen, #rahmen_jobs {
width:auto;
height:auto;
min-height:;
position:relative;
padding:5vh;
margin:4vh 12vw 0vh 12vw;
text-align:justify;
color:rgba(0,0,0,1.0);
background:rgba(255,255,255,0);
border:;
border-radius:0;
box-shadow:;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
} 

#rahmen_jobs {
background:url(../img/) rgba(255,255,255,0)  ;
} 

#rahmen p, #rahmen_auftritt p, #rahmen_jobs p {font-size:2.5vh; color:rgba(31, 0, 0, 1.0);}
#rahmen a, #rahmen_auftritt a, #rahmen_jobs a {font-size:2.5vh; color:rgba(31, 0, 0, 1.0);}
#rahmen a:hover, #rahmen_auftritt a:hover, #rahmen_jobs a:hover{color:rgba(179, 149, 70, 1.0);}
#rahmen td, #rahmen_auftritt td, #rahmen_jobs td {font-size: 2.5vh; color:rgba(31, 0, 0, 1.0); vertical-align:top;}


#tops {
display:block;
position:fixed;
top:32vh;
font-size:5vh;
color:rgba(32,0,0,1.0);
background:url(../img/../img/feeling.png) rgba(255,255,255,0.8) no-repeat bottom right;
background-size: 24vw 12vh;
border:;
border-radius:0;
-webkit-box-shadow:;
-moz-box-shadow:;
-ms-box-shadow:;
-o-box-shadow:;
box-shadow:;
width:auto;
min-width:25vw;
height:40vh;
margin:0 65vw 0vh 7vw;
padding:6vh 3vw;
-moz-user-select:none;
-khtml-user-select:none;
}

#termin {
display:block;
position:absolute;
font-size:;
color:rgba(255,255,255,1.0);
background:url(../img/) rgba(32,0,0,0.6) no-repeat bottom right;
background-size: 24vw 12vh;
border:;
border-radius:0;
-webkit-box-shadow:;
-moz-box-shadow:;
-ms-box-shadow:;
-o-box-shadow:;
box-shadow:;
width:auto;
min-width:25vw;
max-width:30vw;
height:auto;
margin:32vh 30vw 0vh 60vw;
padding:1vw;
}

#termin > div {
width:36vw;
height:25vw;
position:relative;
padding:1vh 1vw;
z-index:1;
}    

#footer_inner {
padding:2vh 0 2vh 0;
}

#footer{
float:left;
width:100%;
background:rgba(32,0,0,0.6);
text-align:center;
padding:0;
height:auto;
min-height:10vh;
margin:0 0 0 0;
}

#footer p {font-size:2.5vh; background:rgba(0,0,0,0); color:rgba(255,255,255,1.0);}
#footer a {display:inline; font-size:2.5vh; color:rgba(255,255,255,1.0);}
#footer a:hover{color:rgba(179, 149, 70, 1.0);}

.clear {
clear:left;
}

.clearfix {
clear:both;
}

/* PRELOADER*/
#preloader {
	background: #000;
	position:fixed;
	left:0px; 
	top:0px; 
	width:100%; 
	height:100%; 
	text-align:center;
	color:#fff;
}
#preloader div {
	width:400px;
	margin:auto;
	height: 3px;
	text-align:center;
	border: 4px solid #111;
	overflow:hidden;
}
#preloader_image {
	position: relative;
	left:0px;
	top:-10px;
}


/* SCROLLTOP*/

#scrolltotop_right{
	display:none;
	z-index:10000;
	position:fixed;
	right:3.46vw;
	bottom:89.5vh;
	height:66px;
	width:66px;
	background: url(../img/scrollup.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrolltotop_right:hover{
	background: url(../img/scrollup_hover.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrolltotop_left{
	display:none;
	z-index:10000;
	position:fixed;
	left:3.46vw;
	bottom:89.5vh;
	height:66px;
	width:66px;
	background: url(../img/scrollup.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrolltotop_left:hover{
	background: url(../img/scrollup_hover.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrollback{
	display:none;
	z-index:10000;
	position:fixed;
	left:3.46vw;
	bottom:39.5vh;
	height:66px;
	width:66px;
	background: url(../img/scroll-back.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrollback:hover{
	background: url(../img/scroll-back_hover.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrollforeward{
	display:none;
	z-index:10000;
	position:fixed;
	right:3.46vw;
	bottom:39.5vh;
	height:66px;
	width:66px;
	background: url(../img/scroll-foreward.png) rgba(255,255,255,0);
	background-size:100% 100%;
}

#scrollforeward:hover{
	background: url(../img/scroll-foreward_hover.png) rgba(255,255,255,0);
	background-size:100% 100%;
}


.section {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.hintergrundbild {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hintergrundbild img {
	min-height: 100%;
	min-width: 100%;
}

iframe {width:100%;height:96%;min-height:600px;margin:5% 0;}