@charset "UTF-8";
/* CSS Document */

@media screen and (min-width:960px){

@font-face{
    	font-family:"";
    	src:url(images/.);
}

@font-face{
    	font-family:"";
    	src:url(images/.);
}

html{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	/* Pixels equal REMs for font size ONLY
	ex. 10px=1.0rem */
	font-size:62.5%;
}

h1{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:38px;
	font-size:3.8rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h2{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:26px;
	font-size:2.6rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h3{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:18px;
	font-size:1.8rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h4{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:16px;
	font-size:1.6rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h5{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:14px;
	font-size:1.4rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

p{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	font-size:16px;
	font-size:1.6rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

body{	
	/* MARGIN MUST BE SET TO GET RID OF OUTSIDE MARGINS OF WEBPAGE */
	margin:0px;
	padding:0px;
}

a.links:link{
	color:rgb(0,51,153);
	text-decoration:none;
	margin:0px;
	transition:all .3s;
	-webkit-transition:all .3s; /* Safari */
	transition-timing-function:ease-out;
	-webkit-transition-delay: 1s; /* Safari */
    	transition-delay:0s;
}

a.links:visited{
	color:rgb(71,152,254);
	text-decoration:none;
	margin:0px;
}

a.links:hover{
	color:rgb(204,153,51);
	text-decoration:underline;
	margin:0px;
}

a.links:active{
	color:rgb(21,102,204);
	text-decoration:none;
	margin:0px;
}

#wrapper{
  	/* Safari 3.1-6.1, iOS 6- */
  	display:-webkit-box;
  	/* IE 10 & IE Mobile 10 */
  	display:-ms-flex;
  	/* Partial support for Firefox 4-27 */
  	display:-moz-flex;
  	/* Chrome 21-28, Safari 6.1+, Opera 15-16, iOS 7.1+, partial support for Android 2.1-4.3, Blackberry 7, & UC 9.9(Android) */
  	display:-webkit-flex;
  	/* IE 11/Edge, Firefox 28+, Chrome 29+, Opera 12.1 & 17+, Opera Mini 8, Blackberry 10, Opera Mobile 12.1 & 30, Android 42(Chrome) 39(Firefox), IE Mobile 11 */
  	display:flex;
  	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:center;
        justify-content:center;
	-webkit-align-items:stretch;
        align-items:stretch;
        -webkit-align-content:stretch;
        align-content:stretch;
        max-width:960px;
        height:auto;
	margin:0px;
   	padding:0px;

	> section{
		max-width:940px;
        	height:auto;
		margin:0px;
		padding:0px;
		flex:1 100%;
	}
}

.onecol{
	max-width:960px;
        height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%;
}

.twocol{
	max-width:460px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%
}

.threecol{
	max-width:300px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%;
}

.fourcol{
	max-width:220px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%;
}

.orderOne{
	order:1;
}

.orderTwo{
	order:2;
}

.orderThree{
	order:3;
}

.orderFour{
	order:4;
}
	
header{
	background-color:rgb(255,255,255);
}

#logo{
	/* DISPLAY MUST BE IDENTIFIED TO CENTER IMAGE */
	display:block;
	/* WIDTH MUST BE SET TO KEEP LINK FROM SPANNING WHOLE PAGE */
	width:306px;
	margin:auto;
}

nav{
	background-color:rgb(0,51,153);
	font-size:22px;
	font-size:2.2rem;
	text-align:center;
	width:100%;
	margin:auto;
	padding:0px;
}

	nav > ul{
		list-style:none;
		margin:auto;
		padding:10px;
	}
		
		nav > ul > li{
			display:inline;
			margin:10px;
			padding:5px;
		}

a.navi:link{
	color:rgb(255,255,255);
	border-style:transparent;
	border-width:4px;
	border-color:rgb(0,0,0);
	transition:all .4s;
	text-decoration:none;
}

a.navi:visited{
	color:rgb(180,180,180);
	text-decoration:none;
}

a.navi:hover{
	color:rgb(255,255,255);
	text-decoration:underline;
	border-style:inset;
	border-width:4px;
	border-color:rgb(204,153,51);
	margin:0px;
	padding:5px;
}

a.navi:active{
	color:rgba(255,255,255,.8);
	text-decoration:underline;
	border-style:outset;
	border-width:4px;
	border-color:rgb(250,199,97);
}

#contentback{
	background-image:url("images/background.jpg");
	background-color:rgba(255,0,0,.2);
	background-repeat:no-repeat;
	background-position:left top;
	background-repeat:repeat-y;
	width:100%;
}

#content{
	background-color:rgba(255,255,255,.8);
	max-width:960px;
	margin:auto;
	padding:0px;
}

#sliderContainer{
	max-width:940px;
	height:500px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#slider{
	width:100%;
	height:100%;
	padding:0px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#pager{
	width:100%;
	height:30px;
	text-align:center;
	display:block;
	position:absolute;
	bottom:0px;
	margin:auto;
	padding:0px;
	cursor:pointer;
	background-color:rgb(50,50,50);
	z-index:4;
}

#pager a{
	font-size:.0rem;
	color:transparent;
	width:10px;
	height:10px;
	display:inline-block;
	position:relative;
	margin:auto;
	border-width:1px;
	border-style:solid;
	border-color:rgb(255,255,255);
	border-radius:20px;
	background:transparent;
	margin:10px;
}

#pager a.activeSlide{
	background-color:rgb(255,255,255);
}

