@charset "utf-8";

/*############################### FONTS ###############################*/

@font-face{
	font-family: 'PT Sans';
    font-weight: normal;
    font-style: normal;
    font-display: fallback; 
	src: local('PT Sans'),  
		 url('base/fonts/pt-sans.woff2') format('woff2'), 
         url('base/fonts/pt-sans.woff') format('woff'),
		 url('base/fonts/pt-sans.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans';
    font-display: fallback;
    font-weight: normal;
	font-style: italic; 
	src: local('PT Sans Italic'), 
		 url('base/fonts/pt-sans_italic.woff2') format('woff2'),  
		 url('base/fonts/pt-sans_italic.woff') format('woff'),
		 url('base/fonts/pt-sans_italic.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans';
    font-display: fallback;
	font-style: normal;
	font-weight: bold;
	src: local('PT Sans Bold'), 
		 url('base/fonts/pt-sans_bold.woff2') format('woff2'),  
		 url('base/fonts/pt-sans_bold.woff') format('woff'),
		 url('base/fonts/pt-sans_bold.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans';
    font-display: fallback;
	font-style: italic;
	font-weight: bold;  
	src: local('PT Sans Bold Italic'), 
		 url('base/fonts/pt-sans_bold-italic.woff2') format('woff2'), 
		 url('base/fonts/pt-sans_bold-italic.woff') format('woff'),
		 url('base/fonts/pt-sans_bold-italic.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Caption';
    font-display: fallback;
    font-weight: normal;
    font-style: normal;
	src: local('PT Sans Caption'), 
         url('base/fonts/pt-sans_caption.woff2') format('woff2'),
		 url('base/fonts/pt-sans_caption.woff') format('woff'),
		 url('base/fonts/pt-sans_caption.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Caption';
    font-display: fallback;
	font-weight: bold; 
    font-style: normal;
	src: local('PT Sans Caption Bold'), 
         url('base/fonts/pt-sans_caption-bold.woff2') format('woff2'),
		 url('base/fonts/pt-sans_caption-bold.woff') format('woff'), 
		 url('base/fonts/pt-sans_caption-bold.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Narrow';
    font-display: fallback;
	font-weight: normal;
    font-style: normal;
	src: local('PT Sans Narrow'), 
         url('base/fonts/pt-sans_narrow.woff2') format('woff2'),
		 url('base/fonts/pt-sans_narrow.woff') format('woff'),
		 url('base/fonts/pt-sans_narrow.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Narrow';
    font-display: fallback;
	font-weight: bold;
    font-style: normal;
	src: local('PT Sans Narrow Bold'),  
		 url('base/fonts/pt-sans_narrow-bold.woff2') format('woff2'),
         url('base/fonts/pt-sans_narrow-bold.woff') format('woff'),
		 url('base/fonts/pt-sans_narrow-bold.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Monospace';
    font-display: fallback;
    font-weight: normal;
    font-style: normal;
	src: local('PT Sans Monospace'),  
		 url('base/fonts/pt-mono.woff2') format('woff2'),
         url('base/fonts/pt-mono.woff') format('woff'),
         url('base/fonts/pt-mono.ttf') format('truetype');
}

@font-face{
	font-family: 'PT Sans Monospace';
    font-display: fallback;
    font-weight: bold;
    font-style: normal;
	src: local('PT Sans Monospace'),  
		 url('base/fonts/pt-mono_bold.woff2') format('woff2'),
         url('base/fonts/pt-mono_bold.woff') format('woff'),
         url('base/fonts/pt-mono_bold.ttf') format('truetype');
}

/*############################### GENERAL LAYOUT ###############################*/

:root{
    --color-myprofile-background: #fff;
    --color-myprofile-black: #333333;
	--color-myprofile-white: #d0d0d0;
	--color-myprofile-accent: #660099;
	--color-myprofile-green: #009966;
}

html{
    font-family: 'PT Sans', serif;
}

body{
	background-color: var(--color-myprofile-background);
	color: var(--color-myprofile-black);
}

#nojs_message{
	position: absolute;
	padding: 10px;
	margin-top: 10px;
	background-color: #e62617;
	color: var(--color-myprofile-white);
	width: 30%;
	z-index: 3;
	left: calc((100vw - 30%)/2);
	text-align: center;
}

#loading_screen{
	position: fixed;
	overflow: hidden;
	background-color: var(--color-myprofile-background);
}

#layer_myphotoblind_container{
	top: 0;
	left: 0;
	pointer-events: none;
}

#layer_myphotoblind_static{
	flex-grow: 1;
	flex-shrink: 1;
}

#layer_myphotoblind_movable{
	display: flex;
	flex-grow: 0;
	flex-shrink: 1;
	pointer-events: auto;
}

#layer_myphotoblind-resizegrip{
	flex-grow: 0;
	flex-shrink: 0;
	z-index: 2;
}

#layer_myphotoblind{
	flex-grow: 1;
	flex-shrink: 1;
	background-repeat: no-repeat;
}

#layer_myprofile_container{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	padding-left: 12vw;
	padding-right: 5vw;
}

