/* @import 'https://fonts.googleapis.com/css?family=Cantarell:400,400i,700|Montserrat:400,700';
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900|Ubuntu:400,700,800'); */
@import url("https://use.typekit.net/kns5jnt.css");


/* colors
red = #EF1B2A
blue = #35A2BE
yellow = #F2F532
green = #2db547
med gray = #8F9492;
*/

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50vh auto 15vh;
  height: 100vh;
}

header {
  background: #1e2b27;
  color: rgba(255,255,255,.92);
  grid-row: span 2;
}

.courseA {
  background: #FA3839;
}

.courseB {
  background: #34B0C9;
}

.courseC {
  background: #F3F550;
  grid-row: span 2;
}

.archive {
  background: #273834;
  color: white;
  grid-row: span 2;
}

.resources {
  background: #a0a5a3;
}

.advising {
  background: #2db547;
  flex-direction: column;
}

.advising a {
  color: white;
  text-align: center;
  transition:.06s;
}

.advising a:hover {
  /* opacity: .6; */
  color: #F1A642;
  transition:.06s;
}

.resources, .advising {
  margin: 0;
  height: 100%;
  padding: 10px;
  color: white;
}

aside {
  grid-row: 3;
}

.course, .archive {
  padding: 15px 15px 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.course a {
  color: black;
  transition: .05s;
}

.course p {
  color: black;
}

.course a:hover {
  color: white;
  /* opacity: .5; */
  transition: .05s;
}

.student-btn-group {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
  width: 32.3vw;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  box-sizing: content-box; /* So the width will be 100% + 17px */
  /*column-count: 2;*/
}

.student-btn-group a {
  color: black;
  transition: .05s;
  text-align: left;
  /* display: block; */
}

.student-btn-group a:hover {
  opacity: 1;
  mix-blend-mode: normal;
  transition: .05s;
}

.resources, .advising {
  display: flex;
  justify-content: center;
  align-items: center;
}

body {
	font-family: interstate, sans-serif;
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: interstate, sans-serif;
  font-style: normal;
  font-weight: 800;
  margin: 0;
  line-height: 1em;
  text-transform: uppercase;
}

header h1 {
  padding: 15px;
  line-height: 50px;
}

h2 {
  font-size: 3rem;
}

h3 {
  font-size: 3rem;
  /* text-transform: none; */
  margin-bottom: .1em;
}

.main-grid header h1 span {
  font-weight: 500;
  text-transform: none;
  font-size: .5em;
  line-height: normal;
  display: block;
  margin-top: 8px;
}

p {
	font-size: .9em;
	color: #OA1612;
}

.button {
  text-transform: uppercase;
  background: none;
  margin: 0;
  padding: 0;
  display: block;
  line-height: 16px;
}
.button.small {
    font-size: 0.85em;
    padding: 0 15px 2px 0;
}
.button:link, .button:visited {
  /* background: #f7a17d4d; */
}
.button:hover {
  background: none;
  /* opacity: 1; */
  color: rgba(0,0,0,.4);
  /* opacity: .8; */
}
.button:active {
/*   box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5); */
  border: 1px solid rgba(255, 255, 255, .35);
}

.button:focus {
  color:white;
  background:none;
}

.years {
  overflow: auto;
  width: 34.5vw;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  box-sizing: content-box; /* So the width will be 100% + 17px */
	/* margin: 0 auto; */
	/* display:flex;
	justify-content:center; */
}

.semester {
	margin: 0 3px;
  color: whitel
}

.semester h6 {
  margin-top: 22px;
  margin-bottom: 3px;
  text-transform: uppercase;
  font-size: .9em;
  color: #32B54B;
  /* font-weight: 700; */
  letter-spacing: 1px;
}

.semester h6 a {
  color: #32B54B;
}

.semester a {
	margin-bottom: .3em;
	color: white;
}

.semester a:hover {
  color: #F1A642;
}

.semester p {
	margin: 0;
	padding: 0;
	/* color: #DC9128; */
	overflow: hidden;
	text-overflow: clip;
}

@media screen and (max-width: 780px) {
  h2,h3 {
    font-size: 2.2rem;
  }
}


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

  .main-grid {
    display: block;
  }

  h1 {
    font-size: 3rem;
  }

  .student-btn-group, .years {
    width: 100%;
  }

  .course, .archive {
    padding-bottom: 15px;
    height: 300px;
  }
}