/*****************f*******************************************************************
Applying background-attachment: scroll; if device has a course pointer, eg a finter, instead of fine one (mouse)
***********************************************************************************/
@media (hover: none) {.fb1 {background-attachment: scroll !important;}}

/************************************************************************************
fb1 - HERO panel
*************************************************************************************/

.fb1 {
	background-image: url("../graphics/homepage/soaps-homepage-dark.jpg"); soaps-homepage-pcs.jpg soaps-homepage_increased-satn-temp-1800px.jpg soaps-homepage_increased-satn-temp-1800px-incExp.jpg
	margin-top11: -66px;
	height: calc(100vh - 75px); /* changed from 550px*/
	background-attachment: fixed;
	background-position:center;
	background-repeat: no-repeat;
	background-size:cover;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	text-shadow111: 1px 1px rgba(166,134,74,0.7); /* added text shaddow to fb1 so that same shadowing applied to all text! */
	display: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}



.fb1-box {text-shadow: 0.5px 0.5px rgba(0, 0, 0, 0.3);
    position: relative;
    top111: 65vh;
    transform111: translate(0, -50%);

}

.fb1-box h1 {text-align: center; color: rgba(255, 255, 255, 0.95); padding-top: 2.5rem; padding-bottom: 3.3rem; font-size: 6.7rem; line-height: 3.5rem; font-family: "Raleway"; font-weight: 600;}
.fb1-box h2 {text-align: center; color: rgba(255, 255, 255, 0.97); padding-top: 2rem; padding-bottom: 3rem; font-size: 4.6rem; line-height: 1.7rem; font-family: "Raleway"; font-weight: 600;}
.fb1-box p{text-align: center; color: rgba(255, 255, 255, 0.95); text-shadow111: 1px 1px rgba(255, 255, 255, 0.95); padding-top: 1rem; padding-bottom: 0.5rem; line-height: 3.5rem; font-size: 3.8rem; font-weight: 600; font-family: "Raleway";} 




/**************************************************************
ROB: I'm using "logo" to create a circular box: logo-1: "lather &" logo-2: "smudge"
to incorporate new fonts, have linked to a new "css/fonts.css"
which links to a serries of "FONT".woff & "FONT".woff2 files added to css folder
*************************************************************/


.logo {margin: /*17vh*/0 auto 1.5%; border-radius: 50%; width: 18rem; height: 18rem; padding111:5% 0.1% 1% 0.1%; background111: rgba(0, 0, 0, 0.1); border: 0.5rem solid rgba(255, 255, 255, 0.95);}
.logo-1{color: white;  text-shadow111: 0.5px 0.5px rgba(0, 0, 0, 0.95); text-align: center; font-size: 5rem; padding-top: 6rem; padding-bottom: 2rem; font-family: 'skinny_thingsregular'; font-weight: 900;}
.logo-2{color: white; text-shadow111: 0px 1px rgba(255, 255, 255, 0.95); text-align: center; font-size: 2.6rem; padding-top: 2rem; padding-bottom: 2rem; font-family: 'shorelines_script_boldregular';; font-weight: 900;}
span.moonflower-bold{font-family: 'moon_flower_boldregular'; text-shadow111: 0px 0px rgba(255, 255, 255, 0.95);}

/********************************
Rob: increased size of .fb1-box
width 300px > 90%
decreased top margin from 220 px
added fonts to .fb1-box: h1, h3, p
made text shadow more subtle - translucent brown

*********************************/



/* WORKING VERSION - TEXT SEEMED A BIT SMALL!!
.fb1-box {margin: 20px auto 0; width: 90%; height: 80%; padding1:200px 15px 5px 15px; background111: rgba(0, 0, 0, 0.16); border11: 1px solid #000; border-radius: 8px;}
.fb1-box h1 {text-align: center; color: rgba(255, 255, 255, 0.97); padding-top: 1.4rem; padding-bottom: 1.5rem; font-size: 5.0rem; line-height: 3.5rem; font-weight: 900; font-family: "Raleway Black"}
.fb1-box h2 {text-align: center; color: rgba(255, 255, 255, 1.00); padding-top: 1.5rem; padding-bottom: 2rem; font-size: 3.3rem; line-height: 1.7rem;font-family: "Raleway Black"}
.fb1-box p{text-align: center; color: rgba(255, 255, 255, 1.00); text-shadow: 1px 0px rgba(255, 255, 255, 0.95); padding-top: 0.4rem; padding-bottom: 0.5rem; line-height: 2.5rem; font-size: 2.5rem; font-weight: 900; font-family: "Raleway";} 
*/


/*------MEDIA QUERIES IN fb1-content----- */
/*@media screen and (max-width:925px){.fb1-box {width: 80%; padding:140px 5px 5px 5px; }}*/
@media screen and (max-width:725px){
    /*.fb1-box {width: 300px; padding:0px 0px 5px 0px;} */
    /*.fb1-box h1 {padding-top: 0rem; font-size: 3rem;}
    .fb1-box h2 {font-size: 2rem;}
    .fb1-box p {font-size: 1.4rem;} */
	/*.fb1 {margin-top111: 10px; padding-left111: 5px; padding-right111: 5px;  height:calc(100vh + 40px); background-image111: url("../graphics/homepage/soaps-homepage_increased-satn-temp-1800px.jpg");}*/
	.header {margin-bottom: -40px;}
	.fb1{height: calc(100vh);} /*---- was: calc(100vh + 40px)*/

}

