/**
 * Theme Name: geek1
 * Theme URI: geek1
 * Description:geek1
 * Version: 1.0.0
 * Author: Julian
 * Author URI: geek1
 * License: GNU General Public License v2.0
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Template: genesis
**/
@font-face { 
font-family: gelion; 
src: url(/wp-content/themes/startergeek/fonts/Gelion/Gelion-Regular.woff2); 
font-style:normal;
	font-weight:400
}

@font-face { 
font-family: gelion; 
src: url(/wp-content/themes/startergeek/fonts/Gelion/Gelion-Bold.woff2); 
font-style:normal;
	font-weight:800
}


@font-face { 
font-family: gelion; 
src: url(/wp-content/themes/startergeek/fonts/Gelion/Gelion-Black.woff2); 
font-style:normal;
	font-weight:900
}





@font-face { 
font-family: CormorantInfant; 
src: url(/wp-content/themes/startergeek/fonts/CormorantInfant-Regular.woff2); 
font-style:normal;
	font-weight:400
}

@font-face { 
font-family: CormorantInfant; 
src: url(/wp-content/themes/startergeek/fonts/CormorantInfant-Bold.woff2); 
font-style:normal;
	font-weight:800
}

@font-face { 
font-family: Derivia; 
src: url(/wp-content/themes/startergeek/fonts/Derivia-Regular.woff2); 
font-style:normal;
	font-weight:400
}

@font-face { 
font-family: FiraSans; 
src: url(/wp-content/themes/startergeek/fonts/FiraSans-Regular.woff2); 
font-style:normal;
	font-weight:400
}



