body{
	font-family: 'Nothing You Could Do';
	font-size: medium; 
	color: #3d8cc7;
	margin: 0;
	height: 100%;
	width: 100%;
	background-image: url("../img/taufe-bg.png");

}

.tbl_container{
	font-size: small;
	width: 80%;
}

#tbl_commited1 th{
	background-color: #21BA45;
}

#tbl_commited0 th{
	background-color: red;
}

.speech-bubble {
	position: absolute;
	background: #21BA45;
	border-radius: .4em;
	text-align: center;
	vertical-align: text-top;
	z-index: 111;
	font-family: arial, helvetica, sans-serif;
	font-weight: bold;
	color: white;
	margin: 0;
	padding: 0;
	width: 35px;
	height: 30px;
	font-size: small;
    display: none;
    z-index: 150;
}



.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 0.813em solid transparent;
	border-bottom-color: #21BA45;
	border-top: 0;
	margin-left: -0.8em;
	margin-top: -0.6em;
}


/* CSS normal */
.calender{
	z-index: 100;
}

.gmaps{
	z-index: 99;
	background-image: url("../img/GoogleMaps_logo.svg"); 
	background-repeat: no-repeat;
	background-size: cover;
}

.imgblatt{
	background-image: url("../img/blatt.svg");
	background-size: 1500px;
	background-position: -400px 0;	
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	z-index: -20;
	position: absolute;
}

.container{
	/*background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));*/
	background: #EFEFEF;
	background-image: url("../img/blatt.svg");
	background-position: right;
	background-size: 180% auto;
	background-repeat: no-repeat;
	box-shadow: 3px 8px 10px rgba(0, 0, 0, 0.4);
	z-index: 45;
}

.container2{
	/*background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));*/
	background: #EFEFEF;
	box-shadow: 3px 8px 10px rgba(0, 0, 0, 0.4);
	z-index: 2;
}

.comment{
	margin: auto;
	position: absolute;
	top: 325px;
}

.img_luuk{
	background-image: url("../img/Luuk-Taufe-0002.png");
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: center;
}

.img_luuk2{
	background-image: url("../img/Luuk-Taufe-0001.png");
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: center;
}

.img_luuk3{
	background-image: url("../img/Luuk-Taufe-0003.png");
	background-repeat: no-repeat;
	background-size: cover;
  	background-position: center;
}

.btn_container{
	z-index: 120;
}

#txt_comment{
	padding: 0 30 00 00;
}

#passwort{
	z-index: 10;
}

#login{
	z-index: 10;
}

.info{
	display: none;
	margin: auto;
	padding: 10px 10px;
}

.addeventatc{
	margin: auto;
}


@media only screen and (min-width: 600px) { 
		body{
			font-size: xx-large;
		}

		.calender{
			position: absolute;
			top: 50px;
			left: 64%;
		}

		.speech-bubble{
			right: 10px;
			bottom: -20px;
		}
		
		.speech-bubble i{
			position: absolute;
			top: -8px;
			right: 5px; 
		}
		
		.gmaps{
			position: absolute;
			height: 68px;
			width: 68px;
			top: -8px;
			left: 220px;
		}


		.container{
			/*background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));*/
			position: absolute;
			width: 550px;
			height: 400px;
			margin: auto;
			top: 50px;
			left: 15%;
			max-width: 95%;
		}

		.container2{
			/*background: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));*/
			position: absolute;
			width: 550px;
			height: 400px;
			margin: auto;
			top: 160px;
			left: 40%;
		}

		.comment{
			width: 500px;
			margin: auto; 
		}


		.txt_welcome{
			position: absolute;
			right: 50px;
			top: 120px;
		}

		.name1{
			position: absolute;
			left: 320px;
			top: 180px;
			font-size: x-large;
		}
		.name2{
			position: absolute;
			left: 360px;
			top: 220px;
			font-size: x-large;
		}
		.name3{
			position: absolute;
			left: 300px;
			top: 260px;
			font-size: x-large;
		}

		.btn_container{
			position: absolute;
			width: 600px;
			max-width: 80%;
			right: 0px;
			bottom: 30px;
		}

		#btnsend{
			position: absolute;
			right: 10px;
			bottom: 20px;
		}
		#btntrash{
			position: absolute;
			right: 10px;
			bottom: 50px;
		}

		.img_luuk{
			position: absolute;
			transform: rotate(-15deg);
			top: 390px;
			left: 22%;
			width: 250px;
			height: 250px;
		}

		.img_luuk2{
			position: absolute;
			transform: rotate(-12deg);
			top: 390px;
			left: 23%;
			width: 250px;
			height: 250px;
		}

		.img_luuk3{
			position: absolute;
			transform: rotate(-4deg);
			top: 400px;
			left: 23%;
			width: 250px;
			height: 250px;
		}

		#passwort{
			position: relative;
			left: 150px;
			top: 300px;
			z-index: 10;
		}

		#login{
			position: relative;
			left: 450px;
			top: 264px;
			z-index: 10;
		}

		.info{
			width: 530px;
			height: 320px;
			margin: 0;
			top:0;
			overflow: hidden;
		}

		.addeventatc{
			margin: auto;
		}


}

@media only screen and (max-width: 600px) { 

		.calender{
			position: absolute;
			top: 23em;
			left: 5em;
		}
		
		
		.speech-bubble{
			right: 10px;
			bottom: -30px;
		}
		
		.speech-bubble i{
			position: absolute;
			top: 3px;
			right: 5px; 
		}


		.gmaps{
			position: absolute;
			height: 68px;
			width: 68px;
			top: -8px;
			left: 220px;
		}

		.container{
			width: 95%;
			height: 16em;
			margin: 1em auto;
		}

		.container2{
			position: absolute;
			width: 90%;
			height: 5em;
			left: 5%;
			top: 17em;

		}

		.comment{
			width: 90%;
			top: 1em;
		}


		.txt_welcome{
			position: absolute;
			right: 2em;
			top: 3em;
			font-size: x-large;
		}

		.name1{
			position: absolute;
			font-size: x-large;
			right: 3em;
			top: 5em;
		}
		.name2{
			position: absolute;
			font-size: x-large;
			right: 3em;
			top: 6em;
		}
		.name3{
			position: absolute;
			right: 2em;
			top: 7em;
			font-size: x-large;
		}

		.btn_container{
			position: absolute;
			width: 95%;
			top: 13.5em;
			margin: auto;
		}


		#commited1{
			position: absolute;
			left: 1em;
			width: 45%;
		}

		#commited0{
			position: absolute;
			right: 1em;
			width: 45%;
		}

		#btnsend{
			position: absolute;
			right: 1em;
			bottom: 1em;
			}

		#btntrash{
			position: absolute;
			right: 1em;
			bottom: 40px;
		}

		.img_luuk{
			position: absolute;
			transform: rotate(-15deg);
			top: 25em;
			left: 15%;
			width: 250px;
			height: 250px;
		}

		.img_luuk2{
			position: absolute;
			transform: rotate(-12deg);
			top: 25em;
			left: 15%;
			width: 250px;
			height: 250px;
		}

		.img_luuk3{
			position: absolute;
			transform: rotate(-4deg);
			top: 25em;
			left: 16%;
			width: 250px;
			height: 250px;

		}

		#passwort{
			position: absolute;
			left: 5em;
			top: 14em;
		}

		#login{
			position: absolute;
			left: 28em;
			top: 14em;
		}

		.info{
			display: none;
		}

}