/*
	Theme Name: 	Podium
	Theme URI:		https://phonepodium.co.za/
	Description: 	Wordpress eCommerce theme for Podium
	Author:			Craig Christians
	Author URI:		https://phonepodium.co.za/
	Template:		ecommerce-gem
	Version:		1.0.0
	Text Domain:	ecommerce-gem-child
*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    background: white;
    height: 100%;
    overflow-y: visible;
}

#page {
    min-height: 100%;
}

.site-content {
    min-height: 50vh;
    clear: both;
    margin: 120px 0;
}

.product_meta {
    clear: both;
}

.wapf-wrapper {
    padding: 30px 0;
}

.wapf-field-label.wapf--above {
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgba(13, 150, 100, 1);
}

.wapf-field-description {
    color: #fa6161;
}

.wc-block-add-to-cart-form .quantity .qty {
    width: 6rem;
    margin-right: .5rem;
}

.mean-container a.meanmenu-reveal span {
    background: black;
}

a.meanmenu-reveal.meanclose {
    background: black;
}

.mean-container .mean-nav ul li a {
    background: black;
}

input.input-text.qty.text {
    width: 6rem;
}

.scrollup {
    bottom: 150px;
}

@media all and (min-width: 1px) {
    #podium-hero-banner {
        width: 100%;
        min-height: 45vh;
        clear: both;
        background-color: rgba(250, 97, 97, 1);
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    #podium-hero-banner #podium-hero-banner-image {
        width: 100%;
        height: 100%;
        background-image: url("images/podium-2.png");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        position: absolute;
    }

    #podium-hero-banner #podium-hero-banner-wrapper {
        padding: 20px;
        width: 70%;
        max-width: 1230px;
        height: 100%;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-title {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-title h1.podium-hero-banner-title {
        font-size: 2rem;
        color: whitesmoke;
        text-align: left;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-caption {
        width: 100%;
        padding: 10px 0 30px 0;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-caption p.podium-hero-banner-caption {
        /*color: #fa6161;*/
        color: whitesmoke;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-button {
        width: 100%
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-button a.podium-hero-banner-button {
        background-color: rgba(255, 255, 0, 1);
        /*color: #2e2e2e;*/
        color: rgba(250, 97, 97, 1);
        padding: 15px 45px;
        transition: ease all 200ms;
        font-weight: 600;
        text-transform: uppercase;
        border-radius: 50px;
        letter-spacing: 2px;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-button a.podium-hero-banner-button:hover {
        background-color: rgba(65, 234, 113, 1);
        color: #3a9b56;
        transform: scale(1.1);
        padding: 15px 55px;
        transition: ease all 200ms;
    }

    .woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {
        width: 100%;
    }

    .woocommerce-result-count {
        display: none;
    }

    p.custom-footer-text {
        text-align:right;
        color: #918f9d;
        font-size: 18px;
        line-height: 1;
    }

    ul.products {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #footer-widgets h2.wp-block-heading {
        color: white;
    }
}

@media all and (min-width: 410px) {
    #podium-hero-banner {
        min-height: 35vh;
    }

    #podium-hero-banner #podium-hero-banner-wrapper {
        width: 65%;
    }
}

@media all and (min-width: 414px) {
    #podium-hero-banner {
        min-height: 35vh;
    }
}

@media all and (min-width: 600px) {
    #podium-hero-banner {
        min-height: 45vh;
    }
}

@media all and (min-width: 768px) {
    #podium-hero-banner {
        min-height: 45vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 20%;
    }

    .woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {
        width: 40%;
    }
}

@media all and (min-width: 800px) {
    #podium-hero-banner {
        min-height: 40vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 25%;
    }
}

@media all and (min-width: 900px) {
    #podium-hero-banner {
        min-height: 50vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 20%;
    }
}

@media all and (min-width: 1020px) {
    #podium-hero-banner {
        min-height: 60vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 25%;
    }
}

@media all and (min-width: 1330px) {
    #podium-hero-banner {
        min-height: 50vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 15%;
    }
}

@media all and (min-width: 1360px) {
    #podium-hero-banner {
        min-height: 60vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 12%;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-title h1.podium-hero-banner-title {
        font-size: 3rem;
    }
}

@media all and (min-width: 1920px) {
    #podium-hero-banner {
        min-height: 60vh;
        justify-content: center;
    }

    #podium-hero-banner #podium-hero-banner-image {
        height: 18%;
    }

    #podium-hero-banner #podium-hero-banner-wrapper #podium-hero-banner-title h1.podium-hero-banner-title {
        font-size: 3rem;
    }
}