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

body {
  margin: 0;
  padding: 0;
  color: #303030;
  background-color: #fefefe;
}
.bg-color {background-color: #fefefe;}
.page-title {
    margin: 1em 0 .5em 0;
    color:#11346C;
}
.page-sub-title {
    margin: 0 0 1.5em 0;
    color:#11346C;
}
h1, h2 {color: #11346C; }
p {
    font-size:1.25em;
    color: #444444;
}
/* ===================================  1. Nav Link Color ======================================= */
.menu a {
    color: #FFF;
    background-color: #11346C;
	margin-top: .5em;
	margin-bottom: .5em;
	text-align: center;
}
/* =================================== a. Nav Hover Color ======================================= */
.menu a:hover {
    background-color: #FF8500; 
    color: #FFF;
}
/* =================================== Dropdown Menu background color ======================================= */
.menu .is-active {
    background-color: #11346C;  
}
.top-bar {z-index: 1;}
ul.menu li.menu-text {
    font-size: 2em;
    color: #FFFEF2;
}
.title-bar {
    padding: 0.5rem;
    background-color: #11346C;
    color: #fefefe;
    align-items: center;
}
.top-bar-left h2 {color: #fff;}
/* =================================== 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: #FF8500;
	color: #11346C;
	font-weight: bold;
}

/* =================================== 2. Stretch Nav Color ======================================= */
#stretch-nav, ul.menu {
    background-color: #11346C; 
    /* =====  padding: 2em 0;  ===== */
}

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

#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: #11346C;
    background-color: white;
    /* border-radius: 15px; */
    border-color: #E4EDF3;
    height: 100%;
}
.card-divider {
    text-align: center; 
    background-color: #11346C;
    color: #FFF;   
}
.card h4, .card h2 {   
    width: 100%
}

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


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

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

.body-image {
    width: 100%;
}

/* =========================================== 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;
}

/* ================================================ Footer Colors =================================================== */
#stretch-footer {
    border-top: .4em solid #FF8500; /* ==== Footer Trim Color ==== */
    padding-top: 4em;
    padding-bottom: 4em;
    background-color: #11346C; /* ==== Footer Background Color ==== */
    clear: both;
}
footer {color: #fefefe;}

footer a {
  color: #FF8500;
}
footer a:hover {
  color: #fefefe;
}
 footer p, .footer h3 {
  color: #fefefe;
}

figure {
  margin: 0;
}
address, address a {
    font-size: .8em; 
    color: #FF8500;
}
/* ========================================= background-row styles ========================================== */
#background-map {
    min-height: 28em;
    background-color: #11346C;
    background-color: rgba(18,53,109,.9);
    padding-top: 2em;
    padding-bottom: 3em;
}
#background-map h1, #background-map h2, #background-map h3 {
  color: #fefefe;
}
#background-map p {
  color: #fefefe;
}
#background-bar {
    background-color: #E4EDF3;
    padding-top: 2em;
    padding-bottom: 3em;
}
#background-bar .card-section {
    background-color: #fff;
}
#background-row {
    height: 28em;
    background-color: #E4EDF3;
    background: url(/media/es1ecmwl/highly-secure-email.jpg) top center no-repeat;
}
#background-row h1, #background-row h2, #background-row h3 {
  color: #FF8500;
}
#background-row p {
  color: #fff;
}

.overlay {
    background-color: #11346C;
    background-color: rgba(17,52,108,0.6);
    height: 28em;
    padding: 2em;
}

.button {
    border-radius: 12px;
    background-color: #FF8500;
    color:#FFF;
}
.button:hover {
    background-color: #FF8500;
    color: #11346C;
}


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

#Map {
    margin-top: 5em;
}

/* ========================================= FAQs styles ========================================== */

.accordion-title {
    padding: 1rem 0 .5rem 2rem;
    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.25rem;
    line-height: 1.25;
    color: #f8f8f8;
    background-color: #11346C;
}
.accordion-title:hover {
    background-color: #FF9D34;
    color: #f8f8f8;
}
.accordion-title:focus {
    background-color: #FF8500;
    color: #f8f8f8;
}
.accordion-title p {
    color: #f8f8f8;
}

.fas {color: #FF8500; margin-top: .2em;}
.fas:hover {color: #fefefe;}
.fab {color: #FF8500;}
.fab:hover {color: #fefefe;}

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

.far a:visited {color: white;}

.samp-email {
     margin-top: 3em;
     margin-bottom: 4em;
}
.email-sample {
    font-size: 2em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
}
/* ========================================= pricing table styles ========================================== */
.pricing-table {
  background-color: #fefefe;
  border: solid 1px #cacaca;
  width: 100%;
  text-align: center;
  list-style-type: none;
}

.pricing-table li {
  border-bottom: dotted 1px #cacaca;
  padding: 0.875rem 1.125rem;
}

.pricing-table li:last-child {
  border-bottom: 0;
}

.pricing-table .title {
  background-color: #11346C;
  color: #fefefe;
  border-bottom: 0;
}

.pricing-table .price {
  background-color: #ffc181;
  font-size: 2rem;
  border-bottom: 0;
}

.pricing-table .description {
  color: #8a8a8a;
  font-size: 80%;
}

.pricing-table :last-child {
  margin-bottom: 0;
}


/* 
=========================================================================================================
								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;
	}
    .orbit-caption {
        padding: 1rem;
        background-color: rgba(17, 52, 108, 0.5);
        color: #fefefe;
        font-size: 1em;
    }
    .title-bar {padding: 1em;}
    .email-sample {
    font-size: 1.3em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
    }
    #stretch-top {height: 2.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) {
	#copyright {
		text-align:center;
		padding-bottom:2em;
	}
	.designer {
		text-align:center;
		padding-top:2em;
	} 
	.relatedThumb {
		text-align:center;
	}
    .orbit-caption {
        padding: 1rem;
        background-color: rgba(17, 52, 108, 0.5);
        color: #fefefe;
        font-size: 1em;
    }
    .title-bar {padding: 1em;}
    .email-sample {
    font-size: 1.3em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
    }
    #stretch-top {height: 2.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) {
    .reveal {padding: 2em 4em;}
    .orbit-caption {
        padding: 1rem;
        background-color: rgba(17, 52, 108, 0.5);
        color: #fefefe;
        font-size: 3em;
    }
    .email-sample {
    font-size: 2em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
    }
}
/* 
=========================================================================================================
	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;} 
    .orbit-caption {
        padding: 1rem;
        background-color: rgba(17, 52, 108, 0.5);
        color: #fefefe;
        font-size: 3em;
    }
    .email-sample {
    font-size: 2em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
    }
}
 
/* 
=========================================================================================================
	X-Large Screens and Up // min-width 1441px, xlarge screens 
=========================================================================================================
*/
@media only screen and (min-width: 90.063em) { 
    .reveal {padding: 5em 8em;} 
    .orbit-caption {
        padding: 1rem;
        background-color: rgba(17, 52, 108, 0.5);
        color: #fefefe;
        font-size: 3em;
    }
    .email-sample {
    font-size: 2em;
    color: #11346C;
    padding: .5em .5em;
    background-color: #FF8500;
    }
} 

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

}