/** TEMPLATE **/
body {
    color: var(--custom-grey);
    font-family: "Lato", sans-serif;
}

.theme-layout .container {
    /*width: calc(100% - 70px);*/
    left: calc(70px / 2);
}

/* Login */
.max-fixed-width {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
}

/* Header */
.topbar .logo {
    width: 15%;
}

.topbar .top-area {
    width: 84%;
}

.top-area>ul>li>a {
    width: auto;
    padding: 0 10px;
}

.top-area>ul>li>a>em {
    top: -10px;
    right: 21px;
    /* De la mano con padding de .top-area > ul > li > a */
}

.top-area>ul>li>a.active::after {
    bottom: -13px;
}

/* Sidebar left */
.left-menu>li a::before {
    background-color: white;
    border: 1px solid var(--custom-red);
}

.left-menu>li a:hover::before,
.left-menu>li a.active::before {
    background-color: var(--custom-red);
}

.left-menu>li a:hover,
.left-menu>li a.active {
    color: #ffffff !important;
}

/* Widget */
.widget {
    border-radius: 5px 5px 0 0;
    background-color: #fff;
}

.widget p {
    font-size: 14px;
    line-height: 1.4em;
}

.widget .widget-title:before {
    background: var(--custom-red);
}

.dob-head {
    background-color: var(--custom-red);
    font-size: 15px;
    line-height: 15px;
    padding: 12px 8px;
}

.treasure .dob-head span {
    margin-left: 70px;
}

/*.dob-meta {*/
/*    background-color: #fff;*/
/*}*/
.widget a {
    color: var(--custom-red);
}

/* Cards */
.card {
    text-align: left;
}

.card-title {
    color: var(--custom-red);
}

.card-body a {
    text-decoration: none;
}

/** HOME **/
/* Profile */
#home-profile .page-meta {
    width: calc(100% - 58px);
    /* 55px de figure + 2px de border + 1 */
}

#btn-home-edit-profile {
    right: 0;
}

#home-profile .progress,
.meritocracy-progress .meritocracy-divider {
    height: 20px;
}

#home-profile .meritocracy-divider,
.meritocracy-progress .meritocracy-divider {
    width: 5px;
    height: 16px;
    left: calc(50% - 2.5px);
}

/* Happy Birthday */
#home-birthday .dob-meta .congratulations-wrapper {
    background: url("../images/happy-birthday-bg.png");
}

#home-birthday .congratulations {
    transform: rotate(-7deg);
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

#home-birthday .star-points {
    font-size: 1.1em;
}

/* hashtags */
/*#home-hashtags .pit-tags > a{
    padding: 0 6px;
    font-size: 9px;
}*/
#home-hashtags .pit-tags>a.active,
#home-hashtags .pit-tags>a:hover {
    background-color: var(--custom-red);
}

/* Stories */
#home-stories .create-post .btn {
    top: -10px;
}

#home-stories .story-box figure {
    background-position: center center;
    background-size: cover;
}

.story-postbox>.row>div {
    padding: 0;
}

.owl-prev:before,
.owl-next:before {
    background: transparent;
    color: var(--custom-red);
    content: "\f053";
    display: inline-block;
    font-family: fontawesome;
    font-size: 18px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    box-shadow: none;
    transition: all 0.2s linear 0s;
}

.owl-prev:before {
    left: -25px;
}

.owl-next:before {
    left: unset;
    right: -25px;
    content: "\f054";
}

.owl-prev:hover:before,
.owl-next:hover:before {
    background: transparent;
    color: var(--custom-red);
}

.story-thumb img {
    border-color: var(--custom-red);
    max-width: 40px;
}

.story-thumb.viewed img {
    border-color: var(--custom-grey);
    width: 40px;
    height: 40px;
}

/* carousel */
.widget .slide {
    position: relative;
}

/* Heros */
.widget.hero {
    margin-top: 20px;
}

.widget.hero .dob-head .image-hero {
    filter: drop-shadow(2px -1px 1px #8a8a8a);
    position: absolute;
    width: 100px;
    top: -50px;
    left: -50px;
}

.widget.hero.right .dob-head .image-hero {
    filter: drop-shadow(-2px -1px 1px #8a8a8a);
    left: unset;
    right: -50px;
}

.widget.hero .dob-body {
    min-height: 90px;
}

.widget.hero.left .dob-meta .dob-body {
    padding: 20px;
}

.widget.hero.right .dob-meta .dob-body {
    padding-right: 60px;
}

.widget.hero.left .dob-meta .hero-image-wrapper {
    padding-left: 5px;
}

.widget.hero.right .dob-meta .hero-image-wrapper {
    padding-right: 5px;
}

#home-daily-challenge .dob-head>span {
    padding-left: 35px;
}

#home-illusion-games .dob-head>span {
    padding-left: 35px;
}

/* Calendar */
#home-events .dob-meta {
    padding: 0;
}

#home-events .jalendar-pages {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}

.jalendar {
    margin: 0;
}

.jalendar-pages {
    padding-bottom: 10px;
}

.jalendar .jalendar-container .jalendar-pages>.header {
    text-align: left;
    margin: 10px 0 0 0;
}

.jalendar .jalendar-container .jalendar-pages .add-event.selected {
    margin-bottom: -10px;
}

.jalendar .jalendar-container .jalendar-pages .total-bar {
    top: unset;
    display: none;
}

.jalendar .jalendar-container .jalendar-pages>.header .prv-m {
    left: unset;
    right: 40px;
}

.jalendar .jalendar-container .jalendar-pages>.header h1 {
    color: var(--custom-red);
    font-size: 12px;
    font-weight: 900;
    padding: 10px;
    margin: 0;
}

.jalendar .jalendar-container .jalendar-pages>.header .nxt-m i,
.jalendar .jalendar-container .jalendar-pages>.header .prv-m i {
    font-size: 16px;
}

.jalendar .jalendar-container .jalendar-pages>.header .nxt-m,
.jalendar .jalendar-container .jalendar-pages>.header .prv-m {
    top: 7px;
}

.jalendar .jalendar-container .jalendar-pages .add-event {
    margin: 0;
}

.jalendar .jalendar-container .jalendar-pages .add-event .close-button {
    background-color: var(--custom-red);
}

.jalendar .day-names {
    background-color: var(--custom-light-grey);
}

.jalendar .jalendar-container .jalendar-pages>.header h2 {
    line-height: 24px;
}

