@import url("reset.css");

/*-----------FONTS-----------*/

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

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

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v19-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v19-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* ROCHESTER PRO */
@font-face {
    font-family: 'Rochester';
    font-style: normal;
    /*font-weight: 300;*/
    src: url('../fonts/rochester-regular.ttf'); /* IE9 Compat Modes */
  }

/*-----------FONTGESTALTUNG-----------*/

body {font-family: 'Roboto'; overflow-x: hidden;}
p {font-size: 15px; font-weight: 300; line-height: 21px; margin-bottom: 15px;}
a {text-decoration: none; cursor: pointer;}
h1 {font-size: 35px; line-height: 40px; margin-bottom: 10px;}
h2 {font-family:'Rochester'; font-size:28px; margin-bottom: 30px; text-transform: none;color:#C4A884;}
h3 {font-family:'Rochester'; font-size: 20px; margin-bottom: 10px; color:#C4A884;}
h3 {font-size: 20px; margin-bottom: 10px;}
h4 {font-size: 20px;margin-bottom: 10px;}
li {font-size: 15px; font-weight: 300; line-height: 21px; margin-bottom: 5px; list-style: disc;}
strong {font-weight: 500; font-size: 16px; font-weight: 600;}
.line {background-color: #000; width: 50px; height: 3px; margin-bottom: 25px;}


/*-----------NAVI-----------*/

.logo {position: fixed; width: auto; height: 60px!important; top: 15px; left: 5%; z-index: 9999;}
nav {position: fixed; background: #fff; width: 100%;height: 50px; z-index: 101; top: 0; text-align: right; padding: 22px 0; z-index: 100; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
nav ul {margin-right: 20%; margin-top: 15px;}
nav ul li {display: inline-block; margin: 0 2%; text-transform: none;}
nav ul li a {text-decoration: none; font-size: 20px; color: #2e2e2e; margin-right: 30px;}
nav ul li strong {color: #0025a6; font-weight: 600;}
nav ul li a:hover {color: goldenrod;}

.navi {display: none;}
.burger-nav {position: fixed; right: 0; top: -6px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: #000; padding: 16px 21px 21px 19px;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Roboto'; font-style: normal;}
.burger-nav-anim {top: -5px; color: #fff;}
.burger-nav-anim b:first-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) {opacity: 0;}
.burger-nav-anim b:last-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -80%;}

.full-screen-nav {position: fixed; z-index: 9998; width: 100%; height: 100vh; background: #000; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.full-screen-nav ul {text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li a {padding: 20px; display: block; font-size: 30px; color: #fff; transition: all .4s ease-in-out; text-decoration: none;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------ASIDE-----------*/

aside img {position: fixed; background-color: #3C3C4A; width: 50px; z-index: 999; right: 0; transition: 0.5s;border-bottom-left-radius: 10px; border-top-left-radius: 10px;}
aside img:hover {background-color: #C4A884 ;}
.mail {top: 300px;}
.phone {top: 370px;}

.mail {top: 300px;}
.phone {top: 370px;}
/*-----------SUBNAV-----------*/

.subnav {position: fixed; bottom: 0; color: #fff; z-index: 999; transition: 0.5s; width: 100%;right: 0;}
.subnav a {color: #fff; padding: 8px 15px; font-size: 14px; background-color: #C4A884; margin-left: 20px; line-height: 23px;border-top-left-radius: 10px;border-top-right-radius: 10px}
.subnav a:nth-of-type(2) {margin-right: 5%;}
.subnav a:hover {color: #dfdfdf;}


/*-----------HEADER-----------*/

header {background: url("../images/header-hintergrund.jpg") no-repeat; height: 100vh; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

#stoerer {position: absolute; left: 10%; bottom: 20vh; background: rgba(255,255,255,0.8); padding: 30px 50px; border-radius: 20px; z-index: 9;}

.gallery {
  width: 100%;
  height: 100%;
  height: vh 100%;
  display: flex;
  gap: 40px;
  position: relative;
  overflow: hidden;
  justify-content: center;
  margin-left: 20%;
}

.gallery::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
}

.gallery::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;

  z-index: 99;
}

.gallery-h-m {
  margin-top: 75px;
  height:100%;
}

.gallery-image {
  animation: marqueeTop 8s linear infinite;
}

.gallery-image__img {
  width: 400px;
  height: 600px;
  object-fit: cover;
  border-radius: 20px;
  margin: 20px 0px;
}

.gallery-h {
  height: 100%;
  overflow: hidden;
}


@keyframes marqueeTop {
  0% {
      transform: translate3d(0, 0, 0)
  }

  100% {
      transform: translate3d(0, -100%, 0)
  }
}

/*-----------AUFBAU-----------*/

html {scroll-behavior: smooth;}
#überuns {display:flex; padding: 120px 0; background-color: #ffffff ;width: 100%;}
#salon-monika-prahl {padding: 120px 0; width: 100%;padding: 120px 0; background-color: #3C3C4A ;}
#leistungen {padding: 120px 0; background-image: url(../images/friseur-background.jpg);}
#leistungen .content p {color: #000;}
#salon-monika-prahl .content p {color: #fff;}
.content {display: block;}; 
::-moz-selection {background: #fff600; color: #000;}
::selection {background: #fff600; color: #000;}
.btn-2 {background-color: #C4A884; color: #3C3C4A; padding: 5px 60px; transition: 0.5s; border-radius: 10px; display: flex; width: fit-content; text-align: center; margin-bottom: 20px;}
.btn-2:hover {background-color: #3C3C4A; color: #C4A884;}
main.no-header{
    margin-top: 80px;
}
.container {
    padding: 100px 10%;
}
.flexbox {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.col-2 {
    width: 48%;
}
.text-col {
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.infosite h1{
    flex-basis: 100%;
}
#impressum {
  border-top: #C4A884 20px solid;
}

#impressum a {text-decoration: underline; color: #C0A480}

/*-----------BEREICH1-----------*/

#überuns {text-align: center; justify-content: center; align-items: center;}

#cards {
  padding-bottom: 120px;
  background-size: cover;
  background-attachment: local;
  background-position: center;
  position: relative;
  background-color: #fff ;
}
.cards-content {
  justify-content: center;
  flex-wrap: wrap;
  display: flex; 
  width: 80%; 
  margin-left: 10%; 
  align-items: center;
  padding: 0px;
}

  .card {
    position: relative;
    width: 24rem;
    height: 24rem;
    margin: 20px;
  }
  
  .image {
    display: block;
    width: 100%;
    height: 24rem;
    border-radius:50%;
    object-fit: cover;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/monika-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay {
    opacity: 100%;
  }
  
  .overlay-2 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/carsten-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-2 {
    opacity: 100%;
  }

  .overlay-3 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/aliah-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-3 {
    opacity: 100%;
  }

  .overlay-4 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/annette-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-4 {
    opacity: 100%;
  }

  .overlay-5 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/sabine-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-5 {
    opacity: 100%;
  }

  .overlay-6 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/katja-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-6 {
    opacity: 100%;
  }

  .overlay-7 {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #3C3C4A;
    border-radius:50%;
    background-image: url(../images/sandy-color.jpg);
    object-fit: cover;
  }
  
  .card:hover .overlay-7 {
    opacity: 100%;
  }

  .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }

  .text ul {
    text-align: left;
  }

  .text h2{
    color:#fff
  }




  #cards-2 {
    padding-bottom: 120px;
    background-size: cover;
    background-attachment: local;
    background-position: center;
    position: relative;
    background-color: #3C3C4A ;
  }
  .cards2-content {
    justify-content: center;
    flex-wrap: wrap;
    display: flex; 
    width: 80%; 
    margin-left: 10%; 
    align-items: center;
    padding: 0px;
  }
  .card-2 {
    position: relative;
    width: 24rem;
    height: 24rem;
    margin: 20px;
  }
  
  .image-2 {
    display: block;
    width: 100%;
    height: 24rem;
    border-radius:50%
  }

  
  .text-2 {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .text-2 h2{
    color: white;
  }
/*-----------BEREICH2-----------*/

#leistungen, #salon-monika-prahl { text-align: center;} 
#leistungen p {margin-bottom: 30px;}
#leistungen .btn-2:hover {background-color: #fff; color: #3C3C4A;}

table {
  border-collapse: collapse;
  width: 50%;
  margin-left: 20%;
  margin-top: 70px;
}

th {
  text-align:center;
  padding: 8px;
}

td{
  font-size: 15px; 
  font-weight: 300; 
  line-height: 21px;
  text-align:center;
  padding: 8px;
}

.card-2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-popup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay-popup:target {
  visibility: visible;
  opacity: 1;
}

.popup {

  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 99;
}
.popup-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100vh;
}

.popup h2 {
  margin-top: 10%;
  text-align: left;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: goldenrod;
}
.popup-content {
  overflow: auto;
  justify-content: left;
}
.popup-content ul{
  list-style-type: circle;
  text-align: left;
}

/*-----------PUFFER-----------*/

.puffer1 {background: url("../images/puffer.jpeg") no-repeat; height: 700px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}

.puffer2 {background: url("../images/puffer-2.jpeg") no-repeat; height: 800px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center; position: relative;}




/*-----------FOOTER-----------*/

footer {
  background-color:#3C3C4A;
  padding: 20px 0;
  color: #fff; 
}

#footer-container {
  display: flex;
  justify-content: space-around;
  max-width: 1200px;
  margin: 100px auto;
  padding: 0 50px;
}

#footer-container a {
    color: #fff!important;
    text-decoration: underline;
}


#footer-section {
  max-width: 1000px;
  
}

.formular{
  width: 550px;
  height: 600px;
  background-color: #3C3C4A;
  color: #fff;
  max-width: 100%;
}

/*-----------SLIDER-----------*/

.mySlides {display: none}

/* Slideshow container */
.slideshow-container {
  max-width: 1722px;
  position: relative;

}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1366px) {
  header, .puffer1, .puffer2 {background-attachment: scroll;}
}

@media screen and (max-width: 900px) {
  
  h1 {font-size: 25px; line-height: 30px;}
  h1 b {font-size: 25px;}
  h4 {margin-left: 10px; margin-right: 10px}
  p {margin-left: 10px; margin-right: 10px;}
  .logo {position: fixed; width: 250px; height: auto;}
  .gallery {visibility: hidden;}
  header {height: 75vh; width: 100vw;}
  nav {background: #fff; box-shadow: 0 0 0; height: 50px; max-width: 100%;position: fixed;}
  nav ul{display: none;}
  .navi {display: block;}
  .burger-nav {position: fixed;}
  #stoerer {position: absolute; left: 15%; bottom: 20vh; width: 200px;}
  .btn-2 { padding: 5px 20px; border-radius: 10px; ;text-align: center; flex-direction: column; margin-bottom: 5%;}
  aside img {left: 0%;border-bottom-right-radius: 10px; border-top-right-radius: 10px;border-bottom-left-radius: 0px; border-top-left-radius: 0px;}
  table {margin-left: 7%;}
  .card img {height: 272px; width: 272px;}
  .card h2 {font-size: 18px; margin-bottom: 5px;}
  .card li {font-size: 10px; margin-bottom: 3px;}
  .card, .card-2, .overlay, .overlay-2, .overlay-3, .overlay-4, .overlay-5, .overlay-6, .overlay-7 {width: 272px; height: 272px;}
  .overlay{background-image: url(../images/monika-color-min-neu.png);object-fit: cover;}
  .overlay-2{background-image: url(../images/carsten-color-min.png);object-fit: cover;}
  .overlay-3{background-image: url(../images/Aliah-color-min.png);object-fit: cover;}
  .overlay-4{background-image: url(../images/anette-color-min.png);object-fit: cover;}
  .overlay-5{background-image: url(../images/sabine-color-min-neu.png);object-fit: cover;}
  .overlay-6{background-image: url(../images/katja-color-min.png);object-fit: cover;}
  .overlay-7{background-image: url(../images/sandy-color-min.png);object-fit: cover;}
  .card-2 img {height: 272px; width: 272px;}
  #popup-2, #popup-3, #popup-4 {width: 100vw; height: auto;}
  html{overflow-x: hidden;}
  


  #footer-container {display:flex; flex-direction: column;}
}

@media screen and (max-width: 700px) {
  main {text-align: center;}
  .content {display: block;}
  .col {width: 100%; margin-left: 10%;}
  .col:nth-of-type(2) {padding: 40px 0 0;}  
.popup {
width: 80%;
}
}

@media screen and (max-width: 500px) {
  aside img {width: 40px;}
  .mail {top: 250px}
  .phone {top: 320px}

}