@font-face {
  font-family: Obvia;
  font-weight: 200;
  src: url(../../styles/fonts/ObviaThin.otf)
}

@font-face {
  font-family: Obvia;
  font-weight: 300;
  src: url(../../styles/fonts/ObviaRegular.otf)
}

@font-face {
  font-family: Obvia;
  font-weight: normal;
  src: url(../../styles/fonts/ObviaRegular.otf)
}

.section-3-5 .mobile{
	display:none;
}
a {
    color: #fff;
    text-decoration: none;
}
a:hover {
    color: #0496d4;
}
.footer-box a {
    color: #2f2f2e;
}
img {
	height:auto;
	width:auto;
	max-width:100%;
}
input[type="submit"] {
    background: transparent;
    border: 1px solid #fff;
    position: absolute;
    bottom: 1.5em;
    right: 3em;
    color: #fff;
    padding: 0.5em 1em;
    font-size: 24px;
    text-transform: uppercase;
    font-family: 'Obvia';
    cursor:pointer;
}
video#arVideoStart {
    max-width: 100%;
    width: 100%;
}
.header {
    position: fixed;
    left: 5.5em;
    top: 0;
    z-index: 5000;
}
.header-logo {
    max-width: 200px;
}
body{
	font-family:Obvia;
	font-size:14px;
	background:#000;
	color:#fff;
	margin: 0;
	max-width: 100%;
    overflow-x: hidden;
}
/* COOKIES */
.cookie-overlay {
	opacity:1;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 50000;
    background: rgb(0 0 0 / 92%);
}
.logo-box {
    border: 1px solid #fff;
    margin-bottom: 1.5em;
}
#menu-0 {
    position: absolute;
    right: 24px;
}
#menu-0 .separator {
 font-weight: 200;
}

.de .tr.first.bigger {
    letter-spacing: 3px;
}
.de .bigger {
    font-size: 1.5em;
    padding-bottom: 0.25em;
}
.de #td-2 {
    font-size: 30px;
    letter-spacing: -2px;
    border-right: 0;
}
#td-3 span {
    display: inline-block;
}
.de #td-3{
	border-left: 1px solid white;
}
a.lang-01.en {
    color: #666;
}
a.lang-02.de {
    color: #666;
}
.start-overlay .cookie-info {border:0;}
.start-overlay .cookie-header {
    border: 0;
    padding: 0;
    margin: 0;
   /* border-top: 1px solid #fff;*/
}
.start-overlay .logo-box {
    position: relative;
    border: 0;
    margin-bottom: 0;
}
   
.cookie-header .cookie-logo {
    width: 200px;
    height: 200px;
    padding-top:0;
}
.start-overlay .cookie-notice {
    position: relative;
    top: 50%;
    margin: 0 auto;
    max-width: 100%;
    width: 1200px;
    text-align: center;
    margin-top: -200px !important;
}
.start-overlay .cookie-header {
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -200px;
    margin-left: -200px;
}
.start-overlay  .cookie-header .cookie-logo {
    width: 400px;
    height: 400px;
    max-width:400px;
    max-width: none;
}
.cookie-notice {
    position: relative;
    top: 3.5em;
    margin: 0 auto;
    max-width: 100%;
    width: 1200px;
    text-align: center;
}

.rotate {
  animation: rotation 1s infinite linear;
}
.cookie-header .cookie-logo {
    width: 150px;
    height: 150px;
}
.cookie-header {
    border: 1px solid #fff;
    padding: 0;
}
.cookie-header h3{
	font-size: 36px;
    text-transform: uppercase;
    font-weight: 200;
}
.cookie-info {
    border: 1px solid #fff;
    border-top:0;
}
.cookie-text {
    font-size: 24px;
    padding: 36px;
    font-weight: 200;
}
.cookie-text a {
    text-decoration: underline;
}
.cookie-buttons {
    font-size: 24px;
    padding: 0 36px 24px;
    box-sizing: border-box;
}
.cookie-logo {
    max-width: 200px;
    margin: 0 auto;
}
.cookie-buttons .btn {
    padding: 0.5em 1.5em;
    display: inline-block;
    border: 1px solid #fff;
    width: 50%;
    float: left;
    box-sizing: border-box;
    cursor: pointer;
}
.header-logo a {
    padding: 1.5em;
    position: absolute;
    width: 66.66%;
    top: 15%;
    height: 50%;
}
.header-navigation {
    margin-top: 0.25em;
}
.section {
    min-height: 100vh;
    /*padding-bottom: 6.5em;*/
    position: relative;
}
.start-image img{width: 100%;}
.nav-box {
    display: inline-block;
    padding: 1em 1.5em;
}
.content {
    position: relative;
    z-index: 150;
}
.content.mail {
    padding: 15% 3.5em;
    text-align: center;
    font-size: 1.6em;
}
.reload-btn {
    width: 100px;
    position: absolute;
    right: 5.5em;
    top: 5.5em;
    cursor: pointer;
    z-index: 5;
    opacity:0;
}
.start-image {
    background: #000;
    z-index: 1500;
    position: relative;
    min-height:66.66vh;
}
.navigation {
    margin: 0 auto;
    width: 100%;
    font-size: 48px;
    text-align: center;
    background: #000;
    min-height: 66.66vh;
    position: relative;
    z-index: 800;
    margin-top:0;
}
.navigation.mobile {
    margin-top: 0;
}
.apple-vision .mobile{
	display:none;
}
#row-1.tr .td#title-1, #row-1.tr .td#title-2, #row-1.tr .td#title-3, #row-1.tr .td#title-4 {
    border-right: 0;
}
#row-0 {
	    display: none;
}
#row-1.tr .td, #row-2.tr .td {
    width: 20%;
    float: left;
    box-sizing: border-box;
    height: 100%;
}
#row-1.tr .td {
    border: 1px solid white;
}
#row-1 {
    border: 1px solid white;
    border-bottom: 0;
    border-top: 0;
}
#row-2 {
    border: 1px solid white;
    border-bottom: 0;
        border-top: 0;
}
#row-3, #row-0 {
    border: 1px solid white;
    border-bottom: 0;
}
#row-4 {
    border: 1px solid white;
    border-bottom: 0;
    border-top: 0;
    margin-bottom: 0.5em;
}
.clear {
    clear: both;
}
#row-3 .td, #row-4 .td {
   /* cursor:pointer;*/
}


#row-01 {
	display:none;
    z-index: 1500;
    bottom: 10%;
    position: absolute;
    cursor: pointer;
    height: 90px;
    top: auto;
    opacity: 0;
}
/*
#row-3 .td:hover, #row-4 .td:hover {
    background: #ffffffcf;
    color: #000;
}*/
#row-01.tr .td {
    width: 20%;
    float: left;
    box-sizing: border-box;
    height: 100%;
}
#row-4.tr .td {
    width: 25%;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 1em 0.5em;
    font-size: 0.5em;
    font-weight: 200;
}
#row-3 span, #row-0 span {
    padding: 1.5em 2.5em;
    display: block;
    font-weight: 200;
}
#row-1.tr .td#title-1, #row-4.tr .td#title-11 {
    border-left: 0;
}
#row-4.tr .td#title-11 {
    border-left: 0;
    border-right: 0;
}
#row-4.tr .td#title-12 {
    border-right: 0;
}
#row-4.tr .td#title-13 {
    border-right: 0;
}
#row-1.tr .td#title-5, #row-4.tr .td#title-14 {
    border-right: 0;
}
#row-2.tr .td {
    padding: 0 1em;
}
.apple-vision {
    width: 90%;
    left: 5%;
}
.overview-box, .nav-header, .customer-box {
    position: relative;
    top: 0;
    width: 1200px;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    left: 50%;
    margin-left: -600px;
    max-width: 1200px;
    box-sizing:border-box;
}
.m0{
	display:block !important;
}
.m1,.m2{
	display:none !important;
}
.customer-box {
    top: 33.33%;
    border: 1px solid white;
    box-sizing: border-box;
}
.customer {
    box-sizing: border-box;
    width:200px;
    padding:10px 25px;
}
.bg-scala-title {
    position: absolute;
    top: -26px;
    font-size: 3.84em;
    line-height: 1;
    right: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
    text-transform: uppercase;
    width: auto;
    text-align: right;
    padding-right: 200px;
    white-space: nowrap;
}
.tr {
    clear: left;
}
span.left {
    /*float: left;*/
}
span.right {
   float: right;
}

