/*
* {
  box-sizing: border-box;
}
*/





/* css reset - makes the layout looking good in all browsers */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }

.toplayer {
	align-content: center;
	font-size: 50px;
	font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
	padding: 20px;
	/*display: flexbox;*/
	grid-template-columns: auto auto;
	padding-top: 10px;
	text-align:center;
	color: rgb(160, 10, 18);
}

h1{
	font-weight: bold;
	color: darkblue;
	text-align: left;
}

.topcontent img {
	width: 80%;
	height: auto;
}

.topcontent2 img {
	width: 60%;
	height: auto;
}

.topcontent: after{
	content: "";
	clear: both;
	/*display: table;*/
}

.topcontent-logo img {
	width: 65%;
	height: auto;
}

.topcontent-logo: after{
	content: "";
	clear: both;
	/*display: table;*/
}

.topcontent-display img {
	width: 60%;
	height: auto;
}

.topcontent-display: after{
	content: "";
	clear: both;
	/*display: table;*/
}


body {
	line-height: 1; 
	font:12px/20px Arial;
	/*background:#e0f3ff url(bg.png) repeat scroll 0 0;*/
	background-image: url(images/mainbg2.jpg)
	}
ol, ul {
	list-style: none; }

/* Main Styles */	
	
#wrapper{
	width: 88%;
	margin:0 auto;
	
	
	margin-top:5px;
	margin-left: 10%;
	justify-items: center;

}
#nav {
	position:relative;
	/*width: 1100px;*/
	width: 100%;
	height: auto;
	
	
	margin-left: 17%;
	height: auto;
	margin:0 auto;
	align-content: center;
	
}

.navigation {
	justify-content: center;
	/*width: 1100px;*/
	width: 88%;
	height: auto;
	margin-left: 17%;
	align-items: center;
	-ms-grid-column-align: center;
	
}

ul#navigation {
	margin:0px auto;
	position:relative;
	float:left;
	border-left:1px solid #6698b3;
	border-right:1px solid #6698b3;
	justify-content: center;
	align-items: center;
	-ms-grid-column-align: center;
}

ul#navigation li {
	display:inline;
	font-size:14px;
	font-weight:bold;
	margin:0;
	padding:0;
	float:left;
	position:relative;
	border-top:1px solid #6698b3;
	border-bottom:2px solid #6698b3;
}

ul#navigation li a {
	padding:10px 25px;
	color:#616161;
	text-shadow:1px 1px 0px rgb(255, 255, 255);
	text-decoration:none;
	display:inline-block;
	border-right:1px solid #fff;
	border-left:1px solid #6698b3;
	border-top:1px solid #fff;
	background: #f5f5f5;
	
	-webkit-transition:color 0.2s linear, background 0.2s linear;	
	-moz-transition:color 0.2s linear, background 0.2s linear;	
	-o-transition:color 0.2s linear, background 0.2s linear;	
	transition:color 0.2s linear, background 0.2s linear;	
}

ul#navigation li a:hover {
	background:#f8f8f8;
	color:#282828;
}

ul#navigation li:hover > a {
	background:#fff;
}

/* Drop-Down Navigation */
ul#navigation li:hover > ul
{
	visibility:visible;
	opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
	list-style: none;
    margin: 0;
    padding: 0;    
	visibility:hidden;
    position: absolute;
    z-index: 99999;
	width:180px;
	background:#f8f8f8;
	box-shadow:1px 1px 3px #ccc;
	opacity:0;
	-webkit-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-moz-transition:opacity 0.2s linear, visibility 0.2s linear; 
	-o-transition:opacity 0.2s linear, visibility 0.2s linear; 
	transition:opacity 0.2s linear, visibility 0.2s linear; 	
}

ul#navigation ul {
    top: 43px;
    left: 1px;
}

ul#navigation ul li ul {
    top: 0;
    left: 181px;
}

ul#navigation ul li {
	clear:both;
	width:100%;
	border:0 none;
	border-bottom:1px solid #c9c9c9;
}

ul#navigation ul li a {
	background:none;
	padding:7px 15px;
	color:#4b4a4a;
	text-shadow:1px 1px 0px #fff;
	text-decoration:none;
	display:inline-block;
	border:0 none;
	float:left;
	clear:both;
	width:150px;
}

ul#navigation li a.first {
	border-left: 0 none;
}

ul#navigation li a.last {
	border-right: 0 none;
}


.profile-photos img{
	border: 1px;
	
	grid-gap: 40px;
	float: center;
	width: 90%;
	height: auto;
	
}

