@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*//*Note that the below property device pixel ratio might need to be vendor-prefixed
for some browsers*/
/* @media screen and (device-pixel-ratio: 1.5) and (max-device-width: 1920px) and (min-device-width: 480px)  */

.column {
float: none;
}

/*adjust your layout for 1.5 hardware pixels to each reference pixel*/

/* @media screen and (device-pixel-ratio: 2)and (max-device-width: 1920px)  */
	#content{
		width:100%;
	}
.column {
float: none;
}

/*adjust your layout, font-sizes etc. for 2 hardware pixels to each reference pixel*/
 
object, embed, video {
	max-width: 100%;
	height: auto;
}
img{
	max-width: 100%;
	height: auto;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
	max-height: auto;
}
/*
	Dreamweaver Fluid Grid Properties
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	12;
	dw-gutter-percentage:	25;
	
	Inspiration from "Responsive Web Design" by Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	and Golden Grid System by Joni Korpi
	http://goldengridsystem.com/
*/

body{
	/*background:url("../images/simple_textured-2560x1440.jpg");
	background-repeat:repeat;
	background-position:center; */
	background-color:#0b446b;
	/*opacity:1;*/
	/*Prevents Mobile Safari from bumping up font sizes in landscape */
    -ms-webkit-text-size-adjust: 100%;
	-ms-webkit-transform: translate3d(0,0,0);
	-moz-webkit-transform: none;
    -moz-webkit-transform: translate3d(0, 0, 0);
}
h1{
    display: block;
    text-shadow: 1px 2px 3px #001;
    font-size: 2em;
    color: #ffffff;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bolder;
}
h2 {
    display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h3 {
    display: block;
    text-align:center;
    font-size: 1.5em;
    color: #ffffff;
    margin-top: 3em;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
}
h4 {
    display: block;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h6 {
    display: block;
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
h5 {
    display: block;
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
.para01 {
	margin-top:0;
	margin-bottom:15px;
	margin-right:25px;
	text-align:right;
	color: #210000;
	text-shadow: .5px 2px .5px #333;
	font:Arial, Helvetica, sans-serif;
	font-size:28px;
	font-weight:bold;
}
.para4 {
	margin-top:10px;
	margin-left:35px;
	margin-right:35px;
	/* border:solid;
	border-width:1px;
	border-color:#266b9c; */
	padding:3px;
	color: #ffffff;
	font:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:normal;
}
.para5a {
	width:90%;
	margin: auto;
	background-color:#123456;
	/* border:ridge;
	border-width:1px;
	border-color:#ffffff;*/
	padding:7px;
	color: #ffffff;
	/* text-shadow: 3px 4px 5px #000; */
	font:Arial, Helvetica, sans-serif;
	font-size:17px;
	font-weight:normal;
}
.para5b{
	float:left;
	width:auto;
	height:20px;
	margin: 0;
	background-color:#263748;
	border:groove;
	border-width:2px;
	border-color:#0b446b;
	padding:2px;
	color: #ffffff;
	text-align: center;
	text-shadow: 3px 4px 5px #000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
}
.para5c{
	float:right;
	width:auto;
	height:20px;
	margin: 0;
	background-color:#263748;
	border:groove;
	border-width:2px;
	border-color:#0b446b;
	padding:2px;
	color: #ffffff;
	text-align: center;
	text-shadow: 3px 4px 5px #000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:normal;
}
input {
    width: 33%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
img {
	margin-bottom: 0.5em;
	margin-left:auto;
	border:1px groove #266b9c;
	-webkit-box-shadow: 0 0 2px #266b9c;
	-moz-box-shadow: 0 0 2px #266b9c;
	box-shadow: 0 0 2px #266b9c;
	background: #494949; 
	background: rgba(73,73,73,0);
    filter:alpha(opacity=25);/* For IE8 and earlier */
}
.picCenter{
	/* text-align:center; */
	margin: auto;
}
 a {
color: #ffffff;
}

a:link {
color: #ffffff;
}
a:visited {
color: #f5fe03;
}
a:hover {
color: #10fa04;
}
.nav{
	display:inline;
	position:relative;
	margin:0;
	border:2px 2px 2px 2px solid #121314;
	font:bold 16px Sans-serif;
	height:38px;
	width:100%;
   -webkit-box-shadow:0 0 20px #266b9c;
   -moz-box-shadow:0 0 20px #266b9c;
   box-shadow:0 0 20px #266b9c;
}
.nav ul{
	position:relative;
	z-index:1000;
	margin:0;
	padding:0;
	margin-top:30px;
	list-style:none;
    overflow: visible;	
} 
.nav ul:after{
	display:block;
	height:0;
	clear:both;
	visibility:hidden;	
}
.nav ul li{	
	position:relative;
    display:inline-block;
	float:left;
	padding:1px 1px;font-weight:bold;
	box-sizing: border-box;
	border: 1px solid;
    background:#123456;
   -webkit-box-shadow:0 0 3px #266b9c;
   -moz-box-shadow:0 0 3px #266b9c;
   box-shadow:0 0 3px #266b9c;
   color: #123456;
   color:rgba(18,52,86, 0.8);
	
    transition:.1;	
}
.nav ul ul li a{
	border-right:none;	
}
/* .nav ul li a:hover,.current {	
} */
.nav ul li a:hover {
	position:relative;
	padding:2px 2px;font-weight:bold;
	box-sizing: border-box;
	min-width:auto;	
	margin:0 auto;
	border: solid;
   -webkit-box-shadow:0 0 5px #123456;
   -moz-box-shadow:0 0 5px #123456;
   box-shadow:0 0 5px #123456;
   color: #123456;
   color:rgba(73,73,73,.5);
	
	text-align:center;
	opacity:.9;
    transition:.1;
}
.nav ul ul{
	display:none;
	background-color:#323232;
}
.nav ul ul li {
	border:solid 1px #543210;
	width:100%;
}
.nav li:hover ul{
	text-align:center;
	display:block;
	position:absolute;
	float:none;
}
.nav li{
	position:relative;
	float:left;
	list-style-type:none;
}
.nav li a{
	text-decoration:none;
	display:block;
	color: #266b9c;
	float:left;
	border-right:1px solid 123456;
	padding:5px 5px;
	
}
.gallery img {
max-height: 100%;
}
/* section { 
	margin-top:2em;
	border-top:1px solid #ccc;
} */
/* video { 
	width:640px;
	height:360px;
	margin-top:.5em;
} */

/* Mobile Layout: 480px and below */
@media only screen and (min-width: 320px){
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#header {
	float: none;
	margin-top: 1px;
	margin-left: 1px;
	margin-bottom: -30px;
	padding-top:15px;
	width: 100%;
	/* background-color:#313122;
	box-shadow: 0 0 100px #000;
   -webkit-box-shadow: 0 0 100px #000;
   -moz-box-shadow: 0 0 100px #000;
	background: #123456; */
	}
/*TAKE NOTE OF THIS POINT: Opacity on the enclosing elements is not the way to go
 because once you declare opacity, all enclosed elements
 will inherit the same opacity, which can't be reversed.
 Solution? Use the alpha channel on the background-color, like so
 background-color: rgba (256,256,256, 0.7)*/
 #v{
float:left;
width:480;
height:270;
border-style: solid; 
border-width:3px;
border-color:#266b9c;
background-color:#313122;
-webkit-box-shadow:0 0 5px #123456;
-moz-box-shadow:0 0 5px #123456;
box-shadow:0 0 5px #123456;
color: rgba(31,32,32,.5);
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier*/	
}
#v2{
float:right;
width:480;
height:270;
border-style: solid; 
border-width:3px;
border-color:#266b9c;
background-color:#313122;
-webkit-box-shadow:0 0 5px #123456;
-moz-box-shadow:0 0 5px #123456;
box-shadow:0 0 5px #123456;
color: rgba(31,32,32,.5);
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier*/		
}

.wrap {
	margin-left:1%;
	margin-right:1%;
	width:100%;
	text-align:center;
	overflow:auto;
}

/* video {display:compact; margin-bottom:0px; padding: 0px; width: 99%; height: 38%; box-shadow: 0 0 16px #000000; border: none; background-color:#000000; 
} */
/* Mobile Layout: 480px and below */
@media only screen and (min-width:320px){
#content {
	clear: both;
	margin-top:20px;
	margin-bottom:150px;
	margin-left:auto;
	margin-right:auto;
	display: compact; 
	text-align:center;
	width:9%;
	height:81%;
	border: none;
    background-color:#313122;
	-webkit-box-shadow:0 0 5px #123456;
    -moz-box-shadow:0 0 5px #123456;
    box-shadow:0 0 5px #123456;
	background: #123456;
	opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier*/
}
#content_1 { 
	position:relative;
	z-index:30;
    clear: none;
	float: left;
	margin-top:2px;
	margin-bottom:15px;
	background-color:#313122;
	-webkit-box-shadow:0 0 5px #123456;
    -moz-box-shadow:0 0 5px #123456;
    box-shadow:0 0 5px #123456;
	background: #123456;
	width: 100%;
}
#content_2 { 
	z-index:1000;
    clear: both;
	margin-top:60px;
	margin-bottom:-0;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width: 90%;
	height:auto;
	/* border: ridge 3px;
	border-color:#f0f0f0; */
	background-color:#313122;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow:0 0 5px #123456;
    -moz-box-shadow:0 0 5px #123456;
    box-shadow:0 0 5px #123456;
	background: #123456;
}
#content_3 {
	clear: both;
	margin-top:60px;
	margin-bottom:5px;
	margin-left:5px;
	margin-right:5px;
	display: block;
	text-align:left;
	width:99%;
	height:99%;
	border-style: solid; 
	border-width:5px;
	border-color:#266b9c; 
    /* background-color: rgba(31,32,32,.5); */
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
#content_4 {
	clear: both;
	padding-bottom:15px;
	margin-bottom:15px;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align:center;
	width:400;
	height:auto;
    background-color:#323132;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
section { 
	clear:both;
	margin-top:10em;
	margin-bottom:1em;
	margin-left:1em;
	margin-right:1em;
}
video { 
		width:95%;
		margin:5px;
		height:auto;
}
#webpages {
	clear: both;
	float: left;
	margin-top: 5px;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:right;
}
#socialNet{
	clear: both;
	float: left;
	margin-top: 15px;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
}
#footer  {
	text-align:center;
	clear: both;
	display:inline;
	margin-top: 50px;
	margin-left: auto;
	margin-right:auto;
	margin-bottom:0px;
	width: 48%;
}
}
/* Tablet Layout: 481px to 768px. Should inherit styles from: Mobile Layout. */
@media only screen and (min-width: 481px){
.gridContainer {
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
#header {
	clear: both;
	float: left;
	margin-top: 2px;
	margin-left: 0;
	width: 100%;
	/* background-color:#313122;
	box-shadow: 0 0 100px #000;
   -webkit-box-shadow: 0 0 100px #000;
   -moz-box-shadow: 0 0 100px #000;
	background: #123456; */
}
/*TAKE NOTE OF THIS POINT: Opacity on the enclosing elements is not the way to go
 because once you declare opacity, all enclosed elements
 will inherit the same opacity, which can't be reversed.
 Solution? Use the alpha channel on the background-color, like so
 background-color: rgba (256,256,256, 0.7)*/
#content {
	clear: both;
	margin-top:150px;
	margin-bottom:95px;
	margin-left:auto;
	margin-right:auto;
	display: block; 
	text-align:center;
	width:600px;
	height:auto;
    padding-top:0px;
	padding-top:0px;
	border: line;
	opacity:1;	
}
#content_1 { 
    clear: none;
	float: left;
	margin-top:2px;
	margin-bottom:15px;
	display: block;
	background-color:#313122;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456;
	width: 100%;
}
#content_2 { 
    clear: both;
	margin-top:60px;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	width: 600px;
	height:auto;
	/* border: ridge 3px;
	border-color:#f0f0f0; */
	background-color:#313122;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456;
}
#content_3 {
	clear: both;
	margin-top:60px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align:left;
	width:768px;
	height:auto;
	border-style: solid; 
	border-width:5px;
	border-color:#266b9c; 
    background-color: rgba(31,32,32,.5);
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
#content_4 {
	clear: both;
	padding-bottom:15px;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width:480px;
	height:300px;
    background-color:#323132;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
