/*grote-eetshow.css*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600|Poiret+One|Damion');


html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;line-height:1.2em}

html,body{
font-family:'Open Sans',sans-serif;

/*font-size:52%;*/
font-size:52%; /* maakt 1 voor em */

margin:0 0 0 0;
background-size:auto 4000px;background-color:#555555
}

h1{
font-size:1.0em;
color:green;
font-style:italic;
margin-bottom:2px;
font-weight:normal;
text-shadow:1px 1px 1px #c0c0c0;
text-align:center;
}

/* --- Slider container --- */
#speedControl {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

/* --- Labels links en rechts --- */
.speedLabel {
    font-size: 0.8em;
    font-weight: 600;
    color: #fff;                /* helder wit */
    text-shadow: 0 0 4px #000;  /* zichtbaar op donkere/lichte beelden */
    letter-spacing: 0.5px;
}

/* --- Slider zelf --- */
#speedSlider {
    -webkit-appearance: none;
    width: 180px;
    height: 10px;
    border-radius: 5px;

    /* links langzaam (roodachtig) → rechts snel (blauw) */
    background: linear-gradient(90deg, #ff4c68, #4cb0ff);

    outline: none;
    cursor: pointer;
    margin: 0;
}

/* --- Slider "thumb" (bolletje) --- */
#speedSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #333;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

#speedSlider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}




/*eetshowMenuMobielHome */
.eetshowMenuMobielHome ul {
list-style-type:none;
margin:1px 0 0 25px;
padding:0 0;
width:89.55555%;
background-color:#c0c0c0; 
font-size:1.5em; 
text-align:center;
border-radius:7px 7px 15px 15px;
margin-bottom:-10px;
font-size:1.5em
}

