/*------------------------------GENERAL---------------------------------*/
*{ 
    cursor: url('cursor.png'), auto;
    box-sizing: border-box;

}

html,
body{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


body{
        background: url("stardewbackground.png") no-repeat fixed center center / cover;
        font-family: 'Stardew Valley',sans-serif;
        font-weight: 400;
        font-size: 17px;
        overflow-x: hidden;
}

img,
video,
iframe{
    max-width: 100%;
    height: auto;
    display: block;
    
}

a:hover{
    text-decoration: none;
}

.container{
    width: min(92%, 1800px);
    margin: auto;
}

.fullwidth img{
    width:100%;
}

strong, b{
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #a04020;
}

blockquote{
  background: rgb(255, 233, 178);
  background: rgba(255, 223, 178, .5);
  border-left: 0px solid #8f3c21;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
}
blockquote:before{
  color: #ff6633;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p{
  display: inline;
}

.header{ 
    position: relative; 
}

.clear{
    clear: both;
}
/*--------------------------------FIN GENERAL---------------------------------*/




/*------------------------------BOTÓN FLOTANTE--------------------------------*/
#homeButton{
    position: fixed;
    right: 25px;
    bottom: 25px;

    z-index: 9999;

    width: 110px;
    transition: transform 0.2s ease;
}

/*--------Imagén--------*/
#homeButton img{
    width: 100%;
    display: block;
}

/*--------Hover--------*/
#homeButton:hover{
    transform: scale(1.05);
}
/*----------------------------FIN BOTÓN FLOTANTE-------------------------------*/









/*-----------------------------BOTÓN SOCIAL FLOTANTE----------------------------*/
.social-toggle{
    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 99999;
}

/*---------BOTON PRINCIPAL---------*/
#socialBtn{
    width: 95px;
    height: 95px;

    border: none;
    background: none;

    cursor: pointer;

    transition: transform .2s ease;
}

#socialBtn:hover{
    transform: scale(1.08);
}

#socialBtn img{
    width: 100%;
    display: block;
}

/*-------------MENU REDES---------*/
.social-menu{
    position: absolute;

    bottom: 115px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    gap: 15px;

    opacity: 0;
    pointer-events: none;

    transition: .3s ease;
}

/*--------CUANDO SE ABRE---------*/
.social-menu.active{
    opacity: 1;
    pointer-events: auto;
}

/*------------ICONOS------------*/
.social-menu a img{
    width: 65px;
    height: 65px;

    border-radius: 14px;

    transition:
        transform .2s ease,
        filter .2s ease;

    image-rendering: pixelated;
}

.social-menu a img:hover{
    transform: scale(1.1);
    filter: brightness(1.15);
}
/*-----------------------------BOTÓN SOCIAL FLOTANTE----------------------------*/









/*-----------------------------BOTÓN MUSICS ----------------------------*/
.music-player{
    position: fixed;

    right: 25px;
    top: 120px;

    z-index: 99999;
}

/* BOTON */
#musicBtn{
    width: 65px;
    height: 5px;

    border: none;
    background: none;

    cursor: pointer;

    transition:
        transform .2s ease,
        filter .2s ease;
}

/* HOVER */
#musicBtn:hover{
    transform: scale(1.08);

    filter: brightness(1.1);
}

/* IMAGEN */
#musicBtn img{
    width: 100%;
    display: block;

    image-rendering: pixelated;
}
/*-----------------------------FIN BOTÓN MUSICS----------------------------*/












/*-----------------------------------FUENTES----------------------------------*/
@font-face{
	font-family: 'SVBoldHu';
	src: url('SVBoldHu.woff2') format('woff2'),
		 url('SVBoldHu.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face{
	font-family: 'Stardew Valley All Caps';
	src: url('StardewValley-AllCaps.woff2') format('woff2'),
		 url('StardewValley-AllCaps.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face{
    font-family: 'Stardew Valley';
    src: url('StardewValley.woff2') format('woff2'),
         url('StardewValley.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/*-------------------------------FIN FUENTES----------------------------------*/







/*---------------------------------DIVIDER------------------------------------*/
#divider{
    position: relative;

    width: 100%;
    height: 491px;

    margin-top: -600px;

    background:
    url("stardewvalleybackground2.png")
    center center / cover no-repeat;

    z-index: 1;
}
/*---------------------------------FIN DIVIDER--------------------------------*/







/*----------------------------------PARALLAX----------------------------------*/
#parallax img{
    position: absolute;
    image-rendering: pixelated;

}

.parallax__layer{
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    position: absolute;
}

.parallax__layer.parallax{
    position: absolute;
}

#layer-1{

    position: absolute;
}
#layer-2{
    background-image: url('stars.png');          
    position: absolute;
}
#layer-4{
    background-image: url('mountain.png');          
    background-position: bottom center;
}
#layer-5{
    background-image: url('mountain2.png');          
    background-position: bottom center;
}
#layer-6{
    background-image: url('mountain3.png');         
    background-position: bottom center;
}
#layer-7{
    background-image: url('mountain4.png');         
    background-position: bottom center;
}
#layer-8{
    background-image: url('mountain5.png');             
    background-position: bottom center;
}
#layer-9{
    background-image: url('shap_bottom_left.png');              
    background-position: bottom left;
    background-repeat: no-repeat;
}

#layer-11{
    position: relative;
    overflow: hidden;
}
#layer-4,
#layer-5,
#layer-6,
#layer-7,
#layer-8{
    background-position: center bottom;
    transform: translateY(5020px);
}
.parallax__layer,
#layer-1,
#layer-2,
#layer-3a,
#layer-3b,
#layer-4,
#layer-5,
#layer-6,
#layer-7,
#layer-8{
    pointer-events: none;
}
/*-----------------more parallax------------*/
.panel,
.panel_layer{
    height: 100vh;

    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
#parallax{
    position: relative;
    height: 100vh;
    min-height: 750px;
    pointer-events: none;

    overflow: hidden;
}
#nonparallax.panel{
    height: 900px;
    z-index: -20;
    background: url("stardewbackground.png")no-repeat fixed center center / cover;    
    width:100%;
}

