/* General
--------------------------------------- */
button,
button:visited,
button:focus {
    color: #000;
}
.button,
.button:visited,
.button:focus {
    background: transparent !important;
    color: #000 !important;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: 1em !important;
    padding: 0.5em 1em !important;
    border: solid 1px !important;
}
.button:hover {
    background: #00e749 !important;
}

.clear {clear: both;}


/* Fields
--------------------------------------- */

[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number], [type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea {
    border-color: #000;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {/* color: #000; */}

.select2-container--default .select2-selection--single {border-color: #000;border-radius: 0;height: 2.3em;}

span.select2-selection.select2-selection--single {}

.select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 2.2em;color: #000;}




/* Header
--------------------------------------- */

.SearchControl-input {
    border-bottom: solid 1px;
}

/* Footer
--------------------------------------- */

.footer-menus {
    display: flex;
    flex-wrap: wrap;
    max-width: 20em;
}
.footer-menus > * {
    width: 50%;
}
.Footer-inner {
    padding: 3rem 1.25rem 2.5rem;
}


/* Issues
--------------------------------------- */

@media print, screen and (min-width: 40em){
    .position-left {
        width: 320px;
    }
}


/* Related 
--------------------------------------- */


.related-stories {
    border-top: solid 1px;
    margin-top: 5em;
    clear: both;
}



.related-stories .title {
    text-align: center;
    padding: 2em;
    text-transform: uppercase;
}
@media (max-width: 768px) {
    .related-stories {
        margin-top: 2em;
    }
}


/* Single 
--------------------------------------- */

.buynow-standout {

    width:14em;
}
.buynow-standout p {
    margin-top: 1rem;

}

@media (max-width: 768px) {
    .buynow-standout {
        width: auto;
    }
    .NextPostLink {
        display: none !important;
    }
    .support-widget {
        display: none !important;
    }
}


/* homepage slider 
--------------------------------------- */



.homeslide {
    position: relative;
    width: 100%;
    min-height: 45em;
    
}
.homeslide p {
    max-width: 24em;
}
.homeslide .content {
    box-sizing: border-box;
    padding: 1.25rem;
}
.homeslide .image {
    display: block;
    background-color: #000;
    background-size: cover;
    background-position: center;
    height: 100vw;
}
.homeslide .full-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    background-size: cover;
    background-position: center;
}

.homeslide .button {
    margin: 0.75em 0;
    position: absolute;
    bottom: 1em;
}
.homeproduct-carousel {
    width: 100%;
    border-bottom: solid 1px;
}
.homeproduct-carousel {
    opacity: 0;
    transition: .5s;

}
.homeproduct-carousel.active {
    opacity: 1;

}
.homeproduct-carousel .slide {
    opacity: 0;
}
.homeproduct-carousel .slide.is-selected {
    opacity: 1;
}

.homeproduct-carousel .slide {
    width: 100%;
}

.homeslide h1 {
    font-size: 2.5rem;
}

.homeslide p {
    font-size: 1.4em;

}   
/* .homeslide {
    height: calc(100vh - 7.225rem);    
} */
.homeproduct-carousel .flickity-prev-next-button.previous {top: auto;bottom: 0em; left:auto; right: 5em}
.homeproduct-carousel .flickity-prev-next-button.next {top: auto;bottom: 0em;left: auto;right: 1em;}
.flickity-button:disabled {
    opacity: 0;
}  
.flickity-button {
    color: #000 !important;
    fill:#000 !important;
}
@media (min-width: 450px) {

    .homeslide .button {
        position: relative;
        bottom: auto;
    }
}

@media (min-width: 990px) {
    .homeslide {
        display: flex;
        align-items: center;
        min-height: auto;
        height: calc(85vh - 5.225rem);    

        
    }
    .homeslide .image {
        position: absolute;
        top: 1em;
        right: 0;
        width: 55%;
        height: auto;
        bottom:1em;
    }    
    .homeslide .content {
        width: 45%;
        padding: 3em;

    }    
    .homeproduct-carousel .flickity-prev-next-button.previous {top: auto;bottom: 0; right:auto; left: 2.5em;}
    .homeproduct-carousel .flickity-prev-next-button.next {top: auto;bottom: 0;right: auto;left: 7em;}
    
}
@media (min-width: 40em) {
    .homeslide h1 {
        font-size: 4rem;
    }
    .homeslide .button {
        font-size: 1.2em !important;
    }
}



/* Header 
--------------------------------------- */

.wonderground-header {
    background-color: #fff;
    z-index: 1003;
    width: 100%;
    top: 0;
    max-height: none;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 3.625rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    box-sizing: border-box;
}

.nav-icons {
    display: flex;
    align-items: center;
    margin: 0;
}
.nav-icons li {
    list-style: none;    
    display: flex;
    align-items: center;

}
.nav-icons img {
    width: 1em;
}
.cart-qty {
    font-size: .5em;
    position: absolute;
    margin-left: 0.2em;
}
.nav-icons a {

    display: block;
    padding: 0.5rem;
}
.nav-icons .open-side-menu-btn {
    position: relative;
    width: 1em;
    height: 1em;
    margin-left: 1em;
}
.nav-icons .open-side-menu-btn em {
    display: block;
    height: 1px;
    margin: 4px 0;
    background: #000;
    position: relative;
    
}
.desktop-menu {
    display: none;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: .8em;
}
.desktop-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    display: inline-block;
}
.desktop-menu a {
    padding: 2.75em .75em;
    position: relative;
    display: block;
}
.desktop-menu a span {
    position: relative;
    display: block;

}
.desktop-menu a span:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    height: .5em;
    width: 100%;
    bottom: 0.05em;
    height: 0.4em;
    opacity: 0;
    background-color: #00e749;
    mix-blend-mode: multiply;
}
.desktop-menu > li > a {
    text-transform: uppercase;

}
.desktop-menu a:hover {
    color: #000;
}
.desktop-menu a:hover span:after {
    opacity: 1;

}

