/* general */

:root {
    --wit: #ffffff;
    --zwart: #000000;
    --oranje: #ed6a29;
    --oranje-licht: #f6aa7c;
    --blauw: #0cb09e;
    --blauw-licht: #86cabf;
    --grijs: #9d9d9c;
}

* {
    margin: 0;
    padding: 0;
}

body p {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    list-style: none;
}

img{
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
}

ul{
    padding-bottom: 3%;
}

p {
    padding-bottom: 3%;
}

a {
    color: var(--blauw);
}

h1 {
    font-family: 'Sacramento', cursive;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    padding-bottom: 3%;
    color: var(--blauw);
}

h2 {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    list-style: none;
}

img {
    width: 100%;
}

@media only screen and (max-width: 1300px){
    #tijdelijk{
        margin: 3% 10%;
    }
}

/*tijdelijk*/

#tijdelijk {
    margin: 3% 30%;
    margin-bottom: 0%;
    border-radius: 10px 10px 10px 10px;
    border: 3px solid var(--oranje);
    padding: 1%;
    text-align: center;
}

#tijdelijk h1{
    color: var(--oranje);
    text-align: center;
}

@media only screen and (max-width: 1300px){
    #tijdelijk{
        margin: 3% 10%;
    }
}


/*header*/

#header img {
    margin: 0;
    margin-bottom: 0%;
    max-height: auto;
    width: 100vw;
    padding: 0%;
}

#header {
    background-color: var(--zwart);
}

/*navigatie*/

nav {
    margin-top: 0%;
    padding: 3% 30%;
    background-color: var(--zwart);
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-between;
}

nav ul li a {
    text-decoration: none;
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--wit);
}

nav ul li a:hover {
    color: var(--blauw-licht);
}

@media only screen and (max-width: 1300px) {
    nav {
        padding: 3% 10%;
    }

    nav ul {
        list-style: none;
        display: block;
        text-align: center;
    }

    nav ul li{
        padding-bottom: 3%;
    }
}

/*start*/

#start {
    padding: 3% 30%;
}

#start h1 {
    text-align: left;
}

#start h2 {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 18px;
    list-style: none;
}

@media only screen and (max-width: 1300px){
    #start{
        padding: 3% 10%;
    }
}

/*algemene info*/

#algemeneinfo {
    background-color: var(--blauw);
    padding: 3% 30%;
    color: var(--wit);
}

#algemeneinfo h1{
    color: var(--wit);
}

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

#map {
    height: auto;
    width: 100%;
    padding-bottom: 3%;
    padding-top: 3%;
}

.informatie ul{
    padding-left: 3%;
}

.informatie ul li {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
}

@media only screen and (max-width: 1300px){
    #algemeneinfo{
        padding: 3% 10%;
    }
}

/*fotocarousel*/

#imageslider {
    overflow: hidden;
    width: 100%;
    height: 100vh;
}

#imageslider figure div {
    float: left;
    width: 20%;
}

#imageslider figure img {
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    float: left;
}

#imageslider figure {
    position: relative;
    width: 500%;
    margin: 0;
    animation: animate 20s infinite;
}

@media only screen and (max-width: 1300px){
    #imageslider figure img {
        height: auto;
    }
}

/*voor 7 foto's animatie*/
@keyframes animate {
    0% {left:0%;}
    10% {left:0%;}
    12% {left:-100%;}
    22% {left:-100%;}
    24% {left:-200%;}
    34% {left:-200%;}
    36% {left:-300%;}
    46% {left:-300%;}
    48% {left:-400%;}
    58% {left:-400%;}
    60% {left:-300%;}
    70% {left:-300%;}
    72% {left:-200%;}
    82% {left:-200%;}
    84% {left:-100%;}
    94% {left:-100%;}
    96% {left:0%;}
}

/*aparte pagina foto's*/

#fotos{
    padding: 3% 30%;
    background-color: var(--zwart);
}

#fotos p{
    color: var(--blauw);
}

