/****************** @MEDIA SETTINGS FOR SECTIONS ******************/

/* @media query for width smaller than 576px */
@media (max-width: 576px) {

  /********** .navigation-section **********/
    
  .rent-seperator img,
  .studio-seperator img,
  .journey-seperator img {
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    bottom: -40;
    width: 16rem;
  }

.navigation-section {
    position: relative;
    background-position: center;
    min-height: 450px;
    width: 100%;
  }

  .navigation-section h2 {
    font-size: 1.4rem;
    margin-left: -6rem;
    padding-top: 11rem;
  }
.header {
  margin-right: 1rem;
  margin-top: -2rem;
}
  .header img {
    position: relative;
    top: 10rem;
    left: 3rem;
    width: 80%;
  }
  div.nav-page-links {
    display: none;
  }

  /********** .rent-section **********/

  .rent-section .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin: 0 auto;
    flex-direction: column;
  }

  .rent-img img {
    border-radius: 2rem;
    margin-top: 2rem;
    transform: translateX(50%);
    width: 30rem;
    height: auto;
  }

  #rent-section .content {
    position: static;
  }
    #rent-section .content li {
      font-weight: 600;
      background-size: 30px;
      font-size: 1rem;
    }
    .rent-list li {
        padding-left: 30px;
    }

    #rent-section .content h2 {
      font-weight: 700;
      padding-top: 15px;
      padding-bottom: 15px;
      margin: 10px;
      font-size: 1.4rem;
    }
  .rent-decoration {
    position: absolute;
    width: 50%;
    left: -7rem;
    top: -3rem;
    z-index: 0;
  }
  /********** .teaser-section **********/
  .teaser-section {
    min-height: 54rem;
    width: 100%;
  }
  .teaser .container {
    margin: 0 auto;
    flex-direction: column;
  }

  .teaser-info {
    max-width: 12rem;
  }

  .teaser-info ul {
    list-style-type: "*";
  }

  .teaser-decoration {
    position: absolute;
    width: 50%;
    right: -11rem;
    bottom: 4rem;
    z-index: 0;
  }
  /********** .studio-section **********/
  #studio-section .container-top,
  #studio-section .container-bottom {
    display: block;
    justify-content: center;
    align-items: center;
  }

  #studio-section .content-bottom {
    margin-top: 2rem;
  }

  .studio-images-top {
    position: static;
    display: block;
  }

  #fotostudio-img {
    position: relative;
    margin-top: 2rem;
    border-radius: 60px;
    width: 100%;
    z-index: 1;
  }

  #plus-img {
    display: none;
  }

  .studio-btn button {
    height: 50px;
    width: 100%;
  }

  #studio-section .container-top p {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1rem;
  }

  #studio-section .content-top h2,
  #studio-section .content-bottom h2 {
    font-size: 1.4rem;
    padding-bottom: 1rem;
  }

  #studio-section .content-top ul li,
  #studio-section .content-bottom ul li {
    font-weight: 600;
    font-size: 1rem;
    background-size: 30px;
    background-position: left;
    background-position-y: -7px;
  }

  .studio-img-bottom img {
    position: relative;
    border-radius: 60px;
    margin-top: 0;
    width: 100%;
  }

  #studio-section {
    margin-bottom: -3rem;
  }


  /********** .visit-section **********/
  #visit-section .content-top, 
  .content-bottom {
    margin-top: -3rem;
  }

  #visit-section .container-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
  }

  #visit-section .container-bottom {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 1rem;
  }

  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 1.4rem;
    padding-bottom: 1rem;
  }
  #visit-section .content-top p,
  #visit-section .content-bottom p {
    font-size: 1rem;
  }

  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 1.4rem;
  }

  .visit-img-top img {
    position: relative;
    border-radius: 60px;
    width: 100%;
  }

  .visit-img-bottom img {
    position: relative;
    border-radius: 60px;
    width: 100%;
    z-index: 1;
    margin-bottom: -3rem;
  }

  #visit-extra-header {
    padding-top: 1rem;
  }

  #visit-deocration {
    position: absolute;
    padding-top: 20rem;
    left: -7rem;
    width: 20rem;
    z-index: -1;
  }
