/*COLORS
Bright Red rgba(209,34,48,1);
Dark Red rgba(84,21,30,1);  
Yellow rgba(251,174,23,1); 
Gold rgba(196,175,128,1); 
Silver rgba(193,206,209,1); 
Bright Blue rgba(28,63,132,1); 
Dark Blue rgba(28,50,63,1);
*/

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	
}
	/*visually hidden - used for additions for screen readers that need to be hidden from sighted users*/
.vh{  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
hr{
	clear:both;
	color: #FFF;
	border: 0;
	
}

	/*to remove browser specific base padding*/
html,body{
    margin: 0;
    padding:  0;
	box-sizing: border-box;
	
}
/*for consistant padding behaviour for all elemtents that contains the padding to the width of the box*/
*, *:before, *:after {
  box-sizing: inherit;
}
body{
	font-size: 20px; /*Base font here*/ 
	font-family: 'Open Sans', sans-serif;
}
/*to remove whitespace below images in HTML 5 and prevent images from being bigger than view port in responsive design*/

img{
    border: none;
    display:  block; 
	max-width: 100%;
}

.cf{
    clear: both;
	flex-basis: 100%;
	width: 100%;
}
.cf:after{
    content: "";
    display: table;
    clear: both;
}
.contain{
    width: 100%;/*Container width here*/
    margin-right: auto;
    margin-left: auto;
	max-width: 1500px;
	position: relative;
}
.contain:after{
    content: "";
    display: table;
    clear: both;
}
	.even_spaced{
		display: flex;
	}
	.even_spaced > *{
		flex-grow: 1;
	}

a:hover{
	color: #0053A0;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
}
.section_links{
	display: flex;
}
.section_links a{
	border: 3px solid #005B9A; 
	background-color: #005B9A;
	border-radius: 5px;
	color:#FFFFFF; 
	text-decoration: none;	
	padding: .5em;
	margin: .25em;
}
.section_links a:hover{
	border: 3px solid #002855; 
	background-color: #002855;
	border-radius: 5px;
	color:#FFFFFF; 
	text-decoration: none;	
	padding: .5em;
	margin: .25em;
}
a.content_btn{	
	border-radius: 5px;
	text-decoration: none;	
	padding: .5em;
	margin: 1em 0;
	background-color:rgba(28,63,132,1); 
	border: 3px solid rgba(28,63,132,1); 
	color: #FFF;
	transition: background 1s;
	display: inline-block;
}
a.content_btn:hover{
	
	background-color: transparent;
	color:rgba(28,63,132,1);
	

}


.nav_note{
	font-size: 0.75em;
}
header{
	position: sticky;	
	top: 0;
	background-color: #FFF;
	z-index: 888;
	box-shadow: 2px 2px 20px rgba(0,0,0,0.25);
}
header.shrinky #logo{
	width: 20%;
}
header.shrinky #nav{
	clear: none;
}
header.shrinky #top_nav {
	padding: 0.5em;
}
header #logo, header #top_nav{
	transition: all 0.5s;
}
.alert{
	background-color: maroon;
    color: #fff;
    padding: 5px;
	text-align: center;
	font-weight: bold;
}
#logo{
	width: 30%;
	padding: 10px;
	float: left;
	min-width: 300px;
	
}
#top_nav{
	float: right;
	padding: 1em;
}
	#top_nav a{
		text-align: center;
		color: #FFF;
		background-color: rgb(209,34,48);
		text-decoration: none;
		padding: 0.5em;
		display: inline-block;
		border-radius: 5px;
		
	}
	#top_nav a:hover{
		background-color:  rgba(84,21,30,1);
	}
nav{
	background-color: #FFF;
	
}
aside{

}
#main{
	position: relative;
}
.content_page{
	color: #666;
	padding: 0 0 7em;
	width: 90%;
	margin: auto;
}

.content_page h1{
	font-family: 'Cinzel', serif;
	color: rgba(28,63,132,1);
}

.content_page h2{
	color: rgba(28,63,132,1);


}
.content_page h1 + h2{
	padding-top: 0;
}
.content_header{
	background-image: url(/images/content_header.jpg);
    padding: 2em 0;
    margin: 0;
    background-origin: padding-box;
    background-position: top;
	background-attachment: fixed;
    color: #FFF;
    font-size: 2.5em;
    text-align: center;
}

.content_img {
    float: right;
    width: 30%;
    border-radius: 50%;
	margin: 1em;
	min-width: 350px;
}
#side_nav{
	position: absolute;
	z-index: 5;
	left: 1em;
	top: 1em;	
}
#side_nav a{
	display: block;
	border-radius: 5px;
	padding: 0.5em;
	color: #FFF;
}
#side_nav a .icon,#top_nav a .icon{
	height: 1em;
	float: left;
	padding: 0 5px 0 0 ;
	
}
#olb{
	
	background-color: rgba(251,174,23,0.80);
}
#banner{
	position: relative;
}
.deco_bar{
	
	z-index: 5;
	width: 102%;
}
.deco_bar_top{
	bottom: -10%;
	position: absolute;
}
#promo_boxes{
	display: flex;
	position: relative;
}
	.promo_box{
		position: relative;
		flex-grow: 1;
		overflow: hidden;
		display: block;
	}
		.promo_box img{
			width: 100%;
		}
		.promo_title{
			position: absolute;
			bottom: 30%;
			width: 60%;
			margin: 0 20%;
			color: #FFF;
			text-align: center;
			padding: 0.5em;
			transition: width 0.5s, margin 0.5s;
			white-space: nowrap;
		}
		.promo_box:nth-child(1) .promo_title{
			background-color: rgba(196,175,128,0.80);
		}
		.promo_box:nth-child(2) .promo_title{
			background-color: rgba(28,63,132,0.80);
		}