.tr.third.bigger span.right {
    float: right;
}
.bg-scala-subtitle {
    position: absolute;
    top: 30px;
    font-size: 2.8em;
    line-height: 1.2;
    right: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
    text-transform: uppercase;
    width: auto;
    text-align: right;
    padding-right: 200px;
    font-weight: 200;
    white-space: nowrap;
}
.nav-box {
    display: inline-block;
    padding: 0.35em 0.5em;
    box-sizing: border-box;
    text-align: center;
}
.nav-menu {
    position: relative;
    z-index: 5;
    padding-top: 36px;
}
.nav-menu-bg {
    position: absolute;
    z-index: 0;
    top: 0;
}
.menu-box {
    padding: 11px 2em;
    font-size: 24px;
    line-height: 1.2;
}
#view-menu {
    top: 0;
    position: absolute;
    width: 450px;
    display: none;
}
#nav-close {
    width: 250px;
    text-align: center;
    left: 25px;
    position: relative;
    top: 24px;
    cursor: pointer;
    height: 50px;
}
.header-nav {
    width: 70px;
    text-align: center;
    left: 30px;
    position: relative;
    top: 5px;
    cursor: pointer;
}
.nav-menu-bg {
    position: absolute;
    top: 0;
    z-index: 0;
}
#phone-mask-2 {
    position: absolute;
    left: 0;
    top: 0;
}
#arVideo3 {
    width: 100%;
    position: absolute;
    z-index: 0;
    opacity: 0;
    height: 100%;
    top: 0;
    transform: rotate(0deg);
}
.bg-scala-line {
    position: relative;
    right: 0em;
    z-index: 50;
    padding: 2em 0;
    background: transparent;
    top: 291px;
    opacity: 1;
    z-index: 1500;
    width: 100%;
}
.section-8 .bg-scala-line{top:0;}
.section-8 .section-box {
    padding-top: 150px;
    top:0;
}
.section.section-8 {
    z-index: 650;
    opacity: 0;
    background: #000;
    min-height: auto;
    height: 75vh;
}

.section.section-9 {
    z-index: 1000;
    position: relative;
}
.footer input[type="text"] {
    width: 100%;
    height: 100%;
    background: none;
    border: 0;
    padding: 0 0.5em;
    box-sizing: border-box;
    line-height: 1.6;
    font-size: 1em;
    color: #fff;
    font-family: 'Obvia';
}
.footer input[type="text"]::placeholder{
	color: #27343b;
}
textarea#msg:focus-visible, .footer input[type="text"]:focus-visible {
    outline-color: #27343b;
}
.footer textarea::placeholder{
	color: #27343b;
}

.contact-us, .footer-line {
    font-size: 2.4em;
    max-width: 1200px;
    margin: 0 auto;
    min-height: 50vh;
    padding-top: 50vh;
}

.contact-us{
	 padding-top: 150px;
}

.footer-line {
    font-size: 24px;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    margin-top: 15em;
    background: #fff;
    color: #2f2f2e;
    padding: 0;
    font-weight: 200;
        min-height: 0;
}
.bottom-left {
    width: 75%;
    float: left;
}
.footer-left {
    float: left;
}
.bottom {
    width: 25%;
        float: right;
}
.section-9 .bg-scala-line {
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
    display: block !important;
}

.fbox .top {
    margin-bottom: 1em;
    padding-bottom: 1em;
    border-bottom: 1px solid #000;
}
.fbox{
	max-width: 1200px;
    margin: 0 auto;
    padding:1.5em;
    box-sizing:border-box;
}
.footer-right {
    float: right;
    padding-left: 1.5em;
}
.footer .bottom a {
    color: #5e9ad3;
    display: inline-block;
}
.footer .input-row {
    display: block;
    width: 100%;
    height: auto;
    line-height: 1.6;
    margin-bottom: 1em;
    position: relative;
}
.footer .contact-icon {
    width: 150px;
    padding: 0;
    box-sizing: border-box;
    display: inline-block;
    position: absolute;
    left: 0;
    margin-left: -150px;
}
.footer .input-row.msg .left, .footer .input-row.msg .right{
	height: 600px;
    top: 0;
    float: left;
}

.footer .left {
    margin-left: 0;
    display: inline-block;
    width: 30%;
    padding: 0.5em 1.5em;
    box-sizing: border-box;
    border: 1px solid #fff;
    text-align: center;
    left: 1em;
    position: relative;
    text-transform: uppercase;
    height: 90px;
    float: left;
}
.footer .right {
    display: inline-block;
    margin-left: 0;
    width: calc(60% + 1em);
    left: 1em;
    position: relative;
    border: 2px solid white;
    margin-left: 0.5em;
    line-height: 1.6;
    height: 90px;
    box-sizing: border-box;
}
.footer .phone .contact-icon {
    padding: 0 1.5em;
    height: 90px;
    top: 50%;
    margin-top: -42px;
    vertical-align: middle;
    margin-left: -150px;
    width: 150px;
    left: 0;
}
.footer textarea#msg {
    max-width: 100%;
    height: 100%;
    background: transparent;
    border: 0;
    font-size: 1em;
    padding: 0.5em 0.5em;
    box-sizing: border-box;
    color: #fff;
    resize: none;
    font-family: 'Obvia';
}
.footer-box {
    line-height: 1.33;
    font-size: 1em;
}
.footer .right span {
    padding: 0.5em;
    line-height: 90px;
}
.bg-scala-line img {
    max-width: 50%;
    margin-left: 50%;
}
.bg-scala {
    background: url(../../styles/img/Skala-raport.png);
    background-repeat-y: repeat;
    width: 7%;
    height: 500%;
    position: absolute;
    right: 0em;
    background-repeat-x: no-repeat;
    background-size: 100%;
    background-position-x: 100%;
    z-index: 1400;
    background-repeat: no-repeat;
    background-repeat: repeat-y;
    /*margin-top: 250vh;*/
    top: 250vh;
}
.bg-scala-container {
    position: relative;
}
.sub-content {
    margin-left: -600px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    left: 50%;
    margin-left: -600px;
    max-width: 1200px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 50;
    border-bottom: 1px solid #fff;
}
.table {
    width: 100%;
}
.table.mobile {display: none;}

.black-bg {
    width: 100%;
    height: 100vh;
    background: #000;
    position: relative;
    top:0;
}

.filler{
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	opacity:0;
	display:none;
}
.filler.fade-anim {
    display: none;
}
.section-2 .sub-section {
    top: auto;
    bottom: 0;
    position: absolute;
}
.sub-section {
    background: transparent;
    position: relative;
    top: -100vh;
    z-index: 10000;
    height: 100vh;
    width: 100%;
}
.gradient {
    position: absolute;
    top: -15%;
    border-bottom: 100vh solid black;
}
.icon-box {
    position: absolute;
    top: 1em;
    max-width: 150px;
    right: -150px;
    display:none;
}
.nav-subtitle {
    display: block;
    position: absolute;
    top: 1.5em;
    text-align: left;
    width: 100%;
    padding-top: 0.5em;
    font-size:0.85em;
    opacity:0;
}
.nav-subtitle ul {
    padding: 0;
}

.nav-subtitle li {
    display: inline-block;
    padding: 0;
    border-right: 3px solid white;
    float: left;
    box-sizing: border-box;
}
.nav-subtitle li:first-child {
  	padding-left:0;
}
.nav-subtitle li:last-child {
    padding-right: 0;
    border-right: 0;
    float: right;
}
.apple-vision{
	position:relative;
	display:block;
}
.apple-box, .c-box {
    text-align: center;
    padding: 6.5em 0;
    
}
.c-headerbox{
	max-width: 800px;
    margin: 0 auto;
    position: relative;
}
.box-header {
    font-size: 6.4em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
}
.box-subtitle {
    font-size: 2.8em;
    text-shadow:1px 1px 2px rgba(0,0,0,0.85);
}

.apple-box .box-header, .apple-box .box-subtitle {
    display: none;
}
.bg-scala-title-line {
    width: 60%;
    border-bottom: 2px solid white;
    right: 0;
    position: absolute;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.85);
    width: 900px;
}
.logo-text {
    position: absolute;
    max-width: 50%;
    margin-left: -450px;
    left: 50%;
    top: 50%;
    margin-top: -86px;
}
.container-video {
    /*height: 400em;*/
    width: 100%;
    display: inline-block;
    opacity: 0;
    height:100%; 
}

