body {
    font-family: Montserrat, "Work sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    width: 100%;
}
html {
    width: 100%;
}

h1 {
    font-size: 1em;
}

h2 {
    font-size: 0.9em;
}

h3, h4, h5, h6 {
    font-size: 0.8em;
}

h1, h2, h3 {
    font-weight: 600;
}

p, input, li, td {
    font-size: 0.8em;
}

a {
    font-size: 1em;
}

a:hover {
    text-decoration:underline;
}

a:visited, a:active {
    color: #0081c2;
}

svg {
    display: flex;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
}

div.bcnt {
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

.h100 {
    height: 100%;
}

.w100 {
    width: 100%;
}

.vh100 {
    height: 100vh;
}

.fl  {
    float: left;
}

.fr {
    float: right;
}

.clear {
    clear: both;
    line-height: 0px;
    width: 0px;
    height: 0px;
}


.t {
    display: table;
    width: 100%;
    height: 100%;
}

.td {
    display: table-cell;
    width: 100%;
    height: 100%;
}

.vam {
    vertical-align: middle;
}

.txtcenter {
    text-align: center;
}

div.gridimg img {
    max-width: 100%;
    border: 8px solid #0081c2;
    border-radius: 50% 50%;
    background-color: #FFFFFF;
}

div.gridimg p {
    height: 40px;
    margin-top: -40px;
    color: #0081c2;
}

div.col-4 div.gridimg p {
    height: 30px;
    margin-top: -30px;
    font-size: 0.7em;
}

body,
html {
    margin: 0px;
    padding: 0px;
}


input[type=checkbox] {
    margin: 5px 10px 5px 5px;
    vertical-align: text-bottom;
}

label {
    vertical-align: middle;
}

/* Landing Page */
div.page {
    background-color: #0081c2;
    width: 100%;
    height: 100vh;
}

div.pageheader {
    width: 100%;
    height: 65%;
}

div.pagefooter {
    width: 100%;
    height: 35%;
}

div.bgimg {
    background-image: url('/docs/bgimg/IMG_-551.jpg');
    background-position: center center;
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    height: 100%;
}

div.imgoverlay {
    background-repeat: no-repeat no-repeat;
    background-size: contain;
    height: 100%;
}

div.imgoverlaycover {
    background-repeat: no-repeat no-repeat;
    background-size: cover;
    height: 100%;
}

.iobottomright {
    background-position: bottom right;
}
.iobottomleft {
    background-position: bottom left;
}
.iotopright {
    background-position: top right;
}
.iocentercenter {
    background-position: center center;
}
.iocenterbottom {
    background-position: center bottom;
}

/* Video Licence Attribution*/
div.videocc {
    background-color: rgba(189,189,189,0.88);
    padding: 5px 5px 5px 5px;
}

div.videocc div {
    font-size: 0.75em;
}

.videocc * a,
.videocc * a:visited,
.videocc * a:hover {
    color: #000000;
}

/* Big Mainmenu */
div.menuimage,
div.pagemenu
{
    visibility: hidden;
    display:none;
}

div.mainmenu {
    visibility: hidden;
    display: none;
    height: 100%;
}

div.mainmenu a {
    font-size: 1.5em;
}

div.mainmenu .d-table {
    height: 100%;
    margin: auto;
}

div.floatmenu {
    width: 100%;
    height: 100%;
    visibility: visible;
    display: block;
}

div.menuitem {
    display: inline-block;
}

div.menuitem a {
    font-weight: bold;
    padding: 10px;
    font-size: 0.75em;
}

section.verein {
    background-color: #FFFFFF;
}

div.pagemenuitem {
    display: inline-block;
    margin-left: 25px;
}

div.pagemenuitem a {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 1em;
    padding-left: 10px;
    padding-right: 10px;
}

div.homemenuitem {
    height: 75px;
    line-height: 75px;
}


/* Small Mainmenu */
div.smallmenuborder {
    width: 100%;
    height: 100%;
}

div.smallmenucontainer {
    height: 75px;
}

img.pagemenuimg {
    margin-top: 10px;
    width: 55px;
    height: 55px;
}

div.flexnavmenu {
    margin-top: 0px;
}

div.flexnavmenu ul {
    padding: 0px;
    margin: 0px;
}

div.smallmenuhamburger {
    border-radius: 4px;
    float: right;
    margin-top: 13px;
    padding: 0px;
}

div.hamburger {
    width: 42px;
    height: 42px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

div.smallmenuhamburger img {
    width: 42px;
    height: 42px;
}

div.smallmenuhangout {
    height: 100%;
    width: 100%;
}

div.smallmenuhangout h1,
div.smallmenuhangout h2
{
    line-height: 40px;
    margin: 0px;
    padding: 0px;
}

a.btn.focus, a.btn:focus {
    box-shadow: 0px 0px 0px 0.0rem rgba(0, 0, 0, 0.5);
}

/* TEXT */
div.txtmargin {
    margin-top: 20px;
    margin-bottom: 20px;
}

div.txtpadding {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Fischarten*/
div.bgfischarten {
    color: #FFFFFF;
}

div.bgfischarten p {
    font-size: 0.8em;
}

div.fischarten * img {
    background-color: #FFFFFF;
}

div.bgoverlay {
    display: none;
    opacity: 0;
    -moz-transition: opacity 0.25s ease-in-out;
    -webkit-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
}

/* Hintergrund Bild */
div.imgoverlaygray {
    width: 100%;
    height: 100%;
    background-color: rgba(189,189,189,0.88);
}
div.imgoverlayblue {
    width: 100%;
    height: 100%;
}
div.imgoverlaywhite {
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.88);
}
div.overlayimg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat no-repeat;
}

div.griditem {
    background-color: white;
    margin-bottom: 10px;
}

div.vorstandsmitglied img {
    width: 100%;
}

div.txtelement {
    padding: 5px;
}

div.textcontainer {
    background-color: #FFFFFF;
    padding: 10px;
    color: #000000;
}

div.downloaditem {
    border: 2px solid #0081c2;
    margin: 20px;
}
div.downloaditem img {
    max-width: 100%;
    transition: all 0.95s ease-in-out;

}
div.downloaditem img:hover {
    background-color: rgba(0,0,0,0);
    transition: all 0.95s ease-in-out;

}
div.downloaditemtitle {
    width: 100%;
    height: 45px;
    margin-top: -45px;
    bottom: 0px;
    text-align: center;
    color: #0081c2;
    font-weight: bold;
}

/* Kontakt */
section#contact{
    color: #FFFFFF;
}

