/*  Author:   Martin Stettler (http://dieweberei.ch/)
    Version:  v2.1_290318
*/

/* ==========================================================================
   BASE STYLES
   ========================================================================== */

.layout-blue h1 {
    color: #000;
    font-size: 21px;
    text-transform: none;
    padding: 50px 0;
}

.layout-blue h2,
.layout-blue h3,
.layout-blue h4 {
    color: #6b7ca2;
    text-transform: none;
    margin-bottom: 25px;
}

.layout-blue .dark h2,
.layout-blue .dark h3,
.layout-blue .dark h4 {
    color: #FFF;
}

/* ==========================================================================
   HEADER (Navigation containers & Logo)
   ========================================================================== */

.layout-blue .navbar.shrink {
    background: #6b7ca2;
}

/* Logo */
.layout-blue .navbar-brand span {
    display: block;
    text-indent: -9999px;
    width: 220px;
    height: 110px;
    background-image: url(../graphics/tiefenstaerke.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

@media only screen and (max-width: 480px) {
    .layout-blue .navbar-brand span {
        width: 160px;
        height: 79px;
    }
}
/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #6b7ca2;
    border-bottom: 1px solid #6b7ca2;
}
 
/* Mobile navigation */
.layout-blue .navbar-toggle {
    background: #6b7ca2;
}

.offcanvas-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: #6b7ca2;
}


.navbar-toggle:hover .icon-bar,
.offcanvas-toggle.is-open .icon-bar {
    background: #6b7ca2 !important; 
}
/* ==========================================================================
   CONTENT
   ========================================================================== */

.layout-blue .hero-claim {
    color: #bad0dd;
}

.layout-blue .content,
.layout-blue .dark {
    position: relative;
}

.layout-blue .content .container {
    position: relative;
    z-index: 200;
}

.layout-blue .circle-body-wrapper {
    position: absolute; 
    right: 5vw; 
    top: -40vh;
    width: 90vw;
    max-width: 990px;
    height: auto; 
}

.layout-blue .circle-body-2-wrapper {
    position: absolute; 
    left: 25px;
    width: 90vw;
    max-width: 990px;
    height: auto; 
}

.circle-body-3-wrapper {
    position: absolute; 
    left: -25px; 
    bottom: 0px;
    transform: translateY(45%);
    width: 90vw;
    max-width: 2000px;
    height: auto; 
}

.layout-blue .article-simple,
.layout-blue .article-indented, 
.layout-blue .article-collapse {
    margin-bottom: 50px; 
}

.layout-blue .arrow {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2242%22%20height%3D%2222%22%20viewBox%3D%220%200%2042%2022%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201l20%2020%2020-20%22%20stroke-width%3D%222%22%20stroke%3D%22%236b7ca2%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
}

.layout-blue .content.dark {
    background-color: #bad0dd;
    margin-bottom: 25px;
}

.layout-blue #return-to-top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 19.4'%3E%3Cpolygon fill='%236b7ca2' points='8.1,0 0,8.4 0,11.1 7.2,3.7 7.4,19.4 9.4,19.3 9.2,3.7 16.5,10.8 16.5,8.1'/%3E%3C/svg%3E");
}

.pt-50 {
    padding-top: 50px;
}

.layout-blue .content a {
    color: #6b7ca2; 
}
/* ==========================================================================
   FOOTER
   ========================================================================== */

.layout-blue footer,
.layout-blue footer ul {
    background: #7c614c;
}

.layout-blue .vcard a:hover {
    color: #6b7ca2; 
}