/* Styles for Washington High School Alumni Association */

html {
	height: 100%;
} 

body {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	font-family: trirong, serif;
	font-size: 16px;
	background-image: 	linear-gradient(to bottom, #666 20%, #000);
						/*url("../images/tigerstripe-trans.png"),*/
}

#my-page { background: #fff; } /*for mobile menu, but using it for bg style*/

#main {
	flex: 1 1 0;
}

.content-bottom {
	margin-top: 2em;
	padding-top: 1em;
	border-top: 2px solid rgb(255,150,0);
}

/* Navigation */

.navigation {
	background: rgb(255,125,0);/*url("../images/tigerstripe-trans.png");*/
}

ul.topnav { 
	padding-left: 0;
	margin-bottom: 0; 
}

ul.topnav li ul {
  background: rgb(255, 125, 0) none repeat scroll 0 0;
  left: -9999px;
  padding-left: 0;
  position: absolute;
  z-index: 1000;
  width: 200%;
}
	ul.topnav li:hover ul {
	  left: 0;
	}

.topnav > li {
	display: inline-block;
	float: left;
	position: relative;
}
.topnav > li > ul > li {
	display: block;
	float:none;
}

.topnav > li > a,
.topnav > li > ul > li > a {
	display: block;
	padding: 1em;
	color: #fff;
	font-size: 16px;
	font-family: raleway, sans-serif;
	font-weight: 700;
	transition:	background .7s ease 0s;
	background: rgba(255,125,0,.9);
}
	.topnav > li > a:hover,
	.topnav > li > ul > li > a:hover,
	.topnav > li:hover > a[href="#"] { 
		background: #000;
		text-decoration: none;
	}
	.topnav > li.current > a {
	  background: rgb(255, 150, 0) none repeat scroll 0 0;
	}
	.topnav > li > a[href="#"] { /*disable header links*/
		pointer-events: none;
		cursor: default;
	}

/* Mobile Navigation */

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
	background-color: #fff;
}

.hamburger-menu-text {
	color: #fff;
	display: inline-block;
	font-family: raleway;
	font-size: 1.5em;
	font-weight: 700;
	}

.mm-menu {
	background: rgb(255, 125, 0) none repeat scroll 0 0;
}

.mm-menu .mm-navbar a, 
.mm-menu .mm-navbar > * {
	font-family: raleway, sans-serif;
	color: #000;
}

.topnav.mm-listview > li {
	display: block;
	float: none;
}

.topnav.mm-listview > li > a {
  	color: #fff;
  	font-size: inherit;
  	font-weight: 700;
  	padding: 10px 10px 10px 20px;
  	background: inherit;
}
.mm-listview > li > a {
  font-family: raleway, sans-serif;
}

	.topnav.mm-listview > li > a:hover {
	  background: inherit;
	}

.mm-listview > li > a, 
.mm-listview > li > span {
	color: #fff;
	font-weight: 700;
}

.mm-menu .mm-listview > li .mm-next::after { /*subnav arrows*/
	border-color: #fff;
}

/* Header */

.main-header {
	font-family: raleway, sans-serif;
	padding: 1em 0;
	margin-bottom: 2em;
	background-image:	linear-gradient(rgba(0,0,0,.5), transparent),
						url('../images/whs_header_1200.jpg');
	/*background-size: cover;*/
	background-position: center center;
	min-height: 300px; /*could go to 350*/
	background-repeat: no-repeat;
	background-color: #000;
}

.main-header .row { 
	position: relative;
	transform: translateY(50%);
}

.search-modal-trigger {
	position: absolute;
	right: 0;
	text-align: right;
	top: 0px;
}

	.search-modal-trigger button {
		margin-bottom: 5px;
		width: 100%;
	}

.logo { text-align: center; }

.site-title-block { text-align: left; }

.main-header .site-title {
	font-size: 60px;/*40px;*/
	line-height: 1.1;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}
	.main-header .site-title a {
		color: inherit;
		text-decoration: none;
	}

.main-header .site-subtitle {
	font-size: 36px; /*24px;*/
	line-height: 1.1;
	color: #fff;
	text-shadow: 1px 1px 2px #000;
}

/*-----*/
.breadcrumbs span {
	font-family: raleway, sans-serif;
	font-size: 70%;
}

.breadcrumbs span::after {
	content: " \2219 ";
}
	.breadcrumbs span:last-of-type::after { content: ""; }

.sidebar {
/*	border: 1px solid rgb(255,125,0); */
	padding: 1em;
/*	background: rgba(255, 125, 0, 0.4) none repeat scroll 0 0;*/
	border-top: 3px solid rgb(255,125,0);
	border-bottom: 3px solid rgb(255,125,0);
}

.main-footer {
	background: rgb(255,125,0);/* url("../images/tigerstripe-trans.png");*/
	padding: 0; /*3em;*/
	margin-top: 2em;
}

.main-footer .container {
	padding: 1em;
	background: rgba(255, 125, 0, 0.98);
	color: #fff;
/*	text-shadow: 1px 1px 1px #666;*/
	font-family: raleway, sans-serif;
	text-align: center;
}

