/*
Theme Name: Moirai
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: moirai | Branding & Design 
Version: 3.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moirai.de

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Moirai is based on Underscores http://underscores.me/, (C) 2012-2015 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
    ## Pagination
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Asides
	## Comments
	## Specific
	## Hide Scoll-Bar
    ## Vita
	## Footer
	## Portfolio
	## Password
# Templates
	## Kontaktformular
# Infinite scroll
# Media
	## Captions
	## Galleries
# Responsive
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    position: relative;
    color: #1a1a1a;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 400;
    background: #fff;
    font-size: 16px;
    line-height: 25px;
    margin: 0px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #1a1a1a;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
    width: 100%;
    border-style: none;
    vertical-align: top;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

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

input {
    line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

input[type="search"] {
    -webkit-appearance: textfield;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: bold;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}


/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

body,
input,
select,
textarea {
    color: #404040;
    font-size: 16px;
    font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    margin: 0;
    padding: 0;
    color: #1a1a1a;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
}

h1 {
    font-size: 44px;
    line-height: 55px;
}

h2 {
    font-size: 38px;
    line-height: 45px;
}

h3 {
    display: block;
    padding-bottom: 15px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color: #F2001D;
}

h4 {
    font-size: 18px;
    line-height: 20px;
}

h5 {
    font-size: 112px;
    line-height: 20px;
}

p {
    margin: 0;
    padding: 0 0 1.5em;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    color: #404040;
}

dfn,
cite,
em,
i {
    font-style: italic;
}

blockquote {
    margin: 0 1.5em;
}

address {
    margin: 0 0 1.5em;
}

pre {
    background: #eee;
    font-family: "Courier 10 Pitch", Courier, monospace;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}

code,
kbd,
tt,
var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    font-size: 15px;
    font-size: 0.9375rem;
}

abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}

mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}

big {
    font-size: 125%;
}

.section.imprint h2 {
    width: 100%;
    padding-bottom: 40px;
}

.section.services h2 {
    padding: 0 30px 30px 30px;
}

.section .main-title h1 {
    padding-bottom: 50px;
}

.section .main-title {
    text-align: center;
}

.section.services p {
    color: #1a1a1a
}

.slider_title {
    font-weight: 300;
    font-size: 55px;
    color: #fff;
    padding-bottom: 15px;
}

.slider_sub {
    font-size: 36px;
    line-height: 40px;
    font-weight: bold;
    color: #fff;
    padding: 0 0 60px 0;
}

.slider_p {
    font-size: 27px;
    line-height: 38px;
    color: #fff;
    width: 855px;
}

.slider_p a {
    color: #fff;
    border-bottom: 1px dotted #fff;
}

.slider_p a:hover {
    color: #fff;
    border-bottom: 1px solid #fff;
}

.slider_content p:nth-child(3) {
    padding: 0 0 30px 0;
}

.slider_content p:last-child {
    padding: 0px;
}


/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    box-sizing: inherit;
}

body {
    background: #fff;
    /* Fallback for when there is no custom background color defined. */
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

