/* CSS Document for Screens */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,700;1,300;1,700&display=swap');


body{
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
	font-weight:300px;
	margin:0px;
	padding:0px;
	background-color:cadetblue;
	
	
	}
#page{max-width:1400px; 
	margin:0 auto;
	position:relative;
	background-color:white;

}
	
/* Text, 1em =16px,ems are better*/

h1{
	margin: 0 0 1em 0;
	font-size:2.8em;
	font-weight:700;

}

h2{
	margin: 0 0 .5em 0;
	font-size:1.6em;
	font-weight:700;
	line-height:1.1em;
}

h3{
	margin: 0 0 .5em 0;
	font-size:1.3em;
	font-weight:700;
}

h4{
	margin: 0 0 1.5em 0;
	font-size:1.em;
	font-weight:700;
}

p{
	margin: 0 0 1em 0;
}
 a{ color:#007eff;
 }
 

 a:visited{ 
	color:#65b1ff;
 }
a.btn {font-size: 1.2em; text-decoration: none; color:#fff; border: 1px solid #fff; padding: 4px 15px;transition:background-color: .5s;} 
a.btn:hover {background-color:rgba(0,0,0,.3);}

/* Header */
 
 header {
	 	height: 410px;
	 	background: #cf0004 url("topslide.jpg") no-repeat center bottom; position:relative;
	}
header{
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("topslide.jpg");
}


 div.outreach_banner{
	 	height: 410px;
	 	
	 	background: #cf0004 url("test3.jpg") no-repeat center bottom; position:relative; 
	}
div.outreach_banner{
	background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("test3.jpg");
}


 
header a.logo{
	z-index:1;
	position:absolute;
	display: block;
	width:160px;
	height:66px;
	background: url("largelogo.png") no-repeat 0 0;
	background-size:contain;
	top: 15px;
	left:20px;
}
header a.logo span{
	display:none;
}
header div.hero{
	position:absolute;
	width:60%;
	top:205px;
	left:25%;
}


header div.hero h1{
	line-height:1em;
	margin: 0 0 30px 0;
	color:#cc6633;
}

/*Section -All*/
section {padding: 0px 30px;}
section::after{content:''; display:block; clear:both;}

/*section main*/

section.main { margin-top: 20px; margin-bottom:30px; padding:0;}
section.main aside {width:33%; float:left;text-align:center;}

section.main .content{margin:15px;background:no-repeat center top; background-size:75px 75px; padding-top:85px;} 

section.main aside h3 a {color:#000; text-decoration:none;}
section.main aside h3 a:hover{tex-decoration:underline;}

section.main aside .content.trending{background-image: url(icon_star.svg);}
section.main aside .content.find-it{background-image: url(icon_marker.svg);}
section.main aside .content.tools{background-image: url(icon_gear.svg);}

/*Section Atmosphere*/

section.atmosphere {
	background-color:#cc6633; 
	padding-top:30px; 
	padding-bottom:30px; 
	color:#fff;
}
section.atmosphere article {
	padding:0 20px 0 515px;
	background: url("midpic1.jpg")no-repeat 0 5px;
	min-height: 220px;
}

section.atmosphere_out {
	background-color:#cc6633; 
	padding-top:30px; 
	padding-bottom:30px; 
	color:#fff;
}
section.atmosphere_out article {
	padding:0 20px 0 515px;
	background: url("praise.jpg")no-repeat 0 5px;
	min-height: 220px;
}

section.atmosphere_donate article {
	padding:0 20px 0 515px;
	background: url("donate.jpg")no-repeat 0 5px;
	min-height: 220px;
}

section.atmosphere_donate {
	background-color:#cc6633; 
	padding-top:30px; 
	padding-bottom:30px; 
	color:#fff;
}

section.atmosphere_contact {
	background-color:#cc6633; 
	padding-top:30px; 
	padding-bottom:30px; 
	color:#fff;
}

section.atmosphere_contact article {
	padding:0 20px 0 375px;

	min-height: 220px;
}


/*Section -How To*/

section.how-to{
	background-color:#eee9d9;
	position:relative;
}
section.how-to aside{
	width:30%;float:left;
	margin-right:10px;
}

section.how-to aside .content{padding: 30px 30px 20px 0;}
section.how-to aside .content img {display:block;margin-bottom:15px; width:70%;}
section.how-to aside .content p{margin-bottom: .5em;}
section.how-to aside .content a{display:inline-block;color:#cc6633; font-weight:700;}

section.how-to blockquote{
	margin:0;width:32%;
	color:#444;
	background-color:#fff;
	position:absolute;bottom:0; right:4%;
}

section.how-to blockquote p {margin:30px 30px 20px 50px;}

section.how-to blockquote p.quote{font-style:italic;font-size:1.2em;}
section.how-to blockquote p.credit{
	color:#777;
	font-size: .9em; margin-top:0; padding-left: 20px; line-height:1.3em;
	position:relative;
}

section.how-to blockquote::before{
	content:'\201c'; /*201c is unicode to get a blockquote symbol around text*/
	color:#d2bd65;
	position:absolute;
	top:10px;
	left:8px;
	font-size:5em;
	font-family:serif;
}
  
section.how-to blockquote p.quote::after {content:'\201d';
font-family:serif;
}
section.how-to blockquote p.credit::before {content:'\2014'; position:absolute; top: -1px; left:0px;}

/*Navigation*/
nav{
	background-color:rgba(0,0,0, .65);
	position:absolute;
	top:0px; left:0px;
	padding:50px 0 0 0;
	width:100%;
	
}

nav::after{content:'';display:block;clear:both;}

nav ul{list-style:none;margin:0; padding:0px;}

nav ul li:hover{
	background-color:#2b0306;
}

nav ul li:hover>ul{display:block;}

nav ul li a{
	display:inline-block;
	color:#fff;
	padding:10px 20px;
	text-decoration:none;
	width:125px;
	position:relative;
}
nav ul li a:visited{
	color:#fff;
}

nav ul li a:hover{
	background-color:#6d0911;
}

nav ul ul{position:absolute;top:100%;background-color:#2b0306;display:none;}

/*Top level*/

nav >ul{
	padding-left:200px;
}

nav>ul>li{float:left;}

nav>ul>li>a{width:auto;padding:10px 20px 15px 20px;}




/*Footer*/

footer{
	font-size:.9em;
	margin-top:30px;
	color:black;
	text-align: center;
}

/*
footer .content{display:inline;}
footer a {margin-left:30px; color: #777;}

footer .content{display:inline;}
footer a {margin-left:30px; color: #777;}
margin-top:30px;
*/

footer .content{display:inline;}
footer .content{display:inline;}
footer a {margin-left:30px; color: #777;}
footer .content{margin-top:30px;}

.fa {
  padding: 14px;
  font-size: 25px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  color:white;
}


.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-instagram {
  background:#125688;
  color: white;
}
.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background:#3B5998;
  color: white;

}

.fa-youtube-square {
  background-color:#BA2020;
  color: white;
	
}


.socialmedia{
	text-align:center;
	padding-bottom:10px;
	padding-top:15px;
	color: white;
	 font-size: 25px;
}


/*
.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-instagram {
  background:#125688;
  color: white;
}
.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background:#3B5998;
  color: white;
}
.socialmedia{
	text-align:center;
	padding-bottom:15px;
	padding-top:15px;
	color: white;
}
.fa-youtube-square {
  background-color:#BA2020;
  color: white;
}
*/

/*Media Queries*/

@media screen and (max-width:1000px){
	
	h1 {font-size:2.4em;}
	
	/*header*/
	header div.hero {left:56%;}
	header div.hero h1 {margin-bottom:20px;}
	
	/*Section-atmosphere*/
	
	section.atmosphere article{padding-left:400px;background-size: 375px auto;}
	section.atmosphere_donate article{padding-left:400px;background-size: 375px auto;}
	section.atmosphere_out article{padding-left:400px;background-size: 375px auto;}
	section.atmosphere_contact article {padding-left:400px;background-size: 375px auto;}
}

@media screen and (max-width:825px){
	
	h1 {font-size:2.2em;}
	
		/*header*/

	header {height:300px; background-image:url(banner_825.jpg);}
	header div.hero {top:120px; left:48%;}


/*Section-Atmosphere*/
section.atmosphere article {padding-left:325px; background-size:300px auto;}
section.atmosphere_donate article{padding-left:325px;background-size: 300px auto;}
section.atmosphere_out article{padding-left:325px;background-size: 300px auto;}
section.atmosphere_contact article{padding-left:325px;background-size: 300px auto;}	


/*sesction-how to*/
section.how-to blockquote p.quote{font-size:1.1em;line-height:1.2em;}
	section.how-to blockquote p.credit{font-size:.85em;}
}

@media screen and (max-width:760px){
	h1 {font-size:1.8em;}
	h2 {font-size:1.4em;}
	h3 {font-size:1.1em;}
	a.btn {font-size:1em;}
	
	/*Header*/
	header a.logo {width:145px;height:60px;}
	header div.hero {top:140px;left:48%;}
	
	/*Section - Main*/
	section.main {margin-top:10px; margin-bottom:10px;}
	
	section.main aside div.content {background-size:55px 55px; padding-top:60px;}
	
	/*Section - How To*/
	
	section.how-to aside div.content img {width:85%;}
	
	/*Navigation*/
	nav {padding-top:80px;}
	nav > ul {padding-left:10px;}
	
}
	
@media screen and (max-width:625px){	
	h1 {font-size: 1em;}
	h3 {margin-bottom:0px;}
	a.btn {font-size: .9em;}
	
	/*Header*/
	header {height:160px; background-image: url("banner_625.jpg"); background-position:left top;}
	header a.logo {
		width:100%; height: 66px;
		left: 0px; top: 0px;
		background-color: rgba(0,0,0,.65);
		background-size: 112px 46px;
		background-position: 20px center; /* 20px left, centers on y axis*/ 
	}
	header div.hero {width:300px; top:85px; left: 130px;}
	header div.hero h1 {margin-bottom: 10px;}
	
	/*Section-Main*/
	section.main aside {width:100%; float:none; text-align:left;}
	section.main aside div.content{ 
		margin: 8px 20px 8px 0;
		padding: 5px 0px 10px 85px;
		background-size: 50px 50px;
		background-position: 20px 5px;		
		
	}
	
	/*Section-Atmosphere*/
	section.atmosphere article {padding:160px 20px 0px 0px;background-size:300px auto; min-height:initial;}
	section.atmosphere_donate article {padding:160px 20px 0px 0px;background-size:300px auto; min-height:initial;}
	section.atmosphere_out article {padding:160px 20px 0px 0px;background-size:300px auto; min-height:initial;}
	section.atmosphere_contact article {padding:140px 20px 0px 0px;background-size:300px auto; min-height:initial;}

	
	/*Section -How to*/
	section.how-to aside {width:100%; float:none; margin:0; position: relative;}
	section.how-to aside div.content {padding:20px 20px 20px 150px;}
	section.how-to aside div.content p {font-size: .9em;}
	section.how-to aside div.content img {
		display:inline-block;
		width:125px;
		position:absolute;
		top:30px; left:0px;
	}	
	section.how-to blockquote {
		margin: 0 20px 0 40px;
		width:90%;
		padding: 1px 0px 20px 0px;
		position: relative;
	}	
	
	section.how-to blockquote p.credit{margin-bottom:0;}
	
	/*Navigation*/
	nav {position: static;width:auto; padding:20px 15px; background-color:#363633;}
	nav ul,
	nav ul ul,
	nav ul ul ul{display:block; position:static;}
	
	nav > ul {padding:0;}
	nav > ul > li {float:none; margin-top:25px;}
	
	nav ul li:hover {background:none;}
	
	nav ul li a {
		width:auto; 
		display:block;
		margin: 8px 10px;
		padding:8px 15px;
		border: 1px solid rgba(255,255,255,.25);
	}
	nav ul li a:hover {background-color: rgba(255,255,255,.2);}
	nav ul ul {background:none;}
	nav ul ul li a {margin-left:60px;}
	
	/*FOOTER*/
	
	/*footer div.content {display:block; margin-top:15px;}
	footer div.content a {margin: 0 20px 0 0; }
	*/
}
@media screen and (max-width:425px){
	
	/*header*/
	header {height: 110px; background-image: url("banner_425.jpg");}
	header a.logo {
		height: 36px; background: rgba(0,0,0,.65)url("smalllogo.png") no-repeat center center;
		background-size: 126px 17px;
	}
	header div.hero {width:100%; left:0px; top: 46px; text-align: center; }
	header div.hero h1 {font-size: 1em; margin-bottom:10px;}
	header div.hero a.btn {padding:2px 30px;font-size:.8em;}
	header div.hero a.btn span {display:none;}
	
	/*Section -how to*/
	section.how-to aside div.content {padding: 140px 20px 20px 0px;}
	section.how-to aside div.content img {width:auto; height:100px;top:30px;}
	section.how-to blockquote {margin: 10px 40px 0 20px; }
	
	/*Footer*/
	
	/*  footer::after {content:''; display: block; clear:both;}
	
	footer div.content a {
		display: inline-block; margin: 0 0 10px 0;
		float:left;
		clear:both;  */
	}


.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}
	

	}