*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'sour';
    src: url('../fonts/sourgummy/SourGummySemiExpanded-Regular.woff2') format('woff2'),
        url('../fonts/sourgummy/SourGummySemiExpanded-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'sigmar';
    src: url('../fonts/sigmar/sigmar-regular-webfont.woff2') format('woff2'),
         url('../fonts/sigmar/sigmar-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

html{
    scroll-behavior: smooth;
}

body{
    background-color: black;
}

@media (min-width:1320px){
    #container{
        min-width: 1320px;
    }
}

.logo{
    width: 50vw;
    position: relative;
    top: 20px;
    left: 20px;
}

nav{
    width: 40vw;

    position: fixed;
    top: 68px;
    right: 0;

    cursor: pointer;

    transition: .5s;
}

#burger{
    background-image: url(../img/burgermenu.png);
    width: 50px;
    height: 30px;
    background-size: cover;

    position: fixed;
    top: 40px;
    right: 10px;
}

li{ 
    list-style: none;

    padding: 10px;
}

.menu-lijst{
    background-color: black;
    border-bottom: 2px solid #FBC601;
    border-left: 2px solid #FBC601;
    border-top: 2px solid #FBC601;
}

.menu{
    color: white;
    font-family: 'sigmar';
    font-size: 4vw;

    text-decoration: none;
    text-transform: capitalize;
}

.backUp{
    right: -500px;
}

@media (min-width: 1000px){

    nav{
        width: 250px;
    }
    
    .menu{
        font-size: 2vw;
    }
}

/* home */

.disco{
    display: block;
    width: 90vw;

    margin: 0 auto;
}

#home1{
    color: #FBC601;

    font-family: 'sigmar';
    font-size: 10vw;
    letter-spacing: 2px;

    text-align: center;
    padding-top: 3rem;
}

#intro{  
    color: white;
    font-family: 'sour';
    font-size: 0.8rem;

    padding: 1.5rem 2rem;
}

#hier{
    color: white;
    font-family: 'sour';
    font-size: 0.8rem;
    text-decoration: underline;
}

@media (min-width: 600px){
    #intro{
        font-size: 1.2rem;
        width: 80vw;
        margin: 0 auto;
    }

    #hier{
        font-size: 1.2rem;
    }
}

@media (min-width: 1320px){
    
    .disco{
        padding: 5rem;
    }

    #intro{
        font-size: 2rem;
        width: 72vw;
        margin: 0 auto;
    }

    #hier{
        font-size: 2rem;
    }
}

/* timetable */

#time1{
    color: #2D5D33;

    font-family: 'sigmar';
    font-size: 10vw;

    text-align: center;
}


.maintime{
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.line{
    width: 45vw;
    padding: 0.5rem;
    padding-top: 7rem;
}

.artist{
    color: #FBC601;
    font-family: 'sigmar';
    font-size: 4vw;
}

.date{
    color: #FBC601;
    font-family: 'sour';
    font-size: 2.5vw;
    padding-left: 3vw;
}

#aventura{
    padding-top: 9rem;
    padding-bottom: 3rem;
}