.section-4 .container-video{
	height:100vh;
}
.section-5 .container-video{
	height:100vh;
}
.section-6 .container-video{
	height:100vh;
}
.section-7 .container-video{
	height:100vh;
}
.section-3 .sub-section,
.section-4 .sub-section,
.section-5 .sub-section,
.section-6 .sub-section,
.section-7 .sub-section {
    top: auto;
    position: absolute;
    bottom: 0;
}
.section.section-4 {
}
.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 {
    top: 0vh;
    padding-top: 50vh;
    height: 200vh;
}
.section.section-5, .section.section-4 {
    height: 400vh;
}
.section.section-6{
	height: 300vh;
}
.section.section-8 {
    padding-top: 25vh;
    height: auto;
    min-height: 100vh;
}

.section.section-7 {
    height: 300vh;
}
.section.section-9 {
    top: 0;
    padding-top: 25vh;
}
.box-row{
	position:relative;
}
.section.section-8 .box-content {
    max-width: 1200px;
    margin: 0 auto;
}
.section.section-8 .box-row {
    position: relative;
    margin-bottom: 1em;
}
.section.section-8 .service-icon {
    width: 200px;
    display: inline-block;
    padding: 1.5em;
    box-sizing: border-box;
}
.section.section-8  .text-box {
    display: inline-block;
    border: 1px solid;
    padding: 0.5em 1.5em;
    position: absolute;
    font-size: 1.6em;
    width: calc(100% - 200px);
    text-align: center;
    box-sizing:border-box;
}
.section.section-8 h4 {
    text-align: center;
    text-transform: uppercase;
    color: #0496d4;
    margin: 0;
    font-size: 1.75em;
}

.bg-scala-title span.blue {
    color: #0496d4;
}
.section-box {
    position: relative;
    top: 0;
    width: 100%;
    top: 6.5em;
}
.cover-mask {
    width: 50%;
    top: 50%;
    left: 50%;
    opacity:0;
    position: fixed;
    z-index: 10;
}
img.desktop {
    width: 100%;
}
img.mobile {
    width: 100%;
    display:none;
}
.cover-mask img {
    width: 100%;
}
img.mac {
    width: 100%;
}
.container-01 img, .container-02 img, .container-03 img  {
    width: 100%;
}
.container-01 {
    top: 0;
    position: absolute;
    z-index: 50;
    width: 100%;
}
.container-02 {
    top: 0;
    position: absolute;
    z-index: 100;
    opacity:0;
    width: 100%;
}
.container-03 {
    top: 0;
    position: absolute;
    z-index: 150;
    opacity:0;
    width: 100%;
}
.animation-video {
    position: relative;
    transform: scale(0.9);
    margin-top: 5%;
}

.section-6 .animation-video {
    position: relative;
    transform: scale(1.0);
    margin-top: 0;
}
.container-video video, .container-video img.preview-mask-video-vision {
    max-width: 100%;
    height: auto;
    position: relative;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    left: 10%;
    top: 5%;
}
.section.section-6 .container-video video {
    padding: 2.25em;
    box-sizing: border-box;
}
.container-video-frame {
    position: fixed;
    top: 0;
    z-index: 15;
    left: 0;
    opacity: 1;
    width: 80%;
    left: 10%;
    top: 5%;
    min-width:50%;
   /* border: 5px solid black;*/
}
.section-3 .apple-box{
	z-index:400;
	top: 0%;
    left: 50%;
}
#phone1 {
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 0;
    top: 0%;
    z-index:20;
}
.video3d{
	width:100%;
}
img.mac {
    z-index: 50;
    position: relative;
}
.mask {
    -webkit-mask: url(/styles/img/Image20211220153012_mask.png);
    mask-image: url(/styles/img/Image20211220153012_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position-x: 50%;
    -webkit-mask-position-y: 50%;
}
.mask-video-vision {
    -webkit-mask: url(/styles/img/Apple-Vision-Pro-Frame_mask.png);
    mask-image: url(/styles/img/Apple-Vision-Pro-Frame_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size:contain;
    display:block !important;
}
.preview-mask-video-vision {
    -webkit-mask: url(/styles/img/Apple-Vision-Pro-Frame_mask.png);
    mask-image: url(/styles/img/Apple-Vision-Pro-Frame_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size:contain;
    display:block !important;
}
.mask-video-vision-04 {
    -webkit-mask: url(/styles/img/Meta-Quest3-Frame_mask.png);
    mask-image: url(/styles/img/Meta-Quest3-Frame_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size:contain;
    display:block !important;
}
.mask-video-vision-05 {
    -webkit-mask: url(/styles/img/Meta-Quest3-Frame_mask.png);
    mask-image: url(/styles/img/Meta-Quest3-Frame_mask.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: cover;
    display:block !important;
}
.mask-video-vision-06 {
    -webkit-mask: url(/styles/img/iMac-2024_maske.png);
    mask-image: url(/styles/img/iMac-2024_maske.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size:cover;
    display:block !important;
}
.mask-video {
    -webkit-mask: url(/styles/img/Image20211220153012_mask2.png);
    mask-image: url(/styles/img/Image20211220153012_mask2.png);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size:contain;
}
.video-mask-parent {
    overflow: hidden;
    position: absolute;
    display: block;
    width: 1000px;
    height: 600px;
    top: 0;
    left: 0;
    border: 5px solid black;
    padding: 5px;
    box-sizing: border-box;
    opacity:1;
    z-index:40;
    max-width: 100%;
}
.section-4 .c-box {
    z-index: 100;
}
.section.section-1 {z-index: 350;height: 50vh !important;}
.section.section-2 {z-index: 300;height: 300vh;opacity:0;}
.section.section-3 {z-index: 400;opacity: 0;top: 0;}
.section.section-4 {z-index: 450;opacity:0;}
.section.section-5 {z-index: 500;opacity:0;}
.section.section-6 {z-index: 550;opacity:0;}
.section.section-7 {z-index: 600;opacity:0;}
.section.section-8 {z-index: 650;opacity:0;background: #000;}


.section.section-2 .container-video {
    top: 0;
    position: fixed;
    opacity:0;
}

.section.section-8 {
    padding-top: 25vh;
    height: auto;
    min-height: 100vh;
}

.section-6 #td-1 {
    width: 45%;
}
.section-6 #td-2 {
    left:45%;
}
.section-6 #td-3 {
    width: 40%;
}
.section.section-6 .c-box{z-index:50;}
.section-4 .logo-text,
.section-5 .logo-text,
.section-6 .logo-text {
    position: relative;
}
.section-7 .container-video {
    position: relative;
}
.video3d#arVideo2 {
    z-index:10;
    border: 1px solid black;
    box-sizing: border-box;
    max-width:100%;
    position: fixed;
}
.start-box {
    text-align: center;
    padding: 0;
    position: absolute;
    top: 30%;
    left: 50%;
    /* margin: 0 auto; */
    width: auto;
    margin-left: -250px;
    margin-top: -150px;
}
.section-4 .cover-vision img {
    width: 600px;
    max-width: 600px;
    z-index: 50;
}
.section-4{
	/*display:none;*/
}
.section-4 .cover-vision{
	margin-top: -10%;
	z-index: 10;
}
    
span.separator {
    border-right: 1px solid white;
    padding-right: 0.15em;
    margin-right: 0.3em;
}
span.and,span.percent {
    font-family: Verdana;
}
.tr-header, .blue {
    color: #0496d4;
}
.white {
    color: #fff;
}
#td-1 {
    width: 50%;
    float: left;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 0.5em 0;
    height: 100%;
    text-align: left;
    border-bottom: 0;
    border-left: 0;
     border-top: 0;
}
#td-1 .tr {
    padding: 0.5em;
    padding-bottom: 0;
    line-height:1.5;
}
.table {
    width: 100%;
    font-size: 2.4em;
    margin-bottom: 1.5em;
    border: 1px solid white;
}
#td-1 .tr.tr-header {
    border-bottom: 1px solid white;
    padding: 0 0.5em 0.5em;
    line-height: 1;  
}
.tr.first.bigger {
    letter-spacing: 10px;
}
.tr.third.bigger {
    letter-spacing: 5px;
}
#td-1 .tr.tr-header .white {
	font-weight: 200;
}
.tr.fourth.bigger {
    padding-bottom: 0;
}
#td-2 {
    width: 15%;
    float: left;
    border: 1px solid white;
    display: inline-block;
    box-sizing: border-box;
    padding: 0.5em;
    border-left: 0;
    height: 100%;
    border-bottom: 0;
    border-top: 0;
    line-height: 1.8;
    text-align: justify;
    hyphens: none;
    border-right: 0;
    position: absolute;
    left: 50%;
    top: 0;
}
#td-3 {
    width: 35%;
    float: left;
    display: inline-block;
    border: 1px solid white;
    box-sizing: border-box;
    padding: 0.5em;
    border-left: 0;
    height: 100%;
    border-bottom: 0;
    border-top: 0;
    line-height: 1.6;
    border-right: 0;
    border-left: 1px solid white;
    margin-left: 15%;
}
.link-box {
    margin: 0 auto;
    text-align: center;
    left: 50%;
    margin-left: -600px;
    max-width: 1200px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    bottom: -3.5em;
    z-index: 50;
    border-bottom: 0;
    cursor:pointer;
}
.more-info {
    width: calc(100% - 75px);
    display: inline-block;
    text-align: right;
    float: left;
    font-size: 1.6em;
    padding-right: 0.5em;
    box-sizing: border-box;
    cursor:pointer;
}
.more-lines {
    width: 60px;
    padding: 0.5em;
    cursor: pointer;
    text-align: right;
    display: inline-block;
    float: right;
    cursor:pointer;
}
.bigger {
    font-size: 1.6em;
    line-height: 1;
}
img.phone-cover {
    position: absolute;
    left: 0;
    top: 0;
}
.qr-code {
    width: 250px;
    position: absolute;
    position: fixed;
    top: 50%;
    left: 40%;
    margin-left: -125px;
    z-index: 3;
}