.slogan {
	border-bottom: 1px solid;
	border-top: 1px solid;
	font-size: 30px;
	font-weight: 700;
	margin-top: 23px;
	padding: .5em 0;
}

.deepfooter {
	background: #000;
	color: #eee;
	text-align: center;
	font-size: 12px;
	font-family: raleway;
	padding: 1em 0;
}

/* ==========
HTML
========== */

a { color: rgb(255,75,0); }
a:hover { color: rgb(8,73,128); }

.main-footer a { color: #fff; }
.main-footer a:hover { color: #043FF8; }

audio {
	max-width: 100%;
}

.clr { clear: both; }

hr.whsaa {
	border-color: rgb(255,125,0);
}

/* ==========
HEADINGS
========== */

h1,h2,h3,h4,h5,h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: raleway, sans-serif;
}

h1 > a,h2 > a,h3 > a,h4 > a,h5 > a,h6 > a {
	color: rgb(255,100,0);
}

.page-title h1 { margin-top: 0; }

.sidebar > h2 {
	margin-top: 0;
}

/* ==========
FUN STUFF
=========== */

/* Highlight Text */

.initial {
	font-size: 150%;
	font-weight: 700;
}

/* Optional class to emphasize first line of a paragraph */
article > p.lede::first-line {
	font-size: 1.2em;
	font-style: italic;
	font-weight: 700;
}

.panel-default > .panel-heading {
	background-image: linear-gradient(to bottom,#fff3dd 0,#ffe1aa 100%);
	font-family: raleway, sans-serif;
}

/* ==========
IMAGES
========== */
img { max-width: 100%; }

#main img {
	/*background: #fff;*/
	border: 1px solid #ddd;
	margin-bottom: 1em;
	padding: .5em;
	max-width: 100%;
}

#main img.noborder {
	border: none;
}

figure {
	background: #fff;
	border-color: #ddd;
	border-style: solid;
	border-width: 1px 1px 0 1px;
	padding: .5em;
	display: table;
	margin-bottom: 1em;
}
	#main figure img {
		background: none;
		border: none;
		padding: 0;
		margin-bottom: 0;
	}

figure.align_left,
img.align_left {
	float: left;
	margin-right: 1em;
}
figure.align_right,
img.align_right {
	float: right;
	margin-left: 1em;
}
figure.align_center,
img.align_center {
	display: table;
	margin-left: auto;
	margin-right: auto;
}
figcaption {
	font-size: 80%;
	/*font-style: italic;*/
	padding: 0 .5em .5em;
	display: table-caption;
	caption-side: bottom;
	background: #fff;
	border-color: #ddd;
	border-style: solid;
	border-width: 0px 1px 1px;
	text-align: center;
	font-family: raleway, sans-serif;
}

figcaption cite {
	color: #888;
	display: block;
	font-size: 60%;
	margin-top: -5px;
	position: relative;
	text-align: right;
	top: 10px;
}

/* ==========
ARCHIVE/EXCERPT PAGES
========== */

.article-meta {
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee;
  margin-bottom: 10px;
  padding: 3px 0;
  color: #666;
  font-family: raleway, sans-serif;
  font-size: 80%;
}

.article-meta > span { margin-right: 2em; }

section.excerpt article {
	display: flex;
}

#main .excerpt-image {
/*	text-align: center;*/
	float: left;
	margin-right: 1em;
}
#main .excerpt-image img {
	padding: 7px;
	max-width: 150px;
}

.excerpt-body {
	padding-bottom: .6em;
}

.read-more {
	font-family: raleway, sans-serif;
	font-size: 85%;
}

.read-more .glyphicon { font-size: 10px; }

/* ==========
PAGINATION
========== */

.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus, 
.pagination > .active > span:hover {
  background-color: rgb(255, 125, 0);
  border-color: rgb(255, 140, 0);
}

.pagination > li > a, 
.pagination > li > span {
  border: 1px solid rgb(255, 140, 0);
  color: rgb(255,100,0);
}

.pagination > li > a:focus, 
.pagination > li > a:hover, 
.pagination > li > span:focus, 
.pagination > li > span:hover {
  background-color: rgba(255, 150, 0, 0.2);
  border-color: rgb(255, 150, 0);
  color: rgb(255, 75, 0);
 }


/* ==========
SINGLE PAGES (ARTICLES)
========== */

.page-header { margin-top: 0; }
.page-header h1 { margin: 0; }

/* override styles on single articles due to meta display */
.news .page-header {
	border-bottom: 0;
	margin-bottom: 0;
}


/* ==========
CLASS PAGES
========== */

.class-years .page-header { margin-bottom: 5px; }

.classnav {
	display: block;
	font-size: 75%;
}

.classnav .nextclass {
	float: right;
}
.classnav .prevclass {
	float: left;
}

.class-year-list-item .glyphicon {
	font-size: 12px;
}

.class-info {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid rgb(255,125,0);
	overflow: hidden;
	border-top: 1px solid #eee;
	padding-top: .5em;
	margin-top: 5px;
}

/* ==========
DISTINGUISHED CITIZENS PAGE(S)
========== */

