@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Muli');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Maiden+Orange&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&display=swap');




body{   /* color FONDO DEGRADE AZUL CON NEGRO */

		background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #374566), color-stop(100%, #010203));
			  background-image: -webkit-radial-gradient(#374566, #010203);
   background-image: -moz-radial-gradient(#374566, #010203);
	 background-image: -o-radial-gradient(#374566, #010203);
	 background-image: radial-gradient(#374566, #010203);

}


 .fondocompleto {
   width:100vw;
    height:100vh; 
	     margin: 0;
    padding: 0;
	 min-height: 100vh;


  }



#container {
    width: auto;
    height: auto;
    margin-top: 120px;
    -webkit-perspective: 800px;
            perspective: 800px;
    text-align: center;

	

	
}

#container h1 {
    color: #0EEFDD;
    margin-bottom: 30px;

}

#container > hr {
    border: none;
    border: 0px solid #EBFF23;
    width: 80%;
	text-align: center;
}

.titulogira2 {

font-family:  'Wendy+One';
  font-size: 65px;
  font-weight: 500;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #976932;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 1.9px;
  text-align: center;
			
	

  }

.botomenu {

font-family: 'Acme', sans-serif;
  font-size: 22px;
  font-weight: 500;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #FFFFFF;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 1.9px;
  text-align: center;
			
	

  }
.tetextogene {

font-family: 'Bubblegum Sans', cursive;
  font-size: 21px;
  font-weight: 700;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #FFFFFF;  /* color texto titulo */
  line-height: 22px;
  letter-spacing: 0.2px;
  text-align: center;
			
	

  }

.textomenu{

font-family: 'Maiden Orange', cursive;
  font-size: 24px;
	font-weight: 400;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D3CCB1;
  padding: 0;
	margin: 0;
  line-height: 28px;
	letter-spacing: 3px;
  }


.textomenu22{

font-family: 'Maiden Orange', cursive;
  font-size: 20px;
	font-weight: 400;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D3CCB1;
  padding: 0;
	margin: 0;
  line-height: 28px;
	letter-spacing: 3px;
  }




.textomenu4{

font-family:  'Lobster Two';
  font-size: 23px;
	font-weight: 600;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D3CCB1;
  padding: 0;
	margin: 0;
  line-height: 30px;
	letter-spacing: 1px;
  }

.textomenu2{

font-family: 'Just Another Hand', cursive;
  font-size: 22px;
	font-weight: 300;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #C6AF4F;
  padding: 0;
	margin: 0;
  line-height: 30px;
	letter-spacing: 1px;
  }

.textomenu3{

font-family: 'Maiden Orange', cursive;
  font-size: 22px;
	font-weight: 100;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #EDEDED;
  padding: 0;
	margin: 0;
  line-height: 25px;
	letter-spacing: 2.0px;
  }

.textomenu33{

font-family: 'Just Another Hand', cursive;
  font-size: 26px;
	font-weight: 600;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #FFFFFF;
  padding: 0;
	margin: 0;
  line-height: 30px;
	letter-spacing: 1px;
  }

.titulonino {

font-family:  'Pirata One', cursive;
  font-size: 55px;
  font-weight: 300;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D296FA;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 6.9px;
  text-align: center;
			
  }
.textonino{

font-family: 'Maiden Orange', cursive;
  font-size: 35px;
	font-weight: 400;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D5ABF1;
  padding: 0;
	margin: 0;
  line-height: 35px;
	letter-spacing: 3px;
  }

.textotitulogira {

font-family:  'Pirata One', cursive;
  font-size: 55px;
  font-weight: 300;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D3CCB1;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 6.9px;
  text-align: center;
			
  }
.textotitulogira22 {

font-family:  'Pirata One', cursive;
  font-size: 58px;
  font-weight: 300;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #EFEFEF;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 2.9px;
  text-align: center;
			
	

  }

.textotop {

font-family:  'Pirata One', cursive;
  font-size: 48px;
  font-weight: 300;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #D3CCB1;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 2.9px;
  text-align: center;
			
	

  }


.lopi {   /* TARJETA */
  
	text-align: right;



}

.card {   /* TARJETA */
    margin: 10px; /* Separacion/espacio entre las TARJETA */
    display: inline-block;
    position: relative;
	  padding: 16px 10px;
    width: 250px; /* ancho de la TARJETA */
    height: 240px; /* alto  TARJETA */
	border: none;
	background: transparent;   /* al girar la carta se ve un color de fondo era blanco*/
}

.front,   /* TARJETA POR delante y por DETRAS */
.back {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transition: -webkit-transform 300ms;
    transition: -webkit-transform 300ms;
    transition: transform 300ms;
    transition: transform 300ms, -webkit-transform 300ms;
    -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
    border-radius: 20px; /* borde redondeado de tarjeta*/
	
}

.front {  /* TARJETA POR DELANTE */
    transform: rotateY(0deg);
    background: #C31313;
    text-align: center;

  box-shadow: 10px 10px 12px #00000077;   /* sombra de la tarjeta x delante el #0000 negro y el 77 hasta 99 es la transparencia a menor mas traslucido */
 
}

 .fronte {  /* TARJETA POR DELANTE */
    transform: rotateY(0deg);
    background: #7330A6;
    text-align: center;

  box-shadow: 10px 10px 12px #00000077;   /* sombra de la tarjeta x delante el #0000 negro y el 77 hasta 99 es la transparencia a menor mas traslucido */
 
}


.back {    /* TARJETA POR DETRAS  / TEXTO */
    background: #515151;   /* Color de fonfo TARJETA X DETRAS*/
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    padding: 30px 12px;  /* 20 PX ES POSICION ALTURA TEXTO Y / 15PX ES EL ANCHO DEL PARRAFO*/
    color: #E3E3E3; /* Color TEXTO ATRAS*/
	
 font-size: 18px;  /* tamañoTEXTO deTRAS*/
  font-weight: 600; 
	line-height: 20px;
    letter-spacing: 1.2px;
    text-align: center;
	
	

}



.link  {  /* grosor del TEXTO  AQUI link*/
  font-weight: 900 !important;  
	  color: #5AE4D1 !important;  
	font-size: 0.8em !important;  
 }



.chiqui{    /* TARJETA POR DETRAS  / TEXTO */
   font-size: 0.8em;
  letter-spacing: 0.5px;
color: #F3F3F3;
	font-weight: 800; 
  text-align: center;		
	background: transparent;
}




.card:hover .front {
    -webkit-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}
.card:hover .back {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
}

.front .contact {   /* FOTO x delante de la tarjeta */
  
    width: 100px;
    border-radius: 0%;
    display: inline-block;
	margin: 10px;
    font-size: 2.2em;
    color: #A435F8;
}

    .front .name {   /* TEXTO TITULO DE FRENTE*/
    font-size: 1.4em;   /* TAMAÑO TEXTO TARJETA DE FRENTE*/
	 border-radius: 32px; 
	font-family: 'Gabriela', serif;
	line-height: 29px; /* ESPCIO ENTRE LINEAS*/
    letter-spacing: 0.8px;  /* ESPCIO ENTRE LETRAS*/
    font-weight: 900; 
    color: #F1F1F1;    /* color texto letras de las preguntas x delante*/
	text-align: center;
		background: transparent;
	display: block;
    position: absolute;
    width: 100%; 
	top: 65%;
	padding: 0px 8px;  /* texto x frente : ESPaCIO entre cuadrado y texto del frente*/
	
}


.front .job {
    color: #476CE3;
}


.front hr {   /* raya debajo de texto*/
    border: none;
    color: #D1B0ED;
    border: 3px solid; /* grosor de la raya*/
}


.titulogira {

font-family:  'Pirata One', cursive;
  font-size: 55px;
  font-weight: 600;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #322020;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 6.9px;
  text-align: center;
			
	

  }

.textogene {

font-family: 'Bubblegum Sans', cursive;
  font-size: 21px;
  font-weight: 700;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #821010;  /* color texto titulo */
  line-height: 22px;
  letter-spacing: 0.2px;
  text-align: center;
			
	

  }
.textogenegran {

font-family: 'Bubblegum Sans', cursive;
  font-size: 26px;
  font-weight: 800;   /* negrita o grosor del texto, bold: 700, normal:400 , lighter: 200-300 , bolder:800-900 (ultra bold)*/
  color: #821010;  /* color texto titulo */
  line-height: 25px;
  letter-spacing: 0.2px;
  text-align: center;
			
	

  }