/*
Here's where all of your layout is. This is where you change splash page images, edit the layout of the footer, the header, everything. 
*/
	
	
/* This is a stylesheet from the demo for the Skeleton framework. I use it because it does nice things for the buttons, with the round-ness and the different sections.
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Shared
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button {
  border-radius: 100px;
}

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 4rem 0 4rem;
  text-align: center;
}
.section-heading,
.section-description {
  margin-bottom: 1.2rem;
}


/* Help
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.get-help {
  border-bottom: 1px solid #ddd;
}


/* Bigger than 550 */
@media (min-width: 550px) {
  .section {
    padding: 5rem 0 5rem;
  }
  .hero {
    padding-bottom: 12rem;
    text-align: left;
    height: 165px;
  }

  .hero-heading {
    font-size: 2.4rem;
  }
}

/* Bigger than 750 */
@media (min-width: 750px) {
  .hero {
    height: 190px;
  }
  .hero-heading {
    font-size: 2.6rem;
  }
  .section {
    padding: 6rem 0 6rem;
  }
  .hero {
    padding: 16rem 0 14rem;
  }
  .section-description {
    max-width: 60%;
    margin-left: auto;
    margin-right: auto;
  }


  .categories {
    padding: 15rem 0 8rem;
  }
}

/* Bigger than 1000 */
@media (min-width: 1000px) {
  .section {
	padding-top: 20rem;
	padding-right: 0;
	padding-left: 0;
	padding-bottom: 7rem;
  }
  .hero {
    padding: 22rem 0;
  }
  .hero-heading {
    font-size: 3.0rem;
  }

}
	
	
	
	/* This provides the color and opacity for the navigation bar. Setting the background color with an rgba value allows you to set the opacity of the color without affecting the text. If you just set opacity: .3, your text will also inherit that opacity */

html,body {

 width: 100%; height: 100%;
 }
 
 body{
 display:title;
 }
 
 
 
 
 article li {

	text-align: justify;
	}

 
 
 
 
 

/*  Starting at the top: Here's the top menubar */

.nav {
	position: relative;
	text-align: center;
	color: #EFEFEF;
	margin: 20px 0;
	background-color: rgba(25, 50, 100, 1);
	font-weight: 200;
	font-size: 1.5em;
	line-height: 2.5em;
	text-transform: uppercase;
	margin:auto;
	width: 100%;
	height: 2.5em;
}
.nav ul {margin:0;
	padding:0;
	
	}

.nav li {

	margin:0 5px 10px 0;
	padding: 0;
	list-style: none;
	display: inline-block;
	}
.nav a {
	padding: 3px 12px;
	text-decoration: none;
	color: #FFF;
	line-height: 100%;
	}

.nav a:hover {
	color: grey;
	}
	

.nav .current a {
	background-color: rgba(200, 200, 200, .5);
	color: #fff;
	border-radius: 2px;
		
	}










/* Hero Page*/






	.fivestars {
	
	height:300px;
	width: 600px;
	margin: auto;
	background: url("../images/whitestars.png") no-repeat center center; 
	background-size: 300px;
  	-webkit-background-size: 300px;
  	-moz-background-size: 300px;
  	-o-background-size: 300px;
  	z-index: 2;
	position: relative;


	
		/*Here as a note: filters can apply to the image shape, not the box, as with text-shadow
		
		*/
	
	
}

.title {
	z-index: 3;
	text-align: center;
	text-shadow: 4px 3px 0px rgba(0,49,98,1);
	text-transform: uppercase;
	color: rgba(250,250,250, 1);
	position: relative;
	top: 30%;
	opacity: initial;	
	}
	
	
.title>h1 {	
	padding-top:40px;	
	font-family: 'Raleway', sans-serif;
	font-weight: 700;
	text-transform: uppercase;



	

	
	}
	
	
.title>h2 {


	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	text-transform: uppercase;
	

	
}
	
	.title a:link { 

text-decoration: none;

}








