/* CSS files add styling rules to your content */

  
@font-face {
  font-family: 'MidCentury-Light';
  src: url('glitch-assets/MidCenturySans-Light.WOFF') format('woff');
 font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MidCentury-Regular';
  src: url('glitch-assets/MidCenturySans-Regular.WOFF') format('woff');
 font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MidCentury-SemiBold';
  src: url('glitch-assets/MidCenturySans-SmBold.WOFF') format('woff');
 font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MidCentury-Bold';
  src: url('glitch-assets/MidCenturySans-Bold.WOFF') format('woff');
 font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MidCentury-Heavy';
  src: url('glitch-assets/MidCenturySans-Heavy.WOFF') format('woff');
 font-weight: normal;
  font-style: normal;
}



body {
  font-family: futura, arial, sans-serif;
  margin: 0 auto;
  background:#222;
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-y:scroll;
/*   width:100vw;
  height:100vh; */
  width:100%;
}

body::-webkit-scrollbar {
  display: none;
}


/*---- TYPE -----*/

h1 {
  font-family: futura-bold, arial, sans-serif;
  color: #fff;
  font-size: 4rem;
  line-height: 148%;
}

@media(max-width: 1800px){
  h1 {
  font-size: 3.2rem;
  }
}

@media(max-width: 1400px){
  h1 {
  font-size: 2.8rem;
  }
}

@media(max-width: 700px){
  h1 {
  font-size: 2.2rem;
}
}

h2 {
    font-family: 'MidCentury-SemiBold';
    font-size: 2rem;
    line-height: 145%;
  font-weight:normal;
}

@media(max-width: 1680px){
  h2 {
    font-size: 1.75rem;
    -webkit-font-smoothing:antialiased;
    font-weight:normal;
}
}

/*---- NUMBERS -----*/

.number {
    font-family: 'MidCentury-Heavy';
    font-size: 9rem;
    line-height: 106%;
    margin: 0rem;
    -webkit-text-stroke: white 2px;
    color: transparent;
  transition:all .3s ease;
}

.section:hover .number {
    -webkit-text-stroke: #222 2px;
    color: #222;
  transition:all .3s ease;
}


@media(max-width:1900px){
.number {
  -webkit-text-stroke: white 1.7px;
    font-size: 5rem;
    line-height: 109%;
}
  .section:hover .number {
    -webkit-text-stroke: #222 1.7px;
}
}

@media(max-width:1024px){
.number {
    -webkit-text-stroke: white 1.5px;
       font-size: 4.4rem;
    line-height: 109%;
}
}


@media(max-width:700px){
.number {
    -webkit-text-stroke: white 1.5px;
       font-size: 3.4rem;
    line-height: 109%;
}

.section:hover .number {
    -webkit-text-stroke: #222 1.5px;
}
}

/*---- TOP CONTENT -----*/

.main-info {
  width: 63%;
  margin-left: 3rem;
  margin-top: 6%;
  /* line-height: 2.9rem; */
  margin-bottom: 15%;
}

img.logo {
    width: 3.7vw;
    margin-bottom: 2rem;
    transition:all .3s ease;
}

@media(max-width: 1600px){
  img.logo {
    width: 6vw;
    transition:all .3s ease;
}
}

@media(max-width: 1400px){
    img.logo {
    width: 5vw;
      transition:all .3s ease;
}

}

@media(max-width: 1800px){
.main-info {
  width: 75%;
  margin-left: 3rem;
  margin-top: 12%;
  /* line-height: 2.9rem; */
  margin-bottom: 15%;
}
}

@media(max-width: 900px){
.main-info {
  display:none;
}
}


/*---- OVERALL WRAPPER -----*/

.event-wrap {
    width: 100%;
    margin: 3rem auto;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
}

@media(max-width: 900px){
.event-wrap {
  display:none;
}
}

/*---- EVENT CONTAINER -----*/