.section-separator.s-5, .section.section-separator.s-4{
	display: none;
}

.gradient.mobile {display:none;}
.gradient.desktop {display:block;width:100%;}
	
.more-info, .more-lines{
	display:none;
}

.imprint .content {
    width: calc(100% - 400px - 11em);
    margin: 0 auto;
    padding: 0 1.5em;
    box-sizing: border-box;
    font-size: 21px;
    font-weight: 200;
    padding-top:6.5em;
    line-height: 1.33;
}

.start-overlay{
	display:block;
	width:100%;
	height:100%;
	background:#000;
	position: fixed;
    z-index: 40000;
    top:0;
    left:0;
}

.landscape-overlay{
	display:none;
	width:100%;
	height:100%;
	background:#000;
	position: fixed;
    z-index: 10000;
}
.device-notice {

}
.imprint .button, .cookie-button {
    display: block;
    margin: 1.5em 0;
}
.imprint .back-button a, .imprint .button a,.imprint .cookie-button a  {
    border: 1px solid #fff;
    width: auto;
    padding: 0.5em 1em;
}
.imprint .bg-scala-line {
    top: 6.5em;
}
.imprint .bg-scala {
    top: 0;
    background: none;
    position: relative;
    display: block;
    width: 100%;
}
.imprint .back-button {
    display: block;
    margin:2em 0;
    margin-left: -1em;
}
@media only screen and (max-width: 1600px){
	.cookie-logo {max-width: 150px;}
	.cookie-text,.cookie-buttons {font-size: 21px;}
	.start-image{
		min-height:0;
	}
	.navigation.mobile {
	    margin-top: 0;
	}
	.reload-btn { right: 3.5em;top: 3.5em;}
	
	#row-01 {bottom: -90px;height: 90px;}
	
	.section.section-4, .section.section-5, .section.section-6, .section.section-7 {padding-top: 100vh;}
	.section-4 .sub-section, .section-5 .sub-section, .section-6 .sub-section {top: auto; position: absolute;bottom: -50vh;}
	.bg-scala-line {top: 6.5em;}
	
	.section.section-8 .box-content {max-width: 1000px;margin: 0 auto;}
	.section.section-8 .text-box {padding: 0.25em 0.5em;font-size: 1.6em;}
	.section.section-8 .service-icon {width: 150px;padding: 1em;}
	.section.section-8 .box-content  p { margin: 0.5em 0;}
	.section.section-8 .service-icon {width: 120px;height: 120px; display: inline-block;padding: 0.5em;box-sizing: border-box; text-align: right;}
	.section.section-8 .text-box {width: calc(100% - 120px);}
}
@media only screen and (max-width: 1400px){
	.de .tr.first.bigger {
	    letter-spacing: 5px;
	}
	.cookie-logo {
	    max-width: 120px;
	}
	.de .bigger {
	    font-size: 1.1em;
	    letter-spacing: 2px;
	    padding-bottom: 0.5em;
	}
	.de #td-2 {font-size: 1em;}
	
	.footer .phone .contact-icon, .footer .contact-icon {
	    display: none;
	}
}
@media only screen and (max-width: 1350px){

	.start-overlay .cookie-notice {position: relative;top: 0; margin: 0 auto; max-width: 100%; width: 1200px;text-align: center;margin-top: 0 !important;}
	.start-overlay .logo-box {height: 100vh;}
	.start-overlay .cookie-logo.py-logo {top: 50%;left: 50%;position: absolute;margin-left: -75px; margin-top: -120px;}
	.cookie-notice {width: 1000px;top: 3.5em;}
	.section.section-8 {
	    padding-top: 25vh;
	    height: 100vh;
	    box-sizing: border-box;
	}
	.section-4 .sub-section, .section-5 .sub-section, .section-6 .sub-section {bottom: 0;}
	.section.section-4, .section.section-5, .section.section-6, .section.section-7 {padding-top: 50vh;}
	
	#row-01 {
	    bottom: 20px;
	    height: 100px;
	}
	.bg-scala-line{top: 13em;}
	
	.bg-scala-title, .bg-scala-subtitle {padding-right: 120px;}
	
	.overview-box, .nav-header, .customer-box {
	    margin-left: -500px;
	    max-width: 1000px;
	    font-size: 36px;
	}
	
	.sub-content {
	    margin-left: -500px;
	    max-width: 1000px;;
    }
    .table {font-size: 1.8em;}
    
    .contact-us, .footer-line {font-size: 2.4em; max-width: 800px;margin: 0 auto;height: 100%;padding-top: 33.33vh;}
    .section-8 .section-box {padding-top: 33.33vh;}
    .fbox { max-width: 800px;font-size: 18px;padding: 1.5em 0;}
    .section.section-8 {height: 100%;padding-top: 0;}
    .section-9 .bg-scala-line, .section-8 .bg-scala-line {top: 10em !important;}
    .section.section-8 {padding-top: 3.5em;}
    .section.section-9 {padding-top: 3.5em;}
    .contact-us input[type="submit"] {right: 1.5em;border-radius: 0;}
    .section-9 .footer-line {margin: 0;max-width: 100%;padding-top:0;}
    
    .cookie-header h3 {font-size: 30px;}
	.cookie-notice {width: 600px;top: 3.5em;}
	.cookie-logo {max-width: 150px;margin: 0 auto;}
	
	.footer .left {font-size: 24px;line-height: 66px;}
	.footer .right span {font-size: 24px;}
	.de .bigger {
	    font-size: 1.33em;
	    letter-spacing: 0;
	    padding-bottom: 0.25em;
	}
	.de .tr.first.bigger {
	    letter-spacing: 7px;
	}
	.de .tr.second.bigger, .de .tr.third.bigger {
	    letter-spacing: 7px;
	}
}
@media only screen and (max-width: 1200px){
	.start-box {top: 3.5em; margin-top: 0;}
	.de .tr.second.bigger, .de .tr.third.bigger {
	    letter-spacing: 5px;
	}
	
}
@media only screen and (max-width: 1024px){
	.de .tr.fourth.bigger {letter-spacing: 2px;}
	.mask-video-vision-04, video.mask-video-vision-05#arVideo5{mask-size: contain !important;}
	.start-box {
   
	    z-index: 50;
	}
	.cookie-notice {
	    width: 800px;
	    top: 3.5em;
	}
	.cookie-text, .cookie-buttons {
	    font-size: 16px;
	}
	.contact-us, .footer-line {font-size: 1.6em;max-width: 800px;margin: 0 auto;height: 100%;padding-top: 35vh;}
	.footer .left {padding: 1.25em 1.5em;left: 0;}
	.footer .right {width: calc(70% - 1em); left: 0;margin-left: 1em;}
	.overview-box, .nav-header, .customer-box { margin-left: -400px; max-width: 800px;font-size: 24px;}
	.footer .phone .contact-icon {padding: 0; height: 84px;top: 50%; margin-top: -42px;vertical-align: middle; margin-left: -75px;width: 50px;left: 0;display:block;}
	.footer .contact-icon {width: 75px;padding: 0;left: 0;margin-left: -90px;top: 1em;display:block;}
	.start-box {top: 15%;left: 0;width: auto;right: 0;margin-left: 0;margin: 0 auto;margin-top: 0;}
	.nav-box {padding: 0.66em 0.5em;}

	.nav-subtitle {top: 2.5em;}
	
	.header-logo {max-width: 120px;}
	.header-nav {width: 50px; left: 12px;}
	
	#view-menu {width: 350px;}
	.nav-menu {position: relative;z-index: 5;padding-top: 10px;}
	.menu-box { padding: 15px 2em;font-size: 18px;line-height: 1;}
	
	.start-box { top: 15%;left: 0;width: 800px;margin: 0 auto; margin-top: 0;text-align: right;font-size: 12px;right: 0;}
	.logo-text {margin-top: -55px;}
	.bg-scala { background-size: 10%;}
	
	
	.box-header {font-size: 4.8em;}
	.box-subtitle {font-size: 1.8em;}
	.reload-btn {width: 50px;right: 1.5em; top: 1.5em;}
	.start-box {top: 7.5em;}
	
	.nav-menu { padding-top: 25px; }
	.menu-box {padding: 11px 2em;font-size: 18px; line-height: 1;}
	
	.navigation {min-height: 0;}
	
	.sub-content {
    	margin-left: -400px;
    	max-width: 800px;
    }
    
    .table {font-size: 1.33em;}
    .table.mobile {font-size: 1.6em;}
    
    .bg-scala-line {top: 6.5em;}
    .start-overlay .cookie-notice {
	    position: relative;
	    top: 0;
	    margin: 0 auto;
	    max-width: 100%;
	    width: 1200px;
	    text-align: center;
	    margin-top: 0px !important;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	.start-box {
	    z-index: 500;
	}
	.bg-scala-title, .bg-scala-subtitle {
	    padding-right: 50px;
	}
	.start-box {
	    margin-right: 3.5em;
	    z-index: 50;
	}
	.start-overlay .cookie-notice {
	    position: relative;
	    top: 0;
	    margin: 0 auto;
	    max-width: 100%;
	    width: 1200px;
	    text-align: center;
	    margin-top: 0 !important;
	}
	.section.section-6 .container-video video {
    	padding: 0;
    }
	.section-7 img.desktop {
	   display:none;
	}
	.section-7 img.mobile {
	    width: 100%;
	    display:block;
	}

	.filler.fade-anim {
	    display: block;
	}
	.bg-scala-title-line {border-bottom: 1px solid white;}
	.section.section-1 {margin-top: 5.5em;}

    .sub-content, .link-box {
    	margin-left: -400px;
    	max-width: 800px;
    }
    .gradient { top: -33.33%;}
    .overview-box, .nav-header, .customer-box {
	    margin-left: -400px;
	    max-width: 800px;
	    font-size: 18px;
	}
	.customer{width:100px;}
	
	.start-box {margin-right: 3.5em;}
	.header {left: 3.5em;}
	
	.start-image {min-height: 0;}
	
	.bg-scala {
	    background-image: url(../../styles/img/Skala-raport-mobile.png);
	    background-repeat-y: repeat;
	    background-repeat-x: no-repeat;
	    background-size: 100%;
	    background-position-x: 100%;
	    background-repeat: no-repeat;
	    background-repeat: repeat-y;
	}
	.table.mobile {
	    display: block;
	}
	.table {
	    display: none;
	}
	
	#m-td-1 {
	    border-bottom: 1px solid #fff;
	}
	#m-td-3 {
	    border-bottom: 1px solid #fff;
	    padding: 0;
	    position: relative;
	}
	#m-td-3 .td.blue.bigger {
	    width: 40%;
	    float: left;
	    margin-left: 0;
	    padding: 0.25em;
	    box-sizing: border-box;
	    border-right: 1px solid #fff;
	}
	#m-td-1 .td.tr-header {
	    padding: 0.5em 0.25em;
	    border-right: 1px solid #fff;
	}
	#m-td-4 {
	    font-weight: 200;
	    line-height: 2;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left:80%;
	    float:none;
	}
	.gradient {/*top: 0;*/left:0;}
	
	#m-td-3 .td.bigger {
	    font-weight: 300;
	}
	#m-td-3 span.white {
	    position: absolute;
	    bottom: 0;
	    text-align: center;
	    left: 0;
	    right: 0;
	    margin-left: 80%;
	    bottom: 0.5em;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left: 80%;
	    float: none;
	    padding: 0.5em 0.5em;
	    box-sizing: border-box;
	    text-align: center;
	    font-weight: 200;
	    /* position: relative; */
	    height: 100%;
	}
	.table {display: none;}
	.table.mobile {
		display: block;
	}
	.sub-content {
	    margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: 100%;
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 1px solid #fff;
	    padding: 0 50px;
	}
	.table.mobile {
	    display: block;
	    background: #000;
	}
	.table.mobile .tr {
	    text-align: left;
	    padding: 5px 24px;
	    line-height: 2;
	}
	.link-box {
    	margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: calc(100% - 100px);
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 0;
	    cursor: pointer;
	    box-sizing: border-box;
	    padding: 0 100px;
	    border-top: 1px solid;
	    padding-top: 0.25em;
	    margin: 0 auto;
	}
     .sub-content {
	    border-bottom: 0;
	}
	
	#m-td-1 .td.tr-header {
	    width: 66.66%;
	    float: left;
	    margin-left: 0;
	    padding: 0.5em;
	    border-right: 1px solid #fff;
	     text-align: left;
	}
	#m-td-1 { border-bottom: 1px solid #fff;padding: 0;}
	#m-td-1 .td {
	    margin-left: 66.66%;
	    padding: 0.5em;
	    text-align: center;
	}
	#m-td-1 .td{
	    margin-left: 66.66%;
	}
	
	.navigation {
	    min-height: 50vh;
	}
	.gradient { top: -50vh;}
	.filler {
	    display: block;
	}
	.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 {top: 25lvh;padding-top: 0;height: 400vh;}
	.section.section-8 { top: 0;height: auto;min-height: 0;}
	.section-7 .filler {
	    margin-top: 0 !important;
	}
	.navigation { z-index: 300;}
}
@media only screen and (max-width: 768px){
	.bg-scala-title {top: -16px;font-size: 2.8em;}
	.start-box {
	    z-index: 500;
	}
	.bg-scala-title, .bg-scala-subtitle {
	    padding-right: 50px;
	}
	.start-box {
	    margin-right: 3.5em;
	    z-index: 50;
	}
	.start-overlay .cookie-notice {
	    position: relative;
	    top: 0%;
	    margin: 0 auto;
	    max-width: 100%;
	    width: 1200px;
	    text-align: center;
	    margin-top: 0px !important;
	}
	.section.section-6 .container-video video {
    	padding: 0;
    }
	.section-7 img.desktop {
	   display:none;
	}
	.section-7 img.mobile {
	    width: 100%;
	    display:block;
	}

	.filler.fade-anim {
	    display: block;
	}
	.bg-scala-title-line {border-bottom: 1px solid white;}
	.section.section-1 {margin-top: 5.5em;}

    .sub-content, .link-box {
    	margin-left: -400px;
    	max-width: 800px;
    }
    .gradient { top: -33.33%;}
    .overview-box, .nav-header, .customer-box {
	    margin-left: -400px;
	    max-width: 800px;
	    font-size: 18px;
	}
	.customer{width:100px;}
	
	.start-box {margin-right: 3.5em;}
	.header {left: 3.5em;}
	
	.start-image {min-height: 0;}
	
	.bg-scala {
	    background-image: url(../../styles/img/Skala-raport-mobile.png);
	    background-repeat-y: repeat;
	    background-repeat-x: no-repeat;
	    background-size: 100%;
	    background-position-x: 100%;
	    background-repeat: no-repeat;
	    background-repeat: repeat-y;
	}
	.table.mobile {
	    display: block;
	}
	.table {
	    display: none;
	}
	
	#m-td-1 {
	    border-bottom: 1px solid #fff;
	}
	#m-td-3 {
	    border-bottom: 1px solid #fff;
	    padding: 0;
	    position: relative;
	}
	#m-td-3 .td.blue.bigger {
	    width: 40%;
	    float: left;
	    margin-left: 0;
	    padding: 0.25em;
	    box-sizing: border-box;
	    border-right: 1px solid #fff;
	}
	#m-td-1 .td.tr-header {
	    padding: 0.5em 0.25em;
	    border-right: 1px solid #fff;
	}
	#m-td-4 {
	    font-weight: 200;
	    line-height: 2;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left:80%;
	    float:none;
	}
	.gradient {/*top: 0;*/left:0;}
	
	#m-td-3 .td.bigger {
	    font-weight: 300;
	}
	#m-td-3 span.white {
	    position: absolute;
	    bottom: 0;
	    text-align: center;
	    left: 0;
	    right: 0;
	    margin-left: 80%;
	    bottom: 0.5em;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left: 80%;
	    float: none;
	    padding: 0.5em 0.5em;
	    box-sizing: border-box;
	    text-align: center;
	    font-weight: 200;
	    /* position: relative; */
	    height: 100%;
	}
	.table {display: none;}
	.table.mobile {
		display: block;
	}
	.sub-content {
	    margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: 100%;
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 1px solid #fff;
	    padding: 0 50px;
	}
	.table.mobile {
	    display: block;
	    background: #000;
	}
	.table.mobile .tr {
	    text-align: left;
	    padding: 5px 24px;
	    line-height: 2;
	}
	.link-box {
    	margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: calc(100% - 100px);
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 0;
	    cursor: pointer;
	    box-sizing: border-box;
	    padding: 0 100px;
	    border-top: 1px solid;
	    padding-top: 0.25em;
	    margin: 0 auto;
	}
     .sub-content {
	    border-bottom: 0;
	}
	
	#m-td-1 .td.tr-header {
	    width: 66.66%;
	    float: left;
	    margin-left: 0;
	    padding: 0.5em;
	    border-right: 1px solid #fff;
	     text-align: left;
	}
	#m-td-1 { border-bottom: 1px solid #fff;padding: 0;}
	#m-td-1 .td {
	    margin-left: 66.66%;
	    padding: 0.5em;
	    text-align: center;
	}
	#m-td-1 .td{
	    margin-left: 66.66%;
	}
	
	.navigation {
	    min-height: 50vh;
	}
	.gradient { top: -50vh;}
	.filler {
	    display: block;
	}
	.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 {top: 25lvh;padding-top: 25lvh;height: 400vh;}
	.section.section-8 { top: 0;height: auto;min-height: 0;}
	.section-7 .filler {
	    margin-top: 0 !important;
	}
	.navigation { z-index: 300;}
}
@media only screen and (max-width: 820px){
	.start-overlay .cookie-notice {
    	position: relative;
	    top: 0%;
	    margin: 0 auto;
	    max-width: 100%;
	    width: 1200px;
	    text-align: center;
	    padding: 0;
	    height: 100%;
	    margin-top: 0px !important;
	}
	.start-overlay .cookie-logo.py-logo {
	    top: 50%;
	    left: 50%;
	    position: absolute;
	    margin-left: -50px;
	    margin-top: -80px;
	}
	.section.section-6 .container-video video {
    padding: 0;
    }
	.cookie-header {
	    border: 1px solid #fff;
	    padding: 0;
	    padding: 0 24px;
	}
	.cookie-buttons {
	    font-size: 21px;
	    padding: 0 21px 21px;
	    box-sizing: border-box;
	}
	.cookie-buttons .btn {
	    padding: 0.5em 1.5em;
	    display: inline-block;
	    border: 1px solid #fff;
	    width: 100%;
	    float: none;
	    box-sizing: border-box;
	    cursor: pointer;
	}
	.cookie-text {
	    font-size: 16px;
	    padding: 21px;
	    font-weight: 200;
	}
	.cookie-notice {
	    top: 0;
	    max-width: 100%;
	    width: 100%;
	    margin-top: 0 !important;
	    padding: 3.5em;
	    box-sizing: border-box;
	}
	.cookie-logo {
	    max-width: 100px;
	}
	.cookie-header h3 {
	    font-size: 24px;
	}
	
	.section-7 img.desktop {
	   display:none;
	}
	.section-7 img.mobile {
	    width: 100%;
	    display:block;
	}
	
	.overview-box, .nav-header, .customer-box {
	    margin-left: -300px;
	    max-width: 600px;
	    font-size: 18px;
	}
	.customer{width:100px;}
	
	.start-box {margin-right: 3.5em;}
	.header {left: 3.5em;}

	.start-image {min-height: 0;}
	
	.start-box {
	    margin-right: 3.5em;
	    z-index: 500;
	}
}

