@font-face {
            font-family: 'icomoon';
            src: url(-font/contacticons.eot);
            src: url(-font/contacticons.eot) format('embedded-opentype'), url(-font/contacticons.ttf) format('truetype'), url(-font/contacticons.woff) format('woff'), url(-font/contacticons.icomoon.svg) format('svg');
            font-weight: normal;
            font-style: normal;
        }
        
        [class^="icon-"],
        [class*=" icon-"] {
            font-family: 'icomoon';
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
        }
        
        .icon-f:before {
            content: "\e900";
        }
        
        .icon-mail:before {
            content: "\e901";
        }
        
        .icon-x:before {
            content: "\e902";
        }
        
        body {
            font-family: 'Open Sans Condensed', sans-serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            font-size: 16px;
        }

        
        .container-fluid {
            padding-right: 0!important;
            padding-left: 0!important;
        }

        .row {margin-left: 0;margin-right: 0}
        
        div.red {
            background-color: #f14e49;
        }
        
        div.black {
            background-color: #000;
            color: #fff
        }
        
        div.blue {
            background-color: #0f6d77;
        }
        
        div.mint {
            background-color: #2df0c3;
        }
        
        .dummy {
            padding: 10% 5%;
        }
        
        .tk {
            text-transform: uppercase;
            letter-spacing: 0.3em;
        }
        
        .topintro {
            padding: 20% 50px;
            background: #000 url(-i/bg-canyon.jpg) top center no-repeat;
            background-size: cover;
            border-bottom: 1px solid #000;
        }
        
        .topintro h2 {
            font-size: 1.5em;
            color: #fff;
        }
        
.canyon-home {
    padding: 10% 5%;
    background-color: rgba(0,0,0,0.01)
}

        .canyon {
            background: #000 url(/work/-i/can-teaser.jpg) top center no-repeat;
            background-size: cover;
            border-top: 1px solid #000;
            background-color:rgba(0,0,0,0.75);
            height: 300px;
        }

        .tks {
            background: #000 url(/work/-i/tks-projekt.jpg) top center no-repeat;
            background-size: cover;
            border-top: 1px solid #000;
            background-color:rgba(0,0,0,0.75);
            height: 300px;
        }

        
        .mitteltext {
            padding: 2%;
        }

        .mitteltext div.col-md-6 {
        padding: 5% 2%;
}

        span.fa {
            font-size: 12px!important;
            padding: 1px;
        }

        h1,h2,h3 {text-transform: uppercase;}
        
        h4.links {
            margin-top: 40%;
            z-index: 20!important;
        }
        
        @media screen and (max-width: 768px) {
            h4.links,
            h2.tk {
                font-size: 14px!important;
            }
            .splash {
                padding-top: 50%!important;
            }
             .mitteltext div.col-md-6 div.justify p.lead {
                text-align: center;
            }
           
            
        }

        @media screen and (max-width: 640px) {
            .minihead h2 {
                background-size: 95%!important;
                font-size: 1.2em!important;
                padding-top: 35%!important;
                margin-bottom: 20%!important;
            }
            .row.footer {
                padding-top:10%!important; padding-bottom: 10%!important;
            }
            
        }
        
        .splash {
            background: #000 url(/-i/bg-t.jpg) top center no-repeat;
            background-size: cover;
            color: #fff;
            z-index: 1;
            padding-top: 45%;
        }
                
        .tk-typo {
            background: url(-/i/t.png) top center no-repeat;
            background-size: contain;
            width: 100%;
            height: 100%;
            display: inline-block;
            position: relative;
            bottom:20%;
            z-index: 20!important;
        }
        
        @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
            .raster {
                display: none
            }
            .dummy img {
                height: 40px!important;
            }
            .dummy.gh img {
                max-width: 100px!important;
                height: auto!important
            }
            .topintro {
                height:500px!important;
            }
            
        }
        
        @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
            .raster {
                display: none
            }
            .dummy img {
                max-height: 60px!important;
            }
            .dummy.gh img {
                max-width: 200px!important;
                height: auto!important
            }
        }
        
        .dummy img {
            width: auto;
            max-height: 60px;
            max-width: 200px;
        }
        
         a.clink {
            color: white;
            font-size: 48px;
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
            background-color: none;
            border-radius: 50%;
            width: 100px;
            height: 100px;
            display: inline-block;
            line-height: 100px;
            transition: transform 0.3s, width 0.3s, height 0.3s, background-color 0.3s, color 0.4s;
             margin: 3%;
        }
        
         a.clink:hover {
            color: #2df0c3;
            -ms-transform: scale(1.1,1.1); /* IE 9 */
            -webkit-transform: scale(1.1,1.1); /* Safari */
            transform: scale(1.1,1.1);
            background-color: aquamarine;
            color: black;
            
        }
        
        

