@font-face {
  font-family: 'Druk Text Web Bold';
  src: url('../druk/DrukText-Bold-Web.eot');
  src: url('../druk/DrukText-Bold-Web.eot?#iefix') format('embedded-opentype'),
  url('../druk/DrukText-Bold-Web.woff2') format('woff2'),
  url('../druk/DrukText-Bold-Web.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  }
@font-face {
  font-family: 'Druk Text Web Medium';
  src: url('../druk/DrukText-Medium-Web.eot');
  src: url('../druk/DrukText-Medium-Web.eot?#iefix') format('embedded-opentype'),
  url('../druk/DrukText-Medium-Web.woff2') format('woff2'),
  url('../druk/DrukText-Medium-Web.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
}

body {
  font-size: 1rem;
  font-family: 'Georgia';
  color: #000000 !important;
  background: linear-gradient(to bottom, #f6f3b0 80%, #ffffff);
}

#ficha{
  background-color: #d4ddf1 !important;
}
.row{
  margin-left: 0px !important;
  margin-right: 0px !important;
}

h1 {
	font-family: 'Druk Text Web Bold', sans-serif !important;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1em !important;
}

h2, h3, h4, h5, h6 {
	font-family: 'Druk Text Web Medium', sans-serif !important;
	font-weight: 500;
	text-transform: uppercase;
  line-height: 1em;
  color: #000000 !important;
}

p{
  font-family: 'Georgia' !important;
  line-height: 1.5;
  font-size: 21px;
  color: #000000;
}

a {
  color: #ed1c24 !important;
  text-decoration: none !important;
}

a:hover{
  text-decoration: none;
  color: #939393 !important;
}
b, strong{
  font-weight: bold !important;
}
/* ul{
  padding: 0 26px !important;
} */

.mobile {
  display: none;
}

.principal.desk img{
  padding-top: 3em;
}

.intro h3{
  font-family: 'Georgia' !important;
  margin: 0;
  color: #000000;
  text-transform: none;
  font-weight: 900;
  font-size: 35px;
  line-height: 1.2 !important;
  padding-top: 1em;
}

.subtitle-txt h2{
  text-transform: uppercase;
  padding: 8px;
  font-size: 4em !important;
  color: #000000 !important;
  margin-bottom: 0.7em;
}

.bg-degrade{
  background: linear-gradient(to bottom, #ffffff00, #f6d003);
}

.bg-degrade-invert{
  background: linear-gradient(to top, #ffffff00, #f6d003);
}

.bg-degrade-towhite{
  background: linear-gradient(to bottom, #ffffff00, #ffffff 80%);
}

.s-1 {
  padding-top: 1em;
  padding-bottom: 1em;
}

.s-1 h1 {
  color: #000000;
  font-size: 4.2em;
  text-align: center;
  margin: 0;
  padding: 5px 0;
  line-height: 1;
  font-weight: 300;
}

.quote-numero{
	border-bottom: 30px solid #009ee3;
	padding: 2em 1em 1em 1em;
  background-color: #fff4cf;
}

.quote-numero h3{
	font-size: 2.5em;
	line-height: 1.1;
	font-weight: 300;
}

.quote-numero h4{
	font-family: 'Roboto', sans-serif !important;
  font-size: 18px;
  font-weight: 300;
}

.quote-numero p{
	font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 12px;
  font-weight: 300;
  text-align: right;
}

.dato-numero{
	padding: 4em 4em 4em 4em;
  background-color: #009ee3;
}

.dato-numero h3{
  color: #fff !important;
  font-size: 200px;
}

.dato-numero h4{
  color: #fff !important;
}


.quote-numero-metco{
	border-bottom: 30px solid #65257a;
	padding: 2em 1em 1em 1em;
  background-color: #fff4cf;
}

.quote-numero-metco h3{
	font-size: 2.5em;
	line-height: 1.1;
	font-weight: 300;
}

.quote-numero-metco h4{
	font-family: 'Roboto', sans-serif !important;
  font-size: 18px;
  font-weight: 300;
}

.quote-numero-metco p{
	font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 12px;
  font-weight: 300;
  text-align: right;
}


.quote-numero-edenred{
	border-bottom: 30px solid #d73828;
	padding: 2em 1em 1em 1em;
  background-color: #fff4cf;
}

.quote-numero-edenred h3{
	font-size: 2.5em;
	line-height: 1.1;
	font-weight: 300;
}

.quote-numero-edenred h4{
	font-family: 'Roboto', sans-serif !important;
  font-size: 18px;
  font-weight: 300;
}

.quote-numero-edenred p{
	font-family: 'Roboto Condensed', sans-serif !important;
  font-size: 12px;
  font-weight: 300;
  text-align: right;
}


/* estilos para cambio de img mobile/desk  */
.mobile{
	display: none;
}
.desk{
	display: block;
}
/* estilos para cambio de img mobile/desk  */


/***** enlaces ******/
.agregados {
  transition: transform .7s;
  text-align: center;
}
.agregados h6{
  padding: 5px 5px 5px 5px;
  border-style: solid;
  border-width:2px 0px;
  border-color: #f0564e;
  margin: 5px auto;
  position: relative;
  font-size: 1.3em !important;
  font-weight: bold;
  letter-spacing: 2px;
}
.agregados:hover{
  transform: scale(1.2);
}

.agregados2 {
  transition: transform .7s;
  text-align: center;
}
.agregados2 h6{
  padding: 5px 5px 5px 5px;
  border-style: solid;
  border-width:2px 0px;
  color: #838383 !important;
  border-color: #838383;
  margin: 5px auto;
  position: relative;
  font-size: 1em !important;
  font-weight: bold;
  letter-spacing: 2px;
}
/* .agregados2:hover{
transform: scale(1.2);
} */


/*************** header y redes ***************/
.head_exp{
  top:0px;
  background-color: #ed1c24;
  padding: 0.7em;
  left: 0px;
  position: fixed;
  display: block;
  width: 100%;
  border-bottom-color: #000;
  border-right-width: 2px;border-bottom-style:solid;
  z-index: 99; -webkit-transition: background-color 0.6s ease-out; -moz-transition:
  background-color 0.6s ease-out; -o-transition: background-color 0.6s ease-out;
  transition: background-color 0.6s ease-out;
}
.head_exp:hover{
  background-color: #000;
}
.redes {
    opacity: 1;
    max-width: 40px !important;
    margin: 0px 5px;
    transition: transform .3s; /* Animation */
}
.redes:hover{
  opacity: 0.8;
     transform: scale(1.2);
}
/**************** header y redes **************/
.logo img {
  width: 50%;
  padding: 1.5em 0;
}

.desliza  {
	padding: 2em 0;
  color: #000000;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 2px;
}

/*---------------------------------------
table
---------------------------------------*/



/* buttons */
.botones-clasificacion{
  background-color: #000000;
}

.botones-clasificacion button{
  color:#ffffff;
  font-family: 'Roboto', sans-serif !important;padding:5px;
  margin:5px;
  text-transform: uppercase;
  font-size: 1em ;
  font-weight: 600;
}

.btn_table {
  border-style: none !important;
  outline: none !important;
  background-color: #000000;
  cursor: pointer !important;
  color: #ffffffb5;
  border-bottom: solid 2px !important;
  border-color: #000000 !important;
  -webkit-transition: 1s ease-out;
  -moz-transition: 1s ease-out;
  -o-transition: 1s ease-out;
  transition: 1s ease-out;
}

.btn_table:hover {
  color: #fff !important;
  border-radius: 0px !important;
  border-color: #fff;
  border-bottom: solid 2px !important;
   -webkit-transition: 1s ease-out;
  -moz-transition: 1s ease-out;
  -o-transition: 1s ease-out;
  transition: 1s ease-out;
}

.active {
 color: #fff;
  border-radius: 0px !important;
  border-color: #fff;
  border-bottom: solid 2px !important;
   -webkit-transition: 1s ease-out;
  -moz-transition: 1s ease-out;
  -o-transition: 1s ease-out;
  transition: 1s ease-out;

}

label{
  font-size: 0.9em !important;
  color: #ffffff;
  font-weight: 400 !important;
  line-height: 0.9em ;
  padding: 5px 15px;
}
label input{
  color: #ffffff;
}

.dataTables_wrapper {
  background-color: #000000;
}

.head_table{
  font-size: 11px;
  text-align: center;
  background-color: #fff2df !important;
  font-family: 'Roboto', sans-serif !important;
}
.head_table p{
  /* transform: rotate(-90deg); */
  font-weight: 400;
  writing-mode: vertical-lr;
  margin: 0 !important;
  font-size: 15px;
  font-family: 'Roboto', sans-serif !important;
}

.style-tablemobile td{
  font-weight: 400;
  font-size: 14px;
  font-family: 'Roboto', sans-serif !important;
  border-right: none !important;
}

table.dataTable tbody th, table.dataTable tbody td {
  padding: 8px 0;
}

.style-tablemobile span{
  color: #ffffff;
}


th, td {
  border-right: 1px solid #000000;
}

table.dataTable thead th, table.dataTable thead td {
  padding: 8px;
  border-bottom: 3px solid #000000 !important;
}


.rk21{
  color: #ffffff;
  background-color: #832252;
}
.num p{
  color: #ffd400;
}
.num{
  color: #ffd400;
  background-color: #000000 !important;
}

.c1 p{
  color: #ffffff;
}
.c1{
  background-color: #19255a;
}
.c2{
  background-color: #ffd400;
}
.c3 p{
  color: #ffffff;
}
.c3{
  background-color: #d73828;
}
.c4, .c5, .c6, .c7{
  background-color: #f2c1ad;
}
.c8{
  background-color: #86ae64;
}
.c9, .c10, .c11{
  background-color: #d8e2ca;
}
.c12{
  background-color: #0099cb;
}
.c13, .c14, .c15, .c16{
  background-color: #b8dbef;
}

.c17{
  background-color: #652479;
}
.c18, .c19{
  background-color: #c5aecf;
}


.pos2021 {
  width: 40px;
  color: #ffffff !important;
  background-color: #832252 !important;
  font-size: 1em;
  font-family: Georgia, Times, "Times New Roman" !important;
  font-weight: 800;
  text-align: center !important;
}

.namelist{
  font-weight: 800;
  font-size: 0.8em;
  font-family: 'Roboto', sans-serif !important;
  line-height: 1.2em;
  padding: 0 8px 0 12px;
}

.telm{
  color: #606060 !important;
  font-weight: 700;
  font-size: 11px;
}

.punt{
  font-size: 1em;
  font-weight: 800;
  font-family: Georgia, Times, "Times New Roman" !important;
  text-align: center;
  color: #ffd400;
  background-color: #000000 !important;
}

.color-a{
  font-size: 8px;
  color: #203478;
  background-color: #203478;
}
.color-a:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #203578d2;
}
.color-b{
  font-size: 8px;
  color: #3c4788;
  background-color: #3c4788;
}
.color-b:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #3c4788d4;
}
.color-c{
  font-size: 8px;
  color: #515b97;
  background-color: #515b97;
}
.color-c:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #515b97d4;
}
.color-d{
  font-size: 8px;
  color: #646ca3;
  background-color: #646ca3;
}
.color-d:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #646ca3d4;
}
.color-e{
  font-size: 8px;
  color: #7a7eb0;
  background-color: #7a7eb0;
}
.color-e:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #7a7eb0d6;
}
.color-f{
  font-size: 8px;
  color: #8c8fbc;
  background-color: #8c8fbc;
}
.color-f:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #8c8fbcd4;
}
.color-g{
  font-size: 8px;
  color: #9ea0c7;
  background-color: #9ea0c7;
}
.color-g:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #9ea0c7d4;
}
.color-h{
  font-size: 8px;
  color: #b2b3d3;
  background-color: #b2b3d3;
}
.color-h:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #b2b3d3d2;
}

