* {
	font-family: sans-serif;
}
body {
	margin:0;
}
input {
	height:30px;
	border-radius: 15%;
	font-size: 100%;
}
form {
	font-size:100%;
}
#color {
	height: 200px !important;
	width: 200px !important;
	border-radius: 0px !important;
}
#gm {
	height: 50px;
    font-size: 150%;
}
.content {
	background-color:#00a2ff;
}
.titel {
	width:100%;
}
.titel img, canvas {
	width:100%;
	height:400px;
}
#titel2 {
	width:100%;
	display:none;
	object-fit: cover;
	object-position: center;
	height: 400px;
}
.fotocontainer {
	background-color:#00a2ff;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: contain;
	height: 1000%;
	display: none;
}
.foto {
	background-color:#00a2ff;
	display:block;
	height: 210px;
	float: right;
	margin: 50px;
	margin-left: 300px;
	border-radius: 5%;
}
.mygal {
		width: 800px !important;
		overflow-y:visible !important;
}
.mygal .myitem {width:100%;height:100%;text-align:center;}
.mygal .myitem img {width:90%;position:absolute;left:-100%;right:-100%;top:-100%;bottom:-100%;margin:auto;}
.footer {

	width: 100%;
	bottom: 0;
	left:0;
	text-align:center;
	background-color: #FFF;
}
.button {
	border-radius:25%;
	border: none;
	color: white;
	font-size:130%;
	font-weight:bold;
	padding: 38px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	margin: 250px auto 50px auto;
	cursor: pointer;
}
.button:hover {
	background-color: darkred; 
}
.button:active {
	background-color: green;
}
.button1 {
	background-color: #f20fb6;
}
.button2 {
	background-color:#aff20f;
}
.button3 {
	background-color:gray;
}
.vertically-centered {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}
.s-buttons {
	display:none;
	height: 400px;
}
.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
@media only screen and (min-width: 768px) {
	.button3 {
		position: relative;
		top: 125px;
		margin-top:0px !important;
	}
}
@media only screen and (min-width: 300px) and (max-width: 767px) {
	input {
		height:50px !important;
		border-radius: 15% !important;
		font-size: 100% !important;
	}
	form {
		font-size:100% !important;
	}
	.foto {
		height: 200px !important;
		margin: 50px auto 0px auto;
		margin-left:auto;
		float: none;
	}
	.button {
		margin: 125px auto 50px auto;

		padding: 48px;
	}
	.fotocontainer {
			background-image: none;
			border-right:none;
			margin-top:120px;
	}
	#titel {
		display:none;
	}
	#titel2 {
		display:initial;
	}
	.mygal {
		width: 400px !important;
		
	}
}