html,body {
	position:relative;
	margin:0;
	padding:0;
	height:6000px;
	width: 100%;
	font-family:Trebuchet, Trebuchet MS, Sans;
	font-size:16px;
}

html {display: table}
body {display: table-cell}
body {margin: 0}


p {color:#000000; font-size:1rem; line-height:1.5rem}
a {color:#444499}
a:hover {color:#8888ff}

h1 {width:100%; text-align:center; font-size:1.1rem}
h2 {width:100%; text-align:center; font-size:0.95rem}
h3 {margin-left:0px; margin-top:30px; text-align:left; font:1.25rem normal Trebuchet,Sans; color:#cc0000}
h4 {margin-left:0px; margin-top:20px; text-align:left; font:1rem normal Trebuchet,Sans; color:#cc0000}

.container {position:relative; top:0px; height:6000px; max-width:90%; margin:0 auto; padding-bottom:40px; background:#ffffff; display: flex; flex-wrap: wrap}

.header {position:absolute;  width: 100%; top: 0px; height: 130px; background:#ffffee}

.header .image-left {position: absolute; display:block; height:100px; width: 15%; left: 0%; margin: 0 auto;}
.header .image-left img {max-width:100%; display:block; padding-top:15px; margin:0 auto}

.header .headertext {position: absolute; display:block; height:100px; width: 70%; top:10px; left: 15%; text-align: center; color: #cc0000}
.header .headertext h1 {font-weight:normal; width:100%; margin:10px 0; text-align:center; line-height:2rem; font-size:1.8rem; padding:0px; color:#cc0000}
.header .headertext h2 {font-weight:normal; width:100%; margin:0; text-align:center; line-height:1.5rem; font-size:0.95rem; padding:0px; color:#cc0000}

.header .image-right {position: absolute; display:block; height:100px;  width: 15%; left: 85%; margin: 0 auto}
.header .image-right img {max-width:100%; display:block; padding-top:15px; margin:0 auto}



.top-menu {position:absolute; width:100%; top:110px}
.top-menu ul {width:94%; text-align:justify; padding:6px 3% 6px; background:#e0e0ff}
.top-menu ul {list-style:none; position:relative; float:left; display:inline}
.top-menu ul li {position:relative;	float:left}
.top-menu ul li a {display:block; font-size:1.2rem; line-height:1.6rem;text-decoration:none}

.content {position:absolute; display:flex; flex-wrap:wrap; flex-direction:row; width:100%; margin-top:210px; background:#ffffff}

.content .sub-menu {width: 20%; padding:0}
.content .sub-menu p {position:relative; width:100%; left:2%}
.content .sub-menu p a {width:80%; margin:2px 5% 2px 10%; padding: 8px 0; font-size:1.1rem; line-height:1.4rem; display:block; text-decoration:none}

.content .content-text {width: 72%; margin-left:2%; text-align:justify}
.content .content-text h3 {width:94%; padding:0 3%; margin:30px 0}
.content .content-text h4 {margin:20px 0; padding:0 3%}
.content .content-text p {width:94%; padding:0 3%; text-align:justify}
.content .content-img {width:auto; margin:0 auto; padding:10px}

table {margin:20px auto; border:2px solid #ffaeae; border-collapse:collapse}
table th {color:#990000; background:#ffaeae; border:1px solid #ffaeae; border-collapse:collapse; padding:2px 10px; font-weight:normal}
table td {border:1px solid #ffaeae; border-collapse:collapse; padding:2px 10px}

ol li {padding-right:3%}

@media only screen and (max-width: 3600px) {
    .header .headertext h1 {font-size:1.7rem}
    .header .headertext h2 {font-size:1.25rem}
    .top-menu ul li a {font-size:1rem; line-height:1.4rem; padding:4px 12px}
}
    
@media only screen and (max-width: 1359px) {
    .header .headertext h1 {font-size:1.5rem; line-height:2.1rem}
    .header .headertext h2 {font-size:1.15rem; line-height:1.7rem}
    .top-menu ul {width:96%; text-align:justify; padding:6px 2% 6px}
    .top-menu ul li a {font-size:1rem; line-height:1.4rem; padding:2px 6px}
}

/* Tablet Styles */

@media only screen and (max-width: 1023px) {
    .content .content-text p {padding: 0 20px}
    .content .content-img {width:auto; float:left; padding-bottom:20px}
    .content .sub-menu p a {font-size:0.9rem}
}

@media only screen and (max-width: 768px) {
    html {font-size:14px}
    
    .header .image-left {width: 15%}
    .header .headertext {width: 70%; left: 15%}
    .header h2 {font-size:0.8rem}
    .header .image-right {width: 15%; left: 85%}

    .top-menu {position:absolute; width:100%; top:95px}
    .top-menu ul li a {font-size:0.85rem; line-height:1.2rem; padding:2px 6px}
    
    .content {margin-top:230px; flex-direction:column}
    
    .content .sub-menu {min-width:100%; margin:0; padding:10px 0 0 0}
    .content .sub-menu p {width:100%; left:0; text-align:left; margin:0}
    .content .sub-menu p a {width:50%; padding-left:15%; padding-top:2px; padding-bottom:2px; font-size:0.9rem}
    
    .content .content-text {min-width:98%; margin-left:0; padding: 0px 1%; text-align:justify}
    .content .content-img {width:100%; text-align:center; padding:10px 0px}
    .content .content-img img {width:90%}
    .content .content-text p {padding: 10px}
}

@media only screen and (max-width: 600px) {
    .header .headertext h1 {font-size:1.3rem; line-height:1.8rem}
    .header .headertext h2 {font-size:1rem; line-height:1.4rem}
    /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
    .column {width: 100%; height: auto}
  }
}
}

@media only screen and (max-width: 480px) {
    .sub-menu {top:180px}
}