/*
Theme Name: EST
Author: Jay Johnson
Description: ExamMed 2.0Test Homepage Theme Hexagons Connect Everything in Healthcare
Version: 1.0

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
body {background-color: #ffffff !important; width: 100%; overflow-x: hidden;}
header {
	width: 100%!important;
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	background: none;
}

h1, h2, h3{
  font-family: "Rokkitt", serif;
  font-size: 4.5vw;
  font-weight: 700;
  font-style: normal;
  color: #ffffff;
	clear: both;
}

h2, h3 {
  font-size: 3vw;
  font-weight: 600;
  color: #7e7f73;
	line-height: 0.9;
}

h3 {
	font-size: 2vw;
		color: #36469c;
	line-height: 1.2;
}

p, ol, ul, li {
	font-family: arial, sans-serif;
	font-size: 1.3vw;
	line-height: 1.5;
	font-style: normal;
	color: #666666;
	clear: both;
}

ol, ul, li {font-weight: 900; color: #3f96b4; list-style-type: none;}

li::before {
	content: "\2B22";
	padding-right: 0.6vw;
	margin-top: -1%;}

a {
	font-weight: normal;
	color: #333333;
	text-decoration: none;
}
a:hover, a:active {
	color: #3f96b4;
	font-weight: bold;
}
.hexagon #content {padding: 15%; text-align: center;}
#content2, #content3, #content4, #content5, #content6 {display: none;}

footer {display: none!important;}

.centertext {text-align: center;}
.segmentcontainer {width: 100%; float: left; position: relative; z-index: 1;}
.goalscontainer {
	width: 100%; 
	float: left;
	position: relative;
	background-image: url("http://em.jaybirdslim.com/wp-content/uploads/2026/01/healthcare-achievements.webp");
	background-size: 100% 92%;
	background-repeat: no-repeat;
	margin-top: -4%;
	padding-top: 4%;
	z-index: 0;}
.welcome-background {
	background-image: url("http://em.jaybirdslim.com/wp-content/uploads/2025/07/Welcome-to-ExamMed-main-picture.jpg");
	background-size: 122.8%;
	background-repeat: no-repeat;
}
.large-title {
	width: 100%;
	position: absolute;
	z-index: 99;
	text-align: center;
	padding-top: 22%;
}
.centercontent {width: 90%; margin: 0 auto;}

.overlayA {width: 97%; display: flex; position: relative; transform: translateY(-40%);z-index: 50; justify-content: center;}
.overlayB {width: 40%; position: absolute; margin-top: 15%; margin-left: 5%; z-index: 100;}
.overlayC {width: 30%; position: absolute; margin-top: 25%; margin-left: 10%; z-index: 100;} 

.centeringdiv {width: 100%; margin: 0 auto; float: left;}
.contentdivA, .contentdivB {float: left; width: 50%; margin-left: 5%;}
.contentdivB {width: 50%; margin-left: -10%; margin-top: 0;}
.layercontainer, .layercontainerA, .layercontainerC, .layercontainerB{
	width: 100%;
	clear: both;
	float: left;
	margin-left: 52%;
}

.layercontainerA {margin-top:-8%; margin-left: -0.6%; margin-bottom: -30%;}
.layercontainerB {margin-left: 0; overflow: hidden;}
.layercontainerC {margin-top:0; margin-left: -10%;}

.hexcontainer, .hexcontainerB, .hexcontainerC, .hexcontainerD {
	position: relative;
	float: left;
	display: flex;
	left: -12%;
	margin-top: -9.12%;
	clear: both;
}
.hexcontainerB {
	left: -29.5%;
}
.hexcontainerC, .hexcontainerD {
	margin-top: -3.9%;
}
.hexcontainerD {
	left: -4.5%;
}

.bottomhexcontainer {margin-bottom: -30%;}

.containerwidthA {
	width: 140%;}
.containerwidthB {
	width: 60%;}

.hexagonsize, .hexagonsizeB{
    /* Set the desired relative width here */
    width: 45%; 
    /* The height will be proportional due to padding-bottom */
    padding-bottom: 26%; /* approx. (sqrt(3)/2 * width) * 100% for aspect ratio */
    position: relative;
	flex-grow: 1;
    margin: 0 auto; /* Center the hexagon */
}
.hexagonsizeB{}
.hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem; /* Relative font size */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hexwhite {background-color: #ffffff;}
.hexblue {background-color: #3399cc;}
.hexred {background-color: #ec1e24;}
.hexorange {background-color: #f5841f;}
.hexgreen {background-color: #67bc45;}

.hometopimage {background-image: url("/wp-content/uploads/2026/01/Welcome-to-ExamMed-main-picture.jpg");  background-size: 110.75%; background-position: 0 0; background-repeat: no-repeat;}

.opacityA {opacity: 0.8;}
.opacityB {opacity: 0.7;}
.opacityC {opacity: 0.6;}
.opacityD {opacity: 0.5;}
.opacityE {opacity: 0.4;}
.opacityF {opacity: 0.3;}
.opacityG {opacity: 0.2;}
.opacityH {opacity: 0.1;}
.opacityI {opacity: 0.05;}

.whiteopacityA {background-color: rgba(255, 255,255, 0.8); }
.whiteopacityB {background-color: rgba(255, 255,255, 0.7); }
.whiteopacityC {background-color: rgba(255, 255,255, 0.6); }
.whiteopacityD {background-color: rgba(255, 255,255, 0.5); }
.whiteopacityE {background-color: rgba(255, 255,255, 0.4); }
.whiteopacityF {background-color: rgba(255, 255,255, 0.3); }
.whiteopacityG {background-color: rgba(255, 255,255, 0.2); }
.whiteopacityH {background-color: rgba(255, 255,255, 0.1); }
.whiteopacityI {background-color: rgba(255, 255,255, 0.05);}

.whiteopacityA:hover, .whiteopacityB:hover, .whiteopacityC:hover,.whiteopacityD:hover, .whiteopacityE:hover, .whiteopacityF:hover, .whiteopacityG:hover, .whiteopacityH:hover, .whiteopacityI:hover {background-color: rgba(255, 255,255, 1);}
.icon-image {opacity: 1 !important; position: absolute; margin: auto auto; z-index: 99; widht: 35%; height: 35%;}

.heximage {margin: 0; padding: 0;}