/*******************************************/

/*****Schrift, Farbe, größen und Buttons****/

/*******************************************/

body {
    overflow-x: hidden;
    font-family: Helvetica, Arial, sans-serif;
}
.text {
    color: #777777;
}
p {
    font-size: 14px;
    line-height: 1.75;
}
a {
    color: #3498db;
    outline: none;
}
a:hover,
a:focus,
a:active {
    color: #2980b9;
    outline: none;
}
h2 {
    text-transform: uppercase;
}
h2,
h3,
h4 {
    font-weight: 700;
}
.img-centered {
    margin: 0 auto;
}
.list-unstyled:hover,
.list-unstyled {
    color: #363636;
    margin-top: 40px;
    text-decoration: none;
}
.bg-light-gray {
    background-color: #eeeeee;
}
.bg-dark-gray {
    background-color: #F9F9F9;
}
.btn-xl {
    color: white;
    background-color: #3498db;
    border-color: #3498db;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 3px;
    font-size: 18px;
    padding: 20px 40px;
}
.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.open .dropdown-toggle.btn-xl {
    color: white;
    background-color: #3498db;
    border-color: #2980b9;
}
.btn:focus,
.btn:active,
.btn:active:focus {
    outline: none;
}
/*******************************************/

/***************Navbar main Content**************/

.navbar {
    min-height: 50px;
}

.navbar-right {
    padding-right: 50px;
    font-size: 17px;
    font-weight: bold;
}

.navbar-custom img {
    height: 20px;
}

.navbar-nav>li>a {
    color: #58585a !important;
}

.navbar-nav>li>a.active,
.navbar-nav>li>a:hover {
    background-color: rgba(245, 250, 251, 0.8) !important;
    color: #0e72b5 !important;
}
.navbar-nav>.active>a.nopadding {
    padding-left: 0;
    margin: 0;
}

.navbar.navbar-default.navbar-custom.navbar-fixed-top {
    display: block;
    background-color: rgba(225, 240, 251, 0.8) !important;
    height: 50px;
}

@media (max-width: 767px) {
    .navbar.navbar-default.navbar-custom.navbar-fixed-top {
        display: block;
        background-color: rgba(225, 240, 251, 0.8) !important;
        height: 50px;
    }

    .navbar-brand.page-scroll.active {
        display: block;
        background-color: rgba(245, 250, 251, 0.8) !important;
        height: 50px;
    }

    .navbar-custom .navbar-toggle {
        padding: 3px 10px;
        background-color: #3498db;
        border-color: #3498db;
        text-transform: uppercase;
        color: white;
        font-size: 17px;
    }

    .navbar-custom .navbar-toggle:hover {
        background-color: rgba(245, 250, 251, 0.8) !important;
        color: #0e72b5 !important;
    }
    .navbar-collapse.nav.navbar-nav.navbar-right {
        background-color: rgba(225, 240, 251, 0.8) !important;
        padding-left: 30px;
        top: 22px;
        position: relative;
    }
    .navbar-right {
        padding-right: 15px;
    }
}

@media (min-width: 768px) {
    .navbar-header.page-scroll,
    .navbar-custom {
        display: none;
    }
    .navbar-right {
        display: block;
    }
}
/*******************************************/

/***************Navbar sub Content**************/

#subnavbartoggle,
#subNav .navbar-right {
    font-size: 14px;
    margin-top: 1px;
}

#subNav .navbar-nav>.active>a,
#subNav .navbar-nav>.active>a:focus,
#subNav .navbar-nav>.active>a:hover #subNav .navbar-nav>li,
#subNav .navbar-nav>li>a {
    height: 31px;
    padding: 4px 15px;
    margin: -2px 0;
}

#subNav .navbar-nav>.active>a,
#subNav .navbar-nav>.active>a:focus,
#subNav .navbar-nav>.active>a:hover {
    background-color: rgba(245, 250, 251, 0.8) !important;
    color: #0e72b5 !important;
}

#subNav .navbar-collapse.nav.navbar-nav.navbar-right {
    top: -8px;
}

#subNav.navbar.navbar-default.navbar-custom.navbar-fixed-top {
    top: 50px;
    min-height: 31px;
    height: 31px;
}

/*******************************************/

/*************** header ********************/

header {
    background-image: url('../img/header.png');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    text-align: center;
    color: white;
    height: 361px;
}
header .intro-text {
    padding-top: 100px;
    padding-bottom: 50px;
}
header .intro-text .intro-lead-in {
    font-style: italic;
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 25px;
    text-shadow: 1px 2px rgba(127, 140, 141, 0.8);
}
header .intro-text .intro-heading {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    margin-bottom: 25px;
    text-shadow: 1px 3px rgba(127, 140, 141, 0.8);
}

