@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: 7fr 5fr;
grid-template-rows: 7fr 5fr;
grid-template-areas:
"a"
"b";
overflow:hidden;
}
body a {
text-decoration: none;
}
.mobileheaderleft, .mobileheadermiddle {
display: none;
}
.toppart {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: a;
display: -ms-grid;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
justify-items: center;
margin: 0;
padding: 0;
}
.toppart img {
margin: auto;
height: auto;
width: 25vh;
}
.logo {
-webkit-animation: slide 1s ease-in-out, fadein 2s;
animation: slide 1s ease-in-out, fadein 2s;
display: inline-block;
z-index: 3;
}
.link1 {
-webkit-animation: slide2 1s .2s both, fadein 2.25s;
animation: slide2 1s .2s both, fadein 2.25s;
display: inline-block;
}
.link2 {
-webkit-animation: slide2 1s .4s both, fadein 2.5s;
animation: slide2 1s .4s both, fadein 2.5s;
display: inline-block;
}
.link3 {
-webkit-animation: slide2 1s .6s both, fadein 2.75s;
animation: slide2 1s .6s both, fadein 2.75s;
display: inline-block;
}
.link4 {
-webkit-animation: slide2 1s .8s both, fadein 3s;
animation: slide2 1s .8s both, fadein 3s;
display: inline-block;
}
.link5 {
-webkit-animation: slide2 1s 1s both, fadein 3.25s;
animation: slide2 1s 1s both, fadein 3.25s;
display: inline-block;
}
.link6 {
-webkit-animation: slide2 1s 1.2s both, fadein 3.5s;
animation: slide2 1s 1.2s both, fadein 3.5s;
display: inline-block;
}
.link7 {
-webkit-animation: slide2 1s 1.4s both, fadein 3.75s;
animation: slide2 1s 1.4s both, fadein 3.75s;
display: inline-block;
}
.link8 {
-webkit-animation: slide2 1s 1.6s both, fadein 4s;
animation: slide2 1s 1.6s both, fadein 4s;
display: inline-block;
}
.link9 {
-webkit-animation: slide2 1s 1.8s both, fadein 4.25s;
animation: slide2 1s 1.8s both, fadein 4.25s;
display: inline-block;
}
.link10 {
-webkit-animation: slide2 1s 2s both, fadein 4.5s;
animation: slide2 1s 2s both, fadein 4.5s;
display: inline-block;
}
.freelance {
-webkit-animation: fadein 2.2s 2.75s both;
animation: fadein 2.2s 2.75s both;
}
@-webkit-keyframes slide {
0% {-webkit-transform: translateY(-400px);transform: translateY(-400px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@keyframes slide {
0% {-webkit-transform: translateY(-400px);transform: translateY(-400px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@-webkit-keyframes slide2 {
0% {-webkit-transform: translateY(-900px);transform: translateY(-900px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@keyframes slide2 {
0% {-webkit-transform: translateY(-900px);transform: translateY(-900px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@-webkit-keyframes slideUp {
0% {-webkit-transform: translateY(400px);transform: translateY(400px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@keyframes slideUp {
0% {-webkit-transform: translateY(400px);transform: translateY(400px)}
100% {-webkit-transform: translateY(0);transform: translateY(0)}
}
@-webkit-keyframes fadein {
from {opacity:0;}
to {opacity: 1;}
}
@keyframes fadein {
from {opacity:0;}
to {opacity: 1;}
}
.bottompart {
-ms-grid-row: 2;
-ms-grid-column: 1;
grid-area: b;
text-align: center;
margin: 0;
padding: 0;
background-color: #444443;
-webkit-animation: slideUp 1s ease-in-out, fadein 2s;
animation: slideUp 1s ease-in-out, fadein 2s;
}
.bottompart ul {
display: block;
margin: 0;
padding: 0;
position: relative;
top: 5%;
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: 11px;
}
.bottompart li {
display: inline;
margin: 0;
padding: 7px;
}
.bottompart a {
text-decoration: none;
color: white;
}
.bottompart a:hover {
color: black;
}
.bottompart a:active {
color: #454545;
}
.bottompart p {
margin: 0;
padding: 0;
position: relative;
top: 37%;
font-family: 'Nunito Sans', sans-serif;
font-weight: 700;
font-size: 11px;
color: white;
}
@media (max-width: 900px) {
.toppart {
display: none;
}
.bottompart {
display: none;
}
body {
height: 100%;
margin: 0;
padding: 0;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 7fr 5fr;
grid-template-rows: 7fr 5fr;
grid-template-areas:
"a"
"b";
}
header {
position: fixed;
top: 0;
height: 100%;
width: 100%;
background-color: #454545;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 5fr 1fr;
grid-template-columns: 1fr 5fr 1fr;
-ms-grid-rows: 60px auto;
grid-template-rows: 60px auto;
grid-template-areas:
"g h i"
"j h k";
-webkit-box-shadow: .0vw .4vw .5vw .01vw rgba(0, 0, 0, 0.5);
box-shadow: .0vw .4vw .5vw .01vw rgba(0, 0, 0, 0.5);
}
.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.3);
box-shadow: 1vw .0vw .9vw .01vw rgba(0, 0, 0, 0.3);
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 {
width: 50vw;
}
.toppart {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.bottompart {
-ms-grid-row: 2;
-ms-grid-column: 1;
}
}
@media (max-width: 900px){
.mobileheaderleft {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.mobileheadermiddle {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 2;
}
}