*{
    font-family:"mascotas";
    margin: 0;
    border: 0;
    box-sizing:content-box;
   /* No floating content on sides */

}
html{
    scroll-behavior: smooth;
}
:root{
     --left:0%;
     --height:700vw;/*variar segun dispositivo*/
     --moveTop:0%;
     --moveTop1:0%;
     --moveLeft:0%;
     --widthPink:50vw;
     --scrollUpPink:0px;
     --scrollUpGreen:0px;
     --moveTopYellow:0px;
     --contenido0:0;
     --mispaseos:0;
}

#first{
      color:blue;
}
#second{
      color:red;
}
#three{
    color:rgb(255, 217, 0);
}
#four{
    color:blue;
    
}
#five{
    color:green;
}
.cabecera{
    position:relative;
    height: 195vw;
    overflow:hidden;
}
.u{
    width:80%;
    margin-left:10%;
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top:3.2%;
    margin-bottom:5%;
    list-style: none;
    padding:0;
}
.u li{
padding-right: 10%;
padding-left: 10%;
}
.u li a{
    text-align: center;
    text-decoration: none;
    font-size:3.5vw;
    color:rgb(151, 151, 153)
}

#texto{
    padding:0%;
    font-size:3vw;
    background:rgb(255, 255, 255);
    border: solid 1px #000;
  border-color: transparent transparent rgb(0, 0, 0) transparent;
  border-radius: 149vw 141vw 124vw 159vw/237vw;
  color:rgb(121, 119, 119);
  padding-left:5%;
  
}
#first{
    color:blue;
   
}
#second{
    color:red;
    
}
#three{
  color:rgb(255, 217, 0);
  
}
#four{
  color:blue;
 
}
#five{
  color:green;
 
}

#texto span{
    font-size:14vw;
}
#texto h1 {
    text-align:center;
    margin-bottom:7%;
}
#texto h2{
    width:80%;
    margin-bottom:5%;
    margin-left:10%;
}
#texto h2 span{
    font-size:7vw;
       color:blue;
}





#egg {
    position:absolute;
    z-index:-1;
    width: 100vw;
    height: 108vw;
    margin:10vw 0% 0% 0%;
    background-size:cover;
    background-position:20% 0%;
    border-radius: 121% 57% 118% 51% / 90% 60% 51% 40%;
    
  }

#circle{
    position:absolute;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(226, 117, 223);
    margin:0vw 0% 0% 3%;
    margin-top:calc(9vw + var(--moveTop));
}


#circle0{
    position:absolute;
    width:12vw;
    height:12vw;
    border-radius:50%;
    background:rgb(255, 217, 0);
    margin:calc(25vw + var(--scrollUpGreen)*10) 0% 0% 78%;
    
}

#circle1{
    position:absolute;
    width:40vw;
    height:40vw;
    z-index:500;
    border-radius:50%;
    background:rgb(0, 179, 0);
    margin:calc(75vw - var(--scrollUpGreen)*5) 0% 0% -25%;
  
}
#semicircle{
    position:absolute;
    width: 20vw; 
    height: 10vw; 
    background: #0144ff;
    transform:rotate(75deg);
    margin:calc(105vw + var(--scrollUpPink)*10) 0% 0% 82%;
    -moz-border-radius: 100% 100% 0 0;
    -webkit-border-radius: 100% 100% 0 0;
    border-radius: 1000px 1000px 0 0;
    
}
/***********************article********************/
article{
    position:relative;
    overflow:hidden;
  
}

