/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
    background-color:#fff;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

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

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

/*
 * A better looking default horizontal rule
 */

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

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

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

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: none;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

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

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

html {
    overflow-y:scroll;
    font-family:"Open Sans",Helvetica,Arial,sans-serif;
}

body { text-align:center; min-width:1000px; font-size:90%; }

a, a:active, a:visited { color:#222; }
a:hover { color:#000; text-decoration:none; }

.doubleblock { float:left; width:49.9%; min-height:10px; }

.darkbg a, .darkbg a:active, .darkbg a:visited { color:#ddd; }
.darkbg a:hover { color:#fff; }

.darkbg nav.small ul li a {
    background-image:url(../img/arrowdown-white.png);
}

.pagewidth {
    width:1000px;
    margin:0 auto;
    padding:20px 0;
}
.pagewidth.small { width:840px; }

#topline {
    overflow:hidden;
    height:4px;
    background-color:#162d40;
    width:100%;
    min-width:1000px;
    position:fixed;
    top:0;
    left:0;
    z-index:99;
}

header {
    width:100%;
    min-width:1000px;
    background-color:#fff;
    position:absolute;
    top:4px;
    left:0;
    z-index:100;
}

header div {
    width:960px;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    height:90px;
}

header img {
    float:left;
    margin-top:15px;
}

header nav.main ul {
    display:block;
    margin:0;
    padding:58px 0 0 0;
    list-style-type:none;
    text-align:right;
}
header nav.main ul li {
    display:inline;
    list-style-type:none;
    margin-left:16px;
}
header nav.main ul li a {
    font-weight:bold;
    text-decoration:none;
    text-transform:uppercase;
    color:#8a959f;
    font-size:0.8em;
}
header nav.main ul li.active a,
header nav.main ul li a:hover { color:#162d40; }

header nav.meta img { float:none; margin:0; }

nav.meta ul {
    display:block;
    list-style-type:none;
    margin:0;
    position:absolute;
    top:10px;
    right:20px;
    text-align:right;
    width:480px;
}
nav.meta ul li {
    display:inline;
    list-style-type:none;
    margin-left:20px;
}
nav.meta ul li a {
    text-transform:uppercase;
    color:#8a959f;
    text-decoration:none;
    font-size:0.8em;
}
nav.meta ul li a:hover { color:#162d40; }

section { overflow:hidden; position:relative; }
section h1 { font-size:2em; color:#162d40; text-transform:uppercase; }

nav.lvl2 { padding-bottom:40px; }
nav.lvl2 ul {
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
}
nav.lvl2 ul li {
    display:inline-block;
    list-style-type:none;
    padding:10px;
}
html.lt-ie8 nav.lvl2 ul li {
    zoom:1;
    display:inline;
}
nav.lvl2 ul li a {
    text-transform:uppercase;
    opacity:0.5;
    text-decoration:none;
    font-size:0.8em;
    color:#192d40;
    font-weight:bold;
}
.darkbg nav.lvl2 ul li a { color:#ccc; }

nav.lvl25 ul, nav.lvl3 ul {
    display:block;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:center;
}
nav.lvl25 ul li, nav.lvl3 ul li {
    display:inline-block;
    list-style-type:none;
    padding:10px;
}
html.lt-ie8 nav.lvl25 ul li, html.lt-ie8 nav.lvl3 ul li {
    zoom:1;
    display:inline;
}
nav.lvl25 ul li a, nav.lvl3 ul li a {
    text-transform:uppercase;
    opacity:0.5;
    text-decoration:none;
    font-size:0.8em;
    color:#192d40;
    font-weight:bold;
}
.darkbg nav.lvl25 ul li a, .darkbg nav.lvl3 ul li a { color:#ccc; }

img.left { float:left; margin:0 50px 20px 0; }
img.right { float:right; margin:0 0 20px 50px; }

.imgpad { padding-left:270px; }

.textleft { text-align:left; }

.clearer { clear:both; width:0; height:0; visibility:hidden; overflow:hidden; }

.slide { display:block; }

.closer {
    display:block;
    background:url(../img/close.png) no-repeat;
    width:40px;
    height:40px;
    z-index:50;
    position:absolute;
    top:20px;
    left:50%;
    margin-left:440px;
}
.lightbg .closer { background-image:url(../img/close-blue.png); }

#intro { position:relative; background:url(../img/intro2.jpg) no-repeat 50% top #162d40; height:662px; text-align:left; }
#intro h1 { color:#fff; font-weight:normal; line-height:170%; margin-top:8em; text-transform:none; font-size:25px; }
#intro h1 span, #intro h1 strong { padding:0.1em 0.7em; background:url(../img/black-50.png); }
#intro h1 strong { font-weight:bold; }
#intro h1 span.smaller { font-size:70%; }
#intro .movie {
    position:absolute;
    bottom:20px;
    left:50%;
    margin-left:-500px;
}
#intro nav.meta ul { left:50%; padding:0 20px 0 0; }
#intro nav.meta a:hover { color:#fff; }

/*
@-ms-viewport { width:device-width; }
*/

#video { background-color:#555; height:473px; }
#video .pagewidth { padding:0; }

h1 .lautschrift { text-transform:lowercase; font-style:italic; }

.slideelement { display:block; float:left; width:1000px; position:relative; }

.slideleft, .slideright {
    width:40px;
    height:40px;
    position:absolute;
    top:0;
}
.slideleft a, .slideright a {
    display:block;
    width:40px;
    height:40px;
    opacity:0.5;
}
.slideleft  { left:0; }
.slideleft a { background:url(../img/slideleft.png)  no-repeat; }
.slideright { right:0; }
.slideright a { background:url(../img/slideright.png) no-repeat; }

.darkbg { background-color:#162d40; color:#fff; }
.darkbg h1, .darkbg h2, .darkbg h3 { color:#fff; }

.darkbg input.text, .darkbg textarea, .darkbg .submit, .darkbg select {
    background-color:#8a969f;
    color:#fff;
    border-color:#8a969f;
}
.darkbg .submit:hover { color:#000; }

::-webkit-input-placeholder { color:#fff; }
:-moz-placeholder { color:#fff; }
::-moz-placeholder { color:#fff; }
:-ms-input-placeholder { color:#fff; }

.darkbg .slideleft a { background-image:url(../img/slideleft-white.png); }
.darkbg .slideright a { background-image:url(../img/slideright-white.png); }

#greifbar2 .slider .slideelement {
    width:840px;
    padding:0 80px;
    text-align:left;
}

#greifbar2 .closer { top:80px; }

#leistungsstark2 .slider .slideelement {
    width:840px;
    padding:0 80px;
    text-align:left;
}

#leistungsstark2 .closer { top:80px; }

#unternehmensdarstellung,
#anzeigenkonzeption,
#direktmarketing,
#verkaufsfoerderung,
#animation,
#kampagnen,
#webkonzeption,
#cms,
#technik,
#advertising,
#mailnewsletter,
#seo,
#sem,
#smm,
#software,
#apps,
#text,
#pr,
#corporatedesign,
#film,
#messe, #event, #promotion {
    text-align:left;
    color:#fff;
}

#messe .parallax, #messe .parallax2 {
    background-image:url(../img/messebg.png);
}
#event .parallax, #event .parallax2 {
    background-image:url(../img/eventbg.png);
}
#promotion .parallax, #promotion .parallax2 {
    background-image:url(../img/promotionbg.png);
}

#unternehmensdarstellung .parallax, #unternehmensdarstellung .parallax2 {
    background-image:url(../img/unternehmensdarstellungbg.png);
}
#anzeigenkonzeption .parallax, #anzeigenkonzeption .parallax2 {
    background-image:url(../img/anzeigenkonzeptionbg.png);
}
#direktmarketing .parallax, #direktmarketing .parallax2 {
    background-image:url(../img/direktmarketingbg.png);
}
#verkaufsfoerderung .parallax, #verkaufsfoerderung .parallax2 {
    background-image:url(../img/verkaufsfoerderungbg.png);
}
#kampagnen .parallax, #kampagnen .parallax2 {
    background-image:url(../img/kampagnenbg.png);
}
#webkonzeption .parallax, #webkonzeption .parallax2 {
    background-image:url(../img/webkonzeptionbg.png);
}
#cms .parallax, #cms .parallax2 {
    background-image:url(../img/cmsbg.png);
}
#technik .parallax, #technik .parallax2 {
    background-image:url(../img/technikbg.png);
}
#advertising .parallax, #advertising .parallax2 {
    background-image:url(../img/advertisingbg.png);
}
#mailnewsletter .parallax, #mailnewsletter .parallax2 {
    background-image:url(../img/mailnewsletterbg.png);
}
#seo .parallax, #seo .parallax2 {
    background-image:url(../img/seobg.png);
}
#sem .parallax, #sem .parallax2 {
    background-image:url(../img/sembg.png);
}
#smm .parallax, #smm .parallax2 {
    background-image:url(../img/smmbg.png);
}
#software .parallax, #software .parallax2 {
    background-image:url(../img/softwarebg.png);
}
#apps .parallax, #apps .parallax2 {
    background-image:url(../img/appsbg.png);
}
#text .parallax, #text .parallax2 {
    background-image:url(../img/textbg.png);
}
#pr .parallax, #pr .parallax2 {
    background-image:url(../img/prbg.png);
}
#film .parallax, #film .parallax2 {
    background-image:url(../img/filmbg.png);
}
#animation .parallax, #animation .parallax2 {
    background-image:url(../img/3dbg.png);
}
#corporatedesign .parallax, #corporatedesign .parallax2 {
    background-image:url(../img/corporatedesignbg.png);
}
#ausstellung .parallax, #ausstellung .parallax2 {
    background-image:url(../img/ausstellungbg.png);
}

