/***reset***/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    /* img {
        display: block;
        height: 100%;
    } */
}

/*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/

/*`▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

/* todo test */
/*! jaja */
/** ooooh */
/* ? */
/* // okkie */

body>* {
    box-sizing: border-box;
    /*background: #C1FFC1; opacity: 0.5;*/
}

body {
    text-decoration: none;
}

/**structuur geheel */
/*~ hallo dit is wel even andere koek dan de koek die we gisteren hadden en hij
smaakt heel erg goed en we delen de koek
/*`en die mensen delen de koek ook */
/*` en ik wou ook nog even dit zeggen: je bent een fijne persoon die ik graag
 mag. */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    /* font-size: 1.1em; */
    /* font-size: 1.1em; */
    /* color: #FFF; */
    /*~ todo */
    color: rgba(255, 255, 255, 0.198);
}

.wrapperalles header,
.wrapperalles footer,
.sidebar-1,
.sidebar-2,
.middelstevandrieluik {
    padding: 20px;
}

header {
    display: flex;
    justify-content: center;
    z-index: 2 !important;
    width: 100%;
    height: 70px;

    /*` margin-bottom: 20px; */
}

/*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.dummycontainer {
    width: 100%;
    height: 30px;
    /* background-color: #f400a1; */
}

/*`▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/

footer {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

/* .header {
    background-color: #0fe408c4;
} */

.footer {
    background-color: #00ffddde;
}

/* .wrapperalles {
    background-color: rgba(0, 0, 0, 0)
} */

.sidebar-1 {
    margin-top: 0px;
    /* background: #f34a4d54; */
    text-align: left;
    z-index: 1;
    margin-top:250px;
    opacity:1.0;
}

.pasfotosma {opacity: 1.0}

.sidebar-2 {
    /* background: #f0f34a1a; */
    text-align: left;
    z-index: 1;
}

.middelstevandrieluik {
    /* color: rgba(0, 0, 0, 0); */
    z-index: 1;
}

.wrapperalles {
    min-height: 100vh;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* .wrapperinner {margin:auto} */
/* .wrapperinner {margin-left:auto; margin-right:auto} */

.wrapperalles,
.wrapperinner {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
}

.middelstedrieluik {
    flex: 1 1 auto;
}

/** Media Queries compu */
@media screen and (max-width: 1000px) {


    /*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
    /* .header {
        height: 70px;
    } */
    /* .seven{padding:0px; align-items:left;}
    ul.aaa {padding-left:35%;} */

    ul.oswald23.bnavul {
        margin-top: 80px;
        margin-right: 0px;
    }

    .wrapperalles header {
        padding: 0px;
        margin: 0px;
    }

    .dummycontainer {
        display: flex;
        width: 100%;
        height: 300px;
        background-color: #ff00aa;
        opacity: 0;
        color: black;
        z-index: 1;
    }

    /* .box>* {
        margin: 0px;
        height: 170px;
        min-width: 150px;
        padding: 0px;
    } */

.pasfotosma {opacity: 1.0}

    .box {
        width: 250px;
        height:300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        flex-direction: column !important;
            } 

    .one {
        font-size: 16px;
        height: 300px !important; 
        border-radius: 125px 125px 0px 0px !important;
        -moz-border-radius: 125px 125px 0px 0px !important;
        -webkit-border-radius: 125px 125px 0px 0px !important;
        border-top: 0px dotted #888888 !important;
        border-right: 0px dotted #888888 !important;
        padding-top: 4px !important;
        justify-content: center !important;
    }

    .two {
        font-size: 16px;
        height: 100px !important; 
        border-radius: 3px 3px 3px 3px !important;
        -moz-border-radius: 3px 3px 3px 3px !important;
        -webkit-border-radius: 3px 3px 3px 3px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
    }

    .three {
        font-size: 16px;
        height: 100px !important; 
        border-radius: 3px 3px 3px 3px !important;
        -moz-border-radius: 3px 3px 3px 3px !important;
        -webkit-border-radius: 3px 3px 3px 3px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
    }

    .four {
        font-size: 16px;
        height: 100px !important; 
        border-radius: 3px 3px 3px 3px !important;
        -moz-border-radius: 3px 3px 3px 3px !important;
        -webkit-border-radius: 3px 3px 3px 3px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
    }

    .five {
        font-size: 16px;
        height: 100px !important; 
        border-radius: 3px 3px 3px 3px !important;
        -moz-border-radius: 3px 3px 3px 3px !important;
        -webkit-border-radius: 3px 3px 3px 3px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
    }

    .six {
        height: 100px !important; 
        border-radius: 3px 3px 3px 3px !important;
        -moz-border-radius: 3px 3px 3px 3px !important;
        -webkit-border-radius: 3px 3px 3px 3px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
    }

    .seven {
        border-radius: 3px 3px 20px 20px !important;
        -moz-border-radius: 3px 3px 20px 20px !important;
        -webkit-border-radius: 3px 3px 20px 20px !important;
        border-top: 1px dotted #888888 !important;
        padding-top: 4px !important;
        margin-bottom: 20px;

        

    }

    .rijtheaas {
        display: flex;
        flex-wrap: wrap !important;
    }

    .rijtjeaas * {
        border: 1px solid rgb(217, 255, 0) !important;
        padding: 0px;
        margin: 0px;
        flex: 1 1 10% !important;

        /* min-width:16 px; */
    }
}

/*`▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/



/** top navigation style */
.bnav ul li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

.bnav a {
    font-family: "Oswald", sans-serif;
    color: #81797e;
    position: relative;
    justify-content: center;
    padding: 0px, 0px;
    border: 1px dotted rgba(64, 27, 167, 0.897);
    opacity: 1;
    margin: 1px;
    line-height: 40px;
}

.bnav a:hover {
    color: #be3791;
}

.bnav a:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: #000000;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.15s ease-in-out 0s;
    transition: all 0.15s ease-in-out 0s;
}