.visit-decoration-bottom {
  position: absolute;
  width: 20rem;
  left: -8rem;
  margin-top: 20rem;
  z-index: -1;
}
  /********** .contact-section **********/
  
  #contact-section {
    height: 0 auto;
    margin: 0 auto  
  }

  #contact-section .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #contact-img {
    width: 60%;
    margin-top: -2rem;
  }

  .contact-text h2 {
    font-size: 1.4rem;
  }

  .contact-text p, a {
    font-size: 1rem;
  }

  .contact-decoration {
    position: absolute;
    width: 45%;
    right: -12rem;
    top: -7rem;
    z-index: 4;
  }
  /********** .journey-section **********/

  #journey-section .container-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    margin-top: -3rem;
  }

  #journey-section .container-bottom {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-top: -8rem;
  }
  #journey-section .content-top {
    padding: 50px;
    margin: 0;
    border-radius: 30px;
    width: 100%;
    height: auto;
  }

    .map small a {
      font-size: 1.3rem;
    }
    .map iframe {
      width: 98%;
      height: 477px;
      border-radius: 30px;
      margin-left: 10px;
    }
  #journey-section .content-top p {
    font-size: 1rem;
  }
  #journey-section .content-bottom {
    margin: 0 auto;
    padding: 3rem;
    width: auto;
    border-radius: 30px;
    height: auto;
  }
  .content-bottom #form-text {
    padding-top: 0;
  }

  #journey-text {
    font-size: 1rem;
  }

  #journey-section .content-bottom h2 {
    font-size: 1.4rem;
    padding-bottom: 1.3rem;
  }
  #journey-section .content-bottom p {
    font-size: 1rem;
  }

  #journey-section .content-top h2 {   
    font-size: 1.4rem;
    padding-bottom: 0;
  }

  .form-email,
  .form-message {
    padding-top: 20px;
  }

  #disclaimer-info {
    padding-top: 10px;
    padding-bottom: 15px;
    font-weight: 600;
    font-size: 0.7rem;
  }

  #email {
    font-family: 'Rubik', sans-serif;
    padding: 5px;
    width: 100%;
    height: 7%;
    border-radius: 10px;
  }

  #message {
    font-family: 'Rubik', sans-serif;
    padding: 5px;
    width: 100%;
    height: 14%;
    border-radius: 10px;
  }

  #journey-btn {
    font-family: 'Rubik', sans-serif;
    font-weight: 600;
    border-radius: 20px;
    height: 2.4rem;
    width: 12rem;
  }

  label {
    padding-top: 20px;
  }

  label h3,
  label p {
    padding: 1px;
    display: inline-block;
  }
.journey-img {
  margin: 0 auto;
}
  .journey-img img {
    display: none;
  }

  .journey-decoration-top {
    position: absolute;
    width: 28rem;
    left: -9rem;
    margin-top: -9rem;
    z-index: -1;
  }

 .journey-decoration-bottom {
  position: absolute;
  width: 29rem;
  left: -15rem;
  margin-top: 32rem;
  z-index: -1;
 }
}

/* @media query for width 768px and above */
@media (min-width: 577px) and (max-width: 992px){
  .rent-seperator img,
    .studio-seperator img,
    .journey-seperator img {
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      bottom: -40;
      width: 26vh;
    }

  .navigation-section {
    position: relative;
    background-position: center;
    min-height: 80vh;
    background-position: 60% center;
    width: 100%;
  }

  .navigation-section h2 {
    font-size: 2rem;
    margin-left: -4rem;
    padding-top: 10rem;
  }

  .header img {
    position: relative;
    left: 5rem;
    width: 80%;
  }

  .site-navigation {
    display: flex;
    justify-content: center;
  }

  div.nav-page-links {
    display: none;
  }

  /********** .rent-section **********/

  .rent-section .container {
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin: 0 auto;
    flex-direction: column;
  }

  .rent-img img {
    border-radius: 2rem;
    margin-top: 2rem;
    transform: translateX(50%);
    width: 30rem;
    height: auto;
  }

  #rent-section .content {
    position: static;
  }