#direktkontakt .parallax, #direktkontakt .parallax2 {
    background-image:url(../img/direktkontaktbg.png);
}
#direktkontakt .person {
    float:left;
    width:200px;
}


#newsletter1 .parallax, #newsletter1 .parallax2,
#newsletter2 .parallax, #newsletter2 .parallax2 {
    background-image:url(../img/newsletterbg.png);
}
#newsletter1 .buttons, #newsletter2 .buttons { width:385px; }

#stellenangebote { text-align:left; }
#stellenangebote .parallax, #stellenangebote .parallax2 {
    background-image:url(../img/stellenangebotebg.png);
}

#unternehmensdarstellung h1,
#anzeigenkonzeption h1,
#direktmarketing h1,
#verkaufsfoerderung h1,
#kampagnen h1,
#webkonzeption h1,
#cms h1,
#technik h1,
#advertising h1,
#mailnewsletter h1,
#seo h1,
#sem h1,
#smm h1,
#software h1,
#apps h1,
#text h1,
#pr h1,
#corporatedesign h1,
#film h1,
#animation h1,
#ausstellung h1 {
    color:#fff;
}

#anfahrt { background-color:#162d40; }
#anfahrt .parallax, #anfahrt .parallax2 {
    background-image:url(../img/anfahrtbg.png);
}
#anfahrt h1 { color:#fff; margin:0; padding:20px 0; line-height:40px; }