#contenido0{
    font-size:var(--contenido0);
    width:80%;
    height:80vw;
    padding:0% 3% 9% 6%;
    margin-left:5%;
    background:#fff;
    border: 1px solid #fff;
    border-radius: 15%;
    vertical-align:middle;
}
#contenido0 h3{
    font-size:var(--contenido0);
    margin-bottom:5%;
}
#mispaseos{
    width:var(--mispaseos);
    height:var(--mispaseos);
}
#mispaseos p{
    margin-top:20%;
}
#semicircle-left{
    position:absolute;
    z-index:-1;
    width:93vw;
    height:136vw;
    border-radius:50%;
    background:rgb(0, 66, 167);
    margin:3vw 0% 0% -73vw;
 
}
#semicircle-green{
    position:absolute;
    width:40vw;
    height:36vw;
    border-radius:50%;
    background:rgb(112, 201, 11);
    margin:25vw 0% 0% -29%;
    float:left;
    margin-top:calc(2vw + var(--moveTop1));
}

#semicircle-rigth{
    position:absolute;
    width:calc(50vw + var(--widthPink));
    height:calc(100vw + var(--widthPink));
    border-radius:50%;
    background:rgb(218, 3, 207);
    margin:20% 0% 0% 95%;
    z-index:10;
}
#semicircle-yellow{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(255, 217, 2);
    margin:45% 0% 0% 80%;
    margin-top:var(--moveTop);
}
/*************************SLIDER MOVIL*************************/

.seccionSlider{
    overflow: hidden;
    margin-top:15%;
}
.seccionSlider h3{
   
    font-size:6vw;
    padding-left:5%;
}

#gallery{
    display:flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    max-height:70vw;
    margin-top:5%;
    margin-bottom:15%;
    border:20px solid rgb(34, 204, 0);
    border-left:20px solid rgb(226, 117, 223);
    border-top:12px solid rgb(6, 114, 255);
    border-bottom:12px solid rgb(6, 114, 255);
}
.imagen{
    width:100vw;
    height:70vw;
    object-fit: cover;
    object-position: center;
    scroll-snap-align:center;
}
/************************nací**********************************/
.backgroundNaci{
    position:relative;
    overflow:hidden;
    background-size:85%;
    background-repeat:no-repeat;
    background-position: 6vw 95vw;
}
#contenido1{
 
    font-size:6vw;
    width:60%;
    height:160vw;
    margin-left:7%;
    background:#fff;
    border: 1px solid #fff;
    border-radius:7px;
    -webkit-box-shadow: 2px 4px 32px -8px rgba(0,0,0,0.36); 
    box-shadow: 2px 4px 32px -8px rgba(0,0,0,0.36);
    background:transparent;
    padding:5%;
    margin-bottom:10%;
   
}
#contenido1 h3{
    padding-top:5%;
    margin-bottom:15%;
    font-size:7vw;
}

#semicircleNaci-rigth{
    position:absolute;
    width: 15vw; 
    height: 30vw; 
    background: #0144ff;
   
    margin:calc(145vw + var(--scrollUpPink)*10) 0% 0% 80%;
    
    border-radius: 20vw 0vw 0vw 20vw;
}
#semicircleNaci-rigthYellow{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(255, 217, 2);
    margin:45% 0% 0% 60%;
    margin-top:var(--moveTop);

}

/****************************************************************/

.cont-naci{
    position:absolute;
    overflow: hidden;
    width:58%;
    height:60vw;
    margin:-67% 0% 0% 16%
}
.cont-naci1{
    overflow: hidden;
    width:100%;
    margin:-74% 0% 0% 0%;
    transition:0.6s linear;
    
}
.patitaEntry{
    position:absolute;
    width:15%;
    height:15%;
    margin:-8% 0% 0% 39%;
}

.patitaOpac{
    opacity:0;
}

.naci{
  
   display:flex;
   margin-top:6%;
      
     
}
.img-naci{
    width: 58vw;
    border-radius:50% 0% 51% 0%;
    margin:0% 0% 0% 0%;
    object-fit: cover;
    object-position: center;
    scroll-snap-align:center;
    transition:0.4s linear;
}
.amplia-naci{
    display:flex;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    max-height:70vw;
    margin-top:5%;
    margin-bottom:15%;
}       
.amplia-imgnaci{
    width:100vw;
    height:70vw;
    object-fit: cover;
    object-position: center;
    scroll-snap-align:center;
}
.patita{
    width:15%;
    height:15%;
    margin:-6% 0% 0% 42.50%;
}
.salirPatita{
    position:absolute;
    width:15%;
    height:15%;
    margin:-7% 0% 0% 42.50%;
    color:rgb(0, 0, 0);
    font-size: 3vw;
}