@media (min-width: 768px) {
    header {
        height: 757px;
    }
    header .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
    }
    header .intro-text .intro-lead-in {
        font-style: italic;
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 25px;
    }
    header .intro-text .intro-heading {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 75px;
        line-height: 75px;
        margin-bottom: 50px;
    }
}
/*******************************************/

/*********** Section / Abstand**************/
section {
    padding: 100px 0;
}

section h3.block-heading {
    margin-top: 60px;
    margin-bottom: 20px;
}

section h5.block-heading {
    font-size: 16px;
    text-transform: none;
    font-style: italic;
    font-weight: 400;
    margin-top: 40px;
    margin-bottom: 0px;
}

@media (min-width: 768px) {
    section {
        padding: 150px 0;
    }
    section#promo {
        padding: 50px 0 50px 0;
    }
}
section h2.section-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
}
section h3.section-subheading {
    font-size: 16px;
    text-transform: none;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 50px;
}
.abstand {
    padding: 50px 0;
}
.auflistungContent {
    text-align: left;
}

/*******************************************/

/*Überschrift was ist Chronos und Vorteile*/

.service-heading {
    margin: 15px 0;
    text-transform: none;
}
/*******************************************/

/*********Bereich Test Version**************/

.test-version {
    text-align: center;
    margin-bottom: 50px;
}
.test-version h4 {
    margin-top: 25px;
    margin-bottom: 0;
    text-transform: none;
}
.test-version p {
    margin-top: 0;
}
/*******************************************/

/******** Footer und Social Buttons ********/

