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

	body {
		overflow-x: hidden;
	}
	.trp_book {
		display: none;
	}

	.nav_links{
		position: fixed;
		right: 0px;
		min-height: 92vh;
		top: 8vh;
		background-color: #000;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 50%;
		transform: translateX(100%);
		transition: transform 0.3s ease-in;
		z-index: 1000;
	}
	.book_header {
    	position: absolute;
    	font-size: 100%;
    	color: #fff;
    	top: -20px;
    	padding-left: 10px;
    	pointer-events: none;
  	}
  	.support_header {
    	position: absolute;
    	font-size: 100%;
    	color: #fff;
    	top: -40px;
    	padding-left: 10px;
    	pointer-events: none;
  	}
  	.support_container {
  		padding-top: 200px;
    	padding-bottom: 0px;
	    margin: 0px;
	 }
	 .support_desc {
      width: 100%;
      overflow: hidden;
    }
  	.social_media_header {
    	position: absolute;
    	font-size: 100%;
    	color: #fff;
    	top: -20px;
    	padding-left: 10px;
    	pointer-events: none;
  	}
  	.social_media_container {
	    top: 10%;
	    left: 5%;
	    width: 90%;
	    grid-column-gap: 2rem;
	    grid-row-gap: 2rem;
	    padding: 40px;
	    padding-top: 150px;
	  }
  	.calendar_header {
    	position: absolute;
    	font-size: 100%;
    	color: #fff;
    	top: -20px;
    	padding-left: 10px;
    	pointer-events: none;
  	}
  	.trp_text_box {
	    position: absolute;
	    left: 0;
	    width: 100%;
	    color: #fff;
	    background-color: none;
	    font-size: 70%;
	    padding: 5%;
    }
    .trp_text {
	    position: absolute;
	    right: 0;
	    top: 5%;
	    width: 100%;
	    height: 100%;
	    background-color: none;
	    display: flex;
	    align-items: center;
  	}
  .cover_title {
    position: relative;
    margin: 10%;
    font-weight: 400;
  }
  .cover_text {
    position: relative;
    margin: 10%;
    font-weight: 400;
  }
  	.cover_description {
	  position: absolute;
	  top: 15%;
	  left: 5%;
	  width: 90%;
	  border-radius: 10px;
	  background-image: linear-gradient(to right bottom, rgba(255,200,150, .7), rgba(150,150,255, .4) );
	  backdrop-filter: blur(10px);
	}

	.show_description {
	    position: absolute;
	    top: 10%;
	    left: 5%;
	    width: 90%;
	    border-radius: 10px;
	    background-image: linear-gradient(to right bottom, rgba(210,210,255, .7), rgba(255,255,255, .4) );
	    backdrop-filter: blur(10px);
  	}
  .show_title {
    position: relative;
    margin: 5%;
    font-weight: 400;
    pointer-events: none;
    font-size: 175%;
  }
  .show_text {
    position: relative;
    margin: 5%;
    font-weight: 400;
    pointer-events: none;
    font-size: 75%;
  }
  .show_title1 {
    position: relative;
    margin: 5%;
    font-weight: 400;
    pointer-events: none;
  }
  .button_container {
    top: -10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    background-color: none;
  }
  .goToButton {
    width: 40%;
    background-color: none;
    position: relative;
    border: 2px solid #000;
    border-radius: 25px;
  }
  .goToButton:hover {
    background-color: #000;
    color: #fff;
  }

	.nav_links li {
		opacity: 0;
	}

	.burger {
		display: block;
		cursor: pointer;
	}

	.intro_header {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
		.intro_header_h1 {
			position: relative;
		}

	.intro_txt {
		display: block;
		align-items: row;
		top: 15%;
		position: absolute;
		margin:0;
		padding: 0;
		width: 100%;
	}

	.intro_txt_box_1 {
		display: block;
		width: 700px;
	}

	.intro_txt_box_2 {
		display: none;		
	}

	.intro_txt_box_3 {
		display: none;		
	}

}

.nav-active {
	transform: translateX(0%);
}

@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

.nav-active {
	transform: translateX(0%);
}


.toggle .linie1 {
	transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .linie2 {
	opacity: 0;
}

.toggle .linie3 {
	transform: rotate(45deg) translate(-5px, -6px);
}