.eetshowMenuMobielHome li a{display:block;color:#000 !important;margin-bottom:-10px;text-decoration:none;padding:5px 0}
.eetshowMenuMobielHome a:link,
.eetshowMenuMobielHome a:visited{color:#000;text-decoration:none;font-size:0.8em}
.eetshowMenuMobielHome a:hover,
.eetshowMenuMobielHome a:active{color:#000;text-decoration:none}


 /* eetshowNaarHome*/
.eetshowNaarHome{
    margin:1px 0 10px 25px;
    padding:8px 0 0 5px;
    width:89.44444%;
    background-color:#c0c0c0; 
    font-size:1.3em;
    text-align:center;
    border-radius:7px 7px 15px 15px;
    height:40px;
    margin-bottom:40px;
    display:block;
    cursor:pointer; /* cursor voor de hele div */
}
.eetshowNaarHome:link,
.eetshowNaarHome:visited {color:#000 !important;text-decoration:none;font-size:1.1em;}
.eetshowNaarHome:hover {color:red !important;}

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

/* eetshowHomeButton*/
.eetshowHomeButton{
position:absolute;
width:100%;
height:35px;
margin-top:-5px;
margin-left:0px;
background-color:#dcdcdc;
background-color:transparent;
border-radius:10px 0 0 0;
padding:2px;
text-align:center;
font-weight:bold;
}

/* eetshowBedrijfsnaam*/
.eetshowBedrijfsnaam{
width:100%;
height:248px;
margin-bottom:10px;
margin-right:-10px;
padding-top:30px;
font-size:2.4em;
font-style:italic;
font-weight:400;
text-align:center;
letter-spacing:2px;
text-shadow:2px 2px 1px #000;
color:#daa520;
border-radius:50px 0 0 0;
background: linear-gradient(to bottom,  rgba(255, 255, 255, 0.8) 0%,  rgba(150, 150, 150, 0.7) 50%,  rgba(85, 85, 85, 0.9) 90%);
}
/* MEDIA */
@media only screen and (max-width:507px){.eetshowBedrijfsnaam{padding-top:35px;margin-left:-16px;border-radius:30px 0 30px 0;height:75px;padding-right:10px;margin-right:-25px}}
@media only screen and (max-height:414px){.eetshowBedrijfsnaam{padding-top:35px;margin-left:-16px;border-radius:30px 0 30px 0;height:75px;padding-right:10px;margin-right:-25px}}

/* HEADER OVERLAY - link naar HOME */ 
.headerOverlay a{z-index:3;position:absolute;width:100%;height:248px} 
/* MEDIA */ 
@media only screen and (max-width:414px){.headerOverlay a{margin-top:-100px}} 

/*SLIDESHOW */
/* Flexslider */ 
.flexslider{position:relative} 

/* Flexslider Browser Resets */ 
.flexslider a:active{outline:none} 
.slides,.flex-control-nav,.flex-direction-nav{margin:0;padding:0} 

/* Flexslider Opmaak */ 
.flexslider{width:100%} 
.slides> li{display:none} 
.flexslider .slides img{width:100%;height:248px;border-radius:0 50px 0 40px} 

/* SLIDESHOW OVERLAY - link naar HOME */ 
.FlexSliderOverlay a{z-index:3;position:absolute;width:100%;height:248px} 
/* MEDIA */ 
@media only screen and (max-width:414px){.FlexSliderOverlay a{margin-top:-100px}} 

/* eetshowContainer */
.eetshowContainer {
margin-top:25px;
margin-left:25px;
margin-right:15px;
margin-bottom:15px;
font-size:1.3em;
display:grid;
grid-template-columns:repeat(4,1fr);
column-gap:0.5vw;
background-color:#444444; border:2px solid gold;border-radius:15px;padding-bottom:20px;box-shadow: -15px 15px 20px rgba(0,0,0,0.20)}

.eetshowContainer>div{}
.eetshowContainer img{width:77%;margin-bottom:25px;border-radius:50%;margin-left:37px;}
.eetshowContainer img:hover{animation:shake 0.2s}
.eetshowContainer p{margin:0 0 20px 10px;font-size:0.7em;color:#dcdcdc; text-align:center;height:60px;}
.eetshowContainer h1{margin:15px 0 15px 0;cursor:default;text-align: center;color:gold;text-shadow:0 0 0; font-family: "Times New Roman", Times, serif; font-size:1.1em}
/* MEDIA */
@media only screen and (max-width:1180px){.eetshowContainer {grid-template-columns:repeat(3,1fr)}}
@media only screen and (max-width:834px){.eetshowContainer {grid-template-columns:repeat(3,1fr)}}


@media only screen and (max-width:820px){.eetshowContainer {grid-template-columns:repeat(2,1fr)}}



@media only screen and (max-width:568px){.eetshowContainer {grid-template-columns:repeat(1,1fr)}
.eetshowContainer p{height:40px; margin-top:-20px}
.eetshowContainer h1{margin-top:4px}}

.eetshowContainer hr{
border:0;
height:1px;
margin-top:8px;
margin-bottom:6px;
margin-left:-10px;
width:100%;
background:linear-gradient(to left, rgba(204,204,204,9), transparent);
}




/* eetshowInfobalkTopHome */
.eetshowInfobalkTopHome {
height:35px;
width:100%;
margin-top:100px;
margin-bottom:20px;
padding:12px 0 0 45px;
font-size:1.0em;
color:#dcdcdc;
text-align:left;
border-radius:0 0 0  0;
background:linear-gradient(to left, rgba(255,255,255,0.4), rgba(85,85,85,0.9)60%);
background: transparent;
border-byottom:1px solid transparent;
}
/* MEDIA */
@media only screen and (max-width:1194px){.eetshowInfobalkTopHome { margin-top:100px}}
@media only screen and (max-width:507px){.eetshowInfobalkTopHome {margin-top:-80px}}
@media only screen and (max-height:414px){.eetshowInfobalkTopHome {margin-top:-80px}}
@media only screen and (max-width:428px){.eetshowInfobalkTopHome {margin-top:-80px}}
@media only screen and (max-width:414px){.eetshowInfobalkTopHome {margin-top:-80px}}

.eetshowInfobalkTopHome a{float:right;margin-right:30px;font-size:1.0em;margin-top:0}

.eetshowInfobalkTopHome a:link,
.eetshowInfobalkTopHome a:visited{color:#fff !important;text-decoration:none}
.eetshowInfobalkTopHome a:hover,
.eetshowInfobalkTopHome a:active{color:#dcdcdc !important;text-decoration:none}

/* eetShowTitelPagina*/
.eetShowTitel{
width:100%;
text-align:center;
}
.eetShowTitelPagina h1{
font-size:1.0em;
color:#dcdcdc;
margin-top:-30px;
margin-bottom:20px;
font-style:normal
}
/* MEDIA */
@media only screen and (min-width:1279px){.eetShowTitelPagina{ display:none}}


@media only screen and (max-width:1279px){.foetsie-1280{display:none !important}}



/* eetshowInfobalkTopPagina */
.eetshowInfobalkTopPagina {
height:35px;
width:100%;
margin-top:100px;
margin-bottom:20px;
padding:12px 0 0 45px;
font-size:1.0em;
color:#dcdcdc;
text-align:left;
border-radius:0 0 0  0;
background:linear-gradient(to left, rgba(255,255,255,0.4), rgba(85,85,85,0.9)60%);
background: transparent;
border-bottom:1px solid transparent;
}
/* MEDIA */
@media only screen and (max-width:1194px){.eetshowInfobalkTopPagina { display:none}}
@media only screen and (max-width:507px){.eetshowInfobalkTopPagina {margin-top:-80px}}
@media only screen and (max-height:414px){.eetshowInfobalkTopPagina {margin-top:-80px}}
@media only screen and (max-width:428px){.eetshowInfobalkTopPagina {margin-top:-80px}}
@media only screen and (max-width:414px){.eetshowInfobalkTopPagina {margin-top:-80px}}

.eetshowInfobalkTopPagina a{float:right;margin-right:30px;font-size:1.0em;margin-top:0}

.eetshowInfobalkTopPagina a:link,
.eetshowInfobalkTopPagina a:visited{color:#fff !important;text-decoration:none}
.eetshowInfobalkTopPagina a:hover,
.eetshowInfobalkTopPagina a:active{color:#dcdcdc !important;text-decoration:none}

/* eetshowTitel */
.eetshowTitel h1{width:auto;position:absolute;z-index:2;top:5px;color:gold;font-size:3.0em;margin-left:10px;font-style:italic;
text-shadow:1px 1px 1px #000;font-weight:normal;cursor:default;text-align:left;font-family: "Times New Roman", serif;
}

/* eetshowQR*/
.eetshowQR{
z-index:2;
position:relative;
float:right;
margin-right:25px;
top:25px;
width:90px;
height:90px;
background:url('../eetshow-qr/qr-eetlol.png') no-repeat
}
/* MEDIA */
@media only screen and (max-width:900px){.eetshowQR{display:none}}
@media only screen and (max-width:834px){.eetshowQR{display:none}}
@media only screen and (max-width:820px){.eetshowQR{display:none}}
@media only screen and (max-width:720px){.eetshowQR{display:none}}


/* eetshowContainerTop*/
.eetshowContainerTopHome{
width:100%;
height:148px;
background-color:transparent;
text-align:left; 
}
/* MEDIA */
@media only screen and (max-width:507px){.eetshowContainerTopHome{height:70px;}}
@media only screen and (max-height:414px){.eetshowContainerTopHome{height:70px}}





/* eetshowContainerTopHome NIEUW*/
.eetshowContainerTopHome{
width:100%;
height:148px;
background-color:transparent;
text-align:left; 
}

.eetshowContainerTopHome img {
    float: left;
    position: absolute;
    width: 100%;
    height: 248px;
    top: 0;
    object-fit: cover;
}





/* eetshowContainerTop*/
.eetshowContainerTop{
width:100%;
height:148px;
background-color:transparent;
text-align:left; 
}
/* MEDIA */
@media only screen and (max-width:507px){.eetshowContainerTop{height:70px;}}
@media only screen and (max-height:414px){.eetshowContainerTop{height:70px}}

/* --- SMALL DESKTOP (1025–1180px) --- NIEUW */
@media only screen and (max-width: 1194px) {
    .eetshowContainerTop {display: none;}
}



/* --- BASIS (MOBIEL) --- */
.eetshowContainerTop img {
    float: left;
    position: absolute;
    width: 100%;
    height: 248px;
    top: 0;
    object-fit: cover;
}

/* JOUW BESTAANDE MOBIELE REGELS (LATEN WE ZO) */
@media only screen and (max-width:507px){
    .eetshowContainerTop img{display:none}
}
@media only screen and (max-height:414px){
    .eetshowContainerTop img{display:none}
}

/* eetshowContainerLinks*/
.eetshowContainerLinks{
position:relative;
padding:0;
/*width:275px;*/
width:250px;
margin-left:0;
background-color:transparent
}
/* MEDIA */


@media only screen and (max-width:507px){.eetshowContainerLinks{width:100%}}
@media only screen and (max-height:414px){.eetshowContainerLinks{width:100%}}

/* eetshowContainer-2-koloms */
.eetshowContainer-2-koloms{
top:0;
left:0;
margin-left:0px;
font-size:4.0em;
display:grid;
grid-template-columns:max-content auto;
gap:0.0vw;
background-color:#555555;
}
.eetshowContainer-2-koloms p {text-align:center;padding-right:10px}

/* MEDIA */
@media only screen and (max-width:507px){.eetshowContainer-2-koloms{grid-template-columns:auto;margin-left:-7px;}}

.eetshowContainer-2-koloms a:link,
.eetshowContainer-2-koloms a:visited{color:#606060;text-decoration:none}
.eetshowContainer-2-koloms a:hover,
.eetshowContainer-2-koloms a:active{color:#7AA10F;text-decoration:none}





/* eetshowContainer-inhoud-show NIEUW*/
.eetshowContainer-inhoud-show{
top:0;
left:0;
margin-left:0px;
font-size:4.0em;
display:grid;
grid-template-columns:max-content auto;
gap:0.0vw;
background-color:#555555;
}
.eetshowContainer-inhoud-show p {text-align:center;padding-right:10px}

/* MEDIA */
/*@media only screen and (max-width:507px){.eetshowContainer-2-test{grid-template-columns:auto;margin-left:-7px;}}
*/
.eetshowContainer-inhoud-show a:link,
.eetshowContainer-inhoud-show a:visited{color:#606060;text-decoration:none}
.eetshowContainer-inhoud-show a:hover,
.eetshowContainer-inhoud-showt a:active{color:#7AA10F;text-decoration:none}




/* eetshowHOOFDCONTAINER*/
.eetshowHOOFDCONTAINER{max-width:1280px;margin:0 auto;}
/* MEDIA*/
@media only screen and (max-width:1366px){.eetshowHOOFDCONTAINER{max-width:1280px}}


/* SCROLL TO TOP*/
#eetshowScrollToTop{
position:fixed;
bottom:15px;
right:20px;
cursor:pointer;
display:flex;
align-itemcenter;
justify-content:center;
opacity: 0;
transition:opacity 0.3s ease-in-out;
z-index:3
}
#eetshowScrollToTop img{
width:36px;
height:36px;
}
.eetshowScrollToTopHidden{
display:none;
}

/* eethowInhoudLinks*/
.eetshowMenusubExtra ul{
list-style-type:none;
margin:0 0 0 28px;
padding:9px;
width:85%;
background-color:#444444; 
font-size:1.2em;
border-radius:15px;
border:2px solid gold; color:beige !important;
box-shadow: -20px 20px 45px rgba(0,0,0,0.35)
}

.eetshowMenusubExtra li a{
display:block;
color:#000;
padding:4px;
text-decoration:none
}

.eetshowMenusubExtra li a:hover{
background-color:#555555;
color:#dcdcdc;
border-radius:7px
}

.eetshowMenusubExtra p{margin:0 0 3px 0}
.eetshowMenusubExtra h1{ color:gold;text-shadow:0 0 0}

/* eethowInhoudLinks*/
.eethowInhoudLinks{
margin-top:50px;
position:relative;
top:-15px;
color:#000;
padding:0 0 0 0;
font-size:0.8em;
cursor:default;
background-color:transparent;
}
/* MEDIA */
@media only screen and (max-width:507px){.eethowInhoudLinks{display:none}}
@media only screen and (max-height:414px){.eethowInhoudLinks{display:none}}

.eethowInhoudLinks a:link,
.eethowInhoudLinks a:visited{color:#dcdcdc;text-decoration:none}
.eethowInhoudLinks a:hover,
.eethowInhoudLinks a:active{color:#000;text-decoration:none}

.eethowInhoudLinks img{
margin-top:20px;
width:100%;
margin-left:auto;
margin-right:auto;
display:block;
border-radius:10px;
}

.eethowInhoudLinks h1{margin-left:5px;margin-bottom:-10px;font-size:1.2em;color:gold;font-style:normal}

/* eetshowInfobalkBottom NIET IN GEBRUK*/
.eetshowInfobalkBottom{
height:36px;
width:100%;
margin:10px 0 0 0;
padding:6px 0 0 0;
font-size:1.3em;
color:#dcdcdc;
text-align:center;
border-radius:0 0 0 0;
background:linear-gradient(to left, rgba(255,255,255,0.4), rgba(85,85,85,0.9)60%);
}

/* SLIDESHOW EETSHOW */
.slideshow-container {
    width: auto;
    max-width: 1000px;
    text-align: center;
    margin-left:30px;
    padding-right:15px;
}
/* MEDIA */

/* Image wrapper met aspect ratio 16:9 */
.image-wrapper {
    width: 100%;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/9;;box-shadow: -15px 15px 20px rgba(0,0,0,0.20);
}
/*@media only screen and (max-width:1180px){.image-wrapper{width:50%}}
*/


/* Twee lagen voor crossfade */
#slide-image,
#slide-image-next {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1.2s ease;
    border-radius:15px; border:2px solid gold;
}

#slide-image { opacity: 1; z-index: 1; }
#slide-image-next { opacity: 0; z-index: 2; }

/* Titel en caption */
#slide-title {
    font-size: 1.6em;
    margin: 10px 0 5px 0;
    text-align: center; color:gold; padding-right:20px; height:50px; text-shadow:0 0 0; font-style:normal
}

.caption {
    font-size: 1.3em;
    margin: 10px 10px 40px 0; padding-right:10px; padding-left:10px; padding-top:8px; height:80px;
    text-align:center; width:985px; background-color:#444444; border-radius:15px;
    border:2px solid gold; color:#dcdcdc;box-shadow: -15px 15px 20px rgba(0,0,0,0.20);
    }
/* MEDIA */
@media only screen and (max-width:478px){.caption{width:100%}}


.page-link-container {height:30px;margin-bottom:20px; margin-top:-25px; position:relative;display:block}

.page-link {
    font-weight: bold;
    color: gold !important;
    text-decoration: none; font-size: 1.3em;
}

.controls button,
#groupSelect {
    padding: 6px 12px;
    margin: 0 0 0 0;
    font-size: 16px;
    cursor: pointer; background-color:#444444; color:#dcdcdc; border:1px solid gold;border-radius:10px;box-shadow: -10px 10px 15px rgba(0,0,0,0.15);
}


/* -----------------------------------------------------
   RESPONSIVE 
----------------------------------------------------- */

/* Mobiel klein – 0–480px */
@media only screen and (max-width: 480px) {

    .slideshow-container {
        width: 100%;
        margin: -10px auto;
        padding: 0 12px 0 20px;
        text-align: center;
    }

    .image-wrapper {
        box-shadow: -5px 5px 10px rgba(0,0,0,0.20);
        box-shadow: 0 0 0;
    }

    #slide-title {
        font-size: 1.1em;
        padding-right: 0;
        height: 40px;
    }

    .caption {
        width: 100%;
        font-size: 0.9em;
        height: 70px;
        padding: 4px 2px 6px 2px;
        margin: 10px 0 40px 0;
    }

    .controls button,
    #groupSelect {
        font-size: 14px;
        padding: 4px 8px;
    }
}

/* Mobiel groot – 481–767px */
@media only screen and (min-width: 481px) and (max-width: 767px) {

    .slideshow-container {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 0 10px;
    }

    .caption {
        width: 100%;
        font-size: 1.2em;
        padding: 12px;
        height: auto;
    }

    #slide-title {
        font-size: 1.5em;
    }
}

/* Tablet portrait – 768–1023px */
@media only screen and (min-width: 768px) and (max-width: 1023px) {

    .slideshow-container {
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding-right: 0;
    }

    .image-wrapper {
        box-shadow: -12px 12px 18px rgba(0,0,0,0.25);
    }

    #slide-title {
        font-size: 1.2em;
        padding-right: 0;
    }

    .caption {
        width: 100%;
        font-size: 1.3em;
        padding: 14px;
        height: auto;
    }

    .controls button,
    #groupSelect {
        font-size: 16px;
        padding: 6px 12px;
    }
}

/* Tablet landscape / kleine laptops – 1024–1280px */
@media only screen and (min-width: 1024px) and (max-width: 1280px) {

    .slideshow-container {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding-right: 0;
    }

    #slide-title {
        font-size: 1.3em;
        padding-right: 0; margin-bottom:-13px
    }

    .caption {
        width: 100%;
        font-size: 1.4em;
        padding: 10px;
        height: 85px;
    }

    .controls button,
    #groupSelect {
        font-size: 17px;
    }
}

/* Desktop groot – 1281px+ (originele stijl) */
@media only screen and (min-width: 1281px) {

    .slideshow-container {
        margin-left: 30px;
        max-width: 1000px;
        padding-right: 15px;
    }

    .caption {
        width: 985px;
    }
}