@import "ibm_plex.css";

/* 
	RT-Software
	by Niklas Schmidt / Nikolai Hieber

	Inspirations from:
	holz.nu, pixelarity.com & many more
*/

* { 
	box-sizing: border-box; 
}

html { 
	height: 100%;
	width: 100%;
}

body {
	background: #000;
	color: #fff;
	height: 100%;
	width: 100%;

	margin: 0;
	padding: 0;
	position: 0;

	font-family: "IBM Plex Sans", Helvetica, sans-serif;
	font-weight: 400;
	font-size: 14pt;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	-moz-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out;
	-webkit-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out;
	-ms-transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out;
	transition: color 0.4s ease-in-out, background-color 0.4s ease-in-out, border-bottom-color 0.4s ease-in-out;	
}

p.wrapperspecial {
	font-size: 16pt;
	font-weight: 400;
	color: #333;
	padding-left: 14px;
	text-align: left;	
}

p.copyright {
	padding-top: .25em;
	padding-bottom: .25em;
	font-size: 10pt;
	font-weight: 400;
}

/* Navigation */

.topnav {
  	overflow: hidden;
  	background: #43C6AC; 
	background: -webkit-linear-gradient(to right, #191654, #43C6AC);  
	background: linear-gradient(to right, #191654, #43C6AC); 

	background-size: 300%;
  	animation: flow 10s ease-in-out infinite;
}

.topnav a  {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  opacity: 90%;

}

.topnav a:hover {
  background-color:rgba(255,255,255,0.5);
  color: #000;
}

.topnav a:active {
  color: #000;
  background-color:rgba(255,255,255,0.5);
}
.topnav a.active {
  color: #000;
  background-color:rgba(255,255,255,0.5);
}

.topnav .icon {
  display: none;
  color: #fff;
}

/* Navigation Ende */

.landing-wrapper {
	float: left;
	display: table;
	width: 100%;
	
	min-height: 100%;
  	height: auto !important;
  	height: 100%;
	
	background: #333;

	margin: 0 auto;
	margin-top: 0;

	background: #43C6AC; 
	background: -webkit-linear-gradient(to right, #191654, #43C6AC);  
	background: linear-gradient(to right, #191654, #43C6AC); 

	background-size: 300%;
  	animation: flow 10s ease-in-out infinite;
}

.landing-wrapper header {
	display: table-cell;
	vertical-align: middle;
	text-align: center;

}

.landing-wrapper h1 {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 10vw;
	color: #fff;
}

.landing-wrapper h2 {
	text-transform: uppercase;
	font-weight: 300;
	font-size: 5vw;
	color: #fff;
}

footer {
	bottom: 0;
	width: 100%;
	text-align: center;
}

.copyright a  {
	color: #fff;
	text-align: center;
	text-decoration: none;
	opacity: 90%;
}

.copyright a:hover {
	color: #43C6AC;
}

.copyright a.active {
	color: #43C6AC;
	background: none;
}

.wrapper-heading {
	float: left;
	width: 100%;
	height: 5em;
	padding: 1em;
	background: #171717;
	border-bottom: solid 2.5px #43C6AC;
}

.wrapper-heading h1 {
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 32pt;
	color: #fff;
	margin: 0;
}

.wrapper-left {
	float: left;
	text-align: left;
	width: 100%;
	height: 28em;
	color: #fff;
	padding: 1em;
}

.wrapper-left a {
	color: #fff;
	text-align: center;
	text-decoration: none;
	opacity: 90%;
}
.wrapper-left a:hover{
	color: #43C6AC;
}

.wrapper-left a:active{
	color: #43C6AC;
	background: none;
}
.wrapper-datenschutz {
	float: left;
	text-align: left;
	width: 100%;
	height: auto;
	color: #fff;
	padding: 1em;
}

.wrapper-datenschutz a {
	color: #fff;
	text-align: center;
	text-decoration: none;
	opacity: 90%;
}
.wrapper-datenschutz a:hover{
	color: #43C6AC;
}

.wrapper-datenschutz a:active{
	color: #43C6AC;
	background: none;
}

.wrapper-right {
	float: right;
	text-align: right;
	width: 100%;
	height: 28em;
	color: #fff;
	border-bottom: solid 2.5px #43C6AC;
	padding: 1em;
}
.wrapper-left h1, .wrapper-right h1 {
	padding-top: 0em;
	width: 100%;
	font-weight: 400;
	font-size: 32pt;
	
	text-decoration: underline;
	text-decoration-color: #43C6AC;
}
.wrapper-left h2, .wrapper-right h2 {
	text-transform: uppercase;
	font-size: 12pt;
}
.wrapper-left p, .wrapper-right p {
	width: 80%;
	height: 20em;
	font-size: 16pt;
	font-weight: 400;
}
.wrapper-right p {
	float: right;
}

.wrapper-big {
	float: left;
	display: table;
	height: 20em;
	width: 100%;
	padding: 1em;
	background: #43C6AC; 
	background: -webkit-linear-gradient(180deg, #191654, #43C6AC);  
	background: linear-gradient(180deg, #191654, #43C6AC); 
	color: #fff;

	margin: 0 auto;
	margin-top: 0;

	border-bottom: solid 2.5px #43C6AC;
}

.wrapper-big header {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	text-align: center;
}

.wrapper-big header p {
	text-align: left;
}

.wrapper-big h1 {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 24pt;
}
.wrapper-big p {
	font-weight: 400;
	font-size: 14pt;
}

.box-container {
	float: left;
	display: table;
	width: 100%;
	
	background: #fff;
	border-bottom: solid 1.5px #43C6AC;
}
.box {
	padding-top: 5em;
	float: left;
	width: 50%;
	height: 25em;
	background: #171717;
	
}
.box:first-child {
	border-bottom: solid 1px #43C6AC;
	border-right: solid 1px #43C6AC;
}
.box:last-child {
	border-top: solid 1px #43C6AC;
	border-left: solid 1px #43C6AC;
}

.box h1 {
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	font-weight: 700;

	text-decoration: underline;
	text-decoration-color: #43C6AC
}
.box p {
	width: 75%;
	margin: auto;
	text-align: center;
	color: #fff;

}


@keyframes flow {
	0%{
		background-position: 0 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0 50%
	}
}

@media screen and (max-width: 1200px) {
	.wrapper-left p, .wrapper-right p {
		font-size: 12pt;
	}
}

@media screen and (max-width: 750px) {
	.wrapper-left, .wrapper-right {
		height: 22em;
	}
	.wrapper-left h1, .wrapper-right h1 {
  	font-size: 20pt;
  }
 	.wrapper-left h2, .wrapper-right h2 {
  	font-size: 12pt;
  }
 	.wrapper-left p, .wrapper-right p {
  	font-size: 9pt;
  }
  .box {
  	height: 15em;
  	width: 100%;
  	float: left;
  	border-top: solid 1px #43C6AC;
  	border-bottom: solid 1px #43C6AC;
  }

  .box:first-child {
		border-bottom: 0;
		border-right: 0;
	}
	.box:last-child {
		border-top: 0;
		border-left: 0;
	}
  .box h1 {
  	font-size: 20pt;
  }
  .box p {
  	font-size: 9pt;
  }
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    border-bottom: solid 1px #fff;
  }
  .wrapper-heading h1 {
  	font-size: 20pt;
  }
  .wrapper-heading {
  	height: 3em;
  	padding: .5em;
  }
  .wrapper-left, .wrapper-right {
  	float: left;
  	height: 28em;
  	width: 100%;
  	border-right: 0;
  	border-left: 0;
  }
  .wrapper-big header {
  	width: 100%;
  	float: left;
  }
  .wrapper-big h1 {
  	font-size: 18pt;
  }
  .wrapper-big p {
  	font-size: 9pt;
  }
}
@media screen and (max-width: 600px) {
	.box-container {
		height: 40em;
	}
	.box {
		padding-top: 1em;
		height: 10em;
	}
	.box h1 {
		font-size: 14pt;
	}
}