/**
 * Chris @ Laposa Ltd, 2015/02/02
 *
 */


@charset "UTF-8";
/* CSS Document */

body {
  text-rendering: optimizeLegibility;
  font-family: 'EB Garamond', serif;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px; 
  color: #494948;
  background: #fff; 
}

p {margin: 20px 0; }
@media all and (max-width: 768px) {
  p {font-size: 18px; line-height: 25px; }
}

h1, h2, h3 {font-family: 'EB Garamond', serif; font-weight: normal; color: #494948; }

h1 {font-size: 52px; line-height: 50px; }
h2 {font-size: 24px; line-height: 30px; font-style: italic; }
h3 {font-size: 21px; line-height: 25px; }

a {color: #7a003a; text-decoration: underline; }
a:hover {text-decoration: none; }

img {max-width: 100%; height: auto; }

#userbox,
#globalNavigation,
#primaryNavigation,
#search, 
#basket,
#contentSide,
div.rowMiddle, 
div.rowBottom,
#footer {display: none; }

#pageWrapper {padding: 0em; }

#container {width: 100%; }

div.twoColumnLayout div.layoutColumnWrapper, 
div.threeColumnLayout div.layoutColumnWrapper,
div.fourColumnLayout div.layoutColumnWrapper {margin: 0 10px; }

#map-canvas { width: 100%; max-width: 418px; height: 279px;}
#map-canvas img { max-width: none;}

#header {
  margin: 0; 
  height: 50px; 
  background: #7a003a;
}

#logo {float: none; width: 100%; text-align: center; }

#logoWrapper {
  margin: 0 auto; 
  width: 200px; 
}

#logo a {
  display: block;
  position: absolute;
  top: 0; 
  width: 200px;
  height: 135px;
  background: url("/image/var/files/doyles-bakery.png") no-repeat scroll 0 0 transparent;
  background-size: cover; 
}


#logo a span {display: none; }

div.node_group-content {margin: 0; }

div.layout {}
div.layoutWrapper {margin: 0 auto; max-width: 1200px; }



/* all frames */

div.frame {width: 100%; float: left; }
div.frame div.header {}
@media all and (max-width: 768px) {
  div.frame div.header {margin: 0 auto; width: 90%; }
}



/* frame: hero */

div.hero { 
  display: table; 
  width: 100%;  
  background: url("/image/var/files/hero-bread.jpg") no-repeat center center; background-size: cover;
}

div.hero > div.layoutWrapper {
  display: table-cell;
  vertical-align: middle;
  overflow: hidden; 
}

