/*   __                 __                     __    ___ __ __           
/*  |  |--.-----.-----.|  |_.----.---.-.-----.|  |_.'  _|__|  |.--------.
/*  |    <|  _  |     ||   _|   _|  _  |__ --||   _|   _|  |  ||        |
/*  |__|__|_____|__|__||____|__| |___._|_____||____|__| |__|__||__|__|__|
/*
/* HTML5 Boilerplate v5.0 
/* Extra CSS von toeffy.com */


html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    font-family: trade-gothic-next, sans-serif;
    font-weight: 400;
    font-style: normal;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
    border: none;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

    section { position: relative; min-height: 200px; }

    nav {   position: fixed; z-index: 20; top: 0; width: 100vw;height: 200px}

    h1  {   text-transform: uppercase;font-family: trade-gothic-next-condensed, sans-serif;font-weight: 600; letter-spacing: 3px; font-size: 35px;margin: 0; }
    h2  {   margin: 0; text-transform: uppercase; font-family: trade-gothic-next-condensed, sans-serif; font-weight: 600; letter-spacing: 3px; font-size: 25px; }
    h3  {       font-weight: 100; font-size: 33px; letter-spacing: 2px;  line-height: 40px; }
    h5  {       margin: 0;font-size: 16px;text-transform: uppercase;font-weight: 300;font-style: italic;letter-spacing: 0px; }
    h4  {       text-transform: uppercase;font-size: 45px;margin: 0;padding: 0;font-family: trade-gothic-next-condensed, sans-serif;font-weight: 600;letter-spacing: -1px;line-height: 55px; }

    .content a, .content a:visited {color:#ffffff;text-decoration:underline; }
    .content a:hover {color:#000000;}

    .bg_weiss   { background-color: #ffffff; color: #000; }
    .bg_schwarz { background-color: #000000; color: #fff; }   
    .bg_grau    { background-color: #282828; color: #fff; }   

    .fenster    { height: 100vh; width: 100%; overflow: hidden; }

    .ecke       { width:100%; position:absolute; z-index:10; }
    .ecke img   { width: 100%; height: auto;    vertical-align: top; }
    .oben       { top:0; }
    .unten      { bottom:0; }
    .oben img   { vertical-align: top; }
    .unten img  { vertical-align: bottom; }

    .navback    { opacity: 0.8; position: absolute;width: 100%;}
    .blackblock { height: 140px; }
    .logo       { z-index: 15; position: fixed;top:32px;left:155px;}
    .logo img   { width: 50% }
    .links      { z-index: 15; position: fixed;top:80px;right:155px;}
    .links li, .linksm li   { display: inline; list-style: none; padding: 0 0 0 30px; font-size: 14px; text-transform: uppercase;font-family: trade-gothic-next-condensed, sans-serif;font-weight: 400;letter-spacing: 2px; }
    .links li a, .linksm li a { color: #fff; text-decoration: none; }
    .links li img {padding: 0 5px 0 0;}
    .linksm li { display: block;font-size: 34px; }

    .content    { max-width: 1610px; margin: 0 auto; position: relative; }
    .text1280   { max-width: 1280px; text-align: center; font-weight: 100; font-size: 20px; line-height: 35px; padding: 160px 0; }
    .text300    { max-width: 1280px; text-align: center; font-size: 14px; text-transform: uppercase; font-family: trade-gothic-next-condensed, sans-serif; font-weight: 400; letter-spacing: 2px; padding: 50px 0 70px 0; }
    .text400    { max-width: 680px; padding: 0px 0 210px 150px; }
    .text_hi    { max-width: 600px; padding: 50px 0 70px 0; padding: 180px 0 140px 0; }
    .text_nw    { padding: 130px 0 50px 0;    text-align: left; }
    .slash_trn  { padding: 60px 0 40px 0; }
    .slash_top  { position: relative; left: -30px; top: -10px; }

    .text_hi h1 { font-size: 39px; }

    .referenz   { display: inline-block; width: 314px; font-size: 14px; margin-top: 147px;text-align: center; }
    .hold       { white-space: nowrap;position: relative;left:0px; font-size:0; height: 400px; }
    .hold2      { white-space: nowrap;position: relative;left:0px; font-size:0; height: 400px; }
    .overflow   { overflow:hidden; width: 100%; position: relative;}
    .mid        { display: inline-block; text-align: left;vertical-align: top; }
    
    .newb       { padding: 0 50px;}
    .ntext      { max-width: 604px; padding: 0 100px 0 0; } 
    .nbild      { max-width: 900px;width: 100%;position: relative;} 
    .nbild img  { width: 100%; height: auto;}
    .newecke    { position: absolute;left: 0;top:0; }
    .ntext p    { font-weight: 100;font-size: 20px;line-height: 32px;padding: 10px 0 0 0; }
    .ntext p:nth-of-type(1)     { padding: 40px 0 0 0; }
    .ntext h2   { color: #828181;  }

    .kontakt_blk { display: inline-block; vertical-align: top; width: 49%; font-family: trade-gothic-next, sans-serif; font-weight: 100; letter-spacing: 1px; font-size: 20px; }
    .kontakt_blk span { font-weight: 600; }
    .konti      { padding-bottom: 40px;}

    .pers       { height: 841px; }
    .person     { display: inline-block; text-align: left; vertical-align: top;position:relative; }
    .rollover   { position: absolute; top: 0; left: 0; width: 502px; height: 741px; background-color: #ffffff; color: #000000; font-size: 20px; white-space: normal; padding: 100px 100px 0 100px;display:none;}
    .rollover h2{ font-size: 20px;color: #434242; }
    .rollover p { margin: 78px 0 0 0; line-height: 29px; }
    .lbrack     { position: absolute; left: -95px; top: 0; }
    .rbrack     { position: absolute; top: 0px; right: -95px; z-index: 1; }
    #per_links, #lei_links,#ref_rechts  { position: absolute;left: 50px;z-index: 11; cursor: pointer; }
    #per_rechts,#lei_rechts,#ref_links { position: absolute;right: 50px;z-index: 11; cursor: pointer; }
    #ref_rechts, #ref_links { top: 57px; }

    .feat_info  { color: #ffffff;position: absolute;left: 100px;top: 150px; font-weight: 100; font-size: 24px; line-height: 34px; }
    .feat_info h2 { font-size: 17px; letter-spacing: 1px; font-weight: 100; }
    .feat_info h1 { font-size: 28px; letter-spacing: 1px; }
    
    .leist  p   { text-align: left; }
    .leist h2   { font-size: 21px; margin: 0 0 5px 0; }
    .leistung   { height: 460px; }
    .lei_block  { height: 460px; width: 460px;margin-right:60px;background-color: #000000; display: inline-block; vertical-align: top; position: relative; text-align: center }
    .lei_pad    { padding: 0 0 100px 0; }
    .le_right   { position: absolute; top: 0px; left: -45px;}
    .le_left    { position: absolute; top: 0px;right: -45px;}
    .lei_drin   { display:none;position: absolute; width: 460px; height: 460px; background-color: #ffffff;top: 0;left: 0; color: #000000;font-size: 20px;}
    .lei_drin ul {list-style: none; text-align: left;line-height: 33px;margin: 40px 0 0 45px;font-weight: 100;}
    .lei_block h1 { font-size: 28px;letter-spacing: 2px;margin: 153px 0 0 0;}
    .lei_block h2 { font-family: trade-gothic-next, sans-serif; font-weight: 100; letter-spacing: 1px; line-height: 30px; margin: 10px 0 0 0; }
    .lei_slash  { position: absolute;top: 30px;right: -10px; }
    .extrapage  { padding: 100px 0; }

    #lo_rechts  {position: absolute;bottom: 570px;right: 50px; cursor:  pointer;}
    #lo_links   {position: absolute;bottom: 570px;left: 50px;cursor:  pointer;}

    #burger { position: fixed; z-index: 100; right: 20px; top: 20px; display: none; }
    #burger img { width: 75%; }

    #mobinav { padding-top: 70px; width: 100%;height: 100%; position: fixed; top: 0; right: 0; position: fixed;top: 0;left: 0;background-color: #000000;z-index: 100;}
    #close { position: absolute;top: 20px;right: 20px;}
    #mobinav { left: -3000px; }
    #sound { position: absolute;bottom: 70px; left: 80px; z-index: 19; cursor: pointer; opacity: 0.3;}
    #sound:hover { opacity: 1; }

    .wide { width: 100%; max-width: 100% }

    #slushi { position: absolute;left: 55px;width: 15px;top: 7px; }

   .vimeo-wrapper {  top: 0;left: 0;width: 100vw;height: 100vhz-index: -1; pointer-events: none;overflow: hidden;}

    .vimeo-wrapper iframe { width: 100%;height: 56.25vw;min-height: 100vh;min-width: 177.77vh;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}

    #projektplay { position: absolute;left: 50%;top: 50%;cursor: pointer; }

    .feat_info_2 {
            background-color: #000000;
            color: #ffffff;
            padding: 25px;
            display: none;
    }

    .viderapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videorapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

    /* Large Devices, Wide Screens */


    @media only screen and (max-width : 1645px) {
        .nbild { width: 50vw; }
        .ntext { max-width: 604px;padding: 0 55px;}
   }

    @media only screen and (max-width : 1520px) {
        .logo { display:none!important; }
        .ntext { max-width: inherit; padding: 0 100px;}
        .newb { display: inline-block;vertical-align: top;width: auto;}
        .newecke { display: none; }
        .nbild { width: 100%;text-align: center;margin: 40px 0 0 0;max-width: inherit; }
        .nbild img { width: 50%;height: auto;}
        .leist, .flip {    max-width: inherit;padding: 160px 50px;}
        .flip p, .leist p {text-align: left}
   }   

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1315px) {






     .links {display: none;}
    #burger {display: inline;}
    .logo { z-index: 15;position: fixed;top: 20px;left: 20px;width: 127px; display: inline!important; }
    .navback { top: -40px;}
    .hold {white-space: initial;position: static;left: initial;font-size: 0;height:auto; text-align: center;}
    .pers {height: auto;}
    .headlines { display: inline-block;width: 50%; }
    .lei_drin { display: inline-block;width: 49%;vertical-align: top;position: initial;}
    .lei_drin ul {margin: 40px 0 0 0;}
    .lei_block { width: 100%; margin: 0 0 50px 0;}
    .le_right, .le_left, .lbrack, .rbrack, .lei_slash, #lei_rechts, #lei_links, #per_rechts, #per_links {display: none;}
     #lo_rechts, #lo_links {display: none;}
    /* .referenz { margin-top: 110px;margin-bottom: 110px;} */
    .leistung {    margin: 0 50px;}
    .tidi { display: inline-block; width: 50%; vertical-align: top; }
    .tidi img { width: 120%; }
    .rollover {position: initial;height: auto;background-color: #000000;color: #ffffff;font-size: 20px;white-space: normal;display: inline-block;width: 40%;padding: 0 5%;}
    .rollover p {margin: 18px 0 0 0;}
    .person {margin: 0 0 60px 0;}
   }

   @media only screen and (max-width : 1315px) {
    .feat_info{ display: none; }
    .feat_info_2{ display: block; }
   }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
        
    .mobile{ overflow-x: scroll;overflow-y: hidden; -webkit-overflow-scrolling: touch;}
    .mobile{ &::-webkit-scrollbar {    display: none; }    }
    #ref_links, #ref_rechts {display: none;}

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
        .text400 {max-width: inherit;padding: 0px 0 210px 0;}
        .kontakt_blk {text-align: center;width:100%;}
        .feat_info {left: auto;padding: 0 50px;}
        .lei_drin, .headlines { display: inline-block;width: 100%}
        .lei_block {height: auto;}
        .lei_block h1 { margin: 95px 0 0 0;}
        .rollover { margin: -140px 0 50px 0; width: auto;}
        .tidi img { width: 100%; }
        .tidi { width: auto; }
        h3 { font-size: 19px;font-weight: 100;font-size: 24px;letter-spacing: 3px;line-height: 28px;}
        h2 { letter-spacing: 3px; font-size: 19px; }
        .text_hi h1 {font-size: 29px;}
        .text_hi {     padding: 180px 20px 140px 50px; }
        .ntext {max-width: inherit;padding: 0 50px;}
        .lei_drin ul {margin: 40px 0 0 20px; padding: 0;}
        /* h4 {    font-size: 31px; line-height: 30px; } */
        /*.referenz { margin-top: 50px;margin-bottom: 50px;    width: 220px;} */
   
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}