/* Main page settings */

body {
	margin: 0;
	background-image: url("/images/Backgroundimg.JPG"); 
	background-repeat: no-repeat;
   background-attachment: fixed;
	width: 100%;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
body {
	margin: 0; 
	background-color: 
	width: 100%;
	background-color: #24756f;
}
}


.fullpage {
	width: 80%;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.fullpage {
	width: 100%;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.fullpage {
	width: 80%;
	background-color: #ffffff;
	margin-left: auto;
	margin-right: auto;
}
}

/* Aligns the footer at bottom of the page */

.footer-align {
	position: relative;
	bottom: 0;
	text-decoration: none;
	transition: all 0.3s ease-out;
	font-size: max(1vw, 10px);
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	width: 98vw;
}

/* Aligns the header at the top of the page */

.headerimg {
	position: relative;
	background-color: #ffffff;
	height: auto;
	padding-bottom: 2vh;
	width: 100%;
	z-index: 99;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.headerimg {
   display: none;
	position: relative;
	height: 25vw;
	width: 100vw;
}
}

.headerimgmobile {
	position: relative;
	height: 0px;
	width: 100%;
	z-index: 99;
	display: none;
}


@media screen and and (min-width: 480px) {
.headerimgmobile {
	display: none;
}
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.headerimgmobile {
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	z-index: 99;
}
}


.footerimg {
	position: relative;
	background-color: #ffffff;
	height: auto;
	width: 100%;
	z-index: 99;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.footerimg {
	position: relative;
	background-color: #ffffff;
	height: auto;
	width: 100%;
	z-index: 99;
}
}

.mobilelogoleft {
	display: none;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.mobilelogo {
	position: relative;
	width: 100%;
	height: 12vh;
	margin-left: auto;
	margin-right: auto;
	display: block;
	background-color: ffffff;
}
}

.mobilelogoleft {
	display: none;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.mobilelogoleft {
	position: relative;
	width: 25%;
	height: 12vh;
	margin-left: auto;
	margin-right: auto;
	display: block;
	padding-top: 1vh;
	padding-left: 2%;
	float: left;
}
}

.mobilelogoright {
	display: none;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.mobilelogoright {
	position: relative;
	width: auto;
	height: 12vh;
	display: block;
	padding-top: 1vh;
	padding-left: 2%;
	padding-right: 2%
	float: right;
	margin-left: auto;
	mrgin-right: auto;
}
}

.tablealign {
	position: relative;
	width: 70%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	padding-top: 4vh;
}

/* Sets the container for the index main image */

.respect {
	width: 100%;
	background: #000000;
	height: auto;
}


.indexheader {
	position: relative;
	height: 40vw;
	width: 100%;
	z-index: 1;
	padding-top: 4vh;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.indexheader {
	position: relative;
	height: 60vw;
	width: 100vw;
	background-color: #ffffff;
	padding-top: 0vh;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.indexheader {
	position: relative;
	height: 40vw;
	width: 100%;
	z-index: 1;
	background-color: #ffffff;
	padding-top: 4vh;
}
}

/* sets the black background to 50% of the main image */

.darkhead {
	position: relative;
	background-color: #000000;
	height: 50%;
	width: 100vw;
	z-index: 2;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.darkhead {
	position: relative;
	background-color: #000000;
	height: 50%;
	width: 100vw;
	z-index: 2;
}
}

.workshop {
	width: 100vw;
	height: 38vw;
	background-color: #d7ccb7;
	margin-bottom: 16vw;
	margin-top: 4vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.workshop {
	width: 100vw;
	height: 210vw;
	background-color: #d7ccb7;
	margin-bottom: 16vw;
	margin-top: 4vw;
}
}

.wreathimg {
	position: relative;
	float: right;
	height: 46vw;
	width: auto;
	top: -4vw;
	margin-right: 10vw;
	z-index: 20;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathimg {
	position: relative;
	width: 90vw;
	height: 100vw;
	margin-left: auto;
	margin-right: auto;
	z-index: 20;
}
}

.wreathtxt {
	position: relative;
	float: left;
	margin-left: 10vw;
	height: 38vw;
	margin-top: 4vw;
	z-index: 20;
	width: 35vw;
	text-align: center;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathtxt {
	padding-top: 8vw;
	float: none;
	position: relative;
	width: 80vw;
	height: 90vw;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4vw;
	z-index: 20;
	text-align: center;
}
}

.wreathheader {
  margin-bottom: 2vw;
  width: 35vw;
  text-decoration: none;
  font-size: max(2.0vw, 20px);
  font-family: PlayfairBold;
  text-align: center;
  color: #000000;
  z-index: 21;
  height: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathheader {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  width: auto;
  text-decoration: none;
  font-size: max(2.0vw, 20px);
  font-family: PlayfairBold;
  text-align: center;
  color: #000000;
  z-index: 21;
  height: auto;
}
}


.wreathdescription {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 30px;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathdescription {
	text-decoration: none;
	font-size: max(1.2vw, 12px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 30px;
}
}

.wreathlayer {
	width: 80vw;
	margin-left: auto;
	margin-right: auto;
	background-image: url('ChristmasFlat03.jpg');
	height: 40vw;
	background-size: cover;
	margin-bottom: 10vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathlayer {
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	background-image: url('ChristmasFlatPortrait.jpg');
	height: 135vw;
	background-size: cover;
	margin-bottom: 10vw;
}
}

.wreathtxt01 {
	width: 25vw;
	margin-left: auto;
	margin-right: auto;
	height: 20vw;
	padding-top: 10vw;
	text-align: center;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathtxt01 {
	text-align: center;
	width: 50vw;
	margin-left: auto;
	margin-right: auto;
	height: 20vw;
	padding-top: 32vw;
}
}

.wreathheaderwhite {
  margin-bottom: 2vw;
  width: 25vw;
  text-decoration: none;
  font-size: max(2.6vw, 26px);
  font-family: PlayfairBold;
  text-align: center;
  color: #ffffff;
  z-index: 21;
  height: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathheaderwhite {
  margin-bottom: 2vw;
  text-decoration: none;
  font-size: max(2.6vw, 26px);
  font-family: PlayfairBold;
  text-align: center;
  color: #ffffff;
  z-index: 21;
  height: auto;
}
}

.wreathdescriptionwhite {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 30px;
	color: #ffffff;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.wreathdescriptionwhite {
	text-decoration: none;
	font-size: max(1.2vw, 12px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 30px;
	color: #ffffff;
}
}

/* sets the black background of the main image for the product page*/

.shopdarkhead {
	position: relative;
	background-color: #000000;
	height: 50%;
	width: 100vw;
	z-index: 2;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopdarkhead {
	position: relative;
	background-color: #000000;
	height: 18%;
	width: 100vw;
	z-index: 2;
}
}

.shopdropdown {
	width: 20vw;
	background-color: #f2ebe5;
	height: 4vh;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopdropdown {
	width: 20vw;
	background-color: #f2ebe5;
	height: 4vh;
	margin-left: auto;
	margin-right: auto;
}
}

@media screen and (min-width: 480px) {
.shopdropdown {
	display: none;
	width: 20vw;
	background-color: #f2ebe5;
	height: 4vh;
	margin-left: auto;
	margin-right: auto;
}
}

.dropdownback {
	width: 100vw;
	padding-top: 4vh;
	background-color: #f2ebe5;
	height: 5vh;
}

.shoplayer2 {
	width: 100vw;
	height: 134vw;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shoplayer2 {
	width: 100vw;
	height: 395vw;
	background-color: #f2ebe5;
}
}

.shoplayer2row2 {
	width: 100vw;
	height: 64vw;
	background-color: #f2ebe5;
	overflow: hidden;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shoplayer2row2 {
	width: 100vw;
	height: 145vw;
	background-color: #f2ebe5;
	overflow: hidden;
}
}

.shoplayer2row3 {
	width: 100vw;
	height: 99vw;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shoplayer2row3 {
	width: 100vw;
	height: 270vw;
	background-color: #f2ebe5;
}
}

.shopmain {
	width: 92vw;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	background-color: #f2ebe5;
}

.shopsidebar {
	width: 26vw;
	height: auto;
	float: left;
	padding-top: 5vh;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopsidebar {
	display: none;
	width: 26vw;
	height: auto;
	float: left;
	padding-top: 5vh;
	background-color: #f2ebe5;
}
}

.shopproductcontainer {
	width: 66vw;
	height: 106vh;
	float: right;
	padding-top: 8vh;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopproductcontainer {
	width: 94vw;
	height: 106vh;
	padding-top: 8vh;
	background-color: #f2ebe5;
	margin-left: auto;
	margin-right: auto;
}
}

.productimg {
	position: relative;
	float: left;
	width: 20vw;
	height: 27vw;
	margin-left: 1vw;
	margin-right: 1vw;
	margin-bottom: 5vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.productimg {
	position: relative;
	float: left;
	width: 43vw;
	height: 58vw;
	margin-left: 2vw;
	margin-right: 2vw;
	margin-bottom: 5vw;
}
}

.shopimg {
	position: relative;
	width: 20vw;
	height: 20vw;
	margin-bottom: 2vh;
	background-image: url('WoodBack.jpg');
	background-size: contain;
	overflow: hidden;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopimg {
	position: relative;
	width: 43vw;
	height: 43vw;
	margin-bottom: 2vh;
	background-color: lightgrey;
	overflow: hidden;
}
}

.shopdescription {
	position: relative;
	width: 15vw;
	height: 5vh;
	float: left;
	text-decoration: none;
   font-size: max(1.2vw, 12px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: left;
	font-weight: bold;
	letter-spacing: -1px;
}


@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopdescription {
	position: relative;
	width: 30vw;
	height: 5vh;
	float: left;
	text-decoration: none;
   font-size: max(1.2vw, 12px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: left;
	font-weight: bold;
	letter-spacing: -1px;
}
}

.shopdescription:visited {
	color: #000000;
	text-decoration: none;
}
.shopdescription:active {
	color: #000000;
	text-decoration: none;
}
.shopdescription:link {
	color: #000000;
	text-decoration: none;
}

.shopdescription:hover {
	color: #000000;
	text-decoration: underline;
}

.shopprice {
	position: relative;
	width: 5vw;
	height: 15vh;
	text-decoration: none;
   font-size: max(1.2vw, 12px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: right;
	float: right;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopprice {
	position: relative;
	width: 13vw;
	height: 15vh;
	text-decoration: none;
   font-size: max(1.2vw, 12px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: right;
	float: right;
}
}

.productlayer2 {
	width: 100vw;
	height: 60vw;
	padding-top: 8vh;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.productlayer2 {
	width: 100vw;
	height: 300vw;
	padding-top: 8vh;
	background-color: #f2ebe5;
}
}

.productlayer2big {
	width: 100vw;
	height: 70vw;
	padding-top: 8vh;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.productlayer2big {
	width: 100vw;
	height: 340vw;
	padding-top: 8vh;
	background-color: #f2ebe5;
}
}

.productcontainer {
	width: 100vw;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.productcontainer {
	width: 90vw;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
}

/* sets the size for the index main image container */

.mainimgbackground {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.mainimgbackground {
  overflow: visible;
  position: relative;
  width: 100vw;
  height: 133vw;
  margin-left: auto;
  margin-right: auto;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.mainimgbackground {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 70%;
  margin-left: auto;
  margin-right: auto;
}
}
/* sets the light background to the bottom 50% of the main image */

.lighthead {
	position: relative;
	background-color: #f2ebe5;
	height: 50.5%;
	width: 100vw;
	z-index: 1;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.lighthead {
	position: relative;
	background-color: #f2ebe5;
	height: 50.5%;
	width: 100vw;
	z-index: 1;
}
}

/* sets the light background to the bottom of the product page */

.shoplighthead {
	position: relative;
	background-color: #f2ebe5;
	height: 50.5%;
	width: 100vw;
	z-index: 1;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shoplighthead {
	position: relative;
	background-color: #f2ebe5;
	height: 82%;
	width: 100vw;
	z-index: 1;
}
}

/* sets a container for information on the index page */

.indexlayer2 {
	position: relative;
	background-color: #ffffff;
	height: auto;
	width: 100%;
	z-index: 1;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.indexlayer2 {
	position: relative;
	background-color: #ffffff;
	height: auto;
	width: 100vw;
	z-index: 1;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.indexlayer2 {
	position: relative;
	background-color: #ffffff;
	height: auto;
	width: 100%;
	z-index: 1;
}
}

.indexlayer3 {
	position: relative;
	background-color: #bac6be;
	height: 60vw;
	width: 100%;
	z-index: 1;
	top: 6vh;
}


@media screen and (max-device-width: 480px) and (orientation: portrait) {
.indexlayer3 {
	height: auto;
	overflow: hidden; 
	margin-right: 0px;
	margin-left: 0px;
	padding-bottom: 4vh;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.indexlayer3 {
	Position: relative;
	overflow: hidden;
	max-width: 100vw; 
	height: 80vw; 
	margin-right: auto;
	margin-bottom: auto;
	
}
}

.lakeslayer2 {
	position: relative;
	background-color: #ffffff;
	height: 50vh;
	width: 100%;
	z-index: 1;
	padding-bottom: 5%;
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.lakeslayer2 {
	position: relative;
	background-color: #ffffff;
	height: 100vh;
	width: 100%;
	z-index: 1;
	padding-bottom: 5%;
}
}

.lakeslayer3 {
	position: relative;
	background-color: #ffffff;
	height: 86vh;
	width: 100%;
	z-index: 1;
	padding-bottom: 5%;
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.lakeslayer3 {
	position: relative;
	background-color: #ffffff;
	height: 190vh;
	width: 100%;
	z-index: 1;
	padding-bottom: 5%;
}
}

.layerimg3 {
	position: relative;
	background-color: #ffffff;
	width: 100%;
	z-index: 2;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.layerimg3 {
	position: relative;
	background-color: #000000;
	height: 25%;
	width: 100vw;
	z-index: 2;
}
}

.img-container3left {
	float: left;
	width: 53%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
	padding-left: 2%;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.img-container3left {
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
	padding-left: 0;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.img-container3left {
	width: 53%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
}
}

.img-container3right {
	float: right;
	width: 45%;
	height: 100%;
	overflow: hidden;	
	z-index: 5;
	background: #ffffff;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.img-container3right {
	width: 100%;
	min-height: 90vw;
	overflow: hidden;	
	z-index: 5;
	background: #ffffff;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.img-container3right {
	float: right;
	width: 45%;
	height: 100%
	overflow: hidden;	
	z-index: 5;
	background: #ffffff;
}
}

.dayticketborder {
	position: relative;
	background-color: #bac6be;
	height: auto;
	width: 70%;
	z-index: 4;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
	top: 8vw;
	padding-bottom: 10vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.dayticketborder {
	position: relative;
	background-color: #bac6be;
	height: auto;
	width: 70%;
	z-index: 4;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
	top: 8vw;
	padding-bottom: 14vw;
	margin-bottom:4vh;
	
}
}

.daytickethead {
  position: relative;
  background-color: #bac6be;
  width: 20vw;
  height: auto;
  text-decoration: none;
  font-size: max(2vw, 20px);
  font-family: PlayfairBold;
  text-align: center;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  top: -2vh;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.daytickethead {
  position: relative;
  background-color: #bac6be;
  width: 40vw;
  height: auto;
  text-decoration: none;
  font-size: max(2vw, 20px);
  font-family: PlayfairBold;
  text-align: center;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
  top: -2vh;
}
}

/* Sets the container for the buy flowers index section with border */


@media screen and (max-device-width: 480px) and (orientation: portrait) {
.buyimgborder {
	top: 4vw;
	position: relative;
	background-color: #f2ebe5;
	height: auto;
	width: 80vw;
	z-index: 4;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 6vh;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.buyimgborder {
	top: 4vw;
	position: relative;
	background-color: #f2ebe5;
	height: 80vw;
	width: 80vw;
	z-index: 4;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
}
}


/* sets the size of a div to contain the menu and the shop image */

.headerimg3shop {
	position: relative;
	height: 15vh;
	width: 100vw;
	z-index: 1;
	background-color: #97a3aa;
	padding-top: 4vh;
}

/* sets the size of a div to contain just the product image in phone portrait */

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.headerimg3shop {
	position: relative;
	padding-top: 4vh;
	height: 12vh;
	width: 100vw;
	background-color: #97a3aa;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.headerimg3shop {
	position: relative;
	height: 15vh;
	width: 100vw;
	z-index: 1;
	background-color: #97a3aa;
	padding-top: 4vh;
}
}


/* sets the black backgroud to finish half way down the menu and the shop image */

.layerimg3 {
	position: relative;
	background-color: #000000;
	height: 50%;
	width: 100vw;
	z-index: 2;
}

/* creates the background size for the product menu and image */

.img-container2shop {
  overflow: hidden;
  position: relative;
  width: 90vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.img-container2shop {
  overflow: hidden;
  position: relative;
  width: 90vw;
  height: 90vw;
  margin-left: auto;
  margin-right: auto;
}
}

/* sets the size of the div on the left hand side holding the menu */

.img-container3leftshop {
	float: left;
	width: 22vw;
	height: 70vh;
	overflow: hidden;
	background: #ffffff;

}

/* hides the menu in phone portrait mode */

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.img-container3leftshop {
	display: none;
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #ffffff;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.img-container3leftshop {
	width: 22vw;
	height: 90vh;
	overflow: hidden;
	background: #ffffff;
}
}

.img-container3rightshop {
	background-size: 100%;
	float: right;
	width: 68vw;
	height: 70vh;
	overflow: hidden;	
	z-index: 5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.img-container3rightshop {
	width: 100%;
	min-height: 90vw;
	overflow: hidden;	
	z-index: 5;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.img-container3rightshop {
	float: right;
	width: 68vw;
	height: 90vh;
	overflow: hidden;	
	z-index: 5;
}
}

.cardstxt {
	background: rgb(255, 255, 255, 0.8);
	margin: 0;
	position: relative;
	width: 80%;
	height: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 6;
}

/* Sets the main container for the shop */

.shopcontainer {
	position: relative;
	height: 60vw;
	width: 100vw;
	z-index: 1;
	padding-top: 4vh;
	background-color: #000000;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopcontainer  {
	position: relative;
	padding-top: 4vh;
	height: 140vh;
	width: 100vw;
	background-color: #000000;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.shopcontainer  {
	position: relative;
	height: 62vw;
	width: 100vw;
	z-index: 1;
	background-color: #000000;
	padding-top: 4vh;
}
}

/* [1] The container */
.hoverzoom {
  height: 20vw; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.hoverzoom {
  height: 43vw; /* [1.1] Set it as per your need */
  overflow: hidden; /* [1.2] Hide the overflowing of child elements */
}
}

/* [2] Transition property for smooth transformation of images */
.hoverzoom img {
  transition: transform 1.5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.hoverzoom:hover img {
  transform: scale(1.2);
}

/* Sets the container for the shopify buy now button */

.productbackground {
  padding-top: 4vh;
  padding-bottom: 4vh;
  overflow: hidden;
  position: relative;
  width: 90vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.productbackground {
  padding-top: 4vh;
  padding-bottom: 4vh;
  padding-left: 4vw;
  padding-right: 4vw;
  overflow: hidden;
  position: relative;
  width: 80vw;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #ffffff;
}
}

/* sets the container for the sympathy header */

.sympathyheader {
	position: relative;
	height: 37vw;
	width: 100vw;
	z-index: 1;
	padding-top: 4vh;
	background-color: #000000;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.sympathyheader {
	position: relative;
	padding-top: 4vh;
	height: 37vw;
	width: 100vw;
	background-color: #000000;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.sympathyheader {
	position: relative;
	height: 62vw;
	width: 102vw;
	z-index: 1;
	background-color: #000000;
	padding-top: 4vh;
}
}

/* sets the size for the div containing the images in the header */

.sympathytop-img {
	float: left;
	height: auto;
	width: 30%;
	overflow: hidden;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.sympathytop-img {
	float: left;
	height: auto;
	width: 30%;
	overflow: hidden;
}
}

.shopheader {
	width: auto;
	padding-left: 5vw;
	padding-top: 2.5vh;
	float: left;
	postition: relative;
	background-color: #97a3aa;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.shopheader {
	width: auto;
	padding-left: 5vw;
	padding-top: 1.6vh;
	float: left;
	postition: relative;
	background-color: #97a3aa;
}
}

.page-barcontainer {
	width: 100vw;
	height: auto;
	background-color: #f2ebe5;
	padding-bottom: 4vw;
}

.page-bar {
	margin-left: 30vw;
	margin-right: auto;
	width: 66vw;
	text-decoration: none;
	font-size: max(1.5vw, 15px);
	font-family: Raleway, serif;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2.5px;
	background-color: #f2ebe5;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.page-bar {
	margin-left: auto;
	margin-right: auto;
	width: 66vw;
	text-decoration: none;
	font-size: max(1.8vw, 18px);
	font-family: Raleway, serif;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2.5px;
	background-color: #f2ebe5;
}
}


.page-button {
	display: inline-block;
	width: 1.5vw;
	height: auto;
	text-decoration: none;
	font-size: max(1.5vw, 15px);
	font-family: serif;
	text-align: center;
	font-weight: bold;
	letter-spacing: 2.5px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.page-button {
	display: inline-block;
	width: 1.5vw;
	height: auto;
	text-decoration: none;
	font-size: max(2.0vw, 20px);
	font-family: serif;
	text-align: center;
	font-weight: normal;
	letter-spacing: 2.5px;
	padding-left: 1.7vw;
	padding-right: 1.7vw;
	margin-left: auto;
	margin-right: auto;
}
}

.page-button:hover,
.page-button:focus,
.page-button:active {
	background: #d3d3d3;
	cursor: pointer;
	
}

.page-button:visited {
	color: #000000;
	text-decoration: none;
}
.page-button:active {
	color: #000000;
	text-decoration: none;
}
.page-button:link {
	color: #000000;
	text-decoration: none;
}

.page-buttonactive {
	display: inline-block;
	width: 1.5vw;
	height: auto;
	text-decoration: none;
	font-size: max(1.5vw, 15px);
	font-family: Andis;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	background: #000000;
	text color: #ffffff;
}

.deliverycontainer {
	width: 70vw;
	height: auto;
	background-color: #f2ebe5;
	padding-left: 15vw;
	padding-right: 15vw;
	padding-bottom: 4vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.deliverycontainer {
	width: 90vw;
	height: auto;
	background-color: #f2ebe5;
	padding-left: 5vw;
	padding-right: 5vw;
	padding-top: 6vw;
	padding-bottom: 4vw;
}
}

/*-------------------------------------buttons-------------------------------------*/

/* index button, transparent changing to white on hover */

.indexlinkbutton5 {
	overflow: hidden;
	border: 1px solid #000000;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;	
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.indexlinkbutton5 {
	overflow: hidden;
	left: 17vw;
	border: 1px solid #000000;
	margin: 0 auto;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;
	z-index: 4;	
}
}

.indexlinkbutton5:hover,
.indexlinkbutton5:focus,
.indexlinkbutton5:active {
	background: #bac6be;
	transition: all 0.5s ease-in;
	cursor: pointer;	
}

.indexlinkbutton5white {
	overflow: hidden;
	border: 1px solid #ffffff;
	color: #ffffff;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;	
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.indexlinkbutton5white {
	overflow: hidden;
	left: 17vw;
	border: 1px solid #ffffff;
	color: #ffffff;
	margin: 0 auto;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;
	z-index: 4;	
}
}

.indexlinkbutton5white:hover,
.indexlinkbutton5white:focus,
.indexlinkbutton5white:active {
	background: #000000;
	transition: all 0.5s ease-in;
	cursor: pointer;	
}

/* index button transparent changing to black on hover */

.linkbuttonbottom {
   margin-top: 3vw;
	overflow: hidden;
	border: 1px solid #ffffff;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;	
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.linkbuttonbottom {
	overflow: hidden;
	border: 1px solid #ffffff;
	padding: 10px;
	width: 160px;
	height: auto;
	background: transparent;
	text-align: center;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	text-decoration: none;
	transition: all 0.3s ease-out;
	z-index: 4;	
	margin-left: auto;
	margin-right: auto;
}
}

.linkbuttonbottom:hover,
.linkbuttonbottom:focus,
.linkbuttonbottom:active {
	background: #000000;
	transition: all 0.5s ease-in;
	cursor: pointer;
	
}



/*-------------------------------------Text styles------------------------------------- */


.auto-style8 {
	text-decoration: none;
	font-size: max(1.3vw, 13px);
	font-family: PlayfairBold;
	text-align: center;
}

/*Standard header text center */

.headertxt01 {
	text-decoration: none;
	font-size: max(2.0vw, 20px);
	font-family: PlayfairBold;
	text-align: center;
	line-height: 1.7;
}

.headertxt02 {
	text-decoration: none;
	font-size: max(2.5vw, 25px);
	font-family: PlayfairBold;
	text-align: center;
	line-height: 1.2;
	color: #24756f; 
}

.headertxt03 {
	text-decoration: none;
	font-size: max(1vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.2;
	color: #24756f; 
}

.headertxt04 {
	text-decoration: none;
	font-size: max(1vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.2;
	color: #800000; 
}

.headertxt05 {
	text-decoration: none;
	font-size: max(1.2vw, 12px);
	font-family: Raleway, serif;
	text-align: left;
	line-height: 1.7;
	color: #24756f; 
}

.headertxt06 {
	text-decoration: none;
	font-size: max(1.2vw, 12px);
	font-family: Raleway, serif;
	text-align: left;
	line-height: 1.7;
	color: #800000; 
}

/* Align Text centre, standard size */

.auto-style15 {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 30px;
	margin-left: 5%;
	margin-right: 5%;
}

.auto-style16 {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: left;
	line-height: 1.7;
	margin-bottom: 30px;
	margin-left: 5%;
	margin-right: 5%;
	list-style-type: disc;
	margin-left: auto;
	margin-right: auto;
	width: 65%;
}

.auto-style17 {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: left;
	line-height: 1.7;
	margin-bottom: 30px;
	list-style-type: disc;
	padding-left: 5%;
}

.tabletxt {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
}


@media screen and (max-device-width: 480px) and (orientation: portrait) {
.auto-style15 {
	text-decoration: none;
	font-size: max(1.2vw, 12px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 1vh;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.auto-style15 {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: center;
	line-height: 1.7;
	margin-bottom: 20px;
}
}

/* Align Text left, standard size */

.auto-styleleft {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
	font-family: Raleway, serif;
	text-align: left;
	line-height: 1.7;
}

/* text settings for bouquet information on index page */

.buyflowerstext {
  position: relative;
  background-color: #f2ebe5;
  width: 55vw;
  height: auto;
  margin-top: 2vw;
  text-decoration: none;
  font-size: max(1.0vw, 10px);
  font-family: Raleway, serif;
  text-align: center;
  line-height: 1.7;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;

}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.buyflowerstext {
  position: relative;
  background-color: #f2ebe5;
  width: 55vw;
  height: auto;
  margin-top: 2vw;
  text-decoration: none;
  font-size: max(1.2vw, 12px);
  font-family: Raleway, serif;
  text-align: center;
  line-height: 1.7;
  z-index: 5;
  margin-left: auto;
  margin-right: auto;
}
}

/* Settings for about us header on index page */

.welcometxt {
  	position: relative;
	margin-left: auto;
	margin-right: auto;
  	width: 80%;
  	height: auto;
}

.abouttxtindex {
  	position: relative;
	float: right;
  	width: 72%;
  	height: 30vw;
  	text-decoration: none;
  	font-size: max(2vw, 20px);
 	font-family: PlayfairBold;
  	text-align: center;
  	z-index: 3;
  	top: 1vw;
	margin-top: 1vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.abouttxtindex {
  	position: relative;
  	width: 80%;
  	height: auto;
  	text-decoration: none;
  	font-size: max(2vw, 20px);
 	font-family: PlayfairBold;
  	text-align: center;
  	z-index: 3;
  	margin-left: 10%;
  	top: 6vw;
}
}

.aboutimg {
	position: relative;
	float: left;
	height: auto;
	width: 22%;
	z-index: 2;
	margin-top: 1vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.aboutimg {
	position: relative;
	top: 5vw;
	height: auto;
	width: 25%;
	z-index: 2;
	margin-top: 1vw;
	float: left;
}
}

/* Text settings for our flowers banner header */

.buyflowerstext5 {
  position: relative;
  float: left;
  top: 11vw;
  margin-bottom: 2vw;
  text-decoration: none;
  font-size: max(3.2vw, 32px);
  font-family: PlayfairBold;
  text-align: right;
  color: #ffffff;
  z-index: 5;
  width: 25vw;
  left: 10vw;
  height: auto;
  margin-left: 1vw;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.buyflowerstext5 {
  position: relative;
  float: left;
  top: 11vw;
  margin-bottom: 2vw;
  text-decoration: none;
  font-size: max(2.4vw, 24px);
  font-family: PlayfairBold;
  text-align: center;
  color: #ffffff;
  z-index: 5;
  width: 100vw;
  left: 0vw;
  height: auto;
  margin-left: 0vw;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.buyflowerstext5 {
  position: relative;
  float: left;
  top: 6vw;
  margin-bottom: 2vw;
  text-decoration: none;
  font-size: max(3.2vw, 32px);
  font-family: PlayfairBold;
  text-align: right;
  color: #ffffff;
  z-index: 5;
  width: 25vw;
  left: 10vw;
  height: auto;
  margin-left: 1vw;
}
}

/* Text Settigns for our flowers banner information */

.buyflowerstext6 {
  top: 11.5vw;
  margin-bottom: 2vw;
  position: relative;
  text-decoration: none;
  font-size: max(1.0vw, 10px);
  line-height: 1.7;
  font-family: Raleway, serif;
  text-align: left;
  color: #ffffff;
  z-index: 5;
  width: 40vw;
  right: 10vw;
  height: auto;
  margin-left: 1vw;
  float: right;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.buyflowerstext6 {
  top: 14vw;
  margin-bottom: 2vw;
  position: relative;
  text-decoration: none;
  font-size: max(1.2vw, 12px);
  font-family: Raleway, serif;
  line-height: 1.7;
  text-align: center;
  color: #ffffff;
  z-index: 5;
  width: 80vw;
  right: 10vw;
  height: auto;
  margin-left: 1vw;
  float: right;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.buyflowerstext6 {
  top: 8.5vw;
  margin-bottom: 2vw;
  position: relative;
  text-decoration: none;
  font-size: max(1.0vw, 10px);
  font-family: Raleway, serif;
  line-height: 1.7;
  text-align: left;
  color: #ffffff;
  z-index: 5;
  width: 40vw;
  right: 10vw;
  height: auto;
  margin-left: 1vw;
  float: right;
}
}

/* text for the header on the sympathy page */

.sympathyheadertxt {
  	position: relative;
  	width: 38vw;
  	height: auto;
	padding-top: 4vh;
	padding-bottom: 4vh;
  	text-decoration: none;
  	font-size: max(2.0vw, 20px);
 	font-family: PlayfairBold;
  	text-align: center;
  	z-index: 6;
   margin-left: auto;
   margin-right: auto;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.sympathyheadertxt {
  	position: relative;
  	width: 38vw;
  	height: auto;
	padding-top: 4vh;
	padding-bottom: 4vh;
  	text-decoration: none;
  	font-size: max(2.0vw, 20px);
 	font-family: PlayfairBold;
  	text-align: center;
  	z-index: 6;
   margin-left: auto;
   margin-right: auto;
}
}

.sympathybodytxt {
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	text-decoration: none;
	font-size: max(1.0vw, 10px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: center;
   min-height: 10vw;
	z-index: 6;
}

.sympathybodytxt:visited {
	color: #000000;
	text-decoration: none;
}
.sympathybodytxt:active {
	color: #000000;
	text-decoration: none;
}
.sympathybodytxt:link {
	color: #000000;
	text-decoration: none;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.sympathybodytxt {
	text-decoration: none;
   font-size: max(1.2vw, 12px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: center;
	padding-bottom: 4vh;
}
}

@media screen and (max-device-width: 480px) and (orientation: landscape) {
.sympathybodytxt {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: center;
	padding-bottom: 2vh;
	width: 85%;
}
}

.sympathyimgcontainer {
   width: 72vw;
	height: auto;
	margin-left:auto;
	margin-right: auto;
	background-color: #f2ebe5;
}

.shopheadertxt {
	text-decoration: none;
	font-size: max(1.0vw, 10px);
   line-height: 1.7;
   font-family: Raleway, serif;
	text-align: left;
	color: #ffffff;
}

.shopheadertxt2 {
	text-decoration: none;
	font-size: max(1.8vw, 18px);
   font-family: PlayfairBold;
	text-align: left;
	color: #ffffff;
}

.deliveryterms {
	text-decoration: none;
	font-family: Raleway, serif;
	font-size: max(1.0vw, 10px);
	line-height: 1.7;
}


@media screen and (max-device-width: 480px) and (orientation: portrait) {
.deliveryterms {
	text-decoration: none;
	font-family: Raleway, serif;
	font-size: max(1.2vw, 12px);
	line-height: 1.7;
}
}


.deliverytermsheader {
	text-decoration: none;
	font-family: PlayfairBold;
	font-size: max(1.5vw, 15px);
	text-align: center;
}

@media screen and (max-device-width: 480px) and (orientation: portrait) {
.deliverytermsheader {
	text-decoration: none;
	font-family: PlayfairBold;
	font-size: max(1.2vw, 12px);
}
}