/* sectie 1 */
main div section:first-of-type{
    display: grid;
    padding: 2.25em 1em 3em 1em;
    line-height: 1.5;
    /* gap: 1em; */
}
main div:first-child>img{
    width: 100vw;
    top: 0;
    right: 0;
    left: 0;
}

main div section:first-of-type p:first-of-type {
    order: -5;
    text-transform: uppercase;
    
}
main div section:first-of-type h1{
    text-transform: uppercase;
    font-size: 3em;
}
main div section:first-of-type ul{
    display: flex;
    flex-direction: row;
    gap: 2em;
    padding-top: 1em;
    list-style-type: none;
    
}

main div section:first-of-type ul p{
    font-family: var(--font-Melkweg);
    font-size: 1.2em;
    font-weight: 200;
}

/* sectie 2 */
main div section:first-of-type p:nth-of-type(2){
    color: var(--color-event-p);
    font-size: 1.1em;
    font-weight: 200;
}

main div section:nth-of-type(2){
    display: flex;
    flex-direction: column;
}
main div section:nth-of-type(2) button{
    font-family: var(--font-Melkweg);
    background-color: var(--background-color-buttontickets);
    
    display: flex;
    text-decoration: none;
	border: none;
    padding: 1em 0 1em 0;
    text-align: center;
    justify-content: center;
    line-height: 0.5em;

    cursor: pointer; 
    font-size: 1.375rem;
    transition: .5s ease-in-out;

}

main div section:nth-of-type(2) button:hover{
    background-color: var(--background-color-buttontickets-hover);
}
div section:nth-of-type(2){
    padding: 0 1em 0 1em;
    line-height: 1.5em;
}


div section:nth-of-type(2) p:nth-of-type(1){
    padding-top: 1em;
}

div section:nth-of-type(2) p:nth-of-type(2){
    font-weight: 500;

}

div section:nth-of-type(2) p:nth-of-type(3){
    color: var(--color-event-p);
    font-size: .85em;
    padding-top: .5em;
}
div section:nth-of-type(2) p:nth-of-type(4){
    border-top: 1px solid var(--color-event-p);
    padding-top: .5em;
    margin-top: 2em;
    font-size:1.125rem;

}

/* sectie 3 */
main>section:nth-of-type(1){
    width: 100vw;
    padding: 3.5em 1em 7em 1em;
    font-size:1.125rem;
}
main>section:nth-of-type(1) li{
    list-style-type: none;

}
main>section:nth-of-type(1) p{
    text-transform: lowercase;

}
main>section:nth-of-type(1) li:first-of-type{
    font-style: italic;
    padding-bottom: 1.5em;
    
}
main>section:nth-of-type(1) p{
    line-height: 1.35em;
}
main>section:nth-of-type(1) li:nth-of-type(2){
    padding-bottom: 1.5em;
}
main>section:nth-of-type(1) a{
    color: var(--color-text);
    position: relative;
    display:inline-flex;
    align-items: center;
    margin-left: 2.5em;
    padding-left: .5em;
    
}
/* main>section:nth-of-type(1) a:hover{

} */
main>section:nth-of-type(1) a::after{
    content: "⚫️";
    position: absolute;
    display:block;
    width: .8em;
    left: -1em;
    
}

main>section:nth-of-type(1) article{
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: repeat(2, 1fr);
    background-color: var(--color-grey-background);
    margin-top: 2em;
    height: 6.25em;
}
main>section:nth-of-type(1) article h2{
    font-family: var(--font-Melkweg);
    grid-column: 2 / 4;
    padding-left: 1rem;
    
}
main>section:nth-of-type(1) article p{
    order: -10;
    grid-column: 2 / 4;
    align-content: end;
    text-transform: lowercase;
    font-size: .875rem;
    padding-left: 1rem;
}
main>section:nth-of-type(1) article img{
    order: -15;
    transition: transform 1000ms;
	overflow: hidden;
    height: 6.25em;
   
}
main>section:nth-of-type(1) article:hover{
    img {
        transform:scale(1.2);
    }
    h2 {
        text-decoration: underline .06em;
    }   
}

main>section:nth-of-type(1) article div{
    grid-row: 1 / 3;
    overflow: hidden;
    
}

