html,body{
margin: 0;
min-height: 100vh;
max-width: 100vw;
background-color: whitesmoke;
background-attachment: fixed;
font-family: 'Poppins', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Poiret One', cursive;
font-family: 'Righteous', cursive;
font-family: 'Rock Salt', cursive;
}
img.logo{
width:10.0em;
height:auto;
display: block;
margin-right: auto;
padding: 1.2em;
padding-inline-start: 3.0em;
}
nav.navbar.navbar-light{
overflow: hidden;
background-color: #ebebeba1;
position: fixed;
z-index: 10;
width: 100%;
height: 12.0rem;
box-shadow: 2px 6px 20px #00000060;
}
span.Open.text-end{
background-color: #ff35f800;
color: #000000;
text-shadow: 4px 4px 20px #d3d3d3;
border: none;
display: block;
margin-left: auto;
padding: 0.2em;
padding-inline-end: 1.0em;
}
.navbar-brand-mob{
background-color: black;
display: block;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 5;
top: 0;
left: 0;
background-color: whitesmoke;
background-color: whitesmoke;
overflow-x: hidden;
transition: linear 2.4s;
}
.overlay-content {
position: relative;
top: 15vh;
width: 100%;
text-align: left;
margin-left: 10vw;
}
.overlay a {
padding: 0.1em;
font-family: 'rubik', sans-serif;
font-weight: 900;
font-style: italic;
text-shadow: 2px 2px 5px rgb(32, 32, 32);
text-decoration: none;
font-size: 2.8rem;
color: black;
display: block;
transition: ease-in-out 0.8s;
}
.overlay a:hover, .overlay a:focus {
color: whitesmoke;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
figure.figure.text-center{
margin-left: auto;
margin-right: auto;
}
.background-image{
background-image: url(images/backgroundindex.jpg);
min-height: 120vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* footer */
a {
color: #000000;
text-decoration: none;
transition: all 0.6s;
}
a:hover, a:focus {
text-decoration: none;
}
a#a-link{
color: #000000;
text-decoration: none;
transition: all 0.6s;
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0em;
}
a#a-link:hover, a#a-link:focus {
color: rgb(90, 245, 108);
transition: ease-in-out 0.3s;
text-shadow: 2px 2px 20px #ffffff;
}
p#a-link{
color: #000000;
text-decoration: none;
transition: all 0.6s;
font-family: 'Poppins', sans-serif;
font-weight: 200;
font-size: 0.3em;
}
p#a-link:hover, p#a-link:focus{
color: whitesmoke;
transition: ease-in-out 0.3s;
text-shadow: 2px 2px 20px #000000;
}
footer {
overflow: auto;
background-color: #ffffff;
position: absolute;
width: 100%;
}
.h1.text-white{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.4em;
}
hr.footerhr{
color: #000000;
border:2px;
}
h5.text-white.mb-3{
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.4em;
color: rgb(0, 0, 0);
}
i.fab.fa-instagram.fa-3x.mt-1.mx-1{
color: #000000;
size: 2.0em;
}
i.fab.fa-instagram.fa-3x.mt-1.mx-1:hover{
color: rgb(90, 245, 108);
transition: 700ms ease-in-out;
text-shadow: 2px 2px 20px #ffffff;
size: 2.0em;
}
i.fab.fa-facebook.fa-3x.mt-1.mx-1{
color: #000000;
size: 2.0em;
}
i.fab.fa-facebook.fa-3x.mt-1.mx-1:hover{
color: rgb(90, 245, 108);
transition: 700ms ease-in-out;
text-shadow: 2px 2px 20px #ffffff;
size: 2.0em;
}
h3.adress{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 1.0em;
color: rgb(0, 0, 0);
}
h3.callus{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0em;
color: #000000
}
h3.callus:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0em;
color: rgb(90, 245, 108);
transition: 500ms ease-in-out;
}
h3.emailus{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0rem;
color: #000000
}
h3.emailus:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0rem;
color: rgb(90, 245, 108);
transition: 500ms ease-in-out;
}
/*content index*/
img.img-fluid{
padding-top: 30em;
padding-bottom: 10em;
max-width: 80%;
margin-left: 10%;
}
/* works page */
div.col-12.expertise{
padding-top: 20.0em;
min-height: 50vh;
}
div.container-fluid.expertise{
min-height: 50vh;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 3.0em;
}
h1.expertisetext{
font-family: 'Rubik', sans-serif;
font-weight: 900;
font-size: 2.8em;
color: rgb(0, 0, 0);
margin-left: 9.0em;
}
p.whatdowedo{
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
color: rgb(0, 0, 0);
padding-left: 10.0em;
padding-right: 10.0em;
}
p.nosyexpertise2{
font-family: 'Rubik', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(0, 0, 0);
padding-left: 6.0em;
padding-right: 6.0em;
}
div.col-6.box{
min-height: 40vh;
background-color: #3e61ff27;
}
p.whoarewe{
font-family: 'Montserrat', sans-serif;
font-weight: 200;
color: whitesmoke;
}
div.container-fluid.luo{
min-height: 80vh;
background-color: transparent;
background-image: url(images/luobackground.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.luobefore{
font-family: cursive;
font-size: 4.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 900;
color: rgb(94, 255, 172);
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-luo {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.382);
}
.container-fluid.luo :hover .overlay-luo {
opacity: 1;
}
h1.text.luo{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.frank{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerthebad.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.frankbefore{
font-family: cursive;
font-size: 4.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 900;
color: rgb(94, 255, 172);
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-frank {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.382);
}
.container-fluid.frank :hover .overlay-frank {
opacity: 1;
}
h1.text.frank{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.colina{
min-height: 80vh;
background-color: transparent;
background-image: url(images/sold.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.colinabefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-colina {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.395);
}
.container-fluid.colina :hover .overlay-colina {
opacity: 1;
}
h1.text.colina{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.firefish{
min-height: 80vh;
background-color: transparent;
background-image: url(images/spacebabies.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.firefishbefore{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-firefish {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 400ms ease-in-out;
background-color: rgba(245, 245, 245, 0.476);
}
.container-fluid.firefish :hover .overlay-firefish {
opacity: 1;
}
h1.text.firefish{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.headstart{
min-height: 80vh;
background-color: transparent;
background-image: url(images/banneryorkshire.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.headstartbefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-headstart {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.385);
}
.container-fluid.headstart :hover .overlay-headstart {
opacity: 1;
}
h1.text.headstart{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.utrecht{
min-height: 60vh;
background-color: transparent;
background-image: url(images/laowaibanner.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.brand{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-utrecht {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.415);
}
.container-fluid.utrecht :hover .overlay-utrecht {
opacity: 1;
}
h1.text.hello{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.moinat{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannersuzhou.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.moinatbefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-moinat {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.363);
}
.container-fluid.moinat :hover .overlay-moinat {
opacity: 1;
}
h1.text.moinat{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.papeneiland{
min-height: 70vh;
background-color: transparent;
background-image: url(images/bannerarchive.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.papeneilandbefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-papeneiland {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.31);
}
.container-fluid.papeneiland :hover .overlay-papeneiland {
opacity: 1;
}
h1.text.papeneiland{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* Designs */
div.col-12.expertise{
padding-top: 20.0em;
min-height: 50vh;
}
div.container-fluid.expertise{
min-height: 50vh;
background-color: transparent;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 3.0em;
}
h1.expertisetext{
font-family: 'Rubik', sans-serif;
font-weight: 900;
font-size: 2.8em;
color: rgb(0, 0, 0);
margin-left: 9.0em;
}
p.whatdowedo{
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
color: rgb(0, 0, 0);
padding-left: 10.0em;
padding-right: 10.0em;
}
p.nosyexpertise2{
font-family: 'Rubik', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(0, 0, 0);
padding-left: 6.0em;
padding-right: 6.0em;
}
div.col-6.box{
min-height: 40vh;
background-color: #3e61ff27;
}
p.whoarewe{
font-family: 'Montserrat', sans-serif;
font-weight: 200;
color: whitesmoke;
}
div.container-fluid.frankdesign{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerfranks.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
.overlay-frankdesign {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.404);
}
.container-fluid.frankdesign :hover .overlay-frankdesign {
opacity: 1;
}
h1.text.frankdesign{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.peiland{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerpapeneiland.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.colinabefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-peiland {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.395);
}
.container-fluid.peiland :hover .overlay-peiland {
opacity: 1;
}
h1.text.peiland{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.firefishdesign{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerheadstart.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.firefishdesignbefore{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-firefishdesign {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 400ms ease-in-out;
background-color: rgba(245, 245, 245, 0.476);
}
.container-fluid.firefishdesign :hover .overlay-firefishdesign {
opacity: 1;
}
h1.text.firefishdesign{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.vgh{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannervangendthallen.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.vghbefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-vgh {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.385);
}
.container-fluid.vgh :hover .overlay-vgh {
opacity: 1;
}
h1.text.vgh{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.zks{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerzandkasteel.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.brand{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-zks {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.415);
}
.container-fluid.zks :hover .overlay-zks {
opacity: 1;
}
h1.text.zks{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.lova{
min-height: 80vh;
background-color: transparent;
background-image: url(images/bannerlova.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.lovabefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 60%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-lova {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.363);
}
.container-fluid.lova :hover .overlay-lova {
opacity: 1;
}
h1.text.lova{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.sham{
min-height: 70vh;
background-color: transparent;
background-image: url(images/bannersham.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.shambefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-sham {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.31);
}
.container-fluid.sham :hover .overlay-sham {
opacity: 1;
}
h1.text.sham{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
div.container-fluid.archive{
min-height: 70vh;
background-color: transparent;
background-image: url(images/bannerfireworks.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
h1.archivebefore{
font-family: 'Staatliches', cursive;
font-size: 8.8rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f8e928;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay-archive {
position: absolute;
top: 0.0em;
bottom: 0em;
left: 0.0em;
right: 0.0em;
opacity: 0;
transition: 300ms ease-in-out;
background-color: rgba(245, 245, 245, 0.31);
}
.container-fluid.archive :hover .overlay-archive {
opacity: 1;
}
h1.text.archive{
font-family: 'Rock Salt', cursive;
font-size: 5.4rem;
text-shadow: 2px 2px 2px #0b0b0b;
font-weight: 400;
color: #f9f654;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
/* the Bald */
div.container-fluid.thebald{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
h1.thebaldtekst{
font-family: 'Rubik', sans-serif;
font-size: 6.0em;
font-weight: 900;
color: black;
align-items: center;
margin-top: 4.0em;
margin-left: 1.0em;
}
div.container-fluid.about{
min-height: 10vh;
background-color: rgb(233, 247, 249);
}
p.intro{
font-family: 'Poppins', sans-serif;
font-size: 2.0em;
font-weight: 200;
color: black;
margin-left: 3.2em;
}
.container-fluid.works{
min-height: 40vh;
background-color: rgb(233, 247, 249);
padding-bottom: 10.0em;
}
.container-fluid.works2{
min-height: 40vh;
background-color: rgb(233, 247, 249);
padding-bottom: 25.0em;
}
.container-xl.works2{
padding-bottom: 10.0em;
}
img.img-fluid.work1{
margin-bottom: -12.0em;
}
img.img-fluid.work2{
padding-top: 14.0em;
margin-bottom: -28.0em;
}
img.img-fluid.work3{
padding-top: 28.0em;
}
img.img-fluid.work4{
padding-top: 28.0em;
margin-bottom: -32.0em;
}
img.img-fluid.yorkshire1{
margin-bottom: -20.0em;
}
img.img-fluid.yorkshire2{
padding-top: 14.0em;
margin-bottom: -28.0em;
}
img.img-fluid.yorkshire3{
padding-top: 24.0em;
margin-bottom: -16.0em;
}
img.img-fluid.yorkshire4{
padding-top: 12.0em;
margin-bottom: -16.0em;
}
img.img-fluid.yorkshire5{
padding-top: 12.0em;
}
div.col-12.vimeo{
padding-bottom: 4.0em;
}
div.col-12.vimeo2{
margin-bottom: -20.0em;
}
img.img-fluid.laowai0{
margin-bottom: -21.0em;
}
img.img-fluid.laowai1{
padding-top: 12.0em;
margin-bottom: -21.0em;
}
img.img-fluid.laowai2{
padding-top: 12.0em;
margin-bottom: -21.0em;
}
img.img-fluid.laowai3{
padding-top: 12.0em;
margin-bottom: -16.0em;
}
img.img-fluid.laowai4{
padding-top: 12.0em;
margin-bottom: -16.0em;
}
img.img-fluid.laowai8{
margin-bottom: -30.0em;
}
img.img-fluid.laowai9{
padding-bottom: 5.0rem;
}
div.col-12.archive{
margin-top: -20.0em;
padding-bottom: -10.0em;
}
div.col-12.archive1{
margin-top: -24.0em;
}
div.col-12.archive3{
margin-top: -2.0em;
}
div.col-12.archive4{
margin-bottom: 6.0em;
}
div.col-12.archive5{
margin-bottom: 10.0em;
margin-top: 10.0em;
}
div.col-12.archive6{
margin-bottom: 1.0em;
margin-top: -34.0em;
}
div.col-12.luo{
margin-top: -20.0em;
}
/* Headstart */
div.container-fluid.headstart2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/bannerheadstart.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-12.opdrachtheadstart{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
margin-left: auto;
margin-right: auto;
}
h1.welcome2{
font-family: 'Rubik', sans-serif;
font-size: 10.0em;
font-weight: 900;
color: #f5f5f5;
text-shadow: 2px 2px 2px black;
align-items: center;
margin-top: 2.0em;
margin-left: 1.0em;
}
p.onzetaakheadstart{
font-family: 'Poppins', sans-serif;
font-size: 2.0em;
font-weight: 200;
color: #f8d928;
text-shadow: 3px 3px 3px #000000;
margin-left: 2.9em;
}
p.headstarttekst{
font-family: 'Montserrat', sans-serif;
font-size: 1.8em;
font-weight: 200;
color: rgb(1, 1, 121);
padding-left: 2.0em;
padding-right: 2.0em;
margin-top: 4.0em;
}
p.headstarttekst2{
font-family: 'Montserrat', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 121);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.headstart3{
background-color: whitesmoke;
min-height: 2vh;
}
div.container-xl.headstart2{
min-height: 10vh;
background-color: whitesmoke;
}
img.img-fluid.headstartvlak{
margin-left: auto;
margin-right: auto;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
img.img-fluid.headstartvlak2{
min-height: 61.0em;
margin-left: auto;
margin-right: auto;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
img.img-fluid.headstartvlak3{
margin-left: auto;
margin-right: auto;
margin-top: 1.0em;
margin-bottom: 1.0em;
}
div.container-fluid.headstart4{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.headstart4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.img-fluid.headstartvormtaal1{
margin-left: auto;
margin-right: auto;
margin-top: 10.0em;
margin-bottom: 10.0em;
}
img.img-fluid.headstartvormtaal2{
margin-left: auto;
margin-right: auto;
margin-top: 10.0em;
margin-bottom: 10.0em;
}
img.d-block.w-100.voorbeeld{
margin-left: auto;
margin-right: auto;
margin-top: 10.0em;
margin-bottom: 10.0em;
}
div.container-fluid.attributeheadstart{
min-height: 60vh;
background-color: transparent;
background-image: url(images/attrigraph.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 2.0em;
position: relative;
}
div.container-fluid.papeneiland6{
background-color: rgb(253, 255, 239);
padding-top: 1.0em ;
}
div.container-xl.papeneiland{
min-height: 60em;
background-color: rgb(253, 255, 239);
padding-top: 2.0em ;
}
div.container-fluid.headstart7{
min-height: 60em;
background-color: rgb(32, 32, 32);
}
/* papeneiland */
div.container-fluid.papeneiland2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/bannerpapeneiland.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.papeneilandstekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.papeneilandtekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.tegeltje{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.tegeltje{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.papeneiland3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.papeneiland4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
}
div.container-fluid.papeneiland6{
background-color: rgb(253, 255, 239);
padding-top: 1.0em ;
}
div.container-xl.papeneiland{
min-height: 60em;
background-color: rgb(253, 255, 239);
padding-top: 2.0em ;
}
div.container-fluid.papeneiland7{
min-height: 60em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* Frankie */
div.container-fluid.frankie2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/frankieattri.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.frankstekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.franktekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.frankimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.frankimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.frankimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.frankimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.frank{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.frankspage7{
min-height: 60em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* headstart */
div.container-fluid.headstart2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/attrigraph.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.headstarttekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.headstarttekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.headstartimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.headstartimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.headstartimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.headstartimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.frank{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.headstartpage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* van gendthallen */
div.container-fluid.vangendthallen2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/VGH_Webfotos__1900x900_1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.vangendthallentekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.vangendthallentekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.vangendthallenimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.vangendthallenimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.vangendthallenimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.vangendthallenimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-75.vangendthallen{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.headstartpage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* het zandkasteel */
div.container-fluid.hzk2{
min-height: 100vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/sandcastle.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.hzktekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.hzktekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.hzkimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.hzkimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.hzkimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.hzkimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.hzk{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-50.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.hzkpage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* lova */
div.container-fluid.lova2{
min-height: 60vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/cropped-logo-1.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.lovatekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.lovatekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.lovaimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.lovaimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.lovaimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.lovaimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.hzk{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-50.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-50.hzk3{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.hzkpage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* sham */
div.container-fluid.sham2{
min-height: 60vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/sham.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.shamtekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.shamtekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.shamimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.shamimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.shamimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.shamimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.hzk{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-50.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-50.hzk3{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.hzkpage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* Fireworks */
div.container-fluid.fireworks2{
min-height: 60vh;
background-color: rgb(233, 247, 249);
background-color: transparent;
background-image: url(images/fireworksbanner.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 4.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.what{
min-height: 20vh;
background-color: rgb(233, 247, 249);
}
p.fireworkstekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.fireworkstekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
div.container-fluid.fireworksimg{
background-color: rgb(233, 247, 249);
min-height: 20vh;
}
div.container-xl.fireworksimg{
min-height: 20vh;
background-color: rgb(233, 247, 249);
margin-top: -20.0em;
}
div.container-fluid.fireworksimg3{
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgb(233, 247, 249);
}
div.container-xl.fireworksimg4{
padding-top: 4.0em;
min-height: 40em;
background-color: rgb(233, 247, 249);
}
img.d-block.w-50.hzk{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
}
img.d-block.w-50.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-50.hzk3{
margin-left: auto;
margin-right: auto;
padding-top: -4.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.hzk2{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
img.d-block.w-75.tiel{
margin-left: auto;
margin-right: auto;
padding-top: 6.0em;
padding-bottom: 6.0em;
}
div.col-12.fireworks{
padding-bottom: 4.0em;
}
div.container-fluid.frankspage6{
background-color: rgb(238, 148, 250);
padding-top: 1.0em ;
}
div.container-xl.frankspage{
min-height: 60em;
background-color: rgb(238, 148, 250);
padding-top: 2.0em ;
}
div.container-fluid.fireworkspage7{
min-height: 60em;
background-color: rgb(50, 50, 50);
padding-top: 4.0em;
padding-bottom: 4.0em;
}
img.d-block.w-100.papeneiland6{
width: 60rem;
height: 54rem;
}
h1.browse{
padding-top: 2.0em;
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(1, 1, 47);
}
h1.browse2{
font-family: 'rubik', sans-serif;
font-size: 2.0em;
font-weight: 900;
color: rgb(34, 31, 217);
padding-bottom: 4.0em;
}
/* CV */
div.container-fluid.cv{
min-height: 60vh;
background-color: rgb(233, 247, 249);
padding-top: 16.0em;
}
img.img-fluid.papeneiland{
align-items: center;
}
div.col-6.opdracht{
font-family: 'Poiret One', cursive;
font-size: 1.8rem;
font-weight: 400;
}
div.container-fluid.cv1{
min-height: 20vh;
background-color: rgb(233, 247, 249);
padding-top: 6.0em;
}
div.container-fluid.cv2{
min-height: 20vh;
background-color: rgb(233, 247, 249);
padding-top: 6.0em;
padding-bottom: 2.0em;
}
p.cvtekst{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 200;
color: rgb(1, 1, 47);
padding-left: 2.0em;
padding-right: 2.0em;
padding-top: 2.0em;
}
p.cvtekst2{
font-family: 'Poppins', sans-serif;
font-size: 1.6em;
font-weight: 700;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
h1.header{
font-family: 'Rubik', sans-serif;
font-size: 2.0em;
font-weight: 800;
color: rgb(1, 1, 63);
padding-left: 2.0em;
padding-right: 2.0em;
}
ul.list-unstyled.cv{
font-family: 'Poppins', sans-serif;
font-size: 1.4em;
font-weight: 200;
color: rgb(12, 12, 12);
padding-left: 2.7em;
padding-right: 2.0em;
word-spacing: 0.1em;
}
/* Projecten*/
h1.text.projecten{
margin-top: 5.0em;
}
div.container-fluid.cards{
padding-bottom: 1.0em;
padding-top: 2.0em;
}
h1.text.projecten1{
margin-top: 1.0em;
padding-bottom: 4.0em;
}
.container.pt-5{
padding-bottom: 4.0em;
margin-top: 2.0em;
}
/* Proton */
.col-12.pt-4.proton {
position: relative;
}
img.image-proton {
display: block;
height: auto;
border-radius: 6%;
box-shadow: 8px 8px 10px #ff009da8;
}
.overlay-proton{
position: absolute;
top: 1.5em;
bottom: 0em;
left: 0.8em;
right: 0.7em;
opacity: 0;
filter: contrast(260%);
transition: 1500ms ease-in-out;
background-color: #160f7942;
border-radius: 6%;
}
.col-12.pt-4.proton :hover .overlay-proton {
opacity: 1;
}
.text-proton{
position: absolute;
text-shadow: -1px 1px 1px #00000042;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 12.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 2.0em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
/* Project pages control */
div.container-fluid.proton {
padding-top: 4.0em;
margin-top: 10.8em;
}
img.image-proton1 {
display: block;
border-radius: 6%;
height: auto;
}
h1.protontitle{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 4.4rem;
text-shadow: 2px 0.8px 10px #ff009dbe;
}
h1.beckytitle{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 4.4rem;
text-shadow: 2px 0.8px 10px rgb(21, 60, 168);
}
div.col-12.protontext{
font-family: 'Poppins', cursive;
font-weight: 300;
font-size: 1.4rem;
margin-top: 1.5em;
}
li.creditsproton{
margin-top: 2.0em;
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 1.4rem;
list-style-type: none;
}
li.creditsproton2{
margin-top: 2.0em;
font-family: 'Poppins',sans-serif;
font-weight: 200;
font-size: 1.0rem;
color: #000000;
list-style-type: none;
}
li.creditsbecky{
margin-top: 2.0em;
font-family: 'Poppins',sans-serif;
font-weight: 200;
font-size: 1.0rem;
color: #3efff5;
list-style-type: none;
}
div.col-12.date{
padding: 2.0em;
}
li.creditsproton3{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 1.2rem;
list-style-type: none;
}
div.col-6.creditsproton{
color: #ff009d;
background-color: rgba(245, 245, 245, 0.623);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin: 2.0em;
margin-bottom: 4.0em;
}
div.col-6.creditsbecky{
color: #3efff5;
background-color: rgba(21, 60, 168, 0.521);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin: 2.0em;
margin-bottom: 4.0em;
}
p.dates{
font-family: 'Poppins',sans-serif;
font-weight: 200;
font-size: 1.0rem;
}
#proton{
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
}
#proton:hover{
opacity: 0.9;
}
#proton{
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
}
#proton:hover{
opacity: 0.9;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.76); /* Fallback color */
background-color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 140vw;
max-width: 200vw;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
width: 32vw;
max-width: 60vw;
text-align: center;
color: whitesmoke;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 1200ms;
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #fa21f3;
font-size: 40px;
font-weight: bold;
transition: ease-out 800ms;
}
.close:hover,
.close:focus {
color: #f5f5f5;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 60vw){
.modal-content {
width: 100%;
}
}
/* Becky */
.col-12.pt-4.proton {
position: relative;
}
img.image-proton {
display: block;
height: auto;
border-radius: 6%;
box-shadow: 8px 8px 10px #ff009da8;
}
div.overlay-proton{
position: absolute;
top: 1.5em;
bottom: 0em;
left: 0.8em;
right: 0.7em;
opacity: 0;
filter: contrast(300%);
transition: 1500ms ease-in-out;
background-color: #26248334;
border-radius: 6%;
}
.col-12.pt-4.proton :hover .overlay-proton {
opacity: 1;
}
.text-proton{
position: absolute;
text-shadow: -1px 1px 1px #00000042;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 12.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 2.0em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
/* becky page */
div.container-fluid.becky {
padding-top: 4.0em;
margin-top: 10.8em;
}
img.image-proton1 {
display: block;
border-radius: 6%;
height: auto;
margin-top: 6.0em;
margin-bottom: 8.0em;
}
h1.protontitle{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 4.4rem;
text-shadow: 2px 0.8px 10px #ff009dbe;
}
div.col-12.protontext{
font-family: 'Poppins', cursive;
font-weight: 300;
font-size: 1.4rem;
margin-top: 1.5em;
}
li.creditsproton{
margin-top: 2.0em;
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 1.4rem;
list-style-type: none;
}
li.creditsproton2{
margin-top: 2.0em;
font-family: 'Poppins',sans-serif;
font-weight: 200;
font-size: 1.0rem;
color: #000000;
list-style-type: none;
}
div.col-12.date{
padding: 2.0em;
}
li.creditsproton3{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 1.2rem;
list-style-type: none;
}
div.col-6.creditsproton{
color: #ff009d;
background-color: rgba(245, 245, 245, 0.623);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin: 2.0em;
margin-bottom: 4.0em;
}
p.dates{
font-family: 'Poppins',sans-serif;
font-weight: 200;
font-size: 1.0rem;
}
#becky{
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
}
#becky:hover{
opacity: 0.9;
}
#becky{
border-radius: 50px;
cursor: pointer;
transition: 0.3s;
}
#becky:hover{
opacity: 0.9;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.76); /* Fallback color */
background-color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 140vw;
max-width: 200vw;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
width: 32vw;
max-width: 60vw;
text-align: center;
color: whitesmoke;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 1200ms;
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #fa21f3;
font-size: 40px;
font-weight: bold;
transition: ease-out 800ms;
}
.close:hover,
.close:focus {
color: #f5f5f5;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 60vw){
.modal-content {
width: 100%;
}
}
/* Agenda*/
.col-6.agenda{
min-height: 200px;
width: 1000px;
padding: 2.0em;
padding-top: 6.0em;
background-color: #fe5d279f;
box-shadow: 4px 4px 10px #3efff5;
padding-bottom: 6.0em;
margin-top: 20.0em;
}
.container.agenda{
padding-bottom: 8.0em;
}
h1.data1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.4em;
color:#000000;
}
h1.data2{
font-family: 'Rubik', sans-serif;
font-weight: 900;
font-size: 1.6em;
color:#f5f5f5;
text-shadow: 0.1px 0.5px #252525;
}
h3.data3{
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.8em;
color:#000000;
margin-top: -0.6em;
text-shadow: 0.1px 0.5px #252525;
}
.button-agenda {
border-radius: 80px;
background-color: #3efff5;
border: none;
color: #000000;
text-align: center;
padding: 10px;
width: 7.0em;
webkit
transition: ease-in-out 0.3s;
cursor: pointer;
font-family: 'Rubik',sans-serif;
font-weight: 700;
font-size: 1.2em;
}
.button-agenda-head {
border-radius: 4px;
background-color: #3efff5;
border: none;
color: #3efff5;
text-align: center;
padding: 10px;
width: 7.0em;
transition: ease-in-out 0.3s;
cursor: pointer;
font-family: 'Rubik',sans-serif;
font-weight: 700;
font-size: 1.2em;
}
.button-agenda span {
cursor: pointer;
display: inline-block;
position: relative;
transition: ease-in-out 0.3s;
}
.button-agenda span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: ease-in-out 0.3s;
background-color:
}
.button-agenda:hover span {
padding-right: 25px;
}
.button-agenda:hover span:after {
opacity: 1;
right: 0;
background-color:
}
.button-agenda:hover{
background-color: #3efff5;
color: black;
}
.button-agenda{
background-color: #3efff5;
}
hr.agendahr{
display: block;
color: #3efff5;
}
/* archief */
.col-xl.archief{
padding: 2.0em;
padding-top: 1.0em;
margin-top: 18rem;
}
.col-xl.archief2{
padding: 2.0em;
padding-top: 1.0em;
margin-top: 18rem;
}
#uiteenvalvoorkant{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#uiteenvalvoorkant:hover{
opacity: 0.9;
}
#uiteenachterkant{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#uiteenachterkant:hover{
opacity: 0.9;
}
#uiteenvalfoto{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#uiteenvalfoto:hover{
opacity: 0.9;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgba(0, 0, 0, 0.76); /* Fallback color */
background-color: rgba(0, 0, 0, 0.75); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 32vw;
max-width: 60vw;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
width: 32vw;
max-width: 60vw;
text-align: center;
color: whitesmoke;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 1200ms;
}
@keyframes zoom {
from {transform: scale(0.1)}
to {transform: scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #fa21f3;
font-size: 40px;
font-weight: bold;
transition: ease-out 800ms;
}
.close:hover,
.close:focus {
color: #f5f5f5;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 60vw){
.modal-content {
width: 100%;
}
}
.col-xl.uiteenval{
padding: 2.0em;
}
.col-xl.video{
padding: 2.0em;
}
.row-xl.text{
min-height: 400px;
padding: 3.0em;
background-color: #444d4c98;
padding-top: 4.0rem;
padding-bottom: 4.0rem;
margin-bottom: 6.0em;
border-radius: 25px;
box-shadow: 4px 4px 10px #3efff5;
}
h1.uiteenval{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.4em;
color: whitesmoke;
}
p.textuiteenval{
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 1.0em;
color: whitesmoke;
}
.row-xl.contact{
min-height: 400px;
padding: 3.0em;
background-color: #79faebc0;
padding-top: 4.0rem;
padding-bottom: 4.0rem;
margin-top: 18.0rem;
margin-bottom: 6.0em;
border-radius: 25px;
box-shadow: 4px 4px 10px #3efff5;
}
h1.contact{
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 4.4em;
color: #fa21f3;
}
h3.neemcontactop{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 1.4em;
color: #fa21f3;
}
div.row.justify-content-between{
padding: 4.0rem;
}
div.col-sm.contact{
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 2.4em;
color: #fa21f3;
}
h3.callus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: #fa21f3;
}
h3.callus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
h3.emailus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: #fa21f3;
}
h3.emailus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
/* media queries*/
/*--------Navigation / background / buttons/ page 1,2,3,4,5-------- */
@media (max-width: 1025px){
img#rosanna{
width: 100%;
height: auto;
border-radius: 5px;
margin-top: 2.0em;
}
}
@media (max-width: 769px){
/* projecten page / Proton card */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 6.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 1.2em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
/* projecten page / Becky card */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 2.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 0.6em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
/* projecten page / Proton Page */
div.col-6.creditsproton{
color: #ff009d;
background-color: rgba(245, 245, 245, 0.623);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin-top: 2.0em;
margin-left: 1.0em;
margin-bottom: 4.0em;
}
/* projecten - Becky page */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 6.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 1.2em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
/* frankie */
h1.Frankie{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 4.0em;
color: #3efff5;
text-shadow: 4px 1px 20px #fa21f3;
margin-bottom: 0.5em;
text-decoration-line: underline;
}
.col-6.frankie{
min-height: 200px;
min-width: 80vw;
padding: 3.0em;
margin-top: 18.0em;
background-color: #eef8f8bd;
box-shadow: 4px 4px 10px #30c2bb80;
padding-bottom: 6.0em;
border-radius: 25px;
margin-right: auto;
margin-left: auto;
}
p.introfrankie{
font-family: 'Poppins',sans-serif;
font-weight: 300;
font-size: 1.2em;
color: #252525;
}
img#franks{
margin-left: auto;
margin-right: auto;
margin-top: 3.0em;
height: auto;
width: 70vw;
padding: 0.5em;
}
.container-xxl.rosanna{
min-height: 20vh;
width: 80vw;
margin-top: 8.0em;
padding-left: 2.0em;
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgba(245, 245, 245, 0.795);
box-shadow: 4px 4px 10px #ff009da8;
border-radius: 20px;
}
.container-xxl.Nine{
min-height: 20vh;
width: 80vw;
margin-top: 8.0em;
margin-bottom: 6.0em;
padding-top: 1.0em;
padding-bottom: 1.0em;
background-color: rgba(245, 245, 245, 0.795);
box-shadow: 4px 4px 10px #ff009da8;
border-radius: 20px;
}
div.col-lg-4.nine{
padding: 1.0em;
margin-left: 0.4em;
}
}
@media (max-width: 426px){
img.logo{
width:9.0em;
height:auto;
display: block;
margin-right: auto;
padding: 1.6em;
padding-inline-start: 0.8em;
}
img.img-fluid{
margin-top: -12.0em;
}
span.Open.text-end{
background-color: #ff35f800;
color: #3efff5;
text-shadow: 4px 4px 20px #3efff5;
border: none;
display: block;
margin-left: auto;
padding: 0.2em;
padding-inline-end: 0.2em;
}
.background-image-projecten{
background-image: url(images/Projectenbackgroundmobile.jpg);
min-height: 20vh;
max-width: 100vw;
background-position: center;
background-repeat: repeat;
background-size: cover;
padding: 0.01em;
}
/* footer */
a#a-link{
color: #3efff5;
text-decoration: none;
transition: all 0.6s;
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
}
a#a-link:hover, a#a-link:focus {
color: whitesmoke;
transition: ease-in-out 0.3s;
text-shadow: 2px 2px 20px #3efff5;
}
footer {
overflow: auto;
background-color: #fa21f3;
position: absolute;
width: 100%;
}
.h1.text-white{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.0em;
}
hr.footerhr{
color: #3efff5;
border:2px;
}
h5.text-white.mb-3{
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.0em;
color: whitesmoke;
}
i.fab.fa-instagram.fa-3x.mt-1.mx-1{
color: #3efff5;
size: 1.0em;
}
i.fab.fa-instagram.fa-3x.mt-1.mx-1:hover{
color: whitesmoke;
transition: 700ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
size: 1.0em;
}
i.fab.fa-facebook.fa-3x.mt-1.mx-1{
color: #3efff5;
size: 1.0em;
}
i.fab.fa-facebook.fa-3x.mt-1.mx-1:hover{
color: whitesmoke;
transition: 700ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
size: 1.0em;
}
h3.adress{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.6em;
color: whitesmoke;
}
h3.callus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.callus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
h3.emailus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.emailus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
/* button calender */
h1.data1speel{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 1.2em;
color:black;
padding-bottom: 1.0em;
}
h1.data2test{
font-family: 'Rubik', sans-serif;
font-weight: 900;
font-size: 1.4em;
color:whitesmoke;
text-shadow: 0.1px 0.5px #000000;
}
h3.data3{
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 0.8em;
color:#fa21f3;
margin-top: -0.6em;
padding-bottom: 2.0em;
text-shadow: 0.1px 0.5px #252525;
}
.button {
border-radius: 80px;
background-color: #fa21f3;
border: none;
color: #FFFFFF;
text-align: center;
width: 7.0em;
margin-top: 2.0 ;
webkit
transition: ease-in-out 0.3s;
cursor: pointer;
font-family: 'Rubik',sans-serif;
font-weight: 700;
font-size: 1.2em;
}
.button-head {
border-radius: 4px;
background-color: #3efff5;
border: none;
color: #fa21f3;
text-align: center;
width: 7.0em;
margin-top: 2.0 ;
transition: ease-in-out 0.3s;
cursor: pointer;
font-family: 'Rubik',sans-serif;
font-weight: 700;
font-size: 1.2em;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: ease-in-out 0.3s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: ease-in-out 0.3s;
background-color:
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
background-color:
}
.button:hover{
background-color: #3efff5;
color: black;
}
.button{
background-color: #fa21f3;
}
hr.calenderhr{
display: block;
color: #fa21f3;
}
/* projecten Proton */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 4.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 0.6em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
div.col-6.creditsproton{
color: #ff009d;
background-color: rgba(245, 245, 245, 0.623);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin-top: 2.0em;
margin-left: 1.0em;
margin-bottom: 4.0em;
}
img.image-proton1 {
display: block;
width: 92vw;
height: auto;
}
/* projecten - becky page */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 4.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 0.5em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
div.col-6.creditsbecky{
color: #3efff5;
background-color: rgba(21, 60, 168, 0.521);
min-width: 80vw;
height: auto;
border-radius: 3%;
margin-left: auto;
margin-right: auto;
margin-bottom: 4.0em;
}
/* agenda */
.col-6.agenda{
min-height: 200px;
width: 300px;
padding-top: 6.0em;
background-color: #fe5d279f;
box-shadow: 4px 4px 10px #3efff5;
padding-bottom: 6.0em;
margin-top: 20.0em;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
.container.agenda{
padding-bottom: 8.0em;
}
/* archive */
img#uiteenvalvoorkant.mx-auto.d-block{
width:300px;
}
img#uiteenachterkant.mx-auto.d-block{
width:300px;
}
.col-xl.archief2{
margin-top: 2.0em;
}
img#uiteenvalfoto.mx-auto.d-block{
width:300px;
}
/* contact us */
div.row.justify-content-between{
margin-left: -3.4em;
}
h1.contact{
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 3.4em;
color: #fa21f3;
}
h3.neemcontactop{
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 1.0em;
color: #fa21f3;
}
div.row.justify-content-between{
padding: 3.0rem;
}
div.col-sm.contact{
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 2.0em;
color: #fa21f3;
padding-bottom: 2.0em;
}
h3.callus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: #fa21f3;
}
h3.callus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.8em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
h3.emailus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: #fa21f3;
}
h3.emailus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
/* frankie */
h1.Frankie{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 3.0em;
color: #3efff5;
text-shadow: 4px 1px 20px #fa21f3;
margin-bottom: 0.5em;
text-decoration-line: underline;
}
.col-6.frankie{
min-height: 200px;
min-width: 84vw;
padding: 2.0em;
margin-top: 18.0em;
background-color: #eef8f8bd;
box-shadow: 4px 4px 10px #30c2bb80;
padding-bottom: 6.0em;
border-radius: 25px;
margin-right: auto;
margin-left: auto;
}
p.introfrankie{
font-family: 'Poppins',sans-serif;
font-weight: 300;
font-size: 1.0em;
color: #252525;
}
img#franks{
margin-left: auto;
margin-right: auto;
margin-top: 3.0em;
height: auto;
width: 68vw;
padding: 0.2em;
}
.container-xxl.rosanna{
min-height: 20vh;
width: 80vw;
margin-top: 2.0em;
padding-left: 2.0em;
padding-top: 2.0em;
padding-bottom: 4.0em;
background-color: rgba(245, 245, 245, 0.795);
box-shadow: 4px 4px 10px #ff009da8;
border-radius: 20px;
}
h1.rosanna{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 2.0em;
color: #fa21f3;
text-shadow: 0.1px 0.5px #252525;
}
p.text.rosanna{
font-family: 'Poppins',sans-serif;
font-weight: 300;
font-size: 1.0em;
color: #252525;
}
div.col-lg-4.nine{
margin-left: 0.8em;
}
h1.nine{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 2.0em;
color: #fa21f3;
text-shadow: 0.1px 0.5px #252525;
margin-left: 0.4em;
}
p.text.nine{
font-family: 'Poppins',sans-serif;
font-weight: 300;
font-size: 1.0em;
color: #252525;
padding: 1.0em;
}
}
@media (max-width: 376px){
/* footer*/
h3.callus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.callus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
h3.emailus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.emailus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
/* projecten - Proton Page */
div.col-6.creditsproton{
color: #ff009d;
background-color: rgba(245, 245, 245, 0.623);
min-width: fit-content;
height: auto;
border-radius: 6%;
margin-top: 2.0em;
margin-left: 0.8em;
margin-bottom: 4.0em;
}
h3.callus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: #fa21f3;
}
h3.callus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
h3.emailus1{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: #fa21f3;
}
h3.emailus1:hover{
font-family: 'rubik', sans-serif;
font-weight: 900;
font-size: 0.6em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
}
div.col-sm.contact{
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 1.6em;
color: #fa21f3;
padding-bottom: 1.0em;
}
/* frankie */
h1.Frankie{
font-family: 'Rubik',sans-serif;
font-weight: 900;
font-size: 3.0em;
color: #3efff5;
text-shadow: 4px 1px 20px #fa21f3;
margin-bottom: 0.5em;
text-decoration-line: underline;
}
.col-6.frankie{
min-height: 200px;
min-width: 80vw;
padding: 1.0em;
margin-top: 18.0em;
background-color: #eef8f8bd;
box-shadow: 4px 4px 10px #30c2bb80;
padding-bottom: 6.0em;
border-radius: 25px;
margin-right: auto;
margin-left: auto;
}
.container-xxl.rosanna{
min-height: 20vh;
width: 80vw;
margin-top: 8.0em;
padding-left: 2.0em;
padding-top: 4.0em;
padding-bottom: 4.0em;
background-color: rgba(245, 245, 245, 0.795);
box-shadow: 4px 4px 10px #ff009da8;
border-radius: 20px;
}
}
@media (max-width: 326px){
/* footer */
h3.callus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.callus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
h3.emailus{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: #3efff5;
display: none;
}
h3.emailus:hover{
font-family: 'Poppins', sans-serif;
font-weight: 400;
font-size: 0.5em;
color: whitesmoke;
transition: 500ms ease-in-out;
text-shadow: 2px 2px 20px #3efff5;
display: none;
}
/* projecten - becky page */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 2.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 0.6em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
}
@media (max-width: 321px){
img.logo{
width:6.0em;
height:auto;
display: block;
margin-right: auto;
padding: 0.6em;
padding-inline-start: 0.2em;
}
span.Open.text-end{
background-color: #ff35f800;
color: #3efff5;
text-shadow: 4px 4px 20px #3efff5;
border: none;
display: block;
margin-left: auto;
padding: 0.2em;
padding-inline-end: 0.2em;
}
/* proton card */
h1.titel-text{
font-family: 'Rubik',sans-serif;
font-size: 2.8em;
font-weight: 900;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
p.ondertitel{
font-family: 'Poppins',sans-serif;
font-size: 0.6em;
font-weight: 200;
color: white;
text-shadow: -1px 1px 1px #00000042;
}
img.image-proton1 {
display: block;
width: 88vw;
height: auto;
}
/* archive */
img#uiteenvalvoorkant.mx-auto.d-block{
width:260px;
}
img#uiteenachterkant.mx-auto.d-block{
width:260px;
}
.col-xl.archief2{
margin-top: 2.0em;
}
img#uiteenvalfoto.mx-auto.d-block{
width:260px;
}
}
@media screen and (max-height: 450px) {
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}