@charset "utf-8";
/*
=========================================================================================================
Riology Custom CSS Document 
=========================================================================================================
*/
body {
	margin: 0; 
	padding: 0;
	color: #332616;
	background-color: #F6F6F6;
}
#stretch-top {
	background-color: #664C2B;
	color: #E6CE90;
	height: 100px;
}
h1#company {
	padding: .3em 0 0 .3em;
}
/* ================================ Navigation ========================================= */

#stretch-nav {
	background-color: #A77C47;
}
#stretch-nav row ul {
	background-color:  #A77C47;
}
.top-bar, .top-bar ul {
    background-color: #A77C47;
}
ul.menu li {
	background-color: #A77C47;
	color: #f6f6f6;
	text-align: center;
}
ul.menu li a {
	color: #f6f6f6;
}
ul.menu li:hover {
	background-color: #90A66C;
	color: #f6f6f6;
}
ul.menu li a:hover {
	color: #f6f6f6;
}
.menu .is-active > a {
    background: #956F3F;
    color: #f6f6f6;
}
.drilldown a {
    padding: 0.7rem 1rem;
    background: #A77C47;
}
.drilldown a:hover {
    background: #90A66C;
}
.title-bar {
    padding: 0.5rem;
    background: #A77C47;
    color: #fefefe;
    align-items: center;
}
/* ==================================== End of Navigation ============================= */

#stretch-subHeader img {
	width: 100%	
}
#stretch-bodyBar {
	background-color:  #664C2B;
	height: 450px;
	color: white;
}
#stretch-footer {
	height: min-height: 300px;
	background-color: #332616;
	color: white;
}
footer {
	padding: 3em 0;
}
footer p {
	font-size: .8em;
	color: #f6f6f6;
}
footer a {
	font-size: .8em;
	color: #E6CE90; 
}
footer a:hover {
	color: #fefefe;
}
.page-title {
	color: #664C2B;
	padding-top: 1em;
	font-size: ;
}
.page-sub-title {
	color: #956F3F;
	font-size: 2em;
}
#phone { 
	color: #fefefe; 
}
div.article-section h1{
	color: #664C2B;
	font-size: 2.25em;
}
div.article-section h2{
	font-size: 1.75em;
	color: #90A66C;
}
/* =========================================== Buttons ============================================ */

.button {
    background-color: #90A66C;
    color: #fefefe;
}
.button:hover {
	background-color: #839B5E;
	color: #fefefe;
}


/* ========================================= card styles ========================================== */
.card-divider {
    padding: 1rem;
    background: #90A66C;
}
div.card {    
    border: 4px solid #f3f0eb;
	height: 100%;
}
h2 {color: white; font-size: 1.5em;}

/* ========================================= Footer styles ========================================== */
address {
	text-align: center;
}
div#copyright {
	text-align: center;
}
#business {color: #fefefe; text-align: center; padding-top: 3em;}

#business h1 {font-size: 1em;}


/* 
=========================================================================================================
								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) {
	.relatedThumb {
		text-align:center;
	}
	h1#company {
		font-size: 1.5em;
		text-align: center;
	}
	p#phone {
		font-size: 1.2em;
		text-align: center;
	}
	address {
		padding-top: 1.5em;
	}
	
}

/* ======================================================================================================
	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) {
	.relatedThumb {
		text-align:center;
	}
	h1#company {
		font-size: 2em;
		text-align: center;
	}
	p#phone {
		font-size: 1.5em;
		text-align: center;
	}
	address {
		padding-top: 1.5em;
	}
	
}

/* 
=========================================================================================================
	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) {
	h1#company {
		font-size: 2em;
		padding-top: .8em;
	}
	p#phone {
		font-size: 1.75em;
		padding-top: .8em;
		text-align: right;
	} 
} 


/* 
=========================================================================================================
	Large Screens and Up // min-width 1025px, large screens 
=========================================================================================================
*/
@media only screen and (min-width: 64.063em) {
	h1#company {
		font-size: 2.3em;
		padding-top: .5em;
		text-align: left;
	}
	p#phone {
		font-size: 1.75em;
		text-align: right;
		padding-top: .8em;
	}
}
/* 
=========================================================================================================
	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) { 
	
}
 
/* 
=========================================================================================================
	X-Large Screens and Up // min-width 1441px, xlarge screens 
=========================================================================================================
*/
@media only screen and (min-width: 90.063em) { 
	
} 

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

}