﻿/*________GoogleFonts__lo primero_____*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

/*_____________WEBSITE__________*/

body {
  color: #303030;
  background-image: url(../images/fondo-pattern.jpg);
}


a{text-decoration: none; color: #303030; outline:none;}
a:hover, a:focus {text-decoration: none; color: #303030; outline:none;}/*cambia color*/
footer, header, article, section, div, h1, h2, h3, h4, h5, p, form, input, textarea, img, span, td{margin:0; padding:0; background:transparent}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block; background:transparent;outline:none;padding-inline-start: 0px; padding-inline-end: 0px; margin-block-start: 0px; margin-block-end: 0px; margin:0;}
id, class, div, section {outline:none;}
h1,h2,h3,h4,h5,h6{font:inherit}
img{border:none;}
svg{overflow:hidden; vertical-align:middle}
svg {height: 100%; max-width: 100%;}
video {width:100%; height:auto; border:0;}
html {font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; /*scroll mov suave*/}
sup, sub{font-size: 0.75em;}
b,strong{font-weight:bold}
label {margin-bottom: .25rem !important; display: inline-block;}

ul {display: block; list-style-type: square; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}
ol {display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; padding-inline-start: 20px;}

ul.sin-estilo, ol.sin-estilo {padding-inline-start: 0px; list-style-type: none; margin-block-start: 0px; margin-block-end: 0px;}

acronym, abbr {text-decoration: underline; text-decoration: underline dotted; cursor: help; border-bottom: 0; text-decoration-skip-ink: none;}


/*________Scrolltop_______*/

.scrolltop{position:fixed; color:#c50000; bottom:20px; right:20px; display:none; background:#ec0c4e; z-index:100; padding:6px 15px 8px 13px;font-size:0.6875em;}
a.scrolltop, a:hover .scrolltop , a:focus .scrolltop {color:white;}


/*_________________selecciones___________________*/

/* webkit, opera, IE9 */
::selection { background:#ec0c4e;  color:#ffffff; text-shadow: none;}
/* mozilla firefox */
::-moz-selection { background:#ec0c4e; color:#ffffff; text-shadow: none}

/*________FLEX_______*/

.centradovertical{height:100%; display:flex; align-items: center; justify-content: center;}
.centradovertical.columna{flex-direction: column; align-items: start;}
.centradovertical.fila{flex-direction: row;}
.d-flex {display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important;}
.push {margin-left: auto; display: inline-flex;}
.center-flex{align-items: center !important; }/*centrado vertical*/

.flex-wrap {-ms-flex-wrap:wrap!important; flex-wrap:wrap!important}/*los contenidos los pone en bloque uno debajo de otro*/
.flex-fill { -ms-flex:1 1 auto!important; flex:1 1 auto!important}
.flex-row{-ms-flex-direction:row!important; flex-direction:row!important}
.flex-column{-ms-flex-direction:column!important; flex-direction:column!important}
.flex-row-reverse{-ms-flex-direction:row-reverse!important; flex-direction:row-reverse!important}
.flex-column-reverse{-ms-flex-direction:column-reverse!important; flex-direction:column-reverse!important}

.flex-grow-1 {flex-grow: 1!important;}

.d-inline-flex{display:-webkit-inline-box!important; display:-ms-inline-flexbox!important; display:inline-flex!important}

.flex-start-end {display: flex; justify-content: space-between;}/* distribuir items uniformemente. El primer item al inicio, el último al final */

.flex-izq{flex: 1; display: flex; justify-content: flex-start; align-items: center;}
.flex-izq img{align-items: center;}
.flex-center{flex: 1; display: flex; justify-content: center; align-items: center;}
.flex-der{flex: 1; display: flex; justify-content: flex-end; align-items: center;}

.align-self-auto{align-self: auto!important;}
.align-self-start{align-self: flex-start!important;}
.align-self-end{align-self: flex-end!important;}
.align-self-center{align-self: center!important;}
.align-self-baseline{align-self: baseline!important;}
.align-self-strech{align-self: stretch!important;}

.inline-icon{display: flex; align-items: center;}
.inline-icon i, .inline-icon img{padding:0rem 0.10rem;}

.align-start{-ms-flex-line-pack:start!important; align-content:flex-start!important}
.align-end{-ms-flex-line-pack:end!important; align-content:flex-end!important}
.align-center{-ms-flex-line-pack:center!important; align-content:center!important}
.align-between{-ms-flex-line-pack:justify!important; align-content:space-between!important}
.align-around{-ms-flex-line-pack:distribute!important; align-content:space-around!important}
.align-stretch{-ms-flex-line-pack:stretch!important; align-content:stretch!important}

.align-items-start {align-items: flex-start!important;}
.align-items-center {align-items: center!important;}
.align-items-end {align-items: flex-end!important;}
.align-items-stretch {align-items: stretch!important;}

.justify-start{-ms-flex-pack:start!important; justify-content:flex-start!important}
.justify-end{-ms-flex-pack:end!important; justify-content:flex-end!important}
.justify-center{-ms-flex-pack:center!important; justify-content:center!important}
.justify-between{-ms-flex-pack:justify!important; justify-content:space-between!important}
.justify-around{-ms-flex-pack:distribute!important; justify-content:space-around!important}
.justify-stretch{-ms-flex-pack:justify !important; justify-content:stretch!important}


/*__________CUSTOM_____________*/

.bold{font-weight:bold;}
.semibold{font-weight:500;}

.mr{margin-right:0.5rem!important}
.ml{margin-left:0.5rem!important}
.mt{margin-top:1.2rem!important}
.mb{margin-bottom:1.2rem!important}
.mtb{margin:0.5rem 0px !important;}

.ml-l-size{margin-left:2rem!important}
.mr-l-size{margin-right: 2rem!important;}

.sombra {box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -webkit-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -moz-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%);}

/*colores*/
.colordest{color:#ec0c4e}
.gris{color:#666666;}
.gris-oscuro{color:#303030;}
.verde{color:#60B760;}
.blanco{color:#ffffff;}
.rosa{color:#ff77ac;}
.rosa-claro{color:#ffa1c1}
.rojo{color:#ec0c4e;}

/*textos*/
.titpromo{font-family: 'Poppins', sans-serif; font-size:1.375em; color:#303030; font-weight:500; margin-bottom:20px; line-height:140%}
.titpromo.blanco{color:white;}
.titpromo.normal{font-weight:400;}
.titpromo .edad{font-size:0.9em; color:gray;font-weight:400;}
.titpromo.nomargin{margin:0px;}

.txtmin{font-size: 0.875em; color: #364a63; /*line-height: 140%;*/ text-decoration: none;}
.txtmin a, .txtmin a:hover, .txtmin a:focus {color: #364a63;}
.txtmin.s-size{font-size:0.8125em;}
.txtmin.xs-size{font-size:0.6875em;}

/*botones*/
.btn-colordest a{background:#ec0f4e; color:#fff; border-color:#ec0f4e;}
.btn-colordest a:hover, .btn-colordest a:focus{background:#ec0f4e; color:#fff; border-color:#ec0f4e;}

/*contenido centrado flex*/
.contenido-centrado-flex{min-height:100vh; display:flex; align-items: center; justify-content: center;}

/*contenido centrado flex*/
.fullscreen-wrap {display: flex; flex-direction: column; min-height: 100vh; z-index:1}
.fullscreen-content {padding: 0 !important; min-height: 100vh; display: flex; flex-direction: column;}
.fullscreen-block {margin-bottom: auto; padding: 1.25rem;}
.fullscreen-header{margin-bottom: auto; background: #000; padding: 15px; text-align:center; color:white;}
.fullscreen-no-header{margin-bottom: auto;}
.fullscreen-footer{margin-top: auto; background: #fff; border-top: 1px solid #e5e9f2; padding: 5px 6px;}

/*contenido centrado upload foto*/
.contenedor-100x100{position:absolute; width:100%;height:100%;}
.contenido-centrado{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index:1000}
.overlay {height: 100%; width: 100%; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,0.7); overflow-x: hidden; z-index: 500; display: inherit;}
.caja-upload{background:white; position:relative; padding:40px 20px 35px 20px; border-radius:6px; max-width:400px; min-width:320px; font-family: 'Poppins', sans-serif; font-size:16px; font-weight:500;}

.zona-circulo{position:absolute; left:44%; right:44%; top:-25px; z-index:502;}
.zona-circulo i{font-size:1.25em;}

/*cajas*/
.contenedor-promo{margin:0 auto;  max-width:640px;}
.contenedor-promo.alta{background:#fff; padding:20px; border-radius:4px; box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -webkit-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%); -moz-box-shadow: 1px 1px 9px -2px rgb(0 0 0 / 58%);}
.contenedor-promo.s-size{max-width:450px;}

.img70 {width: 70px;}

.zona-encontrados{margin:15px 0px;}
.zona-encontrados.centro{margin-left:30px;}

/*swipe*/
.swipe-cards{position:relative;}
.card{background-color:white; padding:4px; border-radius:4px; max-width:340px; margin:0 auto;}
.card-img{position:relative;}
.card-img img{border-radius:4px; width:100%;}
.card-txt{padding:15px 10px;}
.zona-votos{position:absolute; bottom:10px; left:0; right:0; margin-left: auto; margin-right: auto; left: 0; right: 0; text-align: center; z-index:2;}

.card-debajo{position:absolute; background:white; padding:4px; border-radius:4px; padding-bottom:40px}
.card-debajo.izq1{z-index:-2; top:50px; left:25px;}
.card-debajo.izq2{z-index:-1; top:20px; left:40px;}
.card-debajo.der1{z-index:-2; top:50px; right:25px;}
.card-debajo.der2{z-index:-2; top:20px; right:40px;}

.hide-info{visibility:visible; display:inherit;}
.hide-info-top{visibility:hidden; display:none;}

.match{position:absolute; bottom:-5px; left:0; background:#ec0c4e; color:white; font-size:0.75em; line-height:1; padding:2px 2px; text-align:center; border-radius:3px; width:100%;}

@media (max-width: 480px) {
	.hide-info{visibility:hidden !important; display:none !important;}
	.hide-info-top{visibility:visible !important; display:inherit !important;}
	.fullscreen-block.alta{padding:0px;}
	.contenedor-promo.alta{width:100%; box-shadow:none; -webkit-box-shadow:none; -moz-box-shadow:none; border-radius:none;}
	/*.zona-encontrados.centro{margin:0px;}*/
}

/*formularios*/
input:not([type="checkbox"]),input, textarea, select { 
       -webkit-appearance: none; /* remove shadow in iOS*/
       -webkit-border-radius:0; /* remove border-radius in iOS*/
       border-radius: 0; 
}

.formulario{margin-bottom:15px;}

.formulario:focus {
	border-color:none !important; outline: 0 !important;
	-webkit-box-shadow: none !important;
          box-shadow: none !important;
}

/*flexible añadido*/
.col01-xxs,.col10-xxs,.col11-xxs,.col12-xxs,.col02-xxs,.col03-xxs,.col04-xxs,.col05-xxs,.col06-xxs,.col07-xxs,.col08-xxs,.col09-xxs, .col5col-xxs {position:relative;min-height:1px;padding-right:15px;padding-left:15px}

@media (min-width:250px){
 
 .col01-xxs,.col10-xxs,.col11-xxs,.col12-xxs,.col02-xxs,.col03-xxs,.col04-xxs,.col05-xxs,.col06-xxs,.col07-xs,.col08-xs,.col09-xs{float:left;  z-index:1}
 .col12-xxs{width:100%}
 .col11-xxs{width:91.66666667%}
 .col10-xxs{width:83.33333333%}
 .col09-xxs{width:75%}
 .col08-xxs{width:66.66666667%}
 .col07-xxs{width:58.33333333%}
 .col06-xxs{width:50%}
 .col05-xxs{width:41.66666667%}
 .col04-xxs{width:33.33333333%}
 .col03-xxs{width:25%}
 .col02-xxs{width:16.66666667%}
 .col01-xxs{width:8.33333333%}
 
 /*empujar hacia la derecha*/
 .col12-xxs-pull{right:100%}
 .col11-xxs-pull{right:91.66666667%}
 .col10-xxs-pull{right:83.33333333%}
 .col09-xxs-pull{right:75%}
 .col08-xxs-pull{right:66.66666667%}
 .col07-xxs-pull{right:58.33333333%}
 .col06-xxs-pull{right:50%}
 .col05-xxs-pull{right:41.66666667%}
 .col04-xxs-pull{right:33.33333333%}
 .col03-xxs-pull{right:25%}
 .col02-xxs-pull{right:16.66666667%}
 .col01-xxs-pull{right:8.33333333%}
 .col00-xxs-pull{right:auto}
 
 /*tirar hacia la izquierda*/
 .col12-xxs-push{left:100%}
 .col11-xxs-push{left:91.66666667%}
 .col10-xxs-push{left:83.33333333%}
 .col09-xxs-push{left:75%}
 .col08-xxs-push{left:66.66666667%}
 .col07-xxs-push{left:58.33333333%}
 .col06-xxs-push{left:50%}
 .col05-xxs-push{left:41.66666667%}
 .col04-xxs-push{left:33.33333333%}
 .col03-xxs-push{left:25%}
 .col02-xxs-push{left:16.66666667%}
 .col01-xxs-push{left:8.33333333%}
 .col00-xxs-push{left:auto}
 
 /*desplazar cualquier columna hacia la derecha*/
 .col12-xxs-offset{margin-left:100%}
 .col11-xxs-offset{margin-left:91.66666667%}
 .col10-xxs-offset{margin-left:83.33333333%}
 .col09-xxs-offset{margin-left:75%}
 .col08-xxs-offset{margin-left:66.66666667%}
 .col07-xxs-offset{margin-left:58.33333333%}
 .col06-xxs-offset{margin-left:50%}
 .col05-xxs-offset{margin-left:41.66666667%}
 .col04-xxs-offset{margin-left:33.33333333%}
 .col03-xxs-offset{margin-left:25%}
 .col02-xxs-offset{margin-left:16.66666667%}
 .col01-xxs-offset{margin-left:8.33333333%}
 .col00-xxs-offset{margin-left:0}
 
 /*5columnas*/
 .col5col-xxs {width: 20%; float: left;}
 
}

