@import url("http://hello.myfonts.net/count/291239");

/*
================================================================
Title: Layout Stylesheet
================================================================
Layout Styles der Website
================================================================
*/

/*
================================================================
Basis
================================================================
*/

/* Layout */

html {
    background: #fff;
    min-width: 320px;
}
body {
    color: #606258;
    font: normal 16px/28px Raleway, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
::-webkit-selection {
    color: #fff;
    background: #97777a;
}
::-moz-selection {
    color: #fff;
    background: #97777a;
}
::selection {
    color: #fff;
    background: #97777a;
}

/*
================================================================
Grid
================================================================
*/

/* Media Queries */

@media only screen and ( max-width: 960px ) {

    .wrapper { width: 720px; }
    .column.full { width: 700px; }
    .column.half { width: 340px; }
    .column.twothirds { width: 460px; }
    .column.onethird { width: 220px; }

}
@media only screen and ( max-width: 720px ) {

    .wrapper { width: 480px; }
    .column.full, .column.half, .column.twothirds, .column.onethird { width: 460px; }

}
@media only screen and ( max-width: 480px ) {

    .wrapper { width: 320px; }
    .column.full, .column.half, .column.twothirds, .column.onethird, .column.onequarter, .column.twoquarters { width: 300px; }

}

/*
================================================================
Typo und Elemente
================================================================
*/

/* Fonts */

@font-face { font-family: "Calluna-It"; src: url("../fonts/291239_0_0.eot"); src: url("../fonts/291239_0_0.eot#iefix") format("embedded-opentype"), url("../fonts/291239_0_0.woff") format("woff"), url("../fonts/291239_0_0.ttf") format("truetype"); }

/* Typo */

h2, h2 a, h3, h3 a { text-transform: lowercase; }
h2, a { color: #88ccc9; }
h2 {
    font-size: 24px;
    line-height: 30px;
}
h3 {
    font-size: 18px;
    line-height: 24px;
}
p.serif { font-family: "Calluna-It"; }
a:hover, a:active { color: #5e8f8d; }

/*
================================================================
Generelle Elemente
================================================================
*/

/* Textcolumn */

.textcolumn {
    padding: 20px 0;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    -ms-column-gap: 20px;
    -o-column-gap: 20px;
    column-gap: 20px;
}

/* Media Queries */

@media only screen and ( max-width: 720px ) {

    .textcolumn {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        -ms-column-count: 1;
        -o-column-count: 1;
        column-count: 1;
        -webkit-column-gap: 0;
        -moz-column-gap: 0;
        -ms-column-gap: 0;
        -o-column-gap: 0;
        column-gap: 0;
    }

}

/*
================================================================
Mobile
================================================================
*/

/* Basis */

#mobile {
    background: #e9eae5;
    display: none;
}
#mobile a {
    height: 20px;
    display: block;
}
#mobile .column { float: none; }
#mobile #trigger a {
    text-indent: 200%;
    white-space: nowrap;
    background: transparent url(../images/ico_mobile_trigger.png) no-repeat 0 50%;
    padding: 20px 10px;
    overflow: hidden;
}
#mobile ul { padding: 0 0 20px; }
#mobile ul li {
    list-style: none;
    margin: 0 auto;
}
#mobile ul li a {
    color: #606258;
    line-height: 20px;
    font-weight: bold;
    text-transform: lowercase;
    padding: 10px;
}
#mobile ul li a:hover, #mobile ul li a:active { text-decoration: underline; }
#mobile ul li.current-menu-item > a, #mobile ul li.current-menu-parent > a { color: #97777a; }
#mobile ul li ul { padding: 0 0 0 10px; }
#mobile ul li ul li a { font-size: 14px; }
#mobile ul li ul li a:before { content: "→ "; }

/* Media Queries */

@media only screen and ( max-width: 720px ) {

    #mobile { display: block; }
    #mobile ul li { width: 480px; }

}
@media only screen and ( max-width: 480px ) {

    #mobile ul li { width: 320px; }

}

/*
================================================================
Header
================================================================
*/

/* Basis */