#nonparallax{
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#logo_wrapper{
    position:sticky;

    inset: 0;
    margin-top: 200px;

    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}


#mainpage_logo{
    position: relative;

    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    z-index: 50;
}


#stardew_logo{
    width: 80%;
    max-width: 700px;

    height: auto;

    display: block;
}


#concernedape_logo{
  max-width:90%;
	margin:auto;
}

#bird{
    position: absolute;
    top: 65%;         
    left: -200px;     

    width: 120px;
    height: 54px;

    background: url('stardew_bird.gif') no-repeat center/contain;
    animation: fly 12s linear infinite;
}

.panel{
    position: relative;
    z-index: 10;
    margin-bottom: 0px;
    border: .1px solid transparent;
}

.content_break{
    margin-top: 0;
    height: 0;
}
/*-----------------------------------FIN PARALLAX----------------------------------*/








/*----------------------------------MENÚ DEBAJO------------------------------------*/

.menu-container{

    position: fixed;

    top: 10px;

    left: 50%;
    transform: translateX(-50%);

    width: min(96%, 1900px);

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;

    z-index: 999999;

    box-sizing: border-box;
}

/*------Cada bloque independiente-----*/
.menu-item{
   position: relative;
   width: 100%;
   max-width: 420px;
}
/*--------------Imagen----------------*/
.menu-item img{
  width: 100%;
  display: block;
}
/*-----------Botón encima-------------*/
.menu-btn{
  position:absolute;
  top: 25%;
  left: 10%;
  width: 80%;
  height: 50%;

  display:flex;
  justify-content: center;
  align-items: center;

  font-family: 'Stardew Valley', sans-serif;
  font-size: 25px;
  color: rgb(49, 26, 11);
  text-decoration: none;

  background: rgba(255,0,0,0.0); 
}
/*-------------Posiciones--------------*/
.btn-1{
  top: 30%;
  left: 7%;
  width: 85%;
  height: 40%;
}

.btn-2{
  top: 30%;
  left: 7%;
  width:85%;
  height: 40%;
}

.btn-3{
  top: 30%;
  left: 42%;
  width: 18%;
  height: 40%;
}

.btn-4{
  top: 30%;
  left: 40%;
  width: 18%;
  height: 40%;
}

.btn-5{
  top: 30%;
  left: 42%;
  width: 18%;
  height: 40%;
}

.btn-6{
  top: 30%;
  left: 42%;
  width: 18%;
  height: 40%;
}

.btn-7{
  top: 30%;
  left: 42%;
  width: 18%;
  height: 40%;
}

/*-----------HOVER & CONTENT--------------*/
.menu-btn:hover{
  transform: scale(1.05);
  filter: brightness(1.2);
  color: rgb(255, 208, 0);
}
#content{
    position: relative;
    z-index: 10;

    margin-top: -20px;
    margin-bottom: -20px; 
    background: -webkit-linear-gradient(-180deg, #fef6ad, #ffffcc); 
    background: -o-linear-gradient(-180deg, #fef6ad, #ffffcc); 
    background: -moz-linear-gradient(-180deg, #fef6ad, #ffffcc); 
    background: linear-gradient(-180deg, #fae791, #ffffcc); 
}

#content_container{
    width: min(94%, 1800px);
    margin: auto;
    height: 100%;
    margin: auto;
}

#content_text_area{
    padding: 10px;
    text-align: center;
    line-height: 170%;
    padding-left: 0px;
    padding-right: 0px;
}

#content_text_area ul{
	padding-left: 0px;
}

#content_title{
    font-family: 'Stardew Valley',sans-serif;
    color: #0066cc;
    font-size: 45px;
    font-weight: 600;
}

#content_screenshot{
    max-width: 100%;
    height: auto;
}

#content_screenshot img{
    max-width: 100%;
    height: auto;
}

#content_highlight{
    color: #ff6633;
    font-weight: 700;
}

#content_wrap{
    height: 200px;
    position: absolute;
    width: 100%;
    z-index: -2;
}

/*------Overlay NO bloquea clics-----*/

/*------------------------------FIN MENÚ DEBAJO-----------------------------------*/






/*---------------------------MENÚ RESPONSIVE--------------------------------------*/

/*-----------MENÚ HAMBURGUESA----------*/
.menu-toggle{
    display: none;
    position: fixed;

    top: 20px;
    right: 20px;

     z-index: 10000;

    width: 65px;
    height: 65px;

    border: 4px solid #6b3d1d;
    border-radius: 14px;

    background: #f7d77c;
    color: #5a2d0c;

    font-size: 38px;

    cursor: pointer;

    box-shadow:
        0 4px 0 #5b3417,
        0 8px 20px rgba(0,0,0,.4);

    font-family: 'Stardew Valley', sans-serif;
}
/*---------------------------FIN MENÚ RESPONSIVE----------------------------------*/






/*--------------------------------- NEWS PANEL ------------------------------------*/
.news-section{
    width: 100%;
    max-width: 1700px;

    margin: 0 auto 80px;
    margin-top:-48px;
    position: relative;
    z-index: 5;
}

/*--------------TITULO--------------*/
.news-title{
    font-family: 'Stardew Valley', sans-serif;
    font-size: 100px;
    color: #f5be0b;
    margin-top:48px;
    text-align: center;
    margin-bottom: 50px;

    text-shadow:
        4px 4px 0 #5b2d0c,
        8px 8px 0 #000;
}

/*---------SWIPER--------------------*/
.myNewsSwiper{
    width: 100%;

    overflow: visible;

    padding-bottom: 100px;
}

/*----------SLIDE---------------------*/
.myNewsSwiper .swiper-slide{
    display: flex;
    justify-content: center;

    transition:
        transform .4s ease,
        opacity .4s ease,
        filter .4s ease;

    transform: scale(.82);

    opacity: .45;

    filter: brightness(.6);
}

/*------------------ACTIVO--------------*/
.myNewsSwiper .swiper-slide-active{
    transform: scale(1);

    opacity: 1;

    filter: brightness(1);

    z-index: 20;
}

/*---------------LATERALES---------------*/
.myNewsSwiper .swiper-slide-prev,
.myNewsSwiper .swiper-slide-next{
    opacity: .7;
}