@media (min-width: 1320px){

    .maintime{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);

        padding: 5rem;
    }

    #time1{
        font-family: 'sigmar';
        font-size: 10vw;

        grid-column: 2/4;
        grid-row: 1/2;
    }

    .line{
        width: 20vw;
    }
    
    .artist{
        font-family: 'sigmar';
        width: 20vw;
        padding-left: 1rem;
    }
    
    .date{
        font-family: 'sour';
        width: 20vw;
        padding-left: 1rem;
    }

    #aventura{
        padding-top: 8rem;
        padding-bottom: 2rem;
    }

    #balvin{
        grid-column: 1/2;
        grid-row: 2/3;
    }

    #balvin-name{
        grid-column: 1/2;
        grid-row: 3/4;
    }

    #balvin-date{
        grid-column: 1/2;
        grid-row: 4/5;
    }

    #enrique{
        grid-column: 2/3;
        grid-row: 2/3;
    }

    #enrique-name{
        grid-column: 2/3;
        grid-row: 3/4;
    }

    #enrique-date{
        grid-column: 2/3;
        grid-row: 4/5;
    }

    #ozuna{
        grid-column: 3/4;
        grid-row: 2/3;
    }

    #ozuna-name{
        grid-column: 3/4;
        grid-row: 3/4;
    }

    #ozuna-date{
        grid-column: 3/4;
        grid-row: 4/5;
    }

    #bunny{
        grid-column: 4/5;
        grid-row: 2/3;
    }

    #bunny-name{
        grid-column: 4/5;
        grid-row: 3/4;
    }

    #bunny-date{
        grid-column: 4/5;
        grid-row: 4/5;
    }

    #santana{
        grid-column: 1/2;
        grid-row: 5/6;
    }

    #santana-name{
        grid-column: 1/2;
        grid-row: 6/7;
    }

    #santana-date{
        grid-column: 1/2;
        grid-row: 7/8;
    }

    #myke{
        grid-column: 2/3;
        grid-row: 5/6;
    }

    #myke-name{
        grid-column: 2/3;
        grid-row: 6/7;
    }

    #myke-date{
        grid-column: 2/3;
        grid-row: 7/8;
    }

    #maluma{
        grid-column: 3/4;
        grid-row: 5/6;
    }

    #maluma-name{
        grid-column: 3/4;
        grid-row: 6/7;
    }

    #maluma-date{
        grid-column: 3/4;
        grid-row: 7/8;
    }

    #romeo{
        grid-column: 4/5;
        grid-row: 5/6;
    }

    #romeo-name{
        grid-column: 4/5;
        grid-row: 6/7;
    }

    #romeo-date{
        grid-column: 4/5;
        grid-row: 7/8;
    }

    #nicki{
        grid-column: 1/2;
        grid-row: 8/9;
    }

    #nicki-name{
        grid-column: 1/2;
        grid-row: 9/10;
    }

    #nicki-date{
        grid-column: 1/2;
        grid-row: 10/11;
    }

    #rauw{
        grid-column: 2/3;
        grid-row: 8/9;
    }

    #rauw-name{
        font-size: 3.7vw;
        grid-column: 2/3;
        grid-row: 9/10;
    }

    #rauw-date{
        grid-column: 2/3;
        grid-row: 10/11;
    }

    #alfa{
        grid-column: 3/4;
        grid-row: 8/9;
    }

    #alfa-name{
        grid-column: 3/4;
        grid-row: 9/10;
    }

    #alfa-date{
        grid-column: 3/4;
        grid-row: 10/11;
    }

    #daddy{
        grid-column: 4/5;
        grid-row: 8/9;
    }

    #daddy-name{
        grid-column: 4/5;
        grid-row: 9/10;
    }

    #daddy-date{
        grid-column: 4/5;
        grid-row: 10/11;
    }

    #anuel{
        grid-column: 1/2;
        grid-row: 11/12;
    }

    #anuel-name{
        grid-column: 1/2;
        grid-row: 12/13;
    }

    #anuel-date{
        grid-column: 1/2;
        grid-row: 13/14;
    }

    #rosalia{
        grid-column: 2/3;
        grid-row: 11/12;
    }

    #rosalia-name{
        grid-column: 2/3;
        grid-row: 12/13;
    }

    #rosalia-date{
        grid-column: 2/3;
        grid-row: 13/14;
    }

    #karol{
        grid-column: 3/4;
        grid-row: 11/12;
    }

    #karol-name{
        grid-column: 3/4;
        grid-row: 12/13;
    }

    #karol-date{
        grid-column: 3/4;
        grid-row: 13/14;
    }

    #aventura{
        grid-column: 4/5;
        grid-row: 11/12;
    }

    #aventura-name{
        grid-column: 4/5;
        grid-row: 12/13;
    }

    #aventura-date{
        grid-column: 4/5;
        grid-row: 13/14;
    }
}

/* artist */

#collage{
    width: 100vw;

    padding-bottom: 10vh;
}

#naam{
    color: #FBC601;

    font-family: 'sigmar';
    font-size: 7vw;

    padding: 1.5rem 2rem;
}

h2{
    color: #FBC601;

    font-family: 'sigmar';
    font-size: 3vw;

    padding: 2vh 5vw;
}

#tekst{
    margin: 0 auto;
}

.artikel{
    width: 70vw;
    color: white;

    font-family: 'sour';
    font-size: 2vw;

    padding-left: 5vw;
}

@media (min-width: 600px){
    h2{
        padding-left: 15vw;
    }

    #naam{
        padding-left: 15vw;
    }

    .artikel{
        padding-left: 15vw;
    }
}

@media (min-width: 800px){
    .artikel{
        width: 50vw;
        font-size: 0.8rem;

        padding-left: 4vw;
    }

    #tekst{
        display: flex;
        flex-wrap: wrap;
    }

    h2{
        padding-left: 4vw;
    }

    #naam{
        padding-left: 4vw;
    }
}

@media (min-width: 1100px){
    .artikel{
        width: 45vw;

        font-size: 1rem;
    }

    #tekst{
        display: flex;
        flex-wrap: wrap;

        margin: 0 auto;
        padding-left: 6vw;
    }

    #naam{
        padding-left: 8vw;
    }
}

