/*
=========================================================================================================

Riology Custom CSS Document 

=========================================================================================================
El Paso Truss Website Colors:

Lightest Grey = #D3CFC6;
Lightest Grey = rgb(211, 207, 198);

Lt. Grey = #BBB6B0;
Lt. Grey = rgb(187, 182, 176);

Grey = #837F76;
Grey = rgb(131, 127, 118);

Blue Grey = #45484F;
Blue Grey = rgb(69, 72, 79);

Black = #1C1C1C;
Black = rgb(28,28,28);

White = #FFF;
*/

body {
	margin: 0;
	padding: 0;
	color: #202020;
	background-color: #FFF;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
}

/* ==================== Google Font Playfair Display styles ============================== */

h1, h2 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	font-size: 2.5em;
	color: #45484F; 
}

p {
    font-size:1.25em;
    color: #444444;
}

.page-title {
	font-family: 'Playfair Display', serif;
    margin: 1em 0 .5em 0;
    color:#45484F;
}

.page-sub-title {
	font-family: 'Playfair Display', serif;
    margin: 0 0 1.5em 0;
    color:#45484F;
}
.page-title-wht {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
    margin: 1em 0 .5em 0;
    color:#FFF;
	text-shadow: 2px 2px 4px #000;
}
.page-sub-title-wht {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
    margin: 0 0 1.5em 0;
    color:#FFF;
}
.page-title-blue {
	font-family: 'Playfair Display', serif;
	font-weight: bold;
    margin: 1em 0 .5em 0;
    color: #45484F;
}

.page-sub-title-blue {
	font-family: 'Playfair Display', serif;
	font-weight: bold;
    margin: 0 0 1.5em 0;
    color: #45484F;
}
.bg-video {
	position: absolute;
	top:0;
	left:0;
	z-index: -1;
	overflow: hidden;
	background-color: #45484F;
}
@media (min-aspect-ratio: 16/9) {
	.bg-video {
		width: 100%;
		height: auto;
	}
}
@media (max-aspect-ratio: 16/9) {
	.bg-video {
		width: 100%;
		height: auto;
	}
}
/* ===========================  1. Nav Link Color ============================ */
#page-hero .menu a {
	color: #1C1C1C;
	font-size: 1.2em;
	font-weight: bold;
    background-color: transparent;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
	text-shadow: 1px 1px 2px #FFF;
}

#subPage-hero .menu a {
    color: #1C1C1C;
	font-size: 1.2em;
	font-weight: bold;
    background-color: transparent;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
	text-shadow: 1px 1px 2px #FFF;
}

/* ======================= a. Nav Hover Color ============================== */
#page-hero .menu a:hover {
	background-color: #BBB6B0;
	text-shadow: none;
    color: #FFF;	
}
#page-hero .is-dropdown-submenu a:hover {
	background-color: #999;
}

#subPage-hero .menu a:hover {
    background-color: #BBB6B0;
	text-shadow: none;
    color: #FFF;
}
#subPage-hero .is-dropdown-submenu a:hover {
	background-color: #999;
	color: #FFF;
}

/* ===================== Dropdown Menu background color ==================== */

.menu .is-active {
    background-color: transparent;  
}

.top-bar {z-index: 1;}

.menu .menu-text {
    font-size: 2em;
    color: #FFFEF2;
}

.title-bar {
    padding: 0.5rem;
    background-color: #45484F;
    color: #fefefe;
    align-items: center;
}

/* ==================== Dropdown Submenu Background Color  =========================== */
.is-dropdown-submenu-parent ul.is-dropdown-submenu {background-color: #bbb;}

/* ==================== 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: transparent;
  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: 40px;
	background-color: transparent; 
}

#stretch-nav, ul.menu {
    background-color: transparent; /* ==================== 2. Header Color ================== */
    /* ===============================  padding: 2em 0;  ============================= */
}

.top-bar {
    background-color: transparent; /* ============== 3. Nav Bar Color ================== */
}

#stretch-header {
  background-color: #fffef2;
}

#stretch-row {
  background-color: #6eb252;
}
.bg-color {
	background-color: #45484F;
}
.bg-white {
	background-color: white;
}
.bg-grey {
	background-color: #BBB6B0;
}

/* ====================== Web Page Background Color =========================== */

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

/* ======================= Foundation 6 Card Styles ========================== */
.card {
    color: #45484F;
    background-color: white;
    border-radius: 15px;
    border-color: #D3CFC6;
}

.card-divider {
    text-align: center; 
    background-color: #45484F;
    color: #FFF;   
}

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

.card-section {background-color: #D3CFC6;}

.card-section a {margin: 0 auto;}

div.article-card {
    border-color: #45484F; 
    border-width: 1px;
}

.article-card {margin-bottom: 4em;}

.article-card .card-divider h2 {color: #F6F9FB;}

.article-card .card-section {background-color: #F5F5F5;}/* #D3CFC6; */

/* ================ Feature Boxes ======================= */
.features div.feature-box {
	height: 15em;
}
.features {padding-bottom: 3em;}
div.feature-box h3 {
	background-color: rgba(0,0,0,.5);
}

/* ======================== 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: #837F76;
    padding: 0;
}

/* ===================== c. Image Wrap ======================== */

.img-wrap {
    background-color: #45484F;  
    padding: 2px 2px 2px 2px;
}

#stretch-footer {
    border-top: .4em solid #45484F; /* =================== Footer Trim Color ====================== */
    padding-top: 4em;
    padding-bottom: 4em;
    background-color: #1C1C1C; /* ================= Footer Background Color ==================== */
    clear: both;
}

footer {color: #fff;}

footer a {
  color: #FFFFEE;
}

footer a:hover {
  color: #837F76;
}

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

figure {
  margin: 0;
}

/* ===================== background-row styles ======================== */

#background-bar {
    background-color: #D3CFC6;
    padding-top: 2em;
    padding-bottom: 3em;
}

#background-bar .card-section {
    background-color: #fff;
}

#background-row {
    height: 25em;
    background-color: #D3CFC6;
    background: url(/media/x35pxxda/background-row-bg.jpg) top center no-repeat;
}

