html {
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    font-size: 1.5vw;
    font-family: 'Arial', sans-serif;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
}


/*in this block: define how the grid looks like*/
.grid-container {
    /*Define that contents is displayed as a grid*/
    display: grid;
    /*The justify-content property aligns the flexible container's items
    /*when the items do not use all available space on the main-axis (horizontally)*/
    /*Space-between means Items are positioned with space between the lines*/
    justify-content: space-between;
    /*Define some things of the grid */
    /*Note: size is defined in js relative to window size*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    grid-gap: 1px;
    padding: 0px;
    margin: 0px;
    border: 0px;
    position: relative;
}

/*Define some things of the griditem */
/*Serves as a default -  is overruled if specified for a specific item */
.grid-item {
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    text-align: center;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

/*below the block sizes for each cell in the grid are defined */
/*use span to create cells that use multiple columns or rows */

.itemHeader {
    /*this is for the header*/
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: 'Arial Narrow', sans-serif;
    font-size: 2vw;
    cursor: pointer;
    /*background-color: red;*/
}

.itemLEBout {
    /*this is for an empty column out-next to left buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: grey;*/
}

.itemB1 {
    /*this is for button B1*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: green;*/
}

.itemLEBmid {
    /*this is for an empty column mid-next to left buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: lightgreen;*/
}

.itemLEBin {
    /*this is for an empty column in-next to left buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: lightblue;*/
}

.itemMain {
    /*this is for the main area*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    justify-self: center;
    /*background-color: yellow;*/
}

.itemREBin {
    /*this is for an empty column in-next to right buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: sandybrown;*/
}

.itemREBmid {
    /*this is for an empty column mid-next to right buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: black;*/
}

.itemT1 {
    /*this is for button T1*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: darkslategrey;*/
}

.itemREBout {
    /*this is for an empty column out-next to right buttons*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: lightyellow;*/
}

.itemB2 {
    /*this is for button B2*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: rebeccapurple;*/
}

.itemT2 {
    /*this is for button T2*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: purple;*/
}

.itemB3 {
    /*this is for button B3*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: blueviolet;*/
}

.itemT3 {
    /*this is for button T3*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: deepskyblue;*/
}

.itemB4 {
    /*this is for button B4*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: darkgreen;*/
}

.itemT4 {
    /*this is for button T4*/
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    cursor: pointer;
    /*background-color: lawngreen;*/
}

.itemLEC {
    /*this is for empty space next to caption */
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: orangered;*/
}

.itemREC {
    /*this is for empty space next to caption */
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    border: 0px;
    /*background-color: orange;*/
}

.itemFooter {
    /*this is for the footer */
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    padding: 0px;
    margin: 0px;
    border: 0px;
    font-family: 'Arial Narrow', sans-serif;
    font-size: 0.8vw;
    cursor: pointer;
    /*background-color: lightcoral;*/
}

/** {box-sizing: border-box}*/


.mySlides {
    display: none; 
    width: 100%;
}

/* Slideshow container */
.slideshow-container {
    position: relative;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    /*cursor: pointer;*/
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    color: gray;
    padding: 10px;
    font-weight: bold;
    opacity: 0.5;
    /*transition: 0.6s ease;*/
}

/* Position the "next button" to the right */
.next {right: 1%;}
/* Position the "previous button" to the left */
.prev {left: 1%;}

    /* On hover, add a background color and change color of arrow */
    .prev:hover, .next:hover {
        background-color: lightgray;
        color: black;
        opacity: 1;
    }

/* Caption text */
.text {
    color: black;
    position: absolute;
    /*bottom: -120px;*/
    font-family: 'Arial', sans-serif;
    width: 100%;
    text-align: center;
}

/* in order to center the images */
.div {
    margin-left: auto;
    margin-right: auto;
}