/*
Theme Name: meerkat
Version: 1.0
Description: WordPress theme for meerkat poster
Author: INSPIRE
Author URI: http://www.inspiredc.co.uk
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meerkat

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
html, body { height: 105% }
body { font-family: 'Didact Gothic', sans-serif; font-size: 1em; color:#000; margin:0; font-weight:400; background: rgba(175, 206, 209, 0.3) ; }
.inwrap { width: 100%; display: flex; flex-direction: column; min-height: 100%}
.contentwrap { width: 86%; margin: 0 auto; display: flex; justify-content: space-between; background: rgba(255,255,255,0.7); padding: 0 7% 2%}
.content { width: 75%; }
.content100 { width: 100% }
a, a:link, a:active, div a { text-decoration:none; }

@font-face { font-family: 'Didact Gothic'; font-style: normal; font-weight: 400; src: local(''), url('fonts/didact-gothic-v19-latin-regular.woff2') format('woff2') }

/* Font Size */
/* Variables */
:root {
--global--font-size-base: 1.25rem;
--global--font-size-xs: 1rem;
--global--font-size-sm: 1.125rem;
--global--font-size-md: 1.25rem;
--global--font-size-lg: 1.5rem;
--global--font-size-xl: 2.25rem;
--global--font-size-xxl: 4rem;
--global--font-size-xxxl: 5rem;
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
}
:root .is-extra-small-text,
:root .has-extra-small-font-size {
	font-size: var(--global--font-size-xs);
}

:root .is-small-text,
:root .has-small-font-size {
	font-size: var(--global--font-size-sm);
}

:root .is-regular-text,
:root .has-regular-font-size,
:root .is-normal-font-size,
:root .has-normal-font-size,
:root .has-medium-font-size {
	font-size: var(--global--font-size-base);
}

:root .is-large-text,
:root .has-large-font-size {
	font-size: var(--global--font-size-lg);
	line-height: var(--global--line-height-heading);
}

:root .is-larger-text,
:root .has-larger-font-size,
:root .is-extra-large-text,
:root .has-extra-large-font-size {
	font-size: var(--global--font-size-xl);
	line-height: var(--global--line-height-heading);
}

:root .is-huge-text,
:root .has-huge-font-size {
	font-size: var(--global--font-size-xxl);
	line-height: var(--global--line-height-heading);
	font-weight: var(--heading--font-weight-page-title);
}

:root .is-gigantic-text,
:root .has-gigantic-font-size {
	font-size: var(--global--font-size-xxxl);
	line-height: var(--global--line-height-heading);
	font-weight: var(--heading--font-weight-page-title);
}


/*** Header ***/
.header { margin: 0 auto; width:100%; float:left; position:relative; padding: 0; }
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; width: 96%; margin: 0 auto }
.header .logonavwrapper .logo { position: relative; z-index: 1000; background: url(images/meerkat.svg) no-repeat left; width:200px; height: 80px; }