blockquote,
q {
    quotes: """";
}

hr {
    background-color: #fff;
    border: 0;
}

ol {
    list-style: decimal;
}

dt {
    font-weight: bold;
}

dd {
    margin: 0 1.5em 1.5em;
}

img {
    height: auto;
    /* Make sure images are scaled correctly. */
    max-width: 100%;
    /* Adhere to container width. */
}

table {
    margin: 0 0 1.5em;
    width: 100%;
}

li {
    list-style: none;
    margin: 0;
    padding: 0;
    display: list-item;
}

ul {
    display: block;
    list-style-type: disc;
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, .8);
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1;
    padding: .6em 1em .4em;
    text-shadow: none;
}

input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}

input[type="reset"]:focus,
input[type="submit"]:focus,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
    outline: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus {
    color: #111;
    outline: none;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"] {
    padding: 10px 10px 10px 15px;
}

textarea {
    padding-left: 3px;
    width: 100%;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
    background: #f2f2f2;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wrapper_ci {
    margin: 0 auto;
    width: fit-content;
}

.button-center a {
    border: none;
}

.button-center a p {
    display: none;
}

.button-dark,
html div#contact_form form.wpcf7-form .button-dark {
    display: inline-block;
    padding: 14px 55px;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    border: #1a1a1a solid 1px;
    background: none;
    cursor: pointer;
    margin-top: 40px;
    border-radius: 0px;
}

.button-dark:hover,
html div#contact_form form.wpcf7-form .button-dark:hover {
    color: #ffffff;
    border: #F2001D solid 1px;
    background: #F2001D;
}


.icon-align-justify:hover:before {
    color: #F2001D;
}

.introduce.error a {
    border-bottom: none;
}


/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

button.menu-toggle {
    background-image: url("/wp-content/themes/moirai/img/sonstiges/burger.svg");
    background-size: auto 20px;
    background-repeat: no-repeat;
}

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/

a {
    color: #111111;
    text-decoration: none;
    border-bottom: 1px dotted #111111;
}

a:hover {
    color: #F2001D;
    text-decoration: none;
    border-bottom: 1px solid #F2001D;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {
    color: #F2001D;
}


.main-navigation .current_page_item > a::before,
.main-navigation .current-menu-item > a::before,
.main-navigation .current_page_ancestor > a::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.5em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;
}


.pa-fixed-header {
    background-color: #fff !important;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}


/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/

.main-navigation {
    clear: both;
    display: block;
    width: 100%;
    z-index: 999999;
}

.main-navigation ul {
    list-style: none;
    float: right;
    margin: -50px 0 0 0;
}

.main-navigation li {
    float: right;
    position: relative;
}

.main-navigation a {
    display: block;
    text-decoration: none;
    border-bottom: none;
    font-weight: 300;
    font-size: 18px;
    color: #111111;
}

.main-navigation a:hover {
    color: #F2001D;
}


.main-navigation a:hover::before {
    content: '.';
    display: inline-block;

    /* position the dot underneath the character */
    position: absolute;
    bottom: -0.5em;
    left: 0;

    /* center the dot horizontally */
    text-align: center;
    width: 100%;
    color: #F2001D;
}




.main-navigation ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    float: right;
    position: absolute;
    top: 1.5em;
    left: -999em;
    z-index: 99999;
}

.main-navigation ul ul ul {
    left: -999em;
    top: 0;
}

.main-navigation ul ul a {
    width: 200px;
}

.main-navigation ul ul li {}

.main-navigation li:hover > a,
.main-navigation li.focus > a {}

.main-navigation ul ul:hover > a,
.main-navigation ul ul .focus > a {}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
    left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
    left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a {}

.site-header {
    height: 80px;
    width: 100%;
    background-color: transparent;
    position: fixed;
    z-index: 999;
}

.logo {
    height: 80px;
    float: left;
    margin: -2px 0 0 -4px;
}

.logo p.header-logo {
    font-size: 38px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    color: #F2001D;
    padding: 0px;
    margin: 25px 0 0 4px;
}

.main-navigation .menu-item {
    margin-left: 50px;
}

/* Small menu. */

.menu-toggle,
.main-navigation.toggled ul {
    display: none;
}

.menu-toggle {
    display: none;
}

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

    .menu-toggle,
    .main-navigation.toggled .nav-menu {
        display: block;
        float: right;
        margin: 0px;
        border: none;
        background-color: Transparent;
        outline: none;
        padding: 0px;
        z-index: 9999999;
    }

    button.menu-toggle {
        padding: 27px 34px 0 0;
        margin-top: -51px;
    }

    .menu-toggle:focus {
        background-color: Transparent;
    }

    .main-navigation ul {
        display: none;
        width: 100%;
        background: #ffffff;
        padding: 10px 0 0 0;
    }

    .main-navigation li {
        float: left;
        border-bottom: 15px solid #fff;
        width: 100%
    }

    .main-navigation a {
        padding: 15px 15px 15px 40px;
        width: 100%;
        float: left;
        background-color: #f2f2f2;
    }

    .main-navigation li a:hover {
        background-color: #F2001D;
        color: #fff;
    }

    .main-navigation ul#primary-menu li:first-child a:hover {
        color: #fff;
    }

    #mobile-nav {
        background-color: #f9f9f9;
        padding: 20px 0 20px 30px;
        min-width: 100%;
    }

    .main-navigation.toggled .menu-item {
        margin-left: 0px;
    }

    .main-navigation ul#primary-menu li:first-child a {
        color: #1a1a1a;
    }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
    overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    float: left;
    width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}


/*--------------------------------------------------------------
## Pagination - Single+Category
--------------------------------------------------------------*/

.icon-right-open-big:before,
.icon-left-open-big:before {
    font-size: 35px;
}

.icon-right-open-big,
.icon-left-open-big,
a.pagination-mitte,
.pm-h {
    border: none;
}

.icon-left-open-big:before {
    content: "f";
    padding: 50px 55px 50px 65px;
    min-width: 17%;
    height: 139px;
    float: left;
    text-align: center;
}

.icon-right-open-big:before {
    content: "g";
    padding: 50px 55px 50px 65px;
    min-width: 17%;
    height: 139px;
    float: left;
    text-align: center;
}

.icon-right-open-big:hover,
.icon-left-open-big:hover,
a.pagination-mitte:hover,
.pm-h:hover {
    background-color: #F2001D;
    color: #fff;
}

.pagination_category {
    background-color: #e6e6e6;
}

.post-pagination {
    width: 17%;
    float: left;
    text-align: center;
}

a.pagination-mitte {
    background-color: #e6e6e6;
    padding-top: 46px;
    padding-bottom: 46px;
    width: 66% !important;
    text-align: center;
    float: left;
    font-size: 38px;
    line-height: 47px;
    color: #1a1a1a;
}

.pagination a h2:hover {
    color: #F2001D;
}

.pagination {
    width: 100%;
    background-color: #e6e6e6;
    display: table;
}

.icon-right-open-big:hover:before,
.icon-left-open-big:hover:before {
    background-color: #F2001D;
    text-align: center;
}

.pagination-offscreen {
    width: 17%;
    float: left;
    height: 139px;
}

.pagination.single {
    background-color: #e6e6e6;
}

footer.entry-footer span.cat-links,
footer.entry-footer span.tags-links {
    display: none;
}


/*Category*/

.pagination_category {
    text-align: center;
    padding: 25px 55px 25px 65px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 18px;
}

.pagination_category span.page-numbers.current {
    color: #F2001D;
}

.pagination_category a.page-numbers {
    margin: 0 5px;
}

.pagination_category a.prev.page-numbers {
    margin-right: 15px;
}

.pagination_category a.next.page-numbers {
    margin-left: 15px;
}

.pagination_category {}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    /* Above WP toolbar. */
}


/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/

.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
    content: "";
    display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
    clear: both;
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.widget {
    margin: 0 0 1.5em;
}


/* Make sure select elements fit in widgets. */

.widget select {
    max-width: 100%;
}


/* Search widget. */

.widget_search .search-submit {
    display: none;
}


/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/

.sticky {
    display: block;
}

.byline,
.updated:not(.published) {
    display: none;
}

.single .byline,
.group-blog .byline {
    display: inline;
}

.page-content,
.entry-content,
.entry-summary {
    margin: 0 0 0;
    margin-top: 80px;
}

.page-links {
    clear: both;
    margin: 0 0 1.5em;
}


/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/

.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
    display: none;
}


/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/

.comment-content a {
    word-wrap: break-word;
}

.bypostauthor {
    display: block;
}


/*--------------------------------------------------------------
## Specific
--------------------------------------------------------------*/

.section {
    overflow: hidden;
}

.project-title {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.featured-projects ul,
.featured-news ul {
    padding: 0px;
    margin: 0px;
}

.section.featured-projects.category ul.projects,
.section.featured-news.category ul.projects {
    padding: 80px 0 0 0;
    margin: 0px;
}

.featured-projects .project {
    position: relative;
    float: left;
    width: calc(50% - 10px);
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

li.project.fourth,
li.project.sixth {
    margin-right: 20px;
}

li.project.fourth,
li.project.fifth,
li.project.sixth,
li.project.seventh {
    margin-top: 20px;
}

.section.featured-projects.portfolio .project {
    width: 33.33%;
}

.section.featured-projects {
    padding-bottom: 150px;
}

.featured-news .project {
    position: relative;
    float: left;
    width: 50%;
    overflow: hidden;
    margin: 0px;
}

.featured-news .project:nth-last-of-type(-n + 1) {
    padding-bottom: 20px;
}

.featured-projects .third {
    float: left;
    width: 100%;
    margin: 120px 0 0 0;
}

.featured-news a.read-more-button {
    padding-top: 15px;
    display: table-cell;
    cursor: pointer;
}

.featured-news .post-excerpt .post-excerpt_descr {
    padding: 0px;
}

.featured-news .post-excerpt {
    background: #f2f2f2;
    padding: 20px 20px 25px 20px;
}

.featured-projects .project .permalink {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
}

.featured-projects .project:hover .permalink {
    opacity: .5;
}

.featured-projects .project .view-wrapper {
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: 5;
    width: 100%;
    text-align: center;
    min-height: 100%;
    top: 0;
    padding-top: 25%;
}

.featured-projects .first .view-wrapper {
    opacity: 0;
    position: absolute;
    left: 0;
    z-index: 5;
    width: 100%;
    text-align: center;
    min-height: 100%;
    top: 0;
    padding-top: 50%;
}

.featured-projects .project .view-wrapper:hover {
    opacity: 1;
}

.featured-projects .project .view {
    display: inline-block;
    padding: 14px 55px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    border: #fff solid 1px;
}

.featured-projects .project .figure {
    padding: 0 0 55% 0;
}

.featured-projects .first .figure {
    padding: 0 0 110% 0;
}

.featured-projects .first {
    position: absolute;
    right: 50%;
}

.featured-projects .figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    vertical-align: top;
    height: auto;
    z-index: 0;
}

.featured-projects .project .title,
.featured-news .project .title {
    padding: 15px 0 0 25px;
    color: #fff;
    font-size: 18px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
}

.featured-news .project .title {
    padding: 0 0 15px 0;
    color: #1a1a1a;
    font-size: 18px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
}

.featured-projects .project .view:hover,
.featured-news .project .view:hover,
ul#cnFilterOptions li.active,
ul#cnFilterOptions li:hover {
    border: #F2001D solid 1px;
    background-color: #F2001D;
    color: #fff;
}

ul#cnFilterOptions li .section .main-title {
    text-align: center;
}

ul#cnFilterOptions li.active a {
    border: none;
    color: #fff;
    font-weight: 300;
}

ul#cnFilterOptions li a {
    font-weight: 300;
    color: #1a1a1a;
    border: none;
}

ul#cnFilterOptions li a:hover {
    color: #fff;
}

ul#cnFilterOptions li {
    color: #1a1a1a;
    text-transform: uppercase;
    border: #1a1a1a solid 1px;
    background: none;
    transition: none;
}

html #cnfolioHolder ul.cnOurHolder li.item {
    width: calc(33.333333333333% - 4px);
}

.section.featured-projects.category #cnFilterOptions {
    margin: 0px 0 20px 0;
    padding: 20px 0 15px 0;
}

.section.services .main-title p {
    margin-bottom: 70px;
    font-size: 18px;
    line-height: 28px;
}

.padding {
    padding-top: 80px;
}

.slider {
    background-image: url("/wp-content/themes/moirai/img/sonstiges/moirai_slider_main.jpg");
    background-size: auto 800px;
    background-color: #0283c9;
    background-position: 55% 40%;
    background-repeat: no-repeat;
    height: 768px;
}

.slider_content {
    padding: 190px 0 0 150px;
    position: absolute;
    z-index: 2;
    text-align: left;
}

.project-title.ueber-mich {
    top: 30%;
    left: 20%;
    right: 20%;
}

.introduce {
    margin: 0;
    padding: 90px 50px 100px;
    text-align: center;
    display: block;
    background-color: #f2f2f2;
}

.introduce.error {
    padding: 190px 50px 200px;
}

.introduce .title {
    max-width: 50%;
    margin: 0 auto;
    line-height: 1.3;
    color: #1a1a1a;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300 !important;
}

.introduce h4 {
    padding-top: 40px;
}

.section.privacy .privacy-content {
    text-align: left;
}

.section.privacy .main-title h2 {
    padding-bottom: 20px;
}

.section.services .content .title,
.section.services .service-content,
.section.imprint .content .title,
.section.imprint .imprint-content {
    text-align: left;
    padding-left: 95px;
}


.section.services .content .title h3 {
    color: #F2001D;
}

.section.services {
    padding: 130px 0 80px;
    background: #f2f2f2;
    overflow: hidden;
}

.section.services .content .main-title.first img,
.section.services .content .main-title.second img,
.section.services .content .main-title.third img {
    margin-bottom: 40px;
    width: auto;
}

.section.services .content .main-title.first img,
.section.services .content .main-title.second img {
    height: 84px;
}

.section.services .content .main-title.third img {
    height: 83px;
}

.section.imprint,
.section.privacy {
    padding: 70px 0 70px;
    background: #fff;
    overflow: hidden;
}


.section.markenprojekte {
    padding: 160px 0 190px;
    background: #fff;
    overflow: hidden;
}

.section.footer-new {
    padding: 70px 0 70px;
    background: #F7F7F7;
    overflow: hidden;
}

.section.main-img {
    padding: 70px 0 70px;
    background: #F7F7F7;
    overflow: hidden;
    height: 768px;
}

.section.main-img h1 b {
    color: #F2001D;
}

.section.main-img p {
    padding: 40px 0 0 0;
    color: #111111;
    font-size: 18px;
    line-height: 30px;
    font-weight: 400;
}

.section.main-img .content {
    background-image: url('/wp-content/themes/moirai/img/logos/main.png');
    background-repeat: no-repeat;
    background-position: bottom 70px right;
    background-size: 599px auto;
    height: 768px;
    width: 1340px;
}

.section.medetail .content {
    background-image: url('/wp-content/themes/moirai/img/sonstiges/me.png');
    background-repeat: no-repeat;
    background-position: bottom -2px center;
    background-size: 560px auto;
    height: 768px;
    margin-right: 100px;
}

.section.medetail {
    overflow: hidden;
    background: radial-gradient(ellipse at top, #FCFCFC, transparent),
        radial-gradient(ellipse at bottom, #E8E8E8, transparent);
}

.section.main-img .content div {
    float: left;
    text-align: left;
    width: 650px;
    padding: 145px 0 0 0;
}

.section.services .content,
.section.imprint .content,
.site-header .content,
.slider-section .content,
.section.footer-new .content,
.section.markenprojekte .content,
.section.main-img .content,
.section.featured-projects .content,
.section.portfolio-detail .content,
.section.portfolio-detailimages .content,
.section.portfolio-detailclick .content,
.section.medetail-text .content,
.section.portfolio-teaser .content {
    max-width: 136em;
    margin: 0 auto;
    padding: 0 50px;
}

.section.medetail-text .content {
    max-width: 90em;
}

.section.portfolio-detailimages .content {
    padding: 0 0 150px 0;
}

.section.portfolio-detail .content h3 {
    text-align: left;
}

.section.portfolio-detail {
    margin: 90px 0 120px 0;
}

.section.portfolio-detail c,
.section.medetail-text c {
    color: #F2001D;
}

.section.portfolio-detailclick .button-dark {
    color: #fff;
    border: 1px solid #fff;
}

.section.medetail-text p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 300;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.section.medetail-text h2 {
    color: #F2001D;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.section.medetail-text .content h2 {
    margin: 50px 0 20px 0;
}

.section.medetail-text .content h1 {
    margin-bottom: 50px;
}

.section.medetail-text .button-dark {
    margin-top: 0px;
}

.section.portfolio-detailclick .button-dark:hover {
    color: #FF4617;
    border: 1px solid #fff;
    background-color: #fff;
}

.section.portfolio-detailclick {
    background-color: #FF4617;
    text-align: center;
    padding: 70px 90px;
}


.section.portfolio-detailclick.blue {
    background-color: #1472FE;
}

.section.portfolio-detailclick.blue .button-dark:hover {
    color: #1472FE;
}

.section.portfolio-detailclick h3 {
    color: #fff;
    margin: 0px;
    padding: 0px;
}

.section.portfolio-detailclick p {
    color: #fff;
    margin: 20px 0 0 0;
    padding: 0px;
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
}

.section.portfolio-teaser div {
    padding: 220px 0 170px 0;
}

.section.portfolio-teaser ul li {
    float: left;
    width: calc(25% - 15px);
}

.section.portfolio-teaser ul li:nth-child(3) {
    margin: 0 20px;
}

.section.portfolio-teaser ul li:nth-child(2) {
    margin-right: 20px;
}

.section.portfolio-teaser ul {
    margin-bottom: 50px;
    float: left;
    width: 100%;
    padding-left: 0px;
}

.section.medetail-text,
.section.portfolio-teaser subtitle {
    font-weight: 300;
    font-size: 24px;
    line-height: 30px;
    color: #A6A6A6;
    margin: 100px 0 130px 0;
    padding: 0px;
}

.section.portfolio-teaser p.portfolio_headline {
    margin: 0px;
    padding: 0px;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #585858;
}

.section.portfolio-teaser p.portfolio_texts {
    margin: 5px 0 0 0;
    padding: 0px;
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: #A6A6A6;
}

.section.medetail-text h1,
.section.portfolio-teaser h1 {
    font-weight: 400;
    font-size: 44px;
    line-height: 60px;
    color: #F2001D;
    margin-top: 15px;
}

.section.portfolio-detail ul {
    padding: 0px;
    margin: 0px;
}

.section.privacy .content {
    text-align: left;
    max-width: 136em;
    margin: 0 auto;
}

.section.services .content .title,
.section.imprint .content .title {
    padding-left: 95px;
    text-align: left;
    padding-top: 15px;
    font-size: 22px;
    line-height: 2.2;
}

.section.privacy .content .title {
    text-align: left;
    padding-top: 15px;
    font-size: 22px;
    line-height: 2.2;
}

.section.services ul,
.section.imprint ul {
    display: inline-block;
    width: 100%;
    padding-left: 0px;
}

.section.services ul {
    padding: 0px;
    margin-left: -30px;
}

.section.services .service-content p {
    padding-bottom: 10px;
}

.section.services ul ul.list li {
    width: 100%;
    list-style: inherit;
}

.section.services ul ul.list {
    margin-left: 20px;
    color: #737373;
}

.section.privacy ul {
    padding-right: 40px;
}

.section.services li {
    float: left;
    width: 33.33%;
}

.section.imprint li {
    float: left;
    width: 45%;
}

.section.portfolio-detail li {
    float: left;
    width: calc(33.333333% - 28px);
}

.section.portfolio-detail li:nth-child(2) {
    margin: 0 42px;
}


.section.privacy li {
    float: left;
    width: 100%;
}

.section.markenprojekte ul {
    display: inline;
    padding: 0px;
    margin: 0px;
}

.section.markenprojekte li {
    width: calc(25% - 15px);
    background-color: #F7F7F7;
    height: 165px;
    float: left;
    margin: 0 20px 20px 0;
    cursor: pointer;
}

.section.markenprojekte li.markenprojekte-bsr,
.section.markenprojekte li.markenprojekte-mm {
    margin: 0 0 20px 0;
}



.section.markenprojekte li.markenprojekte-n24 {
    background-image: url('/wp-content/themes/moirai/img/logos/n24.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-n24:hover,
.section.markenprojekte li.markenprojekte-universal:hover,
.section.markenprojekte li.markenprojekte-aida:hover,
.section.markenprojekte li.markenprojekte-bsr:hover,
.section.markenprojekte li.markenprojekte-verivox:hover,
.section.markenprojekte li.markenprojekte-vca:hover,
.section.markenprojekte li.markenprojekte-telekom:hover,
.section.markenprojekte li.markenprojekte-mm:hover {
    background: #FFFFFF;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
}

.section.markenprojekte li.markenprojekte-n24:hover:after {
    content: "UI & UX für die mobile Webseite";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-universal {
    background-image: url('/wp-content/themes/moirai/img/logos/universal.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-universal:hover:after {
    content: "UI & UX für den Universal Backstage Bereich";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-aida {
    background-image: url('/wp-content/themes/moirai/img/logos/aida.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-aida:hover:after {
    content: "UI für die Facebook-App »AIDA Entscheidungshilfe«";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-bsr {
    background-image: url('/wp-content/themes/moirai/img/logos/bsr.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-bsr:hover:after {
    content: "Kommunikation zur Verbesserung der Biogut-Trennung. Semesterprojekt";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-verivox {
    background-image: url('/wp-content/themes/moirai/img/logos/verivox.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-verivox:hover:after {
    content: "Neugestaltung einiger Grafiken";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-vca {
    background-image: url('/wp-content/themes/moirai/img/logos/vca.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-vca:hover:after {
    content: "UI & UX für die Facebook-App »Die virtuelle Wasserbombenschlacht«";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-telekom {
    background-image: url('/wp-content/themes/moirai/img/logos/telekom.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-telekom:hover:after {
    content: "UI für die Smartphone-App »pay2friends«";
    padding: 25px;
    display: block;
    position: relative;
    text-align: left;
}

.section.markenprojekte li.markenprojekte-mm {
    background-image: url('/wp-content/themes/moirai/img/logos/mm.png');
    background-repeat: no-repeat;
    background-position: center;
}

.section.markenprojekte li.markenprojekte-mm:hover:after {
    content: "UI und UX der Webseite";
    padding: 20px;
    display: block;
    position: relative;
    text-align: left;
}




/*--------------------------------------------------------------
## Hide Scroll-Bar
--------------------------------------------------------------*/

/* Google Chrome, Safari, Opera */

html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    /* remove scrollbar space */
    width: 0px;
    /* optional: just make scrollbar invisible */
    background: transparent;
}

/*--------------------------------------------------------------
## vita
--------------------------------------------------------------*/





/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/


div#footer-sidebar .footer_links li.footer_first_nav,
div#footer-sidebar ul.footer_questions li.footer_kontakt {
    float: left;
}

div#footer-sidebar .footer_links li.footer_second_nav,
div#footer-sidebar ul.footer_questions li.footer_fragen {
    float: right;
}

div#footer-sidebar .footer_links ul#primary-menu li,
div#footer-sidebar .footer_links ul#menu-menu-2 li {
    display: inline;
}

div#footer-sidebar .footer_links ul#primary-menu,
div#footer-sidebar .footer_links ul#menu-menu-2,
div#footer-sidebar ul.footer_links {
    padding: 0px;
    margin: 0px;
}

li.footer_first_nav a,
li.footer_second_nav a,
li.footer_second_nav {
    color: #585858;
    font-weight: 300;
    margin: 0 30px 0 0;
}

li.footer_first_nav a:hover,
li.footer_second_nav a:hover {
    color: #F2001D;
}

li.footer_fragen div,
li.footer_kontakt div {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
    color: #111111;
}

div#footer-sidebar li.footer_fragen,
div#footer-sidebar li.footer_kontakt {
    width: 45%;
}



ul.footer_questions {
    padding: 100px 0 130px;
    text-align: left;
    width: 100%;
    float: left;
    border-bottom: 1px solid #A6A6A6;
}

ul.footer_questions h3 {
    text-align: left;
}

/*--------------------------------------------------------------
## Portfolio
--------------------------------------------------------------*/

/* CSS */

*,
*::before,
*::after {
    box-sizing: border-box;
}

.section.featured-projects body {
    margin: 0;
}

.section.featured-projects img {
    display: block;
    border: 0;
    width: 100%;
    height: auto;
}

.section.featured-projects .flexbox {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    padding-top: 80px;
}


.section.featured-projects .card {
    background-size: cover;
    /* Change this based on the image main subject */
    background-position: center;
    background-repeat: no-repeat;
    margin: 0.5em;
    /*     transition: all 1s ease-in; */
}

.section.featured-projects .center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section.featured-projects .header {
    background-image: url('/wp-content/themes/moirai/img/amanngirrbach/moirai_ag_main.svg');
    transition: transform 1.0s ease;
    background-size: 90%;
    background-color: #F1F5FA;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-3 {
    background-image: url('/wp-content/themes/moirai/img/universal/universal-logo.svg');
    transition: transform 1.0s ease;
    background-size: 50%;
    background-color: #303035;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-4 {
    background-image: url('/wp-content/themes/moirai/img/aveso/moirai_aveso_main.jpeg');
    transition: transform 1.0s ease;
    background-color: #E0E6F1;
}

.section.featured-projects .item-1 {
    background-image: url('/wp-content/themes/moirai/img/vm/vm_logo.svg');
    transition: transform 1.0s ease;
    background-size: 90%;
    background-color: #F7F7f7;
    background-position: 80% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-2 {
    background-image: url('/wp-content/themes/moirai/img/n24/n24-logo.svg');
    transition: transform 1.0s ease;
    background-size: 50%;
    background-color: #01304E;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-5 {
    background-image: url('/wp-content/themes/moirai/img/telekom/telekom-logo.svg');
    transition: transform 1.0s ease;
    background-size: 20%;
    background-color: #E10174;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-6 {
    background-image: url('/wp-content/themes/moirai/img/human-interface/moirai_human-interface_main-large.svg');
    transition: transform 1.0s ease;
    background-size: 100%;
    background-color: #F7F7f7;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-7 {
    background-image: url('/wp-content/themes/moirai/img/amanngirrbach/moirai_ag_main.svg');
    transition: transform 1.0s ease;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: #F1F5FA;
}

.section.featured-projects .item-8 {
    background-image: url('/wp-content/themes/moirai/img/qlist/moirai_qlist_main.svg');
    transition: transform 1.0s ease;
    background-color: #F7F7F7;
    background-size: 90%;
    background-position: 60% 50%;
}

.section.featured-projects .item-9 {
    background-image: url('/wp-content/themes/moirai/img/aida/aida_logo.svg');
    transition: transform 1.0s ease;
    background-size: 50%;
    background-color: #F7F7f7;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.section.featured-projects .item-10 {
    background-image: url('/wp-content/themes/moirai/img/minoo/moirai_minoo_main2.jpeg');
    transition: transform 1.0s ease;
    background-repeat: no-repeat;
}


.section.featured-projects .header:hover,
.section.featured-projects .item-1:hover,
.section.featured-projects .item-2:hover,
.section.featured-projects .item-3:hover,
.section.featured-projects .item-4:hover,
.section.featured-projects .item-5:hover,
.section.featured-projects .item-6:hover,
.section.featured-projects .item-7:hover,
.section.featured-projects .item-8:hover,
.section.featured-projects .item-9:hover,
.section.featured-projects .item-9:hover,
.section.featured-projects .item-10:hover {
    transform: scale(1.03);
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    -webkit-transition: 0.8s ease-out;
    -moz-transition: 0.8s ease-out;
    -o-transition: 0.8s ease-out;
    transition: 0.8s ease-out;
}


a#header-image,
a.card.item-1.med,
a.card.item-2.med,
a.card.item-3.med,
a.card.item-4.med,
a.card.item-5.med,
a.card.item-6.med,
a.card.item-7.med,
a.card.item-8.med,
a.card.item-9.med,
a.card.item-10.med {
    border-bottom: none;
}

@supports (display: grid) {
    @media screen and (min-width: 320px) {

        /* Reset height from having an defined to percentage
    and use spans to define size */
        .section.featured-projects .hero,
        .section.featured-projects .lrg,
        .section.featured-projects .med,
        .section.featured-projects .sm {
            height: 100%;
        }

        /* Margin replaced by grid gap */
        .section.featured-projects .card {
            margin: 0px;
        }

        .section.featured-projects .grid-wrapper {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            display: grid;
            height: 200em;
            justify-content: center;
            align-content: end;
            grid-gap: 20px;
        }

        .section.featured-projects .col-num {
            grid-column: span 1;
        }

        .section.featured-projects .item-1,
        .section.featured-projects .item-2,
        .section.featured-projects .item-3,
        .section.featured-projects .item-4,
        .section.featured-projects .item-5,
        .section.featured-projects .item-6,
        .section.featured-projects .item-7,
        .section.featured-projects .item-8,
        .section.featured-projects .item-9,
        .section.featured-projects .item-10 {
            grid-column: span 1;
        }
    }
}



@supports (display: grid) {
    @media screen and (min-width: 600px) {
        .section.featured-projects .grid-wrapper {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
            height: 250em;
        }

        .section.featured-projects .col-num {
            grid-column: span 1;
        }

        .section.featured-projects .item-1,
        .section.featured-projects .item-2,
        .section.featured-projects .item-3,
        .section.featured-projects .item-4,
        .section.featured-projects .item-5,
        .section.featured-projects .item-6,
        .section.featured-projects .item-7,
        .section.featured-projects .item-8,
        .section.featured-projects .item-9,
        .section.featured-projects .item-10 {
            grid-column: span 1;
        }
    }
}

@supports (display: grid) {
    @media screen and (min-width: 700px) {
        .section.featured-projects .grid-wrapper {
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: 13fr 13fr 13fr 13fr 13fr 13fr 13fr 13fr;
            height: 200em;
        }

        /* Main - volle breite */
        .section.featured-projects .col-num {
            grid-column: span 8;
        }

        /* 4rer oben */
        .section.featured-projects .item-2,
        .section.featured-projects .item-3,
        .section.featured-projects .item-5,
        .section.featured-projects .item-9 {
            grid-column: span 3;
        }

        .section.featured-projects .item-8,
        .section.featured-projects .item-4,
        .section.featured-projects .item-6 {
            grid-column: span 6;
        }

        .section.featured-projects .item-7,
        .section.featured-projects .item-10,
        .section.featured-projects .item-1 {
            grid-column: span 6;
        }

    }
}

@supports (display: grid) {
    @media screen and (min-width: 1000px) {
        .section.featured-projects .grid-wrapper {
            grid-template-columns: repeat(6, 1fr);
            grid-template-rows: 13fr 13fr 13fr 13fr 13fr 13fr 13fr 13fr;
            height: 200em;
        }

        /* Main - volle breite */
        .section.featured-projects .col-num {
            grid-column: span 8;
        }

        /* 4rer oben */
        .section.featured-projects .item-2,
        .section.featured-projects .item-3,
        .section.featured-projects .item-5,
        .section.featured-projects .item-9 {
            grid-column: span 3;
        }

        .section.featured-projects .item-8,
        .section.featured-projects .item-4,
        .section.featured-projects .item-6 {
            grid-column: span 6;
        }

        .section.featured-projects .item-7,
        .section.featured-projects .item-10,
        .section.featured-projects .item-1 {
            grid-column: span 6;
        }

    }
}

@supports (display: grid) {
    @media screen and (min-width: 1300px) {
        .section.featured-projects .grid-wrapper {
            grid-template-columns: repeat(8, 1fr);
            grid-template-rows: 3fr 6fr 6fr 6fr;
            height: 150em;
        }

        /* Main - volle breite */
        .section.featured-projects .col-num {
            grid-column: span 8;
        }

        /* 4rer oben */
        .section.featured-projects .item-2,
        .section.featured-projects .item-3,
        .section.featured-projects .item-5,
        .section.featured-projects .item-9 {
            grid-column: span 2;
        }

        .section.featured-projects .item-8,
        .section.featured-projects .item-4,
        .section.featured-projects .item-6 {
            grid-column: span 5;
        }

        .section.featured-projects .item-7,
        .section.featured-projects .item-10,
        .section.featured-projects .item-1 {
            grid-column: span 3;
        }

    }
}

.section.portfolio-detail .imprint-content p {
    text-align: justify;
    margin: 0px;
    padding: 0px;
    hyphens: auto;
    font-size: 16px;
    line-height: 26px;
}


.potfolio_container_holder {
    margin-top: 80px;
    margin-bottom: -40px;
}

.potfolio_container_holder li.current-cat a.filter_button {
    border: #F2001D solid 1px;
    background-color: #F2001D;
    color: #fff;
    display: inline-block;
    margin: 0 10px 10px 0;
    line-height: 40px;
    padding: 0 20px;
    cursor: pointer;
}

.potfolio_container_holder li a.filter_button,
#load_more_port_masorny_posts {
    background: #fff;
}

.potfolio_container_holder li a.filter_button,
#load_more_port_masorny_posts,
#load_more_port_masorny_posts.disabled {
    border: #1a1a1a solid 1px;
    color: #1a1a1a;
    display: inline-block;
    margin: 0 10px 10px 0;
    line-height: 40px;
    padding: 0 20px;
    cursor: pointer;
    background: #fff;
    text-transform: uppercase;
}

#load_more_port_masorny_posts,
#load_more_port_masorny_posts.disabled {
    border: #1a1a1a solid 1px;
    color: #1a1a1a;
    display: inline-block;
    margin: 0px 30px 35px 30px;
    line-height: 40px;
    padding: 0 20px;
    cursor: pointer;
    background: #fff;
    text-transform: uppercase;
}

.potfolio_container_holder li a.filter_button:hover,
.st_sf_vc_potrfolio .view-wrapper a.view:hover,
#load_more_port_masorny_posts:hover,
#load_more_port_masorny_posts.disabled:hover,
.st_sf_vc_port_mask .text-center .hover_overlay .view-wrapper a.view:hover {
    border: #F2001D solid 1px;
    background-color: #F2001D;
    color: #fff;
}

.potfolio_container_holder a.filter_button {
    padding: 0 20px;
    text-decoration: none;
    font-weight: 300;
    border-bottom: none;
}

.potfolio_container_holder div#filters .st_sf_list_cats {
    margin: 0px !important;
    padding: 30px 30px 25px 30px;
}

#load_more_port_masorny_posts,
.st_sf_port_style_ii .st_sf_vc_potrfolio,
.st_sf_vc_port_mask {
    transition: none;
}

.st_sf_vc_port_mask {
    background: rgba(0, 0, 0, 0.4);
}

.st_sf_vc_potrfolio .project-title h3.title {
    padding: 15px 0 0 25px;
    color: #fff;
    font-size: 18px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
}

.st_sf_vc_potrfolio .project-title p.title {
    padding: 15px 0 0 25px;
    color: #fff;
    font-size: 18px;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
}

.st_sf_vc_potrfolio .view-wrapper a.view,
.st_sf_vc_port_mask .text-center .hover_overlay .view-wrapper a.view {
    display: inline-block;
    padding: 14px 55px;
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    border: #fff solid 1px;
}

div#content .this_page.oi_page_holder .oi_sinle_portfolio_holder {
    margin-top: 80px;
}

.st_sf_s_t_wo_s {
    background-color: #f2f2f2;
}

.st_sf_load_more_holder {
    font-size: 16px;
}

.d3-iframe.iframe-loader {
    z-index: -1;
    background-color: #E6E5E5;
    width: 100%;
    height: 480px;
    text-align: center;
    padding: 230px 50px 0;
    font-size: 16px;
    color: #404040;
}

.d3-iframe.iframe-content {
    z-index: 2;
    position: absolute;
    width: 100%;
}


/*--------------------------------------------------------------
## Password
--------------------------------------------------------------*/



form.post-password-form {
    max-width: 136em;
    margin: 0 auto;
    padding: 70px 50px 70px;
}

form.post-password-form p:first-child {
    display: block;
    padding-bottom: 15px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color: #F2001D;
    margin-bottom: 30px;
}

input[type="submit"] {
    border: 1px solid #F2001D;
    color: #F2001D;
    background: transparent;
    padding: 12px 21px;
    font-size: inherit;
    margin-left: -4px;
    border-radius: 0px;
}

input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #F2001D;
    background: #F2001D;
    color: #fff;
    transition: 0.3s;
}

ul.content-liste li {
    width: 100% !important;
    margin: 5px 0px !important;
    font-weight: 300;
}

ul.content-liste li:nth-child(3) {
    margin-bottom: 30px !important;
}





/*--------------------------------------------------------------
# Templates
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Kontaktformular
--------------------------------------------------------------*/

#contact_form .section.imprint.formular {
    padding: 110px 0 100px;
}

#contact_form .formularfirstrow {
    width: 100%;
    margin: 0 auto;
}

#contact_form .form-control.message {
    width: 100%;
    padding: 10px 10px 10px 15px;
}

#contact_form .g-recaptcha div {
    text-align: center;
    width: inherit !important;
}

#contact_form .form-group.message {
    padding: 10px 0;
}

#contact_form .form-group.name input[type="text"],
#contact_form .form-group.email input[type="email"] {
    width: 100%;
}

#contact_form .form-group.email,
#contact_form .form-group.name {
    float: left;
    width: 50%;
}

#contact_form .form-group.name {
    padding: 0 20px 20px 0;
}

html #contact_form {
    margin: 0 auto;
    max-width: 136em;
    padding: 0 20px;
}

html #contact_form textarea#message {
    padding: 10px 10px 10px 15px;
}

div.wpcf7 .ajax-loader {
    width: inherit;
}

.grecaptcha-badge {
    visibility: hidden;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/

/* Globally hidden elements when Infinite Scroll is supported and in use. */

.infinite-scroll .posts-navigation,

/* Older / Newer Posts Navigation (always hidden) */

.infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none;
}


/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */

.infinity-end.neverending .site-footer {
    display: block;
}


/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}


/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
    max-width: 100%;
}


/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/

.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 0 auto;
}

.wp-caption-text {
    text-align: center;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}


/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/

.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}


/*--------------------------------------------------------------
# Responsive
--------------------------------------------------------------*/

@media screen and (min-width: 1700px) {

    .slider_title {
        font-weight: 300;
        font-size: 55px;
        padding-bottom: 15px;
    }

    .slider_p {
        font-size: 27px;
        line-height: 38px;
    }

    .featured-news .post-excerpt .post-excerpt_descr {
        height: 40px;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 120px 100px 100px;
    }
}

@media screen and (max-width: 1700px) {
    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 120px 100px 100px;
    }
}

@media screen and (max-width: 1550px) {
    .featured-news .post-excerpt .post-excerpt_descr {
        height: 60px;
    }

}

@media screen and (max-width: 1500px) {
    .featured-news .post-excerpt .post-excerpt_descr {
        height: 70px;
    }
}

@media screen and (max-width: 1440px) {
    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 110px 100px 100px
    }
}

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

    .introduce .title {
        max-width: none;
    }

    .section.services .service-content;

    .section.services .content .title {
        padding-left: 80px;
    }

    .section.services ul {
        margin-left: -90px;
    }

    .slider_content {
        padding: 180px 0 0 70px;
    }

    .slider_title {
        font-weight: 300;
        font-size: 55px;
        padding-bottom: 15px;
    }

    .slider_p {
        font-size: 27px;
        line-height: 38px;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 95px 110px 100px;
    }
}

@media screen and (max-width: 1050px) {
    .featured-news .post-excerpt .post-excerpt_descr {
        height: 90px;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 90px 110px 100px 50px;
    }
}

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

    html {
        margin: 0px;
    }

    .featured-news article:nth-child(1) .project {
        padding: 0 10px 20px 30px;
    }

    .featured-news article:nth-child(2) .project {
        padding: 0 30px 20px 10px;
    }

    .featured-news article:nth-child(3) .project,
    .featured-news article:nth-child(5) .project,
    .featured-news article:nth-child(7) .project,
    .featured-news article:nth-child(9) .project {
        padding: 0 10px 20px 30px;
    }

    .featured-news article:nth-child(4) .project,
    .featured-news article:nth-child(6) .project,
    .featured-news article:nth-child(8) .project,
    .featured-news article:nth-child(10) .project {
        padding: 0 30px 20px 10px;
    }

    .featured-news .project:nth-last-of-type(-n + 1) {
        padding-bottom: 20px;
    }

    .section.vita .container_vita .vita {
        margin: 0 40px;
    }

    .section.featured-projects.category #cnFilterOptions {
        margin: 0px 30px 20px 30px;
    }

    .st_sf_port_filter_holder,
    .st_sf_lmc_holder {
        margin: 0 40px 0;
    }

    #slider-section1,
    #slider-section2,
    #slider-section3,
    #slider-section4 {
        width: 100% !important;
    }

    body #pp-nav ul,
    body .pp-slidesNav ul {
        margin-right: 10px;
    }
}

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

    .section.services .content .title,
    .section.services .service-content {
        padding-left: 80px;
    }

    .section.services ul {
        margin-left: -80px;
    }

    .project-title.ueber-mich {
        top: 20%;
        left: 10%;
        right: 10%;
    }

    .pagination a,
    .pagination-offscreen,
    .post-pagination {
        width: 20%;
    }

    a.pagination-mitte {
        width: 60% !important;
    }

    .slider_content {
        padding: 125px 0 0 0;
        text-align: center;
        margin: auto 0;
        width: 100%;
    }

    .slider {
        height: 580px;
        background-image: none;
        background-color: #e9e4e8;
    }

    .slider_title {
        font-size: 50px;
        line-height: 55px;
        padding-bottom: 5px;
        color: #1a1a1a;
    }

    .slider_sub {
        font-size: 30px;
        line-height: 35px;
        padding: 0 0 35px 0;
        color: #f00;
    }

    .slider_p {
        font-size: 20px;
        line-height: 30px;
        width: inherit;
        color: #1a1a1a;
    }

    .slider_p a {
        color: #1a1a1a;
        border-bottom: 1px dotted #1a1a1a;
    }

    .slider_p a:hover {
        color: #F2001D;
        border-bottom: 1px solid #F2001D;
    }

    .slider_content p:nth-child(3) {
        padding: 0 0 25px 0;
    }

    .section.services .main-title p br {
        display: none;
    }

    .section.services .main-title p {
        padding: 0 30px;
    }

    .featured-news article:nth-child(1) .project {
        padding: 0 10px 20px 0;
    }

    .featured-news article:nth-child(2) .project {
        padding: 0 0 20px 10px;
    }

    .featured-news article:nth-child(3) .project,
    .featured-news article:nth-child(5) .project,
    .featured-news article:nth-child(7) .project,
    .featured-news article:nth-child(9) .project {
        padding: 0 10px 20px 0;
    }

    .featured-news article:nth-child(4) .project,
    .featured-news article:nth-child(6) .project,
    .featured-news article:nth-child(8) .project,
    .featured-news article:nth-child(10) .project {
        padding: 0 0 20px 10px;
    }
}

@media only screen and (max-width: 900px) {
    .section.vita .container_vita ul.vita-me li {
        width: 100%;
        background-size: auto 100%;
    }

    .section.vita .container_vita li.me-img {
        background-size: auto;
        order: 2;

    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        height: inherit;
        text-align: center;
        padding: 110px 110px 100px;
    }

    .section.vita .container_vita ul.vita-me {
        display: flex;
        flex-direction: column;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 70px 110px 60px;
    }

    .section.featured-projects.portfolio .project {
        width: 50%;
    }

}

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

    .section.portfolio-teaser ul li {
        width: calc(50% - 10px);
    }

    .section.portfolio-teaser ul li:nth-child(2),
    .section.portfolio-teaser ul li:nth-child(4) {
        margin: 0 0 0 0;
    }

    .section.portfolio-teaser ul li:nth-child(1),
    .section.portfolio-teaser ul li:nth-child(3) {
        margin: 0 20px 0 0;
    }

    .section.portfolio-teaser ul li:nth-child(3),
    .section.portfolio-teaser ul li:nth-child(4) {
        padding-top: 40px
    }

    .section.markenprojekte li.markenprojekte-aida,
    .section.markenprojekte li.markenprojekte-vca {
        margin: 0 0 20px 0;
    }

    .section.markenprojekte {
        padding: 110px 0 120px;
    }

    .section.markenprojekte li.markenprojekte-bsr,
    .section.markenprojekte li.markenprojekte-mm {
        margin: 0 20px 20px 0;
    }

    .featured-news .post-excerpt .post-excerpt_descr {
        height: 110px;
    }

    .section.markenprojekte li {
        width: calc(33.3333% - 15px);
    }
}

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

    .section.medetail .content {
        background-size: 400px auto;
        height: 600px;
        margin: 0px;
    }

    .featured-projects .project,
    .featured-news .project {
        width: 100%;
        position: relative;
        float: left;
    }

    .featured-projects .first {
        right: 0%;
    }

    .featured-projects .second,
    .featured-projects .third {
        margin-left: 0%;
    }

    .featured-projects .first .figure,
    .featured-news .first .figure {
        padding: 0 0 55% 0;
    }

    .featured-projects .first .view-wrapper,
    .featured-news .first .view-wrapper {
        padding-top: 25%;
    }

    .section.services li {
        width: 100%;
    }

    .section.services ul {
        margin-left: 0px;
    }

    .section.services .content .title,
    .section.services .service-content {
        text-align: center;
        padding-left: 0px;
    }

    .section.services .content {
        padding: 0 80px 0;
    }

    .section.services .main-title {
        padding-top: 20px;
    }

    .section.services .content .title,
    .section.privacy .content .title {
        padding-left: 0px;
    }

    .section.services,
    .section.privacy {
        padding: 60px 0 60px;
    }

    .section.imprint .content .title,
    .section.imprint .imprint-content {
        padding-left: 40px;
    }

    .section.imprint,
    .section.privacy {
        padding: 60px 0 40px;
    }


    .section.imprint li {
        width: 100%;
    }

    .section.imprint .content .title,
    .section.imprint .imprint-content {
        text-align: center;
        padding: 0px
    }

    .project-title.ueber-mich {
        top: 30%;
        left: 20%;
        right: 20%;
        text-align: center;
    }

    .introduce.error {
        padding: 160px 50px 170px;
    }

    .section.imprint,
    .section.privacy {
        padding: 90px 40px 30px;
    }

    .slider_content {
        padding: 92px 0 0 0;
        text-align: center;
        margin: auto 0;
        width: 100%;
    }

    .slider {
        height: 450px;
    }

    .slider_title {
        font-size: 40px;
        line-height: 55px;
        padding-bottom: 0px;
    }

    .slider_sub {
        font-size: 24px;
        line-height: 27px;
        padding: 0 0 25px 0;
    }

    .slider_p {
        font-size: 18px;
        line-height: 28px;
    }

    .slider_content p:nth-child(3) {
        padding: 0 0 22px 0;
    }

    .section.services ul ul.list {
        margin-left: 0px;
    }

    .section.services ul ul.list li {
        display: inline;
    }

    .section.services .main-title p {
        margin-bottom: 30px;
    }

    .section.services .content .main-title.first img,
    .section.services .content .main-title.second img,
    .section.services .content .main-title.third img {
        margin-bottom: 40px;
    }

    .section.services ul ul.list {
        padding-bottom: 30px;
    }

    .section.services {
        padding: 60px 0 30px;
    }

    .featured-news article:nth-child(1) .project,
    .featured-news article:nth-child(2) .project,
    .featured-news article:nth-child(3) .project,
    .featured-news article:nth-child(4) .project,
    .featured-news article:nth-child(5) .project,
    .featured-news article:nth-child(6) .project,
    .featured-news article:nth-child(7) .project,
    .featured-news article:nth-child(8) .project,
    .featured-news article:nth-child(9) .project,
    .featured-news article:nth-child(10) .project {
        padding: 0 0 10px 0;
    }

    .featured-news .project .figure a img {
        display: none;
    }

    .featured-news .post-excerpt {
        padding: 30px 30px 35px 30px;
    }

    .featured-news .post-excerpt .post-excerpt_descr {
        height: inherit;
    }

    html #cnfolioHolder ul.cnOurHolder li.item {
        width: calc(50% - 4px) !important;
        float: left;
    }

    html #contact_form,
    .main-title.col-md-12 {
        margin: 0px;
        padding: 0px;
    }

}

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

    .section.portfolio-detail li {
        width: 100%;
    }

    .section.portfolio-detail li:nth-child(2) {
        margin: 50px 0;
    }

    .section.markenprojekte li.markenprojekte-aida,
    .section.markenprojekte li.markenprojekte-vca {
        margin: 0 0 20px 0;
    }

    .section.services .content,
    .section.imprint .content,
    .site-header .content,
    .slider-section .content,
    .section.footer-new .content,
    .section.markenprojekte .content,
    .section.main-img .content,
    .section.featured-projects .content,
    .section.portfolio-detail .content,
    .section.portfolio-detailimages .content,
    .section.portfolio-detailclick .content,
    .section.medetail-text .content,
    .section.portfolio-teaser .content {
        max-width: 100%;

    }

    .section.main-img .content {
        background-image: none;
    }

    .section.main-img .content div {
        padding: 120px 0 0 0;
        width: 100%;
    }

    .st_sf_port_filter_holder,
    .st_sf_lmc_holder {
        margin: 0px;
        text-align: center;
    }

    .logo {
        margin: 0;
    }

    button.menu-toggle {
        padding: 27px 34px 0 0;
    }

    div#filters {
        margin: 0px 30px;
        text-align: left;
    }

    .section.imprint,
    .section.privacy {
        padding: 90px 30px 30px;
    }

    .section.vita .container_vita .vita {
        margin: 0 30px;
    }
}

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

    .section.main-img h1 br {
        display: none;
    }

    li.footer_second_nav,
    li.footer_first_nav {
        width: 100%;
    }

    ul.footer_questions {
        padding: 60px 0 80px;
        text-align: center;
    }

    ul.footer_questions h3 {
        text-align: center;
    }

    li.footer_fragen {
        margin-top: 30px;
    }

    div#footer-sidebar li.footer_fragen,
    div#footer-sidebar li.footer_kontakt {
        width: 100%;
    }

    .section.footer-new {
        padding: 40px 0 30px;
    }

    ul.footer_links {
        text-align: center;
    }

    li.footer_first_nav {
        margin-bottom: 10px;
    }

    .section.markenprojekte li.markenprojekte-aida,
    .section.markenprojekte li.markenprojekte-vca {
        margin: 0 20px 20px 0;
    }

    .section.markenprojekte li.markenprojekte-universal,
    .section.markenprojekte li.markenprojekte-bsr,
    .section.markenprojekte li.markenprojekte-vca,
    .section.markenprojekte li.markenprojekte-mm {
        margin: 0 0 20px 0;
    }

    .section.markenprojekte li {
        width: calc(50% - 10px);
    }
}


@media screen and (max-width: 640px) {
    .section.services li {
        width: 100%;
    }

    .section.services .content .title,
    .section.services .service-content {
        text-align: center;
    }

    .section.services .content .title,
    .section.services .service-content,
    .section.services li:last-child .title,
    .section.services li:last-child .service-content {
        padding: 0px !important;
    }

    .section.imprint ul {
        padding: 0px;
    }

    .introduce {
        padding: 60px 30px 70px;
    }

    .project-title.ueber-mich {
        top: 25%;
        left: 15%;
        right: 15%;
        text-align: center;
    }

    .pagination a,
    .pagination-offscreen,
    .post-pagination {
        width: 25%;
    }

    a.pagination-mitte {
        width: 50% !important;
    }

    .slider_content {
        padding: 92px 30px 0 30px;
        text-align: center;
        margin: auto 0;
        width: 100%;
    }

    .slider {
        height: 450px;
    }

    .slider_title {
        font-size: 38px;
        line-height: 47px;
        padding-bottom: 0px;
    }

    .slider_sub {
        font-size: 24px;
        line-height: 27px;
        padding: 0 0 25px 0;
    }

    .slider_p {
        font-size: 16px;
        line-height: 24px;
    }

    .slider_content p:nth-child(3) {
        padding: 0 0 22px 0;
    }

    .section.vita .container_vita .vita {
        margin: 0 30px;
    }

    .section.vita .container_vita ul.vita-me {
        padding: 0 0 30px 0;
    }

    .section.featured-projects.portfolio .project {
        width: 100%;
    }
}


@media screen and (max-width: 570px) {
    .section.portfolio-detailclick {
        padding: 90px 20px;
    }

    .section.vita .container_vita .vita .table-sub {
        font-size: 18px;
        color: #1a1a1a;
        padding: 6px 0 5px 0;
        font-weight: 500;
    }

    .section.vita .container_vita .vita .table-text {
        padding: 0 0 35px 0;
    }

    .section.vita .container_vita .vita .table-year {
        color: #747474;
        width: 100px;
        padding: 0 0 10px 0;
    }

    .section.vita .container_vita .vita .padding-top {
        padding: 35px 0 0 0;
    }

    .section.vita .container_vita .vita .cell.table-head {
        padding-bottom: 15px;
    }

    .section.vita .container_vita .vita .table {
        display: inherit;
    }

    .section.vita .container_vita .vita .row {
        display: inherit;
        margin: 0px;
    }

    .section.vita .container_vita .vita .cell {
        display: inherit;
    }

    .section.vita .container_vita .cell.table-head.empty {
        display: none;
    }
}

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

    .section.portfolio-teaser h1 {
        font-size: 34px;
        line-height: 45px;
    }

    .section.services .content,
    .section.imprint .content,
    .site-header .content,
    .slider-section .content,
    .section.footer-new .content,
    .section.markenprojekte .content,
    .section.main-img .content,
    .section.featured-projects .content,
    .section.portfolio-detail .content,
    .section.portfolio-detailimages .content,
    .section.portfolio-detailclick .content,
    .section.medetail-text .content,
    .section.portfolio-teaser .content {
        padding: 0 20px;

    }

    .section.main-img {
        height: 620px;
    }

    .section.main-img p {
        font-size: 16px;
        line-height: 25px;
    }

    h1 {
        font-size: 34px;
        line-height: 45px;
    }

    .section.main-img .content div {
        padding: 50px 0 0 0;
    }

    .section.services {
        padding: 50px 0 30px;
    }

    .section.privacy {
        padding: 80px 0 30px;
    }

    .introduce {
        padding: 50px 30px 60px
    }

    .section.services h2,
    .section.imprint h2 {
        padding-bottom: 20px;
    }

    .introduce.error {
        padding: 100px 50px 110px;
    }

    .pagination a,
    .pagination-offscreen,
    .post-pagination {
        width: 30%;
    }

    a.pagination-mitte {
        width: 40% !important;
    }

    .slider div br {
        display: none;
    }

    .slider_content {
        padding: 55px 20px 0 20px;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 50px 70px 50px;
    }
}

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

    .section.medetail .content {
        background-size: 280px auto;
        height: 410px;
        margin: 0px;
    }

    .section.portfolio-teaser div {
        padding: 160px 0 140px 0;
    }

    h2 {
        font-size: 30px
    }

    .section.privacy .main-title h1 {
        font-size: 32px;
        padding-bottom: 30px;
    }

    .project-title.ueber-mich {
        top: 22%;
        left: 10%;
        right: 10%;
        text-align: center;
    }

    .pagination a,
    .pagination-offscreen,
    .post-pagination {
        width: 50%;
    }

    a.pagination-mitte {
        display: none;
    }

    .icon-left-open-big:before {
        min-width: 50%;
        border-right: 4px solid #fff;
    }

    .icon-right-open-big:before {
        min-width: 50%;
        border-left: 4px solid #fff;
    }

    .section.services .content {
        padding: 0 30px 0;
    }

    #contact_form .form-group.name {
        padding: 0 0 10px 0;
    }

    #contact_form .form-group.email,
    #contact_form .form-group.name {
        float: inherit;
        width: 100%;
    }
}


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

    li.markenprojekte-n24,
    li.markenprojekte-aida,
    li.markenprojekte-verivox,
    li.markenprojekte-telekom,
    .section.markenprojekte li.markenprojekte-universal,
    .section.markenprojekte li.markenprojekte-bsr,
    .section.markenprojekte li.markenprojekte-vca,
    .section.markenprojekte li.markenprojekte-mm {
        margin: 0 0 20px 0;
    }

    .section.markenprojekte li {
        width: 100%;
    }
}

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

    .section.main-img {
        height: 670px;
    }

    .slider_content {
        padding: 55px 20px 0 20px;
    }

    .slider {
        height: 520px;
    }

    .section.vita .container_vita ul.vita-me li:nth-child(2) {
        padding: 30px 25px 20px;
    }
}

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

    .introduce {
        padding: 60px 20px 30px;
    }

    .section.services .content {
        padding: 0 30px 0;
    }

    .section.privacy {
        padding: 55px 0 20px;
    }

    .section.imprint {
        padding: 55px 20px 20px;
    }

    .project-title.ueber-mich {
        top: 8%;
        left: 5%;
        right: 5%;
        text-align: center;
    }

    .introduce.error {
        padding: 50px 50px 60px;
    }
}