#osunlogo { width: 200px; height: 100px; background: none; margin:0 0 0 20px; padding: 0; top: 0; left: 0;}
#osunlogo a span {display: block; background-image: url(https://opensocietyuniversitynetwork.org/media/osun-assets/user-assets/images/osun-logo-circle-light.png); width: 200px; height: 98px; background-size: contain; background-repeat: no-repeat; margin: 1px 0;}
#home #supershell #osunlogo a span {background-image: url(https://opensocietyuniversitynetwork.org/media/osun-assets/user-assets/images/osun-logo-circle-dark.png); }
#home #supershell header.fixed.scrolled > .container > #osunlogo a span {background-image: url(https://opensocietyuniversitynetwork.org/media/osun-assets/user-assets/images/osun-logo-circle-light.png) !important;}

#home #supershell .header-link { color: white !important}
.header-link {color: black !important; font-size: 25px; line-height: 1.3em; margin: 20px 0 0 0; padding: 0;}
.header-link:hover {text-decoration: underline;}

/*hamburger icon*/
.input-toggler { display: none;}
.menu-toggler {width:50px; height: 70px; z-index: 100; display: flex; justify-content:center; align-items:center; flex-direction:column; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; background: transparent; border: none;}
.menu-toggler:hover {cursor: pointer;}
.menu-toggler-line {width: 37px; height:3px; background: black; margin: 0; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#home #supershell .menu-toggler-line {background: white;}
#home #supershell header.fixed.scrolled > .container > button > .menu-toggler-line {background: black;}
.menu-toggler-line:nth-child(1) {top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.menu-toggler-line:nth-child(2) {top: 7px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.menu-toggler-line:nth-child(3) {top: 14px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center;}
.menu-toggler.clicked .menu-toggler-line:nth-child(1) {-webkit-transform: rotate(45deg); background: black !important; -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -3px; left: 8px;}
.menu-toggler.clicked .menu-toggler-line:nth-child(2) {width: 0%; opacity: 0;}
.menu-toggler.clicked .menu-toggler-line:nth-child(3) {-webkit-transform: rotate(-45deg); background: black !important; -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 16px; left: 8px;}

/*topmenu*/
.topmenu {width: 70%; margin: 0; padding: 0; display: flex; height: auto; justify-content: space-around;}
.topmenu-link, .topmenu-link a {color: black !important; font-weight: bold; height: 30px; width: auto; margin: auto 0; padding: 0; font-size: 17px; line-height: 1.1em; }
#home #supershell .topmenu-link, #home #supershell .topmenu-link a {color: white !important;}
#home #supershell .topmenu.scrolled > .topmenu-link, #home #supershell .topmenu.scrolled > .topmenu-link a  {color: black !important;}

.topmenu-mobile {display: none; }

/*sidebar*/

.sidebar {position: absolute; top: 0; right: 0; height: 100vh; width: 300px; background:#fff; opacity: 0.5; display: flex; justify-content: center; align-items: center; transform: translateX(100%); transition: all .40s ease-out;}
.sidebar.open {transform: translateX(0%); opacity: 1;}

.menu { width: 100%; list-style: none; margin: 125px 0 0 0; padding: 0; flex-direction: column; height: 100%; display: none;}
.sidebar.open .menu {display: flex;}
.menu li{text-align: left; list-style: none; margin-bottom: 5px; }
.menu-link {list-style: none; color: #d4052c !important; font-size: 20px; line-height: 1.3em; -webkit-transition: all .25s ease-out; transition: all .25s ease-out; margin: 0 0 0 50px; font-weight: bold;}
.menu-link:hover, .menu-link:focus, .menu-link:active {text-decoration: underline; text-underline-offset: 5px;}

.has-submenu { display: flex; flex-direction: column; }
.submenu {margin: 0 0 0 70px; padding: 0; display: flex; flex-direction: column; flex-wrap: wrap;}
.submenu-container.active { display: block; }
.submenu-link { font-size: 15px; color: #000 !important; font-weight: 500; width: auto;}
.submenu-link a {color: #000 !important;}
.submenu-link:hover { cursor: pointer; }

.search-link-text {display: none;}
.search {margin-top: 25px;}
.search-box { width: fit-content; height: fit-content; position: relative; margin: 0 0 0 50px; }
.input-search { height: 50px; width: 50px; border-style: none; padding: 10px; font-size: 18px; outline: none; border-radius: 25px; transition: all .5s ease-in-out; background-color: #fff; padding-right: 40px; color:#000; font-family: "Wix Madefor Display", sans-serif; box-sizing: border-box;}
.input-search::placeholder{ color: white; font-family: "Wix Madefor Display", sans-serif; font-size: 18px; font-weight: 100; }
.btn-search{ width: 50px; height: 50px; border: none; font-size: 20px; font-weight: bold; outline: none; cursor: pointer; position: absolute; right: 0px; color:#000 ; background-color:transparent; }
.btn-search:focus ~ .input-search{ width: 200px; border-radius: 0px; background-color: white; border-bottom:2px solid black; transition: width 500ms ease-out; }
.btn-search:focus, .input-search:focus .fa-search { color: black;}
.input-search:focus { color: black; width: 200px; border-radius: 0px; background-color: white; border-bottom:2px solid black; transition: all 500ms ease-out; }
.btn-search:focus ~ .input-search::placeholder { color: black; }


@media only screen and (max-width: 1000px) {
	.topmenu, .submenu, .menu-link {display: none;}
	.menu-toggler {left: auto; right: 15px; position: relative; float: right;}
	
	.topmenu-mobile { display: flex; flex-direction: column; margin: 0; padding:20px 0 0 0;}
	.topmenu-mobile-link {margin: 0 !important; padding: 10px 0;}
	.topmenu-mobile-link a, 
	.topmenu-mobile-link a:visited, 
	.topmenu-mobile-link a:active { font-weight: normal; font-size: 23px; line-height: 1.3em; color: black;}
	
	.sidebar {width: 100%; overflow: scroll;}
	
	.menu {margin-top: 160px;}
	.menu li, .menu-link {margin: 0 20px;}
	
	.search-box {margin-left: 5px}
	
	.has-submenu .menu-link {margin-top: 10px;}
	
	
	
	#osunlogo.open a {background-image: url(https://opensocietyuniversitynetwork.org/media/osun-assets/user-assets/images/osun-logo-circle-light.png) !important;}
	
}

@media screen and (max-width: 650px) {
	#home #supershell #osunlogo a span {background-image: url(https://opensocietyuniversitynetwork.org/media/osun-assets/user-assets/images/osun-logo-circle-light.png) !important;}
	#home #supershell .menu-toggler-line {background-color: black; }
}