/***********************FIN SLIDER MOVIL*************************/



/*****************************excursiones****************************/


#excursiones{
    position:relative;
    margin-top:12%;
    overflow:hidden;
    background-repeat: no-repeat;
    background-size:177%;
    background-position: 7vw 151vw;  
}
.excursiones-texto{
    width:70%;
    margin-left:7%;
    border:0.5px solid white;
    -webkit-box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47); 
    box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47);
}
#excursiones h4{
    font-size:7vw;
    padding:20% 10% 20% 10%;
}
#excursiones p{
    font-size:6vw;
    padding:0% 10% 20% 10%;
}
.img-excursiones img{
    width:100%;
    margin-bottom:2.4%;
}
#semicircle-exc-yellow{
    position:absolute;
    width:50vw;
    height:100vw;
    border-radius:50%;
    background:rgb(255, 238, 0);
    margin:calc(-90% - var(--scrollUpPink)*10) 0% 0% -47%;
    z-index:-10;
}
#semicircle-exc-blue{
    position:absolute;
    width: 15vw; 
    height: 30vw; 
    background: #0144ff;
    z-index:-1;
    margin:calc(-22% + var(--moveTop)) 0% 0% 59%;
    transform: rotate(45deg);
    border-radius: 20vw 0vw 0vw 20vw;
}
#circle-exc-pink{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(255, 1, 213);
    margin:5% 0% 0% 62%;
    margin-top:calc(23% + var(--moveTop));
}
#figure-exc{
    position:absolute;
    z-index:-1;
    width:47vw;
    height:110vw;
    transform: rotate(-69deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(255, 1, 213);
    margin:-4% 0% 0% 62%;
    
}
#figure-exc-n{
    position:absolute;
    z-index:-1;
    width:47vw;
    height:110vw;
    transform: rotate(50deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(94, 255, 0);
    margin:261% 0% 0% calc(8% + var(--scrollUpPink));
    
}
#figure-exc-n1{
    position:absolute;
    z-index:-1;
    width:33vw;
    height:192vw;
    transform: rotate(160deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(255, 153, 0);
    margin:43% 0% 0% calc(180% + var(--scrollUpPink)*5);
}
/**********************************comidas******************************/
#comidas{
    position:relative;
    overflow:hidden;
    margin-top:26%; 
}

#bol{
    font-size:7vw;
    padding:20% 10% 38% 10%;
    background-repeat:no-repeat;
    background-position: 52% 78%;
    background-size:30%;
}
#comidas p{
    font-size:6vw;
    padding:0% 10% 20% 10%;
}
#semicircle-com-yellow{
    position:absolute;
    width:calc(50vw + var(--widthPink));
    height:calc(100vw + var(--widthPink));
    border-radius:50%;
    background:rgb(255, 251, 0);
    margin:30% 0% 0% 92%;
    z-index:-1;
}
#circle-com-yellow{
    position:absolute;

    width:calc(-20vw + var(--widthPink));
    height:calc(-20vw + var(--widthPink));
    border-radius:50%;
    background:rgb(255, 250, 0);
    margin:-20% 0% 0% 20%;
    z-index:-1;
}
#circle-com-green{
    position:absolute;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(67, 231, 2);
    margin:calc(100% + var(--widthPink)/2) 0% 0% 12%;
    z-index:-1;
}
#circle-com-pink{
    position:absolute;
    width:15vw;
    height:15vw;
    border-radius:50%;
    background:rgb(216, 0, 205);
    margin:calc(90% - var(--widthPink)/2)0% 0% 8%;
    z-index:-1;
}
.texto-comidas{
    margin-left:30%;
    -webkit-box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47); 
    box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47);
    border:0.1px solid rgb(255, 255, 255);
}
#figura-com-red{
    position:absolute;
    z-index:-1;
    width:calc(-5vw +  var(--moveTop)/2);
    height:calc(100vw +  var(--moveTop)/2);
    border-radius: 0 50% 50% 50%;
    transform: rotate(95deg);
    transform-origin: left;
    background:rgb(255, 1, 1);
    margin:-66% 0% 0% 66%;
}
.img-comidas{
    margin-top:26%;
}
.img-comidas img{
    width:100%;
    margin-bottom:2.4%;
}
/**************************despedida**********************************/
.despedida h5{
    font-size:7vw;
    padding:20% 10% 20% 10%;
}
.despedida p{
    font-size:6vw;
    padding:0% 10% 20% 10%;
}
#coments p{
    padding:5%;
    font-size:4vw;
}
#coments a{
    color:rgb(129, 129, 129);
    text-decoration: none;
}


