/* CSS Document */
.flex-container{
	padding: 1rem;
    width: 100%;
    display: flex;
  flex-flow: row nowrap;
  /* This aligns items to the end line on main-axis */
 }
.flex-container > div { width: 100%;}
    /* whatever you want */
.margleft {padding-left:5rem;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav {display: block}
html {font-size: 100%; }
:hover, :focus, :active { outline: none;}
html, button, input, select, textarea {font-family: Raleway,Verdana,Arial;
	font-weight: 500; /* normal */
	color: #000; 
		text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
body { margin: 0; font-size: 16px; line-height: 1.6; text-align: justify;}
a { color:red; font-weight: normal;cursor: pointer;  text-decoration: none;transition:color 0.2s ease;}
a:hover {color: black; text-decoration: none; } 
p{margin: 0 0 1em;}
p:last-child {margin-bottom: 0;}
a:active, a:focus{color:#000;position:relative;top:1px;}
ul, ol{list-style:none; list-style-image:none; margin:0; padding:0;}
img{border:0;  vertical-align:middle; }
.marg{margin-top:-3em;}
@font-face { font-family:Signika; }
.speech {font-style:italic; font-weight:bold}
.custom{font-weight:800;}
.custom2 {font-size:1.3rem;}

.tcenter {text-align:center;}
.pos {margin-left: 20%;margin-right: 20%;}
h1,h2,h3,h4,h5,h6{margin:0 0 1em; font-weight: normal;}
h1 {font-size: 2.5rem; 
	font-family: 'Signika', sans-serif;
	letter-spacing: -0.075em;
	text-align:center; 
	text-transform: uppercase; 
	line-height: 0.9; 
	color: #333;	margin: 0 0.5em 0.5em 0; 
	font-weight: normal; 
	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);}	
body{width:100%; background: url(../img/stripes.png) no-repeat 25% 0;}
div#centerDiv {width: 100%;text-align: center;}
    .centerUL li {display: inline;padding-right: 1em; padding: 0 2em 0 2em;border-right: 1px solid #DDD; font-size: 0.8em; text-align: center;}
	.centerUL li.extra {display: inline;padding-right: 1em; border-right:none; font-size: 0.8em; padding: 0 2em 0 2em;text-align: center;}
.container2 {width: 100%;text-align: center;font-size: 0.8em;}
.container3 {margin: 0 auto; width: 70%; padding:5px; text-align: center; border-style:solid; border-width:1px;border-radius: 8px; border-color:#999;}
.container4 { width: 50%;  margin: 0 auto; text-align: center; border-style:solid; border-width:1px;border-radius: 8px; border-color:#999;}
.col-one-half {width: 60%; margin:auto; }
img { max-width: 100%; height: auto; width: auto; }
header#navtop { }
header nav ul { float: right; overflow: hidden; padding: 0 3em 0 2em;  border-right: 1px solid #ddd;line-height: 2em; }
nav a { text-decoration: none;  }
.logo:hover {background: none;}
@media (max-width: 950px ){
	h1 {font-size: 2.2rem; white-space: nowrap;}
	header nav ul {float:right;text-align:center;text-justify:auto; font-size:85%; display: block; overflow: hidden; padding: 1em 3em 0 2em;  border-right: 1px solid #ddd;line-height: 1.5em; }
	}
@media (max-width: 800px ){
	h1 {font-size: 2.0rem; white-space: nowrap;}
	header nav ul { float:right;text-align:center;text-justify:auto; font-size:75%; display: block; overflow: hidden; padding: 1.5em 3em 0 2em;  border-right: 1px solid #ddd;line-height: 1.5em; } 
	.margleft {padding-left:2rem;}
	
		}
@media only screen and (max-width: 650px) {
   	header nav ul { float:right;text-align:center;text-justify:auto; font-size:65%; display: block; overflow: hidden; padding: 1.8em 3em 0 2em;  border-right: 1px solid #ddd;line-height: 1.0em; } 
		h1 {font-size:1.8rem;}
	.margleft {padding-left:0;}
	.container4 { width: 100%; }
}
@media only screen and (max-width: 550px) {
	.deskContent {visibility: hidden;}
	.phoneContent {visibility: hidden;}
	header nav ul { float:right;text-align:center;text-justify:auto; font-size:25%; display: block; overflow: hidden; padding: 0;  border: none ;} 
		h1 {font-size:1.6rem;}
	.margleft {padding-left:0;}
	.centerUL li { padding: 0 2em 0 0em;border:none; text-align: center;}
	.centerUL li.extra {display: inline;padding-right: 1em; border-right:none; font-size: 0.8em; padding: 0 2em 0 0em;text-align: center;}
}
@media only screen and (max-width: 350px) {
	.deskContent {visibility: hidden;}
	.phoneContent {visibility: hidden;}
	header nav ul { float:none;text-align:center;text-justify:auto; font-size:25%; display: block; overflow: hidden; padding: 0;  border: none ;} 
		h1 {font-size:1.3rem;}
	.margleft {padding-left:0;}
	.margleft3{margin-right:-1em;margin-top:-5em;}
	.centerUL li { padding: 0 1em 0 0em;border:none; text-align: center;}
	.centerUL li.extra {display: inline;padding-right: 1em; border-right:none; font-size: 0.8em; padding: 0 1em 0 0em;} 
}