.jalendar .jalendar-container .jalendar-pages .days {
    background-color: var(--custom-light-grey);
    margin: 0;
}

.jalendar .jalendar-container .jalendar-pages .days .day {
    width: calc(100% / 7);
    background-color: #fff;
    border-top: 1px solid var(--custom-light-grey);
    border-left: 1px solid var(--custom-light-grey);
    text-align: right;
}

.jalendar .jalendar-container .jalendar-pages .days .day:nth-last-child(-n + 7) {
    border-bottom: 1px solid var(--custom-light-grey);
}

.jalendar .jalendar-container .jalendar-pages .days .day:nth-child(7n + 6),
.jalendar .jalendar-container .jalendar-pages .days .day:nth-child(7n) {
    color: var(--custom-red);
}

.jalendar .jalendar-container .jalendar-pages .days .day:nth-child(7n) {
    border-right: 1px solid var(--custom-light-grey);
}

.jalendar .jalendar-container .jalendar-pages .days .day span {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 3px;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
}

.jalendar .jalendar-container .jalendar-pages .days .day.have-event span::before {
    display: none;
}

.jalendar .jalendar-container .jalendar-pages .days .day.have-event {
    background-color: var(--custom-purple) !important;
    color: #fff !important;
}

.jalendar .jalendar-container .jalendar-pages .days .day.this-month.selected span {
    background-color: var(--custom-red);
    color: #333;
}

.jalendar .jalendar-container .jalendar-pages .days .day.today {
    color: var(--custom-black);
    background-color: var(--custom-light-grey);
}

.jalendar .jalendar-container .jalendar-pages .days .day.today span {
    color: inherit;
    background-color: inherit;
    border-radius: unset;
}

/** Post **/
.central-meta.post {
    padding: 0;
    background-color: #f7f7f7;
}

.central-meta.post .friend-info,
.central-meta.post .post-meta,
.central-meta.post .coment-area {
    padding: 10px;
}

.central-meta.post .post-meta,
.central-meta.post .coment-area {
    margin-top: 0;
}

.central-meta.post .coment-area {
    background-color: #fff;
}

.central-meta.post .friend-info>figure {
    width: 45px;
}

.central-meta.post .friend-name {
    vertical-align: top;
    width: 90%;
}

.central-meta.post .friend-info>figure img {
    border-radius: unset;
}

.central-meta.post .video-wrapper {
    margin: 0 -10px;
}

.central-meta.post h4 {
    font-size: 10px;
}

.central-meta.post p {
    color: var(--custom-black);
}

.central-meta.post a {
    color: var(--custom-red);
}

.central-meta.post a:hover {
    color: var(--custom-grey);
}

.central-meta.post .we-video-info {
    border-top: none;
    padding: 0 5px;
}

.central-meta.post .coment-area>.reactions {
    padding-top: 15px;
}

.central-meta.post .coment-area>.reactions>span {
    padding-right: 15px;
    position: relative;
}

.central-meta.post .coment-area>.reactions>span:hover i {
    animation: 0.6s linear 0s normal none 1 running pulse;
}

.central-meta.post .coment-area>.reactions>span>ins {
    position: absolute;
    font-size: 12px;
    left: 26px;
    text-decoration: none;
    top: -20px;
}

.central-meta.post .we-comment p {
    color: var(--custom-grey);
}

.central-meta.post .we-comment a {
    color: var(--custom-grey);
}

.central-meta.post .we-comment a:hover,
.central-meta.post .we-comment a.active {
    color: var(--custom-red);
}

.post .coment-area>.reactions>span {
    color: var(--custom-light-grey);
    cursor: pointer;
}

.post .coment-area>.reactions span.favorite:hover,
.post .coment-area>.reactions span.favorite.active {
    color: var(--custom-red);
}

.post .coment-area>.reactions span.comment:hover,
.post .coment-area>.reactions span.comment.active {
    color: var(--custom-bronze);
}

.post .coment-area>.reactions span.like:hover,
.post .coment-area>.reactions span.like.active {
    color: var(--custom-green);
}

.post .coment-area>.reactions span.dislike:hover,
.post .coment-area>.reactions span.dislike.active {
    color: var(--custom-dark-red);
}

.post .form-post-comment div[contenteditable] {
    background: #edf2f6 none repeat scroll 0 0;
    border-color: transparent;
    border-radius: 5px;
    color: inherit;
    font-size: 13px;
    height: 80px;
    line-height: 16px;
    padding: 10px !important;
    padding-right: 60px !important;
    width: 100%;
    border-bottom: 0;
}

.post .form-post-comment .panel-heading.note-toolbar,
.post .form-post-comment .note-statusbar,
.post .form-post-comment .note-popover.popover {
    display: none !important;
}

.central-meta.post .contest-questions label {
    color: var(--custom-black);
}

.panel-collapse a {
    color: var(--custom-red);
}

.panel-collapse a:active,
.panel-collapse a:hover {
    text-decoration: underline;
}

.stars-rating i {
    width: 10px;
}

.rating-numbers span,
.stars-rating i.fa-lg {
    width: 16px;
}

.rating-numbers span {
    display: inline-block;
    text-align: center;
    font-size: 10px;
}

@media (min-width: 768px) {
    .max-fixed-width {
        max-width: 450px;
    }
}

/* Red coins reward */
.red-coins-reward .card-text {
    font-size: 12px;
}

/* Level bonus */
.level-info img.bonus {
    width: 30px;
    height: auto;
    margin: 3px;
}

