/*
         KFUG Rocks CSS
         Design: Kreativagentur Freudenschrei UG | https://www.freudenschrei.ug
*/

/* Einstellungen */
:root {
         --main-font: 'Ubuntu';
         --second-font: 'Poppins';

         /* Links */
         --link-color: #25a95a;
         --link-color-dark: #198d48;

         /* Türkis */
         --main-color: #006c7b;
         --main-color-dark: #00515e;
         --main-color-light: #01b8aa;

         /* Petrol */
         --second-color: #009d76;
         --second-color-dark: #007759;
         --second-color-light: #00cd9a;

         /* Highlights */
         --highlight-color: #f2c80f;
         --highlight-color2: #fd625e;

         /* Grey */
         --grey-color: #374649;
         --grey-color2: #5f6b6d;
         --grey-color3: #333333;

         --grey-color-dark: #eeeeee;
         --grey-color-light: #e3e3e5;

         --bg-color: #DFDFDF;
         --bg-color-white: #ffffff;
         --bg-color-black: #000000;
         --bg-color-grey: #EFEFEF;
         --bg-color-dark: rgba(0,0,0,0.2);
         --bg-color-light: rgba(255,255,255,0.1);

         --font-color: #374649;
         --font-color-light: #ffffff;
         --font-color-dark: #000000;

         --max-width: 1400px;
}


/* Links */
a:link, a:visited { font-size: 1.0em; color: var(--main-color); font-weight: normal; text-decoration: underline; }
a:hover, .link:hover { color: var(--font-color-dark); text-decoration: none; }
.content a { border-bottom: 3px var(--main-color) dotted; text-decoration: none; }
.content a:hover { color: var(--main-color-light); border-bottom: 3px var(--main-color-light) dotted; text-decoration: none; }

a.button:link, a.button:visited, .button {
         display: inline-block;
         cursor: pointer;

         background: var(--main-color);
         padding: 10px 30px;
         margin: 10px 0px;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
         border: 0px #FFFFFF solid !important;

         font-family: var(--second-font);
         font-size: 1.1em;
         color: #FFFFFF;
         font-weight: bold;
         text-decoration: none;

         text-shadow: rgba(0,0,0,0.1) 1px 1px 2px;
         text-transform: uppercase;

}
a.button.grey:link, a.button.grey:visited, .button.grey { background: var(--bg-color-grey); color: var(--bg-color-dark); font-weight: normal; padding: 6px 20px; }
a.button.light:link, a.button.light:visited, .button.light { background: var(--bg-color-white); color: var(--font-color-dark); }
a.button.highlight:link, a.button.highlight:visited, .button.highlight { background: var(--highlight-color); color: var(--font-color-dark); }

