@charset "UTF-8";
/* CSS Document */


body {
	padding-top: 50px;/*This is the padding at the top of the page for the navigation bar.*/
font-family: 'Hind', sans-serif;
	background-color:white;/*This is the Google Font used in the template*/
	color:#343E48;
	line-height:1.5em;
}

h3, h4,h5,h6, p{
	line-height:1.5;
	
	}
	
	h1{
	text-align:center;
	color:#1B3A6A;
	font-weight:bold;
	text-transform:uppercase;
	font-size:3.5em;
	letter-spacing:0px;
}

h2{
	color:#AC1E30;
	font-weight:bold;
	text-transform:uppercase;
	font-size:2.7em;
		letter-spacing:0px;
	
}
/*The wrapper class wraps around the entire webpage, including the navigation bar, header image and footer. */
.wrapper {
}

.content{
	padding:5%;
	
	}
/*my-nav class overrides the appearance of the nav bar as set in the Bootstrap CSS*/
.my-nav {
	background-color:#061b2d;
	border: none;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	box-shadow: 0 8px 6px -6px #969696;
		letter-spacing:1px;

}
.dropdown-menu {
	background-color:#061b2d;
	color: #FFFFFF;
}
.dropdown-menu>li>a {
	padding:8px;
	text-align:left;
	color: #ffffff;
}
.dropdown-menu>li>a:link {
}
.dropdown-menu>li>a:hover {
	text-align:left;
	background-color:#484647;
	color:white;
}
 @media (max-width: 767px) {
.dropdown-menu {
 background-color:#061b2d;
color: #ffffff;
}
 .dropdown-menu>li>a {
 padding:8px;
 text-align:left;
 color: #ffffff;
}
 .dropdown-menu>li>a:link {
}
.dropdown-menu>li>a:hover {
 text-align:left;
 background-color:#484647;
}
}
/*The content class wraps around the webpage, EXCEPT for the navigation bar, header image and footer. */
.content {
	margin-right:auto;
	margin-left:auto;
	display:block;
	padding:20px;
	color: #343E48 !important;
}



@media(max-width:500px){
	.content {
	
	padding:2px;
	}
	/*This overrides the Bootstrap padding for small devices so there is less white space on the sides*/
	.container-fluid{
		padding-left:5px;
		padding-right:5px;
		
	}
	
}
/*This sets the appearance of the links in the footer*/
.footer {
	color: #404144;
	background-color:white;
	padding-left:20px;
	padding-right:20px;
	padding-top:20px;
	margin-bottom:0px;
	padding-bottom:20px;
}
/*    *********************WEBSITE LINKS***************    */


/*This sets the appearance of the links in the brand in the nav bar.*/
.my-nav a:link {
	color: #ffffff;
}
.my-nav a:visited {
	color: #ffffff;
}
.my-nav a:hover {
	color: #ffffff;
}
.my-nav a:active {
	color: #ffffff;
}
/*This sets the appearance of the links in the navigation bar by overriding Bootstrap. The ID currentpage 
sets the appearance of the link for the page that is currently active.*/
.navbar-inverse .navbar-nav>li> a:link {
	color: #ffffff;
}
.navbar-inverse .navbar-nav>li> a:visited {
	color: #ffffff;
}
.navbar-inverse .navbar-nav>li> a:hover {
	color: #ffffff;
		background-color:#525051;

}
.navbar-inverse .navbar-nav>li> a:active {
	color: #BBBBBB;
}
#currentpage {
	background-color:#0C3B63;
	color:white;
}
/*This sets the appearance of the links in the content.*/	
.content a:link {
	color: #9F1B2C !important;
}
.content a:visited {
	color: #9F1B2C !important;
}
.content a:hover {
	color: #82ADB0 !important;
}
.content a:active {
	color: #333333 !important;
}
/*This sets the appearance of the links in the footer*/	
.footer a:link {
	color: #9F1B2C !important;
}
.footer a:visited {
	color: #9F1B2C !important;
}
.footer a:hover {
	color: #82ADB0 !important;
}
.footer a:active {
	color: #333333 !important;
}
/*    **********VARIOUS CLASSES FOR SPECIAL PURPOSES**********   */