/*------------------CARD-----------------*/
.news-card{
    width: 95%;
    max-width: 1800px;
    display: flex;
    gap: 60px;

    align-items: center;
    padding: 45px;
    border-radius: 30px;

    background: rgba(247,230,181,.95);

    border: 18px solid transparent;
    border-image: url("table.png") 32 round;
    overflow: hidden;
}

/*-----------------MEDIA------------------*/
.news-media{
    flex: 1.1;
}

.news-media img,
.news-media video{
    width: 100%;
    height: 550px;

    object-fit: cover;

    display: block;

    border-radius: 20px;
}

/*----------------TEXTO--------------------*/
.news-content{
    flex: 1;

    color: #4b2a12;
}

/*--------------FECHA----------------------*/
.news-date{
    display: inline-block;
    background: #c96f2d;
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 20px;
    margin-bottom: 25px;
}

/*----------------TITULO-------------------*/
.news-content h2{
    font-family: 'Stardew Valley', sans-serif;

    font-size: clamp(40px, 4vw, 78px);
    line-height: 1.1;
    color: #7a2e00;
    margin-bottom: 30px;
}

/*----------------TEXTO--------------------*/
.news-content p{
    font-size: clamp(18px, 1.5vw, 34px);
    line-height: 1.7;
    margin-bottom: 35px;
}

/*-----------------BOTON-------------------*/
.news-button{
    display: inline-block;

    background: #d67b2d;
    color: white;

    padding: 18px 34px;

    border-radius: 14px;

    text-decoration: none;

    font-size: 28px;

    transition: .2s;
}

.news-button:hover{
    transform: scale(1.05);

    background: #ff9b3d;
}

/*----------------FLECHAS------------------*/

.swiper-button-next,
.swiper-button-prev{
    width: 130px !important;
    height: 130px !important;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;

    top: 50% !important;

    transform: translateY(-50%);
}

/*------ESTO PA QUITAR FLECHAS DEFAULT------*/
.swiper-button-next::after,
.swiper-button-prev::after{
    display: none;
}

/*----------FLECHAS PERSONALIZADAS----------*/
.swiper-button-prev{
    background-image: url("flecha.png");

    left: -20px !important;
}

.swiper-button-next{
    background-image: url("flecha2.png");

    right: -20px !important;
}

/*------------------HOVER--------------------*/
.swiper-button-next:hover,
.swiper-button-prev:hover{
    transform:
        translateY(-50%)
        scale(1.08);
}

/*------------------DOTS---------------------*/
.swiper-pagination-bullet{
    width: 18px;
    height: 18px;

    background: white;

    opacity: .5;
}

.swiper-pagination-bullet-active{
    background: #ffd54a;

    opacity: 1;

    transform: scale(1.2);
}
/*-------------------------------- FIN NEWS PANEL ----------------------------------*/







/*---------------------------------- ABOUT PANEL -----------------------------------*/
.game-section{
    position: relative;
    width: 100%;
   
    overflow: hidden;
    padding: 180px 0 140px;
    margin-top: 140px;
}
/*------------FONDO------------------*/
.section-bg{
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.82),
            rgba(0,0,0,.45),
            rgba(0,0,0,.82)
        ),
        url("about_background.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 0;
}

/*---------------CONTENIDO------------*/
.section-content{
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1700px;
    margin: auto;
}

/*--------------INFO TITLE-----------*/

.about-title{
    font-family: 'Stardew Valley', sans-serif;
    font-size: 112px;
    text-align: center;

    color: #ffd54a;

    margin-bottom: 90px;
    text-shadow:
        4px 4px 0 #6b3d1d,
        8px 8px 0 #000;
}

/*--------------SWIPER--------------*/

/*--ESTO ES PARA EL TAMAÑO CARDS---*/
.aboutSwiper .swiper-slide{
    width: min(85vw, 1700px);

    transition:
        transform .45s ease,
        opacity .45s ease,
        filter .45s ease;
}

/*----------------CARD-------------*/
.about-slide{
    position: relative;
    overflow: hidden;
    border-radius: 28px;

   
    border: 24px solid transparent;
    border-image: url("table.png") 32 round;

    box-shadow:
        0 20px 50px rgba(0,0,0,.55);

    transition:
        transform .45s ease,
        opacity .45s ease;
}

/*-------------IMAGEN--------------*/
.about-slide img{
    width: 100%;
    height: clamp(500px, 45vw, 900px);

    object-fit: cover;

    display: block;
}

/*------------OVERLAY-------------*/
.about-overlay{
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    padding: 80px;
    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.55) 28%,
            rgba(0,0,0,.15) 55%,
            rgba(0,0,0,0) 75%
        );
}

/*-----------TITULO 2 INFO-----------*/
.about-overlay h2{
    font-family: 'Stardew Valley', sans-serif;

    font-size: 78px;
    line-height: 1;

    color: #fff4c7;

    margin-bottom: 24px;

    text-shadow:
        0 5px 12px rgba(0,0,0,.9);
}

/*-------------- + TEXTO--------------*/
.about-overlay p{
    font-size: 30px;
    line-height: 1.6;

    color: rgba(255,255,255,.95);

    max-width: 820px;

    text-shadow:
        0 2px 8px rgba(0,0,0,.8);
}

/*----------EFECTO LATERALES----------*/
.aboutSwiper .swiper-slide{
    transform: scale(.78);
    opacity: .28;
    filter: brightness(.55);
}

.aboutSwiper .swiper-slide-active{
    transform: scale(1);
    opacity: 1;
    filter: brightness(1);
    z-index: 20;
}

.aboutSwiper .swiper-slide-prev,
.aboutSwiper .swiper-slide-next{
    opacity: .65;
    filter: brightness(.7);
}

/*--------------FLECHAS--------------*/
.about-next,
.about-prev{
    width: 100px !important;
    height: 100px !important;

    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;

    border: none !important;
    box-shadow: none !important;

    top: 50% !important;
    transform: translateY(-50%);
    z-index: 100;
    transition:
        transform .2s ease,
        filter .2s ease;
}

/*-------QUITAR ICONOS DEFAULT--------*/
.about-next::after,
.about-prev::after{
    display: none !important;
}

