.block::before {
  background: url('images/bg_img.webp') no-repeat center center fixed;
  opacity: 0.5;
  background-size: contain;
  content: '';
  display: block;
  min-height:100%;
  height: auto;
  position: fixed;
  width: 100%;
}

.overlayDiv {
	position: fixed;
	width: 100%;
	height: 100%;
	background-size: contain;
}

.content{
	position: absolute;
	width: 80%;
	height: 100%;
	left:10%;
	margin:0;
	padding:0;
}

html, body {
	margin: 0px;
	padding: 0px;
}

html {
	background-color: rgba(234, 234, 234);
}

.header {
	position:relative;
	width:100%;
	height:23%;
	display: block;
	margin:auto auto 5% auto;
	padding:0;
}

.monogramDiv {
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:30%;
	height:100%;
	margin: 0 3vw 0;
	vertical-align:bottom;
}

.monogramImg {
	position:absolute;
	top:0;
	left: 0;
	bottom:0;
	right:0;
	width:auto;
	height:auto;
	max-width:80%;
	max-height:80%;
	margin: auto 0 1.5vh auto;
}

.navigationDiv {
	position:absolute;
	top:0;
	left:45%;
	bottom:0;
	right:0;
	width:auto;
	height:auto;
	margin: 0 3vw 0;
}

.navlist{
	position: absolute;	
	top:70%;
	left:10%;
	bottom:0;
	right:0;
	height:auto;
	width:auto;
	padding:0;
	justify-content: center;
	font-size: 0;
}

.navButton {
	height: auto;
	width: auto;
	top:10%;
	left:0;
	bottom:0;
	right:0;
	padding-left: 0%;
	margin: 0 4% 0;
	display: inline-block
}

.navBar::marker {
	font-size:0;
}

.navlink {
	font-size: 2.5vh;
	font-family: Quicksand-bold;
	text-align:center;
	color: black;
	text-decoration: none;
}

.navlink:hover {
	text-decoration: underline solid black;
}

.navlinkAct {
	font-size: 2.5vh;
	font-family: Quicksand-bold;
	text-align:center;
	color: black;
	text-decoration: underline dotted black;
}

@font-face {
	font-family: 'Quicksand';
	src: url('fonts/quicksand/Quicksand-Regular.otf');
}
@font-face {
	font-family: 'Quicksand-bold';
	src: url('fonts/quicksand/Quicksand-Bold.otf');
}
@font-face {
	font-family: 'Quicksand-light';
	src: url('fonts/quicksand/Quicksand-Light.otf');
}
@font-face {
	font-family: 'Quicksand-bolditalic';
	src: url('fonts/quicksand/Quicksand-BoldItalic.otf');
}


/* HomePage */


.body{
	position: relative;	
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:auto;
	margin: auto;
	padding:0;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: justify;
	font-size: 3vh;
	font-family: Quicksand;
	background-color: rgba(234, 234, 234,0.85);
	border-top: 0.3vh solid rgba(0,0,0,0.7);
	border-bottom: 0.3vh solid rgba(0,0,0,0.7);
}

.intro {
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	width:90%;
	height:auto;
	margin: auto auto auto auto;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align: justify;
	font-size: 3vh;
	font-family: Quicksand;
}

.intro::-webkit-scrollbar {
	display: none;
}

.listindent {
	padding-inline-start: 1vw;
}
.listindent::marker{
	font-size:1.6vh;
}

.footers {
	position:relative;
	width:100%;
	height:21%;
	top:0;
	bottom:0;
	display: block;
	margin:0;
	padding:0;
}

.footer_l {
	position:absolute;
	width:50%;
	height:auto;
	bottom:0;
	top:0;
	left:0;
	margin:auto auto auto;
	vertical-align:middle;
}

.footer_r {
	position:absolute;
	width:50%;
	height:auto;
	right:0;
	top:0;
	bottom:0;
	margin:auto auto auto;
	vertical-align:middle;
}

.footnote {
	position: absolute;
	width:100%;
	top:44%;
	bottom:auto;
	text-align: center;
	margin: auto;
	height: auto;
	vertical-align:middle;
	font-family: Quicksand;
	font-weight: 900;
	font-size: 2vh;
	overflow-wrap: break-word;
	word-break: break-word;
}


