@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.7.1/css/all.css);

body {
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif;
	color: #46556a;
	padding: 20px;
}

a{
	cursor: pointer;
}

p{
	font-size: medium;
	margin: 10px 0;
	line-height: 150%;
}

hr{
	display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid silver;
}
.text{
	margin: 0 calc(100%/20);
}
/* Colors */
#div_1,.edu{
  background: #df9c21;
}
#div_2,.change{
  background: #e5087e;
}
#div_3,.politic{
  background: #46556a;
}
#div_4,.software{
  background: #199bdc;
}
#div_5,.research{
   background: #95b422;
}

.activity_1{
  border-color: #df9c21 !important;
}
.activity_1 a{
	color: #df9c21;
	/*color: white;*/
}
.activity_2{
  border-color: #e5087e !important;
}
.activity_2 a{
	color: #e5087e;
	/*color: white;*/
}
.activity_3{
  border-color: #46556a !important;
}
.activity_3 a{
	color: #46556a;
}
.activity_4{
  border-color: #199bdc !important;
}
.activity_4 a{
	color: #199bdc;
}
.activity_5{
   border-color: #95b422 !important;
}
.activity_5 a{
	color: #95b422;
}
.info{
	position: relative;
}

.logo{
	background: url(img/oede_1.svg) no-repeat top center;
	background-size: contain;
	width: calc(100%/5);
	height: 200px;
    float: left;
    margin-right: calc(100%/20);
}

#Close{
	position: fixed;
	height: 100%; width: 100%;
	top: 0; left: 0;
}

/* Arbeitsgruppen Tabs */
ul#Tabs {
	width: 100%;
	height: 300px;
	margin: 0 auto;
	list-style: none;
	overflow: hidden;
  	padding: 0;
}
.group{
	border-radius: 15px;
}

ul#Tabs li {	
	float: left;
	width: calc(100%/5);
	height: 100%;
}

.ag-icon{
	margin-top: 40px;
	width: 60%;
	max-width: 120px;
	height: auto;
}

ul#Tabs li a {
	position: relative;
	display: block;
	height: 100%;
	margin-top: 40px;
	padding: 10px 0 0 0;
	text-align: center;	
	text-decoration: none;
	color: #ffffff;
	box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
    transition: padding 0.2s ease, margin 0.2s ease;
}
#Tabs li:first-child a {
	z-index: 3;
	border-top-left-radius: 15px;
}
#Tabs li:nth-child(even) a {
	z-index: 2;
}
#Tabs li:last-child a {
	z-index: 3;
	box-shadow: -8px 15px 25px -2px rgba(0,0,0,0.3);
	border-top-right-radius: 15px;
}

ul#Tabs li a:hover {
	margin: 35px 0 0 0;
	padding: 10px 0 5px 0;
}
ul#Tabs li a.active {
	margin: 0;
	padding: 10px 0 10px 0;
	z-index: 4;
	outline: none;
}

#Tabs h1,#Grid h1{
	font-size: larger;
	font-weight: normal;
	letter-spacing: .5px;
}

#Tabs h2{
	font-size: large;
	color: #4f5f75;
	background: gold;
	font-weight: normal;
}

/* Information zu AGs*/
#Content {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	border-bottom-right-radius: 15px;
	border-bottom-left-radius: 15px;
}
#Content div {
	display: none;
	padding: 40px;
}
#Content div p{
	color: #ffffff;
	padding: 10px;
}

a.link{
  font-size: small;
  text-transform: uppercase;
  background-color: white;
  border-radius: 30px;
  letter-spacing: .5px;
  cursor: pointer;
  padding: 12px 35px;
  text-decoration: none;
  font-weight: bold;
}
a.link i {
   margin-left: 5px;
}

/* Activities */

#Activities{
	margin-top: 60px;
	position: relative;
}
#Activities hr {
	margin: 45px 15px;
    display: flex;
}
#Activities h2 {
	margin-top:30px;
	margin-left:20px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* Umbrechen, sobald die Box 300 Pixel Breite hat */

}

.grid div {
	position: relative;
	margin: 1em;
	padding: 1em;
	border-radius: 15px;
	/*border: 1px solid silver;*/
	box-shadow: 0 0 5px rgba(0,0,0,.25);
}
#Grid div {
	background-color:#eee;
	color:#222;
}
#Grid-Done div {
	background-color:#fff;
	color:#888;
}
.line{
	text-align: center;
    top: -60px;
    position: absolute;
}
.line h2{
	background: transparent;
    padding: 20px;
    display: inline-block;
}

.grid a,.text a{
	text-decoration: none;
	color: #1499df;
	cursor: pointer;
}
.disabled{
	display: none;
	opacity: .5;
}
@media only screen and (max-width: 800px)  {
   #Tabs h1,#Tabs h2{font-size: 2vw;}

   ul#Tabs {
   	height: 200px;
   }
}