* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    max-width: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

h1{font-size:36px;}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
h1,h2,h3,h4,h5,h6{font-family:  Verdana, Arial, Helvetica, sans-serif; font-weight:400;margin:10px 0}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    transition: all 0.4s ease;
    background: #2196F3;

    background: linear-gradient(to bottom,
    rgba(33, 150, 243, 1.0) 10%,
    rgba(33, 150, 243, 0.2) 100%
    );
    z-index: 1000;
}

/* Header in vaste (gescrollde) toestand */
header.scrolled {
    background-color: rgba(33, 150, 243, 0.8);
    height: 60px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* ==== Logo ==== */
.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo {
    height: 100px;
    width: auto;
    transition: height 0.4s ease;
    border-radius: 8px;
}

/* Bij scrollen wordt het logo kleiner */
header.scrolled .logo {
    height: 40px;
}

#open_menu {
    display: none;
}

nav a {
    color: #222;
    text-decoration: none;
    margin-left: 60px;
    font-weight: bold;
}

main {
    margin: 120px auto 0 auto;
    width: 100%;
    max-width: 900px;
    flex: 1;
}

main.scrolled {
    margin: 60px auto 0 auto;
}

main a:link, main a:visited {
    color: #FFF;
    text-decoration: none;
}

main a:hover {
    text-decoration: underline;
}

main label {
    width: 120px;
    display: inline-block;
    vertical-align: middle;
}

p.error {
    width: 100%;
    max-width: 450px;
    background: red;
    color: white;
    padding: 3px;
}

footer {
    background:#C0C0C0;
    margin: 0;
    width: 100%;
    text-align:center;
    line-height: 60px;
    clear: both;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
footer a {color:#000;text-decoration:none;}
footer span {cursor:pointer;}

/* Phone / Portrait */
@media screen and (max-width: 450px) and (orientation:portrait) {
#open_menu {
    display: block;
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 40px;
    font-weight: bold;
}

nav {
   width: 230px;
   display: none;
   position: absolute;
   top: 50px;
   right: 8px;
   background-color: #2196F3;
   z-index: 1200;
   border: 1px solid #333;
}

nav a {
    display: block;
    margin: 6px 3px;
}

}

@media screen and (max-width: 768px) and (orientation:landscape) {
#open_menu {
    display: block;
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 40px;
    font-weight: bold;
}

nav {
   width: 230px;
   display: none;
   position: absolute;
   top: 50px;
   right: 8px;
   background-color: #2196F3;
   z-index: 1200;
   border: 1px solid #333;
}

nav a {
    display: block;
    margin: 6px 3px;
}

}

@media screen and (max-width: 768px) and (orientation:portrait) {
#open_menu {
    display: block;
    position: absolute;
    top: 3px;
    right: 10px;
    font-size: 40px;
    font-weight: bold;
}

nav {
   width: 230px;
   display: none;
   position: absolute;
   top: 50px;
   right: 8px;
   background-color: #2196F3;
   z-index: 1200;
   border: 1px solid #333;
}

nav a {
    display: block;
    margin: 6px 3px;
}
}

.bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    z-index: -1;
}

#top_menu .session_active {background: #05A80B; border: 10px solid transparent;}
#top_menu .session_inactive {background: #C00; border: 10px solid transparent;}

.table_agenda {
    border:none;
}

.table_agenda td {
    padding: 3px;
    margin: 1px;
}

.table_agenda p {
    margin: 2px;
}

form p.formulier {margin:0; padding: 2px;}
form p.formulier textarea {margin-top: 4px;}
form p.formulier label {vertical-align:top;display:inline-block;width:120px;margin-top:2px;}