.desktop-menu a.button {
    margin-bottom: 0;
    margin-right: 1em;
}
.desktop-menu li:hover .sub-menu {
    display: block;
}
.sub-menu {
    position: absolute;
    margin: 0;

    position: absolute;
    margin: 0;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    display: none;
    min-width: 26em;
    flex-wrap: wrap;
}
.sub-menu li {
    display: block;
}
.sub-menu a {
    display: inline-block;
}
.sub-menu.more-than-3  {
    columns: 2;
}
.sub-menu.more-than-6  {
    columns: 3;
}
.sub-menu.more-than-9  {
}



.sub-menu:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: -50vw;
    right: -150vw;
    background-color: #FFF;
    height: 100%;
    border-bottom: solid 1px #000;
    z-index: -1;
}
.sub-menu a {
    padding: 0em 1em .5em 1em;
}
.Header-logo {
    width: 12rem;
}

@media (min-width: 1200px) {
    body {
        padding-top: 5.225rem;
    }
    .wonderground-header {
        border-bottom: solid 1px #000;
        height: 5.225rem;
    }
    .nav-icons img {
        width: 1.1em;
    }
    .nav-icons .open-side-menu-btn {
        display: none;
    }
    .nav-icons a {
        padding: 0.5rem 0rem 0.5rem 1rem;

    }
    .desktop-menu {
        display: flex;
    }    
    .Header-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 14rem;
    
    }

}@media (min-width: 1250px) {

    .desktop-menu a {

        /* padding: 1em 2.75em ; */
    }
}


/* Search form 
--------------------------------------- */

.SearchControlSearchControlSlideout {
    position: absolute;
    right: 5em;
    background: #fff;
    display: none;
}
.SearchControlSearchControlSlideout.open {
    display: block;
}
@media (min-width: 1200px) {

    .SearchControlSearchControlSlideout {
        right: 3em;
    }
}



/* mobile menu
------------------------------- */

.mobile-sub-menu,
.mobile-menu-wrap {
    position: fixed;
    top: 3.625rem;
    bottom: 0;
    background-color: #fff;
    left: 0;
    width: 100%;
    z-index: 1003;
}
.mobile-sub-menu {
    top: 3rem;

}
.mobile-menu-wrap {
    top: 3.625rem;

}


.mobile-menu {
    padding-top: 3em;
    margin: 0;
}
.mobile-sub-menu li:first-of-type,
.mobile-menu li:first-of-type {

    border-top: solid 1px rgba(0,0,0,.5);
}
.mobile-sub-menu {
    margin: 0;
    padding: 0;

}
.mobile-sub-menu {
    z-index: 2;
    background-color: #FFF;
}


.mobile-sub-menu li,
.mobile-menu li {
    border-bottom: solid 1px rgba(0,0,0,.5);
    padding: 0 1.25rem;
    position: relative;
    list-style: none;
}


