*, *::before, *::after {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
list-style: none;
}
article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
/* Add correct display for IE 9- and some newer browsers */
display: block;
}
::-moz-selection {
background: black;
color: #fcfcfc;
}
::selection {
background: black;
color: #fcfcfc;
}
@font-face {
font-family: 'robotoregular';
src: url('assets/fonts/roboto-regular-webfont.woff2') format('woff2'),
 url('assets/fonts/roboto-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold';
src: url('assets/fonts/roboto-bold-webfont.woff2') format('woff2'),
 url('assets/fonts/roboto-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotoitalic';
src: url('assets/fonts/roboto-italic-webfont.woff2') format('woff2'),
 url('assets/fonts/roboto-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'robotobold_italic';
src: url('assets/fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
 url('assets/fonts/roboto-bolditalic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html,body{
margin:0;
padding:0;
background:black;
font-family: 'robotoregular', sans-serif;
overflow-x: hidden
}
#jswarning{
z-index: 99;
background: red;
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100vh;
text-align: center;
}
.slider---item{
z-index:1;
height:100vh;
width:100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.button---wrapper{
z-index:2;
margin: 0 auto;
height:100vh;
width:100%;
background:transparent;
position: absolute;
top:0
}
.button---wrapper img{
z-index:2;
max-width: 350px;
}
@media (max-width: 767px) {
.button---wrapper img{
position: absolute;
left:2.5rem;
bottom:1.5rem;
margin:0 auto;
max-width: 270px;
}
}
@media (max-width: 320px) {
.button---wrapper img{
left:1rem;
bottom:2rem;
max-width: 180px;
}
}
@media (min-width: 768px) {
.button---wrapper{
display: flex;
align-items: center;
justify-content: left;
padding-left:2.5rem
}
}
.button .button---element{
z-index:3;
height:100vh;
width:100%
}
.navbar{
z-index:3;
display: inline-flex;
align-items: center;
justify-content: center;
position:absolute;
bottom:0;
width:100%;
padding:1.5rem 2.5rem 
}
.navbar---wrapper{
z-index:3;
display: inline-flex;
align-items: center;
justify-content: center;
height:100%;
width:100%;
}
.navbar---item{
z-index:3;
display: inline;
margin:0 .25rem
}
.navbar---item img {
z-index:2;
width:48px;
height:auto
}
.navbar---mobile---wrapper{
z-index:3;
height:100vh;
width:100%;
}
#button2,
#five,
#four,
#three,
#two,
#one{
display:none;
}
.navbar---mobile{
z-index:3;
position:absolute;
bottom:7.5rem;
right:1.25rem;
width:60px;
}
.navbar---mobile .navbar---item{
z-index:3;
display: block;
margin:0 .25rem
}
.navbar---burgermenu{
z-index:3;
position:fixed;
right: 1.5rem;
bottom:1.75rem;
}
#button1,
#button2{
z-index:3;
position:fixed;
right: 1.5rem;
bottom:1.75rem;
}
a{
text-decoration: none;
color:white;
}
a:hover{
opacity: .75	
}
li {
list-style-position:inside;	
}
@media (max-width: 767px) {
.dn---mobile{
display:none;
}
}
@media (min-width: 767px) {
.dn---desktop{
display:none;
}
}
.recht{
z-index:4;
top:10px;
right:10px;
position:absolute;
}
.recht img{
height:136px;
width:auto;
}
.myModal{
position:absolute;
z-index:5;
width:100%;
height:100vh;	
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* Sit on top */
padding-top: 0px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100vh; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
.modal---content h1{
margin:1rem 0;	
}
.modal---content h3,
.modal---content h2{
margin:1rem 0 .5rem;	
}
/* Modal Content */
.modal---content {
position: relative;
color:white;
margin: 0 auto;
padding: 0;
border: 0px solid #888;
width: 100%;
height: 100vh;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.modal---footer,
.modal---body,
.modal---header {
padding: 1% 10%;
margin: 0 auto;
text-align: center;
max-width:710px;
}
@media (min-width: 768px) {
.modal---body,
.modal---header {
padding: 1% 1%;
}
}
.modal---header span{
position:fixed;
right:2.5rem;
}
.close {
color: white;
top:1rem;	
font-size: 60px;
font-weight: bold;
font: sans-serif;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}

.modal---footer{
padding-bottom: 6rem;
}