@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 {
    letter-spacing: 0.025em;
}

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: 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: STARPRORegular;
    src: url("../fonts/tstarpro-bold-webfont.eot"), url("../fonts/tstarpro-bold-webfont.woff") format("woff"), url("../fonts/tstarpro-bold-webfont.ttf") format("truetype");
    font-weight: bold;
}

@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");
    src: url("../fonts/mcs.eot") format("embedded-opentype"), url("../fonts/mcs.woff") format("woff"), url("../fonts/mcs.ttf") format("truetype"), url("../fonts/mcs.svg") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'MCScloud';
    src: url("../fonts/mcs-cloud.eot");
    src: url("../fonts/mcs-cloud.eot") format("embedded-opentype"), url("../fonts/mcs-cloud.woff") format("woff"), url("../fonts/mcs-cloud.ttf") format("truetype"), url("../fonts/mcs-cloud.svg") 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
}

/* PARTNER LANDING ADD-ON */

.partner .row,.partner p {
  /* font-size: 18px!important; important fuer in der Navigation zu Problemen */
  font-size: 18px;
  line-height: 25px!important;
}

.partner header .container .row nav ul {
  font-size: 0.9em;
}

.partner .row ul {
  font-size: 1em;
}

.partner h2 {
  font-size: 30px!important;
  padding: 0;
  margin: 0;
}
.partner h3 {
  font-size: 22px!important;
  padding: 0;
  margin: 0 0 15px 0;
}
.partner h4{
  font-family: "TSTARPRORegular", Helvetica, sans-serif;
    font-size: 18px!important;
    line-height: inherit;
    padding: 0;
    margin: 0 0 10px 0;
}

.partner .col-two img {max-width: 420px!important;}
.partner div.col-two:last-child p {padding-left:0;}
.partner .btn {display:inline-block;padding:8px 22px; margin-top:5px; background-color:#009fe3; color:#fff; text-transform: uppercase;}

.partner .section-fullsize {padding:40px 0;}
.partner .section-fullsize h2 {margin:0 0 30px 10px;}
.partner .section-fullsize.boxed .col-two {   background-color: #fff; padding: 20px;}

/* dedizierte Partner Styles */

.huawei #start .container h2 {
	color: white;
}

/* FORMS */
 .partner input[type="text"], .partner input[type="submit"], .partner input[type="email"],   .partner textarea {
    width: 100%;
    height: 40px;
    padding-left:10px;
}
.partner textarea {height: 150px;}
.partner span.wpcf7-list-item {margin:0;}
.partner div.wpcf7-response-output {
    margin:0 20px 0 0;
    padding:10px;
}

#mcs.carousel.partner .carousel-indicators {display:none;}
#mcs.carousel .carousel-caption.partner {
    position: absolute;
    z-index: 10;
    right: inherit;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 35px;
    padding-left:15px;
}



#mcs.carousel .carousel-caption.partner h1 {
font-size: 2.5em;
line-height: 70px;
color: #fff;
-moz-box-shadow: 16px 0 0 rgba(49, 55, 79, 1), -13px 0 0 rgba(49, 55, 79, 1);
-webkit-box-shadow: 16px 0 0 rgba(49, 55, 79, 1), -13px 0 0 rgba(49, 55, 79, 1);
box-shadow: 16px 0 0 rgba(49, 55, 79, 1), -13px 0 0 rgba(49, 55, 79, 1);
background-color: rgba(49, 55, 79, 1);
display: inline;
box-decoration-break: clone;
text-decoration: none;
padding: 8px;
 }

 @media screen and (max-width: 991px) {
   #mcs.carousel .carousel-caption.partner h1 {
   font-size: 30px;
   line-height: 60px;
    }
  }

  @media screen and (max-width:768px) {
    #mcs.carousel .carousel-caption.partner h1 {
    font-size: 25px;
    line-height: 55px;
     }
   }
 @media screen and (max-width: 640px) {
   #mcs.carousel .carousel-caption.partner {position:relative;padding:15px;}
   #mcs.carousel .carousel-caption.partner h1 {
   line-height: 40px;
   padding:0;
    }
 }

 @media screen and (max-width: 480px) {
.partner .container {
    width: 100%;
}
}

/* SEARCH */

.search-layer {

  position: absolute;
  z-index:99;
}

.carousel-inner>.item.single>img {max-height:450px;}

#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: "TSTARPRORegular", Helvetica, sans-serif;
    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: ""
}

#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: 426px) {
    div.container {
        width: 400px
    }
}

@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
}
div [class*="col-"] img.img178 {
    width: 178px;
}

.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, .col-one .youtube {
        width: 700px
    }
}

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

