@import url('https://fonts.googleapis.com/css2?family=Londrina+Sketch&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
}

@media screen and (min-width: 200px) and (max-width: 768px) {
    #groot_scherm {
        display: none;
    }
    #big_header {
        display: none;
    }
    #mobile_header {
        display: block;
    }

    html {
        /* background-color: black;*/
        background-image: url(../images/background_black_golden_stars.png);
        background-size: cover;
    }
    
    #mobile_header {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        height: 20vh;
        width: 100vw;
        align-items: center;
        background-image: url(../images/background_black_golden_stars.png);
        background-size: cover;
    
    }
    .logo_mobile {
        flex: 3;
    }
    .logo_mobile img {
        height: 15vh;
        position: fixed;
        top: 1vh;
        left: 2vw;
    }
    
    .hamburger {
        position: fixed;
        right: 6vw;
        top: 4vh;
        flex: 1;
        font-family: "Montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
        
    }
    
    .hamburger p {
        line-height: .8;
        font-size: 1.4rem;
    }
    
#navi_mobile {
    display: none;
}

#navi_mobile nav {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2vh;


}
#navi_mobile nav > a {
    display: flex;
    width: 98vw;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-style: normal;
    font-size: 1.8rem;
    background-image: linear-gradient(#d0a56e, #f2e692);
    color: transparent;
    background-clip: text;
    border: 1px solid rgb(230, 182, 8);
    height: 8vh;
    align-items: center;
    justify-content: center;
   
}

#mobile_landing {
    display: flex;
    flex-direction: column;
    align-items: center;
    display: block;
    
}

.foto_landing {
    flex: 2;
}

.foto_landing img {
    height: 100%;
    width: 96vw;
    object-fit: cover;
    /*border: 2px solid #f2e692;*/
    border: 5px solid transparent;
    background-image: linear-gradient(#d0a56e, #f2e692);
}

.buttons_res {
    display: flex;
    flex: 1;
    align-self: center;
    justify-content: center;
   

    
}

.buttons_res a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    width: 60vw;
    height: 5vh;
    border: 1px solid white;
    color: black;
    background-image: linear-gradient(#d0a56e, #f2e692);
    font-size: 1.4rem;

}
#mobile_team {
    padding-bottom: 5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;   
      display: none;
      justify-content: center;
      display: none;
      

}

#mobile_team article {
    flex: 1;
    padding-top: 2vh;

}
#mobile_team article img {
    width: 98%;
    height: 100%;
    object-fit: cover;
}

#mobile_team h1, p {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
      font-size: 3rem;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
}
#mobile_team p {
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
      font-size: 2rem;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
}


#mobile_prijzen {
    padding-bottom: 5vh;
    display: none;
    text-align: center;
    display: none;
}
#mobile_prijzen h1, h2 {
    padding-top: 5px;
    padding-bottom: 5px;
    font-style: normal;
      font-size: 1.8rem;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
      
}

#mobile_prijzen p {
    font-style: normal;
      font-size: 1.4rem;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
}


.gold {
    display: none;
    font-style: normal;
      font-size: 1.8rem;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
}



#mobile_openingstijden {
    
   display: flex;
   flex-direction: column;
   display: none;
    
}
.foto_open {
    height: 30vh;
}


.foto_open img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.tekst_open {
    margin-top: 3vh;
}
.tekst_open p {
   
    font-style: normal;
      font-size: 1.4rem;
      line-height: 1.2;
      background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
      text-align: center;
}

.tekst_open a {
    background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;
      font-size: 2rem;
      border: 1px solid #d0a56e;
      padding: 2vh 2vw;

}
.tekst_open a:link, a:active, a:hover {
    background-image: linear-gradient(#d0a56e, #f2e692);
      color: transparent;
      background-clip: text;

}

#mobile_contact {
    display: none;
    display: flex;
    flex-direction: column;
    display: none;
}

.foto_contact {
    width: 96vw;
    height: 40vh;
}

.foto_contact img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.mobile_adres {
    margin-top: 4vh;
}
.mobile_adres p {
    padding-top: 2px;
    padding-bottom: 2px;
    font-weight: 800;
    font-size: 1.4rem;
    background-image: linear-gradient(#d0a56e, #f2e692);
    color: transparent;
    background-clip: text;
    line-height: 1;
}

}