.bnav a:hover:before,
.bnav a.active:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.bnav .active {
    color: #f400a1;
}

/** footer */
footer {
    z-index: 2;
}

.box {
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    /* justify-content: center; */
}

.box>* {
    margin: 0px;
    height: 170px !important;
    /* min-width: 170px !important; */
    padding: 0px;
}

.one {
    font-size: 25px;
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    /* color: #212121 !important; */
    /* color: #ffb1f5 !important; */
    color: #fffcfe !important;
    background: rgba(255, 104, 204, 0.2);
    border-radius: 30px 5px 5px 180px;
    -moz-border-radius: 30px 5px 5px 180px;
    -webkit-border-radius: 30px 5px 5px 180px;
    border-right: 1px dotted #888888;
    z-index: 1;
    min-width: 140px !important;
}

.two {
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb1f5 !important;

    background: rgba(255, 104, 204, 0.2);

    border-radius: 30px 5px 5px 180px;
    -moz-border-radius: 30px 5px 5px 180px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-right: 1px dotted #888888;
    z-index: 1;
    min-width: 90px !important;
}

.three {
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb1f5 !important;

    background: rgba(255, 104, 204, 0.3);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-right: 1px dotted #888888;
    z-index: 1;
    min-width: 90px !important;
}

.four {
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f9fd1d !important;
    background: rgba(255, 104, 204, 0.4);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-right: 1px dotted #888888;
    z-index: 1;
    justify-content: center;
    min-width: 90px !important;
}

.five {
    font-size: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb1f5 !important;
    background: rgba(255, 104, 204, 0.4);
    justify-content: center;
    align-items: center;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-right: 1px dotted #888888;
    z-index: 1;
    min-width: 90px !important;
}

.six {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffb1f5 !important;

    background: rgba(255, 104, 204, 0.3);
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-right: 1px dotted #888888;
    padding: 0px;
    z-index: 1;
    min-width: 90px !important;
}


    /*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
.seven {
    display: flex; 
     justify-content: left;
     /* justify-content: center; */
    /* align-items: center; */
    /* flex: 1 1 0; */
    /* flex-direction: column; */
    color: #ffb1f5 !important;

    background: rgba(255, 104, 204, 0.2);
    border-radius: 5px 30px 180px 5px;
    -moz-border-radius: 5px 30px 180px 5px;
    -webkit-border-radius: 5px 30px 180px 5px;
    z-index: 1;
    padding: 11px 0px 0px 5px;
    min-width: 140px !important;
}

@media only screen and (max-width: 900px) and (orientation : portrait) {
    .seven {
        display: flex;
        justify-content: center; 
    padding: 0px 0px 0px 0px;}
    .text1{font-size: 6.0vw;}
    .header1recursive{font-size: 9.0vw;}
    .aaa {
        line-height: 29px;
    }
    
    }
    @media only screen and (max-width: 900px) and (orientation : landscape) {
        .seven {
    padding: 0px 0px 0px 0px;
    display: flex;}
      .text1{font-size: 3.5vw;}
      .header1recursive{font-size: 4.5vw;}
      .aaa {
        line-height: 29px;
    }
    }

.aaa {
    line-height: 19px;
}

    /*`▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/





ul.aaa {
    list-style-type: none;
    margin: 0;
    padding: 0;
    /* padding-left: 35%; */
    /* padding-left: 35px; */
}

ul.aaa li a {
    color: #f400a1;
    outline: none;
    text-decoration: none;
    /* padding: 2px 1px 0; */
}

ul.aaa li a:hover {
    color: #00ff00;
}


/** kaleidoscope */
.pasfotosma {
    font-size: 16px;
    color: rgba(0, 0, 0, 0);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex: 1 1 auto;
    /* margin: 30px; */
    border: 1px rgba(255, 0, 0, 0) solid;
    width: 200px;
    height: 250px;
    padding: 5px;
    /* this */
}

