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

/*  Colors

Blue_1: e9f6f9
Blue_2: 0091bc
Blue_3: 002d51

Red: a3001a;

*/

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

* {
    box-sizing: border-box;
}

html,
body,
ul {
    /* ul to be help-block full left */
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth"100;
    font-size: 16px;
    line-height: 1.4;
    color: #002d51;
}

/* no color def for form validation */

li {
    list-style-type: none;
}

/* for text-danger in form */

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    margin: 0;
    padding: 0;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

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

h1 p {
    line-height: 1.2;
}

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

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

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

#layout-home h1 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    color: #002d51;
}

#layout-content h1,
h2,
h3 {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-size: 33px;
    color: #002d51;
    margin-bottom: 15px;
}

.article-collapse h2,
h6 {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
    color: #a3001a;
    padding: 15px 0;
    margin: 0;
}

h3 {
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
}

.side-column h3 {
    font-size: 33px;
}

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

    #layout-home h1,
    .article-collapse h2 {
        font-size: 58px;
    }
}

p,
ul {
    margin: 0 0 30px;
    /* Bootstrap */
    line-height: 1.4;
}

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

p strong {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "wdth"100;
}


.side-column strong {
    color: #002d51;
}

.side-column h2,
.side-column h3,
.side-column p,
.lead-content p strong,
.main-column p strong,
.content p strong {
    color: #a3001a;
}

.lead-content p strong,
.main-column p strong,
.content p strong {
    font-size: 18px;
}

.content a {
    color: #002d51;
    border-bottom: 1px solid #002d51;
}

.content a:hover,
.content a:active {
    color: #a3001a;
    border-bottom: 1px solid transparent;
}

.side-column a {
    color: #a3001a;
    border-bottom: 1px solid #a3001a;
}

.side-column a:hover,
.side-column a:active {
    color: #002d51;
    border-bottom: 1px solid transparent;
}

.content a img {
    border-bottom: 0 !important;
}

/* List */
.content li {
    list-style: none;
    padding-left: 15px;
}

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

.content img {
    max-width: 100%;
    height: auto;
    margin-bottom: 30px;
}

.article-image img {
    margin-bottom: 0;
}

.content a[href$=".pdf"]:before,
.content a[href$=".doc"]:before {
    display: inline-block;
    content: " ";
    background-size: 100% 100%;
    width: 20px;
    height: 25px;
    background-image: url(../img/file-icon.svg);
    margin-right: 10px;
}

.content a[href$=".pdf"],
.content a[href$=".doc"] {
    border-bottom: none;
}

/* Tables */
table {
    width: 100%;
    margin-bottom: 35px;
}

table>thead>tr>th,
table>tbody>tr>td {
    width: auto;
    padding: 0;
    line-height: 1.4;
    vertical-align: top;
    border-top: 0;
}

table>thead>tr>th:last-child,
table>tbody>tr>td:last-child {
    text-align: right;
}

table>thead>tr {
    border-bottom: 1px solid #002d51;
}

table>thead>tr>th {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

table>tbody>tr>td>p {
    margin-bottom: 0;
}

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

.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: 52px;
}

/* Height = logo height plus navbar-header padding */

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

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

.social-media {
    position: absolute;
    top: 15px;
    right: 15px;
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.social-media.shrink {
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
    -webkit-transition: all 0.25s;
    -moz-transition: all 0.25s;
    transition: all 0.25s;
}

.social-media li {
    float: left;
    padding: 0 5px;
}

.social-media li a {
    color: #FFF;
}

.social-media li a:hover {
    color: #e9f6f9;
}

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

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

    .navbar.shrink {
        height: 52px;
        background: #002d51;
        -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: 52px;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        transition: all 0.25s;
    }

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

    .social-media {
        position: absolute;
    }

    .social-media.shrink {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.image-container {
    position: relative;
}

.title-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.welcome {
    font-family: "Dancing Script", cursive;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    color: #FFF;
    font-size: 175px;
    font-size: calc(65px + (175 - 65) * (100vw - 400px)/(1200 - 400));
    line-height: 0.8;
}

.title {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    color: #FFF;
    font-size: 55px;
    font-size: calc(25px + (55 - 25) * (100vw - 400px)/(1200 - 400));
    text-align: right;
    line-height: 1;
}

.coming-soon {
    color: white;
    margin-top: 30px;
    font-size: 18px;
    font-size: calc(18px + (25 - 18) * (100vw - 400px)/(1200 - 400));
    text-align: right;
}

#layout-home .image-container {
    background: url(../img/Start_Fisch_1920px.gif) no-repeat center right;
    background-size: cover;
    height: 100vh;
}

@media (max-width: 640px) {
    #layout-home .image-container {
        background: url(../img/Start_Fisch_640px.gif) no-repeat center right;
        background-size: cover;
        height: 300px;
    }
}