@media screen and (min-width: 768.1px) {

    
    
    #groot_scherm {
        display: block;
    }
    #mobile_header, #navi_mobile, #mobile_landing,
    #mobile_team, #mobile_prijzen, #mobile_openingstijden,
    #mobile_contact  {
        display: none;
    }
   
    .custom-cursor {
        cursor: url("../images/schaar_icon.png"), auto;
      }
    
    #big_header {
        
        height: 15vh;
        background-color: black;
        display: flex;
        align-items:center;
    }
    
    nav article {
        flex: 4;
        display: flex;
    }
    
    
    .logo img {
        height: 15vh;
    }
    #big_header > nav {
        flex: 3;
        display: flex;
        justify-content: space-around;
    }
    
    #big_header > nav > a {
        text-decoration: none;
        font-family: "Montserrat", sans-serif;
      font-weight: 100;
      font-style: normal;
        font-size: 1.8rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
       
    }
    
    #big_header > nav > a:link, a:visited, a:active {
        font-size: 1.8rem;
        color: #926f34;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
    
    }
    
    #big_header > nav > a:hover {
        background-image: linear-gradient(#f2e692, #d0a56e);
        color: transparent;
        background-clip: text;
        font-size: 1.9rem;
    }
    
    main {
        height: 85vh;
        width: 100vw;
        background-image: url(../images/2kapsters_hairclubbysusan.jpg);
        background-size: cover;
        
    }
    
    #team {
        padding-top: 5vh;
        height: 50vh;
        width: 100vw;
        font-family: "Montserrat", sans-serif;
      font-weight: 100;
      font-style: normal;
        font-size: 1.8rem;
       color: #fff;
       background-color: black;
    
    }
    
    #team h1, p {
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
    
    }
    #team h1 {
        padding: 1vh 1vw;
    }
    #onsteam {
        display: flex;
        
    }
    
    #onsteam > article {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }
    
    #onsteam > article > img {
        width: 22vw;
        padding: 1vh 1vw;
    }
    
    .bobbi > img {
        width: 18vw;
        padding: 1vh 1vw;
    }
    
    #prijzen {
        flex: 5;
        display: flex;
        justify-content: space-around;
        background-color: #000000;
        color: white;
        padding-bottom: 5vh;
        font-family: "Montserrat", sans-serif;
        font-weight: 100;
        font-style: normal;
        height: 60vh;
        padding-top: 5vh;
    }
    
    #keuzes {
        width: 10vw;
        height: 40vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        
    }
    
    #keuzes button {
        width: 15vw;
        height: 8vh;
        background-image: linear-gradient(#f2e692, #d0a56e);
        color: white;
        font-size: 1.8rem;
        border: 1px solid white;
    }
    #keuzes button:hover {
        background-image: linear-gradient(#f2e692, #f0ece6);
        color: black;
        
    }
    
    
    #behandelingen h1 {
        font-size: 2.5rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
    
    }
    #behandelingen h2 {
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
    }
    #behandelingen td p {
        font-size: 1.4rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
    }
    #behandelingen table tr td:nth-child(1) {
        width: 40vw;
    }
    
    #behandelingen table tr td:nth-child(2) {
        width: 10vw;
    }
    
    #Kleuren {
        display: none;
    }
    
    #fotos_kapster {
        display: flex;
        background-color: black;
        justify-content:space-between;
    }
    #fotos_kapster article {
        flex: 1;
        padding-top: 2vh;
        margin-bottom: 2vh;
    }
    
    #fotos_kapster article img {
        height: 36vh;
        border: 1px solid goldenrod;
        padding: .2vh .2vw;
    }
    #openingstijden_contact {
        height: 50vh;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-color: #000000;
        color: white;
        text-align: center;
        padding-bottom: 5vh;
        padding-top: 5vh;
        
    }
    #openingstijden_contact h1 {
        font-size: 2.5rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
        
    }
    #openingstijden_contact p {
        font-size: 2rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
        
    }
    #fotos_2 {
        
        display: flex;
        background-color: black;
        justify-content:space-around;
        align-items: center;
        height: 40vh;
    }
    #fotos_2 article {
        flex: 1;
        padding-top: 2vh;
        margin-bottom: 2vh;
    }
    
    #fotos_2 article img {
        height: 28vh;
        border: 1px solid goldenrod;
        padding: .2vh .2vw;
    }
    #contact {
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-color: #000000;
        padding-top: 5vh;
        padding-bottom: 5vh;
    }
    
    #contact h1 {
        font-size: 2.5rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
        
    }
    #contact p {
        font-size: 2rem;
        background-image: linear-gradient(#d0a56e, #f2e692);
        color: transparent;
        background-clip: text;
        
    }
    
    hr {
        color: goldenrod;
    }

    #kinder {
        display: none;
    }
    
}