body {
    margin: 0;
 /*    font-family: 'Montserrat', sans-serif; */
    color: var(--text-color);
    background-color: var(--white);
    line-height: 1.6;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    min-height:100%;

}

html {
   /*  background-color: var(--white); */
    line-height: 1.125; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    scroll-behavior: smooth;
    overflow: hidden;
    background-color: #000000;
    font-family: 'Roboto', sans-serif;
    font-size: 2vw; 
}



.logo{
    font-family: 'Roboto', sans-serif;
    /* font-family: 'Gruppo', cursive; */
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.4em;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: center;
    
    
}
.logo button:hover{cursor: pointer}
    .logo button {
        /* width: 350px; */
     font-family: 'Roboto', sans-serif;
      background: transparent; outline: none;
      position: relative;
      font-weight: 700;
      line-height: 1.4em;
      border: 0;
      padding: 15px 0px;
      overflow: hidden;
      font-size: 28px;
      color: #fff;
    }

    /*button:before (attr data-hover)*/
    .logo button:hover:before{opacity: 1; transform: translate(0,0);}
    .logo button:before{
      content: attr(data-hover);
      position: absolute;
        font-weight: 700;
    line-height: 1.4em;
      top:15px; left: 0;
      width: 100%;
        font-size: 28px;
     text-transform: uppercase;
      opacity: 0;
      transform: translate(0,-100%);
      transition: all .3s ease-in-out;
      text-align: left;
    }
      /*button div (button text before hover)*/
      button:hover div{opacity: 0; transform: translate(0,100%)}
      button div{
        text-transform: uppercase;

        transition: all .3s ease-in-out;
      }

@media (max-width: 700px) {

    .overlay a {

    font-size: 26px !important; 
     padding: 12px !important; 

}


.overlay .closebtn {

    font-size: 60px  !important; 
    font-weight: 200;
}

    #preloader h1 {

        font-size:6rem !important;
        
    }
    .loader{
        padding: 2px !important;
    }
    .sound_c_hero{
        font-size: 2em !important;
        font-weight: 700;
        text-align: left;
        padding: 4rem;
        word-break: break-word;
       
    }
    .logo{
     /*    padding-left: 2rem; */
           margin-left: 25px;
           font-size: 2.5rem !important;
       
    }
    .logo button{
        font-size: 2.5rem !important;
    }
     .logo button:hover::before{
        font-size: 2.5rem !important;
    }
      .logo button:before{
        font-size: 2.5rem !important;
    }
    .menu{
        /* padding-right: 2rem; */
          margin-right: 25px;
           font-size: 2.5rem !important;
    }
    .content{
        padding: 15rem 2rem !important;
    }
   .swiper-bottom-nav-wrapper {padding-right: 135px !important;}

    #nav-bottom{padding-right: 15px;}
    .middle-logo{ padding-left: 15px;}

}

@media (max-width: 1200px) {
      .swiper-bottom-nav-wrapper {padding-right: 135px !important;}
       #nav-bottom{padding-right: 15px;}
    .middle-logo{ padding-left: 15px;}
        .logo{
   /*      padding-left: 2rem; */
        margin-left: 15px;
    }
        .menu{
        margin-right: 15px;
    }

 }

video {  
    width: 100vw;
    height: 100vh;
  object-fit: cover;

  top: 0;
  left: 0;
  z-index: -1;
}

h1 {
    color: #fff;
     font-family: 'Roboto', sans-serif;
        text-transform: uppercase;

}

h2 {
        text-transform: uppercase;
        margin-bottom: 2rem;
        
}
.red{
    color: #ff0d5d;
     font-weight: 200;

}

.sound_c_hero{
    color: #fff;
    font-weight: 500;
    font-family: 'Gruppo', cursive;
    text-transform: uppercase;
    font-size: 2rem;
    line-height: 161.8%; 
    text-align: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
    
}

.scroller {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.scroller section {
    scroll-snap-align: start;
}

body{

    font-family: 'Gruppo', cursive;

    font-weight: 700;
    line-height: 1.4em;
    margin-bottom: 10px;
    font-size: 18px;
    letter-spacing: .04em;
}
*, *:before, *:after{
  box-sizing: border-box;
  padding: 0; margin: 0;

  text-decoration: none;

}

.menu{
     font-family: 'Roboto', sans-serif;
    /* font-family: 'Gruppo', cursive; */
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.4em;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    text-align: center;
      padding: 15px 0px;
      overflow: hidden;
        font-size: 28px;
      color: #fff;
}

[data-animation="to-bottom"] .outer {
  transform: translateY(-100%);
}
.menu a{
    color: #fff;
}
.menu .outer {
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  color: #ff0d5d;
  transform: translateX(-100%);
   padding: 15px 0px;
}
.menu .inner {
  display: inline-block;
  transform: translateX(100%);
}
.menu a .outer,
.menu a .inner {
  transition: transform 0.15s cubic-bezier(0.29, 0.73, 0.74, 1.02);
}
.menu a:hover .outer,
.menu a:hover .inner {
  transform: none;
}


.middle-logo{      
    z-index: 200;
}

.middle-logo img{
   height: 70px;
   margin-bottom: -10px;
}

#nav-bottom{
    display: flex;
    gap: 10px;
    z-index: 200;
    text-align: right;
}


#nav-bottom-swiper{
   
    display: flex;
    gap: 10px;
}

.filler{
    flex-grow: 1;
}


