/*
=========================================================================================================
Riology Custom CSS Document 
=========================================================================================================
*/
/* 
====================== Website Colors =============================== 
Aqua = #01B4BD;
Dk. Blue = #2E3F53;

*/


body {
  margin: 0;
  padding: 0;
  color: #303030;
  background-color: #F6F9FB;
}
.page-title {
    margin: 1em 0 .5em 0;
    color: #01B4BD;
}
.page-sub-title {
    margin: 0 0 1.5em 0;
    color: #01B4BD;
}
h1, h2 {color:  #01B4BD; }
h3, h4 {color: #2E3F53;}
p {
    font-size:1.25em;
    color: #444444;
}
.sections p {
	font-size: 1.5em
}
.sections ul {font-size: 1.25em;}

/* ===================================  1. Nav Link Color ======================================= */
.menu a {
    color: #2E3F53;
    background-color: #FFF;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
    font-weight: bold;
}
/* =================================== a. Nav Hover Color ======================================= */
.menu a:hover {
    background-color: #01B4BD; 
    color: #FFF;
}
/* =================================== Dropdown Menu background color ======================================= */
.menu .is-active {
    background-color:  #2E3F53;  
}
.top-bar {z-index: 1;}
ul.menu li.menu-text {
    font-size: 2em;
    color: #FFFEF2;
}
.title-bar {
    padding: 0.5rem;
    background-color:  #2E3F53;
    color: #fefefe;
    align-items: center;
}
/* =================================== Dropdown Arrow Color & Active State Colors ======================================= */
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after {
    border-color: #FFFFEE transparent transparent;
}
.dropdown.menu > li.is-active > a {
  background-color: #915B49;
  color: #ffffee; 
}
/* =================================== Drilldown before and after Arrow Color & Active State Colors ======================================= */
.drilldown .is-drilldown-submenu-parent > a::after {
    border-color: transparent transparent transparent #ffffee;
}
.drilldown .js-drilldown-back > a::before {
    border-color: transparent #ffffee transparent transparent;
}

/* =================================== b. Top Trim Color ======================================= */
#stretch-top {
  	height: 60px;
	background-color: #2E3F53; 
	border-bottom: solid 1px #006B99;
}
#stretch-top h2 {
    color: #FFF;
    text-align: center;
}
#stretch-nav, ul.menu {
    background-color: #FFF; /* =================================== 2. Header Color ======================================= */
    /* =================================================  padding: 2em 0;  ================================================== */
}
.top-bar {
    background-color: #FFF; /* =================================== 3. Nav Bar Color ======================================= */
}
#stretch-header {
  background-color: #fffef2;
}

#stretch-row {
  background-color: #6eb252;
}
/* =================================== Web Page Background Color ======================================= */

div#main {
  background-color: #E4EDF3;  
  padding-top: 3em;
  padding-bottom: 3em;
}
element {
}
/* ======================================= Orbit Caption Styles ======================================== */
.orbit-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
    padding: 1rem 1rem 1rem 3rem;
    background-color: #01B4BD;
    background-color: rgba(1,180,189, 0.7);
    font-size: 2.5em;
    font-weight: bold;
    color: #fff;
}
.trim-top {
    height: 10px;
    background-color: #2E3F53;
}
.trim-bottom {
    height: 10px;
    background-color: #01B4BD;
}

/* =================================== Foundation 6 Card Styles ======================================= */
.card {
    color:  #11346C;
    background-color: white;
    border-radius: 0;
    border-color: #E8E8E8;
    height: 100%;
}

.price-side .card-divider {
    text-align: center; 
    background-color:  #2E3F53;
    color: #FFF;       
}
.price-center .card-divider {
    text-align: center; 
    background-color:  #01B4BD;
    color: #FFF;   
}

.price-side h4, .price-side h2 {   
    width: 100%;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}
.price-center h4, .price-center h2 {   
    width: 100%;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
}
.price-side .card-section {background-color: #E4EDF3;}
.price-side .card-section a {margin: 0 auto;}
.price-center .card-section {background-color: #2E3F53;}

.price-side .card-section p {
    color: #2E3F53;
    font-size: 1.5em;
    font-weight: bold;
} 
.price-center .card-section p {
    color: #FFF;
    font-size: 1.5em;
    font-weight: bold;
} 
.price-center .card-section li {
    color: #FFF;
    font-size: 1.3em;
}
.price-side .card-section li {
    color: #2E3F53;
    font-size: 1.3em;
}
.price-center .card-section ul, .price-side .card-section ul {
    list-style-type: none;
}
.price-center .card-section a {margin: 0 auto;}

/* ========================================= Article Card Styles ======================================= */
div.article-card {
    border-color:  #11346C; 
    border-width: 1px;
}
.article-card {margin-bottom: 4em;}

.article-card .card-divider h2 {color: #F6F9FB;}
.article-card .card-section {background-color: #F5F5F5;}/* #E4EDF3; */

/* =========================================== table styles ============================================ */
table.pricing {
    width: 60%;
    margin: 1em auto 2em auto;
    border-collapse: collapse;
}
table.pricing td {
    background-color: white;
    font: bold;
    padding: 0;
}
tbody {border: 0;}
.separator {
    border-left: 1px solid #999;
}

table.pricing th {
    color: #03BFCB;
    padding: 0;
}
 
/* =================================== c. Image Wrap ======================================= */

.img-wrap {
    background-color:  #11346C;  
    padding: 2px 2px 2px 2px;
}

#stretch-footer {
    border-top: .4em solid #01B4BD; /* =================================== Footer Trim Color ======================================= */
    padding-top: 4em;
    padding-bottom: 4em;
    background-color: #2E3F53; /* =================================== Footer Background Color ======================================= */
    clear: both;
}
footer {color: #fff;}

footer a {
  color: #FFFFEE;
}
footer a:hover {
  color: #03BFCB;
}
 footer p, .footer h3 {
  color: #03BFCB;
}

figure {
  margin: 0;
}
/* =============================== Styles for Promobar Paralax Effect ================================== */
.bg-headings {
    background-color: white;
    padding-top: 4em;
    padding-bottom: 3em;
}
.bg-color{
    background-color: white;
}
.white-space {
    background-color: white;
    padding-top: 5em;
    padding-bottom: 5em; 
}
#promo-bg {
    color: transparent;
}

/* ========================================= background-row styles ========================================== */
#background-row {
    height: 35em;
}
#background-row h1, #background-row h2, #background-row h3 {
  color:  #FFF;
}
#background-row p {
  color:  #FFF;
}
.over-lay {
    background-color: #01B4BD;
    background-color: rgba(1,180,189, 0.7);
    height: 35em;
    padding: 2em;
}

