@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #699B97;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 60px max-content auto 60px;
grid-template-areas:
"a a a a a a a a a a a a"
"x i i i i i i i i i i z"
"x b b b b b b b c c c z"
"x d d d d d d d c c c z";
}
a {
text-decoration: none;
}
.buffer {
grid-area: a;
}
.hamburger {
display: none;
}
.mobilelogo {
display: none;
}
.upperright {
display: none;
}
.video-container {
z-index: 0;
padding-bottom: 50%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
header {
position: fixed;
z-index: 99;
top: 0;
width: 100%;
height: 60px;
line-height: 60px;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 15px;
background-color: #113f3b;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
grid-template-areas:
"x n n n n n n n n n n z";
}
#logo {
color: white;
float: left;
margin: 0;
padding: 2px 17px 0px 0px;
font-family: 'Great Vibes', cursive;
font-size: 33px;
font-weight: normal;
}
#logo a {
color: white;
}
nav {
grid-area: n;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: block;
float: left;
}
nav ul li a {
display: block;
margin: 0px;
padding: 0px 11px 0px 11px;
text-decoration: none;
color: white;
}
nav ul li a:hover {
display: block;
text-decoration: none;
background-color: #ebf4f3;
color: #113f3b;
}
section {
grid-area: i;
font-size: 0;
}
main {
grid-area: b;
background-color: white;
padding: 37px 47px 37px 47px;
font-family: 'Open Sans Light', sans-serif;
font-size: 15px;
font-weight: 300;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 37px;
}
.insertpicture {
display: block;
float: left;
padding-right: 17px;
margin-top: 17px;
margin-bottom: 7px;
width: 20%;
}
aside {
grid-area: c;
padding: 37px;
background-color: #ebf4f3;
font-family: 'Open Sans Light', sans-serif;
font-size: 15px;
font-weight: 300;
}
aside a {
color: #2081C3;
font-weight: bold;
font-size: smaller;
}
main a {
color: #2081C3;
font-weight: bold;
font-size: smaller;
}
.quote {
}
.quoted {
font-style: italic;
font-weight: 600;
padding-left: 75px;
}
.quotedtitle {
font-weight: 300;
}
footer {
grid-area: d;
background-color: white;
font-family: 'Open Sans', sans-serif;
font-size: 11px;
line-height: 50px;
padding-left: 37px;
}
.slideshowarea {
position: relative;
}
.slideshowleftbutton {
position: absolute;
top: 48%;
left: 0;
background-color: #113f3b;
border: none;
color: white;
padding: 1% 2%;
font-weight: 900;
cursor: pointer;
}
.slideshowrightbutton {
position: absolute;
top: 48%;
right: 0;
background-color: #113f3b;
border: none;
color: white;
padding: 1% 2%;
font-weight: 900;
cursor: pointer;
}
@media (max-width:960px){
body {
grid-template-areas:
"a a a a a a a a a a a a"
"i i i i i i i i i i i i"
"b b b b b b b b c c c c"
"d d d d d d d d c c c c";
}
header {
grid-template-areas:
"n n n n n n n n n n n n";
padding-left: 37px;
}
}
@media (max-width:860px){
body {
grid-template-rows: 60px auto 1fr 1fr 60px;
grid-template-areas:
"a a a a a a a a a a a a"
"i i i i i i i i i i i i"
"b b b b b b b b b b b b"
"c c c c c c c c c c c c"
"d d d d d d d d d d d d";
}
header {
z-index: 37;
display: grid;
padding: 0;
grid-template-columns: 57px 5fr 1fr;
grid-template-rows: 60px;
grid-template-areas:
"e f g";
}
nav {
display: none;
}
a {
text-decoration: none;
}
h1 {
font-size: 23px;
}
.upperright {
display: block;
grid-area: g;
}
.mobilelogo {
display: block;
grid-area: f;
text-align: center;
font-family: 'Great Vibes', cursive;
font-size: 33px;
font-weight: normal;
color: white;
padding-top: 5px;
}
.hamburger {
display: flex;
grid-area: e;
align-items: center;
justify-content: flex-end;
}
.hamburger ul {
margin: 0;
padding: 0;
display: block;
list-style: none;
line-height: normal;
}
.hamburger ul li a {
color: white;
}
.hamburger ul li ul {
display: none;
}
.hamburger ul li:hover > ul{
display: block;
position: absolute;
top: 0;
left: 0;
width: 150px;
box-shadow: 2px 0px 11px #113f3b;
height: 100vh;
padding: 0px 28px 0px 0px;
background-color: #699B97;
}
.hamburger ul li ul a {
display: block;
float: left;
width: 100%;
color: white;
padding: 7px 14px 7px 14px;
}
.hamburger ul a:hover {
background-color: #ebf4f3;
color: #113f3b;
}
#hide {
height: 60px;
}
#close {
text-align: right;
}
}