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

 

body {
  
    line-height: 1.8;
}

/* headers */
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw);
}

.h2,
h2 {
    font-size: calc(1.325rem + .9vw);
}

.h3,
h3 {
    font-size: calc(1.3rem + .6vw);
}

.h4,
h4 {
    font-size: calc(1.275rem + .3vw);
}

.h5,
h5 {
    font-size: 1.25rem;
}

.h6,
h6 {
    font-size: 1rem;
}

/* end headers */


/* container */
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {

    .container,
    .container-sm {
        max-width: 540px;
    }

}

@media (min-width: 768px) {

    .container,
    .container-md,
    .container-sm {
        max-width: 720px;
    }

}

@media (min-width: 992px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px;
    }
}

/* end container */
/* utilys */
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    margin-bottom: 1rem;
}


.mt-0,
.my-0 {
    margin-top: 0rem !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.ml-0,
.mx-0 {
    margin-left: 0rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important;
}

.mr-0,
.mx-0 {
    margin-right: 0rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important;
}

.pt-0,
.py-0 {
    padding-top: 0rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important;
}

.pt-5,
.py-5 {
    padding-top: 3rem !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important;
}

.pl-0,
.mx-0 {
    padding-left: 0.25rem !important;
}

.pl-1,
.mx-1 {
    padding-left: 0.25rem !important;
}

.pl-2,
.mx-2 {
    padding-left: 0.5rem !important;
}

.pl-3,
.mx-3 {
    padding-left: 1rem !important;
}

.pl-4,
.mx-4 {
    padding-left: 1.5rem !important;
}

.pl-5,
.mx-5 {
    padding-left: 3rem !important;
}

.pr-0,
.mx-0 {
    padding-right: 0.25rem !important;
}

.pr-1,
.mx-1 {
    padding-right: 0.25rem !important;
}

.pr-2,
.mx-2 {
    padding-right: 0.5rem !important;
}

.pr-3,
.mx-3 {
    padding-right: 1rem !important;
}

.pr-4,
.mx-4 {
    padding-right: 1.5rem !important;
}

.pr-5,
.mx-5 {
    padding-right: 3rem !important;
}

@media (min-width: 768px) {

    .mt-md-0,
    .my-md-0 {
        margin-top: 0 !important;
    }
}

@media (min-width: 768px) {

    .pt-md-0,
    .py-md-0 {
        padding-top: 0 !important;
    }
}

@media (min-width: 992px) {

    .mt-lg-0,
    .my-lg-0 {
        margin-top: 0 !important;
    }
}

@media (min-width: 992px) {

    .pt-lg-0,
    .py-lg-0 {
        padding-top: 0 !important;
    }
}

.overflow-hidden {
    overflow: hidden;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

.text-responsive {
    text-align: justify;
}

.text-weight-100 {
    font-weight: 100;
}

.text-weight-italic-100 {
    font-weight: 100;
    font-style: italic;
}

.text-weight-200 {
    font-weight: 200;
}

.text-weight-italic-200 {
    font-weight: 200;
    font-style: italic;
}

.text-weight-300 {
    font-weight: 300;
}

.text-weight-italic-300 {
    font-weight: 300;
    font-style: italic;
}

.text-weight-500 {
    font-weight: 500;
}

.text-weight-italic-500 {
    font-weight: 500;
    font-style: italic;
}

.text-bold {
    font-weight: bold;
}

.text-extra-bold {
    font-weight: 800;
}

.text-extra-bold-italic {
    font-weight: 800;
    font-style: italic;
}

.text-cursive {
    font-style: italic;
}

@media(max-width:576px) {
    .text-responsive {
        text-align: left !important;
    }
}

.text-uppercase {
    text-transform: uppercase;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

.first-letter::first-letter {
    text-transform: uppercase;
}

.text-wrap-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* end utilys */

/* grid */
.grid {
    display: grid;
    width: 100%;
}

.grid-col-300 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-col-200 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-center {
    display: grid;
    place-content: center;
}

.full {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.relative {
    position: relative !important;
}

/* end grid */


/* flex */
.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100%;
}
.d-block {
    display: block !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-fill {
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
}

.flex-grow-1 {
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}

.flex-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
}

.flex-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.flex-row-reverse {
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
}

.justify-content-start {
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}

.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-between {
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}

.align-items-start {
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.align-items-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.align-items-stretch {
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

.align-self-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
}

.align-self-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
}

.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
}

.align-self-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
}

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.media-body {
    -ms-flex: 1;
    flex: 1;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

/* end flex */

/* cards */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: var(--card);
    background-clip: border-box;
    border: var(--border-card);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: .8rem;
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom,
.card-img-top {
    flex-shrink: 0;
    width: 100%;
}

.card-footer {
    padding: 0.75rem 1.5rem;
    background-color: rgba(0, 0, 0, .03);
    border-top: var(--color-border-card);
}

.card-footer {
    background-color: hsla(0, 0%, 100%, 0);
}

.card-footer:last-child {
    border-radius: 0 0 calc(0.5rem - 1px) calc(0.5rem - 1px);
}

/* end cards */


/* aspect ratio without child position absolute */
.aspec-ratio {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
}

.ratio_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* Videos */
.ratio16x9 {
    padding-top: calc(100% / (16/9));
}

.ratio4x3 {
    padding-top: calc(100% / (4/3));
}

.ratio14x6 {
    padding-top: calc(100% / (14/6));
}

.ratio21x9 {
    padding-top: calc(100% / (21/9));
}


/* redes sociales */
.ratio1x1 {
    padding-top: 100%;
}

.ratio4x5 {
    padding-top: calc(100% / (4/5));
}


/* fotos */
.ratio3x2 {
    padding-top: calc(100% / (3/2));
}

.ratio9x16 {
    padding-top: calc(100% / (9/16));
}

.ratio2x3 {
    padding-top: calc(100% / (2/3));
}

.ratio8x5 {
    padding-top: calc(100% / (8/5));
}

.ratio3x4 {
    padding-top: calc(100% / (3/4));
}

.ratio5x8 {
    padding-top: calc(100% / (5/8));
}

/* banners */

.ratio3x1 {
    padding-top: calc(100% / (3/1));
}

.ratio2x1 {
    padding-top: calc(100% / (2/1));
}

.ratio32x5 {
    padding-top: calc(100% / (32/5));
}



/* aspect ratio without child  position relative */
.ratio {
    position: relative;
}

.ratio:before {
    display: block;
    padding-top: var(--mdb-aspect-ratio);
    content: "";
}

.ratio-1x1 {
    --mdb-aspect-ratio: 100%;
}

.ratio-4x3 {
    --mdb-aspect-ratio: 75%;
}

.ratio-16x9 {
    --mdb-aspect-ratio: 56.25%;
}

.ratio-21x9 {
    --mdb-aspect-ratio: 42.86%;
}

.img-fluid,
.img-thumbnail {
    max-width: 100%;
    height: auto;
}




@media screen and (min-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 1) {

    /* width */
    ::-webkit-scrollbar {
        width: 10px;

    }

    /* Track */
    ::-webkit-scrollbar-track {
        background-color: var(--track);
        border-radius: 10px;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: var(--thumb-focus);
        border-radius: 10px;
        border-right: 2px solid var(--track);
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: rgb(15, 117, 200);
    }


}


.zoom-image {
    cursor: pointer;
    transition: all 0.4s ease 0s;
}

.zoom-image:hover {
    transform: translate(-42px, 32px) scale(1.5);
}

.border-shadow-red {
    box-shadow: 2px 2px 11px 1px rgb(241 11 88 / 90%);
    border-radius: 1rem;
    border: 1px solid #e91e63;
}


/* animation skeleton */
.skeleton-box {
    display: inline-block;
    height: 1em;
    position: relative;
    overflow: hidden;
    background-color: #DDDBDD;

}

.skeleton-box::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
    -webkit-animation: shimmer 2s infinite;
    animation: shimmer 2s infinite;
    content: "";
}



@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}