/***
*   GENERAL
***/
#scroll-buttons .inner-wrapper h4, .section h4 {
    font-family: 'Raleway', sans-serif;
    text-align: center;
    font-size: 2.5em;
    margin: 0;
    font-weight: 300;
    color: #e2383f;
    opacity:1;
    transition: opacity .25s;
    -webkit-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -o-transition: opacity .25s;
}
.section h4.transparent, #scroll-buttons .inner-wrapper h4.transparent{
  opacity:0;
}
.vertical-middle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.transparent-screen, .background-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(40,40,40,.4);
}
.section {
    position: relative;
    text-align: center;
    width: 85%;
    padding: 5% 7.5%;
    border-top: 3px solid#e2383f;
}
.section h4 {
    margin-top: 0;
        margin-bottom: 2%;
}
.white-background {
    background-color: rgba(251,251,251,.98);
}
.teal-button a{
  color:#1a79af;
}
/***
*   NAVBAR OVERRIDES
***/

#scroll-buttons .inner-wrapper {
  max-height: 60px;
}

#scroll-buttons .inner-wrapper h4 {
  padding: 1%;
}


/***
*   BACKGROUND VIDEO
***/
#background-video {
    position: relative;
        z-index: -1;
    height: 100vh;
}
#mobile-image {
    display: none;
}
#bgvid {
    position: fixed;
    min-height: 100vh;
    min-width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}
#headline {
    position: absolute;
    top: 40%;
    left: 0%;
    width:100%;
    color: #fff;
    text-align: center;
    transform: translate(0%,-50%);
    -webkit-transform: translate(0%,-50%);
    -moz-transform: translate(0%,-50%);
    -o-transform: translate(0%,-50%);
}
h2#fairfield-headline {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 4em;
    margin-bottom: 3%;
        margin: 0;
    text-align:center;
}
#headline .tagline {
    font-size: 2em;
    margin-bottom: 1%;
}
#headline .dots {
    font-size: .7em;
}
#headline .dots i {
    margin: 0 .7%;
    color:#fff;
}
#scroll-encourage {
    position: absolute;
    bottom: 0;
    left: 0;
    width:100%;
    text-align: center;
    color: #fff;
    font-size: 2em;
    font-family: 'Raleway', sans-serif;
}
#scroll-encourage>p {
    margin-bottom: 1%;
}
#scroll-encourage>p span {
    font-size: 2.5em;
}

/***
*   ADMISSION
***/
.value-prop {
    margin-bottom: 3%;
}
.admission-box {
    display: inline-block;
    width: 28%;
    margin: 1%;
    vertical-align: top;
    padding: 1%;
    background-color: #fff;
    border: 1px solid rgba(40,40,40,.15);
    transition: .25s all;
    -webkit-transition: .25s all;
    -moz-transition: .25s all;
    -o-transition: .25s all;
}
.admission-box img {
    width: 70%;
    border-radius: 50%;
}
.admission-box .info h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.5em;
    color: #333;
    font-weight: 300;
    line-height: 1.3em;
    margin: 5% 0;
    min-height: 70px;
}
.admission-box .info>p {
  min-height: 75px;
  font-size: .9em;
  line-height: 1.4;
  margin-bottom: 5%;
  padding: 0;
}
.admission-box .cta {
    margin: 40px 0 20px 0;
}
.admission-box .cta span {
    padding: 15px 40px;
    border: 1px solid;
    background-color: #fff;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}
.admission-box:hover {
    background-color: #1a79af;
}
.admission-box:hover .info h6, .admission-box:hover .info>p{
  color:#fff;
}
.admission-box .cta span:hover{
  background-color:#feab00;
  border-color:#feab00;
}
#homepage-apply-interstitial-wrapper h4 {
    font-family: 'Raleway',sans-serif;
    font-weight: 300;
    font-size: 2.5em;
    margin-bottom: 2%;
}
#homepage-apply-interstitial-wrapper .close-interstitial-button.profile {
    transform: translate(-100%,-50%);
    -webkit-transform: translate(-100%,-50%);
    -moz-transform: translate(-100%,-50%);
    -o-transform: translate(-100%,-50%);
}

/***
*   ANIMATION
***/
#animation {
    min-height: 800px;
}
#animation-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
#animation-background.image-loaded{
      background-image: url('https://www.fairfield.edu/media/main-site/2017-18/images/homepage-17-18/0000_homepage_background-image_image-1_08132017.jpg');
}

