/* POSITIONS */
.fixed    { position: fixed; }
.relative { position: relative; }
.pos-unset{ position: unset; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.bottom-0      { bottom: 0; }
.bottom-1      { bottom: 1rem; }
.top-0         { top: 0; }
.top-1         { top: 1rem; }
.top-center    { top: 50%; }
.top-header    { top: var(--h-header); }
.top-subheader { margin-top: var(--h-subheader) !important; }
.left-0        { left: 0; }
.left-1        { left: 1rem; }
.left-center   { left: 50%; }
.left-auto     { left: auto !important; }
.right-0       { right: 0; }
.right-1       { right: 1rem; }
.right-center   { right: 50%; }
.right-auto     { right: auto !important; }

.transform-center-y {transform: translateY(-50%)}
.transform-center-x {transform: translateX(-50%)}
.transform-center {transform: translate(-50%, -50%)}

.flex             { display: flex !important; flex-wrap: wrap; }
.flex-1           { flex: 1 1 0; min-width: 0; }
.flex-0           { flex: 0; }
.flex-row         { flex-direction: row; }
.flex-col         { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

.justify-between    { justify-content: space-between; }
.justify-evenly     { justify-content: space-evenly; }
.justify-around     { justify-content: space-around; }
.justify-start      { justify-content: start; }
.justify-left       { justify-content: start; }
.justify-end        { justify-content: end; }
.justify-right      { justify-content: end; }
.justify-center     { justify-content: center; }

.items-center       { align-items: center; }
.items-start        { align-items: start; }
.items-end          { align-items: end; }
.items-stretch      { align-items: stretch; }

.align-start { align-self: start; }
.align-end   { align-self: end; }


/* SCALES */
.scale-0_1 { scale: 0.1; }
.scale-0_2 { scale: 0.2; }
.scale-0_3 { scale: 0.3; }
.scale-0_4 { scale: 0.4; }
.scale-0_5 { scale: 0.5; }
.scale-0_6 { scale: 0.6; }
.scale-0_7 { scale: 0.7; }
.scale-0_8 { scale: 0.8; }
.scale-0_9 { scale: 0.9; }
.scale-1 { scale: 1.0; }
.scale-2 { scale: 1.5; }
.scale-3 { scale: 2.0; }
.scale-4 { scale: 2.5; }
.scale-5 { scale: 3.0; }

.hover-scale-1:hover    { scale: 1.0; }
.hover-scale-1_1:hover  { scale: 1.05; }
.hover-scale-2:hover    { scale: 1.5; }
.hover-scale-3:hover    { scale: 2.0; }
.hover-scale-4:hover    { scale: 2.5; }
.hover-scale-5:hover    { scale: 3.0; }


/* GAPS */
.gap-0   { gap:  0   !important; --offset-w:  0px; --offset-h:  0px; }
.gap-xs  { gap:  2px !important; --offset-w:  1px; --offset-h:  1px; }
.gap-1   { gap: 10px !important; --offset-w:  8px; --offset-h:  8px; }
.gap-2   { gap: 20px !important; --offset-w: 10px; --offset-h: 10px; }
.gap-2_5 { gap: 20px !important; --offset-w: 16px; --offset-h: 16px; }

/* WIDTH */
.w-20px        { width:   20px; }
.w-34px        { width:   34px; }
.w-40px        { width:   40px; }
.w-100px       { width:   100px; }
.w-115px       { width:   115px; }
.w-200px       { width:  200px; }
.w-250px       { width:  250px; }
.w-800px       { width:  800px; }
.w-1900px      { width: 1900px; }
.w-aside       { width: var(--w-aside); }
.w-modal       { width: var(--w-modal); }
.w-date        { width: var(--w-date) !important; }
.w-icon        { width: var(--s-icon) !important; }
.w-100 { width: calc(100%); }
.w-95  { width: calc( 95% - var(--offset-w)); }
.w-90  { width: calc( 90% - var(--offset-w)); }
.w-85  { width: calc( 85% - var(--offset-w)); }
.w-80  { width: calc( 80% - var(--offset-w)); }
.w-75  { width: calc( 75% - var(--offset-w)); }
.w-70  { width: calc( 70% - var(--offset-w)); }
.w-66  { width: calc( calc((100%/3)*2) - var(--offset-w)); }
.w-65  { width: calc( 65% - var(--offset-w)); }
.w-60  { width: calc( 60% - var(--offset-w)); }
.w-55  { width: calc( 55% - var(--offset-w)); }
.w-50  { width: calc( 50% - var(--offset-w)); }
.w-45  { width: calc( 45% - var(--offset-w)); }
.w-40  { width: calc( 40% - var(--offset-w)); }
.w-35  { width: calc( 35% - var(--offset-w)); }
.w-33  { width: calc( calc(100%/3) - var(--offset-w)); }
.w-30  { width: calc( 30% - var(--offset-w)); }
.w-25  { width: calc( 25% - var(--offset-w)); }
.w-20  { width: calc( 20% - var(--offset-w)); }
.w-16  { width: calc( 16% - var(--offset-w)); }
.w-15  { width: calc( 15% - var(--offset-w)); }
.w-1÷7 { width: calc( calc(100%/7) - var(--offset-w)); }
.w-1d7 { width: calc( calc(100%/7) - var(--offset-w)); }
.w-1d8 { width: calc( calc(100%/8) - var(--offset-w)); }
.w-14  { width: calc( 14% - var(--offset-w)); }
.w-12  { width: calc( 12% - var(--offset-w)); }
.w-10  { width: calc( 10% - var(--offset-w)); }
.w-7_5 { width: calc(7.5% - var(--offset-w)); }
.w-5   { width: calc(  5% - var(--offset-w)); }

.min-w-20px     { min-width: 20px; }
.min-w-40px     { min-width: 40px; }
.min-w-60px     { min-width: 60px; }
.min-w-180px    { min-width: 180px; }
.min-w-250px    { min-width: 250px; }
.min-w-1900px   { min-width: 1900px; }
.min-w-aside    { min-width: var(--w-aside); }
.min-w-100      { min-width: calc(100%); }
.min-w-95       { min-width: calc( 95% - var(--offset-w)); }
.min-w-90       { min-width: calc( 90% - var(--offset-w)); }
.min-w-85       { min-width: calc( 85% - var(--offset-w)); }
.min-w-80       { min-width: calc( 80% - var(--offset-w)); }
.min-w-75       { min-width: calc( 75% - var(--offset-w)); }
.min-w-70       { min-width: calc( 70% - var(--offset-w)); }
.min-w-65       { min-width: calc( 65% - var(--offset-w)); }
.min-w-60       { min-width: calc( 60% - var(--offset-w)); }
.min-w-55       { min-width: calc( 55% - var(--offset-w)); }
.min-w-50       { min-width: calc( 50% - var(--offset-w)); }
.min-w-45       { min-width: calc( 45% - var(--offset-w)); }
.min-w-40       { min-width: calc( 40% - var(--offset-w)); }
.min-w-35       { min-width: calc( 35% - var(--offset-w)); }
.min-w-33       { min-width: calc( calc(100%/3) - var(--offset-w)); }
.min-w-30       { min-width: calc( 30% - var(--offset-w)); }
.min-w-25       { min-width: calc( 25% - var(--offset-w)); }
.min-w-20       { min-width: calc( 20% - var(--offset-w)); }
.min-w-15       { min-width: calc( 15% - var(--offset-w)); }
.min-w-12       { min-width: calc( 12% - var(--offset-w)); }
.min-w-10       { min-width: calc( 10% - var(--offset-w)); }
.min-w-7_5      { min-width: calc(7.5% - var(--offset-w)); }
.min-w-5        { min-width: calc(  5% - var(--offset-w)); }

.max-w-20px     { max-width: 20px; }
.max-w-30px     { max-width: 30px; }
.max-w-115px    { max-width: 115px; }
.max-w-185px    { max-width: 185px; }
.max-w-200px    { max-width: 200px; }
.max-w-500px    { max-width: 500px; }
.max-w-600px    { max-width: 600px; }
.max-w-1900px   { max-width: 1900px; }
.max-w-aside    { max-width: var(--w-aside); }
.max-w-100      { max-width: calc(100%); }
.max-w-95       { max-width: calc( 95% - var(--offset-w)); }
.max-w-90       { max-width: calc( 90% - var(--offset-w)); }
.max-w-85       { max-width: calc( 85% - var(--offset-w)); }
.max-w-80       { max-width: calc( 80% - var(--offset-w)); }
.max-w-75       { max-width: calc( 75% - var(--offset-w)); }
.max-w-70       { max-width: calc( 70% - var(--offset-w)); }
.max-w-66       { max-width: calc( calc(200%/3) - var(--offset-w)); }
.max-w-65       { max-width: calc( 65% - var(--offset-w)); }
.max-w-60       { max-width: calc( 60% - var(--offset-w)); }
.max-w-55       { max-width: calc( 55% - var(--offset-w)); }
.max-w-50       { max-width: calc( 50% - var(--offset-w)); }
.max-w-45       { max-width: calc( 45% - var(--offset-w)); }
.max-w-40       { max-width: calc( 40% - var(--offset-w)); }
.max-w-35       { max-width: calc( 35% - var(--offset-w)); }
.max-w-33       { max-width: calc( calc(100%/3) - var(--offset-w)); }
.max-w-30       { max-width: calc( 30% - var(--offset-w)); }
.max-w-25       { max-width: calc( 25% - var(--offset-w)); }
.max-w-20       { max-width: calc( 20% - var(--offset-w)); }
.max-w-15       { max-width: calc( 15% - var(--offset-w)); }
.max-w-12       { max-width: calc( 12% - var(--offset-w)); }
.max-w-10       { max-width: calc( 10% - var(--offset-w)); }
.max-w-7_5      { max-width: calc(7.5% - var(--offset-w)); }
.max-w-5        { max-width: calc(  5% - var(--offset-w)); }


/* HEIGH */
.h-screen    { height: 100vh; }
.h-header    { height: var(--h-header); }
.h-header-half    { height: calc(var(--h-header)/2); }
.h-footer    { height: var(--h-footer); }
.h-body      { height: var(--h-body); }
.h-subheader { height: var(--h-subheader); }
.h-icon      { height: var(--s-icon); }
.h-60px      { height:  60px; }
.h-dv        { height: var(--h-dv); }
.h-50px      { height: 50px; }
.h-100px     { height: 100px; }
.h-200px     { height: 200px; }
.h-auto      { height: auto; }
.h-100       { height: calc(100% - var(--offset-h)); }
.h-95        { height: calc( 95% - var(--offset-h)); }
.h-90        { height: calc( 90% - var(--offset-h)); }
.h-85        { height: calc( 85% - var(--offset-h)); }
.h-80        { height: calc( 80% - var(--offset-h)); }
.h-75        { height: calc( 75% - var(--offset-h)); }
.h-70        { height: calc( 70% - var(--offset-h)); }
.h-65        { height: calc( 65% - var(--offset-h)); }
.h-60        { height: calc( 60% - var(--offset-h)); }
.h-55        { height: calc( 55% - var(--offset-h)); }
.h-50        { height: calc( 50% - var(--offset-h)); }
.h-45        { height: calc( 45% - var(--offset-h)); }
.h-40        { height: calc( 40% - var(--offset-h)); }
.h-35        { height: calc( 35% - var(--offset-h)); }
.h-30        { height: calc( 30% - var(--offset-h)); }
.h-25        { height: calc( 25% - var(--offset-h)); }
.h-20        { height: calc( 20% - var(--offset-h)); }
.h-15        { height: calc( 15% - var(--offset-h)); }
.h-10        { height: calc( 10% - var(--offset-h)); }
.h-5         { height: calc(  5% - var(--offset-h)); }

.min-h-screen    { min-height: 100vh; }
.min-h-header    { min-height: var(--h-header); }
.min-h-footer    { min-height: var(--h-footer); }
.min-h-body      { min-height: var(--h-body); }
.min-h-subheader { min-height: var(--h-subheader); }
.min-h-70px      { min-height: 70px; }
.min-h-100       { min-height: calc(100% - var(--offset-h)); }
.min-h-95        { min-height: calc( 95% - var(--offset-h)); }
.min-h-90        { min-height: calc( 90% - var(--offset-h)); }
.min-h-85        { min-height: calc( 85% - var(--offset-h)); }
.min-h-80        { min-height: calc( 80% - var(--offset-h)); }
.min-h-75        { min-height: calc( 75% - var(--offset-h)); }
.min-h-70        { min-height: calc( 70% - var(--offset-h)); }
.min-h-65        { min-height: calc( 65% - var(--offset-h)); }
.min-h-60        { min-height: calc( 60% - var(--offset-h)); }
.min-h-55        { min-height: calc( 55% - var(--offset-h)); }
.min-h-50        { min-height: calc( 50% - var(--offset-h)); }
.min-h-45        { min-height: calc( 45% - var(--offset-h)); }
.min-h-40        { min-height: calc( 40% - var(--offset-h)); }
.min-h-35        { min-height: calc( 35% - var(--offset-h)); }
.min-h-30        { min-height: calc( 30% - var(--offset-h)); }
.min-h-25        { min-height: calc( 25% - var(--offset-h)); }
.min-h-20        { min-height: calc( 20% - var(--offset-h)); }
.min-h-15        { min-height: calc( 15% - var(--offset-h)); }
.min-h-10        { min-height: calc( 10% - var(--offset-h)); }
.min-h-5         { min-height: calc(  5% - var(--offset-h)); }

.max-h-screen    { max-height: 100vh; }
.max-h-header    { max-height: var(--h-header); }
.max-h-footer    { max-height: var(--h-footer); }
.max-h-body      { max-height: var(--h-body); }
.max-h-subheader { max-height: var(--h-subheader); }
.max-h-100px     { max-height: 100px; }
.max-h-200px     { max-height: 200px; }
.max-h-300px     { max-height: 300px; }
.max-h-50px      { max-height: 50px; }
.max-h-30px      { max-height: 30px; }
.max-h-100       { max-height: calc(100% - var(--offset-h)); }
.max-h-95        { max-height: calc( 95% - var(--offset-h)); }
.max-h-90        { max-height: calc( 90% - var(--offset-h)); }
.max-h-85        { max-height: calc( 85% - var(--offset-h)); }
.max-h-80        { max-height: calc( 80% - var(--offset-h)); }
.max-h-75        { max-height: calc( 75% - var(--offset-h)); }
.max-h-70        { max-height: calc( 70% - var(--offset-h)); }
.max-h-65        { max-height: calc( 65% - var(--offset-h)); }
.max-h-60        { max-height: calc( 60% - var(--offset-h)); }
.max-h-55        { max-height: calc( 55% - var(--offset-h)); }
.max-h-50        { max-height: calc( 50% - var(--offset-h)); }
.max-h-45        { max-height: calc( 45% - var(--offset-h)); }
.max-h-40        { max-height: calc( 40% - var(--offset-h)); }
.max-h-35        { max-height: calc( 35% - var(--offset-h)); }
.max-h-30        { max-height: calc( 30% - var(--offset-h)); }
.max-h-25        { max-height: calc( 25% - var(--offset-h)); }
.max-h-20        { max-height: calc( 20% - var(--offset-h)); }
.max-h-15        { max-height: calc( 15% - var(--offset-h)); }
.max-h-10        { max-height: calc( 10% - var(--offset-h)); }
.max-h-5         { max-height: calc(  5% - var(--offset-h)); }

/* PADDINGS */
.p-0   { padding: 0 !important; }
.p-1   { padding: var(--variable-1); }
.p-2   { padding: var(--variable-2); }
.p-3   { padding: var(--variable-3); }
.p-4   { padding: var(--variable-4); }
.p-5   { padding: var(--variable-5); }
.p-xs  { padding: var(--variable-xs); }
.p-sm  { padding: var(--variable-sm); }
.p-md  { padding: var(--variable-md); }
.p-lg  { padding: var(--variable-lg); }
.p-xl  { padding: var(--variable-xl); }
.px-1  { padding-left: var(--variable-1); padding-right: var(--variable-1); }
.px-2  { padding-left: var(--variable-2); padding-right: var(--variable-2); }
.px-3  { padding-left: var(--variable-3); padding-right: var(--variable-3); }
.px-4  { padding-left: var(--variable-4); padding-right: var(--variable-4); }
.px-5  { padding-left: var(--variable-5); padding-right: var(--variable-5); }
.px-xs { padding-left: var(--variable-xs); padding-right: var(--variable-xs); }
.px-sm { padding-left: var(--variable-sm); padding-right: var(--variable-sm); }
.px-md { padding-left: var(--variable-md); padding-right: var(--variable-md); }
.px-lg { padding-left: var(--variable-lg); padding-right: var(--variable-lg); }
.px-xl { padding-left: var(--variable-xl); padding-right: var(--variable-xl); }
.py-1  { padding-top: var(--variable-1); padding-bottom: var(--variable-1); }
.py-2  { padding-top: var(--variable-2); padding-bottom: var(--variable-2); }
.py-3  { padding-top: var(--variable-3); padding-bottom: var(--variable-3); }
.py-4  { padding-top: var(--variable-4); padding-bottom: var(--variable-4); }
.py-5  { padding-top: var(--variable-5); padding-bottom: var(--variable-5); }
.py-xs { padding-top: var(--variable-xs); padding-bottom: var(--variable-xs); }
.py-sm { padding-top: var(--variable-sm); padding-bottom: var(--variable-sm); }
.py-md { padding-top: var(--variable-md); padding-bottom: var(--variable-md); }
.py-lg { padding-top: var(--variable-lg); padding-bottom: var(--variable-lg); }
.py-xl { padding-top: var(--variable-xl); padding-bottom: var(--variable-xl); }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--variable-1); }
.pt-2 { padding-top: var(--variable-2); }
.pt-3 { padding-top: var(--variable-3); }
.pt-4 { padding-top: var(--variable-4); }
.pt-5 { padding-top: var(--variable-5); }
.pt-xs { padding-top: var(--variable-xs); }
.pt-sm { padding-top: var(--variable-sm); }
.pt-md { padding-top: var(--variable-md); }
.pt-lg { padding-top: var(--variable-lg); }
.pt-xl { padding-top: var(--variable-xl); }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: var(--variable-1); }
.pb-2 { padding-bottom: var(--variable-2); }
.pb-3 { padding-bottom: var(--variable-3); }
.pb-4 { padding-bottom: var(--variable-4); }
.pb-5 { padding-bottom: var(--variable-5); }
.pb-xs { padding-bottom: var(--variable-xs); }
.pb-sm { padding-bottom: var(--variable-sm); }
.pb-md { padding-bottom: var(--variable-md); }
.pb-lg { padding-bottom: var(--variable-lg); }
.pb-xl { padding-bottom: var(--variable-xl); }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: var(--variable-1); }
.pl-2 { padding-left: var(--variable-2); }
.pl-3 { padding-left: var(--variable-3); }
.pl-4 { padding-left: var(--variable-4); }
.pl-5 { padding-left: var(--variable-5); }
.pl-xs { padding-left: var(--variable-xs); }
.pl-sm { padding-left: var(--variable-sm); }
.pl-md { padding-left: var(--variable-md); }
.pl-lg { padding-left: var(--variable-lg); }
.pl-xl { padding-left: var(--variable-xl); }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--variable-1); }
.pr-2 { padding-right: var(--variable-2); }
.pr-3 { padding-right: var(--variable-3); }
.pr-4 { padding-right: var(--variable-4); }
.pr-5 { padding-right: var(--variable-5); }
.pr-xs { padding-right: var(--variable-xs); }
.pr-sm { padding-right: var(--variable-sm); }
.pr-md { padding-right: var(--variable-md); }
.pr-lg { padding-right: var(--variable-lg); }
.pr-xl { padding-right: var(--variable-xl); }
.p-footer { padding-bottom: calc(var(--variable-2) + var(--h-footer))}
.p-icon   { padding-left: 30px !important;}

