html,
body {
  height: 100vh;
  background:#f0f0f0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  scroll-behavior: smooth;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;  
  line-height: 1.2; 
  color: #131314;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


@keyframes showTopText {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  40%, 60% {
    transform: translate3d(0, 50%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes showBottomText {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.animated-title {
  color: #222;
  height: 90vmin;
  left: 50%;
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70vmin;
  font-weight:1;
  font-size: 10vmin;
}

.animated-title > div {
  height: 50%;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

.animated-title > div div {
  padding:  0;
  position: absolute;
}

.animated-title > div div span {
  display: block;
}

.animated-title > div.text-top {
  top: 0;
}

.animated-title > div.text-top div {
  animation: showTopText 1s;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
  bottom: 0;
  transform: translate(0, 100%);
}

.animated-title > div.text-top div span:first-child {
}

.animated-title > div.text-bottom {
  bottom: 0;
}

.animated-title > div.text-bottom div {
  animation: showBottomText 0.5s;
  animation-delay: 1.75s;
  animation-fill-mode: forwards;
  top: 0;
  transform: translate(0, -100%);
}

.clicker {
	width: 100%;
	text-align: center;
	position:absolute;
	bottom:2.5rem;
}

.arrow {
	width:3.5rem;
	transform: rotate(-90deg);
  }


@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }



.delay {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards; 
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;

-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;    
    }
    
*,
:before,
:after {
    box-sizing: border-box;
}

#logo-wrapper {
	text-align:center;
	margin-top:1rem;
}


#container, .copytext {
  height: 70vmin;
  left: 50%;
  position: relative;
  top: 60%;
  transform: translate(-50%, -50%);
  width: 90vmin;
  font-size: 5.5vmin;
}


.copytext {
  height: 90vmin;
  left: 50%;
  position: relative;
  top: 48%;
  transform: translate(-50%, -50%);
  width: 90vmin;
  font-size: 5.5vmin;
}


h1 {
}

h2 {
    font-size:1.8rem; 
    font-weight: 400;
    line-height: 1.3;
}

h3 {
    font-size:1.5rem; 
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: -15px;
}

p, li, td {
    font-size:1.3rem; 
    font-weight: 200;
    line-height: 1.3;
}

table {
	border: 1px dotted;
}

td {
	border: 0;
}

ol, ul {
	margin:0;
}

h1:hover {
    animation-play-state: paused;
}

a {
    color: #024794;
}

a:hover {
    text-decoration: none;
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #999, 
            0 0 0 #efefef, 
            0 0 0 #fff, 
            0 0 0 #333;
    }

    20% {  
        transform: translateY(-0.2em);
        text-shadow: 
            0 0.125em 0 #999, 
            0 0.25em 0 #efefef, 
            0 -0.125em 0 #fff, 
            0 -0.25em 0 #333;
    }

    40% {  
        transform: translateY(0.1em);
        text-shadow: 
            0 -0.0625em 0 #999, 
            0 -0.125em 0 #efefef, 
            0 0.0625em 0 #fff, 
            0 0.125em 0 #333;
    }
    
   60% {
        transform: translateY(-0.1em);
        text-shadow: 
            0 0.03125em 0 #999, 
            0 0.0625em 0 #efefef, 
            0 -0.03125em 0 #fff, 
            0 -0.0625em 0 #333;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #999, 
            0 0 0 #efefef, 
            0 0 0 #fff, 
            0 0 0 #333;
    }
}

/* formular */

#formular {
  background-color:#dedede;
  padding:1.2rem 2rem;
  width: 100%;
  margin:0 auto;
  -webkit-border-radius: 15px; 
     -moz-border-radius: 15px; 
          border-radius: 15px;
  -webkit-box-shadow: 0px 12px 15px #ccc;
     -moz-box-shadow: 0px 12px 15px #ccc;
          box-shadow: 0px 12px 15px #ccc;
}

.input {
  position:relative;
  font-family: 'Sofia Sans Condensed', sans-serif;  font-size: 1.3rem;
  font-weight:200;
  color:#333;
  background-color: #FFF;
  width:100%;
  padding: 15px 0px 15px 15px;
  margin-bottom: 0.5rem;
  border: 3px solid #FFF;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition:0.2;
         transition:0.2s;
}


input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

.button {
  font-family: 'Sofia Sans Condensed', sans-serif;  font-size: 1.3rem;
  color:#FFF;
  background-color: #666;
  width:auto;
  text-align:center;
  text-decoration:none;
  padding: 15px;
  margin-bottom: 0.5rem;
  border: 3px solid #666;
  cursor: pointer;       
}

.button:hover,
.button:focus {
	background-color:#222;
	border: 3px solid #222;
}



/* topnav */
.mobile-container {
  max-width: 100vw;
  margin: auto;
  background-color: none;
  border-radius: 10px;
  height: 500px;
}

.mobile {
	visibility:hidden;
}

.topnav {
  overflow: hidden;
}

.topnav #myLinks {
  display: none;
}

#desktopnav {
  float: right;
  width: 80%;
  text-align: right;
  margin-top: -2rem;
}

#desktopnav a {
  color: #999 !important;
  text-decoration: none;
  text-transform: lowercase;
}
#desktopnav span {
  color: #000 !important;
  text-decoration: none;
  text-transform: lowercase;
}

#myLinks {
	float: left;
	position:absolute;
	right:3rem;
	z-index:1000;
}

.topnav a, .topnav span {
  float: left;
  color: #888;
  padding: 4px 10px;
  text-decoration: none;
  font-size: 17px;
  text-transform: lowercase;
}

.topnav span {
  color: #000;
}


.topnav a.icon {
  float: right;
}

.topnav a:hover {
  color: black;
}

.active {
  background-color: #04AA6D;
  color: white;
}

    
@media only screen and (max-width: 600px) {
	.animated-title {
		font-size: 10vmin;
		padding-top:-4rem;
}
	.arrow {
		width:2rem;
}
	.clicker {
		position:absolute;
		width: 100%;
		text-align: center;
		bottom: 1.5rem;
}

.copytext {
  top: 12rem;
}

.mobile {
	visibility:visible;
}
#desktopnav  {
	visibility:hidden;
}

}