html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}
body{margin:0px;overflow:auto;}

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:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

/* Sidebar on the left */
#Logo {width:100%;text-align:center;}
#Logo img{margin-top:20px;margin-bottom:10px;border: 1px solid #2196F3;width:80%;height:auto;}
.search_input,.search_button {cursor:pointer;border: 2px solid #dadada;margin:5px;padding:5px;font-size:24px;font-weight:bold;}
.search_input,.search_button {outline:none;border-color: #9ecaed;box-shadow: 0 0 10px #9ecaed;}
.search_input {width:60%;}
.search_button {background-color:#2196F3;font-weight:bold;width:25%;}
#SocialMediaLinks {width:100%;background:#CCC;padding: 5px 15px;box-sizing:border-box;}
#SocialMediaLinks img {width:40px;height:40px;margin: 6px 3px 2px 3px;}
.RedCounter {border-radius:12px;margin-left:10px;padding:4px 7px;background:red;font-weight:bold;color:#FFF;}
#MessOnline {position:absolute;right:10px;color:#008000;margin-top:8px;}
#demoAcc a.menu_link:link {width:calc(100% - 60px);background:#FFF;padding: 8px 30px;}
a.menu_link:link, span.menu_link {width:calc(100% - 32px);float:left;padding: 8px 16px; color:#000; text-decoration:none;}
a.menu_link:visited, #demoAcc a.menu_link:visited {color:#000; text-decoration:none;}
a.menu_link:hover, span.menu_link:hover, #demoAcc a.menu_link:hover {color:#000; text-decoration:none; background:#CCC;}
#menu_adres {width:90%;max-width:340px;background:#FFF;margin:0px auto;border: 2px solid #FF9933;font-size:12px;text-align:left;padding:2px;line-height:20px;}
#menu_adres a {color:#000; text-decoration:none;}
#last_visited, .nav-right-submenu {width:90%;max-width:340px;margin:10px auto;border: 2px solid #FF9933;padding:2px;background:#FFF;}
#last_visited a .artist_list_item{color:#000;text-decoration:none;}
#last_visited a:hover .artist_list_item{background:#CCC}

/* Sidebar on the right */
nav#container_right a .artist_list_item{color:#000;text-decoration:none;}
nav#container_right a:hover .artist_list_item{background:#CCC}
nav#container_right h3,nav#container_right h4 {margin: 3px 5px;font-weight:bold;}
nav#container_right h4 a {color:#000;text-decoration:none;}
.artist_list_item {background:#2196F3; width:98%;height:50px;margin:5px auto;font-size:18px;position: relative; left:0; top: 0;}
.artist_list_item img.img1{width:50px; height:50px;}
.artist_list_item span {margin: 0;position: absolute;top: 50%;left: 58px;-ms-transform: translate(0 -50%);transform: translate(0, -50%);}
.artist_list_item img.img2 {width:30px;float:right;margin: 10px 5px;}

/* main-content */
#container_center main a:link, #container_center main a:visited{color:blue;text-decoration:none;}
#container_center main a:hover{color:blue;text-decoration:underline;}
#container_center main input,#container_center main select,#container_center main textarea{font-size:15px !important; padding:3px;}

.page_biografie {width:100%;clear:both;}
.page_recensies,.page_contact {width:100%;clear:both;display:none;}

/* Opmaak content Artiestenpagina's*/
.Artist_container{width:100%;clear:both;}
.Artist_container h2{width:100%;background:#FF9933;text-align:center;font-size:18px;font-weight:normal;}
.Artist_container h2 a {color:#000 !important;text-decoration:none;}
.Artist_container h2 a:hover{text-decoration:underline;}
.Artist_container img{min-width:160px;min-height:160px;margin:5px 5px 0 0;float: left}
.Artist_info{margin:2px 0 10px 10px;float:left;}
.Artist_info p{margin: 0;}
.Artist_info label {vertical-align:top;display:inline-block;width:100px;margin-top:2px;}
.Artist_prijs {font-size:40px;font-weight:bold;font-style:italic;color:#339966;cursor:help;line-height:40px;}
.Artist_prijs .exclusief {width:60px;height:60px;background-image:url('https://foppersinconcert.nl/images/exclusief.png');cursor:help;display:inline-block;margin-top:-24px}
.hyperlinkcss{position:absolute;font-size:10px;margin-left:5px;margin-top:0px;visibility:hidden;border: 1px solid #000;line-height:10px;z-index:100;background:#FFFFCC;width:250px;padding:2px;text-align:left;clear:both;}
.Artist_bio1, .Artist_bio2{width:98%;margin:3px 3px 10px 3px;float:left;clear:both;}
.Artist_bio1 h2 {margin: -18px 0 -10px 0;}
.Artist_bio1 p{margin:13px 0;}
#quick_info {width:100%;margin:10px 0 0 3px;font-weight:bold;}
#biografie_keywords{margin:8px 0 0 3px;float:left;}
#biografie_keywords a:link,
#biografie_keywords a:visited,
#biografie_keywords a:hover,
#quick_link a:link,
#quick_link a:visited,
#quick_link a:hover{color:#000;text-decoration:none;cursor:pointer;}
.whatsapp-send {color:blue;cursor:pointer;}
.tussenlijn{width:100%;height:3px;margin-top:2px;margin-bottom:10px;background-color:#FF9900;border:none;clear:both;}

.Intern_Artist_Menu {width:100%;clear:both;font-size:14px;}
.DropdownTile {border-radius:14px;width:80px;height:80px;margin:5px;float:left;text-align:center;display:table;cursor:pointer;}
.DropdownTile span {vertical-align:middle;display:table-cell;}
.page_biografie {width:100%;clear:both;}
.page_boekingen,.page_informatie {width:100%;clear:both;display:none;}

.container_video {position:relative;width:100%;height:0;padding-bottom:56.3%;}
.video {position:absolute;top:0;left:0;width:100%;height:100%;}

span.error {background:red;color:white;padding:4px;margin:3px 0}

/* Voor pagina Artists - fotomenu */
#foto_menu_groepen {width:100%;}
#foto_menu_groepen table{width:100%;}
#foto_menu_groepen td {width:50%;line-height:24px;}
.foto_menu_groep {width:100%;clear:both;}
.foto_menu_toplink {width:100%;text-align:right;}
.foto_type_link {width:100%;}
.foto_type_link h2 {font-size:15px;font-weight:bold;margin:0px;}
.foto_container {width:100%;}
.foto_menu_toonfoto a:link img, .foto_menu_toonfoto a:visited img{border: 1px solid #3399FF;}
.foto_menu_toonfoto a:hover img{border: 1px solid #FF9933;}
.foto_menu_toonfoto a:link, .foto_menu_toonfoto a:visited{color:#000 !important;text-decoration:none;}
.foto_menu_toonfoto a:hover{color:#000 !important;text-decoration:underline;}

.Fotoalbum_foto {width:144px;float:left;margin:4px 5px;}
.Fotoalbum_foto img {width:144px;border:none;margin:0px;}

/* Voor pagina Artists - fotomenu */
#tabel_top10 {width:100%;}
#tabel_top10 a {color:#000 !important;text-decoration:none !important;}
#tabel_top10 table {width:100%; border: 2px solid #FF9933;margin-top:5px;border-spacing:0;padding:4px;}
#tabel_top10 tr {height:20px;}
#tabel_top10 .result:hover{background:#2196F3;}

.Formulieren form {margin:3px 0;font-size:13px;}
.Formulieren p {margin:3px 0;line-height:20px;}
.Formulieren label {vertical-align:top;display:inline-block;width:86px;margin-top:2px;}

.zoeken_geen_invoer {width:100%;margin-left:8px;}
.zoeken_geen_invoer table{width:100%;margin-left:auto;margin-right:auto;}
.zoeken_geen_invoer td{width:50%;}
.zoeken_geen_invoer p{margin-left:5px;}

.tile_icons {width:35px;height:35px;cursor:pointer;border-radius:4px;}

/* Footer */
.hide {display:none;}
.show {display:block !important;}
.border {box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}

/* Colors */
.blue,.hover-blue:hover{color:#fff!important;background:#2196F3!important}
.blue-bl,.hover-blue-bl:hover{color:#000!important;background:#2196F3!important}
.brown,.hover-brown:hover{color:#fff!important;background:#795548!important}
.darkpurple,.hover-darkpurple:hover{color:#fff!important;background:#993333!important}
.fadegreen,.hover-fadegreen:hover{color:#fff!important;background:#669966!important}
.green,.hover-green:hover{color:#fff!important;background:#4CAF50!important}
.orange,.hover-orange:hover{color:#000!important;background:#ff9800!important}
.purple,.hover-purple:hover{color:#fff!important;background:#9c27b0!important}
.red,.hover-red:hover{color:#fff!important;background:#f44336!important}
.white,.hover-white:hover{color:#000!important;background:#fff!important}

/* Rating */
.gold_star_full, .gold_star_half, .gray_star {width:17px;height:16px;display:inline-block;vertical-align:middle;}

.gold_star_full {background-image: url(https://foppersinconcert.nl/images/gold-star.png);margin-right:5px;}
.gold_star_half {background-image: url(https://foppersinconcert.nl/images/half-gold-star.png);margin-right:5px;}
.gray_star {background-image: url(https://foppersinconcert.nl/images/gray-star.png);}

/* 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: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #993333;
    color: white;
}

.modal-body {padding: 2px 16px;max-height:65vh;overflow:auto;}

.modal-footer {
    padding: 2px 16px;
    background-color: #333;
    color: white;
}

@media screen and (max-width:767px){
nav#container_left {width:85%;max-width:300px;height:100%;background:#f1f1f1;position:fixed!important;top:0;left:0;z-index:70;overflow:auto;display:none;}
#close_button_left_menu {float:right; font-size:20px; margin:10px;}

#container_center {width:100%;position:relative;top:0;right:0;z-index:1;padding-bottom:60px;}
#small-title-bar {width:100%;height:50px;position:fixed;top:0;left:0;text-align:center;line-height:44px;}
#small-title-bar a {text-decoration:none;color:#FFF;}
#open_button_left_menu {float:left;font-size:38px;margin-top:-4px;}
#open_button_right_menu {float:right;font-size:38px;margin-top:-4px;}
#container_center main{padding:50px 6px;}
.foto_menu_toonfoto {width:29%;height:160px;float:left;margin:5px 2%;font-size:11px;}
.foto_menu_toonfoto img{width:100%;}
footer#wide {display:none;}
footer #BottomBalk {width:100%;background:#CCC;text-align:center;margin-top:6px;}
footer #BottomBalk img{margin:6px 3px 2px 3px;}

footer #foot_container {width:100%;background:#EFEFEF;text-align: left;margin-top: 6px;padding:5px 5px 5px 15px;box-sizing:border-box;}
footer #foot_container a{color:#3399FF;text-decoration: none;}

footer #Mcopyright {width:100%;line-height:60px;background-color:#CCC;text-align:center;clear:both;margin: 6px 0;}

nav#container_right {width:85%;max-width:340px;height:100%;background:#2196F3;position:fixed!important;top:0;right:0;z-index:70;overflow:auto;display:none;}
#close_button_right_menu {float:right; font-size:20px; margin:10px;}

#Adminonline {position:fixed;left:8px;bottom:8px;padding:10px 16px;background: #008000;font-size:18px;border-radius:6px;z-index:51;}
#Adminonline a {color:#FFF;text-decoration:none;}
#Adminonline span {float:left;}
#Adminonline img {margin-left:18px;float:left;}
#Adminonline #HAdmin{position:absolute;right:-8px;top:-8px;border-radius:10px;height:24px;width:24px;background:#000;color: #FFF;text-align:center;font-size:12px;line-height:24px;cursor:pointer;}
}

@media screen and (min-width:768px){
#background_left, #background_right {width:25%;height:100%;position:fixed;top:0;}
#background_left {background:#f1f1f1;left:0;}
#background_right {background:#FFF;right:0;}

nav#container_left {width:25%;min-height:100vh;position:relative;top:0;left:0;}
#close_button_left_menu {display:none;}

#container_center {width:50%;position:absolute;top:0;right:25%;z-index:1;}
#small-title-bar {display:none;}
#container_center main{padding:10px;}
.foto_menu_toonfoto {width:144px;height:190px;float:left;margin:5px 7px;font-size:11px;}
.foto_menu_toonfoto img{width:144px;}
footer#small {display:none;}

#copyright {width:100%;font-size:11px;padding-top:7px;text-align:center;clear:both;}
#copyright a {text-decoration:none;color:#000;}

#container_center #top10 {display:none;}

nav#container_right {width:25%;position:absolute;top:0;right:0;padding-bottom:30px;}
#close_button_right_menu {display:none;}

#Adminonline {position:fixed;left:20px;bottom:20px;padding:10px 16px;background: #008000;font-size:18px;border-radius:6px;z-index:51;}
#Adminonline a {color:#FFF;text-decoration:none;}
#Adminonline span {float:left;padding-top:2px;}
#Adminonline img {margin-left:24px;float:left;}
#Adminonline #HAdmin{position:absolute;right:-8px;top:-8px;border-radius:10px;height:24px;width:24px;background:#000;color: #FFF;text-align:center;font-size:12px;line-height:24px;cursor:pointer;}
}