.pasfotosma>div {
    font-size: 16px;
    color: rgba(0, 0, 0, 0);
    border: 5px blue dotted;
    text-align: center;
    background-image: url("http://joke-parmentier.nl/img/ma2.jpg");
    margin: 5px;
    /* and that, will result in a 10px gap */
}

/** borders */
.border {
    border: 1px solid red;
    padding: 4px;
}

.border * {
    border: 1px solid blue;
    padding: 4px;
    margin: 0 4px;
    min-width: 100px;
}

.border2 {
    border: 1px solid red;
    padding: 0px;
    min-height: 100px;
    /*width: 300px;*/
}

.border2 * {
    border: 1px solid blue;
    padding: 0px;
    margin: 0 0px;
    min-width: 50px;
}

/** snippets */

.flex {
    display: flex;
}

.z2 {
    z-index: 2;
}

.green {
    background-color: green;
}

.height70 {
    height: 70px;
}

.between {
    justify-content: space-between;
}

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

.start {
    justify-content: flex-start;
}

.end {
    justify-content: flex-end;
}

.center {
    justify-content: center;
}

.rijtjeaas * {
    border: 1px solid blue;
    padding: 0px;
    margin: 0px;
    flex: 1 1 1;
    /* min-width:16 px; */
}

/* #positieimagewheel2 {
    position: relative;
    top: 40px;
    left: 40px;
} */

/* .imagema>img {
    vertical-align: top;
} */

/** flexaas */
.flexaas {
    padding: 0;
    margin: 0;
    list-style: none;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    justify-content: space-evenly;
}

.flex-item {
    background: tomato;
    padding: 0px;
    border: 0px solid blue;
    min-width: 130px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

.flex1 {
    flex: 1 1 1;
}

.flex2 {
    flex: 1 1 1;
}

.flex3 {
    flex: 1 1 1;
}

.flex4 {
    flex: 1 1 1;
}

.flex5 {
    flex: 1 1 1;
}

.flex6 {
    flex: 1 1 1;
}

@media (max-width: 780px) {
    ul.flexaas {
        flex-wrap: wrap;
        justify-content: center;
        background-color: #f5a281;
        padding: 0;
    }

    .heel {
        flex-basis: 100%;
        text-align: center;
        margin-left: 0;
    }

    .half {
        flex-basis: 50%;
        text-align: center;
        margin-left: 0;
    }

    .eenderde {
        flex-basis: 33.33%;
        text-align: center;
        background-image: url(http://www.joke-parmentier.nl/img/01.jpg);
    }
}






















/** Media Queries mobile */
@media screen and (max-width: 667px) {
    /* @media (max-width: 769px) { */
    
    
        /*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
        /*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
        /*`▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼*/
   .six{   
        display: flex;
    justify-content: center;
    padding-left:30px;
     /* left:50px; */
    align-items: center;}
        /* .six{padding:0px; align-items:left;} */
        /* ul.aaa {padding-left:15%;} */
    
    
        .seven{
            /* padding:0px;  */
            padding-left:15px;
            /* align-items:left; */
        /* ul.aaa {padding-left:35%;} */
        display: flex;
        justify-content: center; 
    }
        .sidebar-1 {
            margin-top: 0px;
            background: #f34af38c; 
            text-align: left;
            align-items: center;
            z-index: 1;
            opacity:1.0;
        } 
    
       ul.oswald23.bnavul {
            margin-top: 0px;
            margin-right: 0px;
            justify-content: right;
        } 
    
        .dummycontainer {
            display: flex;
            width: 100%;
            height: 50px;
            background-color: #f0f400; 
            color: rgb(0, 0, 0);
            z-index: 1;
        } 
    
      /* .mobilefooter { */
      /* footer { */
        /* margin:0 auto;
            width: 100%;
            display: flex;
            /* flex-wrap: wrap; */
            /* justify-content: center;
            flex-direction: column;
        }  */
    
         .box>* {
            flex-basis: 1 1 100%;
        } 
    
     
        /*`▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲*/
    
        .header,
        .bnavul {
            display: flex;
        }
    
        .sidebar-1 {
            order: -1;
        }
    
        bnav ul {
            flex-wrap: wrap;
            justify-content: center;
            background-color: #f5a281;
            padding: 0;
        }
    
        .wrapperinner {
            flex-direction: row;
        }
    
        .sidebar-1 {
            flex: 0 0 20%;
        }
    
        .sidebar-2 {
            flex: 0 0 30%;
        }
    
        .header {
            flex-direction: column;
            align-items: center;
        }
    }




    /* @media screen and (min-width:300px) and (max-width:799px) {}
    @media screen and (min-width:800px) and (max-width:1279px) {}

    @media screen and (min-width:1280px) and (max-width:1439px) {}
  
    @media screen and (min-width:1440px) and (max-width:1919px) {}
  
    @media screen and (min-width:1920px) and (max-width:2559px) {}
  
    @media screen and (min-width:2560px) {} */