.color-i{
  font-size: 8px;
  color: #008c93;
  background-color: #008c93;
}
.color-i:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #008c93d4;
}
.color-j{
  font-size: 8px;
  color: #00989e;
  background-color: #00989e;
}
.color-j:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #00999ed6;
}
.color-k{
  font-size: 8px;
  color: #42a6ac;
  background-color: #42a6ac;
}
.color-k:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #42a7acd2;
}
.color-l{
  font-size: 8px;
  color: #76b8bd;
  background-color: #76b8bd;
}
.color-l:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: #76b8bdd4;
}
.color-m{
  font-size: 8px;
  color: #96c7cb;
  background-color: #96c7cb;
}
.color-m:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  background-color: #96c7cbd2;
}
.color-n{
  font-size: 8px;
  color: #b5dedf;
  background-color: #b5dedf;
}
.color-n:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  background-color: #b5dedfd2;
}
.color-o{
  font-size: 8px;
  color: #cbe5e9;
  background-color: #cbe5e9;
}
.color-o:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  background-color: #cbe5e9d2;
}
.color-p{
  font-size: 8px;
  color: #dbecee;
  background-color: #dbecee;
}
.color-p:hover{
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  color: #000000;
  background-color: #dbeceecf;
}

.textboton{
  font-family: 'Druk Text Web Bold', sans-serif !important;
  text-align: center;
  color: #fff !important;

}

