@font-face {
    font-family: 'brandongrotesque';
    src: local('Brandon Grotesque Thin'), local('Brandon-Grotesque-Thin'),
        url('../fonts/BrandonGrotesque-Thin.woff2') format('woff2'),
        url('../fonts/BrandonGrotesque-Thin.woff') format('woff'),
        url('../fonts/BrandonGrotesque-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap');
.main-nav, .notice {
    width: 60px;
    height: 30px;
    border-radius: 5px;
    background: linear-gradient(0deg,#000,#8f8888);
    color:white;
    font-family: 'Josefin Sans', sans-serif;
    font-weight:200;
    text-align: center;
    cursor: pointer;
}

* {
    padding:0;
    margin:0;
    box-sizing: border-box; 
}
.mainBtn {
    position:relative;
    /* margin: 20px, auto, 0; */
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 200;
    width: 60px;
    height: 30px;
    border-radius: 7px;
    background: linear-gradient(0deg,#000,#dad0d0);
    color:white;
    
}
.mainBtn:before, 
.mainBtn:after{
    content:' ';
    position: absolute;
    top: -4px;
    left: -4px;
    border-radius: 7px;
    background: linear-gradient(45deg,#3d3c3d,#1c1c1d, #979997, #dadad8,#868484,#636262,#2d2d2e, #8b8d8b, #fcfcfc,#4e4d4d);
    background-size: 400%;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    z-index:-1;
    animation: animate 20s linear infinite;
}
.mainBtn:after{
    filter:blur(20px);
}
@keyframes animate{
 0%{
     background-position: 0 0;
 }
 50%{
    background-position: 400% 0;
}
 100%{
    background-position: 0 0;
}
}
#container0{
    display:flex; 
    height:100vh;
    width:100vw; 
    padding:0;
    margin:0 0 0 -15px;
    box-sizing: border-box;
    animation-delay:13s;
    animation-name: slidein;
    animation-duration:  2s;
    animation-fill-mode: forwards;
   
  }
  
  @keyframes slidein {
    0% {
      height: 100%;
    }
    25% {
        height: 75%;
      } 
    50% {
        height: 50%;
      }   
    75% {
        height: 25%;
      }     
    100% {
      height: 0%;
    }
  }


.toggler {
    border: none;
    outline:none;
    float: right;
    position: absolute;
	top: 10px;
    right: 10px;
    z-index: 0;
    width: 3.25rem;
    height: 3.25rem;
}


#bars{  
    position: absolute;
	top: 0;
    right: 0;
    opacity: 1;
    transition: all .5s;
}
#closeX{
    position: absolute;
	top: 0;
    right: 0;
    opacity: 0;
    transition: all .5s;
}

section{
    margin-bottom: 5vh;
}
.defaultHide{
    transform: rotate(180deg) opacity(0);


}
.hoverShow{
    transform: rotate(90deg) scale(1) opacity(1);
 
}
.nav-link{
    text-align: center;
    font-family: 'brandongrotesque';
    font-weight: 900;
    font-size: 1.75vh;
    color:black;
    height: 15.4vh;
}
ul#socialMenu li{
    display:inline;
}

.maintext{
    font-family: 'brandongrotesque';
    font-weight: 600;
    font-size: 2vw;
    color: black;
    text-align: left;
}
.mainlink{
    font-weight: 700;
    color: black;
    text-decoration: underline;
    font-size: 1.5vw;
}

