/*
######################################
        Media-Queries
###################################### */

@media (max-width: 1400px) {
         .in { width: calc(100% - 100px); padding: 0px 50px; }
         #header .logo { width: 100px; }

         .start .departments .item { font-size: 0.9em; }
         .start .departments .item span b { font-size: 0.8em; }
         .start .departments .item i { width: calc(100% - 40px); height: 120px; padding: 20px 20px; }

         .start .tags span { font-size: 1.6em; line-height: 120px; }
         .start .tags span.stark { font-size: 0.7em; width: 200px; }

         .flip-card { font-size: 0.9em; }
         .flip-card-inner { font-size: 0.9em; }
         .flip-card-back { font-size: 1.1em; }
}

@media (max-width: 1240px) {
         #header .navigation { padding: 0px 15px; }

         #header .navigation a { padding: 0px 7px; font-size: 1.2em; }
         #header .navigation a.x1 { display: none; }

         .content { font-size: 1.2em; line-height: 1.3em; }

         #footer .bg-main-2 { text-align: center; }
         #footer .bg-main-2 .l { display: inline-block; width: 500px; float: none; text-align: left; }
         #footer .box { float: none; display: block; width: calc(100% - 0px); padding: 10px 0px 10px 0px; margin: 0px 0px 0px 0px; color: #FFFFFF; font-size: 1.0em; text-align: center; border-top: 1px rgba(255,255,255,0.1) solid; }
         #footer .box a, #footer .box b { display: inline-block; font-size: 1.2em; padding: 10px 10px; text-align: left; border-top: 0px rgba(255,255,255,0.1) solid; }


         .pad_top        { padding: 30px 0px !important; }
         .pad_top_big    { padding: 60px 0px !important; }
         h1, h2, h3, h4, h5, h6 { line-height: 1.2em; }

         .start h1 { font-size: 3em; }
         .start h3 { font-size: 1.8em; }
         .start h6 { font-size: 2.8em !important; }
         .f_head { font-size: 3.0em !important; }
         .f_big  { font-size: 1.2em !important; }
         .f_bigger { font-size: 1.4em !important; }

         .start .numbers { margin: -80px auto 50px auto; position: absolute; left: 0; right: 0; }
         .start .casestudies .item { width: calc(100% / 3); height: 20vw; }

         .start .tags span { font-size: 1.4em; line-height: 100px; }
         .start .tags span.stark { font-size: 0.6em; width: 160px; }

         #contact { padding-top: 8% !important; }

         /* Referenzen  */
         #referenzen_sp .item .info { float: right; width: calc(100% - 50px); margin: 50px 48px 0px 48px; }
         #referenzen_sp_items iframe {}
         #referenzen_sp_items .bg_dooh { height: 700px; background: #DFDFDF url(../../../upload/bg_dooh_h.jpg) -100px center no-repeat; }
         #referenzen_sp_items .bg_dooh .ad_preview { width: 400px; height: 700px; }
         #referenzen_sp_items .bg_dooh iframe, #referenzen_sp_items .bg_dooh video { margin-top: 84px; }

}

@media (max-width: 1080px) {
         .in { width: calc(100% - 80px); padding: 0px 40px; }

         #hero { background-image: url(../images/demo-header-mobile.jpg) !important; }

         #header .navigation { max-width: calc(100% - 130px - 100px); }
         #header .contact { width: 130px; }
         #header .contact span.text { display: none; }

         .start .departments .item {  width: calc(100% / 2 - 40px); font-size: 1.0em; }
         .start .departments .item:hover { width: calc(100% / 2 - 20px); margin: 20px 10px; }

         .start .departments .item i { width: calc(100% - 40px); height: 80px; padding: 20px 20px; }

         .start .numbers .box { width: calc(50% - 30px - 30px); }
         .start .ref_block { height: 650px; }

}

@media (max-width: 980px) {
         #header .navigation a.x2 { display: none; }

         .content { font-size: 1.1em; line-height: 1.3em; }

         .start { font-size: 1.2em; }
         .start h1 { font-size: 2.4em; }
         .start h2 { font-size: 1.7em; }
         .start h3 { font-size: 1.4em; }

         #contact .dm { float: none; width: 100%; max-width: 620px; margin: 0px auto; }
         #contact .form { float: none; width: 100%; }
         #contact form { width: 90%; max-width: 620px; }

         .start .numbers { margin: 0px auto 20px auto; }
         .start .ref_block { height: 700px; }

         .start .tags span { display: block; width: 100%; font-size: 1.3em; line-height: 60px; padding: 0px 0px; margin: 0px 0px; }
         .start .tags span.stark { font-size: 0.8em; line-height: 100px; width: 100%; }

         .start .tags span.video { display: block; width: 320px; height: 180px; margin: 50px 50px; }

}


@media (max-width: 820px) {
         .in { width: calc(100% - 60px); padding: 0px 30px; }

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

         #header { height: 60px; margin: 30px auto; }
         #header .logo { float: none; display: block; width: calc(100% - 0px); height: 60px; }
         #header .logo img { width: 78px; height: auto; margin:-10px; }
         #header .navigation { display: none; }
         #header .contact { position: absolute; top: 0px; right: 50px; }

         #navi { display: block; }
         #navigation ul li { font-size: 1.6em; }

         #wrapper.under #hero { height: 120px; }

         .start .abc .item i { display: none; }
         .start .departments .item i { height: 100px; }
}