.rent-decoration {
  position: absolute;
  width: 30rem;
  left: -8rem;
  top: -8rem;
  z-index: 0;
}
  /********** .teaser-section **********/
  .teaser .container {
    margin: 0 auto;
    flex-direction: column;
  }

  .teaser-info {
    max-width: 12rem;
  }

  .teaser-info ul {
    list-style-type: "*";
  }
  .teaser-decoration {
    position: absolute;
    width: 30rem;
    right: -10rem;
    bottom: -3rem;
    z-index: 0;
  }

  /********** .studio-section **********/
  #studio-section .container-top,
  #studio-section .container-bottom {
    display: block;
    justify-content: center;
    align-items: center;
  }
  #studio-section .content-bottom {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }

  .studio-images-top {
    position: static;
    display: block;
  }

  #fotostudio-img {
    position: relative;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 60px;
    z-index: 1;
  }

  #plus-img {
    display: none;
  }

  .studio-btn {
    padding-top: 2rem;
  }

  #studio-section .container-top p {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.3rem;
  }

  #studio-section .content-top h2,
  #studio-section .content-bottom h2 {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  #studio-section .content-top ul li,
  #studio-section .content-bottom ul li {
    font-weight: 600;
  }
#studio-section .content-bottom {
  margin-bottom: -5rem;
}
  .studio-img-bottom img {
    position: relative;
    border-radius: 60px;
    margin-top: 0;
    width: 30rem;
  }


  /********** .visit-section **********/
  #visit-section .container-top {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
  }

  #visit-section .container-bottom {
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
    gap: 2rem;
  }

  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  #visit-section .content-top p,
  #visit-section .content-bottom p {
    font-size: 1.3rem;
  }

  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 2rem;
  }

  .visit-img-top img {
    position: relative;
    border-radius: 60px;
    width: 30rem;
  }

  .visit-img-bottom img {
    position: relative;
    border-radius: 60px;
    width: 30rem;
    z-index: 1;
  }

  #visit-extra-header {
    padding-top: 1rem;
  }

 .visit-decoration-bottom {
   position: absolute;
   width: 20rem;
   left: -8rem;
   margin-top: 20rem;
   z-index: -1;
 }
  /********** .contact-section **********/
  #contact-section {
    height: 0 auto;
    padding-top: 1.5rem;
  }

  #contact-section .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  #contact-img {
    width: 40%;
    margin-top: -2rem;
  }

  .contact-text h2 {
    font-size: 2rem;
  }

  .contact-text p,
  a {
    font-size: 1rem;
  }

  .contact-decoration {
    position: absolute;
    width: 45%;
    right: -12rem;
    top: -7rem;
    z-index: 4;
  }
  /********** .journey-section **********/
    #journey-section .container-top {
      display: flex;
      flex-direction: column;
    }
  
    #journey-section .container-bottom {
      display: flex;
      flex-direction: column;
      margin-top: 3rem;
    }
  
    #journey-section .content-top {
      padding: 50px;
      margin: 0;
      border-radius: 30px;
      align-self: center;
      width: 0 auto;
      height: auto;
    }

    .map {
      padding: 50px;
      margin: 0;
      border-radius: 30px;
      align-self: center;
      width: 0 auto;
      height: auto;    }
    
    .map iframe {
      width: 45vh;
      align-self: center;
      border-radius: 30px;
      margin-left: 10px;
    }
    .map small a {
      margin-top: 2rem;
      font-size: 1.4rem;
    }
    
    .journey-img {
      display: none;
    }
    #journey-section .content-bottom {
      margin: 0 auto;
      margin-top: -10rem;
      padding: 3rem;
      width: 44vh;
      border-radius: 30px;
      height: auto;
    }

    #journey-text {
      font-size: 1.3rem;
    }
  
    #journey-section .content-bottom h2 {
      font-size: 2rem;
    }
  
    #journey-section .content-top h2 {
      font-size: 1.8rem;
      padding-bottom: 0;
    }
  
    .form-email,
    .form-message {
      padding-top: 20px;
    }
  
    .form-email p,
    .form-message p {
      font-size: .8rem;
    }
  
    #disclaimer-info {
      padding-top: 10px;
      padding-bottom: 15px;
      font-weight: 600;
      font-size: 0.7rem;
    }
  
    #email {
      font-family: 'Rubik', sans-serif;
      padding: 5px;
      width: 100%;
      height: 7%;
      border-radius: 10px;
    }
  
    #message {
      font-family: 'Rubik', sans-serif;
      padding: 5px;
      width: 100%;
      height: 14%;
      border-radius: 10px;
    }
  
    #journey-btn {
      font-family: 'Rubik', sans-serif;
      font-weight: 600;
      border-radius: 20px;
      height: 2.4rem;
      width: 12rem;
    }
  
    label {
      padding-top: 20px;
    }
  
    label h3,
    label p {
      padding: 1px;
      display: inline-block;
    }
  

    .journey-decoration-top {
      position: absolute;
      width: 28rem;
      left: -9rem;
      margin-top: -9rem;
      z-index: -1;
    }
  
    .journey-decoration-bottom {
      position: absolute;
      width: rem;
      left: -15rem;
      margin-top: 32rem;
      z-index: -1;
    }
    }



