@charset "UTF-8";

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

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

audio,
canvas,
video {
    display: inline-block
}

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

[hidden] {
    display: none
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

body {
    margin: 0
}

a:focus {
    outline: thin dotted
}

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

h1 {
    font-size: 2em
}

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

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

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

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}

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
}

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

figure {
    margin: 0
}

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

legend {
    border: 0;
    padding: 0
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,
input {
    line-height: normal
}

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

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

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

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

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

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

textarea {
    overflow: auto;
    vertical-align: top
}

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


/*!
## Mixins
*/

html {
    font-size: 16px
}


/*!
## Isotope styles
*/

.isotope-item {
    z-index: 2
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1
}

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width
}

.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
    transition-property: transform, opacity
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
    -webkit-transition-duration: 0s;
    -moz-transition-duration: 0s;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s
}


/*!
## Typography
*/

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@font-face {
    font-family: "AdobeGaramond";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/2A3711_0_0.eot");
    src: url("../fonts/2A3711_0_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2A3711_0_0.woff") format("woff"), url("../fonts/2A3711_0_0.ttf") format("truetype")
}

@font-face {
    font-family: "AdobeGaramond";
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/2A3711_1_0.eot");
    src: url("../fonts/2A3711_1_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2A3711_1_0.woff") format("woff"), url("../fonts/2A3711_1_0.ttf") format("truetype")
}

@font-face {
    font-family: "AdobeGaramond";
    font-weight: bold;
    font-style: italic;
    src: url("../fonts/2A3711_2_0.eot");
    src: url("../fonts/2A3711_2_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2A3711_2_0.woff") format("woff"), url("../fonts/2A3711_2_0.ttf") format("truetype")
}

@font-face {
    font-family: "AdobeGaramond";
    font-weight: normal;
    font-style: italic;
    src: url("../fonts/2A3711_3_0.eot");
    src: url("../fonts/2A3711_3_0.eot?#iefix") format("embedded-opentype"), url("../fonts/2A3711_3_0.woff") format("woff"), url("../fonts/2A3711_3_0.ttf") format("truetype")
}

@font-face {
    font-family: TSTARPROLight;
    src: url("../fonts/tstarpro-light-webfont.eot"), url("../fonts/tstarpro-light-webfont.woff") format("woff"), url("../fonts/tstarpro-light-webfont.ttf") format("truetype")
}

@font-face {
    font-family: TSTARPRORegular;
    src: url("../fonts/tstarpro-regular-webfont.eot"), url("../fonts/tstarpro-regular-webfont.woff") format("woff"), url("../fonts/tstarpro-regular-webfont.ttf") format("truetype")
}

@font-face {
    font-family: TSTARPROMedium;
    src: url("../fonts/tstarpro-medium-webfont.eot"), url("../fonts/tstarpro-medium-webfont.woff") format("woff"), url("../fonts/tstarpro-medium-webfont.ttf") format("truetype")
}

@font-face {
    font-family: TSTARPROBold;
    src: url("../fonts/tstarpro-bold-webfont.eot"), url("../fonts/tstarpro-bold-webfont.woff") format("woff"), url("../fonts/tstarpro-bold-webfont.ttf") format("truetype")
}


/*!
## Icons
*/

@font-face {
    font-family: 'MCS';
    src: url("../fonts/mcs.eot?apagvn");
    src: url("../fonts/mcs.eot?#iefixapagvn") format("embedded-opentype"), url("../fonts/mcs.woff?apagvn") format("woff"), url("../fonts/mcs.ttf?apagvn") format("truetype"), url("../fonts/mcs.svg?apagvn#MCS") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'MCScloud';
    src: url("../fonts/mcs-cloud.eot?apagvn");
    src: url("../fonts/mcs-cloud.eot?#iefixapagvn") format("embedded-opentype"), url("../fonts/mcs-cloud.woff?apagvn") format("woff"), url("../fonts/mcs-cloud.ttf?apagvn") format("truetype"), url("../fonts/mcs-cloud.svg?apagvn#mcs-cloud") format("svg");
    font-weight: normal;
    font-style: normal
}