#header, #header ul li { position: relative; }
#header {
    background: #fff;
    padding: 40px 0;
    z-index: 100;
}
#header a { display: block; }
#header h1, #header ul, #header ul li { margin: 0; }
#header .logo a {
    text-indent: 100%;
    white-space: nowrap;
    background: transparent url(../images/logo.png) no-repeat 0 0;
    width: 300px;
    height: 62px;
    overflow: hidden;
}
#header ul {
    padding-top: 42px;
    float: right;
}
#header ul li {
    list-style: none;
    padding: 0 0 10px 20px;
    float: left;
}
#header ul li a {
    line-height: 20px;
    font-weight: bold;
    text-transform: lowercase;
}
#header ul li.current-menu-item > a, #header ul li.current-menu-parent > a { color: #97777a; }
#header ul li ul, #header ul li ul li { float: none; }
#header ul li ul {
    background: #97777a;
    padding: 5px;
    display: none;
    position: absolute;
    top: 30px; left: 20px;
}
#header ul li:hover ul, #header ul li:active ul { display: block; }
#header ul li ul li { padding: 0; }
#header ul li ul li a, #header ul li.current-menu-parent ul li a { color: #fff; }
#header ul li ul li a { padding: 5px 10px; }
#header ul li ul li a:hover, #header ul li ul li a:active, #header ul li ul li.current-menu-item > a { text-decoration: underline; }

/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #header h1, #header ul { float: none; }
    #header ul { padding-top: 20px; }
    #header ul li { padding: 0 20px 0 0; }

}
@media only screen and ( max-width: 720px ) {

    #header ul { display: none; }

}
@media only screen and ( max-width: 480px ) {

    #header { padding: 20px 0; }

}

/*
================================================================
Title
================================================================
*/

/* Basis */

#title, #title h2 { color: #fff; }
#title h1 { color: #fff; font-size: 24px; line-height: 38px;}
#title {
    background: #88ccc9;
    padding: 80px 0;
}
#title.light { background: #88ccc9;}
#title.red { background: #97777a; }
#title.dark { background: #5e8f8d; }
#title h2.pagetitle, #title h1 { margin: 0 0 10px 0; }

#title p {
    font-size: 24px;
    line-height: 36px;
    padding: 0;
    margin: 0;
}
#title.dark a:hover{ color: #97777a; }
#title iframe { width: 100% !important; height: 558px !important; margin: 0;}
/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #title { padding: 40px 0; }

}
@media only screen and ( max-width: 480px ) {

    #title { padding: 20px 0; }
    #title p {
        font-size: 16px;
        line-height: 28px;
    }

}

/*
================================================================
Project
================================================================
*/

/* Basis */

#project {
    background: #88ccc9;
    padding: 40px 0;
}
#project .preview, #project .preview img { display: block; }
#project .preview { position: relative; }
#project .preview img {
    width: 100%;
    max-width: none;
    margin: 0;
}
#project .preview .overlay {
    background: transparent url(../images/ico_project_overlay.png) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    position: absolute;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#project .preview:hover .overlay, #project .preview:active .overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

/* Media Queries */

@media only screen and ( max-width: 480px ) {

    #project { padding: 20px 0; }

}

/*
================================================================
Slideshow
================================================================
*/

/* Basis */

#slideshow {
    background: #88ccc9;
    padding: 40px 0;
}
#slideshow #slider, #slideshow #slider .slides li a { position: relative; }
#slideshow #slider .slides, #slideshow #slider .slides li, #slideshow #slider .slides li a img { margin: 0; }
#slideshow #slider .slides, #slideshow #slider .slides li a { overflow: hidden; }
#slideshow #slider .slides li {
    list-style: none;
    float: left;
}
#slideshow #slider .slides li a, #slideshow #slider .slides li a img { display: block; }
#slideshow #slider .slides li a img {
    width: 100%;
    max-width: none;
}
#slideshow #slider .slides li a .preview, #slideshow #slider .slides li a .overlay {
    position: absolute;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#slideshow #slider .slides li a .preview {
    background: #5e8f8d;
    background: rgba(94,143,141,0.9);
    width: 620px;
    height: 220px;
    padding: 40px;
    top: 120px; left: 120px;
}
#slideshow #slider .slides li a .preview h2, #slideshow #slider .slides li a .preview p { color: #fff; }
#slideshow #slider .slides li a:hover .preview, #slideshow #slider .slides li a:active .preview {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
#slideshow #slider .slides li a .preview .icon {
    background: transparent url(../images/ico_project_preview.png) no-repeat 0 0;
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
}
#slideshow #slider .slides li a .preview h2, #slideshow #slider .slides li a .preview p { text-align: center; }
#slideshow #slider .slides li a .preview h2 { margin: 0 0 10px; }
#slideshow #slider .slides li a .preview p {
    font-size: 24px;
    line-height: 36px;
}
#slideshow #slider .slides li a .overlay {
    background: transparent url(../images/ico_project_link.png) no-repeat 50% 50%;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
}
#slideshow #slider .slides li a:hover .overlay, #slideshow #slider .slides li a:active .overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

