@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Lobster&family=Luckiest+Guy&display=swap');

/* GRID */
.card-container-col-readers-poll {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    margin-top: 20px;
}

.card-container-col-readers-poll .grid-item {
    padding: 10px;
    margin: 0 5px 10px;
    border: 1px solid #ededed;
    position: relative;
}

.card-container-col-readers-poll .card-content {
    position: relative;
    padding: 10px 0 0 0;
}

.card-container-col-readers-poll .card-content h2 {
    display: block;
    margin: 0;
    word-wrap: break-word;
    font-size: var(--font-size-m);
    line-height: var(--font-size-l);
    text-align: center;
}

.card-container-col-readers-poll .card figure {
    position: relative;
    height: 150px;
}

.readerspoll-cat {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 5px;
    background-color: #333;
    color: var(--color-orange);
    display: inline-block;
}

/* WINNER */
.readerspollwinner-winner {
    border: 0px solid #ededed;
    margin: 0 0 30px 0;
    padding: 20px;
    background-image: linear-gradient(to right, var(--color-purple), var(--color-red));
    box-shadow: 5px 10px 10px #ccc;
}

.readerspollwinner-winner p {
    font-size: 18px;
    line-height: 28px;
    margin: 0 0 20px 0;
    color: #fff;
}

.readerspollwinner-winner figure {
    margin: 0;
    position: relative;
    width: 100%;
    height: 250px;
    background-size: cover !important;
    border-radius: 5px;
}

.readerspollwinner-winner h3 {
    font-size: 36px;
    margin: 0 0 10px 0;
}

.readerspollwinner-winner h3 a {
    color: #000;
}

.readerspollwinner-winner h4 {
    font-size: 18px;
    margin: 20px 0 10px 0;
    color: #000;
}

.readerspollwinner-nominee {
    margin: 0 !important;
    display: grid;
    grid-auto-columns: 33.33% 33.33% 33.33%;
}

.readerspollwinner-nominee .grid-item {
    margin: 0;
    border: 1px solid blue;
}

.readerspollwinner-nominee .grid-item a {
    display: block;
    margin: 0;
    font-size: 14px;
    border-radius: 5px;
    color: #000;
    margin: 0 10px 0 0;
}

.readerspollwinner-nominee .grid-item a:hover {
    color: var(--color-red);
}

.readerspoll-featured {
    background: var(--color-red);
}

.readerspoll-featured h2 a {
    color: #fff !important;
}

/* HERO */
.hero-readerspoll-container {
    width: 100%;
    padding: 60px 0;
    background: url('../images/md-readers-poll-hero-bkg.jpg') top center no-repeat;
    background-size: cover;
}

.hero-readerspoll-container .titlebox h1 {
    font-size: 46px;
    font-family: 'Lobster', cursive;
    text-align: center;
    margin: 0 0 40px 0;
    color: #fff;
    text-shadow: 5px 5px 10px #000;
}

.readers-poll-cat-m .titlebox h1 {
    font-size: 46px;
    font-family: 'Lobster', cursive;
    text-align: center;
    margin: 0 0 40px 0;
    color: #000;
}

.hero-readerspoll {
    width: 100%;
    padding: 0;
    position: relative;
}

.hero-readerspoll span {
    margin: 0px;
    position: absolute;
    width: 150px;
    height: 102px;
    top: 20px;
    right: 20px;
}

.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
    margin-bottom: 20px;
}

.readerspollwinner-img {
    margin: 0 0 30px 0;
    position: relative;
    box-shadow: 5px 5px 10px #000;
}

.readerspollwinner-img span {
    margin: 0px;
    position: absolute;
    width: 150px;
    height: 102px;
    top: 20px;
    right: 20px;
}


/* READERSPOLL SIDEBAR */
.readerspoll-sidebarnav {
    border: 1px solid #ededed;
}

.readerspoll-sidebarnav li {
    list-style: none;
    display: block;
    margin: 0;
}

.reader-spoll-hero-nav {
    border: 0px solid #ededed;
}

.reader-spoll-hero-nav li {
    list-style: none;
    display: block;
    margin: 0;
}

.reader-spoll-hero-nav li a {
    font-family: 'Luckiest Guy', cursive;
    color: #fff !important;
    background: none !important;
    padding: 22px 8px !important;
    margin: 0;
    text-align: center;
    display: block;
    font-size: 30px;
    line-height: 30px;
    text-shadow: 5px 5px 10px #000;
}