.bg-sun-rays {
    background-image: url("../images/bg-rays.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Illusion Camp */

.op25 {
    opacity: 0.25;
}

.luck-game-credits {
    z-index: 1;
    font-weight: bold;
    position: absolute;
    right: 0;
    color: white;
    background: #aa38f0;
    padding: 2px 5px;
    font-size: 10px;
    top: -7px;
}

.juebest-days-left {
    margin: 0 auto;
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #ff0b37;
    font-weight: bold;
    text-shadow: 1px 1px 2px #333;
}

.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#home-ballons .hero-title {
    margin-left: 50px;
}

.btn-crt-outline-red-no-hover {
    background-color: #ffffff;
    color: var(--custom-red) !important;
    border-color: var(--custom-red);
}

.illusion-camp-dashboard .avatar {
    max-width: 200px;
}

.illusion-camp-dashboard .progress-mark {
    position: absolute;
    height: 10px;
    width: 16px;
    background-color: #555;
    display: inline-block;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.illusion-camp-dashboard .profile-author-thumb>img {
    bottom: 0;
}

.edit-avatar {
    border-radius: 100%;
    bottom: 10px;
    position: absolute;
    right: 10px;
    text-align: center;
}

.avatar-wrapper:hover .edit-avatar {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

.talk-bubble {
    top: 50px;
    right: -140px;
    width: 330px;
}

.talk-bubble p {
    line-height: 1.3em;
}

.talk-bubble.left-in:after {
    content: "";
    width: 0px;
    height: 0px;
    position: absolute;
    border-left: 45px solid transparent;
    border-top: 15px solid #fff;
    border-bottom: 10px solid transparent;
    left: -43px;
    top: 35%;
}

.how-to-level-up.central-meta,
.level-info.central-meta {
    margin-bottom: 0;
}

.tooltip .tooltip-inner {
    background-color: var(--custom-red);
}

.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
    border-right-color: var(--custom-red);
}

.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
    border-top-color: var(--custom-red);
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--custom-red);
}

.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.bs-tooltip-left .arrow::before {
    border-left-color: var(--custom-red);
}

.tooltip.show {
    opacity: 1;
}

#modal-change-avatar .select-avatar {
    border: 1px solid var(--custom-grey);
}

#modal-change-avatar .select-avatar:hover {
    cursor: pointer;
}

#modal-change-avatar .select-avatar.active {
    border: 3px solid var(--custom-red);
}

/* Profile */
.profile-author-thumb img.img-fluid {
    width: unset;
    min-width: unset;
    max-width: 100%;
}

.profile-author-thumb.input-file .edit-dp {
    right: 0;
}

.video-strp-window {
    width: 700px !important;
}

.video-strp-window .strp-page {
    width: 700px;
}

.video-strp-window .strp-content-element {
    width: 700px;
    height: 450px;
    margin-left: 350px;
    margin-top: 225px;
}

.video-strp-window video {
    width: 100%;
    height: 100%;
    float: left;
}

/* Ser cliente Vodafone */
#customer-request-tabs li a.active {
    background-color: var(--custom-red) !important;
    color: white !important;
}

/* Hobbies */
.hobby {
    cursor: pointer;
}

.non-selectable-hobbies .hobby {
    cursor: default;
}

.hobby>table {
    background-color: var(--custom-black-60);
}

.hobby.active>table,
.hobby:hover>table,
.hobby:focus>table {
    background-color: var(--custom-red-60);
}

.non-selectable-hobbies .hobby:hover>table,
.non-selectable-hobbies .hobby:focus>table {
    background-color: var(--custom-black-60);
}

/* Calendar */
.fc .fc-toolbar.fc-header-toolbar {
    background-color: var(--custom-red);
    margin-bottom: 0;
    padding: 10px 40px;
}

.fc .fc-toolbar-title {
    font-size: 2em;
    margin: 0;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.fc .fc-col-header-cell-cushion {
    text-transform: capitalize;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
    margin-right: 0;
}

.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
    margin-left: 0;
}

.fc-daygrid-event {
    border-radius: 0;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: var(--custom-red);
}

.fc .fc-daygrid-day-number {
    padding: 8px 8px 4px 4px;
}

#events-wrapper>.event-item:last-of-type {
    margin-bottom: 0 !important;
}

/* Tour Intro */
.introjs-tooltip.tourIntroStep {
    min-width: 300px;
    max-width: 400px;
}

@media (min-width: 768px) {
    .max-fixed-width {
        max-width: 450px;
    }
}

/* Red Awards*/

#roulette-triangle {
    position: relative;
    top: 15px;
    z-index: 1;
    width: 10%;
}

#btn-start-roulette-round {
    width: 195px;
    background: #ff0b37;
    border-radius: 0;
    color: white;
    font-size: 16px;
    padding: 10px 0;
    font-size: 18px;
    -webkit-box-shadow: 0px 0px 11px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 11px -1px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 11px -1px rgba(0, 0, 0, 0.75);
}

.pBBLLrojo {
    color: #ff0f37 !important;
}

.pBBLL {
    color: #000 !important;
    text-transform: inherit;
}

/*Daily Challenge*/
#daily-challenge-roulette-block {
    height: 128px;
    max-height: 128px;
    overflow: hidden;
}

#daily-challenge-roulette {
    overflow: hidden;
}

#daily-challenge-roulette img {
    position: relative;
    margin: 0 auto;
}

.mtop-20 {
    margin-top: 20px;
}

.custom-floating-number {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
        "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    --custom-red: #ee2f3a;
    --custom-red-60: rgba(238, 47, 58, 0.6);
    --custom-dark-red: #ba002e;
    --custom-black: #121212;
    --custom-black-60: rgba(18, 18, 18, 0.6);
    --custom-grey: #5c5c5c;
    --custom-light-grey: #d3d3d3;
    --custom-purple: #aa38f0;
    --custom-green: #4ef630;
    --custom-gold: #d4af37;
    --custom-magenta: #dc1a4f;
    --custom-silver: #c0c0c0;
    --custom-bronze: #cd7f32;
    --fc-button-bg-color: #fff;
    --fc-button-border-color: var(--custom-red);
    --fc-button-text-color: var(--custom-red);
    --fc-button-hover-bg-color: var(--custom-light-grey);
    --fc-button-hover-border-color: var(--custom-light-grey);
    --fc-button-hover-text-color: var(--custom-red);
    --fc-button-active-bg-color: var(--custom-light-grey);
    --fc-button-active-border-color: var(--custom-light-grey);
    --fc-button-active-text-color: var(--custom-red);
    --fc-event-bg-color: var(--custom-red);
    --fc-event-border-color: var(--custom-red);
    --fc-today-bg-color: #eeeeee;
    font-weight: 400;
    letter-spacing: 0.2px;
    font-family: "Lato", sans-serif;
    list-style: outside none none;
    box-sizing: border-box;
    background-color: var(--custom-purple);
    border-radius: 100%;
    color: #fff;
    font-size: 10px;
    height: 17px;
    line-height: 17px;
    position: absolute;
    text-align: center;
    width: 17px;
    font-style: normal;
    top: -10px;
    right: 21px;
}

.default-pointer {
    cursor: default;
}

.send-comment-front {
    position: absolute;
    right: 12px;
    top: 95px;
    transform: translateY(-50%);
    width: auto;
    line-height: 1;
}

