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

html {scroll-behavior: smooth;}

body {
    width:100%;
    height:100%;
    background-color:var(--white);
    color:var(--charcoal);
	font-family:'cerapro-regular', "sans-serif";
    font-size:16px;
    line-height:1.4em;
    margin:0px;
    padding:0px;
}

* {	transition:all 0.4s ease-in-out;
	-webkit-transition:all 0.4s ease-in-out;
	-moz-transition:all 0.4s ease-in-out;
	-ms-transition:all 0.4s ease-in-out;
	-o-transition:all 0.4s ease-in-out;
}

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

@font-face {
    font-family: 'cerapro-bold';
    src: url('fonts/cerapro/bold/CeraPro-Bold.eot');
    src: url('fonts/cerapro/bold/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/cerapro/bold/CeraPro-Bold.woff2') format('woff2'),
         url('fonts/cerapro/bold/CeraPro-Bold.woff') format('woff'),
         url('fonts/cerapro/bold/CeraPro-Bold.ttf') format('truetype'),
         url('fonts/cerapro/bold/CeraPro-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cerapro-medium';
    src: url('fonts/cerapro/medium/CeraPro-Medium.eot');
    src: url('fonts/cerapro/medium/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),
         url('fonts/cerapro/medium/CeraPro-Medium.woff2') format('woff2'),
         url('fonts/cerapro/medium/CeraPro-Medium.woff') format('woff'),
         url('fonts/cerapro/medium/CeraPro-Medium.ttf') format('truetype'),
         url('fonts/cerapro/medium/CeraPro-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cerapro-regular';
    src: url('fonts/cerapro/regular/CeraPro-Regular.eot');
    src: url('fonts/cerapro/regular/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
         url('fonts/cerapro/regular/CeraPro-Regular.woff2') format('woff2'),
         url('fonts/cerapro/regular/CeraPro-Regular.woff') format('woff'),
         url('fonts/cerapro/regular/CeraPro-Regular.ttf') format('truetype'),
         url('fonts/cerapro/regular/CeraPro-Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* COLOR VARIABLES ##### ##### ----------------------------------------------------- ##### #####*/

:root {
	--lightblue: #2589ff;
	--royalblue: #1e39d4;
	--mintgreen: #92e29d;
	--sagegreen: #71b880;
	--charcoal: #131313;
	--icegrey: #f4f6fa;
	--black: #000000;
	--white: #FFFFFF;
}

/* LINKS ##### ##### ----------------------------------------------------- ##### #####*/

a {color:inherit; text-decoration:none; border:0 none;}
a:hover {cursor:pointer;}

a.txt_link {color:var(--royalblue)}
a.txt_link:hover {color:var(--lightblue);}

a.sub_link {
	color:var(--mintgreen);
}
a.sub_link:hover {
	color:var(--mintgreen); 
	text-decoration: underline;
}

/* CTA + BUTTONS ##### ##### ----------------------------------------------------- ##### #####*/

.cta_button {
    float: left;
    font-family: 'cerapro-regular';
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 1em;
    padding: 5px 15px;
    margin: 26px 15px 26px 0px;
    border-radius: 22px;
}

.cta_button:hover {padding: 5px 25px;}

.cta_button.black {
    color:var(--charcoal);
    outline:var(--charcoal) solid 1.5px;
}

.cta_button.blue {
    color:var(--royalblue);
    outline:var(--royalblue) solid 1.5px;
}

.cta_button.ice {
    color:var(--icegrey);
    outline:var(--icegrey) solid 1.5px;
}

button:hover { cursor: pointer;}

/* HEADLINES + TXT MARKUPS ##### ##### ----------------------------------------------------- ##### #####*/

h1, h2, h3, h4 { margin:0; padding:0; font-weight:normal; letter-spacing: 0.0em; float: left;}

h1 {
    font-family: 'scotch-display';
    font-weight: 600;
    font-style: normal;
    font-size: 3.5em;
    line-height: 1.1em;
}

h2 {
    font-family: 'scotch-display';
    font-weight: 400;
    font-style: normal;
    font-size: 2.6em;
    line-height: 1.1em;
}

h3 {
    font-family: 'cerapro-medium';
    font-size: 1.9em;
    line-height: 1.2em;
	letter-spacing: 0.03em;
}

h4 {
    font-family: 'scotch-display';
    font-weight: 500;
    font-style: italic;
    font-size: 1.9em;
    line-height: 1.2em;
}

h4 + p {
	width:100%;
	float:left;
	margin:20px 0;
}

b, strong { font-weight:normal; font-family:'cerapro-bold';}
p {
	width:100%; 
	margin:0; 
	padding:0; 
	float:left;
	font-size:1.0em; 
	line-height:1.4em;
}

p.medium {
	width:100%; 
	margin:0; 
	padding:0; 
	float:left;
	font-family: 'cerapro-medium';
	font-size:1.1em; 
	line-height:1.45em;
}

small {
	font-size:0.8em;
	line-height:1.3em;
	width:100%;
	float:left;
}

.caption {
	width:100%;
    font-family: 'cerapro-medium';
    text-transform: uppercase;
    color:var(--mintgreen);
    font-size: 0.9em;
    letter-spacing: 0.2em;
    line-height: 1.8em;
    margin-bottom: 20px;
    float:left;
}

.headline_claim h1 {
	width:55%;
	margin:30px 45% 40px 0;
	
	font-family: 'scotch-display';
    font-weight: 600;
    font-style: normal;
    font-size: 5.7em;
    line-height: 1.0em;
}

/* BASIC ELEMENTS ##### ##### ----------------------------------------------------- ##### #####*/

img {width:100%; margin:0 0 -5px 0; padding:0;}

video  {width:100%; margin:0;}

label:hover {cursor:pointer;} 

.hidden {display:none;}
.mobile { display:none;}
.desktop { display:block;}

/* COOKIE-BANNER ##### ##### ----------------------------------------------------- ##### #####*/

.cookiebanner {
	width:92%;
	height: auto;
	padding: 24px 2%;
	margin:0 2%;
	
	position: fixed;
	bottom: 24px;
	left: 0;
	
	background-color:var(--lightblue);
	color:var(--icegrey);
	
	z-index: 1000;
	display: block;
	
	border-radius: 10px;
	
}
.cookiebanner .description {
	width:65%;
	float: left;
	text-align: left;
	margin:0;
}
.cookiebanner .button {
	float: right;
    font-family: 'cerapro-regular';
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.8em;
    padding: 4px 12px;
    margin: 10px 10px 0 10px;
    border-radius: 22px;
	border:0px;
}

.cookiebanner .primary {
	background-color:var(--royalblue);
	color:var(--icegrey);
	outline:var(--royalblue) solid 1.5px;
}
.cookiebanner .secondary {
	color:var(--icegrey);
	background-color:rgba(255, 255, 255,0);
	outline:var(--icegrey) solid 1.5px;
}

/* ROOT ##### ##### ----------------------------------------------------- ##### #####*/

#root {
	width:100%;
	height:100vh;
	box-shadow:inset 0px 0px 0px 4px var(--royalblue);
}

/* NAVIGATION ##### ##### ----------------------------------------------------- ##### #####*/

#nav {
	width:90%;
	height:auto;
	position:absolute;
	top:30px;
	left:5%;
	z-index:20;
	
	animation:LoadNavAnimation 1.2s ease;
	-webkit-animation:LoadNavAnimation 1.2s ease;
	-moz-animation:LoadNavAnimation 1.2s ease;
	-ms-animation:LoadNavAnimation 1.2s ease;
	-o-animation:LoadNavAnimation 1.2s ease;
}

/*LoadNavAnimation*/
@-webkit-keyframes LoadNavAnimation {
	0% { opacity:0; transform: translateY(-60px);}
	30% { opacity:0; transform: translateY(-60px);}
	100% { opacity:1; transform: translateY(0px);}
}

#nav .navicon {display:none;}

#nav .navitem_wrap {
	width:380px;
	float:left;
	margin-left:calc(50% - 190px);
	text-align:center;
	
	display:flex;
	justify-content:space-between;
	align-items:center;
	align-content:center;
}

.navitem {
	width:auto;
	float:left;
	color:var(--royalblue);
	
	font-family: 'scotch-display';
	font-weight: 600;
    font-style: normal;
    font-size: 1.1em;
    line-height: 1.0em;
}

.navitem:hover {transform:translateY(-4px)}

#root.start > #nav > .navitem_wrap > a[href="index.php"] > .navitem,
#root.values > #nav > .navitem_wrap > a[href="values.php"] > .navitem,
#root.services > #nav > .navitem_wrap > a[href="services.php"] > .navitem,
#root.cases > #nav > .navitem_wrap > a[href="cases.php"] > .navitem,
#root.contact > #nav > .navitem_wrap > a[href="contact.php"] > .navitem {color:var(--charcoal);}

/* CONTENT ##### ##### ----------------------------------------------------- ##### #####*/

#content {
	animation:BlendInAnimation 1s ease;
	-webkit-animation:BlendInAnimation 1s ease;
	-moz-animation:BlendInAnimation 1s ease;
	-ms-animation:BlendInAnimation 1s ease;
	-o-animation:BlendInAnimation 1s ease;
}

/*BlendInAnimation*/
@-webkit-keyframes BlendInAnimation {
	0% { opacity:0;}
	40% { opacity:0;}
	100% { opacity:1;}
}

.slide#sub {
	width:100%;
	float:left;
	margin:100px 0 40px 0;
}

.inner {
	width:90%;
	max-width:1100px;
	margin:0px auto;
}

.inner > .row:nth-of-type(1) {margin-top:120px;}

.panel_main {
	width:calc(100% - 500px);
	float:left;
	margin:60px 50px 0px 450px;
}

.panel_side.left {
	width:300px;
	height:calc(100vh - 100px);
	padding:50px;
	float:left;
	position:absolute;
	left:0;
	top:0;
	
	background-color:var(--royalblue);
	color:var(--icegrey);
}

.panel_side.right {
	width:220px;
	height:calc(100vh - 150px);
	padding:150px 50px 0 50px;
	float:right;
	position:absolute;
	right:0;
	top:0;
	
	background-color:rgba(255,255,255,0);
}

.panel_side.right h2 {
	font-size:1.1em;
	width:100%;
	float:left;
	margin-bottom:20px;
}

.panel_side.right p,
.panel_side.right small {
	width:100%;
	float:left;
	margin:0 0 20px 0;
}

.panel_medium {
	width:calc(100% - 720px);
	height:100vh;
	position:absolute;
	left:400px;
	top:0px;
}

.row {
	width:100%;
	float:left;
	margin:60px 0 0 0;
	
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	align-content:center;
}

.row .col_04 {
	width:206px;
	float:left;
}

.row .col_03 {
	width:32%;
	float:left;
}

.row .col_03 h2,
.row .col_04 h2 {
	font-size:1.1em;
	width:100%;
	float:left;
	margin-bottom:20px;
}

/* LOGO ##### ##### ----------------------------------------------------- ##### #####*/

.logo_fullwidth {
	width:100%;
	height:auto;
	position:absolute;
	top:0px;
	z-index:-5;
}

.logo_fullwidth_bottom {
	width:100%;
	height:auto;
	position:absolute;
	bottom:0px;
	padding-bottom:0px;
	z-index:-5;
	overflow:hidden;
}

.logo_fullwidth_bottom img {
	animation:LoadLogoBottomAnimation 1.2s ease;
	-webkit-animation:LoadLogoBottomAnimation 1.2s ease;
	-moz-animation:LoadLogoBottomAnimation 1.2s ease;
	-ms-animation:LoadLogoBottomAnimation 1.2s ease;
	-o-animation:LoadLogoBottomAnimation 1.2s ease;
}

/*LoadLogoBottomAnimation*/
@-webkit-keyframes LoadLogoBottomAnimation {
	0% { -webkit-transform:translate(0, 230px);}
	30% { -webkit-transform:translate(0, 230px);}
	100% { -webkit-transform:translate(0, 0);}
}

/* KEYVISUAL ##### ##### ----------------------------------------------------- ##### #####*/

.keyvisual_fullscreen {
	width:100%;
	height:100vh;
	position:absolute;
	z-index:-10;
	background-image: url("../src/keyvisual/tlu_2026_web_update_keyvisual_illu_04.jpg");
	background-size: cover;
	background-position: center bottom;
}

/* NO AI LABEL ##### ##### ----------------------------------------------------- ##### #####*/

.noai_icon {
	width:100px;
	height:100px;
	position:absolute;
	left:2%;
	bottom:240px;
}

.noai_icon > .icon_ring {
	width:100%;
	position:absolute;
	
	animation:RotatingAnimation 14s linear infinite;
	-webkit-animation:RotatingAnimation 14s linear infinite;
	-moz-animation:RotatingAnimation 14s linear infinite;
	-ms-animation:RotatingAnimation 14s linear infinite;
	-o-animation:RotatingAnimation 14s linear infinite;
}

.noai_icon > .icon_inner {
	width:100%;
	position:absolute;
}

/*RotatingAnimation*/
@-webkit-keyframes RotatingAnimation {
	0% { -webkit-transform:rotate(0deg);}
	100% { -webkit-transform:rotate(-360deg);}
}

/* SUBPAGE ##### ##### ----------------------------------------------------- ##### #####*/

#subpage-about:target {display:block;}
#subpage-statements:target {display:block;}

.subpage_wrap {
	width:100%;
	height:100vh;
	position:relative;
	display:none;
	
	color:var(--icegrey);
	background-color:var(--charcoal);
	z-index:20;
	
	animation:LoadSubpageAnimation 1.2s ease;
	-webkit-animation:LoadSubpageAnimation 1.2s ease;
	-moz-animation:LoadSubpageAnimation 1.2s ease;
	-ms-animation:LoadSubpageAnimation 1.2s ease;
	-o-animation:LoadSubpageAnimation 1.2s ease;
}

/*LoadSubpageAnimation*/
@-webkit-keyframes LoadSubpageAnimation {
	0% { opacity:1; -webkit-transform:translate(0, -100vh);}
	30% { opacity:1; -webkit-transform:translate(0, -60px);}
	100% { opacity:1; -webkit-transform:translate(0, 0);}
}

.subpage_navitem_wrap {
	width:100%;
	height:auto;
	margin:30px 0%;
	float:left;
}

.subpage_navitem_wrap .navitem {color:var(--icegrey);}

.subpage_inner {
	width:90%;
	max-width:1100px;
	margin:0px auto;
}

/* STATEMENTS ##### ##### ----------------------------------------------------- ##### #####*/

.statements_wrap {
	width:100%;
	float:left;
	margin:40px 0;
} 

.statement {
	width:100%;
	margin:0;
	float:left;
	display: none;
}

.statement .statement_text {
	width:100%;
	float: left;
	margin:0 0 10px 0;
	font-size: 1.3em;
    line-height: 1.5em;
}

.label_wrap_small {
	width:100%;
	float: left;
}

.label_wrap_small .circle_label_small {
	width:10px;
	height:10px;
	margin:2px 6px;
	
	background-color:var(--white);
	box-shadow: 0px 0px 0px 1pt rgba(255,255,255,0);
}

.label_wrap_next,
.label_wrap_prev {
	width:40px;
	height:40px;
	float:left;
	margin:0px 20px 40px 0;
}

.label_wrap_prev label {transform: rotate(180deg);}

.label_wrap_next label,
.label_wrap_prev label{
	width:23px;
    height:23px;
	padding:10px;
	margin:0;
	float: left;
    border-radius: 50%;
    outline:2px solid var(--icegrey);
	display: none;
}
.personal_info {font-size:0.9em !important;}

.label_wrap_next label:hover {cursor:pointer; transform:scale(0.9);} 
.label_wrap_prev label:hover {cursor:pointer; transform:rotate(180deg) scale(0.9);}

input#st-001:checked ~ .label_wrap_next > label[for="st-002"],
input#st-002:checked ~ .label_wrap_next > label[for="st-003"],
input#st-003:checked ~ .label_wrap_next > label[for="st-004"],
input#st-004:checked ~ .label_wrap_next > label[for="st-005"],
input#st-005:checked ~ .label_wrap_next > label[for="st-006"],
input#st-006:checked ~ .label_wrap_next > label[for="st-001"]{ display: block;}

input#st-001:checked ~ .label_wrap_prev > label[for="st-006"],
input#st-002:checked ~ .label_wrap_prev > label[for="st-001"],
input#st-003:checked ~ .label_wrap_prev > label[for="st-002"],
input#st-004:checked ~ .label_wrap_prev > label[for="st-003"],
input#st-005:checked ~ .label_wrap_prev > label[for="st-004"],
input#st-006:checked ~ .label_wrap_prev > label[for="st-005"]{ display: block;}

input#st-001:checked ~ .label_wrap_small > label[for="st-001"],
input#st-002:checked ~ .label_wrap_small > label[for="st-002"],
input#st-003:checked ~ .label_wrap_small > label[for="st-003"],
input#st-004:checked ~ .label_wrap_small > label[for="st-004"],
input#st-005:checked ~ .label_wrap_small > label[for="st-005"],
input#st-006:checked ~ .label_wrap_small > label[for="st-006"]{ transform: scale(1.2); box-shadow: 0px 0px 0px 4pt rgba(255,255,255,0.3);}

input#st-001:checked ~ .statement#s01,
input#st-002:checked ~ .statement#s02,
input#st-003:checked ~ .statement#s03,
input#st-004:checked ~ .statement#s04,
input#st-005:checked ~ .statement#s05,
input#st-006:checked ~ .statement#s06 {display:block;}

/* CONTACT IMAGE ##### ##### ----------------------------------------------------- ##### #####*/

.contact_image {
	width:100%;
	height:100vh;
	position:absolute;
	
	background-size:cover;
	background-position:top center;
	background-image:url("../src/contact/tlu_contact_image_01.jpg");
	z-index:-5;
}

/* CASES ##### ##### ----------------------------------------------------- ##### #####*/

.cases_wrap {
	width:100%;
	float:left;
	margin:40px 0 0 0;
}

.case_3d {
	width:100%;
	height:500px;
	transform-style:preserve-3d;
	perspective: 5000px;
    perspective-origin: 0% 0%;
	transform: translateY(0px) translateX(20px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0);
	display:none;
}

.case_3d:hover {
	transform: translateY(0px) translateX(20px) rotateX(12deg) rotateY(18deg) rotateZ(0deg) scaleX(1.05) scaleY(1.05) scaleZ(1.05);
}

.cases_wrap .label_wrap_next,
.cases_wrap .label_wrap_prev {
	width:auto;
	height:auto;
	float:left;
}

.cases_wrap .label_wrap_next {margin:40px 0 0 10px;}
.cases_wrap .label_wrap_prev {margin:40px 0 0 20px;}

.cases_wrap .label_wrap_prev label {transform: rotate(180deg);}
.cases_wrap .label_wrap_next label:hover {cursor:pointer; transform:scale(0.9);} 
.cases_wrap .label_wrap_prev label:hover {cursor:pointer; transform:rotate(180deg) scale(0.9);}

.cases_wrap .label_wrap_next label,
.cases_wrap .label_wrap_prev label{
	width:18px;
    height:18px;
	padding:8px;
	margin:0;
	float: left;
    border-radius: 50%;
    outline:1.5px solid var(--charcoal);
	display: none;
}

.cases_wrap .label_wrap_next label img,
.cases_wrap .label_wrap_prev label img {margin:0px;}

input#case-001:checked ~ .label_wrap_next > label[for="case-002"],
input#case-002:checked ~ .label_wrap_next > label[for="case-003"],
input#case-003:checked ~ .label_wrap_next > label[for="case-004"],
input#case-004:checked ~ .label_wrap_next > label[for="case-005"],
input#case-005:checked ~ .label_wrap_next > label[for="case-006"],
input#case-006:checked ~ .label_wrap_next > label[for="case-007"],
input#case-007:checked ~ .label_wrap_next > label[for="case-008"],
input#case-008:checked ~ .label_wrap_next > label[for="case-009"],
input#case-009:checked ~ .label_wrap_next > label[for="case-010"],
input#case-010:checked ~ .label_wrap_next > label[for="case-001"]{ display: block;}

input#case-001:checked ~ .label_wrap_prev > label[for="case-010"],
input#case-002:checked ~ .label_wrap_prev > label[for="case-001"],
input#case-003:checked ~ .label_wrap_prev > label[for="case-002"],
input#case-004:checked ~ .label_wrap_prev > label[for="case-003"],
input#case-005:checked ~ .label_wrap_prev > label[for="case-004"],
input#case-006:checked ~ .label_wrap_prev > label[for="case-005"],
input#case-007:checked ~ .label_wrap_prev > label[for="case-006"],
input#case-008:checked ~ .label_wrap_prev > label[for="case-007"],
input#case-009:checked ~ .label_wrap_prev > label[for="case-008"],
input#case-010:checked ~ .label_wrap_prev > label[for="case-009"]{ display: block;}

input#case-001:checked ~ .label_wrap_small > label[for="case-001"],
input#case-002:checked ~ .label_wrap_small > label[for="case-002"],
input#case-003:checked ~ .label_wrap_small > label[for="case-003"],
input#case-004:checked ~ .label_wrap_small > label[for="case-004"],
input#case-005:checked ~ .label_wrap_small > label[for="case-005"],
input#case-006:checked ~ .label_wrap_small > label[for="case-006"],
input#case-007:checked ~ .label_wrap_small > label[for="case-007"],
input#case-008:checked ~ .label_wrap_small > label[for="case-008"],
input#case-009:checked ~ .label_wrap_small > label[for="case-009"],
input#case-010:checked ~ .label_wrap_small > label[for="case-010"]{ transform: scale(1.2); box-shadow: 0px 0px 0px 4pt rgba(255,255,255,0.3);}

input#case-001:checked ~ .case_3d#c01,
input#case-002:checked ~ .case_3d#c02,
input#case-003:checked ~ .case_3d#c03,
input#case-004:checked ~ .case_3d#c04,
input#case-005:checked ~ .case_3d#c05,
input#case-006:checked ~ .case_3d#c06,
input#case-007:checked ~ .case_3d#c07,
input#case-008:checked ~ .case_3d#c08,
input#case-009:checked ~ .case_3d#c09,
input#case-010:checked ~ .case_3d#c10 {display:block;}

.case_3d > .frontside{
	width:900px;
	height:520px;
	position:absolute;
	background-color:var(--icegrey);
}

.case_3d > .backside {
	width:900px;
	height:520px;
	position:absolute;
	background-color:rgba(19,19,19,1);
}

.case_3d > .right,
.case_3d > .left {
	width:40px;
	height:520px;
	position:absolute;
	background:linear-gradient(0deg,rgba(80, 80, 80, 1) 0%, rgba(50, 50, 50, 1) 100%);
}

.case_3d > .top,
.case_3d > .bottom {
	width:900px;
	height:40px;
	position:absolute;
	background:linear-gradient(90deg,rgba(80, 80, 80, 1) 0%, rgba(50, 50, 50, 1) 100%);
}

.case_3d > .frontside {transform: translateY(0px) translateX(0px) translateZ(20px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0);}
.case_3d > .backside {transform: translateY(0px) translateX(0px) translateZ(-20px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0);}
.case_3d > .right {transform: translateY(0px) translateX(880px) translateZ(0px) rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
.case_3d > .left {transform: translateY(0px) translateX(-20px) translateZ(0px) rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
.case_3d > .top {transform: translateY(-20px) translateX(0px) translateZ(0px) rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
.case_3d > .bottom {transform: translateY(500px) translateX(0px) translateZ(0px) rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}

.case_3d .image_slideshow {
	width:100%;
	height:100%;
	position:absolute;
}

.case_3d .image_slideshow > .label_wrap {
	width:15px;
	height:auto;
	position:absolute;
	top:20px;
	right:20px;
	z-index:5;
}
.case_3d .image_slideshow > .label_wrap > label.image_label_round {
	width:10px;
	height:10px;
	background-color:var(--lightblue);
	border-radius:50%;
	float:left;
	margin:8px 0 0 0;
}

input#c01-image-001:checked ~ .label_wrap > label[for="c01-image-001"],
input#c01-image-002:checked ~ .label_wrap > label[for="c01-image-002"], 
input#c01-image-003:checked ~ .label_wrap > label[for="c01-image-003"],
input#c01-image-004:checked ~ .label_wrap > label[for="c01-image-004"],
input#c01-image-005:checked ~ .label_wrap > label[for="c01-image-005"],

input#c02-image-001:checked ~ .label_wrap > label[for="c02-image-001"],
input#c02-image-002:checked ~ .label_wrap > label[for="c02-image-002"], 
input#c02-image-003:checked ~ .label_wrap > label[for="c02-image-003"],
input#c02-image-004:checked ~ .label_wrap > label[for="c02-image-004"],
input#c02-image-005:checked ~ .label_wrap > label[for="c02-image-005"],
input#c02-image-006:checked ~ .label_wrap > label[for="c02-image-006"],
input#c02-image-007:checked ~ .label_wrap > label[for="c02-image-007"],
input#c02-image-008:checked ~ .label_wrap > label[for="c02-image-008"],

input#c03-image-001:checked ~ .label_wrap > label[for="c03-image-001"],
input#c03-image-002:checked ~ .label_wrap > label[for="c03-image-002"], 
input#c03-image-003:checked ~ .label_wrap > label[for="c03-image-003"],

input#c04-image-001:checked ~ .label_wrap > label[for="c04-image-001"],
input#c04-image-002:checked ~ .label_wrap > label[for="c04-image-002"],

input#c05-image-001:checked ~ .label_wrap > label[for="c05-image-001"],
input#c05-image-002:checked ~ .label_wrap > label[for="c05-image-002"], 
input#c05-image-003:checked ~ .label_wrap > label[for="c05-image-003"],
input#c05-image-004:checked ~ .label_wrap > label[for="c05-image-004"],
input#c05-image-005:checked ~ .label_wrap > label[for="c05-image-005"],
input#c05-image-006:checked ~ .label_wrap > label[for="c05-image-006"],

input#c06-image-001:checked ~ .label_wrap > label[for="c06-image-001"],
input#c06-image-002:checked ~ .label_wrap > label[for="c06-image-002"], 
input#c06-image-003:checked ~ .label_wrap > label[for="c06-image-003"],
input#c06-image-004:checked ~ .label_wrap > label[for="c06-image-004"],
input#c06-image-005:checked ~ .label_wrap > label[for="c06-image-005"],

input#c07-image-001:checked ~ .label_wrap > label[for="c07-image-001"],
input#c07-image-002:checked ~ .label_wrap > label[for="c07-image-002"], 
input#c07-image-003:checked ~ .label_wrap > label[for="c07-image-003"],
input#c07-image-004:checked ~ .label_wrap > label[for="c07-image-004"],
input#c07-image-005:checked ~ .label_wrap > label[for="c07-image-005"],
input#c07-image-006:checked ~ .label_wrap > label[for="c07-image-006"],

input#c08-image-001:checked ~ .label_wrap > label[for="c08-image-001"],
input#c08-image-002:checked ~ .label_wrap > label[for="c08-image-002"],

input#c09-image-001:checked ~ .label_wrap > label[for="c09-image-001"],

input#c10-image-001:checked ~ .label_wrap > label[for="c10-image-001"],
input#c10-image-002:checked ~ .label_wrap > label[for="c10-image-002"], 
input#c10-image-003:checked ~ .label_wrap > label[for="c10-image-003"],
input#c10-image-004:checked ~ .label_wrap > label[for="c10-image-004"]
{background-color:var(--royalblue);}

input#c01-image-001:checked ~ .c01_img01,
input#c01-image-002:checked ~ .c01_img02, 
input#c01-image-003:checked ~ .c01_img03,
input#c01-image-004:checked ~ .c01_img04,
input#c01-image-005:checked ~ .c01_img05,

input#c02-image-001:checked ~ .c02_img01,
input#c02-image-002:checked ~ .c02_img02, 
input#c02-image-003:checked ~ .c02_img03,
input#c02-image-004:checked ~ .c02_img04,
input#c02-image-005:checked ~ .c02_img05,
input#c02-image-006:checked ~ .c02_img06,
input#c02-image-007:checked ~ .c02_img07,
input#c02-image-008:checked ~ .c02_img08,

input#c03-image-001:checked ~ .c03_img01,
input#c03-image-002:checked ~ .c03_img02, 
input#c03-image-003:checked ~ .c03_img03,

input#c04-image-001:checked ~ .c04_img01,
input#c04-image-002:checked ~ .c04_img02,

input#c05-image-001:checked ~ .c05_img01,
input#c05-image-002:checked ~ .c05_img02, 
input#c05-image-003:checked ~ .c05_img03,
input#c05-image-004:checked ~ .c05_img04,
input#c05-image-005:checked ~ .c05_img05,
input#c05-image-006:checked ~ .c05_img06,

input#c06-image-001:checked ~ .c06_img01,
input#c06-image-002:checked ~ .c06_img02, 
input#c06-image-003:checked ~ .c06_img03,
input#c06-image-004:checked ~ .c06_img04,
input#c06-image-005:checked ~ .c06_img05,

input#c07-image-001:checked ~ .c07_img01,
input#c07-image-002:checked ~ .c07_img02, 
input#c07-image-003:checked ~ .c07_img03,
input#c07-image-004:checked ~ .c07_img04,
input#c07-image-005:checked ~ .c07_img05,
input#c07-image-006:checked ~ .c07_img06,

input#c08-image-001:checked ~ .c08_img01,
input#c08-image-002:checked ~ .c08_img02,

input#c09-image-001:checked ~ .c09_img01,

input#c10-image-001:checked ~ .c10_img01,
input#c10-image-002:checked ~ .c10_img02, 
input#c10-image-003:checked ~ .c10_img03,
input#c10-image-004:checked ~ .c10_img04
{display:block;}


.case_3d .image_slideshow .slideshow_img {
	width:100%;
	height:100%;
	position:absolute;
	background-size:cover;
	background-position:50% 50%;
	display:none;
	box-shadow:inset 0px 0px 0px 6px rgba(19,19,19,1);
}

.case_3d#c05 .image_slideshow .slideshow_img {
	background-position:top center;
}

.c01_img01 {background-image:url("../src/cases/maa/2026-lehrlingskampagne/maa_lehrlingskampagne_webcover_001.jpg");}
.c01_img02 {background-image:url("../src/cases/maa/2026-lehrlingskampagne/maa_lehrlingsbroschuere_mockup_001.jpg");}
.c01_img03 {background-image:url("../src/cases/maa/2026-lehrlingskampagne/maa_lehrlingsbroschuere_mockup_002.jpg");}
.c01_img04 {background-image:url("../src/cases/maa/2026-lehrlingskampagne/maa_lehrlingskampagne_konzeptskizzen_001.jpg");}
.c01_img05 {background-image:url("../src/cases/maa/2026-lehrlingskampagne/maa_lehrlingskampagne_ooh_plakat_001.jpg");}

.c02_img01 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_keyvisual.jpg");}
.c02_img02 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_branding_01.jpg");}
.c02_img03 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_branding_02.jpg");}
.c02_img04 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_branding_03.jpg");}
.c02_img05 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_branding_04.jpg");}
.c02_img06 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_socialmedia_ads.jpg");}
.c02_img07 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_webdesign.jpg");}
.c02_img08 {background-image:url("../src/cases/ain/branding/ain_kisstheglobe_poster.jpg");}

.c03_img01 {background-image:url("../src/cases/brs/zuerifest_nivea/brs_02_nivea_stand_zuerifest_beachflag.jpg");}
.c03_img02 {background-image:url("../src/cases/brs/zuerifest_nivea/brs_01_nivea_stand_zuerifest.jpg");}
.c03_img03 {background-image:url("../src/cases/brs/zuerifest_nivea/brs_03_nivea_stand_zuerifest_mockups.jpg");}

.c04_img01 {background-image:url("../src/cases/maa/2025-manser-medionis/maa_medionis_branding_screen01.jpg");}
.c04_img02 {background-image:url("../src/cases/maa/2025-manser-medionis/maa_medionis_branding_screen02.jpg");}

.c05_img01 {background-image:none;}
.c05_img02 {background-image:url("../src/cases/brg/2022-nilsamsee/brg_2022001_nilsamsee_illustration_01.jpg");}
.c05_img03 {background-image:url("../src/cases/brg/2022-nilsamsee/brg_2022001_nilsamsee_illustration_02.jpg");}
.c05_img04 {background-image:url("../src/cases/brg/2022-nilsamsee/brg_2022001_nilsamsee_illustration_03.jpg");}
.c05_img05 {background-image:url("../src/cases/brg/2022-nilsamsee/brg_2022001_nilsamsee_illustration_04.jpg");}
.c05_img06 {background-image:url("../src/cases/brg/2022-nilsamsee/brg_2022_0001_nilsamsee_scribble_003_frühstück_v02.jpg");}

.c06_img01 {background-image:url("../src/cases/med/2024-manesoft/med_manesoft_webdesign_illustrationen_visual_01.jpg");}
.c06_img02 {background-image:url("../src/cases/med/2024-manesoft/med_manesoft_webdesign_illustrationen_visual_02.jpg");}
.c06_img03 {background-image:url("../src/cases/med/2024-manesoft/med_manesoft_webdesign_illustrationen_visual_03.jpg");}
.c06_img04 {background-image:url("../src/cases/med/2024-manesoft/med_manesoft_webdesign_illustrationen_visual_04.jpg");}
.c06_img05 {background-image:url("../src/cases/med/2024-manesoft/med_manesoft_webdesign_illustrationen_visual_05.jpg");}

.c07_img01 {background-image:url("../src/cases/com/coma-ag/com_03_ui_design_startseite.jpg");}
.c07_img02 {background-image:url("../src/cases/com/coma-ag/com_01_wireframe.jpg");}
.c07_img03 {background-image:url("../src/cases/com/coma-ag/com_02_wireframe.jpg");}
.c07_img04 {background-image:url("../src/cases/com/coma-ag/com_04_ui_design_aussschnitt_b.jpg");}
.c07_img05 {background-image:url("../src/cases/com/coma-ag/com_04_ui_design_aussschnitt_c.jpg");}
.c07_img06 {background-image:url("../src/cases/com/coma-ag/com_05_illustration.jpg");}

.c08_img01 {background-image:url("../src/cases/brg/2022-brandgang/brg_edelstoffe_visual_01.jpg");}
.c08_img02 {background-image:url("../src/cases/brg/2022-brandgang/brg_edelstoffe_visual_02.jpg");}

.c09_img01 {background-image:none;}

.c10_img01 {background-image:url("../src/cases/bri/brighteurope-book/bri_wiezerstoertmaneineideologie_mockup_v01.jpg");}
.c10_img02 {background-image:url("../src/cases/bri/brighteurope-book/bri_wiezerstoertmaneineideologie_mockup_v02.jpg");}
.c10_img03 {background-image:url("../src/cases/bri/brighteurope-book/bri_wiezerstoertmaneineideologie_mockup_v03.jpg");}
.c10_img04 {background-image:url("../src/cases/bri/brighteurope-book/bri_wiezerstoertmaneineideologie_mockup_v04.jpg");}

.case_3d .description_wrap {
	width:96%;
	height:auto;
	float:left;
	position:absolute;
	bottom:0px;
	padding:12px 2%;
	background-color:var(--charcoal);
	color:var(--icegrey);
	z-index:8;
}

.case_3d .description_wrap > .case_projecttitle,
.case_3d .description_wrap > .case_customer{
	width:auto;
	float:left;
	margin:0 12px 0 0;
}

.case_3d .description_wrap > label {
	width:auto;
	float:right;
	font-size:0.8em;
	letter-spacing:0.15em;
    text-transform:uppercase;
}

.icon_dd {
	width:11px;
    height:auto;
    float:right;
    margin:-6px 0 0 7px;
	transform:rotate(180deg) translateY(-10px);
}

.case_3d .description_wrap > .label:hover {cursor:pointer;}

.case_3d .description_wrap > .case_description {
	width:100%;
	float:left;
	border-top:1px solid rgba(255,255,255,0.5);
	margin:12px 0 0 0;
	padding:12px 0 0 0;
	display:none;
}

input#descr-001:checked ~ .description_wrap > .case_description,
input#descr-002:checked ~ .description_wrap > .case_description,
input#descr-003:checked ~ .description_wrap > .case_description,
input#descr-004:checked ~ .description_wrap > .case_description,
input#descr-005:checked ~ .description_wrap > .case_description,
input#descr-006:checked ~ .description_wrap > .case_description,
input#descr-007:checked ~ .description_wrap > .case_description,
input#descr-008:checked ~ .description_wrap > .case_description,
input#descr-009:checked ~ .description_wrap > .case_description,
input#descr-010:checked ~ .description_wrap > .case_description {display:block;}

input[name="case_descr_selector"]:checked ~ .description_wrap > label > .icon_dd {transform:rotate(0deg) translateY(0px);}

/* MOBILE STYLES */

@media screen and (min-width:1920px) {
	
	.panel_main {
		width:calc(100% - 620px);
		margin:60px 50px 0px 570px;
	}
	
	.panel_side.left {
		width:420px;
	}
	
	.row .col_04 {
		width:22%;
		float:left;
	}
	
	.case_3d {
		width:100%;
		height:720px;
	}
	
	.case_3d > .frontside{
		width:1200px;
		height:700px;
	}

	.case_3d > .backside {
		width:1200px;
		height:700px;
	}

	.case_3d > .right,
	.case_3d > .left {
		width:40px;
		height:700px;
	}

	.case_3d > .top,
	.case_3d > .bottom {
		width:1200px;
		height:40px;
	}

	.case_3d > .right {transform: translateY(0px) translateX(1180px) translateZ(0px) rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
	.case_3d > .left {transform: translateY(0px) translateX(-20px) translateZ(0px) rotateX(0deg) rotateY(90deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
	.case_3d > .top {transform: translateY(-20px) translateX(0px) translateZ(0px) rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}
	.case_3d > .bottom {transform: translateY(680px) translateX(0px) translateZ(0px) rotateX(90deg) rotateY(0deg) rotateZ(0deg) scaleX(1.0) scaleY(1.0) scaleZ(1.0)}

	
}

@media screen and (max-width:1366px) {
	
	.row {
		margin:40px 0 0 0;
		display:block;
	}

	
	.row .col_04 {
		width:48%;
		float:left;
		margin:25px 2% 0 0;
	}

}

@media screen and (max-width:1220px) {
	
	#root {
		box-shadow:inset 0px 0px 0px 0px var(--royalblue);
	}
	
	#nav {
		width:100%;
		margin:0;
		padding:0;
		position:absolute;
		
		animation:NoAnimation 0s ease;
		-webkit-animation:NoAnimation 0s ease;
		-moz-animation:NoAnimation 0s ease;
		-ms-animation:NoAnimation 0s ease;
		-o-animation:NoAnimation 0s ease;
	}

	#nav .navicon {
		width:14px;
		height:14px;
		top:10px;
		right:10px;
		position:fixed;
		background-color:var(--royalblue);
		box-shadow:rgba(30, 57, 212, 0.2) 0px 0px 0px;
		display:none;
		z-index:20;
		padding:18px;
		border-radius:50%;
	}

	#nav .navicon:hover {transform:scale(0.9); box-shadow: rgba(30, 57, 212, 0.8) 0px 0px 24pt;}

	#nav .navicon img { width:14px; position:absolute;}

	#nav:not(:target) .navicon[title="open-nav"] {display:block;}
	#nav:target .navicon[title="close-nav"] {display:block;}

	#nav:not(:target) .navitem_wrap { display:none;}
	#nav:target .navitem_wrap { display:block;}

	#nav .navitem_wrap {
		width:100%;
		height:100vh;
		position:fixed;
		top:0px;
		left:0px;
		margin:0;
		padding:0;
		text-align:center;
		background-color:var(--charcoal);
		z-index:15;
	}

	#nav .navitem_wrap .navitem {
		font-size:2em;
		width:90%;
		margin:24px 5% 0 5%;
		padding:0px;
		color:var(--icegrey);
	}

	#nav .navitem_wrap .navitem:hover {color:rgba(255,255,255,0.4);}
	
	#root.start > #nav > .navitem_wrap > a[href="index.php"] > .navitem,
	#root.values > #nav > .navitem_wrap > a[href="values.php"] > .navitem,
	#root.services > #nav > .navitem_wrap > a[href="services.php"] > .navitem,
	#root.cases > #nav > .navitem_wrap > a[href="cases.php"] > .navitem,
	#root.contact > #nav > .navitem_wrap > a[href="contact.php"] > .navitem {color:var(--royalblue);}

	.row .col_03,
	.row .col_04 {
		width:100%;
		float:left;
		margin:0 0 30px 0;
	}
	
	.row .col_03 h2,
	.row .col_04 h2 {
		margin-bottom:12px;
	}
	
	.keyvisual_fullscreen {
		background-position: right bottom;
	}
	
	.headline_claim h1 {
		width:100%;
		margin:30px 0% 20px 0%;
		font-size:2.6em;
	}
	
	.panel_main,
	.panel_side.left,
	.panel_side.right{
		width:90%;
		height:auto;
		float:left;
		margin:0px;
		padding:40px 5%;
		position:inherit;
	}
	
	.panel_medium {
		width:100%;
		height:auto;
		min-height:800px;
		position:inherit;
		float:left;
	}
	
	.contact_image {
		width:100%;
		height:800px;
	}

}

@media screen and (max-width:920px) {
	
	.noai_icon {
		bottom: 80px;
	}

}