@media (min-width: 641px) {
    #layout-home .image-container {
        background: url(../img/Start_Fisch_1024px.gif) no-repeat center right;
        background-size: cover;
        height: 100vh;
    }
}

@media (min-width: 1025px) {
    #layout-home .image-container {
        background: url(../img/Start_Fisch_1920px.gif) no-repeat center center;
        background-size: cover;
        height: 100vh;
    }
}

#layout-content .image-container img {
    width: 100%;
    height: auto;
}

.image-container .wave {
    position: absolute;
    bottom: -1px;
    left: 0;
}

.wave {
    width: 550px;
    height: 116px;
    max-width: 50vw;
    height: auto;
    z-index: 100;
}

.wave img {
    width: 550px;
    height: 116px;
    max-width: 50vw;
    height: auto;
}

.enter a span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 50px;
    margin: 0 auto;
    width: 58px;
    height: 30px;
    text-align: center;
    background: url(../img/enter.svg);
    background-size: 58px 30px;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}

.enter a:hover span {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
}

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

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

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

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

/* Navigation colors */
.navbar-default .navbar-nav>li>a {
    padding-top: 10px !important;
    /* eq. bootstrap vaule > 768px */
    padding-bottom: 10px !important;
    /* eq. bootstrap vaule > 768px */
    color: #0091bc;
    background-color: transparent;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 20px;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: #002d51;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    color: #002d51 !important;
    background-color: transparent;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    color: #002d51;
    background-color: transparent;
}

.dropdown-menu {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.dropdown-menu>li>a {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 16px;
    color: #002d51 !important;
}


.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    color: #0091bc !important;
    background-color: transparent;
    cursor: pointer;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
    color: #0091bc !important;
    background-color: transparent !important;
}

/* Mobile navigation */

.navbar-toggle {
    float: left !important;
    display: block;
    margin-top: 15px;
    margin-left: 15px;
    z-index: 1000;
    background: #FFF;
    border: 1px solid #000;
}

@media (min-width: 768px) {
    .navbar-toggle {
        margin-left: 0;
    }
}

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

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

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

    .navbar-default .navbar-toggle {
        display: none;
    }

    /* for hiding in desktop */
}

/* Offcanvas */
.offcanvas-toggle,
.navbar-toggle:hover {
    background: #0091bc !important;
    border-radius: 0;
    border: none;
}

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