.fixed-post {
    font-weight: bold;
    position: absolute;
    right: 0;
    color: white;
    background: var(--custom-purple);
    padding: 2px 5px;
    font-size: 10px;
    top: 0px;
    /*box-shadow: 0px 0px 7px 3px #4e1584;*/
}

.new-content {
    font-weight: bold;
    position: absolute;
    right: 0;
    color: white;
    background: var(--custom-purple);
    padding: 2px 5px;
    font-size: 10px;
    top: 21px;
    /*box-shadow: 0px 0px 7px 3px #4e1584;*/
}

.red-awards-legend {
    list-style: none;
    padding: 0;
}

.img-legend {
    width: 30px;
    height: 30px;
    margin: 0;
    margin-right: 10px;
}

.coupon {
    border: dashed 2px #a7a7a7;
    padding: 5px 10px 15px 10px;
    text-align: center;
    margin-top: 10px;
}

.rounded-avatar {
    border-radius: 50%;
    height: 100px;
}

.rounded-wall-avatar {
    border-radius: 50%;
    width: 55px;
    height: 55px;
}

.margin-top10 {
    margin-top: 10px;
}

.comet-avatar>img {
    height: 36px !important;
    max-height: 36px !important;
    width: 36px !important;
    max-width: 36px !important;
}

.h155 {
    height: 155px;
}

.ec-stars-wrapper {
    /* Espacio entre los inline-block (los hijos, los `a`)
         http://ksesocss.blogspot.com/2012/03/display-inline-block-y-sus-empeno-en.html */

    font-size: 0;
    /* Podríamos quitarlo,
          pero de esta manera (siempre que no le demos padding),
          sólo aplicará la regla .ec-stars-wrapper:hover a cuando
          también se esté haciendo hover a alguna estrella */

    display: inline-block;
}

.ec-stars-wrapper a {
    text-decoration: none;
    display: inline-block;
    /* Volver a dar tamaño al texto */

    font-size: 32px;
    font-size: 2rem;
    color: #333;
}

.ec-stars-wrapper:hover a:not([disabled]),
.ec-stars-wrapper a.active {
    color: #ff9930;
}

/*
 * El selector de hijo, es necesario para aumentar la especifidad
 */
.ec-stars-wrapper>a:hover:not([disabled])~a {
    color: #333;
}

#giflisting img {
    height: 150px;
    width: auto;
    margin: 0 5px 5px 0;
}

#gifsearch {
    border: 1px solid #ccc;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    line-height: 22px;
    padding: 8px 5px;
    width: 100%;
    border-radius: 0;
}

.overflow-text {
    text-overflow: ellipsis;
    max-width: 15ch;
    overflow: hidden;
}

.overflow-text-50 {
    text-overflow: ellipsis;
    max-width: 50ch;
    overflow: hidden;
}

.event-content {
    max-height: 65px;
    overflow: hidden;
}

#trivial-ranking .table.ranking .td.header {
    background: #ff0f37 !important;
}

.table.ranking .tr.header .th {
    color: white !important;
    background: #61a531 !important;
}

#trivial-ranking .table.ranking .tr.header .th {
    color: white !important;
    background: #ff0f37 !important;
}

.table.ranking .tr:nth-child(2n + 1) {
    background: #bccf27;
}

#trivial-ranking .table.ranking .tr:nth-child(2n + 1) {
    background: rgba(255, 11, 55, 0.2);
}

.col-md-3.ranking ul {
    padding: 0;
}

.table.ranking .tr .td {
    display: table-cell;
    padding: 6px 0;
    vertical-align: middle;
}

.table.ranking .tr.header .td {
    padding: 8px 5px;
    font-size: 10px;
}

.table.ranking {
    color: black;
}

.table.ranking .td.header {
    background: #61a531 !important;
    font-size: 12px;
    text-transform: uppercase;
    width: 50%;
    color: white;
}

#trivial-ranking .table.ranking .td.header {
    background: #ff0f37 !important;
}

.table.ranking .tr.header .th {
    color: white !important;
    background: #61a531 !important;
}

#trivial-ranking .table.ranking .tr.header .th {
    color: white !important;
    background: #ff0f37 !important;
}

.table.ranking .tr:nth-child(2n + 1) {
    background: #bccf27;
}

#trivial-ranking .table.ranking .tr:nth-child(2n + 1) {
    background: rgba(255, 11, 55, 0.2);
}

.table.ranking .tr.header .td {
    padding: 10px 0;
}

.table.ranking .tr .td {
    display: table-cell;
    padding: 6px 0;
    vertical-align: middle;
}

.table.ranking .tr {
    display: table-row;
}

.table.ranking {
    display: table;
    width: 100%;
    color: black;
    text-align: center;
    font-size: 12px;
}

.table.ranking .tr.header .td,
.table.ranking .tr .td {
    padding: 8px 2px;
    font-size: 12px;
}

.table.ranking .tr.header .td {
    padding: 10px 0;
}

.table.ranking .tr .td {
    display: table-cell;
    padding: 6px 0;
    vertical-align: middle;
}

.absolute-a {
    position: absolute;
    top: -26px;
    left: 0;
}


/** JUEGO ENCUENTRA TU PAREJA **/
.tablero {
    position: relative;
    padding-bottom: 40px;
}

.cards-row {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tablero .card {
    width: 15%;
    display: inline-block;
    margin: 0.5%;
}

.tablero .card img {
    width: 100%;
}

.back img {
    display: none;
}

#play-team .panel-block-title {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 1px;
}

#play-team-intro p {
    font-size: 14px;
    line-height: 18px;
    margin: 10px 0 20px 0;
}

#play-team .marcador p {
    font-size: 16px;
    display: inline-block;
    margin-right: 20px;
}

#play-team .marcador p span {
    color: #ff0b37;
    font-weight: bold;
}

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px rgb(255, 255, 255);
    }

    100% {
        box-shadow: 0px 0px 5px 0px rgb(0, 0, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

/** JUEGO CONECTA 4 **/

#connect4-game-div {
    min-height: 500px;
}

.game {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
}

.column {
    display: inline-block;
}

.column:hover .cell,
.column:hover .cell::after {
    border-color: #ff9319;
    z-index: 1;
}

.column:hover .token {
    opacity: 1;
}

.token {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    position: relative;
    background-color: red;
    opacity: 0.5;
}

.cell {
    width: 70px;
    height: 70px;
    border: 12px solid #4e1584;
    border-radius: 50%;
    margin: -10px 0;
    position: relative;
    /* box-sizing: unset; */
}

.cell::after {
    content: "";
    width: inherit;
    height: inherit;
    border: inherit;
    position: absolute;
    top: -12px;
    left: -12px;
    /* box-sizing: unset; */
}

.team-red {
    background-color: #ff0b37;
}

.team-grey {
    background-color: #737373;
}

#play-team .panel-block-title {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 1px;
}