section { 
	clear:both;
	margin-top:10em;
	margin-bottom:1em;
	margin-left:1em;
	margin-right:1em;
}
video { 
		width:45%;
		margin:5px;
		height:auto;
}
#sitemap {
	border:groove;
	clear: both;
	margin-top:auto;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align:center;
	height:880px;
	border-style: groove; 
	border-color: #663300;
    background-color: rgba(31,32,32,.5);
	box-shadow: 0 0 25px #000;
	-webkit-box-shadow: 0 0 25px #000;
	-moz-box-shadow: 0 0 25px #000;
	background: #123456; 
	opacity:1;
}
#webpages {
	clear: both;
	float: left;
	margin-top: 5px;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:right;
}
#socialNet{
	clear: both;
	float: left;
	margin-top: 15px;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
}
#footer {
	clear: both;
	float: left;
	margin-top: auto;
	margin-left: auto;
	margin-right: auto;
	margin-bottom:5px;
	width: 100%;
	text-align:center;
}
}
/* Desktop Layout: 769px to a max of 1920px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px){
.gridContainer {
	width: 100%;
	max-width: 1920px;
	padding-left: 0%;
	padding-right: 0%;
	margin: auto;
}
#header {
	clear: both;
	float: left;
	margin-top: -10px;
	margin-left: 0;
	width: 100%;
	/* background-color:#313122;
	box-shadow: 0 0 100px #000;
   -webkit-box-shadow: 0 0 100px #000;
   -moz-box-shadow: 0 0 100px #000;
	background: #123456; */
}
/*TAKE NOTE OF THIS POINT: Opacity on the enclosing elements is not the way to go
 because once you declare opacity, all enclosed elements
 will inherit the same opacity, which can't be reversed.
 Solution? Use the alpha channel on the background-color, like so
 background-color: rgba (256,256,256, 0.7)*/

