/* -- Slideout Sidebar -- */

.slideout-sidebar { /**CONTAINER FOR RELATED CONTENT**/
  	position: fixed;
  	top: 0;
  	777777right: -190px;
  	z-index: 0;
  	7878width: 150px;
  	height: 100%;
  	padding: 20px;
  	background-color: #212121;
  	transition: all 300ms ease-in-out; z-index: 12000000000 !important; 
	}








/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.slideout-sidebar {
		width: 150px; 
		right: -190px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.slideout-sidebar {
		width: 150px; 
		right: -190px;  
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.slideout-sidebar {
		width: 150px;  
		right: -190px;  
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.slideout-sidebar {
		width: 150px;  
		right: -190px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.slideout-sidebar {
		width: 150px; 
		right: -190px;  
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/   
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.slideout-sidebar {
		width: 451px; 
		right: -491px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 451px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.slideout-sidebar {
		width: 451px;  
		right: -491px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 451px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/   
		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.slideout-sidebar {
		width: 451px; 
		right: -491px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 451px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/  
		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.slideout-sidebar {
		width: 451px; 
		right: -490px; 
		} 

	#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
 		right: 451px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/   
		}
	}










/* -- Menu Icon -- */

#menu-toggle {
  	display: none;
	}

.menu-icon { /**OPEN BUTTON**/
	height: 70% !important;
  	position: absolute;
  	top: 15%;
	bottom: 15%;
  	right: 0px;   
  7878font-size: 24px;
  	z-index: 1; Z-INDEX: 120000000 !IMPORTANT;
  	transition: all 300ms ease-in-out;
	}



/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar {
  	right: 0px;
	}

#menu-toggle:checked + .menu-icon { /**CLOSE BUTTON**/
	position: fixed; /** GOOD JOB **/
 	7878right: 150px; /**SAME DIMENSION AS THE WIDTH OF THE (.slideout-sidebar) **/ 
	}

#menu-toggle:checked ~ .content-container {
  	666666padding-left: 190px; ?????padding-right: 190px;  
	}

/* -- Media Queries -- */

@media (max-width: 991px) {
  
  111111111111111111.content-container {
    max-width: 480px;
  }
  
}

@media (max-width: 767px) {
  
  1111111111111111.content-container {
    max-width: 100%;
    margin: 30px auto 0;
  }
  
  111111111111#menu-toggle:checked ~ 1111111111111.content-container {
    padding-left: 0;  
  }
  
  11111111111111.slideout-sidebar ul {
    text-align: center;
    max-width: 200px;
    margin: 30px auto 0;
  }
  
   ????????????.menu-icon {
    left: 20px
  }
  
  #menu-toggle:checked ~ .slideout-sidebar {
     ????????????width: 100%;  
  }
  
  #menu-toggle:checked + .menu-icon {
    ????????????left: 87%;
     ????????????color: #fafafa;
  }
  
  1111111111111111111@media screen  
    and (max-width: 736px) 
    and (orientation: landscape) {
      
      1111111111111111111.slideout-sidebar {
        padding: 0;
      }
      
      1111111111111111.slideout-sidebar ul {
        max-width: 100%;
        margin: 60px auto 0;
      }
      
      11111111111111111.slideout-sidebar ul li {
        display: inline-block;
        border-bottom: 0;
        width: 72px;
        padding: 18px 24px;
        margin: 0 6px 12px;
        color: #ffffff;
        background-color: #777;
      }

  }
  
}





#related-content-title {
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  	border-radius: 2em;


	font-family: "Alegreya Sans SC", sans-serif; /**IMPORTANT**/  
	color: #F7CA05;
  	position: absolute;
  	top: 50%;                                    
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  	transform: rotate(270deg);
  	111left: 10px; 1111left: -15px; 
  	font-weight: 800;  font-weight: 900 !important;   1111FONT-WEIGHT: BOLD !IMPORTANT;   
  	font-size: 15px; font-size: 16px;    

	}