/*Applies a cool style to the horizontal rules. See more cool styles 
for your horizontal rules at TODO. Note that the class applies rules 
for older browsers. */
.hr-style {
	border: 0;
	height: 1px;
	background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	background-image:    -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	background-image:     -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
	background-image:      -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
/* Applies a shadow to images. See TODO to generate your own CSS shadows. Note that the class applies the rules for older browsers.*/
.image_shadow {
	-webkit-box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	margin:15px;
}
/*This class is applied to the header images. */	
.banner-img {
	width:100%;
	height:auto;
	border-top:3px solid #851E3E;
	border-bottom:3px solid #851E3E;
}
/*Applies a shadow, border, and rounded corner to the form. It is used on the Contact form. */
.formstyle {
	-webkit-box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	box-shadow: 10px 10px 13px -3px rgba(0, 0, 0, 0.75);
	border: 1px solid #1e1932;
	border-radius: 5px;
}
/*Applies a max-width to the content on a page. It is used on pages without a lot of column or images, so it has a better width for reading. See the About page for an example.  */
.maxwidth {
	max-width:800px;
	margin:0 auto;
	display:block;
}
/*Removes the bullets from a list.*/	
.nobullets {
	list-style-type:none;
	padding-left:0;
}
/*These are used instead of .content for alternating background colors, like on the index.php page. */


.background-tint {
	padding:15px 5%;
	background-color:#eeeeee;
}
.background-clear {
	padding:15px 5%;
}
<!--
Puzzle CSS-->  #myCanvas {
	margin:5px;
}
#puzzle-background {
	background-color:silver;
	width:650px;
	height:490px;
	margin:0 auto;
	padding:5px;
}
#puzzle-background-mobile {
	width:320px;
	height:240px;
	margin:0 auto;
}
#complete-message {
	height:30px;
	color:red;
	text-align:center;
	font-weight:bold;
}



#alt-background {
	background-color:#46759F;
	width:650px;
	height:490px;
	margin:0 auto;
}
/*Used for the modal gallery */  
.boxstyle {
	padding:3px;
}

/* over-ride modal gallery */
.modal-dialog {
	width: 1000px;
	max-width: 100%;
}

.wb-carousel{
max-width:700px;
margin:20px auto;
}

.banner-nav{
	width:100%;
	padding:0px 10%;
	background-color: #5C5A5B;
	text-align:center;
	margin:0px;
	margin-top:-1px;
	
	
	}
@media(max-width:800px){	

	.banner-nav{
		padding:0px 0px;
		
		}
	
}
	

.nav-icons{
	display:inline-block;
	width:100%;
	
	
	}	
	
	

	
	
	
	
.nav-icons i{
	font-size: 3em;
	padding:20px 0px 10px 0px;
	
	}
.nav-icons p{
   text-transform: capitalize;
   font-size:1em
   }
	
@media(max-width:500px){
	.nav-icons p{
   font-size:.7em;
   }
   
   .nav-icons i{
	font-size: 1em;
	
	}
}
a:link .nav-icons {
	background-color: #5C5A5B;
	color:white;
	}
	

	
	  a:hover  .nav-icons{
	background-color: #0B3B63 !important;
	text-decoration:none;
	color:white;

	
	}
	 a:active   .nav-icons{
	background-color: #000000;
	color:white;

	
	}
	
	a:visited .nav-icons {
	
	background-color: #5C5A5B;
	color:white;

	}
	
	.phone{
		text-align:right;
		display:inline;
		position: absolute; 
		top:15px;
		right:30px;
		font-size:1.2em;
		
		}
		
		
		
	@media(max-width:767px){
		.phone{
			display:none;
			
		}
		
		}	
/*  What's New Box */		

.event-box{background-color:#efefef;border:#243A5E solid 4px; margin:2%;}
.event-box h2, .event-box h3, .event-box p{
	padding-left: 10px;
	padding-right: 10px;
	}
	.news{
		color:white;
		background-color:#243A5E;
		margin:0;
		
		}
		
.news h2{
		margin-top:0px;
		margin-botton:5px;
		color:white;
		text-transform:none;
		
}

.news h3{
	margin:5px inherit;
	}

.fullmargin{
	
	margin:0 -50px;
	}
	
@media(max-width:500px){	
	.fullmargin{
	
	margin:0px;
	}
}

.mybutton{
	margin:5px;	
}

a:link .mybutton{
	
color:white:
}

.aedsalesbox{
	padding: 0px 10px;
}


.aedsalesproduct{
	background-color:white;
	border-bottom:2px solid #AC1E30;
	padding:5px;
	margin:5px;
	font-size:150%;
	
}

.panel{
	margin-bottom:3px;
	}
	
.panel a:hover{
	text-decoration:none;
	}