body,
html {
	margin: 0;
	padding: 0;
}

body {
	color: #333;
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
	font-weight: 100;
	font-size: 14px;
	line-height: 1.7;
	background-color: #f0f1f5;
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: fixed;
	-webkit-background-size: 600px 920px;
}

#gl_silber {
	background: url(images/great-lenghts-silber.png) no-repeat center center;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	margin-top: -150px;
	opacity: 0.23;
	width: 100%;
	height: 300px;
}

.coe {
	position: relative;
	float: right;
	width: 150px;
	top: -50px;
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.coe:hover {
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.1));
}

.logo {
	position: absolute;
	width: 7%;
	right: 30%;
	top: 10%;
	display: inline-block;
	vertical-align: top;
	display: inline;
	text-align: left;
	float: center;
	margin: 2% 1% 0 0;
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	transform: rotate(22deg);
}

.logo:hover {
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.08)) drop-shadow(0 1px 18px rgba(0, 0, 0, 0.10)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.08)) drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.1));
}

#logo_container {
	position: absolute;
	width: 35%;
	right: 4px;
	bottom: 145px;
	white-space: nowrap;
}

#start {
	background-image: url(images/bg-bruehl-big-startseite.jpg);
}

#aktuelles {
	background-image: url(images/bg-bruehl-big-aktuelles.jpg);
}

#team {
	background-image: url(images/bg-bruehl-big-team.jpg);
}

#salon {
	background-image: url(images/bg-bruehl-big-saloneinblicke.jpg);
}

#trends {
	background-image: url(images/bg-bruehl-big-trends.jpg);
}

#preise {
	background-image: url(images/bg-bruehl-big-preise.jpg);
}

#farbe {
	background-image: url(images/bg-bruehl-big-farbe.jpg);
}

#specials {
	background-image: url(images/bg-bruehl-big-specials.jpg);
}

#kontakt {
	background-image: url(images/bg-bruehl-big-kontakt.jpg);
}

#anfahrt {
	background-image: url(images/bg-bruehl-big-anfahrt.jpg);
}

#jobs {
	background-image: url(images/bg-bruehl-big-jobs.jpg);
}

#impressumseite {
	background-image: url(images/bg-bruehl-big-impressum.jpg);
}

#extensions {
	background-image: url(images/bg-bruehl-big-extensions.jpg);
}

#zweithaar {
	background-image: url(images/bg-bruehl-big-zweithaar.jpg);
}

#olaplex {
	background-image: url(images/bg-bruehl-big-olaplex.jpg);
}

/*Hygiene*/

.hygiene dd{
margin-left:100px;
margin-bottom:50px;
position:relative;
}

.hygiene dt{
margin-top:50px;
margin-bottom:25px;
    font-size:1.5em;
    color:#99181c;
}

.hygiene img{
position:absolute;
width:100px;
height:auto;
margin-left:-120px;
top:-25px;
}

/* POPUP */

#popup{
position:absolute;
z-index:100;
left: 50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
box-sizing:border-box;
width:90%;
max-width:600px;
height:auto;
border:0.2em solid #fff;
z-index:999;
padding: 0;
-moz-border-radius:1em;
border-radius:0.5em;
text-align:center;
box-shadow:rgba(100,100,100,0.3) 0 0 0.2em 0.2em;
background:#eee;
background:rgba(230,230,230,0.95);
color:#000;
font-size:0.7em;
text-align: left;
overflow:hidden;
}

#popup img{
width:100%;
max-width:700px;
height:auto;
float:left;
}


#popup h1{
font-size:1.5em;
font-weight:300;
padding-top:0;
margin-top:1em;
line-height:1;
color:#ff8e04;
}

#closepopup{
font-weight:800;
position:absolute;
top:0.5em;
right:0.5em;
line-height:1;
margin:0;
padding:0;
cursor:pointer;
font-size:4em;
color:black;
}


::selection,
::-moz-selection {
	color: #fff;
	background: #333;
}

h1,
h2 {
	font-size: 2.3em;
	line-height: 1.3;
	font-weight: 100;
}

h2 {
	font-size: 1.5em;
	padding-top: 3em;
}

strong {
	font-weight: 600;
}

a {
	color: #333;
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9;
}

#logo {
	position: relative;
	display: block;
	margin-top: 4em;
	text-indent: -999px;
	overflow: hidden;
	width: 240px;
	height: 130px;
	background: url(images/logo-bruehl.png) no-repeat center center;
}

#footer {
	width: 100%;
	margin-top: 50px;
	padding: 0.5em 0 3em 0;
	border-top: 1px solid #333;
	font-size: 0.8em;
	line-height: 1.4em;
}

#content {
	margin: 4em 0 2em 0;
	position: relative;
	left: 8em;
	width: 50%;
	max-width: 700px;
}

