/*
Theme Name: Storefront Child 
Version: 2020.5
Description: Child theme for Storefront. 
Author: Woo
Author URI: http://woocommerce.com 
Template: storefront 
 */

/*
------------------------------------------------
GENERAL
------------------------------------------------
*/

.bold { font-weight: bold;}

.fleft { float: left; margin: 0px 15px 10px 0px;}
.fright {float: right; margin: 0px 0px 15px 20px;
}
h1 { margin-bottom: 2rem; font-family: 'Work Sans', sans-serif; font-kerning: normal; font-weight:400; color: #444; letter-spacing:-2px;}
h2 { margin-bottom: 2rem; font-family: 'Work Sans', sans-serif; font-kerning: normal; font-weight:400; color: #444; letter-spacing:-1px;}
h4 { font-family: 'Work Sans', sans-serif; font-kerning: normal; font-weight:400; color: #444; letter-spacing:-1px;}

.button {border-radius: 5px;}




/* ------------------------------------------------
HEADER AND SITE BRANDING
------------------------------------------------ */

.custom-logo {filter:invert(74%);}  /* invert logo for mobile */
.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {color:#00a4a0;}
button.menu-toggle {border: 1px solid #888;}


@media (min-width:768px){
.custom-logo {filter:invert(0%);}  /* invert logo for mobile only */
.site-header {background-color:#fff}  /* force top part of header to have white bg for desktop  */
.storefront-primary-navigation {background-color:#444;} /* force bottom part of header to have grey bg for desktop  */
}

.storefront-breadcrumb {background-image: url(http://www.muddlarks.com.au/img/hero/muddlarks-bib-n-brace-tulips_2000x860.jpg); background-position: 50% -25rem; background-size: 2000px;margin-bottom:3.1em;  }  /* set bg image for for breadcrumbs  */


@media screen and (min-width: 768px) { /* Make size of logo bigger */
.woocommerce-active .site-header .site-branding img { max-width: 40%; }}







/* ------------------------------------------------
SETTING BRAND LOGO FURTHER LEFT AT WIDER DESKTOP SCREEN WIDTHS
------------------------------------------------ */


@media (min-width: 1400px) {
.woocommerce-active .site-header .site-branding {
    position: absolute;
    left: 15vw; top: 1rem;
	width:55rem; 
	}
}		
		
/* ------------------------------------------------
SETTING NAVIGATION FURTHER out LEFT AT WIDER DESKTOP SCREEN WIDTHS
------------------------------------------------ */
		
@media (min-width: 1400px) {
.primary-navigation {position: absolute; left: 15vw;}
}		
		


/* ------------------------------------------------
SETTING NAVIGATION RIGHT SIDE ELEMENTS OUT wider AT WIDER DESKTOP SCREEN WIDTHS
------------------------------------------------ */
@media (min-width: 1600px) {
	.site-header .site-header-cart {right:-10rem;}
	.woocommerce-active .site-header .site-search {position:relative; right:-10rem;}
	}




/* ------------------------------------------------
TESTIMONIALS PAGE
------------------------------------------------ */
.testimonials div {max-width: 50rem;}
.testimonials img {max-width: 140px;}
.testimonials hr { max-width: 54rem; clear: both; text-align:left;}
.tname {font-size: 0.9rem; font-style: italic;}



/* ------------------------------------------------
ABOUT US PAGE
------------------------------------------------ */
.about-us {max-width: 50rem;}
.about-us hr {margin:0 0 2rem 0; max-width: 60rem;}

/* ------------------------------------------------
FAQs PAGE
------------------------------------------------ */
.faqs {max-width: 60rem;}



/* ------------------------------------------------
SIZE GUIDE PAGE
------------------------------------------------ */
.size-guide p {max-width: 50rem;}
.size-guide hr {margin:2rem 0; max-width: 52rem;}



/* ------------------------------------------------
PRODUCT INFO AND CARE PAGE
------------------------------------------------ */
.piac p {max-width: 50rem;}
.piac hr {margin:2rem 0; max-width: 52rem;}
.remove-indent {margin-left:1.3rem;}

/* ------------------------------------------------
TERMS & CONDITIONS PAGE
------------------------------------------------ */
.tandc p {max-width: 50rem;}
.tandc ul li {max-width: 50rem;}
.tandc hr {margin:2rem 0; max-width: 52rem;}


/* ------------------------------------------------
TERMS & CONDITIONS PAGE
------------------------------------------------ */
.postage-and-payment p {max-width: 50rem;}
.postage-and-payment hr {margin:2rem 0; max-width: 52rem;}
.postage-and-payment div {margin:2rem 0; max-width: 52rem;}



/* ------------------------------------------------
SHOP PAGE - MAKES IT 2 COLUMN FOR MOBILE
------------------------------------------------ */
ul.products li.product {width: 46.411765%; float: left;	margin-right: 5.8823529412%;}

ul.products li.product:nth-of-type( 2n ) {
	margin-right: 0;
}

@media ( min-width: 768px ) {
	ul.products li.product:nth-of-type( 2n ) {
		margin-right: 5.8823529412%;
	}
}


/* ------------------------------------------------
SHOP PAGE - REMOVE ODERING INFO SECTION. -- Note: im using functions.php to also remove this from loading.
------------------------------------------------ */
.storefront-sorting {
    margin-bottom: 2.617924em;
    display: none;
}

/* ------------------------------------------------
SHOP PAGE - Styling H2 headers on shop page.
------------------------------------------------ */
ul.products li.product h2, ul.products li.product h3, ul.products li.product .woocommerce-loop-product__title, ul.products li.product .wc-block-grid__product-title, ul.products li.product .wc-block-grid__product-title > a, ul.products .wc-block-grid__product h2, ul.products .wc-block-grid__product h3, ul.products .wc-block-grid__product .woocommerce-loop-product__title, ul.products .wc-block-grid__product .wc-block-grid__product-title, ul.products .wc-block-grid__product .wc-block-grid__product-title > a, .wc-block-grid__products li.product h2, .wc-block-grid__products li.product h3, .wc-block-grid__products li.product .woocommerce-loop-product__title, .wc-block-grid__products li.product .wc-block-grid__product-title, .wc-block-grid__products li.product .wc-block-grid__product-title > a, .wc-block-grid__products .wc-block-grid__product h2, .wc-block-grid__products .wc-block-grid__product h3, .wc-block-grid__products .wc-block-grid__product .woocommerce-loop-product__title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title, .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-title > a {
font-size: 1.5rem; font-weight:400; margin-bottom:0;
}





/* ------------------------------------------------
SHOP PAGE - Header
------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content .woocommerce-products-header { text-align:left; padding-bottom:2rem;}

}




/* ------------------------------------------------
PRODUCT PAGES -- MAKES DESCRIPTION ETC TABBED WITH CONTENT ON LEFT.
------------------------------------------------ */

@media (min-width: 768px) {
.storefront-full-width-content .woocommerce-tabs ul.tabs { width: 100%; float: none; }
.woocommerce-tabs ul.tabs li { display: inline-block; padding: 0 1em;}
.woocommerce-tabs ul.tabs li.active:after {display: none;}
.storefront-full-width-content .woocommerce-tabs .panel { float: left; }
}

/* ------------------------------------------------
PRODUCT PAGES -- LESSEN THE SPACE AFTER PRODUCT SUMMARY (RIGHT SIDE OF PRODUCT PAGE).
------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content.single-product div.product .summary {
margin-bottom: 2em;}
}
/* ------------------------------------------------
PRODUCT PAGES -- LESSEN THE SPACE AFTER PRODUCT SUMMARY (LEFT SIDE PICTURES OF PRODUCT PAGE).
------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content.single-product div.product .woocommerce-product-gallery {
    margin-bottom: 2em;}
}

/* ------------------------------------------------
PRODUCT PAGES -- shift content upward off top of page
------------------------------------------------ */
.top {position:absolute; left:-3900px; top:-1900px;}



/* ------------------------------------------------
PRODUCT PAGES -- Product area 100% width
------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content .woocommerce-tabs .panel {width:100%; }
}
/* ------------------------------------------------
PRODUCT PAGES -- remove top padding on description / tabs area
------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content.single-product div.product .woocommerce-tabs {padding-top: 0; padding-bottom:6rem; border-bottom:1px solid #ddd; margin-bottom:4rem;}
}


/* ------------------------------------------------
PRODUCT PAGES -- Gallery thumbnail sizing and styling
------------------------------------------------ */
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {opacity: 1;}


.storefront-full-width-content.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
width: 23%; margin-right: 2%;}



/* ------------------------------------------------
PRODUCT PAGES -- Description area for wysiwyg editor
------------------------------------------------ */

.ml-product-page-description > h4 {clear:none;}

.productfontsmall {font-size: color: #999; font-style: italic; font-weight: normal; font-size:66%;}

.stock.in-stock { color: #009e9a;}


/* ------------------------------------------------
PRODUCT PAGES -- images block                   
------------------------------------------------ */
@media (min-width: 768px) {
.product-block-of-images {float:right; width:50%; margin: 0px 0px 1rem 2rem;}
}









/* ------------------------------------------------
CART AND CHECKOUT HEADINGS -- ALIGN LEFT AND LOSE SOME BOTTOM MARGIN ------------------------------------------------ */
@media (min-width: 768px) {
.storefront-full-width-content.woocommerce-cart .entry-header, .storefront-full-width-content.woocommerce-checkout .entry-header, .storefront-full-width-content.woocommerce-account .entry-header, .storefront-full-width-content .woocommerce-products-header {
text-align:left; padding-bottom:2rem;}
}

/* ------------------------------------------------
CART AND CHECKOUT MESSAGES ------------------------------------------------ */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments {
    background-color: #00bbb6 !important;
    color: #fff !important;
}



/* ------------------------------------------------
CART -- remove destination on cart page  ------------------------------------------------ */
.woocommerce-shipping-destination {display: none;}






/* ------------------------------------------------
MAKE NAVIGATION MENU  ITEMS CONDENSED FOR NARROWER SCREEN WIDTHS
------------------------------------------------ */

.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1.618em 0.51em !important;}

@media (min-width: 992px) {
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1.618em 1em !important;}
}






/* ------------------------------------------------
HOME HERO AREA
------------------------------------------------ */


.hero-area {
	background-image:url("http://www.muddlarks.com.au/img/hero/muddlarks-bib-n-brace-tulips_2000x860.jpg");
	background-size: 1400px;
	background-repeat:no-repeat; background-position: 50% 50%; height:64vh; background-color:#ccc;
	}


.hero-message-area  {width: 100%; text-align: center; position:relative; font-size:1.6em;} /* USING EMs TO ANCHOR SIZE */

.hero-message-area h1 {margin-bottom: 2rem; font-family: 'Work Sans', sans-serif; font-kerning: normal; text-shadow:0px 0px 40px #000, 0px 0px 40px #000, 0px 0px 40px #000, 0px 0px 40px #000, 0px 0px 40px #000 ; letter-spacing:-4px;  font-weight:300; line-height:45%; color:#fff;}
.hero-text-smaller {font-weight:400; font-size:0.42em; letter-spacing: 0; margin-left:0.4rem;}
.hero-button { border: 2px solid #fff; border-radius: 15px; /*box-shadow: 0px 0px 18px #000; */font-size: 1.2rem; background: /*#b41f30*/ #009e9a; color:#fff; padding: 1rem 4rem;}

@keyframes glowing {
	0% {background-color: #009e9a; box-shadow: 0 0 0px #fff;}
	50% {background-color: #00bbb6; box-shadow: 0 0 30px #fff;}
	100% {background-color: #009e9a;box-shadow: 0 0 0px #fff;}
      }
.hero-button {animation: glowing 2500ms infinite;}


/* ---------------------------------------------------------------------------------------------------------------------------------  portrait iphone 6 ------------------------ */
@media (min-width: 375px) {
}


/* ---------------------------------------------------------------------------------------------------------------------------------  Landscape Phone ------------------------ */
@media (min-width: 576px) {
}


/* ---------------------------------------------------------------------------------------------------------------------------------  Portrait Tablet  & Storefront Interface change from mobile to Desktop.------- */
@media (min-width: 768px) {
	.hero-message-area  { text-align: left; left: 6rem; width:1140px; margin: 0 auto; font-size:200%;}
	.hero-text-smaller {font-size:0.45em;}

}
/* ---------------------------------------------------------------------------------------------------------------------------------  Landscape Tablet ------------------------ */
@media (min-width: 992px) {
	.hero-message-area  {font-size:240%;}
}

/* ---------------------------------------------------------------------------------------------------------------------------------  Landscape Desktop ------------------------ */

@media (min-width: 1200px) {
		.hero-area {background-size: cover;}
		.hero-message-area  {font-size:260%;}
}


@media (min-width: 1400px) {
		.hero-message-area  {font-size:270%;}
}

@media (min-width: 1600px) {
	.hero-message-area  {font-size:280%;}
}

@media (min-width: 1800px) {
		.hero-message-area  {font-size:290%;}
}

@media (min-width: 2000px) {
	.hero-message-area  {font-size:300%;}
}

@media (min-width: 2200px) {
	.hero-message-area  {font-size:310%;}
}





/* ---------------------------------------------------------------------------------------------------------------------------------  Heights ------------------------ */

.hero-message-area  {top:2rem;}

@media (min-height: 400px) {
.hero-message-area  {top:3rem;}
}


@media (min-height: 500px) {
.hero-message-area  {top:6rem;}
}

@media (min-height: 600px) {
.hero-message-area  {top:7rem;}
}

@media (min-height: 700px) {
.hero-message-area  {top:8rem;}
}

@media (min-height: 800px) {
.hero-message-area  {top:10rem;}
.hero-area {background-size: cover;}
}

@media (min-height: 900px) {
.hero-message-area  {top:12rem;}
}

@media (min-height: 1000px) {
.hero-message-area  {top:14rem;}
}

@media (min-height: 1100px) {
.hero-message-area  {top:16rem;}
}
@media (min-height: 1200px) {
.hero-message-area  {top:18rem;}
}
@media (min-height: 1300px) {
.hero-message-area  {top:20rem;}
}
@media (min-height: 1400px) {
.hero-message-area  {top:22rem;}
}













/* ------------------------------------------------
HOME PAGE TILES (UNDER HERO IMAGE)
------------------------------------------------ */
.homepagetiles {width:85vw; margin: 2rem auto;}
.homepagetiles img {display: block; margin-bottom:1rem; width:100%;}


@media (min-width: 576px) {
.homepagetiles {width:90vw;}
.homepagetiles img {display: inline; margin-left:2vw; margin-bottom:2vw; width:42vw;}
}

@media (min-width: 992px) {
.homepagetiles {width:90vw; margin: 1rem auto 0 auto; }
.homepagetiles img {margin-left:1vw;  margin-bottom:0; width:21vw;}
}

@media (min-width: 1400px) {
.homepagetiles {width:72vw; margin-top: 1vw;}
.homepagetiles img {margin-left:1vw; width:16.6vw;}

}