[class^="icon-"],
[class*=" icon-"] {
    font-family: 'MCS';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-logo {
    color: #009fe3;
    font-size: 5.3125em;
    line-height: .5;
    position: relative;
    z-index: 100;
    top: -9px
}

.icon-logo:before {
    content: "\61"
}

.icon-logo span {
    display: none
}

.icon-navicon {
    font-size: 2.8125em;
    color: #31374f
}

.icon-navicon:before {
    content: "h"
}

.icon-navicon:hover {
    color: #009fe3;
    cursor: pointer
}

.icon-navicon.current {
    color: #009fe3
}

.icon-close {
    font-size: 1.5625em;
    color: #edf2f5
}

.icon-close:hover {
    cursor: pointer
}

.icon-close:before {
    content: "i"
}

.icon-arrow-single-left:before {
    content: "d"
}

.icon-arrow-single-right:before {
    content: "e"
}

.icon-arrow-double-left:before {
    content: "f"
}

.icon-arrow-double-right:before {
    content: "g"
}

.icon-location:before {
    content: "j"
}

.icon-download:before {
    content: "k"
}

.stacked:before {
    letter-spacing: -1em
}

.icon-it-systemtechnik.stacked:before {
    content: "n"
}

.icon-it-systemtechnik.stacked:after {
    content: "A"
}

.icon-cloud.stacked:before {
    /* font-family: "NIMBLU";
    content: "\e01f"; */
    font-family: 'MCScloud';
    content: "E";
}

.icon-cloud.stacked:after {
    /* font-family: "NIMBLU";
    content: "\e01e"; */
    font-family: 'MCScloud';
    content: "F";
}

.icon-software-entwicklung.stacked:before {
    content: "c";
    color: #edf2f5 !important
}

.icon-software-entwicklung.stacked:after {
    content: "x";
    color: #31374f !important
}

.icon-server-storage.stacked:before {
    content: "w"
}

.icon-server-storage.stacked:after {
    content: "v"
}

.icon-it-security.stacked:before {
    content: "u"
}

.icon-it-security.stacked:after {
    content: "t"
}

.icon-rechenzentrum.stacked:before {
    content: "z"
}
/* MCS icon in Rechenzentrum nicht mehr benötigt:
.icon-rechenzentrum.stacked:after {
    content: "\e616"
}
*/

.icon-datenbanken.stacked:before {
    content: "q"
}

.icon-datenbanken.stacked:after {
    content: "p"
}

.icon-forschung.stacked:before {
    content: "o"
}

.icon-forschung.stacked:after {
    content: "B"
}

.icon-private-cloud.stacked:before {
    content: "C"
}


.icon-private-cloud.stacked:after {
    content: "b"
}

ul.features li i.icon-it-systemtechnik.stacked {
    margin-left: -12px;
    margin-right: 8px
}

ul.features li i.icon-cloud.stacked.stacked {
    margin-left: -18px
}

ul.features li i.icon-software-entwicklung.stacked {
    margin-left: -13px;
    margin-right: 8px
}

ul.features li i.icon-server-storage.stacked {
    margin-left: -27px;
    margin-right: -10px
}

ul.features li i.icon-it-security.stacked {
    margin-left: -2px;
    margin-right: 12px
}

ul.features li i.icon-rechenzentrum.stacked {
    margin-left: -21px;
    margin-right: -5px
}

ul.features li i.icon-datenbanken.stacked {
    margin-left: -23px;
    margin-right: -10px
}

ul.features li i.icon-forschung.stacked {
    margin-left: -11px
}

ul.features li i.icon-private-cloud.stacked {
    margin-left: -9px;
    margin-right: 5px
}

body.it-systemtechnik ul.features li i.stacked:before {
    color: #22b28a
}

body.cloud ul.features li i.stacked:before {
    color: #afbec9
}

body.software-entwicklung ul.features li i.stacked:before {
    color: #de5252
}

.icon-contact.stacked {
    font-size: 2.5em
}

.icon-contact.stacked:before {
    content: "l";
    color: #edf2f5
}

.icon-contact.stacked:after {
    content: "m";
    color: #31374f
}

ul.onesystem .stacked {
    font-size: 9.375em
}

ul.onesystem .stacked:before {
    color: #31374f
}

ul.onesystem .stacked:after {
    color: #edf2f5
}

dl.conclusion .stacked {
    font-size: 6.25em
}

dl.conclusion .stacked:before {
    color: #009fe3
}

dl.conclusion .stacked:after {
    color: #31374f
}


/*!
## Carousel
*/

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    height: auto;
    width: 100%;
    line-height: 1;
    display: block
}

.carousel {
    position: relative
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%
}

.carousel-inner>.item {
    display: none;
    position: relative;
    -webkit-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left
}

.carousel-inner>.active,
.carousel-inner>.next,
.carousel-inner>.prev {
    display: block
}

.carousel-inner>.active {
    left: 0
}

.carousel-inner>.next,
.carousel-inner>.prev {
    position: absolute;
    top: 0;
    width: 100%
}

.carousel-inner>.next {
    left: 100%
}

.carousel-inner>.prev {
    left: -100%
}

.carousel-inner>.next.left,
.carousel-inner>.prev.right {
    left: 0
}

.carousel-inner>.active.left {
    left: -100%
}

.carousel-inner>.active.right {
    left: 100%
}

.carousel-control {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0
}

.carousel-control.left {
    right: auto;
    left: 0
}

.carousel-control.right {
    right: 0;
    left: auto
}

.carousel-indicators {
    margin-bottom: 0 !important;
    position: absolute;
    z-index: 15
}

.carousel-indicators li {
    margin: 5px !important
}

.carousel .carousel-control .icon-arrow-single-left,
.carousel .carousel-control .icon-arrow-single-right {
    position: absolute;
    top: 50%;
    z-index: 50;
    display: inline-block
}

.carousel .carousel-indicators li {
    width: 10px;
    height: 10px;
    background: #edf2f5;
    cursor: pointer;
    display: inline-block
}

.carousel .carousel-indicators li.active {
    border: none;
    background: #009fe3;
    cursor: default
}

.carousel .carousel-indicators li.active:hover {
    opacity: 1
}

.carousel .carousel-indicators li:hover {
    opacity: .7
}

#mcs {
    margin-bottom: 20px;
    margin-top: -143px
}

#mcs.carousel .carousel-caption {
    position: absolute;
    z-index: 10;
    right: 15%;
    left: 15%;
    bottom: 35px
}

#mcs.carousel .carousel-caption h2 {
    margin-bottom: 8px;
    line-height: 1.5em;
    color: #edf2f5;
    font-family: "AdobeGaramond";
    text-transform: none
}

@media screen and (min-width: 1024px) {
    #mcs.carousel .carousel-caption h2 {
        font-size: 2.5em
    }
}

@media screen and (max-width: 1023px) {
    #mcs.carousel .carousel-caption h2 {
        font-size: 1.875em
    }
}