#background-row h1, #background-row h2, #background-row h3 {
  color: #45484F;
}

#background-row p {
  color: #45484F;
}

.overlay {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	border: 5px solid #a6a6a8;
  	padding: 2em;
	margin: 3em 0;
}
.overlay h3 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	color: white;
}
.overlay p {
	color: white;
}

address, address a {
    font-size: .8em; 
    color: #DDD;
}

.button {
    border-radius: 12px;
    background-color: #45484F;
    color:#FFF;
}

.button:hover {
    background-color: #837F76;
    color: #FFF;
}

.over-button {
	color: #FFF;
	border-top: 2px solid #a6a6a8;
	border-bottom: 2px solid #a6a6a8;
	padding: .5em;
}
.thumbnail {
    margin-bottom: 1rem;
    border: 2px solid #BBB6B0;
}


#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: #45484F;
}

.accordion-title:hover {
    background-color: #837F76;
    color: white;
}

.accordion-title:focus {
    background-color: #837F76;
    color: white;
}

.accordion-title p {
    color: white;
}

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

/* ========================== xy grid styles =========================== */
.white-space {
	background-color: white; 
	padding: 3em 0;
}
.grid-tpadd { padding-top: 4em;}

.grid-bpadd {padding-bottom: 4em;}

.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) {
    h1, h2 {font-size: 1.5em}
    #top-logo {height: 80px;}
    .foot-logo {height: 80px;}
    .top-bar-left{text-align: center;}
    #page-hero {
	min-height: 40vh;
    }
	p {font-size: 1em;}
	#copyright {
		text-align:center;
		padding-bottom:2em;
	}
	.designer {
		text-align:center;
		padding-top:2em;
	}
	.relatedThumb {
		text-align:center;
	}
	#stretch-nav {background-color: #45484F; 
	}
	.hero-text h1 {
		font-family: 'Playfair Display', serif;
		font-weight: 400;
		font-size: 1.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 1em;
	}
	.hero-text p {
		font-family: 'Playfair Display', serif;
		font-size: 1em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 1em;
	}
	#hero-search {margin-top: 3em;}
	.page-title-wht {font-size: 1.5em}
	.page-sub-title-wht {font-size: 1.25em}
	.page-title-blue {font-size: 1.5em}
	.page-sub-title-blue {font-size: 1em}
}



/* ======================================================================================================

	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) {
    h1, h2 {font-size: 1.5em}
    #top-logo {height: 80px;}
    .foot-logo {height: 80px;}
    .top-bar-left{text-align: center;}
    #page-hero {
	min-height: 40vh;
    }
	p {font-size: 1em;}
	#copyright {
		text-align:center;
		padding-bottom:2em;
	}
	.designer {
		text-align:center;
		padding-top:2em;
	} 
	.relatedThumb {
		text-align:center;
	}
	#stretch-nav {background-color: #45484F; 
	}
	.hero-text h1 {
		font-family: 'Playfair Display', serif;
		font-weight: 400;
		font-size: 1.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 2em;
	}
	.hero-text p {
		font-family: 'Playfair Display', serif;
		font-size: 1em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 1em;
	}
	#hero-search {margin-top: 3em;}
	.page-title-wht {font-size: 1.5em}
	.page-sub-title-wht {font-size: 1.25em}
	.page-title-blue {font-size: 1.5em}
	.page-sub-title-blue {font-size: 1em}
} 





/* 

=========================================================================================================

	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) {
    #page-hero {
	min-height: 40vh;
    }
    .reveal {padding: 2em 4em;}
	#top-logo {height: 100px;}
	.hero-text h1 {
		font-family: 'Playfair Display', serif;
		font-weight: 400;
		font-size: 2.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 3em;
	}
	.hero-text p {
		font-family: 'Playfair Display', serif;
		font-size: 1.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
	}
	#hero-search {margin-top: 6em;}
}

/* 

=========================================================================================================

	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) {
    #page-hero {
	min-height: 80vh;
    }
    .reveal {padding: 3em 5em;}   
	#top-logo {height: 100px;}
	.hero-text h1 {
		font-family: 'Playfair Display', serif;
		font-weight: 400;
		font-size: 2.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 3em
	}
	.hero-text p {
		font-family: 'Playfair Display', serif;
		font-size: 1.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
	}
	#hero-search {margin-top: 6em;}
}

/* 

=========================================================================================================

	X-Large Screens and Up // min-width 1441px, xlarge screens 

=========================================================================================================

*/

@media only screen and (min-width: 90.063em) {
    
    #page-hero {
	min-height: 80vh;
    }
    .reveal {padding: 5em 8em;}    
	#top-logo {height: 100px;}
	.hero-text h1 {
		font-family: 'Playfair Display', serif;
		font-weight: 400;
		font-size: 2.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
		margin-top: 3em;
	}
	.hero-text p {
		font-family: 'Playfair Display', serif;
		font-size: 1.5em;
		text-shadow: 2px 2px 4px #000;
		color: white;
	}
	#hero-search {margin-top: 6em;}
} 



/* 

=========================================================================================================

	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) { 

}