@charset "UTF-8";

* 	{padding:0;
	 margin:0;
	 border:0;}

body, html {	background-color: #212636;
				color: #FFF;
				font-size:16px;
				line-height:24px;
				padding: 0;
				font-family: 'Fira-Light', Arial, Helvetica, sans-serif;
				overflow-y: visible;
				overflow-x: visible;}

a {color:#212636; text-decoration:none;}
a:hover {transition: 1s all linear;color:#7bdf00;text-decoration:none;}

@font-face {	    font-family: 'Fira-Light'; 
    			    src: url('../material/FiraSans-Light.otf');}

@font-face {	    font-family: 'Fira-Ultra'; 
    			    src: url('../material/FiraSans-Ultra.otf');}
	
@font-face {	    font-family: 'Fira-ExtraBold'; 
					src: url('../material/Fira-ExtraBold.otf')}

svg path {
    fill: #212636;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

#return-to-top {
	z-index: 999;
    position: fixed;
    bottom: 40px;
    right: 20px;
    background: rgb(123, 223, 0);
    background: rgba(123, 223, 0, 1);
    width: 50px;
    height: 50px;
	color:#212636;
	margin-right:20px;
	padding:17px 0 0 16px;
    display: none;
    text-decoration: none;
	font-size: 19px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#return-to-top:hover {
    background: rgba(123, 223, 0, 0.5);
	color: #212636;
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

#kontakt {
	z-index: 999;
    position: fixed;
    top: 40px;
    right: 20px;
    background: rgb(123, 223, 0);
    background: rgba(123, 223, 0, 1);
    width: 50px;
    height: 50px;
	color:#212636;
	margin-right:20px;
	padding:13px 0 0 16px;
    text-decoration: none;
	font-size: 19px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
	animation-iteration-count:infinite;
	animation-name: bounce;
	animation-duration: 3s; 
	
}

#kontakt:hover {
    background: rgba(123, 223, 0, 0.5);
	color: #212636;
}

#back {
    background: rgb(123, 223, 0);
    background: rgba(123, 223, 0, 1);
    width: 50px;
    height: 50px;
	color:#212636;
	padding:20px 15px 0px 15px;
    text-decoration: none;
	font-size: 19px;
	margin-right:20px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#back:hover {
    background: rgba(123, 223, 0, 0.5);
	color: #212636;
}

#download {
	z-index: 999;
    position: fixed;
    top: 120px;
    right: 20px;
    background: rgb(123, 223, 0);
    background: rgba(123, 223, 0, 1);
    width: 50px;
    height: 50px;
	color:#212636;
	margin-right:20px;
	padding:14px 0 0 15px;
    text-decoration: none;
	font-size: 19px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;	
}

#download:hover {
    background: rgba(123, 223, 0, 0.5);
	color: #212636;}

@keyframes bounce {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
	100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

img {padding:0;}

.main {font-size:14rem; font-family:'Fira-Ultra';}

.punkt {background-color:#7bdf00; width:22px; height:22px; border-radius: 20px; padding:0; margin:0 10px 9px 0; float:left}

.date {color:#7bdf00;font-size:9px;text-transform: uppercase;font-family:'Fira-Ultra';letter-spacing: 1px;vertical-align: middle;}

.headline {margin-bottom: 5rem; padding:0 40px 0 40px; margin-top:200px;}

.spacer {border-bottom:2px solid #141428; margin: 70px 2% 70px 2%}

.all {margin: 0% 1% 0 1%;}

.footer		{	padding: 15px;
				margin-top:50px;
				height:50px;
   				background: rgb(123, 223, 0);
				width:100%;
	  			bottom:0;
				left:0;
				color: #212636;
				font-style:normal;
				font-weight:normal;
				font-family: 'Fira-Ultra', Arial, Helvetica, sans-serif;
				position:absolute;}
				 
				 
h1			{	line-height:55px;
				font-size:50px;
				padding:10px 30px 10px 30px;
				text-align:center;
				text-transform:uppercase;
				font-family:'Fira-Ultra', Arial, Helvetica, sans-serif;;
				letter-spacing:1px}
				 
h2				{line-height:22px;
				color:#FFF;
				font-size:18px;
				padding:0px 0px 0px 0px;
				text-align:left;
				font-family:'Fira-Ultra', Arial, Helvetica, sans-serif;;
				letter-spacing:1px}
				 
h3				{line-height:35px;
				color:#FFF;
				font-size:30px;
				padding:10px 30px 10px 30px;
				text-align:left;
				text-transform:uppercase;
				font-family:'Fira-Ultra', Arial, Helvetica, sans-serif;;
				letter-spacing:1px}
				 
.trenner		 {width:350px;
			      padding-top:10px;
				  padding-bottom:10px;}
				 
				 
.text			{color:#000; text-align:left;}
	

				  
@media (max-width: 1476px) {	 .all {margin: 10% 2% 0 2%;}

@media (max-width: 700px)  {    .main {font-size:1000%; margin-top:100px;}
								.headline {margin-top:10%}}

@media (max-width: 535px)  {    .main {font-size:800%; margin-top:100px;}
								.headline {margin-bottom: 30%;margin-top:10%} 
}
				 
@media (max-width: 425px)  {    .main {font-size:500%; margin-top:10px;}
								.headline {margin-bottom: 20%; margin-top:150px;}
}