@import url('https://fonts.googleapis.com/css?family=Karla&display=swap');


/* GENERAL */


* {
	font-family: Karla;
}

body {
	margin: 0;
  /*background: linear-gradient(140deg, #1F1D2B 8%,#44424E 92%);*/  
	background-color: #1F1D2B; /*63686E*/
	color: #FFFFFF;
	text-align: center;
	font-size: 18px;
}

div {
	margin: 0;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.left {
	float: left;
}

.right {
	float: right;
}

.container-tiles-outer {
	display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #63686E;
  color: #FFFFFF;
  padding-top: 4vw;
  padding-bottom: 4vw;
}

.container-tiles-inner {
	width: 60vw;
	margin: auto;
	
}

.innerContainer {
	width: 49%;
	border-radius: 2px;
	margin-bottom: 10%;
}

/* NAVIGATION */

/*verändert die Position*/
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
/* makes nav-menu fontsize bigger*/
/* centers buttons */
nav {
    width: auto;
    text-align: left;
    margin: 0;
    margin-left: 5vw;
    background-color: #1F1D2B;
}

nav ul{
    font-size: 1.7vw;
    line-height: 1.5em;
}

/* ordnet die Buttons nebeneinander statt untereinander an*/

nav ul li {
    display: inline-block;
    text-align: center;
}

li a {
  display: block;
  color: #78739C;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  display: block;
  color: #FFFFFF;
  position: relative;
  text-align: center;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
li span {
	display: block;
	position: relative;
	vertical-align: middle;
}

.active{
  color:#FFFFFF;
}

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

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.logo {
	margin:0 auto;
 	left: 50%;
	transform: translateX(-50%);
	margin-right: 3vw;
}

.logo img {
	max-width: 2.2vw;
  height: auto;
	vertical-align: middle;
}



/* TILES */

h2.tiles-heading {
  text-align:center;
  color:#FFFFFF;
  margin-top: 150px;
  margin-bottom:70px;
  font-size: 35px;
}

.tiles {
  float: left;
  width: 21.8vw;
  height: 21.8vw;
  padding:2vw;
  margin:2vw;
	cursor: pointer;
	border-radius: 2px;
}

/* color and images for tiles  */

.tile-img1 {
  /*background: url('../images/tile-left.jpeg');
  background-size: cover;*/
}

.tile-bright {
  background-color:#FFFFFF;
  color: #1F1D2B;
}

.tile-bright img {
	filter: invert(7%) sepia(4%) saturate(6895%) hue-rotate(209deg) brightness(90%) contrast(87%);
}


.tile-dark {
  background-color:#1F1D2B;
  color: #FFFFFF;
}

.tile-dark img {
	filter: invert(1);
}

.tile-text {
  text-align:center;
  font-size:3.8vw;
  margin-top:6vw;
}


.badge-top img {
	max-width: 2vw;
	float: right;
  height: auto;
}


/* Hover classes for individual tile boxes */


@media (hover: hover) and (pointer: fine) {
	.tile-bright:hover {
	  background-color:#1F1D2B;
	  color: #FFFFFF;
	}
	
	.tile-dark:hover {
	  background-color: #FFFFFF;
	  color: #1F1D2B;
	}
	
	.tile-img1:hover {
	   background-color: #FEDE00;
	}

	.tile-dark:hover img {
		filter: invert(7%) sepia(4%) saturate(6895%) hue-rotate(209deg) brightness(90%) contrast(87%);
	}

	.tile-bright:hover img {
		filter: invert(1);
	}

}

.tile-bright:active {
  background-color:#1F1D2B;
  color: #FFFFFF;
}

.tile-dark:active {
  background-color: #FFFFFF;
  color: #1F1D2B;
}

.tile-dark:active img {
	filter: invert(7%) sepia(4%) saturate(6895%) hue-rotate(209deg) brightness(90%) contrast(87%);
}
.tile-bright:active img {
	filter: invert(1);
}

.tile-img1:active {
   background-color: #FEDE00;
}

/* RESPONSIVE */


/* Smartphone */
@media only screen and (max-width: 1000px) {



	nav ul{
	    font-size: 5vw;
	}

	.container-tiles-inner {
		width: 87.5vw;
	}

	.tiles {
  	width: 35vw;
  	height: 35vw;
  	padding:2vw;
  	margin:2vw;
	}

	.tile-text {
  	font-size:6vw;
  	margin-top:10vw;
	}

	.badge-top img {
		margin-top: 1vw;
		margin-right: 1vw;
		max-width: 4vw;
	}	

	.logo img {
		max-width: 7vw;
	}
}

@media only screen and (min-width: 1000px) {

}