/*
=========================================================================================================
Riology Custom CSS Document 
=========================================================================================================
Red: #D71E28;
Yellow: #FFCD41;
Green: #51AB30;
DK Green: #4A9A2B;
DK Green: #408625;

*/

body {
  margin: 0;
  padding: 0;
  color: #303030;
  background-color: #F6F9FB;
}
.page-title {
    margin: 1em 0 .5em 0;
    color:#000000;
}
.page-sub-title {
    margin: 0 0 1.5em 0;
    color:#000000;
}
h1, h2 {color: #000; }
p {
    font-size:1.25em;
    color: #444444;
}
.bg-color {
    background-color: #FFF;   
}
/* ===================================  1. Nav Link Color ======================================= */
.menu a {
    color: #FFF;
    background-color: #51AB30;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
}
/* =================================== a. Nav Hover Color ======================================= */
.menu a:hover {
    background-color: #FFCD41; 
    color: #408625;
}
/* =================================== Dropdown Menu background color ======================================= */
.menu .is-active {
    background-color: #51AB30;  
}
.top-bar {z-index: 1;}
ul.menu li.menu-text {
    font-size: 2em;
    color: #FFFEF2;
}

.title-bar {
    padding: 0.5rem;
    background-color: #FFCD41;
    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 {
	background-color: #51AB30; 
	border-bottom: solid 4px #FFCD41;
}
#stretch-top h4 {color: #FFF;}
.phone {
    color: white; 
    font-size: 1.5em;
    font-weight: bold;
}
#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;
}

/* =================================== Foundation 6 Card Styles ======================================= */
.card {
    color: #51AB30;
    background-color: white;
    border-radius: 15px;
    border-color: #E4EDF3;
}
.card-divider {
    text-align: center; 
    background-color: #51AB30;
    color: #FFF;   
}
.card h4, .card h2 {   
    width: 100%
}

.card-section {background-color: #E4EDF3;}
.card-section a {margin: 0 auto;}

.hm-card {color: white; width: 100%}

div.article-card {
    border-color: #51AB30; 
    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: #004767;  
    padding: 2px 2px 2px 2px;
}

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

footer a {
  color: #FFFFEE;
}
footer a:hover {
  color: #51AB30;
}
 footer p, .footer h3 {
  color: #51AB30;
}

figure {
  margin: 0;
}
/* ========================================= background-row styles ========================================== */
#bg-image {height: 30em;}
#background-bar {
    background-color: #E4EDF3;
    padding-top: 2em;
    padding-bottom: 3em;
}
#background-bar .card-section {
    background-color: #fff;
}
#background-row {
    height: 25em;
    background-color: #E4EDF3;
    background: url(/media/x35pxxda/background-row-bg.jpg) top center no-repeat;
}
#background-row h1, #background-row h2, #background-row h3 {
  color: #51AB30;
}
#background-row p {
  color: #51AB30;
}
.overlay {
    background-color: #51AB30;
    background-color: rgba(81,171,48,0.7);
    height: 100%;
    padding: 2em;
}

address, address a {
    font-size: .8em; 
    color: #FFCD41;
}
.button2 {
    border-radius: 12px;
    padding: .5em;
    background-color: #FFCD41;
    color:#408625;
    font-weight: bold;
}
.button2:hover {
    background-color: #408625;
    color: #fff;
    font-weight: bold;
}
.button {
    border-radius: 12px;
    background-color: #FFCD41;
    color:#408625;
    font-weight: bold;
}
.button:hover {
    background-color: #408625;
    color: #fff;
    font-weight: bold;
}


.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: #51AB30;
}
.accordion-title:hover {
    background-color: #FFCD41;
    color: white;
}
.accordion-title:focus {
    background-color: #000;
    color: white;
}
.accordion-title p {
    color: white;
}

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

/* ========================================= Orbit styles ========================================== */
.orbit-caption {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 0;
  padding: 1rem 1rem 1rem 2.5rem;
  font-size: 3em;
  font-weight: bold;
  background-color: rgba(81,171,48,0.7);
  color: #fefefe;
}

/* ========================================= xy grid styles ========================================== */
.grid-vtop { margin-top: 6.25em;}
.grid-vbottom {margin-bottom: 6.25em;}
.grid-tspace {margin-top: 3em;}
.grid-bspace {margin-bottom: 3em;}
.grid-tpadd {padding-top: 3em;}
.grid-bpadd {padding-bottom: 3em;}

.white-space {height: 5em; background-color: white;}

.far a:visited {color: white;}

.reveal {
        background-color: white;
        border-width: 6px;
        border-color: #FFCD41;
    }

/* 
=========================================================================================================
								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;
	}
    #stretch-top {height: 6em;}
    #stretch-top .grid-x {
        height: 6em;
        padding-left: .5em;
        padding-right: .5em;
    }
    #mobile {background-color: #FFCD41;}
    #top-logo {
        height: 80px;
    }
}

/* ======================================================================================================
	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;
	}
    #stretch-top {height: 6em;}
    #stretch-top .grid-x {
        height: 6em;
        padding-left: .5em;
        padding-right: .5em;
    }
    #mobile {background-color: #FFCD41;}
    #top-logo {
        height: 100px;
    }
    
}



/* 
=========================================================================================================
	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) {
    #homePopup {padding: 2em 4em;}
    .stretch-top .grid-x {height: 8em;}
    #top-logo {
        height: 100px;
    }
}
/* 
=========================================================================================================
	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) {
    #homePopup {padding: 3em 5em;}
    .stretch-top .grid-x {height: 4em;}
    #top-logo {
        height: 100px;
    }
    #stretch-top {height: 4em;}
    #stretch-top .grid-x {
        height: 4em;
        padding-left: 2em;
        padding-right: 2em;
    }
    
    
}
 
/* 
=========================================================================================================
	X-Large Screens and Up // min-width 1441px, xlarge screens 
=========================================================================================================
*/
@media only screen and (min-width: 90.063em) { 
    #homePopup {padding: 5em 8em;} 
    .stretch-top .grid-x {height: 4em;}
    #top-logo {
        height: 100px;
    }
    #stretch-top {height: 4em;}
    #stretch-top .grid-x {
        height: 4em;
        padding-left: 2em;
        padding-right: 2em;
    }
    
    
} 

/* 
=========================================================================================================
	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) { 

}