/* controls */

.bx-prev, .bx-next {
    text-indent: 100%;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: 0 0;
    width: 40px;
    height: 40px;
    margin: -20px 0;
    display: block;
    position: absolute;
    top: 50%;
    overflow: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.bx-prev:hover, .bx-prev:active, .bx-next:hover, .bx-next:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.bx-prev {
    background-image: url(../images/ico_controls_prev.png);
    left: -60px;
}
.bx-next {
    background-image: url(../images/ico_controls_next.png);
    right: -60px;
}

/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #slideshow #slider .slides li a .preview {
        background: #5e8f8d;
        background: rgba(94,143,141,0.9);
        width: 540px;
        height: 240px;
        padding: 20px;
        top: 60px; left: 60px;
    }
    #slideshow #slider .slides li a .preview p {
        font-size: 16px;
        line-height: 28px;
    }
    .bx-prev { left: 0; }
    .bx-next { right: 0; }

}
@media only screen and ( max-width: 720px ) {

    #slideshow #slider .slides li a .preview { display: none; }

}
@media only screen and ( max-width: 480px ) {

    #slideshow { padding: 20px 0; }

}

/*
================================================================
Content
================================================================
*/

/* Basis */

#content { padding: 40px 0; }
#content.blue { background: #f0f7f7; }
#content, #content #main, #content #side { position: relative; }
#content #main { z-index: 20; }
#content #main h2.pagetitle { color: #97777a; }
#content #main ul li {
    list-style: none;
    padding: 0 0 0 16px;
    margin: 0;
    position: relative;
}
#content #main ul li:before {
    content: "—";
    position: absolute;
    top: 0; left: 0;
}
#content #main ul li ul { margin: 0 0 20px; }
#page #main iframe {
    width: 620px;
}
#page #main iframe:not(.instagram-media) {
    height: 350px;
}
#content #side {
    padding-top: 40px;
    top: auto;
    z-index: 10;
}
#content #side.sticky {
    padding-left: 650px;
    position: fixed;
    top: 0;
}
#content #side .section {
    padding: 0 0 0 40px;
    margin: 0 0 20px;
}
#content #side .section a { padding: 0 5px 0 0; }
#content #side .section h2 {
    color: #97777a;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
}
#content #side .section p a { color: #606258; }
#content #side .section p a:hover, #content #side .section p a:active { text-decoration: underline; }

/* Post */

.post { margin: 0 0 80px; }
.post img {
    width: 100%;
    max-width: none;
}
.post .thumb {
    display: block;
    margin: 0 0 20px;
    position: relative;
    overflow: hidden;
}
.post .thumb img {
    margin: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.post .thumb:hover img, .post .thumb:active img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.post .info, .post .meta p {
    font-size: 14px;
    line-height: 26px;
}
.post .info { margin: 0 0 5px; }
.post .info a, .post .meta p a { color: #606258; }
.post .meta p a.more { color: #97777a; }
.post .info a:hover, .post .info a:active, .post .meta p a:hover, .post .meta p a:active { text-decoration: underline }
.post .meta {
    padding: 10px 0;
    border-bottom: 1px solid #88ccc9;
}
.post .meta p, .post .meta .share a { float: left; }
.post .meta p {
    font-family: "Calluna-It";
    margin: 10px 0;
}
.post .meta .share { float: right; }
.post .meta .share a, .post .meta .share a img { display: block; }
.post .meta .share a { margin: 0 10px 0 0; }
.post .meta .share a:hover, .post .meta .share a:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.post .meta .share a img { margin: 0; }

/* Comments */

#comments .comment {
    border-top: 1px solid #88ccc9;
    padding: 20px 0 0;
    margin: 0 0 20px;
}
#comments .comment .comment-author, #comments .comment .comment-meta {
    font-family: "Calluna-It";
    font-size: 12px;
    line-height: 24px;
}
#comments .comment .comment-author cite { color: #97777a; }
#comments .comment .comment-meta { margin: 0 0 20px; }
#comments .comment .comment-meta a { color: #606258; }
#comments .comment .comment-meta a:hover, #comments .comment .comment-meta a:active { text-decoration: underline; }
#comments .comment .comment {
    padding-left: 40px;
    margin-top: 20px;
}