.navbar-toggle:hover .icon-bar {
    background: #FFF !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: 991px) {
    /* 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: #e9f6f9;
    }

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

    /* Animate caret */
    .dropdown .caret {
        transform: rotate(0deg);
        transition: all 0.3s ease-in-out;
    }

    .dropdown.open .caret {
        transform: rotate(-180deg);
        transition: all 0.4s ease-in-out;
    }

    .navbar-offcanvas .dropdown-menu {
        position: relative;
        width: 100%;
        border: inherit;
        box-shadow: none;
        -webkit-transition: height 0.15s ease-in;
        transition: height 0.15s ease-in;
    }

    .navbar-offcanvas .dropdown-menu.shown {
        display: block;
    }
}

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

    .navbar-nav>li {
        /* make left navigation elements float left */
        float: left;
    }

    .navbar-default .navbar-nav>li>a {
        padding: 13px 0 2px 0;
        margin-left: 15px;
        margin-right: 15px;
        color: #FFF;
        background-color: transparent;
        font-family: "Source Sans 3", sans-serif;
        font-optical-sizing: auto;
        font-weight: 800;
        font-style: normal;
        font-size: 20px;
        border-bottom: 2px solid transparent;
    }

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

    .navbar-default .navbar-nav>.active>a,
    .navbar-default .navbar-nav>.active>a:hover,
    .navbar-default .navbar-nav>.active>a:focus {
        color: #FFF !important;
        background-color: transparent;
        border-bottom: 2px solid #FFF;
    }

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

    /* Dropdown animation */
    .dropdown .dropdown-menu {
        -webkit-transition: all 0.45s;
        -moz-transition: all 0.45s;
        -ms-transition: all 0.45s;
        -o-transition: all 0.45s;
        transition: all 0.45s;
        max-height: 0;
        display: block;
        margin-left: 15px;
        padding-top: 15px;
        background: transparent;
        -webkit-box-shadow: none;
        box-shadow: none;
        overflow: hidden;
        opacity: 0;
    }

    .dropdown-menu>li>a {
        padding: 7px 10px;
        background: #FFF;
        color: #0091bc !important;
    }

    .dropdown-menu>li>a:hover,
    .dropdown-menu>li>a:focus {
        color: #002d51 !important;
        background-color: #FFF;
    }

    .dropdown-menu>.active>a,
    .dropdown-menu>.active>a:hover,
    .dropdown-menu>.active>a:focus {
        color: #002d51 !important;
        background-color: #FFF !important;
    }

    .dropdown-menu>li:first-child>a {
        padding-top: 10px;
    }

    .dropdown-menu>li:last-child>a {
        padding-bottom: 10px;
    }

    .dropdown-menu>li:first-child {
        position: relative;
        overflow: visible;
    }

    .dropdown-menu>li:first-child:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        left: 0;
        top: 0;
        margin-top: -10px;
        border: 5px solid;
        border-color: transparent transparent #FFF #FFF;
    }

    /*  Make subnavigation on desktop hover */
    .dropdown:hover .dropdown-menu {
        display: block;
        max-height: 250px;
        opacity: 1;
    }

    /* Word-break */
    .dropdown-menu>li>a {
        word-wrap: break-word;
        white-space: normal;
        line-height: 1.4 !important;
    }

}

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

/* Dimensions & layouts */
.content {
    margin-top: 25px;
}

.main-content {
    position: relative;
    background: #e7f5f8;
}

.main-content .container {
    padding-top: 35px;
    padding-bottom: 35px;
}

.flex-container {
    margin-top: 25px;
    margin-bottom: 25px;
}

/*
.main-content .flex-container {
    margin-top: 25px;
    margin-bottom: 25px; }
*/

#layout-home .bubbles,
#layout-content .bubbles {
    position: absolute;
    bottom: 10vw;
    right: 10vw;
    width: 71px;
    height: 142px;
    background-size: 71px 142px;
    background: url(../img/bubbles.png) no-repeat;
}

#layout-content .bubbles {
    position: absolute;
    top: 10vw;
    right: 5vw;
    left: auto;
}

#layout-content .underwater-1 {
    position: absolute;
    bottom: 30px;
    right: 5vw;
    width: 222px;
    height: 244px;
    background-size: 222px 244px;
    background: url(../img/underwater-1.png) no-repeat;
}

.article-simple {
    margin: 25px 0;
}

.side-column .article-simple {
    color: #a3001a;
    margin: 15px 0;
}

.side-column .article-simple-inner {
    padding-bottom: 30px;
    border-bottom: 3px solid #a3001a;
}

.article-with-graphic {
    margin-top: 30px;
    margin-bottom: 30px;
}

.article-with-graphic img {
    margin-bottom: 30px;
}

.article-with-graphic .col-sm-4 img {
    max-width: 100px;
}

@media (min-width: 600px) {
    .article-with-graphic .col-sm-4 img {
        max-width: 170px;
    }
}

.gallery-container {
    padding: 7.5px;
}

.article-image {
    padding: 7.5px;
}

