body, html {
height: 100%;
width: 100%;
}

a {
outline: 0!important;
}

.mossPlateCafe {
  margin-top: 18px;
}

.navbar-brand-logo {
  position: absolute;
  width: 100%;
  left: 0;
  top: 12px;
  text-align: center;
  margin: auto;
}

.mobileBackground {
  margin-top: 4.7em;
}

h4.moss-title {
  background-color: #e80093;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-top: 5px;
  margin-bottom: -19px;
  color: white;
  font-family: "Raleway";
  font-weight: 900;
}


h4.mc-title {
  background-color: #1c5fa6;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-top: 5px;
  margin-bottom: -19px;
  color: white;
  font-family: "Raleway";
  font-weight: 900;
}

.custom-bullet li {
  display: block;
  font-weight: 100;
  padding-bottom: 0px;
  color:white;
  }

  i.fas.fa-angle-right{
  padding-right: 10px;
}


/*Menu arrow*/



/*.pink-arrow {
background: url("/moss-house/img/arrowPink.png")no-repeat;
}
.green-arrow {
background: url("/moss-house/img/arrowGreen.png")no-repeat;
}

.mcIcons-arrows  {
float: right;
overflow: hidden;
width:50%;
display: flex;
}

.mossIcons-arrows  {
float: left;
overflow: hidden;
width:50%;
display: flex;
} */

/**************/



/*Mobile bars*/

.icons-barMc {
  background-color:#8eba1f;
  float: left;
  overflow: hidden;
  width:100%;
  display: flex;
  justify-content: space-between;

}

.icons-barMc a {
  float: left;
  width: 19%;
  text-align: center;
  padding: 5px 5px 5px 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 26px;
}

.icons-bar {
  width: 100%;
  background-color: #dd007a;
  overflow: auto;
}

.icons-bar a {
  float: left;
  width: 24%;
  text-align: center;
  padding: 5px 5px 5px 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 26px;
}

.icons-bar-tab a {
  float: left;
  width: 24%;
  text-align: center;
  padding: 5px 5px 5px 5px;
  transition: all 0.3s ease;
  color: white;
  font-size: 26px;
}

.mossMobileBar {
  background-color:#dd007a;
  float: left;
  overflow: hidden;
  width:100%;
  display: flex;
  justify-content: space-between;
}

.mossMobileBar a {
  padding: 6px 6px 0px 8px;
}

.mcMobileIcons {
  background-color:#8eba1f;
  float: left;
  overflow: hidden;
  width:100%;
  display: flex;
  justify-content: space-between;
}

.mcMobileIcons a {
  padding: 6px 6px 0px 8px;
}

.social-bar {
  width: 100%;
  overflow: auto;
  margin-top: 10px;
  background-color: #1c5fa6;
}

.social-bar a {
  float: left;
  text-align: center;
  padding: 15px 10px;
  transition: all 0.3s ease;
  color: white !important;
}

a.backButton {
  float: left;
  text-align: center;
  padding: 12px 10px;
  font-family: "Raleway";
  font-weight: 900;
  font-size:26px;
}

.vr-bar {
  width: 100%;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 30px;
  background-color: #1c5fa6;
}

.vr-bar img {
  float:left;
  padding-top: 10px;
}

#carouselIndicatorsVR, #carouselIndicatorsVRls, #carouselIndicatorsVRglance  {
  background-color: #a2a8b2;
  float: right;
}

#carouselIndicatorsVR h3, #carouselIndicatorsVRls h3, #carouselIndicatorsVRglance h3 {
  text-align: center;
  font-size: 20px;
  color: white;
  padding-top: 12px;
}

#carouselIndicators23 {
  margin-bottom: 1em;
  margin-top: -1.5em;
}

.footer {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 25px;

}

.openDays {
float: left
}

/* Desktop bottom navigation*/

.mossIcons  {
  background-color:#dd007a;
  float: left;
  overflow: hidden;
  width:50%;
  display: flex;
  justify-content: space-between;
}

.mcIcons  {
  background-color: #8eba1f;
  float: right;
  overflow: hidden;
  width:50%;
  display: flex;
  justify-content: space-between;
}

/*Desktop drop down titles*/