/* Respond */

#respond {
    border-top: 1px solid #88ccc9;
    padding: 20px 0 0;
}
#respond #cancel-comment-reply-link {
    color: #606258;
    display: block;
}
#respond #cancel-comment-reply-link:hover, #respond #cancel-comment-reply-link:active { text-decoration: underline; }
#respond form {
    background: #fff;
    width: auto;
    padding: 20px;
}
#respond form label {
    font-size: 12px;
    line-height: 24px;
    text-transform: lowercase;
    letter-spacing: 1px;
}
#respond form input, #respond form textarea {
    color: #97777a;
    font-size: 14px;
    line-height: 20px;
    display: block;
}
#respond form input[type="text"], #respond form textarea {
    background: #e9eae5;
    width: 560px;
    padding: 10px;
}
#respond form input[type="text"] { height: 20px; }
#respond form textarea { height: 160px; }
#respond form #submit {
    color: #88ccc9;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    background: transparent url(../images/ico_kontakt_send.png) no-repeat 0 8px;
    height: 40px;
    padding: 0 0 0 30px;
    margin: 0;
}
#respond form #submit:hover, #contactform form #submit:focus { color: #5e8f8d; }

/* Quote */

.quote {
    padding: 0 0 40px;
    margin: 0 0 40px;
    position: relative;
}
.quote:after {
    content: "";
    width: 80px;
    height: 1px;
    border-top: 1px solid #5e8f8d;
    position: absolute;
    bottom: 0; left: 0;
}
.quote p, .quote span { display: inline; }
.quote p {
    color: #5e8f8d;
    font-size: 24px;
    line-height: 36px;
}
.quote span {
    color: #606258;
    font-family: "Calluna-It";
    font-size: 14px;
    line-height: 26px;
}

/* Share */

#share {
    background: transparent url(../images/ico_share_arrow.png) no-repeat 0 0;
    padding: 5px 0 0 50px;
    margin: 40px 0 80px;
}
#share h2, #share a { float: left; }
#share h2 {
    font-size: 18px;
    line-height: 24px;
    margin: 5px 40px 0 0;
}
#share a, #share a img { display: block; }
#share a { margin: 0 10px 10px 0; }
#share a:hover, #share a:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
#share a img { margin: 0; }

/* Pager */

#pager { position: relative; }
#pager a {
    text-indent: 100%;
    white-space: nowrap;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    width: 20px;
    height: 40px;
    display: block;
    overflow: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
#pager a:hover, #pager a:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
#pager .prev { float: left; }
#pager .prev a { background-image: url(../images/ico_controls_prev.png); }
#pager .next { float: right; }
#pager .next a { background-image: url(../images/ico_controls_next.png); }

/* Kunden */

.kunden img {
    max-width: none;
    margin: 40px 60px 40px 0;
    display: inline-block;
    vertical-align: middle;
}

