.horizontal-menu .top-navbar .navbar-brand-wrapper .navbar-brand img {
    height: 80px;
}
.horizontal-menu .bottom-navbar {
    background: #C7C6C7;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #C7C6C7, #C6C5C6);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #C7C6C7, #C6C5C6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.horizontal-menu .bottom-navbar .page-navigation > .nav-item > .nav-link {
    color: #191519;
}
.horizontal-menu .bottom-navbar .page-navigation{
    border-top: 2px solid #4F0039;
    border-bottom: 2px solid #4F0039;
}
.nav-item{
    cursor: pointer;
}
.nav-item:hover{
    background: linear-gradient(to right, transparent 1%, #8F759344 5%, #8F759366 95%, transparent 99%);
    transition: background 0.3s ease-in-out;
}
.main-panel{
    min-height: calc(100vh - 200px);
    padding:2em;
}
@media (max-width: 991px) {
    .horizontal-menu .top-navbar .navbar-brand-wrapper .navbar-brand {
        width: 100%;
    }
    .horizontal-menu .top-navbar .navbar-brand-wrapper .navbar-brand.brand-logo-mini img {
        width: 90%;
        max-width: 100%;
        margin:auto;
        margin-left: 5px;
        margin-right: 5px;
    }
}
.grid {
    border: inherit;
}
input:focus::placeholder,
textarea:focus::placeholder {
    color: transparent;
}
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    width: 100vw;
    height: 100vh;
    background-image: url("../img/bg/bg-ce56d3c7.png");
}
.modal-backdrop.show {
    opacity: 0.9;
}
.modal-content{
    border-radius: 1.5em;
    outline: 10px solid #8F759344;
}
.modal-content .row > label{
    font-size: 1.2em;
    padding-left: 0.5em;
    margin-bottom: 0.3em;
    font-weight: 600;
    color: #8F7593;
}
.modal {
    transform: scale(0.9);
    transition: transform 0.5s ease-out;
}
.modal.show {
    transform: scale(1);
}
.form-control{
    border-radius: 0.5em;
    outline: 2px solid #DFDBE022;
}
.form-control:hover{
    outline: 2px solid #DFDBE0;
}
.form-control:focus{
    border-color: #DFDBE0;
    background: #ffffff99;
}
div.dt-container .dt-paging .dt-paging-button{
    padding:0;
}
.pagination .page-item.active .page-link{
    background: #578E57;
    border-color: #578E57;
}
/** Redondeado **/
.rounded{ border-radius: 0.5em  }
.r-r { border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; }
.rounded-1, .rounded-md{ border-radius: 1em !important; }
.rounded-2, .rounded-lg{ border-radius: 2em !important; }
.rounded-3, .rounded-xl{ border-radius: 3em !important; }
.rounded-4, .rounded-xxl{ border-radius: 4em !important; }
.circle{ border-radius: 50% !important; }
/* === BOTONES === */
.btn{
    font-weight:200 !important;
}
.btn-success{
    background-color: #578E57;
    border-color: #578E57;
}
.btn-success:hover{
    background-color: #00A65A;
    border-color: #00A65A;
}
.btn-warning{
    background-color: #EBC982;
    border-color: #EBC982;
}
.btn-warning:hover{
    background-color: #F0AD4E;
    border-color: #F0AD4E;
}
.btn-letra{
    color: #000000;
    font-weight: 600;
    background-color: #fff;
}
.btn-verde-m{
    background: radial-gradient(ellipse at top, #a0ad9a88, #8d9e85aa),
            radial-gradient(circle at center in hsl longer hue, #8d9e8588, #8d9e85aa);
    border: none;
    color:#102c03;
}
.btn-verde-m:hover{
    background: radial-gradient(circle, #477530 10%, #49882c 60%);
    border-color: #578E57;
    color:#fff;
    background-size: 100% 200%;
    background-position: 0 100%;
    transition: background-position 1s;    
}
.btn-azul-1 { background-color: #2f7eaa; color: white; }
.btn-azul-1:hover { background-color: #246183; }
.btn-azul-2 { background-color: #68b5dd; color: black; }
.btn-azul-2:hover { background-color: #57a1c5; }
.btn-azul-3 { background-color: #1e4e69; color: white; }
.btn-azul-3:hover { background-color: #183e54; }
.btn-azul-4 { background-color: #a1d1e9; color: black; }
.btn-azul-4:hover { background-color: #8dc1de; }

.btn-verde-1 { background-color: #4eb4a3; color: white; }
.btn-verde-1:hover { background-color: #3f9688; }
.btn-verde-2 { background-color: #7ed0c2; color: black; }
.btn-verde-2:hover { background-color: #6ac3b5; }
.btn-verde-3 { background-color: #348377; color: white; }
.btn-verde-3:hover { background-color: #2b6e64; }
.btn-verde-4 { background-color: #a3e4d7; color: black; }
.btn-verde-4:hover { background-color: #90d6c8; }

.btn-rojo-1 { background-color: #d45343; color: white; }
.btn-rojo-1:hover { background-color: #b94737; }
.btn-rojo-2 { background-color: #f08a7b; color: black; }
.btn-rojo-2:hover { background-color: #db7465; }
.btn-rojo-3 { background-color: #9e392b; color: white; }
.btn-rojo-3:hover { background-color: #812f23; }
.btn-rojo-4 { background-color: #f5b1a5; color: black; }
.btn-rojo-4:hover { background-color: #e2998c; }

.btn-amarillo-1 { background-color: #f2b33d; color: black; }
.btn-amarillo-1:hover { background-color: #e5a328; }
.btn-amarillo-2 { background-color: #f9cf79; color: black; }
.btn-amarillo-2:hover { background-color: #eabb55; }
.btn-amarillo-3 { background-color: #c2881d; color: white; }
.btn-amarillo-3:hover { background-color: #a77019; }
.btn-amarillo-4 { background-color: #fde5aa; color: black; }
.btn-amarillo-4:hover { background-color: #fbd992; }

.btn-rosa-1 { background-color: #e87ea5; color: white; }
.btn-rosa-1:hover { background-color: #d0698d; }
.btn-rosa-2 { background-color: #f4a9c2; color: black; }
.btn-rosa-2:hover { background-color: #e28eaa; }
.btn-rosa-3 { background-color: #c94f7c; color: white; }
.btn-rosa-3:hover { background-color: #ab4167; }
.btn-rosa-4 { background-color: #f9d0df; color: black; }
.btn-rosa-4:hover { background-color: #edbdd0; }

.btn-lila-1 { background-color: #a481c2; color: white; }
.btn-lila-1:hover { background-color: #8b6da3; }
.btn-lila-2 { background-color: #c7a9dd; color: black; }
.btn-lila-2:hover { background-color: #b496cd; }
.btn-lila-3 { background-color: #7a5e99; color: white; }
.btn-lila-3:hover { background-color: #644d7f; }
.btn-lila-4 { background-color: #e5d2f1; color: black; }
.btn-lila-4:hover { background-color: #d4bce7; }

.btn-light-2{
    background:#dedede;
    color:#333333AA;
    border:1px solid #999;
}
.btn-light-2:hover{
    background:#f0f0f0;
    color:#333333;
}

.alert-amarillo-4 {
    background-color: #fde5aa55;
    color: black;
    border-color: #c2881dAA;
}
.alert-amarillo-4:hover {
    background-color: #fbd992AA;
    color: black;
    border-color: #a77019AA;
}
.alert-lila-4 {
    background-color: #e5d2f155;
    color: black;
    border-color: #7a5e99AA;
}
.alert-lila-4:hover {
    background-color: #d4bce7AA;
    color: black;
    border-color: #644d7fAA;
}
.alert-amarillo-5 {
    background-color: #EDDDC0;
    color: black;
    border-color: #bdb29e;
}

/** Tipografía **/
.tx-100{ font-weight: 100; }
.tx-200{ font-weight: 200; }
.tx-300{ font-weight: 300; }
.tx-400{ font-weight: 400; }
.tx-500{ font-weight: 500; }
.tx-600{ font-weight: 600; }
.tx-700{ font-weight: 700; }
.tx-800{ font-weight: 800; }
.tx-900{ font-weight: 900; }
.tx-4 {  font-size: 4px; }
.tx-6 {  font-size: 6px; }
.tx-8 {  font-size: 8px; }
.tx-10 {  font-size: 10px; }
.tx-12 {  font-size: 12px; }
.tx-14 {  font-size: 14px; }
.tx-16 {  font-size: 16px; }
.tx-18 {  font-size: 18px; }
.tx-20 {  font-size: 20px; }
.tx-22 {  font-size: 22px; }
.tx-24 {  font-size: 24px; }
.tx-26 {  font-size: 26px; }
.tx-28 {  font-size: 28px; }
.tx-30 {  font-size: 30px; }
.tx-32 {  font-size: 32px; }
.tx-34 {  font-size: 34px; }
.tx-36 {  font-size: 36px; }
.tx-38 {  font-size: 38px; }
.tx-40 {  font-size: 40px; }
.tx-1em { font-size: 1em; }
.tx-2em { font-size: 2em; }
.tx-3em { font-size: 3em; }
.tx-4em { font-size: 4em; }
.tx-5em { font-size: 5em; }

/* === TEXTO === */

.tx-black { color: #111; }
.tx-white { color: #fff; }
.tx-white-1 { color: rgba(255, 255, 255, 0.1);} 
.tx-white-2 { color: rgba(255, 255, 255, 0.2);}
.tx-white-3 { color: rgba(255, 255, 255, 0.3);}
.tx-white-4 { color: rgba(255, 255, 255, 0.4);}
.tx-white-5 { color: rgba(255, 255, 255, 0.5);}
.tx-white-6 { color: rgba(255, 255, 255, 0.6);}
.tx-white-7 { color: rgba(255, 255, 255, 0.7);}
.tx-white-8 { color: rgba(255, 255, 255, 0.8);}
.tx-white-9 { color: rgba(255, 255, 255, 0.9);}
.tx-etica{
    color: #000000;
    font-size: 1.2em;
    font-weight: 600;
}
.tx-morado-1 { color: #8B7AAE; }
.tx-morado-2 { color: #7D6E9D; }
.tx-morado-3 { color: #6F628C; }
.tx-morado-4 { color: #61467B; }
.tx-morado-5 { color: #533A6A; }
.tx-morado-6 { color: #452E59; }

.tx-azul-1 { color: #7EA2E6; }
.tx-azul-2 { color: #6E94D6; }
.tx-azul-3 { color: #5F86C6; }
.tx-azul-4 { color: #4F78B6; }
.tx-azul-5 { color: #3F6AA6; }
.tx-azul-6 { color: #2F5C96; }

.tx-verde-1 { color: #A6DF01; } 
.tx-verde-2 { color: #86B00B; }
.tx-verde-3 { color: #4A6400; }
.tx-verde-4 { color: #2C3B00; }

.tx-mustard-1 { color: #EBDF02; }
.tx-mustard-2 { color: #BAB20B; }
.tx-mustard-3 { color: #696500; }
.tx-mustard-4 { color: #3E3B00; }

.tx-berenjena-1 { color: #AF017F; }
.tx-berenjena-2 { color: #8B0867; }
.tx-berenjena-3 { color: #4F0039; }
.tx-berenjena-4 { color: #2E0023; }

.tx-gray-900 { color: #4E4D50; }
.tx-gray-800 { color: #8F8F8F; }
.tx-gray-700 { color: #A3A3A3; }
.tx-gray-600 { color: #B5B5B5; }
.tx-gray-500 { color: #C7C6C7; }
.tx-gray-400 { color: #D3DCD9; }
.tx-gray-300 { color: #E2E8E5; }
.tx-gray-200 { color: #EDF2F0; }
.tx-gray-100 { color: #F7FAF6; }

.tx-azul-1 { color: #2f7eaa; }
.tx-azul-2 { color: #68b5dd; }
.tx-azul-3 { color: #1e4e69; }
.tx-azul-4 { color: #a1d1e9; }

.tx-verde-1 { color: #4eb4a3; }
.tx-verde-2 { color: #7ed0c2; }
.tx-verde-3 { color: #348377; }
.tx-verde-4 { color: #a3e4d7; }

.tx-rojo-1 { color: #d45343; }
.tx-rojo-2 { color: #f08a7b; }
.tx-rojo-3 { color: #9e392b; }
.tx-rojo-4 { color: #f5b1a5; }

.tx-amarillo-1 { color: #f2b33d; }
.tx-amarillo-2 { color: #f9cf79; }
.tx-amarillo-3 { color: #c2881d; }
.tx-amarillo-4 { color: #fde5aa; }

.tx-rosa-1 { color: #e87ea5; }
.tx-rosa-2 { color: #f4a9c2; }
.tx-rosa-3 { color: #c94f7c; }
.tx-rosa-4 { color: #f9d0df; }

.tx-lila-1 { color: #a481c2; }
.tx-lila-2 { color: #c7a9dd; }
.tx-lila-3 { color: #7a5e99; }
.tx-lila-4 { color: #e5d2f1; }

.tx-berenjena-1 { color: #AF017F; }
.tx-berenjena-2 { color: #8B0867; }
.tx-berenjena-3 { color: #4F0039; }
.tx-berenjena-4 { color: #2E0023; }

.tx-end{ text-align: end; }
.tx-center, .text-center{ text-align: center; }
.tx-justify{ text-align: justify; }
.tx-left{ text-align: left; }
.tx-right{ text-align: right; }
.tx-underline{ text-decoration: underline; }
.tx-line-through{ text-decoration: line-through; }
.tx-no-underline{ text-decoration: none; }
.tx-italic{ font-style: italic; }
.tx-normal{ font-style: normal; }
/* tracking */
.tracking-tighter { letter-spacing: -0.05em;}
.tracking-tight { letter-spacing: -0.025em;}
.tracking-normal { letter-spacing: 0em;}
.tracking-wide { letter-spacing: 0.025em;}
.tracking-wider { letter-spacing: 0.05em;}
.tracking-widest { letter-spacing: 0.1em; }
/** Shadows **/
.shadow-xs { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

/* === BORDES === */

.b0{ border-style: 0; }
.b1, .bd{ border-style: solid; border-width: 1px; }
.b2{ border-style: solid; border-width: 2px; } 
.b3{ border-style: solid; border-width: 3px; }
.bd-l{ border-left: 1px solid; }
.bd-r{ border-right: 1px solid; }
.bd-t{ border-top: 1px solid; }
.bd-b{ border-bottom: 1px solid; }

.bd-gray-100{ border-color: #f7faf6; }
.bd-gray-200{ border-color: #edf2f0; }
.bd-gray-300{ border-color: #e2e8e5; }
.bd-gray-400{ border-color: #d3dcd9; }
.bd-gray-500{ border-color: #c7c6c7; }
.bd-gray-600{ border-color: #b5b5b5; }
.bd-gray-700{ border-color: #a3a3a3; }
.bd-gray-800{ border-color: #8f8f8f; }
.bd-gray-900{ border-color: #6c6c6c; }

.bd-lico{ border-color: #626473; }
.bd-azul-1 { border-color: #2f7eaa; }
.bd-azul-2 { border-color: #68b5dd; }
.bd-azul-3 { border-color: #1e4e69; }
.bd-azul-4 { border-color: #a1d1e9; }

.bd-verde-1 { border-color: #4eb4a3; }
.bd-verde-2 { border-color: #7ed0c2; }
.bd-verde-3 { border-color: #348377; }
.bd-verde-4 { border-color: #a3e4d7; }

.bd-rojo-1 { border-color: #d45343; }
.bd-rojo-2 { border-color: #f08a7b; }
.bd-rojo-3 { border-color: #9e392b; }
.bd-rojo-4 { border-color: #f5b1a5; }

.bd-amarillo-1 { border-color: #f2b33d; }
.bd-amarillo-2 { border-color: #f9cf79; }
.bd-amarillo-3 { border-color: #c2881d; }
.bd-amarillo-4 { border-color: #fde5aa; }

.bd-rosa-1 { border-color: #e87ea5; }
.bd-rosa-2 { border-color: #f4a9c2; }
.bd-rosa-3 { border-color: #c94f7c; }
.bd-rosa-4 { border-color: #f9d0df; }

.bd-lila-1 { border-color: #a481c2; }
.bd-lila-2 { border-color: #c7a9dd; }
.bd-lila-3 { border-color: #7a5e99; }
.bd-lila-4 { border-color: #e5d2f1; }

/** Padding y Margin **/
.pl-1{ padding-left: 0.25em; }
.pl-2{ padding-left: 0.5em; }
.pl-3{ padding-left: 0.75em; }
.pl-4{ padding-left: 1em; }
.pl-5{ padding-left: 1.25em; }
.ml-1 { margin-left: 0.25em; }
.ml-2 { margin-left: 0.5em; }
.ml-3 { margin-left: 0.75em; }
.ml-4 { margin-left: 1em; }
.ml-5 { margin-left: 1.25em; }
.mr-1 { margin-right: 0.25em; }
.mr-2 { margin-right: 0.5em; }
.mr-3 { margin-right: 0.75em; }
.mr-4 { margin-right: 1em; }
.pr-1{ padding-right: 0.25em; }
.pr-2{ padding-right: 0.5em; }
.pr-3{ padding-right: 0.75em; }
.pr-4{ padding-right: 1em; }
.pr-5{ padding-right: 1.25em; }
.mr-1 { margin-right: 0.25em; }
.mr-2 { margin-right: 0.5em; }
.mr-3 { margin-right: 0.75em; }
.mr-4 { margin-right: 1em; }
.mr-5 { margin-right: 1.25em; }
.pb-1{ padding-bottom: 0.25em; }
.pb-2{ padding-bottom: 0.5em; }
.pb-3{ padding-bottom: 0.75em; }
.pb-4{ padding-bottom: 1em; }
.pb-5{ padding-bottom: 1.25em; }
.mb-1 { margin-bottom: 0.25em; }
.mb-2 { margin-bottom: 0.5em; }
.mb-3 { margin-bottom: 0.75em; }
.mb-4 { margin-bottom: 1em; }
.mb-5 { margin-bottom: 1.25em; }

/** Shadows **/
.shadow-xs { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
/* === FONDOS === */
.bg-azul-1 { background-color: #2f7eaa; }
.bg-azul-2 { background-color: #68b5dd; }
.bg-azul-3 { background-color: #1e4e69; }
.bg-azul-4 { background-color: #a1d1e9; }

.bg-verde-1 { background-color: #4eb4a3; }
.bg-verde-2 { background-color: #7ed0c2; }
.bg-verde-3 { background-color: #348377; }
.bg-verde-4 { background-color: #a3e4d7; }

.bg-rojo-1 { background-color: #d45343; }
.bg-rojo-2 { background-color: #f08a7b; }
.bg-rojo-3 { background-color: #9e392b; }
.bg-rojo-4 { background-color: #f5b1a5; }

.bg-amarillo-1 { background-color: #f2b33d; }
.bg-amarillo-2 { background-color: #f9cf79; }
.bg-amarillo-3 { background-color: #c2881d; }
.bg-amarillo-4 { background-color: #fde5aa; }

.bg-rosa-1 { background-color: #e87ea5; }
.bg-rosa-2 { background-color: #f4a9c2; }
.bg-rosa-3 { background-color: #c94f7c; }
.bg-rosa-4 { background-color: #f9d0df; }

.bg-lila-1 { background-color: #a481c2; }
.bg-lila-2 { background-color: #c7a9dd; }
.bg-lila-3 { background-color: #7a5e99; }
.bg-lila-4 { background-color: #e5d2f1; }

.bg-white-1 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white-2 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white-3 { background-color: rgba(255, 255, 255, 0.3); }
.bg-white-4 { background-color: rgba(255, 255, 255, 0.4); }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white-6 { background-color: rgba(255, 255, 255, 0.6); }
.bg-white-7 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white-8 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white-9  { background-color: rgba(255, 255, 255, 0.9); }
.bg-gray-100 { background-color: #f6f8fa; }
.bg-gray-200 { background-color: #edeef2; }
.bg-gray-300 { background-color: #e2e3e8; }
.bg-gray-400 { background-color: #d3d7dc; }
.bg-gray-500 { background-color: #c7c6c7; }
.bg-gray-600 { background-color: #b5b5b5; }
.bg-gray-700 { background-color: #a3a3a3; }
.bg-gray-800 { background-color: #8f8f8f; }
.bg-gray-900 { background-color: #6c6c6c; }
.bg-to-gray-200 { background: linear-gradient(to right, transparent, #edeef2); }
.bg-prp{
    background-color: #f7f6f6;
    background-image: linear-gradient(rgba(100,100,100,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(200,200,200,.2) 1px, transparent 1px);
    background-size: 20px 20px;
}
.bg-8b545976{
    background-image: url("../img/bg/bg-8b545976.png");
    background-size: 600px 400px;
}


.hover\:bg-white-1:hover { background-color: rgba(255, 255, 255, 0.1); }
.hover\:bg-white-2:hover { background-color: rgba(255, 255, 255, 0.2); }
.hover\:bg-white-3:hover { background-color: rgba(255, 255, 255, 0.3); }
.hover\:bg-white-4:hover { background-color: rgba(255, 255, 255, 0.4); }
.hover\:bg-white-5:hover { background-color: rgba(255, 255, 255, 0.5); }
.hover\:bg-white-6:hover { background-color: rgba(255, 255, 255, 0.6); }
.hover\:bg-white-7:hover { background-color: rgba(255, 255, 255, 0.7); }
.hover\:bg-white-8:hover { background-color: rgba(255, 255, 255, 0.8); }
.hover\:bg-white-9:hover { background-color: rgba(255, 255, 255, 0.9); }

/* Height */
.vhx-50{ height: 50vh; overflow-y: scroll;}
.vhx-55{ height: 55vh; overflow-y: scroll;}
.vhx-60{ height: 60vh; overflow-y: scroll;}
.vhx-65{ height: 65vh; overflow-y: scroll;}
.ht-5{ height: 5px; }
.ht-10{ height: 10px; }
.ht-15{ height: 15px; }
.ht-20{ height: 20px; }
.ht-25{ height: 25px; }
.ht-30{ height: 30px; }
.ht-33{ height: 33px; }
.ht-35{ height: 35px; }
.ht-40{ height: 40px; }
.ht-45{ height: 45px; }
.ht-50{ height: 50px; }
.ht-55{ height: 55px; }
.ht-60{ height: 60px; }
.ht-65{ height: 65px; }
.ht-70{ height: 70px; }
.ht-75{ height: 75px; }
.ht-80{ height: 80px; }
.ht-85{ height: 85px; }
.ht-90{ height: 90px; }
.ht-95{ height: 95px; }
.ht-100{ height: 100px; }
.ht-110{ height: 110px; }
.ht-120{ height: 120px; }
.ht-130{ height: 130px; }
.ht-140{ height: 140px; }
.ht-150{ height: 150px; }
.ht-160{ height: 160px; }
.ht-170{ height: 170px; }
.ht-180{ height: 180px; }
.ht-190{ height: 190px; }
.ht-200{ height: 200px; }
.ht-250{ height: 250px; }
.ht-300{ height: 300px; }
.ht-350{ height: 350px; }
.ht-400{ height: 400px; }
.ht-450{ height: 450px; }
.ht-500{ height: 500px; }
.ht-600{ height: 600px; }
.ht-700{ height: 700px; }
.ht-800{ height: 800px; }

.ht-cuadrado { aspect-ratio: 1/1; align-self: center; }

/* Width */
.w-5{ width: 5%; }
.w-10{ width: 10%; }
.w-15{ width: 15%; }
.w-20{ width: 20%; }
.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-35{ width: 35%; }
.w-40{ width: 40%; }
.w-45{ width: 45%; }
.w-50{ width: 50%; }
.w-55{ width: 55%; }
.w-60{ width: 60%; }
.w-65{ width: 65%; }
.w-70{ width: 70%; }
.w-75{ width: 75%; }
.w-80{ width: 80%; }
.w-85{ width: 85%; }
.w-90{ width: 90%; }
.w-95{ width: 95%; }
.w-100{ width: 100%; }

.wd-5 { width: 5px; }
.wd-10 { width: 10px; }
.wd-15 { width: 15px; }
.wd-20 { width: 20px; }
.wd-25 { width: 25px; }
.wd-30 { width: 30px; }
.wd-35 { width: 35px; }
.wd-40 { width: 40px; }
.wd-45 { width: 45px; }
.wd-50 { width: 50px; }
.wd-55 { width: 55px; }
.wd-60 { width: 60px; }
.wd-65 { width: 65px; }
.wd-70 { width: 70px; }
.wd-75 { width: 75px; }
.wd-80 { width: 80px; }
.wd-85 { width: 85px; }
.wd-90 { width: 90px; }
.wd-95 { width: 95px; }
.wd-100 { width: 100px; }
.wd-110 { width: 110px; }
.wd-120 { width: 120px; }
.wd-130 { width: 130px; }
.wd-140 { width: 140px; }
.wd-150 { width: 150px; }
.wd-200 { width: 200px; }
.wd-250 { width: 250px; }
.wd-300 { width: 300px; }
.wd-350 { width: 350px; }
.wd-400 { width: 400px; }
.wd-450 { width: 450px; }
.wd-500 { width: 500px; }
.wd-600 { width: 600px; }
.wd-700 { width: 700px; }
.wd-800 { width: 800px; }
.wd-900 { width: 900px; }
.wd-1000 { width: 1000px; }
.wd-1100 { width: 1100px; }
.wd-1200 { width: 1200px; }
.wd-1300 { width: 1300px; }
.wd-1400 { width: 1400px; }
.wd-1500 { width: 1500px; }
.mx-wd-100 { max-width: 100px; }
.mx-wd-200 { max-width: 200px; }
.mx-wd-300 { max-width: 300px; }
.mx-wd-400 { max-width: 400px; }
.mx-wd-500 { max-width: 500px; }
.mx-wd-600 { max-width: 600px; }
.mx-wd-700 { max-width: 700px; }
.mx-wd-800 { max-width: 800px; }
.mx-wd-900 { max-width: 900px; }
.mx-wd-1000 { max-width: 1000px; }
/** GAP **/
.gap-0{ grid-gap: 0;gap: 0}
.gap-1{grid-gap: .25rem;gap: .25rem}
.gap-2{grid-gap: .5rem;gap: .5rem}
.gap-3{grid-gap: .75rem;gap: .75rem}
.gap-4{grid-gap: 1rem;gap: 1rem}
.gap-5{grid-gap: 1.25rem;gap: 1.25rem}
.gap-6{grid-gap: 1.5rem;gap: 1.5rem}
.gap-8{grid-gap: 2rem;gap: 2rem}
.gap-10{grid-gap: 2.5rem;gap: 2.5rem}
.gap-12{grid-gap: 3rem;gap: 3rem}
.gap-16{grid-gap: 4rem;gap: 4rem}
.gap-20{grid-gap: 5rem;gap: 5rem}
.gap-24{grid-gap: 6rem;gap: 6rem}
.gap-32{grid-gap: 8rem;gap: 8rem}
.gap-40{grid-gap: 10rem;gap: 10rem}
.gap-48{grid-gap: 12rem;gap: 12rem}
.gap-56{grid-gap: 14rem;gap: 14rem}
.gap-64{grid-gap: 16rem;gap: 16rem}
.gap-px{grid-gap: 1px;gap: 1px}
.col-gap-0{grid-column-gap: 0;column-gap: 0}
.col-gap-1{grid-column-gap: .25rem;column-gap: .25rem}
.col-gap-2{grid-column-gap: .5rem;column-gap: .5rem}
.col-gap-3{grid-column-gap: .75rem;column-gap: .75rem}
.col-gap-4{grid-column-gap: 1rem;column-gap: 1rem}
.col-gap-5{grid-column-gap: 1.25rem;column-gap: 1.25rem}
.col-gap-6{grid-column-gap: 1.5rem;column-gap: 1.5rem}
.col-gap-8{grid-column-gap: 2rem;column-gap: 2rem}
.col-gap-10{grid-column-gap: 2.5rem;column-gap: 2.5rem}
.col-gap-12{grid-column-gap: 3rem;column-gap: 3rem}
.col-gap-16{grid-column-gap: 4rem;column-gap: 4rem}
.col-gap-20{grid-column-gap: 5rem;column-gap: 5rem}
.col-gap-24{grid-column-gap: 6rem;column-gap: 6rem}
.col-gap-32{grid-column-gap: 8rem;column-gap: 8rem}
.col-gap-40{grid-column-gap: 10rem;column-gap: 10rem}
.col-gap-48{grid-column-gap: 12rem;column-gap: 12rem}
.col-gap-56{grid-column-gap: 14rem;column-gap: 14rem}
.col-gap-64{grid-column-gap: 16rem;column-gap: 16rem}
.col-gap-px{grid-column-gap: 1px;column-gap: 1px}
.gap-x-0{grid-column-gap: 0;column-gap: 0}
.gap-x-1{grid-column-gap: .25rem;column-gap: .25rem}
.gap-x-2{grid-column-gap: .5rem;column-gap: .5rem}
.gap-x-3{grid-column-gap: .75rem;column-gap: .75rem}
.gap-x-4{grid-column-gap: 1rem;column-gap: 1rem}
.gap-x-5{grid-column-gap: 1.25rem;column-gap: 1.25rem}
.gap-x-6{grid-column-gap: 1.5rem;column-gap: 1.5rem}
.gap-x-8{grid-column-gap: 2rem;column-gap: 2rem}
.gap-x-10{grid-column-gap: 2.5rem;column-gap: 2.5rem}
.gap-x-12{grid-column-gap: 3rem;column-gap: 3rem}
.gap-x-16{grid-column-gap: 4rem;column-gap: 4rem}
.gap-x-20{grid-column-gap: 5rem;column-gap: 5rem}
.gap-x-24{grid-column-gap: 6rem;column-gap: 6rem}
.gap-x-32{grid-column-gap: 8rem;column-gap: 8rem}
.gap-x-40{grid-column-gap: 10rem;column-gap: 10rem}
.gap-x-48{grid-column-gap: 12rem;column-gap: 12rem}
.gap-x-56{grid-column-gap: 14rem;column-gap: 14rem}
.gap-x-64{grid-column-gap: 16rem;column-gap: 16rem}
.gap-x-px{grid-column-gap: 1px;column-gap: 1px}
.row-gap-0{grid-row-gap: 0;row-gap: 0}
.row-gap-1{grid-row-gap: .25rem;row-gap: .25rem}
.row-gap-2{grid-row-gap: .5rem;row-gap: .5rem}
.row-gap-3{grid-row-gap: .75rem;row-gap: .75rem}
.row-gap-4{grid-row-gap: 1rem;row-gap: 1rem}
.row-gap-5{grid-row-gap: 1.25rem;row-gap: 1.25rem}
.row-gap-6{grid-row-gap: 1.5rem;row-gap: 1.5rem}
.row-gap-8{grid-row-gap: 2rem;row-gap: 2rem}
.row-gap-10{grid-row-gap: 2.5rem;row-gap: 2.5rem}
.row-gap-12{grid-row-gap: 3rem;row-gap: 3rem}
.row-gap-16{grid-row-gap: 4rem;row-gap: 4rem}
.row-gap-20{grid-row-gap: 5rem;row-gap: 5rem}
.row-gap-24{grid-row-gap: 6rem;row-gap: 6rem}
.row-gap-32{grid-row-gap: 8rem;row-gap: 8rem}
.row-gap-40{grid-row-gap: 10rem;row-gap: 10rem}
.row-gap-48{grid-row-gap: 12rem;row-gap: 12rem}
.row-gap-56{grid-row-gap: 14rem;row-gap: 14rem}
.row-gap-64{grid-row-gap: 16rem;row-gap: 16rem}
.row-gap-px{grid-row-gap: 1px;row-gap: 1px}
.gap-y-0{grid-row-gap: 0;row-gap: 0}
.gap-y-1{grid-row-gap: .25rem;row-gap: .25rem}
.gap-y-2{grid-row-gap: .5rem;row-gap: .5rem}
.gap-y-3{grid-row-gap: .75rem;row-gap: .75rem}
.gap-y-4{grid-row-gap: 1rem;row-gap: 1rem}
.gap-y-5{grid-row-gap: 1.25rem;row-gap: 1.25rem}
.gap-y-6{grid-row-gap: 1.5rem;row-gap: 1.5rem}
.gap-y-8{grid-row-gap: 2rem;row-gap: 2rem}
.gap-y-10{grid-row-gap: 2.5rem;row-gap: 2.5rem}
.gap-y-12{grid-row-gap: 3rem;row-gap: 3rem}
.gap-y-16{grid-row-gap: 4rem;row-gap: 4rem}
.gap-y-20{grid-row-gap: 5rem;row-gap: 5rem}
.gap-y-24{grid-row-gap: 6rem;row-gap: 6rem}
.gap-y-32{grid-row-gap: 8rem;row-gap: 8rem}
.gap-y-40{grid-row-gap: 10rem;row-gap: 10rem}
.gap-y-48{grid-row-gap: 12rem;row-gap: 12rem}
.gap-y-56{grid-row-gap: 14rem;row-gap: 14rem}
.gap-y-64{grid-row-gap: 16rem;row-gap: 16rem}
.gap-y-px{grid-row-gap: 1px;row-gap: 1px}


.al-end{ align-self: end; }
.al-center{ align-self: center; }
/** GRID **/
.grid { display: grid }
.grid-flow-row { grid-auto-flow: row }
.grid-flow-col { grid-auto-flow: column }
.grid-flow-row-dense { grid-auto-flow: row dense }
.grid-flow-col-dense { grid-auto-flow: column dense }
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.grid-cols-none { grid-template-columns: none }
.auto-cols-auto { grid-auto-columns: auto }
.auto-cols-min { 
    grid-auto-columns: -webkit-min-content;
    grid-auto-columns: min-content
}
.auto-cols-max {
    grid-auto-columns: -webkit-max-content;
    grid-auto-columns: max-content
}
.auto-cols-fr { grid-auto-columns: minmax(0,1fr) }
.col-auto { grid-column: auto }
.col-span-1 { grid-column: span 1/span 1 }
.col-span-2 { grid-column: span 2/span 2 }
.col-span-3 { grid-column: span 3/span 3 }
.col-span-4 { grid-column: span 4/span 4 }
.col-span-5 { grid-column: span 5/span 5 }
.col-span-6 { grid-column: span 6/span 6 }
.col-span-7 { grid-column: span 7/span 7 }
.col-span-8 { grid-column: span 8/span 8 }
.col-span-9 { grid-column: span 9/span 9 }
.col-span-10 { grid-column: span 10/span 10 }
.col-span-11 { grid-column: span 11/span 11 }
.col-span-12 { grid-column: span 12/span 12 }
.col-span-full { grid-column: 1/-1 }
.col-start-1 { grid-column-start: 1 }
.col-start-2 { grid-column-start: 2 }
.col-start-3 { grid-column-start: 3 }
.col-start-4 { grid-column-start: 4 }
.col-start-5 { grid-column-start: 5 }
.col-start-6 { grid-column-start: 6 }
.col-start-7 { grid-column-start: 7 }
.col-start-8 { grid-column-start: 8 }
.col-start-9 { grid-column-start: 9 }
.col-start-10 { grid-column-start: 10 }
.col-start-11 { grid-column-start: 11 }
.col-start-12 { grid-column-start: 12 }
.col-start-13 { grid-column-start: 13 }
.col-start-auto { grid-column-start: auto }
.col-end-1 { grid-column-end: 1 }
.col-end-2 { grid-column-end: 2 }
.col-end-3 { grid-column-end: 3 }
.col-end-4 { grid-column-end: 4 }
.col-end-5 { grid-column-end: 5 }
.col-end-6 { grid-column-end: 6 }
.col-end-7 { grid-column-end: 7 }
.col-end-8 { grid-column-end: 8 }
.col-end-9 { grid-column-end: 9 }
.col-end-10 { grid-column-end: 10 }
.col-end-11 { grid-column-end: 11 }
.col-end-12 { grid-column-end: 12 }
.col-end-13 {  grid-column-end: 13 }
.col-end-auto {  grid-column-end: auto }
.grid-rows-1 { grid-template-rows: repeat(1,minmax(0,1fr)) }
.grid-rows-2 {  grid-template-rows: repeat(2,minmax(0,1fr)) }
.grid-rows-3 {  grid-template-rows: repeat(3,minmax(0,1fr)) }
.grid-rows-4 {  grid-template-rows: repeat(4,minmax(0,1fr)) }
.grid-rows-5 {  grid-template-rows: repeat(5,minmax(0,1fr)) }
.grid-rows-6 {  grid-template-rows: repeat(6,minmax(0,1fr)) }
.grid-rows-none { grid-template-rows: none }


@media (width < 600px) and ( width > 320px) {
.sm-w-5 { width: 5%;  }
.sm-w-10 { width: 10%;  }
.sm-w-15 { width: 15%;  }
.sm-w-20 { width: 20%;  }
.sm-w-25 { width: 25%;  }
.sm-w-30 { width: 30%;  }
.sm-w-35 { width: 35%;  }
.sm-w-40 { width: 40%;  }
.sm-w-45 { width: 45%;  }
.sm-w-50 { width: 50%;  }
.sm-w-55 { width: 55%;  }
.sm-w-60 { width: 60%;  }
.sm-w-65 { width: 65%;  }
.sm-w-70 { width: 70%;  }
.sm-w-75 { width: 75%;  }
.sm-w-80 { width: 80%;  }
.sm-w-85 { width: 85%;  }
.sm-w-90 { width: 90%;  }
.sm-w-95 { width: 95%;  }
.sm-w-100 { width: 100%;  }

.sm-w-1\/3 { width: 33.333333%;  }
.sm-w-1\/2 { width: 50%;  }
.sm-w-2\/3 { width: 66.666667%; }
.sm-w-1\/4 { width: 25%;  }
.sm-w-3\/4 { width: 75%;  }
.sm-w-1\/5 { width: 20%;  }
.sm-w-2\/5 { width: 40%;  }
.sm-w-3\/5 { width: 60%;  }
.sm-w-4\/5 { width: 80%;  }
.sm-w-1\/6 { width: 16.666667%;  }
.sm-w-5\/6 { width: 83.333333%;  }
.sm-w-1\/12 { width: 8.333333%;  }
.sm-w-100 { width: 100%;  }
/* Ajuste de Grid */
.sm-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.sm-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.sm-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.sm-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.sm-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.sm-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.sm-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.sm-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.sm-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.sm-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.sm-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.sm-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.sm-col-span-1 { grid-column: span 1/span 1  }
.sm-col-span-2 { grid-column: span 2/span 2  }
.sm-col-span-3 { grid-column: span 3/span 3  }
.sm-col-span-4 { grid-column: span 4/span 4  }
.sm-col-span-5 { grid-column: span 5/span 5  }
.sm-col-span-6 { grid-column: span 6/span 6  }
.sm-col-span-7 { grid-column: span 7/span 7  }
.sm-col-span-8 { grid-column: span 8/span 8  }
.sm-col-span-9 { grid-column: span 9/span 9  }
.sm-col-span-10 { grid-column: span 10/span 10  }
.sm-col-span-11 { grid-column: span 11/span 11  }
.sm-col-span-12 { grid-column: span 12/span 12  }
.sm-col-span-full { grid-column: 1/-1  }
.sm-col-start-1 { grid-column-start: 1  }
.sm-col-start-2 { grid-column-start: 2  }
.sm-col-start-3 { grid-column-start: 3  }
.sm-col-start-4 { grid-column-start: 4  }
.sm-col-start-5 { grid-column-start: 5  }
.sm-col-start-6 { grid-column-start: 6  }
.sm-col-start-7 { grid-column-start: 7  }
.sm-col-start-8 { grid-column-start: 8  }
.sm-col-start-9 { grid-column-start: 9  }
.sm-col-start-10 { grid-column-start: 10  }
.sm-col-start-11 { grid-column-start: 11  }
.sm-col-start-12 { grid-column-start: 12  }
.sm-col-start-auto { grid-column-start: auto  }
}
@media (width > 600px)  { ▼
.md-w-5 { width: 5%;  }
.md-w-10 { width: 10%;  }
.md-w-15 { width: 15%;  }
.md-w-20 { width: 20%;  }
.md-w-25 { width: 25%;  }
.md-w-30 { width: 30%;  }
.md-w-35 { width: 35%;  }
.md-w-40 { width: 40%;  }
.md-w-45 { width: 45%;  }
.md-w-50 { width: 50%;  }
.md-w-55 { width: 55%;  }
.md-w-60 { width: 60%;  }
.md-w-65 { width: 65%;  }
.md-w-70 { width: 70%;  }
.md-w-75 { width: 75%;  }
.md-w-80 { width: 80%;  }
.md-w-85 { width: 85%;  }
.md-w-90 { width: 90%;  }
.md-w-95 { width: 95%;  }
.md-w-100 { width: 100%;  }
.md-w-1\/3 { width: 33.333333%;  }
.md-w-1\/2 { width: 50%;  }
.md-w-2\/3 { width: 66.666667%; }
.md-w-1\/4 { width: 25%;  }
.md-w-3\/4 { width: 75%;  }
.md-w-1\/5 { width: 20%;  }
.md-w-2\/5 { width: 40%;  }
.md-w-3\/5 { width: 60%;  }
.md-w-4\/5 { width: 80%;  }
.md-w-1\/6 { width: 16.666667%;  }
.md-w-5\/6 { width: 83.333333%;  }
.md-w-1\/12 { width: 8.333333%;  }
.md-w-100 { width: 100%;  }
/** Ajuste de Grid */
.md-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.md-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.md-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
.md-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
.md-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
.md-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
.md-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
.md-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
.md-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
.md-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
.md-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
.md-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
.md-grid-cols-20 { grid-template-columns: repeat(20,minmax(0,1fr)) }
.md-col-span-1 { grid-column: span 1/span 1  }
.md-col-span-2 { grid-column: span 2/span 2  }
.md-col-span-3 { grid-column: span 3/span 3  }
.md-col-span-4 { grid-column: span 4/span 4  }
.md-col-span-5 { grid-column: span 5/span 5  }
.md-col-span-6 { grid-column: span 6/span 6  }
.md-col-span-7 { grid-column: span 7/span 7  }
.md-col-span-8 { grid-column: span 8/span 8  }
.md-col-span-9 { grid-column: span 9/span 9  }
.md-col-span-10 { grid-column: span 10/span 10  }
.md-col-span-11 { grid-column: span 11/span 11  }
.md-col-span-12 { grid-column: span 12/span 12  }
.md-col-span-full { grid-column: 1/-1  }
.md-col-start-1 { grid-column-start: 1  }
.md-col-start-2 { grid-column-start: 2  }
.md-col-start-3 { grid-column-start: 3  }
.md-col-start-4 { grid-column-start: 4  }
.md-col-start-5 { grid-column-start: 5  }
.md-col-start-6 { grid-column-start: 6  }
.md-col-start-7 { grid-column-start: 7  }
.md-col-start-8 { grid-column-start: 8  }
.md-col-start-9 { grid-column-start: 9  }
.md-col-start-10 { grid-column-start: 10  }
.md-col-start-11 { grid-column-start: 11  }
.md-col-start-12 { grid-column-start: 12  }
.md-col-start-auto { grid-column-start: auto  }
}
/** lg-grid **/
@media (width > 1024px)  { ▼
    .lg-w-5 { width: 5%;  }
    .lg-w-10 { width: 10%;  }
    .lg-w-15 { width: 15%;  }
    .lg-w-20 { width: 20%;  }
    .lg-w-25 { width: 25%;  }
    .lg-w-30 { width: 30%;  }
    .lg-w-35 { width: 35%;  }
    .lg-w-40 { width: 40%;  }
    .lg-w-45 { width: 45%;  }
    .lg-w-50 { width: 50%;  }
    .lg-w-55 { width: 55%;  }
    .lg-w-60 { width: 60%;  }
    .lg-w-65 { width: 65%;  }
    .lg-w-70 { width: 70%;  }
    .lg-w-75 { width: 75%;  }
    .lg-w-80 { width: 80%;  }
    .lg-w-85 { width: 85%;  }
    .lg-w-90 { width: 90%;  }
    .lg-w-95 { width: 95%;  }
    .lg-w-100 { width: 100%;  }

    .lg-w-1\/3 { width: 33.333333%;  }
    .lg-w-1\/2 { width: 50%;  }
    .lg-w-2\/3 { width: 66.666667%; }
    .lg-w-1\/4 { width: 25%;  }
    .lg-w-3\/4 { width: 75%;  }
    .lg-w-1\/5 { width: 20%;  }
    .lg-w-2\/5 { width: 40%;  }
    .lg-w-3\/5 { width: 60%;  }
    .lg-w-4\/5 { width: 80%;  }
    .lg-w-1\/6 { width: 16.666667%;  }
    .lg-w-5\/6 { width: 83.333333%;  }
    .lg-w-1\/12 { width: 8.333333%;  }
    .lg-w-100 { width: 100%;  }
    /** Ajuste de Grid */
    .lg-grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
    .lg-grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
    .lg-grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
    .lg-grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) }
    .lg-grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) }
    .lg-grid-cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) }
    .lg-grid-cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) }
    .lg-grid-cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) }
    .lg-grid-cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) }
    .lg-grid-cols-10 { grid-template-columns: repeat(10,minmax(0,1fr)) }
    .lg-grid-cols-11 { grid-template-columns: repeat(11,minmax(0,1fr)) }
    .lg-grid-cols-12 { grid-template-columns: repeat(12,minmax(0,1fr)) }
    .lg-grid-cols-20 { grid-template-columns: repeat(20,minmax(0,1fr)) }
    .lg-col-span-1 { grid-column: span 1/span 1  }
    .lg-col-span-2 { grid-column: span 2/span 2  }
    .lg-col-span-3 { grid-column: span 3/span 3  }
    .lg-col-span-4 { grid-column: span 4/span 4  }
    .lg-col-span-5 { grid-column: span 5/span 5  }
    .lg-col-span-6 { grid-column: span 6/span 6  }
    .lg-col-span-7 { grid-column: span 7/span 7  }
    .lg-col-span-8 { grid-column: span 8/span 8  }
    .lg-col-span-9 { grid-column: span 9/span 9  }
    .lg-col-span-10 { grid-column: span 10/span 10  }
    .lg-col-span-11 { grid-column: span 11/span 11  }
    .lg-col-span-12 { grid-column: span 12/span 12  }
    .lg-col-span-full { grid-column: 1/-1  }
    .lg-col-start-1 { grid-column-start: 1  }
    .lg-col-start-2 { grid-column-start: 2  }
    .lg-col-start-3 { grid-column-start: 3  }
    .lg-col-start-4 { grid-column-start: 4  }
    .lg-col-start-5 { grid-column-start: 5  }
    .lg-col-start-6 { grid-column-start: 6  }
    .lg-col-start-7 { grid-column-start: 7  }
    .lg-col-start-8 { grid-column-start: 8  }
    .lg-col-start-9 { grid-column-start: 9  }
    .lg-col-start-10 { grid-column-start: 10  }
    .lg-col-start-11 { grid-column-start: 11  }
    .lg-col-start-12 { grid-column-start: 12  }
    .lg-col-start-auto { grid-column-start: auto  }
}
/** Fases **/
.trapecio {
    width: 100%;
    height: 500px;
    clip-path: polygon(0% 0%, 100% 20%, 100% 80%, 0% 100%);
    padding-top: 40%;
    margin-left: calc(-1em * var(--i));
}
.trapecio:nth-child(1) { --i: 0; }
.trapecio:nth-child(2) { --i: 1; }
.trapecio:nth-child(3) { --i: 2; }
.trapecio:nth-child(4) { --i: 3; }
.trapecio:hover{
    transform: scale(1.06) translateX(-1em);
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
}
/** Propuestas **/
.btn-cargo{
    width: 100%;
    cursor: pointer;
    border-radius: 0.5em;
    text-align: center;
    height: 3em;
    line-height: 3em;
    background-color: #C3C1C5;
    color: #3D3153;
    font-size: 1.2em;
}
.btn-cargo.active, .btn-cargo:hover{
    background-color: #5E5969;
    color: #C3C1C5;
    transition: 0.5s;
}