/*Rob- added a max-height media querie to shrink size of text on screens with altered (and smaller) "scale and layout" settings*/
@media screen and (max-width:725px), screen and (max-height: 800px){
	.logo {margin: /* calc(35vh - 65px) */0 auto 1.5%; border: 0.4rem solid rgba(255, 255, 255, 0.93); border-radius: 50%; width: 13rem; height: 13rem;}
	.logo-1{font-size: 3.9rem; padding-top: 4rem; padding-bottom: 0.7rem; text-shadow: 0px 0px rgba(255, 255, 255, 0.8)}
	.logo-2{font-size: 2.1rem; padding-top: 2rem; padding-bottom: 2rem; text-shadow: 0px 0px rgba(255, 255, 255, 0.8);}
	
	.fb1-box h1 {text-align: center; color: rgba(255, 255, 255, 0.95); padding-top: calc(2vh); padding-bottom: calc(1vh); font-size: 3.4rem; line-height: 3.4rem; font-family: "Raleway"; font-weight: 600;}
	.fb1-box h2 {text-align: center; color: rgba(255, 255, 255, 0.97); padding-top: 0.5rem; padding-bottom: calc(1vh); font-size: 2.3rem; line-height: 2.3rem; font-family: "Raleway"; font-weight: 600;}
	.fb1-box p{text-align: center; color: rgba(255, 255, 255, 1.00); text-shadow111: 1px 1px rgba(255, 255, 255, 0.5); padding-top: 0.4rem; padding-bottom: 0.5vh; font-size: 2rem; line-height: 2.2rem;  font-weight: 600; font-family: "Raleway";} 
}


/*Rob- reduced margin at top*/
@media screen and (max-height: 800px) and (orientation: landscape) and (min-width:726px){
	.logo{margin: /* 5vh */0 auto 1.5%;}
}



/********************************************************************
SOCIAL MEDIA TAGS & ICONS
*********************************************************************/

.social-media-home{height: 60px; padding: 4px 4px; vertical-align: middle;}
.icon-home{height: 66px; padding: 4px 4px; vertical-align: middle;}

/************************************************************************************
Full width text - under menu
*************************************************************************************/
.full-width-text-top {max-width: 1100px; margin: 0 auto; padding: 40px 4% 0px 4%; border1111: 1px solid #000; }
@media screen and (max-width: 750px){.full-width-text-top {padding: 0px 4% 0px 4%; border1111: 1px solid #000;}}

/************************************************************************************
Full Width text - lower down page
*************************************************************************************/
.full-width-text {text-align: center; margin: 0 auto; padding: 0.5vh 0.5vw;}

/* OLD CODE FROM PETER
.full-width-text {max-width: 1100px; margin: 0 auto; padding: 20px 4% 0px 4%; border-top: 0px; background111: black;}
  @media screen and (max-width: 630px){
  .full-width-text {padding: 10px 4% 0px 4%; border-top: 0px;}
  }
*/

/* CSS for 4 divs, edited for Homepage by Rob */    
.cols4outer *{box-sizing: border-box; } /* Includes padding and border within total width */    
.cols4outer {text-align: center; padding: 0 auto;} /* this doesn't center all the content, ie on 2nd row with just 2 entries - try to find a work around */
.cols4outer *{box-sizing: border-box; } /* Includes padding and border within total width */
.cols4outer1 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 0%;}
.cols4outer2 {width: 50%; float: left; border111:1px solid #ccc; padding: 0% 0%;}
.one4 {text-align: center; width: 50%; float: left; border111:1px solid #ccc; padding111: 0% 1%;}
.two4 {width: 50%; float: left; border111:1px solid #ccc; padding111: 0% 1%;}
.three4 {width: 50%; float: left; border111:1px solid #ccc; padding111: 0% 1%}
.four4 {width: 50%; float: left; border111:1px solid #ccc; padding111: 0% 1%;}

.cols4outer:after {content: "";  display: table;  clear: both;} /* Clear floats after columns */

@media only screen and (max-width: 800px) {.cols4outer1, .cols4outer2 {width: 100%; padding: 0% 0%; text-align: center;}
	.one4, .two4, .three4, .four4 {padding: 0% 1%;}
}
/*@media only screen and (max-width: 700px) {.one4, .two4, .three4, .four4 {width: 100%; padding: 0% 0%; text-align: center;}}*/




.three-cols-content{border-color: #666; width: 90%; margin: 0% auto; color: white; padding: 0; position: relative; text-align: center;}

.secondary-content-img{width: 100%; border-radius: 0.5%;}

.three-cols-content .link-homepage{text-align: center; position: absolute; top: 80%; left: 50%; transform: translate(-50%, 0%); color: rgba(255, 255, 255, 0.95); font-family: "Raleway"; font-weight: 600;}
.three-cols-content h2{color: rgba(255, 255, 255, 0.95); font-size: 2.8rem; weight: 600;}

@media screen and (max-width: 1200px), screen and (max-height: 800px){
	.three-cols-content .link-homepage{font-size: 1.5rem; top: 69%;}
	.three-cols-content h2{font-size: 1.5rem;}
	.three-cols-content111{width: 100%; padding-bottom: 3%;}
}

@media screen and (min-width: 725.1px){
	.three-cols-content h2{line-height: 2.5rem;}
}