#animation-wrapper {
  position: absolute;
  bottom: 5%;
  left: 7.5%;
  width: 85%;
  height: 90%;
}

#animation-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 46%;
  height: 100%;
  padding: 0 2%;
}

#animation-2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: 46%;
  height: 100%;
  padding: 0 2%;
}

.animation-text {
  background-color: rgba(251, 251, 251, .97);
  font-weight: 300;
  font-size: .8em;
  line-height: 2em;
  color: #666;
  max-height: 0;
  transition: max-height 1.5s;
  -webkit-transition: max-height 1.5s;
  -moz-transition: max-height 1.5s;
  -o-transition: max-height 1.5s;
}

.animation-text.visible {
  max-height: 500px;
  border: 1px solid rgba(40, 40, 40, .15);
}

.animation-text .inner-wrapper {
  max-height: 500px;
}

.animation-text p {
  opacity: 0;
  border-left: 2px solid #e2383f;
  padding: 2%;
  font-size: 1.5em;
      text-align: left;
  margin: 2%;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
  -moz-transition: opacity .25s;
  -o-transition: opacity .25s;
}

.animation-text p.visible {
  opacity: 1;
}

.person {
  display: inline-block;
  width: 19%;
  text-align: center;
  font-size: 5em;
  opacity: 0;
  transition: opacity .25s;
  -webkit-transition: opacity .25s;
  -moz-transition: opacity .25s;
  -o-transition: opacity .25s;
}

.person.animated {
  opacity: 1;
}

#faculty-member {
  font-size: 5em;
  text-align: center;
  color: #e2383f;
}

#faculty-wrapper {
  text-align: center;
  color: #e2383f;
}

#students-wrapper {
  color: #fff;
  margin: 8%;
  margin-top: 15%;
}

#percent-graduate {
  position: absolute;
  bottom: 0;
  top: auto;
  width: 100%;
}

#percentage-counter {
  position: absolute;
  top: 35%;
  left: 50%;
  text-align: center;
  color: #fff;
  font-size: 6em;
  background-color: rgba(40, 40, 40, .45);
  border: 1px solid rgba(251, 251, 251, .8);
  height: 280px;
  width: 280px;
  opacity: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transition: opacity .5s;
  -webkit-transition: opacity .5s;
  -moz-transition: opacity .5s;
  -o-transition: opacity .5s;
}

#percentage-counter .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

#percentage-counter.visible {
  opacity: 1;
}

#percentage-counter .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

#graduate-percent {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

/***
*   SECONDARY STORIES
***/
#secondary-stories .news-article {
    width: 22%;
    margin: 1%;
}

/***
*   CENTER STAGE
***/
#center-stage {
    min-height: 600px;
}
#center-stage-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top-left;
    background-attachment: fixed;
}
#center-stage-background.image-loaded{
      background-image: url('https://www.fairfield.edu/media/main-site/2017-18/images/homepage-17-18/center-stage/12639_stags-basketball-centerstage_banner-img_10222018.jpg');
}
#center-stage-text {
    position: absolute;
    top: 5%;
    right: 1%;
    width: 50%;
        padding: 2%;
    background-color: rgba(251,251,251,.98);
    border:1px solid rgba(40,40,40,.15);
    transition: background-color .25s;
    -webkit-transition: background-color .25s;
    -moz-transition: background-color .25s;
    -o-transition: background-color .25s;
}
#center-stage-text:hover {
    background-color: #1a79af;
}
#center-stage-text h4 {
    color: #333;
    text-align: left;
    font-size: 1.5em;
    line-height: 1.4em;
    border-left: 2px solid #e2383f;
        padding: 1% 0 1% 3%;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}

#center-stage-text .text {
    color: #666;
    margin-top: 5%;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}
#center-stage-text:hover h4{
  border-color:#feab00;
}
#center-stage-text:hover h4, #center-stage-text:hover .text{
  color:#fff;
}
#center-stage-text .cta span {
    color: #1a79af;
    border: 1px solid;
    padding: 15px 40px;
    background-color: #fff;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}