.header .logonavwrapper .basket { font-size: 2em; display: flex; align-items: center; margin: 0 2em 0 auto }
a.basketlocation { width: 30px; height: 30px; border-radius: 50%; float: left;text-align: center; margin: 0 0 0 3px; font-size:24px; border: 2px solid #000; line-height: 28px; font-weight: 600; color: rgba(225,29,25,1) }
span.dashicons-cart { color: #000; height: 30px; line-height: 30px; float: left; margin: 0 5px 0 0; font-size: 24px}

/*** Mini Cart ***/
.wc-block-mini-cart__badge { background: #fff200 !important; border: 3px solid #000; color: rgba(225,29,25,1) }
.wc-block-components-drawer__screen-overlay { z-index: 100000 }

/*** Content Home ***/
.home .postContent h1 { font-size: calc(30px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); }
.home .postContent h1 a { color: #fff }
.home .postContent h2 { font-size: 5vw; margin: 0.5em 0 }
.home .postContent h3 { font-size: 2.75vw; margin: 0.5em 0 }

/*** Content ***/
 h1, h2,h3, h4, h5, h6 { font-family: 'Didact Gothic'; font-weight: 600; line-height: 160% }
.page { float:left; width:100%; }
.postContent a { color: #3d3938; text-decoration:underline }
.postContent h1 { margin:0.5em 0 ;  font-size: calc(22px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); }
.postContent h2 { margin:0.5em 0 ; font-size: calc(18px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); }
.postContent h3 { font-size: 1.75em; margin: 1em 0; line-height:110%; }
.postContent h4 { font-size: 1.5em; margin: 1em 0; }
.postContent h5 { font-size: 1.25em; margin: 1em 0; line-height:135%; }
.postContent h6 { font-size: 1.2em; margin: 1em 0; line-height:130%; }
.postContent p { margin: 1em 0 ; line-height:160%; font-size: 1.25em }
.postContent p.intro { font-size: 1.4em; margin: 1em 0 ; line-height:150%; }
.postContent p sup, .postContent p sub { font-size: 0.5em; }
.postContent ul { margin: 5px 0px 5px 0; list-style:inside }
.postContent ol li { padding:5px 0; font-size: 1.1em}
.postContent ol { margin: 5px 0px 5px 22px; }
.postContent hr { width:100%; margin: 5px 0 15px; border-top: 1px solid #000; float:left; border-bottom:none; border-left:none; border-right:none }
.postContent img { max-width: 100%; height:auto; display: block}
.postContent a.post-edit-link {float:left; margin: 2% 0; clear:both}

/*** Footer ***/
.footer { width: 96%; height:auto; margin: 3em auto 1em; font-size:0.75em; clear:both; line-height:140%; float:left; color: #000 }
.footer .fleft { width: 50%; float: left; margin: 1% 0; }
.footer .fright { width: 50%; float: left; text-align:right; margin: 1% 0; }
.footer ul.social-media-icons { font-size: 2.5em; display: flex; list-style: none; margin: 0 0 1em; }
.footer ul.social-media-icons li { margin: 0 1em 0 0; }

/*** Footer Navigation ***/
.footer ul#footer-menu { margin: 1% auto 0; width: 100%; display: flex; grid-gap: 2em}
.footer ul#footer-menu li { display:inline-block; }

/*** WooCommerce ***/
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.5em; text-align: center}
.woocommerce ul.products li.product .price { color: #000; font-size: 1.25em; text-align: center}
.woocommerce div.product p.price, .woocommerce div.product span.price { color: #000; }
.woocommerce-checkout #payment ul.payment_methods li { list-style: none}
.woocommerce a.button, .woocommerce button.button.alt.disabled, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button, .woocommerce button.button, .woocommerce button.button.alt, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { background: rgba(0,0,0,0.85); color: #fff000; float: none; display: inline-block}
.woocommerce a.button:hover, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce button.button:hover, .woocommerce button.button.alt:hover, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled]:hover, .woocommerce button.button.alt.disabled:hover { background: rgba(0,0,0,1); color: #fff000 }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { text-align: center}
.woocommerce .woocommerce-ordering, .woocommerce-shipping-destination, .woocommerce .woocommerce-result-count { display: none }
.woocommerce .quantity .qty { display: block; margin: 0 auto}
.woocommerce .quantity input[type=number] { -moz-appearance: textfield; border-top: 1px solid #999; border-bottom: 1px solid #999; border-left: none; border-right: none; font-size: 1.1em; color: #000; border-radius: 0px; background: inherit; font-family: 'Bodoni Moda', serif; width: 2em; margin: 0 }
span.quantity__button, span.quantity__minus { border: 1px solid #999; display: flex; text-align: center; padding: 0.5em; cursor: pointer; align-items: center }
.woocommerce .quantity { margin-bottom: 1rem !important; display: flex; flex-wrap: wrap; width: 100% }
.woocommerce .quantity input[type=number]::-webkit-inner-spin-button, .woocommerce .quantity input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.shortdescription { text-align: center}
.woocommerce-Price-amount { margin: 0; display: block}
span.woocommerce-Price-amount { display: inline-block; }
span.price span.woocommerce-Price-amount bdi { font-size: 1.25em; font-weight: 600 }
.woocommerce div.product form.cart .variations td.label { width:2.5em; line-height: 2em; vertical-align: middle}
.woocommerce div.product form.cart .variations select { vertical-align: middle; -webkit-appearance: none; border-radius: 3px !important; line-height: 2em; padding: 0 30px 0 5px; border: 1px solid rgba(0,0,0,0.3) !important; font-size: 1em; min-width: auto; background: url(images/down.svg) no-repeat center right 10px/10px; margin: 0 5px; max-width: 60% }
.woocommerce div.product form.cart .variations select:after { content: ' ▼'; font-size: 30px; line-height: 2em; padding-right: 5px; }
p.out-of-stock { font-weight: 700; color: #bfb0d0}
p.demo_store { z-index: 20000; background: #bfb0d0; font-size: 1.5em; color: #000; }
.woocommerce-variation-price { margin: 1em 0}
.woocommerce table.shop_table td del span.woocommerce-Price-amount { text-decoration: line-through; }
.woocommerce table.shop_table { border-collapse: collapse}
.woocommerce-page input#coupon_code { width: auto; line-height: 1; padding: 9px 5px; max-width: 50%}
.woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images { width: 50% }
section.related { float: left; width: 100%}
.woocommerce div.product form.cart .variations { margin: 1em 0}
.woocommerce a.added_to_cart { display: block }
li.wpmenucartli a.wpmenucart-contents span { color: #fff; border-radius: 50%; padding: 0.25em; text-align: center; font-size: 15px !important; width: 22px; height: 22px; line-height: 22px; border: 1px solid #fff }
.wc-block-grid__product .wc-block-grid__product-price, .wc-block-grid__product-title { font-size: 1.5em}
.wp-block-button.wc-block-components-product-button a { color: #fff }
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link { font-size: 1.5em; border-radius: 5px; text-decoration: none; background: #bfb0d0; color: #fff}
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover { background: #858dc2}
.woocommerce ul#shipping_method li input { margin: 5px 5px 0 0}
.woocommerce-checkout #payment ul.payment_methods li { list-style: none }
.woocommerce-checkout #payment ul.payment_methods li img.stripe-icon { display: inline }
.woocommerce-checkout #payment, .woocommerce-checkout #payment div.payment_box { background: rgba(255,255,255,0.5)}
.woocommerce-checkout #payment div.payment_box::before { display: none }
.woocommerce div.product div.images .flex-control-thumbs li { width: 20%; padding: 0 }
.woocommerce div.product .product_title { margin: 1em 0}
a.added_to_cart { display: block; margin: 5px 0; font-size: 1.25em }
.soldout { background: #e11d19; position: absolute; right: 0; width: 30px; height: 30px; border-radius: 15px; bottom: 0 }
.woocommerce div.product p.stock { display: none }
.woocommerce ul.products li.outofstock .price {display: none }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea { padding: 1em }

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 900px) {
.home .postContent h2 { font-size: 8vw; }
.home .postContent h3 { font-size: 5vw; }
.contentwrap { width: 90%; flex-direction: column}
.content { width: 100%; }
.footer { width: 90%; }
}

@media only screen and (max-width : 600px) {
.header .logonavwrapper { padding: 0 5%; width: 90%}
.header .logonavwrapper .logo { width:100px; height: 35px}
.header .logonavwrapper .basket { margin: 0 1em 0 auto}
.home .postContent h2 { font-size: 8vw; }
.home .postContent h3 { font-size: 5vw; }
.contentwrap { width: 90%; flex-direction: column; padding: 0 5%}
.footer { width: 90%; }
.woocommerce-page div.product div.images { width: 100% }
.summary { width: 100% }
}