/* Background main-content */
/*
.wave-top,
.wave-bottom {
    background: #FFF;
    height: 15px;
    position: relative; }

.wave-top::before,
.wave-top::after,
.wave-bottom::before,
.wave-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-repeat: repeat-x;
    height: 10px;
    background-size: 20px 20px;
    background-image: radial-gradient(circle at 10px -5px, transparent 12px, #e7f5f8 13px); }

.wave-top::after {
    height: 15px;
    background-size: 40px 20px;
    background-image: radial-gradient(circle at 10px 15px, #e7f5f8 12px, transparent 13px); }

.wave-bottom {
    background: #e7f5f8; }

.wave-bottom::before {
    height: 10px;
    background-size: 20px 20px;
    background-image: radial-gradient(circle at 10px -5px, transparent 12px, #FFF 13px); }

.wave-bottom::after {
    height: 15px;
    background-size: 40px 20px;
    background-image: radial-gradient(circle at 10px 15px, #FFF 12px, transparent 13px); }
*/
/* wave new */
.wave-top,
.wave-bottom {
    position: relative;
    background: #FFF;
    height: 10px;
}

.wave-top::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
    background: url(../img/wave-part.svg);
    background-size: 46px 10px;
    background-repeat: repeat-x;
}

.wave-bottom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 10px;
    background: url(../img/wave-part2.svg);
    background-size: 46px 10px;
    background-repeat: repeat-x;
}

/* Lead article */
.lead-content .container {
    position: relative;
}

.lead-content .fish {
    position: absolute;
    bottom: 0;
    padding-bottom: 50px;
    width: 98px;
    height: 212px;
    background: url(../img/fish-1.png);
    background-size: 98px 212px;
}

/* Collapsing article 
    (https://disjfa.github.io/bootstrap-tricks/card-collapse-tricks/) 
*/

i.open {
    margin-right: 5px;
}

i.open:before {
    content: url(../img/collapse-arrow-1.svg);
    display: inline-block;
    width: 40px;
    height: 21px;
}

.card-header .open {
    transition: .3s transform ease-in-out;
}

.card-header .collapsed .open {
    transform: rotate(-90deg);
}

.card {
    border-top: 3px solid #a3001a;
    border-bottom: 3px solid #a3001a;
}

.card-body {
    margin-bottom: 25px;
}

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

@media (min-width: 768px) {

    .page-title {
        padding-left: 20%;
    }

    #layout-content .bubbles {
        top: 10vw;
        right: auto;
        left: 5vw;
    }

    .main-column,
    .article-with-graphic .col-sm-8 {
        margin-top: 40px;
    }

    .article-with-graphic .col-sm-4 {
        text-align: right;
    }

    .article-with-graphic img {
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .side-column {
        margin: 10px 0;
        padding-left: 45px;
        padding-right: 45px;
    }

    .side-column .article-simple {
        padding-left: 45px;
        padding-right: 45px;
    }

    .main-column .flex-container {
        border-left: 5px dotted #002d51;
    }

    .side-column .article-simple img {
        display: block;
        margin: 0 auto;
    }
}


/* Button 
p.link-element {
    display: inline-block;
    position: relative;
    background: #FFF;
    padding: 10px; }

p.link-element:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    margin-top: -10px;
    border: 5px solid;
    border-color: transparent transparent #FFF #FFF; }

p.link-element a {
    padding: 10px;
    font-family: "Source Sans 3", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
    font-size: 16px;
    color: #002d51;
    border: 1px solid red; }

p.link-element a:after {
    content: " ";
    background-size: 100% 100%;
    width:  10px;
    height: 20px;
    background-image: url(../img/link-arrow.svg);
    float: right;
    margin-left: 10px;
    margin-right: 5px; }
    
p.link-element a:hover p.link-element a:after {
    margin-right: 20px; }*/

p.link-element,
button.btn {
    position: relative;
    white-space: nowrap;
    background: #FFF;
    display: inline-block;
    padding: 8px 5px;
}

p.link-element:after,
button.btn:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    margin-top: -10px;
    border: 5px solid;
    border-color: transparent transparent #FFF #FFF;
}

p.link-element a,
button.btn {
    padding: 2px 40px 2px 5px;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 16px;
    color: #002d51;
    display: block;
    background: url("../img/link-arrow.svg") no-repeat right 10px top;
    border-bottom: 0 !important;
}

p.link-element a:hover,
button.btn:hover {
    color: #002d51;
    background: url("../img/link-arrow.svg") no-repeat right 0 top;
}