/* tickets */

#tickets{
   padding: 3vh 10vw;
}

.knoppen{
    display: flex;
    flex-wrap: wrap;

    gap: 3vw;
    padding: 4vh 6vw;
}

.knop{
    background-color: #CE0A17;
    color: white;
    font-family: 'sigmar';
    font-size: 3vw;
    letter-spacing: 2px;

    text-transform: uppercase;
    text-decoration: none;

    padding: 15px 25px;
    margin: 0 auto;
    display: block;

    border-radius: 25px;

    transition: all .45s ease-in-out; 
}

.knop:hover {
    box-shadow: 0 8px 16px rgba(247, 211, 65, 0.85);
    background-color: rgb(232, 38, 21);
    margin-top: -5px;
}

#naam-ticket{
    color: #CE0A17;

    font-family: 'sigmar';
    font-size: 10vw;

    text-align: center;
}

.ticket{
    color: white;
    font-family: 'sour';
    font-size: 3vw;
    text-decoration: underline;

    display: block;
}

.ticket:hover{
    text-shadow: #FBC601 1px 0 10px;
}

.soort-ticket{
    font-size: 6vw;
    padding-left: 0;
}

.lijst{
    line-height: 4vh;
}

@media (min-width: 800px){
    .knop{
        font-size: 2vw;
    }

    .soort-ticket{
        font-size: 4vw;
    }

    .ticket{
        font-size: 2vw;
        line-height: 6vh;
    }

    .tickets{
        margin: 0 auto;
    }
}

/* merch */

#merchandise{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(1, 1fr);

    padding: 7vw;
}

.merch{
    width: 40vw;
}

#cap{
    grid-column: 1/2;
    grid-row: 1/2;
}

#cap-name{
    grid-column: 1/2;
    grid-row: 2/3;
}

#cap-price{
    grid-column: 1/2;
    grid-row: 3/4;
}

#hoodie{
    grid-column: 2/3;
    grid-row: 1/2;
}

#hoodie-name{
    grid-column: 2/3;
    grid-row: 2/3;
}

#hoodie-price{
    grid-column: 2/3;
    grid-row: 3/4;
}

#case{
    grid-column: 1/2;
    grid-row: 4/5;
}

#case-name{
    grid-column: 1/2;
    grid-row: 5/6;
}

#case-price{
    grid-column: 1/2;
    grid-row: 6/7;
}

#mug{
    grid-column: 2/3;
    grid-row: 4/5;
}

#mug-name{
    grid-column: 2/3;
    grid-row: 5/6;
}

#mug-price{
    grid-column: 2/3;
    grid-row: 6/7;
}

#shirt{
    grid-column: 1/2;
    grid-row: 7/8;
}

#shirt-name{
    grid-column: 1/2;
    grid-row: 8/9;
}

#shirt-price{
    grid-column: 1/2;
    grid-row: 9/10;
}

#bag{
    grid-column: 2/3;
    grid-row: 7/8;
}

#bag-name{
    grid-column: 2/3;
    grid-row: 8/9;
}

#bag-price{
    grid-column: 2/3;
    grid-row: 9/10;
}

#socks{
    grid-column: 1/2;
    grid-row: 10/11;
}

#socks-name{
    grid-column: 1/2;
    grid-row: 11/12;
}

#socks-price{
    grid-column: 1/2;
    grid-row: 12/13;
}

#band{
    grid-column: 2/3;
    grid-row: 10/11;
}

#band-name{
    grid-column: 2/3;
    grid-row: 11/12;
}

#band-price{
    grid-column: 2/3;
    grid-row: 12/13;
}

.item{
    color: #FBC601;
    font-family: 'sigmar';
    font-size: 3vw;

    padding-left: 10vw;
    padding-top: 2vh;
}

.price{
    color: #FBC601;
    font-family: 'sour';
    font-size: 2.5vw;

    padding-left: 10vw;
    padding-bottom: 20vh;
}

