body {
    margin: 0;
    font-family: 'Courier Prime';
	font-size:16px;color:#777777;font-variant: normal;}
}

a:focus {
    outline: 0;
}
a:active,
a:hover {
    outline: 0; background-color:LightGrey;
}

audio:webkit-media-comtrols-enclosure {
    border-radius: 0; 
}


ul {
  list-style-type: none;
  padding: 0;
  background-color: white;
Max-width:200px;
}

img {max-width:100%;height:auto;}

li a {
  display: block;
  color: grey;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover:not(.active) 
{background-color: #E5E7E9;}

li a.active 
{background-color: #F8F9F9;}



@media screen and (max-width: 1000px) {
  ul.
{float: none;}
}

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
  
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
  .column {
    width: 100%;
  }
}

/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	
}


/*  GRID OF SEVEN  */
.span_7_of_7 {
	width: 100%;
}

.span_6_of_7 {
  	width: 85.48%;
}

.span_5_of_7 {
  	width: 70.97%;
}

.span_4_of_7 {
  	width: 56.45%;
}

.span_3_of_7 {
  	width: 41.94%;
}

.span_2_of_7 {
  	width: 27.42%;
}

.span_1_of_7 {
  	width: 12.91%;
}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 1000px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_7, .span_2_of_7, .span_3_of_7, .span_4_of_7, .span_5_of_7, .span_6_of_7, .span_7_of_7 { width: 100%; }
}


.group:after {
	clear:both;
}
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }



.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 83.06%;
}

.span_4_of_6 {
  	width: 66.13%;
}

.span_3_of_6 {
  	width: 49.2%;
}

.span_2_of_6 {
  	width: 32.26%;
}

.span_1_of_6 {
  	width: 15.33%;
}
/*  GO FULL WIDTH AT LESS THAN 1000 PIXELS */

@media only screen and (max-width: 1000px) {
	.span_6_of_6 {
		width: 100%; 
	}
	.span_5_of_6 {
		width: 100%; 
	}
	.span_4_of_6 {
		width: 100%; 
	}
	.span_3_of_6 {
		width: 100%; 
	}
	.span_2_of_6 {
		width: 100%; 
	}
	.span_1_of_6 {
		width: 100%; 
	}
}
.navbox { 
	background:FFFFFF;
	margin: 25px 0px 0px 0px; 
	padding: 15px 25px 20px 25px;
	font-size:12px;
} 

.contentbox { 
	background:FFFFFF;
	margin: 0px 20px 20px 0px; 
	padding: 20px 25px 20px 25px;
	border-color:#CCCCCC; border-style:solid; border-width: 2px;
} 
.headerbox { 
	background:#F8F9F9;
	margin: 50px 20px 50px 0px; 
	padding: 0px 50px 0px 50px;
border-color:#CCCCCC; border-style:solid; border-width: 1px;
clear: both;
	
} 

.descriptionbox { 
	
	padding: 0px 20px 0px 20px;
	
} 
.frontpagebox { 
	
	margin: 0px 20px 0px 0px;
	
} 


/*  slideshow */

* {box-sizing: border-box}

.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}