#language_switcher{
	width: 67px;
	height: 32px;
	background-color: var(--color-myprofile-accent);
	top: 0;
	left: 0;
	line-height: 32px;
	box-sizing: border-box;
	padding-right: 8px;
	text-align: right;
	color: var(--color-myprofile-white);
	font-family: 'PT Sans Caption', serif;
	font-size: 24px;
	z-index: 3;
	user-select: none;
}

#language_switcher a:link{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

#language_switcher a:visited{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

#language_switcher a:hover{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

#language_switcher a:active{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

#experiencenav{
	margin-top: 145px;
}

#experiencenav h2{
	margin-bottom: 7px;
}

#experiencenav h2 > a:link{
	color: var(--color-myprofile-black);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-black);
}

#experiencenav h2 > a:visited{
	color: var(--color-myprofile-white);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-white);
}

#experiencenav h2 > a:hover{
	color: var(--color-myprofile-black);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-black);
}

#experiencenav h2 > a:active{
	color: var(--color-myprofile-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-accent);
}

#experiencenav ul > li{
	margin-bottom: 80px;
}

#contactsnav{
	margin-top: 65px;
	margin-left: 68px;
}

#contactsnav > ul li{
	float: left;
	font-family: 'PT Sans Caption', serif;
	font-weight: bold; 
	color: var(--color-myprofile-accent);
}

#contactsnav ul > li a:link{
	color: var(--color-myprofile-accent);
	text-decoration: none;
}

#contactsnav ul > li a:visited{
	color: var(--color-myprofile-accent);
	text-decoration: none;
}

#contactsnav ul > li a:hover{
	color: var(--color-myprofile-accent);
	text-decoration: none;
}

#contactsnav ul > li a:active{
	color: var(--color-myprofile-accent);
	text-decoration: none;
}

#mybusinesscard_container{
	display: flex;
	flex-direction: column;
	align-items: center;
}

#mybusinesscard{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 1.3;
}

#mybusinesscard a:link{
	color: var(--color-myprofile-black);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-black);
}

#mybusinesscard a:visited{
	color: var(--color-myprofile-white);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-white);
}

#mybusinesscard a:hover{
	color: var(--color-myprofile-black);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-black);
}

#mybusinesscard a:active{
	color: var(--color-myprofile-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--color-myprofile-accent);
}

#mybusinesscard h2{
	font-weight: bold;
}

#qr-code{
	flex-grow: 0;
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
}

#testimonials_container{
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100vw;
	height: 100vh;
	color: var(--color-myprofile-white);
}

#testimonials_header{
	font-family: 'PT Sans Caption', serif;
	box-sizing: border-box;
	width: 100%;
	flex-grow: 0;
	flex-shrink: 0;
}

#testimonials_closebutton{
	text-align: center;
	position: absolute;
	top: 0;
	font-size: 70px;
	color: var(--color-myprofile-white);
	cursor: pointer;
	user-select: none;
	z-index: 6;
}

#testimonials_categories{
	flex-grow: 0;
	flex-shrink: 0;
	width: 100%;
}

#testimonials_catlist{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
}

#testimonials_catlist li{
	padding: 10px;
	text-transform: uppercase;
	user-select: none;
	cursor: pointer;
	text-align: center;
}

#testimonials_catlist h3{
	font-family: 'PT Sans Caption', serif;
}

#testimonials_catlist .current{
	text-decoration: underline;
	font-weight: bold;
}

#testimonial_container{
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	color: var(--color-myprofile-white);
}

#testimonial_wrapper{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

#testimonial_content{
	padding: 10px;
	background-color: rgba(0, 0, 0, 0.6);
}

#testimonial{
	line-height: 1.5;
}

