/*POPUP-RANDOM.CSS */
/*Het opstarten van deze POPUP gebeurt in de HOME pagina index.html */
/* De URL's worden opgehaald in javascript: /js/popup-random.js*/

/* Overlay die het iframe toont */
.overlay{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%, -50%);
width:600px; /* Overlay bedekt maar een klein deel van de pagina */
/*height:39.0%;*/ /* Overlay bedekt maar een klein deel van de pagina */
height:500px; /* Overlay bedekt maar een klein deel van de pagina */
background-color:rgba(0, 0, 0, 0.5); /* Semi-transparante achtergrond - Wordt overuled door iframe-container*/
display:none; /* Begin met verbergen */
justify-content:center;
align-items:center;
z-index:9999999; /* Overlay moet boven de website worden weergegeven */
border-radius:10px;
box-shadow:0 6px 10px rgba(0, 0, 0, 0.9);
}
/* MEDIA */
@media only screen and (max-width:1180px){.overlay{height:60.0%}}

.iframe-container{
position:relative;
width:100%;
height:100%;
background-color:#f0fff0; /* Overruled de bckgr-color in de overlay */
border-radius:10px;
display:flex;
flex-direction:column;
overflow:hidden;
padding:10px 5px 0 8px
}

iframe{
width:100%;
height:100%; /* Maak het iframe groter, de knop komt eronder */
border:none;
}

.close-btn{
position:absolute;
width:auto;
top:5px;
right:3px;
background-color:#f0fff0;
border:none;
padding:2px 6px;
font-size:5.0em;
cursor:pointer;
z-index:100;
color:red;
}

.close-btn:hover{
background-color:transparent;
color:green;
border-radius:10px
}


.go-to-recipe-btn{
background-color:#008000;
float:left;
color:#fff;
border:none;
padding:5px 0 5px 15px;
font-size:4.6em;
cursor:pointer;
margin-top:0px;
width:48%;
margin-left:-20px;
}

.scroll-meer{
background-color:#008000;
float:right;
color:yellow;
border:none;
padding:8px 0 5px 17.99999%;
font-size:4.0em;
width:52%;
cursor:default
}

.go-to-recipe-btn:hover{
background-color:#008000;
color:yellow !important}
}