/* Footer */
div.footer {
    font-size: 8px;
    height: 25px;
    line-height: 25px;
}

div.footer a {
    color: #000000;
}

input.loginbutton {
    font-size: 13px;
}

a.logoutlink,
a.logoutlink:visited,
a.logoutlink:active,
a.logoutlink:hover {
    color: #0081c2;
}

div#about {
    height: 25px;
    line-height: 25px;
}

div.loginelements {
    float: left;
    margin-top: -25px;
}

#scrolltop {
    /*visibility: hidden;*/
    display: none;
}


/* Termine */
div.eventelement {
    margin-top: 10px;
    background-color: #f3f1f0;
    min-height: 200px;
    border-bottom: 1px solid #f3f1f0;
}

div.eventlogo {
    background-color: #e7e5e4;
    min-height: 70px;
    padding-bottom: 10px;
}

div.eventlogo img {
    margin-top: 10px;
    margin-left: 10px;
    float: left;
}

div.eventtitle {
    padding-top: 15px;
    margin-left: 70px;
    margin-right: 10px;
    color: gray;
    font-weight: bold;
}

div.eventdate {
    margin-left: 70px;
    margin-right: 10px;
    color: gray;
    font-size: small;
}

div.eventtext {
    margin: 10px;
}

div.eventfooter {
    background-color: #0081c2;
    padding: 5px;
    margin-bottom: 15px;
}

div.streckecontainer a {
    font-size: 0.5em;
}

div.strecke {
    position: relative;
}

img.pachtstrecke {
    width: 100%
}

div.streckecontainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
}

div.streckecontainer a {
    background-color: #FFFFFF;
    color: #0081c0;
    padding: 5px;
}

#str1 {
    top: 47%;
    left: 73%;
    position: absolute;
}

#str2 {
    top: 75%;
    left: 56%;
    position: absolute;
}