#center-stage-text .cta span:hover {
  background-color:#feab00;
  border-color:#feab00;
  cursor:pointer;
}
#center-stage-text .cta {
    margin: 50px 0 20px 0;
}
#news-at-buttons {
    position: absolute;
    bottom: 5%;
    right: 1%;
  }
  #news-at-buttons .gen-callout-button.teal-button a {
    background-color: #fff;
}
#news-at-buttons .gen-callout-button.teal-button a:hover {
  background-color: #1a79af;
}
/***
*   EVENTS
***/
.event {
    height: 100px;
}
.events-column {
    display: inline-block;
        width: 22%;
    margin: 1%;
    vertical-align: top;
}
.events-column h6 {
    margin: 0 0 3% 0;
    font-size: 1.5em;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
}
.events-column h6 a {
    color: #333;
}
.event .headline-wrapper .inner-wrapper {
    text-align: left;
}
.event-button {
    margin: 20px 0;
}
.event-button a {
    border: 1px solid;
    padding: 15px;
    background-color: #fff;
}

.event-button a:hover{
  background-color:#1a79af;
  color:#fff;
  border-color:#1a78af;
}

/***
*   FAST FACTS
***/
#facts-1 {
    height: 400px;
}
#facts-1-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
#facts-1-background.image-loaded{
  background-image:url('https://www.fairfield.edu/media/main-site/2017-18/images/homepage-17-18/0000_homepage_background-image_image-2_08132017.jpg');
}
.fact {
    width: 300px;
    height: 300px;
    display: inline-block;
    border-radius: 50%;
    vertical-align: middle;
    margin:1%;
    background-color: rgba(251,251,251,.98);
    border: 1px solid rgba(40,40,40,.15);
    opacity:0;
    transition: opacity .25s;
    -webkit-transition: opacity .25s;
    -moz-transition: opacity .25s;
    -o-transition: opacity .25s;
}
.fact.opaque{
  opacity: 1;
}
.fact .number {
    color: #e2383f;
    font-size: 5em;
    font-family: 'Raleway', sans-serif;
    margin: 0 0 15% 0;
}
.fact.small{
  width:250px;
  height:250px;
}
.fact.small.opaque{
  opacity: 1;
}