/* Certifications */


.certificate {
	position:relative;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:auto;
	margin:auto;
	padding-top:5%;
	padding-bottom:5%;
	vertical-align:bottom;
	border-top: 0.3vh solid rgba(0,0,0,0.7);
	border-bottom: 0.3vh solid rgba(0,0,0,0.7);
}

.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	height:auto;
}

/* Contact */

.contactBody {
	position:relative;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width: 100%;
	height:100%;
	padding:0;
	border-top: 0.3vh solid rgba(0,0,0,0.7);
	border-bottom: 0.3vh solid rgba(0,0,0,0.7);
}

.addressDiv {
	position:absolute;
	top:0;
	bottom:0;
	left:5%;
	margin:auto;
	width:40%;
	height:40%;
	background-color: rgba(234, 234, 234,0.85);
	overflow-wrap: break-word;
	word-break: break-word;
}

.addresshead{	
	font-family:Quicksand;
	font-size:4vh;
	text-align:center;
	text-decoration: underline solid black;
}

.address {
	overflow-wrap: break-word;
	word-break: break-word;
	font-weight: 500;
	font-size: 2vh;
	margin-left:7%;
	margin-right:7%;
	margin-bottom:0;
	text-align:justify;
}

.locationDiv{
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
	width: 40vw;
	height:40vw;
}

.icon_ph{
	position:relative;
	padding-left: 5%;
	padding-right:0;
	padding-bottom:0;
	width:1.5vh;
	height:auto;
}

.phoneno{
	height: auto;
	width: 70%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	padding-left: 0%;
	position:relative;
	bottom:0;
	display: inline-block
}

.icon_mail{
	position:relative;
	padding-left: 5%;
	padding-right:0;
	padding-bottom:0;
	width:2.5vh;
	height:auto;
}


/* Products */


.prodDiv {
	position:relative;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	width: 100%;
	height:auto;
	padding:0;
	border-top: 0.3vh solid rgba(0,0,0,0.7);
	border-bottom: 0.3vh solid rgba(0,0,0,0.7);
}

.prodList {
	position:relative;
	top:0;
	bottom:0;
	left:0;
	right:70%;
	margin:0;
	width:30%;
	height:auto;
	padding:0;
	background-color: rgba(234, 234, 234,0.85);
	border-right: 0.2vh solid rgba(0,0,0,0.45) ;
	z-index:1
}

.prodCategory {
	font-family:Quicksand-bold;
	overflow-wrap: break-word;
	word-break: break-word;
	font-size:2vh;
	padding:10%;
	margin:0;
	font-weight: 500;
}

.categoryName{
	margin-bottom:1%;
}

.categoryName::marker{
	font-size:0;

}

.categoryList {
	margin-left:1vw;
}

.prodName {
	font-family:Quicksand;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align:justify;
	padding-inline-start: 0.5vw;
	font-size: 1.8vh;
	list-style:none;
}

.prodName::before {
	content:'';
	display:inline-block;
	height:10px;
	width:10px;
	background-image:url('images/list_icon.webp');
	opacity:0.7;
	background-size:contain;
}

.prodName:hover::before {
	opacity:1;
}

.prodNameActive{
	font-family:Quicksand;
	overflow-wrap: break-word;
	word-break: break-word;
	text-align:justify;
	padding-inline-start: 0.5vw;
	font-size: 2vh;
	list-style:none;
}

.prodNameActive::before{
	content:'';
	display:inline-block;
	height:12px;
	width:12px;
	background-image:url('images/list_icon.webp');
	opacity:1;
	background-size:contain;
}

.prodName::marker {
	font-size:0.8vw;
}

.prodNameLink {
	color: black;
	color:rgba(0,0,0,0.7);
	text-decoration:none;
}

.active {
	color:black !important;
	text-decoration: underline 2px dotted black !important;
	font-weight: 700;
}

.prodNameLink:hover {
	color:black;
	font-weight: 700;
	font-size: 2vh;
}

.prodProfile{
	position:absolute;
	top:0;
	bottom:0;
	left:30%;
	right:0;
	margin:auto;
	width:70%;
	height:100%;
	padding:0;
	border: none;
	background-color: rgba(234, 234, 234,0.85);
}