/* ESCM CSS FILE ============ Created by: Alyssa Laygan 01.10.2020 Last updated by: Alyssa Laygan 01.23.2020 */
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
/*Global*/
 h2 {
	 text-transform:uppercase;
}
/*HEADER*/
 #header {
	 background-color: #960c22;
	/* Used if the image is unavailable */
	 height: 500px;
	/* You must set a specified height */
	 background-position: center;
	/* Center the image */
	 background-repeat: no-repeat;
	/* Do not repeat the image */
	 background-size: cover;
	/* Resize the background image to cover the entire container */
	 padding-left: 10px;
	 position: relative;
}
 @media only screen and (max-width: 768px) {
	 #header {
		 height:600px;
		 background-position: left center;
		 text-align:center;
		 padding-left:0px;
	}
	 #title {
		 font-size:25vh;
	}
	 #undergrad{
		 position: absolute;
		 bottom: 5px;
		 right: 40%;
		 margin: 0px;
		 padding: 0px;
	}
}
 @media only screen and (min-width: 767px) and (max-width: 992px) {
	 #header {
		 height:650px;
		 background-position: right center;
	}
	 #undergrad{
		 position: absolute;
		 bottom: 5px;
		 right: 40%;
		 margin: 0px;
		 padding: 0px;
	}
}
 @media only screen and (min-width: 1200px) {
	 #header {
		 height:625px;
	}
}
 @media only screen and (min-width: 1600px) {
	 #header {
		 height:750px;
	}
}
 #title{
	 font-size:30vh;
	 color: white;
	 text-shadow: 2px 2px 4px #000000;
	 margin-bottom:0px;
	 padding-bottom: 0px;
}
 #breadcrumbs {
	 padding-top: 0px;
	 margin-top: 0px;
}
/* Gradient Background Option #top-of-page {
	 background: linear-gradient(-45deg, #c8102e, #960c22, #640817 ,#c8102e);
	 background-size: 400% 400%;
	 animation: gradient 15s ease infinite;
}
 @keyframes gradient {
	 0% {
		 background-position: 0% 50%;
	}
	 50% {
		 background-position: 100% 50%;
	}
	 100% {
		 background-position: 0% 50%;
	}
}
 */
/*SERVICES*/
 #services {
	 margin:20px 0px;
}
/*STAFF*/
 #staff .section-grid li {
	 padding:0;
}
 #staff > .container {
	 max-width:100%;
}
 .no-gutter {
	 margin:0;
}
 .no-gutter > [class*='col-'] {
	 padding-right: 0;
	 padding-left: 0;
}
 .info {
	 color:#FFF;
	 position: absolute;
	 top: 50%;
	 text-align: center;
	 width: 100%;
	 transform: translateY(-50%);
	 transition:.2s;
	 opacity:0;
}
 #staff-grid {
	 margin-top:2.25rem;
	 background: linear-gradient(115.24658134752576deg, rgba(246, 190, 0,1) 2.657552083333334%,rgba(150, 12, 34,1) 52.66243489583334%,rgba(136, 139, 141,1) 100.62630208333333%);
}
 #staff-grid a {
	 display: block;
}
 .img-container {
	 opacity:1;
	 transition:.2s;
	 position: relative;
	 background-size: cover;
	 background-repeat: no-repeat;
	 background-position: center center;
}
 #staff-grid .staff:hover .img-container, #staff-grid .staff:focus .img-container {
	 opacity:.1;
}
 #staff-grid .staff:hover .info, #staff-grid .staff:focus .info {
	 opacity:1;
}
 .single {
	 padding-top: 100%;
}
 .biolink {
	 position: absolute;
	 display: block;
	 bottom: 0;
	 right: 30px;
	 font-size: 30px;
	 opacity:0;
	 transition:.2s;
	 transition-delay: .2s;
}
 .biolink a {
	 color:#FFF;
	 transition:.2s;
}
 .biolink a:hover {
	 filter: drop-shadow(0 0 0.75rem black);
}
 #staff-grid .staff:hover .biolink, #staff-grid .staff:focus .biolink {
	 bottom:30px;
	 opacity:1;
}
 #pse h2 {
	 font: 50px 'League Gothic', sans-serif;
	 text-transform: uppercase;
	 margin-bottom: 1.125rem;
}
/*Values*/
 .values {
	 margin: 7px;
}
/*Scroll down Animation */
 #undergrad{
	 position: absolute;
	 bottom: 5px;
	 right: 50%;
	 margin: 0px;
	 padding: 0px;
}
 #undergrad a{
	 transition: all .1s;
	 overflow: hidden;
}
 #undergrad a svg{
	 width: 70px;
	 transition: all .3s;
	 transform: translateY(0px);
	 height: 55px;
	 animation: bounce 3s infinite;
}
 #undergrad a:hover{
	 transform: scale(1.1);
}
 #undergrad a:hover svg{
	 transform: translateY(0px);
}
 #undergrad a:hover:before{
	 height: 100%;
}
 @keyframes bounce {
	 0%{
		 transform: translateY(-11px);
	}
	 10%{
		 transform: translateY(0px);
	}
	 20%{
		 transform: translateY(-8px);
	}
	 30%{
		 transform: translateY(0px);
	}
	 40%{
		 transform: translateY(-6px);
	}
	 50%{
		 transform: translateY(0px);
	}
	 60%{
		 transform: translateY(-4px);
	}
	 70%{
		 transform: translateY(0px);
	}
	 80%{
		 transform: translateY(-3px);
	}
	 90%{
		 transform: translateY(0px);
	}
	 100%{
		 transform: translateY(-1px);
	}
}
 html {
	 scroll-behavior: smooth;
}

.fade-in {
  animation: fadeIn ease 7s;
  -webkit-animation: fadeIn ease 7s;
  -moz-animation: fadeIn ease 7s;
  -o-animation: fadeIn ease 7s;
  -ms-animation: fadeIn ease 7s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}