/*  Author:   Martin Stettler (http://dieweberei.ch/)
    Version:  11012017
*/

/*  FONTS

*/

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

* {
    box-sizing: border-box; }
    
html,
body,
ul { /* ul to be help-block full left */
    margin:0;
    padding:0;
    background-color: #a5a192; /* color def for form */
    font: normal 15px 'Ubuntu', Arial, sans-serif; /* no color def for form! */
    font-weight: 300;
    line-height: 1.4; }

li {
    list-style-type: none; } /* for text-danger in form */

h1,
h2,
h3,
h4 {
    line-height: 1.4;
    margin: 0;
    padding: 0;
    font-weight: normal; }

a {
   color: #515153;
   border-bottom: 1px solid #515153; }

a:hover {
   color: #515153;
   border-bottom: 1px solid transparent; }

a,
a:hover,
.navbar,
.navbar.shrink,
a.navbar-brand span,
a.navbar-brand.shrink span {
    text-decoration: none;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
        transition: all 0.5s; }

.deepbone,
.org {
    font-weight: 400;
    color: #55787d;
    font-size: 36px;
    text-align: center;
    margin-bottom: 10px; }

.deepbone span,
.org span {
    font-weight: 300; }

.claim {
    color: #a5a192; 
    padding: 10px 0 35px 0;
    font-size: 18px;
    text-transform: uppercase;
    text-align: center; }

#mainpage .claim {
    padding: 10px 0 15px 0; }

.upperline {
    border-top: 1px solid #55787d;
    padding-top: 12px; }

/* Phone */
a[href^="tel"]:hover {
    cursor: pointer !important;
}

/* ==========================================================================
   HTML-EDITOR (REDACTOR)
   ========================================================================== */

h1 {
    font-size: 36px;
    line-height: 1.25;
    font-weight: 400; }

h2 {
    font-size: 15px;
    font-weight: 400;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 12px; }

h3 {
    font-size: 15px;
    color: #000;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0; }

.article-image h3 {
    padding-top: 30px;
    text-align: center; }

@media only screen and (max-width: 767px) {
    .article-image h3 {
        text-align: center;
        margin-bottom: 0; }  

    .article-image p {
        text-align: center; }  
}

p {
    color: #515153;
    margin: 0 0 30px 0;
    line-height: 1.5; }

p:last-child {
    margin-bottom: 0; }

strong {
    font-weight: 400; }

em,
blockquote {
    display: inline-block;
    font-style: italic;
    font-weight: 400;
    font-size: 15px;
    color: #515153;
    padding: 0;
    margin: 0;
    border-left: 0; }

.article-plain ul,
.article-line ul,
.article-image ul {
    text-align: left;
    background: transparent;
    line-height: 1.4;
    margin: 0 0 30px 0; }

.article-plain li,
.article-line li,
.article-image li {
    line-height: 1.5; }

/* ==========================================================================
   Browse Happy prompt lte IE 7
   ========================================================================== */

.browsehappy {
    margin: 3px 0;
    background: #CC0033;
    color: #FFF;
    padding: 8px; }

.browsehappy a {
    color: #FFF;
    text-decoration: underline; }

.browsehappy a:hover {
    text-decoration: none; }

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

/* Header background full-width */
.navbar {
    background: transparent;
    border-bottom: 0;
    height: 100px; }

.navbar.shrink {
    height: 0;
    min-height: 0;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
        transition: all 0.25s; }

.navbar-header {
    background: transparent;
    float: none; 
    padding: 0;
    height: 100px; } /* Height = logo height plus navbar-header padding */

/* Navigation container */
.navbar-nav {
    width: 100%;
    margin: 0;
    margin-top: 50px; /* Navbar height */
    background: transparent; } 

.navbar-header.shrink {
    height: 0px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
        transition: all 0.25s; }

.navbar .navbar-collapse {
    text-align: left; }

@media only screen and (min-width: 768px) { /* Change the nav breakpoint */

    .navbar-fixed-top .container-fluid {
        max-width: 1170px; }

    .navbar.shrink {
        height: 50px;
        background: rgba(165, 161, 146, 0.8);
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
            transition: all 0.25s;
        -webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15);
            box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.15); }

    .navbar-header {
        float: left; }

    .navbar-header.shrink {
        height: 50px;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
            transition: all 0.25s; }

    .navbar-nav {
        width: auto;
        margin: 18px 0 0;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
            transition: all 0.25s; }

    .navbar-nav.shrink {
        margin: 2px 0 0;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
            transition: all 0.25s; }

    /* Centered Navbar: https://www.codeply.com/go/1lrdvNH9GI */
    .navbar .navbar-nav {
        display: inline-block;
        float: none; }

    .navbar .navbar-collapse { /* Check also line 135 */
        text-align: center; }
}

