@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Muli');
* {
    box-sizing: border-box;
    font-family: 'Muli', sans-serif;
}

body {
    /* color de todo el fondo */
 background-image: url("../images/fondorojo.jpg"); /* foto de fondo  */
	background-size: 10px;
	text-align: center;
	  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	
	
}


#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;
}

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



}

.agrandaricono {   /* foto dentro de la tarhjeta de frente */
width: 100px !important;  /* ancho de la TARJETA */
 height: 100px !important;
}


.fotito {   /* foto dentro de la tarhjeta de frente */
width: 160px !important;  /* ancho de la TARJETA */
  height: 160px !important; 
	top: 20%  !important; 
}


.fotito2 {   /* foto dentro de la tarhjeta de frente */
width: 120px !important;  /* ancho de la TARJETA */
  height: 100px !important; 
	top: 20%  !important; 
}


.fotito3 {   /* foto dentro de la tarhjeta de frente */
width: 140px !important;  /* ancho de la TARJETA */
  height: 100px !important; 
	top: 20%  !important; 
}




.card {   /* TARJETA */
    margin: 10px; /* Separacion/espacio entre las TARJETA */
    display: inline-block;
    position: relative;
	  padding: 16px 10px;
    width: 250px; /* ancho de la TARJETA */
    height: 190px; /* 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: 32px; /* borde redondeado de tarjeta*/
	
}

.front {  /* TARJETA POR DELANTE */
    transform: rotateY(0deg);
    background: #000000;
    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: #626262;   /* Color de fonfo TARJETA X DETRAS*/
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    padding: 16px 12px;  /* 20 PX ES POSICION ALTURA TEXTO Y / 15PX ES EL ANCHO DEL PARRAFO*/
    color: #CBE9E9; /* Color TEXTO ATRAS*/
	line-height: 16px;
    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;
  text-align: center;
}




.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 */
    height: 63px;
    width: 63px;
    border-radius: 0%;
    display: inline-block;
	margin: 10px;
    font-size: 2.2em;
    color: #A435F8;
}

.front .agrandar {   /* FOTO x delante de la tarjeta */

    width: 40%;
	  height: 50%;

}


    .front .name {   /* TEXTO TITULO DE FRENTE*/
    font-size: 1.2em;   /* TAMAÑO TEXTO TARJETA DE FRENTE*/
	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;
	display: block;
    position: absolute;
    width: 100%; 
	top: 35%;
	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: #FFFFFF;  /* color texto titulo */
  margin: 0px;
  line-height: 59px;
  letter-spacing: 6.9px;
  text-align: center;

	

  }