*
{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
::-webkit-scrollbar{
    width: 1px;
    height: 1px;
}
::-webkit-scrollbar-button{
    width: 1px;
    height: 1px;
}
.external{
    overflow-x: auto;
    height: 70vh;
    width: 100vw;
}
.mediaScroller {
    position: relative;
    place-items: center;
  
    display: grid;
    overflow-x: auto;
  }
.horizontal-scroll{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:65vh;
    transform: rotate(-90deg) translate3d(0, -65vh, 0);
    transform-origin: right top;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    height: 100vw;
    transform-style: preserve-3d;
    padding-bottom: 10rem
}
.carousel{
    width: 100%;
    overflow-x: visible;
    overflow-y: hidden;
    white-space: nowrap;
    height:65vh;

}
.carousel .slide{
    display: inline;
    width:100%
}
.carousel .slide img {
    object-fit: contain;
    height:65vh;
}
.continue-scroll{
    animation: scroll 30s infinite;
    animation-direction: alternate;
    animation-timing-function:ease-in-out;
  
}

/* @keyframes scroll {
    0% {
      transform: translateX(0vw);    
    }

    100% {
      transform: translateX(-600vw);
    }
  } */


.image-wrapper{
    transform: rotate(90deg);
    display: -webkit-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    transform-origin: 50% 50%;
    transform: rotate(90deg) translateZ(.1px) scale (.9) translateX(0px) translateY(-3vh);
    transition: 1s;
}
.image-wrapper:hover{
    min-height: 65vh;
}

.gallery-image{
    max-height: 60vh;
    max-width: 65vh;
    transition: .5s;
    vertical-align: top;
}


.slower{
    transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(0%) translateY(-10vh)
}
.faster{
    transform: rotate(90deg) translateZ(0.15px) scale(0.8) translateX(0%) translateY(14vh)
}
.vertical{
    transform: rotate(90deg) translateZ(-0.15px) scale(1.15) translateX(0%) translateY(0%)
}
.slower-down{
    transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(0%) translateY(16vh)
}
.faster1{
    transform: rotate(90deg) translateZ(0.05px) scale(0.8) translateX(0%) translateY(10vh)
}
.slower1{
    transform: rotate(90deg) translateZ(-0.3px) scale(1.3) translateX(0%) translateY(2vh)
}
.last{
    transform: rotate(90deg) translateZ(-0.2px) scale(1.1) translateX(10vh) translateY(-8vh)
}

.form-wrapper{
    overflow: hidden;

}
.input-group-text{
    padding: 1.2vw;
}
.form-input{
    border: 3px,black;
    width:97%;
    padding-left: 10px ;
    font-family: 'brandongrotesque';
    font-size: 1.5vw;
}
/* liquify button changed from 50px to 100px */
.transparentBtn{
    background-color: transparent;
    color: transparent; 
    border:transparent; 
    outline: none;
}
.transparentBtn:focus, :active {
    background-color: transparent;
    color: transparent; 
    outline:none;
}
.liqudButton {
    position: relative;
    width: 100px;
    height: 50px;
}
.btnText {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'brandongrotesque';
    font-size: 28px;
    z-index: 10;
    color: white;
}
.blurred {
    position: relative;
    top: 0; left: 0;
    width: 100px;
    height: 50px;
    border-radius: 100%;
    filter: url(#goo);
}
.blurred::before {
    content: "";
    position: absolute;
    width: 100px;
    height: 50px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background-color: black;
    border-radius: 100%;
    transition: 1.5s cubic-bezier(0,2,.61,-0.05);
}
.blurred::after {
    content: "";
    position: absolute;
    width: 100px;
    height: 50px;
    top: 0;
    left: 0;
    background-color: black;
    border-radius: 100%;
    transition: 1.7s cubic-bezier(0,2,.61,-0.05);
}
.blurred > span:nth-of-type(1) {
     position: absolute;
     width: 100px;
     height: 50px;
     top: 0;
     left: 0;
     background-color: black;
     border-radius: 100%;
     transition: 1.5s cubic-bezier(0,2,.61,-0.05);
}
.blurred > span:nth-of-type(2) {
      position: absolute;
      width: 100px;
      height: 50px;
      top: 0;
      left: 0;
      background-color: black;
      border-radius: 100%;
      transition: 1.6s cubic-bezier(0,2,.61,-0.05);
}

.liqudButton:hover .blurred::before {
      width: 80px;
      height: 80px;
      top: 50%; left: 50%;
}
.liqudButton:hover .blurred::after {
      width: 15px;
      height: 15px;
      top: 40px;
      left: 95px;
}
.liqudButton:hover .blurred>span:nth-of-type(1) {
       width: 30px;
       height: 30px;
       top: -23px;
       left: -23px;
}
.liqudButton:hover > .blurred>span:nth-of-type(2) {
       width: 25px;
       height: 25px;
       top: 40px;
       left: -20px;
}
.footerClass{
    text-align: center;
    padding: 25px;
    background-color:#e9ecef;
    color:black;
    font-family: 'brandongrotesque';
    font-size: 1.5vw;
  }