/*
###############################################################################################

                                General

###############################################################################################
*/

html,
body{
	padding:0;
	margin:0;
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	overflow:hidden;
}

/*
###############################################################################################

                                Fonts

###############################################################################################
*/

@font-face {
  font-family: 'Adventure';
  font-weight: 400;
  src: url('../fonts/Adventure.eot'); /* IE9 Compat Modes */
  src: url('../fonts/Adventure.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('../fonts/Adventure.woff2') format('woff2'), /* Super Modern Browsers */
  url('../fonts/Adventure.woff') format('woff'), /* Pretty Modern Browsers */
  url('../fonts/Adventure.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('../fonts/Adventure.svg#svgFontName') format('svg'); /* Legacy iOS */
}



/*
###############################################################################################

                                Type

###############################################################################################
*/

body{
	font-family: 'Adventure';
}

/*
###############################################################################################

                                Page sections

###############################################################################################
*/

.pages{
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);

	position:fixed;
	top:0;
	right:0;
	left:0;
	overflow:hidden;
}

.pages .page{
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	width:100%;
	position:relative;
	overflow-y:hidden;
	overflow-x:hidden;
	position:relative;
	z-index:101;
	background-image: url("../images/bg-sunshine.svg");
	background-size:cover;
	background-position:center center;
	
	position:fixed;
	top:0;
	right:0;
	left:0;
	overflow:hidden;
}

.pages .page .page-inner{
	max-width: 177vh; /* 16:9 */
	max-width: calc(var(--vh, 1vh) * 177);
	height:100vh;
	height: calc(var(--vh, 1vh) * 100);
	min-height: 100%;
	min-height: calc(var(--vh, 1vh) * 100);
	margin:auto;
	position:relative;
	padding-top:0vh;
	padding-bottom:0vh;
}



.page .me{
	/* aspect 1:0.821 */
    height: 90vh;
    height: calc(var(--vh, 1vh) * 90);
    width: calc(90vh * 0.821 );
    width: calc(var(--vh, 1vh) * 90 * 0.821);
    position: absolute;
    bottom:-2vh;
    bottom: calc(var(--vh, 1vh) * -2);
	right:0;
	background-image: url("../images/front-me.svg");
	background-size:cover;
	z-index:100000;
}



.page .me-bubble{
	/* aspect 1:0.745 */
	height: calc(50vh * 0.745 );
	height:  calc(var(--vh, 1vh) * 50 * 0.745);
	width: 50vh;
	width: calc(var(--vh, 1vh) * 50);
	position:absolute;
	top:-5vh;
	top:calc(var(--vh, 1vh) * -5);
	right:20vw;
	background-image: url("../images/front-me-bubble.svg");
	background-size:cover;
	z-index:100000;
}


.page .secretary{
	/* aspect 1:1 */
	height: calc(90vh * 1.4285 );
	height: calc(var(--vh, 1vh) * 90 *  1.4285 );
	width: 90vh;
	width: calc(var(--vh, 1vh) * 90);
	position:absolute;
	bottom:-48vh;
	bottom:calc(var(--vh, 1vh) * -48 );
	left:0;
	background-image: url("../images/front-secretary.svg");
	background-size:cover;
	z-index:100000;
}

.page .bubble-visitor{
	/* aspect 0.482:1 */
	width:45vh;
	width:calc(var(--vh, 1vh) * 45 );
	height: calc(45vh * 0.482 );
	height: calc(var(--vh, 1vh) * 45 * 0.482);
	position:absolute;
	bottom:0;
	left:50vh;
	left:calc(var(--vh, 1vh) * 50);
	background-image: url("../images/bubble-visitor.svg");
	background-size:cover;
	z-index:100000;
}

.page .bubble-me-contact{
	/* aspect 0.482:1 */
	width:37vh;
	width:calc(var(--vh, 1vh) * 37);
	height: calc(37vh * 0.5 );
	height: calc(var(--vh, 1vh) * 37 * 0.5);
	position:absolute;
	bottom:0;
	right:30vh;
	right:calc(var(--vh, 1vh) * 30);
	background-image: url("../images/bubble-me-contact.svg?v=0.1");
	background-size:cover;
	z-index:100000;
}

.page .ring{
	/* aspect 0.482:1 */
	width:60vh;
	width:calc(var(--vh, 1vh) * 60);
	height: calc(60vh * 0.4418 );
	height: calc(var(--vh, 1vh) * 60 *  0.4418);
	position:absolute;
	top:7vh;
	top: calc(var(--vh, 1vh) * 7);
	left:10vh;
	left:calc(var(--vh, 1vh) * 10);
	background-image: url("../images/ring.svg");
	background-size:cover;
	z-index:100000;
}

.page .skill-splash{
	height:85vh;
	height: calc(var(--vh, 1vh) * 85);
	width:85vh;
	width: calc(var(--vh, 1vh) * 85);
	position:absolute;
	background-image: url("../images/splash-boom.svg");
	background-repeat:no-repeat;
	background-size:cover;
	top:7vh;
	top: calc(var(--vh, 1vh) * 7);
	right: 14vw;
	z-index:1000;
}

.page .tag-cloud{
	position: absolute;
    top: calc(42.5vh - 210px);
    top: calc(var(--vh, 1vh) * 42.5 - 210px);
    right: calc(42.5vh - 210px);
    right: calc(var(--vh, 1vh) * 42.5 - 210px);
    z-index: 10000;
}

.page .skill-splash .impressum{
	position: absolute;
    top: 33%;
    left:32%;
	right:29%;
	color:#fff;
    z-index: 10000;
	text-align:center;
	text-transform:lowercase;
	color:rgb(181,198,208);
}

.page .tagcloud--item {
    color: #fff;
	font-size:25px;
	line-height:12px;
	padding-right:8px;
}

.page .impressum-link{
	position:absolute;
	bottom:5px;
	right:10px;
	z-index:1000000;
}

/*
###############################################################################################

                                Type

###############################################################################################
*/

.page .skill-splash .impressum{
	font-size:1.9vh;
	font-size:calc(var(--vh, 1vh) * 1.9);
	
}
.page .skill-splash .impressum .name{
	font-size:3vh;
	font-size:calc(var(--vh, 1vh) * 3);
	margin-bottom:5px;
	color:#fff;
}

.page .skill-splash .impressum a,
.page .skill-splash .impressum a:visited{
	display:inline-block;
	margin-top:1vh;
	margin-top:calc(var(--vh, 1vh) * 1);
	color:#fff;
	text-decoration:none;
}

.page .skill-splash .impressum a:hover{
	opacity:0.8;
}

.page .impressum-link a,
.page .impressum-link a:hover,
.page .impressum-link a:visited{
	color:#fff;
	font-size:2vh;
	font-size:calc(var(--vh, 1vh) * 2);
	text-decoration:none;
	opacity:0.8;
}

.page .impressum-link a:hover{
	opacity:1;
}

/*
###############################################################################################

                                Media

###############################################################################################
*/



@media (max-aspect-ratio: 16/9) /* narower than landscpate */ and (min-aspect-ratio: 1/1) /* wider than square */ { 

		
	.pages .page {
		background-size: cover;
		background-position: center 35%;
	}
		
		
	.pages .page .page-inner{
		max-width: 100vh; /* 16:9 */
		max-width: calc(var(--vh, 1vh) * 100);
		height:100vh;
		height: calc(var(--vh, 1vh) * 100);
		min-height: 100%;
		margin:auto;
		position:relative;
		padding-top:0vh;
		padding-bottom:0vh;
	}

	
	
	.page .me {
		height: 70vh;
		height: calc(var(--vh, 1vh) * 70);
		width: calc(70vh * 0.821 );
		width: calc(var(--vh, 1vh) * 70 * 0.821);
		bottom: -2vh;
		bottom: calc(var(--vh, 1vh) * -2);
		right: -12vh;
		right: calc(var(--vh, 1vh) * -12);
	}
		
	.page .secretary {
		height: calc(60vh * 1.4285 );
		height: calc(var(--vh, 1vh) * 60 * 1.4285);
		width: 60vh;
		width: calc(var(--vh, 1vh) * 60);
		bottom: -34vh;
		bottom: calc(var(--vh, 1vh) * -34);
		left: -15vh;
		left: calc(var(--vh, 1vh) * -15);
	}

	.page .bubble-me-contact {
		right: 11vh;
		right: calc(var(--vh, 1vh) * 11);
	}

	.page .bubble-visitor {
		bottom: 15vh;
		bottom: calc(var(--vh, 1vh) * 15);
		left: calc(var(--vh, 1vh) * 36);
	}

	.page .me-bubble {
		top: -5vh;
		top: calc(var(--vh, 1vh) * -5);
		right: 10vh;
		right: calc(var(--vh, 1vh) * 10);
		height: calc(60vh * 0.745 );
		height: calc(var(--vh, 1vh) * 60 * 0.745);
		width: 60vh;
		width: calc(var(--vh, 1vh) * 60 );
	}

	.page .ring {
		width: 50vh;
		width: calc(var(--vh, 1vh) * 50);
		height: calc(50vh * 0.4418 );
		height: calc(var(--vh, 1vh) * 50 * 0.4418);
		top: 18vh;
		top:  calc(var(--vh, 1vh) * 18);
		left: -11vh;
		left:  calc(var(--vh, 1vh) * --11vh);
	}
	
	.page .tag-cloud{

	}
	
	.page .skill-splash {
		height: 85vh;
		height:  calc(var(--vh, 1vh) * 85);
		width: 85vh;
		width:  calc(var(--vh, 1vh) * 85);
		top: 7vh;
		top:  calc(var(--vh, 1vh) * 7);
		right: 5vh;
		right:  calc(var(--vh, 1vh) * 5);
		z-index: 1000;
	}
	

	
	
	
}

@media (max-aspect-ratio: 1/1) /* narower than square */ /* and (min-aspect-ratio: 9/16)  wider than portrait */ {
	

	.pages .page {
		background-position: 80% center;
	}
	
	.page .me {
		height: 80vw;
		width: calc(80vw * 0.821 );
		position: absolute;
		bottom: -2vh;
		right: -13vw;
	}
	
	.page .secretary {
		height: calc(50vw * 1.4285 );
		width: 50vw;
		position: absolute;
		bottom: -5vw;
		left: -15vw;
	}
	
	.page .bubble-visitor {
		width: 45vw;
		height: calc(45vw * 0.482 );
		bottom: 19vw;
		left: 20vw;
	}
	
	.page .bubble-me-contact {
		width: 45vw;
		height: calc(45vw * 0.5 );
		bottom: 0;
		right: 19vw;
	}


	.page .ring {
		width: 40vw;
		height: calc(40vw * 0.4418 );
		bottom: 3vw;
		top: auto;
		left: -6vw;
		z-index: 100000000;
	}
	
	.page .me-bubble {
		height: calc(90vw * 0.745 );
		width: 90vw;
		top: auto;
		bottom: 74vw;
		right: 9vw;
		background-image: url(../images/front-me-bubble-mobile2.svg?v=1.200);
	}
	
	
	.page .skill-splash {
		height: 85vw;
		width: 85vw;
		bottom: 22vw;
		top: auto;
		right: 6vw;
	}
	
	.page .skill-splash .impressum{
		font-size:1.9vw;
		font-size:calc(var(--vw, 1vw) * 1.9);
	}
	.page .skill-splash .impressum .name{
		font-size:3vw;
		font-size:calc(var(--vw, 1vw) * 3);
		margin-bottom:5px;
		color:#fff;
	}
	
	.page .impressum-link a{
		font-size:2vw;
		font-size:calc(var(--vw, 1vw) * 2);
	}
	
}

@media (min-aspect-ratio: 1/1) and (min-height: 769px) and (max-height: 1200px){
	.page.services .tag-cloud {
		top: calc(42.5vh - 210px);
		top:  calc(var(--vh, 1vh) * 42.5 - 210px);
		right: calc(42.5vh - 210px);
		right: calc(var(--vh, 1vh) * 42.5 - 210px);
	}
	
	.page.services .tagcloud--item {
		font-size:25px;
	}
	

}


@media (min-aspect-ratio: 1/1) and (min-height: 501px) and (max-height: 768px){
	
	.page.services .tag-cloud {
		top: calc(42.5vh - 150px);
		top: calc(var(--vh, 1vh) * 42.5 - 150px);
		right: calc(42.5vh - 150px);
		right: calc(var(--vh, 1vh) * 42.5 - 150px);
	}
	
	.page.services .tagcloud--item {
		font-size:20px;
	}
}



@media (min-aspect-ratio: 1/1) and (min-height: 361px)  and (max-height: 500px){
	
	.page.services .tag-cloud {
		top: calc(42.5vh - 70px);
		top: calc(var(--vh, 1vh) * 42.5 - 70px);
		right: calc(42.5vh - 70px);
		right: calc(var(--vh, 1vh) * 42.5 - 70px);
	}
	
	.page.services .tagcloud--item {
		font-size:13px;
	}
}


@media (min-aspect-ratio: 1/1) and (max-height: 360px){
	
	.page.services .tag-cloud {
		top: calc(42.5vh - 60px);
		top: calc(var(--vh, 1vh) * 42.5 - 60px);
		right: calc(42.5vh - 60px);
		right: calc(var(--vh, 1vh) * 42.5 - 60px);
	}
	
	.page.services .tagcloud--item {
		font-size:11px;
	}
}








@media (max-aspect-ratio: 1/1) and (min-width: 769px) and (max-width: 1200px){
	.page.services .tag-cloud {
		top: calc(42.5vw - 210px);
		right: calc(42.5vw - 210px);
	}
	
	.page.services .tagcloud--item {
		font-size:25px;
	}
}


@media (max-aspect-ratio: 1/1) and (min-width: 501px) and (max-width: 768px){
	
	.page.services .tag-cloud {
		top: calc(42.5vw - 150px);
		right: calc(42.5vw - 150px);
	}
	
	.page.services .tagcloud--item {
		font-size:20px;
	}
}



@media (max-aspect-ratio: 1/1) and (min-width: 361px)  and (max-width: 500px){
	
	.page.services .tag-cloud {
		top: calc(42.5vw - 70px);
		right: calc(42.5vw - 70px);
	}
	
	.page.services .tagcloud--item {
		font-size:13px;
	}
}



@media (max-aspect-ratio: 1/1) and (max-width: 360px){
	
	.page.services .tag-cloud {
		top: calc(42.5vw - 60px);
		right: calc(42.5vw - 60px);
	}
	
	.page.services .tagcloud--item {
		font-size:11px;
	}
	
	
	
}

@media (max-aspect-ratio: 1/1) and (max-width: 360px){
	.page .bubble-me-contact {
		width: 52vw;
		height: calc(52vw * 0.5 );
		bottom: -4vw;
		right: 12vw;
		z-index: 1000000000;
	}
	
	.page .bubble-visitor {
		width: 55vw;
		height: calc(55vw * 0.482 );
		bottom: 19vw;
		left: 26vw;
	}
	
}