@charset "utf-8";
/* CSS Document */
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles - Full screen */
body { background-image: url(../images/background-full.jpg);
background-size: 100% 100%;
     background-repeat: no-repeat;
	
	/*background-color: #666666; /*grey*/
}

/* TEXT BOX */

.textBox{
  border: 1px solid #666;
  background-color: rgba(237,237,237,0.4);
  width:50%;
  padding: 1em;
  margin-top: 1em;
  margin-left: auto ;
  margin-right: auto ;
}

h1 {font-size: 2em;
}

h2 {font-size: 1.5em;
}

h1, h2 {text-align:center;
}

p {font-size: 1em;
}

.red {color:#F00;
}

.float-right {float:right;
padding-left: 1em;
}

.float-left {float:left;
padding-right: 1em;
}

.video { float:right;
padding-left: 1em;
width: 18.5em;
height: 12em; 
}

.video-left { float:left;
padding-right: 1em;
width: 18.5em;
height: 12em;
}

/* images  */
/* to resize all images & no border */
img { border: none;
	max-width: 100%; 
	height: auto; 
    /* width: auto\9; /* ie8 */ 
	
}



/* FOOTER */

footer {text-align:center;
}

footer p {font-size: 0.8em;
}

h1, h2 {text-align:center;
}


/* NAVIGATION & BACKGROUND */
nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 1em;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 0.125em solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 61.875em;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 6.875em;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 0.063em 0.063em 0em #283744;
}

nav li a {
	border-right: 0.063em solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

	
/*Styles for screens 1600px and lower - full menu*/
@media screen and (max-width: 100em) {
.textBox{
  
  width:76%;
 
}	
}
	


/*Styles for screen 990px and lower - laptops - menu 3 columns*/
@media screen and (max-width: 61.875em) {

	
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 33%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 0.063em solid #576979;
		border-right: 0.063em solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 1.563em;
  	}
	
	
	
	body { background-image: url(../images/background-600.jpg);
background-size: 100% 100%;
     background-repeat: no-repeat;
	/*background-color: #0F3; /*green*/
}



}

/*Styles for screen 600px and lower - tablets - menu 2 colums, collapsed*/
@media screen and (max-width: 37.500em) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: none; /* set to "block" if menu not starting in collapsed state*/ 
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 1.563em;
  	}
	
/*to start menu in coillapsed state */	
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('../nav-icon.png') no-repeat;
		width: 20px;
		height: 20px;
		display: inline-block;
		position: absolute;
		right: 0.938em;
		top: 0.625em;
	}
	
	body { background-image: url(../images/background-480.jpg);
background-size: 100% 100%;
     background-repeat: no-repeat;
	/*background-color: #FF0; /*yellow*/
}
}

/*Styles for screen 600px and lower - Smartphone - one column, collapsed, no images, one video, no background image*/
@media only screen and (max-width : 25em) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
	
	
	
	body {
	background-image: none;
	background: -webkit-linear-gradient(#063C68, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#063C68, #FFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#063C68, #FFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#063C68, #FFF); /* Standard syntax (must be last) */
  /* background-color: #DDF2FF; /*lightblue*/
}

.float-right, .float-left, .video-left {
display: none;
}

.video {
	width: 17em;
height: 11em;
padding-bottom: 1em;
}

.textBox{
  background-color: rgba(237,237,237,0.8);
  
}



}

/*Styles for screen 400px and lower -  small phone - one menue, collapsed, no images, videos or background image*/
@media only screen and (max-width : 20em) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
	
	
	
	body {
	background-image: none;
	background: -webkit-linear-gradient(#063C68, #FFF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#063C68, #FFF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#063C68, #FFF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#063C68, #FFF); /* Standard syntax (must be last) */
  /* background-color: #DDF2FF; /*lightblue*/
}

.float-right, .float-left {
display: none;
}

.video {
	display: none;
}

.textBox{
  background-color: rgba(237,237,237,0.8);
  
}



}

.p-center {text-align:center;}


/* --- accessibility --- */

.section-heading, .skip-button {
position:absolute;
text-indent:-9999px;
}

/* --- the a:focus neds to be placed after any other a; rules to give a keyboard navigator the same hover experience as the person using a mouse. */

a:focus {
	outline: #FF7F00 solid 2px;
}