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

/*
=========================================================================================================
Website Colors
Purple = #A54185;
Pink = #E492AB;
Grey = #7E7870;
Dk Purple = #5D2B52;
=========================================================================================================
*/

body {
  margin: 0;
  padding: 0;
  color: #303030;
  background-color: #F6F9FB;
}
.page-title {
    margin: 1em 0 .5em 0;
    color:#5D2B52;
}
.page-sub-title {
    margin: 0 0 1.5em 0;
    color:#5D2B52;
}
h1, h2 {color: #5D2B52; }
p {
    font-size:1.25em;
    color: #444444;
}
/* ===================================  1. Nav Link Color ======================================= */
.menu a {
    color: #5D2B52;
    background-color: #FFF;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
}
/* =================================== a. Nav Hover Color ======================================= */
.menu a:hover {
    background-color: #A54185; 
    color: #FFF;
}
/* =================================== Dropdown Menu background color ======================================= */
.menu .is-active {
    background-color: #004767;  
}
.top-bar {z-index: 1;}
ul.menu li.menu-text {
    font-size: 2em;
    color: #FFFEF2;
}
.title-bar {
    padding: 0.5rem;
    background-color: #004767;
    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: 35px;
    font-size: 1.2em;
    color: white;
	background-color: #A54185; 
	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;
}
/* =================================== Web Page Background Color ======================================= */

div#main {
  background-color: #E4EDF3;  
  padding-top: 3em;
  padding-bottom: 3em;
}

/* =================================== Foundation 6 Card Styles ======================================= */
.card {
    color: #FFF;
    background-color: white;
    border-radius: 15px;
    border-color: #E4EDF3;
}
.card-divider {
    text-align: center; 
    background-color: #E492AB;
    color: #FFF;   
}
.card-divider h2 {color: white;}

.card h4, .card h2 {   
    width: 100%
}

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


div.article-card {
    border-color: #E492AB; 
    border-width: 1px;
}
.article-card {margin-bottom: 4em;}

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

/* =========================================== Orbit styles ========================================== */
.orbit-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 0;
    padding: 1rem 1rem 1rem 3rem;
    background-color: rgba(165,65,133, 0.5);
    font-size: 2.5em;
    font-weight: bold;
    color: #fefefe;
    
}
/* =========================================== 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: #5D2B52;  
    padding: 2px 2px 2px 2px;
}

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

footer a {
  color: #E8E8E8;
}
footer a:hover {
  color: #FFF;
}
 footer p, .footer h3 {
  color: #E8E8E8;
}

figure {
  margin: 0;
}
/* ========================================= background-row styles ========================================== */
#bg-image {
    background-color: transparent;
    padding-top: 3em;
    padding-bottom: 3em;
}
#bg-image .button {
    border-radius: 12px;
    background-color: #E492AB;
    color:#FFF;
}
#bg-image .button:hover {
    background-color: #A54185;
    color: #FFF;
}

#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: #004767;
}
#background-row p {
  color: #004767;
}
.overlay {
    background-color: #A54185;
    background-color: rgba(165,65,133,0.5);
    height: 25em;
    padding: 2em;
}
.overlay p {color: white;}
.overlay h3 {color: white;}

address, address a {
    font-size: .8em; 
    color: #E492AB;
}
.button {
    border-radius: 12px;
    background-color: #E492AB;
    color:#FFF;
}
.button:hover {
    background-color: #A54185;
    color: #FFF;
}


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

#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: #5D2B52;
}
.accordion-title:hover {
    background-color: #E492AB;
    color: white;
}
.accordion-title:focus {
    background-color: #5D2B52;
    color: white;
}
.accordion-title p {
    color: white;
}

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

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

.far a:visited {color: white;}


.product-feature-section {
  background: #e6e6e6;
  padding: 1rem;
}
/* ========================================= Product Feature styles ========================================== */
.product-feature-section-outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  max-width: 100%;
  margin: 0 auto;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media print, screen and (min-width: 40em) {
  .product-feature-section-outer {
    max-width: 75%;
  }
}

.product-feature-section-headline {
  margin-bottom: 2rem;
  text-align: center;
}

.product-feature-section-inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.product-feature-section-feature {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 1rem;
  -webkit-flex: 1 0 50%;
      -ms-flex: 1 0 50%;
          flex: 1 0 50%;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.product-feature-section-feature.top-left {
  border-right: 1px solid #cacaca;
  border-bottom: 1px solid #cacaca;
}

.product-feature-section-feature.top-right {
  border-bottom: 1px solid #cacaca;
}

.product-feature-section-feature.bottom-left {
  border-right: 1px solid #cacaca;
}

.product-feature-section-feature .feature-title {
    margin-bottom: 0;
    line-height: 24px;
    font-size: 1.75rem;
    color: #5D2B52;
}

.product-feature-section-feature .feature-desc {
  margin-bottom: 0;
}

.product-feature-section-feature .fa {
    margin-right: 1.25rem;
    font-size: 2rem;
    color: #E492AB;
}

@media print, screen and (min-width: 40em) {
  .product-feature-section-feature {
    padding: 2rem;
    -webkit-flex: 1 0 50%;
        -ms-flex: 1 0 50%;
            flex: 1 0 50%;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
  }
}



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

}