.rounded-0 { border-radius: 0 !important; }
.rounded-1 { border-radius: var(--variable-1); }
.rounded-2 { border-radius: var(--variable-2); }
.rounded-3 { border-radius: var(--variable-3); }
.rounded-4 { border-radius: var(--variable-4); }
.rounded-5 { border-radius: var(--variable-5); }
.rounded-xs { border-radius:  2px; }
.rounded-sm { border-radius:  5px; }
.rounded    { border-radius: 10px; }
.rounded-lg { border-radius: 20px; }
.rounded-xl { border-radius: 50%; }

.rounded-tl-0 { border-top-left-radius:     0 !important; }
.rounded-tr-0 { border-top-right-radius:    0 !important; }
.rounded-bl-0 { border-bottom-left-radius:  0 !important; }
.rounded-br-0 { border-bottom-right-radius: 0 !important; }


.border-color-white     { border: 1px solid var(--color-white); }
.border-color-darkwhite { border: 1px solid var(--color-darkwhite); }
.border-color-lightgrey { border: 1px solid var(--color-lightgrey); }
.border-color-grey      { border: 1px solid var(--color-grey); }
.border-color-darkgrey  { border: 1px solid var(--color-darkgrey); }
.border-color-black     { border: 1px solid var(--color-black); }
.border-color-main      { border: 1px solid var(--color-main); }
.border-color-secondary { border: 1px solid var(--color-secondary); }
.border-color-info      { border: 1px solid var(--color-info); }
.border-color-warning   { border: 1px solid var(--color-warning); }
.border-color-success   { border: 1px solid var(--color-success); }
.border-color-danger    { border: 1px solid var(--color-danger); }
.border-color-lightblue { border: 1px solid var(--color-lightblue); }
.border-color-brown     { border: 1px solid var(--color-brown); }
.border-color-yellow    { border: 1px solid var(--color-yellow); }

