/*!
* Southern Utah University
* suu.edu's CSS
*/
@import url("https://fonts.googleapis.com/css2?family=Lusitana&family=Open+Sans&display=swap");
html {
  background-color: #fef7e2;
  margin: 0;
  overflow-x: hidden;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  font-size: 18px;
  margin: 0 auto;
  max-width: 1440px;
  padding: 0 20px;
}

header {
  align-content: end;
  display: grid;
  font-family: "Lusitana", serif;
  grid-template-columns: repeat(3, 1fr);
  height: 175px;
  margin-bottom: 4em;
  text-transform: uppercase;
  width: 100%;
}
@media (max-width: 980px) {
  header {
    align-content: revert;
    grid-gap: 2em;
    grid-template-columns: repeat(1, 1fr);
    height: auto;
    justify-items: center;
    margin-top: 2em;
  }
}
header a {
  color: #3c3c3c;
  text-decoration: none;
}
header nav {
  order: 2;
}
@media (min-width: 980px) {
  header nav {
    justify-self: left;
    order: 1;
  }
}
header nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
header nav ul li {
  display: inline;
}
header nav ul li + li {
  margin-left: 1em;
}
header .logo {
  font-size: 2em;
  order: 1;
  position: relative;
  text-align: center;
}
@media (min-width: 980px) {
  header .logo {
    bottom: 32px;
    order: 2;
  }
}
header .logo .subtitle {
  font-size: 0.5em;
}
header nav a,
header .logo a {
  position: relative;
}
header nav a:after,
header .logo a:after {
  background-color: #3c3c3c;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.3s, bottom 0.3s;
  width: 100%;
}
header nav a:hover:after,
header .logo a:hover:after {
  opacity: 100%;
  bottom: -0.25em;
}
header .social-links {
  order: 3;
}
@media (min-width: 980px) {
  header .social-links {
    justify-self: right;
  }
}
header .social-links a {
  color: #2c435e;
}
header .social-links a + a {
  margin-left: 1em;
}

img {
  width: 100%;
}

em {
  font-style: italic;
}

small {
  font-size: 0.9em;
}

strong {
  font-weight: 600;
}

h1 {
  font-size: 2.25em;
  margin: 0;
  padding: 0;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.85em;
}

h1,
h2,
h3 {
  font-family: "Lusitana", serif;
  font-weight: 500;
}

.row {
  margin-left: -20px;
}
.row::before, .row::after {
  content: " ";
  display: table;
}
.row::after {
  clear: both;
}

[class*=span] {
  float: left;
  margin-left: 20px;
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1300px;
}
.container::before, .container::after {
  content: " ";
  display: table;
}
.container::after {
  clear: both;
}

.span12 {
  width: 1300px;
}

.span11 {
  width: 860px;
}

.span10 {
  width: 780px;
}

.span9 {
  width: 700px;
}

.span8 {
  width: 620px;
}

.span7 {
  width: 540px;
}

.span6 {
  width: 460px;
}

.span5 {
  width: 380px;
}

.span4 {
  width: 300px;
}

.span3 {
  width: 220px;
}

.span2 {
  width: 140px;
}

.span1 {
  width: 60px;
}

.offset12 {
  margin-left: 980px;
}

.offset11 {
  margin-left: 900px;
}

.offset10 {
  margin-left: 820px;
}

.offset9 {
  margin-left: 740px;
}

.offset8 {
  margin-left: 660px;
}

.offset7 {
  margin-left: 580px;
}

.offset6 {
  margin-left: 500px;
}

.offset5 {
  margin-left: 420px;
}

.offset4 {
  margin-left: 340px;
}

.offset3 {
  margin-left: 260px;
}

.offset2 {
  margin-left: 180px;
}

.offset1 {
  margin-left: 100px;
}

.row-fluid {
  width: 100%;
}
.row-fluid::before, .row-fluid::after {
  content: " ";
  display: table;
}
.row-fluid::after {
  clear: both;
}

.row-fluid > [class*=span] {
  float: left;
  margin-left: 2.127659574%;
}
.row-fluid > [class*=span]:first-child {
  margin-left: 0;
}