/* sectie 4 */
main>section:nth-of-type(2){
    background-color: var(--color-background-2);
    padding: 1.5em 1em 4em 1em;
    
}
main>section:nth-of-type(2) h2, section:nth-of-type(4) h3, section:nth-of-type(4) p{
    color: var(--color-text-2);
}
main>section:nth-of-type(2) p{
    font-family: var(--font-Melkweg);
    order: -5;
    font-size: 1.125em;
    color: var(--color-text-2);
}

main>section:nth-of-type(2) img{
    width: 100%;
    order: -10;
}
main>section:nth-of-type(2) a{
    display: grid;
    gap: .5em;
    padding-bottom: 2.25em;
    grid-template-columns: 1fr;
    text-decoration: none;

}
main>section:nth-of-type(2) h2{
    font-size: 1.25em;
    border-top: .07em solid var(--color-text-2);
    padding-top: .5em;
    padding-bottom: .5em; 
}
main>section:nth-of-type(2) h3{
    font-size: 1.75em;   
    color: var(--color-text-2)                                                                                                                             ;
}

@media (min-width: 40em) {
    header nav:first-of-type{
        position: relative;
        top: 0;
        bottom: auto;
        height:2em;
        background-color: var(--color-background);

        align-items: center;

    }
    header nav:first-of-type h2{
        color: var(--color-text);
        font-size: 1.5em;
        
    }  
    header nav:first-of-type a:nth-of-type(2),
    header nav:first-of-type a:nth-of-type(3){
        display: contents;
        color: var(--color-text);
        font-size: .875rem;

    }
    header nav:first-of-type a:nth-of-type(2){
        margin-right: 1em;
    }
    header nav:first-of-type svg:first-of-type{
        stroke: var(--color-text);
        height: .7em;
    }
    header nav:first-of-type > div{
        background-color: var(--color-background);
    }
    header nav:first-of-type > div span{
        background-color: var(--color-background-2);
    }

    /* main>img{
        padding-top: 2em;
    } */

    main>section:nth-of-type(2) ul{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-column-gap: 1.5rem;
    }
    main>section:nth-of-type(2){
        padding: 1.5em 1.5em 2em 1.5em;
    }
    
}

/* @media (min-width: 60em){
    main section:first-of-type{
        order: -10;
        padding: 2.25em 3em 3em 3em;
    }
    main section:first-of-type h1{
        font-size: 5.625em;
    }
    main section:first-of-type>p:first-of-type{
        font-size: 1.25em;
    }
    main section:first-of-type ul p{
        font-size: 1.375em;
    }
    main>img{
        width: 67.5%;
        order:-5;
    }
    main section:nth-of-type(2){
        width: 22.5%;
        float: right;
    }
    main {
        display: flex;
        flex-direction: column;
    } 
    header nav:first-of-type{
        padding: 1.5rem 3rem;
    }
   
} */

@media (width > 60em){
    main div section:first-of-type{
        order: -10;
        grid-column: 1/3;
        width: 100vw;
        padding: 2em 0 0 0;
    }
    main div section:first-of-type h1{
        font-size: 5.625em;
    }
    main div section:first-of-type>p:first-of-type{
        font-size: 1.25em;
    }
    main div section:first-of-type ul p{
        font-size: 1.375em;
    }
    main div:first-child>img{
        width: 100%;
        order:-5;
        /* padding-left: 3rem; */
    }
    div section:nth-of-type(2){
        padding: 0;
        /* padding-left: 1.5em; */
        /* padding: 0 3rem 0 1.5rem; */
    }
    main>div:first-child{
        width: 100vw;
        display: grid;
        grid-template-columns: 72% 25%;
        grid-template-rows: auto;
        padding: 0 3em;
        gap: 1.5em;
    }
    header nav:first-of-type{
        padding: 1.5rem 3rem;
    }
    main>section:nth-of-type(1){
        display: grid;
        grid-template-columns: 30% 70%;
        padding: 3.5em 3em 7em 3em;
        width: 100vw;
        /* float: right; */
        
    }
    
    main>section:nth-of-type(1) article{
        width: 25vw;
        order: -1;
        float: left;
    }
    main>section:nth-of-type(2) ul{
        display: flex;
        flex-direction: row;
        gap: 1.5em;
    }
    main>section:nth-of-type(2) li:last-of-type{
        display: none;
    }
    main>section:nth-of-type(2){
        padding: 1.5em 3em 4em 3em;

    }

    
    /* main div section:nth-of-type(2){
        width: 50%;
    } */
    /* main {
        display: flex;
        flex-direction: column;
    }  */
    
}