@charset "UTF-8";
/* CSS Document */

body{
	background-color: #342d3a;
	margin: 0px;
	padding: 0px;}
body.sw{
	background-color: white;
	margin: 0px;
	padding: 0px;}


/* type hierarchy */

h1{
	z-index: -100;
	position: fixed;
	color: #f5401c;
	font-family: "jomhuria", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 23vw;
	top: -12vw;
	left:2vw;
	margin: 0px !important;
	padding: 0px !important;}
#k{
	font-size: 42%;
	position: relative;
	bottom: 2.6vw;

	display: inline-flex;
  	align-items: center;
  	justify-content: center;

  	width: 0.4em;    
 	height: 0.5em;     
	padding: 1vw;
	padding-top: 0.4vw;
	padding-bottom: 1.6vw;
  
 	border: 1vw solid #f5401c;
 	border-radius: 50%;}

h2{	
	position: absolute;
	top: 9.8vw;
	left: 8vw;
	font-family: tiffin-latin-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 3vw;
	color: #f5401c;}

h3{	
	position: relative;
	font-family: tiffin-latin-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 2.2vw;
	text-align: center;
	color: #f5401c;}

h4{
	font-family: tiffin-latin-variable, sans-serif;
	color: #f5401c;
	font-size: 16px;
	line-height: 1.2;
	margin-bottom: 0px;}
h5{
	font-family: "jomhuria", sans-serif;
	color: #f5401c;
	font-size: 10vw;
	line-height: 0.55;
	font-weight: 400;
	letter-spacing: 0.2vw;
	margin-top:0px;
	margin-bottom: 80px !important;
	text-transform: none !important; }

p{
	font-family: tiffin-latin-variable, sans-serif;
	color: #f5401c;
	font-size: 16px;
	line-height: 1.2;
	padding: 0px !important;
	margin: 0px !important;
	max-width: 300px;}


h1.sw, h2.sw, h3.sw, h4.sw, h5.sw, p.sw{
	color: #001514;}
#k.sw{
	border-color:#001514;}


/* buttons */

/* Styling buttons */
#button_browse, #button_sw{
	z-index: 100;
	position: absolute;
	height:2.6vw;
	border: 0.1vw solid #f5401c;
	border-radius: 200px;
	color: #f5401c;
	background-color: #f5401c;
	font-family: tiffin-latin-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 2.8vw;
	text-align: center;}
		
		/* Platzierung Text innerhalb Button */
		.browse, .browse-sw{
			position: relative;
			top:-2.85vw;
			color: #342d3a;
			text-decoration: none;}
		.browse-sw{
			top:-2.7vw;}

		/* Platzierung Button auf der Seite und Größe */
		#button_browse{
			top:16.6vw;
			left:10vw;
			width: 14vw;}
		#button_sw{
			top:20vw;
			left:8vw;
			width: 12vw;}
	
		/* buttons rks/sw */
		.sw-site-button{
			background-color: #001514 !important;
			border-color: #001514 !important;
			color: white !important;}
		.sw-site-browse, .sw-site-browse-sw{
			color: white !important;
			top:-2.85vw;}
		.sw-site-browse-sw{
			top:-2.7vw;}


/* hero und fußzeile */

a.impressum-button{
	z-index: 100;
	position: fixed;
	bottom:-10px;
	left:5vw;
	font-family: tiffin-latin-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 1.8vw;
	color: #f5401c;
	text-decoration: none;}
a.sw-impressum-button{
	z-index: 100;
	position: fixed;
	bottom:-10px;
	left:5vw;
	font-family: tiffin-latin-variable, sans-serif;
	font-variation-settings: "wght" 300;
	font-size: 2vw;
	text-decoration: none;
	color: #001514;}

#hero{
	width: 100vw;
	height: auto;
	max-height: 200px;}		
#dragonhead, #dinosaurdame{
	z-index: -200;
	position: absolute;
	top: 20%;
	left: 40%;
	align-items: center;
	width: 40vw;
	max-width: 1000px;}
#dinosaurdame{
	width: 80vw;
	top: 10%;
	left: 30%;}



.divider-160px{
	height: 160px;}



/* impressum unterseite*/

body.impressum{
	padding: 4vw;}
#button_back{
	position: relative;
	width:4.6vw;
	height: 2vw;
	border: 0.2vw solid #f5401c;
	border-radius: 200px;
	color: #f5401c;}