@media only screen and (max-width: 640px){
	.overview-box, .nav-header, .customer-box {
	    margin-left: -250px;
	    max-width: 500px;
	    font-size: 16px;
	}

	video#arVideoStart {width: 100%;max-width: 100%;}
	.start-box {z-index: 50;}
	.reload-btn {right: 3em;}
	.bg-scala-title-line {border-bottom: 1px solid white;}
}

@media only screen and (max-width: 480px){
	.gradient {
    	border-bottom: 200lvh solid #000 !important;
	}
	.container-video-frame{overflow: hidden;}
	.section.section-2 .container-video {}
	.animation-video {transform: scale(1.0);}
	.container-video {display: block;}
	
	.container-video-frame,.container-video video, 
	.container-video img.preview-mask-video-vision {overflow: hidden;}
	.content {overflow: hidden;}
	.section.section-7 {height: 300lvh;}
	.filler.fade-anim { display: block;}
	
	.apple-vision .mobile{display:block;}
	.apple-vision .desktop{display:none;}
	.animation-video {position: relative;transform: scale(1.0);margin-top: 0;}

	.navigation.mobile {background: transparent;}
	
	.overview-box, .nav-header, .customer-box {margin-left: -210px;max-width: 420px;font-size: 13px;}
	
	.header {left: 1.5em;}
	.logo-text {margin-top: -25px;}
	.apple-box, .c-box {font-size: 8px;}
	#row-1{float:left;max-width:210px;}
	
	#row-2 {
	    margin-left: 0;
	    border-left: 0;
	    border-top: 1px solid white;
	    max-width:210px;
	}
	#row-1.tr .td#title-5{
		border-right: 0;border-bottom: 0;
	}
	#row-1, #row-2{
		width: 210px;
	}
	#row-2.tr .td{
		padding:0 3.5em;
	}
	#row-1.tr .td {border-left: 0;border-right:0; }
	#row-1.tr .td, #row-2.tr .td {
	    width: 100%;
	    float: none;
	    box-sizing: border-box;
	    height: 100px;
	    padding: 0 1.5em;
	}
	#row-2.tr .td{
		border-bottom:1px solid white;
	}
	#row-2.tr .td#icon-5{
		border-bottom:0;
	}
	#row-4.tr .td#title-12{
		border-right:0;
	}
	#row-4.tr .td#title-13{
		border-left:0;
	}
	#row-2 .img-box img {
	    height: 100px;
	    width: 100px;
	}
	#row-1.tr .td {
	    font-size: 2.1em;
	    line-height: 100px;
	}
	#row-4.tr .td {
	    width: 50%;
	    float: left;
	    border: 1px solid white;
	    box-sizing: border-box;
	    padding: 1em 0.5em;
	    font-size: 1em;
	    font-weight: 200;
	}
	#row-3 {
	    border: 1px solid white;
	    border-bottom: 0;
	    display: none;
	}
	#row-0 span {
	    padding: 0.5em 0.5em;
	    display: block;
	    font-weight: 200;
	    font-size: 30px;
	    text-align: left;
	    line-height: 1.5;
	}
	#row-0 {
	    display: block;
	}
	.navigation{
		padding-bottom:1.5em;
	}
	.customer {
	    width: 140px;
	}
	#row-4 {
	    margin-bottom: 2.5em;
	}
	.header-logo {
	    max-width: 150px;
	}
	.header {
	    left: 30px;
	}
	#row-1, #row-2 {
	    width: 50%;
	}
	#row-1 {
	    float: left;
	    max-width: 50%;
	}
	#row-2 {
	    border-left: 0;
	    border-top: 1px solid white;
	    max-width: 50%;
	    margin-left: 50%;
	}
	.overview-box, .nav-header, .customer-box {
	    margin-left: 0;
	    max-width: 100%;
	    font-size: 13px;
	    left: 0;
	    padding: 0;
	    box-sizing: border-box;
	}
	.header {
	    left: 24px;
	}
	.navigation {
    	padding: 0 0.5em;
    	box-sizing:border-box;
    	padding-bottom: 1.5em;
	}
	.m0{
		display:none !important;
	}
	.m1,.m2{
		display:block !important;
	}
	
	#row-1.tr .td#title-1, 
	#row-1.tr .td#title-2,
	#row-1.tr .td#title-3, 
	#row-1.tr .td#title-4,
	#row-4.tr .td#title-11,
	#row-4.tr .td#title-12 {
    	border-bottom: 0;
	}
	.customer-box.m2 {
	    border-top: 0;
	}
	#row-4.tr .td#title-11, #row-4.tr .td#title-13 {
	    border-left: 0;
	    border-right: 1px solid white;
	}
	#row-4.tr .td#title-12, #row-4.tr .td#title-14 {
	    border-left: 0;
	    border-right: 0;
	}
	.start-box {top: 8.5em;}
	.qr-code {
	    width: 150px;
	    position: absolute;
	    position: fixed;
	    top: 33.33%;
	    left: 50%;
	    margin-left: -125px;
	    z-index: 3;
	}

	.video-mask-parent {border-bottom: 100px solid;}
	
	.bg-scala{margin-top:200lvh;}
	.bg-scala {background-size: 10%;}
	
	#row-2 {
	    border-left: 0;
	    border-top: 1px solid white;
	    max-width: 50%;
	    margin-left: 50%;
	    position: absolute;
    }
    .bg-scala-title {
	    position: absolute;
	    top: -80px;
	    line-height: 1;
	    right: 0;
	    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
	    text-transform: uppercase;
	    width: auto;
	    text-align: right;
	    padding-right: 36px;
	    white-space: nowrap;
	    text-wrap: pretty;
	}
	.bg-scala-subtitle {
	    position: absolute;
	    top: 30px; 
	    line-height: 1.2;
	    right: 0;
	    text-shadow: 1px 1px 2px rgba(0,0,0,0.85);
	    text-transform: uppercase;
	    width: 400px;
	    text-align: right;
	    padding-right: 36px;
	    font-weight: 200;
	    white-space: nowrap;
	    text-wrap: pretty;
	}
	#m-td-1 {
	    border-bottom: 1px solid #fff;
	}
	#m-td-3 {
	    border-bottom: 1px solid #fff;
	    padding: 0;
	    position: relative;
	}
	.td.blue.bigger {
	    width: 40%;
	    float: left;
	    margin-left: 0;
	    padding: 10px 24px;
	    box-sizing: border-box;
	    border-right: 1px solid #fff;
	}
	#m-td-1 .td.tr-header {
	    padding: 0.5em 0.25em;
	    border-right: 1px solid #fff;
	}
	#m-td-4 {
	    font-weight: 200;
	    line-height: 2;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left:80%;
	    float:none;
	}
	.bg-scala {
	    background: url(../../styles/img/Skala-raport-mobile.png);
	    background-size: 100%;
	    width:3.5em;
	}
	.gradient {/*top: 0;*/left:0;}
	
	#m-td-3 .td.bigger {
	    font-weight: 300;
	}
	#m-td-3 span.white {
	    position: absolute;
	    bottom: 0;
	    text-align: center;
	    left: 0;
	    right: 0;
	    margin-left: 80%;
	    bottom: 16px;
	}
	#m-td-3 .td {
	    width: 20%;
	    margin-left: 80%;
	    float: none;
	    padding: 0.5em 0.5em;
	    box-sizing: border-box;
	    text-align: center;
	    font-weight: 200;
	    /* position: relative; */
	    height: 100%;
	}
	.table {display: none;}
	.table.mobile {
		display: block;
	}
	.sub-content {
	    margin-left: -600px;
	    max-width: 1200px;
	    margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: 100%;
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 1px solid #fff;
	        padding: 0 24px;
	}
	.table.mobile {
	    display: block;
	    background: #000;
	}
	.table.mobile .tr {
	    text-align: left;
	    padding: 10px 24px;
	    line-height: 2;
	}
	.link-box {
    	margin: 0 auto;
	    text-align: center;
	    left: 0;
	    margin-left: 0;
	    max-width: 100%;
	    box-sizing: border-box;
	    position: relative;
	    width: calc(100% - 48px);
	    bottom: 0;
	    z-index: 50;
	    border-bottom: 0;
	    cursor: pointer;
	    box-sizing: border-box;
	    padding: 0 48px;
	    border-top: 1px solid;
	    padding-top: 0.25em;
	    margin: 0 auto;
	}
     .sub-content {
	    border-bottom: 0;
	}
	
	#m-td-1 .td.tr-header {
	    width: 66.66%;
	    float: left;
	    margin-left: 0;
	    padding: 10px 24px;
	    border-right: 1px solid #fff;
	    text-align: left;
	    box-sizing: border-box;
	    font-size: 20px;
	    font-weight: normal;
	    line-height: 26.88px;
	}
	#m-td-1 { border-bottom: 1px solid #fff;padding: 0;}
	#m-td-1 .td {
	    margin-left: 66.66%;
	    padding: 0.5em;
	    text-align: center;
	    line-height:1.2;
	}
	#m-td-3 .td.blue.bigger {
	    width: 40%;
	    float: left;
	    margin-left: 0;
	     padding: 10px 24px;
	    box-sizing: border-box;
	    border-right: 1px solid #fff;
	    line-height: 44.8px;
	    text-align: justify;
    	text-align-last: justify;
	}
	#m-td-1 .td {
	    margin-left: 66.66%;
	    padding: 10px 24px;
	    text-align: center;
	    line-height: 26.88px;
	    font-weight: lighter;
	}
	.td.blue.bigger {
	    width: 40%;
	    float: left;
	    margin-left: 0;
	    padding: 10px 24px;
	    box-sizing: border-box;
	    border-right: 1px solid #fff;
	    font-size: 30px;
	    line-height: 44.8px;
	}
	#m-td-3 {
	    border-bottom: 1px solid #fff;
	    padding: 0;
	    position: relative;
	    line-height: 26.88px;
	}
	.more-lines {
	    position: absolute;
	}
	.more-info {float: none;}
	.gradient {border-bottom: 200lvh solid black;}
	.bigger {font-size: 1.5em;}
	.gradient.mobile {display:block;}
	.gradient.desktop {display:none;}

	.gradient.mobile {
	    top: -75lvh;
	    left: 0;
	    height: 100lvh;
	    width: 100%;
	}
	
	.bg-scala-line {top: 4.5em;}
	
	.bg-scala-title { font-size: 20px; top:5px;}
	.bg-scala-subtitle {font-size: 20px;}
	
	.table.mobile {font-size: 20px;}
	#m-td-1 .td.tr-header {font-size: 20px;}
	
	.section-9 .bg-scala-line, .section-8 .bg-scala-line {top: 0 !important;}
	.section.section-8 {height: 100%;padding-top: 0;}
	.section-8 .section-box { padding-top: 0;height: 100%; box-sizing: border-box;}
	.section.section-9 {top: 0; min-height: 0;}
	.contact-us, .footer-line {font-size: 1.6em; max-width: 800px; margin: 0 auto; height: 100%;padding-top: 0;background: #000;}
	
	.section-9 .footer-line {margin: 0;max-width: 100%;padding-top: 0;background: #fff;padding: 0 24px;}
	.bg-scala {margin-top: 0;}
	
	.bottom-left {width: 100%; float: none;margin-bottom: 0.5em;}
	.bottom {width: 100%;float: none;}
	
	.section.section-2{height:200lvh;}
	.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 { top: 0lvh;padding-top: 0;}
	.section.section-3{height:200lvh;}
	.section.section-4, .section.section-5, .section.section-6{height:300lvh;}
	.bg-scala-title { white-space: nowrap;text-wrap: nowrap;}
	
	.footer .left {padding: 1.25em 1.5em;left: 0;width: 100%;float: none;}
	.footer .right { width: 100%;left: 0;margin-left: 0;}
	
	.contact-us, .footer-line {padding: 0 24px;}
	.footer .contact-icon {width: 100px; padding: 0;left: 50%;top: 0;position: relative;margin: 0 auto; text-align: center;margin-left: -50px;}
	.footer .input-row.msg .left{height:100%;}
	.footer .phone .contact-icon {padding: 0;top: 50%;margin-top: 0; vertical-align: middle;width: 50px;left: 50%; margin-left: -25px;margin-bottom: 1em;margin-top: 3.5em;}
	
	.section-9 .bg-scala-line, .section-8 .bg-scala-line {top: -50px !important;}
	
	.section.section-8 .service-icon {
	    width: 120px;
	    height: 120px;
	    display: block;
	    padding: 0.5em;
	    box-sizing: border-box;
	    text-align: right;
	    float: none;
	    text-align: center;
	    margin: 0 auto;
	}
	.section.section-8 .text-box {
	    width: 100%;
	    float: none;
	    height: 100%;
	    display: block;
	    position: relative;
	}
	.section.section-8 .box-content {
	    max-width: 1000px;
	    margin: 0 auto;
	    padding: 0 24px;
	}
	.section-8 .section-box, .footer {
	    padding-top: 20lvh;
	}
	.section-9 .bg-scala-line, .section-8 .bg-scala-line {
	    top: 6.5em !important;
	}
	.section.section-8 {margin-top: -25lvh;}
	.section.section-8 h4 { font-size: 18px;}
	.section.section-8 .box-content p {margin: 0.5em 0;font-weight: 200;font-size: 18px;}
	
	.imprint .back-button {
	    margin-left: -24px;
	}
	.imprint .content {
	    width: 100%;
	    margin: 0 auto;
	    padding: 0 48px;
	    box-sizing: border-box;
	    font-size: 21px;
	    font-weight: 200;
	    padding-top: 6.5em;
	}
	
	.contact-us, .footer-line {background: #000;font-size:18px;}
	.footer .left{height: auto;}
	.footer .right {
	    height: 75px;
	}
	.footer .input-row.msg .left {
	    height: 100%;
	    margin-bottom: 1em;
	}
	
	.filler {
	    display: block;
	}
	.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 { top: 0;padding-top: 25lvh;}
	.footer-line {background: #fff;}
	
	.imprint .bg-scala { margin-top: 0;}
	
	.section.section-8 {margin-top: -10lvh;padding-top: 0lvh;}
}

@media only screen and (max-width: 420px){
	.customer {
	    width: 120px;
	}
	#row-0 span {font-size: 24px;}
	.overview-box, .nav-header, .customer-box {
	    font-size: 11px;
	}

	.header {
	    left: 2em;
	}
	video#arVideoStart {
    	
	}
	.box-header {
	    font-size: 4.2em;
	}
	.box-subtitle {
	    font-size: 2.1em;
	}
	.header {
	    left: 1em;
	}
	.reload-btn {
	    right: 1.5em;
	}
	.start-box {
    	margin-right: 0;
    	right: 2em;
    	font-size:10px;
	}
	.header-logo {
	    max-width: 100px;
	}
	
	.header-nav {
	    width: 40px;
	    left: 12px;
	}
	
	#row-1.tr .td {font-size: 1.8em;}
	#view-menu {width: 392px;}
	.menu-box {font-size: 24px;padding: 15px 1em;}
	
	.table {font-size: 1.6em;}
	.nav-menu {
	    padding-top: 32px;
	}
	.menu-box {
	    font-size: 18px;
	    padding: 13px 1em;
	}
	.bg-scala-line {top: 3.5em;}
	
	.table.mobile {font-size: 18px;}
	#m-td-1 .td.tr-header {font-size: 18px;}
	.bg-scala-title { font-size: 18px; top:9px;}
	.bg-scala-subtitle {font-size: 18px;}

	.section.section-3, .section.section-4, .section.section-5, .section.section-6, .section.section-7, .section.section-8 {top: 0;padding-top: 25lvh;}
	.bg-scala { margin-top: -25lvh;}
	.section.section-8{top:-25lvh;padding-top:0;}
	.section.section-9{top:0;padding-top:0;margin-top:-25lvh;}
	.section.section-8 .text-box {padding: 1em 0.5em 0.5em;}
	.footer .right {border: 1px solid white;border-top: 0;}
	.footer .input-row.msg .left {height: 100%;margin-bottom: 0;}
	.footer-line {background: #fff;}
	.input-row.phone {
	    margin-bottom: 1.5em;
	}
}
@media only screen and (max-width: 414px){
	.section.section-8 {
	    margin-top: 15lvh;
	    top: -10lvh;
	}
	#view-menu {width: 386px;}
	.menu-box {font-size: 17px;}
	
	.start-overlay .cookie-header .cookie-logo {
	    width: 300px;
	    height: 300px;
	    max-width: 300px;
	    max-width: none;
	}
	.start-overlay .cookie-header {
	    margin-top: -150px;
	    margin-left: -150px;
	}
}
@media only screen and (max-width: 390px){
	.section.section-8 {margin-top: 0lvh;}
	#view-menu {width: 362px;}
	.menu-box {font-size: 14px;line-height: 14.5px;}
	
	.section.section-8 {top: 0;}
	.section.section-9 {top: 0; padding-top: 0;margin-top: 0;}
}
@media only screen and (max-width: 375px){
	#view-menu {width: 347px;}
	.menu-box {font-size: 15px;padding: 12px 1em;}
}
@media only screen and (max-width: 360px){
	.td.blue.bigger {font-size: 26px;}
	#view-menu {width: 330px;}
	.menu-box {font-size: 16px;}
	#row-0 span {font-size: 20px;}
	.overview-box, .nav-header, .customer-box {font-size: 11px;}
	.nav-box {padding: 0.55em 0.5em;}
	#row-1.tr .td {font-size: 1.8em;}
	
	.nav-menu {padding-top: 21px;}
	.menu-box {font-size: 18px;padding: 0 1em;line-height: 38px;}
	
	.cookie-notice {
	    top: 0;
	    max-width: 100%;
	    width: 100%;
	    margin-top: 0 !important;
	    padding: 24px;
	    box-sizing: border-box;
	}
}
@media only screen and (max-width: 320px){
	.table.mobile {font-size: 16px;}
	#m-td-1 .td.tr-header {font-size: 16px;}
	#view-menu {width: 290px;}
	.menu-box {line-height: 33px;}
}


.fade-anim {
    -webkit-animation: fadeout 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadeout 2s; /* Firefox < 16 */
    -ms-animation: fadeout 2s; /* Internet Explorer */
    -o-animation: fadeout 2s; /* Opera < 12.1 */
    animation: fadeout 2s;
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity:0;
    }
}

/* Firefox < 16 */
@-moz-keyframes  fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity:0;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes  fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity:0;
    }
}