.content-bottom.dc-links figure {
	margin-left: auto;
	margin-right: auto;
}

/* ==========
REUNIONS PAGE
========== */

.reunion-info {
	margin-bottom: 1em;
	padding-bottom: 1em;
	border-bottom: 1px solid #eee;
}

.news-list {
	margin-bottom: .5em;
	padding-bottom: .5em;
	border-bottom: 1px solid #eee;
}
	.news-list:last-of-type { border: 0; }

.news-list-link {}

.news-list-date {
	font-size: 70%;
	display: block;
	text-align: right;
}

/* ==========
SEARCH PAGE
========== */

.search_query {
	text-transform: uppercase;
	display: inline-block;
	padding: 0 20px;
	background: rgba(255,150,0,.7);
}

.search section.excerpt {
  padding: 1em;
}

.search section.result-0 {
  background: #eee none repeat scroll 0 0;
}

.search .excerpt-title h3 {
  margin-top: 0;
}


/* ==========
RESPONSIVE OVERRIDES
768/992/1200
========== */

/* Extra small */
@media (max-width: 767px ) {

	/* hide main menu on extra small view */
	#my-menu {
	  display: none !important;
	}

	/* Header */

	.main-header { 
		background-image: linear-gradient(rgb(255,125,0), rgb(255,150,0));
		min-height: auto;
	}
	.main-header .row { transform: translateY(0%); }
	.main-header .logo img { max-width: 125px; }
	.main-header .site-title { font-size: 40px; }
	.main-header .site-subtitle { font-size: 24px; }

	.site-title-block {
		text-align: center;
	}

	/* Center Headings */
	/* except... */
	h1,h2,h3,h4,h5,h6 {
		text-align: center;
	}
		.news-index h3,
		.news-excerpt h3,
		h3.class-info-contact,
		h3.class-info-reunion,
		h3.find-class {
			text-align: left;
		}

	/* Stack Article Meta */
	.article-meta > span {
		display: block;
	}

	figure.align_right,
	figure.align_left {
		float: none;
		margin-left: auto;
		margin-right: auto;
	}

	.slogan { font-size: 24px; }

	section.excerpt article {
		display: inline-block;
	}

	.responsivetest {background: yellow;height: 1em;display: none;}

}

/* Small */
@media (min-width: 768px) and (max-width: 991px ) {

	/* hide main menu on small view */
	#my-menu {
	  display: none !important;
	}

	/* Header */

	.main-header .row { transform: translateY(80%); }
	.main-header .site-title { font-size: 40px; }
	.main-header .site-subtitle { font-size: 24px; }

	.responsivetest {background: blue;height: 1em;display: none;}

}

/* Small and Extra Small */
@media (max-width: 991px) {



	.search-modal-trigger {
		top: -62px;
	}

		.search-modal-trigger button {
		  float: right;
		  margin-left: 10px;
		  width: 40%;
		}

	img.align_left,
	img.align_right,
	figure.align_left,
	figure.align_right {
		float:none;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
}

/* Medium */
@media (min-width: 992px) and (max-width: 1199px ) {

	/* hide mobile menu on medium view */
	#mm-my-menu{
	  display: none !important;
	}

	/* Header */

	.main-header .row { transform: translateY(80%); }
	.main-header .site-title { font-size: 48px; }
	.main-header .site-subtitle { font-size: 28px; }

	.responsivetest {background: aqua;height: 1em;display:none;}

}


/* Large */
@media (min-width: 1200px) {

	/* hide mobile menu on large view */
	#mm-my-menu{
	  display: none !important;
	}

	.responsivetest {background: rebeccapurple;height: 1em;display: none;}

}


/* Timeline */
/* https://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528 */

.timeline time {
	font-size: 1.5em;
	display: block;
	text-align: center;
	font-family: raleway, sans-serif;
	background: rgb(255,150,0);
	box-shadow: 1px 1px 5px -5px #000;
}

.timeline img {
	margin-left: auto;
	margin-right: auto;
	display: table;
}

.timeline ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #444;
}

	.timeline ul li:last-of-type {
		padding-bottom: 50px;
	}
 
.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
/*  bottom: 0; */
top: 50px;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: rgb(255,125,0);
  color: #fff;
}
 
.timeline ul li div::before {
  content: '';
  position: absolute;
 /* bottom: 7px; */
 top: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}
 
.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent rgb(255,125,0) transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}
 
.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent rgb(255,125,0);
}

/* timeline-responsive */

 @media screen and (max-width: 900px) {
  .timeline ul li div {
    width: 250px;
  }
  .timeline ul li:nth-child(even) div {
    left: -289px; /*250+45-6*/
  }
} 

@media screen and (max-width: 600px) {

	.timeline ul {
		padding-left: 0;
	}

  .timeline ul li {
    margin-left: 0px;
  }
   
  .timeline ul li div {
    width: calc(100vw - 91px);
  }
   
  .timeline ul li:nth-child(even) div {
    left: 45px;
  }
   
  .timeline ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent rgb(255,125,0) transparent transparent;
  }
}