aside.clients img {
    margin: 50px auto;
}
footer {
    padding: 25px 0;
    text-align: center;
}
footer span.copyright {
    line-height: 40px;
    text-transform: uppercase;
    text-transform: none;
}
ul.social-buttons {
    margin-bottom: 0;
}
ul.social-buttons li a {
    display: block;
    background-color: #222222;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    font-size: 20px;
    line-height: 40px;
    color: white;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
ul.social-buttons li a:hover,
ul.social-buttons li a:focus,
ul.social-buttons li a:active {
    background-color: #3498db;
}
/*******************************************/

/*********** Modul Content *****************/

.portfolio-modal .modal-dialog {
    margin: 0;
    height: 100%;
    width: auto;
}
.portfolio-modal .modal-content {
    border-radius: 0;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
    min-height: 100%;
    padding: 100px 0;
    text-align: center;
}
.portfolio-modal .modal-content h2 {
    margin-bottom: 15px;
    font-size: 3em;
}
@media (max-width: 768px) {
    .portfolio-modal .modal-content h2 {
        font-size: 1.5em;
    }
}
.portfolio-modal .modal-content p {
    margin-bottom: 30px;
}
.portfolio-modal .modal-content p.item-intro {
    margin: 20px 0 30px;
    font-style: italic;
    font-size: 16px;
}
.portfolio-modal .modal-content ul.list-inline {
    margin-bottom: 30px;
    margin-top: 0;
}
.portfolio-modal .modal-content img {
    margin-bottom: 30px;
}
.portfolio-modal .close-modal {
    position: absolute;
    width: 75px;
    height: 75px;
    background-color: transparent;
    top: 25px;
    right: 25px;
    cursor: pointer;
}
.portfolio-modal .close-modal:hover {
    opacity: 0.3;
}
.portfolio-modal .close-modal .lr {
    height: 70px;
    width: 1px;
    margin-left: 35px;
    background-color: #222222;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    /* IE 9 */
    -webkit-transform: rotate(45deg);
    /* Safari and Chrome */
    z-index: 1051;
}
.portfolio-modal .close-modal .lr .rl {
    height: 70px;
    width: 1px;
    background-color: #222222;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari and Chrome */
    z-index: 1052;
}
.portfolio-modal .modal-backdrop {
    opacity: 0;
    display: none;
}
/*** Modul Content wenn klein Unsichtbar ***/

.ansicht {
    display: show;
}
@media (max-width: 991px) {
    .ansicht {
        display: none;

    }
}

/******** promoBox https://bootsnipp.com/snippets/raD8W ********/

.promoBox {
    display: inline-block;
    position: relative;
    margin: 5px;
    padding: 10px;
    width: 300px;
    min-height: 200px;
    border: 2px solid #ddd;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    overflow: hidden;

    background: #ffffff;
    background: -moz-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #ffffff), color-stop(50%, #f1f1f1), color-stop(51%, #e1e1e1), color-stop(100%, #f6f6f6));
    background: -webkit-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -o-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -ms-linear-gradient(-45deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: linear-gradient(135deg, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6', GradientType=1);

    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
}

.promoBox aside {
    position: absolute;
    width: 230px;
    right: 0;
    margin: 0 -65px 0 0;
    -webkit-transform: rotate(35deg);
    -khtml-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;

    color: #fff;
    background: #4f85bb;
    background: -moz-linear-gradient(-45deg, #4f85bb 0%, #4f85bb 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4f85bb), color-stop(100%, #4f85bb));
    background: -webkit-linear-gradient(-45deg, #4f85bb 0%, #4f85bb 100%);
    background: -o-linear-gradient(-45deg, #4f85bb 0%, #4f85bb 100%);
    background: -ms-linear-gradient(-45deg, #4f85bb 0%, #4f85bb 100%);
    background: linear-gradient(135deg, #4f85bb 0%, #4f85bb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f85bb', endColorstr='#4f85bb', GradientType=1);

}

.promoBox aside p {
    padding: 10px 80px 10px 80px;
    margin: 0;
}
.promoBox h4 {
    font-size: 25px;
    margin: 0;
    padding: 0 35% 10px 0;
    line-height: 25px;
    border-bottom: 1px solid #ddd;

}
.promoBox p {
    font-size: 12px;
    padding-top: 20px;
    padding-bottom: 0;
}

/* COLOR: Box & Text
\* --------------------------------- */

.promoBox.info-box {
    background: #e0f3fa;
    background: -moz-linear-gradient(-45deg, #e0f3fa 0%, #d8f0fc 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #e0f3fa), color-stop(100%, #d8f0fc));
    background: -webkit-linear-gradient(-45deg, #e0f3fa 0%, #d8f0fc 100%);
    background: -o-linear-gradient(-45deg, #e0f3fa 0%, #d8f0fc 100%);
    background: -ms-linear-gradient(-45deg, #e0f3fa 0%, #d8f0fc 100%);
    background: linear-gradient(135deg, #e0f3fa 0%, #d8f0fc 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#d8f0fc', GradientType=1);
    border-color: #b6e1f6;
}
.promoBox.info-box h4 {
    color: #225b9c;
    border-color: #8dc2dd;
}

.promoBox.warning-box {
    background: #fceabb;
    background: -moz-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #fceabb), color-stop(50%, #fccd4d), color-stop(51%, #f8b500), color-stop(100%, #fbdf93));
    background: -webkit-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background: -o-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background: -ms-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    background: linear-gradient(135deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93', GradientType=1);
    border-color: #fccf5a;
}
.promoBox.warning-box h4 {
    color: #775600;
    border-color: #9e8135;
}

.promoBox.danger-box {
    background: #f85032;
    background: -moz-linear-gradient(-45deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f85032), color-stop(50%, #f16f5c), color-stop(51%, #f6290c), color-stop(71%, #f02f17), color-stop(100%, #e73827));
    background: -webkit-linear-gradient(-45deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    background: -o-linear-gradient(-45deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    background: -ms-linear-gradient(-45deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    background: linear-gradient(135deg, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
    border-color: #ff433e;
    color: #fff;
}
.promoBox.danger-box h4 {
    color: #fff;
    border-color: #ff706d;
}

.promoBox.success-box {
    background: #9dd53a;
    background: -moz-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #9dd53a), color-stop(50%, #a1d54f), color-stop(51%, #80c217), color-stop(100%, #7cbc0a));
    background: -webkit-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: -o-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: -ms-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    background: linear-gradient(135deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=1);
    border-color: #9dd53a;
    color: #fff;
}
.promoBox.success-box h4 {
    color: #4d690b;
    border-color: #ccfc5a;
}

/* COLOR: Ribbon
\* --------------------------------- */

.promoBox.info-ribbon aside {
    background: #1e5799;
    background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(50%, #2989d8), color-stop(51%, #207cca), color-stop(100%, #7db9e8));
    background: -webkit-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -o-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: -ms-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    background: linear-gradient(to bottom, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
}

.promoBox.warning-ribbon aside {
    background: #f9c667;
    background: -moz-linear-gradient(-45deg, #f9c667 0%, #f79621 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #f9c667), color-stop(100%, #f79621));
    background: -webkit-linear-gradient(-45deg, #f9c667 0%, #f79621 100%);
    background: -o-linear-gradient(-45deg, #f9c667 0%, #f79621 100%);
    background: -ms-linear-gradient(-45deg, #f9c667 0%, #f79621 100%);
    background: linear-gradient(135deg, #f9c667 0%, #f79621 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9c667', endColorstr='#f79621', GradientType=1);
}

.promoBox.danger-ribbon aside {
    background: #ff3019;
    background: -moz-linear-gradient(45deg, #ff3019 0%, #cf0404 100%);
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #ff3019), color-stop(100%, #cf0404));
    background: -webkit-linear-gradient(45deg, #ff3019 0%, #cf0404 100%);
    background: -o-linear-gradient(45deg, #ff3019 0%, #cf0404 100%);
    background: -ms-linear-gradient(45deg, #ff3019 0%, #cf0404 100%);
    background: linear-gradient(45deg, #ff3019 0%, #cf0404 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404', GradientType=1);
}

.promoBox.success-ribbon aside {
    background: #a9db80;
    background: -moz-linear-gradient(-45deg, #a9db80 0%, #96c56f 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #a9db80), color-stop(100%, #96c56f));
    background: -webkit-linear-gradient(-45deg, #a9db80 0%, #96c56f 100%);
    background: -o-linear-gradient(-45deg, #a9db80 0%, #96c56f 100%);
    background: -ms-linear-gradient(-45deg, #a9db80 0%, #96c56f 100%);
    background: linear-gradient(135deg, #a9db80 0%, #96c56f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a9db80', endColorstr='#96c56f', GradientType=1);
}

.notice {
    background: #2473bd;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);

}
.notice2 {
    background: #FF0000;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9F0000', endColorstr='#E56D12', GradientType=0);

}

.notice-lg {
    position: relative;
    top: -24px;
    padding: 12px 12px 1px 12px;
    font-size: 12px;
    line-height: 12px;
    color: white;
}
.notice-lg2 {
    position: relative;
    top: -24px;
    padding: 12px 12px 1px 12px;
    font-size: 12px;
    line-height: 12px;
    color: white;
}

/*** hexagon ***/

.rw {
    margin: -18.3% 0;
    text-align: center;
}
.rw:first-child {
    margin-top: 2.25%;
}
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 8.5%;
    padding: 16%;
    -webkit-transform: rotate(30deg) skewY(30deg) scaleX(.866);
    transform: rotate(30deg) skewY(30deg) scaleX(.866);
}
.hexagon:before, .content:after {
    display: block;
    position: absolute;
    top: 6.7%;
    right: 0;
    bottom: 6.7%;
    left: 0;
    -webkit-transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg);
    background-color: rgba(30, 144, 255, .56);
    background-size: cover;
    content: '';
}
.content:after {
    content: attr(data-content);
}

.rw:first-child .hexagon:first-child:before {
    background-color: rgba(142, 214, 240, 1);
}
.rw:nth-child(2) .hexagon:first-child:before {
    background-color: rgba(142, 214, 240, 1);
}
.rw:nth-child(2) .hexagon:nth-child(2):before {
    background-color: rgba(142, 214, 240, 1);
}
.rw:nth-child(3) .hexagon:first-child:before {
    background-color: rgba(142, 214, 240, 1);
}
.rw:nth-child(4) .hexagon:first-child:before {
    background-color: rgba(142, 214, 240, 1);
}
.rw:nth-child(4) .hexagon:nth-child(2):before {
    background-color: rgba(142, 214, 240, 1);
}
.ribbon:after {
    overflow: hidden;
    top: 50%;
    margin: -1.2em 0;
    width: 100%;
    height: 2.4em;
    color: white;
    font: 1em/2.4 Century Gothic;
}
.ribbon-twoliner:after {
    top: 47%;
    margin: -1.2em 0;
    width: 100%;
    height: 3em;
    color: white;
    font: 1em/1.2 Century Gothic;
    padding-top: 0.3em;
    content:attr(data-content1) "\A" attr(data-content2);
    white-space:pre-wrap;
}
.blockspacer {
    margin-top: 100px !important;
}
.row.blockspacer {
    margin-top: 0 !important;
}
@media (min-width: 768px) {
    .blockspacer {
        margin-top: 200px !important;
    }
    .row.blockspacer {
        margin-top: 0 !important;
    }
}
@media (min-width: 991px) {
    .blockspacer {
        margin-top: 0 !important;
    }
    .row.blockspacer {
        margin-top: 100px !important;
    }
}
.spacer {
    padding: 20px 0;
}