@media only screen and (min-width:1023px){
:root{
    --left:0%;
    --ancho:0vw;
    --LeftNaci:0%;

}
.cabecera{
    display:flex;
    height:60vw;
   
}
.u{
    position:absolute;
    display:flex;
    margin-left:1%;
    margin-top:1.9%;
    list-style: none;
    
}
.u li{
   padding-left: 3%;

  
}
.u li a{
    text-decoration: none;
    font-size:1.2em;
    color:rgb(151, 151, 153)
}


#texto{
    width:50%;
    border: white;
    border:none;
    border-color: transparent transparent rgb(0, 0, 0) transparent;
    border-radius: 149vw 141vw 124vw 159vw/237vw;
 
}
#texto span{
    font-size:10vw;
}
#texto h1{
    text-align: left;
    margin-top:14%;
    margin-bottom:3%;
    margin-left:6%;
    
}
#texto h2{
    font-size:2vw;
    margin-left:7%;
}
#texto h2 span{
    font-size:3vw;
    margin-top:0;
}
.book1{
    width:10%;
    transform: rotate(-200deg);
    margin:5% 0 0% -25%;
}
.book{
    width:10%;
    margin:9% 0 0% 5%;
    transform: rotate(0deg);
    transition: 2s ease-in-out;
    
}
.book:hover{
    cursor: pointer;
    transform-style:preserve-3d;
    transform:rotateY(0deg) rotateX(0deg);
    animation: girar 0.3s infinite linear;
}
@Keyframes girar{
    from{
        transform:rotateY(0deg) rotateX(0deg);
    }
    to{
        
        transform:rotateY(360deg) rotateX(10deg);
    }
}
.desplazamiento{
    position:absolute;
    width:30%;
    margin-top:40%;
    margin-left:-35%;
    font-size:2.2vw;
}
.desplazamiento1{
    margin-left:8%;
    transition:1.8s ease-out;
}

#egg {
    position:absolute;
    width: 65vw;
    height: 60vw;
    margin:-10% 0% 0% 56%;
    background-image:url(./assets/paseos/portada.jpg) !important;
    background-size:cover;
    background-position:747% 90%;
    border-radius: 114% 125% 103% 184% / 376% 391% 130% 176%;
  }
  #circle0{
    position:absolute;
    width:5em;
    height:5em;
    border-radius:50%;
    background:rgb(255, 217, 0);
    margin:calc(24vw + var(--scrollUpGreen)) 0% 0% 39%;
    
}
#circle{
    position:absolute;
    width:9em;
    height:9em;
    border-radius:50%;
    background:rgb(226, 117, 223);
    margin:0vw 0% 0% 3%;
    margin-top:calc(0vw + var(--moveTop));
}
#semicircle{
    position:absolute;
    width: 8vw; 
    height: 4vw; 
    background: #0144ff;
    transform:rotate(75deg);
    margin:calc(50vw + var(--scrollUpPink)) 0% 0% 34%;
    -moz-border-radius: 100% 100% 0 0;
    -webkit-border-radius: 100% 100% 0 0;
    border-radius: 1000px 1000px 0 0;
    
}