.firmierung {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.ultrafett {
	font-weight: 800;
	color: #990033;
}

.impressum {
	font-size: 0.7em;
}

img.width3 {
	width: 30.333%;
	display: inline-block;
	vertical-align: top;
	display: inline;
	text-align: left;
	border: 1px solid #fff;
	margin: 2% 1% 0 0;
}

#social {
	position: absolute;
	margin-top: 4em;
}

#social a {
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	overflow: hidden;
	text-indent: -999px;
	margin: 0 0 0.5em 0;
	background-color: #99181c;
	background-image: url(images/bg-social-media.png);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-o-transition: background 0.3s;
	transition: background 0.3s;
}

#button-geschenkgutschein {
	background-position: -120px 0;
}

#button-anfahrt {
	background-position: -40px 0;
}

#button-onlinetermin {
	background-position: -80px 0;
}

#button-gutschein {
	background-position: 0 0;
}

#button-phone {
	background-position: -160px 0;
	visibility: show;
}

#social a:hover {
	background-color: #661013;
}

#nav {
	width: 100%;
	position: fixed;
	top: 0;
	margin: 0;
	left: 0;
	z-index: 800;
}

#nav>a {
	display: none;
}

#nav ul,
#nav li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#nav li {
	position: relative;
}

#nav li a {
	color: #fff;
	display: block;
	text-decoration: none;
}

#nav li a:active {
	background-color: #99181c !important;
}

#nav span:after {
	width: 0;
	height: 0;
	border: 0.313em solid transparent;
	border-bottom: none;
	border-top-color: #fff;
	content: '';
	vertical-align: middle;
	display: inline-block;
	position: relative;
	right: -0.6em;
}

#nav>ul {
	height: 2.5em;
	background-color: #99181c;
}

#nav>ul>li {
	width: 20%;
	height: 100%;
	float: left;
}

#nav>ul>li>a {
	height: 100%;
	line-height: 2.5em;
	text-align: center;
}

#nav>ul>li:not(:last-child)>a {
	border-right: 1px solid #661013;
}

#nav>ul>li:hover>a,
#nav>ul:not(:hover)>li.active>a {
	background-color: #99181c;
}

#nav li ul {
	background-color: #99181c;
	display: none;
	position: absolute;
	top: 100%;
}

#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
}

#nav li:not(:first-child):hover ul {
	left: -1px;
}

#nav li ul a {
	border-top: 1px solid #661013;
	padding: 0.7em 1.5em;
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	-o-transition: background 0.3s;
	transition: background 0.3s;
}

#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
	background-color: #661013;
}

#map-canvas {
	width: 100%;
	height: 400px;
	position: relative;
	font-size: 0.8em;
	color: #3c3937;
}

#map-canvas img {
	max-width: none;
}

#map-content {
	font-weight: 300;
	padding: 10px 10px 10px 25px;
	margin: 0;
	line-height: 20px;
}

#map-content strong {
	font-weight: 800;
}

#map-canvas label {
	width: auto;
	display: inline;
}

.ok,
.not_ok,
textarea {
	font-size: 1em;
	color: #000;
	border-radius: none;
}

.ok,
textarea {
	border: none;
}

.ok,
.not_ok {
	height: 3.5em;
	margin-bottom: 1em;
	width: 96%;
	padding: 0 2%;
	box-shadow: inset 0 0 0.5em #ccc;
	background: #fff;
}

.links,
.rechts {
	padding-bottom: 0.5em;
	width: 49%;
	display: inline-block;
	float: left;
	text-align: left;
}

.links {
	margin-right: 1%;
}

.rechts {
	margin-left: 1%;
}

.not_ok {
	border: none;
	background: #fff url(images/hg-warning.png) no-repeat 1% center;
	padding-left: 10%;
	width: 88%;
}

.warning {
	color: #FF9900;
}

textarea {
	width: 96%;
	padding: 2%;
	background: #fff;
	box-shadow: inset 0 0 0.5em #ccc;
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
}

.submit {
	display: inline-block;
	padding: 7px 10px;
	border-radius: 5px;
	border: none;
	min-width: 180px;
	margin: 0 auto;
	margin-top: 1em;
	background: #99181c;
	color: #fff;
	font-size: 1em;
	font-weight: 300;
	font-family: 'Fira Sans', Helvetica, Arial, sans-serif;
	text-decoration: none;
	text-align: center;
}

.submit:hover,
#submit:focus,
.more:hover {
	color: #fff;
	background: #661013;
}

table {
	width: 100%;
	border: 0;
	padding: 0;
	text-align: left;
	margin-top: 40px;
}

td {
	padding: 3px 3px 3px 7px;
	height: 10px;
	vertical-align: bottom;
}

tr {
	background: #ddd;
	background: rgba(230, 230, 230, 0.7);
}

.impressum {
	font-size: 0.8em;
	line-height: 14px;
	margin-top: 20px;
}

.preis {
	text-align: right;
	width: 90px;
}

table.impressum .preis {
	text-align: center;
}

