
.hto-offer {
    background-color:#5f5f5f;
    color:#fff;
    padding:20px;
    margin-bottom:20px
}
.hto-offer-top {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
.hto-offer-image {
    width:30%;
}
.hto-offer-image img {
    max-width:100%;
}
.hto-offer-content {
    width:67%;
}

#group-detail-page .hto-offer-content,
#group-detail-page .hto-offer-content h1,
#group-detail-page .hto-offer-content h2,
#group-detail-page .hto-offer-content h3,
#group-detail-page .hto-offer-content h4,
#group-detail-page .hto-offer-content h5,
#group-detail-page .hto-offer-content h6,
#group-detail-page .hto-offer-content p,
#group-detail-page .hto-offer-content span,
#group-detail-page .hto-offer-content div,
#group-detail-page .hto-offer-source,
#group-detail-page .hto-offer-title,
#group-detail-page .hto-offer-description {
    color:#fff;
}

#group-detail-page .hto-offer a:not(.hto-offer-btn) {
    color:#fff;
}

#talk-detail-page #hto-offers .hto-offer,
#talk-detail-page #hto-advertisements .hto-offer,
#talk-detail-page .talk-sidebar .hto-offer {
    margin-top:0 !important;
    overflow:visible !important;
}

#talk-detail-page #hto-offers .hto-offer-image,
#talk-detail-page #hto-advertisements .hto-offer-image,
#talk-detail-page .talk-sidebar .hto-offer-image {
    margin-top:-45px;
    position:relative;
    z-index:1;
}

#talk-detail-page #hto-offers .hto-offer-image img,
#talk-detail-page #hto-advertisements .hto-offer-image img,
#talk-detail-page .talk-sidebar .hto-offer-image img {
    margin:0 auto;
    max-width:85%;
}

.hto-offer-cta {
    width:100%;
}

.hto-advertisement,
#hto-advertisements .hto-offer {
    background:linear-gradient(150deg, rgba(15,23,42,0.96) 0%, rgba(49,46,129,0.92) 48%, rgba(88,28,135,0.9) 100%) !important;
    border:1px solid rgba(168,85,247,0.3) !important;
    border-radius:28px !important;
    box-shadow:0 28px 70px rgba(15,23,42,0.38);
    color:rgba(248,250,252,0.92) !important;
    overflow:hidden;
}

.hto-advertisement .hto-offer-image img,
#hto-advertisements .hto-offer-image img {
    border-radius:20px;
    box-shadow:0 20px 40px rgba(15,23,42,0.28);
}

.hto-advertisement .hto-offer-content,
.hto-advertisement .hto-offer-content h1,
.hto-advertisement .hto-offer-content h2,
.hto-advertisement .hto-offer-content h3,
.hto-advertisement .hto-offer-content h4,
.hto-advertisement .hto-offer-content h5,
.hto-advertisement .hto-offer-content h6,
.hto-advertisement .hto-offer-content p,
.hto-advertisement .hto-offer-content span,
.hto-advertisement .hto-offer-content div,
.hto-advertisement .hto-offer-source,
.hto-advertisement .hto-offer-title,
.hto-advertisement .hto-offer-description,
#hto-advertisements .hto-offer-content,
#hto-advertisements .hto-offer-content h1,
#hto-advertisements .hto-offer-content h2,
#hto-advertisements .hto-offer-content h3,
#hto-advertisements .hto-offer-content h4,
#hto-advertisements .hto-offer-content h5,
#hto-advertisements .hto-offer-content h6,
#hto-advertisements .hto-offer-content p,
#hto-advertisements .hto-offer-content span,
#hto-advertisements .hto-offer-content div,
#hto-advertisements .hto-offer-source,
#hto-advertisements .hto-offer-title,
#hto-advertisements .hto-offer-description {
    color:rgba(248,250,252,0.92) !important;
}

.hto-advertisement .hto-offer-title h2,
#hto-advertisements .hto-offer-title h2 {
    color:#fff !important;
    font-weight:700;
}

.hto-advertisement .hto-offer-body,
.hto-advertisement .hto-offer-body p,
#hto-advertisements .hto-offer-body,
#hto-advertisements .hto-offer-body p {
    color:rgba(226,232,240,0.88) !important;
    line-height:1.75;
}

.hto-advertisement .hto-offer-btn,
#hto-advertisements .hto-offer-btn {
    background:linear-gradient(to bottom right, #ec4899, #ef4444) !important;
    border:1px solid rgba(251,113,133,0.28) !important;
    border-radius:9999px !important;
    color:#fff !important;
    font-weight:600;
    letter-spacing:0.02em;
    padding:14px 18px;
}

.hto-advertisement .hto-offer-btn:hover,
#hto-advertisements .hto-offer-btn:hover {
    background:linear-gradient(to bottom right, #db2777, #dc2626) !important;
}

.hto-advertisement .hto-offer-source{
    display:none;
}

#hto-modal{
    width: 100%;
    height:100%;
    background:rgba(0,0,0,.4);
    position: absolute;
    z-index: 999;
    top:0;
    left:0;
    display:none;
}

#hto-view-choice-wrapper{
    background:#fff;
    width:30%;
    margin:0px auto;
    padding:20px;
    display:none;
    position:relative;
    top:0;
}

.hto-choice-button{
    font-family: montserrat,sans-serif;
    margin-top: 10px;
    display: block;
    color: #fff;
    background: linear-gradient(to bottom right, #ec4899, #ef4444);
    border:1px solid rgba(251,113,133,0.28);
    position: relative;
    text-align: center;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration:none;
}

.hto-remember-option{
    margin-top:10px;
    text-align: center;
    font-size:15px;
}

.hto-remember-option > label{
    font-size:15px;
}

.hto-offer-btn {
    font-family: montserrat,sans-serif;
    margin-top: 30px;
    display: block;
    color: #fff !important;
    background: linear-gradient(to bottom right, #ec4899, #ef4444) !important;
    border:1px solid rgba(251,113,133,0.28) !important;
    position: relative;
    text-align: center;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    text-decoration:none;
}
.hto-offer-btn:hover {
    background: linear-gradient(to bottom right, #db2777, #dc2626) !important;
}

.hto-offer > .row > .col > .tooltiptext {
    position: absolute;
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 999;
    transition: opacity .6s;
    font-size: 14px;
    white-space: normal;
    padding: 8px;
    display:none;
    opacity: 0;
    transition: opacity .3s;
}


.hto-offer > .row > .col >  .tooltip-top::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}


.hto-offer > .row > .col > .hto-offer-email-wrapper > input.hto-offer-email{
    width:98%;
    border:none;
    border-radius: 4px;
    padding:6px 5px;
    margin-top:14px;
    color:#000;
}

.hto-offer > .row > .col > .hto-offer-email-error,
.hto-offer > .row > .col > .hto-offer-success{
    text-align: center;
    padding:10px;
    margin-top:5px;
    font-weight:normal;
    color:#fff;
    border-radius: 4px;
    display:none;
}

.hto-offer > .row > .col > .hto-offer-email-error{
    background-color:#d42537;
    border:1px solid #d42537;
}

.hto-offer > .row > .col > .hto-offer-success{
    background-color: #1E7B34;
    border:1px solid #1E7B34;
}

.hto-offer > .row > .col > .hto-offer-success,
.hto-offer > .row > .col > .hto-offer-success *,
#hto-advertisements .hto-offer-success,
#hto-advertisements .hto-offer-success * {
    color:#fff !important;
}

.hide {
    display:none !important;
}


@media only screen and (max-width: 600px) {
    #hto-view-choice-wrapper{
        width:75%;
    }
}