/* =========================================== Misc styles ================================================= */
address, address a {
    font-size: .8em; 
    color: #03BFCB;
}
.button {
    border-radius: 12px;
    background-color:  #2E3F53;
    color:#FFF;
}
.button:hover {
    background-color: #01B4BD;
    color: #FFF;
}


.thumbnail {
    margin-bottom: 1rem;
    border: 2px solid #6EB252;
}

#Map {
    margin-top: 5em;
}

/* ========================================= FAQs styles ========================================== */

.accordion-title {
    padding: 1.25rem 1rem;
    border: 1px solid #e6e6e6;
    border-bottom-color: rgb(230, 230, 230);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: white;
    background-color:  #11346C;
}
.accordion-title:hover {
    background-color: #03BFCB;
    color: white;
}
.accordion-title:focus {
    background-color: #03BFCB;
    color: white;
}
.accordion-title p {
    color: white;
}

.fas {color: #03BFCB; font-size: 1em; margin-right: .5em; }
.fab {color: #03BFCB;}
.fab:hover {color: #FFF;}

/* ========================================= xy grid styles ========================================== */
.grid-vtop { margin-top: 6.25em;}
.grid-vbottom {margin-bottom: 6.25em;}

.far a:visited {color: white;}
/* 
=========================================================================================================
								Riology Framework default media queries 
=========================================================================================================

=========================================================================================================
	Small Screens and Up // Define mobile styles  
=========================================================================================================
*/
@media only screen { 
	
		
}

/* 
=========================================================================================================
	XX-Small Screens Contained // min-width 160px and max-width 320px, 
					   		   // mobile-only styles, use when QAing mobile issues 
========================================================================================================= 
*/
@media only screen and (min-width: 10em) and (max-width: 20em) {
	#copyright {
		text-align:center;
		padding-bottom:2em;
	}
	.designer {
		text-align:center;
		padding-top:2em;
	}
	.relatedThumb {
		text-align:center;
	}
}

/* ======================================================================================================
	Small & X-Small Screens Contained  // min-width 321px and max-width 640px, 
				   			   		   // mobile-only styles, use when QAing mobile issues 
=========================================================================================================
*/
@media only screen and (min-width: 20.063em) and (max-width: 40em) {
	#copyright {
		text-align:center;
		padding-bottom:2em;
	}
	.designer {
		text-align:center;
		padding-top:2em;
	} 
	.relatedThumb {
		text-align:center;
	}
} 


/* 
=========================================================================================================
	Medium Screens and Up // min-width 641px, medium screens 
=========================================================================================================
*/
@media only screen and (min-width: 40.063em) {
    
}	

/* 
=========================================================================================================
  	Medium Screens Contained // min-width 641px and max-width 1024px, 
							 // use when QAing tablet-only issues 
========================================================================================================= 
*/
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
    .reveal {padding: 2em 4em;}
}
/* 
=========================================================================================================
	Large Screens and Up // min-width 1025px, large screens 
=========================================================================================================
*/
@media only screen and (min-width: 64.063em) {

}
/* 
=========================================================================================================
	Large Screens Contained // min-width 1025px and max-width 1440px, 
							// use when QAing large screen-only issues 
=========================================================================================================
*/
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
    .reveal {padding: 3em 5em;}   
}
 
/* 
=========================================================================================================
	X-Large Screens and Up // min-width 1441px, xlarge screens 
=========================================================================================================
*/
@media only screen and (min-width: 90.063em) { 
    .reveal {padding: 5em 8em;}    
} 

/* 
=========================================================================================================
	X-Large Screens Contained // min-width 1441px and max-width 1920px, 
							  // use when QAing xlarge screen-only issues 
=========================================================================================================
*/
@media only screen and (min-width: 90.063em) and (max-width: 120em) { 

} 

/* 
=========================================================================================================
	 XX-Large Screens and Up // min-width 1921px, xxlarge screens 
=========================================================================================================
*/
@media only screen and (min-width: 120.063em) { 

}