/* G E N E R A L E S 
    ----------------------------------------------*/
    body {
        font-family: "Montserrat", serif;
    }

    a {
        text-decoration: none;
    }

    .fa--size {
        font-size: 1vw;
    }

    .ms-2-md {
        margin-left: 2rem;
    }

    .wrapper-sm {
        max-width: 720px;
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: calc(var(--bs-gutter-x)* .5);
        padding-left: calc(var(--bs-gutter-x)* .5);
        margin-right: auto;
        margin-left: auto;
    }

    /* Colors */
    .white {
        color: white;
    }

    .orange {
        color: #FA6E22;
    }

    .blue {
        color: #002E71;
    }

    /* Fonts */
    .hstlnd_h1 {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_h2 {
        font-size: 22px;
        font-weight: 600;
    }

    .hstlnd_p1 {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_p2 {
        font-size: 14px;
        font-weight: 500;
    }

    .hstlnd_p3 {
        font-size: 15px;
        font-weight: 500;
    }

    .hstlnd_p4 {
        font-size: 17px;
        font-weight: 600;
    }

    .hstlnd_p5 {
        font-size: 11px;
        font-weight: 500;
    }

    .subtitles {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .txt {
        color: #ACACAC;
        font-size: 14px;
        font-weight: 500;
    }


    /* N A V 
    ----------------------------------------------*/
    .user {
        width: 2.5vw;
    }

    .nav_link {
        letter-spacing: 1px;
    }

    .br-nav {
        width: 90%;
        margin: auto;
        margin-top: 0.5rem;
        border: 1px solid #D9D9D9;
    }

    .wrapper {
        width: 100%;
    }
    
    .wrapper nav {
        position: relative;
        display: flex;
        max-width: calc(100% - 200px);
        margin: 0 auto;
        height: 70px;
        align-items: center;
        justify-content: space-between;
    }
    
    nav .nav-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    nav .nav-content .links {
        margin-left: 80px;
        display: flex;
        gap: 10px;
    }
    
    .nav-content .logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .nav-content .logo img {
        width: 30px;
    }
    
    .nav-content .logo a {
        color: #a443ff;
        font-size: 30px;
        font-weight: 600;
    }
    
    .nav-content .links li {
        list-style: none;
        line-height: 70px;
    }
    
    .nav-content .links li a,
    .nav-content .links li label {
        color: #000;
        font-size: 18px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 5px;
        transition: all 0.3s ease;
        /* margin: 0 5px; */
    }
    
    .nav-content .links li label {
        display: none;
    }
    
    .nav-content .links li a:hover,
    .nav-content .links li label:hover {
        background: #8e55f8;
        color: #fff;
    }
    
    .wrapper .search-icon,
    .wrapper .menu-icon {
        color: #000;
        font-size: 18px;
        cursor: pointer;
        line-height: 70px;
        width: 70px;
        text-align: center;
    }
    
    .wrapper .menu-icon {
        display: none;
    }
    
    .wrapper #show-search:checked ~ .search-icon i::before {
        content: "\f00d";
    }
    
    .wrapper .search-box {
        position: absolute;
        height: 100%;
        max-width: calc(100% - 50px);
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    
    .wrapper #show-search:checked ~ .search-box {
        opacity: 1;
        pointer-events: auto;
    }
    
    .search-box input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 17px;
        color: #000;
        background: #ffff;
        padding: 0 100px 0 15px;
    }
    
    .search-box input::placeholder {
        color: #545252;
    }
    
    .search-box .go-icon {
        position: absolute;
        display: flex;
        right: 10px;
        top: 50%;
        align-items: center;
        transform: translateY(-50%);
        line-height: 60px;
        width: 51px;
        height: 50px;
        justify-content: center;
        border: none;
        outline: none;
        color: #000;
        font-size: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: transparent;
    }
    
    .wrapper input[type="checkbox"] {
        display: none;
    }
    
    /* Dropdown Menu code start */
    .nav-content .links ul {
        position: absolute;
        background: #8446f7;
        top: 80px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        color: #fff;
    }
    
    .nav-content .links li:hover > ul {
        top: 70px;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease;
    }
    
    .nav-content .links ul li a {
        color: #fff;
        display: block;
        width: 100%;
        line-height: 30px;
        border-radius: 0px !important;
    }
    
    .nav-content .links ul ul {
        position: absolute;
        top: 0;
        right: calc(-100% + 8px);
    }
    
    .nav-content .links ul li {
        position: relative;
    }
    
    .nav-content .links ul li:hover ul {
        top: 0;
    }

    .nav-content .logo img {
        width: 5vw;
    }

    .nav-content .logo a {
        font-size: 23px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 70px);
    }

    .wrapper .search-box .go-icon {
        width: 30px;
        right: 0;
    }

    .wrapper .search-box input {
        padding-right: 30px;
    }

    .wrapper nav {
        max-width: 100%;
        padding: 20px;
    }

    nav .nav-content .links {
        margin-left: 30px;
    }

    .nav-content .links li a {
        color: #000;
        padding: 8px 13px;
        font-size: 17px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 100px);
    }

    .wrapper .search-box input {
        padding: 0 100px 0 15px;
    }
    
    .wrapper .menu-icon {
        display: block;
    }

    .nav-content .logo a {
        font-size: 25px;
    }

    .wrapper #show-menu:checked ~ .menu-icon i::before {
        content: "\f00d";
    }

    nav .nav-content .links {
        display: block;
        position: fixed;
        background: #f4f4f4;
        height: 100%;
        width: 100%;
        z-index: 1;
        top: 80px;
        left: -100%;
        margin-left: 0;
        max-width: 350px;
        overflow-y: auto;
        padding-bottom: 100px;
        transition: all 0.3s ease;
    }

    nav #show-menu:checked ~ .nav-content .links {
        left: 0%;
    }

    .nav-content .links li {
        margin: 15px 20px;
    }

    .nav-content .links li a,
    .nav-content .links li label {
        line-height: 20px;
        font-size: 17px;
        display: block;
        padding: 8px 0px;
        cursor: pointer;
        color: #020202;
    }

    .nav-content .links li a.desktop-link {
        display: none;
    }

    /* dropdown responsive code start */
    .nav-content .links ul,
    .nav-content .links ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        background: none;
        max-height: 0px;
        overflow: hidden;
    }

    .nav-content .links #show-features:checked ~ ul,
    .nav-content .links #show-services:checked ~ ul,
    .nav-content .links #show-items:checked ~ ul {
        max-height: 100vh;
    }

    .nav-content .links ul li {
        margin: 7px 20px;
    }

    .nav-content .links ul li a {
        font-size: 17px;
        line-height: 30px;
        border-radius: 5px !important;
    }


    /* H O M E 
    ----------------------------------------------*/
    .form-select-lg {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: 1rem;
        font-size: 1rem;
        border-radius: var(--bs-border-radius-lg);
    }

    .form-select {
        color: #838383;
        text-decoration: none !important;
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .card-evento {
        padding: 5px;
        border-radius: 15px;
        background-color: #F9F9F9;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .position-copy {
        z-index: 1;
        left: 1rem;
        bottom: 1rem;
        position: absolute;
    }

    .btn-primary {
        width: 100%;
        font-size: 15px;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-primary:hover {
        width: 100%;
        font-size: 15px;
        color: #fff;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .bg-img1 {
        width: 27vw;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bg-img2 {
        width: 27vw;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bg-img3 {
        width: 27vw;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/los-fabulosos.png);
    }

    .bg-img4 {
        width: 27vw;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/cafe-tacvba.png);
    }

    .bg-img1:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img2:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img3:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img4:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .modalImg {
        width: 100%;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bgImg {
        width: 100%;
        height: 30vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bgImg:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .imgThanks {
        width: 90%;
        height: 27vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .logotipo {
        width: 5vw;
    }

    .card-generador {
        border-top-right-radius: 35px;
        border-top-left-radius: 35px;
        border: 1px solid #D8D8D8;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .btn-seccundary {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .btn-seccundary:hover {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #002E71;
        background-color: #002E71;
    }

    .position-caption {
        z-index: 1;
        left: 6.5rem;
        bottom: 1rem;
        position: absolute;
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .card-thanks {
        border-top-right-radius: 35px;
        border-top-left-radius: 35px;
        border: 1px solid #D8D8D8;
    }

    .position-exit {
        z-index: 1;
        left: 20%;
        bottom: 1rem;
        position: absolute;
    }

    .fa-w {
        font-size: 1vw;
    }


    /* T H A N K S 
    ----------------------------------------------*/
    .modal-header {
        border: none;
        padding-bottom: 0px;
    }

    .btn-wallet {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-wallet:hover {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }


@media only screen and (min-width: 1px) and (max-width: 600px) {
    /* G E N E R A L E S 
    ----------------------------------------------*/
    body {
        font-family: "Montserrat", serif;
    }

    a {
        text-decoration: none;
    }

    .fa--size {
        font-size: 5vw;
    }

    .wrapper-sm {
        max-width: 720px;
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-right: 0;
        margin-left: 0;
    }

    /* Colors */
    .white {
        color: white;
    }

    .orange {
        color: #FA6E22;
    }

    .blue {
        color: #002E71;
    }

    /* Fonts */
    .hstlnd_h1 {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_h2 {
        font-size: 22px;
        font-weight: 600;
    }

    .hstlnd_p1 {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_p2 {
        font-size: 14px;
        font-weight: 500;
    }

    .hstlnd_p3 {
        font-size: 15px;
        font-weight: 500;
    }

    .hstlnd_p4 {
        font-size: 17px;
        font-weight: 600;
    }

    .hstlnd_p5 {
        font-size: 11px;
        font-weight: 500;
    }

    .subtitles {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .txt {
        color: #ACACAC;
        font-size: 14px;
        font-weight: 500;
    }


    /* N A V 
    ----------------------------------------------*/
    .user {
        width: 9vw;
    }

    .nav_link {
        letter-spacing: 1px;
    }

    .br-nav {
        width: 90%;
        margin: auto;
        margin-top: 0.5rem;
        border: 1px solid #D9D9D9;
    }

    .wrapper {
        width: 100%;
    }
    
    .wrapper nav {
        position: relative;
        display: flex;
        max-width: calc(100% - 200px);
        margin: 0 auto;
        height: 70px;
        align-items: center;
        justify-content: space-between;
    }
    
    nav .nav-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    nav .nav-content .links {
        margin-left: 80px;
        display: flex;
        gap: 10px;
    }
    
    .nav-content .logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .nav-content .logo img {
        width: 30px;
    }
    
    .nav-content .logo a {
        color: #a443ff;
        font-size: 30px;
        font-weight: 600;
    }
    
    .nav-content .links li {
        list-style: none;
        line-height: 70px;
    }
    
    .nav-content .links li a,
    .nav-content .links li label {
        color: #000;
        font-size: 18px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 5px;
        transition: all 0.3s ease;
        /* margin: 0 5px; */
    }
    
    .nav-content .links li label {
        display: none;
    }
    
    .nav-content .links li a:hover,
    .nav-content .links li label:hover {
        background: #8e55f8;
        color: #fff;
    }
    
    .wrapper .search-icon,
    .wrapper .menu-icon {
        color: #000;
        font-size: 18px;
        cursor: pointer;
        line-height: 70px;
        width: 70px;
        text-align: center;
    }
    
    .wrapper .menu-icon {
        display: none;
    }
    
    .wrapper #show-search:checked ~ .search-icon i::before {
        content: "\f00d";
    }
    
    .wrapper .search-box {
        position: absolute;
        height: 100%;
        max-width: calc(100% - 50px);
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    
    .wrapper #show-search:checked ~ .search-box {
        opacity: 1;
        pointer-events: auto;
    }
    
    .search-box input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 17px;
        color: #000;
        background: #ffff;
        padding: 0 100px 0 15px;
    }
    
    .search-box input::placeholder {
        color: #545252;
    }
    
    .search-box .go-icon {
        position: absolute;
        display: flex;
        right: 10px;
        top: 50%;
        align-items: center;
        transform: translateY(-50%);
        line-height: 60px;
        width: 51px;
        height: 50px;
        justify-content: center;
        border: none;
        outline: none;
        color: #000;
        font-size: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: transparent;
    }
    
    .wrapper input[type="checkbox"] {
        display: none;
    }
    
    /* Dropdown Menu code start */
    .nav-content .links ul {
        position: absolute;
        background: #8446f7;
        top: 80px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        color: #fff;
    }
    
    .nav-content .links li:hover > ul {
        top: 70px;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease;
    }
    
    .nav-content .links ul li a {
        color: #fff;
        display: block;
        width: 100%;
        line-height: 30px;
        border-radius: 0px !important;
    }
    
    .nav-content .links ul ul {
        position: absolute;
        top: 0;
        right: calc(-100% + 8px);
    }
    
    .nav-content .links ul li {
        position: relative;
    }
    
    .nav-content .links ul li:hover ul {
        top: 0;
    }

    .nav-content .logo img {
        width: 20vw;
    }

    .nav-content .logo a {
        font-size: 23px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 70px);
    }

    .wrapper .search-box .go-icon {
        width: 30px;
        right: 0;
    }

    .wrapper .search-box input {
        padding-right: 30px;
    }

    .wrapper nav {
        max-width: 100%;
        padding: 20px;
    }

    nav .nav-content .links {
        margin-left: 30px;
    }

    .nav-content .links li a {
        color: #000;
        padding: 8px 13px;
        font-size: 17px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 100px);
    }

    .wrapper .search-box input {
        padding: 0 100px 0 15px;
    }
    
    .wrapper .menu-icon {
        display: block;
    }

    .nav-content .logo a {
        font-size: 25px;
    }

    .wrapper #show-menu:checked ~ .menu-icon i::before {
        content: "\f00d";
    }

    nav .nav-content .links {
        display: block;
        position: fixed;
        background: #f4f4f4;
        height: 100%;
        width: 100%;
        z-index: 1;
        top: 80px;
        left: -100%;
        margin-left: 0;
        max-width: 350px;
        overflow-y: auto;
        padding-bottom: 100px;
        transition: all 0.3s ease;
    }

    nav #show-menu:checked ~ .nav-content .links {
        left: 0%;
    }

    .nav-content .links li {
        margin: 15px 20px;
    }

    .nav-content .links li a,
    .nav-content .links li label {
        line-height: 20px;
        font-size: 17px;
        display: block;
        padding: 8px 0px;
        cursor: pointer;
        color: #020202;
    }

    .nav-content .links li a.desktop-link {
        display: none;
    }

    /* dropdown responsive code start */
    .nav-content .links ul,
    .nav-content .links ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        background: none;
        max-height: 0px;
        overflow: hidden;
    }

    .nav-content .links #show-features:checked ~ ul,
    .nav-content .links #show-services:checked ~ ul,
    .nav-content .links #show-items:checked ~ ul {
        max-height: 100vh;
    }

    .nav-content .links ul li {
        margin: 7px 20px;
    }

    .nav-content .links ul li a {
        font-size: 17px;
        line-height: 30px;
        border-radius: 5px !important;
    }


    /* H O M E 
    ----------------------------------------------*/
    .form-select-lg {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: 1rem;
        font-size: 1rem;
        border-radius: var(--bs-border-radius-lg);
    }

    .form-select {
        color: #838383;
        text-decoration: none !important;
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .card-evento {
        padding: 5px;
        border-radius: 15px;
        background-color: #F9F9F9;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .position-copy {
        z-index: 1;
        left: 1rem;
        bottom: 1rem;
        position: absolute;
    }

    .btn-primary {
        width: 100%;
        font-size: 15px;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-primary:hover {
        width: 100%;
        font-size: 15px;
        color: #fff;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .bg-img1 {
        width: 95%;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bg-img2 {
        width: 95%;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bg-img3 {
        width: 95%;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/los-fabulosos.png);
    }

    .bg-img4 {
        width: 95%;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/cafe-tacvba.png);
    }

    .bg-img1:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img2:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img3:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img4:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .modalImg {
        width: 83vw;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bgImg {
        width: 100%;
        height: 21vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bgImg:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .imgThanks {
        width: 83vw;
        height: 19vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .logotipo {
        width: 20vw;
    }

    .card-generador {
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        border: 1px solid #D8D8D8;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .btn-seccundary {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .btn-seccundary:hover {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #002E71;
        background-color: #002E71;
    }

    .position-caption {
        z-index: 1;
        left: 2.5rem;
        bottom: 1rem;
        position: absolute;
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .card-thanks {
        border-top-right-radius: 22px;
        border-top-left-radius: 22px;
        border: 1px solid #D8D8D8;
    }

    .position-exit {
        z-index: 1;
        left: 5%;
        right: 5%;
        top: 20%;
        bottom: 20%;
        position: absolute;
    }

    .fa-w {
        font-size: 4vw;
    }


    /* T H A N K S 
    ----------------------------------------------*/
    .modal-header {
        border: none;
        padding-bottom: 0px;
    }

    .btn-wallet {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-wallet:hover {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

}


@media only screen and (min-width: 768px) and (max-width: 770px) {
    /* G E N E R A L E S 
    ----------------------------------------------*/
    body {
        font-family: "Montserrat", serif;
    }

    a {
        text-decoration: none;
    }

    .fa--size {
        font-size: 3vw;
    }

    .ms-2-md {
        margin-left: 2rem;
    }

    /* Colors */
    .white {
        color: white;
    }

    .orange {
        color: #FA6E22;
    }

    .blue {
        color: #002E71;
    }

    /* Fonts */
    .hstlnd_h1 {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_h2 {
        font-size: 22px;
        font-weight: 600;
    }

    .hstlnd_p1 {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .hstlnd_p2 {
        font-size: 14px;
        font-weight: 500;
    }

    .hstlnd_p3 {
        font-size: 15px;
        font-weight: 500;
    }

    .hstlnd_p4 {
        font-size: 17px;
        font-weight: 600;
    }

    .hstlnd_p5 {
        font-size: 11px;
        font-weight: 500;
    }

    .subtitles {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 2px;
    }

    .txt {
        color: #ACACAC;
        font-size: 14px;
        font-weight: 500;
    }


    /* N A V 
    ----------------------------------------------*/
    .user {
        width: 6vw;
    }

    .nav_link {
        letter-spacing: 1px;
    }

    .br-nav {
        width: 90%;
        margin: auto;
        margin-top: 0.5rem;
        border: 1px solid #D9D9D9;
    }

    .wrapper {
        width: 100%;
    }
    
    .wrapper nav {
        position: relative;
        display: flex;
        max-width: calc(100% - 200px);
        margin: 0 auto;
        height: 70px;
        align-items: center;
        justify-content: space-between;
    }
    
    nav .nav-content {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    
    nav .nav-content .links {
        margin-left: 80px;
        display: flex;
        gap: 10px;
    }
    
    .nav-content .logo {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .nav-content .logo img {
        width: 30px;
    }
    
    .nav-content .logo a {
        color: #a443ff;
        font-size: 30px;
        font-weight: 600;
    }
    
    .nav-content .links li {
        list-style: none;
        line-height: 70px;
    }
    
    .nav-content .links li a,
    .nav-content .links li label {
        color: #000;
        font-size: 18px;
        font-weight: 500;
        padding: 7px 14px;
        border-radius: 5px;
        transition: all 0.3s ease;
        /* margin: 0 5px; */
    }
    
    .nav-content .links li label {
        display: none;
    }
    
    .nav-content .links li a:hover,
    .nav-content .links li label:hover {
        background: #8e55f8;
        color: #fff;
    }
    
    .wrapper .search-icon,
    .wrapper .menu-icon {
        color: #000;
        font-size: 18px;
        cursor: pointer;
        line-height: 70px;
        width: 70px;
        text-align: center;
    }
    
    .wrapper .menu-icon {
        display: none;
    }
    
    .wrapper #show-search:checked ~ .search-icon i::before {
        content: "\f00d";
    }
    
    .wrapper .search-box {
        position: absolute;
        height: 100%;
        max-width: calc(100% - 50px);
        width: 100%;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    
    .wrapper #show-search:checked ~ .search-box {
        opacity: 1;
        pointer-events: auto;
    }
    
    .search-box input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        font-size: 17px;
        color: #000;
        background: #ffff;
        padding: 0 100px 0 15px;
    }
    
    .search-box input::placeholder {
        color: #545252;
    }
    
    .search-box .go-icon {
        position: absolute;
        display: flex;
        right: 10px;
        top: 50%;
        align-items: center;
        transform: translateY(-50%);
        line-height: 60px;
        width: 51px;
        height: 50px;
        justify-content: center;
        border: none;
        outline: none;
        color: #000;
        font-size: 20px;
        border-radius: 50%;
        cursor: pointer;
        background: transparent;
    }
    
    .wrapper input[type="checkbox"] {
        display: none;
    }
    
    /* Dropdown Menu code start */
    .nav-content .links ul {
        position: absolute;
        background: #8446f7;
        top: 80px;
        z-index: -1;
        opacity: 0;
        visibility: hidden;
        color: #fff;
    }
    
    .nav-content .links li:hover > ul {
        top: 70px;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease;
    }
    
    .nav-content .links ul li a {
        color: #fff;
        display: block;
        width: 100%;
        line-height: 30px;
        border-radius: 0px !important;
    }
    
    .nav-content .links ul ul {
        position: absolute;
        top: 0;
        right: calc(-100% + 8px);
    }
    
    .nav-content .links ul li {
        position: relative;
    }
    
    .nav-content .links ul li:hover ul {
        top: 0;
    }

    .nav-content .logo img {
        width: 12vw;
    }

    .nav-content .logo a {
        font-size: 23px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 70px);
    }

    .wrapper .search-box .go-icon {
        width: 30px;
        right: 0;
    }

    .wrapper .search-box input {
        padding-right: 30px;
    }

    .wrapper nav {
        max-width: 100%;
        padding: 20px;
    }

    nav .nav-content .links {
        margin-left: 30px;
    }

    .nav-content .links li a {
        color: #000;
        padding: 8px 13px;
        font-size: 17px;
    }

    .wrapper .search-box {
        max-width: calc(100% - 100px);
    }

    .wrapper .search-box input {
        padding: 0 100px 0 15px;
    }
    
    .wrapper .menu-icon {
        display: block;
    }

    .nav-content .logo a {
        font-size: 25px;
    }

    .wrapper #show-menu:checked ~ .menu-icon i::before {
        content: "\f00d";
    }

    nav .nav-content .links {
        display: block;
        position: fixed;
        background: #f4f4f4;
        height: 100%;
        width: 100%;
        z-index: 1;
        top: 80px;
        left: -100%;
        margin-left: 0;
        max-width: 350px;
        overflow-y: auto;
        padding-bottom: 100px;
        transition: all 0.3s ease;
    }

    nav #show-menu:checked ~ .nav-content .links {
        left: 0%;
    }

    .nav-content .links li {
        margin: 15px 20px;
    }

    .nav-content .links li a,
    .nav-content .links li label {
        line-height: 20px;
        font-size: 17px;
        display: block;
        padding: 8px 0px;
        cursor: pointer;
        color: #020202;
    }

    .nav-content .links li a.desktop-link {
        display: none;
    }

    /* dropdown responsive code start */
    .nav-content .links ul,
    .nav-content .links ul ul {
        position: static;
        opacity: 1;
        visibility: visible;
        background: none;
        max-height: 0px;
        overflow: hidden;
    }

    .nav-content .links #show-features:checked ~ ul,
    .nav-content .links #show-services:checked ~ ul,
    .nav-content .links #show-items:checked ~ ul {
        max-height: 100vh;
    }

    .nav-content .links ul li {
        margin: 7px 20px;
    }

    .nav-content .links ul li a {
        font-size: 17px;
        line-height: 30px;
        border-radius: 5px !important;
    }


    /* H O M E 
    ----------------------------------------------*/
    .form-select-lg {
        padding-top: .5rem;
        padding-bottom: .5rem;
        padding-left: 1rem;
        font-size: 1rem;
        border-radius: var(--bs-border-radius-lg);
    }

    .form-select {
        color: #838383;
        text-decoration: none !important;
        outline:none !important;
        outline-width: 0 !important;
        box-shadow: none !important;
        -moz-box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }

    .card-evento {
        padding: 5px;
        border-radius: 15px;
        background-color: #F9F9F9;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .position-copy {
        z-index: 1;
        left: 2rem;
        bottom: 1rem;
        position: absolute;
    }

    .btn-primary {
        width: 100%;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-primary:hover {
        width: 100%;
        color: #fff;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .bg-img1 {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bg-img2 {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bg-img3 {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/los-fabulosos.png);
    }

    .bg-img4 {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/cafe-tacvba.png);
    }

    .bg-img1:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img2:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img3:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .bg-img4:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .modalImg {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/iron-maiden.png);
    }

    .bgImg {
        width: 100%;
        height: 25vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }

    .bgImg:after {
        content: "";
        display: block;
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        border-radius: 15px;
    }

    .imgThanks {
        width: 63vw;
        height: 24vh;
        border-radius: 15px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url(./../../assets/images/eventos/paul-mccartney.png);
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .logotipo {
        width: 12vw;
    }

    .card-generador {
        border-top-right-radius: 35px;
        border-top-left-radius: 35px;
        border: 1px solid #D8D8D8;
        box-shadow: 0px 4px 4px 0 #00000030;
    }

    .btn-seccundary {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #FA6E22;
        background-color: #FA6E22;
    }

    .btn-seccundary:hover {
        width: 100%;
        color: #fff;
        padding: 10px;
        border-radius: 100px;
        border: 1px solid #002E71;
        background-color: #002E71;
    }

    .position-caption {
        z-index: 1;
        left: 7rem;
        bottom: 1rem;
        position: absolute;
    }


    /* G E N E R A D O R 
    ----------------------------------------------*/
    .card-thanks {
        border-top-right-radius: 35px;
        border-top-left-radius: 35px;
        border: 1px solid #D8D8D8;
    }

    .position-exit {
        z-index: 1;
        left: 11rem;
        bottom: 2rem;
        position: absolute;
    }

    .fa-w {
        font-size: 3vw;
    }


    /* T H A N K S 
    ----------------------------------------------*/
    .modal-header {
        border: none;
        padding-bottom: 0px;
    }

    .btn-wallet {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

    .btn-wallet:hover {
        width: 100%;
        font-size: 13px;
        font-weight: 500;
        color: #252525;
        border-radius: 100px;
        border: 1px solid #252525;
        background-color: transparent;
    }

}