.textboton:hover {
  font-family: 'Druk Text Web Bold', sans-serif !important;
  text-align: center;
  color: #f7f3ac !important;

}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  color: #000000 !important;
}
.dataTables_wrapper .dataTables_info {
  clear: both;
  float: left;
  padding: 0.8em;
}
/*---------------------------------------
table
---------------------------------------*/
.acotacion-title{
  padding: 20px 0 0 0;
}

.acotacion {
  font-size: 12px !important;
  color: #5b5b5b;
}


.list-bullets {
  list-style: none;
}

.list-bullets li {
  display: flex;
  align-items: center;
}

#sq1{
  background-color: #203478;
}

.list-bullets li.sq1:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #203478;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq2:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #3c4788;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq3:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #515b97;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq4:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #646ca3;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq5:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #7a7eb0;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq6:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #8c8fbc;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq7:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #9ea0c7;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq8:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #b2b3d3;
  margin-right: 1rem;
  margin-bottom: 10px;
}

.list-bullets li.sq9:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #008c93;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq10:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #00989e;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq11:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #42a6ac;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq12:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #76b8bd;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq13:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #96c7cb;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq14:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #b5dedf;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq15:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #cbe5e9;
  margin-right: 1rem;
  margin-bottom: 10px;
}
.list-bullets li.sq16:before {
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background-color: #dbecee;
  margin-right: 1rem;
  margin-bottom: 10px;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #ffffff00 !important;
  background-clip: border-box;
  border: none !important;
}