a.button:hover, .button:hover,
a.button.grey:hover, .button.grey:hover,
a.button.highlight:hover, .button.highlight:hover,
a.button.light:hover, .button.light:hover { background: var(--main-color-light); color: #FFFFFF;  }

a, a:hover { transition: all 0.4s; }

/* Allgemein */
html {
         margin: 0;
         padding: 0;
         min-width: 320px;
         height: 100%;
         width: 100%;
         scroll-behavior: smooth;
}

body {
         background:#FFFFFF;
         margin: 0px;
         padding: 0px;
         min-width: 320px;
}

body, div {
         font-size: 1.0em;
         color: var(--font-color);
         font-weight: normal;
         font-weight: 300;

         padding: 0px 0px 0px 0px;
         margin: 0px 0px 0px 0px;
}

html, body, a, h1, h2, h3, h4, h5, h6, div { font-family: var(--main-font); }
input, select, textarea, option { font-family: var(--second-font); }

/* Überschriften */
h1 {
         font-size: 2.2em;
         color: var(--main-color);
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #FFFFFFF 2px 2px 0px;
         line-height: 1.4em;
}

h2 {
         font-size: 1.8em;
         color: var(--main-color);
         font-weight: normal;
         margin: 0px 0px 0px 0px;
         text-shadow: #FFFFFF 0px 0px 0px;
         line-height: 1.4em;
}

h3 {
         display: inline-block;
         margin: 5px 0px 5px 0px;
         padding: 0px 0px 0px 0px;

         font-size: 1.6em;
         color: var(--main-color-light);
         font-weight: 400;
         line-height: 1.4em;
}

h4 {
         display: inline-block;
         margin: 5px 0px 5px 0px;
         padding: 6px 12px 6px 12px;

         font-size: 1.4em;
         color: #FFFFFF;
         font-weight: 700;
         text-shadow: rgba(0,0,0,0.2) 0px 0px 0px;

         background: var(--main-color);
         line-height: 1.4em;
}


/* Standards */
.l         { float:left; }
.r       { float:right; }
.a_l        { text-align: left;}
.a_c        { text-align: center;}
.a_r        { text-align: right;}
.inline         { display: inline-block; }
.block         { display: block; }
.hide, .ns         { display: none !important; }
.show         { display: block !important; }
img         { border: 0px; }
.clear         { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad        { padding: 10px; }
.pad_top        { padding: 50px 0px !important; }
.pad_top_small  { padding: 10px 0px !important; }
.pad_top_big    { padding: 100px 0px !important; }
.pad_l         { padding: 0px 0px 0px 10px !important; }
.pad_m         { padding: 0px 10px 0px 10px !important; }
.pad_r         { padding: 0px 10px 0px 0px !important; }
.pad_s        { padding: 5px !important; }

.f_small        { font-size: 0.8em !important; }
.f_smaller        { font-size: 0.6em !important; }
.f_big        { font-size: 1.3em !important; }
.f_head        { font-size: 4.0em !important; font-weight: 700 !important; }
.f_bigger        { font-size: 1.6em !important; }
.f_light { color: var(--font-color-light) !important; }
.f_dark { color: var(--font-color-dark) !important; }
.f_highlight { color: var(--highlight-color) !important; }
.f_highlight2 { color: var(--highlight-color2) !important; }
.f_color { color: var(--main-color) !important; }
.f_color2 { color: var(--main-color-dark) !important; }

.f_upper { text-transform: uppercase; }

.line        { border-bottom: 2px #BFBFBF dotted; }
.round        { -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; }
.align_right, .a_r { text-align: right; }
.align_center, .a_c { text-align: center; }
.texti        { text-indent: 100%; white-space: nowrap; overflow: hidden; }
.kon         { direction: rtl; unicode-bidi: bidi-override; text-align: left; }
hr         { border: 0px #FFFFFF; border-bottom: 3px #DFDFDF dotted; height: 0px; }
td         { vertical-align: middle; }
::-moz-selection { background: var(--highlight-color2); color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px; }
::selection { background: var(--highlight-color2); color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px; }

.noshadow { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0); }
.shadow_bottom { -webkit-box-shadow: 0px 20px 20px -15px rgba(0,0,0,0.25); -moz-box-shadow: 0px 20px 20px -15px rgba(0,0,0,0.25); box-shadow: 0px 20px 20px -15px rgba(0,0,0,0.25); }
.nospan { cell-spacing: 0; cell-padding: 0; padding: 0; margin: 0; }
.nodeco { text-decoration: none !important; }

.h_line { display: inline-block; background: var(--main-color-light); width: 30%; min-width: 100px; height: 4px; margin: 30px auto 30px auto; }
.h_line.dark { background: #000000; }
.h_line.light { background: #FFFFFF; }
.h_line.highlight { background: var(--highlight-color); }

.w100  { width: 100% !important; }
.w80  { width: 80% !important; }
.w75  { width: 75% !important; }
.w70  { width: 70% !important; }
.w66  { width: 66% !important; }
.w60  { width: 60% !important; }
.w50  { width: 50% !important; }
.w45  { width: 45% !important; }
.w40  { width: 40% !important; }
.w33  { width: 33.333% !important; }
.w25  { width: 25% !important; }
.w20  { width: 20% !important; }
.w16  { width: 16.6667% !important; }
.w10  { width: 10% !important; }

.w50pad  { width: calc(50% - 20px); margin: 0px 10px; }
.w66pad  { width: calc(66.666% - 20px); margin: 0px 10px; }
.w33pad  { width: calc(33.333% - 20px); margin: 0px 10px; }
.w25pad  { width: calc(25% - 24px); margin: 0px 10px; }

.opa75  { opacity: 0.75; }
.opa50  { opacity: 0.5; }
.opa40  { opacity: 0.40; }
.opa25  { opacity: 0.25; }
.opa10  { opacity: 0.1; }

.s { color: black; background-color: black; }
.w { color: white; background-color: white; }

.bg-w { background: #FFFFFF; }
.bg-b { background: #000000; }
.bg-main-1 { background: var(--main-color); }
.bg-main-2 { background: var(--main-color-dark); }
.bg-main-3 { background: var(--main-color-light); }
.bg-second-1 { background: var(--second-color); }
.bg-second-2 { background: var(--second-color-dark); }
.bg-second-3 { background: var(--second-color-light); }
.bg-grey-1 { background: var(--grey-color); }
.bg-grey-2 { background: var(--grey-color2); }
.bg-grey-3 { background: var(--grey-color3); }
.bg-grey-dark { background: var(--grey-color-dark); }
.bg-grey-light { background: var(--grey-color-light); }
.bg-grey { background: var(--bg-color-grey); }
.bg-hl-1 { background: var(--highlight-color); }
.bg-hl-2 { background: var(--highlight-color2); }

.bg, .bg0 { background: #FFFFFF; }
.bg1 { background: #f5f5f5; }
.bg1 { background: #fbf8f7; }
.bg2 { background: #d0d7e0; }
.bg2 { background: #fde8df; }
.bg3 { background: #546067; }
.bg4 { background: #9CCD1C; }
.bg5 { background: #ff5400; }
.bg6 { background: #FFD11B; }
.bg7 { background: #BF0000; }

.background_clipped { -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0% 100%); clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0% 100%); margin: -60px 0px 0px 0px; min-height: 60px; }
.background_clipped_top { -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 0px), 0% 100%); clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 0px), 0% 100%); margin: -60px 0px 0px 0px; min-height: 60px; }
.minusmargin { margin-top: -60px !important; }

.head { background: #ff5a00; color: #FFFFFF; font-weight: 600; font-size: 1.1em; }
.head_sub { background: #eb8a56; color: #FFFFFF; font-weight: 600; font-size: 1.0em; }
.head2 { background: #000000; color: #FFFFFF; font-weight: 600; font-size: 1.1em; }
.foot { background: #FFFFFF; border-top: 2px #ff5a00 solid; color: #000000; font-weight: 600; font-size: 1.1em; }

.blur { -webkit-filter: blur(10px); filter: blur(10px); filter: Blur(Strength=50); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50'); }
img.filter-grey { filter: grayscale(100%); transition: 0.5s; }
img.filter-grey:hover { filter: grayscale(0%); }
img.inline-l { float: left; margin: 10px 30px 20px 0px; }
img.inline-r { float: right; margin: 10px 0px 20px 30px; }

ol li { margin: 5px 0px 10px 0px; }
ol li b { color: #000000; }
ol li span { color: #6F6F6F; }

a.button_color:focus { outline: none; }
.color1 { background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19) !important; }
.color2 { background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516) !important; }

.gradient { background-image: linear-gradient(to bottom, var(--main-color), var(--main-color-light)) !important; }
.gradient2 { background-image: linear-gradient(to top, var(--main-color), var(--main-color-light)) !important; }

.b { border: 1px #000000 solid; }
u { text-decoration-color: #f2c80f; }
b { font-weight: 700; }
p { padding: 0px; margin: 0px; }

/* Aufbau */
#wrapper { width: 100%; }
.in { width: 100%; max-width: var(--max-width); margin: 0px auto; padding: 0px; }
.content { font-size: 1.3em; line-height: 1.4em; font-weight: 300; }

#hero {
         display: block;
         width: calc(100vw-20px);
         height: calc(100vw/1.77777);
         color: #FFFFFF;
         background-image: url(../images/demo-header.jpg) !important;
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: top center;
}

#hero video { width: 100%; height: auto; }

#wrapper.under #hero {
         display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 10;
         width: calc(100vw-20px);
         height: 160px;
         color: #FFFFFF;
         background-image: linear-gradient(to bottom, var(--main-color), var(--main-color-light)) !important;
}

#wrapper.under #site { padding-top: 120px; }

#header {
         position: fixed;
         z-index: 100;
         display: block;
         width: 100%;
         height: 70px;
         margin: 50px auto;
         text-align: center;
}

#header_shadow {
         display: none; position: fixed; top: 0; left: 0; right: 0;
         width: calc(100vw-20px);
         z-index: 2;
         height: 120px;
         background-image: linear-gradient(to bottom, var(--main-color), var(--main-color-dark)) !important;
         opacity: 0.5;
}

#header .logo {
         display: inline-block;
         float: left;
         width: 70px;
         height: 70px;
         text-align: center;
         transition: all 0.3s;
         -webkit-filter: drop-shadow( 0px 0px 15px rgba(0, 0, 0, .3));   filter: drop-shadow( 0px 0px 15px rgba(0, 0, 0, .3));
}
#header .logo a { text-decoration: none; border: 0px }
#header .logo:hover { -webkit-filter: drop-shadow( 0px 0px 20px rgba(0, 0, 0, .5)); filter: drop-shadow( 0px 0px 20px rgba(0, 0, 0, .5)); }
#header .logo img { width: 68px; height: auto; }

#header .navigation {
         display: inline-block;

         /*background-color: rgba(255, 255, 255, 0.2); */
         background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.3)) !important;
         backdrop-filter: blur(10px);
         -webkit-backdrop-filter: blur(10px);

         max-width: calc(100% - 250px - 100px);
         height: 60px;
         line-height: 60px;
         text-align: center;
         padding: 0px 20px;
         margin: 0px;

         border: 1px rgba(255, 255, 255, 0.1) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#header .navigation a {
         display: inline-block;
         padding: 0px 10px;
         font-size: 1.3em;
         font-weight: bold;
         color: var(--font-color-light);

         background: linear-gradient(#f2c80f 0 0)
         bottom left/
         var(--underline-width, 0%) 0.4em
         no-repeat;
         transition: background-size 0.3s;
         text-decoration: none;
}
#header .navigation a:hover { --underline-width: 100%; }

#header .navigation.dark {
          background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 0.9)) !important;
          -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.25);
}
#header .navigation.dark a { color: var(--font-color); }

#header .contact {
         display: inline-block;
         /*background-color: #e6f1f2; */
         background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)) !important;

         float: right;
         width: 250px;
         height: 60px;
         line-height: 60px;
         text-align: center;
         padding: 0px;
         margin: 0px;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         font-size: 1.2em;
         font-weight: normal;
         color: var(--main-color-dark);
}
#header .contact span {
         float: left;
         display: block;
         width: 60px;
         height: 60px;

         background-color: transparent;
         background-repeat: no-repeat;
         background-size: 38px 38px;
         background-position: center center;

         border: 0px transparent solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
         transition: all 0.4s;
         cursor: pointer;
}
#header .contact span.text { width: calc(100% - 60px - 60px - 5px); text-align: center; }
#header .contact span:hover, #header .contact span.active  { background-color: #FFFFFF; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2); }
#header .contact span.text:hover { background-color: transparent; -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0); -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0); box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.0); }
#header .contact span.phone { float: left; background-image: url(../images/icon_phone_c.png); }
#header .contact span.mail { float: right; background-image: url(../images/icon_mail_c.png); }


#footer { display: block; width: 100%; }
#footer .in { color: rgba(255,255,255,0.8); }
#footer .l, #footer .r, #footer .bg-main-1 a { color: rgba(255,255,255,0.5); }
#footer .bg-main-1 { background-color: #003841; }
#footer .bg-main-2 .l { padding-top: 50px; }
#footer .bg-main-2 .logo { float: left; padding: 0px 20px 50px 0px; }


#footer a { display: inline-block; padding: 0px 10px; color: #FFFFFF; font-size: 1.0em; text-decoration: none; }
#footer a:hover { color: var(--highlight-color); }

#footer .box { float: right; display: block; width: calc((100% - 550px) / 3); padding: 0px 10px; color: #FFFFFF; font-size: 1.0em; text-decoration: none; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.0); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.0); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.0); }
#footer .box b { display: block; font-size: 1.4em; padding: 20px 0px; text-align: right; }
#footer .box a { display: block; padding: 5px 0px; border-top: 1px rgba(255,255,255,0.1) solid; text-align: right; background: linear-gradient(#f2c80f 0 0)
         bottom left/
         var(--underline-width, 0%) 0.3em
         no-repeat;
         transition: background-size 0.3s;
}
#footer .box a:hover { --underline-width: 100%; }

#footer .social { margin: 10px 0px; }
#footer .social a { padding: 0px 2px; }
#footer .social .icon { display: inline-block; width: 30px; height: 30px; background-repeat: no-repeat; background-size: 30px; background-position: center center; background-color: transparent; }
#footer .social .icon.fb { background-image: url(../images/icon_social_f_w.png); }
#footer .social .icon.ins { background-image: url(../images/icon_social_i_w.png); }
#footer .social .icon.li { background-image: url(../images/icon_social_l_w.png); }
#footer .social .icon.wa { background-image: url(../images/icon_social_w_w.png); }

#footer .social a:hover .icon.fb { background-image: url(../images/icon_social_f_highlight.png); }
#footer .social a:hover .icon.ins { background-image: url(../images/icon_social_i_highlight.png); }
#footer .social a:hover .icon.li { background-image: url(../images/icon_social_l_highlight.png); }
#footer .social a:hover .icon.wa { background-image: url(../images/icon_social_w_highlight.png); }


/* Content / Boxen */
.box {
         display: inline-block;
         width: calc(100% - 30px - 30px);
         padding: 15px;
         margin: 15px;
         text-align: left;

         -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
         -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
         box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);
}


/* Startseite */
.start {  color: #000000; font-size: 1.4em; font-weight: 300; }
.start h1 { text-transform: uppercase; color: #000000; font-size: 4em; font-weight: bold; }
.start h2 { text-transform: lowercase; color: #000000; font-size: 2em; font-weight: 700; }
.start h3 { font-size: 2em; }

.start .tags { text-align: center; font-size: 2.3em; margin: 50px 0px; }
.start .tags span { display: inline-block; color: #000000; font-size: 2.0em; font-weight: bold; line-height: 140px; vertical-align: middle; text-align: center; }
.start .tags span.stark { width: 240px; text-align: center; color: var(--main-color-light); font-size: 0.8em; font-weight: normal; line-height: 1.0em; text-transform: uppercase; /*animation: 1s ease 0s infinite blink;*/ }

/*.start .tags span.video { display: inline-block; width: 320px; height: 180px; margin: 0px 50px; }
.start .tags video { position: absolute; z-index: 2; left: calc(50% - 160px); height: auto; min-width: 320px; min-height: 180px; } */

.start .departments .item { display: block; float: left; background-color: #FFFFFF; width: calc(100% / 4 - 40px); margin: 20px; -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15); transition: all 0.4s; }
.start .departments .item:hover { width: calc(100% / 4 - 20px); margin: 20px 10px; }
.start .departments .item:hover > span b { background-size: 110px !important; }
.start .departments .item span { display: block; width: calc(100% - 40px); padding: 20px; color: #FFFFFF; }
.start .departments .item span img { width: 100px; height: auto; }
.start .departments .item i { display: block; width: calc(100% - 40px); height: 120px; padding: 40px 20px; font-size: 0.7em; font-weight: 300; font-style: normal; }

.start .departments .item span b { display: block; padding-top: 120px; background-size: 100px !important; transition: background-size 0.3s linear; }
.start .departments .item span b.digital { background: transparent url(../images/icon_digital_c.png) center top no-repeat; }
.start .departments .item span b.print { background: transparent url(../images/icon_print_c.png) center top no-repeat; }
.start .departments .item span b.motion { background: transparent url(../images/icon_motion_c.png) center top no-repeat; }
.start .departments .item span b.more { background: transparent url(../images/icon_more_c.png) center top no-repeat; }

#workflow h4, #workflow h5 { display: none; }
.start .abc .item { background: transparent url(../images/vertical_diver.png) center top repeat-y; }
.start .abc .item { color: #FFFFFF; text-align: center; padding: 20px 0px; }
.start .abc .item .l { display: inline-block; float: left; width: calc(50% - 50px); }
.start .abc .item .c { display: inline-block; width: 80px; text-align: center; color: #FFFFFF; font-size: 5em; margin-top: -45px; }
.start .abc .item .r { display: inline-block; float: right; width: calc(50% - 50px); }
.start .abc .item i { font-style: normal; }
.start .abc .item i.f_small { font-weight: 300; }

.start .abc .item:nth-child(odd) .l { text-align: right; color: var(--main-color-light); text-transform: uppercase; font-size: 1.6em; font-weight: bold; }
.start .abc .item:nth-child(odd) .r { text-align: left; color: #FFFFFF; }
.start .abc .item:nth-child(even) .l { text-align: right; color: #FFFFFF; }
.start .abc .item:nth-child(even) .r { text-align: left; color: var(--main-color-light); text-transform: uppercase; font-size: 1.6em; font-weight: bold; }

.start .casestudies { }
.start .casestudies .item { display: inline-block; float: left; position: relative; overflow: hidden; width: 20%; height: calc(var(--max-width) / 5); height: 15vw;}
.start .casestudies .item img { transform: scale(1); filter: grayscale(1); opacity: 0.5; transition: all 0.75s; width: 100%; height: auto; position: absolute; top:-100%; left:0; right: 0; bottom:-100%; margin: auto; }
.start .casestudies .item img:hover { filter: grayscale(0); transform: scale(1.1); opacity: 0.9; }

.start .numbers { margin: -100px auto 50px auto; position: absolute; left: 0; right: 0; }
.start .numbers .box { perspective: 1500; float: left; width: calc(25% - 30px - 30px); text-align: right; -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.35); }

.start .ref_block { display: block; height: 400px; border: 0px #000000 solid; }

.flip-card { width: 100%; height: 200px; perspective: 1500; cursor: pointer; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: right; transition: transform 0.5s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-card-front { }
.flip-card-back { transform: rotateY(180deg); text-align: center; font-size: 0.9em; }

#dienstleistungen video { width: 100%; max-width: var(--max-width); height: auto; min-width: 320px; min-height: 180px; margin-top: -0px; opacity: 0.5; transition: opacity 1.0s linear; }
#dienstleistungen video:hover { opacity: 1.0; }

/* Referenzen */
#referenzen_sp {}
#referenzen_sp h4 { text-transform: uppercase; }
#referenzen_sp .item { display: block; width: calc(100% - 80px); padding: 40px; -webkit-box-shadow: inset 0px 15px 10px -10px rgba(0,0,0,0.5); -moz-box-shadow: inset 0px 15px 10px -10px rgba(0,0,0,0.5); box-shadow: inset 0px 15px 10px -10px rgba(0,0,0,0.5);}
#referenzen_sp .item .image { float: left; width: 250px; height: 210px; }
#referenzen_sp .item .image .adshadow { display: block; z-index: 5; width: 240px; height: 200px; margin-top: -190px; margin-left: 20px; background-color: rgba(0,0,0,0.5); }
#referenzen_sp .item .image img {
         z-index: 10;
         width: 100%;
         height: auto;
         -webkit-box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.5);
         -moz-box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.5);
         box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.5);
         transition: box-shadow 1s;
}

#referenzen_sp .item:hover .image img {
         -webkit-box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.9);
         -moz-box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.9);
         box-shadow: 0px 0px 40px 0px rgba(255,255,255,0.9);
}

#referenzen_sp .item .info { float: left; width: calc(100% - 250px - 50px - 200px - 50px); margin: 0px 48px; }

#referenzen_sp .item #tags span, #referenzen_sp_items #tags span { padding: 3px 10px; font-size: 0.8em; text-transform: uppercase; }
#referenzen_sp .item #tags span { border-color: transparent; }
#referenzen_sp .item .more { float: right; 200px; }
#referenzen_sp .item .more .button_color { width: calc(100% - 40px); padding: 10px 20px; margin: 20px 0px 0px 0px; max-width: 200px; font-size: 1.1em; color: #FFFFFF !important; }

#referenzen_sp_items .item .in { padding: 0px 0px 0px 0px; }
#referenzen_sp_items .item .in { display: table; }
#referenzen_sp_items .item .in .ad_preview { display: table-cell; text-align: center;  border: 0px solid #000000;}
#referenzen_sp_items .item .in .ad_info { display: table-cell; vertical-align: middle; padding: 0px 50px 0px 50px; }
#referenzen_sp_items .item .in .full { display: block; text-align: center; }
#referenzen_sp_items .item .in .ad_info.full { width: calc(100% - 100px); padding-top: 20px; }

#referenzen_sp_items .top_text { float: left; width: calc(100% - 240px); }
#referenzen_sp_items .top_logo { float: right; width: 200px; margin: 10px; text-align: center; }

#referenzen_sp_items button.referenz { position: relative; z-index: 1; background-color: #000000; border-radius: 20px; padding: 3px 10px; font-size: 1.0em; border: 2px #000000 solid; color: #ffffff; cursor: pointer; }
#referenzen_sp_items button.referenz:after { bottom: calc(100% - 0px); left: 50%; border: 0px solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-bottom-color: #000000; border-width: 9px; margin-left: -9px; }
#referenzen_sp_items button.referenz:hover { background-color: #ff5a00; border: 2px #ff5a00 solid; }
#referenzen_sp_items button.referenz:hover:after { border-color: rgba(0, 0, 0, 0); border-bottom-color: #ff5a00; }
#referenzen_sp_items button.referenz[disabled] { background-color: #FFFFFF; border-radius: 20px; padding: 3px 10px; font-size: 1.2em; border: 2px #000000 solid; color: #000000; opacity: 0.2; }

#referenzen_sp_items .copy { padding: 30px 0px; }

#referenzen_sp_items a.button { border-radius: 50px; background-color: transparent; border: 2px #000000 solid; padding: 5px 15px; font-size: 1.0em; font-style: italic; text-transform: uppercase; color: #000000; }
#referenzen_sp_items a.button:hover { background-color: #000000; color: #FFFFFF; }

#referenzen_sp_items .bg_dooh {
         display: table;
         width: 100%;
         height: 800px;
         background: #DFDFDF url(../../../upload/bg_dooh_h.jpg) left center no-repeat;
}
#referenzen_sp_items .bg_dooh iframe, #referenzen_sp_items .bg_dooh video { margin-top: 134px; border:1px solid #000000; }
#referenzen_sp_items .bg_dooh .ad_preview {
         display: table-cell;
         float: left;
         background: rgba(0,0,0,0.0);
         width: 600px;
         height: 800px;
         text-align: center;
}

#referenzen_sp_items .bg_dooh .ad_info { display: table-cell; text-align: left; vertical-align: middle; }
#referenzen_sp_items .bg_dooh .ad_info span { display: block; border: 0px #000000 solid; width: 80%; }

/* Kontakt */
#contact {}
#contact .dm { float: left; width: 40%; }
#contact .form { float: right; width: 50%; }

#contact .dm video { width: 100%; height: auto; max-width: 620px; }

#contact form {
         width: 80%;
         max-width: 1200px;
         margin: 20px auto;
         color: var(--font-color);
         font-size: 0.9em;
}
#contact form input[type="text"] { width: calc(100% - 20px); margin: 6px 0px; }
#contact form input[type="submit"] { width: calc(100% - 0px); margin: 6px 0px; }
#contact form textarea { width: calc(100% - 20px); margin: 5px 0px; }

#contact form #datenschutz {
         display: block;
         text-align: left;
         color: var(--font-color);
         padding: 10px 0px;
         margin: 10px 0px;
}
#contact a { color: var(--font-color); }

#error_massage_contact {
         display: none;
         position: relative;
        background: #DF0000;
         color: #FFFFFF;
         margin: 10px 0px 20px 0px;
}
#error_massage_contact:after {
        top: 100%;
        left: 10%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(233, 0, 0, 0);
        border-top-color: #DF0000;
        border-width: 10px;
        margin-left: -10px;
}

