/*
 Theme Name:     ClioVis
 Theme URI:      https://cliovis.org
 Description:    Theme for ClioVis website, uses Bootstrap 4 Starter
 Author:         Jonathan Seefeldt
 Template:       wp-bootstrap-starter
 Version:        1.4
*/


/****************************************
*** Theme customization starts below ***
*****************************************/

/* ClioVis Website Color Scheme */
:root {	
	--cliovis-blue: #396aba;
	--cliovis-darkblue: #24457a;
	--cliovis-lightblue: #427ad6;
	--cliovis-yellow:#b48e48;
	--cliovis-yellow-dark:#7c6231;
	--cliovis-offwhite:#fafcfe;
	--cliovis-grey-darker:#606977;
	--cliovis-grey-dark:#6f7989;
	--cliovis-grey-light:#9299A5;
	--cliovis-grey-extralight:#cbd4e4;
}

/* Customize Buttons, Tabs, Pills, and other nav elements */
.btn-primary, .wp-block-button a, .nav-pills .nav-item a.active {
	color:var(--cliovis-offwhite) !important;
	background-color: var(--cliovis-blue);
	border-color: var(--cliovis-blue);
	border-radius:.3rem;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.btn-primary:hover, .wp-block-button a:hover, .is-style-outline a:hover {
	background-color:var(--cliovis-lightblue);
	text-decoration: none;
	color:white !important;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
}

.btn-secondary, .wp-block-button a, .nav-pills .nav-item a.active {
	color:var(--cliovis-offwhite) !important;
	background-color: var(--cliovis-grey-darker);
	border-color: var(--cliovis-grey-darker);
	border-radius:.3rem;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

.btn-secondary:hover, .wp-block-button a:hover, .is-style-outline a:hover {
	background-color:var(--cliovis-grey-dark);
	text-decoration: none;
	color:white !important;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.9);
}

.is-style-outline a {
	color:var(--cliovis-blue) !important;
}

.nav-pills .nav-item a {
	color:var(--cliovis-blue);
}

.nav-pills {
	margin-top: 2rem;
}

.site {
	background:#fbf9f7;
 	background:-webkit-gradient(linear,left top,right top,color-stop(46%,#fbf9f7),to(rgba(251,249,247,.575)));
 	background:linear-gradient(90deg,#fbf9f7 46%,rgba(251,249,247,.575));
}

.custom-background {
	position:absolute;
 	width:100%;
 	height:100%;
 	background-position: bottom right !important;
	 background-attachment:fixed !important;
 	background-size:95% !important;
 	background-repeat:no-repeat !important;
}

.cliovis-player {
	padding: 0 0 20px 0;
	max-width: 640px;
}

.cliovis-player .background-tint .tint {
	background-color: var(--cliovis-blue) !important;
}

a {
	transition-delay: 30ms;
}

/* Navbar Customizations */
body #masthead {
	background:#fbf9f7;
 	background:-webkit-gradient(linear,left top,right top,color-stop(46%,#fbf9f7),to(rgba(251,249,247,.575)));
 	background:linear-gradient(90deg,#fbf9f7 46%,rgba(251,249,247,.575))
}

#masthead #main-nav li a {
	color:var(--cliovis-darkblue);
	font-size:0.95rem;
	font-weight:600;
}

#masthead #main-nav li a:hover {
	color:var(--cliovis-blue);
}

#masthead .navbar-nav > li:hover > .dropdown-menu {
    display: block;
    top: 30px;
}
#masthead .navbar-nav li > .dropdown-menu li:hover .dropdown-menu {
    left: 190px;
    top: 0;
    width: 200px !important;
    display: block;
}

#masthead ul.dropdown-menu {
	background:#fbf9f7;
 	background:-webkit-gradient(linear,left top,right top,color-stop(46%,#fbf9f7),to(rgba(251,249,247,.575)));
 	min-width:20rem !important;
}

#masthead .dropdown-toggle::after {
    display:none !important;
}

#masthead #contactus {
	color:var(--cliovis-blue);
	font-weight:600;
	font-size:0.875rem
	margin-right:1rem;
}

#masthead .btn-primary {
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}

#masthead .btn-secondary {
	-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}
/* Banner Customizations */
/*#page #page-sub-header {
		background-image:
		    linear-gradient(
		      rgba(255, 0, 0, 0.45), 
		      rgba(255, 0, 0, 0.45)
		    )
 	}*/

#page-sub-header {
	overflow: hidden;
}

#primary {
	background-color: #F8F9FA; 
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2); 
	margin-top:15px; 
	padding-top: 15px;
}

hr.wp-block-separator {
	box-shadow: 0px 0px 1px rgba(0,0,0,0.2);
}

#page #page-sub-header h1, #page #page-sub-header p, .home a.page-scroller {
	color:var(--cliovis-offwhite);
}

.home #homepage-scroller {
	z-index: 1;
    position: absolute;
	bottom: 10%;
	left: 50%;
}

.home a.page-scroller {
	margin-top: 1rem;
}

 .home a.page-scroller:hover {
 	text-shadow: 0px 0px 10px #FFF !important;
 }

/* Homepage Customizations */
.container{
	padding-left: 0 !important;
	padding-right: 0 !important;
}

#home-container video {
  background: url('https://static.cliovis.org/2020/06/videohomeposter.jpg') black no-repeat center center scroll;
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