.row-fluid > .span12 {
  width: 99.99999999%;
}

.row-fluid > .span11 {
  width: 91.489361693%;
}

.row-fluid > .span10 {
  width: 82.978723396%;
}

.row-fluid > .span9 {
  width: 74.468085099%;
}

.row-fluid > .span8 {
  width: 65.957446802%;
}

.row-fluid > .span7 {
  width: 57.446808505%;
}

.row-fluid > .span6 {
  width: 48.936170208%;
}

.row-fluid > .span5 {
  width: 40.425531911%;
}

.row-fluid > .span4 {
  width: 31.914893614%;
}

.row-fluid > .span3 {
  width: 23.404255317%;
}

.row-fluid > .span2 {
  width: 14.89361702%;
}

.row-fluid > .span1 {
  width: 6.382978723%;
}

.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}
.container-fluid::before, .container-fluid::after {
  content: " ";
  display: table;
}
.container-fluid::after {
  clear: both;
}

.grid,
.grid-row {
  display: grid;
}

.grid {
  grid-column-gap: 0.1em;
  grid-row-gap: 0.1em;
}

.grid-row {
  grid-column-gap: 2em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 767px) {
  .grid-row {
    grid-column-gap: 1em;
  }
  .grid-row.grid-column-gap-two-em, .grid-row.grid-gap-two-em {
    grid-column-gap: 1em;
  }
}
.grid-row .span1 {
  grid-column: span 1;
}
.grid-row .span2 {
  grid-column: span 2;
}
.grid-row .span3 {
  grid-column: span 3;
}
.grid-row .span4 {
  grid-column: span 4;
}
.grid-row .span5 {
  grid-column: span 5;
}
.grid-row .span6 {
  grid-column: span 6;
}
.grid-row .span7 {
  grid-column: span 7;
}
.grid-row .span8 {
  grid-column: span 8;
}
.grid-row .span9 {
  grid-column: span 9;
}
.grid-row .span10 {
  grid-column: span 10;
}
.grid-row .span11 {
  grid-column: span 11;
}
.grid-row .span12,
.grid-row .grid-row {
  grid-column: span 12;
}
.grid-row > [class*=span] {
  float: unset !important;
  margin-left: unset !important;
  max-width: 100%;
  width: unset !important;
}
@media (max-width: 767px) {
  .grid-row > [class*=span] {
    grid-column: span 12;
    margin-right: unset;
  }
}
.grid-row.container::before, .grid-row.container::after {
  content: unset;
}

.grid-justify-items-start {
  justify-items: start;
}

.grid-justify-self-start {
  justify-self: start;
}

.grid-justify-content-start {
  justify-content: start;
}

.grid-align-items-start {
  align-items: start;
}

.grid-align-self-start {
  align-items: start;
  align-self: start;
}

.grid-justify-items-center {
  justify-items: center;
}

.grid-justify-self-center {
  justify-self: center;
}

.grid-justify-content-center {
  justify-content: center;
}

.grid-align-items-center {
  align-items: center;
}

.grid-align-self-center {
  align-items: center;
  align-self: center;
}

.grid-justify-items-end {
  justify-items: end;
}

.grid-justify-self-end {
  justify-self: end;
}

.grid-justify-content-end {
  justify-content: end;
}

.grid-align-items-end {
  align-items: end;
}

.grid-align-self-end {
  align-items: end;
  align-self: end;
}

