.background {
    /*
      background-image: url('../assets/welcome-bg.png');
*/
    background-size: cover;
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #DFDACF;
}





@media only screen and (max-width: 780px) {


    .image-button img{
        width: 100%;
    }
}

.image-button a{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    letter-spacing: 1px;
    color: red;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'codec';
    font-weight: 300;
    padding: 20px 0px;
    transition: all .3s ease;
    
}

.image-button a:hover{
    transform: translate(-50%, -55%);
    transition: all .3s ease;
    transform-origin: center center;
}

.text-link{
    font-weight: bold;
    font-family: 'codec';
    text-align: center;
    text-decoration: underline;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 300;
}

.text-link:visited{
    color: white;
}

.absolute{
    position: absolute;
}

p {
    font-family: 'pinup';
    font-weight: 100;
}

p strong{
    font-weight: 300;
}

.title{
    font-family: 'pinup';
}

.gamer-line-left{
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

.gamer-line-left-animation {
    animation: dash 2s linear forwards;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.splide__slide{
    opacity: 0;
}

.splide__slide img{
    -webkit-filter: drop-shadow(0px 2px 7px rgba(0,0,0,.6));
    filter: drop-shadow(0px 2px 7px rgba(0,0,0,.6));
}

.splide__arrow{
    background-color: transparent !important;
    width: 50px !important;
    height: 50px !important;
}

.splide__arrow svg{
    display: none !important;
}

.splide__arrow--prev{
    background-image: url('../assets/section4/flechaizq.png') !important;
    background-size: cover !important;
}

.splide__arrow--next{
    background-image: url('../assets/section4/flechader.png') !important;
    background-size: cover !important;
}

.desktop{
    display: block;
}

.mobile{
    display: none;
}

@media only screen and (max-width: 900px) {
    .mobile{
        display: block;
    }
    
    .desktop{
        display: none;
    }
}