div.hero p, div.hero h1, div.hero h2 {color: #fff; }

div.hero h1 { 
	margin: 0 auto;
	text-shadow: 3px 3px 6px rgba(5, 6 ,6 ,0.75);
}

div.hero h1 span {font-weight: ; }

div.hero h2 {
  max-width: 400px;
  margin: 10px auto; 
  text-shadow: 2px 2px 4px rgba(5, 6 ,6 ,0.75);
}

@media all and (max-width: 468px) {
  div.hero h1 {font-size: 36px; line-height: 40px; }
  div.hero h2 {max-width: 290px; font-size: 18px; line-height: 20px; }
}


@-webkit-keyframes Bouncingx { 
  from { -webkit-transform:translate(0, 0px); } 
  65% { -webkit-transform:translate(0, 10px); } 
  to {-webkit-transform: translate(0, -0px);} 
}

@-moz-keyframes Bouncing { 
  from {-moz-transform:translate(0, 0px);} 
  65% {-moz-transform:translate(0, 10px);} 
  to {-moz-transform: translate(0, -0px);}
}

div.scrolldown {
	position: absolute;
	width: 100%; 
	bottom: 60px;
}

div.scrolldown a {
  display: block;
  width: 200px;
  margin: 0 auto;
  overflow: hidden; 
  font-style: italic; 
  text-align: center;
  text-decoration: none; 
  text-transform: UPPERCASE;
  color: #fff;
  opacity: 0.8;
}

div.scrolldown a::after {
  content: '';
  display: block;
  width: 42px;
  height: 30px;
  margin: 10px auto 0 auto; 
  background: url('/image/var/files/scroll-down-arrow.png') no-repeat;
  background-size: 42px 18px;
  -webkit-animation-name: Bouncingx; 
  -webkit-animation-duration: 2s; 
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: ease-in-out; 
  -moz-animation-name: Bouncing; 
  -moz-animation-duration: 2s; 
  -moz-animation-iteration-count: infinite; 
  -moz-animation-timing-function: ease-in-out;
}

div.scrolldown a:hover {
	opacity: 1.0;
}

@media all and (max-width: 1024px) {
	div.scrolldown {
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
}

@media all and (max-width: 640px) and (orientation: landscape) {
	div.scrolldown {display: none; }
	div.hero h1 {margin-top: 10%; }
	div.hero h2 {font-size: 18px; line-height: 20px; }
}

@media all and (max-width: 468px) {
	div.scrolldown {bottom: 20px; }
}


/* frame: aboutus */

div.aboutus {padding: 30px 10px 15px 10px; }
div.aboutus div.layoutWrapper {margin: 0 auto; max-width: 960px; }

@media all and (max-width: 768px) {
  div.aboutus {padding: 15px 10px 5px 10px; }
  div.aboutus p {margin-bottom: 0; }
}


/* frame: ourproducts */

div.ourproducts {
  padding: 50px 10px 50px 10px; 
  background: url("/image/var/files/our-products-bg.jpg") no-repeat center center;
  background-size: cover;
}

div.ourproducts div.contentBody {margin: 0 auto; max-width: 640px; }

div.ourproducts p,
div.ourproducts h1,
div.ourproducts h2 {color: #fff; }

div.ourproducts h2 {font-style: normal; }

div.product p {margin: 20px 0; text-align: center; }
div.product img {min-width: 100%; }

div.ourproducts div.fourColumnLayout {margin: 20px 0; }

div.product h3.contentTitle {
	display: block;
	float: right; 
	position: relative; 
	margin-bottom: -100px; 
	padding: 8px 15px 10px 27px; 
	width: ;
	height: ;
	background: #7a003a;
	border-bottom-left-radius: 36px;
	
	font-size: 18px;  
	font-style: ;
	text-align: center;
	color: #ffffff;
}

div.product p {margin: 20px 0; line-height: 20px; }

div.product p.more {
	float: left; 
	position: relative; 
	height: ; 
	margin: -58px 0 0 0; 
	background: #7a003a;
	border-top-right-radius: 24px;
  white-space: nowrap;
}

div.product p.more a {
	display: block;
	padding: 8px 32px 10px 10px; 
	background: url("/image/var/files/more-arrow.png") no-repeat 90% center ;
	background-size: 12px;
	font-size: 14px; 
	text-align: center;
	color: #ffffff;
	text-decoration: none; 
}

@media all and (max-width: 962px) {
	div.product h3.contentTitle {font-size: 14px; }
}

@media all and (max-width: 768px) {
	div.ourproducts {padding: 15px 10px 20px 10px; }
	div.ourproducts div.layoutWrapper {margin: 0 auto; max-width: 640px; }
	div.product h3.contentTitle {font-size: 18px; }
}

@media all and (max-width: 468px) {
	div.product h3.contentTitle {font-size: 24px; }
}


/* frame: contactus */

div.contactus {padding: 30px 10px 45px 10px; }
div.contactus div.layoutWrapper {max-width: 800px; }

div.contactus h3 a {color: #7a003a; text-decoration: underline; }
div.contactus h3 a:hover {text-decoration: none; }
div.contactus h3 span.highlight {color: #7a003a; }

@media all and (max-width: 768px) {
  div.contactus {padding: 15px 10px 5px 10px; }
  div.contactus div.details {margin-top: 0; }
  div.contactus h3 {font-size: 21px; }
}



/* footer */

#contentBottom {padding: 15px 10px; background: #7a003a; color: #fff; }
#contentBottom div.layoutWrapper {max-width: 960px; }
#contentBottom p {margin: 0; font-family: 'Montserrat', sans-serif; color: #fff; }

#contentBottom div.copyright p {text-align: right; }

@media all and (max-width: 768px) {
  #contentBottom div.copyright p {text-align: center; font-size: 12px; }
}

div.scrollup a {
	padding-left: 52px;
	font-family: 'Montserrat', sans-serif;
	color: #fff;
	text-decoration: none; 
	opacity: 0.8;
	background: url('/image/var/files/scroll-up-arrow.png') no-repeat;
	background-size: 42px 18px;
}

@media all and (max-width: 768px) {
	div.scrollup {margin-bottom: 20px; }
	div.scrollup a, div.scrollup p {margin-bottom: 20px; font-size: 18px; text-align: center; }
}

div.scrollup a:hover {opacity: 1.0; }




/* styles for iPhone/Android landscape (and really narrow browser windows) */


@media all and (max-width: 768px) {
  
    #onxshop_cms_content {width: 100%; overflow: hidden; }
    div.aboutus div.twoColumnPage div.columnTwo,
    div.aboutus div.twoColumnLayout div.layoutColumnOne.ofTwo,
    div.aboutus div.twoColumnLayout div.layoutColumnTwo.ofTwo {width: auto!important; float: none!important;}
    div.aboutus div.twoColumnPage div.columnWrapper {margin: 0!important;}
    div.threeColumnLayout div.layoutColumnOne.ofThree,
    div.threeColumnLayout div.layoutColumnTwo.ofThree,
    div.threeColumnLayout div.layoutColumnThree.ofThree {width: auto; float: none;}
    div.fourColumnLayout div.layoutColumnOne.ofFour,
    div.fourColumnLayout div.layoutColumnTwo.ofFour {width: 50%; float: left; }
    div.fourColumnLayout div.layoutColumnThree.ofFour,
    div.fourColumnLayout div.layoutColumnFour.ofFour {width: 50%; float: left; } 
    div.layoutColumnWrapper {margin: 0px 10px!important;}
}

@media all and (max-width: 468px) {
  
    #onxshop_cms_content {width: 100%; overflow: hidden; }
    div.twoColumnPage div.columnTwo,
    div.twoColumnLayout div.layoutColumnOne.ofTwo,
    div.twoColumnLayout div.layoutColumnTwo.ofTwo {width: auto!important; float: none!important;}
    div.twoColumnPage div.columnWrapper {margin: 0!important;}
    div.threeColumnLayout div.layoutColumnOne.ofThree,
    div.threeColumnLayout div.layoutColumnTwo.ofThree,
    div.threeColumnLayout div.layoutColumnThree.ofThree {width: auto; float: none;}
    div.fourColumnLayout div.layoutColumnOne.ofFour,
    div.fourColumnLayout div.layoutColumnTwo.ofFour {width: 100%; float: none; }
    div.fourColumnLayout div.layoutColumnThree.ofFour,
    div.fourColumnLayout div.layoutColumnFour.ofFour {width: 100%; float: none; }
    div.fiveColumnLayout div.layoutColumnOne.ofFive,
    div.fiveColumnLayout div.layoutColumnTwo.ofFive,
    div.fiveColumnLayout div.layoutColumnThree.ofFive,
    div.fiveColumnLayout div.layoutColumnFour.ofFive,
    div.fiveColumnLayout div.layoutColumnFive.ofFive {width: auto; float: none;}
    div.sixColumnLayout div.layoutColumnOne.ofSix,
    div.sixColumnLayout div.layoutColumnTwo.ofSix,
    div.sixColumnLayout div.layoutColumnThree.ofSix,
    div.sixColumnLayout div.layoutColumnFour.ofSix,
    div.sixColumnLayout div.layoutColumnFive.ofSix,
    div.sixColumnLayout div.layoutColumnSix.ofSix {width: auto; float: none;}
    div.layoutColumnWrapper {margin: 0px 10px!important;}
}