/*
THEME COLORS
Blue is 103e90;
Teal is 3ebdb1;	
*/
.is-expanded-menu #header.transparent-header:not(.sticky-header) #header-wrap{
	background-color: #103f91 !important;
}
#header{
	
}
#header-wrap{
	background-color: #103e90 !important;
}
.blue-text, .color{
	color: #0000FF !important;
}
.tagline-container{
	
}
.tagline-text {
    position: absolute;
    /* Continue to use your desired positioning to place it in the upper right */
    top: 0;       
    right: 0;
}
.tagline-text p{
	margin-top: 15px;
	margin-bottom: 0;
	font-size: 28px;
	/*color: #4abdb6;*/
	color: #3ebdb1;
	
	/*font-family: "Seaweed Script", cursive;*/
	font-family: "Platypi", serif;
  font-weight: 200;
  font-style: italic;
}

/* Target the element containing the menu links */
.primary-menu {
    position: absolute;
    right: 0;       /* Pins it to the right edge of the container */
    top: -10;      /* **Adjust this value.** This moves the menu down from the top edge. 
                       A value like 20px should be enough to place it below the tagline text. */
    z-index: 90;    /* Keep it slightly below the tagline if needed, but still above content */
    margin: 0;
    padding: 0;
}
/* If the menu is a <ul>, target the list items to stack them vertically */
.primary-menu ul li {
    display: block;
}
.heading-block.center > span, .heading-block.text-center > span, .center .heading-block > span, .text-center .heading-block > span{
	max-width: 100% !important;
}
.oswald-font {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
.seaweed-script-regular {
  font-family: "Seaweed Script", cursive;
  font-weight: 400;
  font-style: normal;
}
#footer .footer-widgets-wrap {
  padding: 40px 0;
}
.bg-white{
	background-color: #FFF;
}
h1{
	margin-bottom: 15px;
}
h2{
	margin-top: 30px;
	margin-bottom: 15px;
}
h3, h4{
	margin-top: 20px;
	margin-bottom: 15px;
}
h5, h6{
	margin-bottom: 15px;
}

.main-content p {
  margin-bottom: 20px;
}
.main-content ol, .main-content ul{
	margin: 5px 10px 20px 30px;
} 
.main-content a{
	color: #0000FF !important;
}
.main-content a:hover{
	color: #0b0b0b !important;
}
li.entry-meta1:before {
  content: none !important;
}
.nofill{
	display: none;
}
ul.no-bullet{
	list-style-type: none;
	margin: 5px 10px 20px 0px;
}

.embed-container { 
  position: relative; 
  padding-bottom: 56.25%; 
  height: 0; overflow: hidden; 
  max-width: 100%; 
} 

.embed-container iframe, 
.embed-container object, 
.embed-container embed { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; 
  height: 100%; 
}


.platypi-font {
  font-family: "Platypi", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.button, a.button{
	color: #FFF !important;
	background-color: #103e90;
}
.button:hover, a.button:hover{
	color: #FFF !important;
}
a.button-white:hover{
	background-color: #103e90 !important;
}
.menu-item:hover > .menu-link{
	color: #3ebdb1;
}

.modal {
  display: none; /* Initially hidden */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity (the overlay) */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 800px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Find a selector like this and remove 'overflow: hidden' */
.header-area, .site-navigation {
    /* You likely need to remove this line or change it */
    overflow: visible !important;
}

/* Or, if the hidden content is causing issues, specifically set the mobile menu to visible: */
.mobile-menu-list {
    overflow: visible;
    background-color: #103e90 !important;
}
/* When the menu is in the open state: */
.mobile-nav.active {
    /* Set the height to auto so it fully expands */
    height: auto;
    /* Or, use a very large max-height for a smooth transition */
    max-height: 1000px; /* Adjust this value as needed */
    transition: max-height 0.5s ease-in-out;
    
     
}
@media (max-width: 992px) {
  	.menu-item{
		background-color: #103e90 !important;
		padding-left: 7px;
		padding-right: 7px;
	}
	.menu-container {
		margin-top: 275px;
	    margin-right: 50px;
	}
	.primary-menu-trigger-active{
		z-index: 10000;
	}
}

.homepage-body-text{
	color: #495057 !important;
}