/* --------------------------------------------------------------------------------- AUSSIE HEALTH PRODUCTS Shared Styles for ALL Devices --------------------------------------------------------------------------------- */ #gf-header { float: left; width: 100%; padding: 50px 0 60px 0; background: url(../jpg/bread.jpg) no-repeat center center #8c5d38; background-size: 100% auto; text-align: center; } #gf-header h1 { color: #fff; text-transform: uppercase; float: left; width: 100%; font-size: 50px; line-height: 0.8em; margin: 0; padding-top: 35px; background: url(../png/icon-wheat.png) no-repeat center 0; } #gf-header h1 span { float: left; width: 100%; clear: both; color: #dbcbc0; font-size: 28px; } #wf-header { float: left; width: 100%; padding: 100px 0; background: url(../jpg/wholefoods.jpg) no-repeat center 0 #e5e9d7; background-size: 100% auto; text-align: center; } #wf-headline { float: left; width: 80%; padding: 40px 10%; margin: 0; text-align: center; border-bottom: solid 1px #ccc; background: #fff; } #wf-headline h1 { margin: 0 0 15px 0; font-size: 50px; } #wf-headline p { font-size: 20px; line-height: 28px; max-width: 900px; margin: 0 auto; } #cats-round { float: left; width: 100%; padding: 40px 0 40px 0; text-align: center; } #cats-round .callout { float: left; width: 21%; padding: 20px 2%; } #cats-round .callout .thumb { width: 170px; margin: 0 auto 15px auto; } #cats-round .callout .thumb a { border: solid 1px #e1e1e1; display: block; width: 130px; height: 110px; padding: 30px 20px; background: #fff; -moz-border-radius: 50%; border-radius: 50%; } #cats-round .callout .thumb a:hover { border: solid 1px #32302B; } #cats-round .callout .thumb img { height: 110px; width: auto; } #cats-round .callout .btn-wrap { float: left; width: 100%; margin-top: 5px; } #cats-round.two-split .callout { width: 42%; padding: 20px 4%; } #cats-round.three-split .callout { width: 27.3%; padding: 20px 3%; } #cats-round.five-split .callout { width: 16%; padding: 20px 2%; } #cats-round .callout .thumb-v2 { margin: 0 auto 20px auto; height: 160px; overflow-y: hidden; } #cats-round .callout .thumb-v2 img { height: 160px; width: auto; } #cats-round .sub { text-transform: uppercase; letter-spacing: 0.2em; color: #725d51; } #cats-round h3 { font-size: 1.5em; font-weight: bold; color: #32302b; text-transform: uppercase; line-height: 1.0em; } #cats-round h3 a { color: #32302b; text-decoration: none; } #cats-round.five-split h3 { font-size: 1.2em; line-height: 1.0em; } #cats-round h2, #feature-info h2, #feature-info-more h3 { font-size: 22px; font-weight: bold; line-height: 1.3em; } #feature-info { float: left; width: 60%; padding: 50px 20% 20px 20%; border-top: solid 1px #e0e1dc; text-align: center; } #feature-info p { font-size: 1.1em; line-height: 1.4em; font-weight: 300; } #feature-info-more { float: left; width: 80%; padding: 50px 10% 30px 10%; border-top: solid 1px #e0e1dc; } #feature-info-more h3 { color: #32302b; margin: 0 0 15px 0; } #feature-info-more p.lg { font-size: 1.1em; line-height: 1.4em; font-weight: 300; } #feature-info-more h4 { color: #0A579B; font-size: 1.1em; margin: 0 0 20px 0; } #food-categories { float: left; width: 100%; border-top: 1px solid #e0e1dc; padding: 30px 0 0 0; } #food-categories li { float: left; width: 45%; padding: 20px 5% 20px 0; list-style-type: none; min-height: 200px; } #food-categories li img { float: left!important; width: 36%; margin: 0; background: #fff; } #food-categories h2 { float: right; width: 59%; font-weight: 700; } #food-categories li p { float: right; width: 59%; margin: 0; } #food-categories li a { text-transform: none; color: #bc0000; } #food-categories .action { float: right; width: 59%; padding-top: 35px; } #food-categories .action a { color: #fff; } #promo-content table { width: 100%; border-bottom: solid 1px #ccc; margin: 0 0 20px 0; } #promo-content table th { border: solid 1px #ccc; background: #efefef; padding: 5px; text-align: left; font-size: 0.9em; } #promo-content table td { border: solid 1px #ccc; padding: 5px; font-size: 0.8em; } #promo-content table p { font-size: 1.0em; margin: 0; } #wf-list { float: left; width: 100%; padding: 30px 0 0 0; margin: 10px 0 30px 0; border-top: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; } #wf-list ul { float: left; width: 100%; padding: 0; margin: 0 0 30px 0; } #wf-list ul li { float: left; width: 23%; list-style-type: none; padding: 0 2% 2% 0; } #wf-list ul li a { float: left; width: 88%; padding: 10px 6%; margin: 0; background: #efefef; -moz-border-radius: 5px; border-radius: 5px; } /* --------------------------------------------------------------------------------- WHOLEFOODS PAGES --------------------------------------------------------------------------------- */ #wholefoods-heading-wrap { float: left; width: 90%; background: #f3f1ec; text-align: center; padding: 50px 5%; } #wholefoods-heading-wrap h1 { margin: 0 0 10px 0; font-size: 50px; } #wholefoods-heading-wrap .thumb { } #wholefoods-heading-wrap .thumb img { width: 90px; height: 90px; border: solid 10px #f3f1ec; margin: 0 0 -100px 0; -moz-border-radius: 50%; border-radius: 50%; } #wholefoods-content-wrap { float: left; width: 100%; padding: 75px 0; } #wholefoods-content { width: 820px; margin: 0 auto; } #wholefoods-content-wrap strong { color: #074689; } #wholefoods-content h3 { margin: 0 0 0.6em 0; } #wholefoods-content .intro { float: left; width: 80%; padding: 0 10% 10px 10%; text-align: center; } #wholefoods-content .intro p { font-size: 20px; line-height: 28px; } #wholefoods-nav { float: left; width: 100%; border-top: solid 1px #ababab; padding: 10px 0; margin: 0; } #wholefoods-nav ul { margin: 0 auto; padding: 0; text-align: center; } #wholefoods-nav ul li { display: inline; list-style-type: none; padding: 0; margin: 0; } #wholefoods-nav ul li span { padding: 0 12px; } #wholefoods-nav ul li a { text-transform: uppercase; text-decoration: none; color: #666; } #wholefoods-nav ul li a:hover { color: #073462;} #wholefoods-content h2 { font-size: 25px; font-weight: bold; margin: 0 0 20px 0; } #wholefoods-content h3 { color: #32302B; } #wholefoods-content-one p, #wholefoods-content-two p, #wholefoods-content ul li, #wholefoods-nutrition p, #wholefoods-benefits p, #wholefoods-conclusion p { font-size: 1.07em; line-height: 1.5em; } #wholefoods-content-one { float: left; width: 100%; padding: 40px 0 20px 0; border-top: solid 1px #ababab; } #wholefoods-content-two { float: left; width: 100%; padding: 0px 0 20px 0; } #wholefoods-nutrition { float: left; width: 100%; padding: 10px 0; } #wholefoods-benefits { float: left; width: 100%; padding: 10px 0; } #wholefoods-faq { float: left; width: 100%; padding: 0; } #wholefoods-conclusion { float: left; width: 100%; padding: 0; } #wholefoods-top-selling { float: left; width: 90%; padding: 20px 5% 40px 5%; margin: 0 0 40px 0; background: #fff; border: solid 1px #c8c8c7; text-align: center; } #wholefoods-top-selling ul { float: left; width: 100%; margin: 0; padding: 0; } #wholefoods-top-selling ul li { float: left; width: 29%; padding: 0 2%; list-style-type: none; margin: 0; } #wholefoods-top-selling ul li .thumb { float: left; width: 100%; padding: 15px 0; } #wholefoods-top-selling ul li .thumb img { height: 160px; width: auto; max-width: 100%; } #wholefoods-top-selling ul li a { color: #505050; } #wholefoods-top-pick { float: left; width: 90%; padding: 40px 5% 40px 5%; margin: 0 0 40px 0; background: #fff; border: solid 1px #c8c8c7; } #wholefoods-top-pick .thumb { float: left; width: 32%; text-align: center; } #wholefoods-top-pick .thumb img { height: 235px; width: auto; max-width: 90%; } #wholefoods-top-pick .details { float: right; width: 65%; } #wholefoods-top-pick .top-pick { float: left; width: 100%; margin: 0 0 10px 0; } #wholefoods-top-pick .top-pick span { float: left; background: url(../png/icon-star-white.png) no-repeat 12px center #ffba00; color: #fff; text-transform: uppercase; font-size: 19px; font-weight: bold; } #wholefoods-top-pick .top-pick span span { padding: 5px 40px; background: url(../png/icon-star-white.png) 92% center no-repeat; } #wholefoods-top-pick h3 { color: #32302c; font-size: 21px; margin: 0 0 15px 0; } #wholefoods-top-pick h3 a { color: #32302c; text-decoration: none; } #wholefoods-top-pick .btn { float: left; clear: both; background: #62ad00; padding: 10px 30px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; } #wholefoods-content-wrap table { width: 100%; border: solid 1px #ccc; margin: 0 0 2.0em 0; border-collapse: collapse; } #wholefoods-content-wrap table th, #wholefoods-content-wrap table td { padding: 10px 15px; border-bottom: solid 1px #ccc; border-right: solid 1px #ccc; } #wholefoods-content-wrap table th { text-align: left; background: #fff; } #wholefoods-content-wrap table td:first-child { background: #fff; font-weight: bold; } #wholefoods-content-wrap ul.tick { margin: 0 0 1.0em 0; padding: 0; } #wholefoods-content-wrap ul.tick li { list-style-type: none; padding-left: 30px; background: url(../png/icon-tick-green.png) no-repeat 0px 5px; background-size: 20px auto; } /* --------------------------------------------------------------------------------- ORGANIC GROCERIES PAGE --------------------------------------------------------------------------------- */ #organic-categories { float: left; width: 100%; } #organic-categories .intro { float: left; width: 80%; text-align: center; padding: 50px 10% 20px 10%; border-bottom: solid 1px #E0E1DC; margin: 0 0 30px 0; } #organic-categories .section-org { float: left; width: 48%; } #organic-categories .section-org img { width: 100%; margin: 0 0 20px 0; } #organic-categories .section-org.right { float: right; } #organic-categories ul { float: left; width: 100%; margin: 10px 0 30px 0; padding: 0; } #organic-categories ul li { float: left; width: 100%; list-style-type: none; font-size: 1.1em; padding: 8px 0; margin: 0; border-top: solid 1px #E0E1DC; } #organic-categories ul li a { color: #505050; } #organic-categories h3 { color: #32302B; margin: 0 0 10px 0; } #product-feature.organic-groceries { padding-top: 50px; height: 380px; background: url(../jpg/organic-banner.jpg) repeat-x center 0 #efeeeb; background-size: auto 100%; } #product-feature.organic-groceries .text { width: 900px; } /* mobile only -------*/ #organic-wrapper #product-feature.organic-groceries { float: left; width: 80%; height: auto; padding: 30px 10% 100px 10%; text-align: center; } #organic-wrapper #product-feature.organic-groceries .text { width: 100%; } #organic-wrapper #organic-categories { float: left; width: 90%; padding: 0 5%; } #organic-wrapper #organic-categories .intro { padding: 30px 10% 10px 10%; } /* END: mobile only --*/ /* --------------------------------------------------------------------------------- SALES PAGE --------------------------------------------------------------------------------- */ #blackfriday-header { float: left; width: 80%; padding: 50px 10% 45px 10%; background: url(../jpg/bg-blackfriday-2025.jpg) repeat-y center center #151515; text-align: center; } #blackfriday-header h1 { color: #fff; text-transform: uppercase; float: left; width: 100%; font-size: 50px; line-height: 0.8em; margin: 0 0 15px 0; letter-spacing: 0.3em; font-family: 'Source Sans Pro', arial, sans-serif; font-weight: 300; } #blackfriday-header h1 span { color: #fff; } #blackfriday-header h2 { float: left; width: 100%; clear: both; font-weight: bold; color: #fff; font-size: 28px; line-height: 1.4em; margin: 0; } #blackfriday-header .date { font-weight: 300; font-size: 24px; } #sale-page { float: left; width: 96%; padding: 0 2%; margin: 3% 0 0 0; } #sale-page .intro { float: left; width: 88%; padding: 0 6%; margin: 0; text-align: center; } #sale-page .intro h3 { font-weight: normal; font-size: 21px; line-height: 1.3em; margin: 0 0 5px 0; color: #EF1E00; } #sale-page .offer { float: left; width: 26.8%; margin: 1%; padding: 20px 2%; border: solid 1px #e2e2e2; background: #fff; text-align: center; } #sale-page .offer.double-size { width: 59.6%; } #sale-page .offer img { height: 280px; width: auto; max-width: 100%; } #sale-page .offer-row { float: left; width: 100%; } #sale-page .offer a { text-decoration: none; } #sale-page .offer h3 { text-align: left; color: #35332E; text-transform: uppercase; font-size: 21px; margin: 0; } #sale-page .offer h4 { text-align: left; margin: 0 0 2px 0; color: #757067; font-family: 'Asap','Source Sans Pro', arial, sans-serif; font-weight: normal; text-transform: none; font-style: italic; } #sale-page .offer .extra { float: left; width: 100%; font-size: 15px; text-align: left; text-transform: uppercase; color: #999; font-weight: normal; } /* --------------------------------------------------------------------------------- HOMEPAGE --------------------------------------------------------------------------------- */ .button { float: left; padding: 10px 30px; color: #077368; border: solid 1px #077368; -moz-border-radius: 6px; border-radius: 6px; text-decoration: none; } .button:hover { padding: 8px 28px; border: solid 3px; } #home-banners-wrap { float: left; width: 100%; padding: 30px 0; /* border-bottom: solid 1px #e4e4e4; */ background: #fff; } #home-banners { } #home-banners h2 { font-weight: bold; } #home-banners .section-one h2 { font-size: 45px; margin: 0 0 30px 0; } #home-banners .section-two h2, #home-banners .section-three h2 { font-size: 27px; margin: 0 0 25px 0; } #home-banners .text { float: left; width: 45%; padding: 30px; position: relative; z-index: 100; } #home-banners .thumb { position: absolute; z-index: 99; top: 0; right: 0; height: 100%; width: auto; } #home-banners .section-one, #home-banners .section-two, #home-banners .section-three { float: left; width: 100%; overflow: hidden; position: relative; background: #f3f1ec; -moz-border-radius: 6px; border-radius: 6px; } #home-banners .section-one { height: 440px; } #home-banners .section-two { height: 205px; margin: 0 0 30px 0; } #home-banners .section-three { height: 205px; } #home-banners .left-section { float: left; width: 65%; } #home-banners .right-section { float: right; width: 35%; box-sizing: border-box; padding-left: 30px; } #home-banners .section-one .text { padding: 45px; } #home-banners a { color: #212020; } #home-banners .promo-text { float: left; width: 100%; margin: 0 0 5px 0; font-size: 22px; font-weight: bold; line-height: 0.7em; color: #32302B; } #home-banners .blue { background: #d6e9ee; } #home-banners .blue .button { color: #4091c7; border-color: #4091c7; } #home-banners .blue .promo-text { color: #4091c7; } #home-banners .green { background: #e6f3f0; } #home-banners .green .button { color: #077368; border-color: #077368; } #home-banners .green .promo-text { color: #077368; } @media screen and (min-width: 1200px) and (max-width: 1400px) { #home-banners .left-section { float: left; width: 60%; } #home-banners .right-section { float: right; width: 40%; box-sizing: border-box; padding-left: 30px; } #home-banners .section-one .text { width: 80%; } #home-banners .section-one .thumb { height: 75%; bottom: 0; top: auto; } } /* --------------------------------------------------------------------------------- FOR < 1000px --------------------------------------------------------------------------------- */ @media screen and (max-width: 1200px) { #sale-page .offer img { height: 230px; } #organic-categories .section-org { padding: 0 5%; width: 40%; } #home-banners .left-section { width: 100%; } #home-banners .right-section { width: 100%; padding-left: 0px; } #home-banners .section-one { margin-bottom: 2%; height: 380px; } #home-banners .section-two { float: left; width: 49%; margin: 0; } #home-banners .section-three { float: right; width: 49%; } } /* --------------------------------------------------------------------------------- FOR < 1000px --------------------------------------------------------------------------------- */ @media screen and (max-width: 1000px) { #gf-header { padding: 40px 0 50px 0; background-size: auto 100%; } #gf-header h1 { font-size: 30px; background-size: auto 20px; } #gf-header h1 span { font-size: 20px; } #wf-header { padding: 120px 0; background-size: auto 135%; } #wf-headline h1 { font-size: 30px; } #wf-headline p { font-size: 15px; line-height: 1.5em; } #cats-round { width: 90%; padding: 30px 5%; } #cats-round .callout, #cats-round.five-split .callout { float: left; width: 40%; padding: 20px 5%; } #cats-round .callout .thumb { width: 150px; } #cats-round .callout .thumb a { width: 110px; height: 100px; padding: 25px 20px; } #cats-round .callout .thumb img { height: 100px; } #feature-info { width: 70%; padding: 30px 15% 30px 15%; } #food-categories { padding-top: 0; } #food-categories li { float: left; width: 100%; padding: 20px 0 10px 0; min-height: 50px; } #food-categories .action { padding-top: 10px; } #food-categories .action a { float: left; font-size: 13px; padding: 8px 12px; -moz-border-radius: 6px; border-radius: 6px; box-shadow: 1px 1px 2px #c5c5c5; border-bottom: none; background: url(../btn-orange-bg.html) repeat-x 0 0 #ff470f; background-size: 10px 35px; } #wholefoods-content { width: 90%; padding-left: 5%; padding-right: 5%; } } /* --------------------------------------------------------------------------------- FOR < 800px --------------------------------------------------------------------------------- */ @media screen and (max-width: 800px) { #wholefoods-content .intro { width: 90%; padding: 0 5% 10px 5%; } #wholefoods-content .intro p { font-size: 16px; line-height: 23px; } #wholefoods-heading-wrap { padding: 30px 5%; } #wholefoods-heading-wrap .thumb img { width: 60px; height: 60px; margin: 0 0 -68px 0; } #wholefoods-top-selling ul li .thumb img { height: 100px; } #wholefoods-heading-wrap h1 { font-size: 24px!important; } #wholefoods-content-wrap { padding-top: 50px; } #wholefoods-content h2 { font-size: 21px; } #wholefoods-content h3, #wholefoods-top-pick h3 { font-size: 16px; line-height: 23px; } #wholefoods-nav ul li { font-size: 12px; } #wholefoods-nav ul li span { padding: 0 8px; } #wholefoods-top-pick { } #wholefoods-top-pick .thumb { width: 100%; margin: 0 0 30px 0; } #wholefoods-top-pick .thumb img { height: 150px; } #wholefoods-top-pick .details { width: 90%; padding: 0 5%; text-align: center; } #wholefoods-top-pick .details ul { text-align: left; } #wholefoods-top-pick .top-pick span { width: 100%; background: url(../png/icon-star-white.png) no-repeat 10% center #ffba00; } #wholefoods-top-pick .top-pick span span { float: left; width: 100%; padding: 5px 0; background: url(../png/icon-star-white.png) 90% center no-repeat; } #wholefoods-top-pick .btn { width: 100%; padding: 10px 0; } #wholefoods-content-one { padding-bottom: 10px; } #wholefoods-top-selling { padding-bottom: 20px; margin: 0 0 20px 0; } #wholefoods-content-wrap ul.tick li { background-size: 16px auto; } #blackfriday-header { float: left; width: 80%; padding: 30px 10% 20px 10%; background-size: 100% auto; } #blackfriday-header h1 { font-size: 30px; } #blackfriday-header .date { font-size: 19px; } #blackfriday-header h2 { } #sale-page { margin-top: 20px; margin-bottom: 20px; } #sale-page .offer { float: left; width: 41.3%; margin: 1%; padding: 15px 3%; border: solid 1px #e2e2e2; background: #fff; text-align: center; } #sale-page .offer a { cursor: pointer; cursor: hand; } #sale-page .offer.double-size { width: 91.6%; } #sale-page .offer img { height: 140px; } #sale-page .offer h3 { font-size: 17px; margin: 0; } #sale-page .offer h3.mob-sm { font-size: 14px; margin: 0; } #sale-page .offer h4 { margin: 0; } #sale-page .offer .extra { font-size: 13px; } #sale-page .mob-btn { float: left; width: 90%; padding: 10px 0; margin: 0 5%; -moz-border-radius: 6px; border-radius: 6px; background: #E91500; color: #fff; } #blackfriday-header h2, #sale-page .intro h3 { font-size: 19px; } #organic-categories .section-org { width: 90%; padding: 0 5%; } #wf-list ul li { width: 48%; padding: 0 2% 2% 0; } #home-banners-wrap { float: left; width: 100%; padding: 0; /* border-bottom: solid 1px #e4e4e4; */ background: #fff; } #home-banners .section-one { width: 100%; margin: 0; height: auto; -moz-border-radius: 0; border-radius: 0; } #home-banners .right-section { float: left; width: 100%; padding: 5%; } #home-banners .section-two { width: 100%; height: auto; min-height: 154px; margin: 0 0 20px 0; } #home-banners .section-three { width: 100%; height: auto; min-height: 154px; } #home-banners .section-one h2 { font-size: 30px; line-height: 35px; } #home-banners .section-two h2, #home-banners .section-three h2 { font-size: 21px; line-height: 25px; } #home-banners .promo-text { font-size: 17px; } #home-banners .section-one .text, #home-banners .section-two .text, #home-banners .section-three .text { width: 45%; padding: 30px 20px 20px 20px; } #home-banners .section-one .text { width: 40%; padding: 40px 0 40px 7%; } #home-banners .section-one .thumb { top: auto; bottom: 0; height: 100%; max-height: 180px; } } /* --------------------------------------------------------------------------------- FOR < 600px --------------------------------------------------------------------------------- */ @media screen and (max-width: 600px) { } /* --------------------------------------------------------------------------------- FOR < 420px --------------------------------------------------------------------------------- */ @media screen and (max-width: 420px) { #cats-round .callout .thumb { width: 130px; } #cats-round .callout .thumb a { width: 100px; height: 90px; padding: 20px 15px; } #cats-round .callout .thumb img { height: 90px; } #wholefoods-nav ul li { font-size: 10px; } #wholefoods-nav ul li span { padding: 0 5px; } #wf-header { padding: 80px 0; } }