/* Animations / Typewriting */
h6 { display: inline-block; margin: 5px 0px 5px 0px; padding: 0px 0px 0px 0px; }

.type { opacity: 0.0; }

.typewriter h2 {
         overflow: hidden;
         border-right: .15em solid white;
         white-space: nowrap;
         margin: 0px auto;
         letter-spacing: .02em;
         animation: typing 2.0s steps(33, end), blink-caret .65s step-end infinite;
}

.typewriter h6 {
         overflow: hidden;
         border-right: .15em solid white;
         white-space: nowrap;
         margin: 0px auto;
         letter-spacing: .02em;
         animation: typing 2.0s steps(20, end), blink-caret .65s step-end infinite;
}

@keyframes typing {
         from { width: 0 }
         to { width: 100% }
}

@keyframes blink-caret {
         from, to { border-color: transparent }
         50% { border-color: white; }
}

@keyframes blink {
         from, to { -webkit-filter: drop-shadow( 0px 0px 30px rgba(0, 185, 170, 1.0)); filter: drop-shadow( 0px 0px 30px rgba(0, 185, 170, 1.0)); color: var(--main-color); }
         50% { -webkit-filter: drop-shadow( 0px 0px 30px rgba(0, 185, 170, 0.5)); filter: drop-shadow( 0px 0px 30px rgba(0, 185, 170, 0.0)); color: var(--main-color-light); }
}


