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

/*  FONTS */
@font-face{
    font-family: "DIN Next LT W01 Regular";
    src: url("../fonts/6b4d4830-9c7d-43d2-b5d3-c73f739561b9.woff2") format("woff2"),
    url("../fonts/ccf25ada-6d2a-4133-95dc-deb039e22999.woff") format("woff"),
    url("../fonts/126195b4-2fa0-4b95-b5cf-ad9bf10193f0.ttf") format("truetype"),
    url("../fonts/603bbbe6-a6ab-4b2e-9096-4803341f9a41.svg#603bbbe6-a6ab-4b2e-9096-4803341f9a41") format("svg"); }

@font-face{
    font-family: "DIN Next LT W01 Medium";
    src: url("../fonts/afabdfcf-432c-49b4-a496-0e5051e87fa9.woff2") format("woff2"),
    url("../fonts/611ea865-db7e-4c05-94b8-bd1675c90576.woff") format("woff"),
    url("../fonts/e65314e4-c389-45b8-99a9-26ab6aef066c.ttf") format("truetype"),
    url("../fonts/b0a5f600-ff10-4a43-84ca-62eed8e141bc.svg#b0a5f600-ff10-4a43-84ca-62eed8e141bc") format("svg"); }
/*
@font-face{
    font-family: "DIN Next LT W01 Bold";
    src: url("../fonts/557f817d-9c25-4a23-baaf-a3cf84a7cd7c.woff") format("woff"),
    url("../fonts/92ed1479-1d40-4a94-8baf-6abd88b17afa.ttf") format("truetype"),
    url("../fonts/36ae914b-b535-47cd-b3d2-8c43073d8634.svg#36ae914b-b535-47cd-b3d2-8c43073d8634") format("svg"); }*/
/*
This CSS resource incorporates links to font software which is the valuable copyrighted
property of Monotype Imaging and/or its suppliers. You may not attempt to copy, install,
redistribute, convert, modify or reverse engineer this font software. Please contact Monotype
Imaging with any questions regarding Web Fonts:  http://www.fonts.com
*/

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

* {
    box-sizing: border-box; }

html,
body,
ul { /* ul to be help-block full left */
    margin:0;
    padding:0;
    background-color: #FFF; /* color def for form */
    font: normal 15px 'DIN Next LT W01 Regular', Arial, sans-serif; /* no color def for form! */
    line-height: 1.4;
    color: #000; }
    
ul {
    background-color: transparent; }

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

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

.article-simple h2 {
    margin-bottom: -10px;
}

p {
    margin: 0 0 10px; /* Bootstrap */
    line-height: 1.4; }

a,
a:hover,
.navbar,
.navbar.shrink,
a.navbar-brand span,
a.navbar-brand.shrink span,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
    text-decoration: none;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
        transition: all 0.25s; }

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

@media only screen and (min-width: 768px) {
    
    .flex-container {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
            display: flex;
        -ms-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
            flex-wrap: wrap; } 

    /* for Safari to wrap elements correctly */
    .flex-container:before,
    .flex-container:after {
        content: normal; }  
}

h1,
h2,
h6 {
    font-family: 'DIN Next LT W01 Medium', Arial, sans-serif;
    font-size: 36px;
    color: #ba0c2f;
    text-transform: lowercase;
    margin-bottom: 20px;
    line-height: 1.2;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto; }

@media only screen and (min-width: 768px) {
        
    h1,
    h2,
    h6 {
        font-size: 48px; }
}

h3,
h4 {
    font-family: "DIN Next LT W01 Medium", Arial, sans-serif;
    font-size: 30px;
    color: #000;
    margin-bottom: 10px; }

h4 {
    font-size: 21px; }

p,
.vcard {
    margin: 0 0 20px; /* Bootstrap */
    line-height: 1.4; }

p i,
p em {
    font-family: 'DIN Next LT W01 Medium', Arial, sans-serif; 
    font-size: 21px;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.4; }

h3,
p strong {
    font-family: 'DIN Next LT W01 Medium', Arial, sans-serif;
    font-weight: normal; }

.content li {
    list-style: none;
    padding-left: 15px;
    font-size: 15px; }

