/************************************************************************************
Fix Iphone sizing display issue
*************************************************************************************/
.list,
p,
h1,
h2,
h3,
h4 {
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

/************************************************************************************
HTML - forcing vert scrollbar & smoothing/antialiasing
*************************************************************************************/
html {
	overflow-y: scroll;
	/* forces vert scrollbar, works in all except Opera */
	-webkit-font-smoothing: antialiased;
	font-size: 62.5%;
	/*--if set to 62.5% then eg 1.4em=14px, or can reset this depending on which fonts chosen--*/
}

@media all and (max-width : 1000px) {
	html {
		font-size: 62.5%;
	}
}

/*---determines text size below 1000 px .......*/

/************************************************************************************
Setting margins and padding to 0 by default
***********************************************************************************/
* {
	margin: 0;
	padding: 0;
}

/************************************************************************************
Responsive images  display 100% width, but only below a certain screen width, ie to cater for mobile devices
***********************************************************************************/
@media only screen and (max-width: 800px) {
	img {
		max-width: 100%;
	}
}


/************************************************************************************
BOX-SIZING required for COLUMN CSS above break point for hamburger display (not below as would cause hamburger to display incorrectly)
*************************************************************************************/
@media only screen and (min-width: 726px) {
	* {
		box-sizing: border-box;
	}
}

/************************************************************************************
Body
*************************************************************************************/
body {
	background: #ffffff;
	/*----------- COLOUR OUTSIDE CONTAINER------------------ */

	font-family: "Lato", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1.3rem;
	margin: 0 auto;
	padding: 0;
	word-wrap: break-word !important;
	min-width: 100%;
	/*---- overflow-x:hidden;   removed 15nov2019 as was causing double vertical scroll bar, together with the overflow-x:hidden in the container tag set ----*/
}



/************************************************************************************
HEADER PANEL, CONTAINING LOGO AND MENU
*************************************************************************************/
.header {
	z-index: 1000;
}

/* So logo displays above main content div below */
#menupanel {
	width: 600px;
	height: 49px;
	margin: 25px auto;
	padding-right11: 160px;
	border1111: 1px solid rgb(22, 19, 19);
}

#content {
	border-top: 1px solid #e5e5e5;
	margin-bottom: -26px;
	background11: black;
}

@media only screen and (max-width: 725px) {
	#logopanel {
		padding-left: 0px;
		text-align: center;
		height: 138px;
	}

	#menupanel {
		padding-right11: 5px;
		margin-top: -80px;
		width: 520px;
		padding-bottom: 0;
		margin: 0 auto;
	}

	.content {
		margin-top: -25px;
	}

	.header {
		margin-bottom111: -40px;
	}
}

/************************************************************************************
CONTAINER
*************************************************************************************/
#container {
	margin: 0px auto;
	text-align: center;
	max-width: 100%;
	/*------Max width of content within the container, can restrict to eg 1400px -----*/
	background: #ffffff;
	/*-----Bkgrnd color within the container------------------ */
	color: #404040;
	/*---------color of text not within <p></p> tags within container------------------*/
	display: flex;
	/*----required for the sticky footer - see sticky footer section below----*/
	flex-direction: column;
	/*----required for the sticky footer - see sticky footer section below----*/
	height: 100vh;
	/* Avoids IE 10-11 `min-height` bug re sticky-footer. */
}

/************************************************************************************
p, bullets, h1, h2, h3, h4, h5 
*************************************************************************************/
p {
	font-family: "Lato", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #404040;
	font-size: 1.5rem;
	line-height: 1.7rem;
	font-weight: 400;
	text-align: left;
}

h1 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #660000;
	font-size: 2rem;
	line-height: 2rem;
	font-weight: 600;
	text-align: left;
}

h2 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #660000;
	font-size: 1.7rem;
	line-height: 1.7rem;
	font-weight: 600;
	text-align: left;
}

h3 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: black;
	font-size: 1.5rem;
	line-height: 1.5rem;
	text-align: left;
}

h4 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #333;
	font-size: 1.3rem;
	line-height: 1.3rem;
	text-align: center;
	padding-top: 6px;
}

h5 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #016497;
	font-size: 1.4rem;
	line-height: 1.4rem;
	text-align: left;
}

h6 {
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	color: #016497;
	font-size: 1rem;
	line-height: 1rem;
	text-align: center;
}

.bullets ul li {
	color: #404040;
	padding-right: 15px;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 400;
	text-align: left;
}

.hidden {
	display: none;
}

/************************************************************************************
Text links - light backgrounds - OLD
*************************************************************************************/