#controls{
	display:flex;
	position:absolute;
	margin:auto;
	z-index:5;
}

#play{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#play > img{
		width:100%;
		height:100%;
	}

#pause{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#pause > img{
		width:100%;
		height:100%;
	}

#next{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#next > img{
		width:100%;
		height:100%;
	}

#prev{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#prev > img{
		width:100%;
		height:100%;
	}

.sliderButton{
	background-color:rgb(100,100,100);
	border:0px solid;
	border-radius:10px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	/* FOR Δ */
	/* transform:rotate(90deg); */
	/* -webkit-transform:rotate(90deg); */
}

a.sliderButton:link{
	background-color:rgb(100,100,100);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
	transition:background-color .4s;
}

a.sliderButton:hover{
	background-color:rgb(204,153,51);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

a.sliderButton:active{
	background-color:rgb(250,199,97);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

.slide{
	width:100%;
}

.sliderCaptionTop{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left;
	display:flex;
	position:relative;
	left:0px;
	bottom:400px;
	margin-right:auto;
	padding:0px;
	z-index:1;
}

.sliderCaptionTop a{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.sliderCaptionTop a:link{
	background-color:rgb(100,100,100);
	color:rgb(240,240,240);
	transition:background-color .4s, color .4s;
	text-decoration:underline;

}

.sliderCaptionTop a:visited{
	background-color:rgb(100,100,100);
	color:rgb(180,180,180);
	text-decoration:underline;

}

.sliderCaptionTop a:hover{
	background-color:rgb(204,153,51);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionTop a:active{
	background-color:rgb(250,199,97);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionBottom{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left; 
	display:flex;
	position:relative;
	left:0px;
	bottom:300px;
	z-index:1;
}

.sliderCaptionBottom h3{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	color:rgb(240,240,240);
	background-color:rgba(100,100,100,.975);
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.images{
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
}

.boxshadow{
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

/* SHADOWBOX HAS TO BE A CLASS IN THE HTML FILE AND AN ID IN THE CSS FILE */
#shadowbox{
	position:fixed;
}

.field{
	width:50%;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	padding:0px 5px 0px;
}

#msg{
	width:100%;
	margin:0px;
	padding:5px;
}

#sendmsg{
	width:75px;
	font-size:2.0rem;
	font-size:20px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:5px 0px 0px;
	padding:0px;
}

footer{
	display:block;
	background-color:rgb(0,51,153);
	padding:10px;
}

footer p{
	color:rgb(255,255,255);
}
}

/********************************************************************************************************************/

@media screen and (max-width:960px) and (min-width:480px){

@font-face{
   	font-family:"";
   	src:url(images/.);
}

@font-face{
   	font-family:"";
   	src:url(images/.);
}

html{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	/* Pixels equal REMs for font size ONLY
	ex. 10px=1.0rem */
	font-size:62.5%;
}

h1{
	font-family:"",,serif;
	font-size:34px;
	font-size:3.4rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h2{
	font-family:"",,sans-serif;
	font-size:20px;
	font-size:2.0rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h3{
	font-family:"",,sans-serif;
	font-size:16px;
	font-size:1.6rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h4{
	font-family:"",,sans-serif;
	font-size:14px;
	font-size:1.4rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h5{
	font-family:"",,sans-serif;
	font-size:12px;
	font-size:1.2rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

p{
	font-family:"",,sans-serif;
	font-size:14px;
	font-size:1.4rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

body{	
	/* MARGIN MUST BE SET TO GET RID OF OUTSIDE MARGINS OF WEBPAGE */
	margin:0px;
	padding:0px;
}

#wrapper{
  	/* Safari 3.1-6.1, iOS 6- */
  	display:-webkit-box;
  	/* IE 10 & IE Mobile 10 */
  	display:-ms-flex;
  	/* Partial support for Firefox 4-27 */
  	display:-moz-flex;
  	/* Chrome 21-28, Safari 6.1+, Opera 15-16, iOS 7.1+, partial support for Android 2.1-4.3, Blackberry 7, & UC 9.9(Android) */
  	display:-webkit-flex;
  	/* IE 11/Edge, Firefox 28+, Chrome 29+, Opera 12.1 & 17+, Opera Mini 8, Blackberry 10, Opera Mobile 12.1 & 30, Android 42(Chrome) 39(Firefox), IE Mobile 11 */
  	display:flex;
  	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:center;
        justify-content:center;
	-webkit-align-items:stretch;
        align-items:stretch;
        max-width:960px;
        height:auto;
	margin:0px;
   	padding:0px;

	> section{
		max-width:960px;
        	height:auto;
		margin:0px;
		padding:0px;
		flex:1 100%;
	}
}

.onecol{
	max-width:960px;
        height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%;
}

.twocol{
	max-width:460px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%
}

.threecol{
	max-width:300px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%;
}

.fourcol{
	max-width:220px;
	height:auto;
	margin:0px 10px 10px 10px;
	padding:0px;
	flex:1 100%;
}
	
header{
	background-color:rgb(255,255,255);
}

#logo{
	/* DISPLAY MUST BE IDENTIFIED TO CENTER IMAGE */
	display:block;
	/* WIDTH MUST BE SET TO KEEP LINK FROM SPANNING WHOLE PAGE */
	width:306px;
	margin:auto;
}

nav{
	background-color:rgb(0,51,153);
	font-size:22px;
	font-size:2.2rem;
	text-align:center;
	width:100%;
	margin:auto;
	padding:0px;
}

	nav > ul{
		list-style:none;
		margin:auto;
		padding:10px;
	}
		
		nav > ul > li{
			display:inline;
			margin:10px;
			padding:5px;
		}

a.navi:link{
	color:rgb(255,255,255);
	border-style:transparent;
	border-width:4px;
	border-color:rgb(0,0,0);
	transition:all .4s;
	text-decoration:none;
}

a.navi:visited{
	color:rgb(180,180,180);
	text-decoration:none;
}

a.navi:hover{
	color:rgb(255,255,255);
	text-decoration:underline;
	border-style:inset;
	border-width:4px;
	border-color:rgb(204,153,51);
	margin:0px;
	padding:5px;
}

a.navi:active{
	color:rgba(255,255,255,.8);
	text-decoration:underline;
	border-style:outset;
	border-width:4px;
	border-color:rgb(250,199,97);
}

#contentback{
	background-image:url("images/background.jpg");
	background-color:rgba(255,0,0,.2);
	background-repeat:no-repeat;
	background-position:left top;
	background-repeat:repeat-y;
	width:100%;
}

#content{
	background-color:rgba(255,255,255,.8);
	max-width:960px;
	margin:auto;
	padding:0px;
}

#sliderContainer{
	max-width:940px;
	height:500px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#slider{
	width:100%;
	height:100%;
	padding:0px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#pager{
	width:100%;
	height:30px;
	text-align:center;
	display:block;
	position:absolute;
	bottom:0px;
	margin:auto;
	padding:0px;
	cursor:pointer;
	background-color:rgb(50,50,50);
	z-index:4;
}

#pager a{
	font-size:.0rem;
	color:transparent;
	width:10px;
	height:10px;
	display:inline-block;
	position:relative;
	margin:auto;
	border-width:1px;
	border-style:solid;
	border-color:rgb(255,255,255);
	border-radius:20px;
	background:transparent;
	margin:10px;
}

#pager a.activeSlide{
	background-color:rgb(255,255,255);
}

#controls{
	display:flex;
	position:absolute;
	margin:auto;
	z-index:5;
}

#play{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#play > img{
		width:100%;
		height:100%;
	}

#pause{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#pause > img{
		width:100%;
		height:100%;
	}

