/* CSS Document */
/* reset */
body, p, h1, h2, h3, h4, h5, ul, li, ol{margin:0}
/* {box-sizing:border-box}*/
article, aside {box-sizing:border-box;}

/* layout */
/* body has zero margin all around, and a bkg image, attached to a fixed position when scrolling. Font Family is a sans serif throughout the document. */
body{
	margin:0;
	background-attachment: fixed;
	background-image: url(../images/SandBkg3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
 }
.trans-one {
    background: rgba(54, 54, 54, 0.80);
}

.trans-two {
    background: rgba(126, 93, 4, 0.80);
}

.trans-three {
    background: rgba(54, 54, 54, 1.0);
}
/* This wrapper exists in multiple places, to contain content that is not to extend full width on the screen. Header, Footer, nav, and copyright bar can all be full width, and have this wrapper inside for centering content. Margin set at 0 auto centers the wrapper in the full width of the screen. */
.wrapper{	
	max-width:1060px; margin: 0 auto;
}
h1, h2, h3, h4, h5 {font-family: 'Lustria', sans-serif; 
	padding-top: 0.6em;
	padding-bottom: 0.1em;
}
/* Colors */
h1 {
	font-size: 1.7em;
	color: #c98e03;
	font-style: normal;
}
h2 {
	font-size: 1.1em;
	color: #405f0f;
}
h3 {font-size: 1.1em;
	color: #333333;
}
h4 {
	font-size: 2.2em;
	color: #FFFFFF;	
}
h5 {
	font-size: 2.2em;
	color: #FFFFFF;	
}

p, li, .copyright{font-family: 'Lato', sans-serif;}

p {
	font-size: 1.0em;
	padding-top: 0.5em;
	padding-bottom: 0.3em;
	line-height: 1.6em;
	color: #333333;
	text-indent: 0em;
}

a {
/*
	padding-top: 0;
	padding-bottom: 0;
*/
}



/*Nav Bar color*/
.bg-color {
	background-color: rgba(46,46,58,1); 
}

blockquote {
	background-color: beige;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	font-size: 1.0em;
	padding: 1.0em;
	line-height: 1.8em;
	color: #555555;
	font-style: italic;
	font-weight: bold;
}
li {
	font-size: 1.0em;
/*
	padding-top: 0;
	padding-bottom: 0;
*/
	line-height: 0;
}


/* Columns */
/* Divs or sections assigned one of these classes will float left, will size inward to retain % width, and will have a padding of 20 px left and right. In other words, the content in these divs or sections will come no closer than 20 px to the right and left edges of the dive or section. */

/* Sets the Column widths. */

.col-one-fifth{width:20%;}
.col-three-fifths{width:60%;}
.col-one-fourth{width:25%;}
.col-three-fourths{width:75%;}
.col-one-half{width:50%;}
.col-seven-twelfths{width:56%;}
.col-five-twelfths{width:44%;}
.col-one-third{width:33.33%}
.col-two-thirds{width:66.66%}
.col-full-width{width:100%}
/* Sets the float, box-sizing, and the padding. */
.col-one-fifth, .col-three-fifths, .col-one-fourth, .col-three-fourths, .col-one-half, .col-seven-twelfths, .col-five-twelfths,
.col-one-third, .col-two-thirds, 
.col-full-width {
	float:left; box-sizing:border-box; padding: 0 20px;
}
.col-full-width {float: none}

/* typography */
/* Sets padding above and below paragraph and heading. 
p{
	padding: 5px 0 9px 0;
	color: #333333;
}*/
h3{padding: 6px 0;}

/* header and footer links */
header a:link, header a:active, header a:visited{ 
	font-weight:bold; color:orange;	
}
footer a:link, footer a:active, footer a:visited{
	color:white;
}

/* sections */
/* All background colors for sections are here except inner navbar which is in nav.css */
/*
header{
	color:white;	
}
#logo{
	float:left;
	padding:20px;
}
#header-left {
	text-align: center;
}
#header-right{
	padding:1em;
	text-align: right;
	float: right;
}
*/


#header {
	background-color: rgba(188,93,46,0.8);
	padding: 0.5em 0em 0em 0em;;
	display: flex;
	justify-content: space-around;
    align-items: baseline;
/*	border-bottom: .2rem solid rgba(233,165,37,1.00);*/
}

#header p {
	margin: 0;
	margin-bottom: .4em;
	font-size: .8em;
	color: white;
	font-style: italic;
}

#header2 {
	display: none;
}






/*nav{border-bottom: solid 5px orange} background-color: #49176c; */

.nav-color {
	background: #474243;
/*
	border-bottom-width: 3px;
	border-bottom-style: solid;
	border-bottom-color: #f4c559;
*/
}

/*Nav Bar color*/
.bg-color {
	background-color: rgba(46,46,58,1); 
}

.nav-color-footer {
	background: #474243;
	border-top-width: 3px;
	border-top-style: solid;
	border-top-color: #f4c559;
}


#slider {background-color: red;}