.border-t-none { border-top:    none; }
.border-b-none { border-bottom: none; }
.border-y-none { border-top:    none !important; border-bottom: none !important; }
.border-l-none { border-left:   none; }
.border-r-none { border-right:  none; }
.border-x-none { border-left:   none !important; border-right: none !important; }
.border-none   { border: none; }

.border-2px { border-width: 2px; }



/* MARGINS */
.m-0   { margin: 0 !important; }
.m-1   { margin: var(--variable-1); }
.m-2   { margin: var(--variable-2); }
.m-3   { margin: var(--variable-3); }
.m-4   { margin: var(--variable-4); }
.m-5   { margin: var(--variable-5); }
.m-xs  { margin: var(--variable-xs); }
.m-sm  { margin: var(--variable-sm); }
.m-md  { margin: var(--variable-md); }
.m-lg  { margin: var(--variable-lg); }
.m-xl  { margin: var(--variable-xl); }
.mx-1  { margin-left: var(--variable-1); margin-right: var(--variable-1); }
.mx-2  { margin-left: var(--variable-2); margin-right: var(--variable-2); }
.mx-3  { margin-left: var(--variable-3); margin-right: var(--variable-3); }
.mx-4  { margin-left: var(--variable-4); margin-right: var(--variable-4); }
.mx-5  { margin-left: var(--variable-5); margin-right: var(--variable-5); }
.mx-xs { margin-left: var(--variable-xs); margin-right: var(--variable-xs); }
.mx-sm { margin-left: var(--variable-sm); margin-right: var(--variable-sm); }
.mx-md { margin-left: var(--variable-md); margin-right: var(--variable-md); }
.mx-lg { margin-left: var(--variable-lg); margin-right: var(--variable-lg); }
.mx-xl { margin-left: var(--variable-xl); margin-right: var(--variable-xl); }
.my-1  { margin-top: var(--variable-1); margin-bottom: var(--variable-1); }
.my-2  { margin-top: var(--variable-2); margin-bottom: var(--variable-2); }
.my-3  { margin-top: var(--variable-3); margin-bottom: var(--variable-3); }
.my-4  { margin-top: var(--variable-4); margin-bottom: var(--variable-4); }
.my-5  { margin-top: var(--variable-5); margin-bottom: var(--variable-5); }
.my-xs { margin-top: var(--variable-xs); margin-bottom: var(--variable-xs); }
.my-sm { margin-top: var(--variable-sm); margin-bottom: var(--variable-sm); }
.my-md { margin-top: var(--variable-md); margin-bottom: var(--variable-md); }
.my-lg { margin-top: var(--variable-lg); margin-bottom: var(--variable-lg); }
.my-xl { margin-top: var(--variable-xl); margin-bottom: var(--variable-xl); }
.mt-0  { margin-top: 0 !important; }
.mt-auto  { margin-top: auto; }
.mt-1  { margin-top: var(--variable-1); }
.mt-5px  { margin-top: 5px; }
.mt-15px  { margin-top: 15px; }
.-mt-1 { margin-top: -1rem; }
.mt-2  { margin-top: var(--variable-2); }
.mt-3  { margin-top: var(--variable-3); }
.mt-4  { margin-top: var(--variable-4); }
.mt-5  { margin-top: var(--variable-5); }
.mt-xs { margin-top: var(--variable-xs); }
.mt-sm { margin-top: var(--variable-sm); }
.mt-md { margin-top: var(--variable-md); }
.mt-lg { margin-top: var(--variable-lg); }
.mt-xl { margin-top: var(--variable-xl); }
.mb-0  { margin-bottom: 0 !important; }
.mb-auto  { margin-bottom: auto; }
.mb-1  { margin-bottom: var(--variable-1); }
.mb-2  { margin-bottom: var(--variable-2); }
.mb-3  { margin-bottom: var(--variable-3); }
.mb-4  { margin-bottom: var(--variable-4); }
.mb-5  { margin-bottom: var(--variable-5); }
.mb-xs { margin-bottom: var(--variable-xs); }
.mb-sm { margin-bottom: var(--variable-sm); }
.mb-md { margin-bottom: var(--variable-md); }
.mb-lg { margin-bottom: var(--variable-lg); }
.mb-xl { margin-bottom: var(--variable-xl); }
.mb-footer { margin-bottom: var(--h-footer); }
.ml-0  { margin-left: 0 !important; }
.ml-auto  { margin-left: auto; }
.ml-1  { margin-left: var(--variable-1); }
.ml-2  { margin-left: var(--variable-2); }
.ml-3  { margin-left: var(--variable-3); }
.ml-4  { margin-left: var(--variable-4); }
.ml-5  { margin-left: var(--variable-5); }
.mr-0  { margin-right: 0 !important; }
.mr-auto  { margin-right: auto; }
.mr-1  { margin-right: var(--variable-1); }
.mr-2  { margin-right: var(--variable-2); }
.mr-3  { margin-right: var(--variable-3); }
.mr-4  { margin-right: var(--variable-4); }
.mr-5  { margin-right: var(--variable-5); }