#circle1{
    position:absolute;
    width: 8vw; 
    height: 4vw; 
    transform:rotate(180deg);
    -moz-border-radius: 100% 100% 0 0;
    -webkit-border-radius: 100% 100% 0 0;
    border-radius: 1000px 1000px 0 0;
    z-index:100;
    background:rgb(0, 179, 0);
    margin:calc(45vw + var(--scrollUpGreen)) 0% 0% -9%;
  
}
article{
    height:74vw;
}
#seccion-principal{
    margin-top:5%;
    height:60vw;
  
   
   
}

#contenido0{
    background-image:url(./assets/orange.png) !important;
    background-size:cover;
    background-position: 0% 0%;
  
    font-size:3vw;
    width:80%;
    height:50vw;
    padding:8% 3% 9% 0%;
    margin-left:10%;
  
    border: 1px solid #fff;
    border-radius: 15%;
    vertical-align:middle;
    -webkit-box-shadow: 5px 5px 15px 5px #B7B7B7; 
    box-shadow: 5px 5px 15px 5px #B7B7B7;
  
    
}

#contenido0 h3{
    text-align: center;
    
    font-size: 3vw;
    margin-bottom:5%;

}
#mispaseos{
    opacity:0;
    width:60%;
    margin-left:20%;
    height:40vw;
    transition:0.5s linear;
}

#mispaseos p{
    width:60%;
    margin-left:20%;
    margin-top:17%;
    font-size:1.8vw;
}
.imgPaseos0{
    position:absolute;
    width:10%;
    height:15%;
    object-fit: cover;
    object-position:0% 12%;
    border-radius:50%;
    margin:-28% 0% 0% 0%;
}
.imgPaseos1{
    position:absolute;
    width:30%;
    height:30%;
    margin:9% 0% 0% -9%;
}
.imgPaseos2{
    position:absolute;
    width:30%;
    height:30%;
    margin:9% 0% 0% 30%;
}

#semicircle-left{
    position:absolute;
    z-index:-1;
    width:80vw;
    height:90vw;
    border-radius:50%;
    background:rgb(0, 66, 167);
    margin:-20vw 0% 0% -73vw;
 
}
#semicircle-green{
    position:absolute;
    width:40vw;
    height:36vw;
    border-radius:50%;
    background:rgb(112, 201, 11);
    margin:calc(-17vw + var(--moveTop1)) 0% 0% -31%;
    float:left;
 
}

#semicircle-rigth{
    position:absolute;
    width:calc(50vw + var(--widthPink));
    height:calc(100vw + var(--widthPink));
    border-radius:50%;
    background:rgb(218, 3, 207);
    margin:10% 0% 0% 90%;
    z-index:10;
    

}
#semicircle-yellow{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    border-radius:50%;
    background:rgb(255, 217, 2);
    margin:0% 0% 0% 80%;
    margin-top:calc(-8% + var(--moveTop));
   
}

/*************************************Slider***********************************/
.seccionSlider{
    position:relative;
    overflow: hidden;
   
}
.seccionSlider{
   
    overflow: hidden;
}
#semicirclePaseo-rigth{
    position:absolute;
    width: 15vw; 
    height: 30vw; 
    background: #0144ff;
   
    margin:calc(-30% - var(--scrollUpPink)*2) 0% 0% 94%;
    
    border-radius: 20vw 0vw 0vw 20vw;
}
#circlepaseo-leftYellow{
    position:absolute;
    z-index:-1;
    width:10vw;
    height:10vw;
    border-radius:50%;
    background:rgb(255, 217, 2);
    margin:2% 0% 0% 80%;
    margin-top:calc(15% + var(--moveTop));

}
#circlepaseo-leftOrange{
    position:absolute;
    z-index:-1;
    width:64vw;
    height:33vw;
    background:rgb(224, 161, 221);
    margin:0% 0% 0% -20%;
    border-radius: 163% 171% 214% 4%/ 0% 168% 214% 10%;
    transform:rotate(35deg);
    margin-top:calc(0% + var(--moveTop));
}