@media (min-width: 800px){
    #merchandise{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(1, 1fr);
    }
    
    .merch{
        width: 20vw;
        padding-left: 2vw;
    }

    .item{
        color: #FBC601;
        font-family: 'sigmar';
        font-size: 2vw;

        padding-left: 6vw;
    }
    
    .price{
        color: #FBC601;
        font-family: 'sour';
        font-size: 1.5vw;

        padding-left: 6vw;
    }
    
    #cap{
        grid-column: 1/2;
        grid-row: 1/2;
    }
    
    #cap-name{
        grid-column: 1/2;
        grid-row: 2/3;
    }
    
    #cap-price{
        grid-column: 1/2;
        grid-row: 3/4;
    }
    
    #hoodie{
        grid-column: 2/3;
        grid-row: 1/2;
    }
    
    #hoodie-name{
        grid-column: 2/3;
        grid-row: 2/3;
    }
    
    #hoodie-price{
        grid-column: 2/3;
        grid-row: 3/4;
    }
    
    #case{
        grid-column: 3/4;
        grid-row: 1/2;
    }
    
    #case-name{
        grid-column: 3/4;
        grid-row: 2/3;
    }
    
    #case-price{
        grid-column: 3/4;
        grid-row: 3/4;
    }
    
    #mug{
        grid-column: 4/5;
        grid-row: 1/2;
    }
    
    #mug-name{
        grid-column: 4/5;
        grid-row: 2/3;
    }
    
    #mug-price{
        grid-column: 4/5;
        grid-row: 3/4;
    }
    
    #shirt{
        grid-column: 1/2;
        grid-row: 4/5;
    }
    
    #shirt-name{
        grid-column: 1/2;
        grid-row: 5/6;
    }
    
    #shirt-price{
        grid-column: 1/2;
        grid-row: 6/7;
    }
    
    #bag{
        grid-column: 2/3;
        grid-row: 4/5;
    }
    
    #bag-name{
        grid-column: 2/3;
        grid-row: 5/6;
    }
    
    #bag-price{
        grid-column: 2/3;
        grid-row: 6/7;
    }
    
    #socks{
        grid-column: 3/4;
        grid-row: 4/5;
    }
    
    #socks-name{
        grid-column: 3/4;
        grid-row: 5/6;
    }
    
    #socks-price{
        grid-column: 3/4;
        grid-row: 6/7;
    }
    
    #band{
        grid-column: 4/5;
        grid-row: 4/5;
    }
    
    #band-name{
        grid-column: 4/5;
        grid-row: 5/6;
    }
    
    #band-price{
        grid-column: 4/5;
        grid-row: 6/7;
    }
    
}

footer{
    min-height: 20vh;
    background-image: url(../img/footer-klein.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0 40vh;

    padding-top: 20vh;
}

footer nav{
    width: 50vw;
    position: relative;

    padding-left: 10vw;

    display: none;
}

.footer-menu{
    color: white;
    font-family: 'sigmar';
    font-size: 1.5vw;
    text-transform: uppercase;
    letter-spacing: 1px;

    cursor: pointer;
}

.footer-menu:hover{
    color: #CE0A17;
}

.icons{
    display: flex;
    flex-wrap: wrap;
}

#face{
    background-image: url(../img/facebook.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15vw;
    height: 15vh;

    position: relative;
    left: 5vw;
    top: 5vh;
}

#insta{
    background-image: url(../img/insta.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15vw;
    height: 15vh;

    position: relative;
    left: 15vw;
    top: 5vh;
}

#x{
    background-image: url(../img/twitter.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15vw;
    height: 15vh;

    position: relative;
    left: 25vw;
    top: 5vh;
}

#yt{
    background-image: url(../img/youtube.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 15vw;
    height: 15vh;

    position: relative;
    left: 35vw;
    top: 5vh;
}

.copy{
    color: #2D5D33;
    font-family: 'sigmar';
    font-size: 2vw;

    display: block;
    text-align: center;

    padding-top: 15vh;
    padding-bottom: 5vh;
}

@media (min-width: 800px){
    footer{
        background-image: url(../img/footer-groot.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 0 40vh;
    }

    footer nav{
        display: block;
    }

    #face{
        width: 7vw;
        height: 7vh;
    
        position: relative;
        left: 70vw;
        top: -150px;
    }

    #face:hover{
        background-image: url(../img/facebook-white.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 7vw;
        height: 7vh;
    }
    
    #insta{
        width: 7vw;
        height: 7vh;
    
        position: relative;
        left: 70vw;
        top: -150px;
    }

    #insta:hover{
        background-image: url(../img/insta-white.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 7vw;
        height: 7vh;
    }
    
    #x{
        width: 7vw;
        height: 7vh;
    
        position: relative;
        left: 70vw;
        top: -150px;
    }

    #x:hover{
        background-image: url(../img/twitter-white.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 7vw;
        height: 7vh;
    }
    
    #yt{
        width: 7vw;
        height: 7vh;
    
        position: relative;
        left: 70vw;
        top: -150px;
    }

    #yt:hover{
        background-image: url(../img/youtube-white.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 7vw;
        height: 7vh;
    }
}