/*--------------IZQ-------------------*/
.about-prev{
    background-image: url("flecha.png");
    left: -20px !important;
}

/*------------DERECHA-----------------*/
.about-next{
    background-image: url("flecha2.png");
    right: -20px !important;
}

/*-------------HOVER------------------*/
.about-next:hover,
.about-prev:hover{
    transform:
        translateY(-50%)
        scale(0.72);

    filter: brightness(1.2);
}

/*-----------------DOTS---------------*/
.about-pagination{
    bottom: 0 !important;
}

.about-pagination .swiper-pagination-bullet{
    width: 18px;
    height: 18px;

    background: #fff;

    opacity: .45;

    margin: 0 8px !important;

    transition: .2s;
}

.about-pagination .swiper-pagination-bullet-active{
    background: #ffd54a;

    opacity: 1;

    transform: scale(1.2);
}
/*---------------------------- FIN ABOUT PANEL -----------------------------------*/








/* ------------------------------------MAP----------------------------------------*/
.map-section{
    position: relative;

    /* ESTO HACE QUE EL FONDO LLEGUE HASTA LOS LADOS */
    width: 100%;
   

    overflow: hidden;

    padding: 60px 0;
    margin-top: -5px;
}

/*-------------FONDO---------------*/
.map-section::before{
    content: "";
    position: absolute;
    inset: 0;

    width: 100vw;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.82),
            rgba(0,0,0,.45),
            rgba(0,0,0,.82)
        ),
        url("map_background.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index: 0;
}

/*----------CONTENIDO-----------------*/
.map-section > *{
    position: relative;
    z-index: 2;
}
/*-----------TITULO-------------------*/
.map-section .about-title{
    margin-bottom: 90px;
}

/*----------CONTENEDOR MAPA-----------*/
.map-frame{
    position: relative;
    width: min(96%, 2200px);
    margin: auto;
    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.stardew-map{
    width: 100%;
    max-width: 100%;
    max-height: 1200px;
    object-fit: contain;
    display: block;
    height: auto;
    image-rendering: pixelated;

    box-shadow:
        0 0 40px rgba(0,0,0,.5),
        0 0 80px rgba(0,0,0,.35);
}

/*---------------PUNTOS-------------*/
.map-point{
    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 50%;
    border: none;

    cursor: pointer;
    background: #c27e00;

    box-shadow:
        0 0 0 6px rgba(255,255,255,.4),
        0 0 25px #996210;

    animation: pulse 1.5s infinite;
    z-index: 20;
}

/*----------POSICIÓN DEL PUNTO------*/
.point-farm{
    top: 74%;
    left: 40%;
}

.point-farmMarnie{
    top: 77%;
    left: 40%;
}

.point-wizardTower{
    top: 77%;
    left: 40%;
}

.point-clinic{
    top: 74.8%;
    left: 54.5%;
}

.point-shopPierre{
    top: 74.8%;
    left: 57%;
}

/*------------VENTANAS-------------*/
.map-popup{
    position: absolute;
    width: 320px;
    max-width: 90vw;

    background: #fff3cc;
    border: 8px solid #8b4b16;
    border-radius: 18px;
    padding: 20px;

    color: #5a3b32;
    font-family: 'Stardew Valley', sans-serif;
    box-shadow:
        0 0 35px rgba(0,0,0,.45);

    display: none;
    z-index: 30;
}

/*-----------TITULO---------------*/
.map-popup h3{
    margin-top: 0;

    color: #8b4b16;

    font-size: 34px;
}

/*---------------TEXTO-------------*/
.map-popup p{
    margin-bottom: 0;

    line-height: 1.5;

    font-size: 20px;
}

/*----------POSICIÓN POPUP---------*/
.popup-farm{
    top: 76%;
    left: 40%;
}

.popup-farmMarnie{
    top: 78%;
    left: 45%;
}

.popup-wizardTower{
    top: 78%;
    left: 45%;
}

.popup-clinic{
    top: 76%;
    left: 44%;
}

.popup-shopPierre{
    top: 76%;
    left: 46%;
}


/*----------CUANDO SE ABRE--------*/
.map-popup.active{
    display:block;
}

.section-bg,
.map-section::before{
    width: 100%;
}
/* --------------------------------FIN MAP----------------------------------------*/












/*-------------------------------EVENTS PANEL-------------------------------------*/
.events-section{
    position: relative;

    width: 100%;

    min-height: 100vh;
    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: background-image .8s ease;
    padding: 120px 6vw;

    display: flex;
    align-items: center;
}

/*---------OSCURECER fONDO------------*/
.events-section::before{
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to right,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.55) 20%,
            rgba(0,0,0,.35) 80%
        );

    z-index: 1;
}

/*---------------INFO PANEL------------*/
.info-panel{
    position: relative;
    z-index: 5;

    width: min(42%, 900px);
    padding-left: 5vw;
}

.info-title{
    font-family: 'Stardew Valley', sans-serif;

    font-size: clamp(48px, 5vw, 110px);
    line-height: 1;

    color: #ffd54a;

    margin-bottom: 30px;

    text-shadow:
        4px 4px 0 #6b3d1d,
        8px 8px 0 #000;
}

.info-text{
    font-size: clamp(18px, 1.4vw, 34px);
    line-height: 1.7;

    color: #fff6d1;

    text-shadow:
        0 2px 8px rgba(0,0,0,.9);
}

/*-------------CARRUSEL-----------------*/
.event-carousel-container{
    position: absolute;
    top: 50%;
    left: 65%;   
    transform: translate(-50%, -50%);
    max-width: 100%;
}
.info-carousel{
    width: min(70vw, 600px);
    height: min(70vw, 600px);
    max-width: 100%;
}
/*----------------SLIDES----------------*/
.slide{
    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background-size: cover;
    background-position: center;

    border: 6px solid #ffe08a;

    box-shadow:
        0 0 30px rgba(0,0,0,.45);

    transition:
        transform 1s cubic-bezier(.25,.1,.25,1),
        opacity .5s ease,
        filter .4s ease;
}

.slide.active{
    transform: scale(1.25);

    border-color: #fff;

    box-shadow:
        0 0 50px rgba(255,221,102,.9);

    z-index: 20;
}