/* Navigation */
#navi { position: fixed; z-index: 100; display: none; left: 50px; top: 30px; width: 38px; height: 38px; padding: 12px; margin: 0px; background:#FFFFFF url(../images/navigation.png) center center no-repeat; background-size: 40px 40px !important; cursor: pointer; }
#navi:hover { background:var(--main-color-dark) url(../images/navigation_hover.png) center center no-repeat; }

#navigation { display: none; position: fixed; z-index: 1000; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100vh; background: rgba(1,50,58,0.9); }
#navigation ul { display: block; margin: 20px auto; position: fixed; top: 20%; padding: 0px; min-width: 300px; width: 500px; }
#navigation ul li { cursor: pointer; list-style: none; margin: 0px; padding: 3px 0px; text-align: center; display: block; color: #FFFFFF; font-size: 2.0em; font-weight: bold; text-decoration: none; border: 0px; padding: 10px 0px; text-shadow: 2px 2px 1px rgba(0,0,0,0.25); background: linear-gradient(var(--main-color-light) 0 0) bottom left/ var(--underline-width, 0%) 100% no-repeat; transition: background-size 0.3s; }
#navigation ul li:hover { --underline-width: 100%; }
#navigation ul li a { cursor: pointer; text-align: center; display: block; color: #FFFFFF; font-weight: bold; text-decoration: none; border: 0px; text-shadow: 2px 2px 1px rgba(0,0,0,0.25); }


