html, body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    width: max-width;
    margin:0;
    padding:0;
    background:#ffffff;
    justify-content:center;
    align-items:center;
}

h2{
  text-align: center; 
  font-family: MiFuente;
}


.sombra{
  box-shadow: rgba(6, 101, 173, 0.26) 10px 10px 20px;
  border: 2px solid rgba(0, 0, 0, 0.26);

}

.texto {
  font-family: MiFuente; 
  font-size: 2.3rem; 
  color: #000000; 
  font-weight: bold; 
  line-height: 1.5;
  margin: auto 0%;
}

.texto2{
  font-family: MiFuente; 
  font-size: 1.1rem; 
  color: #000000; 
  font-weight: bold; 
  line-height: 1.5;
}

.justi{
  text-align: center;
  justify-content: center;
  width: 80%;
  margin: auto;
}

.justi2{
  text-align: center;
  justify-content: center;
  width: 30%;
  margin: auto;
}

.blanc{
  color:#ffffff;
}

.negre{
  color:#000000;
}

.flex{
  display: flex;
  place-content: center;
}

.izq {
    text-align: left;
}

/*HEADER*/
/* Base Header (Transparent at the top) */
#main-header {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgb(255, 255, 255, 0);  /* blue with opacity */ 
  transition: background-color 0.3s ease;
  z-index: 1;
  margin: auto;
}

#nav-item {
  text-align: right;
}

/* Header Logo hidden by default */
.header-logo{
  display: none;
  margin: 1% auto;
} 
.menu{
  color:rgb(73, 73, 73);
  margin: -20% 10% auto;
  font-family: MiFuente; 
  font-size: 1.5rem; 
  font-weight: bold; 
}

.menu:hover{
  color:rgb(101, 163, 211);
}

.logo1 img{
  display: flex;
  margin: auto;
  padding-top: 2%;
}

.colau1 img {
  z-index: 2;
  display: flex;
  margin: -4% auto 3% auto;
  animation: 0.8s ease-out 0s 1 normal none running slideInTop;

}

/* Header when scrolled */
#main-header.scrolled {
  background-color: rgb(255, 255, 255); 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 0.5%;
  margin: auto auto;
  display: block;
}

/* Show Header Logo when scrolled */
#main-header.scrolled .header-logo{
  display: block;
}

.idioma {
  display: flex;
  max-width: 5%;  
  align-items: right;
  text-align: right;
  margin: -1.5% 10% 0.5% auto;
}

.about{
  padding-bottom: 3%;
}


/*FIGURA HUMANA*/
.sketches{
  place-content: center;
  max-width: 100%;
  background-color:rgba(0, 0, 0, 0.103);
  padding: 2% 0%;
}


@keyframes slideInTop {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

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


/*carusel*/
.carousel {
  max-width: 35%;
  margin: 0%;
}

.carousel-inner, #fondo, #capa, #gifs{
  border-radius: 4%;
}

.foto{
  width: 100%;
}

.image-box {
  position: relative;
}

.image-box img {
  width: 100%;
  display: block;
}

/* Imagen con filtro */
.image-box .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease; /* duración y suavidad */
}

/*efecto al pasar el ratón */
.image-box:hover .img-hover {
  opacity: 1;
}

.carousel-control-prev-icon, .carousel-control-next-icon { /*boton*/
    outline: black;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 25%;
}

.carousel-control-prev-icon:hover, .carousel-control-next-icon:hover{
  background-color: rgba(0, 105, 175, 0.3);

}


/*ACRILIC*/
.acrilico {
  place-content: center;
  max-width: 100%;
  background-color:#0000000a;
  padding: 2% 0%;
}

.fotos{
  display: flex;
  margin: auto 2%;
  gap: 2%;
}

.fruita1{
  place-content: center;
}
  
.fruita {
  border: 2px solid rgba(0, 0, 0, 0.26);
  border-radius: 5%;
  width: 100%;
  margin: 2%;
}