#str3 {
    top: 48%;
    left: 39%;
    position: absolute;
}

#str4 {
    top: 80%;
    left: 20%;
    position: absolute;
}

#str5 {
    top: 55%;
    left: 5%;
    position: absolute;
}

#str6 {
    top: 30%;
    left: 31%;
    position: absolute;
}

#strecke1,
#strecke2,
#strecke3,
#strecke4,
#strecke5,
#strecke6 {
    position: absolute;
    left: 0px;
    opacity: 0.0;
    filter: alpha(opacity=50);
}

#strecke1,
#strecke2,
#strecke3,
#strecke4,
#strecke5,
#strecke6,
#strecke {
    -webkit-transition: opacity ease-in-out 0.25s;
    -moz-transition: opacity ease-in-out 0.25s;
    -o-transition: opacity ease-in-out 0.25s;
    transition: opacity ease-in-out 0.25s;
}

p.author {
    height: 10px;
    font-size: 8px;
    line-height: 10px;
    padding: 0px;
    margin: -10px 0px 0px 0px;
}

@media all and (min-width: 550px) {
    .bcnt {
        /*max-width: 520px;*/
        max-width: 100%;
    }

    h1 {
        font-size: 1.25em;
    }

    h2 {
        font-size: 1em;
    }

    h3, h4, h5, h6 {
        font-size: 0.8em;
    }

    p, input, li, td {
        font-size: 0.8em;
    }

    a {
        font-size: 1em;
    }

    div.hangout {
        margin-right: 25px;
        border-radius: 20px;
    }

    /*div.mainmenu a {
        font-size: 0.85em;
    }*/

    div.menuitem a {
        font-size: 0.85em;
    }

    div.gridimg p {
        height: 65px;
        margin-top: -65px;
        font-size: 1.25em;
    }

    div.col-4 div.gridimg p {
        height: 45px;
        margin-top: -45px;
        font-size: 0.8em;
    }

    div.streckecontainer a {
        font-size: 0.75em;
        padding: 5px;
    }

    #str1 {
        top: 47%;
        left: 73%;
        position: absolute;
    }

    #str2 {
        top: 75%;
        left: 56%;
        position: absolute;
    }

    #str3 {
        top: 50%;
        left: 39%;
        position: absolute;
    }

    #str4 {
        top: 80%;
        left: 20%;
        position: absolute;
    }

    #str5 {
        top: 55%;
        left: 5%;
        position: absolute;
    }

    #str6 {
        top: 30%;
        left: 31%;
        position: absolute;
    }

    .cell-md-7 {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

@media all and (min-width: 992px) {
    .bcnt {
        max-width: 920px;
    }

    h1 {
        font-size: 1.25em;
    }

    h2 {
        font-size: 1em;
    }

    h3, h4, h5, h6 {
        font-size: 0.8em;
    }

    p, input, li, td {
        font-size: 0.8em;
    }

    a {
        font-size: 1em;
    }

    div.pageheader {
        height: 75%;
    }

    div.pagefooter {
        height: 25%;
    }

    div.mainmenu,
    div.pagemenu,
    div.menuimage {
        visibility: visible;
        display: block;
    }

    div.floatmenu,
    div.smallmenuhangout,
    div.pagefloatmenu {
        visibility: hidden;
        display: none;
    }

    div.streckecontainer a {
        font-size: 1em;
        padding: 10px;
    }


    div.menuitem a {
        font-size: 0.8em;
    }

    div.pagemenuitem a {
        font-size: 0.85em;
    }

    .cell-lg-7 {
        -ms-flex: 0 0 14.285714%;
        flex: 0 0 14.285714%;
        max-width: 14.285714%;
    }
}

@media all and (min-width: 1200px) {
    .bcnt {
        max-width: 1120px;
    }

    h1 {
        font-size: 1.25em;
    }

    h2 {
        font-size: 1em;
    }

    h3, h4, h5, h6 {
        font-size: 0.8em;
    }

    p, input, li, td {
        font-size: 0.8em;
    }

    a {
        font-size: 1em;
    }

    div.menuitem a {
        font-size: 1.25em;
    }

    div.pagemenuitem a {
        font-size: 1em;
    }
}