.minihead, .row.footer {
    color: #fff;
    background-color: #000;
}
        
.minihead h2 {
    background: url(-i/art-d-w.png) center no-repeat;
    background-size: 40%;
    font-size: 1em;
    text-transform: uppercase;
    padding-top: 15%;
    margin-bottom: 5%
}

.row.impressum {
    color: #202020;
}
    
.row.footer div {
    padding-top:3%; padding-bottom: 3%;
}

.row div.row {
    margin-left: -15px!important;margin-right: -15px!important;
}

.footer a {
    color: #fff;
    text-decoration:none;
    text-transform: uppercase;
    display: inline-block;
} 

a {
    transition:  color 0.2s;
}

.footer a:hover {
    color: #2df0c3;
    
}

.table {
    background-color: transparent!important;
}

.table td {
    border-top-color: #000!important;
}

.tknav {
    background-color: black;
    font-size: 32px;
    color: #fafafa;
    text-transform: uppercase;
    font-family: 'Bebas Neue Regular';
    border-radius: 0;
    padding-top: 60px; padding-bottom: 60px;
    margin-bottom: 0;
}

h1,h2,h3,h4,h5 {
    font-family: 'Bebas Neue Regular';
}

.tknav .icon-bar {background-color: #fff;}
.tknav a {color: white;} .tknav a:hover {background: none;}

.nav li a:focus, .nav li a:hover, a.active
{background: none; color:#2df0c3}

.nav li a {
    padding: 20px;
}

a.navbar-brand {
    padding: 0 75px;
    margin-top: -10px;
    color:#fff;
}


a.navbar-brand img {
    display: inline-block;
    text-align: center;
}
a.navbar-brand h3 {
    font-size: 13px;
    text-align: center;
    margin-top: -4%;
    letter-spacing: 0.3em;
    -webkit-font-smoothing: antialiased;
}



@font-face {
  font-family: 'Bebas Neue Regular';
  src: url('-font/bbas/BebasNeue Regular.eot'); /* IE9 Compat Modes */
  src: url('-font/bbas/BebasNeue Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('-font/bbas/BebasNeue Regular.woff') format('woff'), /* Modern Browsers */
       url('-font/bbas/BebasNeue Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('-font/bbas/BebasNeue Regular.svg#3166c81ac2dcbbc5ab3c7185cfcd2ecc') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}

@media (max-width: 768px) {
    .tknav {padding-top: 10px; padding-bottom: 10px;}
    
    a.navbar-brand img {width: 150px;}
    
    a.navbar-brand h3     { margin-top: -3px; font-size: 12px;   }   
    
    .navbar-toggle        { margin-top: 30px;    }
    
    .navbar .navbar-nav, .navbar-brand {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse, .navbar-brand {
        text-align: center;
    }
    
    a.navbar-brand {
    display: block;
        height: auto;
        padding: 20px 75px!important;

    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
    }
    .navbar-nav li {
        float: none;
    }
    .navbar-nav li a {

    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}


.-w                 {    background-color: #fff;        }
.-w li a, .-w h3    {    color:#202020;                 }
.-w .icon-bar       {    background-color: #000;        }
.-w a.active        {    color: #2df0c3;                  }


#case div.white {
    background-color: #fdfdfd!important;
}

#case div.black {
    background-color: #000!important;
}

#case p.lead {
    margin-top: 15px;
}


.video {
    padding: 0 5%;
}

#case div.casecontent {
    padding: 5%;
    min-height: 500px;
}

#case div.casecontent div {
    padding: 1%;
}

#canyon {
    background-color: #181716;
    
}
#art {background-color: #dadada}
#thyssenkruppschulte, #innoshop {
    background-color: #f3f3f3;
}

div.hero {
    background-size: cover!important;
    padding: 10% 5%;
}

#canyon div.hero {
            padding: 30% 5%;
            color: #202020;
            background: #181716 url(/work/-i/can-hero.jpg) bottom center no-repeat;
        }

#art div.hero {
        background: #e0e0e0 url(/work/-i/art-hero.jpg) bottom center no-repeat;
}

#thyssenkruppschulte div.hero {
            color: #202020;
            background: #181716 url(/work/-i/tksu-hero.jpg) center no-repeat;
}

#innoshop div.hero {
            color: #202020;
            background: #181716 url(/work/-i/3m-hero.jpg) center no-repeat;
}

.tksuintro {
    color: #fff;
    background-color: #297ca4;
    padding: 5%;
}
    

#innoshop div.hero {
    color: #de1501;
}

.responsive-video {
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
}


.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}