.mobile img{
  -webkit-animation: inzoom 1s;
  -webkit-animation-delay: 0.1s;
  animation: inzoom 1s;
  animation-delay: 0.1s;
}
.recuadro{
  background-color: #dfdfdf;
  display: block;
  position: absolute;
  width: 100%;
  height: 780px;
  top: 0px;
  z-index: -1;
}

#grantitulo {
  font-size: 6em;
  color: #000;
  line-height: 100% ;
  text-align: center !important;
  font-family: 'Druk Text Web Bold', sans-serif !important;
}



/***************************************************
M E T O D O L O G I A
****************************************************/
.bg-degrade-meto{
  background: linear-gradient(to top, #f6f3b0, #f6d003);
}

.botX_2{
	position: fixed;
	top: 0px;
	right: 0px;
  width: 95px;
  z-index: 999;
  max-width:100px;
  margin: 10px 20px;
   -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
}
.botX_2:hover{
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.title-txt-m h1{
  text-align: left;
  text-transform: uppercase;
  padding: 50px 0 40px 0;
  font-size: 120px !important;
  color: #000000 !important;
}
.logo-metodology img{
  width: 70%;
  text-align: center;
}
.sbtitle-txt-m h2{
  text-align: left;
  text-transform: uppercase;
  padding: 8px;
  font-size: 45px !important;
  background: linear-gradient(to left, #ffffff, #f6d003);
  margin-bottom: 20px;
}
.vertical-row {
  Float:left;
  height: 800px;
  width:2px;
  background-color: #000000;
}
.card-category, .card-category-bk {
  padding: 20px;
  text-align: center;
}
.category p{
  font-family: 'Roboto Condensed', sans-serif !important;
}
.card-category h2{
  color: #ffffff !important;
  font-size: 40px;
  padding: 70px 20px;
}
.card-category h4{
  color: #ffffff !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 200;
  text-transform: none;
  font-size: 19px;
}
.card-category-bk h2{
  color: #000000 !important;
  font-size: 45px;
}
.card-category-bk h4{
  color: #000000 !important;
  font-family: 'Roboto Condensed', sans-serif !important;
  font-weight: 200;
  text-transform: none;
  font-size: 19px;
}


/***************************************************
M E T O D O L O G I A
****************************************************/

/*    Termina CSS Filtrado */

@media only screen and (max-width: 550px) {
    .texto h3 {
    font-size: 33px;
    line-height: 43px;
    padding-top: 0.5em;
}

    .logo100 img {
    max-width: 40%;
    padding-top: 3.5em;
    margin-left: 30%;
}

}


@media (min-width: 700px) and (max-width: 1400px){

  .block video{
  margin-top: -28px;
}


}


@media (min-width: 200px) and (max-width: 770px) {
  .pos2021:before {
    content: "";
    display: block;
    background: url("https://datatables.net/examples/resources/details_open.png")
      no-repeat center center;
    width: 20px;
    height: 20px;
    float: left;
    margin: 0 6px 0 0;
    cursor: pointer;

  }

  .s-1 h1 {
    color: #000000;
    font-size: 2.5em;
    text-align: center;
    margin: 0;
    padding: 5px 0;
    line-height: 1;
    font-weight: 300;
  }

  tr.shown td.pos2021:before {
    background: url("https://datatables.net/examples/resources/details_close.png")
      no-repeat center center;

  }

  .intro h3 {
    font-size: 25px;
    text-align: center;
    line-height: 1.1 !important;
    padding-top: 0.9em;
  }

  .subtitle-txt h2 {
    padding: 8px;
    font-size: 3em !important;
    margin-bottom: 0.7em;
  }

  .logo img {
    width: 85%;
    padding: 1.5em 0;
  }

  .desk {
    display: none;
  }

  .mobile {
    display: block;
  }

  .mobile img{
    margin-top: 2em;
  }

  .texto p{
    padding-right: 0.8em;
    padding-left: 0.8em;
    line-height: 1.5;
  }

  .texto h1{
    padding-right: 1.5em;
    padding-left: 1.5em;
  }

  #grantitulo h1 {
    font-size: 2em;
    text-align: center !important;
    color: #000;
    line-height: 100% ;
    font-family: 'Druk Text Web Bold', sans-serif !important;
  }

  .mobile h4{
    padding: 0px 3px 3px 3px;
    border-style: solid;
    border-width: 1px 0px;
    border-color: #cacaca;
    margin: 5px auto 15px auto;
    position: relative;
  }

  .desliza {
    padding: 1em 0;
    color: #000000;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0;
  }
  .quote-numero{
		padding: 1em;
	}
	.quote-numero h3 {
		font-size: 2em;
	}
	.quote-numero h4{
		font-size: 17px;
	}
	.quote-numero p {
		font-size: 15px;
	}

  .pos2021 {
    font-size: 1.3em;
  }
  .head_table p {
    font-size: 12px;
  }
  .namelist {
    font-size: 0.75em;
  }
  .hide_element{
    display: none !important;
   }
  .value{
    padding-top: 15px;
    padding-bottom: 15px;
    min-width: 65px;
    background-color: #ffffff;
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
  }
  .dataTables_wrapper .dataTables_filter {
    margin-top: 0 !important;
  }
  .s-1 {
    padding-top: 0 ;
  }
  .bg_img h2 {
    font-size: 5em;
  }

  .title-txt-m h1 {
    padding: 90px 0 40px 0;
    font-size: 60px !important;
    text-align: center;
  }
  .botX_2 {
    width: 70px;
    margin: 10px ;
  }
  .vertical-row {
    height: 200px;
  }

}


/* Tarjetas animadas */

:root{
  --background-dark: #2d3548;
  --text-light: rgba(255,255,255,0.6);
  --text-lighter: rgba(255,255,255,0.9);
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --width-container: 1200px;
}

*{
  border: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hero-section{
  align-items: flex-start;
  display: flex;
  min-height: 100%;
  justify-content: center;
  align-content: center !important;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.card-grid{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-column-gap: var(--spacing-l);
  grid-row-gap: var(--spacing-l);
  max-width: var(--width-container);
  width: 100%;
}

@media(min-width: 540px){
  .card-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(min-width: 960px){
  .card-grid{
    grid-template-columns: repeat(4, 2fr);
  }
}

.card{
  list-style: none;
  position: relative;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.card__background{
  background-size: cover;
  background-position: center;
  border-radius: var(--spacing-l);
  bottom: 0;
  /* filter: brightness(0.75) saturate(1.2) contrast(0.85); */
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform-origin: center;
  trsnsform: scale(1) translateZ(0);
  transition:
    filter 200ms linear,
    transform 200ms linear;
}

.card:hover .card__background{
  transform: scale(1.05) translateZ(0);
}

.card-grid:hover > .card:not(:hover) .card__background{
  filter: brightness(0.5) saturate(0) contrast(1.2) blur(5px);
}

.card__content{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}

.card__category{
  color: #000;
  font-size: 0.9rem;
  margin-bottom: var(--spacing-s);
  text-transform: uppercase;
}

.card__heading{
  color: var(--text-lighter);
  font-family: 'Druk Text Web Bold', sans-serif !important;
  font-size: 3rem;
  line-height: 1;
  text-align: center !important;
  /* word-spacing: 70vw; */
}

.fuentegrande{
   font-size: 2rem;
}

.colorexpansion{
  color: #ed1c24;
}

.colormetco{
  color: #65257a;
}

.coloredenred{
  color: #3a9acc;
}