/* RANGES
0 - 767 - Mobile (DEFAULT)
768 - 992 - Tablet
993 - 1199 - Standard desktop
1200+ - Large screen desktops
*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* BRAND COLORS */
:root {
	--ohng-red: 				#eb2327;	
	--ohng-blue: 				#202656;	
	--ohng-gold: 				#FDCF57;	
/* secondary colors */
	--ohng-dark-red: 			#8b0000;	
	--ohng-dark-gray: 			#7F7F7F;	
	--ohng-light-gray: 			#D9D9D9;	
	
	--ohng-light-blue: 			#b5e3f0;	
	--ohng-purple: 				#850e84;	
	--ohng-teal: 				#039898;	
}

html 						{	box-sizing: 		border-box }
/**,*:before,*:after 		{	box-sizing: 		inherit 	}*/

/* TYPE STYLES */ 
/* establish firm base size on body tag (default if it's not marked up at all) - set as what you want your p tag to be minus padding/weight/ital etc... stick with web-safe fonts */

body 						{	font-family: 		Arial, "Helvetica Neue", Helvetica, Arial, sans-serif;
								font-size: 			150%;
								font-style: 		normal;
								overflow-x: 		hidden;
							}
h1 							{	font-weight: 		bold;
								font-stretch: 		condensed;
							}
h2 							{	font-weight: 		bold;
								font-stretch: 		condensed;
							}
h3 							{	font-size: 			188%;
								font-weight: 		bold;
								font-stretch: 		condensed;
							}
h4 							{	font-size: 			125%;
								font-weight: 		bold;
								font-stretch: 		condensed;
							}
h5 							{	font-size: 			100%;
								line-height: 		100%;
								font-weight: 		bold;
								font-stretch: 		condensed;
    							letter-spacing: 	-20%;
							}
p 							{	font-size: 			100%;
								line-height: 		175%;
							}
.dark-mode					{ 	font-color: 		white;}

/*  SUBHEAD  */
h2.subhead					{	margin-top: 	0;
							}
/*  INTRO PARAGRAPHS  */
p.intro						{	font-size: 			125%;
								line-height: 		150%;
							}
/* READ MORE  */
p.readmore					{	font-size: 			50%;
								font-stretch: 		ultra-condensed;
								font-weight: 		bold;
								text-transform: 	uppercase;
							}
/* CUTLINES */
p.cutline					{	font-size: 			80%;
								line-height: 		125%;
								font-stretch: 		condensed;
								padding-top: 		5px;
							}
/* CREDITS */
p.credit					{	font-size: 			80%;
								line-height:  		100%;
								font-stretch: 		condensed;
								font-style: 		italic;
								padding-top: 		5px;
							}
/* LINE HEIGHTS */
.lh125						{	line-height: 		125%;
							}
.lh200						{	line-height: 		200%;
								padding-bottom: 	10px;
							}
/*  LISTS */
ul 							{	list-style-type: 	disc;
								margin-left: 		-20px;
								padding-bottom: 	10px;
							}
ol							{	margin-left: 		5px;
								padding-bottom: 	10px;
								list-style-type: 	decimal;
							}
li							{	padding-bottom: 	5px;
							}
ul.cutline 					{	font-size: 			80%;
								line-height: 		125%;
								text-align: 		left;       
								padding-left: 		15px;
								margin-bottom: 		5px;
								list-style-type: 	disc;    
							}
ol.cutline 					{	padding-left: 		15px;
								font-size: 			80%;
								line-height: 		125%;
								font-weight: 		normal;
								margin-bottom: 		5px;
								text-align: 		left;   
							}
/* LINKS	on unspecified backgrounds  */
			a:link 			{	color: 				var(--ohng-blue);
								text-decoration: 	underline;
							}

			a:visited 		{   color: 				var(--ohng-dark-gray)}
			a:hover 		{	color: 				var(--ohng-red)}
			a:active 		{	color: 				var(--ohng-red)}
/* LINKS    on other dark  backgrounds */
.dark-mode 	a:link 			{	color: 	white;					
								text-decoration: 	underline;}
.dark-mode 	a:visited 		{   color: 				var(--ohng-light-gray)}
.dark-mode 	a:hover 		{	color: 				var(--ohng-gold);		
								text-decoration: 	underline;}
.dark-mode 	a:active 		{	color: 				var(--ohng-gold)}

/* WRAP intended to try to get text to wrap inside of div ie: member showcase scrolls  MAY OR MAYNOT work check and delete if it doesnt  5/25 */
.wrapper-left				{	float: 				left;}
.wrapper-right				{	float: 				right;}
.wrap						{	text-align: 		left;
								width: 				100%;
								white-space: 		normal;
							}

/* RESPONSIVE CLASSES  */ 
/* images */
.container .img-responsive	{	display: 			block;
								width: 				100%;
								max-height: 		auto;
							}
/* iframes */
.iframe-container 			{	position: 			relative;
    							overflow: 			hidden;
								padding-top: 		56.25%;
							}
.iframe-container iframe 	{	position: 			absolute;
    							top: 				0;
								left: 				0;
								width: 				100%;
								height: 			100%;
								border: 			0;
							}