/* @media query for width 992px and above */
@media (min-width: 992px) and (max-width: 1189px) {
  .menu__btn {
    display: none;
  }
  .rent-seperator img,
    .studio-seperator img,
    .journey-seperator img {
      position: absolute;
      transform: translateX(-50%);
      left: 50%;
      bottom: -40;
      width: 35vh;
    }

.navigation-section {
    position: relative;
    background-position: center;
    min-height: 100vh;
    width: 100%;
  }

.navigation-section h2 {
  font-size: 2rem;
  margin-left: -4rem;
}

  .header img {
    position: relative;
    left: 5rem;
    width: 50rem;
  }
  nav.site-navigation {
    margin-right: 13rem;
  }
  .site-navigation {
    display: flex;
    justify-content: center;
  }

  nav.site-navigation a {
    font-size: 1.5rem;
    margin-right: 1rem;
    align-items: center;
  }

  /********** .rent-section **********/
#rent-section .container {
  display: flex;
  align-items: center;
  justify-content: center;
}

#rent-section .content {
  position: absolute;
  height: auto;
  max-width: 30rem;
  line-height: 2rem;
  align-items: center;
  border-radius: 2.5rem;
  padding: 45px;
  margin-left: 3rem;
  z-index: 2;
}
  #rent-section .content li {
    font-weight: 600;
  }

  #rent-section .content h2 {
    font-weight: 800;
    padding-top: 15px;
    padding-bottom: 15px;
    margin: 10px;
    font-size: 1.5rem;
  }

  .rent-img img {
    border-radius: 2rem;
    transform: translateX(90%);
    width: 30rem;
    height: 37rem;
  }


  /********** .teaser-section **********/
  .teaser .container {
    margin: 0 auto;
    flex-direction: column;
  }

  .teaser-info {
    max-width: 12rem;
  }

  .teaser-info ul {
    list-style-type: "*";
  }
    .teaser-decoration {
      position: absolute;
      width: 30rem;
      right: -10rem;
      bottom: -3rem;
      z-index: 0;
    }

  /********** .studio-section **********/
  #studio-section .container-top {
    color: white;
    margin-bottom: 0;
  }

  #studio-section .container-bottom {
    gap: 5rem;
    color: white;
  }
  .container-bottom .content-bottom {
    margin-top: -6rem;
  }
  .studio-images-top {
    position: static;
    display: block;
  }

  #fotostudio-img {
    position: relative;
    margin-top: 2rem;
    border-radius: 60px;
    z-index: 1;
  }

  #plus-img {
    display: none;
  }

  .studio-btn {
    padding-top: 2rem;
  }

  #studio-section .container-top p {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.3rem;
  }

  #studio-section .content-top h2,
  #studio-section .content-bottom h2 {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  #studio-section .content-top ul li,
  #studio-section .content-bottom ul li {
    font-size: 1.3rem;
    font-weight: normal;
  }

  .studio-img-bottom img {
    position: relative;
    border-radius: 60px;
    width: 35rem;
    margin-top: -10rem;
  }


  /********** .visit-section **********/
  #visit-section .container-top {
    display: grid;
    grid-template-columns: 40% auto;
    gap: 1rem;
    color: white;
  }

  #visit-section .container-bottom {
    display: grid;
    grid-template-columns: auto 40%;
    gap: 1rem;
    color: white;
  }
  #visit-section .content-bottom {
    margin-top: -2.5rem;
  }
  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 2rem;
    padding-bottom: 1rem;
  }

  #visit-section .content-top p,
  #visit-section .content-bottom p {
    font-size: 1.3rem;
  }

  #visit-section .content-top h2,
  #visit-section .content-bottom h2 {
    font-size: 2rem;
  }

  .visit-img-top img {
    position: relative;
    border-radius: 60px;
    width: 100%;
  }

  .visit-img-bottom img {
    position: relative;
    border-radius: 60px;
    width: 100%;
    margin-top: -3rem;
    z-index: 1;
  }

  #visit-extra-header {
    padding-top: 1rem;
  }

  #visit-deocration {
    position: absolute;
    padding-top: 20rem;
    left: -7rem;
    width: 20rem;
    z-index: -1;
  }
  .visit-decoration-bottom {
    position: absolute;
    width: 30rem;
    left: -8rem;
    margin-top: -8rem;
    z-index: -1;
  }

  /********** .contact-section **********/
 .contact-section {
   background-color: #56ffc0;
   width: 100%;
   height: 34rem;
 }

 #contact-section .container {
   display: flex;
   align-items: center;
   gap: 4em;
 }

 #contact-img {
   width: 20rem;
 }

 .contact-text {
   padding-bottom: 4rem;
 }

 .contact-text h2 {
   font-size: 2.5rem;
   color: #645AC6;
 }

 .contact-text p,
 a {
   font-size: 1.4rem;
   color: #645AC6;
 }

 .contact-text a {
   text-decoration: none;
 }
 .contact-decoration {
   position: absolute;
   width: 45%;
   right: -15rem;
   top: -5rem;
   z-index: 4;
 }

 /********** .studio-section **********/
 #journey-section .content-bottom {
   padding: 3rem;
   border-radius: 30px;
   max-width: 25rem;
   margin-top: 3rem;
   height: 88%;
 }
 .journey-decoration-top {
    position: absolute;
    width: 30rem;
    left: -15rem;
    margin-top: 1rem;
    z-index: -1;
  }
  .journey-decoration-bottom {
    position: absolute;
    width: 40rem;
    left: -30rem;
    margin-top: 20rem;
    z-index: -1;
  }
    .map small a {
      text-decoration: none;
      margin-left: 8rem;
      color: #645AC6;
      font-size: 1.4rem;
    }
  
    .map iframe {
      width: 80%;
      height:477px;
      border-radius: 30px;
      margin-left: 100px;
    }

  #menu,
  #menu-bar {
    display: none;
  }
}
@media (min-width: 1200px) {
  #menu, #menu-bar {
    display: none;
  }
}