/*
Theme Name: The Poplar Report
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentytwo
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news

Twenty Twenty-Two WordPress Theme, (C) 2021 WordPress.org
Twenty Twenty-Two is distributed under the terms of the GNU GPL.
*/

/* Reset ///////////////////////////////////////////*/
html {
     font-size: 18px;
}
html, body, select {
    font-family: 'Raleway', sans-serif;
}
html, body {
    font-weight: 200;
    color: #111;
    font-size: 1rem;
    line-height: 1.4;
    margin: 0 !important;
    padding: 0;
}
a[href] {
    color: #111;
    text-decoration: none;
}
p a[href] {
    color: #00ad1f;
}
a[href]:hover {
    text-decoration: underline;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: 'Merriweather', serif;
}
h1, .h1 {
    line-height: 1.6;
    font-size: 2rem;
}
h2, .h2 {
    line-height: 1.5;
    font-size: 1.4rem;
}
h3, .h3 {
    margin: 16px 0 4px;
}
p.no-gutter, h1.no-gutter, .h1.no-gutter, h2.no-gutter, .h2.no-gutter, h3.no-gutter, .h3.no-gutter, h4.no-gutter, .h4.no-gutter, h5.no-gutter, .h5.no-gutter, h6.no-gutter, .h6.no-gutter {
    margin-bottom: 0;
}


/* Layout ******************************************/
.container {
    max-width: 1200px;
    margin: auto
}
.container.container--mw-medium {
    max-width: 800px;
}
.container.container--left {
    margin: 0 auto 0 0;
}
.grid {
    display: flex;
    flex-wrap: wrap;
}
.grid.align-items--center {
    align-items: center;
}
.grid.justify-content--left {
    justify-content: flex-start;
}
.grid > div {
    flex-basis: auto;
}
.grid.spacing-2 {
    margin: -16px;
}
.grid.spacing-2 > div {
    margin: 16px;
}
@media (min-width: 0px) {
    .grid.spacing-2 .col-12-small {
        width: calc(100% - 32px);
    }
    .grid.spacing-2 .col-6-small {
        width: calc(50% - 32px);
    }
    .grid.spacing-2 .col-3-small {
        width: calc(25% - 32px);
    }

}
@media (min-width: 600px) {
    .grid.spacing-2 .col-8-medium {
        width: calc(66.666% - 32px);
    }
    .grid.spacing-2 .col-6-medium {
        width: calc(50% - 32px);
    }
    .grid.spacing-2 .col-4-medium {
        width: calc(33.3333% - 32px);
    }
    .grid.spacing-2 .col-12-medium {
        width: calc(100% - 32px);
    }
}
@media (min-width: 968px) {
    .grid.spacing-2 .col-3-large {
        width: calc(25% - 32px);
    }
    .grid.spacing-2 .col-4-large {
        width: calc(33.3333% - 32px);
    }
    .grid.spacing-2 .col-6-large {
        width: calc(50% - 32px);
    }
    .order-1-large {
        order: 1;
    }
    .order-2-large {
        order: 2;
    }
    .order-3-large {
        order: 3;
    }
}

/* General ****************************************/
.main {
    padding: 0 16px 100px;
}
h1.center, .h1.center, h2.center, .h2.center, h3.center, .h3.center, h4.center, .h4.center, h5.center, .h5.center, h6.center, .h6.center {
    text-align: center;
}


/* Header ///////////////////////////////////////////*/
.main-header {
    border-bottom: solid 1px #CCC;
    margin-bottom: 24px;
    padding: 0 16px;
}
.main-logo {
    max-width: 200px;
}
.header-logo-container {
    padding: 4px 0 0;
}
.navigation {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 0;
}
.navigation li {
    display: block;
}
.navigation li a {
    display: block;
    padding: 4px 16px;
    border-radius: 4px;
    text-decoration: none !important;
    cursor: pointer;
    text-transform: uppercase;
}
.navigation li a:hover {
    background-color: #EEE;
}


