<style>

/* For Large displays: */

html {
    font-family: "Arial", sans-serif;
}

@media only screen and (orientation : landscape) {
    
#container { display:block; }
/* devices (portrait) */
.header {
    position: absolute;
    top: 0vh;
    display: block;
    width: 100vw;
    height: 23.5vh;
    text-align: center;
    z-index: +2;
}
.header1 {
    position: absolute;
    margin: inherit;
    text-align: center;
    font-size: 8vh;
    width: 100vw;
    z-index: +2;
}
.header2 {
    position: absolute;
    margin: inherit;
    text-align: center;
    font-size: 8vh;
    width: 100vw;
    color: #ce012d;
    z-index: +2;
}
.header-mid {
    position: absolute;
    margin: inherit;
    top: 6vh;
    text-align: center;
    font-size: 7vh;
    width: 100vw;
    z-index: +2;
}
.big-tijdblok {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 7vmin;
    top: 20.5vh;
}
.medium-tijdblok {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 66.67vw;
    z-index: +5;
    font-size: 7vmin;
    top: 20.5vh;
}
.normal-tijdblok {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    font-size: 7vmin;
    top: 20.5vh;
}
.basis-tijdblok {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    font-size: 7vmin;
    top: 20.5vh;
}
.big-betreft {
    position: absolute;
    text-align: center;
    padding: 2vw;
    width: 55vw;
    z-index: +5; 
    font-size: 7vmin;
    top: 32.5vh;
}
.medium-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    /* width: 66.67vw; */
    z-index: +5;
    font-size: 7vmin;
    top: 30.5vh;
}
.normal-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    font-size: 7vmin;
    top: 30.5vh;
}
.basis-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    font-size: 7vmin;
    top: 30.5vh;
}
.big-lokatie {
    position: relative;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 7vh;
    top: 52vh;
}
.medium-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    font-size: 7vh;
    top: 52vh;
}
.normal-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    font-size: 7vh;
    top: 52vh;
}
.basis-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    font-size: 7vh;
    top: 52vh;
}
.big-picto {
    position: absolute;
    display: block;
    padding: 3vw;
    bottom: 4vh;
    height: 76.5vh;
    float: left;
    align: right;
    height: auto;
    max-height: 76vh;
    max-width: 45vw;
    z-index: +3;
    left: 55vw;
}
img.big-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.medium-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 3vw;
    bottom: 4vh;
    height: 76.5vh;
    float: left;
    height: auto;
    max-height: 74vh;
    max-width: 33.33vw;
    z-index: +3;
    left: 66.67vw;
}
img.medium-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.normal-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 2vw;
    bottom: 3vh;
    height: 76.5vh;
    float: left;
    height: auto;
    max-height: 74vh;
    max-width: 25vw;
    z-index: +3;
    left: 75vw;
}
img.normal-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.big-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.medium-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.normal-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.basis-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.beeldmerkpositieklein {
    position: absolute;
    display: block;
    top: 89vh;
    left: 3vw;
    z-index: +3;
}
}

@media only screen and (orientation: portrait) and (min-device-width: 320px) and (max-device-width: 320px) {
    
.header {
    position: absolute;
    transform: translate( 0%, -50% );
    -webkit-transform: translate( 0%, -50% );
    display: block;
    width: 100vw;
    height: 22vh;
    text-align: center;
    z-index: +2;
}
.header1 {
    position: absolute;
    top: 0vh;
    margin: inherit;
    text-align: center;
    font-size: 7vh;
    width: 100vw;
    z-index: +2;
}
.header2 {
    position: absolute;
    margin: inherit;
    text-align: center;
    font-size: 0vh;
    width: 100vw;
    color: #ce012d;
    z-index: +2;
}
.big-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.medium-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.normal-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.basis-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.big-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 0vh;
    top: 30.5vh;
}
.medium-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 66.67vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.normal-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
     width: 75vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.basis-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.big-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 0vh;
    top: 41vh;
}
.medium-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    font-size: 7vh;
    top: 41vh;
}
.normal-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
}
.big-picto {
    position: absolute;
    display: block;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.big-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.medium-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.medium-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.normal-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.normal-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.big-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 0vh;
}
.medium-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.normal-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.basis-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.beeldmerkpositieklein {
    position: absolute;
    display: block;
    top: 89vh;
    left: 3vw;
    z-index: +8;
}  
}

@media only screen and (orientation: portrait) and (min-device-width: 240px) and (max-device-width: 240px) {
    
.header {
    position: absolute;
    transform: translate( 0%, -50% );
    -webkit-transform: translate( 0%, -50% );
    display: block;
    width: 100vw;
    height: 22vh;
    text-align: center;
    z-index: +2;
}
.header1 {
    position: absolute;
    top: 0vh;
    margin: inherit;
    text-align: center;
    font-size: 7vh;
    width: 100vw;
    z-index: +2;
}
.header2 {
    position: absolute;
    margin: inherit;
    text-align: center;
    font-size: 0vh;
    width: 100vw;
    color: #ce012d;
    z-index: +2;
}
.big-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.medium-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.normal-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.basis-tijdblok {
    position: absolute;
    text-align: center;
    top: 0vh;
    width: 100vw;
    z-index: +5;
    font-size: 7vw;
    top: 6vh;
    transform: translate(0%, -45%);
    -webkit-transform: translate(0%, -45%);
}
.big-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 0vh;
    top: 30.5vh;
}
.medium-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 66.67vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.normal-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
     width: 75vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.basis-betreft {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    font-size: 7vh;
    top: 30.5vh;
}
.big-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    font-size: 0vh;
    top: 41vh;
}
.medium-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    font-size: 7vh;
    top: 41vh;
}
.normal-lokatie {
    position: absolute;
    text-align: center;
    padding: 3vw;
}
.big-picto {
    position: absolute;
    display: block;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.big-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.medium-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.medium-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.normal-picto {
    position: absolute;
    display: block;
    border-radius: 30px;
    padding: 0vw;
    top: 12.5vh;
    height: auto;
    max-height: 64vh;
    max-width: 100vw;
    z-index: +8;
    left: 50vw;
    transform: translate(-50%, 0%);
    -webkit-transform: translate(-50%, 0%);
}
img.normal-picto {
    border-radius: 20%;
    -webkit-border-radius: 20%;
    -moz-border-radius: 20%;
}
.big-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 55vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 0vh;
}
.medium-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 67vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.normal-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 75vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.basis-toevoeging {
    position: absolute;
    padding: 3vw;
    width: 100vw;
    z-index: +5;
    left: 0vw;
    bottom: 7vh;
    text-align: left;
    font-size: 6vh;
}
.beeldmerkpositieklein {
    position: absolute;
    display: block;
    top: 89vh;
    left: 3vw;
    z-index: +8;
}  
}
</style>