.seccionSlider h3{
     font-size: 2.8vw;
}

.slider{
    width:70%;
    height:40vw;
    margin-left:14%;
    margin-top:10%;
    padding:0;
    overflow: hidden;
     border:20px solid rgb(255, 6, 6);
    border-left:20px solid rgb(255, 217, 0);
    border-top:12px solid rgb(6, 114, 255);
    border-bottom:12px solid  rgb(34, 204, 0);
}
#gallery{
    display: flex;
    width:var(--ancho);
    height:40vw;
    overflow: hidden;
    border:none;
    margin:0;
}
.imagenDesktop{
   width:100%;
   object-position:0vw -2vw;
}
.adelante{
    width:3%;
    position:absolute;
    margin-top:-8%;
    margin-left:89.5%;
    border-bottom:2px solid black;
    padding:0.5%;
  
}
.adelante:hover{
    cursor: pointer;
}
.atras{
    width:3%;
    position:absolute;
    margin-left:7%;
    margin-top:-8%;
    border-bottom:2px solid black;
    padding:0.5%;
}
.atras:hover{
    cursor: pointer;
}
/*****************************naci****************************/
.backgroundNaci{
    margin-top:12%;
    background-image:url(./assets/red.png) !important;
    background-size:56%;
    background-repeat:no-repeat;
    background-position: 17vw 30vw;
}
#contenido1{
    
    width:59vw;
    font-size:1.8vw;
    height:80vw;
  
   
}
#contenido1 h3{
    padding-left:0;
    font-size:3vw;
    margin-bottom:9%;
}
#semicircleNaci-rigth{
    position:absolute;
    width: 15vw; 
    height: 30vw; 
    background: #0144ff;
   
    margin:calc(65% + var(--scrollUpPink)) 0% 0% 80%;
    
    border-radius: 20vw 0vw 0vw 20vw;
}
#semicircleNaci-rigthYellow{
    width:15vw;
    height:15vw;
    border-radius:50%;
    margin-top:calc( -15% + var(--moveTop));
}
.cont-naci{
    margin:-71% 0% 0% 17.5%;
    height:48vw;
}

.naci{
    display:grid;
    grid-template-columns: 35% 35%;
    grid-template-rows: 38% 38% 38%;
    width:100%;
    height:33vw;
    border-radius:0% 0% 0% 0%;
    margin-left:14%;
    margin-top:20%;
}

.patitaEntry{
    margin:-46% 0% 0% 14.5%;
    cursor: pointer; 
    
}
.img-naci{
    position:relative;
    z-index:-1;
    width:89%;
    height:11vw;
    border-radius:0% 0% 0% 0%;
    margin:0% 0% 0% 0%;
}
.amplia-naci{
    display:flex;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-snap-type:none;
    max-height:40vw;
    margin-top:0%;
    margin-bottom:1%;
}
           
.amplia-imgnaci{
    position:relative;
    z-index:100;
    width:100vw;
    height:40vw;
    display: flex;
    overflow: hidden;
    margin-left:var(--LeftNaci);
    object-fit:scale-down;
    scroll-snap-align:none;
    background:rgb(209, 209, 209);
    /* transition:all 0.8s linear; */
    
}

