@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 (min-width: 650px) {
	/* GENERAL */
	body {
		padding: 0;
		margin: 0;
		overflow-x: hidden;
		background-color: white;
	}

	.grecaptcha-badge {
		display: none;
	}

	button:hover {
		cursor: pointer;
	}

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

	h1 {
		font-size: 7.25vw;
		font-family: 'Anton';
		color: #9C867C;
		line-height: 8.5vw;
		margin: 0;
	}

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

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

	h6 {
		font-size: 1.25vw;
		font-family: 'Anton';
		color: #9C867C;
		margin: 0;
	}

	p {
		font-size: 1.25vw;
		font-family: 'Bellota Text';
		margin: 0;
		line-height: 1.75vw;
	}

	#scroll_box {
		display: block;
		width: 100%;
		height: 2000px;
		position: relative;
		z-index: 10;
	}





	/* LANDINGPAGE */
	#landingpage {
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 20;
	}

	#heading {
		position: absolute;
		display: block;
		width: 50vw;
		height: auto;
		left: 50%;
		margin-left: -19.5vw;
		top: 12.5%;
		z-index: 20;
	}

	#heading img {
		position: relative;
		display: block;
		float: left;
		height: auto;
		width: 10.5vw;
	}

	#heading_text {
		position: relative;
		display: block;
		float: right;
		height: 100%;
		width: 75%;
	}

	#heading_text h1 {
		display: block;
		position: relative;
		height: auto;
	}

	#switch_to_content_button {
		position: absolute;
		display: block;
		width: auto;
		height: 2vw;
		background-color: transparent;
		top: 50%;
		right: 5%;
		margin-top: -1vw;
		border: none;
	}

	#switch_to_content_button img {
		width: auto;
		height: 100%;
	}





	/* RATINGS */
	#ratings {
		position: absolute;
		display: block;
		height: auto;
		right: 10%;
		bottom: 15%;
		z-index: 20;
	}

	.rating {
		display: block;
		position: relative;
		margin: 0;
		float: left;
		width: 12vw;
		height: auto;
		margin: 0% 3vw 0% 3vw;
	}

	.rating p {
		position: relative;
		display: block;
		width: 100%;
		margin-top: 2.5%;
		hyphens: auto;
		opacity: 0.75;
	}

	.rating_stars {
		position: relative;
		display: grid;
		width: 65%;
		grid-template-areas: "star_1 star_2 star_3 star_4 star_5";
		grid-template-columns: 20% 20% 20% 20% 20%;
		grid-template-rows: 100%;
		height: 1.3vw;
		margin-top: 1.5%;
	}

	.rating_stars img {
		position: relative;
		display: inline-block;
		height: 100%;
		width: auto;
	}

	.star_unfilled {
		opacity: 0.5;
	}





	/* THEMES */
	#landingpage_theme {
		position: absolute;
		left: 0%;
		width: 35%;
	}

	.theme {
		position: fixed;
		display: block;
		top: 0;
		height: 100%;
		width: 25%;
		overflow: hidden;
		z-index: 20;
	}

	.left .theme{
		left: 100%;
	}

	.right .theme{
		right: 100%;
	}

	.theme_element_one {
		height: 120%;
		width: 50vw;
		background-color: white;
		position: absolute;
		z-index: 20;
	}

	.theme_element_two {
		height: 130%;
		width: 150%;
		background-color: white;
		position: absolute;
		z-index: 20;
	}

	#landingpage_theme .theme_element_one {
		transform: rotateZ(-20deg) translateX(22.5vw) translateY(-10vh);
	}

	#landingpage_theme .theme_element_two {
		transform: rotateZ(32.5deg) translateX(30vw);
	}

	.left .theme_element_one {
		transform: rotateZ(-20deg) translateX(16.5vw) translateY(-10vh);
	}

	.left .theme_element_two {
		transform: rotateZ(32.5deg) translateX(22.5vw);
	}

	.right .theme_element_one {
		transform: rotateZ(20deg) translateX(-40vw) translateY(-10vh);
	}

	.right .theme_element_two {
		transform: rotateZ(-32.5deg) translateX(-32.5vw);
	}

	.theme_picture {
		height: 100vh;
		width: auto;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;
		z-index: 10;
	}

	.left .theme_picture {
		-moz-transform: scaleX(-1) translateX(0);
		-o-transform: scaleX(-1) translateX(0);
		-webkit-transform: scaleX(-1) translateX(0);
		transform: scaleX(-1) translateX(0);
	}

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

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

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

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

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

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

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





	/* CONTENT */
	#content {
		display: none;
		width: 100%;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.scroll_fade_top {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 7.5vw;
		background-color: white;
		z-index: 20;
		box-shadow: 0 0 25px 35px white;
	}

	#mobile_header {
		display: none;
	}





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

	#mobile_nav_button {
		display: none;
	}

	#desktop_nav {
		width: 75%;
		height: auto;
		position: fixed;
		z-index: 30;
		left: 12.5%;
		margin-top: 2.5%;
		top: -50%;
	}

	#desktop_nav ul {
		display: grid;
		width: 100%;
		grid-template-rows: 100%;
		grid-template-columns: 20% 20% 20% 20% 20%;
		padding: 0;
		margin: 0;
	}

	#desktop_nav ul li {
		display: inline-block;
		list-style-type: none;
	}

	#desktop_nav ul li button {
		border: none;
		background: none;
		color: #9C867C;
		font-size: 1.5vw;
		font-family: 'Bellota Text';
		text-align: center;
		margin: 0;
		width: 100%;
		transition: 250ms;
		padding: 0;
		font-weight: bold;
	}

	#desktop_nav ul li button:hover {
		opacity: 1;
	}

	#nav_underline {
		border-top: 2px solid #9C867C;
		border-bottom: none;
		width: 60%;
		margin-top: 2%;
		transition: 250ms;
		opacity: 0.75;
		position: relative;
	}





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

	.dialogue_button {
		width: 4vw;
		height: 4vw;
		float: right;
		background-color:  #9C867C;
		border: none;
		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 {
		width: 14vw;
	}

	.contact_section_right #whatsapp_button {
		margin-right: -10vw;
	}

	.contact_section_left #whatsapp_button {
		margin-left: -10vw;
	}

	.contact_section_right #whatsapp_button:hover {
		margin-right: 0vw;
	}

	.contact_section_left #whatsapp_button:hover {
		margin-left: 0vw;
	}

	.contact_section_right #whatsapp_button p {
		float: right;
	}

	.contact_section_left #whatsapp_button p {
		float: left;
	}

	#whatsapp_button p {
		color: white;
		display: block;
		height: auto;
		width: 10vw;
		text-align: center;
		line-height: 4vw;
		margin-top: 0;
	}

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

	#contact_form_button:hover {
		width: 100%;
		z-index: 20;
	}

	.dialogue_button img {
		width: 3vw;
		height: 3vw;
		top: 0.5vw;
		position: absolute;
	}

	.contact_section_right img {
		left: 0.5vw;
	}

	.contact_section_left img {
		right: 0.5vw;
	}

	#dialogue_box {
		position: fixed;
		z-index: 40;
		height: 100vh;
		width: 70vw;
		top: 0;
		right: -70vw;
		overflow: hidden;
		display: none;
	}

	.dialogue_background {
		background-color: #9C867C;
		height: 150%;	
		width: 70vw;
		display: block;
		position: absolute;
		z-index: 10;
		box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	}

	.dialogue_left .dialogue_background {
		transform: rotateZ(-15deg) translateX(-22.5vw) translateY(-10vw);
	}

	.dialogue_right .dialogue_background {
		transform: rotateZ(15deg) translateX(22.5vw) translateY(-10vw);
	}

	#dialogue_close_button {
		width: 2vw;
		height: 2vw;
		padding: 0;
		background: none;
		border: none;
		position: absolute;
		top: 2.0vw;
		z-index: 20;
	}

	.dialogue_right #dialogue_close_button {
		right: 4.0vw;
	}

	.dialogue_left #dialogue_close_button {
		left: 4.0vw;
	}

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

	#contact_information {
		width: 20vw;
		margin-right: 10vw;
		position: absolute;
		top: 10%;
		height: auto;
		z-index: 20;
		color: white;
	}

	#contact_information h3 {
		color: white;
	}

	#contact_form {
		width: 30vw;
		height: 85vh;
		position: absolute;
		z-index: 20;
		top: 30%;
		color: white;
	}

	.dialogue_left #contact_form, .dialogue_left #contact_information {
		left: 4.0vw;
	}

	.dialogue_right #contact_form, .dialogue_right #contact_information {
		right: 4.0vw;
	}

	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: 10vw;
		color: white;
		height: auto;
		font-size: 1.2vw;
		padding: 0;
		font-family: 'Bellota Text';
		height: 1.75vw;
	}

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

	#radio_container {
		position: relative;
		display: block;
		height: 1.25vw;
		width: 20vw;
		padding: 0;
	}

	.container {
	  display: inline-block;
	  position: relative;
	  cursor: pointer;
	  font-size: 1vw;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  text-align: right;
	  width: auto;
	  height: auto;
	  padding-left: 1.5vw;
	  margin-left: 5%;
	  margin-right: 0;
	  float: right;
	}

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

	.checkmark {
	  position: absolute;
	  top: 7.5%;
	  left: 0;
	  height: 1vw;
	  width:1vw;
	  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.3vw;
	  left: 0.3vw;
	  width: 0.4vw;
	  height: 0.4vw;
	  border-radius: 0.2vw;
	  background-color: white;
	  transition: 250ms;
	} 

	input[type=tel], input[type=text], input[type=email], textarea {
		position: relative;
		display: block;
		width: 18vw;
		line-height: 1.75vw;
		background: none;
		border: none;
		opacity: 0.8;
		font-size: 1.2vw;
		font-family: 'Bellota Text';
		color: white;
		text-align: right;
		transition: 250ms;
		padding-left: 2vw;
	}

	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: 6vw;
		height: auto;
		font-size: 1.75vw;
		font-family: 'Anton';
		color: white;
		background: none;
		border: none;
		opacity: 0.85;
		transition: 250ms;
		left: 50%;
		margin-left: -3vw;
		margin-top: 3.5%;
	}

	input[type=submit]:hover {
		opacity: 1;
		cursor: pointer;
	}





	/* CONTENT BOXES */
	.content_box {
		display: none;
		width: 55%;
		height: auto;
		z-index: 10;
		margin-top: 150%;
		position: relative;
		padding-top: 15%;
	}

	.left {
		left: 32.5%;
	}

	.right {
		left: 12.5%;
	}

	.content_box_active {
		display: block;
	}

	.content_box_substance {
		position: relative;
		width: 100%;
		height: auto;
		z-index: 10;
	}

	.content_block {
		margin-bottom: 37.5%;
		position: relative;
		height: auto;
		width: 100%;
	}

	.small_text {
		width: 55%;
	}

	.content_block:last-child {
		margin-bottom: 20%;
	}

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

	iframe {
		width: 140%;
		height: 18.5vw;
		margin-left: -25%;
		position: relative;
	}

	.with_image_left {
		display: grid;
		grid-template-columns: 40% 60%;
		grid-template-rows: 100%;
		grid-template-areas: "image_area text_area";
	}

	.with_image_right {
		display: grid;
		grid-template-columns: 60% 40%;
		grid-template-rows: 100%;
		grid-template-areas: "text_area image_area";
	}

	.with_image_wrapper {
		grid-area: text_area;
	}

	.with_image_left img {
		grid-area: image_area;
		width: 85%;
		margin-left: 0;
		position: relative;
	}

	.with_image_right img {
		grid-area: image_area;
		width: 85%;
		margin-left: 15%;
		position: relative;
	}





	/* IMAGE GALLERY */
	#image_gallery {
		width: 110%;
		height: 20vw;
		margin-left: -5%;
		display: grid;
		grid-template-columns: 4.5% 91% 4.5%;
		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: 2vw;
		top: 9vw;
		background: none;
		border: none;
	}

	#image_gallery_right_button {
		display: block;
	}

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

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

	#image_gallery_left_button:hover img {
		transform: rotateZ(180deg) translateX(35%);
	}

	#image_gallery_right_button img {
		right: 30%;
	}

	#image_gallery_right_button:hover img {
		transform: translateX(35%);
	}

	#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: 2vw;
		height: 2vw;
		padding: 0;
		background: none;
		border: none;
		position: absolute;
		top: 2.0vw;
		right: 4vw;
		z-index: 20;
	}

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

	#image_gallery_viewer_image {
		position: absolute;
		max-width: 50%;
		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);
	}



	

	/* FOOTER */
	#footer {
		height: auto;
		width: 100%;
	}

	#footer_b ul {
		position: relative;
		display: block;
		width: 30%;
		height: 2vw;
		left: 50%;
		margin-left: -15%;
		padding: 0;
		list-style-type: none;
	}

	#footer_b ul li {
		position: relative;
		display: inline-block;
		width: 40%;
		text-align: center;
	}

	#footer_b ul li:first-child{
		float: left;
	}

	#footer_b ul li:last-child{
		float: right;
	}

	#footer_b ul li a {
		text-decoration: none;
		color: #9C867C;
		font-family: 'Anton';
		font-size: 1.25vw;
		opacity: 0.65;
		transition: 250ms;
	}

	#footer_b ul li a:hover {
		opacity: 1;
	}
}