div#container div#mediaBox {background:url('np8.jpg') center no-repeat; background-size:cover; box-shadow:inset 0px 0px 0px 1000px rgba(238,238,238,0.75);}
div#container div#mediaBox {background-color:#EEE; color:#555; font-size:13px; padding-top:15px; padding-bottom:15px; position:relative; text-align:left; transition:.5s}
div#container div#mediaBox img.logo {transition:1s; margin:12px 0 24px;}
div#container div#mediaBox div.categoryDrawer {background-color:rgba(0,0,0,0.1); border-radius:12px; padding:0px 24px; border:1.5px solid rgba(0,0,0,0.25);}
div#container div#mediaBox div.categoryDrawer label {background-color:transparent; border-radius:12px; cursor:pointer; margin-bottom:0; padding:12px 0; position:relative; width:100%;}
div#container div#mediaBox div.categoryDrawer label h4 {font-weight:bold; font-size:14px; margin:0;}
div#container div#mediaBox div.categoryDrawer label div.badgeBubble {position:absolute; top:50%; transform:translateY(-50%);}
div#container div#mediaBox div.categoryDrawer label div.badgeBubble {background-color:#FF3A32; color:#FFF; border-radius:50%; padding:10px;}
div#container div#mediaBox div.categoryDrawer label div.badgeBubble div.groupSize {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-weight:300;}
div#container div#mediaBox div.categoryDrawer ul {list-style:none; padding:0 0 12px 18px; /*padding-bottom:12px; padding-left:18px;*/ margin:0; transition:1s ease-in-out;}

div#container div#mediaBox div.categoryDrawer ul.mobileList {display:none;}
/*div#container div#mediaBox div.categoryDrawer ul.mobileList {height:0; overflow:hidden; opacity:0; box-sizing:border-box; transition:1s;}*/
/*div#container div#mediaBox div.categoryDrawer ul.mobileList {padding-bottom:0; height:0; box-sizing:border-box; overflow:hidden;}*/
/*div#container div#mediaBox div.categoryDrawer ul.mobileList li {position:relative; top:-100px; transition:1s ease-in-out;}*/
div#container div#mediaBox div.categoryDrawer.open ul.mobileList {display:block;}
/*div#container div#mediaBox div.categoryDrawer.open ul.mobileList {height:auto; overflow:auto; opacity:1;}*/
/*div#container div#mediaBox div.categoryDrawer.open ul.mobileList {padding-bottom:12px;}*/
/*div#container div#mediaBox div.categoryDrawer.open ul.mobileList li {top:0;}*/

div#container div#mediaBox div.categoryDrawer li {margin:0 0 4px;}
div#container div#mediaBox div.categoryDrawer li a {color:#777;}
div#container div#mediaBox div.categoryDrawer li a:hover {color:#555; text-decoration:underline;}
@media screen and (max-width:575px) { /* mobile(xs) */
	div#container div#mediaBox div.categoryDrawer {margin:5px 0; transition:.5s}
	div#container div#mediaBox div.categoryDrawer label:before {font-size:18px; font-weight:500; position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(90deg); transition:.5s; content:'+';}
	/*div#container div#mediaBox div.categoryDrawer.open label:before {transform:translateY(-50%) rotate(45deg);}*/
	div#container div#mediaBox div.categoryDrawer.open label:before {content:'\2212'; transform:translateY(-50%);}
	div#container div#mediaBox div.categoryDrawer label div.badgeBubble {right:24px;}
	div#container div#mediaBox.dark {background-color:#3D3D3D; box-shadow:inset 0px 0px 0px 1000px rgba(61,61,61,0.75);}
	div#container div#mediaBox.dark div.categoryDrawer {background-color:rgba(0,0,0,0.21);}
}
@media screen and (min-width:576px) { /* mobile(sm), tablet(md), desktop(lg,xl) */
	div#container div#mediaBox {background-attachment:fixed;}
	div#container div#mediaBox div.categoryDrawer {margin-bottom:30px; box-shadow:0 4px 2px 0 rgba(0,0,0,0.15), 0 4px 4px 0 rgba(0,0,0,0.12);}
	div#container div#mediaBox div.categoryDrawer label:before {display:none;}
	div#container div#mediaBox div.categoryDrawer label div.badgeBubble {right:-12px;}
	div#container div#mediaBox.dark {background-color:#333; box-shadow:inset 0px 0px 0px 1000px rgba(51,51,51,0.75);}
	div#container div#mediaBox.dark div.categoryDrawer {border:1.5px solid rgba(255,255,255,0.1); }
}
/*div#container div#mediaBox div.categoryDrawer {margin-bottom:24px;}*/

div#container div#mediaBox div.lightSwitch {/*position:absolute; bottom:12px; left:50%; transform:translateX(-50%);*/ cursor:pointer; padding:8px 6px; font-size:24px; color:rgba(30,144,255,0.75); text-align:center;}
div#container div#mediaBox div.lightSwitch .fa-toggle-on {display:block;}
div#container div#mediaBox div.lightSwitch .fa-toggle-off {display:none;}

div#container div#mediaBox.dark {color:#999;}
div#container div#mediaBox.dark div.lightSwitch {color:rgba(30,144,255,0.5);}
div#container div#mediaBox.dark div.lightSwitch .fa-toggle-on {display:none;}
div#container div#mediaBox.dark div.lightSwitch .fa-toggle-off {display:block;}

div#container div#mediaBox div.viewLibrary {border:2px solid rgb(52,58,64); border-radius:12px; color:rgb(52,58,64); background:rgba(255,255,255,0.5); padding:16px 80px; margin:24px auto 24px; display:inline-block; max-width:100%; transition:.5s;}
div#container div#mediaBox div.viewLibrary:hover {background:rgb(52,58,64); color:#EEE;}