#fotos a{
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: var(--wit);
    padding-top: 0;
}

#fotos h1{
    color: var(--wit);
    padding-top: 3%;
}

#fotos img{
    width: 100%;
    height: auto;
    margin-bottom: 3%;
    border-radius: 10px 10px 10px 10px;
}

@media only screen and (max-width: 1300px){
    #fotos{
        padding: 3% 10%;
    }
}

/*tarieven en reserveren*/

#boeken {
    padding: 3% 30%;
}

#boeken table {
	padding-bottom: 3%;
    width: 100%;
}

#boeken table tr td {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    height: 35px;
    padding-left: 2%;
}

tr:nth-child(even) {
  background-color: var(--blauw-licht);
}

#boeken h2{
    padding-bottom: 3%;
}
#boeken ul {
    padding-left: 3%;
}

@media only screen and (max-width: 1300px){
    #boeken {
        padding: 3% 10%;
    }

    #boeken table{
        width: 100%;
    }
}

/*over ons*/

#overons {
     padding: 3% 30%;
}

#overons h1 {
     color: var(--blauw);
}
#overons img{
    padding-bottom: 3%;
}

@media only screen and (max-width: 1300px){
    #overons{
        padding: 3% 10%;
    }
}

/*tips*/

#tips {
     background-color: var(--oranje);
     padding: 3% 30%;
     color: var(--wit);
}

#tips h1 {
     color: var(--wit);
}
#tips img{
    padding-bottom: 3%;
}

#tips ul {
    padding-left: 3%;
}

@media only screen and (max-width: 1300px){
    #tips{
        padding: 3% 10%;
    }
}

/*huisregels*/

#huisregels {
    background-color: var(--blauw);
    padding: 3% 30%;
    color: var(--wit);
}
#huisregels h1{
    padding-bottom: 3%;
    color: var(--wit);
}
#huisregels h2{
    padding-bottom: 3%;
}
#huisregels ul {
    padding-left: 3%;
}

#huisregels ul li {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    list-style: disc;
}

#huisregels ul li ul {
    padding: 0;
    padding-left: 3%;
}

#huisregels ul li ul li{
    list-style: circle;
}

@media only screen and (max-width: 1300px){
    #huisregels{
        padding: 3% 10%;
    }
}
/*opkuis*/

#opkuis {
     padding: 3% 30%;
}
#opkuis h1{
    padding-bottom: 3%;
    color: var(--blauw);
}
#opkuis h2{
    padding-bottom: 3%;
}
#opkuis ul {
    padding-left: 3%;
}

#opkuis ul li {
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    list-style: disc;
}

#opkuis ul li ul {
    padding: 0;
    padding-left: 3%;
}

#opkuis ul li ul li{
    list-style: circle;
}

@media only screen and (max-width: 1300px){
    #opkuis{
        padding: 3% 10%;
    }
}
/*terug*/

.terug{
    padding: 3% 30%;
    text-align: center;
    padding-top: 0;
}

.terug a{
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--oranje);
}

#terugfoto {
    background-color: var(--zwart);
}

@media only screen and (max-width: 1300px){
    .terug{
        padding: 3% 10%;
    }
}

/*footer*/

footer {
    background-color: var(--zwart);
    color: var(--wit);
    padding: 1% 30%;
}

footer h1 {
    font-size: 25px;
    margin: 10px 0px;
    text-align: left;
    padding-bottom: 1%;
}

footer .tabel{
    padding-bottom: 3%;
}

footer table tr td{
    font-family: 'Ariana Pro', Arial, Helvetica, sans-serif;
    font-weight: 300;
    font-size: 15px;
    align-items: center;
}

footer .tabel{
    column-count: 2;
}

@media only screen and (max-width: 1300px){
    footer {
        padding: 1% 10%;
    }

    footer .tabel{
        column-count: 1;
    }
}

footer p img {
    max-height: 25px;
    max-width: 25px;
}