@font-face	{
	font-family: vagRegular;
	src: url("../Fonts/vag_rounded_regular/vag_rounded_regular.ttf");
}

@font-face	{
	font-family: interTight;
  font-weight: 300;
	src: url("../Fonts/InterTight-VariableFont_wght.ttf");
}

*   {margin: 0; padding: 0;
    /*font-family: vagRegular;*/
    font-family: interTight;
    box-sizing: border-box;}

html{overflow-x: hidden;}	
body{position: relative; overflow-x: hidden;}

/*------------------------------------------------------------------------*/
#sectionContainer	{
	display: grid;
	grid-template-columns: 100vw 100vw 100vw 100vw;
	width: 100%;
	height: 100%;
	position: relative;
	transition-duration: 1s;
}
.section	{
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100vh;
	position: relative;
	overflow-y: auto;
	transition-duration: 1s;
	transform-origin: center;
	overflow-x: hidden;
}	

/*-----------------------------------------------------------------------*/

#header {
    display: block;
    width: 100%;
    height: 10vh;
    /*background-color: #3865a6;*/
    background-color: white;
	position: static;
	
	color: black;
}
/* #header::after  { */
/*   content: ""; */
/*   display: block; */
/*   width: 100vw; */
/*   height: 10px; */
/*   background-color: cyan; */
/*   position: relative; */
/*   z-index: 99; */
/*   transform: translateY(-20px); */
/* } */
#header p	{
	font-family: vagRegular;
	display: block;
	width: fit-content;
	margin: 0 2vw 10px 2vw;
  padding-left: 2vw;
	font-size: 2vw;
}
#header td {
  vertical-align: middle;
  height: 10vh;
}
#header img	{
	position: relative;
	top: 5px;
	height: 7vh;
  left: 2vw;
}
#header tr	{
	width: 100%;
}	

#header2	{
  position: absolute;
  right: 3vw;
  top: 0vh;
  height: 10vh;
}
#header2 a	{
	display: block;
	height: 70%;
	line-height: 7vh;
	text-align: center;
	cursor: pointer;
	transition-duration: 0.2s;
	border-radius: 5px;
	font-size: 2vw;
	text-decoration: none;
	color: black;

  padding: 0px 15px;
}
#header2 a:hover	{
	background-color: #00DD9A;
	color: white;
	border-radius: 15px;
}
#header2 a:active	{
	background-color: #a63865;
	transition-duration: 0.05s;
	color: black;
}
	

/*------------------------------------------------------------------------*/
#section1	{
	grid-column: 1 / 2;
}
#landing    {
    display: block;
    width: 100vw;

    background-image: url("../Images/shopfrontv4.jpg");
    background-size: cover;
    background-position: right;
    position: relative;
	box-shadow: 0 0 50px black inset;
}

.landingImg	{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: white;
	transition-duration: 2s;
	opacity: 0;
	background-size: cover;
	background-position: right;
	box-shadow: 0 0 10px purple inset;
}
#LI1	{opacity: 1; background-image: url('../Images/shopfrontv4.jpg');}
#LI2	{background-image: url('../Images/help.jpg');}
#LI3	{background-image: url('../Images/counter.jpg');}

#landing2	{
	display: flex;
	align-items: center;
	width: 100%;	
	height: 100%;
	min-height: 70vh;
	background: linear-gradient(to right, #3865a6, transparent, transparent);
	padding: 30px;
}
#landing2 h2  {
  font-family: vagRegular;
  font-weight: normal;
  font-style: italic;
}

#blurb  {
    font-size: 30px;
	width: 50%;
	
	background-color: #00FFFFDD;
	border-radius: 5px;
	padding: 30px;

	position: relative;
	margin-left: 5vw;
}


/*-----------------------------------------------*/


.ourServices  {

  display: flex;
  align-items: center;
  justify-content: center;
  width: 95vw;
  margin: auto;
  
}
#ourServicesHeader  {
  padding: 50px 0px 25px 0px;
  text-decoration: underline;
  font-size: 4vh;
  text-align: center;
}

.serviceBox {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 25vh;
  aspect-ratio: 1 / 1;
  text-align: center;

}

.serviceBox p {
  font-size: 1.25vw; 
}

.serviceIcon  {
  display: block; 
  height: 70%;
  aspect-ratio: 1 / 1;
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  border: 5px solid #00FFFF88;
  border-radius: 100%;
}

#si_friend  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00049_.png');}
#si_ndss  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00082_.png');}
#si_escript  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00091_.png');}
#si_mscript  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00089_.png');}
#si_wound  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00144_.png');}
#si_flu  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00169_.png');}
#si_remind  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00201_.png');}
#si_blood  {background-image: url('../Images/service_icons/ComfyUI_temp_qmbld_00194_.png');}





/*-----------------------------------------------*/

.contentCard    {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 95%;
    margin: auto;
	margin-bottom: 50px;
}
#detailsContainer {
  padding-top: 20px;
}
.details    {
    display: block;
    height: min-content;
    width: auto;
    padding: 30px;
    font-size: 20px;
    background-color: #EEEEEE;
    border-radius: 10px;
  margin: 10px;
}
.mailto {color: white;}
.details ul{
	margin-left: 30px;
	list-style-position: inside;
}
.details li	{
	margin-bottom: 10px;
}
#serviceList	{
	list-style: none;
}
#serviceList li	{
	margin-bottom: 15px;
	text-indent: -3vw;
	padding-left: 3vw;
}
#serviceList li:before	{
	content: '\2611';
	margin-right: 15px;
}


#map    {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    height: 50%;
    width: 100%;
}
#live   {
    display: block;
    grid-column: 2;
    height: 500px;
    width: 500px;
    margin: 25px;
}
#liveFB	{height: 100%; width: 100%;}

#openTimes	{border-spacing: 20px 10px; margin-left: 15px;}
#openTimes * {text-decoration-color: #3865a6 !important;}

/*-----------------------------------------------*/
#footer {
    display: block;
    width: 100%;
    height: 10vh;
    background-color: #3865a6;
	position: relative;
    bottom: 0;
    color: white;
    font-size: 2vw;
}

#footer td	{
	text-align: center;
	line-height: 9.5vh;
}

#footer a	{	color: white;	}
#footer a::before	{display: inline-block; height: 4vh; width: 4vh; content: " "; transform: translateY(25%); background-image: url('../Images/mryeedesigns.ico'); background-size: contain;}