.box {
  background: url("../img/drop-down-titles/ataGlanceDropMoss.png")no-repeat;
  position: absolute;
}
.box2 {
  background: url("../img/drop-down-titles/sportsDrop.png")no-repeat;
  position: absolute;
}
.box3 {
  background: url("../img/drop-down-titles/learningSpaceMoss.png")no-repeat;
  position: absolute;
}
.box4 {
   background: url("../img/drop-down-titles/eatingSpacesDropMoss.png")no-repeat;
  position: absolute;
}

.box5 {
  background: url("../img/drop-down-titles/atAglanceDrop.png")no-repeat;
  position: absolute;
}
.box6 {
  background: url("../img/drop-down-titles/postGradMc.png")no-repeat;
  position: absolute;
}
.box7 {
  background: url("../img/drop-down-titles/learningSpacesDrop.png")no-repeat;
  position: absolute;
}
.box8 {
  background: url("../img/drop-down-titles/architectureDrop.png")no-repeat;
  position: absolute;
}
.box9 {
  background: url("../img/drop-down-titles/eatingSpacesDrop.png")no-repeat;
  position: absolute;
}

.carousel-caption p {
color: black;
font-family: 'Raleway', sans-serif;
}

/*Desktop*/

@media (min-width: 1025px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -23em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .main-background {
    background: url("../img/backgrounds/mossHouse.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 4.5em;
    width:30%;
    float:left;
  }

  .footer {
    display: none;
  }

  .mobileWrapper {
    display: none;
  }
  .mobileWrapperMc {
    display: none;
  }

  .nav-bar-desktop {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1;
    animation: slideUp;
    animation-duration: 1s;
  }

  .nav-bar-desktop a {
    float: left;
    padding: 15px 10px;
    transition: all 0.3s ease;
  }

  .mcIcons img {
    width: auto;
    height: 3em;
    margin-left: 10px;
    margin-right: 20px;
  }

  .mossIcons img {
    width: auto;
    height: 3em;
    margin-left: 10px;
    margin-right: 20px;
  }

  .drops {
    width: 100%;
    height: 100%
  }

  .dropholderMoss {
    float:left;
    width:50%;
    margin-top: 8%;
    margin-left: 7%;
  }

  .dropholderMoss img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .dropholderMc img {
    animation: slideDown;
    animation-duration: 1s;
  }


  .dropholderMc {
    float:right;
    width:30%;
    margin-top: 8%;
  }

  .mossImageTitle {
    position: absolute;
    z-index: 1;
    margin-top: -1em;
    margin-left: -3em
  }

  .mcImageTitle {
    position: absolute;
    z-index: 1;
    margin-top: -7em
    margin-right: -14em;
  }

  .mossImageTitle img {
    width: 100%;
    height: 100%;
  }

  .mcImageTitle img {
    width: 100%;
    height: 100%;
  }

  .mossTitles {
    margin-top: 11em;
    margin-left: 1em;
  }

  .mcTitles {
    margin-top: 4.5em;
    margin-left: 0.5em;
  }

  .nav-bar-desktop-arrows {
    width: 100%;
    position: fixed;
    bottom: -2em;
    z-index: 0;
  }

  @keyframes slideUp {
    0% {
    transform: translateY(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideDown {
    0% {
    transform: translateY(-200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 5em;
    left:3em;
  }
  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:100%;
    height:auto;
  }

  .bg-dark {
    background: url("../img/other/dropDownBackgroundDesktop.png")no-repeat;
    position: absolute;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;

  }
  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }
  .tabletWrapper, .tabletWrapperMc {
    display:none;
  }

  .logo {
    margin-top: 0.5em;
    margin-right: 8em;
  }

  .logo img {
    width: 29%;
    height: auto;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height:100px!important;
  }

  #carouselIndicatorsVR h3, #carouselIndicatorsVRls h3, #carouselIndicatorsVRglance h3 {
    text-align: center;
    font-size: 28px;
    color: white;
    padding-top: 36px;
  }

  .navbar > .container,
  .navbar > .container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;

    -ms-flex-pack: justify;
    justify-content: space-between;
      margin-left: 3em;
  }

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

  .fireworks {
    -webkit-animation: fireworkChange 4s;
    -moz-animation:    fireworkChange 4s;
    -o-animation:      fireworkChange 4s;
    animation:         fireworkChange 4s;
    display: block!important;
    position: absolute;
    margin-left: 25%;
  }

  .fireworks img {
    width:75%;
  }


}


@media only screen and (min-width: 1025px) and (max-height: 1000px) {

  .footer {
   display: none;
  }

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -23em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .main-background {
    background: url("../img/backgrounds/mossHouse.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .nav-bar-desktop {
    width: 100%;
    position: fixed;
    bottom: 0;
    animation: slideUp;
    animation-duration: 1s;
  }

  .nav-bar-desktop a {
    float: left;
    padding: 15px 10px;
    transition: all 0.3s ease;
  }

  .mobileWrapper {
    display: none;
  }
  .mobileWrapperMc {
    display: none;
  }

  .mcIcons img {
    width: auto;
    height: 3em;
    margin-left: 10px;
    margin-right: 20px;
  }

  .mossIcons img {
    width: auto;
    height: 3em;
    margin-left: 10px;
    margin-right: 20px;
  }

  .drops {
    width: 100%;
    height: 100%
  }

  .dropholderMoss {
    float:left;
    width:50%;
    margin-top: 8%;
    margin-left: 7%;
  }

  .dropholderMoss img {
   animation: slideInFromLeft;
   animation-duration: 1s;
  }

  .dropholderMc img {
    animation: slideDown;
    animation-duration: 1s;
  }

  .dropholderMc {
    float:right;
    width:30%;
    margin-top: 8%;
  }

  .mcImageTitle img {
    width: 100%;
    height: 100%;
  }

  .mossImageTitle img {
    width: 85%;
    height: 85%;
  }

  .mossTitles {
    margin-top: 9em;
    margin-left: 1em;
  }

  .mcTitles {
    margin-top: 5em;
    margin-left:0.25em;
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideUp {
    0% {
    transform: translateY(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideDown {
    0% {
    transform: translateY(-200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 5em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:100%;
    height:auto;
  }

  .bg-dark {
    background: url("../img/other/dropDownBackgroundDesktop.png")no-repeat;
    position: absolute;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 3.5em;
    float: left;
    width:35%;
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }
  .tabletWrapper, .tabletWrapperMc {
    display:none;
  }

  .logo {
    margin-top: 0.5em;
    margin-right: 8em;
  }

  .logo img {
    width: 29%;
    height: auto;
  }


  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height:100px;
  }

  #carouselIndicatorsVR h3, #carouselIndicatorsVRls h3, #carouselIndicatorsVRglance h3 {
    text-align: center;
    font-size: 28px;
    color: white;
    padding-top: 36px;
  }

  .navbar > .container,
  .navbar > .container-fluid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
     margin-left: 3em;
  }

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

  .fireworks {
    -webkit-animation: fireworkChange 4s;
    -moz-animation:    fireworkChange 4s;
    -o-animation:      fireworkChange 4s;
    animation:         fireworkChange 4s;
    display: block!important;
    position: absolute;
    margin-left: 25%;
  }

  .fireworks img {
    width:75%;
  }

}

/* Tablet*/

@media only screen and (max-width: 1024px) and (min-width: 577px) and (max-height: 1400px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -23em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .nav-bar-desktop {
    display: none;
  }

  .footer {
    display: none;
  }

  .drops {
    display: none;
  }
  .mobileWrapper {
    display:none;
  }
  .mobileWrapperMc {
    display: none;
  }

  .tabletWrapperMc {
    background: url("../img/backgrounds/tabletBackgroundMc.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  .tabletWrapper {
    background: url("../img/backgrounds/tabletBackground.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  /*Modal Pop out*/
  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 6em;
    left:3em;
  }
  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }


  /*Main Slides*/
  .tabletmcMovement {
    position: fixed;
    bottom:-15px;
    width:100%;
  }

  .slideInPlane {
    margin-top: 1em;
    margin-left: 18%;
  }

  .slideInPlane img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .tabletslideInMc {
    margin-left: 49%;
    overflow: hidden;
  }

  /*Slide ins McHouse*/
  .tabletslideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
  }

  .mcHoodieTablet {
    overflow: hidden;
  }

  .slideInHoodieTablet img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .bg-dark {
    background: url("../img/other/tabletDropDown.png")no-repeat;
    position: absolute;
    position: absolute;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }
  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    float: left;
    width:30%;
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }
  .logo {
    margin-top: 1em;
    margin-right: 45%;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height:95px!important;
  }

  #carouselIndicatorsVR h3, #carouselIndicatorsVRls h3, #carouselIndicatorsVRglance h3 {
    text-align: center;
    font-size: 28px;
    color: white;
    padding-top: 20px;
  }

  .fireworks {
    display:none;
  }
}

@media only screen and (max-width: 1024px) and (min-width: 577px) and (max-height: 1100px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -14em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .nav-bar-desktop {
    display: none;
  }

  .footer {
    display: none;
  }

  .drops {
    display: none;
  }
  .mobileWrapper {
    display:none;
  }

  .mobileWrapperMc {
    display: none;
  }

  .slideInPlane {
    display:none;
  }

  .tabletWrapperMc {
    background: url("../img/backgrounds/tabletBackgroundMc.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  .tabletWrapper {
    /background: url("../img/backgrounds/tabletBackground.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  /*Modal Pop out*/
  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 2em;
    left:3em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  /*Main Slides*/
  .tabletmcMovement {
    position: fixed;
    bottom:-15px;
    width:100%;
  }

  .slideInPlane {
    display:none;
  }

  .tabletslideInMc {
    margin-left: 49%;
    overflow: hidden;
  }

  /*Slide ins McHouse*/
  .tabletslideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
  }

  .mcHoodieTablet {
    overflow: hidden;
  }

  .slideInHoodieTablet img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .bg-dark {
    background: url("../img/other/tabletDropDown.png")no-repeat;
    position: absolute;
    position: absolute;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:40%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }

  .logo {
    margin-top: 1em;
    margin-right: 45%;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .fireworks {
    display:none;
  }
}

/*LandscapeMobiles*/

@media only screen and (max-width: 830px) and (min-width: 581px) and (max-height: 600px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -23em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .nav-bar-desktop {
    display: none;
  }

  .footer {
    display: none;
  }

  .drops {
    display: none;
  }

  .mobileWrapper {
    display:none;
  }

  .mobileWrapperMc {
    display: none;
  }

  .slideInPlane {
    display: none;
  }

  .tabletslideInMc {
    display: none;
  }

  .tabletWrapperMc {
    background: url("../img/backgrounds/landscapeBackgroundMc.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  .tabletWrapper {
    background: url("../img/backgrounds/landscapeBackgroundMoss.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  margin-top:1em;
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  /*Modal Pop out*/
  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 2em;
    left:3em;
  }
  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  /*Main Slides*/
  .tabletmcMovement {
    position: fixed;
    bottom:-15px;
    width:100%;
  }

  .slideInPlane {
  display:none!important;
  }

  .tabletslideInMc {
    margin-left: 49%;
    overflow: hidden;
  }

  /*Slide ins McHouse*/
  .tabletslideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
  }

  .mcHoodieTablet {
    overflow: hidden;
  }

  .slideInHoodieTablet img {
    display: none;
  }

  .bg-dark {
    background: url("../img/other/tabletDropDown.png")no-repeat;
    position: absolute;
    position: absolute;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:55%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }
  .logo {
    margin-top: 1em;
    margin-right: 45%;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .fireworks {
    display:none;
  }

  .carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 4em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  h4.moss-title {
    background-color: #e80093;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-top: 5px;
    margin-bottom: -1px;
    color: white;
    font-family: "Raleway";
    font-weight: 900;
  }


  #carouselIndicators23 {
    margin-bottom: 1em;
    margin-top: -0.5em;
  }

  .mossPlateCafe {
    margin-top: 0px;
  }
}




@media only screen and (max-width: 830px) and (min-width: 581px) and (max-height: 599px) and (min-height: 500px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -23em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .nav-bar-desktop {
    display: none;
  }

  .footer {
    display: none;
  }

  .drops {
    display: none;
  }
  .mobileWrapper {
    display:none;
  }

  .mobileWrapperMc {
    display: none;
  }

  .tabletWrapperMc {
    background: url("../img/backgrounds/tabletBackgroundMc.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  .tabletWrapper {
    background: url("../img/backgrounds/tabletBackground.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }


  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
  }
  }

  /*Modal Pop out*/
  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 2em;
    left:3em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  /*Main Slides*/
  .tabletmcMovement {
    position: fixed;
    bottom:-15px;
    width:100%;
  }

  .slideInPlane {
    display: none;
  }

  .tabletslideInMc {
    margin-left: 49%;
    overflow: hidden;
  }

  /*Slide ins McHouse*/
  .tabletslideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
  }

  .mcHoodieTablet {
    overflow: hidden;
  }

  .slideInHoodieTablet img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }


  .bg-dark {
    background: url("../img/other/tabletDropDown.png")no-repeat;
    position: absolute;
    position: absolute;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:100%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }

  .logo {
    margin-top: 1em;
    margin-right: 45%;
  }

  .fireworks {
    display:none;
  }
}

/*Mobiles*/

@media (max-width: 580px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -11em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .navbar-brand-logo {
    position: absolute;
    width: 100%;
    left: 105px;
    top: 22px;
    text-align: center;
    margin: auto;
    }

  .mcMobileIcons img {
    width:90%;
  }

  .navbar-brand-logo img {
    width:27%;
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 2em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  .modal-title {
    font-size: 20px!important;
    padding:20px!important;
  }

  .modal-titleSubMc {
    font-size: 20px!important;
    padding:20px!important;
  }

  .mobileImage {
    margin-right: 10px;
    margin-left: 10px;
  }

  .mobileMc {
    margin-right: 10px;
    margin-left: 10px;
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .mobileWrapper {
    background: url("../img/backgrounds/moss-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:0em;
  }

  .mobileWrapperMc {
    background: url("../img/backgrounds/mc-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin-top:-1em;
  }

  .mcHoodie {
    position: fixed;
    bottom: -1.75em;
    width: 100%;
  }

  .slideInHoodie img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .mcMovement {
    position: absolute;
    bottom: 0em;
    width: 100%;
  }

  .slideInPlane {
    margin-top: -17%;
    margin-left: 18%;
  }

  .slideInPlane img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .slideInMc {
   margin-left: 54%;
  }

  /*Slide ins McHouse*/
  .slideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
    margin-top: 2em
  }

  .nav-bar-desktop {
    display:none;
  }

  .drops {
    display: none;
  }

  .bg-dark {
    background: url("../img/other/dropDownBackground678.png")no-repeat;
    position: absolute;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    list-style: none;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:100%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }
  .tabletWrapper, .tabletWrapperMc {
    display:none;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 58px;
  }

  .fireworks {
    display:none;
  }
  .carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 0px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
  }

  .carousel-caption h3 {
    text-shadow: 2px 2px #000000;
    padding: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    font-size: 12px;
  }

  .carousel-caption p {
    /*  background-color: #ff007d;*/
    text-shadow: 2px 2px #000000;
    padding: 10px;
    font-weight: 700;
    font-size: 10px;
    /*transform: rotate(351deg);*/
    font-family: 'Raleway', sans-serif;
  }


}

@media only screen and (max-width: 579px) and (max-height: 600px) and (min-height: 500px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -10em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .navbar-brand-logo {
    position: absolute;
    width: 100%;
    left: 81px;
    top: 20px;
    text-align: center;
    margin: auto;
  }

  .navbar-brand-logo img {
    width:35%
  }

  .bg-dark {
    background: url("../img/other/dropDownBackground.png")no-repeat;
    position: absolute;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:100%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom:2em;
    list-style: none;
  }


  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
  }
  }

  .top-header img {
    height: 100%;
    width: 100%;
  }

  .headerPlane {
    position: absolute;
    top: 2em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  .drops {
    display: none;
  }

  .nav-bar-desktop {
    display:none;
  }

  .modal-title {
    font-size: 20px!important;
    padding:20px!important;
  }

  .modal-titleSubMc {
    font-size: 20px!important;
    padding:20px!important;
  }

  .mobileImage {
    margin-right: 10px;
    margin-left: 10px;
  }


  .mobileMc {
    margin-right: 10px;
    margin-left: 10px;
  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .mobileWrapper {
    background: url("../img/backgrounds/moss-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:0em;
  }

  .mobileWrapperMc {
    background: url("../img/backgrounds/mc-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin-top:-1em;
  }


  .mcMovement {
    position: absolute;
    bottom: 0em;
    width: 100%;
  }

  .slideInPlane {
    margin-top: -26%;
    margin-left: 18%;
  }

  .slideInPlane img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .slideInMc {
    margin-left: 49%;
  }

  /*Slide ins McHouse*/
  .slideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
    margin-top: -1.25em;
  }

  .mcHoodie {
    position: fixed;
    bottom: -1.75em;
    width: 100%;
  }

  .slideInHoodie img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }


  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 58px;
  }

  .fireworks {
    display:none;
  }

  .mcMobileIcons img {
    width:90%;
  }


}

@media only screen and (max-width: 579px) and (max-height: 499px) and (min-height: 200px) {

  .carousel-indicators {
    position: relative;
    right: 0;
    bottom: -9em;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
  }

  .navbar-brand-logo {
    position: absolute;
    width: 100%;
    left: 81px;
    top: 20px;
    text-align: center;
    margin: auto;
  }

  .navbar-brand-logo img {
    width:25%
  }

  .bg-dark {
    background: url("../img/other/dropDownBackground.png")no-repeat;
    position: absolute;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  .ml-auto,
  .mx-auto {
    margin-left: auto !important;
    font-family: 'Raleway';
    font-weight:900;
    cursor: pointer;
    color: white;
    margin-top: 1.5em;
    width:100%;
    float:left
  }

  .mcMobTitle {
    margin-top: 25px;
  }

  .mcMossTitle, .mcMobTitle {
    font-size: 1.5em;
  }

  .navbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.5rem 1rem;
  }

  .navbar-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom:2em;
    list-style: none;
  }

  @keyframes slideInFromRight {
    0% {
    transform: translateX(200%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .top-header img {
      height: 100%;
      width: 100%;
    }

  .headerPlane {
    position: absolute;
    top: 2em;
  }

  .headerPlane img {
    animation: slideInFromRight;
    animation-duration: 1s;
    width:70%;
    height:auto;
  }

  .drops {
    display: none;
  }

  .nav-bar-desktop {
    display:none;
  }

  .modal-title {
    font-size: 20px!important;
    padding:20px!important;
  }

  .modal-titleSubMc {
    font-size: 20px!important;
    padding:20px!important;
  }

  .mobileImage {
    margin-right: 10px;
    margin-left: 10px;
  }

  .mobileMc {
    margin-right: 10px;
    margin-left: 10px;

  }

  @keyframes slideInFromLeft {
    0% {
    transform: translateX(-100%);
    }
    100% {
    transform: translateX(0);
    }
  }

  .mobileWrapper {
    background: url("../img/backgrounds/moss-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top:1em;
  }

  .mobileWrapperMc {
    background: url("../img/backgrounds/mc-house-back.png")no-repeat;
    height: 100%;
    width: 100%;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      margin-top:-1em;
  }

  .mcMovement {
    position: absolute;
    bottom: -2.5em;
    width: 100%;
  }

  .slideInPlane {
    margin-top: -26%;
    margin-left: 18%;
  }

  .slideInPlane img {
    animation: slideInFromLeft;
    animation-duration: 1s;
    margin-bottom: -90px;
  }

  .slideInMc {
    margin-left: 49%;
    overflow: hidden;
  }

  /*Slide ins McHouse*/
  .slideInMc img {
    animation: slideInFromRight;
    animation-duration: 1s;
  }

  .mcHoodie {
    position: fixed;
    bottom: -1.75em;
    width: 100%;
  }

  .slideInHoodie img {
    animation: slideInFromLeft;
    animation-duration: 1s;
  }

  .tabletWrapper, .tabletWrapperMc {
    display:none;
  }

  .carousel-innerVR{
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 68px;
  }

  .mcMobileIcons img {
    width:90%;
  }

  .fireworks {
    display:none;
  }

  .carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
  }


  .carousel-caption h3 {
    text-shadow: 2px 2px #000000;
    padding: 10px;
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
  }

  .carousel-caption p {
  text-shadow: 2px 2px #000000;
  padding: 10px;
  font-weight: 700;
  font-size: 10px;
  font-family: 'Raleway', sans-serif;
  }

}