@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/portrait_fran.jpg");
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-size: cover;

}
nav {
font-family: 'Work Sans', sans-serif;
font-size: 24px;

}

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;
margin-left: -2%;
}
.bruin {
color: #8C5625;
}

hr {
margin-top: 2%; 
margin-bottom: 2%;
}
#container1 {
width: 100%;
z-index: 1001;
min-height: 100%;
}
#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: 4%;
padding-left: 5px;
    }
.socialemedia{
float: right;
    }
#logo {
margin-top: 0;
    }
.logo {
width: 30%; 
    }

#WieisFran {
    position: absolute;
    width: 100%;
    bottom: 0px;
    padding-left: 47%;
    padding-top: 2%;
   padding-bottom: 2%;
    z-index: 1; 
    }
.WieisFran {
width: 6%;
margin-bottom: 10px;
    }
#intro{
min-height: 100%;
width: 100%;
z-index: 1001;
}
#foto_fran{
    z-index: 1000;
    float: right;
    width: 40%;
    min-height: 100%;
    margin-left: 5%;
    margin-right: 5%;
    padding-top: 10%;
    padding-bottom: 10%;
}
#tekst_Fran{
    z-index: 1000;
    float:left;
    width: 40%;
   margin-left: 5%;
    margin-right: 5%;
    padding-top: 9.3%;
    padding-bottom: 5%;
}
#Fran_Extra{
    z-index: 1000;
    width: 100%;
   margin-left: 5%;
    margin-right: 5%;
    padding-top: 18%;
    padding-bottom: 5%;
}
.foto
{width: 25%;
margin-right: 7.5%;
    }
.foto1
{width: 25%;
    }
.backtotop, .pijltjeterug {
width: 3%;
    }
#back {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    text-align: center   
}
.backtotop, .pijltjeterug {
width: 3%;
    }
#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%);
}

@media (orientation:landscape) {
    .hide-on-landscape {
        display: none;
    }
}
@media (orientation:portrait) {
    .hide-on-portrait {
        display: none;
    }
}
@media screen and (min-height: 800px) {
  
}
@media screen and (min-height: 1200px) {
 #Fran_Extra{
    padding-top: 40%;
}
}