/* Z-INDEX */
.z-10             { z-index: 10; }
.z-20             { z-index: 20; }
.z-30             { z-index: 30; }
.z-40             { z-index: 40; }
.z-50             { z-index: 50; }
.z-60             { z-index: 60; }
.z-70             { z-index: 70; }
.z-80             { z-index: 80; }
.z-90             { z-index: 90; }
.z-modal          { z-index: 1051; }
.z-modal-1        { z-index: 1052; }
.z-launchpad      { z-index: 1055; }
.z-aside-backdrop { z-index: 1056; }
.z-aside          { z-index: 1057; }
.z-header         { z-index: 1058; }
.z-swalbackdrop   { z-index: 1059; }
.z-preloader      { z-index: 1060; }
.z-cookies        { z-index: 2000; }


/* FONT SIZE */
.font-xs  { font-size: var(--font-xs); }
.font-sm  { font-size: var(--font-sm); }
.font-md  { font-size: var(--font-md); }
.font-lg  { font-size: var(--font-lg); }
.font-xl  { font-size: var(--font-xl); }
.font-xxl { font-size: var(--font-xxl); }

.font-1px { font-size: 1px; }
.font-2px { font-size: 2px; }
.font-3px { font-size: 3px; }
.font-4px { font-size: 4px; }
.font-5px { font-size: 5px; }
.font-6px { font-size: 6px; }
.font-7px { font-size: 7px; }
.font-8px { font-size: 8px; }
.font-9px { font-size: 9px; }
.font-10px { font-size: 10px; }
.font-11px { font-size: 11px; }
.font-12px { font-size: 12px; }
.font-13px { font-size: 13px; }
.font-14px { font-size: 14px; }
.font-15px { font-size: 15px; }
.font-16px { font-size: 16px; }
.font-17px { font-size: 17px; }
.font-18px { font-size: 18px; }
.font-19px { font-size: 19px; }
.font-10px { font-size: 20px; }

