/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.12,
* Autoprefixer: v10.4.4
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

/* --------------------------------------------------- SMALL ------------------------------------------------------------- */
@media (max-width: 799px) {

	#topnav-logo-desktop {
		display: none;
	}	

	#topnav-logo-mobile {
		display: block;
	}	

	.topnav-mobile-container {
		width: 100%;
		height: 50%;
		margin: 0 0 0 0;
		border-left: solid transparent 1px;
		border-bottom: solid black 1px;
	}	

	.cont-start-2-text {
		padding: 1em 4vw 1em 4vw;
	}
	
	.title-animation {
		margin: -4rem 0 0 0;
	}

	.f-size-basic {
		font-size: 1em;
	}

	.f-size-3 {
		font-size: 3.5em;
	}

	.width-25, .width-33, .width-50, .width-66 {
		width: 100%;
	  }

	.width-33 {
		width: 50%;
		padding: 0 0 2em 0;
	}

	.start-2-image {
		width: 100vw;
	}	

	.exkurs {
		height: 5.5vh;
		width: 5.5vh;
		bottom: 10rem;
	  }

	.exkurs.unterseite {
		top: 0.25rem;
		left: 30vw;
	}

	.exkurs.menu {
		height: 2.5vh;
		width: 2.5vh;
		font-size: 0.9rem;
	}

}

/* --------------------------------------------------- MEDIUM ------------------------------------------------------------- */
@media (min-width: 800px) and (max-width: 1599px) {



}

/* --------------------------------------------------- LARGE ------------------------------------------------------------- */
@media (min-width: 1600px) {



}


/* --------------------------------------------------- Mobile ------------------------------------------------------------- */

/* ---------------- Portrait ---------------- */
@media only screen and (max-device-width : 667px) and (orientation : portrait) {

	
	#topnav-logo-desktop {
		display: none;
	}	

	#topnav-logo-mobile {
		display: block;
	}	

	.topnav-mobile-container {
		width: 100%;
		height: 100%;
		margin: 0 0 0 0;
		border-left: solid transparent 1px;
		border-bottom: solid black 1px;
	}	

	.cont-start-2-text {
		padding: 1em 4vw 1em 4vw;
	}	
	
	.title-animation {
		margin: -4rem 0 0 0;
	}

	.f-size-basic {
		font-size: 1em;
	}

	.f-size-2 {
		font-size: 2.85em;
	}

	.f-size-menu {
		font-size: 2.85em;
	}

	.width-25, .width-33, .width-50, .width-66 {
		width: 100%;
	  }

	.width-33 {
		width:50%;
		padding: 0 0 2em 0;
	}

	.start-2-image {
		width: 100vw;
	}

	.exkurs {
		height: 14vw;
		width: 14vw;
		bottom: 10rem;
		font-size: 1.1em;
	  }

	.exkurs.unterseite {
		top: 0.25rem;
		left: 30vw;
	}

	.exkurs.menu {
		height: 2.5vh;
		width: 2.5vh;
	  }

	.container-audiobeitrag {
		width: 100%;
		margin: 0 0 6em 0;
	}

	.background-image {
		height: 24em;
	  }

	
}

/* ---------------- Landscape ---------------- */
@media only screen and (max-device-width: 667px) and (orientation : landscape) {


	#topnav-logo-desktop {
		display: none;
	}	

	#topnav-logo-mobile {
		display: block;
	}	

	.topnav-mobile-container {
		width: 100%;
		margin: 0 0 0 0;
		border-left: solid transparent 1px;
	}	

	.f-size-basic {
		font-size: 1em;
	}

	.f-size-2 {
		font-size: 2.2em;
	}

	.width-25, .width-33, .width-50, .width-66 {
		width: 100%;
	  }

	.width-33 {
		padding: 0 0 2em 0;
	}

	.start-2-image {
		width: 100vw;
	}

	.exkurs {
		height: 14vw;
		width: 14vw;
		bottom: 10rem;
		font-size: 1.1em;
	  }

	.exkurs.unterseite {
		top: 0.25rem;
		left: 30vw;
	}

	.container-audiobeitrag {
		width: 100%;
		margin: 0 0 6em 0;
	}

	.background-image {
		height: 24em;
	}	

}