@media (max-width: 720px) {
         #hero { background-image: url(../images/demo-header-mobile.jpg) !important; background-size: 150%; height: calc(100vw / 1.2); }
         #navi { left: 30px; }
         #header .contact { right: 30px; }

         #footer .bg-main-2 { font-size: 0.7em; }
         #footer .bg-main-2 .l { width: 320px; }
         #footer .bg-main-2 .l b { font-size: 0.8em; }
         #footer .bg-main-2 .logo { padding-top: 10px; }
         #footer .bg-main-2 .logo img { width: 65px; height: auto; }
         #footer .bg-main-1 .l, #footer .bg-main-1 .r { float: none; display: block; text-align: center; }
         #footer .box { padding: 5px 0px 5px 0px; margin: 0px 0px 0px 0px; }
         #footer .box a, #footer .box b { padding: 10px 10px; }

         .start h2 { font-size: 1.4em; }
         .start .departments .item {  width: calc(100% / 2 - 30px); font-size: 0.9em; margin: 15px; }
         .start .departments .item:hover { width: calc(100% / 2 - 30px); margin: 15px; }
         .start .departments .item i { width: calc(100% - 20px); padding: 20px 10px; }

         .start .numbers .box { width: calc(50% - 10px - 30px); margin: 10px 0px 10px 0px; }
         .start .numbers .box:nth-child(2), .start .numbers .box:nth-child(4) { float: right; }

         .start .ref_block { height: 720px; }
         .start .casestudies .item { width: 50vw; height: 45vw; }

         .start .abc .item { background: none; display: table; }
         .start .abc .item .c, .start .abc .item .clear { display: none; }

         .start .abc .item:nth-child(odd) .l { display: table-cell !important; float: none !important; vertical-align: middle; text-align: left; width: 180px !important; font-size: 1.4em; }
         .start .abc .item:nth-child(odd) .r { display: table-cell !important; float: none !important; text-align: justify; }

         .start .abc .item:nth-child(even) .l { display: table-cell !important; float: none !important; text-align: justify; }
         .start .abc .item:nth-child(even) .r { display: table-cell !important; float: none !important; vertical-align: middle; text-align: right; width: 180px !important; font-size: 1.4em;  }

         #referenzen_sp_items .top_text, #referenzen_sp_items .top_logo { display: block; float: none; width: calc(100% - 0px); }
         #referenzen_sp_items .item .in { display: block; }
         #referenzen_sp_items .item .in .ad_preview,
         #referenzen_sp_items .item .in .ad_info,
         #referenzen_sp_items .bg_dooh .ad_info { display: block; vertical-align: middle; padding: 0px 20px 20px 20px; width: calc(100% - 40px) !important; text-align: center; }
         #referenzen_sp_items .bg_dooh { height: auto; background: #F8F8F8 url(../../../upload/bg_dooh_mobile.jpg) top center no-repeat; }
         #referenzen_sp_items .bg_dooh iframe, #referenzen_sp_items .bg_dooh video { margin-top: 64px; border:1px solid #000000; }
         #referenzen_sp_items .bg_dooh .ad_info span { display: block; border: 0px #000000 solid; width: 100%; }

         #blabla-option { bottom: 80px; }
}

@media (max-width: 520px) {
         #navigation ul { min-width: 240px; width: 100%; }
         #blabla { width: calc(90% - 30px); left: 5%; top: calc(50% - 150px); font-size: 1.1em; }
         .close { right: 30px; top: 30px; width: 32px; height: 32px; background-size: 32px 32px !important; }

         .sc { width: 200px; margin-top: 10px; }
         .sc b { width: 80px; }
         input[type="text"].sc { font-size: 1.2em; width: 100px !important; padding: 5px 5px; }

         .l.w45, .r.w45 { float: none; width: calc(100% - 20px) !important; margin: 20px 0px 20px 0px; }
         .start .f_big .button { font-size: 0.9em !important; }

         .start .ref_block { height: 780px; }

         #cdi_reset_info input[type="submit"]{ font-size: 1.0em; }
}

@media (max-width: 440px) {
         h1 { font-size: 1.6em; }
         h2 { font-size: 1.4em; }
         h3 { font-size: 1.3em; }
         h4 { font-size: 1.1em; }

         #header { height: 50px; margin: 25px auto; }
         #header .logo img { width: 56px; height: auto; margin: 0px 15px 0px 0px; }
         #header .contact { width: 100px; height: 50px; line-height: 50px;  }
         #header .contact span { width: 50px; height: 50px; background-size: 32px 32px; }

         #navi { left: 25px; top: 25px; width: 32px; height: 32px; padding: 12px; background-size: 32px 32px !important; cursor: pointer; }
         #navigation ul li { font-size: 1.3em; }   
         #blabla { font-size: 1.0em; }

         .start .ref_block { height: 820px; }
         .start h1 { font-size: 1.8em; }
         .start h2 { font-size: 1.2em; }
         .start h3 { font-size: 1.1em; }

         .start .departments .item { width: calc(100% - 0px); font-size: 1.1em; margin: 15px 0px; }
         .start .departments .item:hover { width: calc(100% - 0px); margin: 15px 0px; }
         .start .departments .item i { height: auto; }

         .start .abc .item:nth-child(odd) .l { display: block !important; float: none !important; width: 100% !important; text-align: center; font-size: 1.4em; padding: 0px 0px 20px 0px; }
         .start .abc .item:nth-child(odd) .r { display: block !important; float: none !important; width: 100% !important; text-align: justify; }

         .start .abc .item:nth-child(even) .l { display: block !important; float: none !important; width: 100% !important; text-align: justify; }
         .start .abc .item:nth-child(even) .r { display: none !important; }
         .start .abc .item .l .hide { display: inline-block !important; color: var(--main-color-light); text-transform: uppercase; font-weight: bold; }

         .flip-card { font-size: 0.8em; }
         .flip-card-back { font-size: 1.0em; }

         #contact .f_head { font-size: 1.6em !important; }
}