/* All the Footer styling */

footer {background-color: rgba(25, 50, 100, 1);

	}

footer>ul{

	
    line-height: 1.5em;
	padding: 10px 0px 10px 0px;
	margin:auto;
	text-align: center;

}



footer>ul>li {
font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #FFF;
	text-transform: capitalize;
	display: inline;


}



footer a:link,a:visited,a:hover {
	color: #FFFFFF;
	text-decoration: none;
}




/* Hero photos*/


#hero{

	background: url("../images/home5.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	z-index:-2;
  	min-height: 800px;
  	height:100%;
  	width:100%;


  	
}

.leadership {

	background: url("../images/LeadershipNew2.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	height:60%;
  	width:100%;

}

.cvw11 {
	background: url("../images/cvwnew.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 75%;
	width: 100%;
}
	

.welcome {

	background: url("../images/waves.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}
/*  Facts also known as the statistics page */
.facts {
	background: url("../images/Factbg2.JPG") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: Auto;
	width: 100%;
}

.csg11 {

	background: url("../images/csg11.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

  	  	height:40%;
  	width:100%;

  	
}

.desron9 {
	background: url("../images/desronphoto.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 60%;
	width: 100%;
	}

.directions {

	background: url("../images/directions.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

  	  	height:%;
  	width:100%;

}

.legacy {

	background: url("../images/legacy.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

  	  	height:60%;
  	width:100%;

  	
}

 .FAQ {

	background: url("../images/deployment2017.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

  	  	height:60%;
  	width:100%;

  	
}


.contact {

	background: url("../images/contact.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
  	height:100%;
  	width:100%;
	


  	
  	
}

.fight {

	background: url("../images/fight.jpg") no-repeat center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;

  	  	height:70%;
  	  	
  	  	
  	width:100%;

  	
}


.black {

background-color: rgba(0, 0, 0, 0.9);
}

.white {

background-color: rgba(255, 255, 255, 0.7);
		padding:20px;
	border: solid 1px #000;
	border-radius: 5px;

}

article>p {text-align: justify;}

aside>p {text-align: left;}







@media (max-width: 1215px) {





.nav {
	position: relative;
	min-height: 40px;	
	}
	
.nav ul {

	width: 180px;
	padding:5px 0;
	position: absolute;
	top: 0;
	left: 0;
	border: solid 1px #aaa;
	background: url(../images/icon-menu.png) no-repeat 10px 14px;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba (0,0,0,.3);
	text-align: right;
	}
	
.nav li{
	display:none; /* hides all li items*/
	margin:0;
	}
	
.nav .current {

	display: block; 
	/* show only current li item */
	}
	
.nav a {

	display: block;
	padding:5px 5px 5px 32px;
	text-align: left;
	}
	

	
	.nav .current a {
	background-color: rgba(200, 200, 200, .5);
	color: #fff;
	border-radius: 2px;
		
	}

/* on hover*/

.nav ul:hover {
	background:none;
		background-color: rgba(25, 50, 100, 1);
		z-index:10;
		border: solid 1px #aaa;
	}
	
.nav ul:hover li {
	display:block;
	margin: 0 0 5px;

	}

.nav ul:hover .current {
	background: url(../images/icon-menu.png) no-repeat 10px 9px;
	}
	
.nav ul {

left: auto;
right: 0;

}

.fivestars {
	
	height:300px;
	width: 300px;
	
.title {

top:50%;
transform: translateY(-50%);
	}
	
	

}

@media (max-width: 550px) {

.title {
	

	z-index:3;
	text-align: center;
	text-shadow: 3px 3px 10px rgba(0, 0, 0, 1);
	
	text-transform: uppercase;
	color: rgba(250,250,250, 1);
	position: relative;
top:10%;
opacity: initial;

	
	}
	
	.contact {
	background: url("../images/contact.jpg") no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: auto;
	width: 100%;
  	
  	
	}
.desron9 {
}
.cvw11 {
}

}