@import url(/style/fonts.css);

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'authentic_sans90', sans-serif;
    
}


h1, h2, h3, h4, h5, p, a, button{
    font-weight: 400;
    color: hsl(0, 0%, 50%);
    list-style: none;
    font-size: 9pt;
}

a{
    display: inline-block;
    text-decoration: none;
    
}

a:hover{
    color: #F8A01B;
}

img{
    display: block;
}

::-moz-selection { /* Code for Firefox */
  color: #ffffff;
  background: #F8A01B;
}

::selection {
  color: #ffffff;
  background: #F8A01B;
}


/* BODY */

html, body{
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    background-color: #ffffff;
}

.menu{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    
}

.menu .wrap{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.menu-item{
    display: flex;
    flex-direction: row;
    gap: 7px;
}

.menu-item img{
    width: 35px;
    height: 35px;
}

/* GALLERY */




.gallery-home{
    
    display: flex;
    justify-content: center;
    margin-top: 77px;
}

.gallery-home .gallery{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    max-width: 1920px;
}

.gallery-home .gallery .gallery-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 350px;
    text-align: center;
    position: relative;
}

.gallery-item img{
    display: block;
    width: 100%;
    height: auto;
    
}

.gallery-item video{
    display: block;
    width: 100%;
    height: auto;
}

.gallery-item iframe{
    display: block;
    aspect-ratio: 16 / 9;
    width: 100% !important;
}



.gallery-item:hover .desc{
    display: flex;
    
}

.gallery-item:hover img{
    filter: grayscale(100%);
    
}

.desc{
    position: absolute;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #00000037;
    align-items: center;
    justify-content: center;
}

.desc a{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desc p{
    color: #F8A01B;
    font-size: 40pt;
}


.display{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 140px;
    margin-bottom: 140px;
    text-align: center;
    align-items: center;
}

.display h2{
    font-size: xx-large;
}

.display .gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    gap: 35px;
}

.display .gallery2{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    max-width: 800px;
    gap: 35px;
}

.display .gallery .gallery-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    width: 100%;
    gap: 7px;
}

.back{
    display: flex;
    margin-top: 140px;
}
.back a{
    font-size: x-large;
}

/* FOOTER */
footer{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 70px;
    margin-bottom: 7px;
    z-index: 1;
    position: relative;
}

footer .wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 21px;
    width: 100%;
}

footer .menu-item{
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: center;
}

footer .links{
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
}

footer img{
    width: 100%;
    max-width: 1920px;
}



footer iframe{
    height: 28px;
    display: flex;
    width: 70px;
    border: unset;
    pointer-events: none;
}

.scrolling_text {
    width: 100%;
    overflow: hidden;
    display: flex;
    white-space: nowrap;
    gap: 92px;
}

.scrolling_text .text {
    font-size: 210px;
    text-transform: uppercase;
    color: #808080;
    letter-spacing: -7pt;
}



.scrolling_text .text {
    font-size: 210px;
    text-transform: uppercase;
    color: #808080;
    letter-spacing: -7pt;
    animation: scrollText 30s linear infinite; /* The animation property */
}

@keyframes scrollText {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(-100%, 0, 0);
    }
}