/** * Norbert @ RMG, 2015/04/23 * Paddy @ Radii, 2015/06/24 * Hugo @ RMG, 2015/08/04 * colors - brown #844522 - red #ee3123 - red darker #D42321 extra CSS classes to be used in CMS - hideOnMobile (<480px) - hideOnTablet (<768px) - hideOnDesktop (>480px) - hideOnDesktopButTablet (>768px) - ribbon - apply to content - woodenTable - woodenTableZoom - fixedWidth - accordion */ /** * global CSS */ @font-face { font-family: "roboto"; src: url("/fonts/roboto-regular-webfont.eot"); src: url("/fonts/roboto-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-regular-webfont.woff") format("woff"), url("/fonts/roboto-regular-webfont.ttf") format("truetype"), url("/fonts/roboto-regular-webfont.svg#robotoregular") format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: "roboto"; src: url("/fonts/roboto-bold-webfont.eot"); src: url("/fonts/roboto-bold-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/roboto-bold-webfont.woff") format("woff"), url("/fonts/roboto-bold-webfont.ttf") format("truetype"), url("/fonts/roboto-bold-webfont.svg#robotobold") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: 'Hermes'; src: url('/fonts/hermes-bold-webfont.eot'); src: url('/fonts/hermes-bold-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/hermes-bold-webfont.woff') format('woff'),url('/fonts/hermes-bold-webfont.woff') format('woff'),url('/fonts/hermes-bold-webfont.ttf') format('truetype'); font-weight: 700; font-style: normal; } @font-face { font-family: 'Hermes'; src: url('/fonts/hermes-regular-webfont.eot'); src: url('/fonts/hermes-regular-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/hermes-regular-webfont.woff') format('woff'),url('/fonts/hermes-regular-webfont.woff') format('woff'),url('/fonts/hermes-regular-webfont.ttf') format('truetype'); font-weight: 400; font-style: normal; } @font-face { font-family: 'Hermes'; src: url('/fonts/hermes-black-webfont.eot'); src: url('/fonts/hermes-black-webfont.eot?#iefix') format('embedded-opentype'),url('/fonts/hermes-black-webfont.woff') format('woff'),url('/fonts/hermes-black-webfont.woff') format('woff'),url('/fonts/hermes-black-webfont.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'FontAwesome'; src: url('../share/fonts/fontawesome-webfont.eot?v=4.3.0'); src: url('../share/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../share/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../share/fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../share/fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../share/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body {color: #666666; background: #ffffff url('../images/default-repeat.jpg') repeat center 142px; background-size: 100% auto; font-family: 'roboto', sans-serif; overflow-x: hidden;} @media all and (max-width: 1299px) { body { background-position: center 128px; } } @media all and (max-width: 999px) { body { background: #EEB02C url('../images/default.jpg') repeat-y center 65px; } } img {max-width: 100%; height: auto; width: auto; /* ie8 fix*/} h1 {text-transform: uppercase; font-size: 50px;} h2 {text-transform: uppercase; font-size: 40px;} h3 {text-transform: uppercase; font-size: 30px;} h4 {text-transform: uppercase; font-size: 20px;} h1, h2, h3, h4, h5 { font-family: Hermes, sans-serif; font-weight: 900; font-style: normal; color: #ee3123; } h3 { font-size: 34px; margin: 24px 0; line-height: 1.2;} h3.smaller { font-size: 24px; } p { /* font-size:18px; */ margin: 0 0 15px 0;} h1.pageTitle {font-size: 52px !important; line-height: 1; text-align: center; max-width: 850px; margin-left: auto; margin-right: auto;} h2.layoutTitle {text-align: center;} div.largeTitle h3.contentTitle {font-size: 52px;line-height: 52px;position: relative;} @media (max-width: 999px) { h3.contentTitle {font-size: 36px; line-height: 36px; width: 95%; margin: 0 auto; margin-bottom: 14px;} h1.pageTitle { font-size: 36px !important; line-height: 36px; } h1, h2, h3, h4, h5, ul, p { margin-left: 15px; margin-right:15px; } } ol { counter-reset: item; list-style-type:none; } ol li { position:relative; } ol li:before { content: counter(item) '. '; counter-increment: item; color: #ee3123; position:absolute; left:-23px; font-weight:bold; } hr {width: 100%; height: 20px; margin-bottom: 15px; background: url('/images/zigzag.png') no-repeat center bottom;} .tickTrue::after { content: '\f00c'; font-family: 'FontAwesome'; color: #2fa800; margin-left: 0.6em; vertical-align: top;} .tickFalse::after { content: '\f00d'; font-family: 'FontAwesome'; color: #ee3123; margin-left: 0.6em; vertical-align: top;} div.content-RTE ul { list-style-type:none; margin: 1em 0 2em 0; } div.content-RTE ul li { position:relative; margin: 0 0 10px 20px;} div.content-RTE ul li:before { content: '•'; color: #ee3123; position:absolute; left:-20px; top: -2px; font-weight:bold; font-size: 20px; } a { color: #ee3123; text-decoration: none;} a.scrollTo { left: 50%; margin-left: -13px; opacity: 0.8; display: block; clear: both; width: 25px; height: 61px; background: url(/images/scrollTo.png) no-repeat; position: absolute; bottom: 30px; } a.scrollTo { animation: pinfloat 1s infinite linear; -moz-animation: pinfloat 1s infinite linear; -webkit-animation: pinfloat 1s infinite linear; -webkit-animation-fill-mode: forwards; -animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in-out; } @keyframes pinfloat { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} 10% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 50% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); transform: translateY(15px);} 90% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} } @-moz-keyframes pinfloat { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} 10% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 50% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); transform: translateY(15px);} 90% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} } @-webkit-keyframes pinfloat { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} 10% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 50% { -webkit-transform: translateY(15px); -moz-transform: translateY(15px); transform: translateY(15px);} 90% { -webkit-transform: translateY(4px); -moz-transform: translateY(4px); transform: translateY(4px);} 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); transform: translateY(0);} } @media (max-width: 767px) { a.scrollTo { position: static; width: 15px; height: 36px; background-size: cover; margin: 0 auto 20px auto; display: block; } } button, a.button {overflow: hidden;position:relative;background: url('../images/button.png') no-repeat center top; line-height: 50px;font-family: hermes, sans-serif; min-width: 210px; text-align: center;text-decoration: none;color: white;text-transform: uppercase;font-size: 18px; border: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;} button:after, a.button:after { position: absolute; z-index: 999; font-size: 15px; color: white; content: " "; background: url('../images/arrow.png') no-repeat center center; border: 0; width: 66px; height: 50px; top: 0; left: 300px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } button:hover, a.button:hover { background-image: url('../images/button_hover.png'); } button:hover:after, a.button:hover:after { left: 148px; } button.white, a.button.white {background-image: url('../images/button-white.png'); color: #ee3123;} a.button.load_more { margin: 5px 0 0 0;} a.load_more:after { background: url('../images/arrow-down.png') no-repeat center center; top: -130px; left: 148px; } a.load_more:hover:after { top: 0; } p.load_more { text-align: center; margin-top: 0; margin-bottom: 0; padding: 15px 0 0 0;} div.breadcrumb {display: none;} a.button.extra_space { background: url('../images/button2.png') no-repeat center top; min-width: 250px;} a.button.extra_space::hover { background-image: url('../images/button2_hover.png'); } a.extra_space.load_more:after { left: 188px; } @media (max-width: 767px) { p.load_more { margin-top: 20px; } } /* Hide Onxshop floating bar on mobile */ @media (max-width: 999px) { #onxshopHeader { display: none; } } /** * forms */ form {background: #ffffff; padding: 0; color: #333; margin-bottom: 135px; } form label {font-family: 'roboto', sans-serif; font-weight: bold; color: #666666; margin-bottom: 20px; text-transform: uppercase;} form input, form textarea {border: 2px solid #dedede; border-radius: 10px; width: 100%; padding: 16px 20px; font-size: 16px; font-family: 'roboto', sans-serif; font-weight: bold; } form input[type="radio"] {width: auto; margin-left: 20px;} form textarea {height: 200px; resize: none;} form div.submit {float: right; margin-right: 20px; } form div.submit button {font-weight: 700; } form div.row { padding-bottom: 22px; } form p.note {float: right; margin-right: 20px;} form span.mandatory-mark {color: red;} form select { width: 100%; font-family: 'roboto', sans-serif; font-weight: bold; } .customSelect.dropdown { width: 100%; padding: 12px 40px 6px 20px; background-image: url('../images/dropdown-closed-button.png'); background-position: right center; background-size: auto auto; font-family: 'roboto', sans-serif; font-weight: bold; } .customSelect.dropdown.default span.customSelectInner { color: #666666; font-family: 'roboto', sans-serif; font-weight: bold; } .customSelect.dropdown.default span.customSelectInner::after {content: ' *'; color: red;} @media (max-width: 767px) { form {margin-bottom: 40px; } form div.submit { float: none; margin: 0 auto; width: 210px; } form span.field { width: 100%; } } .required::-webkit-input-placeholder::after {content: ' *'; color: red; font-family: 'roboto', sans-serif; font-weight: bold; } .required:-moz-placeholder::after {content: ' *'; color: red; font-family: 'roboto', sans-serif; font-weight: bold; } .required::-moz-placeholder::after {content: ' *';color: red; font-family: 'roboto', sans-serif; font-weight: bold; } .required:-ms-input-placeholder::after {content: ' *'; color: red; font-family: 'roboto', sans-serif; font-weight: bold; } ::-webkit-input-placeholder {text-transform: uppercase; font-size: 16px; font-weight: bold; line-height: 1.2; color: #666666; } :-moz-placeholder {text-transform: uppercase; font-size: 16px; font-weight: bold; line-height: 1.2; color: #666666; } ::-moz-placeholder {text-transform: uppercase; font-size: 16px; font-weight: bold; line-height: 1.2; color: #666666; } :-ms-input-placeholder {text-transform: uppercase; font-size: 16px; font-weight: bold; line-height: 1.2; color: #666666; } /** * contact form */ div.contact_form form label {display: none;} /** * survey (competitions) */ div.survey legend {display: none;} div.survey textarea {margin-top: 10px;} div.survey span.description {color: red;} div.survey fieldset.single {padding: 0;} div.survey fieldset.user_details div:not(.radio):not(.checkbox) label {display: none;} form.registration {background: transparent;} form.registration fieldset.user_details legend, form.registration fieldset.user_details span.label {display: none;} /* Blockquote */ blockquote { position: relative; text-align: center; background:#EEB02C url('../images/default.jpg') repeat center top; font-family: Hermes, sans-serif; color: #ee3123; font-size: 24px !important; line-height: 26px; font-weight: 900; text-transform: uppercase; padding: 100px;} blockquote:before, blockquote:after { content: ' '; display:block; position: absolute; width: 100%; left: 0; top: 50px; background: url(/images/quote_open.png) top center no-repeat; height: 33px;} blockquote:after { bottom: 50px; top: auto; background: url(/images/quote_close.png) top center no-repeat;} /*hideOnDesktop, hideOnMobile to be used in CMS*/ div.node-hideOnDesktop, .hideOnDesktop { display: none; } div.node-hideOnDesktopButTablet, .hideOnDesktopButTablet { display: none; } @media (max-width: 767px) { div.node-hideOnTablet, .hideOnTablet { display: none; } div.node-hideOnDesktopButTablet, .hideOnDesktopButTablet { display: block; } } @media (max-width: 480px) { div.node-hideOnMobile, .hideOnMobile { display: none; } div.node-hideOnDesktop, .hideOnDesktop { display: block; } } @media (max-width: 480px) { .smallerOnMobile { width: 50%; } } @media all and (max-width: 767px) { blockquote { padding: 100px 25px; } } div.node-fullBleed, div.node-fullBleed p {margin: 0;} div.node-fullBleed > div {max-width: none!important;} @media (max-width: 999px) { div.node-fullBleed p { margin-left: 15px; margin-right: 15px; } } div.fixedWidth {max-width: 600px; margin: 0 auto;} .node-noPadding, .noPadding, .node-noPadding p, .noPadding p { padding: 0; } /** * general structure */ #pageWrapper {padding: 0;} #container {width: 100%; max-width: 100%; padding: 0; } #content {margin-top: 118px;} #contentSide {display:none; } #header {font-size: 80%; border-top: 3px solid #ee3123; margin: 0 auto; position: relative; z-index: 200; min-height: 142px; background: white; } #header::after { content: ''; display: block; width: 100%; height: 1px; position: absolute; bottom: -3px; border-bottom: 3px solid rgba(0,0,0,0.1);} #headerWrapper {clear: both; padding: 0; margin: 0 0;} #header .navBar { min-height: 139px; } @media all and (max-width: 1299px) { #header { min-height: 128px; } #header .navBar {width: 1000px; margin: 0 auto; min-height: 128px; } } @media all and (max-width: 999px) { #header {width: 100%; background: #fff; min-height: 0;} #headerWrapper {background: #fff; } #header .navBar {width: 100%; margin: 0; min-height: 85px; } } @media all and (max-width: 767px) { #header::after { bottom: -1px; border-bottom: 1px solid rgba(0,0,0,0.1);} #header .navBar { min-height: 60px; } } div.rowTop div.node-content-RTE {text-align: center; max-width: 600px; margin: 0 auto;} div.rowMiddle {background: white;} div.rowBottom { padding-top: 100px; padding-bottom: 0; margin-bottom: 0; } body.pageHome div.node-content-RTE { text-align: inherit;} body.pageHome div.rowBottom { padding-top: 0; padding-bottom: 0;} body.product div.node-content-RTE { text-align: inherit;} /* pageHealthyHeroes */ div.pageHealthyHeroes h1 {max-width: 600px;} body.pageHealthyHeroes div.rowTop { min-height: 150px; } body.pageHealthyHeroes #container { background: url(../images/clouds.png) center 240px no-repeat; } body.pageNews div.rowBottom { padding-bottom: 115px; } body.default div.rowBottom { padding-bottom: 110px; } body.pageHome.default div.rowBottom { padding-bottom: 0; padding-top: 0; } @media all and (max-width: 999px) { div.rowBottom { padding-top: 55px; } body.default div.rowBottom { padding-bottom: 50px; } } @media all and (max-width: 767px) { div.rowBottom { padding-top: 55px; } body.default.pageRecipes div.rowBottom, body.default.pageNews div.rowBottom { padding-bottom: 50px; padding-top: 50px; } body.default.pageAbout div.rowBottom { padding-top: 50px; padding-bottom: 0; } body.default.pageHealthyHeroes div.rowBottom { padding-top: 5px; } body.pageProducts #content, body.pageRecipes #content, body.talesPage #content, body.pageHealthyHeroes #content, body.pageNews #content, body.pageAbout #content { margin-top: 56px; } } @media all and (max-width: 600px) { div.pageHealthyHeroes h1.pageTitle { margin-bottom: 30px; } body.default.pageHealthyHeroes div.rowBottom { padding-top: 5px; } } @media all and (max-width: 479px) { body.pageHealthyHeroes div.rowTop { height: 100px; } body.default.pageHealthyHeroes div.rowBottom { padding-top: 5px; } } @media all and (max-width: 380px) { body.pageHealthyHeroes div.rowTop { height: 85px; } body.default.pageHealthyHeroes div.rowBottom { padding-top: 5px; } } /** * General Page rowTop */ .rowTop {padding-bottom: 90px; position: relative; color: #333;} .rowTop:after { z-index: 30; content: ' ' !important; position: absolute; bottom: -10px; height: 10px !important; width:100%; visibility: visible !important; background:url('../images/ribbon-yellow-bottom.png') repeat-x left bottom; } @media all and (max-width: 767px) { .rowTop { padding-bottom: 50px; } } /** * node type layout and content */ div.node_group-layout > div {max-width: 980px; margin: 0 auto;} div.node_group-content > div {max-width: 980px; margin: 0 auto;} @media all and (max-width: 767px) { body div.node div.twoColumnLayout div.layoutColumnOne.ofTwo { float: none; width: 100%; } body div.node div.twoColumnLayout div.layoutColumnTwo.ofTwo { float: none; width: 100%; } /* body div.node div.twoColumnLayout div.layoutColumnOne.ofTwo p { margin: 0 0; padding:20px 0; } What was the purpose of this? It's breaking spacing/formatting on mobile (Hugo) See: https://basecamp.com/2085271/projects/10360481/todos/204783202 https://basecamp.com/2085271/projects/10360481/todos/204784489 */ } /** * fourColumnLayout */ @media all and (max-width: 767px) { div.fourColumnLayout div.layoutColumnOne.ofFour, div.fourColumnLayout div.layoutColumnTwo.ofFour {width: 50%;} div.fourColumnLayout div.layoutColumnThree.ofFour, div.fourColumnLayout div.layoutColumnFour.ofFour {width: 50%;} div.fourColumnLayout div.layoutColumnThree.ofFour {clear: both;} } /** * search input field will be initiated only on click via Javascript */ #search, #shareContainer {display: none; width: 100%;top: 0;left: 0;background: #ee3628;padding:36px 0;z-index: 300;position: relative; float: none; } #searchWrapper { max-width: 999px; margin: 0 auto; position: relative;} #search label { font-family: Hermes, sans-serif; display: block; float: left; font-size: 24px; line-height: 40px; width: 100px; font-weight: bold;} #search input { font-family: Hermes, sans-serif; font-size:24px; text-transform:uppercase; font-weight:bold; background:transparent; border:0; line-height: 40px; padding: 0 20px; width: 100%; display: block; padding-left: 0; position: absolute; color: white; border-bottom: 3px solid #db271a;} #search ::-webkit-input-placeholder { color:#fff; font-family: Hermes, sans-serif; font-weight:bold; text-transform:uppercase; font-size:24px; } #search ::-moz-placeholder { color:#fff; font-family: Hermes, sans-serif; font-weight:bold; text-transform:uppercase; font-size:24px; } /* firefox 19+ */ #search :-ms-input-placeholder { color:#fff; font-family: Hermes, sans-serif; font-weight:bold; text-transform:uppercase; font-size:24px; } /* ie */ #search :-moz-placeholder { color:#fff; font-family: Hermes, sans-serif; font-weight:bold; text-transform:uppercase; font-size:24px; } #search input:focus { outline: none; } #search form { float:none; color:white; text-transform:uppercase; } #search button {background: #ee3628; float:right; height: auto; font-family: 'FontAwesome'; z-index: 999; font-size: 36px; line-height: 43px; color: white; display: block; border: 0; } #search button:before {content: "\f105";} #search button span {text-indent:-10000px;display: none;} @media all and (max-width: 999px) { #search { padding-left:40px; padding-right:40px; margin-bottom: 0; float: none;} } @media all and (max-width: 767px) { #search { padding-left: 20px; padding-right: 2px; padding-top: 18px; } } /* * Share Container */ div.social_network_share ul { text-align:center; } div.social_network_share li { cursor: pointer; background: white; border-radius: 999px; text-align: center; margin-right:15px; display: inline-block; position: relative; float: none;} div.social_network_share li:before { display: block; font-family: 'FontAwesome'; z-index: 999; width: 50px; font-size: 26px; line-height: 1.0; color: #ee3628; position: absolute; line-height: 50px;} div.social_network_share li.facebook:before { content: "\f09a"; } div.social_network_share li.twitter:before { content: "\f099"; } div.social_network_share li.mailto:before { content: "\f003"; } div.social_network_share li.google:before { content: "\f0d5"; } div.social_network_share li.pinterest { display:none; } div.social_network_share li a { background: transparent !important; background: none; width: 50px !important; height: 50px !important; border: 0 !important; border-radius: 0 !important; padding: 0;z-index: 999; padding: 0 !important; position: relative; text-indent: -10000px; display: block;} div.social_network_share li.mailto a { } div.social_network_share li.twitter a { } div.social_network_share li span { display: block !important; } /** * logo */ #logo {padding-top: 28px; margin: 0 auto; width: 100%; float: none; margin-top: -206px; position: absolute;} #logo a {font-size: 2em;} #logo a { display: block; height: 118px; width: 232px; background: url('../images/logo.png') center center no-repeat; top: 130px; position: relative; z-index: 999; margin: 0 auto;} #logo a span { display: none; } @media (max-width: 1299px) { #logo { padding: 0; margin: -37px 0 0 0; width: auto; position: static; } #logo a { position: static; margin: 0 0 0 20px; width: 166px; height: 84px; background-size: 166px auto;} } @media (max-width: 999px) { #logo { z-index: 0; background: white; padding-top: 0px; width: 100%; margin-top: 8px; margin-left: 0; } #logo a { height: 80px; width: 200px; margin: 0; background-size: 160px auto; display: inline-block;} } @media (max-width: 767px) { #logo { z-index: 0; background: white; padding-top: 0px; width: 100%; margin-top: 3px; margin-left: -6px; } #logo a { height: 54px; width: 150px; margin: 0; background-size: 115px auto; display: inline-block;} } /** * globalNavigation */ #globalNavigation { margin: 0 auto; float: none; position: relative; z-index: 200; clear: both; top: -12px;} #globalNavigationWrapper { float: right;} #globalNavigationWrapper ul { padding-top: 0px; } #globalNavigationWrapper li { background: url('../images/badge_small.png'); cursor: pointer; text-align: center; margin-right: 11px; display: inline-block; position: relative; } #globalNavigationWrapper li a { z-index: 999; padding:0; position: relative;} #globalNavigationWrapper li span { display: block; width: 40px; height: 40px; } #globalNavigation li:before { font-family: 'FontAwesome'; z-index: 999; width: 20px; font-size: 17px; line-height: 1.0; color: white; position: absolute; left: 10px; top: 11px; } #globalNavigation li.first:before { content: "\f002"; } #globalNavigation li.middle:before { content: "\f1e0"; } #globalNavigation li.last:before { content: "\f09a"; } #globalNavigation li span { text-indent:-10000px} #globalNavigation a.reveal {display: none;} @media (max-width: 1299px) { #globalNavigation { float: right; top: -22px; } #globalNavigationWrapper { display: block; } } @media (max-width: 999px) { #globalNavigation { top: 8px; } #globalNavigationWrapper ul { float: left; } #globalNavigationWrapper li.node_id_1091 { display: none; } #globalNavigationWrapper li { background: url('../images/badge-larger.png'); } #globalNavigationWrapper li span { width: 60px; height: 60px; } #globalNavigation li:before { font-size: 28px; width: 37px; top: 15px; } #globalNavigation a.reveal { color: white; float: right; margin-top: 0; cursor: pointer; background: url('../images/badge-larger.png'); text-align: center; margin-right: 15px; display: inline-block; position: relative;z-index: 999; padding: 0;} #globalNavigation a.reveal:before {content: "\f0c9"; font-family: 'FontAwesome'; z-index: 999; width: 36px; font-size: 32px; line-height: 1.0; color: white; position: absolute; left: 12px; top: 13px;} #globalNavigation a.reveal span { display: block; width: 60px; height: 60px; text-indent: -10000px; } } @media (max-width: 767px) { #globalNavigation { width: 100%; top: -7px; left: 0; margin: 0; float: none; } #globalNavigationWrapper ul { padding-right: 7px; padding-top:10px; float: left; padding-top: 14px;} #globalNavigationWrapper li { margin: 0 0 0 5px;} #globalNavigation li:before { left: 12px; top: 13px; font-size: 17px; width: 20px; } #globalNavigationWrapper li { background: url('../images/badge.png') no-repeat; } #globalNavigationWrapper li span { width:45px; height:45px; } #globalNavigation a.reveal { background: url('../images/badge.png') no-repeat; margin-top: 14px; } #globalNavigation a.reveal:before { width: 20px; font-size: 17px; top: 14px; } #globalNavigation a.reveal span { width: 45px; height: 45px; } } /** * primaryNavigation */ #primaryNavigation {width: 1000px; margin: 0 auto 0 auto; position: relative; top: 50px; } #primaryNavigation ul {padding-bottom: 12px; height: 58px; } #primaryNavigation ul li { margin: 0; font-weight: bold; display: table; float: left; } #primaryNavigation ul li a {font-weight: bold; width: 100%; height: 34px; display: table-cell; vertical-align: middle; text-align: center; font-size: 15px; font-family: Hermes, sans-serif; padding: 0; color: #844522; text-transform: uppercase; white-space: normal; line-height: 17px;} #primaryNavigation ul li a:hover { color: #ee3123; } #primaryNavigation ul li a.active, #primaryNavigation ul li a.open { } #primaryNavigation ul li a span { } #primaryNavigation ul li a:active span { text-decoration:none; } #primaryNavigation ul ul {display: none;} #primaryNavigation a.close { display: none; } #primaryNavigation .bottom { } #primaryNavigation .bottom span { } #primaryNavigation ul li.node_id_1033 { width: 96px; margin-right: 30px; } #primaryNavigation ul li.node_id_1034 { width: 77px; margin-right: 30px; } #primaryNavigation ul li.node_id_1035 { width: 118px; margin-right: 288px; } #primaryNavigation ul li.node_id_1037, #primaryNavigation ul li.node_id_1367 { width: 143px; margin-right: 30px; } #primaryNavigation ul li.node_id_83 { width: 62px; margin-right: 30px; } #primaryNavigation ul li.node_id_1023 { width: 88px; } #primaryNavigation .mobileOnly { display: none; } #primaryNavigation div.mobileOnly { display: none; } #primaryNavigation li.mobileOnly { display: none; } #primaryNavigation.open div.mobileOnly { display: block; } @media all and (max-width: 1299px) { #primaryNavigation { display: block; height: auto; width: 800px; margin: 0 0 0 200px; top: 40px; } #primaryNavigation ul li a { font-size: 14px; } #primaryNavigation ul li.node_id_1033 { width: 86px; margin-right: 18px; } #primaryNavigation ul li.node_id_1034 { width: 67px; margin-right: 18px; } #primaryNavigation ul li.node_id_1035 { width: 108px; margin-right: 18px; } #primaryNavigation ul li.node_id_1037, #primaryNavigation ul li.node_id_1367 { width: 133px; margin-right: 18px; } #primaryNavigation ul li.node_id_83 { width: 52px; margin-right: 18px; } #primaryNavigation ul li.node_id_1023 { width: 78px; } } @media all and (max-width: 999px) { #primaryNavigation .content { padding-bottom:10px; background: #ee3123; border-bottom: 1px solid #ffffff;} #primaryNavigation {font-family: inherit; clear: both; margin-left: 1em; display: none; width: 100%; padding: 0; margin: 0; border-radius: 0; z-index: 999; top: 0;} #primaryNavigation ul li {width: 100% !important; text-align: left; background: #ee3123; list-style-type: none; padding-left: 0; padding: 0; margin: 0 !important; display: list-item; float: none; } #primaryNavigation ul {background: url('/images/nav-zigzag.png') no-repeat center bottom !important; padding: 26px 0 32px 0; width: 100%; color: white; height: auto;} #primaryNavigation ul:before { font-size: 18px; font-family: Hermes, sans-serif; font-weight: bold; content: 'Navigation'; display: block; text-align: center; text-transform: uppercase; padding: 12px 25px 26px 25px; color: #a80e02; background: url('/images/nav-zigzag.png') no-repeat center bottom; margin-bottom: 18px;} #primaryNavigation ul ul {display: none; width: 100%; margin-left: 0;} #primaryNavigation ul ul li {margin-left: 0;} #primaryNavigation ul ul a {padding-left: 50px;} #primaryNavigation ul ul ul {display: none;} #primaryNavigation a.facebook { text-align: center; font-size: 19px; font-family: Hermes, sans-serif;text-transform:uppercase;font-weight:bold;color: white; display: block; width: 100%; margin: 0; padding: 28px 25px;} #primaryNavigation a.facebook span { } #primaryNavigation a.facebook span:before { content: "\f09a"; display: inline-block; font-family: 'FontAwesome'; z-index: 999; width: 30px; line-height: 1.0; line-height: 30px; margin-right: 10px; background: #cf2017; border-radius: 999px; } #primaryNavigation ul li a {color: white; display: block; width: 100%; margin: 0; padding: 13px 0; font-size: 18px;} #primaryNavigation ul li a:hover { color:white !important; text-decoration:underline; } #primaryNavigationWrapper {margin: 0; padding: 0;} #primaryNavigation li.mobileOnly { display: list-item; } #primaryNavigation a.close { width: 20px; height: 20px; background: url('../images/close-button.png'); background-size: cover; display: block; position: absolute; top: 20px; right: 20px; } #primaryNavigation a.close span { display: none; } } /** * secondaryNavigation */ #secondaryNavigation {text-align: center; position: relative; top: -15px; z-index: 50; width: 100%; padding: 0; font-family: 'Hermes', sans-serif; text-align: center; } #secondaryNavigationWrapper { display: inline-block; } #secondaryNavigation ul {padding: 0; margin: 0 auto;} #secondaryNavigation li {display: inline-block; margin: 0; padding: 0; float: left; border-radius: 0; } #secondaryNavigation li a {color: white; margin: 0; padding: 0 16px; height: 50px; line-height: 50px; border-right: 1px solid #B20B10; background: #ee3123; text-transform: uppercase; font-weight: bold;} #secondaryNavigation li.first a {border-top-left-radius: 100px; border-bottom-left-radius: 100px; padding-left: 24px;} #secondaryNavigation li.last a {border-top-right-radius: 100px; border-bottom-right-radius: 100px; padding-right: 24px;} #secondaryNavigation li a:hover, #secondaryNavigation li.active a, #secondaryNavigation li.open a {background: #D42321; color: white; font-weight: bold;} #secondaryNavigation ul ul {display: none;} #secondaryNavigation a:active span { text-decoration: none; } @media all and (max-width: 999px) { #secondaryNavigation li a { font-size: 13px; font-weight: bold; padding: 0 10px; } } @media all and (max-width: 800px) { #secondaryNavigation { border: 2px solid #dedede; border-radius: 8px; width: 80%; max-width: 740px; margin: 0 auto; padding: 0 40px 0 20px; background: #ffffff url('../images/dropdown-closed-button.png') right 14px no-repeat; background-size: auto auto; cursor: pointer;} #secondaryNavigation li {display: none; float: none; margin: 0 auto;} #secondaryNavigation li.default, #secondaryNavigation li.active {display: block; } #secondaryNavigation li a { font-size: 16px; color: #666666; background: #ffffff; text-align: left; border: none; padding: 0; } #secondaryNavigation li.first a {border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0; } #secondaryNavigation li.last a {border-top-right-radius: 0; border-bottom-right-radius: 0; padding: 0; } #secondaryNavigation li a:hover, #secondaryNavigation li.active a, #secondaryNavigation li.open a { background: #ffffff; color: #666666; } #secondaryNavigationWrapper { display: block; } #secondaryNavigation.open li { display: block; } } /** * shared_healthy_heroes_download */ div.shared_healthy_heroes_download {background: url('/images/product_bg.jpg') repeat center top; background-size: 100% auto; padding: 50px 0;} div.shared_healthy_heroes_download div.onxshop_edit_layout, div.shared_healthy_heroes_download div.onxshop_edit_content, div.shared_healthy_heroes_download div.onxshop_add_content {display: none;} @media all and (max-width: 767px) { div.shared_healthy_heroes_download div.threeColumnLayout div.layoutColumnOne.ofThree, div.shared_healthy_heroes_download div.threeColumnLayout div.layoutColumnTwo.ofThree, div.shared_healthy_heroes_download div.threeColumnLayout div.layoutColumnThree.ofThree { float: none; width: 100%; padding-bottom: 60px; } } /*remove bottom padding to make shared_healthy_heroes_download full bleed*/ body.node_id_1367 div.rowBottom, body.parent_node_id_1367 div.rowBottom {padding-bottom: 0; padding-top: 50px} /** * pageHome */ body.pageHome { background-position: center 0; } body.pageHome #header {background: transparent; border-top: 0;} body.pageHome #header::after {display: none;} body.pageHome #content { margin-top: 0; } body.pageHome #primaryNavigation ul {background: url('../images/nav.png') repeat-x left bottom;} body.pageHome #primaryNavigation ul li a {color: white;} body.pageHome #primaryNavigation ul li a:hover {color: #ee3123;} body.pageHome #primaryNavigation ul li a:active span { text-decoration:none; } body.pageHome .rowTop { padding-bottom: 0; } @media all and (max-width: 1299px) { body.pageHome #primaryNavigation ul {background: url('../images/nav2.png') no-repeat left bottom;} } @media all and (max-width: 999px) { body.pageHome #header {border-top: 3px solid #ee3123; background: #fff;} body.pageHome #header::after {display: block;} } /** * Homepage About Node */ div.node-about { padding-bottom: 110px; padding-top: 46px; font-weight: normal;} div.node-about img { max-width:100%; height:auto; } div.node-about h3.contentTitle { margin-top: 24px; font-weight: 900; width:400px;} div.node-about p { margin-top: 24px; /* font-weight: bold; */} @media (max-width: 999px) { div.node-about h3.contentTitle { font-size: 36px; line-height: 37px; } body.pageHome .rowTop h3.contentTitle { margin-left: 15px; width:300px; } } @media (max-width: 767px) { div.node-about { text-align:center; padding-top: 25px; padding-bottom: 00px;} div.node-about img { display:block; margin:0 auto;max-width: 100%; } div.node-about h3.contentTitle { max-width: 100%; margin: 0 auto; } body div.node.node-about div.twoColumnLayout div.layoutColumnOne.ofTwo p { max-width: 80%; margin: 0 auto; } body div.node.node-about div.twoColumnLayout div.layoutColumnOne.ofTwo { display: table-footer-group; } body div.node.node-about div.twoColumnLayout div.layoutColumnTwo.ofTwo { display: table-header-group; } body.pageHome .rowTop h3.contentTitle {margin: 0 auto; width:auto; } body.pageHome .rowTop img { max-width: 100% } body.pageHome .rowTop div.node-about { margin-top:0; padding-top:0 } body.pageHome div.node.node-about div.twoColumnLayout div.layoutColumnOne.ofTwo p { max-width: 100%; padding-bottom: 0; margin-bottom: -10px; } body.pageHome div.node.node-about div.twoColumnLayout div.layoutColumnOne.ofTwo { display: table-header-group; } body.pageHome div.node.node-about div.twoColumnLayout div.layoutColumnTwo.ofTwo { display: table-footer-group; } } @media (max-width: 767px) { div.node-swapColumns div.twoColumnLayout div.layoutColumnOne.ofTwo { display: table-footer-group; } div.node-swapColumns div.twoColumnLayout div.layoutColumnTwo.ofTwo { display: table-header-group; } } /** * Homepage featureDedicated */ div.node-featureDedicated {background: url('../images/feature-dedicated-bg.jpg') center top; background-size: cover; padding: 53px 0; text-align: center; margin: 0;} div.node-featureDedicated p > img { margin-top: 100px; display: inline-block; } div.node-featureDedicated a.button { margin-top: 100px; margin-bottom: 35px; } @media all and (max-width: 999px) { div.node-featureDedicated p > img { margin-top: 30px; } div.node-featureDedicated a.button { margin-top: 80px; margin-bottom: 0; } } /** * Homepage featureSustainability */ div.node-featureSustainability {background: url('../images/feature-sustainability-bg.jpg') center top; background-size: cover; padding: 53px 0; text-align: center; margin: 0; min-height: 600px;} div.node-featureSustainability p > img { margin-top: 100px; display: inline-block; } div.node-featureSustainability a.button { margin-top: 100px; margin-bottom: 35px; } @media all and (max-width: 999px) { div.node-featureSustainability p > img { margin-top: 30px; } div.node-featureSustainability a.button { margin-top: 80px; margin-bottom: 0; } } /** * Homepage featureLady */ div.node-featureLady {background: url('../images/feature-lady-eating-bread-bg.jpg') center top; background-size: cover; padding: 53px 0; text-align: center; margin: 0;} div.node-featureLady p.buttons {margin-top: -70px; margin-left: -80px;} div.node-featureLady a.button {margin: 0 20px 20px 20px;} @media all and (max-width: 768px) { div.node-featureLady p.buttons {margin-left: 0;} } /** * Homepage National Bread Week Node */ div.node-featureNationalBreadWeek {background: #664999; padding: 53px 0; text-align: center; margin: 0;} div.node-featureNationalBreadWeek p > img { display: inline-block; } div.node-featureNationalBreadWeek a.button { margin-bottom: 35px;} @media all and (max-width: 999px) { div.node-featureNationalBreadWeek p > img { margin-top: 30px; } div.node-featureNationalBreadWeek a.button { margin-top: 80px; margin-bottom: 0; } } /** * Homepage National Bread Week Node */ div.node-featureNationalBreadWeekVideo {background: #664999; color: white; padding: 60px 0;} div.node-featureNationalBreadWeekVideo div.video {margin-top: 46px;} div.node-featureNationalBreadWeekVideo div.video div.fluid-video.widescreen {padding-bottom: 56%;} @media all and (max-width: 999px) { div.node-featureNationalBreadWeekVideo {padding: 10px 0; text-align: center;} } /** * Homepage Keep It Fresh */ div.node-featureKeepItFresh {background: #cd1e1a; padding: 53px 0; text-align: center; margin: 0;} div.node-featureKeepItFresh p > img {display: inline-block;} div.node-featureKeepItFresh a.button {margin-bottom: 35px;} @media all and (max-width: 999px) { div.node-featureKeepItFresh p > img {margin-top: 30px;} div.node-featureKeepItFresh a.button {margin-top: 80px; margin-bottom: 0;} } /** * Homepage Wooden Table Node */ div.node-woodenTable {background: url('../images/woodenTable-bg.jpg') center top; background-size: cover; padding: 53px 0;text-align: center;} div.node-woodenTable a.button { margin-left: -70px; margin-top: 10px;} div.node-woodenTable img {max-width: 136%;height:auto;margin-left: -67px;margin-top: 43px;} body div.node.node-woodenTable div.layoutContentWrapper { display: table; } body div.node.node-woodenTable div.layoutBody { display: table-row; } body div.node.node-woodenTable div.layoutColumnOne.ofTwo { display: table-cell; vertical-align: middle; float: none; } body div.node.node-woodenTable div.layoutColumnTwo.ofTwo { display: table-cell; vertical-align: middle; float: none; } @media all and (max-width: 999px) { div.node-woodenTable div.layoutColumnOne.ofTwo img {max-width: 80%; height:auto; margin: 0; } div.node-woodenTable { padding-top:30px; } div.node-woodenTable h3.contentTitle { display:block; margin: 48px auto 0; width:auto; max-width: 370px; background-size: 90% auto;} div.node-woodenTable a.button { margin:20px auto;} } @media all and (max-width: 767px) { div.node-woodenTable { padding: 30px 0 25px 0; background-position: 10% -80px; background-size: auto 120%; } div.node-woodenTable h3.contentTitle { display:block; margin: 0 auto 0; width:auto; max-width: 370px; background-size: auto 100%; height: 130px; } div.node-woodenTable a.button { margin:20px auto;} div.node-woodenTable img { margin: 5% !important; max-width: 90%; } body div.node.node-woodenTable div.layoutContentWrapper { display: block; } body div.node.node-woodenTable div.layoutBody { display: table; } body div.node.node-woodenTable div.layoutColumnOne.ofTwo { display: table-footer-group; } body div.node.node-woodenTable div.layoutColumnOne.ofTwo .layoutColumnWrapper { position: relative; top: -10px; } body div.node.node-woodenTable div.layoutColumnTwo.ofTwo { display: table-header-group; } body div.node.node-woodenTable div.twoColumnLayout div.layoutColumnOne.ofTwo p a { margin: 0; } body div.node.node-woodenTable div.twoColumnLayout div.layoutColumnOne.ofTwo p { padding: 20px 0 0 0; } body div.node.node-woodenTable div.twoColumnLayout div.layoutColumnTwo.ofTwo p { margin: 0;} body div.node.node-woodenTable div.twoColumnLayout div.layoutColumnTwo.ofTwo p img { margin: 0 !important; max-width: 100%; } body div.node.node-woodenTable div.layoutColumnTwo.ofTwo div.layoutContentWrapper { padding-top: 7%; } #node_id_1265 { margin-top: 0; margin-bottom: 0px; position: relative; left: 10px; top: 20px; } } /** * Homepage Ribbon Node */ div.node-ribbon { position: relative; margin:0; background: url('/images/product_bg.jpg') center top;} body.pageHome div.node-ribbon:before { content:' '; display:block; position: absolute; width: 100%; height: 10px; top: -10px; background: url('../images/ribbon-white-top.png') repeat-x left top;} body.pageHome div.node-contact:before { content:' '; display:block; position: absolute; width: 100%; height: 10px; top: -10px; background: url('../images/ribbon-yellow-top.png') repeat-x left top;} div.node-ribbon h3.contentTitle {font-size: 52px;line-height: 52px;position: relative; text-transform: uppercase; text-align: center; font-weight: 900; padding-top: 100px; margin-bottom: 70px; } div.node-ribbon h3.contentTitle::after { content: ' '; display: inline-block; width: 100%; border-bottom: 1px solid #9C6616; border-top: 3px solid #9C6616; margin: 8px 0; padding: 2px 0; position: absolute; top: 115px; left: 0;} div.node-ribbon h3.contentTitle span {display: inline-block;background: #F6F6F6 url('/images/product_bg.jpg') repeat center top; border-radius: 100px; /*border: 3px solid rgba(255,255,255,0.1)*/; padding: 0 36px; z-index: 50; position: relative;} div.shared_footer_contact div.node-ribbon h3.contentTitle span {background: #EFC018 url('../images/how_bread_is_made_made_of_bg.png') repeat center top; background-position-y: -100px; border-radius: 100px; } @media all and (max-width: 999px) { div.node-ribbon h3.contentTitle { margin-bottom: 50px; } div.node-ribbon h3.contentTitle span { margin-bottom: 0px; font-size: 36px; line-height: 1; padding: 0 20px;} div.node-ribbon h3.contentTitle::before, div.node-ribbon h3.contentTitle::after { top: 122px; } } @media all and (max-width: 767px) { div.shared_footer_contact div.node-ribbon h3.contentTitle { padding-top: 50px; margin-bottom: 30px; } div.shared_footer_contact div.node-ribbon h3.contentTitle:before, div.shared_footer_contact div.node-ribbon h3.contentTitle::after { top: 56px; } } div.node-ribbon div.contentBody p { margin-bottom: 0; } /** * stack_list */ div.stack_list::after { content: ''; clear: both; display: block; } div.stack_list img { display: block; margin: 0 auto; width: 100%; } div.stack_list div.item { float: left; width: 31.6%; height: 0; padding: 0 0 38% 0; margin: 0 0 3% 0; position: relative; } div.stack_list div.item:nth-child(3n+1) { margin-right: 2.6%; } div.stack_list div.item:nth-child(3n) { margin-left: 2.6%; } div.stack_list div.item a { display: block; width: 100%; height: 100%; color: white; background: url(../images/wooden_bg.jpg); position: absolute; top: 0; left: 0; overflow: hidden; } div.stack_list div.item div.gridImage { position: absolute; top: 0; } div.stack_list div.item div.info { position: absolute; width: 100%; height: 130%; top: 60%; padding: 25% 6% 0 6%; background: url(../images/news_hover_over.png) no-repeat center top; transition: all 0.3s ease-out; z-index: 10; } div.stack_list div.item div.info div.wrap { position: relative; top: 0; transition: top 0.3s ease-in-out;} div.stack_list div.item div.info h4 { color: white; margin: 0; height: 60px; width: 100%; text-align: center; font-size: 16px; line-height: 1.13; text-transform: uppercase; font-weight: bold; display: table; } div.stack_list div.item div.info h4 span { display: table-cell; vertical-align: middle; position: relative; } div.stack_list div.item div.info div.description { font-size: 18px; line-height: 24px; opacity: 0; transition: opacity 0.2s ease; text-align: center;} div.stack_list div.item div.info div.created { display: none; } div.stack_list div.item.t3:after { content: ''; display: block; position: absolute; top: 22px; right: 0; width: 50px; height: 50px; background: url(../images/tag-video.png) no-repeat; pointer-events: none;} div.stack_list div.item a.animate div.info { top: -22%; background: url(../images/news_hover.png) no-repeat center top; transition: all 0.3s ease-in-out; } div.stack_list div.item a.animate div.info div.wrap { top: 28%; transition: top 0.3 ease-in-out; } div.stack_list div.item a.animate div.info div.description { background: url('../images/arrow-large.png') no-repeat center bottom; padding-bottom: 30px; opacity: 1; transition: opacity 0.6s ease 0.2s; } @media all and (max-width: 999px) { div.stack_list { margin: 0 20px; } div.stack_list div.item div.info { top: 55%; } div.stack_list div.item a.animate div.info { top: -30%; } } @media all and (max-width: 767px) { div.stack_list { margin: 0 auto; width: 100%; padding: 0 20px; max-width: 310px; } div.stack_list div.item { float: none; margin: 0 auto 30px auto; width: 100%; padding: 0 0 114% 0; } div.stack_list div.item:nth-child(3n+1), div.stack_list div.item:nth-child(3n) { margin: 0 auto 30px auto; } div.stack_list div.item:last-child { margin-bottom: 0; } div.stack_list div.item div.info div.description { font-size: 16px; line-height: 20px; } } /** * Homepage Ribben View All Node */ div.node-ribbon_viewall { background: url('/images/product_bg.jpg'); background-size: cover; /* background:white; */ margin: 0; padding-top: 35px; padding-bottom: 70px; position: relative;} div.node-ribbon_viewall:after { content:' '; display:block; position: absolute; width: 100%; height: 10px; bottom: -10px; background: url('../images/ribbon-white-bottom.png') repeat-x left bottom; } div.node-ribbon_viewall p { margin:0; } /** * Homepage Wooden Table Zoom */ div.node-woodenTableZoom { padding-top: 60px; padding-bottom: 120px; background: url('../images/woodenTableZoom.jpg') repeat-x center top; background-size: cover;} div.node-woodenTableZoom div.contentBody { color:white; } div.node-woodenTableZoom img { margin-top:130px; } div.node-woodenTableZoom h3 { color:white; padding-top: 69px; /* font-size: 73px; */} div.node-woodenTableZoom a.button { margin-top:10px; } @media all and (max-width: 999px) { div.node-woodenTableZoom img { max-width: 110%; } div.node-woodenTableZoom h3 { font-size:45px; line-height: 42px; margin-left: 15px; margin-bottom: 15px;} } @media all and (max-width: 767px) { div.node-woodenTableZoom { text-align: center; padding-top: 0; padding-bottom: 22px; background-position: center -50px; background-size: auto 110%; } div.node-woodenTableZoom .node { margin:0; } div.node-woodenTableZoom p { /* margin:0; */} div.node-woodenTableZoom h3 { padding-top: 15px; margin: 0 auto 15px; font-size: 36px; line-height: 36px;} div.node-woodenTableZoom img { height:auto; margin: 0 0 auto 5px; background-size:auto 100%; padding-top: 58px;} } /** * Homepage Contact Node */ div.shared_footer_contact { background: url('../images/how_bread_is_made_made_of_bg.png') repeat center top; background-size: cover;} div.node-contact { background: transparent; background-size: cover; text-align: center; color: #333;} div.node-contact:before { content:' '; display:block; position: absolute; width: 100%; height: 10px; top: -10px; background: url('../images/ribbon-yellow-top.png') repeat-x left bottom; } div.node-contact h3.contentTitle span { } div.node-contactColumns { text-align: center; padding-top: 50px; padding-bottom: 66px; background: transparent; background-size: cover; color:#333; } div.node-contactColumns div.node-layout-2columns { background:url('/images/contact_x.png') no-repeat center center; } div.node-contactColumns h3 { padding-top: 74px; font-size: 36px;} div.node-contactColumns div.layoutColumnOne h3 { background: url('../images/stopby.png') no-repeat center top; margin-bottom: 20px;} div.node-contactColumns div.layoutColumnTwo h3 { background: url('../images/connect.png') no-repeat center top; margin-bottom: 20px;} div.node-contactColumns a { text-decoration:none; color:#333; } div.node-contact div.contentBody p { max-width: 690px; margin: 0 auto; padding: 0 15px;} @media all and (max-width: 999px) { div.node-contactColumns h3 { font-size: 36px;} } @media all and (max-width: 767px) { div.node-contactColumns {padding-top: 10px; padding-bottom: 44px;} div.node-contactColumns div.node-layout-2columns div.twoColumnLayout div.layoutColumnOne.ofTwo { padding-bottom: 0px; } div.node-contactColumns div.node-layout-2columns div.twoColumnLayout div.layoutColumnTwo.ofTwo { padding-top: 50px; } div.node-contactColumns h3 { font-size: 28px;} div.node-contactColumns div.node-layout-2columns { background-position: 50% 52%; } body div.node-contactColumns div.twoColumnLayout div.layoutColumnOne.ofTwo p { padding-top: 0; } } @media all and (min-width: 1200px) { div.node-contact {background-size: 100%; } } /** * Homepage Map Node */ div.node-map { padding-bottom: 147px; background:url('../images/map.jpg') no-repeat center top; background-size: cover;} div.node-map img { margin-top: 70px; cursor:pointer; } @media all and (max-width: 999px) { div.node-map { padding-bottom: 120px; } div.node-map img { margin-top: 20px; } } /** * Footer */ #footer { background: #ee3123; font-family: Hermes; color: white; line-height: 18px; font-size: 15px; font-weight: bold; text-transform: uppercase;margin-top: 0px; overflow: hidden;} #footer ul { padding: 0 14px 0 0;} #footer a { background: url(../images/footer-list.png) no-repeat right center; color: white; padding: 0 20px 0 14px; line-height: 2; font-size: 14px; position: relative;} #footer li.last a { background: transparent;} #footerWrapper {background: url('../images/footer_logo.png') left 43px no-repeat #ee3123;width: 1080px; margin: 0 auto; padding: 40px 0 40px 230px;} #footerWrapper .content { overflow:hidden; text-align: center;} #footerNavigation {width: auto; max-width: 450px; text-align: center; margin-left: 30px; display: inline-block;} #footerLogos {float:right; padding-top: 26px;} #footerLogosWrapper div.content div.image { height:70px; display: inline-block; margin: 0 0 0 19px;} #footerLogosWrapper div.content a { display: inline-block; background: none; padding: 0; margin: 0; } #footerLogos a.origin_green div.image { width: 50px; background: url('../images/origin-green1.png') no-repeat left top; background-size: 100%;} #footerLogos a.origin_green div.description {display: inline-block; vertical-align: top; height: 70px; margin-left: 15px; max-width: 120px; font-size: 11px; text-transform: none; font-weight: normal; text-align: left; line-height: 120%;} #footerLogos a.gi div.image {width: 42px; background: url('../images/gi.png') no-repeat left top; } #footerLogos a.halal div.image {width: 50px; background: url(../images/logo-halal.png) no-repeat center top; background-size: 100%; } @media all and (max-width: 999px) { #footerLogos, #footerNavigation { float:none; } #footer a.last { background:transparent; } #footerWrapper { width: auto; background-position: 5% 60px; } #footerNavigation { margin-left: 0; } } @media all and (max-width: 800px) { #footer { line-height: 43px; padding: 0 0;} #footer ul { padding: 0;} #footer ul li { display:block; } #footer a { background: url(../images/footer-list.png) no-repeat center bottom; line-height: 48px; text-align: center;} #footerWrapper {width: auto; background: url('../images/footer_logo.png') no-repeat center 40px; padding-left: 0;} #footerNavigation {width: auto;float: none;padding-top: 124px;} #footerLogos { float: none; text-align:center; } #footerLogosWrapper div.content div { float:none; display:inline-block;} } @media all and (max-width: 767px) { #footer { padding-top: 6px; } #footerWrapper { padding: 30px 25px 10px 25px; } } /** * copyright */ #copyright { padding: 0; margin-top: 30px; width: 100%; white-space: normal; line-height: 1.1; } @media all and (max-width: 999px) { #copyright {float: none; text-align:center; padding:10px 0;} } /** * shared_footer_contact */ div.shared_footer_contact div.onxshop_edit_content, div.shared_footer_contact div.onxshop_edit_layout, div.shared_footer_contact div.onxshop_add_content {display: none;} /** * pageHowBreadIsMade */ body.pageHowBreadIsMade { background: url('/images/how_bread_is_made_header2.jpg') no-repeat center 137px; background-size: auto; } body.pageHowBreadIsMade div.rowTop { padding-bottom:0; color: #666; } body.pageHowBreadIsMade div.rowTop:after { display: none; } body.pageHowBreadIsMade div.rowBottom { padding: 0; } @media all and (max-width: 1299px) { body.pageHowBreadIsMade { background-position: center 128px; } } @media all and (max-width: 999px) { body.pageHowBreadIsMade { background-position: center -10px; } } /** * HAVE YOU EVER WONDERED HOW BREAD IS MADE? */ body.pageHowBreadIsMade p { font-weight: normal; } body.pageHowBreadIsMade img { display:block; margin:0 auto; max-width:100%; height:auto; } body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree { position:relative; } body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree h3 { position:absolute;background: url('../images/button.png') no-repeat center top; line-height: 50px;width: 210px; font-size: 18px; text-align: center;text-decoration: none;color: white !important;text-transform: uppercase; top: 346px; left: 58px;} body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree p, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree p, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree p { margin: 50px 0; text-align: center; } @media all and (max-width: 999px) { body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree h3 { margin:0 auto; left: 0; width: 100%; position: absolute; top: 315px; } } @media all and (max-width: 767px) { body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree { width:100%; } body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree h3, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree h3 {position: static; margin: -25px auto -28px;z-index: 999;position: relative;top: auto;left: auto; } body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnOne.ofThree p, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnTwo.ofThree p, body.pageHowBreadIsMade div.threeColumnLayout div.layoutColumnThree.ofThree p { margin: 51px 15px 0; text-align: center; } } /** * Post Zigzag Divider */ body.pageHowBreadIsMade div#node_id_1173 { background: url('/images/zigzag.png') no-repeat center bottom; margin-bottom:60px; } body.pageHowBreadIsMade div#node_id_1177 { background: url('/image/var/files/tales/rolling-pin.png') no-repeat right bottom; } body.pageHowBreadIsMade div#node_id_1211 { display: none; } body.pageHowBreadIsMade div#node_id_1177 img, body.pageHowBreadIsMade div#node_id_1211 img { max-width:100%; height:auto; } body.pageHowBreadIsMade div#node_id_1212 { clear:both; background: url('/images/rowTop.png') repeat-x center bottom; margin: 0; position: relative; height: 45px; overflow: visible;} @media all and (max-width: 999px) { body.pageHowBreadIsMade div#node_id_1059 { margin-top: -74px; } body.pageHowBreadIsMade div#node_id_1173 { padding-bottom: 40px; } } /** * Bread Divider */ body.pageHowBreadIsMade div#node_id_1177 { padding-bottom: 117px;} body.pageHowBreadIsMade div#node_id_1177 div.node-content-RTE { max-width:100%; } body.pageHowBreadIsMade div#node_id_1177 div.node-content-RTE > div.content-RTE { max-width: 600px; text-align: center; margin: 0 auto;} /*body.pageHowBreadIsMade div#node_id_1177 div.node-content-RTE { background: url('/image/var/files/tales/wheat.png') no-repeat left top; }*/ @media all and (max-width: 999px) { body.pageHowBreadIsMade div#node_id_1177 { padding-bottom:20px; background: url('/image/var/files/tales/rolling-pin.png') no-repeat 120% bottom;} body.pageHowBreadIsMade div#node_id_1177 div.node-content-RTE { background: url('/image/var/files/tales/wheat.png') no-repeat -83px top; } } @media all and (max-width: 767px) { body.pageHowBreadIsMade div#node_id_1177 { background:transparent; padding-bottom:20px; } body.pageHowBreadIsMade div#node_id_1177 div.node-content-RTE { background:transparent; } } /** * What Bread Is Made Of */ body.pageHowBreadIsMade div.node-whatBreadIsMadeOf { background: url('/images/how_bread_is_made_made_of_bg.png') repeat center top; background-size: cover; margin-top: 0; padding-top: 128px; padding-bottom: 150px; margin-bottom: -63px; color: #333;} body.pageHowBreadIsMade div.node-whatBreadIsMadeOf h2 { text-align:center; font-size: 55px; margin-bottom: 46px;} body.pageHowBreadIsMade div.node-whatBreadIsMadeOf .node { margin:0; } body.pageHowBreadIsMade div.node-whatBreadIsMadeOf .node h4 { font-size: 26px; text-transform: uppercase; margin-bottom: 10px;} body.pageHowBreadIsMade div.node-whatBreadIsMadeOf .node p { font-size: 16px; font-weight: normal;} @media all and (max-width: 999px) { body.pageHowBreadIsMade div.node-whatBreadIsMadeOf { padding:10px; padding-bottom: 113px; padding-top: 113px;} } @media all and (max-width: 767px) { body.pageHowBreadIsMade div.node-whatBreadIsMadeOf h2 { font-size: 36px; line-height: 36px; } } /** * Oven Divider */ body.pageHowBreadIsMade div#node_id_1215 { clear:both; background: url('/images/rowBottom.png') repeat-x center center; margin: 0; position: relative; height: 134px; overflow: visible;} body.pageHowBreadIsMade div#node_id_1215 p { margin:0; } /** * Did you know? */ body.pageHowBreadIsMade div#node_id_1180 { padding-top: 70px; } body.pageHowBreadIsMade div.node { /* margin:0; */ } body.pageHowBreadIsMade div#node_id_1180 h2 { text-align:center; font-size: 55px; margin-bottom: 35px;} body.pageHowBreadIsMade div#node_id_1180 ul { } body.pageHowBreadIsMade div#node_id_1180 ul li:before { content:''; display: none;} body.pageHowBreadIsMade div#node_id_1180 ul li { margin:0; background: url('/images/bullet-wheat.png') no-repeat left top; padding-left: 56px; padding-bottom: 24px; font-weight: normal;} body.pageHowBreadIsMade div#node_id_1180 ul li strong { color:#ee3123; } body.pageHowBreadIsMade div#node_id_1180 ul li strong { } @media all and (max-width: 767px) { body.pageHowBreadIsMade div#node_id_1180 h2 { font-size: 36px; line-height: 36px; } } /** * Flour Divider */ body.pageHowBreadIsMade div#node_id_1217 { clear:both; background: url('/images/rowTop.png') repeat-x center bottom; margin: 0; position: relative; height: 204px; overflow: visible;} /** * THE GOOD STUFF IN BREAD */ body.pageHowBreadIsMade #node_id_1182 { background: url('/images/how_bread_is_made_made_of_bg.png') repeat center top; background-size: cover; margin-top: 0; padding-top: 128px; padding-bottom: 28px; margin: 0; color: #333;} body.pageHowBreadIsMade #node_id_1182 .node-content-RTE { max-width:800px; } body.pageHowBreadIsMade #node_id_1182 h3 { background: url('/images/zigzag-white.png') no-repeat center bottom; padding-bottom: 31px; font-size: 54px;} body.pageHowBreadIsMade #node_id_1218 { margin: 0;} body.pageHowBreadIsMade #node_id_1219 { margin: 0;} body.pageHowBreadIsMade #node_id_1220 { margin: 0;} body.pageHowBreadIsMade .node-content-picture { background: url('/images/how_bread_is_made_made_of_bg.png') repeat center -358px; background-size: cover; margin-top: 0; text-align: center; max-width: 100%;} body.pageHowBreadIsMade .node-content-picture .picture { max-width:640px; margin: 0 auto; padding-bottom: 61px;} body.pageHowBreadIsMade .node-content-picture .item { float:none; margin: 0;} body.pageHowBreadIsMade .node-content-picture a { display: inline-block; margin: 0 auto; position:relative;} body.pageHowBreadIsMade .node-content-picture a img { display:block; margin:0 auto; border: 5px solid #DAAF3A;} body.pageHowBreadIsMade .node-content-picture a .zoom {position: absolute; width: 40px; height: 40px; background: url('/images/zoom.png') no-repeat left top; bottom: 12px; right: 12px;} @media all and (max-width: 999px) { body.pageHowBreadIsMade #node_id_1182 h3 { font-size: 36px; } body.pageHowBreadIsMade #node_id_1182 .node-content-RTE p { font-weight:normal; } body.pageHowBreadIsMade .node-content-picture a { margin-right: 15px; margin-left: 15px;} body.pageHowBreadIsMade .node-content-picture .picture { padding-bottom: 30px;} } /** * Clouds */ body.pageHowBreadIsMade #node_id_1221 { position:relative; height: 0; margin: 0;} body.pageHowBreadIsMade #node_id_1221 p { margin:0; } body.pageHowBreadIsMade #node_id_1221 img { position:relative; top: -230px; right: 486px; } /** * Product Listing Page */ div.pageProducts div.rowBottom { background: white; padding-top: 0; } div.pageProducts .node-about { padding-top: 142px; background: url('/images/gray_bg.png') repeat-x center top; padding-bottom: 0; background-size: cover;} div.pageProducts .node-about div.node-layout-2columns { padding-bottom: 110px; } div.pageProducts .node-about h3 { width:350px; } div.node-product_list { background: url('/images/gray_bg_bottom.png') repeat-x center top; margin:0; padding-top: 100px;} div.node-product_list h3 {font-size: 36px; margin-bottom: 26px;} div.product_list_stack { margin-bottom: 10px; } @media all and (max-width: 999px) { div.pageProducts .node-about h3 { width: auto; margin-left: 20px;} div.pageProducts .node-product_list h3 { margin: 0 0 30px 20px; } } @media all and (max-width: 767px) { div.pageProducts .node-about h3 { margin-left: auto; } div.pageProducts .node-about { padding-top: 30px; } div.pageProducts .node-about div.node-layout-2columns { padding-bottom: 25px; } div.node-product_list { padding-top: 50px;} div.node-product_list h3 { font-size: 28px; text-align: center; margin: 0; } } div.node-productListFilter { position: absolute; width: 100%; z-index: 100; margin: 95px 0 0 0; } div.node-productListFilter div.productListFilterWrapper { float: right; width: 315px; margin-right: 9px;} div.node-productListFilter select { width: 315px; cursor: pointer;} .customSelect { border: 2px solid #dedede; border-radius: 8px; padding: 12px 40px 6px 60px; width: 315px; font-size: 16px; color: #666666; text-transform: uppercase; font-weight: bold; background: #ffffff url('../images/dropdown-closed.png') center center no-repeat; background-size: 280px 17px; cursor: pointer;} .customSelectInner { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } @media all and (max-width: 999px) { div.node-productListFilter div.productListFilterWrapper { margin-right: 29px;} } @media all and (max-width: 767px) { div.node-productListFilter { margin: 0; } div.node-productListFilter div.productListFilterWrapper { float: none; margin: 109px auto 0 auto; width: 276px; } div.node-productListFilter + div.node_group-content div.product_list_stack { margin-top: 105px; } div.node-productListFilter select { width: 276px; } .customSelect { width: 276px; background: url('../images/dropdown-closed.png') 14px center no-repeat, url('../images/dropdown-closed.png') -25px center no-repeat; background-size: 280px 17px;} } /** * About Us */ body.pageAbout div.faqIntro {margin-bottom: 50px;} body.pageAbout div.faqIntro h3 { line-height: 1; text-align:center;} body.pageAbout p { text-align:center; } body.pageAbout div.rowBottom { background: white; padding-bottom: 0;} body.pageAbout .rowWrapper > .columnWrapper > .node {width:600px; margin:0 auto; } body.pageAbout .rowWrapper > .columnWrapper > .node-fullBleed {width: auto; margin: 70px 0 0;} @media all and (max-width: 999px) { body.pageAbout .rowWrapper > .columnWrapper > .node { width:auto; margin:0 20px; } body.pageAbout .rowWrapper > .columnWrapper > .node-fullBleed { margin:70px 0 0; /* padding-top: 70px; */} } /** * accordion */ div.accordion { font-size: 14px; border: 1px solid #dad0a1; border-bottom: 0;} div.node-accordion:nth-last-child(2) {border-bottom: 1px solid #dad0a1;} div.accordion h3 { width: 100%; position: relative; color: #333; font-size: 14px; font-size: 16px; font-weight: normal; cursor: pointer; margin-bottom: 0; padding-left: 48px; padding-right: 78px; text-align: left; padding: 26px 78px 26px 48px; background: url('/images/accordion_open.png') no-repeat right top; line-height: 26px; text-transform: none; } div.accordion h3.active { background: url('/images/accordion_closed.png') no-repeat right top;} div.accordion h3:before { content: 'Q.'; color: #ee3123; position:absolute; left: 14px; top: 25px; } div.accordion div.contentBody { border-top: 1px solid #dad0a1; padding: 0 20px; } div.accordion div.contentBody p { margin:0; padding:15px 0; text-align: left; font-size: 14px;} div.accordion ul { margin:0; } div.accordion ul li:last-child {margin-bottom: 0; padding-bottom: 20px;} /** * Search Results Page */ /* Top Part */ body.searchPage { background: url('/images/searchPage-bg.jpg') repeat-x center 128px; } body.searchPage div.rowTop, body.searchPage div#node_id_69 { position: relative; padding-bottom: 0; width: 651px; margin: 0 auto; overflow: visible;} body.searchPage div.rowTop { height: 92px; } body.searchPage div.rowTop .node { margin:0; } body.searchPage div.searchbox { } body.searchPage div.rowTop form { padding: 0; position: absolute; margin: 0; top: 45px; z-index: 999; width: 100%;} body.searchPage div.rowTop input#search-query { display:block; width: 100%; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; border: 1px solid #dedede; padding: 24px; font-size: 32px; line-height: 32px; font-family: Hermes, sans-serif; font-weight: 900; text-transform: uppercase;} body.searchPage div.rowTop button { position:absolute; top:0; right:0; background:#ee3123; border:0; font-size: 32px; line-height: 23px; padding:32px; color: white; text-transform: uppercase; border: 1px solid transparent;} body.searchPage div.rowTop button:before { content: "\f002"; font-family: 'FontAwesome'; } body.searchPage div.rowTop button span { display:none; } /* Search Results */ body.searchPage div.rowBottom { background:url('/images/recipe-bg.jpg') repeat-x center top #ffffff; } body div.search_result ul { list-style:none; } body div.search_result li { position:relative; margin: 10px; background: url('../images/default_searchresults.png') 0 0 no-repeat; background-size: 100px 100px; } body div.search_result li:before { display:none; } div.search_result li h2, div.search_result li p, div.search_result li div.navigation { padding-left:140px; } div.search_result li div.navigation { color: #ee3123; font-weight: bold;} div.search_result li div.navigation a { color:#000000; font-size: 12px; text-transform: uppercase;} div.search_result li h2 { font-size: 24px; font-weight:900; } div.search_result li a.image { position:absolute; left:0; top:0; width: 120px; margin-right: 20px; background: #ffffff; } @media all and (max-width: 651px) { body.searchPage div.rowTop, body.searchPage div#node_id_69 { position: relative; padding-bottom: 0; width: 100%; margin: 0 auto;} body.searchPage div.search_result li div.navigation { padding-left:0;} } /** * Tales Landing Page */ body.talesPage div.rowBottom { padding-top: 0; padding-bottom: 120px; } body.talesPage div.node-howBreadIsMade { padding-top: 142px; background: url('/images/gray_bg.png') repeat-x center top; padding-bottom: 97px; background-size: cover; font-size: 16px; position: relative;} body.talesPage div.node-howBreadIsMade h3 { margin-bottom: 15px;} body.talesPage div.node-pageList { background: url('/images/gray_bg_bottom.png') repeat-x center top; margin: 0; padding-top: 140px; } body.talesPage div.node-howBreadIsMade .flour_water {position:absolute; left: 84px; bottom: 40px; width: 133px; height: 144px; background:url('/images/flour_water.png'); background-size: cover;} body.tales div.rowBottom { padding-bottom: 125px; } @media all and (max-width: 999px) { body.talesPage div.rowBottom { padding-bottom: 45px; } body.talesPage div.node-howBreadIsMade { text-align: left; } body.talesPage div.node-howBreadIsMade h3 { font-size: 36px; line-height: 36px; margin-bottom: 20px; margin-left: 15px; text-align: left;} body.talesPage div.node-howBreadIsMade p { margin-bottom: 19px !important; padding: 0 !important;} body.talesPage div.node-howBreadIsMade .flour_water {display:none;} body.talesPage div.node-pageList { padding-top: 55px; } } @media all and (max-width: 767px) { body.talesPage div.rowBottom { padding-bottom: 45px; } body.talesPage div.node-howBreadIsMade { text-align:center; padding-top: 50px; padding-bottom: 20px;} body.talesPage div.node-howBreadIsMade h3 { width: 80%; margin: 0 auto 20px auto; text-align: center;} body.talesPage div.node-howBreadIsMade div.contentBody { width: 80%; margin: 0 auto 20px auto; } body.talesPage div.node-howBreadIsMade div.layoutColumnOne.ofTwo { display: table-footer-group; } body.talesPage div.node-howBreadIsMade div.layoutColumnTwo.ofTwo { display: table-header-group; } body.talesPage div.node-pageList { padding-top: 55px; } } /** * Tales Detail Page */ body.tales div.articleImage {text-align: center;} /** * Single Product Page */ body.product { /* background:transparent;*/ } body.product #content { margin:0; } body.product div.rowTop { display:none; } body.product div.rowBottom {padding-top:0; background: url('/images/product_bg.jpg') repeat center top; background-size: 100% auto; padding-bottom: 0; } body.product div.rowBottom div.columnWrapper { padding-top: 142px; width: 1000px; margin: 0 auto; } body.product div.rowBottom div.columnWrapper div.pageHeader, body.product div.rowBottom div.columnWrapper div.teaser, body.product div.rowBottom div.columnWrapper div.labels, body.product div.rowBottom div.columnWrapper div.description, body.product div.rowBottom div.columnWrapper div.disclaimer { margin-left: 386px; width: 615px; margin: 0 auto 0 386px; clear: both;} body.product div.rowBottom div.prevnext {margin-top: 100px;} body.product div.disclaimer {display: none;} body.product.t17 div.disclaimer {display: block;} /*no added sugar*/ body.product div.rowBottom div.columnWrapper div.taxonomy_list { text-align: left; } body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item {display: inline-block; margin: 0;} body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item img {margin:10px 10px 30px 0;} body.product div.rowBottom div.columnWrapper > div:last-child { padding-bottom: 125px; } body.product div.pageHeaderWrapper {margin-top:0; margin-left: 0;} body.product h1.pageTitle { text-align: left; margin-top: 0; font-size: 55px !important; line-height: 51px;} body.product .headerSection { position: relative; } body.product .productImage { top: 0; position: absolute; height: 0; } body.product .productImage span.wrap { display: block; position: relative; } body.product .productImage span.wrap::after { content: ''; display: block; position: absolute; background: url(../images/barley-grass.png) no-repeat; width: 130px; height: 300px; bottom: -350px; left: 100px; } body.product .productImage img { max-width: 350px; } body.product h3.contentTitle { font-size: 52px; } /* Description */ body.product div.description h3 { text-align: center; font-size: 24px; border: 1px solid #d6cb9c; border-bottom: 0; line-height: 1; margin-bottom: 25px; top: 10px; position: relative;} body.product div.description h3 span {background: #F8F8F8 url('/images/product_bg.jpg'); background-size: scale; border-radius: 100px; /*border: 3px solid rgba(255,255,255,0.1);*/ position:relative; top: -10px; padding: 0 10px; line-height: 20px;} body.product div.description img { } body.product div.description p { font-size: 14px;} body.product div.description p strong { color: #ee3123; } body.product div.description img.nutrition { display:block; border: 5px solid #ffffff; -webkit-box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); -moz-box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); cursor: pointer;} body.product div.description a.fancybox { position:relative; display:block; } body.product div.description a.fancybox .zoom { position:absolute; width:40px; height:40px; background:url('/images/zoom.png') no-repeat left top; bottom: 12px; right: 12px; } /* Disclaimer */ body.product div.disclaimer { font-size: 14px; border-left: 6px solid #e0b500; padding: 6px 14px;} body.product div.disclaimer p { margin: 0; } @media (max-width: 999px) { body.product div#content { padding-top: 0px; } body.product div.rowTop { text-align: center; position: relative; } body.product div.rowBottom { background-size: auto auto; } body.product div.rowTop h3.contentTitle { font-size: 38px; line-height: 38px; text-align: left; } body.product div.rowTop div.contentBody p { text-align: left; } body.product div.rowBottom div.columnWrapper { width:auto; padding-top: 50px; } body.product div.rowBottom { text-align:center; } body.product div.rowBottom div.columnWrapper div.pageHeader, body.product div.rowBottom div.columnWrapper div.teaser, body.product div.rowBottom div.columnWrapper div.labels, body.product div.rowBottom div.columnWrapper div.description, body.product div.rowBottom div.columnWrapper div.disclaimer { margin: 24px 10px 10px; width: auto; text-align: left;} body.product div.rowBottom div.columnWrapper div.description { margin-bottom: 50px; } body.product h1.pageTitle { text-align:center; font-size: 36px !important;} body.product .productImage { position:static; height: auto; top: 0;} body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item {float: none; display: inline-block; margin: 0;} body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item img { margin: 0 10px; } body.product .productImage span.wrap::after { display: none; } body.product div.rowBottom div.columnWrapper div.pageHeader div.pageHeaderWrapper, body.product div.rowBottom div.columnWrapper div.pageHeader div.pageHeaderWrapper h1, body.product div.rowBottom div.columnWrapper div.pageHeader { margin-bottom: 0; } body.product div.rowBottom div.columnWrapper div.teaser { margin-top: 0; } body.product div.rowBottom div.columnWrapper div.pageHeader div.pageHeaderWrapper h1 { text-align: left; } body.product div.headerSection { display: table; margin: 0; width: 100%; } body.product div.headerSection div.pageHeader { display: table-footer-group; } body.product div.headerSection div.pageHeader div.pageHeaderWrapper { padding: 0 25px 20px 25px; } body.product div.headerSection div.productImage { display: table-header-group; width: 100%; } body.product div.headerSection div.productImage div.detail { padding-bottom: 30px; } body.product div.headerSection { display: table; } body.product div.rowBottom div.columnWrapper div.labels { margin-bottom: 40px; } body.product .productImage img { max-width: 100%; } } @media (max-width: 767px) { body.product div.rowBottom div.columnWrapper div.pageHeader, body.product div.rowBottom div.columnWrapper div.teaser, body.product div.rowBottom div.columnWrapper div.labels, body.product div.rowBottom div.columnWrapper div.description, body.product div.rowBottom div.columnWrapper div.disclaimer { margin: 0 10px 10px 10px; width: auto; text-align: left;} body.product div.rowTop h3.contentTitle { font-size: 50px; line-height: 50px; width: 100%; font-size: 32px; line-height: 1.1; text-align: center; } body.product div.rowTop div.contentBody p { text-align: center; } body.product h1.pageTitle { text-align: left; font-size: 36px !important; line-height: 1.2; margin: 0 25px; } body.product div.rowBottom div.columnWrapper div.description { margin-bottom: 50px; } body.product div.description h3 { border: none; position: static; line-height: 1.2; } body.product div.description h3 span { background: none; padding: 0; position: static;} body.product .recipe_list_content h3.contentTitle { padding-top: 50px; } body.product div.rowBottom div.columnWrapper div.taxonomy_list { padding: 20px 0; } body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item {margin: 0 0 10px 0;} body.product div.rowBottom div.columnWrapper div.taxonomy_list div.item img { max-width: 70px; margin: 0px 0 0 10px; } body.product div.rowBottom div.columnWrapper div.disclaimer { margin: 0 10px 47px 25px; } body.product div.rowTop div.layoutColumnOne div.node { padding-bottom: 0; } .ideas_wrapper div.node-ribbon h3.contentTitle span { background: none; } .ideas_wrapper div.node-ribbon h3.contentTitle:after { display: none; } body.product div.headerSection div.pageHeader div.pageHeaderWrapper { padding: 0 0 20px 0; } body.product div.rowBottom div.columnWrapper div.pageHeader div.pageHeaderWrapper h1 { line-height: 1; } body.product div.rowBottom div.columnWrapper > div:last-child { padding-bottom: 50px; } } /* BRENNANS FAMILY PAN Specific */ body.product div.rowTop div.layoutColumnOne div.node > div {-webkit-box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); -moz-box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); box-shadow: 0px 32px 32px -31px rgba(0,0,0,0.75); } body.product.node_id_1038 div.rowTop h3.contentTitle { font-size: 50px; line-height: 50px; } body.product.node_id_1038 div.rowTop {display: block; padding-top: 90px;} body.product.node_id_1038 div.rowBottom { padding-bottom: 0;} #node_id_1171 div.twoColumnLayout div.node_group-content {margin: 20px;} .ideas_wrapper { margin: 0 -9999px; padding: 0 9999px; background: white; } .ideas_wrapper div.node-ribbon {background:transparent; } .ideas_wrapper div.node-ribbon h3.contentTitle span { background:white; } @media (max-width: 999px) { body.product.node_id_1038 { background-size:cover; } body.product.node_id_1038 div.rowTop h3.contentTitle { font-size: 38px; line-height: 38px; } } @media (max-width: 767px) { #node_id_1171 div.twoColumnLayout #node_id_1172 { margin: 32px; padding-bottom: 0; } body.product.node_id_1038 div.rowTop {padding-top: 10px;} body.product.node_id_1038 div.rowTop h3.contentTitle { font-size: 32px; line-height: 32px; } } /** * Single Recipe */ body.recipe div.instructions strong { color:#ee3123; } body.recipe div.recipe_video, body.recipe div.recipe_image {max-width: 650px; margin: 0 auto; background: url(../images/wooden_bg-650x365.jpg); } body.recipe div.recipe_image { padding-top: 0; } body.recipe div.recipe_image .item { margin-bottom: 0; display: block;} body.recipe div.recipe_video .video_youtube, body.recipe div.recipe_image span.image { max-width:650px; margin:0 auto; display: block;} body.recipe div.recipe_video .video_youtube div { margin-bottom: 0px; } body.recipe p.load_more { padding-bottom: 120px; background: white; margin-left: 0; margin-right: 0;} body.recipe div.node-ribbon { background:white; } body.recipe div.node-ribbon h3.contentTitle span { background:white; } @media (max-width: 999px) { body.recipe #content { margin-top: 20px; } body.recipe div.node-ribbon h3.contentTitle:before, body.recipe div.node-ribbon h3.contentTitle:after { display:none;} body.recipe div.pageHeader h1 { font-size: 36px !important; line-height: 36px; margin-bottom: 20px;} body.recipe div.description p, body.recipe div.instructions p { max-width:600px; margin:0 15px 20px; } body.recipe div.recipe_innerwrapper p { margin:0 0 20px; } body.recipe p.load_more { padding-bottom: 50px; margin-top: 0; padding-top: 10px; } } @media (max-width: 767px) { body.recipe div.recipe_wrapper { background: url('../images/recipe-bg2.png') repeat-x center 200px; padding-bottom: 0; } body.recipe div.recipe_innerwrapper { margin: 0 15px; } body.recipe div.node-ribbon h3.contentTitle { padding-top: 50px;} body.recipe div.instructions p:last-child { margin-bottom: 40px; } body.recipe div.pageHeader h1 { margin-bottom: 40px; margin-top: 55px; } body.recipe p.load_more { padding-bottom: 50px; margin-top: 0; padding-top: 30px; } } @media all and (max-width: 479px) { body.recipe div.rowBottom div.recipe_wrapper { background-position: center 288px; } } /** * Lunch */ /* copy of the above */ body.lunch div.instructions strong { color:#ee3123; } body.lunch div.recipe_video, body.lunch div.recipe_image {max-width: 650px; margin: 0 auto; background: url(../images/wooden_bg-650x365.jpg); } body.lunch div.recipe_image { padding-top: 0; } body.lunch div.recipe_image .item { margin-bottom: 0; display: block;} body.lunch div.recipe_video .video_youtube, body.lunch div.recipe_image span.image { max-width:650px; margin:0 auto; display: block;} body.lunch div.recipe_video .video_youtube div { margin-bottom: 0px; } body.lunch p.load_more { padding-bottom: 120px; background: white; margin-left: 0; margin-right: 0;} body.lunch div.node-ribbon { background:white; } body.lunch div.node-ribbon h3.contentTitle span { background:white; } @media (max-width: 999px) { body.lunch #content { margin-top: 20px; } body.lunch div.node-ribbon h3.contentTitle:before, body.lunch div.node-ribbon h3.contentTitle:after { display:none;} body.lunch div.pageHeader h1 { font-size: 36px !important; line-height: 36px; margin-bottom: 20px;} body.lunch div.description p, body.lunch div.instructions p { max-width:600px; margin:0 15px 20px; } body.lunch div.recipe_innerwrapper p { margin:0 0 20px; } body.lunch p.load_more { padding-bottom: 50px; margin-top: 0; padding-top: 10px; } } @media (max-width: 767px) { body.lunch div.recipe_wrapper { background: url('../images/recipe-bg2.png') repeat-x center 200px; padding-bottom: 0; } body.lunch div.recipe_innerwrapper { margin: 0 15px; } body.lunch div.node-ribbon h3.contentTitle { padding-top: 50px;} body.lunch div.instructions p:last-child { margin-bottom: 40px; } body.lunch div.pageHeader h1 { margin-bottom: 40px; margin-top: 55px; } body.lunch p.load_more { padding-bottom: 50px; margin-top: 0; padding-top: 30px; } } @media all and (max-width: 479px) { body.lunch div.rowBottom div.recipe_wrapper { background-position: center 288px; } } /* Social Media Content */ div.share_wrapper { width: 100%; margin: 0 auto 0 auto; background: #ffffff; text-align: center; vertical-align: middle; padding: 25px 0 35px; } div.share_wrapper div.social_network_share {width: 100%; margin: 0 auto; max-width: 650px;} div.share_wrapper div.social_network_share:before, div.share_wrapper div.social_network_share:after { border: 1px solid #dad0a1; display:block; content:'.'; text-indent:-10000px; height: 12px; margin: 0 10px;} div.share_wrapper div.social_network_share:before { border-bottom:0; } div.share_wrapper div.social_network_share:after { border-top:0; } div.pageContent div.social_network_share { display: inline-block; vertical-align: middle; } div.pageContent div.social_network_share ul li { width: 70px; margin: 0; text-align: center; padding: 0 0;} div.pageContent div.social_network_share ul li:before { left: 15px; z-index: 999; color: white; font-size: 18px; height: 40px; width: 40px; line-height: 40px; pointer-events: none; } div.pageContent div.social_network_share ul li a { margin: 0 auto; border-radius: 999px !important; background: #3b5998 !important; position: static; height: 40px !important; width: 40px !important; } div.pageContent div.social_network_share ul li.twitter a { background: #00aced !important; } div.pageContent div.social_network_share ul li.google a { background: #dd4b39 !important; } div.pageContent div.social_network_share ul li.mailto a { background: #ee3123 !important; } /* Download Button */ div.share_wrapper div.download { display: inline-block; border-left: 1px solid #dedede; padding-left: 40px; margin-left: 30px; vertical-align: middle; } div.share_wrapper div.download a { display: block; } div.share_wrapper div.download a::after { content: ''; display: inline-block; margin-left: 10px; width: 14px; height: 16px; background: url('../images/download_icon.png') no-repeat; background-size: 14px 16px; vertical-align: middle; } div.share_wrapper div.download a span { color: #636363; font-family: "Hermes", sans-serif; font-weight: 900; text-transform: uppercase; } @media (max-width: 999px) { div.pageContent div.social_network_share ul li { width:auto; } div.pageContent div.social_network_share ul li:before { left:0px; } div.prevnext a { width: 33%; } } @media (max-width: 767px) { body.recipe div.pageContent div.social_network_share { padding: 0; } div.share_wrapper div.download { display: block; border: none; padding: 0; margin: 20px 0 20px 0; } } /* Previous Next Buttons */ div.prevnext { background: #ee3123; height: 142px; left: 0; margin-top: 0;} div.prevnext p { border-right: 1px solid #cb1e25; background: #ee3123; text-align:center; font-size: 0; position: absolute; left: 0; width: 100%; margin: 0;} div.prevnext a { text-align: center; border-left: 1px solid #cb1e25; display:inline-block; color:white; width: 332px; padding: 39px; font-size: 16px; text-decoration: none; font-family: Hermes; font-weight: bold; text-transform: uppercase; font-size: 16px;} div.prevnext a.next { border-right: 1px solid #cb1e25; } div.prevnext a:hover { background: #db271a; } div.prevnext a:before { display: block; /* content: "\f053"; */ /* font-family: 'FontAwesome'; */ font-size: 32px; font-weight: normal; } div.prevnext a.previous:before { content: " "; background: url('/images/nav_prev.png') no-repeat center center; width: 30px; height: 30px; margin: 0 auto 10px;} div.prevnext a.all:before { content: " "; background: url('/images/nav_all.png') no-repeat center center; width: 30px; height: 30px; margin: 0 auto 10px;} div.prevnext a.next:before { content: " "; background: url('/images/nav_next.png') no-repeat center center; width: 30px; height: 30px; margin: 0 auto 10px;} div.rowBottom { background: white; background-size: cover;} @media (max-width: 999px) { div.prevnext { height: 118px; } div.prevnext a { width: 33%; } div.prevnext a:before { /* text-indent: -10000px; */} } @media (max-width: 767px) { div.prevnext { height: 100px; } div.prevnext a { padding: 32px 39px 28px 39px; } div.prevnext a span { display: none; width: 100%;} } /** * video */ div.video {max-width: 650px; margin: 0 auto;} /** * fluid video to be used in responsive page layout */ div.fluid-video {height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden;} div.fluid-video.widescreen {padding-bottom: 52.5%;} div.fluid-video.vimeo {padding-top: 0;} div.fluid-video embed, div.fluid-video iframe, div.fluid-video object, div.fluid-video video {top: 0; left: 0; width: 100%; height: 100%; position: absolute;} /** * hero_piece */ body.news div.rowTop, body.recipe div.rowTop, body.lunch div.rowTop {padding-bottom: 0;} body.news div.rowTop:after, body.recipe div.rowTop:after, body.lunch div.rowTop:after {display: none;} body.news div.rowBottom, body.recipe div.rowBottom, body.lunch div.rowBottom {background: white;} div.hero_piece, body.news div.rowTop div.node, body.recipe div.rowTop div.node, body.lunch div.rowTop div.node { background: url('/images/recipe-bg2.png') repeat-x center 150px; } div.hero_pieceX {margin: 0 10px;} div.hero_piece div.node_group-content {margin-bottom: 0;} @media all and (max-width: 767px) { div.hero_piece { width: 100%; padding: 0; } div.hero_piece span.image { margin: 0 20px; display: block;} } @media all and (max-width: 479px) { div.hero_piece { background-position: center 88px; } } /** * Single News */ body.news { overflow-x: hidden; } body.news .rowTop { padding-bottom: 0px; } body.news .rowTop:after { display :none !important; } body.news div.pageHeader h1 { font-size: 52px !important; line-height: 53px; margin-bottom: 50px; } body.news #content { margin-top: 70px; } body.news h1.pageTitle { margin-top:0; } body.news .hero_piece, body.news div.fluid-video { margin:0 auto;} body.news .hero_piece img { max-width:100%; margin:0 auto; display:block; } body.news div.fluid-video { margin-bottom:0; } body.news h3.contentTitle { text-align:center; } body.news div.rowBottom div.pageHeader h1 { font-size: 52px !important; line-height: 52px; margin-bottom: 50px;} @media all and (max-width: 999px) { body.news div.pageHeader h1 { font-size: 36px !important; line-height: 36px; } body.news div.rowBottom div.pageHeader h1 { font-size: 36px !important; line-height: 36px; margin-bottom: 20px;} } @media all and (max-width: 767px) { body.news #content { margin-top: 60px; } body.news div.pageHeader h1 { margin-bottom: 40px; } } /* Body Styling */ body.news div.rowBottom { background:white; padding-top:20px; padding-bottom: 125px; } body.news div.rowBottom .body { width: 650px; margin: 0 auto 90px auto; } body.news div.rowBottom .body p { margin: 0 0 10px 0; padding: 0; background: transparent;} body.news div.rowBottom .body img { display:block; margin: 20px auto 40px; } body.news div.rowBottom .body strong { color: #ee3123; } body.news div.rowBottom .body ol { counter-reset: item; list-style-type:none; margin-bottom: 10px; margin-top: 0;} body.news div.rowBottom .body ol li { position:relative; } body.news div.rowBottom .body ol li:before { content: counter(item) '. '; counter-increment: item; color: #ee3123; position:absolute; left:-20px; font-weight:bold; } body.news div.rowBottom .body ul { counter-reset: item; list-style-type:none; padding: 1em 0 2em 0; margin: 0;} body.news div.rowBottom .body ul li { position:relative; } body.news div.rowBottom .body ul li:before { content: '•'; color: #ee3123; position:absolute; left:-20px; top: -2px; font-weight:bold; font-size: 20px; } @media all and (max-width: 999px) { body.news div.rowBottom .body p { margin: 0 15px 10px; } } @media all and (max-width: 767px) { body.news div.rowBottom { padding-top: 20px; padding-bottom: 50px; } body.news div.rowBottom .body { width: 100%; margin: 0 0 47px 0; } body.news div.rowBottom .body ol, body.news div.rowBottom .body ul { margin-left: 1em;} body.news div.rowBottom p.load_more { margin-top: 20px; } } /* More News */ body.news div.related_articles { max-width: 980px; padding-top: 120px; margin: 0 auto; background: transparent;} body.news div.related_articles h3.contentTitle {text-transform: uppercase; text-align: center; font-weight: 900; /* padding-top: 70px; */position: relative;font-size: 52px;padding-top: 0;position: relative;} body.news div.related_articles h3.contentTitle:after { top: 14px; } body.news div.related_articles h3.contentTitle span { display: inline-block; padding: 0 16px; background: white; z-index: 50; position: relative; } body.news div.related_articles div.contentBody { } body.news div.related_articles div.contentBody p { margin-bottom: 0; } body.news div.related_articles a.button.load_more { margin:40px auto 0; } @media all and (max-width: 999px) { body.news div.related_articles h3.contentTitle:before, body.news div.related_articles h3.contentTitle:after { width: 100%; margin: 0 auto; } body.news div.related_articles h3.contentTitle:after { top: 21px; } } @media all and (max-width: 767px) { body.news div.related_articles { padding-top: 50px; } } /** * All Recipes */ body.pageRecipes h3.contentTitle { font-size: 36px; width: 100%; margin-left: 0px; margin-bottom: 40px; } body.pageRecipes div.rowBottom div.recipe_list_stack { margin-bottom: 5px; } @media all and (max-width: 999px) { body.pageRecipes h3.contentTitle { margin-left: 22px; } } @media all and (max-width: 767px) { body.pageRecipes h3.contentTitle { margin-left: 0; text-align: center; } } /** * Image gallery */ div.article_image_gallery { width: 650px; margin: 0 auto; } div.article_image_gallery div.detail span.wrap { width: 650px; height: 365px; overflow: hidden; display: block; margin: 3px; } div.article_image_gallery div.detail img { width: 644px; max-width: none;} div.article_image_gallery div.thumbnails { width: 650px; height: 70px; } div.article_image_gallery div.thumbnails div.item { float: left; position: relative; width: 124px; height: 70px; margin: 3px; overflow: hidden; } div.article_image_gallery div.thumbnails div.item:last-child { margin-right: 0;} div.article_image_gallery div.thumbnails div.item.active::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 125px; height: 70px; border: 4px solid #db271a; } @media all and (max-width: 767px) { div.article_image_gallery { width: 100%; } div.article_image_gallery div.detail span.wrap { width: 90%; height: 0; padding-bottom: 55%; margin: 0 auto; } div.article_image_gallery div.detail img { width: 100%; max-width: 100%; display: block; } div.article_image_gallery div.thumbnails { width: 90%; height: auto; padding: 0; margin: 0 auto; } div.article_image_gallery div.thumbnails div.item { width: 90px; height: 50px; margin-right: 3px; overflow: hidden; } div.article_image_gallery div.thumbnails div.item:nth-child(3n) { margin-right: 0; } div.article_image_gallery div.thumbnails div.item.active::after { width: 90px; height: 50px; } } /** * layout.yellow */ div.node_group-layout.node-yellow {background: url(../images/default.jpg) repeat; color: #333333; background-size: cover; } div.node_group-layout.node-yellow h2.layoutTitle {font-size: 52px; max-width: 700px; margin: 0 auto 40px auto; } div.node_group-layout.node-yellow > div.node-layout-1column, div.node_group-layout.node-yellow > div.node-layout-2columns, div.node_group-layout.node-yellow > div.node-layout-3columns, div.node_group-layout.node-yellow > div.node-layout-4columns {padding: 80px 0;} div.node_group-layout.node-yellow::before {content: ' '; display: block; width: 100%; height: 5px; background: url(../images/rowTop.png) repeat-x center top;} div.node_group-layout.node-yellow::after {content: ' '; position: absolute; display: block; margin-top: -2px; width: 100%; height: 11px; background: transparent url(../images/rowBottom2.png) repeat-x center bottom;} @media (max-width: 767px) { div.node_group-layout.node-yellow > div.node-layout-1column, div.node_group-layout.node-yellow > div.node-layout-2columns, div.node_group-layout.node-yellow > div.node-layout-3columns, div.node_group-layout.node-yellow > div.node-layout-4columns {padding: 40px 0;} div.node_group-layout.node-yellow h2.layoutTitle { margin: 0 10px 40px 10px; } div.node_group-layout.node-yellow h2.layoutTitle span { display: block; font-size: 36px; line-height: 36px; text-align: center; width: 95%; margin: 0 auto; margin-bottom: 14px; } div.node_group-layout.node-yellow h3 { font-size: 24px; } } /** * layout.white */ div.node_group-layout.node-white > div {padding: 80px 0;} div.node_group-layout.node-white h2.layoutTitle {font-size: 52px; max-width: 700px; margin: 0 auto 40px auto; } @media (max-width: 767px) { div.node_group-layout.node-white > div.node-layout-1column, div.node_group-layout.node-white > div.node-layout-2columns, div.node_group-layout.node-white > div.node-layout-3columns, div.node_group-layout.node-white > div.node-layout-4columns {padding: 40px 0;} div.node_group-layout.node-white h2.layoutTitle { margin: 0 10px 40px 10px; } div.node_group-layout.node-white h2.layoutTitle span { display: block; font-size: 36px; line-height: 36px; text-align: center; width: 95%; margin: 0 auto; margin-bottom: 14px; } div.node_group-layout.node-white h3 { font-size: 24px; } } /** * file (download) */ div.file ul li {display: block; float: left; width: 45%; font-family: 'Hermes', sans-serif; } div.file ul li a {background: url(../images/bullet-wheat.png) no-repeat; display: inline-block; padding: 5px 0 5px 55px; font-size: 18px; font-weight: bold; text-transform: uppercase;} div.file ul li span.file_size {display: none;} @media (max-width: 767px) { div.file ul li { float: none; width: 100%; margin-left: 0; } } /** * layout 40% / 60% */ div.twoColumnLayout.layout4060 div.layoutColumnOne.ofTwo { width: 40%; padding-right: 30px; } div.twoColumnLayout.layout4060 div.layoutColumnTwo.ofTwo { width: 60%; }