html {-moz-osx-font-smoothing: grayscale;-webkit-font-smoothing: antialiased;}
body {background-color: #fff;color:#474747;font-family: "CormorantInfant";font-size: 22px;font-weight: 400;line-height: 1.5;margin: 0;overflow-x: hidden;}
button,input:focus,input[type="button"],input[type="reset"],input[type="submit"],.button,.gallery img {transition: all 0.2s ease-in-out;border: 0;padding: 0.7em;font-size: 1rem;font-family: inherit; }
input[type="submit"],.button{cursor: pointer;}

button, input, select, textarea { font-size: 1rem;font-family: inherit;     line-height: 1.5;width:100%;padding: 0.7em;border:none;box-sizing:border-box; background: #F3F3F3;}

a {color: #777;text-decoration: underline;	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;}
a:focus,a:hover {color: #333;text-decoration: none;}
p {	margin: 0 0 20px;	padding: 0;}
ol,ul {	margin: 0;	padding: 0;}
article ol, article ul{padding-left:20px}

li {list-style-type: none;}
article li {padding-left: 10px;}
hr {border: none;	border-collapse: collapse;	border-top: 1px solid #eee;	clear: both;	margin: 30px 0;}
b,strong {font-weight: 800;}
blockquote,cite,em,i {font-style: italic;}
mark {background: #ddd;	color: #333;}
blockquote {margin: 30px;}
h1 {font-family: "Derivia";	font-weight: 900;	line-height: 1.2;	margin: 0 0 20px;}
h2,h3, h4,h5,h6{font-family: "Derivia";	font-weight: 900;	line-height: 1.2;	margin: 0 0 20px;}
h1 {font-size: 30px;}
h2 {font-size: 27px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
.entry-content h3,.entry-content h4 {font-weight: 800;}
.entry-content h4 {	margin-top: 40px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
embed,iframe,img,object,video,.wp-caption {	max-width: 100%;}
img {height: auto;	vertical-align: top;}
figure {margin: 0;}
*, ::before, ::after{-webkit-box-sizing: inherit;-moz-box-sizing: inherit;box-sizing: inherit;}
/*-------- constantes*/
.site-inner{width:100%;margin:0 auto;}



/*------------------------------------------------------------------------------------------------------------------------*/

/*-------- general*/
a {color:#707070;text-decoration:none;font-weight:bold}

.site-container{max-width:100%;box-sizing:border-box}

/*logo*/
.site-header{background:#fff;display:flex}
.title-area img{padding:3% 0;max-width:100%;;margin:0 auto;display:block;max-width:90%}
.site-description{display:none}

/*menu*/

.mobmenu img{margin: 0 auto;	display: block;}
.mobmenu { background:#fff; cursor: pointer; color:#fff;font-weight:bold;font-size:2em;padding: 10px; }
.active, .mobmenu:hover {background-color: #9D9671;;color:#fff}

#social-container{width:112px }
#social-container a{color:#fff}
#social-container img{margin:0 5px}
#social-container .telefono{min-width:210px;display:flex;justify-content:center;align-items:center;height: 63px;}
#social-container .redes{min-width:210px;display:flex;justify-content:center;align-items:center;height: 63px;}

.redes a:hover{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}
.formulariofull a:hover{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}
.telefono a:hover{filter: invert(88%) sepia(19%) saturate(7%) hue-rotate(116deg) brightness(99%) contrast(85%);}

.header-widget-area{display:flex;align-items:center}

#search-form-container{background-color:#4C4C4C;height:46px;display:flex;justify-content:center;align-items: center;}
#teltop a{color:#fff;font-size:20px;display:flex;align-items:center;margin:5px}
#teltop a img{margin-right:5px}


#teltop{display: flex;  width: 400px;  justify-content: space-around;  max-width: 100%;}

#home-block1{position:relative}
.bannerdesc {
  position: absolute;
  color: #fff;
  bottom: 0;
  z-index: 1;
  max-width: 50%;
	left:10%
}
.bannerdesc p { font-size: 3.5vw;}
.bannerdesc h2{font-size:5vw;text-transform:uppercase;margin-bottom: 0;}


/*menu*/
.site-header{width:100%;position:relative;z-index:2 }
.site-header > .wrap{max-width:1200px;margin:0 auto;width: 1200px;display:flex;justify-content:space-around;align-items: center;}


#twomenus{    max-height: 0;    overflow: hidden;    transition: max-height .2s ease-out;position: absolute;
  width: 100%;
  left: 0;
  top: 114px;}

.nav-primary wrap{position:relative}
.nav-primary ul{text-align:center;list-style:none;padding-left: 0; background:#fff;}
.nav-primary li, .nav-primary li a{color: #707070;padding: 1em .666em;text-decoration: none;font-size: 16px;font-weight: 400; text-transform:uppercase; font-family:"FiraSans"}
.nav-primary li:hover { background:#9D9671;color:#fff;overflow:hidden}
.nav-primary li:hover > a{color:#fff}
.nav-primary li ul {display:none;position:absolute;	min-width:140px;top:67px;background:#ed1f41}
.nav-primary li ul li, .nav-primary li ul li a{color:#fff}









.nav-secondary wrap{position:relative}
.nav-secondary ul{text-align:center;list-style:none;padding-left: 0; background:#fff;}
.nav-secondary li, .nav-secondary  li a{color: #707070;padding: 1em .666em;text-decoration: none;font-size: 16px;font-weight: 400; text-transform:uppercase; font-family:"FiraSans"}
.nav-secondary li:hover { background:#9D9671;color:#fff;overflow:hidden}
.nav-secondary li:hover > a{color:#fff}
.nav-secondary li ul {display:none;position:absolute;	min-width:140px;top:67px;background:#ed1f41}
.nav-secondary li ul li, .nav-primary li ul li a{color:#fff}






/*slideshow*/
.featured-slides{margin:0 auto;background:#202120;position: absolute;z-index: 1;right:0; left:0;}







/*slideshow*/
.featured-slides{margin:0 auto;background:#202120;position: absolute;z-index: 1;right:0; left:0;}







.mySlides img {margin:0 auto;display: block;}
/*.fadingslide{animation:fading 6s infinite}@keyframes fading{0%{opacity:0.5}50%{opacity:1}100%{opacity:0.5}}*/

.featured-image-class img{margin:0 auto;display:block}


  @keyframes anim {  0% {    display: none;    opacity: 0;  }  1% {    display: block;    opacity: 0;    transform: scale(1.2);  }    100% {    opacity: 1;    transform: scale(1);  }}

.featured-slides picture { animation: anim .8s ease-in-out; overflow:hidden}

.mySlides{overflow:hidden;position:relative}





.bottonessliders {  cursor: pointer;  position: absolute;  top: 50%;  width: auto;  margin-top: -30px;    color: #fff;  font-weight: bold;  font-size: 20px;
  border-radius: 0 3px 3px 0;  user-select: none; z-index: 4;display:none}	
	
/* Position the "next button" to the right */
.previous_btn {  position: absolute;  left: 1%;  border-radius: 3px 0 0 3px; width: 0;   height: 0;   border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-right: 18px solid #00B3A0;}
.next_btn {  position: absolute;  right: 1%;  border-radius: 3px 0 0 3px; width: 0;   height: 0;   border-top: 20px solid transparent;  border-bottom: 20px solid transparent;  border-left: 18px solid #00B3A0;}

/* On hover, add a black background color with a little bit see-through */
.previous_btn:hover, .next_btn:hover {  background-color: rgba(0,0,0,0.8);  color: white;}	



#contslider{position:relative; overflow:hidden;height: 47.8vw}





/*image*/
.featuredpost article{overflow:hidden}
.featuredpost a img{transition: .75s ease;margin:0 auto;display:block}
.featuredpost a:hover img {	opacity: 1;	-webkit-animation: flash 1s;	animation: flash 1s; transform: scale(1.1)}

@-webkit-keyframes flash {	0% {		opacity: .4;	}	100% {		opacity: 1;	}}
@keyframes flash {	0% {		opacity: .4;	}	100% {		opacity: 1;	}}




#nosotros{background-color:#1A1A1A;color:#fff}

#nosotros h2{font-size:40px;text-transform:uppercase}
#nosotros p{font-size:23px}
#nosotrosint{max-width:1180px;margin:0 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
#nosotrosint > div{padding:15px;box-sizing:border-box}

#nosotrosint a{background-color:#9D9671;color:#fff;display:flex;align-items:center;justify-content:center;width:171px;height:47px;font-size: 16px;  text-transform: uppercase;  margin-left: auto;}
#nosotrosint a:hover{background-color:#4C4C4C}

#destacados{text-align: center;  padding: 20px 10px;  box-sizing: border-box;}
#destacados h2{font-size:50px;text-transform:uppercase}
#destacados p{font-size:20px}


#quince{background-color:#FFD6D6;display:flex;flex-wrap:wrap;justify-content:center;align-items: center;}

#textoquince{padding:10px;box-sizing:border-box}
#textoquince, #fotoquince{max-width:964px}
#quince h2{font-size:50px;text-align:center;text-transform:uppercase}
#quince p {text-align:center;font-size:30px}

#quince a{width:237px;height:47px;background-color:#1A1A1A;color: #fff;  margin: 0 auto;  display: flex;  align-items: center;  justify-content: center;  text-align: center;  text-transform: uppercase;margin-top:10px}

#quince a:hover{background-color:#9D9671}



.botonnovias {width:237px;height:47px;background-color:#1A1A1A;color: #fff;  margin: 0 auto;  display: flex;  align-items: center;  justify-content: center;  text-align: center;  text-transform: uppercase;margin-top:30px;font-size:16px;margin-bottom:30px}

.botonnovias:hover{background-color:#9D9671;color: #fff}


.bannerdesc .botonnovias {margin-top:2%; margin-bottom:2%}



 #featured-post-2 {  width:1200px;  max-width: 100%;    margin: 40px auto;     padding: 0 15px; }

#featured-post-2 .widget-wrap article {    display: block;  border: 1px solid #e0e0e0;    border-radius: 8px;    overflow: hidden;     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);    transition: box-shadow 0.3s ease;    padding: 0; color:#fff;background-color:#1A1A1A}

#featured-post-2 .widget-wrap article:hover {    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); }

#featured-post-2 .widget-wrap article img.entry-image {    width: 100%;    max-height: 250px; /* Altura máxima para móvil */    height: 100%;     object-fit: cover;     display: block;}

#featured-post-2 .entry-header,
#featured-post-2 .entry-content {    padding: 15px 15px 5px 15px; /* Padding a todos lados en móvil */}

#featured-post-2 .entry-title {    font-size: 1.2em;     margin-top: 0;     margin-bottom: 5px;	text-align:center}
#featured-post-2 .entry-title  a{color:#fff}
#featured-post-2 .entry-content .leermas {    display: block;    margin-top: 10px;    font-weight: 600;    color: #a0522d;     text-decoration: none;}
#featured-post-2 .entry-content a {display:flex;width:171px;height:47px;justify-content:center;align-items:center;margin:20px auto;background-color:#9D9671;color:#fff}
#featured-post-2 .entry-content a:hover{background-color:#4C4C4C}

/*pages*//*posts*//*archive category*/




#headerarticulo{background-color:#1A1A1A }


#headerarticuloint{display:flex;justify-content:center;align-items:center;color:#fff;flex-wrap:wrap;}
#headerarticuloint{max-width:1920px;margin:0 auto}
#tituloarticulo {padding:2%;box-sizing:border-box;text-align:center}
#tituloarticulo h1{text-transform:uppercase}


#home-block5 h2{margin-top:30px;text-align:center;font-size:50px}
#home-block5 img{margin:0 auto;display: block;}
#home-block5 {background-color:#F0F0F0}
#testimonios {display:flex;justify-content:center;flex-wrap:wrap}
.testimonio {width:544px;max-width:100%;padding:20px 30px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between}
.testimonio > div{display:flex;align-items: flex-start;text-align:center}
.testimonio > div img{margin-right:10px}
.testimonio > p{text-align:right}


.archive .content,.error404 article .entry-content, .single article .entry-content, .page article .entry-content{max-width:1200px;margin:0 auto;padding:1em;width:100%;box-sizing:border-box}


.single-vestidos_novia .entry-content, .single-vestidos_quince .entry-content{max-width:100%;max-width: 100% !important;
  padding: 0 !important;}

.dress-layout-container{background-color:#1A1A1A;color:#fff}

.dress-layout-containerint {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se apilen en móvil */
    gap: 30px; /* Espacio entre las columnas */
    padding: 40px 20px;
	max-width:1200px;box-sizing:border-box;margin: 0 auto;
}
.dress-content-column {
        flex: 1 1 100%; /* Ocupa todo el ancho en pantallas pequeñas */
        min-width: auto;
    }

/* La Imagen destacada dentro de la columna */
.dress-featured-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Columna del Contenido y Título (Derecha) */

/* Estilos de Tipografía (Ajusta esto a tu diseño) */
.dress-sku { /* Para el código del producto (ACDO0154W) */
    font-size: 2.5em;
    font-weight: 700;
    margin-top: 0;	text-transform:uppercase;text-align:center
}

.dress-description-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-top: 20px;
    border-bottom: 2px solid #ccc; /* Línea separadora */
    padding-bottom: 5px;

}



.dresses-gallery-grid {
    display: grid;
    /* Define 3 columnas en escritorio, ajustables */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px; /* Espacio entre las celdas */
}

/* Estilo para cada elemento */
.dress-gallery-item {
    text-align: center;
   margin:0 auto;
    padding:5px;
    transition: transform 0.3s;
}

/* Efecto hover */
.dress-gallery-item:hover {
    transform: translateY(-5px); /* Pequeño levantamiento al pasar el ratón */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Estilo para la imagen dentro del enlace */
.dress-gallery-item img {
   width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-bottom: 10px;
  height: 450px;
  max-width: 300px;border-radius: 20px;
}

/* Estilo para el título del vestido */
.dress-gallery-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin: 0;
	display:none
}

#text-2{max-width:1200px;margin:0 auto}



#destacados{max-width:1200px;margin:0 auto}


.footer-widgets-1{background-color:#1A1A1A;color:#fff}

.footer-widgets-1 #footerinfo{max-width:1280px;margin:0 auto}
#footerinfo{display:flex;flex-wrap:wrap;justify-content:center}
#footerinfo a{color:#fff}

#infofooter{display:flex;flex-direction:column}


#socialfooter{margin-top:30px}
#socialfooter a{margin:10px}
#menufooter, #infofooter, #logofooter{width: 400px;  display: flex;  flex-direction: column;  align-items: center;  padding: 40px 20px;}
#menufooter ul{text-align:center;text-transform:uppercase}
#menufooter ul li{margin-bottom:10px}
#infofooter a{margin: 10px 0}
#infofooter h3{text-align:center}
#infofooter{align-items:initial}

.wpcf7 form.invalid .wpcf7-response-output{background:#ffb900}
.wpcf7 form.sent .wpcf7-response-output {background:#46b450}


header{transition: all 0.5s ease-out}
header.sticky{position: fixed;top: 0;left: 0;right: 0;padding: 0;z-index:98;}	
/*full site*/



 






.title-area {
    display: block !important; 
    position: static; 
    transform: none;
    z-index: 1; /* Valor por defecto */
}

/* 2. Menús: En móvil, los menús deben apilarse verticalmente (o ser escondidos/activados por el mobmenu) */



@media screen and (min-width: 56em) {
	
	
	
.previous_btn {    border-top: 30px solid transparent;  border-bottom: 30px solid transparent;  border-right: 25px solid #00B3A0;}
.next_btn {  border-top: 30px solid transparent;  border-bottom: 30px solid transparent;  border-left: 25px solid #00B3A0;}	
	
	/*header*/
.headerdeart .radial-progress{top:15%;right:10%}	
	.site-header{background: rgba(255,255,255,0.8)  }
	.site-header>.wrap{display:flex;align-items: center;justify-content:center;height:160px}
	.header-widget-area{width:100%}
.whatscel{margin-left:1em}
	.headermail img{margin-top:5px}
	/*logo*/
	.title-area {margin:0;background:transparent;max-width:25%;}

	/*menu*/
	.mobmenu{display:none}
	.nav-primary { max-height: 100%;overflow:visible;position:relative ;top: 0;}
	/*nav*/
	.nav-primary > ul{display:flex;flex-wrap:wrap;align-items: center;justify-content:space-around; }
	.nav-primary .wrap{display:flex;justify-content:space-around;align-items:center;height:112px}
	.nav-primary .wrap>ul{display:flex;flex-wrap:wrap;justify-content:space-around;align-items: center;position:relative;z-index:10;background: none; }	
	.nav-primary .wrap>ul>li{display:inline-block;padding:0.7em 0.5em;}	
				.nav-primary li:hover > ul {display:block;}			
			.nav-primary li ul li {	position:relative;}			
			.nav-primary li ul li ul {right:-140px;	top:0px;}
	
	
	
.bannerdesc {

  bottom: 15%;

}
	
	
		.nav-secondary { max-height: 100%;overflow:visible;position:relative ;top: 0;}
 
	.nav-secondary > ul{display:flex;flex-wrap:wrap;align-items: center;justify-content:space-around; }
	.nav-secondary .wrap{display:flex;justify-content:space-around;align-items:center;height:112px}
	.nav-secondary .wrap>ul{display:flex;flex-wrap:wrap;justify-content:space-around;align-items: center;position:relative;z-index:10;background: none; }	
	.nav-secondary .wrap>ul>li{display:inline-block;padding:0.7em 0.5em;}	
				.nav-secondary li:hover > ul {display:block;}			
			.nav-secondary li ul li {	position:relative;}			
			.nav-secondary li ul li ul {right:-140px;	top:0px;}
	
	
	
	
	
	#nosotros h2{margin-bottom:0;font-size:70px}
	#nosotrosint{flex-wrap:nowrap}
	#nosotrosint > div{padding:20px;box-sizing:border-box}
	#nosotrosint > div:first-child{border-right: solid 1px #fff;top:-40px;position:relative}
	#destacados h2{font-size:70px}
#destacados p{font-size:30px}
	
	
	#quince > div{width:50%}
	
	#quince h2{font-size:80px;}
	
	
#home-block5 h2{text-align:center;font-size:70px}	
	
	
	
	#headerarticuloint{flex-direction:row-reverse;}
	#tituloarticulo{width:50%}
	#tituloarticulo h1{font-size:60px}
	#headerarticulo .featured-image-class{width:50%}
	
	
	#menufooter{border-left:solid 1px #fff;border-right:solid 1px #fff}
	
/* Columna de la Imagen (Izquierda) */
.dress-media-column {
    flex: 1 1 40%; /* Ocupa el 50% del espacio si hay suficiente. */
    min-width: 300px; /* Asegura un ancho mínimo antes de apilar */
}
	.dress-content-column {
    flex: 1 1 50%; /* Ocupa un poco menos para darle espacio al margen */
    min-width: 300px; 
}

	
	
	
	
	
/* El artículo se transforma en un Grid de dos columnas 50%/50% */
    #featured-post-2 .widget-wrap article {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        gap: 25px; 
        /* CLAVE 1: Alinea los elementos en la parte superior para que el alto sea el del contenido más alto */
        align-items: start; 
        /* Agregamos align-content: stretch; para maximizar el uso de altura disponible */
        align-content: stretch;
    }

    /* 1. IMAGEN (Contenedor A): Se coloca automáticamente en la Columna 1 */
    #featured-post-2 .widget-wrap article a.alignnone {
       grid-area: 1 / 1 / 4 / 2;
        line-height: 0;
        /* CLAVE 2: Asegura que el contenedor del enlace (a) se estire a toda la altura de la celda */
        align-self: stretch; 
        display: block; /* Aseguramos que sea un bloque para estirar la altura */
    }
    
    /* 2. IMAGEN (Elemento IMG): Debe ocupar el 100% del contenedor (a.alignnone) */
    #featured-post-2 .widget-wrap article img.entry-image {
        width: 100%;
        /* CLAVE 3: Fuerza a la imagen a llenar el 100% de la altura de su contenedor */
        height: 100%; 
        object-fit: cover; 
        display: block;
		max-height:100%
    }


    /* 3. TÍTULO y CONTENIDO: Se fuerzan a la Columna 2 */
    #featured-post-2 .entry-header {
     grid-area: 1 / 2 / 1 / 2;
        padding: 20px 25px 0 0; 
    }

    #featured-post-2 .entry-content {
       text-align:center;
        padding: 0 25px 20px 0; 
    }
    
    /* Restaurar el tamaño de fuente para desktop */
    #featured-post-2 .entry-title {
        font-size: 50px;
		text-transform:uppercase
    }
	
	
.header-widget-area {
        position: relative;
        padding-top: 0; 
        padding-bottom: 0;
    }

    /* 2. Mover el Logo (.title-area) al Centro */
    .title-area {
        position: absolute; /* ¡CLAVE! Saca el logo del flujo normal */
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        z-index: 20; /* Lo pone encima de los menús */
        padding: 0;
        margin: 0;
    }
    
    /* Ocultar la descripción del sitio bajo el logo */
    .site-description {
        display: none;
    }

    /* 3. Alinear las dos barras de navegación */
    #twomenus {
        display: flex; /* Convierte los dos NAVs en elementos flexibles */
        justify-content: space-around; /* Distribuye las dos NAVs a los extremos */
        align-items: center;
        width: 100%; 
        padding: 15px 0; max-height: 100%;overflow:visible;position:relative ;top: 0;
    }

    /* 4. Asegurar que los menús de navegación no choquen con el logo */
    .nav-primary {
        margin-right: -20px; /* Ajuste para la NAV izquierda */
    }

    .nav-secondary {
        margin-left: 100px; /* Ajuste para la NAV derecha */
		margin-right:-75px
    }
    
    /* Espacio entre los items del menú */
    .genesis-nav-menu > li {
        padding: 0 10px; 
    }
	
	@media screen and (min-width: 1920px) {	
	
	
	

	}

	
	
}


.radial-progress {
  float: left;
  margin: 25px;
  width: 120px;
  height: 120px;
  position: relative;
  background-color: #d7d7d7;
  border-radius: 50%;
}
@media (max-width: 480px) {
  .radial-progress {
    width: 85px;
    height: 85px;
  }
}
.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}
@media (max-width: 480px) {
  .radial-progress .circle .mask,
  .radial-progress .circle .fill,
  .radial-progress .circle .shadow {
    width: 85px;
    height: 85px;
  }
}
.radial-progress .circle .mask,
.radial-progress .circle .fill {
  -webkit-backface-visibility: hidden;
  transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s;
}
.radial-progress .circle .mask.reanimate,
.radial-progress .circle .fill.reanimate {
  transition: -webkit-transform 0s;
  transition: -ms-transform 0s;
  transition: transform 0s;
}
.radial-progress .circle .mask.reset,
.radial-progress .circle .fill.reset {
  -webkit-transform: rotate(0deg) !important;
  -ms-transform: rotate(0deg) !important;
  transform: rotate(0deg) !important;
}
.radial-progress .circle .mask {
  clip: rect(0px, 120px, 120px, 60px);
}
@media (max-width: 480px) {
  .radial-progress .circle .mask {
    clip: rect(0px, 85px, 85px, 42.5px);
  }
}
.radial-progress .circle .mask .fill {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #ed1f41;
}
@media (max-width: 480px) {
  .radial-progress .circle .mask .fill {
    clip: rect(0px, 42.5px, 85px, 0px);
  }
}
.radial-progress .inset {
  width: 100px !important;
  height: 100px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px !important;
  background-color: #fbfbfb;
  border-radius: 50%;
  text-align: center;
  line-height: 100px;
	display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 480px) {
  .radial-progress .inset {
    width: 66px !important;
    height: 66px !important;
    margin: -33px 0 0 -33px !important;
    line-height: 90px;
  }
}
.radial-progress .little {
  font-size: 22px;
  color: #d7d7d7;
}
@media (max-width: 480px) {
  .radial-progress .little {
    font-size: 12px;
  }
}
.radial-progress .big {
  font-size: 37px;
}
@media (max-width: 480px) {
  .radial-progress .big {
    font-size: 27px;
  }
}

.radial-progress{position:absolute}


/*animaciones*/



.animatable {
  
  /* initially hide animatable objects */
  visibility: hidden;
  
  /* initially pause animatable objects their animations */
  -webkit-animation-play-state: paused;   
  -moz-animation-play-state: paused;     
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@-webkit-keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInDown {
	0% {
		opacity: 0;
		-o-transform: translateY(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}



@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-moz-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-o-keyframes fadeIn {
	0% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	60% {
		opacity: 0;
	}
	20% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

	80% {
		-webkit-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px);
	}

	60% {
		-moz-transform: translateX(20px);
	}

	80% {
		-moz-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px);
	}

	60% {
		opacity: 1;
		-o-transform: translateX(20px);
	}

	80% {
		-o-transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px);
	}

	60% {
		transform: translateX(20px);
	}

	80% {
		transform: translateX(-5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		-webkit-transform: translateX(-20px);
	}

	80% {
		-webkit-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}
}

@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		-moz-transform: translateX(-20px);
	}

	80% {
		-moz-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes bounceInRight {
	0% {
		opacity: 0;
		-o-transform: translateX(2000px);
	}

	60% {
		-o-transform: translateX(-20px);
	}

	80% {
		-o-transform: translateX(5px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes bounceInRight {
	0% {
		opacity: 0;
		transform: translateX(2000px);
	}

	60% {
		transform: translateX(-20px);
	}

	80% {
		transform: translateX(5px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translateY(20px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes fadeInUp {
	0% {
		opacity: 0;
		-moz-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes fadeInUp {
	0% {
		opacity: 0;
		-o-transform: translateY(20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	50% {
		-webkit-transform: scale(1.05);
	}

	70% {
		-webkit-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}

	50% {
		-moz-transform: scale(1.05);
	}

	70% {
		-moz-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}

	50% {
		-o-transform: scale(1.05);
	}

	70% {
		-o-transform: scale(.9);
	}

	100% {
		opacity: 1;
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}

	50% {
		transform: scale(1.05);
	}

	70% {
		transform: scale(.9);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes moveUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(40px);
	}	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes moveUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}

@-o-keyframes moveUp {
	0% {
		opacity: 1;
		-o-transform: translateY(40px);
	}

	100% {
		opacity: 1;
		-o-transform: translateY(0);
	}
}

@keyframes moveUp {
	0% {
		opacity: 1;
		transform: translateY(40px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@-webkit-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@-o-keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}
@keyframes fadeBgColor {
	0%{
		background:none;
	}
  70%{
		background:none;
	}
	100%{
		background:#464646;
	}
}

.animated.animationDelay{
	animation-delay:.4s;
	-webkit-animation-delay:.4s;
}
.animated.animationDelayMed{
	animation-delay:1.2s;
	-webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{
	animation-delay:1.6s;
	-webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {
	-webkit-animation-name: fadeBgColor;
	-moz-animation-name: fadeBgColor;
	-o-animation-name: fadeBgColor;
	animation-name: fadeBgColor;
}
.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}
.animated.bounceInRight {
	-webkit-animation-name: bounceInRight;
	-moz-animation-name: bounceInRight;
	-o-animation-name: bounceInRight;
	animation-name: bounceInRight;
}
.animated.bounceInLeft {
	-webkit-animation-name: bounceInLeft;
	-moz-animation-name: bounceInLeft;
	-o-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
}
.animated.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
}
.animated.fadeInDown {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
.animated.fadeInUp {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.animated.moveUp {
	-webkit-animation-name: moveUp;
	-moz-animation-name: moveUp;
	-o-animation-name: moveUp;
	animation-name: moveUp;
}