/*------------------FLECHAS---------------*/
.arrow-controls{
    position: absolute;

    bottom: 60px;
    left: 8vw;

    display: flex;
    gap: 25px;

    z-index: 10;
}

.arrow{
    width: 90px;
    height: 0px;

    border: none;
    border-radius: 50%;

    cursor: pointer;

    background: rgba(255,232,168,.9);

    color: #5b3417;

    font-size: 42px;

    display: flex;
    justify-content: center;
    align-items: center;

    transition:
        transform .2s ease,
        background .2s ease;
}

.arrow:hover{
    transform: scale(1.08);

    background: #fff1b8;
}
/*--------------------------FIN EVENTS PANEL-------------------------------------*/










/*---------------------------CHARACTER PANEL-------------------------------------*/
.characters-section{
    position: relative;

    width: 100%;
    overflow: hidden;

    padding: 120px 0;
}

/*--------------CARRUSEL----------------*/
.character-carousel{
    width: 100%;
    overflow: hidden;

    position: relative;
    margin-top: 80px;
}

/*----------------TRACK----------------*/
.track{
    display: flex;
    width: max-content;

    animation: scroll 60s linear infinite;

}

/*-------------PAUSA HOVER------------*/
.character-carousel:hover .track{
    animation-play-state: paused;
}

/*-------------GRUPOS-----------------*/
.group{
    display: flex;
    flex-shrink: 0;
}

/*--------------CARD------------------*/
.card{
    position: relative;

    flex: 0 0 clamp(220px, 20vw, 460px);
    height: clamp(160px, 15vw, 320px);

    overflow: hidden;

    border-radius: 18px;

    border: 5px solid #8b4b16;
    transition:
        transform .3s ease,
        filter .3s ease;
}

/*--------------HOVER------------------*/
.card:hover{
    transform: scale(1.04);
    filter: brightness(1.08);
}

/*--------------IMAGEN-----------------*/
.card img{
    width: 100%;
    height: 100%;

    object-fit: cover;
    display: block;
}

/*-------------NOMBRE CARD-------------*/
.card-name{
    position: absolute;

    left: 16px;
    bottom: 12px;

    font-family: 'Stardew Valley', sans-serif;
    font-size: 48px;

    color: #e49733;
    text-shadow:
        3px 3px 0 #361f00;
       
}

/*------------------------FIN CHARACTER PANEL-------------------------------------*/









/*----------------------------Video CONTAINER-------------------------------------*/
#videoContainer{
    position: relative;

    width: 90%;
    max-width: 900px;

    pointer-events: auto;
}
/*---------------------------FIN Video CONTAINER---------------------------------*/








/*----------------------------------VIDEO INTRO----------------------------------*/
#overlay{
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;

    z-index: 9999;
}

#videoFrame{
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;

    background: url("bordervideo.png")  center center / contain  no-repeat;

    width: 120%;
    max-width: 800px;
    margin: auto;
}

#videoFrame video{
    width: 75%;
    height: auto;

    border-radius: 10px;
    object-fit: cover;
}

/*--------botón CERRAR (video)--------*/
#closeVideo{
    position: absolute;
    top: 4%;
    right: 7%;

    width: 60px;
    height: 60px;

    border: none;
    background: none;

    cursor: pointer;
    z-index: 10000;
}

#closeVideo img{
    width: 100%;
    display: block;
}

/*--------botón ABRIR (video)--------*/
#openVideo{
    position: absolute;

    top: 65%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: transparent;

    z-index: 1;
}

#openVideo img{
    width: 100px;
    height: auto;
    display: block;

    
}
/*--------------------------------FIN VIDEO INTRO----------------------------------*/









/*----------------------------------CONTACT ME--------------------------------------*/
.contact-section{
    position: relative;
    width: 100%;
    padding: 120px 20px;
    overflow: hidden;
}


h3{
    font-family: 'Stardew Valley', sans-serif;
    font-size: 64px;
    text-align: center;
    color: #f6c445;

    margin: 60px 0;

    text-shadow:
        3px 3px 0 #5b2d0c,
        6px 6px 0 #000;
}


.contact-wrapper{
    display: flex;
    gap: 35px;

    width: min(95%, 1900px);

    margin: auto;

    align-items: stretch;
    justify-content: center;

    flex-wrap: wrap;
}




.container{
    flex: 2;

    min-width: 0;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #d89a52 0%,
            #9b5c2e 100%
        );

    border: 8px solid #5a2f12;
    border-radius: 24px;

    box-shadow:
        0 0 0 6px #e0b36c,
        0 15px 35px rgba(0,0,0,.4);

    box-sizing: border-box;
}


.privacy-box{
    flex: 1;

    min-width: 0;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #c98a4a 0%,
            #8d5127 100%
        );

    border: 8px solid #5a2f12;
    border-radius: 24px;

    box-shadow:
        0 0 0 6px #d8a15d,
        0 15px 35px rgba(0,0,0,.4);

    color: #fff2c7;

    height: 520px;

    overflow-y: auto;
    overflow-x: hidden;

    box-sizing: border-box;

    -webkit-overflow-scrolling: touch;
}


.privacy-box h4{
    position: sticky;
    top: 0;

    background: #8d5127;

    padding-bottom: 12px;

    font-family: 'Stardew Valley', sans-serif;
    font-size: 28px;

    color: #ffd54a;

    z-index: 5;
}


.privacy-box p{
    font-size: 18px;
    line-height: 1.7;

    color: #fff7dc;
}


.privacy-box a{
    display: inline-block;

    margin-top: 20px;

    color: #ffe08a;

    text-decoration: none;

    font-size: 20px;

    transition: .2s ease;
}

.privacy-box a:hover{
    transform: scale(1.05);
    color: #fff2b5;
}

/* LABELS */
.container label{
    display: block;

    margin-bottom: 10px;
    margin-top: 22px;

    font-family: 'Stardew Valley', sans-serif;
    font-size: 28px;

    color: #3d1f0e;
}