#next{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#next > img{
		width:100%;
		height:100%;
	}

#prev{
	width:40px;
	height:40px;
	line-height:40px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#prev > img{
		width:100%;
		height:100%;
	}

.sliderButton{
	background-color:rgb(100,100,100);
	border:0px solid;
	border-radius:10px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	/* FOR Δ */
	/* transform:rotate(90deg); */
	/* -webkit-transform:rotate(90deg); */
}

a.sliderButton:link{
	background-color:rgb(100,100,100);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
	transition:background-color .4s;
}

a.sliderButton:hover{
	background-color:rgb(204,153,51);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

a.sliderButton:active{
	background-color:rgb(250,199,97);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

.sliderCaptionTop{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left;
	display:flex;
	position:relative;
	left:0px;
	bottom:400px;
	margin-right:auto;
	padding:0px;
	z-index:1;
}

.sliderCaptionTop a{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.sliderCaptionTop a:link{
	background-color:rgb(100,100,100);
	color:rgb(240,240,240);
	transition:background-color .4s, color .4s;
	text-decoration:underline;

}

.sliderCaptionTop a:visited{
	background-color:rgb(100,100,100);
	color:rgb(180,180,180);
	text-decoration:underline;

}

.sliderCaptionTop a:hover{
	background-color:rgb(204,153,51);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionTop a:active{
	background-color:rgb(250,199,97);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionBottom{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left; 
	display:flex;
	position:relative;
	left:0px;
	bottom:300px;
	z-index:1;
}

.sliderCaptionBottom h3{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	color:rgb(240,240,240);
	background-color:rgba(100,100,100,.975);
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.boxshadow{
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.images{
	max-width:100%;
}

/* SHADOWBOX HAS TO BE A CLASS IN THE HTML FILE AND AN ID IN THE CSS FILE */
#shadowbox{
	position:fixed;
}

.field{
	width:50%;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	padding:0px 5px 0px;
}

#msg{
	width:100%;
	margin:0px;
	padding:5px;
}

#sendmsg{
	width:75px;
	font-size:2.0rem;
	font-size:20px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:5px 0px 0px;
	padding:0px;
}

footer{
	display:block;
	background-color:rgb(0,51,153);
	padding:10px;
}

footer p{
	color:rgb(255,255,255);
}
}

/********************************************************************************************************************/

@media screen and (max-width:480px){

@font-face{
   	font-family:"";
   	src:url(images/.);
}

@font-face{
   	font-family:"";
   	src:url(images/.);
}

html{
	font-family:"Source Sans Pro",Source Sans Pro,sans-serif;
	/* Pixels equal REMs for font size ONLY
	ex. 10px=1.0rem */
	font-size:62.5%;
}

h1{
	font-family:"",,serif;
	font-size:22px;
	font-size:2.2rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h2{
	font-family:"",,sans-serif;
	font-size:18px;
	font-size:1.8rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h3{
	font-family:"",,sans-serif;
	font-size:14px;
	font-size:1.4rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h4{
	font-family:"",,sans-serif;
	font-size:12px;
	font-size:1.2rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

h5{
	font-family:"",,sans-serif;
	font-size:10px;
	font-size:1.0rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

p{
	font-family:"",,sans-serif;
	font-size:12px;
	font-size:1.2rem;
	color:rgb(0,0,0);
	/* MARGINS MUST BE DECLARED TO PREVENT UNPREDICTABLE MARGIN SPACING BETWEEN BODIES OF TYPE */
	margin:10px 0px;
}

body{
	/* MARGIN MUST BE SET TO GET RID OF OUTSIDE MARGINS OF WEBPAGE */
	margin:0px;
	padding:auto;
}

#wrapper{
  	/* Safari 3.1-6.1, iOS 6- */
  	display:-webkit-box;
  	/* IE 10 & IE Mobile 10 */
  	display:-ms-flex;
  	/* Partial support for Firefox 4-27 */
  	display:-moz-flex;
  	/* Chrome 21-28, Safari 6.1+, Opera 15-16, iOS 7.1+, partial support for Android 2.1-4.3, Blackberry 7, & UC 9.9(Android) */
  	display:-webkit-flex;
  	/* IE 11/Edge, Firefox 28+, Chrome 29+, Opera 12.1 & 17+, Opera Mini 8, Blackberry 10, Opera Mobile 12.1 & 30, Android 42(Chrome) 39(Firefox), IE Mobile 11 */
  	display:flex;
  	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:center;
        justify-content:center;
	-webkit-align-items:stretch;
        align-items:stretch;
        max-width:480px;
        height:auto;
	margin:0px;
   	padding:0px;

	> section{
		max-width:480px;
        	height:auto;
		margin:0px;
		padding:0px;
		flex:1 100%;
	}
}

.onecol{
	max-width:460px;
        height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%;
}

.twocol{
	max-width:460px;
	height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%
}

.threecol{
	max-width:460px;
	height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%
}

.fourcol{
	max-width:460px;
	height:auto;
	margin:10px;
	padding:0px;
	flex:1 100%
}

header{
	background-color:rgb(255,255,255);
}

#logo{
	/* DISPLAY MUST BE IDENTIFIED TO CENTER IMAGE */
	display:block;
	/* WIDTH MUST BE SET TO KEEP LINK FROM SPANNING WHOLE PAGE */
	width:306px;
	margin:auto;
}

nav{
	background-color:rgb(0,51,153);
	font-size:14px;
	font-size:1.4rem;
	text-align:center;
	width:100%;
	margin:auto;
	padding:0px;
}

	nav > ul{
		list-style:none;
		margin:auto;
		padding:10px;
	}
		
		nav > ul > li{
			display:inline;
			margin:10px;
			padding:5px;
		}

a.navi:link{
	color:rgb(255,255,255);
	border-style:transparent;
	border-width:4px;
	border-color:rgb(0,0,0);
	transition:all .4s;
	text-decoration:none;
}

a.navi:visited{
	color:rgb(180,180,180);
	text-decoration:none;
}

a.navi:hover{
	color:rgb(255,255,255);
	text-decoration:underline;
	border-style:inset;
	border-width:4px;
	border-color:rgb(204,153,51);
	margin:0px;
	padding:5px;
}

a.navi:active{
	color:rgba(255,255,255,.8);
	text-decoration:underline;
	border-style:outset;
	border-width:4px;
	border-color:rgb(250,199,97);
}

#contentback{
	background-image:url("images/background.jpg");
	background-color:rgba(255,0,0,.2);
	background-repeat:no-repeat;
	background-position:left top;
	background-repeat:repeat-y;
	width:100%;
}

#content{
	background-color:rgba(255,255,255,.8);
	max-width:480px;
	margin:auto;
	padding:0px;
}

#sliderContainer{
	max-width:480px;
	height:255px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#slider{
	width:480px;
	height:100%;
	padding:0px;
	display:block;
	position:relative;
	margin:auto;
	overflow:hidden;
}

#pager{
	width:100%;
	height:30px;
	text-align:center;
	display:block;
	position:absolute;
	bottom:0px;
	margin:auto;
	padding:0px;
	cursor:pointer;
	background-color:rgb(50,50,50);
	z-index:4;
}

#pager a{
	font-size:.0rem;
	color:transparent;
	width:10px;
	height:10px;
	display:inline-block;
	position:relative;
	margin:auto;
	border-width:1px;
	border-style:solid;
	border-color:rgb(255,255,255);
	border-radius:20px;
	background:transparent;
	margin:10px;
}

#pager a.activeSlide{
	background-color:rgb(255,255,255);
}

#controls{
	display:flex;
	position:absolute;
	margin:auto;
	z-index:5;
}

