@charset "UTF-8";
/* CSS Document */

/* ------------------------------

MEDIADINGER
Hofackerstr. 96
79110 Freiburg

Tel. +49 761 15 293 493
www.mediadinger.de

--------------------------------- */

/* ****** FARBEN ****** */

:root {
}

body {
    font-family: 'montserrat', sans-serif;
    color: #f2f2f2;
	background-color: #121212;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 .h4, .h5, .h6 {
}

h1 { font-family: 'quentin', serif; text-align: center; font-size: 225px; color: #2e2e2e; margin-bottom: -140px; }

h2 { text-align: center; margin-bottom: 140px; font-weight: 300; }

p {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

a { color: #c59d5f; text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; text-decoration-color: #c59d5f; text-underline-offset: .5rem; }

.pads {
	padding-block: 100px;
}

#main button { background-color: #121212; border: 1px solid #fff; border-radius: 5px; font-size: 14px; color: #fff; text-transform: uppercase; font-weight: 700; letter-spacing: .25rem; padding: 10px 30px; margin-block: 30px; }
#main button:hover { background-color: #fff; color: #121212; }

.logo { height: 40px; }

.navbar.navbar-no-bg { height: 80px; }

.navbar {
	background: #444;
	-o-transition: all .6s;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	backface-visibility: hidden;
	height: 60px;
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, .6);
	text-transform: uppercase;
	font-size: 0.9rem;
}

.slider { width: 100%; height: 890px; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.start-slider { background-image: url(../img/bg_slider_empfang_info.jpg); width: 100%; height: 890px; background-position: center center; background-repeat: no-repeat; background-size: cover; }

main, #main, .main { line-height: 2rem; }

.flex { display: flex; margin-bottom: 15px; }

#start_team { background-color: #0A0A0A; }
.team_bild { background-image: url(../img/haircut.jpg); background-position: center right; background-repeat: no-repeat; background-size: cover; min-height: 600px; }
.team_text { padding-block: 50px; padding-inline: 50px; }

#start_leistungen { background-position: center center; background-size: cover; background-image: url(../img/bg_black_marble.jpg); background-attachment: fixed; }

#salons h3 { font-family: 'quentin', serif; font-size: 65px; }

#termin { background-image: url(../img/bg_haircut_parallax.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }

#gutscheine {  }

.gutschein_bild { background-image: url(../img/haarlimero_online_gutschein.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; }
.gutschein_text { padding-block: 50px; padding-left: 50px; }

fieldset { border: 1px solid #454545; padding: 50px; max-width: 850px; margin-inline: auto; margin-bottom: 80px; }
legend { float: none; width: auto; padding: 0 20px; }
.leistung { display: flex; flex-grow: 1; align-items: center; }


#footer {}

#footer h1 { font-family: 'montserrat', sans-serif; text-transform: uppercase; font-size: 1.2rem; font-weight: 700; color: #f2f2f2; text-align: left; margin-bottom: 30px;  }

address span { display: block; }
span { display: block; }

.copyright { background-color: #000; text-align: center; color: #2B2B2B; padding-block: 30px; }

.copyright a { color: #252525; text-decoration: none; }
.copyright a:hover { color: #414141; text-decoration: none; text-decoration-color: #414141; text-underline-offset: .5rem; }


#damen { background-image: url(../img/bg_haircut_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#herren { background-image: url(../img/bg_men_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#farben { background-image: url(../img/h1-parallax-1.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#kosmetik { background-image: url(../img/bg_kosmetik_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#sonstiges { background-image: url(../img/bg_sonstiges_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#extensions { background-image: url(../img/bg_hair_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }
#braut { background-image: url(../img/bg_braut_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }

/* ********** neue Preisliste ********** */

.leistung { width: auto; display: table-cell; padding-block: 5px; }
.name { display: block; font-size: 15px; font-weight: 500; line-height: 1rem; }
.name small { font-style: italic; color: #919191; }
.beschreibung { display: block; font-size: 12px; line-height: 1rem; }
.vierer { width: 60px; font-size: 15px; font-weight: 500; }
.skill { text-align: right; }
.preis { text-align: right; }
.gold { color: #b89b5e; }


#team { background-image: url(../img/bg_black_marble.jpg); background-attachment: fixed; }
.card { border: none; background: rgba(255, 255, 255, 0.01); backdrop-filter: blur(6px); box-shadow: 0 15px 35px rgba(0,0,0,0.8); text-align: center; }
.card-overflow { overflow: hidden; }
.card img { filter: grayscale(100%); transition: filter 1000ms, transform 0.8s; }
.card img:hover { filter: grayscale(0%); transform: scale(1.1); }
.card-body { padding: 2rem; }
.card-title { text-transform: uppercase; font-size: 1rem; }
.card-text { color: #959595; }
.card-footer { padding: 1rem 2rem 2rem 2rem; }
.card-footer img { height: 30px; }

#leistungen { background-image: url(../img/bg_leistungen_parallax.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; }
#leistungen ul { max-width: 800px; margin-inline: auto; }
#leistungen li { margin-bottom: 15px; }

#classic_salon { background-image: url(../img/bg_classic_salon_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; min-height: 600px; }
#salon_apart { background-image: url(../img/bg_salon_apart_parallax.jpg); background-position: center bottom; background-repeat: no-repeat; background-size: cover; min-height: 600px; }

.produkt { margin-bottom: 50px; }




/* ****** MEDIA QUERIES ****** */

@media (min-width: 576px) {
	.dropdown:hover > .dropdown-menu { 
		display: block; margin-top: 0;
	}
}

@media (max-width: 767px) {
	h1 { margin-bottom: 0!important; font-size: 4rem!important; }
	h2 { margin-bottom: 50px; }
	h3 { font-size: 2.6rem!important; }
	
	.navbar { padding-top: .5rem; }	
	
	.navbar.navbar-no-bg { 
	background: #444;
	-o-transition: all .6s;
	-moz-transition: all .6s;
	-webkit-transition: all .6s;
	-ms-transition: all .6s;
	transition: all .6s;
	backface-visibility: hidden;
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, .6)!important;
	text-transform: uppercase;
	font-size: 0.9rem; }
	
	li.nav-item { background-color: #2A2A2A; padding-left: 15px; }
	.navbar-collapse { margin-top: 21px; }
	
	.slider { height: 450px; }
	.start-slider { height: 450px; background-image: url(../img/bg_slider_empfang_portrait.jpg); }
	.team_bild { min-height: 300px; }
	.team_text h1 { font-size: 4rem!important; margin-bottom: 0px!important; }
	
	fieldset { padding: 10px; }
	
	footer { text-align: center!important; }
	#footer h1 { font-size: 32px!important; text-align: center; margin-inline: auto; }
	
	footer .logo { margin-bottom: 180px; display: block; }
	.social { display: block; margin-bottom: 50px; }
	.facebook, .instagram, .divider { display: inline!important; }
}
	
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
@media (min-width: 1400px) {}


/* ****** BREAKPONTS ******

X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

****** */



/* ***** GOOGLE FONTS ***** */

/* montserrat-300 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/montserrat-v25-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-300.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-regular.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/montserrat-v25-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-500.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-600 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v25-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-600.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/montserrat-v25-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-700.svg#Montserrat') format('svg'); /* Legacy iOS */
}
/* montserrat-800 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/montserrat-v25-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/montserrat-v25-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/montserrat-v25-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/montserrat-v25-latin-800.woff') format('woff'), /* Modern Browsers */
       url('../fonts/montserrat-v25-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/montserrat-v25-latin-800.svg#Montserrat') format('svg'); /* Legacy iOS */
}

/* Quentin */
@font-face {
    font-family: 'Quentin';
    font-style: normal;
    font-weight: normal;
    src:url('../fonts/Quentin.ttf.eot');
    src: local(''),
        url('../fonts/Quentin.ttf.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Quentin.ttf.woff') format('woff'),
        url('../fonts/Quentin.ttf.svg#Quentin') format('svg');
}