/* Sonstiges */
.close { display: block; position: absolute; z-index: 1001; right: 50px; top: 30px; width: 38px; height: 38px; padding: 12px; margin: 0px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #FFFFFF url(../images/close.png) center center no-repeat; background-size: 40px 40px !important; cursor: pointer; }
.noScroll { overflow: hidden; position: absolute; width: 100%; }
#shadow { display: none; background-color: rgba(0, 0, 0, 0.55); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 1000; width: 100%; height: 100%; cursor: pointer; }
#w { display: none; position: fixed; z-index: 100; left: 0px; bottom: 0px; color: #FFFFFF; padding: 5px; background: #BF0000; }

#top {
         position: fixed;
         z-index: 100;
         display: none;
         right: 20px;
         bottom: 20px;

         font-size: 0.9em;
         color: #FFFFFF;
         text-align: center;
         font-weight: bold;

         line-height: 40px;
         width: 40px;
         height: 40px;
         padding: 0px 0px;
         margin: 0px;

         background-color: #000000;

         cursor: pointer;
         -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        border-radius: 50px;
         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.0);

        transition: all 0.4s;
}

#top:hover {
        background-color: #FFFFFF;
         color: #000000;
         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

/* top */
#blabla { display: none; position: fixed; z-index: 1001; width: calc(86% - 30px); max-width:500px; height: auto; left: calc(50% - 250px); top: 50%; padding: 15px; background: #FFFFFF; color: #000000; font-size: 1.3em; }
#blabla b { display: block; text-align: center; font-size: 1.4em; color: var(--main-color); margin: 0px 0px 5px 0px; }
#blabla u { display: block; text-align: center; font-size: 1.2em; font-weight: bold; text-decoration: none; margin: 0px 0px 0px 0px; }
#blabla .blabla_checkbox { display: inline-block; float: left; width: 80px; text-align: left; margin: 0px 0px 0px 0px; }
#blabla .blabla_text { display: inline-block; float: right; width: calc(100% - 80px); text-align: left; font-size: 0.9em; margin: 0px 0px 10px 0px; }