.font-oswald { font-family: Oswald, serif !important; }


/* BACKGROUNDS */
.bg-white           { background: var(--color-white);                 color: var(--color-darkgrey); }
.bg-darkwhite       { background: var(--color-darkwhite);             color: var(--color-darkgrey); }
.bg-lightgrey       { background: var(--color-lightgrey) !important;  color: var(--color-darkgrey); }
.bg-grey            { background: var(--color-grey) !important;       color: var(--color-darkgrey); }
.bg-darkgrey        { background: var(--color-darkgrey);              color: var(--color-white); }
.bg-black           { background: var(--color-black);                 color: var(--color-white); }
.bg-main            { background: var(--color-main);                  color: var(--color-white); }
.bg-lightmain       { background: var(--color-lightmain);             color: var(--color-darkgrey); }
.bg-secondary       { background: var(--color-secondary);             color: var(--color-white); }
.bg-lightsecondary  { background: var(--color-lightsecondary);        color: var(--color-darkgrey); }
.bg-info            { background: var(--color-info);                  color: var(--color-white); }
.bg-warning         { background: var(--color-warning);               color: var(--color-white); }
.bg-success         { background: var(--color-success);               color: var(--color-white); }
.bg-danger          { background: var(--color-danger);                color: var(--color-white); }
.bg-danger2         { background: var(--color-danger);                color: var(--color-white); }
.bg-lightblue       { background: var(--color-lightblue);             color: var(--color-darkgrey); }
.bg-brown           { background: var(--color-brown);                 color: var(--color-white); }
.bg-yellow          { background: var(--color-yellow);                color: var(--color-white); }
.bg-none            { background: none;                               color: inherit; }

.bg-lightsuccess {background: var(--color-lightsuccess);        color: var(--color-darkgrey)}
.bg-lightdanger  {background: var(--color-lightdanger);         color: var(--color-darkgrey)}

.bg-transparent     { background: transparent; }

.bg-transparent-brown       { background-color: rgba(var(--color-brown-rgb), 0.1)}
.bg-transparent-danger      { background-color: rgba(var(--color-danger-rgb), 0.1)}
.bg-transparent-secondary   { background-color: rgba(var(--color-secondary-rgb), 0.1)}
.bg-transparent-success     { background-color: rgba(var(--color-success-rgb), 0.1)}
.bg-transparent-warning     { background-color: rgba(var(--color-warning-rgb), 0.1)}

