* {
    font-family: cairo, sans-serif !important;
    text-align: center
}

#mi_video {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1
}

a {
    text-decoration: none !important
}

.flex-container {
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    margin-top: -8rem;
}

.flex-item {
    flex: 1
}

@media(max-width: 1023px) {
    .primer {
        margin-top: -20rem;
    }

    .despertar_d {
        font-size: small;
        color: rgb(0, 0, 0);
    }

    .despertar_i {
        font-size: small;
        color: rgb(0, 0, 0);
        margin-right: 3rem;
    }

    .tercer ´ {
        position: relative;
        padding: 3rem 3rem 8rem;
        background: radial-gradient(#ffffff, transparent);
        color: transparent;
        margin-bottom: -9rem;
    }

    /*
    .segon {
        position: relative;
        background: radial-gradient(#ffffff, transparent);
        color: #c29210;
        font-size: larger;
        text-align: justify;
    } */

    h4,
    .h4 {
        color: #958b7a;
        position: relative;
        padding: 0rem 3rem 0rem;
        background: radial-gradient(#00ffc5 40%, transparent 83%);
        font-size: medium;
        opacity: 0.2;
        transition: background 3s ease-in-out, color 3s ease-in-out, opacity 3s ease-in-out;
        z-index:1;
    }

    h4:hover,
    h4:active {
        background: radial-gradient(#00ffc5 40%, transparent 83%);
        color: #333333;
        opacity: 1 !important;
        z-index:1;
    }

    h4:not(:hover) {
        background: radial-gradient(#00ffc5 40%, transparent 83%);
        transition: background 3s ease-in-out, color 3s ease-in-out, opacity 3s ease-in-out;
        z-index:1;
    }

    p {
        position: relative;
        margin-bottom: 9rem;
        color: white;
        font-size: small;
        padding-left: 1rem;
        padding-right: 2rem;
        margin-top: -10rem;
    }

    img.precio0 {
        position: relative;
        left: 0rem;
        width: 100%;
    }

    .precio1 {
        background: 0 0;
        /* width: 103%; */
        position: relative;
        right: 3%;
        bottom: 6px;
    }

    .precio2 {
        background: 0 0;
        width: 22%;
        position: absolute;
        right: 4%;
        bottom: 16%
    }

    .indiv {
        position: relative;
        width: 90%;
        height: auto;
        margin-top: 1rem;
        border-radius: 10px
    }

    .grup {
        position: relative;
        width: 90%;
        height: auto;
        margin-top: 4rem;
        border-radius: 14px;
        z-index: -1;
    }

    button {
        border-color: currentColor;
        border-width: thin;
        text-transform: uppercase;
        border-radius: 10px;
        font-size: 30px;
        width: 41%;
        background: #ffffe0;
        white-space: pre-wrap;
        box-shadow: 0 0 27px 0px #00e694 !important;
        margin-bottom: 0rem;
        font-family: cairo, sans-serif !important;
        color: #00e694 !important;
        z-index: 9999999999999 !important;
        bottom: 85vw;
        position: relative;
        opacity: 1;
        right: 27%;
        padding: 0 !important;
    }

    h5 {
        color: #fff;
        background: linear-gradient(183deg, #00000073, #00000000);
        width: 90%;
        transform: translate(-50%);
        left: 50%;
        position: relative;
        font-size: x-small;
        border-radius: 12px 12px 0 0;
        padding: 3%;
        font-family: montserrat alternates, sans-serif !important;
        font-weight: 600 !important;
        text-align: justify;
        display: flex;
        padding-bottom: 3rem;
        margin-bottom: 0
    }

    h3 {
        color: #fff;
        background: linear-gradient(15deg, #81e3cabf, #60da5187);
        width: 90%;
        transform: translate(-50%);
        left: 50%;
        font-weight: 100 !important;
        border-radius: 12px;
        box-shadow: 0 0 15px 5px #fff;
        font-family: cairo, sans-serif !important;
        position: relative;
        top: -50vw;
        margin-bottom: -44vw;
        font-size: medium;
        padding: 3px;
    }

    .btn {
        color: #fff !important;
        background: #000;
        padding: 0rem 4.5rem 0rem 1rem;
        margin-bottom: 4rem;
        font-size: 19px;
        border-radius: 4px;
        box-shadow: 0 0 2px 2px #00ffa4;
        white-space: nowrap;
        margin-top: -5rem;
        z-index: 1000;
        position: relative;
        left: 25%;
        font-family: cairo, sans-serif !important
    }

    .tooltip-container {
        position: relative;
        display: inline-block
    }

    .tooltip-inner {
        position: absolute;
        top: 10rem !important;
        left: 50%;
        background: linear-gradient(104deg, #b8860be0 0%, #0000007e 100%);
        box-shadow: 0 0 9px 1px #ffd455;
        color: #fff;
        font-size: 3rem;
        border-radius: 10px;
        transform: translate(-50%);
        width: 80%;
        font-family: cairo, sans-serif !important
    }

    .gif-container {
        position: fixed;
        bottom: 0;
        right: -8%;
        width: 15rem;
        margin-right: 0 !important;
        z-index: 99999;
    }

    .gif-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .telegram-icono {
        width: 2rem;
    }

    .telegram-container {
        margin-top: -15rem;
    }

}

@media(min-width: 1024px) {
    .despertar_d {
        font-size: xxx-large;
        color: rgb(0, 0, 0);
    }

    .despertar_i {
        font-size: xxx-large;
        color: rgb(0, 0, 0);
        margin-right: 5rem;
    }

    .telegram-icono {
        width: 6rem;
    }

    p {
        position: relative;
        margin-bottom: 8rem;
        color: white;
        padding-left: 1rem;
        padding-right: 2rem;
        margin-top: -4rem;
    }

    h4,
    .h4 {
        color: #958b7a;
        position: relative;
        padding: 3rem 8rem 3rem;
        background: radial-gradient(#00ffc5 18%, transparent 68%);
        font-size: x-large;
        opacity: 0.2;
        transition: background 3s ease-in-out, color 3s ease-in-out, opacity 3s ease-in-out;
    }

    h4:hover,
    h4:active {
        background: radial-gradient(#00ffc5 18%, transparent 68%);
        color: #333333;
        opacity: 1 !important;
    }

    h4:not(:hover) {
        background: radial-gradient(#00ffc5 18%, transparent 68%);
        transition: background 3s ease-in-out, color 3s ease-in-out, opacity 3s ease-in-out;
    }

    .gif-container {
        position: fixed;
        bottom: -5%;
        right: -6%;
        width: 23%;
        margin-right: 0 !important;
        z-index: 99999;
    }

    .gif-container a {
        display: block;
        width: 100%;
        height: 100%;
    }

    img.precio0 {
        position: relative;
        left: 0rem;
        width: 60%;
    }

    .precio1 {
        background: 0 0;
        width: 39%;
        position: relative;
        top: -7px;
        right: 1%
    }

    .precio2 {
        background: 0 0;
        width: 14%;
        position: absolute;
        right: 16%;
        bottom: 16%
    }

    button {
        border-color: currentColor;
        border-width: thin;
        text-transform: uppercase;
        border-radius: 10px;
        font-size: 5rem;
        width: auto;
        background: #ffffe0;
        white-space: nowrap;
        box-shadow: 59px -14px 0px 29px #4ad8a14a;
        position: absolute;
        left: 0;
        padding-left: 1.5rem;
        padding-right: 43.5rem;
        z-index: 1000;
        font-family: cairo play, sans-serif !important;
        max-width: min-content;
        top: 40%;
    }

    button:hover {
        border-color: currentColor;
        border-width: thin;
        text-transform: uppercase;
        border-radius: 10px;
        font-size: 6rem;
        width: auto;
        background: #ffffe0;
        white-space: nowrap;
        box-shadow: 0px 6px 30rem 36rem #4ad8a14a;
        position: absolute;
        top: 40%;
        padding-left: 1.5rem;
        padding-right: 53.5rem;
        z-index: 1001;
        transform: translate(-50%);
        left: 50%;
        font-family: cairo play, sans-serif !important
    }

    .grup {
        width: 40%;
        border-radius: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
        color: #fff;
        box-shadow: -2px 2px 0 brown;
        position: relative;
        opacity: 1;
        left: 25%;
        top: 3rem;
    }

    .indiv {
        position: relative;
        top: 0;
        width: 49rem;
        margin: 3rem;
        height: auto;
        opacity: .7;
        border-radius: 14px
    }

    .btn {
        position: relative;
        color: #ffffffbf;
        background: #00000030;
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: rgba(0, 0, 0, .19);
        font-size: 50px;
        width: 54%;
        white-space: nowrap;
        box-shadow: 0 0 6px 1px #00ffa4;
        font-family: cairo play, sans-serif !important;
        z-index: 1000
    }

    .btn:hover {
        position: relative;
        color: #fff;
        background: #000;
        background-image: initial;
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        width: 54%;
        white-space: nowrap;
        box-shadow: 0 0 1px 3px #00ffa4;
        z-index: 1001;
        font-size: 60px;
        font-family: cairo play, sans-serif !important
    }

    h5 {
        color: #fff;
        background: linear-gradient(183deg, #00000045, #00000000);
        width: 90%;
        transform: translate(-50%);
        left: 50%;
        position: relative;
        font-size: 2rem;
        border-radius: 12px 12px 0 0;
        padding: 1%;
        font-family: montserrat alternates, sans-serif !important;
        font-weight: 600 !important;
        text-align: justify;
        display: flex;
        padding-bottom: 5rem;
        margin-bottom: 0
    }

    h3 {
        color: #fff;
        background: linear-gradient(15deg, #81e3cabf, #60da5187);
        background-position-x: initial;
        background-position-y: initial;
        background-size: initial;
        background-repeat-x: initial;
        background-repeat-y: initial;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
        background-color: initial;
        width: 90%;
        transform: translate(-50%);
        left: 50%;
        position: relative;
        font-weight: 100 !important;
        font-size: xx-large;
        border-radius: 12px;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 12px;
        padding: 1rem;
        padding-top: 1rem;
        padding-right: 1rem;
        padding-bottom: 1rem;
        padding-left: 1rem;
        box-shadow: 0 0 11px 3px #fff;
        margin-top: 6rem;
        margin-bottom: 0rem;
        font-family: cairo, sans-serif !important;
    }

    .indiv::before {
        content: attr(data-title);
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        background: #fff;
        text-align: center;
        transition: bottom .3s ease;
        opacity: 0
    }

    .indiv:hover::before {
        bottom: 0;
        opacity: 1
    }

    .indiv:hover {
        position: relative;
        top: 0;
        height: auto;
        opacity: 1;
        transform: scale(1.1)
    }

    .tooltip-container {
        position: relative;
        display: inline-block
    }

    .tooltip-inner {
        position: absolute;
        top: 10rem !important;
        right: 50%;
        background: linear-gradient(104deg, #b8860be0 0%, #f5f5f5 100%);
        box-shadow: 0 0 9px 1px #ffd455;
        color: #fff;
        font-size: 4rem;
        padding: 0 10px;
        border-radius: 10px;
        max-width: max-content;
        transform: translateY(-50%);
        width: auto;
        font-family: cairo play, sans-serif !important
    }
}