#blabla-option { display: block; position: fixed; z-index: 100; width: 42px; height: 42px; right: 0px; bottom: calc(50% - 0px); padding: 10px; background: #FFFFFF url(../images/icon_agentur_c.png) 10px center no-repeat; background-size: 42px 42px !important; cursor: pointer; -webkit-border-top-left-radius: 50px; -webkit-border-bottom-left-radius: 50px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomleft: 50px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; }
#blabla-option:hover { background: var(--main-color) url(../images/icon_agentur_w.png) 10px center no-repeat; }


/* Schwärzen */
.redact {
         background: linear-gradient(#000 0 0) no-repeat;
         background-size: 0% 100%;
         transition: background-size 0.5s ease;
         box-decoration-break: clone;
         -webkit-box-decoration-break: clone;
}

/* aktiv */
.redact.is-redacted {
         color: transparent;
         background-size: 100% 100%;
}

/* Fridolin */
#dude {
         position: fixed;
         left: 50%;
         bottom: 0;
         transform: translateX(-50%) translateY(100%);
         cursor: pointer;

         width: 300px;
         height: 100px;

         background-image: url("../images/fridolin_ani_1.png");
         background-size: cover;
         background-position: center;

         animation: slideInOut 14s ease-in-out forwards, dudeSwap 12s ease-in-out forwards;
}
#dude img { display: none; }