#mcs.carousel .carousel-caption h2 span {
    padding: 6px 15px 0 15px;
    margin-bottom: 4px;
    background: #31374f;
    position: relative;
    display: inline-block
}

@media screen and (min-width: 640px) {
    #mcs.carousel .carousel-caption h2 span {
        white-space: nowrap
    }
}

#mcs.carousel .carousel-caption h2 span:last-child {
    padding-right: 0
}

#mcs.carousel .carousel-caption h2 span:last-child:after {
    content: ""
}

@media screen and (min-width: 1024px) {
    #mcs.carousel .carousel-caption h2 span:last-child:after {
        padding-top: 16px !important;
        border-left: 14px solid #31374f;
        border-bottom: 10px dotted transparent !important;
        border-bottom-style: dotted;
        position: relative;
        right: -14px
    }
}

@media screen and (min-width: 640px) {
    #mcs.carousel .carousel-caption h2 span:last-child:after {
        padding-top: 13px;
        border-left: 14px solid #31374f;
        border-bottom: 8px dotted transparent;
        border-bottom-style: dotted;
        position: relative;
        right: -14px
    }
}

#mcs.carousel .carousel-control {
    width: 15%;
    color: #edf2f5;
    font-size: 2.8125em
}

#mcs.carousel .carousel-control .icon-arrow-single-left {
    left: 20%
}

#mcs.carousel .carousel-control .icon-arrow-single-right {
    right: 20%
}

#mcs.carousel .carousel-indicators {
    width: auto;
    right: 50px;
    bottom: 20px
}

@media screen and (max-width: 640px) {
    #mcs {
        margin-top: 0;
        overflow: hidden
    }
    #mcs .container {
        width: 100%
    }
    #mcs.carousel .carousel-caption {
        min-height: 130px;
        padding: 20px 10px 0 10px;
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        background: #31374f
    }
    #mcs.carousel .carousel-caption h2 {
        font-size: 1.125em
    }
    #mcs.carousel .carousel-caption h2 span {
        margin: 0;
        padding: 0;
        display: inline
    }
    #mcs.carousel .carousel-indicators {
        right: 20px;
        bottom: 10px
    }
}

#technologypartner {
    margin: 0 auto 20px auto
}

@media screen and (min-width: 1024px) {
    #technologypartner {
        width: 820px
    }
}

@media screen and (max-width: 1023px) {
    #technologypartner {
        width: 720px
    }
}

@media screen and (max-width: 640px) {
    #technologypartner {
        width: 480px
    }
}

@media screen and (max-width: 384px) {
    #technologypartner {
        width: 240px
    }
}

#technologypartner.carousel .carousel-control {
    width: 5%;
    color: #31374f;
    font-size: 30px
}

#technologypartner.carousel .carousel-control.left {
    left: -5%
}

#technologypartner.carousel .carousel-control.right {
    right: -5%
}

#technologypartner.carousel .carousel-control .icon-arrow-single-left {
    top: 30%;
    right: 0
}

#technologypartner.carousel .carousel-control .icon-arrow-single-right {
    top: 30%;
    left: 0
}

#technologypartner.carousel .carousel-indicators {
    width: 100%;
    text-align: center;
    bottom: -40px
}

#technologypartner.carousel .carousel-indicatorsli:hover {
    opacity: 1
}

#technologypartner ul.partners {
    margin-bottom: 0;
    overflow: hidden
}

#technologypartner ul.partners li {
    list-style: none !important
}

@media screen and (max-width: 1023px) {
    #technologypartner ul.partners li.col-twelve-2 {
        width: 100px
    }
}

@media screen and (max-width: 640px) {
    #technologypartner ul.partners li.col-twelve-2 {
        width: auto
    }
}

@media screen and (max-width: 384px) {
    #technologypartner ul.partners li.col-twelve-2 {
        width: 100px
    }
}

#technologypartner .carousel-inner {
    margin: 0 auto 0 auto
}

@media screen and (max-width: 384px) {
    #technologypartner .carousel-inner {
        width: 240px
    }
}

#magazine {
    padding-bottom: 20px;
    margin: 0 auto 20px auto
}

@media screen and (min-width: 1024px) {
    #magazine {
        width: 960px
    }
}

@media screen and (max-width: 1023px) {
    #magazine {
        width: 720px
    }
}

@media screen and (max-width: 640px) {
    #magazine {
        width: 480px
    }
}

@media screen and (max-width: 384px) {
    #magazine {
        width: 240px
    }
}

#magazine.carousel .carousel-control {
    width: 5%;
    color: #31374f;
    font-size: 30px
}

#magazine.carousel .carousel-control.left {
    left: -5%
}

#magazine.carousel .carousel-control.right {
    right: -5%
}

#magazine.carousel .carousel-control .icon-arrow-single-left {
    top: 30%;
    right: 0
}

#magazine.carousel .carousel-control .icon-arrow-single-right {
    top: 30%;
    left: 0
}

#magazine.carousel .carousel-indicators {
    width: 100%;
    text-align: center;
    bottom: -30px
}

#magazine.carousel .carousel-indicators li {
    background: white
}

#magazine.carousel .carousel-indicators li.active {
    background: #009fe3
}

#magazine.carousel .carousel-indicatorsli:hover {
    opacity: 1
}

#magazine ul.issues {
    margin-bottom: 0;
    overflow: hidden
}

#magazine ul.issues li {
    list-style: none !important;
    text-align: center
}

#magazine ul.issues li a {
    text-decoration: none
}