a.link-light:link,
a.link-light:visited,
a.link-light:hover,
a.link-light:active {
	color: #fff;
	/*--text colour---*/
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	font-weight1111: 400;
	background-color: rgba(166, 134, 74, 0.95);
	/*Dad's color #a4864d;*/
	text-decoration: none;
	padding: 10px 16px 10px 16px;
	/*reduced padding for neater box*/
	line-height: 38px;
	border: 0.5px solid rgba(255, 255, 255, 0.15);
	;
	/*Dad's color #a4864d;*/
	border-radius: 2px;
}



a.link-light:hover {
	color: #fff;
	background-color: rgba(166, 134, 74, 0.8);
	/* Dad's color #836b3d; */
}

/************************************************************************************
Text links - light backgrounds -NEW
*************************************************************************************/

.new a.link-light:link,
.new a.link-light:visited,
.new a.link-light:hover,
.new a.link-light:active {
	color: black;
	/*#fff;*/
	/*--text colour---*/
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	font-weight: 300;
	background-color: rgba(227, 214, 181, 0.95);
	/*rgba(166,134,74,0.95);*/
	/*Dad's color #a4864d;*/
	text-decoration: none;
	padding: 8px 10px 8px 10px;
	line-height: 38px;
	border: 0.5px solid rgba(255, 255, 255, 0.2);
	;
	/*Dad's color #a4864d;*/
	border-radius: 2px;
}

.new a.link-light:hover {
	color: #fff;
	background-color: rgba(166, 134, 74, 0.8);
	/* Dad's color #836b3d; */
}


/************************************************************************************
Text links Email address and mobile phone on Contact page
*************************************************************************************/
a.link-light1:link,
a.link-light1:visited,
a.link-light1:hover,
a.link-light1:active {
	color: #333;
	/*--text colour---*/
	font-family: "Raleway", "Trebuchat MS", Verdana, Arial, Helvetica, sans-serif;
	background-color: #e3d6b5;
	text-decoration: none;
	padding: 10px 10px 10px 10px;
	line-height: 38px;
	border111: 1px solid #999999;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
}

a.link-light1:hover {
	color: #000000;
	background-color: #836b3d;
	/**** was d0d9e4 *****/
}










/************************************************************************************
Text links - dark backgrounds
*************************************************************************************/
a.link-dark:link,
a.link-dark:visited,
a.link-dark:active {
	background: rgba(0, 0, 0, 0.35);
	color: #f5f5f5;
	text-decoration: none;
	padding: 3px 10px 3px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-color: #e1e1e1;
}

a.link-dark:hover {
	background-color: #749ab7;
	color: #000;
}

/************************************************************************************
'You are here' styles within main NAV menu
*************************************************************************************/
@media only screen and (min-width: 726px) {

	/*--- use same value as first line in "MEDIA QUERIES - NAV" --*/
	.home .homelink,
	.soaps .soapslink,
	.skincare .skincarelink,
	.shampoo .shampoolink,
	.ceramics .ceramicslink,
	.our-story .ourstorylink,
	.contact .contactlink {
		background-image: url("../graphics/menu/bar.png");
		background-repeat: repeat-x;
	}
}

/************************************************************************************
FOOTER
*************************************************************************************/
/************************************************************************************
  Flexbox - for sticky footer - note in addition to CSS below added "display: flex; flex-direction:column; height; 100vh; to the #container tagset above 
*************************************************************************************/
/*****#container {display: flex; flex-direction: column; height: 100vh; ***added to container tag ablve***/
/* Avoid the IE 10-11 `min-height` bug. */

