@charset "utf-8";
/* CSS Document */
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 60px auto 60px;
grid-template-rows: 60px auto 60px;
grid-template-areas:
"a"
"b"
"c";
}
body a {
text-decoration: none;
}
.buffer {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
}
.mobileheaderleft, .mobileheadermiddle {
display: none;
}
header {
position: fixed;
top: 0;
height: 60px;
width: 100%;
background-color: #444443;
-webkit-box-shadow: .0vw .1vw .2vw .01vw rgba(0, 0, 0, 0.7);
box-shadow: .0vw .1vw .2vw .01vw rgba(0, 0, 0, 0.7);
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
-ms-grid-rows: auto;
grid-template-rows: auto;
grid-template-areas:
"d e f";
}
nav {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: e;
line-height: 60px;
text-align: center;
white-space: nowrap;
}
nav img {
height: 23px;
vertical-align: middle;
margin: 0 0 7px 0;
}
nav ul {
display: inline;
}
nav li {
display: inline;
margin: 0 7px;
padding: 0;
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: 11px;
}
nav a {
text-decoration: none;
color: white;
margin: 0;
padding: 0;
}
nav a:hover {
margin: 0;
padding: 0;
color: black;
}
nav a:active {
margin: 0;
padding: 0;
color: black;
}
.current {
color: #A1A1A1;
}
.content {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: b;
margin: 0;
padding-top: 28px;
}
#comingsoon {
font-family: 'Oswald', sans-serif;
font-size: 17px;
text-align: center;
}
.slide {
display: block;
width: 30vw;
margin: 0 auto;
padding: 3vw;
border-radius: 2vw;
background-color: #dcdcdc;
overflow: hidden;
}
.slide img {
-webkit-box-shadow: .1vw .1vw .2vw .01vw rgba(0, 0, 0, 0.5);
box-shadow: .1vw .1vw .2vw .01vw rgba(0, 0, 0, 0.5);
border: none;
}
.slideslottop {
min-height: 105px;
margin-bottom: 1vw;
background-repeat: no-repeat;
background-position: center;
}
.slideslottop img {
width: 100%;
height: auto;
}
.slideslot {
min-height: 105px;
background-repeat: no-repeat;
background-position: center;
}
.slideslot img {
width: 100%;
height: auto;
}
.slidequarterleft {
min-height: 105px;
width: 14.5vw;
float: left;
background-repeat: no-repeat;
background-position: center;
}
.slidequarterlefttop {
min-height: 105px;
margin-bottom: 1vw;
width: 14.5vw;
float: left;
background-repeat: no-repeat;
background-position: center;
}
.slidequarterleft img {
width: 100%;
height: auto;
}
.slidequarterright {
min-height: 105px;
width: 14.5vw;
float: right;
background-repeat: no-repeat;
background-position: center;
}
.slidequarterrighttop {
min-height: 105px;
margin-bottom: 1vw;
width: 14.5vw;
float: right;
background-repeat: no-repeat;
background-position: center;
}
.slidequarterright img {
width: 100%;
height: auto;
}
.onehundred {
width: 100%;
}
.caption {
display: block;
width: 30vw;
margin: .5vw auto 3vw auto;
padding: 0;
font-family: "Nunito Sans", serif;
font-size: .65vmax;
color: silver;
}
.caption a {
color: silver;
}
.caption a:hover {
color: black;
}
.caption a:active {
color: lightgray;
}
.wholepage {
display: block;
min-height: 205px;
height: auto;
margin: auto;
width: 75vw;
background-repeat: no-repeat;
background-position: center;
}
.wholepage img {
width: 100%;
height: auto;
-webkit-box-shadow: .1vw .1vw .2vw .01vw rgba(0, 0, 0, 0.5);
box-shadow: .1vw .1vw .2vw .01vw rgba(0, 0, 0, 0.5);
border: none;
}
footer {
-ms-grid-row: 3;
-ms-grid-column: 1;
grid-area: c;
}
footer img {
display: block;
height: 23px;
margin: 37px auto;
padding-bottom: 23px;
}
@media (max-width: 1200px){
nav li {
font-size: 13px;
}
}
@media (max-width: 900px) {
body {
background-color: #e8e8e8;
}
header {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 5fr 1fr;
grid-template-columns: 1fr 5fr 1fr;
-ms-grid-rows: 60px;
grid-template-rows: 60px;
grid-template-areas:
"g h i";
-webkit-box-shadow: .0vw .4vw .5vw .01vw rgba(0, 0, 0, 0.7);
box-shadow: .0vw .4vw .5vw .01vw rgba(0, 0, 0, 0.7);
}
nav {
display: none;
}
.mobileheaderleft {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-area: g;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 11px;
}
.mobileheaderleft img {
height: 21px;
}
.mobileheaderleft ul {
margin: 0;
padding: 0;
display: block;
list-style: none;
line-height: normal;
}
.mobileheaderleft ul li a {
color: white;
}
.mobileheaderleft ul li ul {
display: none;
}
.mobileheaderleft ul li:hover > ul{
display: block;
position: absolute;
top: 0;
left: 0;
width: 150px;
-webkit-box-shadow: 1vw .0vw .9vw .01vw rgba(0, 0, 0, 0.5);
box-shadow: 1vw .0vw .9vw .01vw rgba(0, 0, 0, 0.5);
height: 100vh;
padding: 0px 28px 0px 0px;
background-color: black;
}
.mobileheaderleft ul li ul a {
display: block;
float: left;
width: 100%;
color: white;
padding: 7px 14px 7px 14px;
}
.mobileheaderleft ul a:hover {
background-color: #454545;
color: white;
}
.mobileheaderleft ul a:active {
color: black;
}
.mobileheaderleft {
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: 1.5vh;
}
#hide {
height: 60px;
}
#close {
text-align: right;
}
.mobileheadermiddle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
grid-area: h;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.mobileheadermiddle img {
height: 23px;
}
.slide {
display: block;
width: 70vw;
margin: 0 auto;
padding: 3vw;
border-radius: 2vw;
background-color: #bebebe;
}
.slide img {
-webkit-box-shadow: .4vw .4vw .2vw .01vw rgba(0, 0, 0, 0.5);
box-shadow: .4vw .4vw .2vw .01vw rgba(0, 0, 0, 0.5);
border: none;
}
.slideslottop {
min-height: 105px;
}
.slideslot {
min-height: 105px;
}
.slidequarterleft {
min-height: 105px;
width: 34vw;
}
.slidequarterlefttop {
min-height: 105px;
margin-bottom: 1vw;
width: 34vw;
}
.slidequarterright {
min-height: 105px;
width: 34vw;
}
.slidequarterrighttop {
min-height: 105px;
margin-bottom: 1vw;
width: 34vw;
}
.caption {
display: block;
width: 70vw;
margin: 2vw auto 10vw auto;
padding: 0;
font-family: "Nunito Sans", serif;
font-size: 1.5vmax;
color: #808080;
}
.wholepage {
display: block;
margin: auto;
width: 100vw;
}
}
@media (max-width: 900px){
.mobileheaderleft {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.mobileheadermiddle {
-ms-grid-row: 1;
-ms-grid-column: 2;
}
}