@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300&family=Zilla+Slab:wght@300&display=swap');

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: hsla(240,9%,98%,1.00);
}
.Background {
background-image: url("../img/sfeer-3.jpg");
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;
}
nav {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
    text-align: center;
}
.nav-link {
text-decoration: none;

}
.nav-link:hover {
text-decoration: underline;

}
h1 {
font-family: 'Work Sans', sans-serif;
color: #E9501F;
font-size: 38px;
}
h2 {
font-family: 'Work Sans', sans-serif;
font-size: 30px;
}
p {
font-family: 'Zilla Slab', serif;
font-size: 14pt;
letter-spacing: normal;
}
h6 {
font-family: 'Zilla Slab', serif;
font-size: 8pt;
letter-spacing: normal;
}
.bruin {
color: #8C5625;
}

hr {
margin-top: 10%; 
margin-bottom: 15%;
}
#start {
width: 100%;
z-index: 1001;
}

#logo_portrait {
padding-top: 5%;
margin-left: 5%;
width: 90%;
z-index: 1001;
}
#socialemedia {
margin-top: 0;
    }
.socialemedia, .socialemedia1 {
width: 7%;
padding-left: 5px;
float: left;
    }
#logo {
margin-top: 15%;
    }
.logo {
width: 60%; 
    }

#WieisFran {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding-left: 40%;
    padding-top: 2%;
   padding-bottom: 2%;
    z-index: 1; 
    }
.WieisFran {
width: 50px;
margin-bottom: 10px;
    }
#Fran{
width: 100%;
z-index: 1001;
    background-color: hsla(240,9%,98%,1.00);
}

#foto_fran{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10%;
}
#tekst_Fran{
    width: 90%;
   margin-left: 5%;
    margin-right: 5%;
    padding-top: 5%;
    padding-bottom: 10%;
}
#Fran_Extra{
   width: 90%;
   margin-left: 5%;
    margin-right: 5%;
    padding-bottom: 10%;
}
.foto
{width: 30%;
margin-right: 5%;
    }
.foto1
{width: 30%;
    }
#footer{
    width: 100%;
    z-index: 1001;
}
#back {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center   
}
.backtotop, .pijltjeterug {
width: 35px;
    }
#copyright {
width: 90%;
margin-left: auto;
margin-right: auto;
text-align: center;   
margin-top: 5%;
padding-bottom: 1%;
}
#button { 
    cursor: pointer;

}
#Beeld{
width: 100%;
z-index: 1001;
}
#Intro_Beeld{
    width: 100%;
    height: auto;
    position: relative;
}
#terug{
    position: absolute;
    z-index: 1001;
    margin-left: 5%;
     top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#header {
    width: 100%;
    height: 300px;
    background-image: url(../img/sfeer-3.jpg);
    background-repeat: no-repeat;
    background-position: 61% 10%;
}
#header2 {
    width: 100%;
    height: 300px;
    background-image: url(../img/Untitled_Artwork3.jpg);
    background-repeat: no-repeat;
    background-position: 65% 72%;
}
#header3 {
    width: 100%;
    height: 300px;
    background-image: url(../img/Untitled_Artwork3.jpg);
    background-repeat: no-repeat;
    background-position: 65% 72%;
}
#header h1, #header2 h1, #header3 h1 {
    font-family: 'Work Sans', sans-serif;
    color: #E9501F;
    font-size: 50px;
    font-variant: small-caps;
    font-weight: bold;
    margin-left: 30px;
    padding-top: 150px;
}
#boeken, #boeken2, #boeken3  {
    width: 100%;
    height: 100%;
    background-color: hsla(240,9%,98%,1.00);
    padding-top: 80px;
    margin-bottom: 100px;
    
}

#boeken h5 {
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 3%;
	font-family: 'Zilla Slab', serif;
font-size: 14pt;
}

#boeken a, #boeken2 a, #boeken3 a {
    border-radius: 5px;
    border: thick double hsla(0,0%,100%,1.00);
    background-color: hsla(15,81%,52%,1.00);
    color: hsla(240,9%,98%,1.00);
    padding-top: 4px;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
    margin-right: 8px;
    font-family: 'Work Sans', sans-serif;
    font-variant: small-caps;
    font-weight: 900;
    font-size: 24px;
    text-decoration: none;
}
#boeken a:hover, #boeken2 a:hover, #boeken3 a:hover {
    border-radius: 5px;
    border: thick double hsla(15,80%,52%,1.00);
    background-color: hsla(0,0%,100%,1.00);
    color: hsla(15,80%,52%,1.00);
    padding-top: 4px;
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
    margin-right: 8px;
    cursor: pointer;
    text-decoration: none;
}
.boek {
    float: left;
    max-width: 100%;
    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 10%;
}
@media (orientation:landscape) {
    .hide-on-landscape {
        display: none;
    }
}
@media (orientation:portrait) {
    .hide-on-portrait {
        display: none;
    }
}
@media screen and (min-height: 768px) {
#header {
    height: 300px;
    background-position: 61% 10%;
}
#header2 {
    height: 300px;
    background-position: 65% 72%;
}
#header3 {
    height: 300px;
    background-position: 65% 72%;
}
#header h1, #header2 h1, #header3 h1   {
    font-size: 80px;
    margin-left: 30px;
    padding-top: 150px;
}
}