.salirPatita{
    position:absolute;
    cursor: pointer;
    width:8%;
    height:8%;
    margin:-2% 0% 0% 45%;
    color:rgb(0, 0, 0);
    font-size: 1.5vw;

}
.patita{
    cursor: pointer;
    width:5%;
    height:5%;
    margin:0% 0% 0% 46.50%;
    
}
/*****************************slaider naci****************************/
.pase{
    display: flex;
    overflow: hidden;
    margin-left:var(--LeftNaci);
    transition: 0.8s linear;
}

.naci-adelante{
    width:3%;
    position:absolute;
    margin-top:-5%;
    margin-left:89.5%;
    border-bottom:2px solid black;
    padding:0.5%;
    color:white;
  
}
.naci-adelante:hover{
    cursor: pointer;
}
.naci-atras{
    width:3%;
    position:absolute;
    margin-left:7%;
    margin-top:-5%;
    border-bottom:2px solid black;
    padding:0.5%;
    color:white;
}
.naci-atras:hover{
    cursor: pointer;
}
/*****************************excursiones****************************/



#excursiones{
   
    margin-top:4%;
  
    overflow:hidden;
    background-image:url(./assets/orange.png) !important;
    background-size:97%;
    background-repeat: no-repeat;
    background-position: 64vw 39vw;  
}
.excursiones-texto{
    width:70%;
    border:0.5px solid white;
    -webkit-box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47); 
    box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47);
}
#excursiones h4{
    font-size:3vw;
    padding:5% 10% 10% 10%;
}
#excursiones p{
    font-size:1.8vw;
    padding:0% 10% 20% 10%;
}
.img-excursiones img{
    width:60%;
    height:30vw;
    margin-left:20%;
    margin-bottom:2.4%;
    object-fit:cover;
    object-position: 0% 44%;
  
}
#semicircle-exc-yellow{
    position:absolute;
    width:calc(5vw + var(--widthPink)/2);
    height:calc(10vw + var(--widthPink)/2);
    border-radius:50%;
    background:rgb(255, 238, 0);
    margin:40% 0% 0% 96%;
    z-index:10;
}
#semicircle-exc-blue{
    position:absolute;
    width: 10vw; 
    height: 20vw; 
    background: #0144ff;
    z-index:-1;
    margin:calc(-22% + var(--moveTop)) 0% 0% 59%;
    transform: rotate(45deg);
    border-radius: 20vw 0vw 0vw 20vw;
}
#circle-exc-pink{
    position:absolute;
    z-index:-1;
    width:10vw;
    height:10vw;
    border-radius:50%;
    background:rgb(255, 1, 213);
    margin:5% 0% 0% 79%;
    margin-top:calc(0% + var(--moveTop));
}
#figure-exc{
    position:absolute;
    z-index:-1;
    width:33vw;
    height:49vw;
    transform: rotate(-64deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(255, 1, 213);
    margin:-2% 0% 0% 25%;
    
}
#figure-exc-n{
    position:absolute;
    z-index:-1;
    width:21vw;
    height:71vw;
    transform: rotate(59deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(94, 255, 0);
    margin:116% 0% 0% -18%;
    
}
#figure-exc-n1{
    position:absolute;
    z-index:-1;
    width:25vw;
    height:92vw;
    transform: rotate(223deg);
    border-radius:70% 37% 0% 0%;
    background:rgb(255, 153, 0);
    margin:44% 0% 0% 82%;
}
#circle-fotos1{
    position:absolute;
    width:6vw;
    height:6vw;
    border-radius:50%;
    background:rgb(0, 38, 255);
    margin:calc(200% + var(--scrollUpPink)*4) 0% 0% 3%;
    z-index:10;
   
}
#circle-fotos2{
    position:absolute;
    width:10vw;
    height:10vw;
    border-radius:50%;
    background:rgb(255, 238, 0);
    margin:calc(220% + var(--scrollUpPink)*4) 0% 0% 6%;
    z-index:10;

}
#circle-fotos3{
    position:absolute;
    z-index:-1;
    width:10vw;
    height:10vw;
    border-radius:50%;
    background:rgb(255, 1, 213);
    margin:0% 0% 0% 77%;
    margin-top:calc(20% + var(--moveTop));
}
#circle-fotos4{
    position:absolute;
    z-index:-1;
    width:24vw;
    height:58vw;
    border-radius:50%;
    background:rgb(255, 238, 0);
    margin:0% 0% 0% 96%;
    margin-top:calc(54% + var(--moveTop));
}
#figure-exc-n2{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    transform: rotate(57deg);
    border-radius:50%;
    background:rgb(255, 1, 213);
    margin:calc(14% + var(--scrollUpPink)*4) 0% 0% 4%;
    
}
#figure-exc-n3{
    position:absolute;
    z-index:-1;
    width:20vw;
    height:20vw;
    transform: rotate(57deg);
    border-radius:50%;
    background:rgb(255, 1, 213);
    margin:64% 0% 0% -14%;
    
}