/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #content #side { padding-top: 20px; }
    #content #side.sticky { padding-left: 490px; }
    #content #side .section { padding: 0 0 0 20px; }
    #respond form input[type="text"], #respond form textarea { width: 400px; }

}
@media only screen and ( max-width: 720px ) {

    #content #main iframe {
        width: 460px;
        height: 260px;
    }
    #content #side { padding-top: 40px; }
    #content #side .section { padding: 0; }
    .kunden img { margin: 20px 40px 20px 0; }

}
@media only screen and ( max-width: 480px ) {

    #content { padding: 20px 0; }
    #content #main iframe {
        width: 300px;
        height: 170px;
    }
    .post { margin: 0 0 40px; }
    .quote {
        padding: 0 0 20px;
        margin: 0 0 20px;
    }
    .quote p {
        font-size: 16px;
        line-height: 28px;
    }
    #respond form input[type="text"], #respond form textarea { width: 240px; }
    #respond form #submit {
        background: transparent;
        padding: 0;
    }
    #share {
        background: transparent;
        padding: 0;
        margin: 0 0 40px;
    }
    #share h2 { display: none; }

}

/*
================================================================
Grid
================================================================
*/

/* Basis */

#grid { padding: 40px 0; }
#grid #intro { margin: 0 0 20px; }
#grid #intro p {
    font-size: 24px;
    line-height: 36px;
}
#grid #intro p a { font-family: "Calluna-It"; }
#grid .preview, #grid .preview img { display: block; }
#grid .preview {
    height: 240px;
    margin: 0 0 40px;
}
#grid.home .preview { height: 320px; }
#grid .preview img, #grid .preview h2 {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#grid .preview img {
    width: 100%;
    max-width: none;
    margin: 0 0 10px;
}
#grid .preview:hover img, #grid .preview:active img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
#grid .preview h2, #grid .preview p {
    color: #606258;
    font-size: 14px;
    line-height: 20px;
    margin: 10px 0 0;
}
#grid .preview:hover h2, #grid .preview:active h2 { color: #88ccc9; }
#grid #pager { padding: 20px 0 0; }

/* Media Queries */

@media only screen and ( max-width: 720px ) {

    #grid .preview, #grid.home .preview { height: auto; }

}
@media only screen and ( max-width: 480px ) {

    #grid { padding: 20px 0; }
    #grid #intro p {
        font-size: 16px;
        line-height: 28px;
    }

}

/*
================================================================
Page
================================================================
*/

/* Basis */

#page .section { padding: 40px 0; }
#page .section:nth-child(even) { background: #f0f7f7; }
#page h2 {
    font-size: 18px;
    line-height: 24px;
}

/* Media Queries */

@media only screen and ( max-width: 480px ) {

    #page .section { padding: 20px 0; }

}

/*
================================================================
Kontakt
================================================================
*/

/* Basis */

#kontakt {
    background: #e9eae5;
    padding: 40px 0;
    position: relative;
    z-index: 100;
}
#kontakt .column {
    padding-top: 120px;
    position: relative;
}
#kontakt h2, #kontakt p, #kontakt a { color: #97777a; }
#kontakt h2 {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 40px;
}
#kontakt p, #kontakt ul, #kontakt ul li { margin: 0; }
#kontakt ul li { list-style: none; }
#kontakt a:hover, #kontakt a:active { text-decoration: underline; }
#kontakt #brand {
    background: transparent url(../images/ico_kontakt_brand.png) no-repeat 0 0;
    width: 80px;
    height: 80px;
    position: absolute;
    top: 0; left: 10px;
}

#kontakt .lotse {margin: 33px 0 0 0;}
#kontakt .lotse img{ width: 70%; margin: 10px 0 0 0;}


/* Networks */

#networks:after {
    content: "";
    background: transparent url(../images/ico_kontakt_networks.png) no-repeat 0 0;
    width: 90px;
    height: 100px;
    position: absolute;
    top: 40px; left: -80px;
}
#networks ul li {
    margin: 0 10px 10px 0;
    float: left;
}
#networks ul li a, #networks ul li a img { display: block; }
#networks ul li a:hover, #networks ul li a:active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
#networks ul li a img { margin: 0; }

/* Contactform */