.header-image .container-fluid {
    position: relative;
    padding: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
        display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
        justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
        align-items: center; }

.ie9 .header-image .container-fluid {
    display: table; }

.ie9 .flower {
    display: table-cell;
    vertical-align: middle;
    padding: 90px 0 60px 0; }

.header-image {
    background: url(../images/deepbone-640.jpg) no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
            background-size: cover; }

.header-image img {
    max-width: 100%;
    height: auto; }

.flower {
    width: 35%;
    max-width: 50%;
    height: auto;
    margin: 120px 0 0; }

.flower-aside {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 179px;
    background: url(../graphics/flower-2.svg) no-repeat;
    background-size: 100% 100%; }

@media (min-width: 600px) { 
    .flower-aside {
        max-width: 260px;
        max-height: 310px; }    
}

@media (min-width: 800px) { 
    .flower-aside {
        max-width: 323px;
        max-height: 385px; }    
}

@media (min-width: 1025px) { 
    .flower-aside {
        max-width: 404px;
        max-height: 482px; }    
}

.flower img {
    width: 100%; /* for IE11 */
    height: auto; }

@media (min-width: 640px) {
    .header-image {
        background: url(../images/deepbone-1024.jpg) no-repeat;
        background-position: center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
            background-size: cover; }
}

@media (min-width: 1025px) {
    .header-image {
        background: url(../images/deepbone-1280.jpg) no-repeat;
        background-position: center center; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
            background-size: cover; } 
}