#magazine ul.issues li img {
    margin-bottom: 5px
}

#magazine ul.issues li span {
    color: #31374f
}

#magazine ul.issues li:hover img {
    opacity: .8
}

@media screen and (max-width: 1023px) {
    #magazine ul.issues li.col-twelve-2 {
        width: 100px
    }
}

#magazine .carousel-inner {
    margin: 0 auto 0 auto
}

@media screen and (max-width: 384px) {
    #magazine .carousel-inner {
        width: 240px
    }
}

#magazine li {
    margin-left: 0 !important;
    list-style: none !important
}


/*!
## Grid
*/

div.container {
    margin: 0 auto 0 auto;
    overflow: hidden
}

@media screen and (min-width: 1200px) {
    div.container {
        width: 960px
    }
}

@media screen and (min-width: 1024px) {
    div.container {
        width: 960px
    }
}

@media screen and (max-width: 1023px) {
    div.container {
        width: 720px
    }
}

@media screen and (max-width: 640px) {
    div.container {
        width: 480px
    }
}

@media screen and (max-width: 384px) {
    div.container {
        width: 240px
    }
}

div.row {
    width: 100%;
    margin-bottom: 20px;
    float: left
}

@media screen and (max-width: 1023px) {
    div.row {
        margin-bottom: 10px
    }
}

div.row.listheader {
    margin-bottom: 0
}

div.row.listheader div[class*="col-"] {
    margin-bottom: 0
}

div.row.listheader h2,
div.row.listheader h3 {
    margin-bottom: 5px
}

#content div.container:first-child .row:first-child {
    margin-bottom: 0
}

#content div.container:last-child .row:last-child {
    margin-bottom: 0
}

#content div.container .row p:last-child {
    margin-bottom: 0
}

div [class*="col-"] {
    margin: 10px;
    float: left
}

div [class*="col-"]>.wrapper {
    padding: 10px
}

div [class*="col-"] img {
    width: 100%;
    height: auto;
    display: block
}

.col-full {
    margin-bottom: 20px
}

.col-full img {
    width: 100%;
    height: auto
}

.col-one {
    width: 940px
}

@media screen and (max-width: 1023px) {
    .col-one {
        width: auto
    }
}

@media screen and (max-width: 1023px) {
    .col-one .vimeo {
        width: 700px
    }
}

@media screen and (max-width: 640px) {
    .col-one .vimeo {
        width: 460px
    }
}

@media screen and (max-width: 384px) {
    .col-one .vimeo {
        width: 220px
    }
}

.col-two,
.col-brick-460-380 {
    width: 460px
}

@media screen and (max-width: 1023px) {
    .col-two,
    .col-brick-460-380 {
        width: 340px
    }
}

@media screen and (max-width: 640px) {
    .col-two,
    .col-brick-460-380 {
        width: auto
    }
}

@media screen and (max-width: 384px) {
    .col-brick-460-380 {
        width: 220px !important
    }
}

.col-three,
.col-three-1 {
    width: 300px
}

@media screen and (max-width: 1023px) {
    .col-three,
    .col-three-1 {
        width: 220px
    }
}

@media screen and (max-width: 640px) {
    .col-three,
    .col-three-1 {
        width: auto
    }
}

.col-three-2 {
    width: 620px
}

@media screen and (max-width: 1023px) {
    .col-three-2 {
        width: 460px
    }
}

@media screen and (max-width: 640px) {
    .col-three-2 {
        width: auto
    }
}

@media screen and (max-width: 384px) {
    .col-three-2 {
        width: 220px
    }
}

@media screen and (max-width: 1023px) {
    .col-three-2 .vimeo {
        width: 460px
    }
}

@media screen and (max-width: 384px) {
    .col-three-2 .vimeo {
        width: 220px
    }
}

.col-four,
.col-brick-220-150,
.col-four-1 {
    width: 220px
}

.col-four-2 {
    width: 460px
}

.col-four-3 {
    width: 700px
}

@media screen and (max-width: 640px) {
    .col-four-3 {
        width: auto
    }
}

.col-six,
.col-six-1 {
    width: 140px
}

.col-six-2 {
    width: 300px
}

.col-six-3 {
    width: 460px
}

.col-six-4 {
    width: 620px
}

.col-six-5 {
    width: 780px
}

.col-twelve,
.col-twelve-1 {
    width: 60px
}

.col-twelve-2 {
    width: 140px
}

.col-twelve-3 {
    width: 220px
}

.col-twelve-4 {
    width: 300px
}

.col-twelve-5 {
    width: 380px
}

.col-twelve-6 {
    width: 460px
}

.col-twelve-7 {
    width: 540px
}

.col-twelve-8 {
    width: 620px
}

.col-twelve-9 {
    width: 700px
}

.col-twelve-10 {
    width: 780px
}

.col-twelve-11 {
    width: 860px
}

div.grid .row {
    margin-bottom: -10px
}

div.grid .row:last-child {
    margin-bottom: 30px
}

div.grid .row div {
    background: #edf2f5
}

div.grid .row div span {
    text-align: center;
    padding: 10px;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    display: block
}

div.grid .row div.col-full {
    width: 100%
}


/*!
## Helper classes
*/

.center {
    width: 100%
}

@media screen and (min-width: 1200px) {
    .hidden-xl {
        display: none !important
    }
}

@media screen and (min-width: 1024px) {
    .hidden-lg {
        display: none !important
    }
}

@media screen and (max-width: 1023px) {
    .hidden-md {
        display: none !important
    }
}

