style.css

/*
Theme Name: EdTech Hub Database
Text Domain: edtechhubdb
Version: 2.3
Description: Theme for the Ed Tech Hub MVP Database
Author: Public Digital
Author URI: https://public.digital
*/

body { font-family: 'Montserrat', sans-serif; }
h1, h2, h3, h4 { font-weight: bold; }

header { padding: 20px 0 10px 0;  margin-bottom: 20px; border-bottom: 1px solid #f6f5f1 }

header div.brand {
  min-height: 80px;
}
header div.brand .brand-name, footer div.brand .brand-name {
  font-weight: bold;
  font-size: 2rem;
  margin-bottom: 0px;
}

header .site-name { font-size: 1.9rem; font-weight: bold; margin: 0; padding: 10px 0; color: #ff5c00;}
header .site-name a { color: #ff5c00; }
header .site-name a:hover { border-bottom: #ff5c00 1px solid; }

header nav .menu-item { display: block; padding: .5rem;}
header nav .menu-item a { padding: .5rem;font-weight: 300; font-size: 1em; cursor: pointer}
header nav div#navbarNav { justify-content: flex-end; }
header nav ul { margin-right: 20px; }

header .search_submit {
  font-size: 16px;
  font-weight: 700 !important;
  background : #fff;
  border: none;
  cursor: pointer;
  outline: none
}

header .search_submit:before {
  font-size: 1.7em;
  margin-top: -2px;
  color: #ff5c00;
  font-weight: 400 !important;
  line-height: inherit !important;
  font-weight: inherit;
  font-style: inherit;
  display: inline-block;
}
header .search_submit:before:hover {
  color: #000;
}

footer { padding: 20px 0; margin-top: 20px; }
footer .container { padding: 1em; background: #F8F8F882; }
footer .container h2 { font-size: 1.3em; }
footer .container p { font-size: 0.9em;}

footer div.brand .brand-name { font-size: 28px; color: #111111; margin-top: 35px; }
footer div.supported-by ul { list-style: none; margin: 0; padding: 0; text-align: right }
footer div.supported-by ul li { display: inline-block; margin-right: 10px;}
footer div.supported-by ul li img.ukaid { width: 120px; height: auto;}
footer div.supported-by ul li img.wb { width: 257px; height: auto;}

footer div.brand-row { margin: 50px 10px;}

footer .disclaimer {
  font-size: 10px;
  text-align: left;
  color: #777777;
  margin-top: 25px;
}

footer .copyright {
  margin-top: 55px;
  text-align: center;
  color: #777777;
  font-size: 1.1em;
  font-weight: 300;
}

main { min-height: 250px;}
main h1 { font-size: 2em; margin: 0 0 1.2em 0;}
main h2 { font-size: 1.8em; margin: 0 0 1.2em 0;}
main h1:before, main h2:before {
  display: block;
  height: 4px;
  width: 70px;
  content: "   ";
  margin-bottom: 15px;
}
main h2:before { background: #ededec; }

main section { padding: 0 0 20px 0; margin-bottom: 40px; }
main header { border: 0; }

main section.response-filters .card { margin: 20px 0; }
main section.response-filters .card ul { margin: 0; padding: 0; list-style: none; }
main section.response-filters .card ul li.active a { background: #ededec;}
main section.response-filters .card ul li a { display: block; color: #000; border-radius: 5px; padding: 3px;}
main section.response-filters .card ul li a:hover { background: #ff5c00;}

main section.response-filters form>div>ul { margin: 0; padding: 0; list-style: none; }
main section.response-filters form>div>ul li { border: 1px solid rgba(0,0,0,.125); padding: 0; margin: 0 0 1em 0; display: block;}
main section.response-filters form>div>ul li h4 { padding: .75rem 1.25rem; margin: 0; background-color: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.125);  }
main section.response-filters form>div>ul li ul { margin: 0; padding: .75rem 1.25rem; list-style; none; }
main section.response-filters form>div>ul li>ul li { border: 0; padding: 3px; margin: 0; display: block; }
main section.response-filters form>div>ul li>ul li.current-cat { background: #ededec; }

main section.response-list .response-list-current-filters { font-size: 0.9em; border: 1px solid rgba(0,0,0,.125); padding: 5px; margin-bottom: 1em; }
main section.response-list .response-list-current-filters p { margin: 0; font-weight: bold;}
main section.response-list .response-list-current-filters ul { margin: 0; padding: 0; list-style: none; }
main section.response-list .response-list-current-filters ul li { padding: 3px 0;}
main section.response-list .response-list-current-filters ul li span { background: #ededec; padding: 3px 5px; }
main section.response-list .response-list-current-filters ul li span a { background: #ff5c00; padding: 0 5px; border-radius: 3px; font-weight: bold; color: #fff;}
main section.response-list .response-list-current-filters ul li span a:hover { background: #fff; color: #ff5c00;}

main section.response-list article { padding: 1em 0; border-bottom: #efefef 1px solid; }
main section.response-list article header { padding: 0;}
main section.response-list article h3 { font-size:  1.6em; margin: 0;}

main section.response-item article { padding: 1em 0; border-bottom: #efefef 1px solid; }
main section.response-item article header { padding: 0;}
main section.response-item article header h1 span { color: #ff5c00; }
main section.response-item article .response-content { padding-bottom: 1em; padding-right: 300px}
main section.response-item article .response-meta { padding-top: 1em; }
main section.response-item article .response-meta li.code-type { margin-top: 1.5em; }

main .breadcrumbs { text-align: right; margin-top: -20px;}
main .breadcrumbs ul { list-style: none; margin: 0; padding: 0; }
main .breadcrumbs ul li { display: inline-block; }
main .breadcrumbs ul li a { color: #a7a7a7;}
main .breadcrumbs ul li a:after { content: " //"}


@media (max-width: 993px) {
  header .site-name { font-size: 1.5rem;}
  header nav { margin-top: 10px;}

  main h2 { font-size: 1.5rem;}
  main .response-meta-content  { padding-bottom: 20px;}
  main section.response-item article .response-content { padding-right: 0; }
}

a {
    color: #ff5c00;
}
a:hover, a:active, a:focus {
    color: #1f1e2c;
    text-decoration: none;
}


/*  */
li.menu-item-has-children > a:after {
	content: ' \e828 ';
	font-family: "fontello";
}

ul.navbar-nav li ul.sub-menu {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	margin-top: 0.5rem;
	text-align: justify;
	display: none;
	background: #000;
	padding: 15px;
	z-index: 1;
}

ul.navbar-nav li a {
	color: #777;
}

ul.navbar-nav li a:hover {
	color: #ff5c00;
}

ul.navbar-nav li ul.sub-menu a {
	text-decoration: none;
	color: #fff;
}

ul.navbar-nav li ul.sub-menu a:hover {
	color: #ff5c00;
}

ul.navbar-nav li ul.sub-menu a :hover {
	color: #ff5c00;
}

ul.navbar-nav li ul.sub-menu li.active a {
	color: #ff5c00;
}

ul.navbar-nav li:hover > ul,
ul.navbar-nav li ul:hover {
	visibility: visible;
	opacity: 1;
	display: block;
}

ul.navbar-nav li ul li {
	list-style: none;
	clear: both;
	width: 100%;
	padding: 5px;
}


/* The overlay effect with black background */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background: #fff;
}

/* The content */
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* Close button */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 30px;
  cursor: pointer;
  color: #777;
}

.overlay .closebtn:hover {
  color: #ccc;
}

/* Style the search field */
.overlay input[type=text] {
  padding: 15px;
  font-size: 2rem;
  border: none;
  float: left;
  width: 50%;
  margin-left: 25%;
  background: white;
  border-bottom: 1px solid #000;
  outline: none;
}