/* video */
.video-responsive 			{	overflow: 			hidden;	
								padding-bottom: 	56.25%;	
								position: 			relative;	
								height: 			0;
							}
.video-responsive iframe 	{	height: 			100%;		
								width: 				100%;				
								position: 			absolute;
							}
/* POSITIONING & RESIZINING */ 
.left 						{	float: left;		padding: 0 20px 20px 0;						}
.right 						{	float: right;		padding: 0 0 20px 20px;						}
.center 					{	width:100%; 		margin-left:auto;		margin-right:auto;	}
.resize75 					{	max-width:75%;		max-height:75%;			}
.resize50 					{	max-width:50%; 		max-height:50%;			}
.resize25 					{	max-width:25%; 		max-height:25%;			}

/* SOCIAL MEDIA LINKS - sets height to 25 pixels for consitency  */
.sm-links					{	height:25px;		}


/* BUTTONS */
a.button 					{
    							-webkit-appearance: button;
    							-moz-appearance: 	button;
    							appearance: 		button;
    							text-decoration: 	none;
								font-color: 		white;
							}
/* BUTTON COLOR OVERRIDES */
.btn-ongred					{   background-color: 	var(--ohng-red)}
.btn-ongdarkred				{   background-color: 	var(--ohng-dark-red)}
.btn-ongblue				{   background-color: 	var(--ohng-blue)}
.btn-onggold				{   background-color: 	var(--ohng-gold)}
.btn-onggray				{   background-color: var(--ohng-dark-gray)}

/* MOBILE (default) */
#ohng-links 				{	display:none;} 		/* MEGA MENU: Turns off display on mobile */
#header-row 				{	display:none;} 		/* OHIO.gov SEARCHBAR on top gray bar: Turns off display on amobile  */
.col-xs-2 					{	width:50%; 			margin-right:0px !Important;} 	/* Horizontal Scroll cards: 2 across */
.col-xs-1 					{ 	width:33.3%; 		margin-right:0px !Important;} 	/* Horizontal Scroll cards: 3 across */

/* TABLET */
@media (min-width:768px) 	{
#ohng-links 				{	display:none;} 		/* MEGA MENU: Turns off display on tablets */
#header-row 				{	display:none;} 		/* OHIO.gov SEARCHBAR on top gray bar: Turns off display on tablets */
.col-xs-2 					{	width:25%} 			/* Horizontal Scroll cards: 4 across */
.col-xs-1 					{	width:16.6667%} 	/* Horizontal Scroll cards: 6 across */
}

/* DESKTOP */
@media (min-width:993px) 	{
#ohng-links 				{	display:block;} 	/*MEGA MENU: IS DISPLAYED on desktop devices */
#header-row 				{	display:block;} 	/* SEARCHBAR on top gray bar: Turns ON display on desktop */
#menu-container 			{	display:none;} 		/* HAMBURGER MENU: Turns off display on desktop devices */
#header-row-mobile 			{	display:none;} 		/* OHIO.gov link: Turns OFF double display on desktop */
.col-xs-2 					{	width:16.6667%} 	/* Horizontal Scroll cards: 6 across  */	
.col-xs-1 					{	width:8.333%} 		/* Horizontal Scroll cards: 12 across */
}
/* Controls the width of mega menu drop box on large screens */
@media (min-width:1400px){ 	.dropdown-content{max-width: 1100px;margin-left: 14%;}}
@media (min-width:1600px){ 	.dropdown-content{max-width: 1120px;margin-left: 17%;}}
@media (min-width:1800px){ 	.dropdown-content{max-width: 1060px;margin-left: 23%;}}
@media (min-width:2000px){ 	.dropdown-content{max-width: 1140px;margin-left: 25%;}}
@media (min-width:2200px){ 	.dropdown-content{max-width: 1000px;margin-left: 30%;}}

/* DETAILS / SUMMARY */
details {
  border: none;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid black;
  margin-bottom: 0.5em;
}
/* EVEN OUT COLUMNS */
.row.equal-height 			{	display: 			flex;
  								flex-wrap: 			wrap; /* Allows columns to wrap to the next line if needed */
}
.row.equal-height > 
	[class*='col-'] 		{  	display: 			flex; /* Makes the column itself a flex container */
  								flex-direction: 	column; /* Stacks content within the column */
}

/* STYLE POPUP tootlips */

.popup {
  position: relative; /* Essential for positioning the tooltip text */
  display: inline-block; /* Allows the element to take only the necessary width */
  cursor: help; /* Provides a visual cue that the element has a tooltip */
}

.popup .popuptext {
  visibility: hidden; /* Hides the tooltip text by default */
  width: 120px; /* Adjust as needed */
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Positioning */
  position: absolute;
  z-index: 1; /* Ensures the tooltip appears on top */
  bottom: 125%; /* Positions the tooltip above the container */
  left: 50%;
  margin-left: -60px; /* Centers the tooltip horizontally (half of width) */

  /* Fade in animation */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Arrow styling (optional) */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%; /* Positions the arrow at the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent; /* Creates a downward-pointing arrow */
}

/* Show the tooltip on hover */
.popup:hover .popuptext {
  visibility: visible;
  opacity: 1;
}