.profile-photos .br {
	text-align: center;
	font-weight: bold;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

.profile-photos .br {
	text-align: center;
	font-weight: bold;
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}


h1 {
	color: darkblue;
}


/*PHOTOS OF ORGANIZATION8*/

.grid-container {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	width: 80%;
	height: auto;
	justify-items: center;
  }
  
  .grid-container > div {
	background-color: white-space: nowrap;
	text-align: center;
	padding: 2px 0;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  .grid-container img {
	width: 90%;
	height: auto;

  }
  
  .grid-container br {
	text-align: center;
  }


  .donate-area {
	  height: 70px;
  }
/*PHOTOS DIV*/


body {
  margin: 0;
  overflow-x: hidden;
}


/* Style the header */
.header {
  float: center;
  justify-content: center;
}

.category {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	/*font-size: 30px;*/
	font-size: 2.5vw;
	color: darkblue;
	text-align: center;
}

.category2 {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 1.5vw;
	color: darkblue;
	text-align: center;
}

.category3 {
	font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-size: 1.2vw;
	color: darkblue;
	text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #111111;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: rgba(161, 153, 153, 0.637);
  color: blue;
}

.bodycontainer {
  padding: 5px;
}


.imagepad {
	float: left;
	margin-right: 10px;
	margin-bottom: 20px;
}

.imagepad img {
	height: 250px;
}

.boardpics ul{
	float: center;
}


/* Create three equal columns that floats next to each other */
.left-column {
	float: left;
	width: 22%;
padding: 15px;
}


.column {
  float: center;
  width: 75%;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 20px;
  text-align: justify;
  background-color: white;
  padding: 100px;
  
}

.press-release img {
	float: center;
	width: 90%;
	
}

.column-pics column-center img{
	float: center;
	width: 60%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 20px;
	text-align: justify;
	background-color: white;
	padding: 100px;
	height: 500px;
	width: 600px;
	
  }

  .inner-left {
	  float: left;
	  width: 45%;
	  font-family: Verdana, Geneva, Tahoma, sans-serif;
	  font-size: 20px;
	  text-align: justify;
	  background-color: white;
	  padding: 5px;
  }

.inner-left img {
	display: grid;
	width: 60%;
	height: auto;
	background-color:white;

}

.inner-right img {
	display: grid;
	width: 570px;
	height: 470px;
	background-color:white;


}


.inner-left-wrapped {
	float: left;
	width: 47%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 20px;
	text-align: justify;
	background-color: white;
	padding: 5px;
}

.inner-left-wrapped .imagepad img {
	display: grid;
	height: 275px;
	background-color: white;

}

.inner-right img {
	display: grid;
	width: 580px;
	height: 470px;
	background-color:white;
}
  
  .mid-gap {
	  width:1px;
  }
  

  .inner-right {
	float: right;
	width: 47%;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 20px;
	text-align: justify;
	background-color: white; 
	padding: 5px;

}

ul.c {
	list-style-type: circle;
}

  /*font-weight: bold;*/


#USHFVideo{
image-orientation: top;
}


.column-center img{
	display: grid;
	max-width: 500px;
	height: auto;
	background-color:white;
}


.right-column {
	float: left;
	width: 22%;
	padding: 15px;

}



/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  padding: 20px;
}

.volunteer-form label {
	content: "";
	align-content: center;
	color: darkblue;
	font-size: 25px;
}

.volunteer-form input {
	font-family: 'Courier New', Courier, monospace;
	font-size: 25px;
}

.form-content {
	font-size: 25px;
	color: darkblue;
}

.form-content textarea {
	font-family: 'Courier New', Courier, monospace;
	font-size: 25px;
}

.ckbxsize {
	zoom: 1.5;
}


.contactinfo{
	font-family: Arial, Helvetica, sans-serif;
	align-content: center;
	color: darkblue;
	font-weight: bold;
	font-size: 1.4vw;
	/*font-size: 27px;*/
}

.image1 {
	align-content: center;

}
.image1 bottomcontent after{
	align-content: center;
}

.donate-area input {
	width: 250px;
}

.sellitems-area  form select {
	font-family: 'Courier New', Courier, monospace;
	font-size: 25px;
}

.grid-sellitems {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	width: 510px;
	align-items: center;
	-ms-grid-column-align: center;
  }
  
  .grid-sellitems > div {
	background-color: white-space: nowrap;
	text-align: center;
	padding: 2px 0;
  
  }
  
  .grid-sellitems {
	text-align: justify;
	font-size: 20px;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	gap: 30px;
  }

  .grid-sellitems input {
	  size: 250px;
  }
  
  .grid-sellitems img {
	height: 250px;

  }
  
  .grid-sellitems br {
	text-align: justify;
  }
  
  
  
  /*
  .item1 {
	grid-column-start: 1;
	grid-column-end: 4;
  }
  */
  
  .wrap-center {
	display: flex;
	justify-content: left;
	align-items: center;
  }

  .projects-container {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	
	align-items: center;
	-ms-grid-column-align: center;
  }
  
  .projects-container > div {
	background-color: white-space: nowrap;
	text-align: center;
	padding: 2px 0;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  .projects-container {
	justify-content: center;
  }
  
  .projects-container img {
	width: 100%;
	height: auto;
	
  }

  .projects-container-front img {
	width: 35%;
	height: auto;
	
  }
  
  .projects-container br {
	text-align: center;
  }



  .projects-container-org {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	
	width: 100%;
	height: auto;

	justify-items: center;
  }

  .projects-container-org2 {
	display: grid;
	grid-template-columns: auto auto auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	
	width: 100%;
	height: auto;
	font-weight: bold;

	justify-items: center;
  }

  .projects-container-org3 {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 2px 0;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	
	width: 40%;
	height: auto;

	justify-items: center;
  }
  
  .projects-container-org > div {
	background-color: white-space: nowrap;
	text-align: center;
	padding: 2px 0;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }
  
  .projects-container-org {
	justify-content: center;

  }
  
  .projects-container-org img {
	width: 90%;
	height: auto;
  }
  
  .projects-container-org br {
	text-align: center;
  }


  





  .nav-controls {
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: 1px;
	column-gap: 2px;
	background-color: white-space: nowrap;
	padding: 1px;
	width: 510px;
	justify-content: center;
	-ms-grid-column-align: center;
  }

  .site-navs button {
	  font-weight: bold;
	  size: 15px;
  }

  .stretch-area  img {
	  width: 80%;
	  height: auto;
	  
  }

  .fineprint center b{
	text-align: center;
	
	font-size: 1.0vw;
	font-weight: bold;
	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif, Philosopher;
  }



  

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}