#map { height:500px; }

form .buttons { text-align:right; }

input.text, textarea, select {
    border:1px solid #ccc;
    background-color:#fff;
    padding:10px 13px;
    line-height:12px;
    margin-right:20px;
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}
input.text { width:155px; }
select { width:183px; }
textarea { line-height:1em; }
input.submit {
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    background-color:#ccc;
    color:#fff;
    text-transform:uppercase;
    font-weight:bold;
    padding:10px 40px;
    cursor:pointer;
    border:none;
}
input.submit:hover { background-color:#b1b8be; color:#fff; }

.mailform input.text.error, .mailform textarea.error { border-color:#f00; }

.fehler {
    border:2px solid #f00;
    padding:10px 30px;
    text-align:center;
    color:#f00;
    margin-bottom:30px;
    display:none;
}
.danke {
    text-align:center;
    margin-bottom:30px;
    display:none;
    font-weight:bold;
}

#kontaktdaten, #newsletter1, #newsletter2 { text-align:left; }
#newsletter form { text-align:center; }

#kontaktdaten .parallax, #kontaktdaten .parallax2 {
    background-image:url(../img/kontaktdatenbg.png);
}
#kontaktdaten textarea { width:400px; height:125px; }
#kontaktdaten input.text { margin-right:20px; width:155px; }
#kontaktdaten form p { height:40px; padding:0; }

#konzepte {
    height:500px;
    background:url(../img/konzeptebg.jpg) 50% top no-repeat #242c32;
}
#konzepte h1, #konzepte h2 {
    color:#fff;
    font-weight:normal;
    text-transform:none;
    text-shadow:2px 2px 10px #333;
    white-space:nowrap;
}
#konzepte h1 { font-size:350%; margin-top:150px; }
#konzepte h2 { font-size:200%; }