/*RAIGOS DE SEQUERA*/
.raigs {
  place-content: center;
  max-width: 100%;
  background-color:#00000046;
  padding: 2% 0%;
}

.centered, .centered1{
    display: flex;
    place-content: center;
    max-width: 100%;
    text-align: center;
}

.cen{
    text-align: center;
  }


#gifs{
    position: relative;    
    max-width: 40%;
    margin: auto;
}

#fondo{
    display:block;
    width: 100%;
}

#capa{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    margin: auto;
    place-items: center;
}

canvas{
    display:none;
}


/*FESTES PORTALS*/
.festes {
  place-content: center;
  max-width: 100%;
  height: auto;
  background-color:#00000034;
  padding: 2% 0%;
}
.padded{
  padding: 1%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 2%;
}

.flipbook {
  place-content: center;
  width: 877px;
  height: 620px;
}

.errr {
      border-radius: 2%;
}

.page img{
	width: 100%;
	object-fit: cover;
	margin: auto;
}


/*FOOTER*/
footer{
  background-color: #0000006b;
  margin: 0%;
  padding: 2%;
}

.colorboto{
  color:#ffffff;
}

.colorboto:hover{
  color:#00000059;
}

/*TIPOGRAFIA*/
  @font-face {
    font-family: 'MiFuente';
    src: url('./fonts/CrayonHandRegular2016Demo2.ttf') format('truetype');
  }



  @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {

}

/* Medium Device = 1200px */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
	 .main-header {
    height: 1000px; /* Reducir la altura del header para dispositivos móviles */
    }

  .header-background-logo img, .header-background-logo{
    width: 80%;
  }

  .menu{
    font-size: 3rem; 
  }

  .colau1 img {
    display: flex;
    width: 100%;
  }

  .texto { 
    font-size: 2.1rem; 
  }

  .texto2{
    font-size: 1rem; 
  }

  .justi{
    overflow: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
    margin: auto;
  }

  .justi2{
    overflow: auto;
    text-align: center;
    justify-content: center;
    width: 50%;
 
    margin: auto;
  }

  .flex{
    display: flex;
    place-content: center;
  }

  /*HEADER*/
  /* Base Header (Transparent at the top) */
  #main-header {
    position: fixed;
    z-index: 1;
    margin: 20;
    
  }

  /* Header when scrolled */
#main-header.scrolled {
  padding: 2%;
  margin: auto auto;
}

  #nav-item {
    text-align: right;
  }

  /* Header Logo hidden by default */
  .header-logo{
    display: none;
    margin: 1% auto;
  } 

   .idioma {
    display: flex;
    max-width: 5%;  
    align-items: right;
    text-align: right;
    margin: -3% 5% auto auto;
  }
  .menu{
    color:rgb(73, 73, 73);
    font-family: MiFuente; 
    font-size: 1.5rem; 
    font-weight: bold; 
  }

  .logo1 img{
    display: flex;
    margin: auto;
    padding-top: 2%;
  }

  .colau1 img {
    z-index: 2;
    display: flex;
    margin: -7% auto 3% auto;
  }

  .about{
    padding-bottom: 3%;
  }

  /*FIGURA HUMANA*/
  .sketches{
    place-content: center;
    max-width: 100%;
    padding: 2% 0%;
  }

  /*carusel*/
  .carousel {
    max-width: 35%;
    margin: 0%;
  }

  .foto{
    width: 100%;
  }

  .image-box {
    position: relative;
  }

  .image-box img {
    width: 100%;
    display: block;
  }

  /*ACRILIC*/
  .acrilico {
    padding: 10% 0%;
  }

  .fotos{
    display: flex;
    flex-direction: column;
    margin: 4%;
    width: 40%;
  }

  .fruita1{
    place-content: center;
  }

  /*RAIGOS DE SEQUERA*/
  .raigs, .sketches {
    place-content: center;
    max-width: 100%;
    padding: 6% 0%;
  }

  #gifs, .carousel{
      position: relative;    
      max-width: 50%;
      margin: auto;
  }

  /*FESTES PORTALS*/
  .festes {
    padding: 4% 0%;
  }

  .padded{
    margin: auto;
    padding: 1%;
  }

  .flipbook {
    width: 550px;
    height: 388px;
  }

  .errr {
    border-radius: 2%;
  }

  .page img{
    margin: auto;
  }

 .centered1{
    place-content: center;
    max-width: 100%;
    text-align: center;
}