#play-team-intro,
#play-team .marcador p {
    font-size: 14px;
    line-height: 18px;
    margin: 0 0 20px 0;
}

#play-team .marcador {
    margin-bottom: 20px;
}

#play-team .marcador p {
    display: inline-block;
}

#play-team .marcador .contrincante {
    font-weight: bold;
}

#play-team .marcador .turno {
    padding: 5px;
    color: white;
    font-weight: bold;
    margin: 0;
    float: right;
}

@media (max-width: 375px) {
    .cell {
        border-width: 8px;
        margin: -8px 0;
    }

    .cell::after {
        top: -8px;
        left: -8px;
    }
}

.hide {
    display: none !important;
}

/*HERO MAPS*/
#logo {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    width: 237px;
}

#info-container {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2;
}

#map-canvas-wrap {
    position: relative;
}

#map-canvas {
    width: 250px;
    height: 200px;
}

#leaderboard-wrap {
    position: absolute;
    z-index: 3;
    background: #fff;
    top: 0;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    /*opacity: 0.9;*/
    display: none;
}

#leaderboard {
    padding-left: 100px;
}

#leaderboard li {
    position: relative;
    margin-bottom: 20px;
}

#leaderboard li img {
    position: absolute;
    top: -5px;
    left: -70px;
    height: 30px;
    width: 30px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

#post-score,
#login,
#show-leaderboard,
#resize-map,
#hide-map,
#hide-leaderboard {
    position: absolute;
    padding: 10px;
    background: #aaa;
    /* Fallback */
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    z-index: 4;
    text-decoration: none;
    color: white;
}

#post-score,
#login,
#show-leaderboard {
    bottom: 0;
    right: 0;
}

#resize-map,
#hide-map {
    bottom: 0;
    left: 0;
}

#hide-leaderboard {
    top: 0;
    right: 0;
}

#hide-map,
#show-map,
#post-score,
#login,
#hide-leaderboard {
    display: none;
}

#place-guess,
#result,
#score-info,
#new-round {
    background: #ff0b37;
    color: #fff;
    padding: 5px;
    border: none;
    width: 100%;
    font-size: 12px;
    cursor: pointer;
}

#reset-panorama {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ff0b37;
    color: #fff;
    border: none;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    bottom: 6%;
    left: 2%;
    z-index: 1000;
}

#set-map-size {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ff0b37;
    color: #fff;
    border: none;
    font-size: 24px;
    border-radius: 50%;
    cursor: pointer;
    bottom: 16%;
    left: 2%;
    z-index: 1000;
}

#result-hero-maps {
    height: 200px;
    border: 1px solid black;
    position: relative;
    background: white;
    z-index: 10000;
}

#hero-result-text {
    margin-top: 50px;
}

#pano {
    height: 600px;
    width: 100%;
}

#result {
    width: 50%;
    float: left;
}

.play-again-hero {
    position: relative;
    left: 38%;
    margin-top: 15px;
    font-size: 18px !important;
}

p,
button {
    margin: 0;
}

:focus {
    outline-color: transparent;
    outline-style: none;
}

#twitter {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 40px;
}

#linkedin {
    position: absolute;
    bottom: 20px;
    right: 82px;
    height: 40px;
}

/* Phones */

@media (max-width: 767px) {
    #logo {
        width: 150px;
    }

    #info-container {
        display: none;
        width: 100%;
        top: 0;
        right: 0;
    }

    #map-canvas {
        width: 100% !important;
    }

    #resize-map {
        display: none;
    }

    #hide-map {
        display: block;
        color: white;
    }

    #show-map {
        display: block;
        position: absolute;
        top: 20px;
        left: 190px;
        z-index: 2;
        padding: 10px;
        background: #aaa;
        /* Fallback */
        background: rgba(0, 0, 0, 0.5);
        cursor: pointer;
        height: 54px;
        color: white;
        font-size: 30px;
        font-weight: 100;
        background: #2ac5ff;
    }

    #twitter,
    #linkedin {
        height: 20px;
    }

    #hero-maps-tabs li a.active {
        background-color: var(--custom-red) !important;
        color: white !important;
    }
}

.hero-maps-img {
    height: 250px;
    width: 100%;
}

.mtop-10 {
    margin-top: 10px;
}

.mbottom-10 {
    margin-bottom: 10px;
}

.christmas-popup p {
    color: white;
    text-align: center;
    font-size: 12px;
}

.christmas-popup .text-bottom {
    font-size: 10px;
}

.christmas-popup h5 {
    color: white;
    font-weight: bolder;
}

.christmas-popup h3 {
    color: white;
}

.christmas-popup .form {
    padding-bottom: 25px;
}

.christmas-popup input {
    border-radius: 50px;
    border: white;
}

.christmas-popup label {
    margin: 0px 15px;
}

.christmas-popup .mb-3 {
    text-align: start;
    color: white;
}

.christmas-popup .header {
    border-bottom: none;
    height: 200px;
}