.side-column p.link-element a {
    padding: 2px 40px 2px 5px;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-size: 16px;
    color: #a3001a;
    display: block;
    background: url("../img/link-arrow-2.svg") no-repeat right 10px top;
}

.side-column p.link-element a:hover {
    color: #a3001a;
    background: url("../img/link-arrow-2.svg") no-repeat right 0 top;
}

/* Conditional for IE10/11 */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {

    p.link-element a,
    button.btn,
    p.link-element a:hover,
    button.btn:hover {
        background: url("../img/link-arrow.png") no-repeat right 10px top;
    }

    .side-column p.link-element a,
    .side-column p.link-element a:hover {
        background: url("../img/link-arrow-2.png") no-repeat right 10px top;
    }
}

.ie9 p.link-element a,
.ie9 button.btn,
.ie9 p.link-element a:hover,
.ie9 button.btn:hover {
    background: url("../img/link-arrow.png") no-repeat right 10px top;
}

.ie9 .side-column p.link-element a,
.ie9 .side-column p.link-element a:hover {
    background: url("../img/link-arrow-2.png") no-repeat right 10px top;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.help-block {
    margin: 0;
}

.form-group {
    margin-bottom: 25px;
}

#contact-form .form-group input,
#contact-form .form-group textarea {
    font-size: 16px;
    padding: 5px 7px;
    background-color: #FFF;
    border: 0;
    border-radius: 0;
    font-weight: normal;
    color: #002d51;
    -webkit-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.15);
}

label {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    padding-top: 5px;
    padding-left: 0px;
    text-align: right;
}

.honeypot {
    display: none;
}

#contact-form .list-unstyled li {
    /* check default list-style on line 164 */
    padding-left: 0;
    background-color: transparent !important;
}

#contact-form .list-unstyled li:before {
    content: '';
}

#success {
    font-family: 'Source Sans Pro', Arial, sans-serif !important;
    font-weight: normal;
    color: #FFF;
    border: 0;
    border-radius: 0;
}

.alert-success,
.alert-danger {
    border-radius: 0;
}

.has-error input,
.has-error textarea {
    border: 1px solid #a3001a !important;
    margin-bottom: 10px;
}

/* Error message */
#contact li {
    font-size: 16px;
    text-transform: none;
    color: #a3001a;
}

.btn {
    -webkit-transition: background linear 300ms;
}

.btn:hover,
.btn:focus,
.btn.active {
    -webkit-transition: background linear 300ms;
}

#map {
    height: 440px;
}

.shadow::after {
    display: block;
    position: relative;
    background-image: linear-gradient(to top, #002d51 100%, #002d51 100%);
    height: 52px;
    width: 100%;
    content: '';
}

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

/* Footer always at the bottom */
html,
body {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    border-bottom: 6px solid #0091bc;
}

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

footer {
    background: url('../img/wave-2.svg') no-repeat;
    background-position: bottom left;
    background-size: 122px 26px;
    color: #0091bc;
    font-size: 14px;
}

footer a {
    color: #0091bc;
    font-size: 14px;
}

footer a:hover {
    color: #002d51;
}

footer img {
    width: 100%;
    max-width: 122px;
    height: auto;
}

.footer-inner {
    position: relative;
    padding-top: 25px;
    padding-bottom: 50px;
}

.footer-inner .fish {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 50px;
    width: 79px;
    height: 130px;
    background: url(../img/fish-2.png);
    background-size: 79px 130px;
}

footer a:hover {
    color: #002d51;
}

.org,
.street-address,
.tel,
.email {
    white-space: nowrap;
}

.address {
    display: block;
}

.imprint ul {
    margin: 15px 15px 25px 0;
}

@media (min-width: 768px) {

    .footer-inner {
        padding-top: 100px;
        padding-bottom: 25px;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: end !important;
        align-items: flex-end !important;
    }

    .imprint {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
    }

    .imprint ul {
        margin: 0 15px 0 0;
    }

    .imprint li {
        text-align: right;
        line-height: 1.2;
    }
}

.boenigen img {
    width: 120px;
    height: 32px;
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

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

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

img::selection {
    background: 0 0;
}

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

body {
    webkit-tap-highlight-color: #002d51;
}

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