.container input[type=text],
.container select,
.container textarea{
    width: 100%;

    padding: 15px;

    border: 4px solid #6d3a18;
    border-radius: 14px;

    background: #f6d28b;

    color: #3b220f;

    font-family: 'Stardew Valley', sans-serif;
    font-size: 20px;

    box-sizing: border-box;

    transition:
        transform .2s ease,
        border .2s ease,
        box-shadow .2s ease;
}


.container input[type=text]:focus,
.container select:focus,
.container textarea:focus{
    outline: none;

    border-color: #ffe08a;

    box-shadow:
        0 0 14px rgba(255,224,138,.9);

    transform: scale(1.01);
}


.container textarea{
    resize: vertical;
    min-height: 180px;
}


input[type=submit]{
    margin-top: 30px;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #7ccf63 0%,
            #4f9d3a 100%
        );

    color: #fff7d1;

    font-family: 'Stardew Valley', sans-serif;
    font-size: 24px;

    padding: 16px;

    border: 4px solid #2f5f22;
    border-radius: 14px;

    cursor: pointer;

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;

    box-shadow:
        0 5px 0 #2f5f22;
}


input[type=submit]:hover{
    transform: translateY(-3px);

    filter: brightness(1.08);

    box-shadow:
        0 8px 0 #2f5f22;
}

.privacy-box::-webkit-scrollbar{
    width: 10px;
}

.privacy-box::-webkit-scrollbar-track{
    background: #6b3d1d;
    border-radius: 10px;
}

.privacy-box::-webkit-scrollbar-thumb{
    background: #f5be0b;
    border-radius: 10px;
    border: 2px solid #5a2f12;
}
/*--------------------------------FIN CONTACT ME------------------------------------*/









/* -----------------------------------FOOTER---------------------------------------*/
/*-------FOOTER-------*/
footer{
    width: 100%;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 0px;
    padding-top: 1px;
    border-top: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0px solid transparent;
    border-top-right-radius: 8px;
    border-top-left-radius: 10px;

    border-image-slice: 34%;
 
}

li#blank{
  border:none;
  cursor: default;
}

.footerwrapper{
    width: min(95%, 1800px);
    margin: auto;
}


.footer-gif{
    width: 100%;
    margin-top: 30px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 30px 0 10px;
}

.footer-gif img{
    

    width:auto;
    height: auto;
    image-rendering: pixelated;
}


.footer-gif img:hover{
    transform: scale(1.05);

    filter: brightness(1.08);
}


#mainpage_footer{
    width: 100%;
    padding: 40px 20px;
    text-align: center;
    background-color: rgb(255, 251, 211);
    overflow: visible;
}

/*------------- GIF -------------*/

.footer-gif{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.footer-gif img{
    width: 500px;
    max-width: 90vw;
    height: auto;
    display: block;
    image-rendering: pixelated;
}

/*------------- TEXTO -------------*/

#mainpage_footer p{
    font-size: 22px;
    margin: 12px 0;
    color: #5a2f12;
}

/*------------- LINKS -------------*/

#mainpage_footer a{
    color: #8b4b16;
    text-decoration: none;
    transition: .2s ease;
}

#mainpage_footer a:hover{
    color: #d67b2d;
}

/* --------------------------------FIN FOOTER--------------------------------------*/









/* ------------------------------ANIMATION-----------------------------------------*/
/*----------CLOUD Animation-----------*/
#layer-3a{
    background-image: url('clouds.png');         
    animation: slide 80s linear infinite;
    opacity: 0.2;
}

#layer-3b{
    background-image: url('cloud2.png');         
    animation: slide 80s linear infinite;
    opacity: 0.2;
}
/* --------------------------------------------------------------------------------*/








/* ----------------------------------KEYFRAMES--------------------------------------*/
/*---------(nubes & pajaro)----------*/
@keyframes slide{
    110% {background-position: 0px 0%;}
    100% {background-position: 1014px 0%;}
}

@keyframes fly{
    0% {
        left: -200px;
        transform: scaleX(-1);
    }
    100% {
        left: 110%;
        transform: scaleX(-1);
    }
}



/*---------(Info about)----------*/
@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*------------(MAP)-------------*/
@keyframes pulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.15);
    }
    100%{
        transform:scale(1);
    }
}


/*---------(CHARACTER)----------*/
@keyframes scroll{
    from{
        transform: translateX(0);
    }

    to{
        transform: translateX(-50%);
    }
}
/* -------------------------------------------------------------------------------*/





/* ---------------------------------RESPONSIVES-----------------------------------*/

/*-------------RESPONSIVE VIDEO INTRO(441)-----------*/
@media screen and (max-width: 768px){
    #videoFrame video {
        width: 74%;
    }

    #closeVideo {
        width: 45px;
        height: 45px;
    }

    #openVideo{
        top: 330px;
        z-index: 900;
    }

    #openVideo img{
        width: 70px;
    }
}
/*---------------FIN RESPONSIVE VIDEO----------------*/





/*---------MENÚ RESPONSIVE HAMBURGUESA(436)----------*/
@media screen and (max-width: 1000px){
    .menu-toggle{
        display: block;
    }

    .menu-container{
    position: fixed;
    top: 0;
    left: auto;
    right: -100%;
     z-index: 1000;

        background:
            linear-gradient(
                180deg,
                #f7e6b5,
                #f3d27a
            );

        z-index: 9999;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 25px;

        padding-top: 120px;
        transition: right 0.35s ease;
        box-shadow:
            -10px 0 30px rgba(0,0,0,.4);
    }

    /*-------Cuando se abre-------*/
    .menu-container.active{
        right: 0;
    }

    /*------------Item------------*/
    .menu-item{
        width: 85%;
        max-width: 260px;
    }

    /*------Pantalla NormaL-------*/
    .menu-btn{
        font-size: 28px;
    }
}
/*-----FIN MENÚ RESPONSIVE HAMBURGUESA(436)-------*/





/*-------------News RESPONSIVE panel--------------*/
@media screen and (max-width: 1100px){

    .news-card{
        flex-direction: column;
    }

    .news-media img,
    .news-media video{
        height: 420px;
    }

    .news-content h2{
        font-size: 46px;
    }

    .news-content p{
        font-size: 22px;
    }

    .news-title{
        font-size: 72px;
    }

    .swiper-button-next,
    .swiper-button-prev{
        width: 90px !important;
        height: 90px !important;
    }
}