.christmas-popup .btn-circle {
    margin: 10px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.christmas-popup .footer {
    border-top: none !important;
    padding: 0.75rem;
}

.christmas-popup .btn-form {
    background-color: #c8092b !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 5px !important;
}

.christmas-popup .hero {
    display: flex;
    align-items: end;
    justify-content: center;
}

.christmas-popup .hero-img {
    height: 210px;
}

.birthdaypoints {
    margin-top: 220px;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 40px;
}

.justify-self-center {
    justify-self: center;
}

.valentine-popup .footer {
    border-top: none !important;
    padding: 0.75rem;
    padding-left: 135px !important;
    padding-right: 130px !important;
}



/*VALENTINE POPUP*/
@media (min-width: 990px) {
    .valentine-popup {
        font-family: 'Lato', sans-serif;
        top: 5%;
        overflow: hidden;
        max-width: fit-content;
    }

    .valentine-popup .modal-content {
        width: 720px !important;
        /* height: 800px !important; */
    }

    .valentine-popup .modal-body {
        padding: 0;
        margin-top: 180px;
    }

    .valentine-popup .modal-body-spent {
        padding: 0;
        margin-top: 550px;
    }

    .birthdaypoints {
        margin-top: 250px;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 25px;
    }

    .treasure-popup .modal-content {
        width: 720px !important;
        height: 583px !important;
    }

    .treasure-popup {
        top: 7%;
        overflow: hidden;
    }

    .gift-popup .modal-content {
        width: 720px !important;
        height: 583px !important;
    }

    .gift-popup {
        top: 7%;
        overflow: hidden;
    }

    .present-popup {
        top: 4%;
        overflow: hidden;
        max-width: fit-content;
    }

    .present-popup .modal-content {
        width: 801px !important;
    }

    .present-popup .modal-body {
        padding: 0;
    }
}

.img-only-mobile {
    display: none;
}

.christmas-raffle-title-spent {
    font-weight: 800;
    font-size: 68px !important;
    text-shadow: 3px 3px 2px #333;
    font-family: "Savate", sans-serif;
    margin-top: 70px !important;
    margin-bottom: 40px !important;
}
.christmas-raffle-title-spent:first-child {
    margin-top: 116px !important;
}

.christmas-raffle-subtitle-spent {
    font-weight: 800;
    font-size: 56px !important;
    text-shadow: 3px 3px 2px #333;
    font-family: "Savate", sans-serif;
    /* margin-top: 70px !important; */
    margin-bottom: 24px !important;
}

.father-subtitle-spent {
    font-weight: 800;
    font-size: 56px !important;
    text-shadow: 3px 3px 2px #333;
    font-family: "Savate", sans-serif;
    /* margin-top: 70px !important; */
    margin-bottom: 24px !important;
}

@media (max-width: 990px) {

    .christmas-raffle-title-spent {
    margin-top: 35px !important;
    margin-bottom: 35px !important;
}

    .valentine-popup .footer {
        padding-left: 30px !important;
        padding-right: 15px !important;
    }

    .text-bg {
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 10);
    }

    .img-only-mobile {
        display: block;
        max-width: 100%;
        height: auto;
        padding-left: 30%;
        padding-bottom: 5%;
    }

    .present-popup .row.hero {
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 0%;
    }

    .present-popup .description {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .present-popup .modal-content {
        width: 500px !important;
    }

    .present-popup .modal-body {
        padding: 0;
    }

    .present-popup .middle {
        flex: none;
        max-width: none;
    }

    .present-popup .white-background {
        padding: 10px;
    }

    .present-popup .hero {
        margin-left: 0;
    }

    .present-popup .hero-img {
        display: none;
    }

    .valentine-popup .row.hero {
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 0%;
    }

    .valentine-popup .hero-img-chico {
        display: none;
    }

    .valentine-popup .hero-img-chica {
        display: none;
    }

    .valentine-popup .description {
        padding-right: 15px !important;
        padding-left: 15px !important;
    }

    .valentine-popup .modal-content {
        width: 500px !important;
    }

    .valentine-popup .modal-body {
        padding: 0;
        padding-top: 200px;
    }

    .valentine-popup .modal-body-spent {
        padding: 0;
        padding-top: 350px;
    }

    .valentine-popup .middle {
        flex: none;
        max-width: none;
    }

    .valentine-popup .white-background {
        padding: 10px;
    }

    .valentine-popup .hero {
        margin-left: 0;
    }

    .valentine-popup .hero-img {
        display: none;
    }

    .valentine-popup .spent-text {
        top: 290px !important;
    }

    .treasure-popup .modal-content {
        width: 720px !important;
    }

    .gift-popup .modal-content {
        width: 720px !important;
    }

    .birthdaypoints {
        margin-top: 166px;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 25px;
    }

    .treasure-popup {
        top: 7%;
        overflow: hidden;
        max-width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .treasure-popup .middle {
        flex: none;
        max-width: none;
    }

    .treasure-popup .white-background {
        padding: 10px;
    }

    .treasure-popup .hero {
        margin-left: 0;
    }

    .treasure-popup .hero-img {
        display: none;
    }

    .gift-popup {
        top: 7%;
        overflow: hidden;
        max-width: fit-content;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .gift-popup .middle {
        flex: none;
        max-width: none;
    }

    .gift-popup .white-background {
        padding: 10px;
    }

    .gift-popup .hero {
        margin-left: 0;
    }

    .gift-popup .hero-img {
        display: none;
    }
}

.img-complement {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}

.img-eating {
    position: absolute;
    top: 30%;
    left: 50%;
    width: 40%;
    transform: translateX(-50%)
}

#confirmation-modal {
    z-index: 9999999;
}

.treasure-popup .btn-circle {
    margin: 10px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.treasure-popup .content .btn {
    background: #ff0b37;
    border: 1px solid #ffffff !important;
    box-shadow: 0px 3.19802px 15.9901px rgba(184, 0, 15, 0.3);
    border-radius: 15px;
    width: 238px;
    height: 58px;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 238px / 2);
    z-index: 1;
    top: 385px;
}

.treasure-popup .content {
    position: absolute;
    width: 562px;
    height: 426px;
    left: calc(50% - 562px / 2);
    top: calc(50% - 426px / 2 + 0.5px);
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 3.19802px 15.9901px rgba(184, 0, 15, 0.3);
    border-radius: 21.3201px;
}

.treasure-popup .content .score {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    margin-top: 70px;
    opacity: 1;
}

.gift-popup .btn-circle {
    margin: 10px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.gift-popup .content .btn {
    background: #ff0b37;
    border: 1px solid #ffffff !important;
    box-shadow: 0px 3.19802px 15.9901px rgba(184, 0, 15, 0.3);
    border-radius: 15px;
    width: 238px;
    height: 58px;
    font-weight: 700;
    font-size: 22px;
    line-height: 27px;
    text-align: center;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: calc(50% - 238px / 2);
    z-index: 1;
    top: 385px;
}

.gift-popup .content {
    position: absolute;
    width: 511px;
    height: 90px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20%;
    padding: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 3.19802px 15.9901px rgba(184, 0, 15, 0.3);
    border-radius: 21.3201px;
}

.gift-popup .subcontent {
    position: absolute;
    width: 417px;
    height: 44px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9%;
    padding: 5px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 3.19802px 15.9901px rgba(184, 0, 15, 0.3);
    border-radius: 21.3201px;
}

.gift-popup .web-text {
    position: absolute;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    bottom: 9%;
    font-size: 22px;
    width: 100%;
    text-align: center;

}

#gift-modal {
    overflow: auto;
}

.gift-popup .content .gift-title {
    color: #FF0B37;
    font-size: 22px;
}

.gift-popup .content .gift-code {
    color: #FF0B37;
    font-size: 22px;
}

.gift-popup .content .score {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    margin-top: 70px;
    opacity: 1;
}

.futura {
    font-family: "Futura" !important;
    font-style: normal !important;
}

.treasure-popup .content .credits {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    margin-top: 20px;
}

.treasure-popup .title {
    position: absolute;
    width: 537px;
    height: 122px;
    right: calc(50% - 537px / 2 + 0.5px);
    top: -70px;
}

.treasure-popup .cofre {
    position: absolute;
    width: 353px;
    height: 158px;
    right: 353px;
    top: 427px;
}

.gift-popup .content .credits {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    margin-top: 20px;
}

.gift-popup .title {
    position: absolute;
    width: 537px;
    height: 122px;
    right: calc(50% - 537px / 2 + 0.5px);
    top: -70px;
}

.gift-popup .cofre {
    position: absolute;
    width: 353px;
    height: 158px;
    right: 353px;
    top: 427px;
}

.valentine-popup .description {
    margin-top: 170px;
}

.valentine-popup .wbtext {
    color: white;
    font-weight: 800;
}

.valentine-popup p {
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 5px;
    /* text-shadow: 1px 1px 2px #333; */
}

.valentine-popup .title {
    font-size: 40px;
    font-weight: 900;

}

.valentine-popup .title::before {
    content: none;
}

.valentine-popup .row {
    margin-right: 0px;
    margin-left: 0px;
}

.valentine-popup h1 {
    color: white;
}

.treasure-popup h1,
.treasure-popup h2 {
    color: white;
}

.gift-popup h1,
.gift-popup h2 {
    color: white;
}

.valentine-popup .header {
    z-index: 2;
    position: inherit;
    border-bottom: none;
}

.valentine-popup .text-bottom {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

.valentine-popup h5 {
    color: white;
    font-weight: bolder;
}

.valentine-popup h3 {
    color: white;
    font-weight: bolder;
}

.valentine-popup .form {
    padding-bottom: 25px;
}

.valentine-popup select {
    border-radius: 50px;
}

.valentine-popup input {
    border-radius: 50px;
    border: white;
}

/* .valentine-popup label {
    font-size: 22px;
    display: block;
    margin: 0px 15px;
    text-align: center;
    text-shadow: 1px 1px 2px #333;
} */

.valentine-popup label {
    font-size: 13px;
    display: block;
    /* margin: 0px 15px; */
    margin: 0px;
    text-align: initial;
    /* text-shadow: 1px 1px 2px #333; */
}

.valentine-popup form {
    text-align: center;
    color: #fff;
}

.valentine-popup .row.hero {
    padding-top: 0%
}

.valentine-popup .spent-text {
    display: inline-block;
    background-color: #d71f2f;
    color: #fff;
    font-weight: bold;
    font-family: Arial, sans-serif;
    font-size: 64px;
    padding: 20px 50px;
    border-radius: 70px;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    top: 349px;
    font-family: "Merriweather", serif;
}


.valentine-popup .btn-hide {
    margin: 10px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.valentine-popup .btn-circle {
    margin: 10px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}



/* .valentine-popup .btn-form {
    background-color: #ff0b37 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 10px !important;
    display: inline-block;
    padding: 5px 10px;
} */

.valentine-popup .btn-form {
    background-color: #B8000F !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 10px !important;
    display: inline-block;
    /* padding: 15px 60px; */
    height: 40px;
    width: 220px;
}


.valentine-popup .hero {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
}

.valentine-popup .hero-img img {
    position: absolute;
    bottom: -9em;
    height: 57em;
    left: -26em;
    max-width: none;
}

.valentine-popup .white-background {
    font-size: 20px;
    border-radius: 25px;
    background: white;
    color: red;
    padding: 10px 50px;
    line-height: normal;
}

.valentine-popup .modal-content {
    border: none;
    aspect-ratio: 720 / 775;
}

.valentine-popup .hero-img-chico {
    position: absolute;
    right: 15px;
    bottom: -36px;
    height: auto;
    max-width: 125%;
}

.valentine-popup .hero-img-chica {
    position: absolute;
    left: 15px;
    bottom: -36px;
    height: auto;
    max-width: 125%;
}

.fs-12 {
    font-size: 13px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-23 {
    font-size: 23px !important;
}

.fs-24 {
    font-size: 24px !important;
}

/*.valentine-popup .hero-img {
    height: 210px;
}*/

/*END VALENTINE POPUP*/

/* GENERAL PRESENT POPUP */

.present-popup .description {
    margin-top: 170px;
}

.present-popup .wbtext {
    color: white;
    font-weight: 800;
}

.present-popup p {
    color: #ffffff;
    text-align: center;
    font-size: 20px;
    line-height: 1.1;
    margin-top: 0;
    margin-bottom: 5px;
    /* text-shadow: 1px 1px 2px #333; */
}

.present-popup .title {
    font-size: 24px;
    font-weight: 900;

}

.present-popup .title::before {
    content: none;
}

.present-popup .row {
    margin-right: 0px;
    margin-left: 0px;
}

.present-popup h1 {
    color: white;
}

.present-popup .header {
    z-index: 2;
    position: inherit;
    border-bottom: none;
}

.present-popup .text-bottom {
    font-size: 10px;
    line-height: 12px;
    text-align: center;
}

.present-popup h5 {
    color: white;
    font-weight: bolder;
}

.present-popup h3 {
    color: white;
    font-weight: bolder;
}

.present-popup .form {
    padding-bottom: 25px;
}

.present-popup select {
    border-radius: 50px;
}

.present-popup input {
    border-radius: 50px;
    border: white;
}

.present-popup label {
    font-size: 13px;
    display: block;
    /* margin: 0px 15px; */
    margin: 0px;
    text-align: initial;
    /* text-shadow: 1px 1px 2px #333; */
}

.present-popup .row.hero {
    padding-top: 22%
}

.present-popup .row.hero.spent {
    padding-top: 30% !important;
}

.present-popup form {
    text-align: center;
    color: white;
}

.present-popup .btn-hide {
    margin: 10px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.present-popup .btn-circle {
    margin: 10px;
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.present-popup .footer {
    border-top: none !important;
    padding: 0.75rem;
    padding-top: 15%;
}


.present-popup .btn-form {
    background-color: #FF0B37 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    border-radius: 10px !important;
    display: inline-block;
    /* padding: 15px 60px; */
    height: 40px;
    width: 220px;
}

.present-popup.spent .footer {
    padding-top: 30% !important;
}

.present-popup.spent .row.hero .title {
    padding-top: 10%
}

/* END PRESENT POPUP */



.white-color {
    color: white;
}

.btn-present-white {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
}

.mt5per {
    margin-top: 5%;
}

.mt17per {
    margin-top: 17%;
}

.btn-crt-white-no-hover {
    border: none;
    background-color: transparent;
    color: white !important;
    font-size: 15px;
}

.btn-present {
    border-radius: 5px;
    border: 1px solid white;
    background: #c70c27;
}

#js-container {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 0 auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    background-repeat: no-repeat;
    background-size: contain;
}

.canvas {
    position: absolute;
    left: 352px;
    top: 25px;
    z-index: 300;
}

.loser {
    position: absolute;
    left: 353px;
    top: 115px;
    width: 229px;
}

.red-escape-btn {
    font-size: 11px;
    text-align: left;
    margin: 1px;
}

.custom-light-grey {
    background: var(--custom-light-grey);
}

.red-escape-custom-div {
    background: var(--custom-grey);
    border-radius: 5px;
    margin-top: 2px;
}

.red-escape-custom-team-div {
    background: var(--custom-light-grey);
}

.mt-4px {
    margin-top: 4px;
}

.bg-custom-red {
    background-color: #f8d7da !important;
}

.bg-custom-red p {
    color: #d34d4e !important;
}

.border-red-escape {
    border: 3px solid white !important;
}

.border-gold-event {
    padding: 15px;
    border: 1px solid #ff335b !important;
    border-radius: 15px;
}

.no-padding-gold {
    padding: 0;
}

#gold-user-info-modal .modal-content {
    /*background-image: url("../images/gold-user-info-background.png");*/
    background-position: center center;
    background-size: cover;
    background-color: #ff0b37;
    color: #fff;
}

#platinum-user-info-modal .modal-content {
    background-position: center center;
    background-size: cover;
    color: #000000;
}

.mt-5px {
    margin-top: 5px;
}

.ml-5px {
    margin-left: 5px;
}

.disabled-alink {
    opacity: .65;
    pointer-events: none;
    /* Evita que el enlace sea clickeable */
    color: gray;
    /* Cambia el color del texto para indicar que está deshabilitado */
    text-decoration: none;
    /* Puedes agregar esto para quitar el subrayado del enlace */
    cursor: not-allowed;
    /* Cambia el cursor cuando el enlace está deshabilitado */
}

.smaller {
    font-size: smaller;
}

.background-gray {
    filter: grayscale(100%);
}

.treasure-popup .content .clue {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
    margin-bottom: 20px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    opacity: 1;

    margin: 10px;
}

.gift-popup .content .clue {
    font-family: "Futura";
    font-style: normal;
    font-weight: 700;
    font-size: 33px;
    line-height: 40px;
    margin-bottom: 20px;
    /* or 67% */

    text-align: center;
    text-transform: uppercase;

    color: #2e0724;
    opacity: 1;

    margin: 10px;
}

.valentine-popup {
    font-family: 'Lato', sans-serif;
    overflow: hidden;
}

.valentine-popup .description {
    margin-top: 0 !important;
    margin-top: 17px;
}

.valentine-popup form {
    text-align: center;
    color: #fff;
}

.valentine-popup .footer {
    border-top: none !important;
    padding: 0.75rem;
}

.valentine-popup .hero {
    display: flex;
    align-items: end;
    justify-content: center;
    width: 100%;
    /* margin-bottom: 30px; */
}

.valentine-popup .hero-spent {
    display: flex;
    align-items: end;
    justify-content: center;
    margin-left: -47px;
}

.valentine-popup .hero-spent img {
    width: 150%;
    max-width: none;
}

.valentine-popup .highlight {
    position: absolute;
    height: 100%;
}

.valentine-popup .highlight-text {
    position: relative;
    z-index: 1;
}

.shareform {
    display: none;
}

.mailForm {
    display: none;
}

.copied {
    color: white;
    display: none;

}

.christmas-calendar-title {
    font-weight: 800;
    font-size: 40px !important;
    text-shadow: 3px 3px 2px #333;
}

.christmas-raffle-title {
    font-weight: 800;
    font-size: 36px !important;
    text-shadow: 3px 3px 2px #333;
    font-family: "Savate", sans-serif;
}

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

.christmas-raffle-idot {
    position: absolute;
    top: -12px;
    /* ajusta según tamaño */
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    /* ajusta el tamaño de la estrella */
    pointer-events: none;
}

.christmas-raffle-idot-2 {
    position: relative;
    top: -10px;
    /* ajusta según tamaño */
    left: 8px;
    transform: translateX(-50%);
    width: 15px;
    /* ajusta el tamaño de la estrella */
    pointer-events: none;
}




.valentine-popup .hero1 {
    position: absolute;
    bottom: -130px;
    left: -28px;
}

.valentine-popup .hero2 {
    position: absolute;
    bottom: -85px;
    right: -28px;
}

.valentine-popup .hero3 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 255px;
}

.valentine-popup .hero4 {
    position: absolute;
    bottom: 0px;
    right: -20px;
    height: 255px;
}



.canvas-christmas {
    position: absolute;
    width: 250px;
    height: 250px;
    z-index: 2;
}

.valentine-popup .prize {
    position: absolute;
    background-color: #fff;
    top: 0;
    width: 250px;
    height: 250px;
    display: flex;
    /* Añadir flexbox */
    justify-content: center;
    /* Centrar horizontalmente */
    align-items: center;
    /* Centrar verticalmente */
    background-size: cover;
}

.valentine-popup .prize p {
    color: #000;
    text-shadow: 1px 1px 2px #fff;
}

#status-bar .messages {
    display: inline-flex;
    color: #ffffff;
}

#status-bar .messages p {
    color: #ffffff;
}

.d-grid {
    display: grid;
}

.text-outline {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 10);
}