/*
This file contains styles for the top portion of the pages.
*/

/* Contains the university/school name */
header {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0 auto;
	padding: 0 2em;
	text-align:center;
	background-color:#2d637f;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
}
header.page {
	height:350px;
	padding-top: 18px;   /* because of Mobile safari 8 */
	background-color: rgba(172, 163, 145, .4) !important;
	background: no-repeat;
	background-size: cover;
	border-bottom: 3px solid #990000;
}
header.page.home {
  height: 475px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
header.page.home .bg_video {
  width: 100%;
  height: 145%;
  top: -25%;
  left: 0;
  position: absolute;
  display: block;
}
header.page.home .bg_video video {
  width: 100%;
  height: auto;
  min-height: 100%;
  top: 0;
  right:0;
  bottom:0;
  left:0;
  position: relative;
}
header.page.home .bg_image {
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 113%;
  left: 0;
  position: absolute;
  display: none;
}
header h1 {
	font-style: normal;
	margin: 0 auto;
	font-weight: normal;
	color: #ffffff;
}
header.page.home a {
  color: #ffffff;
}
header.page.home a:hover {
  color: #ffffff;
}
body.home header h1 {
  text-shadow: 3px 3px 10px #333333;
}
@media screen and (max-width: 970px) {
  header.page.home {
    height: 375px;
  }
}
@media screen and (max-width: 749px) {
  header.page.home {
    height: 350px;
  }
  header h1 {
    font-size: 1.42857142857143em;
  }
}
@media screen and (max-width: 702px) {
  header.page.home {
    height: 320px;
  }
}
@media screen and (max-width: 431px) {
  header h1 {
    font-size: 1.08571428571429em;
  }
}
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {
  header.page.home .bg_video {
    display: none;
  }
  header.page.home .bg_image {
    display: block;
  }
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
  header.page.home .bg_video {
    display: none;
  }
  header.page.home .bg_image {
    display: block;
  }
}
@media screen and (max-width: 667px) {
  header.page.home .bg_video {
    display: none;
  }
  header.page.home .bg_image {
    display: block;
  }
}

/* SITE NAME STYLES -- see phone.css for styles that are overridden for phone display */

header h1 .title-top { 
	position: relative;
	font-family: 'BentonSansRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 4.5em;
	font-weight: bold;
	text-transform:uppercase;
	letter-spacing: .05em;
	-webkit-animation: dropHeader 1 0.75s ease-in;
    animation: dropHeader 1 0.75s ease-in; 
}

/* TAGLINE STYLES -- see phone.css for styles that are overridden for phone display */
header h1 .title-bottom { 
	position: relative; 
	font-family: 'BentonSansRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:1.75em;
	padding:0;
	margin:10px auto 0 auto;
	line-height:1.5em;
	color: #ffffff;
	-webkit-animation: fadeHeader 1 1s ease-in;
    animation: fadeHeader 1 1s ease-in;
}

/* HEADER ANIMATION*/
@-webkit-keyframes dropHeader {
  0% {
    top: -40px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@-moz-keyframes dropHeader {
  0% {
    top: -40px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@-o-keyframes dropHeader {
  0% {
    top: -40px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@keyframes dropHeader {
  0% {
    top: -40px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@-webkit-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    top: 20px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@-moz-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    top: 20px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@-o-keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    top: 20px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }
@keyframes fadeHeader {
  0% {
    top: 20px;
    opacity: 0; }
  50% {
    top: 20px;
    opacity: 0; }
  100% {
    top: 0;
    opacity: 1; } }

/*
Styles the breadcrumbs that appear directly beneath the menu
*/
.breadcrumbs {
	padding: 5px 2em;
	font-size: 1.2em;
	font-family: 'BentonSansRegular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #01426a;
	background-color:rgba(219, 219, 217, 1);
}
.breadcrumbs a {
	color: #006298;
	text-decoration:none;
 }
.breadcrumbs a:hover {
	color: #01426a;
	text-decoration:underline;
}