html, body {height:100%; padding:0; margin:0; font:'Segoe UI', arial, sans-serif; }

header {width:100%; background:rgba(9,78,149,1); position:fixed; left:0; top:0; z-index:10; color:#fff; padding:17px 0 20px 0;}
header h1 {padding:0 0 0 50px; margin:0; font:normal 40px/50px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
header h2 {padding:0 0 0 50px; margin:2px 0 0 0; font:normal 18px/24px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}   

section {display:block; width:100%; position:relative;}
section article {width:90%; max-width:1300px; min-width:300px; margin:0 auto; text-align:center; padding:50px 0;}
section article h1 {padding:0; margin:0; font:normal 70px/80px 'texgyreadventorregular','Segoe UI', arial, sans-serif;background:rgba(255,255,255,0.8); color: rgb(9,78,149)}
section article h2 {padding:0; margin:0; font:normal 40px/50px 'texgyreadventorregular', 'Segoe UI', arial, sans-serif;background:rgba(255,255,255,0.8); color: rgb(9,78,149)}
section article p {padding:0; margin:0; font:normal 5px/5px 'texgyreadventorregular', 'Segoe UI', arial, sans-serif;background:rgba(255,255,255,0.95); color: rgb(9,78,149)}

section article .column {display:inline-block; width:60%; margin:10px 2%; vertical-align:top; padding: 5px 5px 5px; text-align:center; color: navy ;border: 1px navy solid;font:normal 22px/24px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif; background:rgb(250,250,210);min-height: 30px; }
section article .column p {background:rgb(250,250,210); padding:0; margin:0; font-size:16px; color: navy}

section article .column1 {display:inline-block; text-decoration:none; width:20%; margin:10px 1%; vertical-align:top;padding: 10px 10px 5px; text-align:center; color: rgb(9,78,149);border: 1px navy solid;font:normal 15px/24px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;background: rgb(248,248,255)  }
section article .column1 a {text-decoration: none; text-align:center; color: rgb(9,78,149);font:normal 20px/24px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif; }
section article .column1 a:hover {text-decoration: none; text-align:center; color: rgb(220,20,60);font:normal 20px/24px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif; }
section article .column1 p {background-color: rgb(248,248,255);padding:0; margin:4px;margin-top:10px; font:normal 14px/14px 'texgyreadventorregular','Segoe UI', arial, sans-serif; color: #612395;}
.pad {height:160px;}
.bottom {position:absolute; bottom:0; left:0;}

#a1 {min-height:80%; background:whitesmoke no-repeat center center fixed; background-size:cover; position:relative; color:#fff;}

footer {width:100%; background:rgba(9,78,149,0.9); padding:10px 0; color:#fff;}
footer h2 {padding:0 0 0 20px; margin:0; font:normal 12px/12px 'texgyreadventorregular', 'Segoe UI light',arial, sans-serif;}
footer h3 {padding:0 0 0 20px; margin:5px; font:bold 22px/22px 'texgyreadventorregular', 'Segoe UI light',arial, sans-serif; color:rgb(255,204,0);}

header ul {padding:0; margin:0; list-style:none; width:100%; position:absolute; left:0; bottom:2px; text-align:right;}
header ul li {display:inline-block; margin:1px 3px; position:relative;text-align:center;  color:rgb(9,78,149);
-webkit-transform:skewX(-10deg);
transform:skewX(-10deg);
}
header a {display:block; width:90px; height:25px; text-decoration:none; font-family: 'Segoe UI', arial, sans-serif;color:rgb(0,51,102);
-webkit-transform:skewX(10deg);
transform:skewX(10deg);
}          
header li:nth-of-type(1) {background:#ffe; }
header li:nth-of-type(2) {background:#fff;}
header li:nth-of-type(3) {background:#ff7;}
header li:nth-of-type(4) {background:#c55;}
header li:nth-of-type(5) {background:#888;}
header li:nth-of-type(6) {background:#fd3;}
header li:nth-of-type(7) {background:#888;}
header li:nth-of-type(8) {background:#4d1;}
header li:nth-of-type(9) {background:#888;}
header li:nth-of-type(10) {background:#fff;}
header li:nth-of-type(11) {background:#18b; margin-right:20px;}

header a:hover:before {display:block; content: attr(data-title); position:absolute; left:0; bottom:20px; width:80px; height:20px; background:rgba(0,0,0,0.8); color:#fff; font:normal 12px/20px 'texgyreadventorregular', arial, sans-serif; border-radius:5px; text-align:center;}
header a:hover:after {display:block; content:""; position:absolute; left:10px; bottom:15px; width:0; height:0; border:5px solid transparent; border-top-color:rgba(0,0,0,0.8); border-bottom:0;}

@media only screen and (max-width: 768px) {
header h1 {padding:0 0 0 30px; margin:0; font:normal 30px/50px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
header h2 {padding:0 0 0 30px; margin:0; font:normal 13px/13px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
section article h1 {padding:0; margin:0; font:normal 50px/60px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 30px/40px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
section article p {padding:0; margin:0; font:normal 10px/10px 'texgyreadventorregular','Segoe UI', arial, sans-serif; color: #612395}
.pad {height:80px;}
section article .column1 {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
section article .column {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
}
@media only screen and (max-width: 480px) {
header h1 {padding:0 0 0 20px; margin:0; font:normal 25px/40px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
header h2 {padding:0 0 0 20px; margin:0; font:normal 12px/12px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
section article h1 {padding:0; margin:0; font:normal 40px/50px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 25px/30px 'texgyreadventorregular','Segoe UI', arial, sans-serif;}
section article p {padding:0; margin:0; font:normal 10px/12px 'texgyreadventorregular','Segoe UI', arial, sans-serif; color: #612395}
.pad {height:70px;}
header a {width:20px;}
section article .column1 {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
section article .column {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
}
@media only screen and (max-width: 320px) {
header h1 {padding:0 0 0 10px; margin:0; font:normal 22px/30px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
header h2 {padding:0 0 0 10px; margin:0; font:normal 12px/12px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
section article h1 {padding:0; margin:0; font:normal 40px/50px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
section article h2 {padding:0; margin:0; font:normal 25px/30px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif;}
section article p {padding:0; margin:0; font:normal 10px/12px 'texgyreadventorregular', 'Segoe UI',arial, sans-serif; color: #612395}
.pad {height:60px;}
section article .column1 {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
section article .column {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}
}

@media (min-device-width:320px) and (max-device-width:768px) {
section#a1,
section#a3,
section#a5,
section#a7,
section#a9
{background-attachment:scroll;}
section article .column1 {width:80%; margin:20px auto 0 auto; vertical-align:top; text-align:left;}

}