.columna{
  display: flex;
  flex-direction: column;
}

.ordre1{
  order: 1;
}

.ordre2{
  order: 2;
}
}


/* Small Device = 320px */

@media only screen and  (max-width: 767px) {
  .main-header {
    height: 1000px; /* Reducir la altura del header para dispositivos móviles */
    }

	.header-logo {
		padding-top: 10px;
    height: 100%;
		width: auto;
    }

  .header-background-logo img, .header-background-logo{
    width: 100%;
  }

  .menu{
    font-size: 3rem; 
  }

  .colau1 img {
    display: flex;
    width: 100%;
  }

.sombra{
  box-shadow: rgba(6, 101, 173, 0.26) 5px 5px 10px;
  border: 2px solid rgba(0, 0, 0, 0.26);
}

  .texto { 
    font-size: 2.1rem; 
  }

  .texto2{
    font-size: 1rem; 
  }

  .justi{
    overflow: auto;
    text-align: center;
    justify-content: center;
    width: 100%;
    margin: auto;
  }

  .justi2{
    overflow: auto;
    text-align: center;
    justify-content: center;
    width: 95%;
 
    margin: auto;
  }

  .flex{
    display: flex;
    place-content: center;
  }

  /*HEADER*/
  /* Base Header (Transparent at the top) */
  #main-header {
    position: fixed;
    z-index: 1;
    margin: 20;
  }

  /* Header when scrolled */
#main-header.scrolled {
  padding: 5%;
  margin: auto auto;
}

  #nav-item {
    text-align: right;
  }

  /* Header Logo hidden by default */
  .header-logo{
    display: none;
    margin: 1% auto;
  } 

   .idioma {
    display: flex;
    max-width: 5%;  
    align-items: right;
    text-align: right;
    margin: -10% 15% auto auto;
  }
  .menu{
    color:rgb(73, 73, 73);
    font-family: MiFuente; 
    font-size: 1.5rem; 
    font-weight: bold; 
  }

  .logo1 img{
    display: flex;
    margin: auto;
    padding-top: 2%;
  }

  .colau1 img {
    z-index: 2;
    display: flex;
    margin: -7% auto 3% auto;
  }

  .about{
    padding-bottom: 3%;
  }

  /*FIGURA HUMANA*/
  .sketches{
    place-content: center;
    max-width: 100%;
    padding: 2% 0%;
  }

  /*carusel*/
  .carousel {
    max-width: 35%;
    margin: 0%;
  }

  .foto{
    width: 100%;
  }

  .image-box {
    position: relative;
  }

  .image-box img {
    width: 100%;
    display: block;
  }

  /*ACRILIC*/
  .acrilico {
    padding: 10% 0%;
  }

  .fotos{
    display: flex;
    flex-direction: column;
    margin: 4%;
    width: 80%;
  }

  .fruita1{
    place-content: center;
  }

  /*RAIGOS DE SEQUERA*/
  .raigs, .sketches {
    place-content: center;
    max-width: 100%;
    padding: 6% 0%;
  }

  #gifs, .carousel{
      position: relative;    
      max-width: 90%;
      margin: auto;
  }

  /*FESTES PORTALS*/
  .festes {
    padding: 4% 0%;
  }
  .padded{
    margin: auto;
    padding: 2%;
  }

  .flipbook {
    width: 400px;
    height: 282px;
  }

  .errr {
        border-radius: 2%;
  }

  .page img{
    margin: auto;
  }

 .centered1{
    place-content: center;
    max-width: 100%;
    text-align: center;
}

.columna{
  display: flex;
  flex-direction: column;
}

.ordre1{
  order: 1;
}

.ordre2{
  order: 2;
}
}