.bg-linear-main         { background: linear-gradient(90deg, rgba(var(--color-main-rgb), 1)      0%, rgba(var(--color-main-rgb), 1)      50%, rgba(var(--color-main-rgb), 0.7)      100%); color: var(--color-white); }
.bg-linear-main-45      { background: linear-gradient(45deg, rgba(var(--color-main-rgb), 1)      0%, 50%, rgba(var(--color-main-rgb), 0.7)      100%); color: var(--color-white); }
.bg-linear-lightmain-45 { background: linear-gradient(45deg, rgba(var(--color-lightmain-rgb), 1) 0%, 50%, rgba(var(--color-lightmain-rgb), 0.7) 100%); color: var(--color-white); }
.bg-linear-danger-45    { background: linear-gradient(45deg, rgba(var(--color-danger-rgb), 1)    0%, 50%, rgba(var(--color-danger-rgb), 0.5)    100%); color: var(--color-white); }
.bg-linear-secondary-45 { background: linear-gradient(45deg, rgba(var(--color-secondary-rgb), 1) 0%, 50%, rgba(var(--color-secondary-rgb), 0.7) 100%); color: var(--color-white); }
.bg-linear-grey-45      { background: linear-gradient(45deg, rgba(var(--color-grey-rgb), 1)      0%, 50%, rgba(var(--color-grey-rgb), 0.7)      100%); color: var(--color-white); }
.bg-linear-lightgrey-45 { background: linear-gradient(45deg, rgba(var(--color-lightgrey-rgb), 1) 0%, 50%, rgba(var(--color-lightgrey-rgb), 0.7) 100%); color: var(--color-darkgrey); }
.bg-linear-darkgrey-45  { background: linear-gradient(45deg, rgba(var(--color-darkgrey-rgb), 1)  0%, 50%, rgba(var(--color-darkgrey-rgb), 0.7)  100%); color: var(--color-white); }

.hover-bg-white:hover     { background: var(--color-white);                 color: var(--color-darkgrey); }
.hover-bg-darkwhite:hover { background: var(--color-darkwhite);             color: var(--color-darkgrey); }
.hover-bg-lightgrey:hover { background: var(--color-lightgrey) !important;  color: var(--color-darkgrey); }
.hover-bg-grey:hover      { background: var(--color-grey) !important;       color: var(--color-darkgrey); }
.hover-bg-darkgrey:hover  { background: var(--color-darkgrey);              color: var(--color-white); }
.hover-bg-black:hover     { background: var(--color-black);                 color: var(--color-white); }
.hover-bg-main:hover      { background: var(--color-main);                  color: var(--color-white); }
.hover-bg-lightmain:hover { background: var(--color-lightmain);             color: var(--color-main); }
.hover-bg-secondary:hover { background: var(--color-secondary);             color: var(--color-white); }
.hover-bg-info:hover      { background: var(--color-info);                  color: var(--color-white); }
.hover-bg-warning:hover   { background: var(--color-warning);               color: var(--color-white); }
.hover-bg-success:hover   { background: var(--color-success);               color: var(--color-white); }
.hover-bg-danger:hover    { background: var(--color-danger);                color: var(--color-white); }
.hover-bg-lightblue:hover { background: var(--color-lightblue);             color: var(--color-darkgrey); }

.hover-bg-linear-main:hover { background: linear-gradient(90deg, rgba(var(--color-main-rgb), 1) 0%, rgba(var(--color-main-rgb), 1) 50%, rgba(var(--color-main-rgb), 0.5) 100%); color: var(--color-white); }

.hover-bg-white     { transition: background .5s }
.hover-bg-darkwhite { transition: background .5s }
.hover-bg-lightgrey { transition: background .5s }
.hover-bg-grey      { transition: background .5s }
.hover-bg-darkgrey  { transition: background .5s }
.hover-bg-black     { transition: background .5s }
.hover-bg-main      { transition: background .5s }
.hover-bg-lightmain { transition: background .5s }
.hover-bg-secondary { transition: background .5s }
.hover-bg-info      { transition: background .5s }
.hover-bg-warning   { transition: background .5s }
.hover-bg-success   { transition: background .5s }
.hover-bg-danger    { transition: background .5s }
.hover-bg-lightblue { transition: background .5s }
.hover-bg-linear-main { transition: background .5s }


/* COLORES */
.color-white     { color: var(--color-white); }
.color-darkwhite { color: var(--color-darkwhite); }
.color-lightgrey { color: var(--color-lightgrey); }
.color-grey      { color: var(--color-grey); }
.color-darkgrey  { color: var(--color-darkgrey); }
.color-black     { color: var(--color-black); }
.color-main      { color: var(--color-main); }
.color-lightmain { color: var(--color-lightmain); }
.color-secondary { color: var(--color-secondary); }
.color-info      { color: var(--color-info); }
.color-warning   { color: var(--color-warning); }
.color-success   { color: var(--color-success); }
.color-danger    { color: var(--color-danger); }
.color-lightblue { color: var(--color-lightblue); }
.color-brown     { color: var(--color-brown); }
.color-yellow    { color: var(--color-yellow); }

.hover-color-white:hover     { color: var(--color-white); }
.hover-color-darkwhite:hover { color: var(--color-darkwhite); }
.hover-color-lightgrey:hover { color: var(--color-lightgrey); }
.hover-color-grey:hover      { color: var(--color-grey); }
.hover-color-darkgrey:hover  { color: var(--color-darkgrey); }
.hover-color-black:hover     { color: var(--color-black); }
.hover-color-main:hover      { color: var(--color-main); }
.hover-color-secondary:hover { color: var(--color-secondary); }
.hover-color-info:hover      { color: var(--color-info); }
.hover-color-warning:hover   { color: var(--color-warning); }
.hover-color-success:hover   { color: var(--color-success); }
.hover-color-danger:hover    { color: var(--color-danger); }
.hover-color-lightblue:hover { color: var(--color-lightblue); }
.hover-color-brown:hover     { color: var(--color-brown); }
.hover-color-yellow:hover    { color: var(--color-yellow); }



/* FONT SIZE */



.line-0 { line-height: 0; }


