body, html { background: linear-gradient(144deg, hsla(209, 100%, 32%, 1) 35%, hsla(180, 100%, 30%, 1) 84%); font-family: 'Roboto', sans-serif; font-size: 18px; margin: 0px; min-height: 100%; overflow-x: hidden; padding: 0px; }
a:hover, a:focus { transition: .2s; text-decoration: none; }
.container { padding: 0; }
.row { margin: 0; }
.row > div { padding: 0 1.5% 12px; }

h1,h2,h3,h4,h5,h6 { margin: 0; }
h2 {color: #0054a4; margin-bottom: 20px; font-weight: 900;}
h3 {background:#0054a4; color: #fff; font-size: 16px; font-weight: 700; padding: 10px; margin-bottom: 15px; }
h4 {color: #009999; font-size: 16px; font-weight: 400; }
p { margin-bottom: 1rem; }
p.subtitle {margin-left: 1.75%; font-size: 18px; color: #000; margin-bottom: 0; padding-bottom: 0;}
p.enlarge {font-size: 14px; font-weight: 300;}
ul { padding-left: 15px; }
ul li {margin-bottom: 0.5rem; color: #333;}
hr { border-bottom: 3px solid #0054a4; }
hr.subtitle { border-bottom: 3px solid #0054a4; margin: 15px 0;}
hr.enlarge {border-bottom: 1px solid #f2f2f2; margin: 2px 0;}
a { color:#009999; transition: background-color .2s, color .2s; }
.fun-hover { color: #fff; background-image: linear-gradient(to right, #009999 50%, #ff8c05 50%); background-position: 0; background-size: 200%; transition: all 0.4s; padding: 2px 5px;}
.fun-hover:hover {background-position: -100%;}
a.fun-hover:hover {color: #333!important;}
a.fun-hover:visited {color: #fff;}
a:visited {color:#333;}
td a { color:#009999!important; }
.button { background-color: #ff8c05; border-radius: 3px; border: 0; color: #fff; display: inline-block; letter-spacing: .05em; margin-top: 12px; padding: 18px 38px; transition: background-color .2s; margin-bottom: 15px;}
.button:hover { background-color: #ff6036; color: #fff; }
.button:focus { color: #fff; }
blockquote {border-left: solid 4px #ff6036; font-size: 1em; font-weight: 700; background-color: #f2f2f2; padding: 10px 15px;}
button {background-color: transparent; border: none;}

ul a li {color:#0054a4; text-decoration: underline; }

/* MAIN SCREEN */
#screen { height: 100%; left: 0%; position: absolute; transition: left .6s; width: 100%; }
#mainArea .logo { display: block; width: 25%; padding: 37px; }

/* LEFT MENU */
#skipcontent { background-color: #fff; border: 1px inset #aaa; border-radius: 8px; box-shadow: 2px 2px 8px 0 #333; color: #000; font-size: 1.4em; font-weight: 700; left: -9999px; padding: 6px 14px; position: absolute; top: -9999px; }
#skipcontent:focus { left: 8px; top: 8px; }



/* SLIDE AREA */
#mainArea { height: 100%; overflow: hidden; position: relative; width: 100%; }


.redirect {background-color: rgba(255,255,255,.94); box-shadow: 0 8px 15px -4px #000; height: 80%; width: 80%; margin: 50px auto; text-align: center;}
.redirect img {width: 50%; margin: 25px auto; display: block;}
.redirect p {font-size:18px; width: 75%; margin: 0 auto;}
.redirect p a {background-color: #ff8c05; color: #333; padding: 10px; font-weight: bold; }
.redirect p a:hover {background-color: #ff6036;; color: #fff; padding: 10px; font-weight: bold; }

/* MEDIA QUERIES */


@media screen and (max-width: 1030px) {
    #menu { margin-left: -220px; position: relative; width: 220px; z-index: 2; }
    #menu div { height: 64%; }
    #mainArea { width: 100%; }
    img.logo { display: block; width: 50%; margin: 0 auto; padding-top: 15px; }

    #menu-toggle { display: block; }
    #contact-button { right: 20px; }
    .menu-open #screen { left: 240px; }
    #nav-progress { width: 100%; }
    #nav-progress a { width: 15%; }
    #nav-progress ul { width: 70%; }
    #nav-progress ul li a { border-width: 20px 1px; }

    #slides { height: 84%; top: 0; }
    #slides > div { left: 0; width: 100%; }
    .slide { height: 100%; width: 100%; }
    .slide.showing { margin-left: 0; }
    .slide > div { width: 96%; }
    .menu-open #slides > div { margin-left: 240px; }
    #lightbox img { max-width: 8000%; width: 160%; }
}

@media screen and (max-width: 640px) {
    h2 { font-size: 1.2em; }
    p { font-size: .9em; }
    li { font-size: 14px; }
    label { font-size: .9em;}

    #mainArea { overflow: hidden; }
    #menu ul li a { font-size: .9em;}
    .meeting-button { box-shadow: inset 0 0 0 1px #003865; font-size: .8em; height: 36px; }
    #menu-toggle { left: 8px; padding-top: 4px; top: 8px; width: 52px; }
    #menu-toggle span { height: 2px; margin: 2px auto; width: 30%; }
    #contact-button { line-height: .8em; right: 8px; top: 8px; }
    #contact-button i { font-size: 1.2em; padding: 4px; }

    .menu-open #screen { left: 220px; }
    #contact { width: 260px; }
    #closecomment { font-size: 1em;}
    .contact-open #screen { left: -260px; }
    .menu-open #menuOffScreen,
    .contact-open #menuOffScreen { margin-left: -260px; }
    .menu-open #menuOffScreen { margin-left: 220px; }
    .contact-open #contact { margin-left: -260px; }

    #slides { height: 100%; }
    #slides > div { top: 124px; }
    .menu-open #slides > div { margin-left: 220px; }
    .contact-open #slides > div { margin-left: -260px; }
    .slide { height: 100%; }
    .slide > div { padding: 14px 4%; }
}

@media screen and (max-width: 530px) {
    #mainArea .logo {width: 100%; margin: 25px auto;}
    #slides > div { bottom: 56px; }
    
    #nav-progress { height: 38px; }
    #nav-progress a { border-right: 1px solid #aaa; line-height: 44px; width: 50%; }
    #nav-progress a:last-of-type { border: 0; }
    #nav-progress a i { font-size: 1.5em; }
    #nav-progress ul { display: none; }

    #lightbox img { width: 250%; }
}