/*
=========================================================================================================
 Riology Custom CSS Document 
=========================================================================================================

 Website Colors
====================
#518432; = Green
#8A52A1; = Purple
#AD81C0; = Lt Purple
#73B948; = Lt. Green
#E3F1DA; = BG Green
====================
*/

body {
  margin: 0;
  padding: 0;
  color: #303030;
  background-color: #FFF;
}
.page-title {
    margin: 1em 0 .5em 0;
    color:#004767;
}
.page-sub-title {
    margin: 0 0 1.5em 0;
    color:#004767;
}
h1, h2 {color: #8A52A1; }
p {
    font-size:1.25em;
    color: #444444;
}

/* ===================================  1. Nav Link Color ======================================= */
.menu a {
    color: #518432;
    background-color: #FFF;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
}
/* =================================== a. Nav Hover Color ======================================= */
.menu a:hover {
    background-color: #518432; 
    color: #FFF;
}

/* =================================== Dropdown Menu background color ======================================= */
.menu .is-active {
    background-color: #FFF;  
}
.top-bar {z-index: 1;}
ul.menu li.menu-text {
    font-size: 2em;
    color: #518432;
}
.title-bar {
    padding: 0.5rem;
    background-color: #FFF;
    color: #518432;
    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: #AD81C0;
  color: #fff; 
}
/* =================================== 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: 50px;
	background-color: #518432; 
	border-bottom: solid 1px #006B99;
}
#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;
}
/* =============================== 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;
}
/* =================================== Web Page Background Color ======================================= */

div#main {
  background-color: #E4EDF3;  
  padding-top: 3em;
  padding-bottom: 3em;
}
/* ========================================= Orbit Styles ============================================= */
.orbit-caption {
    width: 100%;
    margin-bottom: 0;
    padding: 1rem 1rem 1rem 3rem;
    background-color: #8A52A1;
    background-color: rgba(138,82,161,0.7);
    font-size: 2.5em;
    font-weight: bold;
    color: #fff;
}
/* =================================== Foundation 6 Card Styles ======================================= */
.card {
    color: #518432;
    background-color: #E3F1DA;
    border-radius: 0px;
    border-color: #E3F1DA;
    height: 100%;
}
.card-divider {
    text-align: center; 
    background-color: #518432;
    color: #FFF;   
}
.card h4, .card h2 {   
    width: 100%;
    color: #FFF;
    font-size: 1.2em;
}

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


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

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

footer a {
  color: #FFFFEE;
}
footer a:hover {
  color: #03BFCB;
}
 footer p {
    color: #FFF;
} 
footer h3 {
    color: #AD81C0;      
}

figure {
  margin: 0;
}
/* ========================================= background-row styles ========================================== */

#promo-bg {
    height: 30em;
}
#promo-bg h1, #promo-bg h2, #promo-bg h3 {
  color: #FFF;
}
#promo-bg p {
  color: #FFF;
}
.overlay {
    background-color: #8A52A1;
    background-color: rgba(138,82,161,0.7);
    height: 30em;
    padding: 1.5em;
}



address, address a {
    font-size: .8em; 
    color: #73B948;
}
.button {
    border-radius: 12px;
    background-color: #8A52A1;
    color:#FFF;
}
.button:hover {
    background-color: #73B948;
    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: #518432;
}
.accordion-title:hover {
    background-color: #73B948;
    color: white;
}
.accordion-title:focus {
    background-color: #8A52A1;
    color: white;
}
.accordion-title p {
    color: white;
}

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

/* ========================================= Hover from Left styles ========================================== */
.hvr-underline-from-left {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    /* box-shadow: 0 0 1px rgba(0, 0, 0, 0); */
    box-shadow: 0px 0px 7px #888888; /* Riology Change */
    position: relative;
    overflow: hidden;
}
.hvr-underline-from-left:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  background: #8A52A1;
  height: 15px;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-underline-from-left:hover:before, .hvr-underline-from-left:focus:before, .hvr-underline-from-left:active:before {
  right: 0;
}
/* ================================= Media Downloads ::before Pseudo PDF Icon  ============================= */
p.media-link a {color: #518432;}
p.media-link a:hover {color: #73B948;}

/* p.media-link a:hover:before {
    color: #73B948;   
} */

/* ========================================= Hover Icon Up styles ========================================== */
/* Icon Up */
@-webkit-keyframes hvr-icon-up {
  0%,
	50%,
	100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
	75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
@keyframes hvr-icon-up {
  0%,
	50%,
	100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  25%,
	75% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}
/* Icon Up */
.hvr-icon-up {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-icon-up .hvr-icon {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon {
  -webkit-animation-name: hvr-icon-up;
  animation-name: hvr-icon-up;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

/* ======================================== SHADOW/GLOW TRANSITIONS ====================================== */

/* Push */
@-webkit-keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hvr-push {
  50% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hvr-push {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-push:hover, .hvr-push:focus, .hvr-push:active {
  -webkit-animation-name: hvr-push;
  animation-name: hvr-push;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Glow */
.hvr-glow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
}
.hvr-glow:hover, .hvr-glow:focus, .hvr-glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.hvr-shrink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

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

}