@charset "utf-8";
/* Styles fuer TF Haare*/

@font-face {
font-family: 'Raleway Light';
src: url('/fonts/Raleway-Light.ttf') format('truetype');
	 url('/fonts/Raleway-Light.woff') format('woff');
}

@font-face {
font-family: 'Raleway Medium';
src: url('/fonts/Raleway-Medium.ttf') format('truetype');
	url('/fonts/Raleway-Medium.woff') format('woff');
}

@font-face {
font-family: 'Amatic';
src: url('/fonts/AmaticSC-Regular.ttf') format('truetype');
	url('/fonts/AmaticSC-Regular.woff') format('woff');
}

body { 
  margin: 0px;
  padding: 0px;
  background-color: #e6d9cf;
  font-family: 'Raleway Light', Verdana, Geneva, sans-serif;
}


h1 {
	font-size: 2em;
	text-align:left;  
    color: #597680;
}

.mainheader {
	display: block;
	font: normal 5.0em 'Amatic', Verdana, Geneva, sans-serif;
	margin-top: 5px;
	margin-bottom: 5px;
}


h2 {
	font-size: 1.2em;
	font-weight: bold;  
    color: #000000;
	margin: 0 0 0.5em 0;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;  
    color: #000000;
	margin: 1em 0 0.3em 0;
}

p {
  font: normal 1.1em 'Raleway Light', Verdana, Geneva, sans-serif;
  text-align:left;
  text-decoration: none;
  margin: 0px;
}

b {
  font-weight: bold;
}

a {
  text-decoration:none;
  color: #000000;
  transition: color .5s ease;
}

ul li {
  list-style:none;
  display:block;
	padding-left: 0px;
}

/* Header -----------------------------------------------------*/
#header {
  width:100%;
}

#header img {
  width:100%;
}

.headerlogo {
  float: left;
  padding-right: 2em;
}

.headerkontakt {
  float: right;
  padding-right: 2em;
}

.headerzeiten {
  float: right;
	clear: both;
	font-size: 0.8em;
}


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

nav {
  color: #cfdce6;
  text-decoration: none;
  float: left;
  clear: right;
  width: 100%;
  margin-bottom: 0px;
}

nav ul li {
  list-style:none;
  display:block;
}

nav ul li a {
	font-size: 1.8em;
	color:#ffffff;
	
}
	
nav ul li a:hover
{
        color:#000000;
}

.menubig {  
  clear: both;
  width: 100%;
  color: #ffffff;
  background-color: #597680;
  padding: 0em 3% 0em 3%;
}

.tel,.tel:visited {
color:#000000;
text-decoration:none;
}

/* Mobiles Menue -----------------------------------------------*/
 .menu {
  text-decoration: none;
  float: right;
  clear: right;
  vertical-align: bottom;
}
 
.menu ul {
    display:inline-block;
}
 
.menu li {
    margin: 0px;
    float:left;
    list-style:none;
}
 
.menu li:last-child {
    margin-right:0px;
}
 
.menu a {
    font-size: 2em;
	color:#ffffff;
    transition:color linear 0.15s;
}
 
.menu a:hover, .menu .current-item a {
    text-decoration:none;
    color:#ffffff;
}

/* Hauptbox -----------------------------------------------*/

#maintable {
  margin-left: auto;
  margin-right: auto;
	float: left;
  width: 94%;
  background-color: #e6d9cf;
}

#maintablecontent {	
  vertical-align: top;
	  width: 100%;
}

#ueberuns {
  clear: both;
  width: 100%;
  padding: 0em 3% 2em 3%;
}

#ueberuns img {
  float: left;
padding-bottom: 0.3em;
}

.friseur {
 clear: both;
	float: right;
/* 	float: left;*/	
	padding-right: 1.5em;
	padding-bottom: 1.0em;
}

#salon, #kontakt {
  clear: both;
  width: 100%;
  color: #ffffff;
  background-color: #597680;
  padding: 0em 3% 2em 3%;
}

#salon h1, #kontakt h1 {
  color: #ffffff;	
}

#kontakt a {
 color: #ffffff;
}	
	
#angebot {
  clear: both;
  width: 100%;
  padding: 0em 3% 2em 3%;
}


/* Besondere Auszeichnungen -----------------------------------------------*/
.haftung {
	font: normal 0.8em 'Roboto Condensed', Verdana, Geneva, sans-serif;
	font-weight: 300;
}

/* Footer -----------------------------------------------*/

#footer {
  float: left;
  clear: both;
  width: 100%;
  color:#ffffff;
  height: auto;
  background-color: #806b59;
  padding: 1em 3% 0em 3%;
}