#content{	
	background-color: #f4c559;
	background-image: url(../images/content-bg.jpg);
	background-repeat: repeat-x;
	padding-top: 10px;
	padding-right: 40;
	padding-bottom: 10px;
	padding-left: 40;
}
.top-shadow {
	background-image: url(../images/top-shadow_03.png);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
}
#sideBarList {
	list-style-type: none;
}
/* Sidebar link behavior.   f2e0ba */

.parchment {
	background-repeat: repeat-x;
	background-color: #FFFFFF;
	padding-top: 2em;
	background-image: url(../images/top-shadow_DBV_03.png);
}

/* Sidebar link behavior. */
.sidebarHeading {
	font-family: 'Lustria', sans-serif;
	font-size: 0.9em;
	line-height: 20px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: underline;
	text-align: left;
	vertical-align: middle;
}
.SideNavLink:link, .SideNavLink:active, .SideNavLink:visited {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	line-height: 3em;
	vertical-align: middle;
}
.SideNavLink:hover {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #CCCCCC;
	text-decoration: none;
	text-align: left;
	line-height: 3em;
}
.ContentsNavLink:link, .ContentsNavLink:active, .ContentsNavLink:visited {
	font-family: 'Lato', sans-serif;
	font-size: 1.0em;
	font-weight: normal;
	color: #844e8a;
	text-decoration: none;
	text-align: left;
	line-height: 2.5em;
	vertical-align: middle;
}
.ContentsNavLink:hover {
	font-family: 'Lato', sans-serif;
	font-size: 1.0em;
	font-weight: normal;
	color: #441449;
	text-decoration: none;
	text-align: left;
	line-height: 2.5em;
}
.footer-nav-link:link, .footer-nav-link:active, .footer-nav-link:visited {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
	text-align: left;
	line-height: 2.4em;	
}
.footer-nav-link:hover {
	font-family: 'Lato', sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	color: #CCCCCC;
	text-decoration: underline;
	text-align: left;
	line-height: 2.4em;
}

footer{
	color: white;
	padding: 20px 0 10px;
}
.copyright{	
	color: white; 
	font-size: 0.8em;
}
.roundImage {
	border-radius: 50%;
}


/* page elements */
.pic-small-right{float:right; padding:0 0 15px 15px;}
.pic-small-left{float:left; padding:0 15px 15px 0;}


/* Slider --------------*/
/* no need to modify anything in this section */
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}

.bordered-image {
	padding: .25em;
	border: medium solid #FFFFFF;
}	
.contents-titles {
	list-style-type: none;
}


/* Tools and Tricks ----------- */
.group:after, .wrapper:after {
  content: "";
  display: table;
  clear: both;
}
.mobile{display:none;}
.fullscreen{display:block}
.pad-vert{padding:15px 0}
/* YouTube embedding - http://embedresponsively.com */



/* First Breakpoint - covers all tablets and below - overrides any of the above styles ----------- */
@media only screen and (max-width: 800px) {
	.wrapper{width:auto; height:auto; margin:0 10px;}
	.sliderpic{width:100%; height:auto;}
	.pic-small-right, .pic-small-left{width:33%; height:auto;}
	.col-one-fifth, .col-three-fifths, .col-one-fourth, .col-three-fourths, .col-one-half, .col-seven-twelfths, .col-five-twelfths, .col-one-third, .col-two-thirds, .col-full-width {
	float:none;
	width:100%;
}
.sidebar {display:none;}
#logo{float:none; width:60%; height: auto;  padding: 0; margin: auto;}
.bordered-image, #header-right, #header-left {width:100%; height: auto; padding: 5px 0;}

#header-right  {
text-align: center;
}
	
#header {
	display: none;
}
	
#header2 {
	display: block;
	width: 100%;
	text-align: center;
	background-color: rgba(188,93,46,0.8);
	padding: 1em 0rem 1rem 0rem;;
	border-bottom: .2rem solid rgba(233,165,37,1.00);

	}
	
	#header2 p {
		color: white;
		margin: 0 2em;
	}
}

/* Second Breakpoint - covers all smaller devices - overrides any of the above styles (both sets) ----------- */
@media only screen and (max-width: 320px) {
	.col-one-fourth, .col-three-fourths, .col-one-half, .col-seven-twelfths, .col-five-twelfths,
.col-one-third, .col-two-thirds, .col-full-width {width:auto; float:none; margin: auto;	
}

.ContentsNavLink:link, .ContentsNavLink:active, .ContentsNavLink:visited, .ContentsNavLink:hover {
	font-size: 0.7em;
	line-height: 2.5em;
}



/* Third Breakpoint - covers all portrait phones - overrides any of the above styles (all sets) 
@media only screen and (max-width: 450px) {
	.pic-small-right{width:100%; height: auto; padding: 5px 0;}
	.pic-small-left{width:100%; height: auto; padding: 5px 0;}
	#logo {width:100%}
}
#header-left {
	text-align: none;
}
#footer-nav {
	color: #FFFFFF;
	text-align: center;
}
---------- */