#stackla {
    background-color: #e2383f;
    height: 400px;
    overflow: scroll;
}
@media screen and (max-width : 1400px){
  .event-button a {
    font-size:.8em;
  }
}
@media screen and (max-width: 1200px){
  .admission-box .info>p {
      min-height:100px;
  }
  .event-button a {
    padding:15px 5px;
    font-size: .7em;
  }
  .event .date {
    font-size: 1.5em;
  }
}
@media screen and (max-width: 900px){
  .admission-box .info h6 {
    font-family: 'Raleway', sans-serif;
    font-size: 1.2em;
  }
  .admission-box .info>p {
      min-height:125px;
  }
  .admission-box .cta span{
    padding: 15px 30px;
    font-size:.9em;
  }
  .events-column {
    width: 46%;
  }
  .event {
      height: 80px;
  }
  .event-button a {
    padding:15px;
    font-size: 1em;
  }
  .event .date {
    font-size: 2em;
  }
  .fact{
    width:250px;
    height:250px;
  }
  .fact.small{
    width:200px;
    height:200px;
  }
}
/* iPhone 6 in portrait & landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px),
/* iPhone 6 Plus in portrait & landscape */
only screen
and (min-device-width : 414px)
and (max-device-width : 736px),
/* iPhone 5 & 5S in portrait & landscape */
only screen
and (min-device-width : 320px)
and (max-device-width : 568px),
/* iPhone 2G-4S in portrait & landscape */
only screen
and (min-device-width : 320px)
and (max-device-width : 480px),
/* Galaxy S3 portrait and landscape*/
screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2),
/* Galaxy S4 portrait and landscape */
only screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
 {
   .section h4.transparent{
    opacity: 1;
  }
  .section h4 {
     line-height: 1.3em;
     margin: 1% 0;
 }
   /***
   *   BACKGROUND VIDEO
   ***/
   #background-video{
     height:95vh;
   }
   #bgvid{
     display:none;
   }
   #mobile-image {
      display: block;
      position: relative;
      height: 100%;
      overflow: hidden;
  }
  #mobile-image img{
    position: fixed;
    top: 50%;
    left: 50%;
    height: 100%;
    width: auto;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
  }
  h2#fairfield-headline {
    font-size: 2em;
    line-height: 1.3em;
    font-weight:400;
  }
  #headline .tagline, #scroll-encourage {
    font-size: 1.4em;
  }
  #scroll-encourage{
    display:none;
  }
  .transparent-screen {
    background-color: rgba(40,40,40,.6);
  }
  /***
  *   ADMISSION
  ***/
  #homepage-apply-interstitial-wrapper {
    overflow: scroll;
  }
  #homepage-apply-interstitial-wrapper .vertical-middle {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0,0);
    -webkit-transform: translate(0,0);
    -moz-transform: translate(0,0);
    -o-transform: translate(0,0);
  }
  /***
  *   ANIMATION
  ***/
  #animation {
    min-height: 1300px;
  }
  #animation-1 {
    position: relative;
    width: 96%;
    height: 550px;
  }
  #animation-2 {
    position: relative;
    left: 0;
    width: 96%;
    height: 650px;
  }
  #animation-background{
    background-attachment: scroll;
  }
  /***
  *   SECONDARY STORIES
  ***/
  #secondary-stories {
    padding: 2%;
    width: 96%;
  }
  .news-article .wrapper section h4 {
    font-size: .8em;
  }
  #center-stage {
    padding: 0;
    width: 100%;
  }
  #center-stage-background {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-attachment: scroll;
  }
  #center-stage-text {
      position: relative;
      background-color: #fff;
      width: 90%;
      padding: 2% 5%;
          border: none;
  }
  #news-at-buttons {
    position: relative;
    background-color: #fff;
    padding: 2% 2% 5% 2%;
    width: 96%;
        margin-top: -1%;
  }
  /***
  *   FAST FACTS
  ***/
  .fact{
    width:200px;
    height:200px;
  }
  .fact.small{
    width:150px;
    height:150px;
  }
  .fact .number {
      font-size: 4em;
    }
  #facts-1-background {
      background-attachment: scroll;
    }
}
/* iPhone 6 landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape),
/* iPhone 6 Plus landscape */
only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape),
/* iPhone 5 & 5S landscape */
only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape),
/* iPhone 2G-4S landscape */
only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape),
/* Galaxy landscape */
only screen
and (min-device-width: 320px)
and (max-device-width: 640px)
and (orientation:lanscape) {
  /***
  *   BACKGROUND IMAGE
  ***/
  #mobile-image img {
    width: 100%;
    height: auto;
  }
  #headline .tagline {
    margin-top: 0;
  }
  /***
  *   ADMISSION
  ***/
  .admission-box .info h6 {
    font-size: 1.1em;
    min-height: 50px;
  }
  .admission-box .info>p {
    min-height: 100px;
    font-size: .8em;
  }
}
/* iPhone 6 landscape */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape),
/* iPhone 6 Plus landscape */
only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : landscape)
{
  /***
  *   ADMISSION
  ***/
  .admission-box .info h6 {
    font-size: 1em;
    min-height: 50px;
  }
  .admission-box .info>p {
    min-height: 125px;
    font-size: .7em;
  }
}
@media screen and (max-width : 600px){
  .admission-box {
      width: 96%;
      margin: 1% 0;
  }
  .admission-box .info h6{
    font-size:1.5em;
    min-height:auto;
  }
  .admission-box .info>p {
    min-height: auto;
  }
  .admission-box img {
    width: 50%;
  }
  /***
  *   ANIMATION
  ***/
  .person {
    font-size: 4em;
  }
  /***
  *   SECONDARY STORIES
  ***/
  #secondary-stories .news-article {
    width: 46%;
  }
  /***
  *   EVENTS
  ***/
  .events-column {
    width: 96%;
  }
  /***
  *   FAST FACTS
  ***/
  #facts-1{
    height:600px;
  }
  .fact {
    display: block;
    margin: 2% auto;
  }
}

/* iPad in portrait */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  .section h4.transparent{
   opacity: 1;
 }
 .section h4 {
    line-height: 1.3em;
    margin: 1% 0;
}
  /***
  *   BACKGROUND VIDEO
  ***/
  #background-video{
    height:50vh;
  }
  h2#fairfield-headline {
    font-size:3em;
  }
  #headline .tagline, #scroll-encourage {
    font-size:1.5em;
  }
  #scroll-encourage{
    display:none;
  }

}
/* iPad in landscape */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
  /***
  *   BACKGROUND VIDEO
  ***/
  #background-video{
    height:95vh;
  }

}