#contactform:after {
    content: "";
    background: transparent url(../images/ico_kontakt_form.png) no-repeat 0 0;
    width: 132px;
    height: 74px;
    position: absolute;
    top: 40px; left: 80px;
}
#contactform h2 { margin: 0 0 20px; }
#contactform form { margin: 0; }
#contactform form input, #contactform form textarea {
    color: #97777a;
    text-transform: lowercase;
    display: block;
}
#contactform form input {
    line-height: 20px;
    height: 20px;
}
#contactform form input.text, #contactform form textarea {
    background: #fff;
    width: 280px;
    padding: 5px 10px;
}
#contactform form input.text { margin: 0 0 5px; }
#contactform form textarea {
    height: 100px;
    position: relative;
}
#contactform form #send {
    color: #88ccc9;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    background: transparent url(../images/ico_kontakt_send.png) no-repeat 0 8px;
    height: 40px;
    padding: 0 0 0 30px;
    margin: 0;
}
#contactform form #send:hover, #contactform form #send:focus { color: #5e8f8d; }
#contactform form #notice {
    color: #fff;
    font-family: "Calluna-It";
    font-size: 12px;
    line-height: 16px;
    padding: 5px 10px;
    position: absolute;
    bottom: 6px; right: 10px;
}
#contactform form #notice.error { background: #97777a; }
#contactform form #notice.success { background: #5e8f8d; }

/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #adress, #networks { width: 340px; }
    #contactform {
        width: 700px;
        padding-top: 40px !important;
    }
    #contactform:after { top: -10px; left: auto; right: 120px; }
    #contactform form input.text, #contactform form textarea { width: 680px; }

}
@media only screen and ( max-width: 720px ) {

    #kontakt #brand, #networks:after, #contactform:after, #networks h2, #contactform h2 { display: none; }
    #kontakt h2 { margin: 0 0 20px; }
    #adress, #networks, #contactform {
        width: 460px;
        padding-top: 20px !important;
    }
    #contactform form input.text, #contactform form textarea { width: 440px; }

}
@media only screen and ( max-width: 480px ) {

    #kontakt { padding: 20px 0; }
    #adress, #networks, #contactform { width: 300px; }
    #contactform form input.text, #contactform form textarea { width: 280px; }

}

/*
================================================================
Footer
================================================================
*/

/* Basis */

#footer {
    background: #88ccc9;
    padding: 20px 0;
}
#footer p, #footer ul, #footer ul li { margin: 0; }
#footer p, #footer ul li, #footer ul li a { line-height: 20px; }
#footer p, #footer ul li a {
    color: #606258;
    font-size: 14px;
    text-transform: lowercase;
    font-weight: bold;
}
#footer p { float: left; width: 160px; }
#footer ul  {text-align: right;}
#footer ul li {
    list-style: none;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    padding: 0 0 0 20px;
}
#footer ul li ul li{ display: block; padding: 0;}
#footer ul li ul li a{ font-weight: normal; font-size: 12px;}
#footer ul li ul li a:before { content: "→ "; }


#footer ul li a:hover, #footer ul li a:active { text-decoration: underline; }



/* Media Queries */

@media only screen and ( max-width: 960px ) {

    #footer .column.onequarter, #footer .column.threequarters { width: auto; }
    #footer ul li {
        padding: 20px 20px 0 0;
    }
}

@media only screen and ( max-width: 720px ) {
    #footer .column.onequarter, #footer .column.threequarters { width: 100%; }
    #footer p {display: none;}
    #footer ul {text-align: left;}
    #footer ul li {
        display: block;
        padding: 0;
    }
    #footer ul li a {
        font-size: 16px;
        width: 100%;
        height: 20px;
        line-height: 20px;
        padding: 10px;
        color: #606258;
        font-weight: bold;
        text-transform: lowercase;
        display: block;

    }
    #footer ul li ul { padding: 0 0 0 10px; }
    #footer ul li ul li a { font-size: 14px; }


}

/*
================================================================
Optin
================================================================
*/

/* Form */

#optinform #message {
    padding: 20px;
    margin: 0 0 20px;
}
#optinform #message.error { background: #97777a; }
#optinform #message.success { background: #5e8f8d; }
#optinform #message h2, #optinform #message p { color: #fff; }
#optinform #message h2 {
    font-size: 18px;
    line-height: 24px;
    margin: 0 0 10px;
}
#optinform #message p { margin: 0; }
#optinform form input.text, #optinform form select, #optinform form label {
    text-transform: lowercase;
    margin: 0 0 20px;
}
#optinform form label {
    font-size: 12px;
    line-height: 24px;
    letter-spacing: 1px;
}
#optinform form input.text, #optinform form select {
    color: #97777a;
    display: block;
}
#optinform form input.text, #optinform form select {
    line-height: 20px;
    width: 100%;
    padding: 5px 0;
    border-bottom: 1px solid #88ccc9;
}
#optinform form select { height: 30px; }
#optinform form input.text { height: 20px; }
#optinform form #dooptin {
    color: #88ccc9;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    white-space: normal;
    word-wrap: normal;
    background: transparent url(../images/ico_kontakt_send.png) no-repeat 0 8px;
    height: 40px;
    padding: 0 0 0 30px;
    margin: 0;
}