/* Articles ///////////////////////////////////////////*/
.post-article {
    /*border: solid 1px #CCC;*/
    border-radius: 4px;
    padding: 8px 0;
    margin: 0 0 16px;
    background-color: white;
}
.post-article h3 {
    margin: 8px 0 4px;
}
.post-article h3 a {
    text-decoration: none;
}
.post-article h3 a:hover {
    text-decoration: underline;
}
.post-article img {
    max-width: 100%;
    height: auto;
}
.post-article--date {

}

/* Footer *************************************/
.main-footer {
    background-color: #EEE;
}
.main-footer ul li {
    display: block;
}

/* Forms ***********************************/
.form-field {
    border: solid 1px #CCC;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.form-field label {
    position: absolute;
    top: 14px;
    left: 0;
    padding: 4px 16px;
    transition: top 150ms, transform 150ms, left 150ms, font-size 150ms;
    z-index: 1;
}
.form-field textarea, .form-field input, .form-field select {
    border: none;
    padding: 24px 16px 5px;
    font-weight: bold;
    outline: none !important;
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 100%;
    font-family: 'Raleway', sans-serif;
    width: 100%;
    box-sizing: border-box;
}
.form-field select {
    padding-left: 12px;
    padding-right: 12px;
    width: calc(100% - 8px);
    -webkit-appearance: none;
}
.form-field.form-field--has-focus {
    outline: solid 1px #7F9856;
}
.form-field.form-field--has-focus select {
    opacity: 1;
}
.form-field.form-field--has-value label, .form-field.form-field--has-focus label, .form-field.form-field--select label {
    /*transform: scale(0.75);*/
    font-size: 0.75rem;
    top: 0;
}




/* Buttons ******************************/
button, .button, input[type=button], input[type=submit] {
    background-color: #7F9856;
    color: white;
    border-radius: 4px;
    box-shadow: 0 3px 6px -2px rgba(0,0,0,0.4);
    padding: 8px 20px;
    font-size: 18px;
    min-width: 160px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    border: none;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 150ms;
    cursor: pointer;
}
button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover {
    background-color: #344F30;
}


/* Home page **************************************/
.carousel-container {
    margin-bottom: 16px;
}
.carousel-slide {
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: opacity 600ms;
    transition-delay: 0ms;
    padding: 0 0 60%;
    height: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    width: 100%;
}
.home-page-featured-blog-post {
    margin: 8px 0 32px;
    padding-bottom: 16px;
    border-bottom: solid 1px #CCC;
}
.home-page-featured-blog-post img {
    max-width: 100%;
    height: auto;
}
.home-page-featured-posts__container {
    position: relative;
    margin-top: 20px;
}
.carousel-slide--1 {
    position: relative;
    top: 0;
}
.carousel-slide--active {
    opacity: 1;
    transition-delay: 400ms;
}
.carousel-slide__inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+1,1+28,1+100 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 28%,rgba(0,0,0,0.7) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: white;
    padding: 20px;
    box-sizing: border-box;
}
.carousel-slide__content:before {
    content: '';
    display: block;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1)));
}
.carousel-slide__read-more {
    color: white;
    display: inline-block;
    margin: 0;
    text-decoration: underline;
}
.carousel__pagination {
    display: flex;
    justify-content: flex-end;
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 4px;
}
.carousel__pagination ul {
    padding-left: 0;
    display: flex;
}
.carousel__pagination ul li {
    display: block;
    margin: 0 3px;
}
.carousel__pagination ul li a {
    display: block;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms;
}
.carousel__pagination ul li a:hover {
    background-color: #FFF;
}
.carousel__pagination ul li a:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: solid 10px transparent;
    border-bottom: solid 10px transparent;
    transition: border-left-color 100ms, border-right-color 100ms;
}
.carousel__pagination ul li:hover .carousel__pagination__left:before, .carousel__pagination ul li:hover .carousel__pagination__right:before {
    border-left-color: #000;
    border-right-color: #000;
}
.carousel__pagination__left {
    padding-left: 4px;
}
.carousel__pagination__right {
    padding-right: 4px;
}
.carousel__pagination__left:before {
    border-left: none;
    border-right: solid 14px #FFF;
    transition: border-right-color 100ms;
}
.carousel__pagination__right:before {
    border-right: none;
    border-left: solid 14px #FFF;
    transition: border-left-color 100ms;
}