#testimonial_back_button{
	width: 50px;
	margin-right: 10px;
	cursor: pointer;
	user-select: none;
	flex-grow: 0;
	flex-shrink: 0;
}

#testimonial_back_button svg{
	fill: var(--color-myprofile-white);
}

#testimonial_tech_info{
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	font-size: 14px;
	font-style: italic;
}

#testimonial_tech_info div{
	margin-left: 5px;
}

#testimonial_tech_info-author_disclaimer{
	color: var(--color-myprofile-green);
}

#testimonial_disclaimer{
	min-height: 20px;
	font-size: 12px;
	font-style: italic;
	padding-left: 5px;
}

.testimonials{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-grow: 1;
	flex-shrink: 1;
	width: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #000 var(--color-myprofile-black);
}

.testimonials > .testimonial_set{
	display: grid;
	margin-right: 10px;
	margin-bottom: 10px;
}

.testimonial_set > .testimonial_preview{
	background-color: rgba(0, 0, 0, 0.6);
	user-select: none;
	cursor: pointer;
	padding: 10px;
}

.testimonial_preview > div{
	height: 100%;
	line-height: 1.3;
	overflow: hidden;
}

.testimonial_preview .mixed{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
}

.testimonial_preview .image{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.testimonial_preview .video{
	
}

.mixed .mixedinner{
	padding: 10px;
}

.testimonial_height_overflow{
	height: calc(100vh - 60px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-myprofile-black) #000;
}

.pattern_1 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_1 [data-index = "2"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_1 [data-index = "3"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_1 [data-index = "4"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_2 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
}

.pattern_3 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 3;
}

.pattern_3 [data-index = "2"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_3 [data-index = "3"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_4 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_4 [data-index = "2"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_4 [data-index = "3"]{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_5 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_5 [data-index = "2"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_5 [data-index = "3"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_6 [data-index = "1"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}

.pattern_6 [data-index = "2"]{
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
}

.pattern_6 [data-index = "3"]{
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 3;
}

.experiencenav_item{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

.experiencenav_item > .experiencenav_item_logo{
	flex-grow: 0;
	flex-shrink: 0;
}

.experiencenav_item > .experiencenav_item_descripton{
	flex-grow: 1;
	flex-shrink: 1;
	margin-left: 13px;
}

.testimonial_figure{
	display: inline-block;
	width: 170px;
	background-color: var(--color-myprofile-black);
}

.testimonial_figure div{
	width: 170px;
	height: 100px;
	overflow: hidden;
}

.testimonial_figure figcaption{
	font-size: 14px;
	font-style: italic;
	padding: 5px;
	line-height: 1.2;
}

.testimonial_customer{
	display: inline-flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
}

.testimonial_customer > .testimonial_customer-icon{
	flex-grow: 0;
	flex-shrink: 0;
}

.testimonial_customer > .testimonial_customer-icon img{
	height: 48px;
	width: auto;
}

.testimonial_customer > .testimonial_customer-info{
	padding-left: 10px;
	line-height: 1.2;
}

.testimonial_customer > .testimonial_customer-info a{
	border-bottom: 1px solid var(--color-myprofile-white);
	padding-bottom: 1px;
}

.testimonial_customer > .testimonial_customer-info a:link{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_customer > .testimonial_customer-info a:visited{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_customer > .testimonial_customer-info a:hover{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_customer > .testimonial_customer-info a:active{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_customer > .testimonial_customer-info span{
	font-size: 14px;
	font-style: italic;
}

.testimonial_author{
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.testimonial_author > .testimonial_author-icon{
	height: 48px;
	width: 48px;
	text-align: center;
	flex-grow: 0;
	flex-shrink: 0;
}

.testimonial_author > .testimonial_author-icon svg{
	height: 48px;
	width: auto;
	fill: var(--color-myprofile-white);
}

.testimonial_author > .testimonial_author-info{
	padding-left: 10px;
	line-height: 1.0;
}

.testimonial_author > .testimonial_author-info a{
	border-bottom: 1px solid var(--color-myprofile-white);
	padding-bottom: 1px;
}

.testimonial_author > .testimonial_author-info a:link{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_author > .testimonial_author-info a:visited{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_author > .testimonial_author-info a:hover{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_author > .testimonial_author-info a:active{
	color: var(--color-myprofile-white);
	text-decoration: none;
}

.testimonial_author > .testimonial_author-info span{
	font-size: 14px;
	font-style: italic;
}

.testimonials_additional_header{
	font-size: 14px;
	text-align: center;
	color: var(--color-myprofile-accent);
	user-select: none;
	cursor: pointer;
}

.testimonials_additional_header svg{
	height: 6px;
	fill: var(--color-myprofile-accent);
	vertical-align: middle;
}

.centeredboxframe{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
}

.font-smoothed{
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.overlay{
	width: 100vw;
	height: 100vh;
	position: fixed;
	overflow: hidden;
	z-index: 5;
}

.blured{
	backdrop-filter: blur(7px);
}

.qrcode{
	fill: #000;
}

.cl_default_black{
	color: var(--color-myprofile-black);
}

.clear{
	clear: both;
}

/*############################### LAYOUT DISPLAY MODE 2 ###############################*/

@media screen and (orientation: landscape) and ((min-width: 1921px) or (min-height: 1081px)){
	html{
        font-size: 19px;
    }
	
	h1{
		font-family: 'PT Sans Caption', serif;
		font-size: 90px;
	}
	
	#messagebox_controls_closebutton{
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 23px;
		float: right;
		cursor: pointer;
		color: var(--color-myprofile-background);
		font-family: Verdana, Geneva, "sans-serif";
		font-size: 20px;
		font-weight: bold;
	}
	
	#me_container{
		width: 100vw;
		height: 100vh;
	}
	
	#layer_myphotoblind_container{
		position: absolute;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		height: 100vh;
		width: 100vw;
	}
	
	#layer_myphotoblind_movable{
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 78.2%;
	}
	
	#layer_myphotoblind{
		height: 100vh;
		-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(to left, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
	}
	
	#layer_myphotoblind-resizegrip{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 25px;
		height: 5%;
		cursor: col-resize;
		margin-right: -25px;
	}
	
	#layer_myphotoblind-resizegrip .resizegrip_handle_short{
		width: 5px;
		height: 70%;
		background-color: var(--color-myprofile-accent);
		border-radius: 5px;
	}

	#layer_myphotoblind-resizegrip .resizegrip_handle_long{
		width: 5px;
		height: 100%;
		background-color: var(--color-myprofile-accent);
		border-radius: 5px;
	}
	
	#layer_myprofile_container{
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	
	#experiencenav h2{
		font-size: 24px;
		margin-bottom: 7px;
	}
	
	#contactsnav > ul li{
		margin-right: 110px;
		width: 55px;
		height: 55px;
		font-size: 50px;
	}
	
	#language_switcher{
		position: absolute;
	}
	
	#mybusinesscard_container{
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	
	#mybusinesscard{
		flex-direction: row;
	}
	
	#mybusinesscard h2{
		font-size: 24px;
	}
	
	#qr-code{
		width: 600px;
	}
	
	#testimonials_header{
		padding: 50px;
	}
	
	#testimonials_header h2{
		font-size: 67px;
	}
	
	#testimonials_closebutton{
		width: 100px;
		height: 100px;
		line-height: 100px;
		left: calc(100vw - 100px);
	}
	
	#testimonials_catlist{
		width: 70%;
	}
	
	#testimonials_catlist h3{
		font-size: 32px;
	}
	
	#testimonial_container [data-entity_type = "mixed"]{
		max-width: 30%;
	}
	
	#testimonials_catlist .current{
		color: var(--color-myprofile-accent);
		text-decoration: underline;
		font-weight: bold;
	}
	
	.testimonials{
		padding-top: 50px;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.testimonials > .testimonial_set{
		width: 410px;
		height: 410px;
		grid-template-columns: 200px 200px;
		grid-template-rows: 200px 200px;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	
	.experiencenav_item > .experiencenav_item_logo{
		width: 55px;
	}
	
	.messagebox_container{
		width: 500px;
		background-color: var(--color-myprofile-white);
		font-size: 14px;
	}
	
	.messagebox_controls_titlebox{
		height: 25px;
		line-height: 25px;
		margin-right: 25px;
		padding-left: 5px;
		color: var(--color-myprofile-background);
	}
	
	.messagebox_captionbox{
		padding: 5px;
		line-height: 18px;
	}
	
	.experiencenav_item > .experiencenav_item_descripton p{
		line-height: 1.4;
	}
	
	.experiencenav_item{
		max-width: 1000px;
		min-width: 500px;
	}
}

/*############################### LAYOUT DISPLAY MODE 1 ###############################*/

@media screen and (orientation: landscape) and (max-width: 1920px) and (max-height: 1080px){
	html{
        font-size: 19px;
    }
	
	h1{
		font-family: 'PT Sans Caption', serif;
		font-size: 90px;
	}
	
	#messagebox_controls_closebutton{
		width: 25px;
		height: 25px;
		text-align: center;
		line-height: 23px;
		float: right;
		cursor: pointer;
		color: var(--color-myprofile-background);
		font-family: Verdana, Geneva, "sans-serif";
		font-size: 20px;
		font-weight: bold;
	}
	
	#me_container{
		width: 100vw;
		height: 100vh;
	}
	
	#layer_myphotoblind_container{
		position: absolute;
		flex-direction: row;
		align-items: stretch;
		justify-content: flex-start;
		height: 100vh;
		width: 100vw;
	}
	
	#layer_myphotoblind_movable{
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		width: 78.2%;
	}
	
	#layer_myphotoblind{
		height: 100vh;
		-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(to left, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
	}
	
	#layer_myphotoblind-resizegrip{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 25px;
		height: 5%;
		cursor: col-resize;
		margin-right: -25px;
	}
	
	#layer_myphotoblind-resizegrip .resizegrip_handle_short{
		width: 5px;
		height: 70%;
		background-color: var(--color-myprofile-accent);
		border-radius: 5px;
	}

	#layer_myphotoblind-resizegrip .resizegrip_handle_long{
		width: 5px;
		height: 100%;
		background-color: var(--color-myprofile-accent);
		border-radius: 5px;
	}
	
	#layer_myprofile_container{
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	
	#experiencenav h2{
		font-size: 24px;
		margin-bottom: 7px;
	}
	
	#contactsnav > ul li{
		margin-right: 110px;
		width: 55px;
		height: 55px;
		font-size: 50px;
	}
	
	#language_switcher{
		position: absolute;
	}
	
	#mybusinesscard_container{
		justify-content: center;
		width: 100vw;
		height: 100vh;
	}
	
	#mybusinesscard{
		flex-direction: row;
	}
	
	#mybusinesscard h2{
		font-weight: bold;
	}
	
	#qr-code{
		width: 600px;
	}
	
	#testimonials_header{
		padding: 50px;
	}
	
	#testimonials_header h2{
		font-size: 67px;
	}
	
	#testimonials_closebutton{
		width: 100px;
		height: 100px;
		line-height: 100px;
		left: calc(100vw - 100px);
	}
	
	#testimonials_catlist{
		width: 70%;
	}
	
	#testimonials_catlist h3{
		font-size: 32px;
	}
	
	#testimonial_container [data-entity_type = "mixed"]{
		max-width: 30%;
	}
	
	#testimonials_catlist .current{
		color: var(--color-myprofile-accent);
		text-decoration: underline;
		font-weight: bold;
	}
	
	.testimonials{
		padding-top: 50px;
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.testimonials > .testimonial_set{
		width: 410px;
		height: 410px;
		grid-template-columns: 200px 200px;
		grid-template-rows: 200px 200px;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
	}
	
	.experiencenav_item > .experiencenav_item_logo{
		width: 55px;
	}
	
	.messagebox_container{
		width: 500px;
		background-color: var(--color-myprofile-white);
		font-size: 14px;
	}
	
	.messagebox_controls_titlebox{
		height: 25px;
		line-height: 25px;
		margin-right: 25px;
		padding-left: 5px;
		color: var(--color-myprofile-background);
	}
	
	.messagebox_captionbox{
		padding: 5px;
		line-height: 18px;
	}
	
	.experiencenav_item > .experiencenav_item_descripton p{
		line-height: 1.4;
	}
	
	.experiencenav_item{
		max-width: 1000px;
		min-width: 500px;
	}
}