/*
================================================================
Wordpress Styles
================================================================
*/

/* Ausrichtung */

.text-left { text-align : left; }
.text-right { text-align : right; }
.text-center { text-align : center; }
.fl-left, .alignleft { float : left !important; }
.alignleft { margin : 5px 15px 15px 0; }
.fl-right, .alignright { float : right !important; }
.alignright { margin : 5px 0 15px 15px; }
.aligncenter {
    text-align : center;
    margin-bottom : 15px;
}
img.aligncenter {
    margin-left : auto;
    margin-right : auto;
    display : block;
}

/*
================================================================
Plugins
================================================================
*/

/* Lightbox */

.nivo-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99998;
    width: 100%;
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.nivo-lightbox-overlay.nivo-lightbox-open {
    visibility: visible;
    opacity: 1;
}
.nivo-lightbox-wrap  {
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 10%;
    right: 10%;
}
.nivo-lightbox-content {
    width: 100%;
    height: 100%;
}
.nivo-lightbox-title-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    text-align: center;
}
.nivo-lightbox-nav { display: none; }
.nivo-lightbox-prev {
    position: absolute;
    top: 50%;
    left: 0;
}
.nivo-lightbox-next {
    position: absolute;
    top: 50%;
    right: 0;
}
.nivo-lightbox-close {
    position: absolute;
    top: 2%;
    right: 2%;
}

.nivo-lightbox-image { text-align: center; }
.nivo-lightbox-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}
.nivo-lightbox-content iframe {
    width: 100%;
    height: 100%;
}
.nivo-lightbox-inline,
.nivo-lightbox-ajax {
    max-height: 100%;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* https://bugzilla.mozilla.org/show_bug.cgi?id=308801 */
}
.nivo-lightbox-error {
    display: table;
    text-align: center;
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 1px 1px #000;
}
.nivo-lightbox-error p {
    display: table-cell;
    vertical-align: middle;
}

/* Effects
 **********************************************/
.nivo-lightbox-notouch .nivo-lightbox-effect-fade,
.nivo-lightbox-notouch .nivo-lightbox-effect-fadeScale,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideLeft,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideRight,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideUp,
.nivo-lightbox-notouch .nivo-lightbox-effect-slideDown,
.nivo-lightbox-notouch .nivo-lightbox-effect-fall {
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}

/* fadeScale */
.nivo-lightbox-effect-fadeScale .nivo-lightbox-wrap {
    -webkit-transition: all 0.3s;
       -moz-transition: all 0.3s;
        -ms-transition: all 0.3s;
         -o-transition: all 0.3s;
            transition: all 0.3s;
    -webkit-transform: scale(0.7);
       -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
}
.nivo-lightbox-effect-fadeScale.nivo-lightbox-open .nivo-lightbox-wrap {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
}

/* slideLeft / slideRight / slideUp / slideDown */
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
       -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
        -ms-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
         -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
            transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.nivo-lightbox-effect-slideLeft .nivo-lightbox-wrap {
    -webkit-transform: translateX(-10%);
       -moz-transform: translateX(-10%);
        -ms-transform: translateX(-10%);
            transform: translateX(-10%);
}
.nivo-lightbox-effect-slideRight .nivo-lightbox-wrap {
    -webkit-transform: translateX(10%);
       -moz-transform: translateX(10%);
        -ms-transform: translateX(10%);
            transform: translateX(10%);
}
.nivo-lightbox-effect-slideLeft.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideRight.nivo-lightbox-open .nivo-lightbox-wrap {
    -webkit-transform: translateX(0);
       -moz-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}