#content {
	clear: both;
	margin-top:150px;
	margin-bottom:95px;
	margin-left:auto;
	margin-right:auto;
	display: block; 
	text-align:center;
	width:600px;
	height:auto;
	padding-top:0px;
	padding-top:0px;
	border:ridge;
	opacity:1;	
}
#content_1 { 
    clear: none;
	float: center;
	margin-top:2px;
	margin-bottom:10px;
	margin-left:auto;
	margin-right:auto;
	background-color:#313122;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456;
	width: 100%;
}
#content_2 { 
    clear: both;
	margin-top:60px;
	margin-bottom:-5px;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align:left;
	width: 800px;
	height:auto;
	border-style: solid; 
	border-width:3px;
	border-color:#266b9c;
	background-color:#313122;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456;
}
#content_3 {
	clear: both;
	margin-top:60px;
	margin-bottom:0px;
	margin-left:auto;
	margin-right:auto;
	display: block;
	text-align:left;
	width:955px;
	height:auto;
	border-style: solid; 
	border-width:3px;
	border-color:#266b9c; 
	/* border-color: #663300; */
    background-color: #000000;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
#content_4 {
	clear: both;
	padding-bottom:10px;
	margin-bottom:-12px;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	width:480px;
	height:370px;
	border-style: solid; 
	border-width:3px;
	border-color:#266b9c;
    background-color:#323132;
	box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	-moz-box-shadow: 0 0 5px #000;
	background: #123456; 
	opacity:1;
}
section { 
	clear:both;
	margin-top:10em;
	margin-bottom:1em;
	margin-left:1em;
	margin-right:1em;
}
video { 
		width:45%;
		margin:5px;
		height:auto;
}
#socialNet{
	clear: both;
	float: left;
	margin-top: 15px;
	margin-left: 0;
	width: 100%;
	display: block;
	text-align:center;
}
#footer {
	clear: both;
	float: left;
	margin-top: 20px;
	margin-left: 0;
	margin-bottom:5px;
	width: 100%;
	text-align:center;
}
}