.header,
.footer {
	flex-shrink: 0;
	/* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}

.content {
	flex: 1 0 auto;
	/* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}

/************************************************************************************
    Footer menu buttons - the "lower-menu-right" is only used for button furthest to right, so it has a border on right 
*************************************************************************************/
a.lower-menu:link,
a.lower-menu:visited,
a.lower-menu:active {
	color: #000;
	background-color: #fff;
	text-decoration: none;
	padding: 6px 10px 6px 10px;
	line-height: 38px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	border-right1: 1px solid #999;
	border-radius: 1px;
	margin-right: -3px;
	/*---to fix a 3 pixel gap between each link in menu - not sure why that started appearing ---*/

}

a.lower-menu:hover {
	background-color: #c5ddf9;
}

a.lower-menu-right:link,
a.lower-menu-right:visited,
a.lower-menu-right:active {
	color: #000;
	background-color: #fff;
	text-decoration: none;
	padding: 6px 10px 6px 10px;
	line-height: 38px;
	border: 1px solid #999;
	border-radius: 1px;
}

a.lower-menu-right:hover {
	background-color: #c5ddf9;
}

@media only screen and (max-width: 726px) {

	a.lower-menu:link,
	a.lower-menu:visited,
	a.lower-menu:active,
	a.lower-menu-right:link,
	a.lower-menu-right:visited,
	a.lower-menu-right:active {
		color: #333;
		padding: 6px 6px 6px 6px;
	}
}

@media only screen and (max-width: 550px) {

	a.lower-menu:link,
	a.lower-menu:visited,
	a.lower-menu:active,
	a.lower-menu-right:link,
	a.lower-menu-right:visited,
	a.lower-menu-right:active {
		padding: 6px 1px 6px 1px;
	}
}

/************************************************************************************
    footer text styling the 'p' styling affects lower menu and text below it
 *************************************************************************************/
/**--- strapline just above footer ---**/
.strapline {
	padding-bottom: 10px;
	padding-top: 15px;
}

.strapline h3 {
	text-align: center;
	color: #660000;
}

/**---the footer ---**/
.footer {
	background-color: #f1f1f1;
	border-top: 1px solid #666;
	padding-bottom: 15px;
}

.footer p {
	font-family: 'lato', 'Helvetica', 'Trebuchat MS', Verdana, Arial, sans-serif;
	font-size: 1.4rem;
	color: #333333;
	line-height: 1.2rem;
	text-align: center;
	margin-top: 0;
}

@media only screen and (max-width: 750px) {
	.footer p {
		font-size: 1.2rem;
		line-height: 1.2rem;
	}
}

@media only screen and (max-width: 450px) {
	.footer p {
		font-size: 1rem;
		line-height: 1rem;
	}
}


/************************************************************************************
	classes to control width of higher quality images
	needs width & max width to perform as desired
 *************************************************************************************/

.width-320px {
	width: 100%;
	max-width: 320px;
	border-radius: 2px;
}

.width-226px {
	width: 100%;
	max-width: 226px;
	border-radius: 2px;
}

.width-bounded {
	max-width: 100%;
	border-radius: 2px;
}


/************************************************************************************
    shopifybutton CSS moved to styles.CSS
 *************************************************************************************/
.shopifybutton111 {
	margin: -44px 0 80px 20px;
	padding: 0 auto;
}

.shopifybutton {
	margin: -44px 0 80px 24px;
	padding: 0 auto;
}

/*80px padding nescessary to get large soap set to line up*/

.skincare-set-shopify-button111 {
	margin: -15px calc(50% - 60px) 40px;
	padding: 0 auto;
}

.skincare-set-shopify-button {
	width: 140px;
	margin: -15px auto 0;
}

/************************************************************************************
    banner-three-line
 *************************************************************************************/
/*black on pale
	.banner-three-line h4 {color:rgba(0, 0, 0, 0.85); font-size: 1.55rem; line-height:1.55rem;}
	.banner-three-line {background-color:rgba(227,214,181,1); border-top: 1px solid grey; text-align: center; color: white; font-size: 1.4rem; padding: 22px 5px 18px 78px;}
    */
.banner-three-line h4 {
	color: white;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
	font-size: 1.55rem;
	line-height: 1.55rem;
	font-weight: 600;
}

.banner-three-line {
	/* background-color: rgba(166, 134, 74, 0.95); */
	background-color: rgba(166, 134, 74, 0.95);
	border-top: 1px solid grey;
	text-align: center;
	color: white;
	font-size: 1.4rem;
	padding: 22px 5px 18px 78px;
}

.home .banner-three-line {
	padding: 73px 5px 18px 78px;
}

@media only screen and (max-width: 725px) {

	.soaps .banner-three-line,
	.skincare .banner-three-line,
	.ceramics .banner-three-line,
	.shampoo .banner-three-line,
	.our-story .banner-three-line,
	.contact .banner-three-line {
		margin: 0 -8px 0 -10px;
	}

}

@media only screen and (min-width: 726px) {
	.banner-three-line h4 {
		padding: 0;
	}

	.banner-three-line {
		padding: 8px;
	}

	.home .banner-three-line {
		padding: 8px;
	}

}



/***********************
seperate ONE LINE banner
***********************/

.banner-one-line h4 {
	color: white;
	text-shadow: 1px 1px rgba(0, 0, 0, 0.25);
	font-size: 1.55rem;
	line-height: 1.55rem;
	font-weight: 600;
}

.banner-one-line {
	background-color: rgba(166, 134, 74, 0.95);
	border-top: 1px solid grey;
	text-align: center;
	color: white;
	font-size: 1.4rem;
	padding: 36px 5px 26px 78px;
}

.home .banner-one-line {
	padding: 87px 5px 26px 78px;
}

@media only screen and (max-width: 725px) {

	.soaps .banner-one-line,
	.skincare .banner-one-line,
	.ceramics .banner-one-line,
	.shampoo .banner-one-line,
	.our-story .banner-one-line,
	.contact .banner-one-line {
		margin: 0 -8px 0 -10px;
	}

}

@media only screen and (min-width: 726px) {
	.banner-one-line h4 {
		padding: 0;
	}

	.banner-one-line {
		padding: 8px;
	}

	.home .banner-one-line {
		padding: 8px;
	}

}