@charset "utf-8";
/* CSS Document */
/* $base-background: #00CC99; */



@import url('https://fonts.googleapis.com/css2?family=Boogaloo&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Germania+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');



.titulohappy{

	color: #FFFFFF;
	font-family: 'Pirata One', cursive;
font-size: 84px;
    letter-spacing: 1.8px; /* espacio entre cada letra*/
	text-decoration: none;
	font-weight: 700;  
	text-align: center;

	
}

.textohappy{
	
	
	color: #FCF3F3;
font-family: 'Bubblegum Sans', sans-serif;
	font-size: 24px;
	font-weight: 500;
text-align: center;
	
}


.textoexplica{
	
	
	color: #FFD850;
font-family: 'Bubblegum Sans', sans-serif;
	font-size: 30px;
	font-weight: 700;

	
}



.bordefotorama {   /* BOTONES VOLVER VER MAS */

	  border: solid #FFFFFF;
  border-top-width: 4px;
  border-left-width: 4px;
box-shadow: 28px 47px 48px -17px rgba(0,0,0,0.51);
	background: #000000;
}



.btn {   /* BOTONES VOLVER VER MAS */
  border-radius: 15px 15px 15px 15px;
  padding: 8px 12px;
  color: #E6750D;   /* #030100 */
	background-color: #FFFFFF;   /* COLOR FONDO BOTON + INFO */
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;  /* HACE QUE LA TIPOGRAFIA ESTE EN MAYUSCULA */
  transition: 0.5s ease;
  letter-spacing: 0.7px;
box-shadow: 2px 3px 5px 0px rgba(0,0,0,0.75);

}


.card {

background-image: url("../images/pape2l.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 100% 100%;
border-color: transparent;	
  width: 86%;   /* ancho de la tarjeta blanca */

  max-width: 400px;
  margin: 100px auto;
  border-radius: 42px;

  box-sizing: border-box;
  padding: 30px;   /* espacio que tiene ancho tecxto dentro de la caja */ /* espacio para texto dentro del fondo */
  text-align: center;
}

.products {
  position: relative;
  overflow: hidden;
  transition: 0.5s ease;
	

}


.foto {
left: -20px;
	  position: relative;
	


}



.product {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
	

}


.fuera {

  position: relative;
  overflow: visible;
  transition: 0.5s ease;
	 width: 1000px;
	left:-50px;


	
	
}
  
.ex{
overflow: hidden;
    flex-shrink: 0;

	z-index: 999;
	
  position: absolute;

	margin: 0;


  }




.product.active { /* foto*/
  opacity: 1;
  visibility: visible;
	z-index: 100;
	

}

.thumbnail {   /* foto*/
  margin: 0px 0 48px;
z-index: 100;


	
	
	
}

.title {
  margin: -50px 0 12px;  /* -60 altura titulo / 60px es mas a la izq / 12px  */
  font-family: 'Germania One', sans-serif;
  color: #231500;
  font-size: 36px;
  transition: 0.5s ease;



}

.description {
  margin: 0 0 8px;
	font-size: 19px;  /* real tamaño de texto explicativo no tituloi*/
color: #412501;   /* color texto que explica todo */
font-family: 'Boogaloo', sans-serif;/* tipopgrafia texto principal info */
	text-align: left;
	line-height: 22px;

}
.descriptioncentrado {
  margin: 0 0 4px;
	font-size: 25px;  /* real tamaño de texto explicativo no tituloi*/
color: #412501;   /* color texto que explica todo */
font-family: 'Boogaloo', sans-serif;/* tipopgrafia texto principal info */
	text-align: center;
	line-height: 52px;
	 font-weight: 700;

}


.negrita {
  margin: 0 0 12px;
	font-size: 22px;  /* real tamaño de texto explicativo no tituloi*/
color: #412501;   /* color texto que explica todo */
font-family: 'Boogaloo', sans-serif;/* tipopgrafia texto principal info */
	text-align: left;
	line-height: 20px;
	font-weight: 600; 
  letter-spacing: 0.6px;
}


p {

line-height: 6px;
		font-size: 19px;  /* real tamaño de texto explicativo no tituloi*/
color: #412501;   /* color texto que explica todo */
font-family: 'Boogaloo', sans-serif;/* tipopgrafia texto principal info */
	text-align: left;

}



.saltolinea{

  color: transparent;
		line-height: 10px;

  }
.colorboton {
	color: #231500;    /* 231500 */
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: -10px -12px -3px;  /* -1 es la distancia entre texto y boton / 30 es la separacion entre / -30 el aire entre boton y parte de abajo */

}

[ripple] {
  z-index: 1;
  position: relative;
  overflow: hidden;
}


[ripple] .ripple {
  position: absolute;
  background: #004BFF;     /* #FFFFFF */
  width: 60px;
  height: 60px;
  border-radius: 100%;
  transform: scale(0);
  -webkit-animation: ripple 1s;
          animation: ripple 1s;
}

@-webkit-keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 5.2;
  }
  100% {
    transform: scale(20);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 5.2;
  }
  100% {
    transform: scale(20);
    opacity: 0;
  }
}