@font-face { font-family: 'Anton'; src: url('../fonts/Anton-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Bellota Text'; src: url('../fonts/BellotaText-Regular.ttf') format('truetype'); }

@media only screen and (max-width: 650px) {
	/* GENERAL */
	body {
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		background-color: white;
	}

	.grecaptcha-badge {
		display: none;
	}

	#landingpage {
		display: none;
	}

	#scroll_box {
		display: none;
	}

	#footer {
		display: none;
	}

	button, a, input, textarea {
		outline:none;
		-webkit-tap-highlight-color: transparent;
	}

	h1 {
		font-size: 5.5vh;
		font-family: 'Anton';
		color: #9C867C;
		line-height: 6.25vh;
		margin: 0;
	}

	h2 {
		font-size: 4.25vh;
		font-family: 'Anton';
		color: #9C867C;
		margin: 0;
		margin-bottom: 2vw;
		opacity: 0.85;
	}

	h3 {
		font-size: 5.5vh;
		font-family: 'Anton';
		color: white;
		margin: 0;
		opacity: 0.85;
	}

	p {
		font-size: 2.1vh;
		font-family: 'Bellota Text';
		margin: 0;
		line-height: 3.75vh;
		hyphens: auto;
		-ms-hyphens: auto;
		-webkit-hyphens: auto;
		text-align: justify;
	}

	.close_button {
		width: 7.5vw;
		height: 7.5vw;
		padding: 0;
		background: none;
		border: none;
		position: absolute;
		top: 7.5vw;
		right: 7.5vw;
		z-index: 20;
	}

	.close_button img {
		width: 100%;
		height: 100%;
	}





	/* CONTENT */
	#content {
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		overflow-x: hidden;
	}

	.scroll_fade_top {
		display: none;
	}

	.content_box {
		position: relative;
		width: 90%;
		height: auto;
		padding: 0% 5% 5% 5%;
	}

	.theme {
		width: 95vw;
		margin-left: -5vw;
		height: 33vw;
		overflow: hidden;
		margin-bottom: 15%;
		box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
	}

	.theme_picture {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		opacity: 0.75;
	}

	.theme_picture img {
		display: none;
	}

	#start_content .theme_picture {
		background-image: url('../images/themes/theme_start_mobile.jpg');
	}

	#beratung_content .theme_picture {
		background-image: url('../images/themes/theme_beratung_mobile.jpg');
	}

	#baumpflege_content .theme_picture {
		background-image: url('../images/themes/theme_baumpflege_mobile.jpg');
	}

	#baumfaellung_content .theme_picture {
		background-image: url('../images/themes/theme_baumfaellung_mobile.jpg');
	}

	#entsorgung_content .theme_picture {
		background-image: url('../images/themes/theme_entsorgung_mobile.jpg');
	}

	#mobile_header {
		width: 70%;
		height: auto;
		padding: 7% 5% 10% 5%;
	}

	#mobile_header img {
		float: left;
		height: auto;
		width: 20%;
		margin-right: 2.5%;
	}

	#mobile_header h1 {
		height: 12.5vh;
		display: block;
		float: right;
		width: 75%;
		margin-bottom: 10%;
	}

	.content_block {
		margin-bottom: 10%;
	}

	#last_block {
		margin-right: 15%;
		width: 85%;
		margin-bottom: 5%;
	}

	.content_block img {
		width: 80%;
		height: auto;
		left: 50%;
		margin-left: -40%;
		position: relative;
		margin-top: 7.5%;
	}

	.content_block p img {
		width: 5vw;
		height: auto;
		margin: 0;
		left: 0;
	}

	iframe {
		width: 100%;
		height: 40vh;
		position: relative;
		margin-top: 10%;
	}





	/* IMAGE GALLERY */
	#image_gallery {
		display: none;
	}

	#image_gallery_viewer_close_button {
		display: none;
	}

	#image_gallery_viewer {
		display: none;
	}

	/*
	#image_gallery {
		width: 100%;
		height: 50vw;
		display: grid;
		grid-template-columns: 8% 82% 8%;
		grid-template-rows: 100%;
		grid-template-areas: "switch_section_left image_section switch_section_right";
	}

	#switch_section_left {
		grid-area: switch_section_left;
	}

	#switch_section_right {
		grid-area: switch_section_right;
	}

	.image_gallery_button {
		position: relative;
		display: none;
		width: 100%;
		height: 100%;
		background: none;
		border: none;
	}

	#image_gallery_right_button {
		display: block;
	}

	.image_gallery_button img {
		height: 5vw;
		width: auto;
		position: absolute;
		top: 22.5vw;
		transition: 250ms;
	}

	#image_gallery_left_button img {
		transform: rotateZ(180deg);
		left: 10%;
	}

	#image_gallery_right_button img {
		right: 10%;
	}

	#image_section {
		grid-area: image_section;
		overflow: hidden;
		height: auto;
		width: 100%;
		padding-bottom: 1.5vw;
	}

	#image_section_wrapper {
		height: 100%;
		left: 0vw;
		position: relative;
	}

	.image_wrapper {
		display: inline-block;
		height: 100%;
		width: 12vw;
		border:none;
		overflow: hidden;
		padding: 0;
		background: none;
		margin-right: 2.2vw;
		opacity: 0.75;
		transition: 500ms;
	}

	.image_wrapper:hover {
		opacity: 1;
	}

	.image_wrapper:last-child {
		margin: 0;
	}

	.image_wrapper img {
		height: 100%;
		width: auto;
		transition: 500ms;
	}

	#image_gallery_viewer {
		position: fixed;
		display: none;
		z-index: 50;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
	}

	#image_gallery_viewer_background {
		width: 100%;
		height: 100%;
		position: absolute;
		display: block;
		background-color: grey;
		opacity: 0.85;
		z-index: 10;
	}

	#image_gallery_viewer_close_button {
		width: 7.5vw;
		height: 7.5vw;
		padding: 0;
		background: none;
		border: none;
		position: absolute;
		top: 7.5vw;
		right: 7.5vw;
		z-index: 20;
	}

	#image_gallery_viewer_close_button img {
		width: 100%;
		height: 100%;
	}

	#image_gallery_viewer_image {
		position: absolute;
		max-width: 80%;
		top: 50%;
		left: 50%;
		z-index: 20;
		max-height: 80%;
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	}
	*/





	/* NAVIGATION */
	#desktop_nav {
		display: none;
	}

	#mobile_nav_button {
		top: 3.5%;
		position: fixed;
		right: 0%;
		margin: 0;
	}

	#mobile_nav {
		position: fixed;
		z-index: 50;
		height: 100vh;
		width: 100vw;
		top: 0;
		right: -100vw;
		display: block;
		background-color: #9C867C;
	}

	#mobile_nav ul {
		width: 80%;
		height: 72.5%;
		position: absolute;
		top: 12.5%;
		left: 10%;
		color: white;
	}

	#nav_list {
		padding-left: 6.5%;
		padding-top: 5%;
	}

	#mobile_nav ul li {
		list-style-type: none;
		margin-bottom: 1.5vh;
	}

	#mobile_nav ul li a {
		text-decoration: none;
	}

	#impressum_datenschutz {
		position: absolute;
		width: 80%;
		left: 10%;
		height: auto;
		bottom: 12.5%;
	}

	#impressum_datenschutz ul {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		padding: 0;
		margin: 0;
		left: 0;
		list-style-type: none;
	}

	#impressum_datenschutz ul li {
		position: relative;
		display: inline-block;
		width: 49%;
		margin: 0;
		text-align: center;
	}

	#impressum_datenschutz ul li a {
		text-decoration: none;
		display: block;
		position: relative;
		color: white;
		font-family: 'Anton';
		font-size: 3.25vh;
		opacity: 0.75;
		transition: 250ms;
		margin: 0;
	}





	/* CONTACT */
	#contact_section {
		position: fixed;
		z-index: 40;
		width: 15vw;
		height: auto;
		bottom: 3.5%;
		right: -15vw;
	}

	.dialogue_button {
		width: 13vw;
		height: 13vw;
		float: right;
		background-color: #9C867C;
		border: none;
		opacity: 1;
		transition: 250ms;
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		z-index: 10;
		position: relative;
	}

	#whatsapp_button p {
		display: none;
	}

	.dialogue_button:first-child {
		margin-bottom: 10%;
	}

	.dialogue_button img {
		width: 10vw;
		height: 10vw;
		left: 1.5vw;
		top: 1.5vw;
		position: absolute;
	}

	#dialogue_box {
		position: fixed;
		z-index: 40;
		height: 100vh;
		width: 100vw;
		top: 0;
		right: -100vw;
		display: none;
		background-color: #9C867C;
	}

	#contact_information {
		display: none;
	}

	#contact_form {
		width: 80%;
		height: 72.5%;
		position: absolute;
		z-index: 20;
		top: 10%;
		left: 10%;
		color: white;
	}

	table {
		position: relative;
		display: block;
		width: 100%;
		height: auto;
		margin-top: 3.5%;
	}

	tbody {
		width: 100%;
		position: relative;
		display: block;
	}

	tr {
		width: 100%;
		position: relative;
		display: block;
	}

	td {
		width: auto;
		height: auto;
		padding: 0;
		padding-bottom: 2%;
	}

	label {
		position: relative;
		display: block;
		width: 30vw;
		line-height: 5vh;
		color: white;
		font-size: 2.75vh;
		font-family: 'Bellota Text';
		height: 100%;
	}

	label img {
		position: relative;
		display: none;
		width: 3vh;
		height: 3vh;
		margin: 1vh 0.75vw 0vw -1vw;
		float: left;
		transform: rotateZ(-90deg);
		transition: 250ms;
	}

	#radio_container {
		position: relative;
		display: block;
		height: auto;
		width: 100%;
	}

	.container {
	  display: inline-block;
	  position: relative;
	  cursor: pointer;
	  font-size: 2vh;
	  line-height: 5.5vh;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  text-align: right;
	  width: auto;
	  height: auto;
	  padding-left: 3vh;
	  margin-right: 1vh;
	}

	.container input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	  height: 0;
	  width: 0;
	}

	.checkmark {
	  position: absolute;
	  top: 1.25vh;
	  left: 0;
	  height: 2.5vh;
	  width: 2.5vh;
	  background-color: white;
	  border-radius: 50%;
	  transition: 250ms;
	}

	.container:hover input ~ .checkmark {
	  background-color: white;
	}

	.container input:checked ~ .checkmark:after {
	  background-color: #9C867C;;
	}

	.checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	.container input:checked ~ .checkmark:after {
	  display: block;
	}

	.container .checkmark:after {
	  top: 0.5vh;
	  left: 0.5vh;
	  width: 1.5vh;
	  height: 1.5vh;
	  border-radius: 50%;
	  background-color: white;
	  transition: 250ms;
	} 

	input[type=tel], input[type=text], input[type=email], textarea {
		position: relative;
		display: block;
		width: 45vw;
		height: 100%;
		opacity: 0.8;
		font-size: 2.75vh;
		font-family: 'Bellota Text';
		color: white;
		border: none;
		background: none;
		text-align: right;
		transition: 250ms;
	}

	input[type=tel]:focus, input[type=text]:focus, input[type=email]:focus {
		opacity: 1;
	}

	textarea:focus {
		opacity: 1;
	}

	input[type=submit] {
		clear: both;
		position: relative;
		display: block;
		width: 35%;
		line-height: 5vh;
		font-size: 3.5vh;
		height: auto;
		font-family: 'Anton';
		color: white;
		background: none;
		border: none;
		opacity: 0.85;
		transition: 250ms;
		left: 50%;
		margin-left: -17.5%;
		margin-top: 5%;
	}
}