.event-container {
    display: flex;
/*     background: yellow; */
    width: 75%;
    margin-left: 3rem;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
      -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.event-container::-webkit-scrollbar {
  display: none;
}


@media(max-width: 1680px){
.event-container {
  width: 80%;
}
}

@media(max-width: 1400px){
.event-container {
    display: flex;
/*     background: yellow; */
    width: 85%;
    margin-left: 3rem;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
/*          overflow-x:hidden;
  overflow-y:visible; */
}
}

@media(max-width: 1024px){
.event-container {
    display: flex;
/*     background: yellow; */
    width: 100%;
    margin-left: 3rem;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
       overflow-x:hidden;
  overflow-y:scroll;
}
}

@media(max-width: 600px){
    .event-container {
    display: flex;
/*     background: yellow; */
    width: 100%;
    margin-left: 0rem;
    padding: 2rem;
    align-items: center;
    align-content: center;
    flex-direction: column;
    height: 100%;
}
}


/*---- DESKTOP SECTIONS -----*/

.section {
  border:2px solid #fff;
  box-sizing:border-box;
  min-height: 36rem;
  padding: 4rem;
  font-size:1.4rem;
  margin-top: -2px;
  margin-right: 2px;
  position: relative;
  transition:all .3s ease;
  z-index:0;
}

@media(max-width: 1700px){
  .section {
  padding: 3rem;
    min-height: 32rem;
}
}


/* bring section heights down on shorter screens */

@media(max-height: 1000px){
  .section {
    min-height: 30rem;
}
}



.section.small:hover {
  border:2px solid yellow;
  background:yellow;
  color:#222;
  transition:all .3s ease;
}
.section.medium:hover {
  border:2px solid deeppink;
  background:deeppink;
  color:#222;
  transition:all .3s ease;
}
.section.large:hover {
  border:2px solid cyan;
  background:cyan;
  color:#222;
  transition:all .3s ease;
}

.section.small.active {
  border:2px solid yellow;
  background:yellow;
  color:#222;
  transition:all .3s ease;
}
.section.medium.active {
  border:2px solid deeppink;
  background:deeppink;
  color:#222;
  transition:all .3s ease;
}
.section.large.active {
  border:2px solid cyan;
  background:cyan;
  color:#222;
  transition:all .3s ease;
}

.small {
/*   background:red; */
  width:35%;
}
.medium {
/*   background:blue; */
  width:50%;
}
.large {
/*   background:green; */
  width:75%;
}

.left {
  align-self:flex-start;
  justify-self:left;
}
.middle {
  align-self:center;
  justify-self:middle;
}
.right {
  align-self:flex-end;
  justify-self:right;
}

.short {
  min-height: 18rem;
}

.tall {
  min-height: 44rem;
}

.section.divider {
    border-left: 2px solid #fff;
    border-right: none;
    border-top: none;
    border-bottom: none;
    pointer-events:none;
}

.section.divider.linked {
    pointer-events:all;
}

/*---- PHABLET SECTIONS -----*/

@media(max-width: 1680px){  
.small {
/*   background:red; */
  width:55%;
}
.medium {
/*   background:blue; */
  width:65%;
}
.large {
/*   background:green; */
  width:80%;
}
}

@media(max-width: 1024px){  
.small {
/*   background:red; */
  width:55%;
}
.medium {
/*   background:blue; */
  width:70%;
}
.large {
/*   background:green; */
  width:80%;
}
}



/*---- MOBILE SECTIONS -----*/

@media(max-width: 600px){  
  .section {
  font-size:1.2rem;
    margin-bottom:3rem;
    padding:3rem;
}

.small {
/*   background:red; */
  width:100%;
}
.medium {
/*   background:blue; */
  width:100%;
}
.large {
/*   background:green; */
  width:100%;
}

.left {
  align-self:flex-start;
  justify-self:left;
}
.middle {
  align-self:flex-start;
  justify-self:left;
}
.right {
  align-self:flex-start;
  justify-self:left;
}
}


/*--- TIMELINE & YEARS ---*/

/* sticky */

/* .timeline-wrap {
    width: 10%;
    position: sticky;
    top: 3rem;
    height: 97vh;
    border-left: 2px solid white;
    padding-left: 3rem;
} */

/* non-sticky */

.timeline-wrap {
    width: 10%;
    position: relative;
    top: 3rem;
    height: 13000px;
    border-left: 2px solid white;
    padding-left: 3rem;
}

@media(max-width: 1680px){
  .timeline-wrap {
     width: 9%;
  }
}


.year-wrap {
/*     display: flex; */
    width: 100%;
/*     height: -webkit-fill-available; */
/*     flex-direction: column; */
/*     justify-content: flex-start; /* space-between for non-accurate years, flex-start with active js to make years accurate*/ */
}

/*----- END modes */

p.year-title {
    font-family: MidCentury-Bold;
    letter-spacing: .2rem;
    font-size: 1.8rem;
    margin-left: 7px;
    position:sticky;
    top:3rem;
}

.yearone {
  position:sticky;
  top:7rem;
}

.yeartwo {
  position:sticky;
  top:7rem;
}

.yearthree {
  position:sticky;
  top:7rem;
}

.yearfour {
  position:sticky;
  top:7rem;
}

.yearfive {
  position:sticky;
  top:7rem;
}

.yearsix {
    bottom: 0rem;
    position: absolute;
}

@media(max-width: 1600px){
  .timeline-wrap {
    display:none;
  }
}

p.year {
    font-size: 3.35rem;
    box-sizing: border-box;
    width: 3.5rem;
    height: 3.5rem;
/*     margin-bottom: 5rem; */
    padding: 3.5rem;
    border-radius: 3.5rem;
    background: #222;
    display: flex;
    align-items: center;
    align-content: center;
    text-align: center;
    justify-content: center;
    justify-items: center;
    font-family: MidCentury-Bold;
    -webkit-text-stroke: 2px white;
    color: #222;
    transition:all .4s ease;
}

p.yearone.active {
    background: deeppink;
    -webkit-text-stroke: 2px #222;
    color: #222;
  transition:all .4s ease;
}

p.yeartwo.active {
    background: yellow;
    -webkit-text-stroke: 2px #222;
    color: #222;
  transition:all .4s ease;
}

p.yearthree.active {
    background: cyan;
    -webkit-text-stroke: 2px #222;
    color: #222;
  transition:all .4s ease;
}

p.yearfour.active {
    background: green;
    -webkit-text-stroke: 2px #222;
    color: #222;
  transition:all .4s ease;
}

p.yearfive.active {
    background: white;
    -webkit-text-stroke: 2px #222;
    color: #222;
  transition:all .4s ease;
}


/*---- CURVY DIVIDER ----*/

.section.curvy {
    border: none;
    /*     background: yellow; */
    padding: 0rem;
    margin-bottom: -5px;
}

.section.curvy svg {
    width: 38%;
    object-position: left center;
    height: 100%;
}


/*--- BUTTONS ----*/

.button {
    background: #222;
    border: 2px solid white;
    width: 7rem;
    height: 7rem;
    padding: 7rem;
    border-radius: 8rem;
    font-size: 1.6rem;
    font-family: MidCentury-Bold;
    margin-left: 3rem;
    box-sizing: border-box;
    display: flex;
    position: relative;
    justify-content: center;
    justify-items: center;
    justify-content: center;
    align-items: center;
    align-content: center;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition:all .3s ease;
    overflow: hidden;
    position: relative;
}

.section:hover .button {
    background: #222;
    border: 2px solid #222;
    color: #white;
  transition:all .3s ease;
}

.section:hover .button:hover {
    background: white;
    border: 2px solid white;
    color: #222;
  transition:all .3s ease;
}

.button-case {
    width: 100%;
/*     background: blue; */
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    justify-items: center;
    margin-top: 3rem;
   transform:scale(1);
   transform-origin:bottom right;
}

@media(max-width: 1680px){
 .button-case {
 transform:scale(.85);
   transform-origin:bottom right;
}
}


/*--- MANUAL COLOR OVERRIDES ---*/

.yellow:hover {
  border:2px solid yellow !important;
  background:yellow !important;
  color:#222;
  transition:all .3s ease;
}
.magenta:hover {
  border:2px solid deeppink !important;
  background:deeppink !important;
  color:#222;
  transition:all .3s ease;
}
.cyan:hover {
  border:2px solid cyan !important;
  background:cyan !important;
  color:#222;
  transition:all .3s ease;
}
.green:hover {
  border:2px solid lime !important;
  background:lime !important;
  color:#222;
  transition:all .3s ease;
}

/*--- sound button ---*/

span.action-label {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    opacity: 1;
    z-index: 0;
}

.soundwave {
/*   display:none; */
    height: 14rem;
    width: 14rem;
/*     background: red; */
    position: relative;
    z-index: 1;
    padding: 0rem;
    left: 0rem;
  opacity:0;
    /* object-position: left; */
}

.soundwave.active {
/*   display:none; */
    height: 14rem;
    width: 14rem;
/*     background: red; */
    position: relative;
    z-index: 1;
    padding: 0rem;
    left: 0rem;
  opacity:1;
  -webkit-animation-name: wave;
 -webkit-animation-duration: 2.8s;
 -webkit-animation-direction: forwards;
 -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
    /* object-position: left; */
}

.soundwave.wave svg {
    width: 90rem;
    height: auto;
    left: 0px;
    object-position: left center;
    position: relative;
    left: 0rem;
    top: 18.75%;
}



@-webkit-keyframes wave {
 from {
   left: 0rem;
 }
 to {
   left: -76rem;
 }
}

@keyframes wave {
 from {
   left: 0rem;
 }
 to {
   left: -76rem;
 }
}

.button.audio {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-items: center;
    align-content: center;
}

.button.audio.active {
   border: 2px solid deeppink !important;
}

.action-label.hide {
  opacity:0;
  pointer-events:none;
}

.hide {
  opacity:0;
  pointer-events:none;
}

.images {
    position: absolute;
    width: 10rem;
    height: 10rem;
    top: 0rem;
/*     background: red; */
    left: 0rem;
    opacity:0;
  transition:all .3s ease;
  z-index:-1;
  pointer-events:none;
  transform:scale(1);
}

@media(max-width: 1680px){
  
  .images {
    transform:scale(.7);
  }
  
}

@media(max-width: 1024px){
  
  .images {
    transform:scale(.63);
  }
  
}

.section:hover .images {
  opacity:1;
  transition:all .3s ease;
}

.images img {
    width: 100%;
}

/*--- middle facing image styles ----*/

img.main-image {
    width: 50rem;
    position: absolute;
    top: 0rem;
    left: 62rem;
}

img.side-image1 {
    width: 38rem;
    position: absolute;
    left: -30rem;
    top: 40rem;
}

img.side-image2 {
    width: 50rem;
    top: -20rem;
    left: -20rem;
    position: absolute;
}

img.side-image3 {
    width: 32rem;
    position: absolute;
    top: 40rem;
    left: 62rem;
}

.section.large.middle .images img.main-image {
    top: -14rem;
    left: 94rem;
}

/* .section.large.middle .images img.side-image1 {
    top: 30rem;
    left: -4rem;
    width: 50rem;
} */

.section.large.middle .images img.side-image2 {
    width: 50rem;
    top: -25rem;
    left: -20rem;
}

.section.large.middle .images img.side-image3 {
    top: 50rem;
}

.section.large.middle .images img.side-image1 {
    top: 35rem;
    left: -14rem;
    width: 50rem;
}


/*--- right facing image styles ----*/

.section.small.right .images img.main-image {
    left: -69rem;
    top: 7rem;
}

.section.medium.right .images img.main-image {
    left: -50rem;
    top: 5rem;
  width:45rem;
}

/* .section.medium.right .images img.side-image1 {
    top: -32rem;
    left: -8rem;
}
 */
/* .section.medium.right .images img.side-image2 {
    width: 39rem;
    top: 41rem;
    left: -12rem;
} */

/*--- left facing image styles ----*/



.section.medium.left .images img.side-image2 {
    top: -27rem;
    left: -6rem;
}

.section.medium.left .images img.side-image1 {
    left: 0rem;
}



.section.large.left .images img.main-image {
    width: 35rem;
    left: 94rem;
}

.section.large.left .images img.side-image1 {
    left: 0rem;
}

.section.large.left .images img.side-image2 {
    width: 40rem;
    left: 30rem;
      top: -30rem;
}

.section.large.left .images img.side-image3 {
    top: 50rem;
    width: 41rem;
}

/*---- MOBILE BLOCKER ----- */

.mobile-warning {
    opacity:0;
    pointer-events:none;
   transition:all .5s ease;
}

@media(max-width: 900px){
  .mobile-warning {
    background: #222;
    width: 100vw;
    height: 100vh;
    position: absolute;
    padding: 6rem;
    top: 0rem;
    z-index: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    font-size: 6vw;
    border: 2px solid #fff;
    box-sizing: border-box;
    font-family: 'MidCentury-Semibold';
    opacity:1;
    pointer-events:none;
    transition:all .5s ease;
}
}