#aktuell {
    background:url(../img/aktuellbg.jpg) 50% top no-repeat #182b3a;
    height:500px;
}
#aktuell h1 { margin-top:100px; }

#bewegt .pagewidth { padding:20px 0; width:1000px; }
#bewegt .slideelement { width:840px; padding:0 80px; text-align:left; }
#bewegt .parallax, #bewegt .parallax2 {
    background-image:url(../img/bewegtbg.png);
}
#bewegt nav.lvl3.small a { background-image:url(../img/direktkontakt-mini.png); }

#leistungsstark {
    height:500px;
    background:url(../img/leistungsstarkbg.jpg) 50% top no-repeat #192243;
}
#leistungsstark h1 { margin-top:100px; }

#klassisch .slideelement,
#digital .slideelement,
#woertlich .slideelement,
#gestalterisch .slideelement,
#bildlich .slideelement,
#live .slideelement {
    width:840px;
    padding:0 80px;
    text-align:left;
}

#klassisch .parallax,
#digital .parallax,
#woertlich .parallax,
#gestalterisch .parallax,
#bildlich .parallax,
#live .parallax {
    color:#fff;
    background-image:url(../img/smileybg.png);
}

#klassisch .parallax2,
#digital .parallax2,
#woertlich .parallax2,
#gestalterisch .parallax2,
#bildlich .parallax2,
#live .parallax2 {
    background-image:url(../img/smileybg2.png);
}

#klassisch h1,
#digital h1,
#woertlich h1,
#gestalterisch h1,
#bildlich h1,
#live h1 {
    color:#fff;
}

#team {
    background:url(../img/teambg.jpg) no-repeat 50% top #1f272a;
    height:500px;
}
#team h1 { text-shadow:0 0 10px #000; }
#team .pagewidth { position:relative; }
#team img { margin:40px 146px 0 146px; }
#team area { outline:0; }

#teampopup {
    position:absolute;
    width:180px;
    padding:10px 10px 25px 10px;
    text-align:center;
    z-index:100;
    background:url(../img/tooltip.png) left bottom no-repeat;
    -webkit-border-top-left-radius:10px;
    -webkit-border-top-right-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color:#fff;
    font-size:10pt;
}

#team2 { background:url(../img/team-footer.jpg) 50% bottom no-repeat; }
#team2 .pagewidth { padding:0; }
#team2 .slideelement { height:500px; position:relative; }
#team2 .slideelement img { margin-bottom:0; position:absolute; bottom:0; }
#team2 .slideelement .text { width:400px; position:absolute; top:150px; }
#team2 .slideelement .text h2 { margin-bottom:10px; }
#team2 .slideelement .text h3 { color:#999; margin-top:0; }
#team2 .slideelement .text p { font-style:italic; }

#team2 .slideelement.left img { left:100px; }
#team2 .slideelement.left .text { right:100px; }