/**********************************comidas******************************/
#comidas{
    position:relative;
    overflow:hidden;
    margin-top:12%; 
}

#bol{
    font-size:3vw;
    padding:8% 10% 20% 10%;
    background-image:url(./assets/comida3.png) !important;
    background-repeat:no-repeat;
    background-position: 52% 78%;
    background-size:30%;
}
#comidas p{
    font-size:1.8vw;
    padding:0% 10% 20% 10%;
}
#semicircle-com-yellow{
    position:absolute;
    width:24%;
    height:37%;
    border-radius:50%;
    background:rgb(255, 238, 0);
    margin:calc(271% + var(--scrollUpPink)*2) 0% 0% 95%;
    z-index:-1;
}
#circle-com-yellow{
    position:absolute;

    width:calc(10vw + var(--widthPink)/7);
    height:calc(10vw + var(--widthPink)/7);
    border-radius:50%;
    background:rgb(245, 229, 3);
    margin:-5% 0% 0% 28%;
    z-index:-1;
}
#circle-com-green{
    position:absolute;
    width:10vw;
    height:10vw;
    border-radius:50%;
    background:rgb(67, 231, 2);
    margin:calc(0% + var(--widthPink)/5) 0% 0% 6%;
    z-index:-1;
}
#circle-com-pink{
    position:absolute;
    width:8vw;
    height:8vw;
    border-radius:50%;
    background:rgb(216, 0, 205);
    margin:calc(84% - var(--widthPink)/10)0% 0% 8%;
    z-index:-1;
}
.texto-comidas{
    margin-left:30%;
    -webkit-box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47); 
    box-shadow: 0px 1px 16px 1px rgba(94,94,94,0.47);
    border:0.1px solid rgb(255, 255, 255);
}
#figura-com-red{
    position:absolute;
    z-index:-1;
    width:calc(-5vw +  var(--moveTop)/2);
    height:calc(100vw +  var(--moveTop)/2);
    border-radius: 0 50% 50% 50%;
    transform: rotate(95deg);
    transform-origin: left;
    background:rgb(255, 1, 1);
    margin:-66% 0% 0% 66%;
}
.img-comidas{
    margin-top:12%;
}
.img-comidas img{
    width:60%;
    height:30vw;
    margin-left:20%;
    margin-bottom:2.4%;
    object-fit:cover;
    object-position: 0% 100%;;
}
/**************************despedida**********************************/
.despedida h5{
    font-size:3vw;
    padding:5% 10% 5% 10%;
}
.despedida p{
    font-size:1.8vw;
    padding:0% 10% 5% 10%;
}
.despedida p span{
color:rgb(255, 0, 212);
font-size:2vw;
}
#coments p{
    padding:5%;
    font-size:1.4vw;
}
.caja{
    width:80%;
    margin-left:10%;
    
    background:rgb(238, 238, 238);
}

}


@font-face{
    font-family: "mascotas";
    src:url(./assets/Podkova-VariableFont_wght.ttf);
    font-weight:100;
}