.social {max-width:380px;}
.fb-like {float:left;clear:both;margin-top:10px;}
.fb-like iframe {min-height:30px;background:#FFF;padding:4px;}
.db-show {width:100%;max-width:380px;height:500px;overflow:scroll;border-radius:8px;}
#tweetbutton, #twitter-timeline {margin-top:20px;padding-top:10px; padding-bottom:10px;}

.FotoContainer{max-width:860px;float: left;line-height:15px;}
.FotoBlok a:link img, .FotoBlok a:visited img, .FotoBlokBalk a:link img, .FotoBlokBalk a:visited img{border: 1px solid #39F;}
.FotoBlok a:hover img, .FotoBlokBalk a:hover img{border: 1px solid #F93; cursor: pointer;}
.FotoContainer a:link, .FotoContainer a:visited, #FotoBalk a:link, #FotoBalk a:visited{color: #000; text-decoration: none;}
.FotoContainer a:hover, .FotoBalk a:hover{color: #000; text-decoration: underline; cursor: pointer;}
.FotoBlokBalk a:link span, .FotoBlokBalk a:visited span,.FotoBlok a:link span,.FotoBlok a:visited span {text-decoration:none; color: #000}
.FotoBlokBalk a:hover span, .FotoBlok a:hover span {text-decoration:none; color: blue;}

.rijkleur1 {background:#CCC; color: #000}
.rijkleur2 {background:#999;}

.error {background: red; color:#FFF;padding:4px;font-size:12px;}

.hyperlinkcss{position:absolute;font-size:12px;color:#000;margin-left:5px;margin-top:0px;visibility:hidden;border:1px solid #000;line-height:10px;z-index:100;background:#FFC;width:350px;padding:2px;text-align:left;clear:both;}

.robotbox {
    max-width: 366px;
    height: 74px;
    margin: 0;
    font-family:Verdana;
    font-size: 12px;
    color: #000;
    border:1px solid black;
    background: #C2C2C2;
    padding: 5px;
}

.robotbox .robotcodes {
    display: none;
    line-height: 44px;
}

.robotbox input[type=checkbox] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.robotbox_content {
    display: inline-block;
    vertical-align: middle;
}

.robotbox .checkdiv {
    display: inline-block;
    position: relative;
    font-size: 32px !important;
    padding: 0 12px !important;
    font-weight: bold;
}

.robotbox .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.robotcodes input[type=tel] {
    position: relative;
    left:5px;
    top: -3px;
    padding: 2px;
    font-size: 24px !important;
}

.robotbox .renew {
    float:right;
    margin-top: -45px;
    font-size: 18px !important;
    cursor: pointer;
}

@media screen and (min-width: 651px) {
#top_menu a.button_opruiming{display:none;}

.intern-background {background: url('https://tapeshows.nl/images/taperack-in-zwolle.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.intern-background-artiestenbegeleiding {background: url('https://rms-tilburg.nl/images/Fillers/Alice_Dj_in_Ahoy.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.intern-background-geluidsverzorging {background: url('https://rms-tilburg.nl/images/Fillers/Geluidsverzorging.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.intern-background-portfolio {background: url('https://tapeshows.nl/images/joling-tribute-amsterdam.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.intern-background-contact {background: url('https://rms-tilburg.nl/images/Fillers/Geluid.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}
.intern-page-blur {min-height: calc(100vh - 180px);background-color:rgba(0, 0, 0, 0.6);max-width: 900px;overflow:visible;}
.intern-page-content {color:#FFF;line-height:24px;padding:20px;}
#top_menu .hide_large {
    display: none;
}
#top_menu .active {
    color: white;
}
.show_large{
    display:block;
}
.show_small {
    display:none;
}

.button_opruiming{position:fixed;top:140px;left:30px;z-index:10;background:red;color:#FFF;font-size:24px;font-weight:bold;padding:8px; border-radius:18px;}
main.scrolled .button_opruiming{top: 80px;}

.FotoBlok{border-radius:14px;width:150px;height:190px;margin-top:8px;margin-left:4px;margin-right:4px;float: left;background:#C0C0C0;position:relative; font-size:12px; text-align:center; color:#000;}
.FotoBlok img, .FotoBlokBalk img {border-radius:14px;max-height:148px;max-width:148px;}

}


@media screen and (max-width: 650px) {

#top_menu a.button_opruiming{height:40px;padding: 14px 15px 0 15px; background:red;color:#FFF; font-weight:bold;}

.intern-background,
.intern-background-artiestenbegeleiding,
.intern-background-geluidsverzorging,
.intern-background-portfolio,
.intern-background-contact {background: url('https://rms-tilburg.nl/images/Fillers/Alice_Dj_in_Ahoy.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
.intern-page-blur {background-color:rgba(0, 0, 0, 0.6);overflow:visible;}
.intern-page-content {color:#FFF;line-height:20px;padding:5px;font-size:16px;}

    #top_menu .hide_large {
        display: block;
    }

.show_large{
    display:none;
}
.show_small {
    display:block;
}

.FotoBlok{border-radius:14px;min-width:160px;width:calc(50vw - 16px);height:calc(50vw + 40px);margin-top:8px;margin-left:4px;margin-right:4px;float: left;background:#C0C0C0;position:relative; font-size:12px; text-align:center; color:#000;}
.FotoBlok img, .FotoBlokBalk img {border-radius:14px;width:calc(50vw - 16px);height:calc(50vw - 16px);min-height:148px;min-width:148px;}

}