/* BEKIJKWEBSITE.CSS*/

/* BOTTOM*/
.Bottom{
height:36px;
width:100%;
margin:0;
padding:7px 0 0 0;
font-size:4.0em;
color:#fff;
text-align:center;
border-radius:0 0 0 0;
background:linear-gradient(to bottom, rgba(23,10,0,0.7), rgba(23,10,0,0.7)0%);
background-color:transparent
}

/* SCROLL TO TOP*/
#ScrollToTop{
z-index:3;
position:fixed;
bottom:20px;
right:20px;
cursor:pointer;
display:flex;
align-itemcenter;
justify-content:center;
opacity: 0;
transition:opacity 0.3s ease-in-out
}

#ScrollToTop img{width:30px;height:30px}

.ScrollToTopHidden{display:none}

/* NIET OP 507*/  
@media only screen and (max-width:507px){.NIETOP507{display:none !important}}

/* NIET OP DESKTOP*/ 
@media only screen and (min-width:507px){.NIETOPDESKTOP{display:none !important}}

/* VOOR BEWEGING VAN EEN IMAGE in Container-33*/
@keyframes shake {70%{transform:translate(1px, -1px) rotate(5deg);}}

/* HOOFDCONTAINER*/
.Hoofdcontainer{max-width:1262px;margin:0 auto}
/* MEDIA*/
@media only screen and (max-width:1366px){.Hoofdcontainer{max-width:100%}}

/* HEADER*/
.Header{width:100%;height:148px}
/* MEDIA*/
@media only screen and (max-width:507px){.Header{height:70px}}

/* HEADER IMG */
.Header img{float:left;width:100%;height:148px}

/* TITEL h1 IN HEADER*/
.Titel h1{width:auto;position:absolute;z-index:2;top:25px;color:#fff;font-size:10.0em;
margin-left:10px;font-style:italic;text-shadow:1px 1px 1px #000;font-weight:lighter;cursor:default;letter-spacing:0.4em}
/* MEDIA*/
@media only screen and (max-width:1194px){.Titel h1{font-size:7.0em;letter-spacing:0.2em;top:40px}}
@media only screen and (max-width:740px){.Titel h1{font-size:5.4em;letter-spacing:0.2em;top:40px}}
@media only screen and (max-width:320px){.Titel h1{font-size:3.9em;letter-spacing:0.2em}}
@media only screen and (max-width:240px){.Titel h1{font-size:2.4em;letter-spacing:0.2em}}

.Titel h1 a:link,
.Titel h1 a:visited{color:#fff;text-decoration:none}
.Titel h1 a:hover,
.Titel h1 a:active{color:#d86f1c;text-decoration:none}

/* KIES h2 WEBSITE IN HEADER*/
.KiesWebsite h2{width:auto;position:absolute;z-index:2;top:6%;color:#fff;font-size:5.0em;font-style:italic;
text-shadow:1px 1px 1px #000;font-weight:lighter;margin-left:1%;z-index:2;cursor:default}
/* MEDIA*/
@media only screen and (max-width:740px){.KiesWebsite h2{font-size:4.5em;margin-left:5%;top:105px}}

.KiesWebsite h2 a:link,
.KiesWebsite h2 a:visited{color:#fff;text-decoration:none}
.KiesWebsite h2 a:hover,
.KiesWebsite h2 a:active{color:#fff;text-decoration:none}

/* CONTAINER-33*/
.Container-33{
padding:0 5px 0 5px;
margin-top:0;
margin-left:0;
font-size:3.4em;
display:grid;
grid-template-columns:repeat(3,1fr);
column-gap:4.0vw;
background:linear-gradient(to top, rgba(23,10,0,0.7), rgba(23,10,0,0.9)100%)
}
.Container-33 >div{}
.Container-33 img{width:100%;margin-bottom:9px;border-radius:15px;margin-left:0;box-shadow:2px 2px 10px #202020}
.Container-33 img:hover{animation:shake 0.2s}
.Container-33 p{margin:10px -12px 6px 12px}
.Container-33 h1{margin:8px 0 3px 0;cursor:default;font-size:1.2em;color:orange;font-style:italic;font-weight:normal;text-align:center
}
/* MEDIA*/
@media only screen and (max-width:926px){.Container-33{grid-template-columns:repeat(2,1fr)}}
@media only screen and (max-width:568px){.Container-33{grid-template-columns:repeat(1,1fr)}}
@media only screen and (max-width:640px){.Container-33 h1{font-size:1.1em}}

.Container-33 a:link,
.Container-33 a:visited{color:#ffe5ff;text-decoration:none}
.Container-33 a:hover,
.Container-33 a:active{color:#d86f1c;text-decoration:none}