/*====================*/
/*=== 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:10px;	
	font-weight:normal;
	vertical-align:baseline;
}

/* SEITENBESCHREIBUNG*/
Name: Haarmoonie;
Description: Haarmoonie Marion Adler Friseursalon Startseite;
Author: Marion Adler | http://www.jobidoo.de;
Version: 1.0 | Release: 2015-04-01;
Copyright: © job e.K. 2015;


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

h1 {color:rgba(31,0,0,1.0);font-size:18px; line-height:18px;}
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:100%;
height:12.5vh;
margin:0;
padding:0;
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:12px; 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:8px;}
.wrapper_brown a:hover{color:rgba(179, 149, 70, 1.0);}

/*SECTION HOME*/
#section_home {
}

#img_home {
margin:20px 0px;
width:220px;
height:auto;
};



/*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_text {
text:left;
display:block;
color:rgba(0,0,0,1.0);
font-size:12px;
text-align:justify;
vertical-align:bottom;
background:rgba(32,0,0,0);
width:70vw;
height:auto;
margin:4vh 0;
padding:0 0 0 0;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
}

#wir_img {
float:left;
width:24%;
height:auto;
margin:0 1% 2% 0;
padding:0;
}

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

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

/*SECTION JOBS*/
#jobs_img {
float:left;
width:71vw;
height:auto;
margin:0;
padding:0 0 2% 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:12px;
font-weight:700;
line-height:;
margin:0;
padding:0 0 2vh 0;
}

#kontakttabelle .map {
padding:0;
} 

#kontakttabelle .text {
padding:0;
font-size:8px;
line-height:;
} 

#kontakttabelle .text span {
font-size:8px;
display:inline-block;
width:5vw;
min-width:;
}

#kontakttabelle .text a {
font-size:8px;
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:8px;
line-height:12px;
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:20px;
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, #wrapper_caption_space_h1  {
color:rgba(32,0,0,1.0);
font-size:20px;
font-size:20px;
line-height:30px;
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:12px;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:8px;}

#rahmen {
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(32,0,0,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 p, #rahmen_auftritt pp {font-size:12px; color:rgba(31, 0, 0, 1.0);}
#rahmen a, #rahmen_auftritt a {font-size:12px; color:rgba(31, 0, 0, 1.0);}
#rahmen a:hover, #rahmen_auftritt a:hover{color:rgba(179, 149, 70, 1.0);}
#rahmen td, #rahmen_auftritt td {font-size: 12px; 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 {
height:auto;
min-height:10vh;
margin:0 0 0 0;
}

#footer_inner {
padding:2vh 0 2vh 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:40px;
	width:40px;
	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:40px;
	width:40px;
	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:40px;
	width:40px;
	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:40px;
	width:40px;
	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;}