/* all */
@font-face { font-family:Bantayog;  src:url(Bantayog-Regular.woff); }
@font-face { font-family:Comfortaa; src:url(Comfortaa.woff); }
@font-face { font-family:Lato;      src:url(Lato-regular.woff); }
body, div, ul, li, h1, h2, a{ margin:0; padding:0; font-family:Comfortaa, Arial; }
html {overflow-x:hidden!important; width:auto!important;}
img{ width:100%; }
/* * { outline: 1px solid #f00 !important; }    Outline to all to find boxes */

/* top.asp */
#brand { display:flex; }
.welkom { display:flex; padding-left:30px; right:0px; top:0px; color:white; font-size:15px; font-family:Bantayog; z-index:2; }

header { padding:0 20px; height:50px; display:flex; justify-content:space-between; background:#333632;}
header ul { list-style-type:none; height:100%; display:flex; align-items:center; justify-content:space-around; }
header li { padding:5px; margin-left:10px; }
header a { display:block; height:100%; color:white; text-decoration:none; font-size:20px; font-family:Bantayog; }
header a:hover { text-decoration:underline; transform:scale(1.1); transition:0.3s; }
select { font-size:15px; }

#hamburger-icon { margin:auto 0; display:none; cursor:pointer; z-index:1; }
#hamburger-icon div { width:35px; height:3px; background-color:white; margin:6px 0; transition:0.4s; }
.open .bar1 { -webkit-transform: rotate(-45deg) translate(-6px,6px); transform: rotate(-45deg) translate(-6px,6px); }
.open .bar2 { opacity: 0; }
.open .bar3 { -webkit-transform: rotate(45deg) translate(-6px,-8px); transform: rotate(45deg) translate(-6px,-8px); }
.open .mobile-menu { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }
.mobile-menu { display: none; position:absolute; top:50px; left:0; height:calc(100vh-50px); width:100%; color:black; }
.mobile-menu li { margin-bottom:0px; background-color:black; width:250px; margin-left:auto; }
.mobile-menu a { font-size:30px; }
.mobile-menu a:hover { text-decoration:underline; transform:scale(1); }

main { background:#F1E4A9; }

/* index.asp */
.block{ position:relative; background-color:#C2441E; }
.affiche{ max-width:500px; padding:0px; border:0px; margin:0px; }

.intro1     { display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; background-color:#F1E4A9; }          /* Geel */
.img1       { max-width:30%; padding:20px; }
.tekst1 span{ font-size:40px; font-family:Lato; color:#C2441E; }
.tekst1     { font-size:20px; padding:50px; color:#C2441E; }

.intro2     { display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; background-color:#C2441E; }   /* Rood */
.img2       { max-width:30%; padding:20px; }
.tekst2 span{ font-size:40px; font-family:Lato; color:#F1E4A9; }          /* Geel */
.tekst2     { font-size:20px; padding:50px; color:#F1E4A9; }

#button_versturen { background-color: #C2441E;
                   float: center; color:#F1E4A9; font-family:Bantayog;
                   border: none; font-size:20px;
                   outline:none; cursor:pointer; padding:14px 16px; transition:0.3s;
}
.opvolging { font-size:10px; font-family:arial; border:1px; padding:0px; margin:0px; border-collapse: collapse; }
.opvolging td,th { font-size:10px; font-family:arial; border:1px solid black; padding:0px; margin:0px; border-collapse: collapse; }
.inschrijven { margin-left:auto; margin-right:auto; width="500px"; }
.inschrijven th,td { font-size:16px; border:none; }

/* responsive styles */

@media screen and (max-width: 1000px) { .fading-slideshow { width:600px; height:300px; }
}
@media screen and (max-width: 960px){ nav li{ font-size:18px; }
}
@media screen and (max-width: 800px){ .intro1{ flex-wrap:wrap; }
                                      .img1{ max-width:50%; padding:20px; }
                                      .intro2{ flex-wrap:wrap; }
                                      .img2{ max-width:50%; padding:20px; }
                                      .intro3{ flex-wrap:wrap; }
                                      .img3{ max-width:50%; padding:20px; }
                                      .vervoer{ flex-wrap:wrap; }
                                      .busimg{ max-width:50%; padding:20px; }
}
@media screen and (max-width: 700px){ .logo{ max-width:300px; }
                                      nav li{ font-size:18px; }
                                      .images li{ width:100%; display:block; margin:20px auto; }
                                      nav { display:none; }
                                      #hamburger-icon { display:block; }
                                      .fading-slideshow { width:500px; height:250px; }
}
@media screen and (max-width: 600px){ article p{ font-size:12px; }
                                      .fading-slideshow { width:300px; height:150px; }
}
@media screen and (max-width: 560px){ .logo{ max-width:200px; }
                                      nav li{ display:block; width:100%; margin:12px 0; }
                                      article h2{ font-size:36px; }
}
@media screen and (max-width: 500px){ article p{ font-size:10px; }
}
@media screen and (max-width: 375px){ .logo{ top:10%; }
                                      .inschrijven { margin-left:auto; margin-right:auto; width="100px"; }
                                      .inschrijven th,td { font-size:16px; border:none; }
}