@media screen and (max-width: 700px){
    .news-title{
        font-size: 54px;
    }

    .news-card{
        padding: 20px;
    }

    .news-media img,
    .news-media video{
        height: 260px;
    }

    .news-content h2{
        font-size: 34px;
    }

    .news-content p{
        font-size: 18px;
    }

    .news-button{
        font-size: 20px;
        padding: 12px 20px;
    }
}
/*----------FIN News RESPONSIVE panel------------*/






/*-------------about RESPONSIVE-----------------*/
@media screen and (max-width: 1200px){
    .game-section{
        padding: 120px 0 100px;
        margin-top: 90px;
    }

    /*--------TITULO--------*/
    .about-title{
        font-size: 72px;
        margin-bottom: 60px;
    }

    /*--------SWIPER--------*/
    .aboutSwiper .swiper-slide{
        width: 72%;
        max-width: 760px;
    }

    /*--------CARD--------*/
    .about-slide{
        border-width: 18px;
    }

    /*------IMAGEN--------*/
    .about-slide img{
        height: 500px;
    }

    /*-------OVERLAY------*/
    .about-overlay{
        padding: 50px;
    }

    /*----TITULO CARD-----*/
    .about-overlay h2{
        font-size: 48px;
    }

    /*--------TEXTO-------*/
    .about-overlay p{
        font-size: 20px;
        line-height: 1.5;

        max-width: 100%;
    }

    /*------FLECHAS------*/
    .about-next,
    .about-prev{
        width: 110px !important;
        height: 110px !important;
    }

    .about-prev{
        left: -10px !important;
    }

    .about-next{
        right: -10px !important;
    }
}

@media screen and (max-width: 768px){
    .game-section{
        padding: 90px 0 80px;
        margin-top: 70px;
    }

    /*---------TITULO---------*/
    .about-title{
        font-size: 46px;
        margin-bottom: 40px;

        line-height: 1.1;
    }

    /*---------SWIPER---------*/
    .aboutSwiper{
        padding-bottom: 70px;
    }

    .aboutSwiper .swiper-slide{
        width: 92%;
        max-width: 92%;
    }

    /*---------CARD---------*/
    .about-slide{
        border-width: 12px;
        border-radius: 18px;
    }

    /*--------IMAGEN---------*/
    .about-slide img{
        height: 360px;
    }

    /*--------OVERLAY--------*/
    .about-overlay{
        padding: 25px;
    }

    /*------TITULO CARD------*/
    .about-overlay h2{
        font-size: 32px;

        margin-bottom: 10px;
    }

    /*---------TEXTO---------*/
    .about-overlay p{
        font-size: 16px;
        line-height: 1.45;
    }

    /*------LATERALES--------*/
    .aboutSwiper .swiper-slide{
        transform: scale(.9);
        opacity: .35;
    }

    .aboutSwiper .swiper-slide-active{
        transform: scale(1);
        opacity: 1;
    }

    /*-------FLECHAS---------*/
    .about-next,
    .about-prev{
        width: 70px !important;
        height: 70px !important;
    }

    .about-prev{
        left: -5px !important;
    }

    .about-next{
        right: -5px !important;
    }

    /*---------DOTS---------*/
    .about-pagination .swiper-pagination-bullet{
        width: 12px;
        height: 12px;
    }
}

@media screen and (max-width: 480px){
    .about-title{
        font-size: 34px;
    }

    .about-slide img{
        height: 300px;
    }

    .about-overlay{
        padding: 18px;
    }

    .about-overlay h2{
        font-size: 24px;
    }

    .about-overlay p{
        font-size: 14px;
    }

    .about-next,
    .about-prev{
        width: 55px !important;
        height: 55px !important;
    }
}
/*------------FIN about RESPONSIVE --------------*/






/*--------------Map RESPONSIVE-------------------*/
@media screen and (max-width:800px){
    .map-popup{
        width:200px;
        font-size:14px;
    }
}
/*------------FIN Map RESPONSIVE-----------------*/






/*--------------Events RESPONSIVE----------------*/
@media screen and (max-width: 1200px){
    .events-section{
        padding: 100px 40px;
        min-height: 900px;
    }

    /*----------INFO---------*/
    .info-panel{
        width: 45%;
        max-width: 500px;

        padding-left: 0;
    }

    .info-title{
        font-size: 64px;
    }

    .info-text{
        font-size: 22px;
        line-height: 1.6;
    }

    /*-------CARRUSEL---------*/
    .carousel-container{
        right: -120px;
        top: 62%;
    }

    .event-carousel{
        width: 560px;
        height: 560px;
    }

    /*-------IMAGENES--------*/
    .slide{
        width: 95px;
        height: 95px;

        border-width: 5px;
    }

    /*--------FLECHAS--------*/
    .arrow{
        width: 75px;
        height: 75px;

        font-size: 34px;
    }
}