.bg-blur {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}
.bg-blur-sm {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bg-blur-dark {
    background-color: rgba(100, 100, 100, 0.8);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.aspect-1 { aspect-ratio: 1; }

.shadow { box-shadow: 0 0 10px var(--color-lightgrey); }
.hover-shadow-main:hover { box-shadow: 0 0 10px var(--color-main); }
.no-shadow { box-shadow: none !important; }


/* CURSORS */
.cursor-pointer { cursor: pointer; }

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

.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-scroll   { overflow: scroll; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }
.overflow-hidden   { overflow: hidden; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }

.transition-all-1 { transition: all 0.1s ease; }
.transition-all-2 { transition: all 0.2s ease; }
.transition-all-3 { transition: all 0.3s ease; }
.transition-all-4 { transition: all 0.4s ease; }
.transition-all-5 { transition: all 0.5s ease; }

.opacity-0  { opacity: 0.0; }
.opacity-1  { opacity: 0.1; }
.opacity-2  { opacity: 0.2; }
.opacity-3  { opacity: 0.3; }
.opacity-4  { opacity: 0.4; }
.opacity-5  { opacity: 0.5; }
.opacity-6  { opacity: 0.6; }
.opacity-7  { opacity: 0.7; }
.opacity-8  { opacity: 0.8; }
.opacity-9  { opacity: 0.9; }
.opacity-10 { opacity: 1.0; }

.bg-opacity-0  { filter: opacity(0.0); }
.bg-opacity-1  { filter: opacity(0.1); }
.bg-opacity-2  { filter: opacity(0.2); }
.bg-opacity-3  { filter: opacity(0.3); }
.bg-opacity-4  { filter: opacity(0.4); }
.bg-opacity-5  { filter: opacity(0.5); }
.bg-opacity-6  { filter: opacity(0.6); }
.bg-opacity-7  { filter: opacity(0.7); }
.bg-opacity-8  { filter: opacity(0.8); }
.bg-opacity-9  { filter: opacity(0.9); }
.bg-opacity-10 { filter: opacity(1.0); }

.hover-bg-opacity-0:hover  { filter: opacity(0.0); }
.hover-bg-opacity-1:hover  { filter: opacity(0.1); }
.hover-bg-opacity-2:hover  { filter: opacity(0.2); }
.hover-bg-opacity-3:hover  { filter: opacity(0.3); }
.hover-bg-opacity-4:hover  { filter: opacity(0.4); }
.hover-bg-opacity-5:hover  { filter: opacity(0.5); }
.hover-bg-opacity-6:hover  { filter: opacity(0.6); }
.hover-bg-opacity-7:hover  { filter: opacity(0.7); }
.hover-bg-opacity-8:hover  { filter: opacity(0.8); }
.hover-bg-opacity-9:hover  { filter: opacity(0.9); }
.hover-bg-opacity-10:hover { filter: opacity(1.0); }

.rotate-45  { rotate: 45deg; }

.text-nowrap    { text-wrap: nowrap; }
.flex-nowrap    { flex-wrap: nowrap; }
.flex-wrap      { flex-wrap: wrap; }
.text-ellipsis  { text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden; }
.text-underline { text-decoration: underline }

.text-md        {font-size: 16px}

.bold           { font-weight: bold; }
.bolder         { font-weight: bolder; }
.text-underline { text-decoration: underline; }

@media (min-width: 767px){
    .pc-hidden { display: none !important; }
    .pc-h-200px     { height: 200px; }
}
@media (max-width: 1500px) {
    .por-w-100 { width: calc(100%); }
    .por-w-50  { width: calc( 50% - var(--offset-w)); }
    .por-hidden { display: none !important; }
    .por-shown  { display: block !important; }
}
@media (max-height: 700px) {
    .landscape-hidden {
        display: none !important;
    }
}
@media (max-width: 929px) {
    .tab-hidden {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .mov-hidden { display: none !important; }
    .mov-font { font-size: 15px !important; }
    .mov-font-m { font-size: 12px !important; }
    .mov-font-xs { font-size: 9px !important; }
    .mov-font-xs *:not(.mov-title) { font-size: 9px !important; }
    .mov-font-m *:not(.mov-title) { font-size: 12px !important; }
    .mov-font *:not(.mov-title) { font-size: 15px !important; }
    .mov-flex { display: flex !important; }
    .mov-block { display: block !important; }
    .mov-col { flex-direction: column !important; }
    .mov-flex-nowrap { flex-wrap: nowrap; }

    .mov-items-start { align-items: start; }

    .mov-px-2 { padding-left: var(--variable-2) !important; padding-right: var(--variable-2) !important; }
    .mov-w-100 { width: calc(100%); }
    .mov-w-95  { width: calc( 95% - var(--offset-w)); }
    .mov-w-90  { width: calc( 90% - var(--offset-w)); }
    .mov-w-85  { width: calc( 85% - var(--offset-w)); }
    .mov-w-80  { width: calc( 80% - var(--offset-w)); }
    .mov-w-75  { width: calc( 75% - var(--offset-w)); }
    .mov-w-70  { width: calc( 70% - var(--offset-w)); }
    .mov-w-66  { width: calc( calc(500%/3) - var(--offset-w)); }
    .mov-w-65  { width: calc( 65% - var(--offset-w)); }
    .mov-w-60  { width: calc( 60% - var(--offset-w)); }
    .mov-w-55  { width: calc( 55% - var(--offset-w)); }
    .mov-w-50  { width: calc( 50% - var(--offset-w)); }
    .mov-w-45  { width: calc( 45% - var(--offset-w)); }
    .mov-w-40  { width: calc( 40% - var(--offset-w)); }
    .mov-w-35  { width: calc( 35% - var(--offset-w)); }
    .mov-w-33  { width: calc( calc(100%/3) - var(--offset-w)); }
    .mov-w-30  { width: calc( 30% - var(--offset-w)); }
    .mov-w-25  { width: calc( 25% - var(--offset-w)); }
    .mov-w-20  { width: calc( 20% - var(--offset-w)); }
    .mov-w-15  { width: calc( 15% - var(--offset-w)); }
    .mov-w-12  { width: calc( 12% - var(--offset-w)); }
    .mov-w-10  { width: calc( 10% - var(--offset-w)); }
    .mov-w-7_5 { width: calc(7.5% - var(--offset-w)); }
    .mov-w-5   { width: calc(  5% - var(--offset-w)); }

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

    .mov-p-0  { padding: 0 !important; }
    .mov-p-1  { padding: var(--variable-1); }
    .mov-p-2  { padding: var(--variable-2); }
    .mov-p-3  { padding: var(--variable-3); }
    .mov-p-4  { padding: var(--variable-4); }
    .mov-p-5  { padding: var(--variable-5); }
    .mov-px-1 { padding-left: var(--variable-1); padding-right: var(--variable-1); }
    .mov-px-2 { padding-left: var(--variable-2); padding-right: var(--variable-2); }
    .mov-px-3 { padding-left: var(--variable-3); padding-right: var(--variable-3); }
    .mov-px-4 { padding-left: var(--variable-4); padding-right: var(--variable-4); }
    .mov-px-5 { padding-left: var(--variable-5); padding-right: var(--variable-5); }
    .mov-py-0 { padding-top: 0.0rem; padding-bottom: 0.0rem; }
    .mov-py-1 { padding-top: var(--variable-1); padding-bottom: var(--variable-1); }
    .mov-py-2 { padding-top: var(--variable-2); padding-bottom: var(--variable-2); }
    .mov-py-3 { padding-top: var(--variable-3); padding-bottom: var(--variable-3); }
    .mov-py-4 { padding-top: var(--variable-4); padding-bottom: var(--variable-4); }
    .mov-py-5 { padding-top: var(--variable-5); padding-bottom: var(--variable-5); }
    .mov-pt-0 { padding-top: 0 !important; }
    .mov-pt-1 { padding-top: var(--variable-1); }
    .mov-pt-2 { padding-top: var(--variable-2); }
    .mov-pt-3 { padding-top: var(--variable-3); }
    .mov-pt-4 { padding-top: var(--variable-4); }
    .mov-pt-5 { padding-top: var(--variable-5); }
    .mov-pb-0 { padding-bottom: 0 !important; }
    .mov-pb-1 { padding-bottom: var(--variable-1); }
    .mov-pb-2 { padding-bottom: var(--variable-2); }
    .mov-pb-3 { padding-bottom: var(--variable-3); }
    .mov-pb-4 { padding-bottom: var(--variable-4); }
    .mov-pb-5 { padding-bottom: var(--variable-5); }
    .mov-pl-0 { padding-left: 0 !important; }
    .mov-pl-1 { padding-left: var(--variable-1); }
    .mov-pl-2 { padding-left: var(--variable-2); }
    .mov-pl-3 { padding-left: var(--variable-3); }
    .mov-pl-4 { padding-left: var(--variable-4); }
    .mov-pl-5 { padding-left: var(--variable-5); }
    .mov-pr-0 { padding-right: 0 !important; }
    .mov-pr-1 { padding-right: var(--variable-1); }
    .mov-pr-2 { padding-right: var(--variable-2); }
    .mov-pr-3 { padding-right: var(--variable-3); }
    .mov-pr-4 { padding-right: var(--variable-4); }
    .mov-pr-5 { padding-right: var(--variable-5); }

    /* MARGINS */
    .mov-m-0   { margin: 0 !important; }
    .mov-m-1   { margin: var(--variable-1); }
    .mov-m-2   { margin: var(--variable-2); }
    .mov-m-3   { margin: var(--variable-3); }
    .mov-m-4   { margin: var(--variable-4); }
    .mov-m-5   { margin: var(--variable-5); }
    .mov-mx-1  { margin-left: var(--variable-1); margin-right: var(--variable-1); }
    .mov-mx-2  { margin-left: var(--variable-2); margin-right: var(--variable-2); }
    .mov-mx-3  { margin-left: var(--variable-3); margin-right: var(--variable-3); }
    .mov-mx-4  { margin-left: var(--variable-4); margin-right: var(--variable-4); }
    .mov-mx-5  { margin-left: var(--variable-5); margin-right: var(--variable-5); }
    .mov-my-1  { margin-top: var(--variable-1); margin-bottom: var(--variable-1); }
    .mov-my-2  { margin-top: var(--variable-2); margin-bottom: var(--variable-2); }
    .mov-my-3  { margin-top: var(--variable-3); margin-bottom: var(--variable-3); }
    .mov-my-4  { margin-top: var(--variable-4); margin-bottom: var(--variable-4); }
    .mov-my-5  { margin-top: var(--variable-5); margin-bottom: var(--variable-5); }
    .mov-mt-0  { margin-top: 0 !important; }
    .mov-mt-1  { margin-top: var(--variable-1); }
    .mov--mt-1 { margin-top: -1rem; }
    .mov-mt-2  { margin-top: var(--variable-2); }
    .mov-mt-3  { margin-top: var(--variable-3); }
    .mov-mt-4  { margin-top: var(--variable-4); }
    .mov-mt-5  { margin-top: var(--variable-5); }
    .mov-mb-0  { margin-bottom: 0 !important; }
    .mov-mb-1  { margin-bottom: var(--variable-1); }
    .mov-mb-2  { margin-bottom: var(--variable-2); }
    .mov-mb-3  { margin-bottom: var(--variable-3); }
    .mov-mb-4  { margin-bottom: var(--variable-4); }
    .mov-mb-5  { margin-bottom: var(--variable-5); }
    .mov-ml-0  { margin-left: 0 !important; }
    .mov-ml-1  { margin-left: var(--variable-1); }
    .mov-ml-2  { margin-left: var(--variable-2); }
    .mov-ml-3  { margin-left: var(--variable-3); }
    .mov-ml-4  { margin-left: var(--variable-4); }
    .mov-ml-5  { margin-left: var(--variable-5); }
    .mov-mr-0  { margin-right: 0 !important; }
    .mov-mr-1  { margin-right: var(--variable-1); }
    .mov-mr-2  { margin-right: var(--variable-2); }
    .mov-mr-3  { margin-right: var(--variable-3); }
    .mov-mr-4  { margin-right: var(--variable-4); }
    .mov-mr-5  { margin-right: var(--variable-5); }

    .mov-text-nowrap { text-wrap: nowrap; }

    .mov-flex-row-reverse { flex-direction: row-reverse; }
}

.transform-50-right{
    transform: translateX(50%);
}
.transform-50-left{
    transform: translateX(-50%);
}
.transform-50-up{
    transform: translateY(-50%);
}
.transform-50-down{
    transform: translateY(50%);
}

.events-none{
    pointer-events: none;
}

/**Imagenes**/

.object-cover    { object-fit: cover; }
.object-contain  { object-fit: contain; }