@media screen and (max-width: 640px) {
    .hidden-sm {
        display: none !important
    }
}

@media screen and (max-width: 384px) {
    .hidden-xs {
        display: none !important
    }
}

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xl {
    display: none !important
}

@media screen and (min-width: 1200px) {
    .visible-xl {
        display: block !important
    }
}

@media screen and (min-width: 1024px) {
    .visible-lg {
        display: block !important
    }
}

@media screen and (max-width: 1023px) {
    .visible-md {
        display: block !important
    }
}

@media screen and (max-width: 640px) {
    .visible-sm {
        display: block !important
    }
}

@media screen and (max-width: 384px) {
    .visible-xs {
        display: block !important
    }
}

.container.doomed h1 {
    color: #de5252
}

body.shortcodes section#content div [class*="col-"]:hover {
    background: #edf2f5
}

.show {
    display: block !important
}

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

.invisible {
    visibility: hidden
}

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

.visible-print {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }
    .hidden-print {
        display: none !important
    }
    table.visible-print {
        display: table
    }
    tr.visible-print {
        display: table-row !important
    }
    th.visible-print,
    td.visible-print {
        display: table-cell !important
    }
}


/*!
## Theme
*/

body {
    color: #31374f;
    font-size: 1em;
    font-family: "AdobeGaramond", "Times New Roman", Times, serif;
    background: white
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

a {
    color: #009fe3;
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

a.more,
span.more {
    margin-right: 20px;
    padding: 2px 0 3px 5px;
    color: #edf2f5;
    font-family: "TSTARPROBold", Helvetica, sans-serif;
    text-transform: uppercase;
    background: #009fe3;
    display: inline-block;
    position: relative
}

@media screen and (max-width: 640px) {
    a.more,
    span.more {
        margin-bottom: 20px
    }
}

a.more:hover,
a.more.active,
span.more:hover,
span.more.active {
    background: #31374f;
    text-decoration: none
}

a.more:hover:after,
a.more.active:after,
span.more:hover:after,
span.more.active:after {
    border-left-color: #31374f
}

a.more:after,
span.more:after {
    content: "";
    border-left: 8px solid #009fe3;
    border-bottom: 5px solid transparent;
    border-bottom-style: dotted;
    position: relative;
    right: -8px;
    top: -2px
}

a.more i,
span.more i {
    position: relative;
    top: 1px;
    right: -4px
}

ul {
    list-style: none
}

iframe {
    border: 0
}

iframe.piwik {
    width: 100%;
    height: 230px
}

::selection {
    background: #009fe3;
    color: #edf2f5
}

h1,
h2,
h3,
h4,
h5 {
    text-transform: uppercase;
    font-weight: normal
}

h2,
h3,
h4,
h5 {
    color: #009fe3;
    font-family: "TSTARPRORegular", Helvetica, sans-serif
}

h1 {
    font-size: 3.75em;
    font-family: "TSTARPROLight", Helvetica, sans-serif;
    line-height: 1em
}

@media screen and (min-width: 1023px) {
    h1 {
        margin-top: -8px
    }
}

@media screen and (max-width: 640px) {
    h1 {
        margin-top: -3px
    }
}

@media screen and (max-width: 640px) {
    h1 {
        font-size: 1.875em
    }
}

h2 {
    margin-bottom: 12px;
    font-size: 2.25em;
    line-height: 1.1
}

@media screen and (max-width: 640px) {
    h2 {
        margin-bottom: 10px
    }
}

@media screen and (max-width: 1023px) {
    h2 {
        font-size: 1.625em
    }
}

@media screen and (max-width: 640px) {
    h2 {
        font-size: 1.375em
    }
}

h3 {
    margin-bottom: 10px;
    font-size: 1.625em
}

@media screen and (max-width: 640px) {
    h3 {
        margin-bottom: 20px
    }
}

@media screen and (max-width: 640px) {
    h3 {
        font-size: 1.375em
    }
}

h4 {
    margin-bottom: 5px;
    font-size: 1.125em;
    font-family: "TSTARPROMedium", Helvetica, sans-serif
}

h5 {
    margin-bottom: 5px;
    font-size: 0.875em;
    font-family: "TSTARPROMedium", Helvetica, sans-serif
}

p {
    font-size: 1.0625em;
    margin-bottom: 20px;
    padding-right: 20px;
    line-height: 1.3em
}

@media screen and (min-width: 1023px) {
    div.col-two:last-child p {
        padding-left: 10px
    }
}

p.intro {
    margin-bottom: 10px !important;
    padding-right: 20px;
    color: #009fe3;
    font-size: 1.1875em;
    font-family: "TSTARPRORegular", Helvetica, sans-serif
}

p.date {
    margin: 0 0 10px 3px;
    color: #009fe3;
    font-family: "TSTARPRORegular", Helvetica, sans-serif
}

address {
    font-style: normal
}

blockquote p {
    margin-bottom: 25px;
    padding-right: 20px;
    color: #009fe3;
    font-size: 1.75em;
    font-family: "TSTARPROLight", Helvetica, sans-serif
}

@media screen and (max-width: 640px) {
    blockquote p {
        font-size: 1.125em
    }
}

blockquote span {
    font-style: italic
}

blockquote span:before {
    content: "— "
}

figure figcaption {
    margin-top: 15px;
    font-style: italic
}

q {
    quotes: "\201E" "\201C"
}

body.home header nav li:first-child a {
    color: #009fe3
}

body.home h1 {
    display: none
}

header {
    margin-top: 20px;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    position: relative
}

header a:hover {
    text-decoration: none
}

header div.row {
    margin-bottom: 0
}

@media screen and (max-width: 1023px) {
    header div.row div.col-twelve-2 {
        margin-bottom: 0
    }
    header div.row div.col-twelve-10 {
        margin: 0
    }
}

header nav {
    margin-top: 2px
}

@media screen and (min-width: 1024px) {
    header nav {
        margin-left: 50px;
        margin-left: 50px;
        position: absolute;
        width: 780px;
        z-index: 100;
    }
    header nav ul li {
        padding-right: 17px;
        display: inline;
        position: relative
    }
    header nav ul li>ul {
        display: none
    }
    header nav ul li a {
        color: #31374f
    }
    header nav ul li.current a,
    header nav ul li:hover a {
        color: #009fe3
    }
    header nav ul li:last-child {
        padding-right: 0
    }
    header nav ul li.current>ul {
        width: 490px;
        padding: 0;
        display: block;
        position: absolute;
        top: 30px;
        left: 0
    }
    header nav ul li.current>ul li a {
        color: #31374f
    }
    header nav ul li.current>ul li a:hover {
        color: #009fe3
    }
    header nav ul li.current>ul .current a {
        color: #009fe3
    }
}

@media screen and (max-width: 1023px) {
    header i.icon-navicon {
        position: absolute;
        top: 0;
        right: 23px;
        z-index: 100
    }
    header nav {
        width: 260px;
        padding: 10px;
        background: #31374f;
        position: absolute;
        top: 0;
        z-index: 100
    }
    header nav i.icon-close {
        margin: 22px 14px 0 0;
        float: right
    }
    header nav ul {
        margin: 18px 0 20px 20px
    }
    header nav ul li {
        font-size: 18px;
        line-height: 1.9em
    }
    header nav ul li>ul {
        display: none
    }
    header nav ul li a {
        color: #edf2f5
    }
    header nav ul li.current a,
    header nav ul li:hover a {
        color: #009fe3
    }
    header nav ul li.current>ul {
        margin-top: 0;
        margin-bottom: 5px;
        display: block
    }
    header nav ul li.current>ul li a {
        color: #edf2f5
    }
    header nav ul li.current>ul li a:hover {
        color: #edf2f5
    }
    header nav ul li.current>ul .current a {
        color: #009fe3
    }
}

@media screen and (max-width: 1023px) {
    header nav {
        margin: 0;
        position: absolute;
        top: -20px;
        left: 100%;
        display: none
    }
}

@media screen and (min-width: 1024px) {
    body.home header nav {
        margin: -8px 0 0 33px;
        padding: 10px 17px 10px 20px;
        background: white;
        position: absolute;
        z-index: 100;
        white-space: nowrap
    }
    body.home header nav ul:after {
        content: "";
        height: 30px;
        border-bottom: 10px solid transparent;
        border-left: 10px solid white;
        position: absolute;
        right: -9px;
        bottom: 0
    }
    body.ad header nav {
        margin: -8px 0 0 33px;
        padding: 10px 17px 10px 20px;
        background: white;
        position: absolute;
        z-index: 100;
        white-space: nowrap
    }
    body.ad header nav ul:after {
        content: "";
        height: 30px;
        border-bottom: 10px solid transparent;
        border-left: 10px solid white;
        position: absolute;
        right: -9px;
        bottom: 0
    }
    body.ad #mcs {
        margin-top: -155px;
        !important
    }
}

.col-full.back,
.center.back {
    padding: 40px 0 20px 0;
    background: #edf2f5
}

div.row.conclusion {
    padding-bottom: 35px
}

div.row.conclusion i {
    margin-left: -15px;
    font-size: 8.75em
}

div.row.conclusion i:before {
    color: #31374f
}

div.row.conclusion i:after {
    color: #009fe3
}

div.row.conclusion h2 {
    margin-top: 20px
}

div.row.conclusion p {
    font-size: 1.1875em;
    font-family: "TSTARPRORegular", Helvetica, sans-serif
}

.row.address {
    margin-bottom: 55px
}

@media screen and (max-width: 640px) {
    .row.address {
        margin-bottom: 20px
    }
}

section#content {
    margin-bottom: 100px;
    position: relative
}