#team2 .slideelement.right img { right:100px; }
#team2 .slideelement.right .text { left:100px; }

#team2 .closer { top:80px; }

#zeitreise { background:url(../img/zeitreisebg.png) repeat-x; }
#zeitreise h1 { position:relative; z-index:98; line-height:30px; height:30px; padding-bottom:30px; margin:0; }
#zeitreise .slideleft, #zeitreise .slideright { top:-80px; z-index:99; }
#zeitreise .pagewidth { height:470px; position:relative; }
#zeitreise .slide {
    height:600px;
}
#zeitreise .slideelement {
    width:460px;
    padding:0 20px;
    height:400px;
    position:relative;
    opacity:1 !important;
}
#zeitreise .slideelement h2 {
    border-radius:70px;
    -moz-border-radius:70px;
    -webkit-border-radius:70px;
    background-color:#162d40;
    color:#fff;
    padding:40px 0;
    width:100px;
    line-height:20px;
    height:20px;
    margin:20px auto 50px auto;
    font-size:1.2em;
}
#zeitreise .slideelement .content {
    position:absolute;
    width:460px;
    height:230px;
    overflow:hidden;
    left:20px;
    bottom:0;
}
#zeitreise .slider .years {
    display:block;
    position:absolute;
    margin:0;
    padding:0;
    list-style-type:none;
    margin-top:-100px;
}
#zeitreise .slider .years li {
    display:block;
    list-style-type:none;
    float:left;
    font-size:25em;
    color:transparent;
    text-shadow:0 0 20px #e0e0e0;
    line-height:300px;
    width:1000px;
    font-weight:bold;
}

#zeitreise .closer { top:80px; }

#signet { text-align:left; }
#signet .parallax, #signet .parallax2 {
    background-image:url(../img/signetbg.png);
}

#kommunikation { color:#fff; text-align:left; background-color:#162d40; }
#kommunikation .parallax { background-image:url(../img/kommunikationbg.png); }
#kommunikation .parallax2 { background-image:url(../img/kommunikationbg.png); }
#kommunikation .pagewidth { width:960px; padding:20px; }
#kommunikation h1 { color:#fff; }
#kommunikation ul { float:left; }

#markenaufbau { color:#fff; text-align:left; background-color:#162d40; }
#markenaufbau .parallax { background-image:url(../img/markenaufbaubg.png); }
#markenaufbau .parallax2 { background-image:url(../img/markenaufbaubg.png); }
#markenaufbau .pagewidth { width:960px; padding:20px; }
#markenaufbau h1 { color:#fff; }
#markenaufbau ul { float:left; }

#kundenstimmen { background-color:#162d40; color:#fff; }
#kundenstimmen h1 { color:#fff; }
#kundenstimmen .slideelement { width:840px; padding:0 80px; }
#kundenstimmen .parallax, #kundenstimmen .parallax2 {
    background-image:url(../img/kundenstimmenbg.png);
}

#casestudies .parallax, #casestudies .parallax2 {
    background-image:url(../img/casestudiesbg.png);
}

#website .parallax, #website .parallax2,
#corporatedesigncs .parallax, #corporatedesigncs .parallax2 {
    background-image:url(../img/casestudiesbg2.png);
}


#website .slideelement, #corporatedesigncs .slideelement {
    width:840px;
    padding:0 80px;
}

#impressum { text-align:left; }

nav.small ul li {
    width:170px;
    padding:10px;
    display:block;
    float:left;
}
nav.small ul li a {
    display:block;
    background:url(../img/arrowdown.png) left top no-repeat;
    padding:12px 0 13px 45px;
    color:#162d40;
    line-height:11px;
    height:11px;
    font-size:10px;
    text-align:left;
}
nav.small ul li.double a { height:22px; padding-top:7px; padding-bottom:7px; }
nav.small ul:after { clear:left; }

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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

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

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

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

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

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

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

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

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

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

    @page {
        margin: 0.5cm;
    }

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

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