#termin dt, #termin dd{
margin:0;
padding:0;
}

#termin dt:hover{
background: #661013 url("data:image/svg+xml,%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 66 66'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:rgba(255,255,255,1);stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='30' cy='30' r='30' /%3E%3Cline class='cls-1' x1='15' y1='30' x2='45' y2='30'/%3E%3Cpolyline class='cls-1' points='35 40 45 30 35 20'/%3E%3C/svg%3E") no-repeat 0.5em 0.75em/1.0em;
}

#termin dt{
padding:7px 0 7px 40px;
display:inline-block;
margin-top:1em;
border-radius:0.5em;
min-width:160px;
background:#99181c url("data:image/svg+xml,%3Csvg id='Ebene_1' data-name='Ebene 1' xmlns='http://www.w3.org/2000/svg' viewBox='-3 -3 66 66'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;stroke:rgba(255,255,255,1);stroke-linecap:round;stroke-linejoin:round;stroke-width:5px;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='30' cy='30' r='30' /%3E%3Cline class='cls-1' x1='15' y1='30' x2='45' y2='30'/%3E%3Cpolyline class='cls-1' points='35 40 45 30 35 20'/%3E%3C/svg%3E") no-repeat 1em 0.75em/1.0em;
}

#termin dt a{
color:#fff;
	text-decoration:none;
width:100%;
    display:inline-block;
}

#termin dd{
font-size:0.8em;
}

@media screen and (min-width:1380px) {
	.logo {
		width: 7%;
		right: 40%;
		top: 6%;
	}
}

@media screen and (max-width:900px) {
	#start,
	#aktuelles,
	#team,
	#salon,
	#trends,
	#preise,
	#farbe,
	#specials,
	#kontakt,
	#anfahrt,
	#impressumseite,
	#extensions,
	#olaplex,
	#zweithaar,
	#jobs {
		background: #f0f1f5;
	}
	.logo {
		width: 18%;
		right: -8%;
		top: 6%;
	}
	span {
		text-align: left;
	}
	#content {
		left: 10%;
		width: 80%;
	}
}

@media screen and (max-width:650px) {
	body {
		font-size: 12px;
	}
	.logo {
		width: 13%;
		right: -7%;
		top: 27%;
	}
	#button-phone {
		background-position: -160px 0;
		visibility: show;
	}
	#submit {
		width: auto;
		height: auto;
	}
	#logo {
		margin-top: 0;
		width: 100%;
	}
	.links,
	.rechts {
		padding-bottom: 0.5em;
		width: 100%;
		display: inline-block;
		float: left;
		text-align: left;
		margin: 0;
	}
	#social {
		position: relative;
		margin: 2em 10%;
		text-align: center;
		width: 80%
	}
	#content {
		margin-top: 2em;
	}
	#social a {
		display: inline-block;
	}
	.firmierung {
		display: block;
	}
	#nav {
		position: relative;
		top: auto;
		left: auto;
		font-size: 1.2em;
	}
	#nav>a {
		width: 100%;
		height: 4em;
		text-align: left;
		text-indent: -9999px;
		background: #99181c url(images/menue-icon.png) no-repeat center center;
		position: relative;
	}
	#nav>a:after {
		top: 60%;
	}
	#nav:not(:target)>a:first-of-type,
	#nav:target>a:last-of-type {
		display: block;
	}
	#nav>ul {
		height: auto;
		display: none;
		position: absolute;
		left: 0;
		right: 0;
	}
	#nav:target>ul {
		display: block;
	}
	#nav>ul>li {
		width: 100%;
		float: none;
	}
	#nav>ul>li>a {
		height: auto;
		text-align: left;
		padding: 0.5em 2em;
	}
	#nav>ul>li:not(:last-child)>a {
		border-right: none;
		border-bottom: 1px solid #661013;
	}
	#nav li ul {
		position: static;
		padding: 1.25em;
		padding-top: 0;
	}
	#nav li ul a {
		border-top: none;
		border-bottom: 1px solid #661013;
		padding: 0.75em 1.5em;
	}
    
#termin dt, #termin dd{
text-align:center;
}

#termin dt{
margin-left:50%;
transform:translateX(-50%);
}
    
#termin dt a{
text-align:left;
}
}

@media screen and (max-width:625px) {
	.logo {
		width: 15%;
		right: -7%;
		top: 27%;
	}
	.coe {
		width: 100px;
		top: 0px;
	}
}

@media screen and (max-width:480px) {
	.accordion h3 {
		padding: 10px 14%;
		background: #333 url(images/hg-accordeon.png) no-repeat 5px 2px;
	}
	.logo {
		width: 20%;
		right: -7%;
		top: 27%;
	}
	.coe {
		width: 75px;
		top: 0px;
	}
}

@media screen and (max-width:330px) {
	.coe {
		display: none;
	}
}

.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.responsive-video {
	position: relative;
	padding-bottom: 56.25%;
	/* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
}