@media (min-width: 767px) {
  .grid-three-columns-md {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-four-columns-md {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-five-columns-md {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .grid-four-rows-md {
    grid-template-rows: repeat(4, auto);
  }
  .grid-flow-column-md {
    grid-auto-flow: column;
  }
}
@media (max-width: 979px) {
  .grid-three-columns-sm {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .grid-four-columns-sm {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-five-columns-sm {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  .grid-four-rows-sm {
    grid-template-rows: repeat(4, auto);
  }
  .grid-flow-column-sm {
    grid-auto-flow: column;
  }
}
@media (max-width: 767px) {
  .two-column-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (min-width: 768px) {
  .two-column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 979px) {
  .three-column-grid {
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
}
@media (min-width: 767px) {
  .three-column-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .three-column-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .four-column-grid {
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
}
@media (min-width: 380px) {
  .four-column-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
}
@media (min-width: 767px) {
  .four-column-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .four-column-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 767px) {
  .five-column-grid {
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
}
@media (min-width: 380px) {
  .five-column-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
}
@media (min-width: 767px) {
  .five-column-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .five-column-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 767px) {
  .six-column-grid {
    grid-template-columns: repeat(1, 1fr);
    justify-content: center;
  }
}
@media (min-width: 380px) {
  .six-column-grid {
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
  }
}
@media (min-width: 767px) {
  .six-column-grid {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
  }
}
@media (min-width: 1200px) {
  .six-column-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 510px) {
  .single-column-grid-mobile {
    grid-template-columns: 1fr;
  }
}
.grid-gap-two-em {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
}

.grid-column-gap-two-em {
  grid-column-gap: 2em;
}

.grid-row-gap-two-em {
  grid-row-gap: 2em;
}

.grid-gap-one-em {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
}

.grid-column-gap-one-em {
  grid-column-gap: 1em;
}

.grid-row-gap-one-em {
  grid-row-gap: 1em;
}

.grid-gap-half-em {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
}

.grid-column-gap-half-em {
  grid-column-gap: 0.5em;
}

.grid-row-gap-half-em {
  grid-row-gap: 0.5em;
}

.grid-gap-5px {
  grid-column-gap: 5px;
  grid-row-gap: 5px;
}

.grid-column-gap-5px {
  grid-column-gap: 5px;
}

.grid-row-gap-5px {
  grid-row-gap: 5px;
}

.grid-gap-none {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.grid-column-gap-none {
  grid-column-gap: 0;
}

.grid-row-gap-none {
  grid-row-gap: 0;
}

.grid-auto-rows {
  grid-auto-rows: 1fr;
}

.home .preview {
  align-items: center;
  display: grid;
  grid-gap: 2em;
  grid-template-columns: 0.55fr 0.45fr;
  margin-bottom: 8em;
  text-align: center;
}
@media (max-width: 980px) {
  .home .preview {
    grid-template-columns: 1fr;
  }
}
.home .preview .image {
  position: relative;
  transition: margin 0.3s;
  z-index: 5;
}
.home .preview .image.yellow:before {
  background-color: #ffc000;
}
.home .preview .image.green:before {
  background-color: #2b8275;
}
.home .preview .image.red:before {
  background-color: #be1643;
}
.home .preview .image.blue:before {
  background-color: #2c435e;
}
.home .preview .image:before {
  content: "";
  height: 100%;
  position: absolute;
  top: -1.5em;
  width: 100%;
  z-index: -1;
}
.home .preview .image img {
  transform: scale(1);
  transition: transform 0.3s;
}
.home .preview .content {
  align-content: center;
  display: grid;
  height: 100%;
  order: 2;
  position: relative;
}
.home .preview .content h2 {
  border-bottom-width: 3px;
  border-bottom-style: solid;
  margin: 0 auto;
  padding-bottom: 0.5em;
  transform: scale(1);
  transition: transform 0.3s;
  width: fit-content;
}
.home .preview .content p {
  font-size: 1.5em;
  margin-top: 2em;
}
.home .preview .content .pattern {
  background-size: contain;
  bottom: 5px;
  position: absolute;
  width: 100vw;
}
@media (max-width: 980px) {
  .home .preview .content .pattern {
    bottom: -3em;
    height: 30px;
  }
}
.home .preview .content .pattern:before {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100vw;
}
.home .preview:hover .image img {
  transform: scale(1.025);
}
.home .preview:hover h2 {
  transform: scale(1.025);
}
.home .preview:nth-of-type(odd) .image {
  margin: 1.5em 0 0 1.5em;
  order: 1;
}
.home .preview:nth-of-type(odd) .image:before {
  background-color: #2c435e;
  left: -1.5em;
}
.home .preview:nth-of-type(odd) h2 {
  border-bottom-color: #ffc000;
}
.home .preview:nth-of-type(odd) .pattern {
  background-image: url("/images/pattern-yellow.png");
  left: -5vw;
  transition: left 0.3s;
}
.home .preview:nth-of-type(odd) .pattern:before {
  background: linear-gradient(90deg, rgba(254, 247, 226, 0) 0%, rgb(254, 247, 226) 18%, rgb(254, 247, 226) 100%);
  right: 50vw;
  transition: right 2s;
}
.home .preview:nth-of-type(odd) .pattern.has-animated:before {
  right: -100vw;
}
@media (min-width: 980px) {
  .home .preview:nth-of-type(odd):hover .pattern {
    left: -10vw;
  }
}
.home .preview:nth-of-type(even) {
  grid-template-columns: 0.45fr 0.55fr;
}
@media (max-width: 980px) {
  .home .preview:nth-of-type(even) {
    grid-template-columns: 1fr;
  }
}
.home .preview:nth-of-type(even) .image {
  margin: 1.5em 1.5em 0 0;
  order: 2;
}
@media (max-width: 980px) {
  .home .preview:nth-of-type(even) .image {
    order: 1;
  }
}
.home .preview:nth-of-type(even) .image:before {
  background-color: #be1643;
  right: -1.5em;
}
.home .preview:nth-of-type(even) h2 {
  border-bottom-color: #2b8275;
}
.home .preview:nth-of-type(even) .content {
  order: 1;
}
@media (max-width: 980px) {
  .home .preview:nth-of-type(even) .content {
    order: 2;
  }
}
.home .preview:nth-of-type(even) .pattern {
  background-image: url("/images/pattern-green.png");
  right: -5vw;
  transition: right 0.3s;
}
.home .preview:nth-of-type(even) .pattern:before {
  background: linear-gradient(90deg, rgb(254, 247, 226) 0%, rgb(254, 247, 226) 82%, rgba(254, 247, 226, 0) 100%);
  left: 50vw;
  transition: left 2s;
}
.home .preview:nth-of-type(even) .pattern.has-animated:before {
  left: -100vw;
}
@media (min-width: 980px) {
  .home .preview:nth-of-type(even):hover .pattern {
    right: -10vw;
  }
}
.home a {
  color: unset;
  text-decoration: none;
}
.home .pattern {
  height: 40px;
  width: 100%;
}

.showcase {
  display: grid;
  grid-template-columns: 0.55fr 0.45fr;
  grid-gap: 2em;
}
.showcase h2 {
  font-size: 2.4em;
  margin-top: 0;
}
@media (max-width: 767px) {
  .showcase {
    grid-template-columns: 1fr;
  }
}
.showcase .intro {
  order: 2;
}
@media (max-width: 767px) {
  .showcase .intro {
    order: 1;
  }
}
.showcase .intro .callouts {
  display: grid;
  grid-gap: 4em;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: 4em;
}
@media (max-width: 767px) {
  .showcase .intro .callouts {
    grid-gap: 2em;
    margin-top: 2em;
  }
}
.showcase .intro .callouts div {
  color: #ffffff;
  font-family: "Lusitana", serif;
  font-size: 1.2em;
  padding: 15px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  width: 80%;
  z-index: 100;
}
.showcase .intro .callouts div:before {
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 100%;
  right: calc(100% + 1em);
  position: absolute;
  top: 0;
  width: 50px;
}
.showcase .intro .callouts div.red {
  background-color: #be1643;
}
.showcase .intro .callouts div.green {
  background-color: #2b8275;
}
.showcase .intro .callouts div.blue {
  background-color: #2c435e;
}
.showcase .small {
  font-size: 0.75em;
}
.showcase .photo {
  order: 1;
  position: relative;
}
@media (max-width: 767px) {
  .showcase .photo {
    margin-top: 0;
    order: 2;
  }
}
@media (min-width: 767px) {
  .showcase .photo {
    margin-top: 170px;
  }
}
@media (min-width: 980px) {
  .showcase .photo {
    margin-top: 0;
  }
}
/*# sourceMappingURL=main.css.map */