/* Slide-In / Slide-Out Animation */
@keyframes slideInOut {
  0% {
    transform: translateX(-50%) translateY(100%);
  }
  30% {
    transform: translateX(-50%) translateY(0);
  }
  90% {
    transform: translateX(-50%) translateY(0);
  }
  100% {
    transform: translateX(-50%) translateY(100%);
  }
}

@keyframes dudeSwap {
  0% {
    background-image: url("../images/fridolin_ani_1.png");
  }
  20% {
    background-image: url("../images/fridolin_ani_2.png");
  }
  25% {
    background-image: url("../images/fridolin_ani_3.png");
  }
  30% {
    background-image: url("../images/fridolin_ani_2.png");
  }
  35% {
    background-image: url("../images/fridolin_ani_1.png");
  }
  40% {
    background-image: url("../images/fridolin_ani_2.png");
  }
  75% {
    background-image: url("../images/fridolin_ani_3.png");
  }
  80% {
    background-image: url("../images/fridolin_ani_2.png");
  }
  85% {
    background-image: url("../images/fridolin_ani_1.png");
  }
  100% {
    background-image: url("../images/fridolin_ani_2.png");
  }
}

/* Seitenanzeige */
#pages {
        display: block;
        width: calc(100% - 20px);
        margin:10px 10px 10px 10px;
        line-height:40px;
        text-align: center;
}