section#content ul,
section#content ol {
    margin-bottom: 20px
}

section#content ul li,
section#content ol li {
    margin-left: 20px
}

section#content ul li[class*="col-"],
section#content ol li[class*="col-"] {
    margin-left: 10px !important
}

section#content ul li {
    list-style: disc
}

section#content ol li {
    list-style: decimal
}

video {
    width: 100%
}

div.vimeo {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

div.vimeo iframe,
div.vimeo object,
div.vimeo embed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

ul.contact {
    margin-bottom: 0px !important
}

ul.contact li {
    list-style: none !important;
    font-family: "TSTARPRORegular", Helvetica, sans-serif
}

ul.contact li p {
    margin-bottom: 0
}

ul.contact li strong {
    display: block;
    margin-bottom: 5px
}

section#contact {
    width: 170px;
    background: #009fe3;
    position: fixed;
    z-index: 1000;
    right: 0;
    bottom: 0
}

section#contact h6 {
    height: 30px;
    font-size: 0.75em;
    font-family: "TSTARPROBold", Helvetica, sans-serif
}

section#contact h6 i {
    position: relative;
    top: 2px
}

section#contact h6 span {
    color: #edf2f5;
    font-size: 1.125em;
    position: relative;
    top: -7px;
    left: 5px
}