/* Internet Explorer */
@-ms-keyframes  fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity:0;
    }
}

/* Opera < 12.1 */
@-o-keyframes  fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity:0;
    }
}
/* FORCE FOR LONG */
@media only screen and (min-width: 320px) and (max-width: 420px) and (min-height: 768px) and (orientation: portrait) {
	.section.section-4, .section.section-5, .section.section-6 {
	    height: 350lvh;
	}
}

/* 2340 x 1080 */
/* FORCE PORTRAIT ON MOBILE */
@media only screen and (min-width: 320px) and (max-width: 915px) and (orientation: landscape) {
	.bg-scala-title {
	    position: absolute;
	    top: -3px;
	    font-size:30px;
    }
    .section-8 .bg-scala-line {
	    top: 3.5em !important;
	}
    .bg-scala-subtitle {
	    font-size: 28px;
	}
	
	.landscape-overlay{
		display:block;
		
	}
	
	.device-logo {
	    max-width: 150px;
	}
	.device-notice {
	    font-size: 30px;
	    line-height: 100px;
	    text-align: center;
	}
	.device-logo {
	    float: left;
	    max-width: 150px;
	    height: 100px;
	}
	.device-container {
	    position: absolute;
	    width: 100%;
	    top: 50%;
	    margin-top: -50px;
	    padding:0 3.5em;
	    box-sizing:border-box;
	}
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* Firefox */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: light;
    }
    .section-9 .footer-line {
	    margin: 0;
	    max-width: 100%;
	    padding-top: 0;
	    background: #fff;
	    padding: 0 24px;
	}
}