/** variables **/

:root {
    --top-height: 600px;
    --top-ad-height: 100px;
    --top-content-height: calc(var(--top-height) - var(--top-ad-height));
}

@media (max-height: 700px) {
    :root {
        --top-height: 575px;
    }
}

@media (max-height: 500px) {
    :root {
        --top-height: 550px;
    }

    .giveaways__top-widget__box .giveaways__top-widget__box-info {
        padding: 1.5rem 1rem;
    }
}

@media (max-height: 300px) {
    :root {
        --top-height: 525px;
    }

    .giveaways__top-widget__box .giveaways__top-widget__box-info {
        padding: 0.75rem 1rem;
    }
}

/** general modifiers **/
.progress {
    background-color:black;
    height:.5rem;
    margin-top:.5rem;
}

.iti {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/** giveaways main structure **/
.giveaways__top {
    height:calc(var(--top-height) + 6rem);
    width:100%;
    position: relative;

    margin-top: -6rem;
    padding-top: 6rem;

    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
}

.giveaways__top .row{
    height:100%;
}

.giveaways__top-content {
    position: relative;
    height: var(--top-content-height);
}

.giveaways__top-promo {
    height:var(--top-ad-height);
    text-align:center;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.giveaways__top-promo img {
    max-height: var(--top-ad-height);
    width:auto;
}

/** giveaways sidebars **/
.giveaways__top-content .giveaways__top-sidebar--left,
.giveaways__top-content .giveaways__top-sidebar--right {
    background-color:white;

    color:black;
    writing-mode: vertical-rl;
    text-align: center;

    position:absolute;
    height:100%;
    width:50px;
    top:0;
}

.giveaways__top-sidebar--left {
    left:0;
}

.giveaways__top-sidebar--right {
    right: 0;
}

.giveaways__top-content .giveaways__top-sidebar--left h1,
.giveaways__top-content .giveaways__top-sidebar--right h1 {
    font-size: 1.4em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin:unset;
}

/** giveaways main featured widget **/
.giveaways__top-widget {
    width: 100%;
    height:var(--top-content-height);
    max-height:var(--top-content-height);
    margin:0 auto;
    padding-left: 6rem;
    padding-right: 6rem;
}

.giveaways__top-widget__box {
    position:relative;
    background-color:rgba(255,255,255,.85);
    height:var(--top-content-height);
    max-height:var(--top-content-height);
    width:100%;
}

.giveaways__top-widget__box-prereq {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background-color:white;
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: center;
    color:black;
}

.giveaways__top-widget__box-prereq:not(.active) {
    display:none;
}

.giveaways__top-widget__box-prereq__overlay {
    background-color:rgba(255,255,255,.7);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    padding:.5rem;
    text-align:center;
}

.giveaways__top-widget__box-prereq__overlay h1 {
    font-size:1em;
    margin-top: 1em;
}

.giveaways__top-widget__box-prereq .row {
    height:auto;
    text-align:left;
}

.giveaways__top-widget__box-prereq .row div {
    margin-top:.5rem;
}

.giveaways__top-widget__box-prereq .row p, .giveaways__top-widget__box-prereq .row .col-1 i {
    margin: unset;
    margin-top: 1em;
}

.giveaways__top-widget__box-prereq .row .prereq-status {
    border: 1px solid black;
    position: relative;
    width:32px;
    height:32px;
}
.giveaways__top-widget__box-prereq .row .prereq-status i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.giveaways__top-widget__box-prereq .row .prereq-status .fa-check {
    color:green;
}

.giveaways__top-widget__box-prereq .row .prereq-status .fa-times {
    color:red;
}


.giveaways__top-widget__box-prereq .btn {
    margin-top:1rem;
}

.giveaways__top-widget__box-prereq p {
    color:black;
    font-size:.8em;
}

.giveaways__top-widget__box-prereq__modal .volume-container {
    padding-top:10px;
    text-align: center;
}

.giveaways__top-widget__box-header {
    height:10%;
    position:relative;

    /** center text vertically **/
    display: flex;
    align-items: center;
    justify-content: center;
}

.giveaways__top-widget__box-header h1 {
    text-align:center;
    color:black;
    font-size:1.3em;
    margin:unset;
}

.giveaways__top-widget__box-media {
    height:50%;
}

.giveaways__top-widget__box-media img {
    width:100%;
    height:100%;
    object-fit: contain;
}

.giveaways__top-widget__box-info {
    padding:3rem 1rem;
    color:black;
}

.giveaways__top-widget__box-info strong {
    font-size:1.2em;
    font-weight:600;
    text-transform: uppercase;
}

.giveaways__top-widget__box-info small {
    font-size:1rem;
    font-weight:2;
    display:block;
}

.giveaways__top-widget__box-info p {
    color: black;
    font-size:1rem;
}

.giveaways__listing-post__info .btn {
    margin-top:.5rem;
    font-size:.8em;
    padding: .5rem 2rem;
    border: 1px solid hsla(0, 0%, 100%, 1);
    text-transform: uppercase;
    letter-spacing: 2px;
    color: hsla(0, 0%, 100%, 1);
    background: transparent;
    text-decoration: none;
    transition: all .2s cubic-bezier(0.5, 0.05, 0.6, 0.2);
}

.giveaways__listing-post__info .btn:hover {
    background: hsla(0, 0%, 100%, 1);
    color: hsla(240, 1%, 16%, 1);
}

.giveaways__top-widget__box-info #recaptcha-wrapper {
    position: absolute;
    bottom: 48px;
}

.giveaways__top-widget__description {
    background-color: rgba(255,255,255, .85);
    height:var(--top-content-height);
    max-height:var(--top-content-height);
    padding: 1.25rem;
    overflow-y: auto;

    /** toggling settings **/
    display:flex;
    flex-direction: column;
    opacity: 0;
    transition: all .3s;
    transform: translateX(-1rem);
}

.giveaways__top-widget__description .js-widget-title {
    text-align: center;
    color: black;
    font-size: 1.3em;
}

.giveaways__top-content.active .giveaways__top-widget__description {
    opacity: 1;
    transform: translateX(0);
}

.giveaways__top-widget__description img {
    max-width: 100%;
}

.giveaways__top-widget__description * {
    color:black;
}

.giveaways__top-widget__instructions {
    padding: 2rem;
    background-color: rgba(255,255,255, .85);
    height:var(--top-content-height);
    max-height:var(--top-content-height);
    color:black;

    /** center text vertically **/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    /** toggling settings **/
    display: none;
}

.giveaways__top-content.active .giveaways__top-widget__instructions {
    display:flex;
}

.giveaways__top-widget__instructions h1 {
    font-weight:600;
    font-size:.9em;
}

.giveaways__top-widget__instructions ul {
    list-style-type: none;
    padding:unset;
}

.giveaways__top-widget__instructions li:not(:first-of-type) {
    font-size:1rem;
    border-top: 1px solid hsla(0,0%,66%,0.33);
    padding: .75rem 0;
}

.giveaways__top div.giveaways__top-widget__box-media > div.embed-responsive {
    max-height: 115%;
}

@media(max-width:992px) {
    .giveaways__top {
        height:100%;
    }

    .giveaways__top, .giveaways__top-content, .giveaways__top-widget,
    .giveaways__top-widget__instructions, .giveaways__top-widget__description {
        height:100%;
        max-height:unset;
    }

    .giveaways__top-widget__description {
        margin-top: 2.75rem;
    }

    .giveaways__top-widget {
        width:100%;
        max-height:unset;
        padding: .5rem;
    }

    .giveaways__top-widget .row > [class*="col-"] {
        padding: unset;
    }
}

/** giveaways listing **/
.giveaways__listing {
    padding: 6rem;
    padding-top: 1rem;
    background-color:white;
    width:100%;
}

.giveaways__listing-post {
    position: relative;
    margin-bottom: 30px;
}

.giveaways__listing-post img {
    width:100%;
    height:100%;
    object-fit: cover;
}

.giveaways__listing-post:hover .giveaways__listing-post-img {
    filter:brightness(.3);
}

.giveaways__listing-post__title {
    font-family: 'AlienwareBold', sans-serif;
    background-color:white;
    color:black;
    padding:.5rem 2rem;
    text-transform: uppercase;
    width:100%;
    min-height: 60px;
    transition: all .3s;
}

.giveaways__listing-post:hover .giveaways__listing-post__title {
    background-color:rgb(60,58,61);
    color:white;
}

.giveaways__listing-post__info {
    position:absolute;
    left:0;
    bottom:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    width:fit-content;
    margin:0.75rem;
    padding:0.5rem;

    background-color:rgb(60,58,61,.7);
    border-radius:5px;

    opacity: 0;
    transform: translateY(-1rem);
    transition: all .3s;
}

.giveaways__listing-post:hover .giveaways__listing-post__info {
    opacity: 1;
    transform: translateY(0);
}

.giveaways__listing-post__info * {
    color:white;
}

.giveaways__listing-post__info strong {
    font-size:1.2em;
    font-weight:600;
}

.giveaways__listing-post__info small {
    font-size:1rem;
    font-weight:2;
    display:block;
}

.giveaways__listing-post__info a {
    text-decoration: none;
    border-color:white;
}

.giveaways__listing-post__info .progress {
    background-color:white;
}

@media(max-width:567px) {
    .giveaways__listing {
        padding:.25rem;
    }

    .giveaways__listing-post__title {
        font-size:1em;
        padding: .3rem;
    }

    .giveaways__listing-post__info {
        padding:.25rem;
        padding-bottom:1.5rem;
    }

    .giveaways__listing-post__info small {
        font-size:.8rem;
    }

    .giveaways__listing .row > [class*="col-"] {
        padding-left:7.5px;
        padding-right:7.5px;
    }

    .featured-widget {
        padding-left:2rem;
        padding-right:2rem;
    }
}

/** featured widget **/
.featured-widget {
    padding:0px 6.8rem;
    width: 100%;
}
.featured-widget .giveaways__listing-post {
    width: 33.33333%;
    padding-right: 10px;
    padding-left: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
.featured-widget .giveaways__listing-post .giveaways__listing-post__info {
    padding: 1.25rem 1.75rem;
}

@media(max-width:576px) {
    .featured-widget {
        padding:1rem;
    }

    .featured-widget .giveaways__listing-post {
        width:100%;
    }

    .featured-widget .giveaways__listing-post .giveaways__listing-post__info {
        padding: 0 2rem;
    }
}

@media(max-width: 991px) {
    .giveaways__top-widget__box {
        height: unset;
        max-height: unset;
    }
}