section#contact h6:before {
    height: 150px;
    content: "";
    border-top: 10px solid transparent;
    border-right: 14px solid #009fe3;
    position: absolute;
    top: 0;
    left: -14px
}

section#contact h6:hover {
    cursor: pointer
}

section#contact p {
    margin: 0 0 10px 35px;
    font-size: 0.875em;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    display: none
}

section#contact a {
    color: #31374f
}

section#contact a:hover {
    color: #edf2f5;
    text-decoration: none
}

div.row aside {
    margin-top: 12px
}

@media screen and (max-width: 1023px) {
    div.row aside {
        width: 100%
    }
}

div.row aside a {
    color: #31374f
}

div.row aside a:hover {
    text-decoration: none
}

@media screen and (min-width: 1024px) {
    div.row aside {
        float: right
    }
}

footer {
    padding: 50px 0 20px 0;
    color: #edf2f5;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    background: #31374f
}

footer div.container {
    position: relative
}

footer nav {
    float: left
}

@media screen and (max-width: 640px) {
    footer nav {
        margin-top: -30px
    }
}

footer nav ul li {
    margin-bottom: 5px
}

footer nav ul.current a {
    color: #009fe3
}

footer a {
    color: #edf2f5
}

footer a:hover {
    color: #009fe3;
    text-decoration: none
}

footer p {
    font-family: "AdobeGaramond", "Times New Roman", Times, serif
}

footer address strong {
    margin-bottom: 10px;
    color: #009fe3;
    font-size: 1.1875em;
    font-weight: normal;
    font-family: "TSTARPROMedium", Helvetica, sans-serif;
    text-transform: uppercase;
    display: block
}

footer address b {
    margin-bottom: 10px;
    font-weight: normal;
    font-family: "TSTARPROMedium", Helvetica, sans-serif;
    display: block
}

footer address p {
    margin-bottom: 0;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    font-size: 1em
}

footer small {
    font-family: "AdobeGaramond", "Times New Roman", Times, serif;
    color: #afbec9
}

@media screen and (max-width: 640px) {
    footer div.row {
        margin-bottom: 0 !important
    }
}

@media screen and (max-width: 1023px) {
    .inset-twelve-3-md {
        margin-left: 250px !important
    }
    .inset-twelve-3-md p.claim {
        width: 300px;
        margin-bottom: 0px
    }
}

@media screen and (max-width: 640px) {
    .inset-twelve-3-md {
        margin-left: 10px !important
    }
}

.container.single-news p.date {
    margin-bottom: 21px
}

.container.single-magazines,
.container.magazine {
    margin-bottom: 15px
}

.container.single-magazines div.row:first-child,
.container.magazine div.row:first-child {
    margin-bottom: 20px !important
}

.container.single-magazines div.row h1,
.container.magazine div.row h1 {
    margin-bottom: 8px
}

.container.single-magazines div.row p.intro,
.container.magazine div.row p.intro {
    margin-bottom: 20px !important
}

@media screen and (max-width: 640px) {
    .container.single-magazines div.row .col-three-1,
    .container.single-magazines div.row .col-three-2,
    .container.magazine div.row .col-three-1,
    .container.magazine div.row .col-three-2 {
        width: 220px
    }
}

.container.single-magazines div.row.table-of-contents,
.container.magazine div.row.table-of-contents {
    display: none
}

.container.single-magazines div.row.table-of-contents h3,
.container.magazine div.row.table-of-contents h3 {
    margin-bottom: 0
}

@media screen and (max-width: 640px) {
    .container.single-magazines div.row ul.magazines li,
    .container.magazine div.row ul.magazines li {
        width: 220px
    }
}

.container.single-magazines div.row ul.magazines li h4,
.container.magazine div.row ul.magazines li h4 {
    text-transform: none
}

.container.single-magazines div.row ul.magazines li p,
.container.magazine div.row ul.magazines li p {
    padding-right: 40px
}

.container.single-magazines div.row ul.magazines li p span,
.container.magazine div.row ul.magazines li p span {
    margin-right: -30px;
    float: right
}


/*!
## Listings
*/

ul.news,
ul.references,
ul.teammates,
ul.features,
ul.facts,
ul.related,
ul.magazines {
    width: 100%;
    margin-bottom: 0px !important;
    overflow: hidden;
    float: left
}

ul.news li,
ul.references li,
ul.teammates li,
ul.features li,
ul.facts li,
ul.related li,
ul.magazines li {
    list-style: none !important
}

ul.news li dl dd,
ul.references li dl dd,
ul.teammates li dl dd,
ul.features li dl dd,
ul.facts li dl dd,
ul.related li dl dd,
ul.magazines li dl dd {
    min-height: 60px;
    padding: 7px 0 5px 10px;
    background: #31374f;
    position: relative
}

ul.news li dl dd h4,
ul.news li dl dd a,
ul.references li dl dd h4,
ul.references li dl dd a,
ul.teammates li dl dd h4,
ul.teammates li dl dd a,
ul.features li dl dd h4,
ul.features li dl dd a,
ul.facts li dl dd h4,
ul.facts li dl dd a,
ul.related li dl dd h4,
ul.related li dl dd a,
ul.magazines li dl dd h4,
ul.magazines li dl dd a {
    color: #edf2f5
}

ul.news li dl dd span,
ul.references li dl dd span,
ul.teammates li dl dd span,
ul.features li dl dd span,
ul.facts li dl dd span,
ul.related li dl dd span,
ul.magazines li dl dd span {
    color: #009fe3
}

