/** * Chris Black, Laposa Ltd 2015.05 * */ /* Colour Pallette Off-White #faf8f0 Black #101010 rgba(16,16,16,1.0) Yellow #fdb813 Orange #f15c22 Red #e73742 Blue #55acee */ /* * Core Structure */ #basket, #search, #userbox, .breadcrumb, #primaryNavigation, #contentSide, #credit {display: none; } body { font: 100% 'Merriweather', serif; color: #fff; background: #101010 url(/image/var/files/structure/bg-black-wood.jpg) repeat center top; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #pageWrapper {padding: 0; } .node_group-content {margin: 15px; } #siteWrapper { overflow: hidden; padding-bottom: 0px; } #content {margin-top: 0; } img { max-width: 100%; height: auto; width: auto; /* ie8 fix*/} .videoWrapper {position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 0; height: 0;} .videoWrapper iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #videoCloseButton {position: fixed; right: 15px; top: 15px; width: 50px; height: 50px; z-index: 2010; text-align: center; text-decoration: none; background: rgba(16,16,16,0.9); opacity: 0.7;} #videoCloseButton:hover {opacity: 1.0;} #videoCloseButton::after {margin: 0; padding: 0; content:"\f00d"; font: 25px/50px 'FontAwesome'; color: #ffffff; text-align: center; } #videoCloseButton span {display: none;} .width70 {max-width: 70%; margin-left: auto; margin-right: auto; } @media all and (max-width: 428px) { p, li {margin: 15px 0; font: 15px/25px 'Merriweather', serif; } } /** * Text */ h1, h2, h3, h4, h5, h6, caption {margin: 55px 0; font-family: 'Stint Ultra Condensed', cursive; font-weight: normal; line-height: 1.0; /* text-transform: UPPERCASE; */ } h1.contentTitle, h2.contentTitle, h3.contentTitle, h4.contentTitle, h5.contentTitle, h6.contentTitle {margin-top: 0; font-family: 'Nexa Rust Slab Black Shadow 01', sans-serif; font-weight: normal; text-transform: UPPERCASE; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {text-decoration: none;} h1 {font-size: 45px; } h2 {font-size: 35px; } h3 {font-size: 25px; } h4 {font-size: 25px; } h5 {font-size: 20px; } h1.pageTitle {font: 55px/55px 'Nexa Rust Slab Black Shadow 01', sans-serif; color: #fdb813; text-align: center; } p {margin: 30px 0; font: 16px/30px 'Merriweather', serif; } li {font: 15px/30px 'Merriweather', serif; } a {color: #ccc; text-decoration: underline; } a:hover {color: #fff; } a.button { margin: 0 10px; padding: 12px 10px 8px 10px; width: 163px; height: 59px; font: 30px/30px 'Stint Ultra Condensed', cursive; text-decoration: none; text-transform: UPPERCASE; color: #fff; background: url(/image/var/files/structure/button-blue.png) no-repeat top center; background-size: 100%; opacity: 0.9; } a.button:hover {opacity: 1.0; } button { margin: 0; padding: 0; width: 163px; height: 59px; float: right; font: 30px/59px 'Stint Ultra Condensed', cursive; text-align: center; text-decoration: none; text-transform: UPPERCASE; color: #fff; border: 0; outline: none; background: url(/image/var/files/structure/button-red.png) no-repeat top center; background-size: 100%; opacity: 0.9; } button:hover { opacity: 1.0; } @media all and (max-width: 428px) { h1 {font-size: 35px; } h2 {font-size: 25px; } h3 {font-size: 20px; } h4 {font-size: 20px; } h5 {font-size: 20px; } } /** * Forms */ form { padding: 0; } form div.row { margin: 0; } form span.label { display: none; } form span.field { width: 100%; } input, textarea { margin-bottom: 0.5em; padding: 15px; font: 30px/40px 'Stint Ultra Condensed', cursive; color: #ffffff; text-transform: UPPERCASE; border: 0; outline: none; background: url(/image/var/files/structure/bg-field.png) no-repeat top right; opacity: 0.8; } textarea { height: 200px; } input:hover, textarea:hover, input:focus, textarea:focus { color: #ffffff; border: 0; background: url(/image/var/files/structure/bg-field.png) no-repeat top right; opacity: 1.0; } input:focus::-webkit-input-placeholder { color:transparent; } input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ textarea:focus::-webkit-input-placeholder { color:transparent; } textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */ textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */ textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */ form .row:nth-last-child(1) input, form .row:nth-last-child(1) textarea { margin-bottom: 0; } form div.submit button { float: right; } /*2cols forms (can be set on whole form or particular fieldset*/ form.twoColumns label, fieldset.twoColumns label {padding-right: 1em;} form.twoColumns span.label, fieldset.twoColumns span.label {width: 50%; float: left; text-align: right;} form.twoColumns span.field, fieldset.twoColumns span.field {width: 47%;} /* 3% reserve in case odd column width*/ @media all and (max-width: 768px) { form div.submit button { float: none; width: 100%; background: url(/image/var/files/structure/button-wide-red.png) no-repeat top center; background-size: cover; } } #container {width: 100%; max-width: 1100px; overflow: visible; } div.node-content-picture, div.node-content-picture div.item {margin-bottom: 0;} div.image_gallery_fancybox div.item {margin-right: 0;} .fancybox-image {max-width: 50%; max-height: 50%; } #content .top {} #topContent {position: relative; padding: 0 5px; z-index: 100;} #topContentWrapper {margin: 0 auto; width: 100%; height: 0; padding-bottom: 50%; background: url(/image/var/files/structure/header-a-taste-of-the-life-less-ordinary.jpg) no-repeat top center; background-size: contain; text-align: center;} #topContent .videoWrapper {display: none;} #header {position: relative; margin: -20px 0 0 0; z-index: 100; } #headerWrapper { margin: 0 auto; padding-bottom: 3%; width: 100%; max-width: 1100px; background: url(/image/var/files/structure/bg-log.png) no-repeat top center; overflow: visible; } #logo {margin: 35px 0 20px 80px; } #logo a { display: block; width: 140px; height: 55px; background: url(/image/var/files/structure/henry-dennys-grill-fire-and-smoke.png) no-repeat scroll 0 0 transparent; background-size: cover; } #logo a span {display: none; } .node-fullBleed {margin: 0; } @media all and (max-width: 1100px) { #logo {margin-left: 30px; } } /* Navigation */ #globalNavigation {margin: 45px 40px 20px 0; } #globalNavigation li {position: relative; margin: 0 40px; padding: 0; height: 40px; background: rgba(16,16,16,0.5); } #globalNavigation li:before, #globalNavigation li:after { content:""; position: absolute; top: 0; border-style: solid; border-color: rgba(16,16,16,0.5) transparent; } #globalNavigation li:before {left: -15px; border-width: 20px 0 20px 15px; } #globalNavigation li:after {right: -15px; border-width: 20px 15px 20px 0; } #globalNavigation li.node_id_5 { display: none; } #globalNavigation li.node_id_1320 { display: none; } #globalNavigation a {padding: 10px 10px; font: 18px/20px 'Nexa Rust Sans Black', sans-serif; text-align: center; color: #ccc; } #globalNavigation a:hover { color: #fff; } /* twitter icon */ #globalNavigation li.last {margin: 0; padding: 0; } #globalNavigation li a.last {margin: -10px 0 0 0; padding: 0; } #globalNavigation li a.last:before { margin-left: 20px; font-family: 'FontAwesome'; font-size: 55px; line-height: 1.0; content: "\f099"; } #globalNavigation li a.last:hover {opacity: 1.0; } #globalNavigation li.last:before, #globalNavigation li.last:after, #globalNavigation li a.last span {display: none; } #globalNavigation li.last {background: none; } #revealNavigationButton {position: relative; position: fixed; top: 15px; right: 30px; padding: 5px 10px; background: rgba(16,16,16,0.5); border-radius: 10px; z-index: 9999999; } #revealNavigationButton a {text-decoration: none; } #revealNavigationButton a.reveal:before { font-family: 'FontAwesome'; font-size: 45px; line-height: 1.0; content: "\f0c9"; } #revealNavigationButton a span {display: none; } @media all and (max-width: 1100px) { #globalNavigation a {padding: 10px; font: 16px/18px 'Nexa Rust Sans Black', sans-serif; } } @media all and (max-width: 999px) { #globalNavigation {display: none; opacity: 0; transition: 400ms opacity ease; } #globalNavigation.open {display: block; } #globalNavigation.fx {display: block; opacity: 1; } #globalNavigation li.node_id_5 { display: inline-block; } #globalNavigation li.node_id_1320 { display: inline-block; } #globalNavigation li a.last {margin-top: 20px; } #globalNavigation li a.last:before {margin-left: 0; } #revealNavigationButton {display: block; } #globalNavigation {position: fixed; margin: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99; } #globalNavigationWrapper {margin-top: 80px; } #globalNavigation li {margin: 10px auto; width: 100%; background: none; } #globalNavigation li:before, #globalNavigation li:after {display: none; } #globalNavigation a {color: #efefef; } } .scrollDown {text-align: center; z-index: 999; } a.scrollDown {opacity: 0.9; } a.scrollDown:hover {opacity: 1.0; } .parallax_speed_1 p, .parallax_speed_2 p, .parallax_speed_3 p, .parallax_speed_4 p { padding: 0; margin: 0; } /* Product page */ .product .twoColumnLayout.header {width: 100%; margin-bottom: 110px; } .productLayout { width: 90%; margin: 10% auto; } .social_network_share_custom {display: inline-block; float: right; } .social_network_share_custom li {margin: 0; display: block; float: left; list-style-type: none; } .social_network_share_custom a {opacity: 0.8; } .social_network_share_custom a:hover {opacity : 1.0; } .productRange {width: 80%; margin: 0 auto; padding: 0 0 75px 0; } .productRange .contentBody {text-align: center; } .productRange .teaser {display: inline-block; width: 30%; opacity: 0.9; } .productRange .teaser:hover {opacity: 1.0; } .productRange .teaser a {display: block; margin: 0 15px 55px 15px; text-decoration: none; } .productRange .teaser h4, .productRange .teaser h4 a {display: none; } .productRange .teaser p.description {padding: 0 10% 0 15%; min-height: 125px; font: 25px/25px 'Stint Ultra Condensed', cursive; text-align: left; text-transform: UPPERCASE; } .productRange.noDescription p.description {display: none; } .productRange .teaser p.more { margin: 0 auto; padding: 12px 10px 8px 10px; width: 160px; height: 60px; font: 30px/30px 'Stint Ultra Condensed', cursive; text-decoration: none; text-transform: UPPERCASE; text-align: center; color: #fff; } .productRange .teaser p.more:after {content: " More info"} .productRange .teaser p.more span {display: none; } .productRange p.more {background: url(/image/var/files/structure/button-wood.png) no-repeat top center; background-size: 100%; } .nutritionalInfo a {display: inline-block; } .nutritionalInfo a:after {content:"Click here for nutritional information" } .nutritionalInfo img {display: none; } @media all and (max-width: 768px) { .productRange {width: 70%; margin: 0 auto; padding: 0 0 75px 0} .productRange .teaser {width: 70%; } .productRange .teaser p.description {text-align: center; min-height: 0; } .product {width: 100%; } .product h1 { margin-bottom: 0; } .product .twoColumnLayout {margin-bottom: 25%; } .product .twoColumnLayout.header { margin-bottom: 0; } } @media all and (max-width: 428px) { .productRange .teaser {width: 100%; } .swapCol .layoutBody {display: table; } .swapCol .layoutColumnOne {display: table-footer-group; } .swapCol .layoutColumnTwo {display: table-header-group; } .social_network_share_custom {width: 100%; text-align: center; } .social_network_share_custom ul {display: inline-block; } .nutritionalInfo a:after {content:"Nutritional Info" } } .fancybox-lock .fancybox-overlay {z-index: 9999999; } a.fancybox-close {top: 10px; right: 10px; width: 36px; height: 36px; text-align: center; text-decoration: none; background: rgba(16,16,16,0.9); opacity: 0.7;} a.fancybox-close:hover {opacity: 1.0;} a.fancybox-close::after {margin: 0; padding: 0; content:"\f00d"; font: 18px/36px 'FontAwesome'; color: #ffffff; text-align: center; } .fancybox-title {display: none; } body.product a.fancybox-close { width: 7%; height: 10%; opacity: 0; } body.product a.fancybox-close:hover {opacity: 0;} .socialFeed {width: 55%; margin: 75px auto 0 auto; text-align: center; } .socialFeed .twitter_timeline a {font-size: 25px; text-decoration: none; } .socialFollow h3 {margin: 0 auto; font-size: 40px; } .socialFollow h3 span {font: 40px/40px 'Nexa Rust Script Light 00', cursive; } .socialFollow a.button {} @media all and (max-width: 768px) { .socialFeed {width: 100%; margin: 50px auto; } } @media all and (max-width: 428px) { .socialFollow h3 {width: 70%; margin: 0 auto; } .socialFollow a.button {margin-top: 20px; } } /* Home page Sections */ .introSection {margin-top: 100px; } .introSection_layer_01 { position: relative; overflow: visible; } .introSection_layer_01 > div {position: absolute; width: 160%; margin-left: -25%; margin-top: -60%; z-index: -99; } .introSection_layer_02 {display: none; } .introImage > .contentBody {position: relative;} .introImage > div > div {position: absolute; width: 200%; max-width: 1200px; height: 0; padding-bottom: 100%; z-index: -1; top: 0; margin-top: -3%; margin-left: -50%; background: url(/image/var/files/structure/dj.png) no-repeat top center; background-size: contain; background-blend-mode: lighten;} .intro {margin: 50px auto; } .intro h2 {font-size: 45px; text-shadow: 2px 2px 1px rgba(16,16,16,0.8); } @media all and (max-width: 428px) { .intro {width: 100%; } .intro img {display: none; } } .productBenefitSection {margin: 20% auto 25% auto; } .productBenefitSection_layer_01 {position: relative; overflow: visible; } .productBenefitSection_layer_02 {position: relative; overflow: visible; } .productBenefitSection_layer_01 > div {position: absolute; width: 150%; left: 50%; margin-left: -75%; margin-top: -50%; z-index: -99; } .productBenefitSection_layer_02 > div {position: absolute; width: 100%; max-width: 520px; left: -20%; margin-top: -60%; z-index: -9; } .productBenefit {width: 70%; margin: 0 auto; } .productBenefit h3 {margin-top: 75px; font-size: 55px; } @media all and (max-width: 428px) { .productBenefitSection_layer_01 > div {margin-top: -66.66%; } .productBenefit {width: 100%; } .productBenefit h3 {margin-top: 55px; font-size: 35px; } } .videoSection_layer_01 {position: relative; overflow: visible; } .videoSection_layer_02 {position: relative; } .videoSection_layer_03 {position: relative; } .videoSection_layer_01 > div {position: absolute; width: 200%; left: 50%; margin-left: -80%; margin-top: -100%; z-index: -999; } .videoSection_layer_02 > div {position: absolute; right: 0; margin-right: -20%; margin-top: -30%; } .videoSection_layer_03 > div {position: absolute; left: 0; margin-left: -20%; margin-top: -5%; } .videoSection .node_group-content {margin: 10px 0; } .videoSection p {margin: 0 auto; text-align: center; } .videoSection .youtube {width: 90%; margin: 0 auto; position: relative; padding-bottom: 56.25%; /* 16:9 */ } .videoSection .video_youtube iframe {position: absolute; top: 0; left: 0; width: 100%!important; height: 100%!important; } @media all and (max-width: 428px) { .videoSection_layer_01 > div {margin-top: -100%; } } .storytellerSection {margin: 0 auto 0 auto; padding: 75px 0;} .storytellerSection h2 {width: 60%; margin: 75px auto; } .storytellerSection .comingsoon h2 {font: 55px/55px 'Nexa Rust Slab Black Shadow 01', sans-serif; color: #fdb813; } .storytellerSection-layer-01 { position: relative; } .storytellerSection-layer-01 > div {position: absolute; width: 200%; left: 50%; margin-left: -100%; margin-top: -70%; z-index: -99; } .storyteller {position: relative; width: 100%; height: 0; padding-bottom: 133.333%;} .storyteller a {float: left; width: 100%; text-decoration: none; } .storyteller .teaser {opacity: 0.9;} .storyteller .teaser:hover {opacity: 1.0;} .storyteller .content {width: 100%; margin: 80% auto 0 auto; } .storyteller .image img {display: none; } .storyteller p {margin: 10px auto 20px auto; font: 35px/35px 'Stint Ultra Condensed', cursive; text-align: center; } .storyteller p.description {max-width: 60%;} .storyteller p.more {width: 100%; max-width: 320px; height: 60px; margin: 0 auto; background: url(/image/var/files/structure/button-read-more.png) no-repeat center 100%; background-size: 100%; } .storyteller p.more span {display: none;} .storyteller h4 {margin: 0 auto; font: 35px/35px 'Nexa Rust Slab Black Shadow 01', sans-serif; color: #faf8f0; text-align: center;} .storyteller.gavin {background: url(/image/var/files/structure/storyteller-gavin.png) no-repeat 0 0; background-size: 100%;} .storyteller.gavin:hover {background-position-y: 100%;} .storyteller.dearbhla {background: url(/image/var/files/structure/storyteller-dearbhla.png) no-repeat 0 0; background-size: 100%; } .storyteller.dearbhla:hover {background-position-y: 100%;} .storyteller.miles {background: url(/image/var/files/structure/storyteller-miles.png) no-repeat 0 0; background-size: 100%; } .storyteller.miles:hover {background-position-y: 100%;} .storyteller.anonf {background: url(/image/var/files/structure/storyteller-anonf.png) no-repeat top center; background-size: cover;} .storyteller.anonf .contentBody {position: absolute; bottom: 15%; width: 100%; } .storyteller.anonm {background: url(/image/var/files/structure/storyteller-anonm.png) no-repeat top center; background-size: cover;} .storyteller.anonm .contentBody {position: absolute; bottom: 15%; width: 100%; } .storyteller3col {} .storyteller3col .storyteller p {font-size: 25px; line-height: 25px;} .storyteller3col .storyteller p.more {bottom: 10%;} .storyteller3col .storyteller p.description {max-width: 60%;} .storyteller3col .storyteller h4 {font-size: 25px; line-height: 25px;} .storyteller3col .storyteller.anonf .contentBody, .storyteller3col .storyteller.anonm .contentBody {bottom: 5%;} .storyteller2col .storyteller.anonf img, .storyteller2col .storyteller.anonm img { max-width: 320px; } body.node_id_5 .contentFooter, body.node_id_1218 .contentFooter {display: none; } .noMargin .node_group-content {margin: 0; } .node-noMargin .twoColumnLayout .layoutColumnOne.ofTwo, .node-noMargin .twoColumnLayout.fibonacci-1-1 .layoutColumnOne.ofTwo, .node-noMargin .twoColumnLayout .layoutColumnTwo.ofTwo, .node-noMargin .twoColumnLayout.fibonacci-1-1 .layoutColumnTwo.ofTwo {width: 50%; } @media all and (max-width: 768px) { .storytellerSection-layer-01 {display: none; } .storytellerSection h2 {width: 100%; font-size: 35px; } .storyteller h4 {font-size: 25px; line-height: 25px; } .storyteller p {font-size: 25px; line-height: 25px;} } @media all and (max-width: 428px) { .storyteller h3 img {margin-top: 15px; width: 70%; } } .mediaWallLayout {margin: 100px auto 50px auto; } .mediaWallLayout img { max-width: 100%; width: 100%; height: auto; } .mediaWall {position: relative; overflow: visible; } .mediaWall_layer_01 {position: relative; overflow: visible; } .mediaWall_layer_01 > div {position: absolute; width: 150%; left: 50%; margin-left: -75%; margin-top: -15%; z-index: -99; } .mediaWall {margin: 0 auto; color: #fff; } .mediaWall .node_group-content {margin: 15px; } .mediaWall h3 {margin: 0; font: 20px/25px 'Nexa Rust Sans Black', sans-serif;} .mediaWall p {margin: 0; font: 25px/25px 'Stint Ultra Condensed', cursive;} .mediaWall a.more {display: block; padding: 5px; background: #fff; color: #1010101; opacity: 0.9;} .mediaWall .soundcloud {margin: 15px; background: #f7931e; } .mediaWall .video2col {width: 100%; overflow: hidden; background: #f7931e; } .mediaWall .video2col {padding: 15px; } .mediaWall .recipeSquare {background: #B22F01; } .mediaWall .recipeSquare .contentBody {padding: 15px; } .mediaWall .recipeSquare .teaser {position: relative; height: 0; padding-bottom: 100%; overflow: hidden; } .mediaWall .recipeSquare .content {position: absolute; width: 100%; bottom: 0; background: rgba(16,16,16,0.8); } .mediaWall .recipeSquare h4 {margin: 15px; font: 20px/25px 'Nexa Rust Sans Black', sans-serif;} .mediaWall .recipeSquare p {display: none; } .mediaWall .quote {background: #e73742;} .mediaWall .quote .contentBody {float: left; padding: 15px; } .recipePanel {position: relative; overflow: visible; } .recipePanel_layer_01 {position: relative; overflow: visible; } .recipePanel_layer_01 > div {position: absolute; width: 150%; left: 50%; margin-left: -75%; margin-top: -15%; z-index: -99; pointer-events: none; } .recipePanel_layer_01 img {width: 100%; } .productSparks { position: relative; /* make sparks relative to their parent */ } .productSparks > div { position: absolute; width: 160%; max-width: 700px; height: 0; padding-bottom: 160%; z-index: -1; top: -135px; left: -22%; background: url(/image/var/files/structure/product-sparks.png) no-repeat top center; background-size: contain; background-blend-mode: lighten; } .productSmoke { position: relative; overflow: visible; } .productSmoke > div { position: absolute; width: 100%; height: 0; padding-bottom: 100%; left: 50%; top: 0; margin-left: -60%; margin-top: -2%; z-index: -1; background: url(/image/var/files/structure/product-smoke.png) no-repeat top center; background-size: contain; background-blend-mode: lighten; opacity: 0.7; } .productSparks.left > div, .productSmoke.left > div { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .headerSparks {position: relative; overflow: visible; } .headerSparks > div { position: absolute; width: 160%; height: 0; padding-bottom: 160%; z-index: 1; left: 50%; top: 0; margin-left: -80%; margin-top: -50%; background: url(/image/var/files/structure/product-sparks.png) no-repeat top center; background-size: contain; background-blend-mode: lighten; opacity: 0.7; } .headerSmoke {position: relative; overflow: visible; } .headerSmoke > div { position: absolute; width: 140%; height: 0; padding-bottom: 140%; left: 50%; top: 0; margin-left: -80%; margin-top: -40%; z-index: 1; background: url(/image/var/files/structure/product-smoke.png) no-repeat top center; background-size: contain; background-blend-mode: lighten; opacity: 0.7; } body.product .node > .node-content-RTE { position: relative; z-index: 10; } body.product .node > .node-content-picture > .picture { position: relative; z-index: 10; } /* footer */ #footer {margin: 30px 0; height: 150px; background: url(/image/var/files/structure/bg-log.png) no-repeat top center; } #footerNavigation {float: none; display: inline-block; text-align: center; margin-top: 45px; } #footerNavigation a {padding: 10px; } #footerNavigation li {display: inline-block; position: relative; margin: 0 30px; padding: 0; height: 40px; background: rgba(16,16,16,0.5); } #footerNavigation li:before, #footerNavigation li:after { content:""; position: absolute; top: 0; border-style: solid; border-color: rgba(16,16,16,0.5) transparent; } #footerNavigation li:before {left: -15px; border-width: 20px 0 20px 15px; } #footerNavigation li:after {right: -15px; border-width: 20px 15px 20px 0; } #footerNavigation a {padding: 10px 20px; font: 18px/20px 'Nexa Rust Sans Black', sans-serif; text-align: center; } @media all and (max-width: 1100px) { #footerNavigation li {margin: 0 30px; } #footerNavigation a {padding: 10px; font: 16px/18px 'Nexa Rust Sans Black', sans-serif; } } @media all and (max-width: 768px) { #footerNavigation li.node_id_20 { display: none; } #footerNavigation a {font: 14px/18px 'Nexa Rust Sans Black', sans-serif; } } @media all and (max-width: 428px) { #footerNavigation li {margin: 0 20px; } } #copyright {display: none; } /* #copyright {float: right; margin-top: -34px; margin-right: 40px; padding: 0; } #copyright p {font: 30px/30px 'Nexa Rust Script Light 00', cursive; color: #faf8f0; text-align: center; } */ @media all and (max-width: 428px) { #copyright {padding: 35px 0; } #copyright p {font-size: 20px; } } /* * Storyteller: Gavin Glass */ body.gavinGlass #topContentWrapper {background: url(/image/var/files/storyteller/header-gavin-glass-video.jpg) no-repeat top center; background-size: contain; } body.gavinGlass .introSection {margin-top: 0; } body.gavinGlass .introImage > div > div {width: 200%; max-width: 1200px; height: 0; padding-bottom: 100%; margin-top: -5%; margin-left: -40%; background: url(/image/var/files/storyteller/gavin-glass.png) no-repeat top center; background-size: contain;} .tilt img {margin: 30px 30px 0 0; float: right; -ms-transform: rotate(10deg); /* IE 9 */ -webkit-transform: rotate(10deg); /* Safari */ transform: rotate(10deg); border: 5px solid #faf8f0; box-shadow: 10px 10px 10px rgba(16,16,16,0.8);} /* * Storyteller: Dearbhla Glynn */ body.dearbhlaGlynn #topContentWrapper {background: url(/image/var/files/storyteller/header-dearbhla-glynn-video.jpg) no-repeat top center; background-size: contain; } body.dearbhlaGlynn .introSection {margin-top: 0; } body.dearbhlaGlynn .introImage > div > div {width: 200%; max-width: 1200px; height: 0; padding-bottom: 200%; margin-top: -40%; margin-left: -50%; background: url(/image/var/files/storyteller/dearbhla-glynn.png) no-repeat top center; background-size: contain;} /* header: article "A Life Less Ordinary - In Pictures" */ body.node_id_1288 #topContentWrapper { background: url(/image/var/files/storyteller/dearbhla-glynn/embracing-a-life-less-ordinary/embracing-a-life-less-ordinary-header.jpg) no-repeat center 100%; background-size: contain; } /* * Storyteller: Miles MacDonald */ body.milesMacDonald #topContentWrapper {background: url(/image/var/files/storyteller/header-miles-macdonald-video.jpg) no-repeat top center; background-size: contain; } body.milesMacDonald .introSection {margin-top: 0; } body.milesMacDonald .introImage > div > div {width: 200%; max-width: 1200px; height: 0; padding-bottom: 200%; margin-top: -50%; margin-left: 0; background: url(/image/var/files/storyteller/miles-macdonald.png) no-repeat top center; background-size: contain;} /* article "A South American Culinary Adventure" */ body.node_id_1343 #topContentWrapper { background: url(/image/var/files/storyteller/miles-macdonald/a-south-american-culinary-adventure/a-south-american-culinary-adventure-header.jpg) no-repeat center 100%; background-size: contain; } /* article "Chef's Oriental Odyssey" */ body.node_id_1344 #topContentWrapper { background: url(/image/var/files/storyteller/miles-macdonald/chefs-oriental-odyssey/chefs-oriental-odyssey-header.jpg) no-repeat center 100%; background-size: contain; } /* article "Cooking Across Africa" */ body.node_id_1342 #topContentWrapper { background: url(/image/var/files/storyteller/miles-macdonald/cooking-across-africa/cooking-across-africa-header.jpg) no-repeat center 100%; background-size: contain; } /* article "Cooking Across Borders" */ body.node_id_1341 #topContentWrapper { background: url(/image/var/files/storyteller/miles-macdonald/cooking-across-borders/cooking-across-borders-header.jpg) no-repeat center 100%; background-size: contain; } /* * Recipe Teaser */ .recipeTeaser {width: 80%; margin: 55px auto; } .recipeTeaser .contentBody {text-align: center; } .recipeTeaser h3.contentTitle { display: block; width: 100%; max-width: 540px; height: 0; margin: 55px auto 0 auto; padding-bottom: 50%; background: url(/image/var/files/structure/more-recipe-ideas-title.png) no-repeat center; background-size: contain; } .recipeTeaser h3.contentTitle span {display: none; } .recipeTeaser .teaser {position: relative; display: inline-block; width: 30%; margin: 7.5% 10px; } .recipeTeaser .teaser a {display: block; text-decoration: none; text-align: center; } .recipeTeaser .teaser img {border-radius: 20px/15px; } .recipeTeaser .teaser .content {position: absolute; width: 100%; height: 100%; top: 0; } .recipeTeaser .teaser h4, .recipeTeaser .teaser h4 a { position: absolute; display: table; width: 100%; height: 90px; top: -45px; margin: 0; padding: 0 30px; z-index: 50; font: 25px/25px 'Stint Ultra Condensed', cursive; text-align: center; text-decoration: none; color: #0c0a0a; background: url(/image/var/files/structure/recipe-title-teaser-background.png) no-repeat center center; } .recipeTeaser .teaser h4 span {display: table-cell; vertical-align: middle; } .recipeTeaser .teaser p.description { position: absolute; display: none; flex-direction: column; justify-content: center; width: 100%; height: 100%; margin: -1px 0 0 0; padding: 0 15%; z-index: 49; border-radius: 20px/15px; font: 25px/25px 'Stint Ultra Condensed', cursive; text-align: center; background: rgba(16,16,16,0.5) url(/image/var/files/structure/recipe-rollover-teaser-background.png) no-repeat 20% center; background-size: contain; box-shadow: 5px 5px 5px rgba(16,16,16,0.5); } .recipeTeaser .teaser:hover p.description {display: table; } .recipeTeaser .teaser p.description > span {display: table-cell; vertical-align: middle; } .recipeTeaser .teaser p.more {display: none; } /* hide recipe teaser on these pages */ body.node_id_1031 .contentFooter .recipeTeaser, /* Privacy Policy */ body.node_id_1116 .contentFooter .recipeTeaser, /* About Us */ body.node_id_22 .contentFooter .recipeTeaser, /* Sitemap */ body.node_id_20 .contentFooter .recipeTeaser /* Contact */ { display: none; } /* hide social feed on these pages */ body.node_id_1031 .contentFooter .socialFeed, /* Privacy Policy */ body.node_id_1116 .contentFooter .socialFeed, /* About Us */ body.node_id_22 .contentFooter .socialFeed, /* Sitemap */ body.node_id_20 .contentFooter .socialFeed /* Contact Us */ { display: none; } body.node_id_20 .contentFooter .socialFeed { display: none; } /* hide contact us link in global nav section */ body.node_id_22 div.sitemap li.node_id_1320 { display: none; } /* hide selected recipe teaser row on specific recipe pages */ body.node_id_1196 .contentFooter .recipeTeaser .teaser:nth-child(-n+3), body.node_id_1203 .contentFooter .recipeTeaser .teaser:nth-child(-n+3), body.node_id_1204 .contentFooter .recipeTeaser .teaser:nth-child(-n+3), body.node_id_1427 .contentFooter .recipeTeaser .teaser:nth-child(-n+3) { display: none; } /* hide row one */ body.node_id_1311 .contentFooter .recipeTeaser .teaser:nth-child(n+4), body.node_id_1312 .contentFooter .recipeTeaser .teaser:nth-child(n+4), body.node_id_1309 .contentFooter .recipeTeaser .teaser:nth-child(n+4) { display: none; } /* hide row two */ @media all and (max-width: 900px) { .recipeTeaser {width: calc(100% - 60px); } } @media all and (max-width: 768px) { .recipeTeaser { width: 70%; } .recipeTeaser .teaser {width: 60%; margin: 10% 10px; } } @media all and (max-width: 428px) { .recipeTeaser { width: 100%; } .recipeTeaser .teaser h4, .recipeTeaser .teaser h4 a {padding: 0 30px; } } /* * Recipe Page */ .recipe {width: 100%; margin: 0 auto; } .recipe .pageWrapper {width: 70%; margin-right: auto; margin-left: auto; } .recipe.twoColumnPage.fibonacci-5-3 .columnOne {width: 100%; } .recipe.twoColumnPage.fibonacci-5-3 .columnTwo {display: none; } .recipe .node-content-picture, .recipe .node-content-picture .item {margin-bottom: 0; } .recipe h1.pageTitle {margin: 0; padding: 38px 50px 22px 50px; font: 44px/36px 'Nexa Rust Script Light 00', cursive; color: #faf8f0; text-align: center; background: url(/image/var/files/structure/title-banner.png) no-repeat center center; } .recipe h2 {margin: 75px 0 35px 0; font: 35px/35px 'Nexa Rust Sans Black', sans-serif; color: #eda815; } .recipe h3 {margin: 35px 0 0 0; font-size: 35px; } .recipe p {margin: 0 0 35px 0; } .recipe #content {padding: 35px 0 40px 0; color: #101010; background: url(/image/var/files/structure/bg-white-wood-plank-end.png) no-repeat bottom center, url(/image/var/files/structure/bg-white-wood-plank.png) repeat-y top center; background-size: 98%; } .recipe #content ul {margin: 0 0 55px 0} .recipe #content ul li {margin: 0; padding: 0; list-style-type: none; } .recipe #content ol {counter-reset: item; } .recipe #content ol li {display: block; margin-left: 45px; } .recipe #content ol li:before { content: counter(item) ". "; counter-increment: item; font-size: 25px; color: #eda815; display: inline-block; width: 45px; margin-left: -45px; } .recipe img.imageRight, .recipe img.imageright {float: right; } .recipe img {margin-top: 35px; } .recipe .description, .recipe p.serves, .recipe p.cooking_time {display: none; } .recipe .social_network_share_custom {float: none; text-align: center; } .recipe .social_network_share_custom ul {display: inline-block; } .recipe .recipeTeaser .teaser .content {margin-top: 35px;} /* fix for recipe teaser header out of position on recipe page */ @media all and (max-width: 768px) { .recipe .pageWrapper {width: 90%; } .recipe h1.pageTitle {margin: 0; padding: 38px 25px 22px 25px; font: 24px/21px 'Nexa Rust Script Light 00', cursive; } } /* * Paper Background */ .whiteBackground {width: 100%; margin: 0 auto; } .whiteBackground .pageWrapper {width: 90%; margin-right: auto; margin-left: auto; } .whiteBackground.twoColumnPage.fibonacci-5-3 .columnOne {width: 100%; } .whiteBackground.twoColumnPage.fibonacci-5-3 .columnTwo {display: none; } .whiteBackground .node-content-picture, .whiteBackground .node-content-picture .item {margin-bottom: 0; } .whiteBackground h1.pageTitle {margin: 0; padding: 38px 50px 22px 50px; font: 44px/36px 'Nexa Rust Script Light 00', cursive; color: #faf8f0; text-align: center; background: url(/image/var/files/structure/title-banner.png) no-repeat center center; } .whiteBackground h2 {margin: 75px 0 35px 0; font: 35px/35px 'Nexa Rust Sans Black', sans-serif; color: #eda815; } .whiteBackground h3 {margin: 35px 0 0 0; font-size: 35px; } .whiteBackground p {margin: 0 0 35px 0; } .whiteBackground a { color: #101010; } .whiteBackground a:hover { color: #101010; text-decoration: none; } .whiteBackground #content {padding: 35px 0 40px 0; color: #101010; background: url(/image/var/files/structure/bg-white-wood-plank-end.png) no-repeat bottom center, url(/image/var/files/structure/bg-white-wood-plank.png) repeat-y top center; background-size: 98%; } .whiteBackground #content ul {margin: 0 0 55px 0} .whiteBackground #content ul li {margin: 0; padding: 0; list-style-type: none; } .whiteBackground #content ol {counter-reset: item; } .whiteBackground #content ol li {display: block; margin-left: 45px; } .whiteBackground #content ol li:before { content: counter(item) ". "; counter-increment: item; font-size: 25px; color: #eda815; display: inline-block; width: 45px; margin-left: -45px; } .whiteBackground img.imageRight, .whiteBackground img.imageright {float: right; } .whiteBackground img { margin-top: 35px; -webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); -moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75); } @media all and (max-width: 768px) { .whiteBackground .pageWrapper {width: 90%; } .whiteBackground h1.pageTitle {margin: 0; padding: 38px 25px 22px 25px; font: 24px/21px 'Nexa Rust Script Light 00', cursive; } } /* contact page / node_id_20 */ body.node_id_20 h1.pageTitle { font-size: 40px; margin: 55px 0 25px 0; } .contactInfo strong { font-family: 'Nexa Rust Sans Black', sans-serif; } .social_connect p { margin-bottom: 1em; } .social_connect strong { font-family: 'Nexa Rust Sans Black', sans-serif; } .social_connect ul {margin: 0 0 1em 0; } .social_connect li { display: inline-block; list-style-image: none; list-style-type: none; margin: 0 0.5em 0 0; padding: 0; font-size: 3em; } .social_connect a {display: block; text-decoration: none; } .social_connect a:before {font-family: 'FontAwesome'; font-size: 1em; color: #fff; } .social_connect li.twitter a:before {content: "\f099"; } .social_connect li.facebook a:before {content: "\f230"; } .social_connect li.instagram a:before {content: "\f16d"; } @media all and (max-width: 768px) { body.node_id_20 div.twoColumnLayout.fibonacci-2-1 div.layoutColumnOne.ofTwo { width: 100%; } body.node_id_20 div.twoColumnLayout.fibonacci-2-1 div.layoutColumnTwo.ofTwo { width: 100%; text-align: center; } body.node_id_20 .width70 { max-width: 90%; } body.node_id_20 input, body.node_id_20 textarea, body.node_id_20 input:hover, body.node_id_20 textarea:hover, body.node_id_20 input:focus, body.node_id_20 textarea:focus { background-size: cover; } } /* site map */ .sitemap a {text-decoration: none; } .sitemap ul li {display: block; list-style-type: none; width: 100%; float: left; margin-left: 0; font: 35px/35px 'Nexa Rust Slab Black Shadow 01', sans-serif; } .sitemap ul li li {display: block; width: 25%; float: left; font: 25px/25px 'Nexa Rust Sans Black', sans-serif; } .sitemap ul li li li {display: block; float: none; width: 100%; font: 25px/25px 'Stint Ultra Condensed', cursive; } @media all and (max-width: 768px) { .sitemap ul li { text-align: center; } .sitemap ul li > ul { margin-bottom: 10%; } .sitemap ul li li { width: 100%; float: none; } } /* Merge belowwith core strucutre */ @media all and (max-width: 768px) { #onxshop_cms_content {width: 100%; overflow: hidden; } .aboutus .twoColumnPage .columnTwo, .aboutus .twoColumnLayout .layoutColumnOne.ofTwo, .aboutus .twoColumnLayout .layoutColumnTwo.ofTwo {width: auto!important; float: none!important;} .aboutus .twoColumnPage .columnWrapper {margin: 0!important;} .threeColumnLayout .layoutColumnOne.ofThree, .threeColumnLayout .layoutColumnTwo.ofThree, .threeColumnLayout .layoutColumnThree.ofThree {width: 33.33%; float: left;} .fourColumnLayout .layoutColumnOne.ofFour, .fourColumnLayout .layoutColumnTwo.ofFour {width: 50%; float: left; } .fourColumnLayout .layoutColumnThree.ofFour, .fourColumnLayout .layoutColumnFour.ofFour {width: 50%; float: left; } .layoutColumnWrapper {margin: 0!important;} } @media all and (max-width: 428px) { #onxshop_cms_content {width: 100%; overflow: hidden; } .twoColumnPage .columnTwo, .twoColumnLayout .layoutColumnOne.ofTwo, .twoColumnLayout .layoutColumnTwo.ofTwo {width: auto!important; float: none!important;} .twoColumnPage .columnWrapper {margin: 0!important;} .threeColumnLayout .layoutColumnOne.ofThree, .threeColumnLayout .layoutColumnTwo.ofThree, .threeColumnLayout .layoutColumnThree.ofThree {width: 100%!important; float: left!important;} .fourColumnLayout .layoutColumnOne.ofFour, .fourColumnLayout .layoutColumnTwo.ofFour {width: 100%; float: none; } .fourColumnLayout .layoutColumnThree.ofFour, .fourColumnLayout .layoutColumnFour.ofFour {width: 100%; float: none; } .fiveColumnLayout .layoutColumnOne.ofFive, .fiveColumnLayout .layoutColumnTwo.ofFive, .fiveColumnLayout .layoutColumnThree.ofFive, .fiveColumnLayout .layoutColumnFour.ofFive, .fiveColumnLayout .layoutColumnFive.ofFive {width: auto; float: none;} .sixColumnLayout .layoutColumnOne.ofSix, .sixColumnLayout .layoutColumnTwo.ofSix, .sixColumnLayout .layoutColumnThree.ofSix, .sixColumnLayout .layoutColumnFour.ofSix, .sixColumnLayout .layoutColumnFive.ofSix, .sixColumnLayout .layoutColumnSix.ofSix {width: auto; float: none;} .layoutColumnWrapper {margin: 0!important;} }