/*
selectors

id: 
mySidenav/mainDiv/divOne

class: 
nav/material-icons/container1/text-block/image/imgcontainer/text/workflow/karte/maincontent
/biblio/row/column/card/author/title/button/paper-shadow
*/

/*whole body*/
body {
 background: #EEE2DC;
 background: linear-gradient(180deg, rgba(238,226,220,1) 0%, rgba(237,199,183,0.80) 50%, rgba(186,178,181,0.8) 100%);
 /*background: linear-gradient(180deg, rgba(238,226,220,1) 0%, rgba(237,199,183,1) 20%, rgba(197,203,227,1) 40%, rgba(186,178,181,1) 60%, rgba(18,60,105,1) 80%, rgba(172,59,97,1) 100%);*/
 margin-right: 110px;
 margin-left: 110px;
 margin-bottom: 10px;
 font-family: 'PT Sans', sans-serif;
}

/*navigation bar*/
#mySidenav.nav a {
  position: fixed;
  left: -95px;
  transition: 0.3s;
  padding: 15px;
  width: 120px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 5px 5px 0;
}

#mySidenav.nav a:hover {
  left: 0;
}

#project {
  top: 20px;
  background-color: #EDC7B7;
}

#map {
  top: 80px;
  background-color: #C5CBE3;
}

#results {
  top: 140px;
  background-color: #BAB2B5;
}

#references {
  top: 200px;
  background-color: #123C69;
}

#about {
  top: 260px;
  background-color: #AC3B61;
}

/*Title*/
div.paper-shadow{
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	
	}

div.text-block h1{
	color: white;
	position: absolute;
	top:40%;
	left:50%;
	transform: translate(-50%, -50%);
	animation: mymove0 8s infinite;
	}

@keyframes mymove0 {
	50% {text-shadow: 4px 4px 8px #000000;}
}

div.text-block h3{
	color: white;
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	animation: mymove1 8s infinite;
	}

@keyframes mymove1 {
	50% {text-shadow: 2px 2px 4px #000000;}
}

/*Guide SDG*/ 
/*
#DivOne.mainDiv{
	width:25%; 
  	padding-top: 10px; 
	padding-left: 50px; 
	padding-right: 50px;
	} 
*/
#SDG.row{
	column-count: 2;
	column-gap: 50px;
}

#SDG3.mainDiv {
  position: relative;
  left:250px;
  width: 50%;
}

#SDG3.image {
  display: block;
  top:10px;
  width:300px;
  height: 300px;
}

#SDG3.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: #C5CBE3;
}

#SDG3.mainDiv:hover .overlay {
  opacity: 1;
}

#SDG3.text {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#SDG13.mainDiv {
  position: relative;
  width: 50%;
}

#SDG13.image {
  display: block;
  top:10px;
  width: 300px;
  height: 300px;
}

#SDG13.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  width: 300px;
  opacity: 0;
  transition: .5s ease;
  background-color: #C5CBE3;
}

#SDG13.mainDiv:hover .overlay {
  opacity: 1;
}

#SDG13.text {
  color: white;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

/*Main content*/
#Project1.maincontent {
	position: relative;
	top: -10px; 
	padding-left: 80px; 
	padding-right: 80px;
	}

#Project2.maincontent {
	position: relative;
	top: 10px; 
	padding-left: 80px; 
	padding-right: 80px;
	}

/*Map*/
div.karte {
	position:relative;
	top:10px;
	padding-left: 80px; 
	padding-right: 80px;
	border:0px #ffffff none;
}

/*
#FC.script{
	position:relative;
	top:-390px;
	width: 75%;
	padding-left: 50px; 
	padding-right: 50px;
	border:0px #ffffff none;
}
*/

/*Result*/
#Results.maincontent {
	position: relative;
	top: 10px; 
	padding-left: 80px; 
	padding-right: 80px;
	}

/*Author*/
div.author{
	position: relative;
	padding-left: 80px; 
	padding-right: 80px;
}

div.row {
	column-count: 3;
	column-gap: 50px;
	bottom:10px;
}

div.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}
div.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

div.container {
  padding: 2px 16px;
}
	
div.author {
	padding-left: 80px; 
	padding-right: 80px;
}

/*Footer*/
div.footer {
	position:relative; 
	top: 10px;
	background-color: black;
	color: white;
	}