/* Color Legend */
/* Reset */
html, body { margin: 0; padding: 0; border: 0; background: transparant; font-size:10px }
div, span, article, aside, footer, header, hgroup, nav, section,
h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, table, tr,
th, td, tbody, tfoot, thead {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: transparent;
}
img { margin:0; padding: 0; border:0 }
table, tr, th, td, tbody, tfoot, thead {
margin: 0; padding: 0; border: 0;
vertical-align:baseline;
background:transparent;
}
table { border-collapse: collapse; border-spacing: 0: }
input, select, textarea, form, fieldset {
margin:0; padding: 0; border: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display:block; }
h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
font-weight:normal;
line-height:100%;
text-indent: 0;
text-decoration: none;
text-align: left;
color: #000;
}
ol, ul { list-style: none;}
/* Global */
html { }
body {background-color:white; }
/* Headings */
h1, h2, h3, h4, h5, h6 { color: #000; }
h1 { font-size:24px; }
h2 { font-size:20px; }
h3 { font-size:16px; }
h4 { font-size:14px; }
h5 { font-size:14px; }
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img ( margin: 0; )
/* Text Elements */
p {color:#000; font-size:12px; line-height:150%; }
p .left {margin: 1.5em li5em 1.5em 0; padding: 0; }
p .right {margin: 1.5em 0 1.5em 1.5em; padding: 0; }
a { }
a:link { color: #00f; }
a:visited { color: #0f0; }
a:active { color: #000; }
a:focus { color: #666; }
a:hover { color: #f00; }
blockquote { color:#000; font-size:12px; }
strong { font-weight: bold; }
em { font-style:italic; }
/* Images */
/*Lists */
ul { }
ol { list-style-type:decimal; }
ul li { color:000; font-size:12px; }
ol li { color:000; font-size:12px; }
dl { }
dt { }
dd { }
/* Table */
table { width:100%; }
tr { }
.odd { background-color:#eee; }
.even {background-color:#fff; }
th { font-weight:bold: }
thead, th { background: #ccc; }
tbody { }
th, td, captionc { }
caption { }
tfoot { }
.tfooter { background-color:#ccc; text-align:center; font-style:italic; }
caption { background:#efefef; }
/*Miscellaneous*/
sup, sub { line-height: 0;}
abbr, acronym { border-bottom: 1px dotted #666; }
address { }
del {background:FFCECE; color:#f00; }
code, pre {background-color:#FF9; padding:2px 0px; margin: 4px 25px;
font-family:"Courier New", Courier, monospace; font-size:12px; }
/* Containers */
#button {display:none; position:fixed; top:10px; right:1%; z-index:9999999999999999999999999999999;}
#topper {position:relative; float:left; width:100%;}
.fa-arrow-up {position:fixed; bottom:20px; right:20px; background-color:#f36c23; padding:24px; color:white; z-index:999999999; border-radius:360%; font-size:140%;}
.fa-bars { padding: 15px; color: black; cursor: pointer; background-color: rgba (0, 0, 0, 0.9); font-size: 3.5em; opacity:1; z-index:999999999999999999999999999999;}
.fa-times {color:white; top:40px; right:20px; position:absolute; font-size:150%; cursor:pointer; font-weight:100;}
.sidebar_menu { position:fixed; right:-130%; top:80px; overflow:hidden; bottom:130%; margin:-10px 0 0 0; padding:0; z-index:9; width: 40%; background-color:#211F1F; opacity: 1; transition: 1.3s ease-in-out; z-index:9; }
.hide_menu { right:0px; bottom:0; }
.hide_menu2 { background-color:none; transition: 1.3s ease-in-out;}
.hide_menu20 {z-index:9; transition:.3s ease;}
#topnav {margin: 60px 2% 10px 2%; display:block; width:80%; float:left; }
#topnav h1 {color:white; text-align:left; margin:10px 2% 34px 3%; font-family: 'Raleway', sans-serif; font-size:240%; font-weight:100; }
#topnav li {padding:6px 0px; box-sizing:border-box; color: D8D8D8; transition: all .6s ease-in-out; cursor: pointer; }
#topnav li a {color:white; line-height:20px; display:block; text-align: left; border-bottom:1px darkgrey solid; font-family:cursive; background-color:none; font-weight: 700; font-family: 'Raleway', sans-serif; padding:4px 10px; box-sizing:border-box; font-size:140%; color:white; cursor: pointer; width:100%; }
#topnav li a:hover{color:#f36c23; transition: all 0.3s ease-in-out; }
#topnav ul li:hover:{background-color:grey ; color:white;}
.show-list { float:left; width:60%; margin:10px 3%;}
.show-list h3 {text-align:center; font-size:300%; color:white; font-family: 'Fredericka the Great', cursive; }
.show-list iframe {float:left; width:40%; margin:40px 5% 10px 5%;}
#topa {float:left; position:fixed; left:0; top:0; margin:0; height:90px; background-color:white; width:100%; z-index:9999999;}
#topa h1 { padding-top:26px; margin-left:3%; font-weight:600; float:left; width:100%; color:white; font-size:300%; font-family: 'Lora', serif; }
#topa2 {width:100%; height:90px; background-color:white; position:relative; float:left; }
.toggle_menu { padding: 15px; color: white; cursor: pointer; background-color: rgba (0, 0, 0, 0.9); font-size: 3em; opacity:1; z-index:9999}
.toggle_menu2 { padding: 15px; color: black; cursor: pointer; background-color: rgba (0, 0, 0, 0.9); font-size: 3em; opacity:1; z-index:9999}
#backup {display:none; margin-top:0px; top:10px;}
#button2 {position:absolute; top:550px; left:47.5%; z-index:2; color:white; z-index:999;}
#button2 .fa-angle-double-down {padding:15px; color:white; cursor:pointer; font-size: 5em; opacity:2; }
#video {float:left; position:relative; width:100%; overflow:hidden;}
#video img {display:none; width:100%; height:auto; margin-top:70px;}
#topvid {float:left; margin-top:60px; margin-bottom:-10px;position: relative; width: 100%; min-height: 100%; z-index:99;}
#top { position:fixed; height:90px; top:0px; left:0; background-color:white; width:100%; z-index:999999999999; margin:0; box-shadow:0 0 5px black; }
#top .title { position:relative; float:left; height:90px; width:10%; margin:0 2% 0 5%; }
#top .title h1 { padding-top:26px; font-weight:600; float:left; width:100%; color:white; font-size:300%; font-family: 'Lora', serif; }
#top .title img {width:auto; height:82%; padding-top:5%; margin-top:0px; opacity:4; filter:brightness(107%) contrast(140%);}
#top .topnav3 {display:inline; float:left; margin:14px 2% 0 3%; width:60%; position:relative; font-weight:bold; z-index:999999999999; height:45px; }
#top .topnav3 ul { float:left; background-color:none; padding:0px; list-style:none; width:100%; margin:0 0% 0 0%; z-index:9999999; }
#top .topnav3 ul li {display:inline; width:auto; float:left; text-align:center; position:relative; margin:0 4%; z-index:9999999;}
#top .topnav3 ul li a {color:black; text-align:center; padding:25px 0px; font-weight:800; font-size:150%; font-weight:bold;z-index:9999; font-family: 'Lato', sans-serif; display:block; text-align:center; }
#top .topnav3 a:link {color:black; }
#top .topnav3 a:visited {color:black; }
#top .topnav3 a:active {color:black; }
#top .topnav3 a:hover {color:black; text-decoration:underline; transition:.3s ease; }
#top .topnav3 ul li ul li a:hover {color:white; height:20px; z-index:99999999999;}
#top .topnav3 ul ul a:link {color:white;}
#top .topnav3 ul ul a:visited {color:white; }
#top .topnav3 ul ul a:active {color:white;}
#top .topnav3 .small {width:20%;}
#top .topnav .big {width:30%;}
#top .topnav3 .site { width: 17%; height:auto; padding:0px 0% 0px 0%; margin:0px 0 0 20%; color:white; border-radius:5px;}
#top .topnav3 .site:link {color:white;}
#top .topnav3 .site a:visited {color:white; }
#top .topnav3 .site a:active {color:white; }
#top .topnav3 .site:hover {color:white; opacity:.95; transition:.3s ease;}
#top .topnav3 .site a:hover {text-decoration:none;}
#top .site a:link {color:white;}
#top .topnav3 .site img {height:100%; margin-top:-13px;}
#top .topnav3 ul ul { display: none; width:100%; height:auto; z-index:999999999999; }
#top .topnav3 ul li ul li { width:100%; height:60px; color:#364244; line-height:20px; display:block; z-index:9999;
text-align: center; font-family:cursive; border:1px solid gray; }
#top .topnav3 ul li ul li a {font-size: 120%; line-height:18px; z-index:9999; }
#top .topnav3 ul li:hover > ul {display:block; margin:0px; color:#364244; background-color:#f36c23; z-index:999999999; width:100%}
#top .topnav3 .padding {padding-bottom:10px;}
#top .topnav3 .padding:hover {height:50px; padding-bottom:20px; }
#top .topnav3 a:focus {color:#ffffff; }
#top .bold {font-weight:700;}
#top .topnav3 .long {width:150%; background-color:#f36c23; margin-left:-25%;}
#top .social {float:right; width:15%; margin:0 3% 0 0;}
#top .social ul {float:right; margin-top:30px; width:100%; }
#top .social ul li {font-size:280%; color:black; width:auto; float:right; margin-right:10%;}
#top .social ul li a {color:black;}
#social {position:fixed; top:180px; right:0; width:45px; background-color:rgba(100, 100, 100, .8); height:auto; z-index:9999999; box-shadow:0 0 10px black;}
#social ul {width:100%; float:left; position:relative; }
#social ul li {list-style:none; margin-left:7px; margin:10px 0 10px 0; text-align:center;}
#social ul li a {color:white; font-size:170%; text-shadow:.5px .5px .5px black;}
#social .fa-facebook {margin-left:2px;}
#social .fa-twitter {}
#social .fa-instagram {}
#social .fa-linkedin {}
#social .fa-foursquare {margin-left:2px;}
#social .fa-youtube-play {margin-left:-2px;}
#social .no {margin-bottom:10px;}
#banner {float:left; position:relative; z-index:1; width:100%; margin:-100px 0 0px 0; overflow:hidden; background-color:rgba(0,0,0,.2); z-index:99;}
#banner img { width:100%; height:auto; float:left; position:relative; opacity:1;}
#banner .left img {float:left; position:relative; display:inline; width:30%; margin:-80px 35% 0px 35%; z-index:99999; padding:0;}
#banner .left h1 {position:relative; margin:-620px 0 0px 0; text-align:center; font-size:600%; text-shadow:.5px .5px .5px black; font-family:tahoma; color:#004276; font-weight:800;}
h1 .anton {font-family: Oswald; line-height:80px; font-size:150%; color:white;}
#banner .left {float:left; position:relative; width:100%; padding-bottom:26px; margin-top:0px; height:auto; margin-left:0%; z-index:99; background-color:rgba(0, 0, 0, .99); }
#banner .left h2 { position:relative; margin-top:20px; color:#f36c23; font-weight:700; font-family:tahoma; line-height:34px; text-shadow:.2px .2px .2px black; text-align:center; padding:14px 0px; font-size: 500%;}
#banner .left h3 { position:relative; margin-top:20px; color:#004276; font-weight:700; font-family:tahoma; line-height:34px; text-shadow:.2px .2px .2px black; text-align:center; padding:14px 0px; font-size:500%;}
#banner .left p {position:relative; margin:0px 0 0px 0; padding:0; text-align:center; font-size:160%; text-shadow:1px 1px 1px #031234; font-family: 'Anton', sans-serif; filter:brightness(107%) contrast(140%); color:white;}
#banner .left a {text-decoration:none; color:white;}
#banner .line {height:10px; width:50%; margin-left:25%; border-bottom:3px gold solid;}
#backup {display:none;}
#bannerss { float:left; position:relative; z-index:1; width:100%; margin:50px 0 170px 0; height:180px; overflow:hidden; background-color:white;}
#bannerss img { width:100%; height:auto; float:left; position:relative; margin-top:-50px;}
.top {display:inline; background-color:transparant; position:fixed; height:70px; top:0px; left:0; width:100%; z-index:99999999; margin:0; }
.top .title {display:none; position:relative; float:left; height:70px; width:86%; margin:0 0 0 2%;}
.top .title h1 { padding-top:26px; font-weight:600; float:left; width:100%; color:white; font-size:250%; font-family: 'Lora', serif; }
.top .title img {width:auto; height:100%; margin-top:0px; opacity:4; filter:brightness(107%) contrast(140%);}
.top .menu {display:none; float:right; position:relative; width:15%; margin-right:0%; height:100%; }
.top .menu ul {position:relative; width:auto; margin-top:0px; float:right; }
.top .menu ul li {float:left; position:relative; list-style:none; display:inline; margin:0px 0 0 23px; padding-top:25px; color:white; font:13px/19px Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif; font-size:100%; font-weight:600; }
.top .menu ul li a {color:white; border-radius:24px; text-decoration:none;font:13px/19px Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif; font-size:140%; font-weight:600; border:2px white solid; padding:14px 20px; }
.top .menu ul li a:hover {background:radial-gradient(#fff, #F2F0F0); color:black; transition:.3s ease; }
#vidsplit {float:left; position:relative; width:100%; z-index:999; margin-top:-200px; }
#vidsplit img {float:left; position:relative; width:100%; height:auto; }
#vidsplits {float:left; position:relative; width:100%; z-index:999; margin-top:-40px; }
#vidsplits img {float:left; position:relative; width:100%; height:auto; }
#map {float:left; position:relative; width:100%; margin-top:40px;}
#breaker {float:left; width:100%; background-color:white; height:40px;}
#contents {width:100%; margin:0px 0 100px 0; float:left; position:relative;}
#contents iframe {width:100%; margin:-100px 0 200px 0; float:left; position:relative;}
#signin {width:100%; float:left; position:relative; margin-top:-100px; padding:80px 0 0px 0; z-index:9999; display:none;}
#content {width:100%; background-color:white; float:left; padding-top:20px; position:relative; z-index:9999; height:auto; }
#content img {float:left; position:relative; width:50%; height:auto; margin:10px 25%;}
#content h6 {text-align:center; color:#f36c23; font-size:200%; margin-top:-150px;}
#content h5 {text-align:center; background-color:#f36c23; padding:30px 0; width:40%; color:white; font-weight:800; font-size:300%; margin:20px 30% 60px 30%; box-shadow:0 0 4px black; border-radius:5px;}
#content h3 {text-align:center; color:#004276; font-size:300%; font-weight:800; width:90%; padding:10px 5% 0px 5%; line-height:60px;}
#content h4 {text-align:center; color:black; font-size:200%; font-weight:800; width:90%; padding:0px 5% 20px 5%; margin-top:-20px; line-height:60px;}
#content h2 {text-align:center; color:#004276; font-size:480%; font-weight:800; width:60%; padding:10px 20% 0px 20%; line-height:60px;}
#content p {text-align:center; color:black; font-size:220%; font-weight:700; width:80%; padding:20px 10% 30px 10%; line-height:34px;}
#content iframe { position:relative; float:left; width:70%; margin:-100px 15% 0px 15%; height:800px; padding-bottom:150px;}
#content .first {display:inline;}
#content .second {display:none;}
#content .orange {color:#f36c23; font-size:270%; padding:0px 5% 0px 5%;}
#content a h3:hover {text-decoration:underline;}
#sectional {float:left; position:relative; width:100%; height:auto; margin-top:0px; padding:10px 0 10px 0; background-color:white; height:420px; overflow:hidden;}
#sectional .first {float:left; width:35%; margin:20px 2% 20px 13%; height:360px; overflow:hidden;}
#sectional .first .firsts {float:left; position:absolute; top:30px; width:35%; overflow:hidden; height:360px; z-index:9999; background-color:rgba(0, 0, 0, .4);}
#sectional .first .firsts h3 {font-size:500%; font-weight:800; color:white; width:60%; padding:70px 0% 20px 6%;}
#sectional .first .firsts h5 {font-size:300%; font-weight:800; color:white; width:60%; padding:70px 0% 20px 6%;}
#sectional .first .firsts p {font-size:170%; font-weight:100; color:white; width:80%; padding:0px 0% 0 6%; line-height:30px;}
#sectional .first img {position:relative; width:auto; height:100%; overflow:hidden;}
#sectional .first:hover img {width:auto; height:120%; overflow:hidden; overflow:hidden; margin-top:-10%; transition:.3s ease;}
#sectional .first:hover .firsts {background-color:rgba(0, 0, 0, .1); transition:.3s ease;}
#sectional .second {float:left; width:35%; margin:20px 13% 20px 2%; height:360px; overflow:hidden;}
#sectional .second img {position:relative; width:auto; height:100%; overflow:hidden;}
#sectional .second .seconds {float:left; position:absolute; top:30px; width:35%; overflow:hidden; height:360px; z-index:9999; background-color:rgba(0, 0, 0, .4);}
#sectional .second .seconds h3 {font-size:500%; font-weight:800; color:white; width:60%; padding:70px 0% 20px 6%;}
#sectional .second .seconds .smaller {font-size:400%;}
#sectional .second .seconds h5 {font-size:300%; font-weight:800; color:white; width:70%; padding:70px 0% 20px 6%;}
#sectional .second .seconds p {font-size:170%; font-weight:100; color:white; width:80%; padding:0px 0% 0 6%; line-height:30px;}
#sectional .second:hover img {width:auto; height:120%; overflow:hidden; overflow:hidden; margin-top:-10%; transition:.3s ease;}
#sectional .second:hover .seconds {background-color:rgba(0, 0, 0, .1); transition:.3s ease;}
#sectional .pdf {font-size:70%;}
#splitter {float:left; position:relative; width:100%; height:600px; background-color:#08325a; margin-top:-40px;}
#splitter .text {width:50%; float:left; height:600px; margin-top:30px;}
#splitter .text h6 {font-size:160%; text-align:center; color:white; margin-top:100px;}
#splitter .text h3 {font-size:200%; text-align:center; color:red; margin-top:100px;}
#container1 h3 {font-size:200%; text-align:center; color:red; margin-top:100px;}
#splitter .text h4 {font-size:470%; text-align:center; color:white; margin:60px 5% 50px 5%; width:90%; font-weight:800; line-height:50px;}
#splitter .text p {font-size:200%; text-align:center; color:white; margin:0px 5% 0px 5%; width:90%; font-weight:700; line-height:32px;}
#splitter .text h5 {font-size:160%; text-align:center; color:white; background-color:#f36c23; padding:20px 0; width:30%; margin:10px 35%;}
#splitter .text h5:hover { opacity:.96; background-color:white; color:#f36c23; transition:.4s ease-in-out;}
#splitter .image {width:50%; float:left; height:600px; overflow:hidden;}
#splitter .image img {height:100%; width:auto; overflow:hidden;}
#splitter .text .orange {float:right; color:#f36c23; font-size:200%; text-align:right; margin:20px 15% 0px 15%;}
#contentnew {width:100%; float:left; position:relative; background-color:white; margin-top:-50px; z-index:9999;}
#contentnew h6 {float:left; width:90%; margin:20px 5%; color:#f36c23; font-size:160%;}
#contentnew h3 {float:left; width:50%; margin:20px 5%; color:#004276; font-size:400%; font-weight:800;}
#contentnew h5 {float:left; width:90%; margin:20px 5%; color:#004276; font-size:400%; font-weight:800; line-height:54px;}
#contentnew iframe {width:40%; margin:30px 5%;}
#contentnew .uno {float:left; position:relative; width:29%; margin:30px 0 0 5%;}
#contentnew h4 {font-size:240%; font-weight:800; width:90%; float:left; margin:40px 5% 0 5%;}
#contentnew p {font-size:180%; font-weight:100; width:90%; float:left; margin:6px 5% 6px 5%; line-height:28px; color:black;}
#contentnew p a {color:blue; text-decoration:underline;}
#contentnew .dos {float:left; position:relative; width:29%; margin:30px 1.5%;}
#contentnew .dos h4 {font-size:200%; font-weight:800; margin:20px 5% 0 0;}
#contentnew .dos p {font-size:180%; font-weight:100; margin:20px 5% 0 0; line-height:32px; color:black;}
#contentnew .tres {float:left; position:relative; width:29%; margin:30px 5% 0 0; overflow:hidden;}
#contentnew .tres img {margin:-150px 0 0 -450px;}
.fa-globe-africa {font-size:450%; margin:10px 0; color:#adadad;}
.fa-globe-africa:hover {color:#f36c23; }
.fa-bicycle {font-size:450%; margin:70px 0 10px 0; color:#adadad;}
.fa-bicycle:hover {color:#f36c23;}
.fa-city {font-size:450%; margin:10px 0; color:#adadad;}
.fa-city:hover {color:#f36c23;}
.fa-user-graduate {font-size:450%; margin:70px 0 10px 0; color:#adadad;}
.fa-user-graduate:hover {color:#f36c23;}
#full {width:100%; float:left; position:relative; margin-top:-90px; height:850px; overflow:hidden;}
#full .image {width:100%; float:left; position:relative; overflow:hidden;}
#full .image img {width:100%; float:left; position:relative; height:auto; margin-top:-250px;}
#full .first {display:inline;}
#full .second {display:none;}
#full .text {float:left; margin-top:50px; position:absolute; width:100%; background-color:rgba(0, 0, 0, .5); height:850px; overflow:hidden; z-index:99;}
#full .text h6 {font-size:200%; text-align:center; color:white; margin:220px 0 20px 0;}
#full .text h4 {font-size:500%; text-align:center; color:white; font-weight:800;}
#full .desktopper {display:none;}
#select {width:100%; float:left; position:relative; margin-top:150px;}
#select h6 {float:left; width:90%; margin:20px 5% 0 5%; color:#f36c23; font-size:150%;}
#select h3 {float:left; width:90%; margin:20px 5%; font-size:500%; font-weight:800; color:#08325a; }
#select p {float:left; width:60%; margin:10px 35% 20px 5%; font-size:150%; line-height:30px; font-family: 'IBM Plex Sans', sans-serif;}
#select a {color:#f36c23;}
#select .row1 {float:left; position:relative; width:40%; margin:20px 5%;}
#select .row1 p {float:left; position:relative; font-size:175%; box-shadow:0 0 2px black; width:94%; font-weight:700; margin:-80px 0% 20px 0%; padding:15px 3%; height:auto; z-index:9999; color:white; background-color:#08325a;}
#select .row1 .listing {position:relative; height:auto; width:100%; float:left;}
#select .row1 .listing h5 {position:absolute; top:20px; font-size:200%; font-weight:700;right:0; padding:20px 25px; color:white; background-color:#f36c23; z-index:9999; border-radius:0px 0px 0px 8px;}
#select .row1 img {float:left; position:relative; width:100%; margin:20px 0%; z-index:9; padding:0; box-shadow:0 0 2px black;}
#select .row2 {float:left; position:relative; width:40%; margin:20px 5%;}
#select .row2 p {float:left; position:relative; font-size:175%; box-shadow:0 0 2px black; width:94%; font-weight:700; margin:-80px 0 20px 0%; padding:15px 3%; z-index:9999; color:white; background-color:#08325a;}
#select .row2 .listing {position:relative; height:auto; width:100%; float:left;}
#select .row2 .listing h5 {position:absolute; top:20px; font-size:200%; font-weight:700;right:0; padding:20px 25px; color:white; background-color:#f36c23; z-index:9999; border-radius:0px 0px 0px 8px;}
#select .row2 img {float:left; position:relative; width:100%; margin:20px 0%; box-shadow:0 0 2px black;}
#banners {float:left; position:relative; background-color:#f36c23; width:100%; height:150px; margin-top:-100px; z-index:999999;}
#banners .head {float:left; width:60%; margin:20px 5%;}
#banners .head h4 {float:left; color:white; font-weight:800; font-size:340%; padding:40px 0 0 0;}
#banners .head p {float:left; color:white; font-weight:800; font-size:180%; padding:0px 0 0 0;}
#banners .button {float:left; width:20%; margin:20px 5%;}
#banners .button p {float:right; color:white; font-size:200%; padding-top:60px; margin-right:10%; }
#map {float:left; position:relative; height: 600px; width: 100%; margin-bottom:100px;}
#legend {font-family: Arial, sans-serif; background: #fff; padding: 10px; margin: 10px; border: 3px solid #000;}
#legend h3 {margin-top: 0;}
#legend img {vertical-align: middle; }
#map2 {float:left; position:relative; height: 600px; width: 100%; padding-bottom:0px;}
#map2 iframe {width:70%; margin:20px 15%; height:500px; float:left; padding:0;}
#fours {width:100%; float:left; background-color:white; position:relative; margin-top:70px; padding:0px 0 50px 0;}
#fours .one {float:left; position:relative; width:21%; margin:20px 2% 0 5%; height:250px; overflow:hidden; border-radius:10px;}
#fours .two {float:left; position:relative; width:21%; margin:20px 2% 0 0; height:250px; overflow:hidden; border-radius:10px;}
#fours .three {float:left; position:relative; width:21%; margin:20px 2% 0 0; height:250px; overflow:hidden; border-radius:10px;}
#fours .four {float:left; position:relative; width:21%; margin:20px 5% 0 0%; height:250px; overflow:hidden; border-radius:10px;}
#fours h5 {width:90%; margin:25px 0%; box-shadow:0 0 2px black; height:100%; border-radius:10px; font-size:220%; color:white; text-align:center; background-color:#08325a; padding:40px 5% 0 5%;}
#fours h5:hover {background-color:#f36c23; box-shadow:0 0 10px black; transition:.3s ease;}
#fours h5 .orange {color:#f36c23;}
#fours h5:hover .orange {color:#08325a; transition:.3s ease;}
#extra {width:100%; float:left; background-color:white; position:relative; margin-top:70px; padding:50px 0;}
#extra .extraleft {float:left; position:relative; width:50%; margin:0px 0 0 5%;}
#extra .extraleft h6 {float:left; width:90%; margin:20px 5% 0 5%; color:#f36c23; font-size:150%;}
#extra .extraleft h3 {float:left; width:90%; margin:20px 5% 0 5%; color:black; font-size:180%; line-height:32px;}
#extra .extraleft h3 a {color:blue; text-decoration:underline; width:90%; margin:20px 5% 0 5%;}
#extra .extraleft h2 {float:left; width:90%; margin:20px 5% 10px 5%; color:#014f6e; font-size:520%; font-weight:800; line-height:60px;}
#extra .extraleft p {float:left; width:90%; margin:20px 5% 0 5%; color:black; font-size:220%; line-height:28px;}
#extra .extraleft h4 {font-family: 'IBM Plex Sans', sans-serif; font-weight:800; float:left; width:80%; margin:26px 10% 0 10%; color:black; font-size:200%; line-height:28px;}
#extra .extraleft h5 {float:left; width:80%; margin:20px 10% 0 10%; color:black; font-size:170%; line-height:28px;}
#extra .extraleft p a {color:#f36c23;}
#extra .extraleft img {width:80%; margin:20px 5% 0px 5%;}
#extra .extraleft .bold {font-weight:800;}
#extra .extraright {float:right; position:relative; width:30%; margin:20px 7.5% 20px 0%; overflow:hidden;}
#extra .extraright h4 {font-size:180%; font-weight:700; width:90%; margin:10px 5%; color:black; text-align:center; line-height:30px;}
#extra .extraright h5 {width:90%; margin:25px 0%; line-height:32px; box-shadow:0 0 2px black; border-radius:10px; font-size:250%; color:white; text-align:center; background-color:#08325a; padding:30px 5%;}
#extra .extraright h5:hover {background-color:#f36c23; box-shadow:0 0 10px black; transition:.3s ease;}
#extra .extraright h5 .orange {color:#f36c23;}
#extra .extraright h5:hover .orange {color:#08325a; transition:.3s ease;}
#extra .extraright img {width:150%; height:auto; margin-left:-20%;}
#blankfiles {width:100%; float:left; position:relative; height:60px; background-color:white;}
#files {width:90%; margin:20px 5%; float:left; position:relative; border-bottom:1px black solid; }
.section {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section h4 {font-size:240%; font-weight:700;}
#files .section p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section .right {float:right; margin-right:2%; margin-top:5px;}
.section1 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section1 h4 {font-size:240%; font-weight:700;}
#files .section1 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section1 .right {float:right; margin-right:2%; margin-top:5px;}
.section2 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section2 h4 {font-size:240%; font-weight:700;}
#files .section2 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section2 .right {float:right; margin-right:2%; margin-top:5px;}
.section3 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section3 h4 {font-size:240%; font-weight:700;}
#files .section3 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section3 .right {float:right; margin-right:2%; margin-top:5px;}
.section4 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section4 h4 {font-size:240%; font-weight:700;}
#files .section4 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section4 .right {float:right; margin-right:2%; margin-top:5px;}
.section5 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section5 h4 {font-size:240%; font-weight:700;}
#files .section5 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section5 .right {float:right; margin-right:2%; margin-top:5px;}
.section6 {width:100%; margin:20px 0; height:30px; overflow:hidden; cursor: pointer;}
#files .section6 h4 {font-size:240%; font-weight:700;}
#files .section6 p {font-size:200%; margin-top:20px; line-height:28px;}
#files .section6 .right {float:right; margin-right:2%; margin-top:5px;}
.hide_menu5 {height:auto;}
#thirds {width:100%; float:left; position:relative; background-color:white; overflow:hidden; padding:120px 0 60px;}
#thirds .one {float:left; position:relative; width:29%; margin:20px 0 0 5%; overflow:hidden;}
#thirds .one img {width:160%; height:auto;}
#thirds .two {float:left; position:relative; width:29%; margin:20px 1.5% 0 1.5%; overflow:hidden;}
#thirds .two img {width:160%; height:auto;}
#thirds .three {float:left; position:relative; width:29%; margin:20px 5% 0 0%; overflow:hidden;}
#thirds .three img {width:160%; height:auto;}
#thirds h5 {margin:8px 0; font-weight:700;font-size:240%; }
#thirds h6 {margin:8px 0; font-weight:700; font-size:200%;}
#thirds p {margin:8px 0; font-weight:700; font-size:150%;}
#thirds a p {color:#f36c23;}
#dos {width:100%; float:left; position:relative; background-color:white; overflow:hidden; padding:40px 0 60px 0;}
#dos .images {width:44%; float:left; margin:20px 1% 0 5%;}
#dos .images img {width:100%; height:auto; margin:0px 0 30px 0;}
#dos .content {width:44%; float:left; margin:20px 5% 0 1%;}
#dos .content h4 {font-size:200%; font-weight:700; margin:20px 0;}
#dos .content p {font-size:170%; font-weight:100; margin:0px 0 60px 0; line-height:34px; color:black;}
.page {display:flex; width:100%; height:400px; z-index:1; background-color:rgb(1, 79, 110); margin-top:100px; float:left; position:relative; }
.main_container {float:left; position:relative; width:84%; padding:0px 0%; margin:0 8%; overflow:hidden; display:block; height:400px; align-self:center; background-color:rgb(1, 79, 110); }
.long_container {height:100%; z-index:1; }
.item {height:100%; width:10%; margin:0 .5%; float:left;}
.see_previous { width:30px; opacity:1; background-color: rgba(0, 0, 0, .0); margin-left:0; left:1%; z-index:999; position:absolute; height:200px; margin-top:100px; display:flex; transition:all .2s ease-in-out; }
.fa-arrow-circle-left {width:100%; color:white; font-size:300%; align-self:center; cursor:pointer; }
.see_next {height:200px; opacity:1; background-color: rgba(0, 0, 0, .0); width:30px; position:absolute; z-index:999; right:1%; margin:100px 0 0 0; display:flex; transition:all .2s ease-in-out; }
.fa-arrow-circle-right {width:100%; color:white; font-size:300%; align-self:center; cursor:pointer; }
.page h5 {float:left; color:white; font-weight:800; position:relative; margin:20px 0% 0px 0%; font-size:160%; padding:0 5%; width:90%; text-align:left; font-family:tahoma;}
.page p {float:left; position:relative; color:white; line-height:28px; font-size:165%; margin:15px 0% 0 0%; padding:0 5%; width:90%; text-align:left; }
.page h3 {float:left; position:relative; font-size:150%; color:white; font-weight:900; text-align:left; margin:70px 0 0px 0; padding:0 0%; margin-left:5%; width:90%;}
.page .fa-city {color:white; font-size:350%;}
.page .fa-users {color:white; font-size:400%; margin-top:10px;}
.page .fa-globe-africa {color:white; font-size:350%;}
.page .fa-chart-pie {color:white; font-size:400%; margin-top:10px;}
.page .fa-user-graduate {color:white; font-size:350%; margin-top:10px;}
.page .fa-people-carry {color:white; font-size:400%; margin-top:10px;}
#contact2 {float:left; width:100%;padding-top:0px; padding-bottom:160px; margin-top:-180px; background-color:white;}
#contact2 h2 {width:80%; margin:20px 10%; font:13px/19px Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif; font-weight:500; font-size:300%; line-height:32px; margin-top:30px; color:#b4015c; }
#contact2 p {font:13px/19px Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif; font-weight:500; font-size:180%;width:80%; margin:20px 10%; line-height:30px;}
#container1 {
border-radius: 10px;
background-color:none;
padding: 20px;
box-shadow:0 0 5px black;
float:right; width:41%;
margin:70px 4% 20px 0%; z-index:9999;
}
#container1 h1 {text-align:center; font-size:250%; margin-bottom:-20px; margin-top:10px; font-family:tahoma; font-weight:700;}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 3px solid #ccc; /* Gray border */
box-shadow:0 0 3px black;
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 20px; /* Bottom margin */
resize: vertical; /* Allow the user to vertically resize the textarea (not horizontally) */
font-size:140%; font-family:tahoma;
}
label {font-size:160%; font-family:tahoma; font-weight:700; color:rgba(0, 0, 0, .88);}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #08325a;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #BC2020;
opacity:.8;
}
/* Add a background color and some padding around the form */
#contact2 #container p {color:green; text-align:center; font-size:140%;}
#contact2 #container h6 {color:red; text-align:center; font-size:140%;}
.maps {float:left; margin-top:70px; width:46%; }
#contact2 .maps iframe {width:93%; height:350px; margin-left:3%; box-shadow:0 0 5px black;}
.maps img {width:50%; height:auto; margin-left:25%;}
#contact2 .maps h2 {width:77%; margin:20px 0 0 10%; font-weight:700; line-height:36px; text-align:center; padding:15px 0; background-color:#08325a; box-shadow:0 0 5px black; color:white; font-size:180%; font-family:tahoma; border-radius: 10px;}
#contact2 .maps h2 a {color:white; padding:15px 0; line-height:36px; font-weight:700; }
#footer {float:left; position:relative; background-color:#08325a; width:100%; padding:80px 0; margin-top:0px;}
#footer img {width:20%; margin:20px 40%;}
#footer p {font-size:150%; font-weight:700; color:white; text-align:center;margin:10px 0; line-height:28px;}
#footer a {color:white;}
#footer2 {float:left; position:relative; background-color:#08325a; width:100%; padding:80px 0; margin-top:-158px;}
#footer2 img {width:20%; margin:20px 40%;}
#footer2 p {font-size:150%; font-weight:700; color:white; text-align:center;margin:10px 0; }
#footer2 a {color:white;}
@media screen and (max-width:1450px) {
#banner .left h1 {margin:-560px 0 0px 0; }
#button2 {top:440px;}
}
@media screen and (max-width:1400px) {
#full .image img {margin-top:-150px;}
.item {height:100%; width:16.5%; margin:0 0%; float:left;}
}
@media screen and (max-width:1300px) {
#splitter .text h4 {font-size:400%; margin:20px 5%;}
#full .image img {margin-top:-0px;}
#vidsplit { margin-top:-150px; }
.fa-angle-double-down {display:none;}
#top .topnav3 ul li a {font-size:140%;}
#banner .left h1 {margin:-440px 0 0px 0; }
}
@media screen and (max-width:1100px) {
#full {height:650px;}
#full .text {height:650px;}
#full .text h6 { margin:130px 0 20px 0;}
#top .topnav3 ul li a {font-size:140%; }
#topvid {width:150%; height:150%; margin-top:-80px; margin-left:-25%; }
#button2 {top:850px;}
#sectional .first .firsts h3 {font-size:400%;}
#sectional .second .seconds h3 {font-size:400%;}
#top .topnav3 {display:none;}
#button {display:inline;}
#top .social {display:none;}
}
@media screen and (max-width:1000px) {
#content h5 {width:60%; font-size:300%; margin:20px 20% 60px 20%; }
#vidsplit { margin-top:-100px; margin-bottom:30px;}
#content iframe { width:90%; margin:-100px 5% 0px 5%; }
#extra {padding-top:0;}
#extra .extraleft {width:90%; margin:20px 5%; }
#extra .extraright {float:left; width:90%; margin:100px 5% 20px 5%; }
#top .title img { height:85%; padding-top:3.5%;}
#topvid { margin-top:-120px; }
#content h6 { margin-top:-160px;}
#splitter .text h5 { width:50%; margin:10px 25%;}
#splitter .text h4 {font-size:340%; margin:20px 5%;}
#contentnew .uno {float:left; position:relative; width:70%; margin:30px 0 0 15%;}
#contentnew .dos {float:left; position:relative; width:70%; margin:30px 15%;}
#contentnew .tres {display:none;}
#fours .one {width:70%; margin:20px 2% 0 15%; height:250px; }
#fours .two {width:70%; margin:20px 2% 0 15%; height:250px; }
#fours .three {width:70%; margin:20px 2% 0 15%; height:250px; }
#fours .four {width:70%; margin:20px 5% 0 15%; height:250px; }
#contentnew h5 {font-size:200%; line-height:30px; text-align:center;}
#contentnew iframe {width:70%; margin-left:15%;}
}
@media screen and (max-width:950px) {
#topvid {display:none; }
#banner { background-color:rgba(0,0,0,.0); }
#video .first {display:inline;margin-top:70px;}
#content h2 {font-size:480%; width:80%; padding:10px 10%; padding-bottom:30px;}
#content p {margin-top:-50px;}
#files .section h4 {font-size:210%;}
#files .section1 h4 {font-size:210%;}
#files .section2 h4 {font-size:210%;}
#files .section3 h4 {font-size:210%;}
#files .section4 h4 {font-size:210%;}
#files .section5 h4 {font-size:210%;}
#files .section6 h4 {font-size:210%;}
#thirds {padding:100px 0 60px;}
#thirds .one {width:80%; margin:20px 0 0 10%; }
#thirds .two {width:80%; margin:20px 1.5% 0 10%;}
#thirds .three {width:80%; margin:20px 5% 0 10%;}
#select .row1 { width:80%; margin:20px 10%;}
#select .row2 {width:80%; margin:20px 10%;}
#select {margin-top:80px;}
#contact2 .maps { width:90%; margin-left:5%;}
#contact2 h2 {width:90%; margin:20px 5%;}
#container1 {float:left; width:86%; margin:30px 6% 20px 5%; box-shadow:0 0 0 black;}
}
@media screen and (max-width:870px) {
#content img {width:88%; margin:10px 6%;}
#banner {margin-top:60px;}
#contentnew h3 { width:90%; font-size:320%;}
#sectional {height:auto;}
#sectional .first {width:60%; margin:20px 2% 20px 20%; height:400px;}
#sectional .second {width:60%; margin:20px 2% 20px 20%; height:400px;}
#sectional .first .firsts {width:60%; height:400px;}
#sectional .second .seconds {width:60%; margin-top:440px; height:400px;}
#content h6 { margin-top:-150px;}
#vidsplit { margin-top:-50px; margin-bottom:60px;}
#splitter .text {width:100%; margin:20px 0; height:auto; padding-bottom:50px;}
#splitter .image {width:100%; margin:20px 0 0 0; height:auto; padding-bottom:50px;}
#splitter .image img {width:100%; height:auto;}
#splitter {height:auto;}
#splitter .text h4 {font-size:540%; margin:40px 5%;}
#full .text {height:550px;}
#full {height:550px;}
#full br {display:none;}
#full .desktopper {display:inline;}
#footer img {width:40%; margin:20px 30%;}
#dos .images {width:90%; float:left; margin:20px 1% 0 5%;}
#dos .content {width:90%; float:left; margin:20px 0% 0 5%;}
}
@media screen and (max-width:800px) {
#top .title img { height:85%; padding-top:5%;}
#select p {width:90%; margin:10px 5% 20px 5%; }
.item {height:100%; width:33%; margin:0 0%; float:left;}
.page p {text-align:center;}
.page h3 {text-align:center;}
.page h5 {text-align:center;}
}
@media screen and (max-width:700px) {
#contentnew iframe {width:90%; margin-left:5%;}
#splitter input[type=text], select {
width: 90%;}
#full .first {display:none;}
#full .second {display:inline; }
#banners {height:auto;}
#banners .head {float:left; width:100%; margin:20px 0% 0 0; height:auto;}
#banners .head h4 {float:center; text-align:center; margin:0; font-size:260%; width:100%; padding:10px 0 0 0;}
#banners .head p {float:center; text-align:center; margin:0; width:90%; font-size:160%; padding:10px 5% 0 5%; line-height:32px;}
#banners .head a {text-align:center; }
#banners .button {float:left; width:100%; margin:0px 0%; padding-bottom:20px;}
#banners .button p {width:100%; text-align:center; margin:-20px 0 0 0;}
#files .section h4 {font-size:170%;}
#files .section1 h4 {font-size:170%;}
#files .section2 h4 {font-size:170%;}
#files .section3 h4 {font-size:170%;}
#files .section4 h4 {font-size:170%;}
#files .section5 h4 {font-size:170%;}
#files .section6 h4 {font-size:170%;}
}
@media screen and (max-width:650px) {
#content h5 {width:70%; font-size:240%; margin:20px 15% 60px 15%; }
#video .second {display:inline;}
#video .first {display:none;}
#social {display:none;}
#contentnew .uno {float:left; position:relative; width:90%; margin:30px 0 0 5%;}
#contentnew .dos {float:left; position:relative; width:90%; margin:30px 5%;}
#map2 iframe {width:90%; margin:20px 5%; height:400px;}
#map2 {height:460px;}
}
@media screen and (max-width:600px) {
#content h3 { font-size:270%; padding:30px 5% 0px 5%; }
#content h4 {font-size:170%;}
#content h2 {font-size:450%; width:80%; padding:10px 10% 30px 10%; }
#content .orange {color:#f36c23; font-size:240%;}
#contact2 h1 {font-size:340%; font-weight:700;}
#contact2 .maps h2 {width:96%; margin:20px 2%; font-size:160%;}
#content p {font-size:180%; font-weight:700; margin-top:-50px;}
#bannerss { margin:50px 0 170px 0; height:auto;}
#sectional .first img {margin-left:-60px;}
#vidsplit { margin-top:-30px; margin-bottom:100px;}
#content iframe { width:94%; margin:-160px 3% 0px 3%; }
#content .first {display:none;}
#content .second {display:inline;}
#contentnew h5 {margin-top:-30px;}
#contentnew iframe {height:250px;}
#container1 {margin-left:3%;}
.sidebar_menu { width:75%; top:60px;}
#footer img {width:60%; margin:20px 20%;}
#footer2 img {width:60%; margin:20px 20%;}
#splitter .text h4 {font-size:400%; margin:40px 5%;}
#sectional {height:auto;}
#sectional .first {width:90%; margin:20px 2% 20px 5%; height:430px;}
#sectional .second {width:90%; margin:20px 2% 20px 5%; height:430px;}
#sectional .first .firsts {width:90%; height:430px;}
#sectional .second .seconds {width:90%; margin-top:470px; height:430px;}
#content h6 { margin-top:-140px;}
#content h2 {font-size:350%; width:90%; padding:10px 5% 30px 5%; line-height:40px;}
#top {height:60px;}
#topa {height:60px;}
#top .title {margin-left:3%; height:60px;}
#top .title img { height:85%; padding-top:5%; }
#video .second {margin-top:60px;}
#button {top:-5px;}
#extra .extraleft h2 {font-size:380%;}
#files .section h4 {font-size:200%; font-weight:800;}
#files .section1 h4 {font-size:200%;font-weight:800;}
#files .section2 h4 {font-size:200%;font-weight:800;}
#files .section3 h4 {font-size:200%;font-weight:800;}
#files .section4 h4 {font-size:200%;font-weight:800;}
#files .section5 h4 {font-size:200%;font-weight:800;}
#files .section6 h4 {font-size:200%;font-weight:800;}
.section {height:60px;}
.section1 {height:60px;}
.section2 {height:60px;}
.section3 {height:60px;}
.section4 {height:60px;}
.section5 {height:60px;}
.section6 {height:60px;}
.hide_menu5 {height:auto;}
#splitter input[type=submit] { border-radius: 0px;}
#extra .extraleft h2 {font-size:320%; line-height:40px;}
}
@media screen and (max-width:450px) {
#extra .extraleft h2 {font-size:260%; line-height:30px;}
#content h5 {width:80%; font-size:220%; margin:20px 10% 60px 10%; }
#container1 {margin-left:2%;}
#sectional .first .firsts h3 {font-size:500%; font-weight:800; color:white; width:90%; padding:70px 0% 20px 6%;}
#sectional .first img {margin-left:-130px;}
#contentnew iframe {height:200px;}
#splitter .text h4 {font-size:340%; margin:30px 5%;}
#top .title {margin-left:3%;}
#top .title img { height:85%; padding-top:6%; }
#full .text {height:500px;}
#full {height:500px;}
#full .text h6 {margin-top:80px;}
#banners .head h4 { padding:0px 0 0 0;}
#fours .one {width:90%; margin:20px 2% 0 5%; height:250px; }
#fours .two {width:90%; margin:20px 2% 0 5%; height:250px; }
#fours .three {width:90%; margin:20px 2% 0 5%; height:250px; }
#fours .four {width:90%; margin:20px 5% 0 5%; height:250px; }
#select .row1 p { font-size:150%;}
#select .row2 p { font-size:150%;}
#select .row1 .listing h5 {font-size:175%;}
#select .row2 .listing h5 {font-size:175%;}
#select .row1 { width:90%; margin:20px 5%;}
#select .row2 {width:90%; margin:-20px 5% 20px 5%;}
}
@media screen and (max-width:370px) {
#container1 label {font-size:140%;}
}