/*
		.promo_box:nth-child(3) .promo_title{
			background-color: rgba(244,67,54,0.80);
		}
*/
		.promo_box:nth-child(3) .promo_title{
			background-color: rgba(251,174,23,0.80);
		}

		.promo_text{
			/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */
			background: -moz-linear-gradient(top,  rgba(255,255,255,0.0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
			background: -webkit-linear-gradient(top,  rgba(255,255,255,0.0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
			background: linear-gradient(to bottom,  rgba(255,255,255,0.0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
			position: absolute;
			text-align: center;
			transition: height 1s;
			bottom: 0;
			width: 100%;
			height: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 0 1em;
			overflow: hidden;
			color: #1C3F83;
			align-items: center;
			font-size: 1.75em;
		}
.promo_box:hover .promo_text{
	width: 100%;
	height: 110%;
	white-space: normal;
}
/*.promo_text a{
	color: #FFF;
    background-color: rgb(209,34,48);
	text-decoration: none;
	border-radius: 10px;
	padding: 0.5em;
	display: inline;
}*/
.promo_box:hover .promo_title{
	width: 0px;
	margin: 0 50%;
	overflow: hidden;
	padding: 0.5em 0;
}
	.deco_bar_bottom{
		bottom: -1px;
		margin-top: -4em;
	}
footer{
	position: relative;
	color: #FFF;
	background-color: rgb(28,50,63);
	margin-top: -1px;
	
}
	.footer_info{
		padding: 1em 3em;
	}
#site_map h1{
	
	font-family: 'Cinzel', serif;
	font-size: 1.5em;
	font-weight: normal;
}
	#site_map a{
		display: block;
		color: #FFF;

	}
	#address_info{
		text-align: right;

	}
.routing{
	font-size: 1.5em;	
	
}
	#logos{
		display: flex;
		font-size: 0.75em;
		padding: 2em 0;
	}
	#logos > *{
			padding: 0 1em;
			flex-grow: 1;
		}
	#logos img{
		max-height:100px;
		padding: 0 10px;
	}
			/********************************/
            /*******3rd PARTY LEAVING********/
            /********************************/
            
                #extDis {
                    display: none;
                    position: fixed;
                    width: 100%;
                    height: 100%;
                    top: 0px;
                    left: 0px;
                    z-index: 1000;
                }
                #extDis h2{
                    text-align: center;
                }
                
                #extDis .extDisMsg {
                    background-color: #102E56;
                    border: 5px solid #FFF;
                    border-radius: 10px;
                    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);
                    color: #FFF;
                    margin: 3em auto;
                    padding: 2em;
                    position: relative;
                    text-align: left;
                    width: 80%;
                    font-size: 0.80em;
                }
                #extDis .extDisMsg p{
                    padding: 0 0 20px 0;
                }
                #extDis .extDisBg {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
                }
            
                #extDis a.continueBtn:hover,#extDis a.continueBtn:focus,#extDis a.closeBtn:focus {
                    background-color: #FAE752;
                    color:#000;
                    
                }
                #extDis a.closeBtn, #extDis a.continueBtn {
                    background-color: #FFF;
                    color: #381404;
                    display: inline;
                    font-weight: bold;
                    margin: 10px 20px 0px 0px;
                    padding: 10px 20px;
                    border-radius: 10px;
                    cursor: pointer;
                    text-decoration: none;
                }

        	
           /*accordian*/
            
            .ac_btn{
				background-color: #fff;
				color: #1C323F;
				padding: 1em;
				cursor: pointer;
				margin-top: 10px;
				border: #aaa 1px solid;
				box-shadow: 2px 2px 3px rgba(0,0,0,0.25);
            }
			.ac_btn h2{
				background-color: inherit;
				color: inherit;
				font-size: 1em;
				font-weight: inherit;
				margin: 0;
			}
			.ac_btn:hover, .ac_btn:focus{
				background-color: #ccc;				
}
            .ac_btn.open{
                background-color: #1C3F83;
				color: #FFF;
            }
            
            
            .ac_collapsible{
                overflow: hidden;
                transition: max-height 0.5s ease 0s;
                max-height: 0px;
                box-shadow: inset 1px 1px 5px rgba(0,0,0,0.3);
            }
            .ac_collapsible.open{
                max-height: 1600px;
            }
            
            .ac_collapsible .inside{
                padding: 1em;	
            }
			#top_nav > a:first-child{
					padding: 0.5em 1em;
					background-color: #20a120;
					margin-bottom: 0.5em;
				}
        

/********************************/
/************BACK TO TOP********/
/********************************/
#btt{
    background-color: #000;
    border-radius: 5px;
    bottom: 10px;
    color: white;
    display: none;
    font-size:2em;
    opacity: 0.6;
    padding: 0.25em;
    position: fixed;
    right: 10px;
    text-align: center;
	cursor: pointer;
	z-index: 30;
}     

@media only screen and (min-width : 0px) and (max-width :700px) {
	header{
		position: relative;
	}
	#side_nav{
		position: static;
		text-align: center;
	}
	#promo_boxes{
		display: block;
		margin: auto;
	}
	.promo_box{
		max-height: 300px;
	
	}
	.promo_text{
		background: rgba(255,255,255,0.7);
		font-size: 1.1em;
	}
	.promo_box img{
		margin-top: -300px;
	}
	.deco_bar_bottom{
		display: none;
	}
	#logos,.even_spaced{
		display: block;
	}
	div#calculators a{
		width: auto;
	}

}