@charset "UTF-8";

/*
Theme Name: ZENIT GmbH – Digitale Imagebroschüre
Theme URI: https://www.zenit.de/
Author: SGP GmbH
Author URI: https://www.sgp.de
Description: Theme für ZENIT GmbH
Version: 1.0
Tags: SGP, Gute Botschaften, Agentur, Remscheid, Werbung, Marketing, Internet, Facebook
Text Domain: Gute Botschaften.sgp
*/

.otgs-development-site-front-end,
.grecaptcha-badge { display: none !important; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
html, body { height:100%; overflow: hidden; }
body { line-height: 1; margin:0; padding:0;  }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; hyphens: auto; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
a, a:active, a:visited { text-decoration: none; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; }
.clear { clear:both; }
.nobr { white-space:nowrap; }
*, *::before, *::after { margin: 0; padding: 0; border: none; box-sizing: border-box; list-style: none; }
::-moz-selection { background: #000000; color: #ffffff; }
::selection { background: #000000; color: #ffffff; }
b, strong { font-weight: 700; }
em { font-style: italic; }

.show2000, .show1500, .show1200, .show1024, .show1100, .show768, .show550, .show450 { display: none; }

body {
  font-family: 'Barlow','Verdana', 'Geneva', sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  color: #1F4B56;
  letter-spacing: 0px;
  font-style: normal;
  position: relative;
  overflow-x: hidden;
}

section { position: relative; }

.small { font-size: .85rem; }
.round { border-radius: 6px; }
.round > div.col_l_3, img.round { line-height: 0; }

.bu_arrows { position: absolute; bottom: 50px; left: 0; width: 100vw; padding: 0 1.5rem; z-index: 9000; }
.bu_arrow { font-size: 16px; margin: 0; padding: 0; z-index: 100; }
.bu_arrow.transparent { opacity: 0; }
.bu_arrow.up { position: absolute; left: calc(50% - 8px); top: 8px; }
.bu_arrow.down { position: absolute; left: calc(50% - 8px); bottom: 8px; }
.bu_arrow.left { left: 0.7rem; bottom: 3rem; }
.bu_arrow.right { right: 0.7rem; bottom: 3rem; }

#desktop i { display: block; font-size: 3rem; margin:0 0 25px 0; padding:0; }
#desktop img { border: 1px solid #1F4B56; margin-top: 75px; width: 25%; height: auto; border-radius: 8px; }

.pattern-dots { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-image: radial-gradient(rgba(31, 75, 86, .75) 0.5px, transparent 0.5px); background-size: 3px 3px; }

img.round_bottom { position: absolute; width: 100vw; height: auto; left: 0; top: -3px; z-index: 100; }
img.round_up { position: absolute; width: 100vw; height: auto; left: 0; bottom: -3px; z-index: 100; transform: rotate(180deg); }
img.round_content { position: absolute; width: 100vw; height: auto; left: 0; bottom: -3px; z-index: 100; }

#viewport { display: none; }

@media (any-pointer: coarse) {
  #desktop { display: none; }
  #viewport { display: block; height: 100vh; overflow: hidden; }
  #stage { height: auto; width: 100%; will-change: transform; touch-action: none; }
  .page { height: 100vh; }
  #stage.snap { transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
  .has-horizontal { overflow: hidden; }
  .h-stage { display: flex; height: 100%; will-change: transform; }
  .h-page { position: relative; min-width: 100vw; height: 100%; flex-shrink: 0; }
  .h-stage.snap-x { transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
  .h-page .fade-in > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .h-page.active .fade-in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0s; }
  .h-page.active .fade-in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
  .h-page.active .fade-in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.30s; }
  .h-page.active .fade-in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
  .h-page.active .fade-in > *:nth-child(n+5) { opacity: 1; transform: translateY(0); transition-delay: 0.60s; }
  .h-page:not(.active) .fade-in > * { transition-duration: 0.2s; transition-delay: 0s; }
}

#viewport #start div.start,
#viewport #start div.image { position: relative; width: 100vw; height: 50vh; }
#viewport #start div.start img.logo { position: absolute; top: 1.5rem; left: 1.5rem; width: 48%; height: auto; z-index: 9999; }
#viewport #start div.start h1 { font-size: 8vw; line-height: 1.2em; margin-top: 10vh; }

#viewport #intro div.intro { position: relative; width: 100vw; height: 73vh; }
#viewport #intro div.image { position: relative; width: 100vw; height: 27vh; }
#viewport #intro div.intro h2 { font-size: 8vw; line-height: 1.2em; }
#viewport #intro div.intro ul.social-links { margin: 0; padding: 0; }
#viewport #intro div.intro ul.social-links li { list-style: none; line-height: 0; background: #999999; border-radius: 999px; padding: 5px; }
#viewport #intro div.intro ul.social-links li svg { color: #ffffff; fill: #ffffff; }
#viewport #intro div.intro ul.social-links li.social-link-youtube { background-color: red; color: #fff; margin-right: 10px; }
#viewport #intro div.intro ul.social-links li.social-link-linkedin { background-color: #0d66c2; color: #fff; }

#viewport div.image { position: relative; width: 100vw; height: 100vh; }
#viewport div.content_start { position: absolute; bottom: 100px; left: 20px; width: calc(100vw - 40px); z-index: 2000; border-radius: 10px; padding: 20px; }
#viewport div.header { position: relative; width: 100vw; height: 100vh; }
#viewport div.header .font-white { position: absolute; top: 30px; left: 20px; z-index: 100; }
#viewport div.header .font-white::before { display: inline-block; content: " "; width: 20px; margin-left: -20px; margin-right: 20px; border-bottom: 1px solid #ffffff; }
#viewport div.header .overlay-black { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000000; opacity: .45; z-index: 0; }
#viewport div.content { position: absolute; left: 0; bottom: 0; height: 80vh; width: 100vw; padding: 40px 20px 20px; z-index: 8000; }
#viewport div.content h1 { font-size: 7vw; line-height: 1.2em; margin: 0 0 1.3rem 0; }
#viewport div.content .font-darkgrey strong { color: #009345; }
#viewport div.content .projects-container { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 80px; top: 160px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 15px;
  scrollbar-width: thin;
  scrollbar-color: #1F4B56 #edf1f2;
  &::-webkit-scrollbar { width: 8px; }
  &::-webkit-scrollbar-track { background: #edf1f2; }
  &::-webkit-scrollbar-thumb { background-color: #1F4B56; border-radius: 4px; }
  &::-webkit-scrollbar-thumb:hover { background-color: #1F4B56; }
}
#viewport div.content .fade-in.scroll { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 80px; top: 2.5rem; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-right: 15px;
  scrollbar-width: thin;
  scrollbar-color: #1F4B56 #edf1f2;
  &::-webkit-scrollbar { width: 8px; }
  &::-webkit-scrollbar-track { background: #edf1f2; }
  &::-webkit-scrollbar-thumb { background-color: #1F4B56; border-radius: 4px; }
  &::-webkit-scrollbar-thumb:hover { background-color: #1F4B56; }
}
#viewport div.content .projects-container .project-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #1F4B56; }
#viewport div.content .projects-container .project-item img { border: 5px solid #ffffff; background: #ffffff; }
#viewport div.content .projects-container .project-item:last-child { margin-bottom: 1rem; padding-bottom: 0; border-bottom: none; }

#viewport div.content .counter-item { margin-bottom: 1rem; }
#viewport div.content .counter-number { padding: 5px 7px; font-size: 1.2em; font-weight: 700; border-radius: 6px; }
#viewport div.content .counter-text { opacity: 0; transform: translateX(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
#viewport div.content .counter-text.visible { opacity: 1; transform: translateX(0); }
#viewport div.content_quote { position: absolute; bottom: 80px; left: 20px; width: calc(100vw - 40px); z-index: 2000; border-radius: 10px; padding: 40px 20px 20px; }
#viewport div.content_quote img.quote { position: absolute; left: 20px; top: calc((27vw - 25px) * -1); width: 27vw; height: auto; z-index: 100; border-radius: 10px; box-shadow: 5px 5px 15px rgb(0 0 0 / 65%); }
#viewport div.content .gs-logo { margin-bottom: .75rem; }
#viewport div.content .gs-logo img { border-radius: 5px; width: 75%; padding: 10px; background: #ffffff; }
#viewport div.content .wp-block-column.row { display: flex !important; justify-content: space-between; flex-flow: row wrap; align-items: center; }
#viewport div.content .wp-block-column.row figure { width: calc(1/2*100% - (1 - 1/2)*15px); background: #ffffff; border-radius: 5px; margin-bottom: .75rem !important; }
#viewport div.content .wp-block-column.row figure img { width: 100%; padding: 10px; }

#viewport #kontakt div.kontakt { position: relative; width: 100vw; height: 73vh; }
#viewport #kontakt div.image { position: relative; width: 100vw; height: 27vh; }
#viewport #kontakt div.kontakt h2 { font-size: 8vw; line-height: 1.2em; }
#viewport #kontakt div.kontakt ul.social-links { margin: 0; padding: 0; }
#viewport #kontakt div.kontakt ul.social-links li { list-style: none; line-height: 0; background: #999999; border-radius: 999px; padding: 5px; }
#viewport #kontakt div.kontakt ul.social-links li svg { color: #ffffff; fill: #ffffff; }
#viewport #kontakt div.kontakt ul.social-links li.social-link-youtube { background-color: red; color: #fff; margin-right: 10px; }
#viewport #kontakt div.kontakt ul.social-links li.social-link-linkedin { background-color: #0d66c2; color: #fff; }

footer { position: absolute; left: 0; bottom: 0; width: 100vw; font-size: .8rem; line-height: 1.3em; padding: 0 1.5rem; }
.text footer ul { margin: 0; padding: 0; }
footer ul.footer li { list-style: none; }
footer ul.footer li a,
footer ul.footer li a:visited { margin-right: 20px; color: #ffffff; line-height: 1.3em; font-size: .8rem; font-weight: 400; }
footer ul.footer li a:active { color: #009345; }