#home-container .home-banner-container {
  position: relative;
  z-index: 2;
}

#home-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

@media (pointer: coarse) and (hover: none) {
  #home-container {
    background: url('https://static.cliovis.org/2020/02/cliovis-banner.jpg') black no-repeat center center scroll;
  }
  #home-container video {
    display: none;
  }
}


.home #page #page-sub-header h1 {
	text-shadow: 0px 0px 10px #000 !important;
}

.home #page #page-sub-header p {
	text-shadow: 2px 2px 5px #000;
	font-size: 1.3rem;
	letter-spacing: .1rem;
	font-weight: 500;
	background: rgb(0,0,25, .7);
	background: radial-gradient(circle, rgba(0,0,25,1) 20%, rgba(0,0,25,0) 100%);
}

.home #page-sub-header {
	height: 100vh;

}

.home #primary h1 {display: none;}

:target::before {
  content: "";
  display: block;
  height: 5rem; /* fixed header height*/
  margin: -5px 0 0; /* negative fixed header height */
}

.home #page #content.site-content {
	padding-top: 4rem !important;
}

.home #helpstudents h2 {
	color:var(--cliovis-blue);
}

.home .whatcliovisdoes {
	margin-top:2rem;
}

.home .whatcliovisdoes h3 {
	color:var(--cliovis-yellow-dark);
	text-transform: uppercase;
}

.home #helpstudents p {
	text-align: center;
	font-weight: bold;
}

.home #whatcliovisdoes {
	margin-top: 1rem;
}

.home .entry-content {
	margin-top:0;
}

.home video {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	margin-bottom: 1rem;
}

.home .home-help-headers-btn a {
	margin: 2rem 0 4rem 0;
}

.home .home-help-headers-btn a:hover {
	background-color:var(--cliovis-lightblue)!important;
	border-color: var(--cliovis-lightblue)!important;
	text-decoration: none;
}

.home .wp-block-media-text {
	margin:3rem 0;
}

.home .wp-block-media-text__media {
	padding: 0 1rem !important;
}

.home #librarians p {
	margin-top:2rem;
	margin-bottom:2rem;
}

.home #librarians figcaption {
	text-align:center;
	color:var(--cliovis-grey-darker);
}

.home .get-started-buttons .wp-block-button, .home .get-started-buttons .wp-block-button a {
	width:100%;
}
.home .get-started-buttons, .home .fund-button {
	margin: 3em 0;
}


/*
.home .get-started-buttons .wp-block-button, a:hover {
	background-color: var(--cliovis-lightblue) !important;
}*/

/*Non-Homepage Customizations*/

:not(.home) #page h2 {
	color:var(--cliovis-blue);
}
#page #content #main header {
	display: none !important;
}

#page #content.site-content {
	padding-top: 2rem;
}

:not(.home) #page #content.site-content a {
	color:var(--cliovis-darkblue);
}

#page #content.site-content img, #page #content.site-content video {
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
}

#page #content .sidemenu {
	position: -webkit-sticky;
	position: sticky;
	top: 5rem;
}

#page #content .wp-block-quote {
	border-bottom: 1px solid var(--cliovis-grey-extralight);
	padding-bottom:2rem; 
}


#page #content .wp-block-quote p {
	margin-bottom:0;
}

#page #content .wp-block-quote p:before
{
content: '\201C';
}

#page #content .wp-block-quote p:after
{
content: '\201D';
}



#page #content .wp-block-quote cite {
	float: right;
	color: var(--cliovis-grey-darker);
	margin:0 .4rem;
}

/*ClioVis Team Page*/

#post-250 .wp-block-media-text__content {
	padding:0 3%;
}

#post-250 .wp-block-media-text__content h2 {
	padding-bottom:0;
	margin-bottom:0;
	margin-top:1rem;
}

#post-250 .wp-block-media-text__content h2 {
	color:var(--cliovis-blue);
}

#post-250 .wp-block-media-text__content em {
	color:var(--cliovis-grey-darker);
}

/* 404 Page */
.error404 h2, .error404 p, .error404 form {
	text-align:center;
	margin-bottom:2rem;
}

/*Footer Customizations*/
#page #footer-widget, #page #colophon {
	background-color:var(--cliovis-darkblue)!important;
	color:var(--cliovis-offwhite) !important;
	opacity: 0.9;
}

#page #footer-widget {
	padding-top: 2rem;
	-webkit-box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.1);
	box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.1);
}

#page #footer-widget a, #page #colophon a {
	color:var(--cliovis-offwhite) !important;
}

a.fa-twitter {
	padding:0rem 1rem;
	font-size:1.5rem;
}

a.fa-twitter:hover {
	text-shadow: 0px 0px 10px #FFF !important;
	text-decoration: none;
}

#footer-widget .widget_nav_menu {
	margin-bottom: 0rem;
}

#footer-widget .widget_custom_html {
	margin: 0.5rem 0 0 0 !important;
}

#footer-widget .widget_nav_menu a:hover, #colophon a:hover {
 	text-shadow: 0px 0px 10px #FFF !important;
 	background-color:transparent;
 	text-decoration:none;
}

#page #colophon #ut-credit {
	text-align: right;
}

#colophon {
	padding-top:3rem;
}

#colophon a.fab {
	font-size:2rem;
}

#colophon a {
	padding-bottom:1rem;
}