#back{
	position: relative;
	top:-1.1vw;	
	left: 0.3vw;
	font-family: tiffin-latin-variable, sans-serif !important;
	font-variation-settings: "wght" 300;
	font-size: 2.8vw;
	text-align: center;
	color: #f5401c;
	text-decoration: none;}
.impressum-titel{
	position: relative;
	top: 1vw;
	left: 0vw;
	color: antiquewhite;
	font-family: tiffin-latin-variable, sans-serif !important;
	font-weight: 300;
	font-size: 24px;
	text-align: left;
	margin-bottom: 20px;}
.impr{
	color: antiquewhite;
	padding-top: 10px;}
a.impr{
	color: lightblue;}

.space{
	height:40px;
	width:auto;}



/* content */
#content{
	display: block;
	position: relative;
	top: 100vh;
	margin-bottom: 40px !important;}
.img{
	z-index: -1000;
	max-width: 42vw;}

.line{
	display: block;
	width:100vw;
	margin-top:40px;
	margin-bottom: 40px;
	border-top: 2px solid #f5401c;}
.sw-line{
	display: block;
	width:100vw;
	margin-top:40px;
	border-top: 2px solid #001514;}


/* grid */

.container-50-50{
	display: grid;
	grid-template-columns: 48vw 48vw;
	align-items: end;
	padding:0;
	margin:2vw;}

.container-30-70{
	display: grid;
	grid-template-columns: 28vw 68vw;
	align-items: end;
	padding:0;
	margin:2vw;}

.img-wide{
	display: block;
	position: relative;
	width: 96vw;
	left:2vw;
	height: auto;}


.item-2{
	justify-self: start;}
.item-4{
	justify-self: end;
	align-self: center;}



#looking{
	width:60vw;
	align-self: center;
	justify-self: center;
	margin-top: 48px;
	margin-bottom: 32px;}







/* media queries mobile*/

@media only screen and (max-width: 1024px){
	
	#dragonhead{
		top: 4%;
		left: 9%;
		align-items: center;
		width: 90vw;}
	
	#dinosaurdame{
		top: 8%;
		left: 6%;
		align-items: center;
		width: 90vw;}
	
	h2{	
	top: 8.8vw;
	left: 14vw;
	font-size: 5.5vw;}

	h3{	
	top: 9.8vw;
	font-size: 4.5vw;}
	
	h4{
		font-size: 4.5vw;}
	h5{
		font-size: 21vw;}
	p{
		font-size: 4.5vw;
		max-width: 800px;}
	
	
	#button_browse{
		top:22vw;
		left:8vw;
		width: 28vw;
		height:5.5vw;}
	#button_sw{
		top:29.5vw;
		left:16vw;
		width: 24vw;
		height: 5.5vw;}
	.browse, .browse-sw{
			top:-5.5vw;}
	.browse-sw{
			top:-5.75vw;}
	.sw-site-browse, .sw-site-browse-sw{
			top:-6vw;}
	.sw-site-browse-sw{
			top:-6.25vw;}
	
	a.sw-impressum-button{
	bottom:-10px;
	left:5vw;
	font-size: 3.5vw;}
	
	/* content start */
	#content{
	top: 50vh;
	margin-bottom: 80px !important;}

	
	/* grid */

	.container-50-50{
		display: grid;
		grid-template-columns: 96vw;
		grid-template-areas: 	'gridItem2'
								'gridItem1';
		align-items: end;
		padding:0;
		margin:2vw;}

	.container-30-70{
		display: grid;
		grid-template-columns: 96vw;
		align-items: left;
		padding:0;
		margin:2vw;}
	
	.item-1{
		grid-area: gridItem1;}
	.item-2{
		grid-area: gridItem2;}
	
	.item-4{
	justify-self: left;}
	
	.img{
		max-width: 96vw;}
	
	
#sea_witch{
	max-width: 80vw;
	align-self: center;}
	



/* impressum */
body.impressum{
	padding: 6vw;}
#button_back{
	width:18.4vw;
	height: 8vw;
	border: 0.4vw solid #f5401c;}
#back{
	font-size: 10vw;
	top:-3.8vw;
	left:2vw;
	font-family: tiffin-latin-variable, sans-serif !important;}
	
.impressum-titel{
	top: 2vw;
	left: 0vw;
	color: antiquewhite;
	font-family: tiffin-latin-variable, sans-serif !important;
	font-weight: 300;
	font-size: 4.8vw;
	text-align: left;
	margin-bottom: 40px;}


.space{
	height:80px;}
	
	
}