ul.news li dl dd:after,
ul.references li dl dd:after,
ul.teammates li dl dd:after,
ul.features li dl dd:after,
ul.facts li dl dd:after,
ul.related li dl dd:after,
ul.magazines li dl dd:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border-bottom: 10px solid white;
    border-left: 14px solid #31374f;
    border-left-style: dotted
}

@media screen and (max-width: 1023px) {
    ul.news li,
    ul.related li {
        width: 220px
    }
}

ul.news li:hover img,
ul.related li:hover img {
    opacity: 0.8
}

ul.news li:hover a,
ul.related li:hover a {
    text-decoration: none
}

ul.news li:hover span.more,
ul.related li:hover span.more {
    background: #31374f
}

ul.news li:hover span.more:after,
ul.related li:hover span.more:after {
    border-left-color: #31374f
}

ul.news li img,
ul.related li img {
    margin-bottom: 20px
}

ul.news li figure figcaption,
ul.related li figure figcaption {
    font-style: normal
}

ul.news li h2,
ul.related li h2 {
    margin-bottom: 10px;
    color: #31374f
}

ul.news li p,
ul.related li p {
    color: #31374f
}

@media screen and (min-width: 1023px) {
    ul.news li {
        height: 520px
    }
}

ul.news li img {
    margin-bottom: 13px
}

ul.news li p {
    margin-bottom: 14px
}

ul.news li p.date {
    margin-bottom: 8px
}

ul.references li:hover img {
    opacity: 0.8
}

ul.references li:hover a {
    background: #31374f;
    text-decoration: none
}

ul.references li.col-brick-220-150,
ul.references li.col-brick-empty-empty {
    height: 210px
}

ul.references li.col-brick-460-380 {
    width: 460px;
    height: 440px
}

@media screen and (max-width: 384px) {
    ul.references li.col-brick-460-380 {
        height: 240px
    }
}

ul.teammates li {
    height: 220px;
    overflow: hidden
}

ul.teammates li dl {
    position: relative
}

ul.teammates li.show dl dd {
    width: 100%;
    position: absolute;
    bottom: 0
}

ul.features li i {
    margin-top: -8px;
    font-size: 6.25em;
    float: left
}

@media screen and (max-width: 384px) {
    ul.features li i {
        padding-right: 100%
    }
}

ul.features li>div {
    min-height: 95px
}

@media screen and (max-width: 640px) {
    ul.features li>div {
        width: auto
    }
}

@media screen and (max-width: 384px) {
    ul.features li>div {
        width: 220px
    }
}

ul.features li>div h3 {
    padding-top: 30px
}

ul.facts li dl dt {
    margin-left: 10px;
    color: #009fe3;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    font-size: 3.4375em
}

ul.facts li dl dd {
    background: none
}

ul.facts li dl dd p {
    margin-bottom: 0
}

ul.facts li dl dd:after {
    content: none
}

ul.onesystem {
    margin-bottom: 0 !important
}

ul.onesystem li {
    height: 300px;
    font-family: "TSTARPRORegular", Helvetica, sans-serif;
    list-style: none !important;
    position: relative
}

@media screen and (max-width: 1023px) {
    ul.onesystem li {
        width: 220px;
        height: 220px
    }
}

ul.onesystem li .wrapper h5 {
    color: #edf2f5;
    font-size: 1.25em
}

ul.onesystem li .wrapper i {
    margin-top: 35px;
    text-align: center;
    display: block
}

@media screen and (max-width: 1023px) {
    ul.onesystem li .wrapper i {
        margin-top: 15px;
        font-size: 100px
    }
}

ul.onesystem li .wrapper span {
    color: #31374f;
    text-transform: uppercase;
    position: absolute;
    bottom: 10px
}

ul.onesystem li.it-systemtechnik {
    background: #22b28a
}

ul.onesystem li.cloud {
    background: #afbec9
}

ul.onesystem li.software-entwicklung {
    background: #de5252
}

ul.onesystem li:hover {
    opacity: 0.8
}

ul.onesystem li:hover a {
    text-decoration: none
}

ul.contact li a {
    color: inherit
}

ul.contact li a:hover {
    color: #009fe3;
    text-decoration: none
}


/*!
## Mapbox
*/

#map {
    width: 100%;
    height: 600px;
    margin-top: -60px;
    margin-bottom: -100px;
    position: relative
}

@media screen and (max-width: 640px) {
    #map {
        margin-top: 0
    }
}

#map .leaflet-popup-content-wrapper {
    border-radius: 0;
    box-shadow: none
}

#map .leaflet-popup-content {
    padding: 10px
}

.map {
    margin-bottom: 0
}

.map .container {
    position: relative;
    z-index: 1
}


/*!
## Print
*/

@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important
    }
    header i.MCS_Logo span {
        font-size: 25px;
        visibility: visible;
        display: block
    }
    nav,
    .carousel {
        display: none
    }
    p.visible-print {
        padding: .5cm;
        font-family: "TSTARPRORegular", Helvetica, sans-serif
    }
    p.visible-print i.MCS_Logo {
        padding: 0 .3cm;
        font-size: 45px
    }
    @page {
        margin: 1cm
    }
}


/* 
 * Formular Syles:
*/

 
div.wpcf7-validation-errors {
    border: 2px solid #dd5252 !important;
}
 
span.wpcf7-not-valid-tip {
    color: #dd5252 !important;
}
 
.button-cyan {
    background: #009ee2;
    color: #ffffff;
    padding: 6px 5px 5px 5px;
}