/* Videos Page ******************************************/
.video-card-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -16px;
    width: calc(100% + 32px);
}
.video-card {
    width: calc(100% - 32px);
    box-shadow: 0 2px 6px -2px rgba(0,0,0,0.7);
    margin: 0 16px 16px;
    transition: box-shadow 200ms;
    border-radius: 6px;
    overflow: hidden;
}
@media (min-width: 460px) {
    .video-card {
        width: calc(50% - 32px);
    }
}
@media (min-width: 800px) {
    .video-card {
        width: calc(33.3333% - 32px);
    }
}
.video-card__thumbnail {
    width: 100%;
    position: relative;
}
.video-card__thumbnail > a > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.video-card__thumbnail:before {
    content: '';
    height: 0;
    padding-bottom: 66.666%;
    display: block;
}
.video-card__content {
    padding: 16px;
}
.video-card__content__heading {

}
.video-card__content__excerpt {
    max-height: 100px;
    overflow: hidden;
}
.video-card__content__author {
    display: flex;
    margin: 24px 0 0;
}
.video-card__content__author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 16px;
}
.video-card__content__author__publish-date {
    display: block;
}
.video-player-root {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms, visibility 0ms 250ms;
}
.video-player-root--active {
    visibility: visible;
    opacity: 1;
    transition: opacity 250ms;
}
.video-player__backdrop {
    background-color: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-player__iframe-container {
    width: calc(100% - 100px);
    height: calc(100% - 100px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.video-player__iframe-container iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 16/9;
}
.video-player__close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    color: #CCCCCC;
    font-size: 80px;
    transform: rotate(45deg);
    height: 30px;
    line-height: 30px;
    width: 30px;
    cursor: pointer;
}
.video-player__close:hover {
    color: white;
}




/* Blog Page ******************************************/
.blog-container {

}
.blog-post {
    margin: 0 0 16px;
    padding: 16px 0;
    border-bottom: solid 2px #CCC;
}
.blog-post__thumbnail {
    position: relative;
    margin-right: 5%;
    max-width: 300px;
    width: 100%;
}
.blog-post__thumbnail > img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.blog-post__thumbnail:before {
    content: '';
    height: 0;
    padding-bottom: 66.666%;
    display: block;
}
.blog-post__content {
    display: flex;
    padding: 16px 0;
}
.blog-post__content__heading {

}
.blog-post__content__excerpt {
    max-height: 100px;
    overflow: hidden;
}
.blog-post__content__author {
    display: flex;
    margin: 24px 0 0;
}
.blog-post__content__author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 16px;
}
.blog-post__content__author__publish-date {
    display: block;
}



/** Affiliates **************************/
.affiliates-container {
    display: flex;
    margin: auto -32px;
    flex-wrap: wrap;
}
.affiliate-block {
    width: calc(50% - 32px);
    border: solid 1px #CCC;
    box-shadow: 0 2px 4px -2px rgba(0,0,0,0.4);
    border-radius: 3px;
    margin: 16px;
    padding: 16px;
    box-sizing: border-box;
    display: block;
}
@media (min-width: 600px) {
    .affiliate-block {
        width: calc(33.333% - 32px);
    }
}
@media (min-width: 1000px) {
    .affiliate-block {
        width: calc(25% - 32px);
    }
}
.affiliate-block__image {
    text-align: center;
    margin: 0 0 8px;
}
.affiliate-block__image img {
    max-width: 100%;
}
.affiliate-block__original {
    text-decoration: line-through;
    font-weight: bold;
}
.affiliate-block__price {
    text-align: right;

}
.affiliate-block__discount {
    background-color: #32932d;
    color: white;
    padding: 4px 10px;
    margin: 0 0 0 10px;
}