/* -- Slideout Sidebar -- */
.slideout-sidebar {
 position: fixed;
 top: 0;
 left: -1590px;
 z-index: 9999;
 width: 550px;
 height: 99%;
 padding: 5px;
 background-color: #fff;
 transition: all 300ms ease-in-out;
 transition-delay: .5s; 
overflow-x: none;
overflow-y: auto;
 user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
}
.slideout-sidebar img {
 width: 98%;
 margin-bottom: 10px;
 border: 5px solid #ffffff;
 box-shadow: 0 0.5px 3px rgb(0 0 0 / 95%);
 border-radius: 5px; 
}
 @media all and (max-width:834px){.slideout-sidebar img {
 width: 97%; 
 }
}
.slideout-sidebar iframe {
 width: 98%;
 margin-bottom: 10px;
 border: 5px solid #ffffff;
 box-shadow: 0 0.5px 3px rgb(0 0 0 / 95%);
 border-radius: 5px;
 height: 54%;
}
 @media all and (max-width:834px){.slideout-sidebar iframe {
 width: 97%; 
 }
}  
.slideout-sidebar h3 {
 color: #ffffff!Important;
 position: absolute!Important;
 text-shadow: 0px 0px 4px black!Important;
 margin: 10px 10px 10px 10px!Important;
 font-size: 18px!Important;
 border-left: none!Important;
 font-weight: bold!Important; 
}
#menu-toggle {
 display: none;
}
.menu-icon {
 opacity: 0;
 position: fixed;
 top: 45%;
 transform: translate(-50%, 0);
 left: -130px;
 z-index: 9999;
 transition: all 300ms ease-in-out;
 background: url(/img/photo_ico.png) 100% no-repeat;
 background-size: 50px;
 padding: 25px;
}
.slideout-sidebar-shade {
 position: absolute;
 top: 0;
 left: 0;
 overflow: hidden;
 display: none;
 z-index: 21011;
 background: #000;
} 
.gall-icon {
 position: relative;
 margin: 0 45% 0 45%;
 z-index: 999;
 padding: 25px;
 background: url(/img/open_all_gallery.png) 100% no-repeat;
 background-size: 50px;
 float: left;
} 
/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar-shade {
 background: black;
 opacity: 0.5;
 display: block;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 z-index: 9999;
 position: fixed;
} 
#menu-toggle:checked ~ .slideout-sidebar {
 left: 0px;
}
#menu-toggle:checked + .menu-icon {
 left: 580px;
 transform: rotate(180deg);
 transition-delay: .5s; 
 background: url(/img/close_photo_ico.png) 100% no-repeat;
 background-size: 50px;
 padding: 25px;
 z-index: 99999;
 opacity:1!Important; 
}
@media (max-width: 767px) {
 
 .menu-icon {
 left: -10%;
 top: 18px;
 opacity: 0;
 }
 
 #menu-toggle:checked ~ .slideout-sidebar {
 width: 97%;
 }
 
 #menu-toggle:checked + .menu-icon {
 left: 85%;
 }
 }
}