@media (min-width: 1281px) {
    .header-image {
        background: url(../images/deepbone-1920.jpg) no-repeat;
        background-position: center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
            background-size: cover; }

    .flower {
        margin: 15% 0 0; } 
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */

/* Navigation colors */
.navbar-default .navbar-nav > li > a {
    padding: 12px 0;
    margin: 0 10px;
    color: #FFF;
    font-weight: 500;
    text-transform: uppercase;
    background-color: transparent;
    line-height: 1.4 !important;
    border-bottom: 0 !important; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #a5a192;
    background-color: transparent; }

/* Mobile navigation */
.navbar-default .navbar-toggle {
    display: block; /* for visibility above 768px */
    margin-top: 15px;
    z-index: 1000;
    background: #FFF;
    border: 1px solid #123f43; }

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #FFF; }

.navbar-default .navbar-toggle .icon-bar {
  background-color: #123f43; }

/* Desktop navigation */
@media only screen and (min-width: 768px) { /* Change the nav breakpoint */
    
    .navbar-nav > li { /* make left navigation elements float left */
        float: left; }

    .navbar-default .navbar-nav > li > a {
        padding: 12px 0;
        margin: 0 10px;
        border-top: 2px solid transparent; }

    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus,
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus,
    .navbar-default .navbar-nav > .open > a,
    .navbar-default .navbar-nav > .open > a:hover,
    .navbar-default .navbar-nav > .open > a:focus {
        color: #FFF;
        border-top: 2px solid #FFF; }

    .navbar-default .navbar-nav.shrink > li > a {
        border-top: 0 solid transparent; }

    .navbar-default .navbar-nav.shrink > li > a:hover,
    .navbar-default .navbar-nav.shrink > li > a:focus,
    .navbar-default .navbar-nav.shrink > .active > a,
    .navbar-default .navbar-nav.shrink > .active > a:hover,
    .navbar-default .navbar-nav.shrink > .active > a:focus,
    .navbar-default .navbar-nav.shrink > .open > a,
    .navbar-default .navbar-nav.shrink > .open > a:hover,
    .navbar-default .navbar-nav.shrink > .open > a:focus {
        color: #000;
        border-top: 0 solid transparent; }
}

/* Offcanvas */
.offcanvas-toggle,
.navbar-toggle:hover {
    background: #FFF !important;
    border-radius: 0;
    border: 1px solid #123f43; }

.offcanvas-toggle .icon-bar {
    background: #123f43;
    -webkit-transition: all .25s ease-in-out;
            transition: all .25s ease-in-out; }

 .navbar-toggle:hover .icon-bar {
    background: #123f43 !important; }

.offcanvas-toggle.is-open .icon-bar:nth-child(1) {
    -webkit-transform: rotate(45deg) translate(5px, 4px);
        -ms-transform: rotate(45deg) translate(5px, 4px);
            transform: rotate(45deg) translate(5px, 4px); }

.offcanvas-toggle.is-open .icon-bar:nth-child(2) {
    opacity: 0; }

.offcanvas-toggle.is-open .icon-bar:nth-child(3) {
    -webkit-transform: rotate(-45deg) translate(4px, -4px);
        -ms-transform: rotate(-45deg) translate(4px, -4px);
            transform: rotate(-45deg) translate(4px, -4px); }

@media only screen and (min-width: 768px) { /* Change the nav breakpoint */
    
    .navbar-default .navbar-toggle {
        display: none; } /* for hiding in desktop */  
}

@media only screen and (max-width: 767px) { /* Change the nav breakpoint */
    
    .navbar-default .navbar-nav > li {
        width: 100% !important; }
    
    .offcanvas-stop-scrolling {
        height: 100%;
        overflow: hidden; }

    .navbar-default .navbar-offcanvas {
        background-color: #123f43; }

    .navbar-offcanvas {
        position: fixed;
        height: 100% !important;
        width: 100%;
        max-width: 250px;
        left: -250px;
        top: 0;
        padding-left: 0;
        padding-right: 0; /* 15px; */
        z-index: 999;
        overflow: auto; /* scroll */
        -webkit-overflow-scrolling: touch;
        -webkit-transition: all 0.15s ease-in;
                transition: all 0.15s ease-in; }

    .navbar-offcanvas.in {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); }

    .navbar-offcanvas.navbar-offcanvas-fade {
        opacity: 0; }

    .navbar-offcanvas.navbar-offcanvas-fade.in {
        opacity: 1; }

    .navbar-offcanvas.offcanvas-transform.in {
        -webkit-transform: translateX(250px);
            -ms-transform: translateX(250px);
                transform: translateX(250px); }

    .navbar-offcanvas.offcanvas-position.in {
        left: 0; }

    .navbar-offcanvas.navbar-offcanvas-right {
        left: auto;
        right: -250px; }

    .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {
        -webkit-transform: translateX(-250px);
            -ms-transform: translateX(-250px);
                transform: translateX(-250px); }

    .navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in {
        left: auto;
        right: 0; }
}

/* ==========================================================================
   CONTENT
   ========================================================================== */
/*
section {
    border: 1px dashed black; }

.row {
  border: 1px dashed blue; }

.col-sm-12,
.col-sm-8,
.col-sm-4 {
  border: 1px dashed red; }
  
*/
.lead {
    background: #123f43;
    padding-top: 10px;
    padding-bottom: 50px;
    margin: 0; }

#mainpage .lead {
    padding-bottom: 10px; }

.lead p {
    color: #a5a192;
    text-align: center;
    font-weight: 300;
    font-size: 18px; }

.author {
    font-size: 14px; }

.title {
    padding-top: 60px; }

.main,
.title {
    background: #FFF;
    text-align: center; }

.special {
    padding-top: 0;
    background: #f0efec;
    text-align: center; }

.article-plain {
    padding-top: 30px;
    padding-bottom: 30px; }

.article-line {
    padding-top: 30px; }

.article-plain img,
.article-line img {
    margin: 0 auto;
    margin-bottom: 30px; }

.article-plain img:last-child,
.article-line img:last-child  {
    margin-bottom: 0; }
/*
.article-line:last-child,
.article-image:last-child {
    padding-top: 30px;
    padding-bottom: 30px; }
*/
.article-line-bottom {
    margin-bottom: 0;
    padding-bottom: 30px;
    border-bottom: 1px solid #a5a192; }

.article-image {
    text-align: left; }

.article-image img {
    float: right;
    margin-top: 30px;
    margin-left: 60px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 230px;
    height: auto; }

@media only screen and (max-width: 767px) {
    .article-image img {
        float: none;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 30px; }    
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

html,
body { height: 100%; }

body {
  display: table;
  width: 100%; }

.footer {
  display: table-row;
  height: 1px; }

footer {
    background: #dad7d0;
    color: #000;
    text-align: center; }

.footer-inner {
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 14px; }

footer i {
    font-style: normal;
    white-space: nowrap; }

footer a,
footer a[href^="tel"] {
    color: #123f43;
    border-bottom: 0; }

footer a:hover,
footer a[href^="tel"]:hover {
    color: #000;
    text-decoration: none;
    border-bottom: 0; }

.flower-small {
    padding-top: 40px;
    background: #FFF; }

.flower-small img {
    margin: 0 auto;
    width: 98px;
    height: auto; }

.vcard .org,
.vcard .name,
.vcard .adr {
    display: block; }

.vcard .name {
    margin: 0 auto;
    width: 250px;
    padding-bottom: 25px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: #123f43;
    border-top: 1px solid #55787d;
    padding-top: 12px; }

.imprint {
    padding-bottom: 25px; 
    font-size: 14px; }
/* ==========================================================================
   SELECTION
   ========================================================================== */

::-moz-selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

::selection {
    text-shadow: none;
    background: #333;
    color: #FFF; }

img::selection {
    background: 0 0; }

img::-moz-selection {
    background: 0 0; }

body {
    webkit-tap-highlight-color: #333; }

a[href^="tel"], 
a[href^="sms"]{
    color:inherit; 
    cursor:default; 
    text-decoration:none; }