#pages a, #pages a:link, #pages a:visited, #pages .apage {
         display: inline-block;
         height:40px;
         width:40px;

         padding: 0px 0px 0px 0px;
         margin: 2px 2px;

         font-size: 1.1em;
         color: var(--font-color-dark);
         font-weight: bold;
         text-decoration:none;
         text-align: center;

         background-color: var(--main-bg-color);
         border: 2px var(--main-bg-color-dark) solid;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#pages a:hover {
         color: var(--main-color);
         background-color: #FFFFFF;
         border: 2px var(--main-color) solid;
}

#pages .apage {
         background-color: var(--main-color);
         border: 2px var(--main-color) solid;
         color: var(--font-color-light);
}

/* CDI-Reset Box */
#cdi_reset_info {
         display: block;
         width: calc(100% - 20px);
         margin: 10px 0px;
         padding: 10px 10px 10px 10px;
         background-color: var(--highlight-color);
         color: var(--font-color-dark);
         -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
         border-radius: 20px;
         text-align: center;
}
#cdi_reset_info form { height: 50px; font-size: 0.8em; }

/* Tags */
#tags a, #tags span {
         display: inline-block;
         border-radius: 20px;
         padding: 3px 10px;
         margin: 0px 10px 5px 0px;
         background: var(--main-color-light);
         color: var(--font-color-light);
         font-weight: 700;
         transition: all 0.5s;
         cursor: pointer;
}
#tags.boxed:nth-child(odd) a { background: #FFFFFF; }

#tags a:hover, #tags span:hover {
         background: var(--highlight-color) !important;
         color: var(--font-color-dark);
}


/* Forms */
input[type="text"], input[type="password"], select, textarea {
         background: #f6f6f6;

         font-size: 1.1em;
         color: #000000;

         padding: 5px 10px;
         margin: 5px 0px;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;


         -webkit-box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
         box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
}
input.error, select.error, textarea.error, .error { border: #DF0000 2px solid !important; }
input.ok, select.ok, textarea.ok { border: #20cba0 2px solid !important; }

input::placeholder, textarea::placeholder { text-transform: uppercase; }

input[type="submit"] {
         background: var(--main-color);
         background: #000000;

         color: #FFFFFF;
         font-size: 1.1em;
         font-weight: bold;
         padding: 6px 15px 6px 15px;
         text-shadow: 1px 1px 1px rgba(0,0,0,0.25);

         cursor: pointer;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 4px;
         -moz-border-radius: 4px;
         border-radius: 4px;

         -webkit-box-shadow: 0px 20px 15px -10px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 20px 15px -10px rgba(0,0,0,0.25);
         box-shadow: 0px 20px 15px -10px rgba(0,0,0,0.25);

         -webkit-box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
         box-shadow: 0px 8px 4px -5px rgba(0,0,0,0.25);
}
input[type="submit"]:hover { background-image: linear-gradient(to bottom, var(--main-color), var(--main-color-light)) !important; }



input[type="checkbox"] { display:none; }
input[type="checkbox"] + label {
          width: 60px;
          height: 30px;
          border-radius: 30px;
          border: 2px solid #ddd;
          background-color: #EEE;
          display: inline-block;
          content: "";
          float: left;
          margin-right: 15px;
          transition: background-color 0.5s linear;
          margin-top: 0px;
}
input[type="checkbox"] + label:hover {
          cursor: pointer;
}
input[type="checkbox"] + label::before {
          width: 24px;
          height: 24px;
          border-radius: 30px;
          background-color: #fff;
          display: block;
          content: "";
          float: left;
          margin: 3px 15px 0px 3px;
          transition: margin 0.1s linear;
          box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
input[type="checkbox"]:checked+label{
          background-color: var(--main-color);
          border: 2px solid var(--main-color-dark);
}
input[type="checkbox"]:checked+label::before {
          margin: 3px 0px 0px 30px;
          box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

/* SCode */
#scode { display: block; position: relative; float: left; margin: 5px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important; width: calc(6 * 16px); line-height: 6px !important; background-color: var(--main-color); border: 5px #000000 solid; }
#scode:after { left: 100%; top: 50%; border: solid transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-left-color: var(--main-color); border-width: 20px; margin-top: -20px; }
#scode span, #scode span.black, #scode span.white { display: inline-block !important; float: left; margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important; height: 6px !important; width: 4px !important; line-height: 6px !important; border: 0px var(--main-color) solid; }

.sc { display: block; float: right; width: 300px; margin-top: 5px; }
.sc b { display: block; float: left; width: 120px; color: var(--main-color); text-align: right; font-size: 0.9em; line-height: 1.1em; padding-top: 10px; }

input[type="text"].sc { font-size: 1.4em; width: 150px !important; padding: 5px 10px; font-weight: bold; text-align: center; }
#scode span.black { background-color:#FFFFFF; color: var(--main-color); }
#scode span.white { background-color:var(--main-color); color:var(--main-color); }



.bg-hl-1 #scode { background-color: #000000; }
.bg-hl-1 #scode:after { border-left-color: #000000; }
.bg-hl-1 .sc b { color: #000000; }
.bg-hl-1 #scode span.black { background-color:#FFFFFF; color: #000000; }
.bg-hl-1 #scode span.white { background-color: #000000; color: #000000; }