@media screen and (max-width: 768px){
    .events-section{
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        text-align: center;

        padding: 90px 20px 60px;

        min-height: auto;
    }

    /*-------OSCURECER-------*/
    .events-section::before{
        background:
            linear-gradient(
                to bottom,
                rgba(0,0,0,.82),
                rgba(0,0,0,.55),
                rgba(0,0,0,.82)
            );
    }

    /*---------INFO---------*/
    .info-panel{
        width: 100%;
        max-width: 100%;

        padding-left: 0;

        margin-bottom: 60px;
    }

    .info-title{
        font-size: 48px;

        margin-bottom: 20px;
    }

    .info-text{
        font-size: 18px;

        line-height: 1.6;
    }

    /*--------CARRUSEL-------*/
    .carousel-container{
        position: relative;

        right: auto;
        top: auto;

        transform: none;

        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carousel{
        width: 340px;
        height: 340px;
    }

    /*---------IMAGENES--------*/
    .slide{
        width: 72px;
        height: 72px;

        border-width: 4px;
    }

    /*---------FLECHAS--------*/
    .arrow-controls{
        position: relative;

        left: auto;
        bottom: auto;

        margin-top: 50px;

        justify-content: center;
    }

    .arrow{
        width: 58px;
        height: 58px;

        font-size: 26px;
    }
}

@media screen and (max-width: 480px){
    .events-section{
        padding: 70px 15px 50px;
    }

    .info-title{
        font-size: 34px;

        line-height: 1.1;
    }

    .info-text{
        font-size: 15px;

        line-height: 1.5;
    }

    /*--------CARRUSEL--------*/
    .carousel{
        width: 250px;
        height: 250px;
    }

    .slide{
        width: 55px;
        height: 55px;
    }

    /*--------FLECHAS--------*/
    .arrow{
        width: 48px;
        height: 48px;

        font-size: 20px;
    }

    .arrow-controls{
        gap: 15px;
    }
}


/*-----------Characters RESPONSIVE-------------*/
@media (max-width: 1200px){

    .characters-section{
        padding: 100px 0;
    }

    .carousel{
        margin-top: 60px;
    }

    .card{
        flex: 0 0 320px;
        height: 220px;
    }

    .card-name{
        font-size: 32px;
    }

    .track{
        animation-duration: 50s;
    }
}

@media (max-width: 768px){

    .characters-section{
        padding: 70px 0;
    }

    .carousel{
        margin-top: 40px;
    }

    .group{
        gap: 14px;
    }

    .card{
        flex: 0 0 240px;
        height: 170px;

        border-radius: 14px;
    }

    .card-name{
        font-size: 24px;

        left: 12px;
        bottom: 8px;
    }

    .track{
        animation-duration: 40s;
    }
}

@media (max-width: 480px){

    .card{
        flex: 0 0 170px;
        height: 125px;
    }

    .card-name{
        font-size: 17px;
    }

    .track{
        animation-duration: 30s;
    }
}
/*-----------FIN Events RESPONSIVE----------------*/







/*-----------FIN Contact RESPONSIVE----------------*/

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

    .parallax__layer.parallax{
        position: absolute !important;
    }

    #parallax{
        min-height: 700px;
        height: 100vh;
    }

    .panel,
    .panel_layer{
        position: absolute;
        height: 700px;
    }

    .content_break{
        margin-top: 700px;
        height: 700px;
    }

}


/*----------- Contact RESPONSIVE----------------*/

@media (max-width: 1100px){

    .contact-wrapper{
        flex-direction: column;
    }

    .container,
    .privacy-box{
        width: 100%;
    }

    .privacy-box{
        height: 350px;
    }
}


@media (max-width: 768px){

    .contact-section{
        padding: 80px 12px;
    }

    h3{
        font-size: 42px;
    }

    .contact-wrapper{
        gap: 22px;
    }

    .container,
    .privacy-box{
        padding: 18px;

        border-width: 6px;

        box-shadow:
            0 0 0 4px #d8a15d;
    }

    .container label{
        font-size: 20px;
    }

    .container input[type=text],
    .container select,
    .container textarea{
        font-size: 16px;
        padding: 12px;
    }

    input[type=submit]{
        font-size: 18px;
        padding: 14px;
    }

    .privacy-box{
        max-height: 300px;
        overflow-y: auto;
        overflow-x: hidden;

        -webkit-overflow-scrolling: touch;
    }

    .privacy-box h4{
        font-size: 22px;
    }

    .privacy-box p{
        font-size: 15px;
    }

    .privacy-box a{
        font-size: 16px;
    }
}


@media (max-width: 480px){

    h3{
        font-size: 32px;
    }

    .container,
    .privacy-box{
        padding: 14px;
        border-width: 5px;
    }

    .container label{
        font-size: 17px;
    }

    .container input[type=text],
    .container select,
    .container textarea{
        font-size: 15px;
        padding: 10px;
    }

    .privacy-box{
        max-height: 220px;
        overflow-y: auto;
    }

    .privacy-box h4{
        font-size: 18px;
    }

    .privacy-box p{
        font-size: 14px;
        line-height: 1.5;
    }
    
}


/*-----------FIN Contact RESPONSIVE----------------*/

/* -------------------------------------------------------------------------------*/



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

    .menu-toggle{
        display: block;
    }

    .menu-container{
        position: fixed;

        top: 0;
        right: -100%;

        width: 80%;
        max-width: 340px;
        height: 100vh;

        left: auto;

        background:
            linear-gradient(
                180deg,
                #f7e6b5,
                #f3d27a
            );

        z-index: 9999;

        flex-direction: column;

        justify-content: flex-start;
        align-items: center;

        gap: 25px;

        padding-top: 120px;

        transition: right 0.35s ease;

        overflow-y: auto;

        box-shadow:
            -10px 0 30px rgba(0,0,0,.4);
    }

    .menu-container.active{
        right: 0;
    }

    .menu-item{
        width: 85%;
        max-width: 260px;
    }

    .menu-btn{
        font-size: 28px;
    }
}












/* ----------------------------- MOBILE FIXES ----------------------------- */

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

    body{
        overflow-x: hidden;
    }

    .game-section,
    .map-section,
    .events-section{
        width: 100%;
    }

    .about-title{
        font-size: 46px;
    }

    .contact-section{
        padding: 80px 12px;
    }

    .contact-wrapper{
        flex-direction: column;

        gap: 22px;
    }

    .container,
    .privacy-box{
        width: 100%;

        padding: 18px;

        border-width: 6px;
    }

    .privacy-box{
        max-height: 300px;

        overflow-y: auto;
        overflow-x: hidden;
    }

    .event-carousel-container{
        position: relative;

        left: auto;
        top: auto;

        transform: none;

        width: 100%;

        display: flex;
        justify-content: center;
    }

    .info-carousel{
        width: 340px;
        height: 340px;
    }

    .slide{
        width: 72px;
        height: 72px;
    }

    .map-popup{
        width: 200px;
    }
}












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

    body{
        overflow-x: hidden;
    }

    .about-title{
        font-size: 34px;
    }

    .info-title{
        font-size: 34px;
    }

    .info-text{
        font-size: 15px;
    }

    .privacy-box{
        max-height: 220px;
    }

    .info-carousel{
        width: 250px;
        height: 250px;
    }

    .slide{
        width: 55px;
        height: 55px;
    }

    .card{
        flex: 0 0 170px;
        height: 125px;
    }

    .card-name{
        font-size: 17px;
    }
}