.reader-spoll-hero-nav li a span {
    display: block;
    color: var(--color-orange);
}

.reader-spoll-hero-nav li a:hover {
    color: var(--color-red) !important;
    background: none !important;
}

.poll-heading {
    border: 0px solid blue;
}

.poll-heading h2 {
    font-size: 20px;
    padding-bottom: 10px;
    margin: 0 0 20px 0;
    border-bottom: 1px solid #ccc;
    display: block;
    color: #333;
}

/* CAROUSEL */
.carousel {
    position: relative;
}

.carousel span {
    margin: 0px;
    position: absolute;
    width: 150px;
    height: 102px;
    top: 20px;
    right: 20px;
    z-index: 1;
}


/* READERS POLL VIDEOS */
.readers-poll-videos iframe {
    width: 100%;
    height: 450px;
}

body.tax-readers-poll-categories .card .card-content h2,
body.tax-readers-poll-categories .card-container-dashboard h2 {
    font-size: var(--font-size-m);
    line-height: var(--font-size-l);
}

.readers-poll-cat-m {
    display: none;
    margin: 0 0 20px 0;
}

.readers-poll-cat-m .dropdown,
.readers-poll-cat-m button {
    width: 100%;
}

.readers-poll-cat-m .dropdown-menu {
    background: #fff !important;
}

.readers-poll-year {
    font-family: 'Black Ops One', cursive;
    writing-mode: vertical-lr;
    text-orientation: upright;
    font-size: 100px;
    line-height: 80px;
    letter-spacing: -25px;
    font-weight: bold;
    color: #fff;
    text-shadow: 5px 5px 10px #000;
}

.readers-poll-year span {
    color: var(--color-red);
}

.dropdown .dropdown-menu {
    margin: 0 !important;
}

.tax-readers-poll-categories .titlebox h1 {
    font-size: 46px;
    line-height: 50px;
    font-family: 'Lobster', cursive;
}



.card-container-col-nominee {
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: auto;
}

.card-container-col-nominee .grid-item {
    padding: 15px;
    margin: 0 5px 10px;
    border: 1px solid #ededed;
    background: #fff;
    position: relative;
}

.card-container-col-nominee .grid-item h3 {
    font-size: 16px;
    font-weight: bold;
    margin: 10px 0 0 0;
    text-align: center;
    display: block;
}

.card-container-col-nominee .grid-item h3 a {
    color: var(--color-red);
    text-transform: none;
}

.card-container-col-nominee .grid-item h3 a:hover {
    color: #000;
}


li.md-readers-poll-nav img {
    width: 60px;
    position: relative;
    margin: -8px
}

.container .wc-memberships-content-restricted-message {
    margin-top: -70px
}

.navbar-md-logo {
    display: none;
    float: right;
    width: 65px;
    padding: 18px 10px;
}

@media screen and (max-width: 800px) {
    .navbar-md-logo {
        display: block;
    }

    .container .wc-memberships-content-restricted-message {
        margin-top: -150px
    }
}

@media screen and (max-width: 800px) {
    .card-container-col-readers-poll {
        grid-template-columns: 50% 50%;
    }

    .readers-poll-videos iframe {
        width: 100%;
        height: 250px;
    }

    .readerspollwinner-nominee li {
        width: 50%;
    }

    body.tax-readers-poll-categories .sticky-links-container {
        display: none;
    }

    .readers-poll-cat-m {
        display: block;
    }

    .readers-poll-hero-cat {
        display: none;
    }

    .readers-poll-year {
        writing-mode: horizontal-tb;
        display: block;
        text-align: center;
        margin: 0 0 20px 0;
        font-size: 60px;
        line-height: 60px;
        letter-spacing: 10px;
    }

    .card-container-col-nominee {
        grid-template-columns: 100%;
    }

    .hero-readerspoll-container .titlebox h1,
    .tax-readers-poll-categories .titlebox h1 {
        font-size: 36px;
        line-height: 40px;
    }

    .readerspollwinner-winner p {
        font-size: 16px;
        line-height: 24px;
    }

    .readerspollwinner-img span {
        width: 70px;
        top: 10px;
        right: 10px;
    }

    .hero-readerspoll-container {
        padding: 60px 0;
    }

    .titlebox img {
        max-width: 150px;
    }
}

/* BOOTSTRAP OVERWRITTEN */
.navbar {
    min-height: auto;
    margin-bottom: 0 !important;
}