/* General */
body {
    font-family: comfortaa, sans-serif;
    color: white;
    background-image: url(assets/Middel.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

a {
    text-decoration: none;
    color: white;
}

.oranje {
    color: #f08050
}

.blauw {
    color: #1a4074
}

.bol {
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bolblauw {
    background-color: rgba(27, 60, 106, 0.9);
}

.boloranje {
    background-color: #f08050;
    padding: 4vw;
    font-size: 5vw
}

.piet {
    border-radius: 50%;
    width: 60vw;
    height: 60vw;
}

.Videobol {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.playbutton {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f08050;
    width: 14vw;
    height: 14vw;
    font-size: 5vw;
    border-radius: 50%;
    margin-top: -8vw
}

/* Header */
.headerBanner {
    background-image: url(assets/CoverBanner.jpg);
    background-size: cover;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

.logo-1995 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vw;
    width: 100%;
}

.logo {
    width: 45vw
}

.tekst1995 {
    width: 45vw;
    text-align: right;
}

/* Centerpiece */
.centerpiece {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Footer */
.footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

}

.academieHoed {
    width: 40vw;;
    z-index: 11;


}
.welkom{
    margin-top: 10%;
    font-size: 4vw;
}

.footerImagecontainer {
    width: 100%;
    background-image: url(assets/footerBackground.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 20vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: -1;
}

/* MediaQueries */
/* Extra Small */
@media (min-width: 320px) {
    .bol {
        width: 80vw;
        height: 80vw;

        padding: 5vw
    }
    .tekst1995{
        font-size: 3vw;
    }
    .boloranje {
        margin-bottom: 10vw;
    }

    .piet {
        width: 80vw;
        height: 80vw;
    }

    .playbutton {
        margin-bottom: 10vw;
    }

    .vliegtuig-1 {
        width: 20vw;
        height: 90vw;
        margin-left: 60vw;
        margin-top: -70vw;
    }

    .vliegtuig-2 {
        position: relative;
        z-index: -1;
        width: 20vw;
        height: 80vw;
        margin-right: 40vw;
        margin-top: -40vw;
    }
    .vliegtuig-5{
display: none;
    }
    .centerpiece{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items: center;
    }

    .flexcenter {
        width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .playbutton {
        background-color: #1a4074;
    }

    .vliegtuig-3 {
        display: none;
    }
    .vliegtuig-4{
        position: relative;
        z-index: -1;
        width: 20vw!important;
        height: 20vw!important;
        margin-left: 20vw;
        margin-top: -40vw;
        margin-bottom: -20vw;
    }
    .academieHoed{
        margin-bottom: -16vw;
        margin-top:20vw
    }
}

/* BIG PORTRAIT PHONES */
@media (min-width: 414px) {
    p{padding:0vw}
    .bol {
        width: 50vw;
        height: 50vw;
        font-size: 3vw;
        padding: 8vw;
    }
 .playbutton{
     background-color: #f08050;
     color:white!important
 }
    .boloranje {
        margin-bottom: 10vw;
    }

    .spreadflex {
        display: flex;
        justify-content: space-between;
    }

    .spreadflex1 {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .test{
        padding:20vw;
        margin-top:-20vw;
        margin-bottom: 0vw;
    }
    .test2{
        padding:20vw;
        margin-bottom:-12vw;
    }
    .centerpiece {
        background-image: url(assets/background.jpg);
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height:100vw;
    }

    .piet {
        width: 40vw;
        height: 40vw;
    }

    .playbutton {
        width: 10vw;
        height: 10vw;
        font-size: 4vw;
        margin-top: -4vw;
        margin-bottom: 10vw;
    }

    .vliegtuig-1 {
        position: relative;
        z-index: -1;
        width: 20vw;
        height: 70vw;
        margin-left: 0vw;
        margin-top: -60vw;
        margin-bottom: -2vw;


    }


    .vliegtuig-2 {
        position: relative;
        width: 20vw;
        height: 80vw;
        margin-right: 40vw;
        margin-top: -40vw;
        z-index:-1
    }
    .vliegtuig-3{
        display:inline;
        margin-left: 40vw;
        height:60vw;
        margin-top:-110vw;
        margin-bottom:30vw;
        z-index:-1
    }
    .vliegtuig-4{
        position: relative;
        z-index: -1;
        width: 20vw;
        height: 70vw;
        margin-left: 20vw;
        margin-top: -40vw;
        margin-bottom: -20vw;
    }

    .academieHoed{
        margin-bottom: -16vw;
    }

}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 568px) {
    body {
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    .Videobol {
        padding: 0;
        margin: 0;
    }

    .spreadflex {

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        width: 100vw;
    }

    .flexcenter {
        width: 100vw;
        display: flex;
        justify-content: center;
    }

    .vliegtuig-1 {
        margin-bottom: -50vw;
    }

    .vliegtuig-2 {
        margin-bottom: -20vw;
        margin-left: 20vw;
        z-index: -1
    }

    .vliegtuig-3 {
        display: none;
    }


}

/* Iphone 6 landscape */
@media (min-width:667px) {
    .vliegtuig-1 {
        margin-top: -60vw;
        position: relative;
        z-index: -1
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body{
        width: 100%;;
    }

    .bol{
        padding:0vw;
        height:45vw;
        width:45vw;
        border-radius: 50%;
    }
    .boloranje{
        font-size: 2.5vw;
        padding:2vw
    }

    .flexcenter{
        width: 100%;
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .playbutton{
        background-color:#f08050;
    }
    .vliegtuig-1{
        margin-top: -50vw;
        margin-bottom:-1vw
    }
    .vliegtuig-4{        position: relative;
        z-index: -1;
        width: 40vw!important;
        height: 60vw!important;
        margin-left: 20vw;
        margin-top: -30vw;
        margin-bottom: -30vw;}
    .vliegtuig-5{
        position: relative;
        float:left;
        transform: rotate(-20deg);
        width: 20vw;
        height:50vw;
        margin-left: 10vw;
        margin-top: -40vw;
        margin-bottom:-20vw;
        z-index:-1
    }
    .vliegtuig-2{
        margin-right:-20vw;
        transform: rotate(25deg);
    }
    .centerpiece {
        margin: 10vw 0vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: space-between;
        background-image: url(assets/background.jpg);
        border-radius: 50%;
        background-repeat: no-repeat;
        background-size: 190%;
    }
    .spreadflex1{
        width:120%;
        margin-top:-20vw;
        margin-bottom:-10vw;
    }
    .welkom{
        font-size:4vw;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
p{
    padding:0vw
}
.logo-1995{
    margin:0vw!important;
}
.bolblauw{
    font-size:2.4vw!important;
    padding:6.5vw!important;
}
    .tekst1995 {
        font-size: 2vw;
        padding: 1vw
    }

    .logoimg {
        width: 20vw
    }

    .logo-1995 {
        margin-bottom: -10vw;
    }

    .spreadflex1 {
        width: 100%;
        justify-content: space-between;
        display: flex;
    }
    .flexcenter{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .playbutton {
        width: 8vw;
        height: 8vw;
        margin-top: -2vw;
        background-color: #f08050;
    }

    .bol,
    .piet {
        width: 30vw;
        height: 30vw;
        font-size: 1.8vw;
    }

    .bol {
        padding: 12vw;
    }

    .spreadflex {
        justify-content: space-around;
    }

    .vliegtuig-1 {
        position: relative;
        height: 60vw;
        margin-bottom: -15vw;
        margin-top: -50vw;
        margin-left: 15vw;
        z-index: -1;
    }

   .vliegtuig-2{
       margin-right: -25vw;
       height:50vw
   }
    .vliegtuig-3{
        display:inline;
        margin-left: -20vw;
        height:60vw;
        margin-top:-30vw;
        margin-bottom:-30vw
        
    }

.test{
    margin-top:-8vw;
    margin-bottom:2vw!important;
}
.test2{
    margin-top:-6vw
}

    .centerpiece {

        margin: 10vw 0vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-image: url(assets/background.jpg);
        width: 70vw;
        height: 70vw;
        border-radius: 50%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .MagaliePlaceholder {
        margin-left: 10vw;
    }

    .PieterPlaceholder {
        margin-right: 10vw
    }
    .spreadflex1{
        margin-top:0vw;
        width:150%;

    }
    .bolhert {
        margin-top: 20vw
    }

    .footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:-35%;
    }

    .academieHoed {
        position: relative;
        width: 100vw;
        display: flex;
        justify-content: center;
        /* margin-bottom:-8vw */

    }

    .welkom {
        font-size: 5vw;
    }
    .footer{
        position: relative;
        z-index:-1
    }
}

/* 
/* LANDSCAPEPHONES */
@media(min-width:568px)
        and (max-height: 540px){
    .boloranje{

    }
    .margin{
        margin-top:5vw!important;

    }
    .vliegtuig-1{
        position: relative;
        margin-top: -50vw;;
        margin-bottom: -10vw;
    }
    .vliegtuig-2{
        margin-top:0vw;
        margin-bottom: 0vw;;
    }

.vliegtuig-5{
    display:inline;
    width:10vw!important;
    height:10vw!important;
    margin-top:-40vw
}
.els{
    margin-top:10vw
}
.landscapelift{
    margin-top:-15vw;
    margin-bottom:-10vw
}
}
.opleidingsaanbod{
    margin-left:auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items:center;
    text-align: center;
    margin-bottom:50px;
    background-color:white;
}
.opleidingsaanbod h4{
    margin-top:2em;
    font-size:2rem;
    text-align: center;
    color:#d84849;
    background-color:white;
}
.opleidingsaanbod img{
    max-width:100%;

}