:root {
    --padding-sm: 12px;
    --padding-md: 18px;

    --lightgray: #fbfbfb;
    --hovergray: #f2f2f2;
    --mediumgray: lightgray;
    --darkgray: darkgray;

    --green: #3c8;
    --hovergreen: #1fad4e;

    --light-gold: #fea;
    --medium-gold: #dc8;
    --dark-gold: #a95;

}

body {
    counter-reset: list-position;
    font-family: "Source Sans Pro", sans-serif;

    margin-top: 0;
    background: url(img/bg/unlimited-casinos-bg.jpeg) no-repeat bottom right fixed;
    background-size: 50%;
    background-color: black;
}

.flex {
    display: flex;
}

.column {
    flex-direction: column;
}

.center {
    justify-content: center;
    align-items: center;
}

.radius {
    border-radius: 6px;
}

.site-logo-container {
    display: flex;
    justify-content: center;
}

.site-logo-container img {
    max-height: 20vh;
}

section.toplist {
    margin-bottom: 12vh;
}

section.text {
    color: white;
    max-width: 1200px;
    margin: 0 auto 3em;
    display: flex;
    flex-wrap: wrap;
    gap: 3em;
    justify-content: center;
}

section.text div {
    flex: 1 1 480px;
}

section.text div:last-child {
    align-self: center;
}

section.text p {
    max-width: 90ch;
    /*    margin-bottom: 3em;
*/
}

section.text img {
    max-height: 31px;
    vertical-align: top;
    margin-right: 0.5em;
}

section.text.privacy {
    display: block;
}

section.text.privacy div {
    flex: 1 1 auto !important;
}

h1,
h2,
h3 {
    color: #fea;
    display: inline;
}

.card {
    max-width: 1200px;
    border: 1px solid #a95;
    border-top-color: #fea;
    border-left-color: #dc8;
    margin: 0 auto 48px;
    counter-increment: list-position;
    /*background-color: var(--lightgray);*/
    background-color: #a951;

    /* sheen */
    overflow: hidden;
    position: relative;
    transition: background-color 300ms;
}

.card:hover:after {

    animation: shine 2s;
    animation-fill-mode: forwards;
    content: "";
    position: absolute;
    top: -110%;
    left: -210%;
    width: 400%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);

    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient(to right,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0.0) 100%);
}

@keyframes shine {
    70% {
        opacity: 1;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
        transition-duration: 0.7s, 0.7s, 0.15s;
        transition-timing-function: ease;
    }

    100% {
        opacity: 0;
        top: -30%;
        left: -30%;
        transition-property: left, top, opacity;
    }
}


.card:hover {
    /*background-color: var(--hovergray);*/
    background-color: hsla(0, 0%, 30%, 0.5);
}

.container {
    flex-wrap: wrap;
    gap: var(--padding-md);
    padding: var(--padding-sm);
    flex: 1;
}

.list-position {
    color: #a95;
    text-shadow: #fea 1px 1px 1px;
    font-size: 1.5em;
    font-weight: bold;
    max-width: calc(var(--padding-sm)/2);
    padding-left: calc(var(--padding-md)/2);
}

.list-position::after {
    content: counter(list-position);
}

.container>div {
    flex-grow: 1;
    box-sizing: border-box;
}

.logo-container {
    overflow: hidden;
}

.rating i {
    color: gold;
    margin: -1px;
}

.rating p {
    font-weight: 300;
    margin: 0;
    color: white;
}

.rating span {
    font-size: 2em;
    font-weight: 600;
}

.offer {
    /*background-color: #fdfae7;*/
    background: linear-gradient(0.45turn, #505050 0%, black 100%);
    color: white;
    /*border: 1px solid #ede7c7;*/
    flex: 1 1 300px;
    padding: var(--padding-md);
    text-align: center;
}

.cta-button {
    /*text-transform: uppercase;
    background-color: var(--green);
    color: white;
    justify-content: center;
    padding: var(--padding-sm) var(--padding-md);
    box-sizing: border-box;*/

    color: #762;
    font-size: 1.3em;
    text-shadow: 0 -1px 3px var(--light-gold);
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    padding: 10px 25px;
    display: inline-block;
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 1), 0px 1px 3px rgba(0, 0, 0, 0.3);
    outline: none;
    border: 1px solid #ba6;
    backface-visibility: hidden;
    position: relative;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 2px;
    display: inline-block;
    z-index: 10;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: none;
    background: linear-gradient(#a95 0%, #fea 100%);
    border: 2px solid #fe9;
    /*background: linear-gradient(180deg, #fea 0%, #dc8 49%, #a95 51%, #dc8 100%);*/
    transition: box-shadow 300ms, color 300ms;
}

.cta-button:hover {
    color: white;
    box-shadow: 0 1px 15px var(--dark-gold);
    text-shadow: 0 1px 2px #573f0f;
}

.cta-button:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(#fea 0%, #a95 100%);
    opacity: 0;
    transition: opacity 300ms;
    z-index: -1;
}

.cta-button:hover:before {
    opacity: 1;

}

.cta {
    justify-content: center;
    flex: 1 1 200px;
    z-index: 10;
}

.cta * {
    text-decoration: none;
    text-align: center;
}

.cta a:last-child {
    font-size: 0.8rem;
    font-weight: 300;
    color: hsl(150, 0%, 80%);
}

/*.cards-overlay {
    position: sticky;
    bottom: 0;
    right: 0;
    height: 40vh;
    background: url(img/bg/bg-black-cards.jpeg) no-repeat right;
    background-size: contain;
    z-index: -1;
}*/

footer {
    /*border-top: 1px solid #fe9;*/
    color: white;
    max-width: 1200px;
    margin: 0 auto;
}

footer .menu-link {
    color: inherit;
    text-decoration: none;
    font-size: 1rem;
    display: block;
    margin: 1em 0;
}

footer a:hover {
    text-decoration: underline;
}

footer .disclaimer p {
    font-size: small;
    max-width: 90ch;
    color: hsla(0, 0%, 30%, 1);
}

.subs-form p:last-of-type {
    font-size: 0.8em;
    margin-bottom: 3em;
}

.field {
    margin-bottom: 1em;
}

.checkbox {
    margin-top: 2em;
}

span.icon.is-small.is-left {
    float: left;
    margin-right: 0.5em;
    color: #fea;
}

.control.has-icons-left {
    margin-top: 0.2em;
}

label.label {
    margin-top: 1em;
}

.subs-form {
    flex: 1
}

.subs-form a {
    color: white;
}

.subs-form .cta-button {
    width: 100%;
}

[data-aos="fade-out"] {
    opacity: 1;
    transition-property: opacity;
}

[data-aos="fade-out"] .aos-animate {
    opacity: 0;
}

@media screen and (max-width: 700px) {
    body {
        background-size: 100% !important;
    }

    .section {
        margin-bottom: 50vh;
    }

    .subs-form {
        order: -1;
        margin-bottom: 2em;
    }

}

@media screen and (min-width: 1023px) {
    section.text div:last-child {
        flex: 0 1 576px;
    }
}