.content li:before {
    position: relative;
    top: 0;
    left: -15px;
    height: 0;
    display: block;
    content: "•";
    color: #000; }

.content a {
    color: #000; }

.content a:hover,
.content a:active {
    color: #000; }

.flex-article-half img,
.flex-article-full img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px; }

@media only screen and (min-width: 768px) {

    .flex-article-half img,
    .flex-article-full img {
        display: block;
        margin: 0 auto; }
}

.flex-article-half img:last-child,
.flex-article-full img:last-child {
    margin-bottom: 0; }

.content a {
    color: #ba0c2f; }

.content a:hover {
    color: #000; }

.content a[href$=".pdf"]:before,
.content a[href$=".doc"]:before {
    content: " ";
    background-size: 100% 100%;
    width: 22px;
    height: 29px;
    background-image: url(../graphics/file-icon.svg);
    float: left;
    margin-right: 10px; }

.content a[href$=".pdf"],
.content a[href$=".doc"],
.content ul a {
    font-weight: 600; }

/* ==========================================================================
   Frontend editing Perch
   ========================================================================== */
/* Style snippet for Region_Editor */
/* Add this snippet to your frontend .css file in order to hide and show the edit-icons */

/* Edit this snippet to alter the way the edit-icon is displayed on your front-end pages */ 
/* It requires an edit image in /img/ */

span.region_editor { 
  position: relative;
  top: -41px;
  left: -39px;
  margin-bottom: -30px;
  background-image: url('../img/pen.png'); /* The edit image */
  background-size: 30px 30px;
  background-repeat: no-repeat;
  height: 30px;
  width: 30px;
  display: block;
}

span.region_editor.hide_this {
  display: none;
}

span.region_editor:hover {
  cursor: pointer;
}

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

.browsehappy {
    position: absolute;
    top: 100px;
    z-index: 3000;
    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: 40px; }

.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: 40px; } /* 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; }

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

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

    .navbar.shrink {
        height: 40px;
        background: #ba0c2f;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
            transition: all 0.25s;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
            box-shadow: none; }

    .navbar-header {
        float: left; }

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

    .navbar-nav {
        width: auto;
        margin: 0; }
}

/* Logo */
.logo {
    position: absolute;
    top: 0;
    margin-top: 20px;
    -webkit-transition: transform 0.5s;
        -moz-transition: transform 0.5s;
            transition: transform 0.5s; }

.logo.shrink {
        -webkit-transform: translateY(-300px);
        -moz-transform: translateY(-300px);
            transform: translateY(-300px);
        -webkit-transition: transform 0.5s;
        -moz-transition: transform 0.5s;
            transition: transform 0.5s; }

.navbar-brand {
    padding: 0;
    color: #FFF; }

@media only screen and (min-width: 768px) {
    .navbar-brand {
        padding-left: 15px;  }  
}

a.navbar-brand span {
    display: block;
    text-indent: -9999px;
    width: 172px;
    height: 152px;
    background-image: url(../graphics/klartext-umwelt.svg);
    background-size: 172px 152px; }

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

/* Naviation element */
.navbar-nav > li {
    float: none; }

/* Navigation colors */
.navbar-default .navbar-nav > li > a {
    padding: 15px 0 7px 0;
    margin: 0 15px;
    color: #000;
    text-transform: lowercase;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    font-family: 'DIN Next LT W01 Medium', Arial, sans-serif; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ba0c2f;
    background-color: transparent;
    border-bottom: 1px solid #ba0c2f;
    padding-bottom: 7px; }

.navbar-default .navbar-nav.shrink > li > a:hover,
.navbar-default .navbar-nav.shrink > li > a:focus {
    color: #FFF;
    background-color: transparent;
    border-bottom: 1px solid #FFF;
    padding-bottom: 3px; }

/* Mobile navigation */
.navbar-toggle {
    display: block; /* for visibility above 768px */
    z-index: 1000;
    background: #ba0c2f; }

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

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

/* Offcanvas */
.navbar-offcanvas {
    position: relative; }

.offcanvas-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: #ba0c2f;
    border-radius: 0;
    border: 1px solid transparent !important; }

.offcanvas-toggle:hover,
.navbar-default .navbar-toggle.is-open,
.offcanvas-toggle.is-open:hover {
    background: #FFF !important;
    border: 1px solid #FFF; }

.offcanvas-toggle.is-open {
    background: #ba0c2f !important;
    border: 1px solid #FFF; }

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

 .navbar-toggle:hover .icon-bar,
 .offcanvas-toggle.is-open .icon-bar {
    background: #ba0c2f !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 (max-width: 767px) { /* Change the nav breakpoint */
    
    .offcanvas-stop-scrolling {
        height: 100%;
        overflow: hidden; }

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

    .navbar-inverse .navbar-offcanvas {
        background-color: #222; }

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

/* 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 {
        color: #FFF;
        padding-top: 25px;
        padding-bottom: 15px; }

    .navbar-default .navbar-nav.shrink > li > a {
        padding-top: 10px;
        padding-bottom: 15px; }
}

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

.row {
  border: 1px dashed blue; }

.col-sm-12,
.col-sm-8,
.col-sm-6,
.col-sm-4 {
  border: 1px dashed red; }*/

/*Circles */
body { 
    position: relative; } 

.circle-body-wrapper {
    position: absolute;  
    width: 80vw;
    max-width: 990px;
    height: 80vw;
    height: auto;
    margin: 10vh 30px; }

.circle-body-2-wrapper { /* page bottom */
    position: absolute;
    bottom: 0; 
    right: 0;
    width: 50vw;
    height: 50vw;
    max-width: 705px;
    height: auto;
    margin: 0 30px -15vh 0; }

.circle-sec1-wrapper {
    position: absolute; 
    right: 30px; 
    width: 50vw;
    height: 50vw;
    max-width: 705px;
    height: auto; }

.circle-sec2-wrapper {
    position: absolute;  
    width: 80vw;
    height: 80vw;
    max-width: 1000px;
    height: auto;
    margin: -50px 30px 0 30px; }

#contact {
    position: relative;
    overflow: hidden; }

.circle-sec4-wrapper {
    position: absolute;
    left: 30px;
    bottom: 0;
    margin-bottom: -60vw;
    width: 75vw;
    height: 75vw; }

.circle-sec4-wrapper span {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../graphics/circle-3.svg);
    background-size: 100% 100%; }

.circle img {
    width: 100%;
    height: 100%; }

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

@media only screen and (max-width: 480px) {
    .arrow {
        display: none; }
}

.arrow {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 20px;
    width: 40px;
    height: 40px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    opacity: 1;
    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%23fff%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat; }

.arrow:hover {
    opacity: .65;
    background-position: center center; }

.content {
    position: relative;
    padding-top: 25px; }

.content.dark  {
    background-color: #cacbcb;
    padding-top: 50px; } 

.anchor {
    display: block;
    height: 0; /* same height as header */
    margin-top: 0; /* same height as header */
    visibility: hidden; }

@media only screen and (min-width: 1024px) {

    .anchor {
        height: 50px;
        margin-top: -50px; }
}

.article-simple,
.article-indented, 
.article-collapse,
.flex-article-half {
    margin-bottom: 25px; }

.content ul {
    margin-bottom: 25px; }

#about img {
    z-index: 10; }

#about ul {
    margin-bottom: 45px !important; }

/* Collapsing content (https://disjfa.github.io/bootstrap-tricks/card-collapse-tricks/) */
.article-collapse p,
.article-collapse ul,
.article-indented p,
.article-indented ul {
    padding-left: 25px; }

i.open:before {
    content:'⟶ mehr Informationen'; }

i.close:before {
    content:'X';
    padding-right: 22px;
    width: 12px;
    height: 18px; }

/* Conditional comment for Internet Explorer 10 & 11 */
.article-collapse-body {
    padding-bottom: 20px; }

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    i.close:before { 
        background: none; }
}

[aria-expanded="false"] i.open,
[aria-expanded="true"] i.close {
    color: #ba0c2f !important;
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: normal !important;
    opacity: 1 !important; }

[aria-expanded="false"] i.close {
    display: none; }

[aria-expanded="true"] i.open {
    display: none; }

@media only screen and (max-width: 767px) {

    .article-collapse {
        padding-bottom: 20px; }
}

.vcard .org,
.vcard .name,
.vcard .street-address,
.vcard .tel,
.vcard .email  {
    display: block; }

.vcard .org,
.vcard .name {
    font-family: 'DIN Next LT W01 Medium', Arial, sans-serif;
    font-size: 15px; }

.vcard .org {
    font-size: 18px;
    margin-bottom: 20px; }

.vcard a {
    color: #000; }

.vcard a:hover {
    color: #ba0c2f; }

.social {
    padding-bottom: 25px;
}

a span.linkedin  {
    display: block;
    width: 25px;
    height: 25px;
    background: url(../graphics/icon-linkedin.svg);
    text-indent: -9999px;
}

a:hover span.linkedin  {
    background: url(../graphics/icon-linkedin-red.svg);
}

#return-to-top {
    position: fixed;
    bottom: 60px;
    right: 20px;
    display: block;
    display: none;
    width: 17px;
    height: 20px;
    opacity: 1;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjAuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNi41IDE5LjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE2LjUgMTkuNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNDMTAyMzA7fQo8L3N0eWxlPgo8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjguMSwwIDAsOC40IDAsMTEuMSA3LjIsMy43IDcuNCwxOS40IDkuNCwxOS4zIDkuMiwzLjcgMTYuNSwxMC44IDE2LjUsOC4xICIvPgo8L3N2Zz4K");
    background-repeat: no-repeat;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease; }

#return-to-top:hover {
    opacity: 0.8; }

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

footer {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px; }

footer,
footer ul {
    background: #ba0c2f;
    color: #FFF; }

footer,
footer p,
footer a {
    color: #FFF;
    font-size: 14px; }

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

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

/* ==========================================================================
   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; }