/*############################### LAYOUT DISPLAY MODE 0 ###############################*/

@media screen and ((orientation: portrait) or ((max-width: 961px) and (max-height: 1024px)) or ((max-width: 1581px) and (max-height: 935px)) or ((min-width: 961px) and (max-height: 792px))){
	html{
		font-size: 2vw;
	}
	
	#messagebox_controls_closebutton{
		width: 50px;
		height: 50px;
		text-align: center;
		line-height: 46px;
		float: right;
		cursor: pointer;
		color: var(--color-myprofile-background);
		font-family: Verdana, Geneva, "sans-serif";
		font-weight: bold;
		font-size: 45px;
	}
	
	h1{
		font-family: 'PT Sans Caption', serif;
		font-size: 5rem;
		line-height: 1.3;
	}
	
	#nojs_message{
		width: 70%;
		left: calc((100vw - 70%)/2);
		font-size: 1.5rem;
	}
	
	#me_container{
		max-width: 100%;
	}
	
	#experiencenav h2{
		font-size: 2.5rem;
		margin-bottom: 7px;
	}
	
	#layer_myphotoblind_container{
		position: fixed;
		flex-direction: column-reverse;
		align-items: stretch;
		justify-content: flex-start;
		height: 100%;
		width: 100%;
	}
	
	#layer_myphotoblind_movable{
		flex-direction: column-reverse;
		align-items: center;
		justify-content: flex-start;
		height: 78.2%;
		width: 100%;
		touch-action: none;
	}
	
	#layer_myphotoblind{
		width: 100%;
		-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
		mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 100%);
	}
	
	#layer_myphotoblind-resizegrip{
		display: block;
		width: 15%;
		height: 25px;;
		cursor: row-resize;
		margin-top: -25px;
	}
	
	#layer_myphotoblind-resizegrip .resizegrip_handle_short{
		display: none;
	}

	#layer_myphotoblind-resizegrip .resizegrip_handle_long{
		width: 100%;
		height: 5px;
		background-color: var(--color-myprofile-accent);
		border-radius: 5px;
		margin-top: 10px;
	}
	
	#layer_myprofile_container{
		justify-content: flex-start;
		padding-top: 9vh;
		max-width: 100%;
		padding-bottom: 9vh;
	}
	
	#contactsnav > ul li{
		margin-right: 6vw;
		width: 10vw;
		height: 10vw;
		font-size: 4.5rem;
	}
	
	#language_switcher{
		position: fixed;
	}
	
	#mybusinesscard_container{
		justify-content: flex-start;
		width: 100%;
		height: 100%;
	}
	
	#mybusinesscard{
		flex-direction: column;
		padding-top: 60px;
		padding-bottom: 60px;
	}
	
	#mybusinesscard h2{
		font-size: 2.5rem;
	}
	
	#qr-code{
		width: min(95vw, 95vh);
		flex-wrap: wrap;
	}
	
	#verbose{
		font-size: 1.7rem;
	}
	
	#testimonials_container{
		height: 100dvh;
	}
	
	#testimonial_container{
		height: 100dvh;
	}
	
	#testimonials_header{
		padding: 7%;
	}
	
	#testimonials_header h2{
		font-size: 3.52rem;
	}
	
	#testimonials_closebutton{
		width: 70px;
		height: 70px;
		line-height: 70px;
		left: calc(100vw - 70px);
	}
	
	#testimonials_catlist{
		width: 100%;
	}
	
	#testimonials_catlist h3{
		font-size: 1.68rem;
	}
	
	#testimonial_container [data-entity_type = "mixed"]{
		max-width: 95%;
		font-size: 2rem;
	}
	
	#testimonials_catlist .current{
		background-color: var(--color-myprofile-accent);
		color: var(--color-myprofile-white);
		text-decoration: none;
		font-weight: normal;
	}
	
	.testimonials{
		padding-top: 7%;
		padding-left: 7%;
		padding-right: 7%;
	}
	
	.testimonials > .testimonial_set{
		width: 100%;
		aspect-ratio: 1 / 1;
		grid-template-columns: 49% 49%;
		grid-template-rows: 49% 49%;
		grid-column-gap: 2%;
		grid-row-gap: 2%;
	}
	
	.testimonial_height_overflow{
		height: calc(100dvh - 60px);
	}
	
	.testimonial_preview .mixed{
		font-size: 2rem;
	}
	
	.mixed .mixedinner{
		padding: 0;
	}
	
	.experiencenav_item > .experiencenav_item_logo{
		max-width: 90px;
		width: 8%;
	}
	
	.messagebox_container{
		width: 90%;
		background-color: var(--color-myprofile-white);
		font-size: 26px;
	}
	
	.messagebox_controls_titlebox{
		height: 50px;
		line-height: 50px;
		margin-right: 50px;
		padding-left: 15px;
		color: var(--color-myprofile-background);
		overflow: hidden;
	}
	
	.messagebox_captionbox{
		padding: 15px;
		line-height: 1.2;
	}
	
	.experiencenav_item > .experiencenav_item_descripton p{
		font-size: 1.7rem;
		line-height: 1.3;
	}
	
	.experiencenav_item{
		max-width: 80vw;
	}
}