#footer a {
	text-decoration:none;
	float: left;
	clear: left;
	color:#ffffff;
	padding-bottom: 3px;
}

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

.copy {
  display: block;
	float: right;
	clear: both;
	}

	
/* Cookie Pop up*/

.cc_container .cc_btn {
background-color: #7ab51d !important; /* Farbe des Buttons */
color: #ffffff !important; /* Textfarbe des Buttons */
}
 
.cc_container {
background: #444444 !important; /* Hintergrundfarbe des gesamten Bereichs */
color: #ffffff !important; /* Schriftfarbe des gesamten Bereichs */
}
 
.cc_container a {
color: #7ab51d !important; /* Textlink-Farbe "Mehr Infos" */
}

/* Links ---------------------------------------------------------*/

a.linknormal {
	text-align:left;
	text-decoration:none;
	color:#7ab51d;
}


a:hover.linknormal {
	text-align:left;
	text-decoration:underline;
	color:#7ab51d;
}

a:link.mail {
	text-decoration:none;
}


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

/* versteckte Elemente ----------------------------------------*/

.hidden {
  display: none;
}

/* Verschiedene Breiten fuer RESPONSIVE LAYOUT -----------------*/

/* For large displays */
 @media (min-width: 1000px) {


}

/* For smaller displays like laptops */
@media (min-width: 800px) and (max-width: 1000px) {

.menu {
   display: none;
}

#maintable {
  margin: 20 40 20 40;
}

}

/* For tablets & smart phones */
@media (max-width: 800px) {

.menu {
   display: none;
}

#maintablecontent img {	
  clear: both;
  max-width:100% !important;
  height:auto !important;
  padding-top:10px;
}

.containersalon {
display: none;
}

.salonmobile {
display: block;
}

.salonmobile img {
width: 100%;
}

.tel,.tel:visited { /*for small screens */
color:#000000;
text-decoration:none;
}


}

 /* For smartphones */
@media (max-width: 520px) {

/* Toggle Menu fuer Smartphones-------------------------------------------------------*/
#mobileMenu {
        position: fixed;
      margin: 0px;
        width: 100%;
        display: block;
}

.menu {
    font: normal 1.0em 'bebas_neueregular', sans-serif;
    font-weight: 500;
	color:#ed8032;
    position: absolute;
    width: 100%;
    display: block;
	background-color:#FFF;
	margin-bottom: 10px;
	z-index:2;
    }
 
    .menu ul.active {
        display:none;
    }
 
    .menu ul {
        width:100%;
        position:absolute;
        top:25%;
        left:0px;
		margin-top:55px;
        padding: 0px;
        box-shadow:0px 1px 1px rgba(0,0,0,0.6);
        border-radius:3px;
        background: #806b59;
    }
 
    .menu ul:after {
        width:0px;
        height:0px;
        position:absolute;
        top:0%;
        left:22px;
        content:'';
        transform:translate(0%, -100%);
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-bottom:7px solid #ffffff;
    }
 
    .menu li {
    margin: 0px;
    width: 100%;
    text-align: left;
    padding-left: 30px;
    padding-top: 10px;
    padding-bottom: 12px;
    clear: both;
    display: block;
    border-bottom: 1px dotted #ffffff;
}

.menu li:active{
        background: rgba(200,200,200,0.8);
}

    .menu a {
        display:block;
    }
 
    .toggle-nav {
       margin-top: 0px;
      padding-top:10px;
      padding-bottom:10px;
      padding-left:15px;
      padding-right:15px;
        float:left;
        display:inline-block;
		position:absolute;
        box-shadow:0px 1px 1px rgba(0,0,0,0.15);
        border-radius:2px;
        background: #806b59;
        color:#777;
        font-size:20px;
        transition:color linear 0.15s;
    }
 
    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:#ffffff;
    }


#maintable {
  margin: 20 20 20 20;
}

#maintablecontent {
  vertical-align:top;
  padding: 20 25 20 25;
}

.headerlogo {
  margin-left: 25%;
  margin-right: 25%;
  display: block;
  width: 50%;
}

.headerkontakt {
  margin-left: 2%;
  margin-right: 2%;
	display: block;
font-size: 0.9em;
}

	

	
.containersalon {
display: none;
}

.salonmobile {
display: block;
}

.toggle-nav {
       display: none;

    }
.friseur {
	margin-left: 18%;
	margin-right: 18%;
	
}

.tel,.tel:visited { /*for small screens */
color:#000000;
text-decoration:none;
}

}