.nivo-lightbox-effect-slideDown .nivo-lightbox-wrap {
    -webkit-transform: translateY(-10%);
       -moz-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
            transform: translateY(-10%);
}
.nivo-lightbox-effect-slideUp .nivo-lightbox-wrap {
    -webkit-transform: translateY(10%);
       -moz-transform: translateY(10%);
        -ms-transform: translateY(10%);
            transform: translateY(10%);
}
.nivo-lightbox-effect-slideUp.nivo-lightbox-open .nivo-lightbox-wrap,
.nivo-lightbox-effect-slideDown.nivo-lightbox-open .nivo-lightbox-wrap {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

/* fall */
.nivo-lightbox-body-effect-fall .nivo-lightbox-effect-fall {
    -webkit-perspective: 1000px;
       -moz-perspective: 1000px;
            perspective: 1000px;
}
.nivo-lightbox-effect-fall .nivo-lightbox-wrap {
    -webkit-transition: all 0.3s ease-out;
       -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
         -o-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;
    -webkit-transform: translateZ(300px);
       -moz-transform: translateZ(300px);
        -ms-transform: translateZ(300px);
            transform: translateZ(300px);
}
.nivo-lightbox-effect-fall.nivo-lightbox-open .nivo-lightbox-wrap {
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
            transform: translateZ(0);
}

/* Lightbox Default */

.nivo-lightbox-theme-default.nivo-lightbox-overlay {
    background: #666;
    background: rgba(0,0,0,0.6);
}
.nivo-lightbox-theme-default .nivo-lightbox-content.nivo-lightbox-loading { background: url(../images/plugins/loading.gif) no-repeat 50% 50%; }

.nivo-lightbox-theme-default .nivo-lightbox-nav {
    top: 10%;
    width: 8%;
    height: 80%;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    opacity: 0.5;
}
.nivo-lightbox-theme-default .nivo-lightbox-nav:hover {
    opacity: 1;
    background-color: rgba(0,0,0,0.5);
}
.nivo-lightbox-theme-default .nivo-lightbox-prev {
    background-image: url(../images/plugins/prev.png);
    border-radius: 0 3px 3px 0;
}
.nivo-lightbox-theme-default .nivo-lightbox-next {
    background-image: url(../images/plugins/next.png);
    border-radius: 3px 0 0 3px;
}

.nivo-lightbox-theme-default .nivo-lightbox-close {
    display: block;
    background: url(../images/plugins/close.png) no-repeat 5px 5px;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    padding: 5px;
    opacity: 0.5;
}
.nivo-lightbox-theme-default .nivo-lightbox-close:hover { opacity: 1; }

.nivo-lightbox-theme-default .nivo-lightbox-title-wrap { bottom: -7%; }
.nivo-lightbox-theme-default .nivo-lightbox-title {
    font: 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    background: #000;
    color: #fff;
    padding: 7px 15px;
    border-radius: 30px;
}

.nivo-lightbox-theme-default .nivo-lightbox-image img {
    background: #fff;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
       -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
            box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
}
.nivo-lightbox-theme-default .nivo-lightbox-ajax,
.nivo-lightbox-theme-default .nivo-lightbox-inline {
    background: #fff;
    padding: 40px;
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
       -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
            box-shadow: 0px 1px 1px rgba(0,0,0,0.4);
}

@media (-webkit-min-device-pixel-ratio: 1.3),
       (-o-min-device-pixel-ratio: 2.6/2),
       (min--moz-device-pixel-ratio: 1.3),
       (min-device-pixel-ratio: 1.3),
       (min-resolution: 1.3dppx) {

    .nivo-lightbox-theme-default .nivo-lightbox-content.nivo-lightbox-loading {
        background-image: url(../images/plugins/loading-2x.gif);
        background-size: 32px 32px;
    }
    .nivo-lightbox-theme-default .nivo-lightbox-prev {
        background-image: url(../images/plugins/prev-2x.png);
        background-size: 48px 48px;
    }
    .nivo-lightbox-theme-default .nivo-lightbox-next {
        background-image: url(../images/plugins/next-2x.png);
        background-size: 48px 48px;
    }
    .nivo-lightbox-theme-default .nivo-lightbox-close {
        background-image: url(../images/plugins/close-2x.png);
        background-size: 16px 16px;
    }

}