html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
@font-face { font-family: 'duennelight'; src: url('../fonts/duen_light-webfont.otf'), url('../fonts/duen_light-webfont.eot?#iefix') format('embedded-opentype'); }
@font-face { font-family: 'duennebook'; src: url('../fonts/duen_book-webfont.otf'), url('../fonts/duen_book-webfont.eot?#iefix') format('embedded-opentype'); }
@font-face { font-family: 'duennemedium'; src: url('../fonts/duen_medium-webfont.otf'), url('../fonts/duen_medium-webfont.eot?#iefix') format('embedded-opentype'); }
@font-face { font-family: 'duennebold'; src: url('../fonts/duen_bold-webfont.otf'), url('../fonts/duen_bold-webfont.eot?#iefix') format('embedded-opentype'); }
p { font: 22px/26px duennebook; color: #3c3c34; text-transform: uppercase; margin-bottom: -12px; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; text-align: justify; }
p:after { content: ""; display: inline-block; width: 100%; }


html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; box-sizing: inherit; }
body { -webkit-font-feature-settings: "kern", "liga", "frac", "pnum"; -moz-font-feature-settings: "kern", "liga", "frac", "pnum"; -ms-font-feature-settings: "kern", "liga", "frac", "pnum"; font-feature-settings: "kern", "liga", "frac", "pnum"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: #000000; color: #222220; font-size: 1em; line-height: 1.5; }
h1 { color: #51514a; display: inline-block; font-size: 1em; font-weight: normal; line-height: 1.25; margin: 0; }
a, #impressum { -webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear; color: #51514a; text-decoration: none; text-transform: lowercase; transition: color 0.1s linear 0s;  word-wrap:break-word}
a:hover, a:active, a:focus, #impressum:hover h1, #impressum:hover { color: #4e4e4e; }
body { padding-left: 1em; padding-right: 1em; }
header { max-width: 68em; margin: 4em auto 3.1em; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1200ms ease; -moz-transition: all 1200ms ease; transition: all 1200ms ease; -webkit-transition-delay: 50ms; -moz-transition-delay: 50ms; transition-delay: 50ms; }
header:after { content: ""; display: table; clear: both; }


.absatz1 { letter-spacing: 9px; word-spacing: -16px }
.absatz2 { word-spacing: 1px; letter-spacing: 1px; }
.absatz3 { word-spacing: -28px; letter-spacing: 13px;}
.absatz4 { word-spacing: 10px; letter-spacing: 1px; }
.absatz5 { word-spacing: 0.8px; letter-spacing: 0px; float:left}

@media screen and (max-width : 1214px ) {
p { text-align: left }
.absatz1, .absatz2, .absatz3, .absatz4, .absatz5 { letter-spacing: 0px; word-spacing: 0px; }
}

@media screen and (max-width : 990px ) {
p { color: #292926; line-height: 28px; margin-bottom: -3px; }
.row.slide-out-div div.col p {    text-align: center;}

}

@media screen and (max-width : 990px ) {
.absatz1, .absatz2, .absatz3, .absatz4, .absatz5 { letter-spacing: 0px; word-spacing: 0px }
}
.bold, h2, h3 { font-family: duennebold;font-weight: normal; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
h2, h3 {font-size: 22px; }
h2 {
    text-align: right;
    margin-bottom: 9px;
}


html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; line-height: 25px; }
html, button, input, select, textarea { font-family: duennebook; }
::selection { background: #FFFFFF; color: #000000; }
a:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
a:hover, a:active { outline: 0; }
nav ul, nav ol { list-style: none; list-style-image: none; }
img { border: 0; height: auto; max-width: 100%; -ms-interpolation-mode: bicubic; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }

 button::-moz-focus-inner, input::-moz-focus-inner {
 border: 0;
 padding: 0;
}


@media screen and (max-width : 990px ) {
header { margin-top: 2em; }
a, #impressum, h1,h2,h3 {color: #292926; }
}
header #logo-container { float: left; display: block; margin-right: 2.35765%; width: 50%; }
header #logo-container:last-child { margin-right: 0; }

@media screen and (max-width : 990px ) {
header #logo-container { float: left; display: block; margin-right: 7.42297%; width: 100%; }
}
header #logo-container #logo { padding-top: 0.5em; float: none; position: relative; left: 50%; max-width: 492px; }
header #logo-container #logo:hover { padding-top: 0.5em; float: none; position: relative; left: 50%; max-width: 492px; }

@media screen and (max-width : 990px ) {
header #logo-container #logo, header #logo-container #logo:hover { position: static; max-width: none; }
}
#logo img { transition: all 0.5s ease 0s; opacity: 0.34; padding: 0 27px }
#logo img:hover { cursor: pointer; transition: all 0.5s ease 0s; padding: 0; opacity: 1; }
header a:active, header a:focus { color: #d11c1c; border-color: #d11c1c; }
header nav { text-align: right; float: left; display: block; margin-right: 2.35765%; width: 74.41059%; }
header nav:last-child { margin-right: 0; }

@media screen and (max-width : 990px ) {
#logo img { padding: 0px 7px;opacity: 0.268; }
}
#content { max-width: 1196px; margin-left: auto; margin-right: auto; padding-bottom: 2em; opacity: 0; -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1200ms ease; -moz-transition: all 1200ms ease; transition: all 1200ms ease; -webkit-transition-delay: 350ms; -moz-transition-delay: 350ms; transition-delay: 350ms; }

@media screen and (max-width : 990px ) {
#content section.intro { margin-bottom: 1em; }
}
#content section.row:after { content: ""; display: table; clear: both; }
#content section.row .col, #content section.row .col-full { display: block; float: left; margin-right: 4.85%; padding-top: 1em; width: 47.57%; }
#content section.row .col:last-child, #content section.row .col-full:last-child { margin-right: 0; }
#content section.row .col-full { float: left; display: block; margin-right: 2.35765%; width: 100%; }

@media screen and (max-width: 990px) {
  #content section.row .col, #content section.row .col-full {
    float: left;
    display: block;
    margin-right: 7.42297%;
    width: 100%;
  }
  #content section.row .col:last-child, #content section.row .col-full:last-child {
    margin-right: 0;
  }
}



.loaded header { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; }
.loaded #content { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; opacity: 1; }
/* Navigatiion */
#buttons { padding: 30px 0 13px; }
a.nav-button { font-family: duennemedium; display: inline-block; text-decoration: none; text-transform: uppercase; padding: 10px; padding-left: 25px; padding-right: 25px; border: 1px solid #898989; margin-bottom: 31px; font-size: 22px; color: #898989; cursor: pointer; transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; float: left; }
a.nav-button.facebook span { left: 14px; position: relative; top: -7px; }
a.nav-button.facebook { display: list-item; list-style: none url("../img/offiziell-facebook-DJ-Callim.svg") inside; opacity: 0.47; padding: 17px 0 7px 31px; width: 236px; }
a.nav-button.facebook:hover { opacity: 1 }
a.nav-button.soundcloud span { left: 11px; position: relative; top: -5px; }
a.nav-button.soundcloud { display: list-item; list-style: inside url("../img/DJ-Callim_bei_Soundcloud.svg") none; opacity: 0.47; padding: 18px 0 9px 24px; width: 280px; }
a.nav-button.soundcloud:hover { opacity: 1 }
a.nav-button.youtube span { left: 12px; position: relative; top: -6px; }
a.nav-button.youtube { display: list-item; list-style: inside url("../img/DJ-Callim_bei_Youtube.svg") none; opacity: 0.47; padding: 18px 0 8px 28px; width: 221px; }
a.nav-button.youtube:hover { opacity: 1 }
a.nav-button.email span { left: 15px; position: relative; top: -5px; }
a.nav-button.email { display: list-item; list-style: inside url("../img/email_booking_dj-callim.svg") none; opacity: 0.47; padding: 19px 0 9px 33px; width: 194px; }
a.nav-button.email:hover { opacity: 1 }

@media screen and (max-width : 990px ) {
a.nav-button.facebook, a.nav-button.soundcloud, a.nav-button.youtube, a.nav-button.email { float: none; width: 100%; opacity: 0.303; }
#buttons { display: block; padding: 0; }
.nav-button.email { float: left }
}
#impressum, h1 { text-align: center; cursor: pointer; transition: all 0.5s ease; }
.slide-out-div p { text-align: left; }
.adress p { font-size: 15px; text-transform: none; }
.slide-out-div { display: none; border-bottom: 1px solid #4e4e4e; margin-top: 11px; }
/* Booking*/
.col.booking p:nth-child(2) { margin-bottom: 0px; }
.col.booking p { text-align: right; }
.col.booking > iframe { margin-top: 30px; width: 100%; }
@media screen and (max-width : 990px ) {
.col.booking > iframe {    margin-top: 0px;}
h2 {    text-align: center;}
}


/* Soundcloud */
.soundcloud-player { background: #121212 none repeat scroll 0 0; border-radius: 18px; margin: 38px 0 45px; padding: 10px 11px 3px; }


@media screen and (max-width : 990px ) {
.soundcloud-player { margin: 18px 0 25px; }
}