.open-submenu {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 3em;
    background-color: #000;
    background: url(https://wonderground.press/images/flickity-arrow.svg) no-repeat center;
    background-size: 1em;


}

.close-submenu {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    top: -2.5em;
    background-color: #000;
    background: url(https://wonderground.press/images/flickity-arrow.svg) no-repeat right;
    background-size: 1em;
    transform:rotate(180deg);
    height: 2em;
}


.mobile-sub-menu a,
.mobile-menu a {
    font-size:1.35rem;
    display: inline-block;
    padding: 1.25rem 0;
}

.mobile-menu-wrap .subscribe-btn {
    position: absolute;
    bottom: 1em;
    left: 1.25rem;
    z-index: 1;
}











.mobile-menu-wrap,
.mobile-sub-menu {
    transition: .5s;
    transform: translateX(100%);

}
.mobile-menu-wrap.open,

.mobile-menu li.open .mobile-sub-menu {
    transform: translateX(0%);

}



@media (min-width: 1200px) {
    .mobile-sub-menu, 
    .mobile-menu-wrap {
        display: none;
    }
}




/* Contributers
============================== */

ul.contributors-list {margin: 0;padding: 0;padding: 1.5rem;max-width: 67rem;margin: 2em auto;}

ul.contributors-list li {list-style: none;margin: 0;padding: 0;}

ul.contributors-list a {text-decoration: underline;}
ul.contributors-list a:hover {text-decoration: none;}


@media (min-width: 768px) {
    ul.contributors-list {
        column-count: 2;
    }
}
@media (min-width: 990px) {
    ul.contributors-list {
        column-count: 4;
    }
}


/* Log out
============================== */

.is_issue {
    position: relative;
}
.is_issue:after {
    content: '';
    display: inline-block;
    background: url(https://wonderground.press/images/lock.png) no-repeat center;
    width: 0.7em;
    height: 0.7em;

    margin-left: 0.25em;
    background-size: contain;
}




/* Leaky paywall
============================== */

/* login */
#leaky-paywall-login-form {border: solid 1px;box-shadow: navajowhite;}



/* Profile */

h2.leaky-paywall-profile-subscription-title {font-size: 1.25em;}

h2.leaky-paywall-your-profile-header {font-size: 1.25em;}

h2.leaky-paywall-subscription-status-header {font-size: 1.25em;}

table.leaky-paywall-profile-subscription-details {margin-bottom: 2em; width: 100%;}

table.leaky-paywall-profile-subscription-details tr, 
table.leaky-paywall-profile-subscription-details th 
{display: block;text-align: left;}


/* Register */

body.register .leaky-paywall-subscription-details-wrapper {display: none;}

/* Register popup */

#leaky_paywall_message {border: solid 1px;border-radius: 0;box-shadow: none;background: #fff;}




/* subscribe-to-wonderground */

.leaky_paywall_subscription_option {border: solid 1px;border-radius: 0;}

.leaky-paywall-payment-button a {
    color: #000;text-transform: uppercase;border: none;border-radius: 0;background: transparent;
    border: solid 1px;
}

.leaky-paywall-payment-button a:hover {
    background-color: #00e749;
    color: #000;
    border: solid 1px;
}

h2.subscription-options-title {
    font-size: 1.25em;
}

.leaky_paywall_subscription_allowed_content {
    border-top-color:#000;

    border-bottom-color:#000;
}


/* register */

#leaky-paywall-submit,
#leaky-paywall-registration-next,
.leaky-paywall-checkout-button button {
    color: #000;text-transform: uppercase;border: none;border-radius: 0;background: transparent;
    border: solid 1px;
    text-transform: uppercase;
    text-decoration: none;
}
#leaky-paywall-submit:hover,
#leaky-paywall-registration-next:hover,
.leaky-paywall-checkout-button button:hover {
    text-decoration: none;
    background-color: #00e749;
    color: #000;
    border: solid 1px;
}
.leaky-paywall-account-fields input,
.leaky-paywall-user-fields input {
    border: solid 1px;
}
.leaky-paywall-user-fields h3,
.leaky-paywall-account-fields h3
 {margin: 2em 0 1em 0;}



 h3.leaky-paywall-subscription-details-title {margin-bottom: 1em;}

ul.leaky-paywall-subscription-details {padding-left: .95em;}



#leaky_paywall_message a {
    font-weight: normal;
}
#leaky_paywall_message h3 {
    margin-bottom: 1em;
}
#leaky_paywall_message p.button-wrap {
    margin-bottom: 0;
}
#leaky_paywall_message .button {

    margin-right: 0;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    vertical-align: middle;

}

.leaky_paywall_message_wrap p {
    font-size:1.2em;
}

.leaky_paywall_message_wrap ul {
    padding-left: 1em;
}

.leaky_paywall_message_wrap h3 {
    font-weight: 700;
}