/* Theme Name: rockstar media Theme URI: http://www.lacaze-carnier.com Description: Version: 1.0.2020.03.31 Author: Eric Lacaze Author URI: http://www.lacaze-carnier.com */ @charset "utf-8"; /* font-family: 'Work Sans', sans-serif; */ /* @font-face { font-family: 'dokfilmregular'; src: url('font/dokfilm-dokfilm.eot'); src: url('font/dokfilm-dokfilm.eot?#iefix') format('embedded-opentype'), url('font/dokfilm-dokfilm.woff2') format('woff2'), url('font/dokfilm-dokfilm.woff') format('woff'), url('font/dokfilm-dokfilm.svg#dokfilmregular') format('svg'); font-weight: normal; font-style: normal; } */ /* CORE --------------------------------------------------- */ * { font-family: "futura-pt", sans-serif; font-weight: 400; letter-spacing: 1px; margin: 0px; padding: 0px; border: 0px; outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { background-color: #ffffff; } .lnc-clear { position: relative; display: block; width: 0px; height: 0px; clear: both; overflow: hidden; } .lnc-anchor { position: relative; display: block; width: 0px; height: 0px; overflow: hidden; } .lnc-center { position: relative; display: block; z-index: 4000; padding: 3em 0 8em 0; z-index: 3000; margin: 0px auto; } .lnc-wide { position: relative; z-index: 3000; padding-bottom: 8em; } a { color: inherit; } /* SECTIONS --------------------------------------------------- */ section { position: relative; display: block; width: 100%; min-height: 100vh; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #section-1 { background-color: #000000; overflow: hidden; } /* Intro */ .sec-1 #section-1 { background-color: #000000; } #section-1 #section-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background-position: fixed; background-size: cover; background-position: right bottom; transform-origin: 50% 50%; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)"; filter: alpha(opacity=15); -webkit-opacity: 0.15; -moz-opacity: 0.15; -khtml-opacity: 0.15; opacity: 0.15; -webkit-transition: all 2s ease-in-out; /* Firefox */ -moz-transition: all 2s ease-in-out; /* WebKit */ -o-transition: all 2s ease-in-out; /* Opera */ transition: all 2s ease-in-out; } .sec-1 #section-1 #section-background { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter: alpha(opacity=70); -webkit-opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .ani-1 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .ani-1 #svg-background-frame-left path { fill: rgba(255,255,255,0.4) !important; stroke-width: 0; } .ani-1 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-1 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-1 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-1 nav ul, .sec-1 nav ul:hover { background-color: rgba(255,255,255,0); } .sec-1 nav ul.active, .sec-1 nav ul.active:hover { background-color: rgba(0,0,0,0.95); } .sec-1 nav ul a { color: #ffffff; } .sec-1 nav ul a.sec-1 { border-bottom: 2px #ffffff solid; } #section-1 #visioniq-logo { position: absolute; top: 40%; left: 50%; z-index: 4000; width: 600px; height: auto; margin: 0 -300px 0 -300px; } #section-2 { background-color: #eeeeee; } /* Agentur */ #section-2 h1 { color: #000000 !important; text-align: left; } .sec-2 #section-2 { background-color: #ffffff; } .ani-2 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-2 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-2 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)"; filter: alpha(opacity=25); -webkit-opacity: 0.25; -moz-opacity: 0.25; -khtml-opacity: 0.25; opacity: 0.25; } .ani-2 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-2 nav ul { background-color: rgba(255,255,255,0.95); } .sec-2 nav ul a { color: #000000; } .sec-2 nav ul a.sec-2 { border-bottom: 2px #000000 solid; } #section-2 .lnc-center * { color: rgba(0,0,0,0.75); } #section-2 .lnc-center p { font-size: 1.5rem; line-height: 1.3; max-width: 100%; width: 510px; padding: 0 0 1em 0; text-align: justify; } #section-3 { background-color: #eeeeee; } /* Leistungen */ #section-3 h1 { color: #000000 !important; text-align: right; position: relative; margin-left: -100%; } .sec-3 #section-3 { background-color: #ffffff; } .ani-3 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-3 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-3 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-3 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-3 nav ul { background-color: rgba(255,255,255,0.95); } .sec-3 nav ul a { color: #000000; } .sec-3 nav ul a.sec-3 { border-bottom: 2px #000000 solid; } #section-3 .lnc-center * { color: rgba(0,0,0,0.75); } #section-3 .lnc-center .lnc-column-left { position: relative; display: block; float: left; width: 50%; height: 100vh; overflow: hidden; } #section-3 #lnc-leistungen-foreground { position: relative; z-index: 1000; width: 100%; height: auto; top: calc((100vh - ((100vw - 6rem) / 2)) / 2); left: 0; } #section-3 #lnc-leistungen-background { position: absolute; z-index: 500; width: 100%; height: auto; top: calc((100vh - ((100vw - 6rem) / 2)) / 2); left: 0; } #section-3 .lnc-center .lnc-column-right { display: block; float: right; width: 50%; } #section-3 .lnc-center p { font-size: 1.5rem; line-height: 1.3; width: calc(100% - 2rem); padding: 0 0 1em 2rem; text-align: right; } #section-3 table { width: 90%; border-spacing: 1em; border-collapse: separate; margin: 20vh 0 0 0; background-image: url('images/triangle.png'); background-position: center center; background-size: contain; background-repeat: no-repeat; } #section-3 table tr { } #section-3 table tr td { height: 10vh; font-size: 1.8rem; line-height: 1.3; font-weight: 600; } #section-4 { background-color: #eeeeee; } /* Referenzen */ #section-4 h1 { color: #000000 !important; text-align: center; } .sec-4 #section-4 { background-color: #ffffff; } .ani-4 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-4 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .ani-4 #svg-background-frame-center path { fill: rgba(0,0,0,0.1) !important; stroke-width: 0; } .ani-4 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-4 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-4 nav ul { background-color: rgba(255,255,255,0.95); } .sec-4 nav ul a { color: #000000; } .sec-4 nav ul a.sec-4 { border-bottom: 2px #000000 solid; } #section-4 .lnc-center * { color: rgba(0,0,0,0.75); } #section-4 ul { list-style: none outside none; text-align: center; } #section-4 ul li { display: inline-block; margin: 2em; height: 7vh; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-filter: grayscale(100%); filter: grayscale(100%); } #section-4 ul li:hover { /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -webkit-opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;*/ -webkit-filter: grayscale(0%); filter: grayscale(0%); } #section-4 ul li img { display: block; height: 100%; width: auto; } #section-5 { background-color: #eeeeee; } /* Projekte */ #section-5 .lnc-center { padding: 3em 0 3em 0; } #section-5 h1 { color: #000000 !important; text-align: center; } .sec-5 #section-5 { background-color: #ffffff; } .ani-5 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-5 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-5 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .ani-5 #svg-background-frame-right path { stroke: #000000; stroke-opacity: 0.1; } .ani-5 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-5 nav ul { background-color: rgba(255,255,255,0.95); } .sec-5 nav ul a { color: #000000; } .sec-5 nav ul a.sec-5 { border-bottom: 2px #000000 solid; } #section-5 .lnc-center * { color: rgba(0,0,0,0.75); } #section-5 .lnc-center p { font-size: 1.5rem; line-height: 1.3; width: 100%; padding: 0 0 1em 0; text-align: center; } #section-5 ul { width: 100%; list-style: none outside none; text-align: center; } #section-5 ul li { position: relative; display: inline-block; margin: 0.5vw; overflow: hidden; background-color: #000000; } #section-5 ul li span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; z-index: 10; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); -webkit-filter: grayscale(60%); filter: grayscale(60%); } .mobile #section-5 ul li span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-filter: grayscale(40%); filter: grayscale(40%); } #section-5 ul li:hover span { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); -webkit-opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; opacity: 0.3; -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-filter: grayscale(40%); filter: grayscale(40%); } #section-5 ul li a { position: absolute; top: 0; left: 0; padding: 1em; text-decoration: none; z-index: 20; display: block; height: calc(100% - 2em); width: calc(100% - 2em) } #section-5 ul li a * { color: #ffffff; } #section-5 ul li p { position: absolute; bottom: 3em; display: block; text-align: left; font-size: 1em; width: calc(100% - 2vw); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .mobile #section-5 ul li p { bottom: 1rem; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #section-5 ul li:hover p { bottom: 1em; display: block; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #section-6 { background-color: #eeeeee; } /* Jobs */ #section-6 .lnc-center { padding: 3em 0 3em 0; } #section-6 h1 { color: #000000 !important; text-align: center; } .sec-6 #section-6 { background-color: #ffffff; } .ani-6 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-6 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-6 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-6 nav ul { background-color: rgba(255,255,255,0.95); } .sec-6 nav ul a { color: #000000; } .sec-6 nav ul a.sec-6 { border-bottom: 2px #000000 solid; } #section-6 .lnc-center * { color: rgba(0,0,0,0.75); } #section-6 .lnc-center p { font-size: 1.5rem; line-height: 1.3; width: 100%; padding: 0 0 1em 0; text-align: center; } #section-6 ul { width: 100%; list-style: none outside none; text-align: center; } #section-6 ul li { position: relative; background-color: rgba(238,238,238,0.75); display: inline-block; margin: 0.5vw; -webkit-transition: all 0.2s ease-in-out; /* Firefox */ -moz-transition: all 0.2s ease-in-out; /* WebKit */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } #section-6 ul li a { position: absolute; top: 0; left: 0; padding: 1em; text-decoration: none; z-index: 20; display: block; height: calc(100% - 2em); width: calc(100% - 2em) } #section-6 ul li a * { color: #000000; text-decoration: none; -webkit-transition: all 0.2s ease-in-out; /* Firefox */ -moz-transition: all 0.2s ease-in-out; /* WebKit */ -o-transition: all 0.2s ease-in-out; /* Opera */ transition: all 0.2s ease-in-out; } #section-6 ul li:hover { background-color: rgba(0,0,0,0.75); } #section-6 ul li:hover * { color: #ffffff; } #section-6 ul li p { position: absolute; bottom: 1em; display: block; text-align: left; font-size: 1em; width: calc(100% - 2vw); } #section-7 { background-color: #333333; } /* Footer */ #section-7 h1 { color: #ffffff; text-align: center; } .sec-7 #section-7 { background-color: #000000; } .ani-7 #svg-background-frame-left { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transform: scale(1.5); -ms-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .ani-7 #svg-background-frame-left path { fill: rgba(255,255,255,0.4) !important; stroke-width: 0; } .ani-7 #svg-background-frame-center { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-7 #svg-background-frame-right { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .ani-7 #svg-background-frame-triple { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .sec-7 nav ul { background-color: rgba(0,0,0,0.95); } .sec-7 nav ul a { color: #ffffff; } .sec-7 nav ul a.sec-7 { border-bottom: 2px #ffffff solid; } #section-7 .lnc-center * { color: #ffffff; } #section-7 .lnc-center strong, #section-7 .lnc-center strong * { font-weight: 600; } #section-7 .lnc-center h2 { text-align: center; } #section-7 .lnc-center p { padding: 0 0 1.4em 0; line-height: 1.4em; font-size: 1rem; } #section-7 .lnc-center .lnc-column-left { position: relative; display: block; float: left; width: calc(50% - 2em); text-align: right; padding: calc(6rem + 3px) 2em 0 0; } #section-7 .lnc-center .lnc-column-left img { position: absolute; top: 0; right: 2rem; width: auto; height: 6rem; } #section-7 .lnc-center .lnc-column-right { position: relative; display: block; float: right; width: calc(50% - 2em); text-align: left; padding: 2rem 0 0 2em; } #section-single .lnc-project-table { position: relative; } #section-single .lnc-column-left { position: absolute; display: block; width: calc(50% - 2rem); text-align: right; padding: 0 2rem 0 0; line-height: 1.4rem; margin: 0; bottom: 3rem; } #section-single h1 { color: #000000; padding-bottom: 1rem; line-height: 0.9; } #section-single .lnc-column-left h1 { text-align: right; } #section-single h2 { padding: 0 0 3rem 0; } #section-single .lnc-column-left h2 { padding: 0 0 2px 0; text-align: right; } #section-single h3 { padding: 3rem 0 1rem 0; } #section-single .lnc-column-right { position: relative; display: block; float: right; width: calc(50% - 2em); text-align: left; padding: 0 0 0 2em; line-height: 1.4rem; margin: 7vh 0 3rem 0; } #section-single .lnc-column-right img.lnc-gallery-dummy { position: relative; width: 100%; height: auto; display: block; z-index: 100; } #section-single .lnc-column-right ul { position: absolute; top: 0; left: 2em; width: 100%; height: 100%; list-style: none outside none; z-index: 200; } #section-single .lnc-column-right .slick-list { height: 100%; } #section-single .lnc-column-right .slick-track { height: 100%; } #section-single .lnc-column-right ul li { /*position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;*/ } #section-single .lnc-column-right ul li img { width: auto; height: 100%; /*position: absolute; top: 0; left: 0; display: block;*/ } #section-single p { font-size: 1.5rem; line-height: 1.3; width: 100%; padding: 0 0 1.4rem 0; text-align: justify; } #section-single ul { padding: 0 0 0 1.5rem; } #section-single ul.lnc-slick { padding: 0 !important; } #section-single li { font-size: 1.5rem; line-height: 1.3; width: 100%; padding: 0 0 0 0; text-align: left; } .lnc-page-tpl nav ul { background-color: rgba(255,255,255,0.95); } .lnc-page-tpl nav ul a { color: #000000; } #section-single-footer { height: auto; min-height: auto; } #section-single-footer .lnc-single-footer { display: block; border-top: 2px #000000 solid; padding: 1rem 0 0 0; text-align: center; font-size: 1rem; line-height: 2rem; color: #000000; } #section-single-footer .lnc-single-footer strong { font-weight: 600; } /* HEAD --------------------------------------------------- */ nav { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 5000; } /* MENU --------------------------------------------------- */ nav ul { position: absolute; top: 0; left: 0; width: 100%; display: block; list-style: none outside none; text-align: center; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background-color: rgba(0,0,0,0); } nav ul li { display: inline-block; color: #000000; padding: 1em 1em; width: auto; height: auto; } nav ul li a { text-transform: uppercase; font-size: 1rem; letter-spacing: 1px; text-decoration: none; color: #000000; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } nav ul #lnc-menu-trigger { position: absolute; display: block; top: 0; right: -3rem; width: 3rem; height: 2rem; background-color: rgba(255,255,255,0.8); padding: 0.5rem 0 0 0; cursor: pointer; font-size: 2rem; line-height: 0.4rem; } nav ul #lnc-menu-trigger span { position: relative; top: 0; left: 0; display: block; letter-spacing: -0.2rem; text-align: center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } nav ul.active #lnc-menu-trigger span.line-1 { top: 6px; left: 2px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } nav ul.active #lnc-menu-trigger span.line-2 { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } nav ul.active #lnc-menu-trigger span.line-3 { top: -4px; left: -3px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } /* BODY --------------------------------------------------- */ h1 { font-size: 4rem; line-height: 1.1; padding: 10vh 0 5vh 0; text-transform: uppercase; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } h2 { font-size: 2.5em; padding: 1em 0 1em 0; } h3 { font-size: 1.9em; padding: 0 0 0 0; text-transform: uppercase; font-weight: 700; text-align: left; } h4 { font-size: 1em; padding: 0 0 0 0; text-transform: uppercase; font-weight: 700; text-align: left; } /* FOOT --------------------------------------------------- */ /* ANI --------------------------------------------------- */ #svg-background-frame-left, #svg-background-frame-center, #svg-background-frame-single, #svg-background-frame-triple, #svg-background-frame-job, #svg-background-frame-right, #svg-background-frame-project { position: fixed; top: 0; margin: 0; width: 100vw; height: 100vh; z-index: 100; display: block; overflow: hidden; -webkit-transition: opacity 1.5s ease-in-out, transform 1s ease-in-out; /* Firefox */ -moz-transition: opacity 1.5s ease-in-out, transform 1s ease-in-out; /* WebKit */ -o-transition: opacity 1.5s ease-in-out, transform 1s ease-in-out; /* Opera */ transition: opacity 1.5s ease-in-out, transform 1s ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } #svg-background-frame-left { left: 0; } #svg-background-frame-center { left: 0; } #svg-background-frame-right { left: 0; } .svg-background-big { position: absolute; top: 55%; margin-top: -600px; left: 20%; margin-left: -600px; width: 1200px; height: 1200px; z-index: 100; -webkit-animation: rotating 50s linear infinite; -moz-animation: rotating 50s linear infinite; -ms-animation: rotating 50s linear infinite; -o-animation: rotating 50s linear infinite; animation: rotating 50s linear infinite; } #svg-background-frame-right .svg-background-big { -webkit-animation: rotating 5s linear infinite !important; -moz-animation: rotating 5s linear infinite !important; -ms-animation: rotating 5s linear infinite !important; -o-animation: rotating 5s linear infinite !important; animation: rotating 5s linear infinite !important; } #svg-background-frame-left .svg-background-big path { fill: rgba(255,255,255,0); stroke-width: 0; -webkit-transition: fill 1.5s ease-in-out; /* Firefox */ -moz-transition: fill 1.5s ease-in-out; /* WebKit */ -o-transition: fill 1.5s ease-in-out; /* Opera */ transition: fill 1.5s ease-in-out; } #svg-background-frame-center .svg-background-big path { fill: rgba(255,255,255,0); stroke-width: 0; -webkit-transition: fill 1.5s ease-in-out; /* Firefox */ -moz-transition: fill 1.5s ease-in-out; /* WebKit */ -o-transition: fill 1.5s ease-in-out; /* Opera */ transition: fill 1.5s ease-in-out; } #svg-background-frame-center .svg-background-big { left: 50%; top: 55%; } #svg-background-frame-right .svg-background-big { left: 70%; top: 55%; } #svg-background-frame-job { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #svg-background-frame-job .svg-background-big { left: 50%; top: 55%; } #svg-background-frame-job path { stroke: #000000; stroke-opacity: 0.2; } #svg-background-frame-project { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } #svg-background-frame-project .svg-background-big { left: 50%; top: 55%; } #svg-background-frame-project path { stroke: #000000; stroke-opacity: 0.2; } #svg-background-frame-single .svg-background-big { left: 15%; top: 35%; -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; -webkit-transform: rotate(100deg); -ms-transform: rotate(100deg); -moz-transform: rotate(100deg); -o-transform: rotate(100deg); transform: rotate(100deg); } #lnc-leistungen-background { -webkit-animation: rotating 30s linear infinite; -moz-animation: rotating 30s linear infinite; -ms-animation: rotating 30s linear infinite; -o-animation: rotating 30s linear infinite; animation: rotating 30s linear infinite; } .svg-frame { position: relative; display: block; left: -10vw; top: 1em; transform-origin-x: 0; -webkit-transform: scale(0.05); -ms-transform: scale(0.05); -moz-transform: scale(0.05); -o-transform: scale(0.05); transform: scale(0.05); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 0.5s ease-in-out; /* Firefox */ -moz-transition: all 0.5s ease-in-out; /* WebKit */ -o-transition: all 0.5s ease-in-out; /* Opera */ transition: all 0.5s ease-in-out; } .svg-frame .svg-list { position: absolute; width: 1400px; height: 1200px; margin-left: -700px; margin-top: -600px;z-index: 500; -webkit-animation: rotating 50s linear infinite; -moz-animation: rotating 50s linear infinite; -ms-animation: rotating 50s linear infinite; -o-animation: rotating 50s linear infinite; animation: rotating 50s linear infinite; } @media all and (min-width: 2600px) { .lnc-center { width: 80vw; max-width: 2300px; } h1 { font-size: 7rem; } nav ul li a { font-size: 1.5rem; } #section-2 .lnc-center p { font-size: 2.5rem; } #section-3 .lnc-center p { font-size: 2.5rem; } #section-5 .lnc-center p { font-size: 2.5rem; } #section-5 ul li { width: 29vw; height: calc(29vw * 9 / 16); } /* #section-5 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); }*/ #section-5 ul li p { font-size: 2.5rem; } #section-5 ul li h3 { font-size: 3.4rem; } #section-5 ul li h4 { font-size: 2rem; } #section-6 .lnc-center p { font-size: 2.5rem; } #section-6 ul li { width: 29vw; height: calc(29vw * 9 / 16); } /* #section-6 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); }*/ #section-6 ul li p { font-size: 2.5rem; } #section-6 ul li h3 { font-size: 3.4rem; } #section-6 ul li h4 { font-size: 2rem; } #section-7 .lnc-center p { font-size: 2.5rem; } #section-7 .lnc-center .lnc-column-left { padding: calc(18em - 7px) 2em 0 0; } #section-7 .lnc-center .lnc-column-left img { height: 7rem; } #section-single p { font-size: 2.5rem; } #section-single h2 { font-size: 3.9rem; } #section-single h3 { font-size: 3.4rem; } #section-single ul { padding: 0 0 0 2.5rem; } #section-single li { font-size: 2.5rem; } } @media all and (max-width: 2599px) and (min-width: 2100px) { .lnc-center { width: 80vw; max-width: 1400px; } h1 { font-size: 6rem; } nav ul li a { font-size: 1.25rem; } #section-2 .lnc-center p { font-size: 2rem; } #section-3 .lnc-center p { font-size: 2rem; } #section-5 .lnc-center p { font-size: 2rem; } #section-5 ul li { width: 29vw; height: calc(29vw * 9 / 16); } /* #section-5 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); }*/ #section-5 ul li p { font-size: 2rem; } #section-5 ul li h3 { font-size: 2.9rem; } #section-5 ul li h4 { font-size: 1.6rem; } #section-6 .lnc-center p { font-size: 2.5rem; } #section-6 ul li { width: 29vw; height: calc(29vw * 9 / 16); } /* #section-6 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); }*/ #section-6 ul li p { font-size: 2rem; } #section-6 ul li h3 { font-size: 2.9rem; } #section-6 ul li h4 { font-size: 1.6rem; } #section-7 .lnc-center p { font-size: 2rem; } #section-7 .lnc-center .lnc-column-left { padding: calc(14em - 4px) 2em 0 0; } #section-7 .lnc-center .lnc-column-left img { height: 7rem; } #section-single p { font-size: 2rem; } #section-single h2 { font-size: 3.4rem; } #section-single h3 { font-size: 2.9rem; } #section-single ul { padding: 0 0 0 2rem; } #section-single li { font-size: 2rem; } } @media all and (max-width: 2099px) and (min-width: 1600px) { .lnc-center { width: 80vw; max-width: 1400px; } #section-5 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); } #section-6 ul li { width: 21.5vw; height: calc(21.5vw * 9 / 16); } } @media all and (max-width: 1599px) and (min-width: 1400px) { .lnc-center { width: 80vw; max-width: 1200px; } #section-5 ul li { width: 29vw; height: calc(29vw * 9 / 16); } #section-6 ul li { width: 29vw; height: calc(29vw * 9 / 16); } } @media all and (max-width: 1399px) and (min-width: 1200px) { .lnc-center { width: 80vw; max-width: 1200px; } #section-5 ul li { width: 29vw; height: calc(29vw * 9 / 16); } #section-6 ul li { width: 29vw; height: calc(29vw * 9 / 16); } } @media all and (max-width: 1199px) and (min-width: 980px) { .lnc-center { width: 90vw; max-width: 1100px; } #section-5 ul li { width: 45vw; height: calc(45vw * 9 / 16); } #section-6 ul li { width: 45vw; height: calc(45vw * 9 / 16); } } @media all and (max-width: 1099px) and (min-width: 980px) { .lnc-center { width: calc(100vw - 6rem); } #section-5 ul li { width: 45vw; height: calc(45vw * 9 / 16); } #section-6 ul li { width: 45vw; height: calc(45vw * 9 / 16); } } @media all and (max-width: 979px) { .lnc-center { width: calc(100vw - 6rem); } nav ul { left: calc(-100% + 3rem); width: calc(100% - 3rem); } nav ul.active { left: 0; } nav ul li { display: block; } nav ul li a { text-align: right; display: block; font-size: 1.5em; } #section-3 .lnc-center .lnc-column-left { float: none; width: 100%; text-align: center; height: auto; max-height: 100vh; } #section-3 #lnc-leistungen-foreground { position: relative; z-index: 1000; width: 100%; height: auto; top: 2rem; left: 0; max-height: 100vh; } #section-3 #lnc-leistungen-background { position: absolute; z-index: 500; width: 100%; height: auto; top: 2rem; left: 0; max-height: 100vh; } #section-3 .lnc-center .lnc-column-right { float: none; width: 100%; } #section-5 ul li { width: 45vw; height: calc(45vw * 9 / 16); } #section-6 ul li { width: 45vw; height: calc(45vw * 9 / 16); } #section-7 .lnc-center .lnc-column-left { float: none; width: 100%; text-align: center; padding: 0; } #section-7 .lnc-center .lnc-column-left img { position: relative; top: 0; right: 0; width: 40vw; height: auto; } #section-7 .lnc-center .lnc-column-right { float: none; width: 100%; text-align: center; padding: 0; } #section-single .lnc-column-left { position: relative; width: 100%; text-align: left; padding: 0; line-height: 1.3; bottom: auto; } #section-single .lnc-column-left h1 { text-align: left !important; } #section-single .lnc-column-left h2 { text-align: left; } #section-single .lnc-column-right { float: none; width: 100%; padding: 0; line-height: 1.3; margin: 0 0 4rem 0; } #section-single .lnc-column-right ul { left: 0; } } @media all and (max-width: 760px) { .lnc-center { width: calc(100vw - 6rem); } .lnc-column-left { float: none !important; width: calc(100% - 2em) !important; text-align: center !important; padding: 0 1em !important; } .lnc-column-right { float: none !important; width: calc(100% - 2em) !important; text-align: center !important; padding: 0 1em !important; } #section-5 ul li { width: 94vw; height: calc(94vw * 9 / 16); } #section-6 ul li { width: 94vw; height: calc(94vw * 9 / 16); } } @media all and (max-width: 720px) { .lnc-center { width: calc(100vw - 6rem); } #section-5 ul li { width: 94vw; height: calc(94vw * 9 / 16); } #section-6 ul li { width: 94vw; height: calc(94vw * 9 / 16); } } @media all and (max-width: 600px) { .lnc-center { width: calc(100vw - 6rem); } #section-5 ul li { width: 94vw; height: calc(94vw * 9 / 16); } #section-6 ul li { width: 94vw; height: calc(94vw * 9 / 16); } } @media all and (max-width: 1100px) and (orientation: portrait) { .tablet #section-3 .lnc-center .lnc-column-left { float: none; width: 100%; text-align: center; } .tablet #section-3 #lnc-leistungen-foreground { position: relative; z-index: 1000; width: 50vh; height: auto; top: 2rem; left: 0; } .tablet #section-3 #lnc-leistungen-background { position: absolute; z-index: 500; width: 50vh; height: auto; top: 2rem; left: 50%; margin-left: -25vh; } .tablet #section-3 .lnc-center .lnc-column-right { float: none; width: 100%; } .tablet #section-single .lnc-column-left { position: relative; width: 100%; text-align: left; padding: 0; line-height: 1.3; bottom: auto; } .tablet #section-single .lnc-column-left h1 { text-align: left !important; } .tablet #section-single .lnc-column-left h2 { text-align: left; padding-bottom: 3rem; } .tablet #section-single .lnc-column-right { float: none; width: 100%; padding: 0; line-height: 1.3; margin: 0 0 4rem 0; } .tablet #section-single .lnc-column-right ul { left: 0; } } @media all and (max-width: 979px) and (orientation: portrait) { .mobile nav ul { left: calc(-100% + 6rem); width: calc(100% - 6rem); } .mobile nav ul.active { left: 0; } .mobile nav ul li a { font-size: 3em; } .mobile nav ul #lnc-menu-trigger { right: -6rem; width: 6rem; height: 4rem; padding: 1rem 0 0 0; font-size: 4rem; line-height: 0.8rem; } .mobile nav ul #lnc-menu-trigger span { letter-spacing: -0.4rem; } .mobile nav ul.active #lnc-menu-trigger span.line-1 { top: 12px; left: 4px; } .mobile nav ul.active #lnc-menu-trigger span.line-3 { top: -8px; left: -6px; } .mobile h1 { font-size: 7rem; text-align: center !important; margin: 0 !important; padding: 5rem 0 4rem 0; display: block; } .mobile .lnc-jobs-tpl h1 { text-align: left !important; } .mobile h2 { font-size: 4.5rem; } .mobile h3 { font-size: 3.8rem; } .mobile h4 { font-size: 3rem; } .mobile #section-1 #visioniq-logo { width: 90vw; margin: 0 -45vw 0 -45vw; } .mobile #section-2 .lnc-center p { font-size: 3rem; max-width: 100%; text-align: center; } .mobile #section-3 .lnc-center p { font-size: 3rem; text-align: center; } .mobile #section-5 .lnc-center p { font-size: 3rem; } .mobile #section-5 ul li { width: 94vw; height: calc(94vw * 9 / 16); } .mobile #section-5 ul li p { bottom: 1em; font-size: 3rem; width: calc(100% - 2rem); } .mobile #section-5 ul li a { padding: 2em; height: calc(100% - 4em); width: calc(100% - 4em) } .mobile #section-6 .lnc-center p { font-size: 3rem; } .mobile #section-6 ul li { width: 94vw; height: calc(94vw * 9 / 16); } .mobile #section-6 ul li p { bottom: 1em; font-size: 3rem; } .mobile #section-6 ul li a { padding: 2em; height: calc(100% - 4em); width: calc(100% - 4em) } .mobile #section-7 .lnc-center p { font-size: 3rem; } .mobile #section-7 .lnc-center .lnc-column-left img { width: 60vw; } .mobile #section-single p { font-size: 3rem; } .mobile #section-single ul { padding: 0 0 0 3rem; } .mobile #section-single li { font-size: 3rem; } .mobile #section-single h1 { padding: 5rem 0 2rem 0; line-height: 6rem; } .mobile #section-single h2 { padding: 0 0 5rem 0; line-height: 6rem; } .mobile #section-single h3 { padding: 5rem 0 1rem 0; } .mobile #section-single .lnc-column-left { position: relative; width: 100%; text-align: left; padding: 0; line-height: 1.3; bottom: auto; } .mobile #section-single .lnc-column-left h1 { text-align: left !important; } .mobile #section-single .lnc-column-left h2 { text-align: left; } .mobile #section-single .lnc-column-right { float: none; width: 100%; padding: 0; line-height: 1.3; margin: 0 0 4rem 0; } .mobile #section-single .lnc-column-right ul { left: 0; } .mobile #section-single-footer .lnc-single-footer { font-size: 2.5rem; line-height: 1.3; } } @-webkit-keyframes rotating { from {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes rotating { from {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes rotating { from {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes rotating { from {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotating { from {-webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } #lnc-nav { display: none !important;; } #section-width-check { position: fixed; top: -1px; left: 0px; width: 100%; height: 1px; background-color: #000000; overflow: hidden; z-index: 10000; } #section-height-check { position: fixed; top: 0px; left: -1px; width: 1px; height: 100%; background-color: #000000; overflow: hidden; z-index: 10000; } #lnc-debug { position: fixed; display: none; top: 1em; right: 1em; width: auto; height: auto; margin: 0; z-index: 999999; background-color: rgba(255,255,255,0.5); padding: 20px; border-radius: 20px; } #lnc-debug * { color: #000000; font-weight: 300; text-align: right; letter-spacing: 0; }