@media screen and (max-width: 384px) {
    .col-one .vimeo, .col-one .youtube {
        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, .col-one .youtube {
        width: 460px
    }
}

@media screen and (max-width: 384px) {
    .col-three-2 .vimeo, .col-one .youtube {
        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: "TSTARPRORegular", Helvetica, sans-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;
    /* vermutlich Bug:
       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: 560px;
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
	padding:0 30px 0 30px;
	margin-left: -30px;
	background-color: #ffffff;
    }
    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.[*] header nav {
	    /*
    body.home header nav, body.ibm header nav, body.netapp header nav, body.hpe header nav, body.fujitsu header nav,
	body.huawei header nav, body.microsoft header nav, body.oracle header nav,body.veeam header nav,
	body.f5 header nav, body.vmware header nav, body.checkpoint header nav,
	body.cloud header nav, body.domain-ssl header nav, body.ibm-flashsystem header nav{
	*/
        margin: -8px 0 0 33px;
        padding: 10px 17px 10px 20px;
        background: white;
        position: absolute;
        z-index: 100;
        white-space: nowrap
    }
    body.[*] header nav {
	    /*
    body.home header nav ul:after,body.ibm header nav ul:after, body.netapp header nav ul:after, body.hpe header nav ul:after, body.fujitsu header nav ul:after,
	body.huawei header nav ul:after, body.microsoft header nav ul:after, body.oracle header nav ul:after,
	body.veeam header nav ul:after, body.f5 header nav ul:after, body.vmware header nav ul:after, body.checkpoint header nav ul:after;
	body.cloud header nav ul:after, body.domain-ssl header nav ul:after, body.ibm-flashsystem 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;
    margin-bottom: 5px;
}

section#content ol li {
    list-style: decimal;
    margin-bottom: 5px;
}

video {
    width: 100%
}

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

div.vimeo iframe,
div.vimeo object,
div.vimeo embed,
div.youtube iframe,
div.youtube object,
div.youtube 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: "TSTARPRORegular", Helvetica, sans-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: "TSTARPRORegular", Helvetica, sans-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;
    /* vermutlich bug:
       border-left-style: dotted
    */
}

ul.news.results li{height: auto!important; margin-bottom:15px!important;}
ul.news.results li h2 {    font-size: 25px; color:#009fe3;}
ul.news.results li p { margin:0 0 15px 0; padding:0; }

@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.software-entwicklung {
    /*background: #de5252 */
    background: #009FE3; /* cyan wie Kontakt*/
}

ul.onesystem li.it-systemtechnik {
    /* background: #22b28a */
    background: #009FE3; /* cyan wie Kontakt*/
}

ul.onesystem li.cloud {
    /* background: #afbec9 */
    background: #009FE3; /* cyan wie Kontakt*/
}


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;
}

/*
 * ergänzung der SVG Graphik consulting
 */
.col-three.-svg span.icon svg {
    width: 120px;
    height: 120px;
}

.col-three.-svg span.icon {
    left: 50%;
    transform: translatex(-50%);
    bottom: 40px;
}

@media only screen and (min-width: 1024px) {
    .col-three.-svg span.icon svg {
        width: 160px;
        height: 160px;
    }

    .col-three.-svg span.icon {
        bottom: 60px;
    }
}

.col-three.-svg span.arrows {
    right: 10px;
    bottom: 10px;
}

.col-three.-svg.consulting {
    background-color: #31374F;
}

@media only screen and (min-width: 640px) {
  .col-three.-svg.consulting {
     width: 98%;
   }
}

/* SEARCH */
@media screen and (min-width: 1024px) {
header nav  {padding:0!important; height:40px; width:auto; background-color: white;}
header nav ul {height:40px;line-height:40px; vertical-align: middle; padding:0 40px 0 30px;}

.search-btn {
  cursor: pointer;
  position: absolute;
  right: 15px;
  width: 22px;
  height: 22px;
  top: 50%;
  transform: translateY(-55%);
  background-image: url(../images/search.svg);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center center;
}
}
.search-btn.mobile {
  cursor: pointer;
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url(../images/search.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    top: 5px;
    right: 73px;
    z-index: 100;
}


#search-overlay {
  display:none;
  position: fixed;
  top: 0;
  right: 0;
  bottom:0 ;
  left: 0;
  overflow: auto;
  text-align: center;
  background: rgba(0, 159, 227, 0.9);
  margin: 0;
  z-index:999;
}


#search-overlay form {
  width:100%;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  padding-top:120px;
}

#search-overlay input {
  height:40px;
  width:75%;
  margin: 0;
  padding: 5px;
}
#searchsubmit {border:0; background:#31374f; color:#fff;}
#search-overlay #close {
  position: absolute;
  width:30px;
  height:30px;
  top:24px; right:30px;
  cursor: pointer;

}


.social-media-links {padding-bottom: 30px; }
.social-media-links ul {display: inline-block; }
.social-media-links ul li{ display: inherit;
    padding-right: 15px;
}
.social-media-links ul li img{ width: 33px !important;
}

@media screen and (min-width: 1024px) {
   body.consulting .container,
   body.software-entwicklung .container.services,
   body.it-systemhaus .container.services {
      padding-top: 50px;
   }
}