#play{
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#play > img{
		width:100%;
		height:100%;
	}

#pause{
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#pause > img{
		width:100%;
		height:100%;
	}

#next{
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#next > img{
		width:100%;
		height:100%;
	}

#prev{
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	display:block;
	color:rgb(255,255,255);
	cursor:pointer;
}

	#prev > img{
		width:100%;
		height:100%;
	}

.sliderButton{
	background-color:rgb(100,100,100);
	border:0px solid;
	border-radius:10px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	/* FOR Δ */
	/* transform:rotate(90deg); */
	/* -webkit-transform:rotate(90deg); */
}

a.sliderButton:link{
	background-color:rgb(100,100,100);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
	transition:background-color .4s;
}

a.sliderButton:hover{
	background-color:rgb(204,153,51);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

a.sliderButton:active{
	background-color:rgb(250,199,97);
	text-decoration:none;
	border:0px solid;
	border-radius:10px;
}

.slide{
	width:100%;
}

.sliderCaptionTop{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left;
	display:flex;
	position:relative;
	left:0px;
	bottom:225px;
	margin-right:auto;
	padding:0px;
	z-index:1;
}

.sliderCaptionTop a{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.sliderCaptionTop a:link{
	background-color:rgb(100,100,100);
	color:rgb(240,240,240);
	transition:background-color .4s, color .4s;
	text-decoration:underline;

}

.sliderCaptionTop a:visited{
	background-color:rgb(100,100,100);
	color:rgb(180,180,180);
	text-decoration:underline;

}

.sliderCaptionTop a:hover{
	background-color:rgb(204,153,51);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionTop a:active{
	background-color:rgb(250,199,97);
	color:rgb(250,250,250);
	text-decoration:underline;

}

.sliderCaptionBottom{
	width:100%;
	height:auto;
	line-height:normal;
	text-align:left; 
	display:flex;
	position:relative;
	left:0px;
	bottom:175px;
	z-index:1;
}

.sliderCaptionBottom h3{
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	padding:10px;
	color:rgb(240,240,240);
	background-color:rgba(100,100,100,.975);
	border:0px solid black;
	border-radius:10px;
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

.images{
	max-width:100%;
}

#profilePic{
	width:100%;
}

.boxshadow{
	-webkit-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	-moz-box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
	box-shadow:3px 3px 7px 0px rgba(0,0,0,0.75);
}

/* SHADOWBOX HAS TO BE A CLASS IN THE HTML FILE AND AN ID IN THE CSS FILE */
#shadowbox{
	position:fixed;
}

.field{
	width:65%;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:0px 10px 0px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	padding:0px 5px 0px;
}

#msg{
	width:75%;
	margin:0px;
	padding:5px;
}

#sendmsg{
	width:75%;
	height:50px;
	font-size:2.0rem;
	font-size:20px;
	/* TOP, RIGHT & LEFT, BOTTOM */
	margin:5px 0px 0px;
	padding:0px;
}

footer{
	display:block;
	background-color:rgb(0,51,153);
	padding:10px;
}

footer p{
	color:rgb(255,255,255);
}
}