/* ----------------------------------------
 PALETA DE COLOR
---------------------------------------- */
.lblanco{color: #fff!important;}
.lgris1{color: #666!important;}
.lgris2{color: #c8c8c8!important;}
.lgris3{color: #313440!important;}
.lazul1{color: #d1e2ea!important;}
.lazul2{color: #adcedf!important;}
.lazul4{color: #4e89df!important;}
.lazul5{color: #2e48b9!important;}
.lazul6{color: #3498db!important;}
.lazul7{color: #2980b9!important;}
.lazul8{color: #313440 !important;}
.lrojo1{color: #d13646!important;}
.lrojo2{color: #da5650 !important;}
.lrosa1{color:#c75178!important;}
.lverde1{color: #54af7f!important;}
.lverde2{color: #278e58!important;}
.lamarillo{color: #fcb63c!important;}
.lnaranja1{color: #ff5636 !important;}
.lmorado{color:#514a62 !important}
.lmarron1{color: #847777!important;}
.lrosa1{color:#c75178!important;}
.azul1{background-color: #d1e2ea!important;color:#666;}
.azul2{background-color: #adcedf!important;color: #333;}
.azul3{background-color: #6baae8!important;color:#fafafa;}
.azul4{background-color: #4e89df!important;color: #fafafa;}
.azul5{background-color: #2e48b9!important;color:#fafafa;}
.azul6{background-color: #3498db!important;color:#fafafa;}
.azul7{background-color: #2980b9!important;color:#fafafa;}
.azul8{background-color: #313440!important;color:#fafafa;}
.azul9{background-color: #0b1351!important;color:#fafafa;}
.azul10{background-color: #D5E2FC!important;}
.blanco{background-color: #FFF!important;color: #202020;}
.gris1{background-color: #ddd!important;color: #202020;}
.gris2{background-color: #c8c8c8!important;color:#202020;}
.gris3{background-color: #cecece!important;color:#333;}
.gris4{background-color: #3d414a!important;color: #fafafa;}
.gris5{background-color: #f3f3f3!important;color: #202020;}
.gris6{background-color: #b2becb;color: #333;}
.naranja1{background: #ff5636 !important;color: #fff;}
.naranja2{background: #ff6649 !important;color: #fff;}
.marron1{background-color: #847777!important;color: #fafafa;}
.rojo1{background-color: #d13646!important;color:#fafafa;}
.rojo2{background-color: #da5650 !important;color: #fafafa;}
.rojo3{background-color:#691a31!important;color: #fafafa;}
.amarillo1{background-color: #fcb63c!important;color:#fafafa;}
.amarillo2{background-color: #ebb75c !important;color: #fafafa;}
.verde1{background-color: #54af7f!important;color:#fafafa;}
.verde2{background-color: #278e58!important;color: #fafafa}
.rosa1{background-color:#c75178!important;color: #fff;}
.rosa2{background-color:#b47ea4!important;color: #fff;}
.morado{background-color:#514a62 !important}
.morado1{background-color:#CACDE8;}
.pd0{padding: 0px!important;}
.pd2{padding: 2px!important;}
.pd5{padding: 5px!important;}
.pd10{padding: 10px!important;}
.pd30{padding: 30px!important;}
.redonda{border-radius: 6px;}
.shad{box-shadow:1px 2px 15px 0px hsl(228, 13.3%, 22.2%);}
.logo-signarh{width:200px;float: left;position: fixed;z-index: 1000;top: 15px;left: 45%; -webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(10px 10px 10px #0B1351);}
@media screen and (max-width: 800px) {	.logo-signarh{visibility: hidden;display: none;}	}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.titulo-modulo{padding-right:20px;text-align: right;float:right;color:#fff;font-size:50px;font-weight: 400;font-style: italic;text-shadow: 0px 2px 3px #313440;}
.avatar{position: relative;float: left;left: 15%;top: -24px;z-index: 100;width: 120px;height: 120px;background: #444 url(../img/avatar_f.png) no-repeat;background-size: auto;background-size: cover;border-radius: 50%;border: 12px solid #2980b9;}
.mosaico-100{width:50px;height:50px;margin-left:2px;padding:4px;position: relative;text-align: center;display: table-cell;vertical-align: middle;font-size: 14px;font-weight: 700;}
.header {background: #2c4677;font-weight:900;height: 80px;color: #efefef;z-index: 400;}
.header-fixed {background-color:#313440/*#2f3768*//*#252c4a*//*#cfcfcf*/;position:sticky;top: 0;height:50px;z-index: 999;padding: 0 20px 0 10px;}
.header-txt1{font-weight:700;line-height:40px;color:#285aa1;}
.header-btn{font-weight: 700;font-size: 14px;float:right;padding: 8px 12px;background: #2980b9/*#c75178*/;color:#fff;border-radius: 5px;position: relative;top: 7px;margin-right: 3px;}
.header-btn:hover{background:#d13646 }
.content{position:absolute;width:100%;min-height: 900px;margin: auto;padding: 0px 0 100px 0;/*margin-left: 240px;-webkit-transition: margin-left .5s ease, margin-left .5s ease; transition: margin-left .5s ease, margin--left .5s ease;*/background-image:url(../img/bg.png); background-position:top right; background-repeat:no-repeat;background-size:28%;background-attachment: fixed;}
.content-modal{position:absolute;width:100%;min-height: 900px;margin: auto;padding: 0px 0 100px 0;background-image:url(../img/bg.png); background-position:top right; background-repeat:no-repeat;background-size:75%;background-attachment: fixed;}

/*.content.pinn { margin-left: 80px; width: calc(100% - 80px);}*/
article{padding: 15px 95px 15px 15px;}
h1,h2,h3,h4,h5,h6{font-weight:400;padding: 0 0 5px 0;letter-spacing: -.15px;}
p{font-size: 1.1em;padding: 0 0 15px 0;}
.txtd{text-align: right;}
.txti{text-align: left;}
.txtj{text-align: justify;}
.txtc{text-align: center;}
.txtcircular{border-radius: 50%;width: 25px;height: 25px;font-size: 15px;padding-top: 3px;display: inline-block;text-align: center;vertical-align: middle;font-weight: bold;margin-right: 5px;}
.labelh{min-width: 110px;display: inline-block;height: 32px;margin-right: 10px;border-radius: 6px 0 0 6px;}
.icn{top: 3px;position: relative;}
/* ---- PIE DE PAGINA ---- */
.fixed_footer{z-index: 10;width:100%;height:250px;background:rgb(49, 52, 64);position: fixed;left: 0;bottom: 0;padding: 40px;}
.fixed_footer p{color:#efefef;column-count: 2;column-gap: 60px;font-size: 1em;font-weight: 400;}
/*TARJETAS*/
.card {max-width: 800px;min-width: 640px;margin: 0 auto;}
.card:before,.card:after {content: '';display: block;clear: both;}
.card .marco {width: inherit;;padding: 0 25px;box-sizing: border-box;float: left;}
.card .marco .encabezado {margin: 0 0 15px;color: #666666;font-size: 18px;font-weight: bold;text-transform: uppercase;}
.card .info {width: 300px;margin: 50px auto;text-align: center;}
.card .info h1 {margin: 0 0 15px;padding: 0;font-size: 24px;font-weight: bold;color: #333333;}
.card .info span {color: #666666;font-size: 12px;}
.card .info span a {color: #000000;text-decoration: none;}
.contenedor {border-radius: 8px;position: relative;z-index: 1;display: block;background:none;min-width: 270px;height: 485px;box-shadow: 0px 1px 2px 0px rgb(46, 71, 170);transition: all 1.3s linear 0s;}
.contenedor:hover,.hover {box-shadow: 0px 1px 35px 0px rgb(46, 71, 170);}
.contenedor:hover .thumbnail img,.hover .thumbnail img {transform: scale(1.1);opacity: 0.6;}
.contenedor .thumbnail {border-radius: 8px;background: none;height: 400px;overflow: hidden;}
.contenedor .thumbnail .fecha {position: absolute;top: 20px;right: 20px;z-index: 1;background: #3d4cbf;width: 65px;height: 65px;padding: 7px 0;border-radius: 100%;color: #FFFFFF;font-weight: 700;text-align: center;box-sizing: border-box;border: 5px solid #fff;}
.contenedor .thumbnail .fecha .dia {font-size: 18px;}
.contenedor .thumbnail .fecha .mes {font-size: 12px;text-transform: uppercase;}
.contenedor .thumbnail img {display: block;width: 120%;transition: all 0.3s linear 0s;}
.contenedor .contenido {position: absolute;bottom: 0;background: #FFFFFF;width: 100%;padding: 30px;box-sizing: border-box;transition: all 0.3s cubic-bezier(0.37, 0.75, 0.61, 1.05) 0s;border-radius: 0 8px 8px 8px;}
.contenedor .contenido .categoria {position: absolute;top: -34px;left: 0;background: #3d4cbf;padding: 10px 15px;color: #FFFFFF;font-size: 14px;font-weight: 700;text-transform: uppercase;}
.contenedor .contenido .titulo {margin: 0;padding: 0 0 10px;color: #333333;font-size: 26px;font-weight: 700;}
.contenedor .contenido .subtitulo {margin: 0;padding: 0 0 20px;color: #3d4cbf;font-size: 20px;font-weight: 400;}
.contenedor .contenido .descripcion {display: none;color: #666666;font-size: 14px;line-height: 1.8em;}
.contenedor .contenido .fdcontenido {margin: 30px 0 0;color: #999999;}
.contenedor .contenido .fdcontenido.timestamp {margin: 0 16px 0 0;}
.contenedor .post-content .fdcontenido a {color: #999999;text-decoration: none;}
.hover .contenido .descripcion {display: block !important;height: auto !important;opacity: 1 !important;}
/* The Grid --------------*/
.wrapper{width:calc(100%);display:grid;grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));/*grid-auto-rows:minmax(100px, auto);*/grid-gap:.75em;justify-items:stretch;align-items:stretch;}
.wrapper50{width:calc(100%);display:grid;grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));/*grid-auto-rows:minmax(100px, auto);*/grid-gap:.75em;justify-items:stretch;align-items:stretch;}
.wrapper30{width:calc(100%);display:grid;grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));/*grid-auto-rows:minmax(100px, auto);*/grid-gap:.75em;justify-items:stretch;align-items:stretch;}
.wrapper25{width:calc(100%);display:grid;grid-template-columns: repeat(auto-fill, minmax(24%, 1fr));/*grid-auto-rows:minmax(100px, auto);*/grid-gap:.75em;justify-items:stretch;align-items:stretch;}
.wrapper > div{padding:1em;}
/*
@media screen and (min-width: 740px) and (max-width: 1024px) {	.wrapper{grid-template-columns: repeat(auto-fill, 23.6%);} 	}
@media screen and (max-width: 480px) {	.wrapper{grid-template-columns: repeat(auto-fill, 48%);}	}
@media screen and (min-width: 360px) and (max-width: 480px) {	.wrapper{grid-template-columns: repeat(auto-fill, 98%);}	}
*/

.grid-container {padding:5px;margin: 0 auto;}
.top-container{margin-top: 220px;}
@media screen and (min-width: 320px) {
  .grid-container {max-width: 100%;}
  .grid-wrapper {display: grid;grid-gap:1em;grid-template-columns: repeat(12, 1fr);justify-items:stretch;align-items:stretch;margin: 0 auto;width: 100%;}
  .grid-center{justify-items:center;}
  .col-1 { grid-column: span 1; min-width: calc(100% / 1);}
  .col-2 { grid-column: span 2; min-width: calc(100% / 2);}
  .col-3 { grid-column: span 3; min-width: calc(100% / 3);}
  .col-4 { grid-column: span 4; min-width: calc(100% / 4);}
  .col-5 { grid-column: span 5; min-width: calc(100% / 5); }
  .col-6 { grid-column: span 6; min-width: calc(100% / 6); }
  .col-7 { grid-column: span 7; min-width: calc(100% / 7);}
  .col-8 { grid-column: span 8; min-width: calc(100% / 8);}
  .col-9 { grid-column: span 9; min-width: calc(100% / 9);}
  .col-10 { grid-column: span 10; min-width: calc(100% / 10);}
  .col-11 { grid-column: span 11; min-width: calc(100% / 11);}
  .col-12 { grid-column: span 12; min-width: calc(100% / 12);}
}
/* CSS keyframes */
@-webkit-keyframes swing{0%, 30%, 50%, 70%, 100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}10%{-webkit-transform:rotate(10deg);transform:rotate(10deg);}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}}
@keyframes swing{0%, 30%, 50%, 70%, 100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}10%{-webkit-transform:rotate(10deg);transform:rotate(10deg);}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg);}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}}
@-webkit-keyframes init {0% {width: 0px;height: 0px;}100% {width: 56px;height: 56px;margin-top: 0px;opacity: 1;}}
@keyframes init {0% {width: 0px;height: 0px;}100% {width: 56px;height: 56px;margin-top: 0px;opacity: 1;}}
@-webkit-keyframes puff {0% {top: 100%;height: 0px;padding: 0px;}100% {top: 50%;height: 100%;padding: 0px 100%;}}
@keyframes puff {0% {top: 100%;height: 0px;padding: 0px;}100% {top: 50%;height: 100%;padding: 0px 100%;}}
@-webkit-keyframes borderRadius {0% {-webkit-border-radius: 50%;}100% {-webkit-border-radius: 0px;}}
@keyframes borderRadius {0% {border-radius: 80%;}100% {border-radius: 0px;}}
/*CALENDARIO ------------------ */
.top_subnav{margin:0px;display: block;padding-left: 10px;}
.subnav { margin-left: 0;list-style: none;padding-left: 0; color:#666!important}
.subnav > li > a { padding: 8px;color:#666!important;}
.nav_submenu{float: left;margin:0px;width: 100%;}
.top_subnav a:hover {padding: 8px;background: #4E89DF; color: #fff !important;}
.dottmt{width: 8px;height: 8px;position: relative;float: right;right: 30px;top:15px;background: #4cbc1f;border-radius: 50%}
.dottol{width: 8px;height: 8px;position: relative;float: right;right: 30px;top:15px;background: #FFAC00;border-radius: 50%}
.dotret{width: 8px;height: 8px;position: relative;float: right;right: 30px;top:15px;background: #F77F1E;border-radius: 50%}
.dotomi{width: 8px;height: 8px;position: relative;float: right;right: 30px;top:15px;background: #F35161;border-radius: 50%}
.dotfal{width: 8px;height: 8px;position: relative;float: right;right: 30px;top:15px;background: #EB31FF;border-radius: 50%}
.dottmt_txt{color: #4cbc1f; }
.dottol_txt{color: #FFAC00; }
.dotret_txt{color: #F77F1E;}
.dotomi_txt{color: #F35161;}
.dotfal_txt{color: #EB31FF;}
.dotsnr_txt{color: #3bb2ff;}
.hrs{width:40%;}
@media screen and (max-width: 1360px) {
.hrs{width:50%;}
}
.sindato{text-decoration: line-through;}
.calendar-left { width: 250px;height: 550px;border-radius: 10px 0px 0px 10px;background-color:#3d4cbf;background-repeat: no-repeat;background-size: cover;float: left;color: #fff;border: 4px solid #3e4dbe;}
.calendar-base {width: calc(100%);height: 550px;border-top-right-radius: 10px;border-bottom-right-radius: 10px;position: relative;float:left;top:110px;}
.cardd { perspective: 750px;}
.contiene {width: 100%;height: 100%;transition: transform 1s;transform-style: preserve-3d;z-index:0;border-radius: 0px 10px 10px 0px;}
.frente_hover {transform: rotateY( 180deg ) ;transition: transform 1s;transform-style: preserve-3d;}
.regresa_hover {transform: rotateY( 0deg ) ;transition: transform 1s;transform-style: preserve-3d;}
.frente,.trasero {transform-style: preserve-3d;float: left;position: absolute;backface-visibility: hidden;}
.frente{font-family: 'Dosis';width: 98%;height: 550px;transition: transform 1s;padding: 10px;border-radius: 8px;background-color: #014b87;}
.trasero {width: 100%;height: 550px;background: #fff;border-top-right-radius: 10px;border-bottom-right-radius: 10px;transform: rotateY( 180deg );}
.triangle-left {width: 0;height: 0;border-top: 10px solid transparent;border-right: 10px solid #3BB2FF;border-bottom: 10px solid transparent;float: right;position: relative;right: 10px;top: 22px;}
.triangle-right {width: 0;height: 0;border-top: 10px solid transparent;border-left: 10px solid #3BB2FF;border-bottom: 10px solid transparent;float: right;position: relative;left: 105px;top: 20px;}
.triangle-left:hover{border-right: 10px solid#FFAC00;}
.triangle-right:hover{border-left: 10px solid#FFAC00;}
.anio {color: #3BB2FF;font-size: 30px;float: right;position: relative;right:0px;top: 4px;font-weight: bold;}
.meses {width: 100%;position:relative;top:0px;word-spacing: 10px;float:left;padding: 4px;}
.meses a {color: #3bb2ff;font-size: 14px;}
.mes {text-align: center;float: left;width:calc(100% / 12);}
.activa_mes{font-size: 14px;}
.activa_mes a{color:#3d4cbf;font-weight: 700;}
.dias {width: 100%;color:#fff;position: relative;float:left;text-align: center;padding: 4px 0;font-weight: 700;line-height: 24px;}
.dia {padding-right: 30px;font-size: 22px;}
.inhabil {color: #b0b0b0!important;}
.numeracion {float:left;text-align: center;width: 100%;color: #AAAAAA;position: relative;left: 15px;top: 0px;}
.numn {font-size: 20px;text-align: center;float: left;width: calc(100% / 7);min-height: 50px;}
.num {font-size: 14px;text-align: center;float: left;width: calc(100% / 7);background: #1d70b8;border-radius: 6px;min-height: 60px;border: 2px solid #014b87;/*transition: all 0.5 ease-in;*/padding-top: 3px;}
.num:hover{background: #343455;color: #fff;transition: all .35s ease-in;transform: scale(1.15);z-index: 200;}
.activo {border-radius: 6px;background-color: #2a225c;font-size: 230%;}
.empnom{position: absolute;top:10px;font-size:12px;font-weight: 700;left: 15px;color: #3d4cbf;line-height: 1.2;}
.numdia {font-size: 80px;top: 230px;font-weight: 700;text-align: center;float: right;position: relative;background: #3d4cbf;border-radius: 50%;color: #ffffffdb;width: 130px;height: 130px;left: 35px;z-index: 100;padding-top: 12px;transition: all .5s ease-in;opacity: 0.98;}
.numdia:hover{transition: all .5s ease-in;transform: scale(1.2);}
.nomdia {font-size: 24px;color: #fff;position: relative;bottom: -275px;right: 50px;z-index: 3;transform: rotate(-90deg);text-shadow: 1px 1px 10px #3e4dbe;}
.nomes {font-size: 50px;color: #fff;position: relative;bottom: -350px;transform: rotate(-90deg);right: 100px;text-shadow: 1px 1px 10px #3e4dbe;}
.hrtag{display: inline-block;margin-bottom: 3px;width: 100px;padding: 2px 9px;background: #3d4cbf;border-radius: 4px;color: #fff;}
.crear_registro {float: left;position: absolute;;bottom: 15px;left: 250px;width: 50px;height: 50px;border-radius: 50%;background:none;}
.avataremp {width: 90px;float:right;position:absolute;left: calc(10.5vw);top:200px;z-index: 90;border-radius: 50%;border: 8px solid #3d4cbf;}
@media screen and (max-width: 1280px) {
.avataremp {width: 90px;float:right;position:absolute;left: calc(15.5vw);top:200px;z-index: 90;border-radius: 50%;border: 8px solid #3d4cbf;}
}
@media screen and (max-width: 780px) {
.avataremp {width: 90px;float:right;position:absolute;left: calc(25.5vw);top:200px;z-index: 90;border-radius: 50%;border: 8px solid #3d4cbf;}
}
.avataremp img{width: 100%;background: #e2e2e2;border-radius: 50%;}
.chkicon{background: #f1f1f1;border-radius: 50%;width: 32px;height: 32px;position: relative;float: left;top: 10px;left: 150px;text-align: center;padding-top: 7px;margin-right: 6px;}
.btnicon{border-radius:50%;background:#fff;width:50px;height:50px;text-align:center;padding-top:7px;}
.btnicon:hover{transition: all .35s ease-in;transform: scale(1.3);}
.calendar-btn{width: 70px;float: left;position: relative;display: block;text-align: center;padding: 0 10px;}
.fd{position:relative;float:left;right:-120px;z-index: 0;width: 120px;height: 120px;bottom: -300px;}
.qrcode{position: absolute;float: left;left: calc(65vw);top: 590px;z-index: 399;width: 90px;height: 90px;}
.repincide{font-size: 16px;font-weight: bold;text-align: center;border-bottom: 1px dotted #a8ecc5;width: 90%;margin: 0 auto;}
.rotas{position:absolute;float:left;top:60px;}
.perfilgral{float:left;width:320px;text-align:center;position:relative;}
/* ---------------------------
OVERIDE
---------------------------- */
/*.fancybox-slide--iframe .fancybox-content {width: 980px;max-width: 99.5%;height: 98vh;margin: 0;background: #e1e1e1e0;;border: 5px solid #3d4cbc;border-radius: 8px;}*/
.radialProgressBar {border-radius: 50%;padding: 9px;width: 100px;height: 100px;background: #ddd;}
.radialProgressBar .overlay {border-radius: 50%;width: 80px;height: 80px;margin: auto;background: #fff;text-align: center;padding-top: 50%;font-weight: 700;font-size: 18px;text-shadow: 1px 1px 1px #fff;}
.progress-0 {background-image: -webkit-linear-gradient(left, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #e22020 50%, #ddd 50%);background-image: linear-gradient(90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #e22020 50%, #ddd 50%);}
.progress-10 {background-image: -webkit-linear-gradient(36deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #e22020 50%, #ddd 50%);background-image: linear-gradient(54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #e22020 50%, #ddd 50%);}
.progress-20 {background-image: -webkit-linear-gradient(72deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #e22020 50%, #ddd 50%);background-image: linear-gradient(18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #e22020 50%, #ddd 50%);}
.progress-30 {background-image: -webkit-linear-gradient(108deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #e22020 50%, #ddd 50%);background-image: linear-gradient(-18deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #e22020 50%, #ddd 50%);}
.progress-40 {background-image: -webkit-linear-gradient(144deg, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #e22020 50%, #ddd 50%);background-image: linear-gradient(-54deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #e22020 50%, #ddd 50%);}
.progress-50 {background-image: -webkit-linear-gradient(right, #ddd 50%, transparent 50%), -webkit-linear-gradient(left, #f3ab00 50%, #ddd 50%);background-image: linear-gradient(-90deg, #ddd 50%, transparent 50%), linear-gradient(90deg, #f3ab00 50%, #ddd 50%);}
.progress-60 {background-image: -webkit-linear-gradient(left, #f3ab00 50%, transparent 50%), -webkit-linear-gradient(36deg, #f3ab00 50%, #ddd 50%);background-image: linear-gradient(90deg, #f3ab00 50%, transparent 50%), linear-gradient(54deg, #f3ab00 50%, #ddd 50%);}
.progress-70 {background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(72deg, #028cd5 50%, #ddd 50%);background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(18deg, #028cd5 50%, #ddd 50%);}
.progress-80 {background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(108deg, #028cd5 50%, #ddd 50%);background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-18deg, #028cd5 50%, #ddd 50%);}
.progress-90 {background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(144deg, #028cd5 50%, #ddd 50%);background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-54deg, #028cd5 50%, #ddd 50%);}
.progress-100 {background-image: -webkit-linear-gradient(left, #028cd5 50%, transparent 50%), -webkit-linear-gradient(right, #028cd5 50%, #ddd 50%);background-image: linear-gradient(90deg, #028cd5 50%, transparent 50%), linear-gradient(-90deg, #028cd5 50%, #ddd 50%);}
.abajo {position: relative;width: 24px;height: 24px;margin: 0 auto;top: 35px;}
.chevron {position: absolute;width: 28px;height: 8px;opacity: 0;transform: scale3d(0.5, 0.5, 0.5);animation: move 3s ease-out infinite;}
.chevron:first-child {  animation: move 3s ease-out 1s infinite;}
.chevron:nth-child(2) {  animation: move 3s ease-out 2s infinite;}
.chevron:before,.chevron:after {content: ' ';position: absolute;top: 0;height: 100%;width: 51%;background: #fff;}
.chevron:before {left: 0;transform: skew(0deg, 30deg);}
.chevron:after {right: 0;width: 50%;transform: skew(0deg, -30deg);}
@keyframes move {
  25% {opacity: 1;}
  33% {opacity: 1;transform: translateY(30px);}
  67% {opacity: 1;transform: translateY(40px);}
  100% {opacity: 0;transform: translateY(55px) scale3d(0.5, 0.5, 0.5);}
}
.slider {
  position: relative;
  width: 98%;
  padding:3px;
  margin: 25px auto 0;
  user-select: none;
  touch-action: pan-y;
}

.slider img {
  pointer-events: none;
}

.slider-list {
  width: 100%;
  overflow: hidden;
}

.slider-list.grab {
  cursor: grab;
}

.slider-list.grabbing{
  cursor: grabbing;
}

.slider-track {
  display: flex;
}

.slide {
  width: 33.3%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8d8eb;
  font-size: 9px;
}

.slider-arrows {
  margin-top: 5px;
  text-align: center;
}

.next,
.prev {
  background: none;
  border: none;
  margin: 0;
  cursor: pointer;
  padding:2px;
}

.next.disabled,
.prev.disabled {
  opacity: .25;
  pointer-events: none;
}