.wrap-it {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}
.footer-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}
.footer {
    max-width: 1200px;
    width: 100%;
    bottom: 20px;
    position: fixed;
    z-index: 200;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.release-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.sound_c{
  background: url(../assets/sound_c.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
height: 100vh;
 
  width: 100%;

overflow: hidden; 

}
.sound_c2{
  background: url(../assets/soc_2.jpg) no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:100%;
height: 100vh;
 
  width: 100%;

overflow: hidden; 

}

.container {
    
    overflow-y: hidden;
  
    display: flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}


.container .item{
    flex-shrink: 0;
    scroll-snap-align: start;
    width: 100%;
    height: 100vh;
}
p{
    font-weight: 300;
}
.story {
    background-color: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
}
.content{
    padding: 4rem 2rem 13rem 2rem;
    height: 100vh;
    overflow-y: scroll;
  
}

.video-container { position:relative; }
.video-container video {
    position:relative;
    z-index:0;
}

div#columns {
    column-width: 300px;
    column-gap: 3em;
    max-width: 1200px;

}
.item .story{
    background-color: #000;
   /*  height:100%; */
}



.about{
  background: url(../assets/noan_decrow.jpeg) no-repeat center center ;
  background-size: cover;
  -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

overflow: hidden; 
height: 100vh;
  min-height:100%;
    width: 100%;

     color: #fff;
    font-family: 'Roboto', sans-serif;

}

.nav-overlay {
    position:absolute;
    bottom: 2rem;
    padding-left: 2rem; 
    z-index:1;
}
.nav-overlay img{
    height: 50px;
}


.arrow-down {
    transform: rotate(90deg);
    height: 50px;
    transition: opacity 300ms  ease-out;
    opacity: 0;
    cursor: pointer;
}

.arrow-up{
    transform: rotate(-90deg);
    height: 50px;
    transition: opacity 300ms  ease-out;
    opacity: 0;
    cursor: pointer;
}

.arrow-right {
    transform: rotate(0deg);
    height: 50px;
    transition: opacity 300ms  ease-out;
  /*   opacity: 0; */
    cursor: pointer;
}

.arrow-left{
    transform: rotate(-180deg);
    height: 50px;
    transition: opacity 300ms ease-out;
/*     opacity: 0; */
      cursor: pointer;
}



/* .fade-in {
    transition: opacity 1s  ease-out;
    opacity: 0;
} */

.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-bottom {
	-webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/**
 * ----------------------------------------
 * animation slide-bottom
 * ----------------------------------------
 */
@-webkit-keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}
@keyframes slide-bottom {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
}


/**
 * ----------------------------------------
 * animation slide-top
 * ----------------------------------------
 */
@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}


.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}
.swiper-slide {
    text-align: left;
    font-size: 18px;
    overflow: auto;

}


.swiper-button-next-unique, .swiper-button-prev-unique {
  opacity: 1;
  transition: 0.3s ease-in-out;
}
    
.swiper-button-disabled {
      /* visibility: hidden; */
      opacity: 0.2;
      transition: 0.3s ease-in-out;
}


/* Hide scrollbar for Chrome, Safari and Opera */
.scroller::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroller {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.content::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.content {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 700;
    top: 0;
    right: 0;
    background-color: #ff0d5d;
    overflow-x: hidden;
    transition: 0.5s;
    font-family: 'Montserrat';
    font-weight: 600;
}

.overlay-content {
    padding: 20px 20px 0;
    max-width: 960px;
    margin: 0 auto;
    color: #f1f1f1;
      position: relative;
}

.overlay a {
    padding: 18px;
    text-decoration: none;
    font-size: 36px;
    color: #ffffff;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #000000;
    transition: 300ms all;
}
.overlay .social {
    font-weight: 300;
}

.overlay .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 60px;
    font-weight: 200;
}


@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

#preloader{
    z-index: 500;
    position: fixed;
    background-color: #ff0d5d;
    color: #000;
    height: 100%;
    width: 100%;
    transition: 0.5s;
}

#preloader .container {
  padding: 100px 20px 0;
  max-width: 960px;
  margin: 0 auto;
}

#preloader h1 {
  margin: 0;
  text-align: left;
  font-size: 4rem;
  overflow: hidden;
  line-height: 1;
}
#preloader h1 span {
  display: block;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

@keyframes reveal {
  0% {
    transform: translate(0,100%);
  }
  100% {
    transform: translate(0,0);
  }
}

.loader { 
  width:100%; 
  margin:0 auto;
  border-radius:10px;
  border:4px solid transparent;
  position:relative;
  padding:3px;
}
.loader:before {
  content:'';
  border:0px solid #fff; 
  border-radius:10px;
  position:absolute;
  top:-4px; 
  right:-4px; 
  bottom:-4px; 
  left:-4px;
}
.loader .loaderBar { 
  position:absolute;
  border-radius:10px;
  top:0;
  right:100%;
  bottom:0;
  left:0;
  background:#fff; 
  width:0;
  animation:borealisBar 2s linear infinite;
}

@keyframes borealisBar {
  0% {
    left:0%;
    right:100%;
    width:0%;
  }
  10% {
    left:0%;
    right:75%;
    width:25%;
  }
  90% {
    right:0%;
    left:75%;
    width:25%;
  }
  100% {
    left:100%;
    right:0%;
    width:0%;
  }
}

#showMe {
  animation: cssAnimation 0s 1.5s forwards;
  visibility: hidden;
}

@keyframes cssAnimation {
  to   { visibility: visible; }
}


.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 500ms linear;
}

.showlater {
  animation: cssAnimation 0s 0.5s forwards;
  visibility: hidden;
}