/*-----main----*/
.container .main {
    width: 80%;
    margin-right: 45px;
}

.container .r-side{
    width: 200px;
    font-size: 2.3em;
    right: -60px;
    top: 302px;
}
.container .r-side .vrstDatum{
    width: 100%;
}

.container .main .headVrst{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 2px solid black;
    font-size: 2em;
    margin-bottom: 25px;
    padding-bottom: 5px;
}

.container .main .vrstAfb{
    height: 400px;
    width: 100%;
    background-size: cover;
    background-position: center center;
    margin-bottom: 25px; 
}

.container .main .mainVrst {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.container .main .mainVrst .info {
    width: 48%; 
}

/* .container .main .mainVrst .info .mainInfo {
    line-height: 1.6em; 
} */

.container .main .tijd{
    display:flex;
    justify-content: space-between;
    font-size: 1.3em;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* .container .main .tijd .datumklein{
    margin-right:30px;
} */

.container .main .mainVrst .info .mainInfo .link{
    text-decoration: underline;
    margin-bottom: 25px;

}

/* .container .main .mainVrst .mainInfo p{
    text-align: justify;
} */

.container .main .mainVrst .mainInfo a{
    text-decoration: underline;
}

.container .main .mainVrst .text{
    width: 48%;  
}


/* .container .main .mainVrst .text p{
    text-align: justify;
} */

.container .main .mainVrst .text a{
    text-decoration: underline;
}

.container .main .mainVrst .headInfo{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 2px solid black;
    font-size: 1.6em;
    margin-bottom: 13px;
    padding-bottom: 13px;
}

.container .date p{
    font-weight: lighter;
}

.bestelBtn{
    width: 170px;
}
.disableBtn{
     width: 170px;
     padding: 0;
 }
.disableBtn:hover {
    cursor: initial;
}

.buttonDown {
    position: fixed;
    left: 15px;
    bottom: 40px;
}

/* ---------- RESPONSIVE --------- */

@media screen and (max-width: 1100px) {
    /*FONT*/
    .container .main .headVrst{
        font-size: 1.7em;
    }

    .container .main .mainVrst .headInfo{
        font-size: 1.46em;
        line-height: 1.2em;
    }

    /*FONT en dichter tegen navigatie*/
    .container .r-side{
        font-size: 1.9em;
        top: 352px;
    }

    /*hoogte afb*/
    .container .main .vrstAfb{
        height: 350px;
    }
}

@media screen and (max-width: 870px) {
    /*FONT*/
    .container .main .headVrst{
        font-size: 1.6em;
        line-height: 1.3em;
    }
    /*breedte voorstelling wordt 100%*/
    .container .main {
        width: 100%;
        margin-right: 0;
    }
    /*datum valt weg*/
    .container .r-side{
        display: none;
    }
    /*hoogte afb*/
    .container .main .vrstAfb{
        height: 300px;
    }
    .container .zijkant{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .buttonDown {
        margin-top: 20px;
        margin-bottom: 20px;
        position: static;
    }
    .bestelBtn{
        margin-left: 0;
        width: 100%;
    }
    
    /*uitleg valt onder elkaar, kolommen vallen weg.*/
    .container .main .mainVrst{
        display: block;
        width: 100%;
    }
    .container .main .mainVrst .info{
        width: 100%;
    }

    .container .main .mainVrst .mainInfo{
        margin-bottom: 30px;
    }

    .container .main .mainVrst .text{
        width: 100%;
    }

}

@media screen and (max-width: 800px) {
    .main .headVrst{
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }
    .main .headVrst .media{
        font-size: .7em;
        padding-bottom: 2px;
    }
    .container .aside ul{
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .aside ul li{
        width: 100px;
    } 
}
@media screen and (max-width: 600px) {
    .container .aside ul li{
        padding: 10px 0;
        width: 30%;
        font-size: 0.8em;
        margin-right: 0;
    } 
}

@media screen and (max-width: 400px) {
    .container .main .mainVrst .headInfo .price{
        font-size: 0.95em;
        width: 120px;
        text-align: end;
        display: flex;
        justify-content: flex-end;
        align-self: flex-end;
    }
}