html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
form {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    outline: none;
}

/* HTML5 display-role reset for older browsers */

* {
    font-family: 'Noto Sans' !important;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* end of css reset */

html {
    overflow-y: auto;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100vh;
    font-size: 14px;
    font-family: 'Noto Sans';
    line-height: 20px;
    color: #333;
    background-color: #FFFFFF;
    empty-cells: show;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

table.center {
    margin-left: auto;
    margin-right: auto;
}

td {
    margin: 0;
    padding: 0;
    color: #000000;
    empty-cells: show;
}

ul {
    margin-top: 1em;
    margin-bottom: 2em;
    list-style: disc;
    padding-left: 20px;
}

li {
    line-height: 1.4;
    margin-bottom: 5px;
}

#navi ul {
    margin: 0;
}

ol {
    margin-top: 1em;
    margin-bottom: 2em;
    list-style: decimal;
    padding-left: 35px;
}

a,
a:visited {
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    transition: opacity 0.3s ease-in-out;
}

a:hover {
    opacity: 0.7;
    cursor: pointer;
    text-decoration: none;
}

sub {
    vertical-align: sub;
    font-size: smaller;
}

sup {
    vertical-align: super;
    font-size: smaller;
}

input {
    margin: 5px 0px;
    padding: 5px 5px;
    font-size: 16px !important;
    border-radius: 0px;
    border: 1px solid #7a8899;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

input[type=text],
input[type=password] {
    width: 210px;
    border: 1px solid #7a8899;
}

input[type=file] {
    border: 1px solid #7a8899;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input[type=button],
input[type=submit],
button {
    border: 0px solid #47cc74;
    background-color: #47cc74;
    color: #fff;
    cursor: pointer;
    padding: 10px 15px;
    width: auto !important;
    border-radius: 0px;
    font-size: 14px;
    box-shadow: 0 2px 0 0 #5c9970;
}

input[type=button]:hover,
button:hover {
    background-color: #7ee6a1;
    box-shadow: 0 2px 0 0 #5c9970;
}

input[type=button]:focus,
button:focus {
    background-color: #7ee6a1;
    box-shadow: none;
    outline: none;
}

input[type=radio] {
    width: auto !important;
    margin-right: 10px;
}

input[type=checkbox] {
    width: 18px !important;
}

select {
    width: 210px;
    margin: 5px 0px;
    padding: 5px 5px;
    background: #ffffff;
    background-color: #ffffff;
    border: 1px solid #7a8899;
    border-radius: 0px;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.select-container {
    position: relative;
    display: inline;
}

.select-container:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
}

.select-container:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    top: 5px;
    right: 10px;
    border-top: 8px solid black;
    opacity: 0.5;
}

select::-ms-expand {
    display: none;
}

textarea {
    margin: 5px 0px;
    font-size: 14px;
    padding: 5px;
    border-radius: 0px;
    border: 1px solid #7a8899;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
}

p {
    padding: 0px;
    margin: 0px;
}

h1 {
    padding: 0px;
    margin: 0px;
    font-size: 20px;
    font-weight: bold;
}

h2 {
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
}

h3 {
    padding: 0px;
    margin: 0px;
    font-size: 14px;
    font-weight: bold;
}

b,
strong {
    font-weight: bold;
}

hr {
    border: none;
    height: 1px;
    background-color: #ccc;
    margin: 10px 0;
}

#mainContainer {
    max-width: 1600px;
    background-color: #fff;
    margin: auto;
}

#container {
    min-height: 100%;
    position: relative;
}

#navi {
    overflow: auto;
    min-height: 100vh;
    max-height: 100vh;
}

#navi ul {
    padding-left: 12px;
    border-left: 3px solid #304050;
    line-height: 40px;
}

#navi a {
    color: #a5aec0;
}

#navi a:hover {
    color: #fff !important;
}

.iconNavi {
    font-size: 25px;
    width: 20px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
}

.icon {
    font-size: 18px;
    width: 12px;
    margin-right: 5px;
    display: inline-block;
    text-align: center;
}

.btnRed {
    background-color: #990000;
    box-shadow: 0 2px 0 0 #6c3030;
}

.btnRed:hover {
    background-color: #d66262;
    box-shadow: 0 2px 0 0 #6c3030;
}

.naviLinkHolder {
    display: inline-block;
    vertical-align: top;
}

.active {
    color: #ffffff;
    background-color: #4e5e73;
    display: block;
    border-left: 3px solid #47cc74 !important;
}

.active a {
    color: #ffffff !important;
}

.adminTable {
    border: 1px #666 solid;
    padding: 2px;
    width: 100%;
}

.adminTable td {
    padding: 5px;
}

.adminTable td:first-child {
    width: 150px;
    vertical-align: middle;
}

.listTable {
    padding: 2px;
}

.listTable tr {
    border: 1px solid #ebebeb;
}

.listTable tr:nth-child(odd) {
    background-color: #ebebeb;
}

.listTable tr:first-child {
    background-color: #fff;
}

.listTable td {
    padding: 5px;
    vertical-align: top;
}


.border {
    border: 1px #ccc solid;
    padding: 2px;
}

.border:hover span {
    cursor: pointer;
}

.pointer {
    cursor: pointer;
}

#overlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.9);
}

#naviSmall {
    display: none;
}

#onePage {
    float: left;
    width: calc(100% - 250px);
    height: calc(100vh - 50px);
    overflow: auto;
}

#onePage input {
    width: 100%;
    max-width: 440px;
}

#headerContainer {
    padding: 7px 10px;
    height: 50px;
    background-color: #304050;
    color: #fff;
}

#headerContainer span {
    float: left;
    padding: 10px;
}

#headerContainer a {
    color: #fff;
}

#contentSubmenuSmall {
    display: none;
}

#contentMenuContainer {
    float: left;
    color: #777777;
    background-color: #f3f3f4;
    padding: 0 10px;
    height: calc(100vh - 50px);
    min-width: 550px;
    max-width: 550px;
    overflow: auto;
}

#contentFormContainer {
    float: left;
    color: #777777;
    background-color: #f3f3f4;
    padding: 0 10px;
    width: calc(100% - 800px);
    height: calc(100vh - 50px);
    overflow: auto;
}


#overlay-content {
    color: #fff;
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

#overlay a {
    padding: 8px;
    text-decoration: none;
    color: #818181;
    display: block;
    transition: 0.3s;
}

#overlay a:hover,
.overlay a:focus {
    color: #f1f1f1;
}

#overlay .closebtn {
    position: absolute;
    top: 40px;
    right: 20px;
    font-size: 30px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
    border-radius: 50%;
    height: 32px;
    width: 40px;
    text-align: center;
    padding-top: 15px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);

}

@media screen and (max-height: 450px) {
    #overlay a {
        font-size: 20px;
    }
}

@media screen and (max-height: 450px) {
    #overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 15px;
    }
}

@media screen and (max-width: 1400px) {
    #naviSmall {
        height: 35px;
        display: block;
    }
}

@media screen and (max-width: 1400px) {
    #navi {
        display: none;
    }
}

@media screen and (max-width: 1400px) {
    #contentMenuContainer {
        height: calc(100vh - 50px);
    }
}

@media screen and (max-width: 1400px) {
    #contentFormContainer {
        height: calc(100vh - 50px);
        width: calc(100% - 550px);
    }
}

@media screen and (max-width: 1400px) {
    #onePage {
        float: none;
        width: 100%;
        height: calc(100vh - 50px);
    }
}

@media screen and (max-width: 1400px) {
    #headerContainer {
        padding: 20px 10px;
        height: 70px;
    }
}

@media screen and (max-width: 1400px) {
    #headerContainer span {
        padding: 0px;
    }
}

@media screen and (max-width: 1200px) {
    #contentMenuContainer {
        height: 200px;
        float: none;
        min-width: none;
        max-width: none;
        padding-bottom: 5px;
    }
}

@media screen and (max-width: 1200px) {
    #contentFormContainer {
        height: calc(100vh - 200px - 75px);
        width: auto;
        border-top: 1px solid #ccc;
        float: none;
        width: auto;
        padding-top: 5px;
    }
}

@media screen and (max-width: 900px) {
    #naviSmall select {
        width: calc(100% - 5px);
    }
}

@media screen and (max-width: 900px) {
    #naviSmall {
        height: 135px;
    }
}

@media screen and (max-width: 900px) {
    #contentFormContainer {
        height: auto;
    }
}

@media screen and (max-width: 900px) {
    #onePage {
        float: none;
        width: 100%;
        height: calc(100vh - 170px);
    }
}

@media screen and (max-width: 900px) {
    #contentSubmenu {
        display: none;
    }
}

@media screen and (max-width: 900px) {
    #contentSubmenuSmall {
        display: block;
    }
}

@media screen and (max-width: 900px) {
    #contentSubmenuSmall select {
        width: calc(100% - 5px);
    }
}

#menu {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease-in-out;
    height: auto;
    z-index: 99;
}

#topMenuContainer {
    height: 50%;
    float: right;
    display: flex;
align-items: center;
}

@media (max-width: 575px) {
    #topMenuContainer.open {
        height: calc(100vh - 260px);
        position: fixed;
        top: calc(160px + 5vh);
        float: right;
        display: initial !important;
        overflow-y: scroll;
    }
}

@media (max-width: 575px) {
    #topMenuContainer {
        float: right;
        display: none;
    }
}

#uppermenu {
    height: 90px;
    width: 90%;
    float: left;
}

@media (max-width: 575px) {
    #uppermenu {
        border-bottom: #333333 solid 1px;
        height: 70px;
        width: 100vw;
        float: left;
        position: fixed;
        transition: height 0.3s ease-in-out;
        background-color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

@media (max-width: 575px) {
    #uppermenu.open {
        height: 130px;
        width: 100vw;
        float: left;
        position: fixed;
    }
}

.devider {
    height: 1%;
    width: 100%;
    opacity: 0.2;
    transform: scaleY(-1);
    background-image: linear-gradient(270deg, #333333 0%, #333333 97%, rgba(51, 51, 51, 0.00) 100%);
}

@media (max-width: 575px) {
    .devider {
        height: 0;
        width: 100vw;
        opacity: 0.2;
        transform: scaleY(-1);
        background-color: #333;
    }
}

#menuTitle {
    height: 90px;
    width: 10%;
    float: left;
    background-image: url(../../assets/img/magna_logo_dektop@2x.jpg);
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    cursor: pointer;
}

@media (max-width: 575px) {
    #menuTitle {
        height: 70px;
        width: 40%;
        float: left;
        background-image: url(../../assets/img/magna_logo_dektop@2x.jpg);
        background-position: center;
        background-size: 80%;
        background-repeat: no-repeat;
        border-bottom: 0px !important;
        z-index: 99;
        position: relative;
    }
}

#iconrow {
    height: 49%;
}

@media (max-width: 575px) {
    #iconrow {
        height: 100%;
    }
}

.menuLevel1 a {
    display: table-cell;
    height: 100%;
    padding: 13px 25px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 1080px) {
    .menuLevel1 a {
        display: table-cell;
        height: 100%;
        padding: 13px 0.8vw;
        text-align: center;
        font-size: 12px;
        color: #333333;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 992px) {
    .menuLevel1 a {
        display: table-cell;
        height: 100%;
        padding: 13px 0.65vw;
        text-align: center;
        font-size: 12px;
        color: #333333;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 575px) {
    .menuLevel1 a {
        font-size: 21px;
        color: #333333;
        letter-spacing: 0;
        width: 75vw;
        display: block;
        padding-left: 25px;
        margin: 0;
        text-align: left;
        
    }
}

.menuLevel1 {
    background-image: url(../../assets/img/link_active_big.svg);
    background-repeat: no-repeat;
    background-position: center 120%;
    transition: background 0.3s ease-in-out;
    float: left;
}

.menuLevel1.menuActive {
    background-position: center bottom;
}

#menuTitle,
#uppermenu {
    border-bottom: 1px solid #d6d6d6;
}

#mainMenuContainer {
    width: 100vw;
    max-height: calc(100vh - 90px);
    display: flex;
    justify-content: center !important;
    padding-top: 30px;
    transition: all 0.3s ease-in-out;
}

.menuContainer {
    max-width: 90vw;
}

.menuContainer > * {
    margin-right: 50px;
    min-width: 300px;
    max-width: 50vw;
    display: block;
    min-height: 125px;
    background-image: url(../../assets/img/mainmenucontainerline.svg);
    background-size: 3px 125px;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-top: 20px;
    float: left;
    margin-bottom: 20px;
}

@media (max-width: 575px) {
    .menuContainer > * {
        margin-right: 50px;
        min-width: 1px;
        max-width: calc(100vw - 50px);
        display: block;
        min-height: 125px;
        background-image: url(../../assets/img/mainmenucontainerline.svg);
        background-size: 3px 125px;
        background-repeat: no-repeat;
        padding-left: 20px;
        padding-top: 20px;
        float: left;
        margin-bottom: 20px;
    }
}

.menuLevel2 {
    margin-bottom: 40px;
}

.menuLevel2 a {
    display: block;
    font-weight: 800;
    font-size: 25px;
    color: #333333;
    text-decoration: none;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width:576px) {
    .menuLevel2 a {

        white-space: normal;
    }
}

.menuContainer > * > * > a:hover {
    opacity: 1;
    text-decoration: none;
}

.menuContainer > * > * > a:after {
    content: ''url(../../assets/img/arrow.svg);
    margin-left: 20px;
    margin-right: 10px;
    color: transparent;
    transition: all 0.3s ease-in-out;
    display: inline-block !important;
}

.menuContainer > * > * > a:hover:after {
    margin-left: 30px;
    margin-right: 0;
}

.menuLevel3 a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    margin-left: 20px;
    margin-bottom: 20px;
}

.menuLevel4 a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #333333;
    letter-spacing: 0;
    margin-left: 40px;
    margin-bottom: 20px;
}

.menuLevel3 a:after,
.menuLevel4 a:after {
    transform: scale(0.7) translateY(4px);
}


.videosButton .icon,
.videoButton .icon,
.leafletButton .icon,
.presentationButton .icon {
    margin-left: 16px;
    font-size: 30px;
    margin-top: 8px;
}

.button {
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    height: 45px;
    min-width: 45px;
    max-height: 50px;
    display: inline-flex;
    padding: 12.5px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    float: left;
    margin-right: 20px;
}

@media (max-width:576px) {
    .button {
        height: 35px;
        min-width: 35px;
        border: none !important;
    }


    .button .pdf,
    .button .addLeaflet,
    .button .addPresentation {
        width: 22px !important;
        height: 27px !important;
        margin-left: 7px !important;
        margin-top: 4px !important;
    }

    .videoButton .icon {
        margin-left: 12px !important;
        font-size: 27px !important;
        margin-top: 4px !important;
    }

}

.button:hover {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);
    transform: scale(0.9);
}

.documentButton .pdf {
    background-image: url(../../assets/img/pdf.svg);
    width: 32px;
    height: 32px;
    display: inline-block;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 12.5px;
    float: left;
    margin-left: 9px;
    margin-top: 5px;
    margin-right: 0;
}

.leafletButton .addLeaflet {
    background-image: url(../../assets/img/add_leaflet.svg);
    width: 32px;
    height: 32px;
    display: inline-block;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 12.5px;
    float: left;
    margin-left: 9px;
    margin-top: 5px;
    margin-right: 0;
}

.presentationButton .addPresentation {
    background-image: url(../../assets/img/add_mypresentation.svg);
    width: 32px;
    height: 32px;
    display: inline-block;
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 12.5px;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 0;
}

.icons {
    height: 40px;
    width: 40px;
    padding: 0;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 15px;
    padding: 0 10px;
    cursor: pointer;
}

.icons.activ {
    overflow: initial;
}

@media (max-width: 575px) {
    .icons.gone {
        height: 40px;
        width: 16.6667vw !important;
        padding: 0;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0px 0 20px;
        cursor: pointer;
        transform: translateX(-83.3337vw);
    }
}

@media (max-width: 575px) {
    .icons {
        height: 40px;
        width: 16.6667vw !important;
        padding: 0;
        background-position: center;
        background-repeat: no-repeat;
        margin: 0px 0 20px;
        cursor: pointer;
        transition: all 0.3s ease-in-out;
    }
}

#notification {
    background-image: url(../../assets/img/notification.svg);
}

#dashboard {
    background-image: url(../../assets/img/dashboard.svg);
}

#mediacenter {
    background-image: url(../../assets/img/mediacenter.svg);
}

#slidescenter {
    background-image: url(../../assets/img/plantinfobtn.svg);
}

.slidescenterIcon {
    background-image: url(../../assets/img/plantinfobtn.svg);

    height: 40px;
    width: 40px;
    padding: 0;
    background-position: left top;
    background-repeat: no-repeat;
    cursor: pointer;    
}

#links {
    background-image: url(../../assets/img/links.svg);
}

#videocenter {
    background-image: url(../../assets/img/videocenter.svg);
}

#mypresentations {
    background-image: url(../../assets/img/mypresentation.svg);
}

#leaflet {
    background-image: url(../../assets/img/leaflet.svg);
}

#profile {
    background-image: url(../../assets/img/profile.svg);
}

#search {
    background-image: url(../../assets/img/search.svg);
    margin-right: 25px;
}

@media (max-width: 575px) {
    #search {
        background-image: url(../../assets/img/search.svg);
        margin-right: 5px;
        margin-top: 15px;
        width: 40px !important;
    }
}

.float-right {
    float: right;
}

#menuicon {
    height: 20px;
    width: 20px;
    margin-top: 11px;
    margin-left: 25px;
    margin-right: 25px;
    z-index: 99;
}

@media (max-width: 575px) {
    #menuicon {
        height: 20px;
        width: 20px !important;
        margin-top: 26px;
        margin-left: 25px;
        margin-right: 25px;
    }
}

#menuicon span {
    width: 20px;
    height: 2px;
    border-radius: 1px;
    background-color: #333333;
    display: block;
    margin-bottom: 6px;
    transition: all 0.3s ease-in-out;

}

#menuicon.open span:nth-child(1) {
    width: 23px;
    transform: rotate(-45deg);
    transform-origin: top right;
    height: 2px;
    border-radius: 1px;
    background-color: #333333;
    display: block;
    margin-bottom: 6px;
}

#menuicon.open span:nth-child(2) {
    width: 24px;
    transform: scaleX(0);
    transform-origin: center;
    height: 2px;
    border-radius: 1px;
    background-color: #333333;
    display: block;
    margin-bottom: 6px;
}

#menuicon.open span:nth-child(3) {
    width: 23px;
    transform: rotate(45deg);
    transform-origin: bottom right;
    height: 2px;
    border-radius: 1px;
    background-color: #333333;
    display: block;
    margin-bottom: 6px;
}

#iconrow .row {
    width: calc(100% - (40px + 30px));
}

@media (max-width: 575px) {
    #iconrow .row {
        width: 100vw;
        position: absolute;
        top: 70px;
        left: 10px;
        max-height: 40px;
    }
}

.mobile {
    display: none !important;
}

@media (max-width: 575px) {
    .mobile {
        display: block !important;
    }
}

input[type=button],
input[type=submit] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#find {
    background-image: url(../../assets/img/find.svg);
}

@media (max-width: 575px) {
    #find {
        background-image: url(../../assets/img/find.svg);
        order: 1;
    }
}

.desktop {
    display: block;
}

@media (max-width: 575px) {
    .desktop {
        display: none;
    }
}

.row > * {
    padding: 0;
}

#menuarrow {
    background-image: url(../../assets/img/arrow.svg);
    background-size: 12px;
    order: 6;
}

#menuarrow.gone {
    background-image: url(../../assets/img/arrowleft.svg);
    background-size: 12px;
    order: 6;
}

@media (max-width: 575px) {
    .iconInnerRow.open {
        position: absolute;
        top: 70px;
        left: 0;
        display: flex;
        opacity: 1;
        transition: top 0.3s ease-in-out, opacity 0.15s ease-in-out 0.15s;
        pointer-events: initial;
        height: auto;
    }
}

@media (max-width: 575px) {
    .iconInnerRow {
        position: absolute;
        top: 0px;
        left: 0;
        display: flex;
        opacity: 0;
        transition: top 0.3s ease-in-out, opacity 0.15s ease-in-out 0s;
        z-index: 90;
        height: auto !important;
        pointer-events: none;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    #mediacenter {
        order: 2;
    }
}

@media (max-width: 575px) {
    #slidescenter {
        order: 10;
    }
}


@media (max-width: 575px) {
    #links {
        order: 11;
    }
}


@media (max-width: 575px) {
    #videocenter {
        order: 3;
    }
}

@media (max-width: 575px) {
    #mypresentations {
        order: 4;
    }
}

@media (max-width: 575px) {
    #leaflet {
        order: 5;
    }
}

@media (max-width: 575px) {
    #profile {
        order: 7;
    }
}

#dashboard {
    order: 8;
}

@media (max-width: 575px) {
    #notification {
        order: 9;
    }
}

.iconInnerRow.right {
    right: 0;
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

#mainMenuContainer {
    display: none !important;
}

@media (max-width: 575px) {
    #mainMenuContainer.removed {
        left: 100vw !important;
        position: fixed;
        display: block !important;
        top: 130px;
    }
}

body {
    height: 100vh;
}

@media (max-width: 575px) {
    #mainMenuContainer.gone {
        left: 100vw;
        position: fixed;
        display: block !important;
        top: 130px;
    }
}

#templateContainer {
    margin-top: 90px;
    padding-top: 40px;
    height: calc(100vh - 130px);

}

@media (max-width: 576px) {
    #templateContainer {
        padding-top: 60px;
        height: 100vh;
    }

    body {
        margin-top: 0px;
        height: calc(100vh);
    }
}


.pageTitle {
    padding-top: 5vh;
}

@media (min-width: 576px) {
    .pageTitle {
        font-size: 40px;
        color: #2B2B2B;
        letter-spacing: 0;
        margin-bottom: 10px;
        line-height: 1.4;
        margin-left: 20px;
        max-width: calc(100vw - 40px);
    }
}

@media (min-width: 1200px) {
    .pageTitle {
        font-size: 40px;
        color: #2B2B2B;
        letter-spacing: 0;
        margin-bottom: 10px;
        line-height: 1.4;
        margin-left: 60px;
        max-width: calc(100vw - 120px);
    }
}


@media (max-width: 575px) {
    .pageTitle {
        width: 100vw;
        padding: 0 25px;
        font-size: 25px;
        color: #333;
        letter-spacing: 0;
        margin-bottom: 10px;
        font-weight: 600;
        line-height: 1.4;
        max-width: initial;
        margin-left: 0;
    }
}

.lowRow{
    position: fixed !important;
    bottom:-50vh !important;
    transition: bottom 0.3s ease-in-out;
}

.lowRow.here{
    position: fixed !important;
    bottom:5vh !important;
    z-index: 100;
}

.pageSubtitle {
    margin-left: 60px;
    font-size: 30px;
    color: #333;
    letter-spacing: 0;
    margin-bottom: 20px;
    line-height: 1.3;
    max-width: calc(100vw - 120px);
}

@media (max-width: 1200px) {
    .pageSubtitle {
        margin-left: 20px;
        font-size: 25px;
        color: #333;
        letter-spacing: 0;
        margin-bottom: 20px;
        line-height: 1.3;
    }
}

@media (max-width: 575px) {
    .pageSubtitle {
        padding: 0 25px;
        font-size: 18px;
        color: #333;
        letter-spacing: 0;
        margin-bottom: 20px;
        line-height: 1.3;
    }
}

.pageBackgroundImage {
    width: 100vw;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
    max-height: calc(100vw * 0.56);
    margin-bottom: 5vh;
}

@media (max-width: 575px) {
    .pageBackgroundImage {
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        
    }
    
    .funktionWindow .template, .funktionWindow .downloadSection {
        width: calc(100vw - 40px) !important;
        
    }
}

.pageText {
    width: 100%;
    padding: 0;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    .pageText {
        width: 100vw;
        padding: 0 25px;
        font-size: 15px;
        line-height: 1.3;
        color: #333;
        letter-spacing: 0;
    }
}




.pageImagesContainer {
    margin-bottom: 30px;
    height: 30vh;
    width: 100vw;
    position: relative;
    overflow: hidden;
}

.pageImagesContainer img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}



@media (min-width: 768px) {
    .pageImagesContainer {
        max-height: 45vh;
        height: 45vh;
        width: calc(50vw - 20px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        position: relative;
    }
}
}

@media (min-width: 1200px) {
    .pageImagesContainer {
        max-height: 40vh;
        height: 40vh;
        width: calc(50vw - 90px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        position: relative;
    }
}

.pageImagesContainer img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: none;
    max-width: none;
    min-height: 100%;
    min-width: 100%;
    margin: auto;
    position: absolute;
}



#overlay-content img {
    max-width: 100vw;
    max-height: 100vh;
}

#profile.gone {
    transform: translateX(-83vw) !important;
}

#notification.gone {
    transform: translateX(-83vw) !important;
}

#dashboard.gone {
    transform: translateX(-83vw) !important;
}

.icons.activ:after {
    bottom: -29px;
}

#menuarrow.gone {
    background-image: url(../../assets/img/arrowleft.svg);
}

.icons:after {
    position: relative;
    background-size: auto 40px;
    width: 40px;
    content: url(../../assets/img/link_activ_short.svg);
    bottom: -34px;
    left: -15px;
    transition: all 0.3s ease-in-out;
}


.ion-ios-circle-outline {
    color: #333;
}

.ion-ios-circle-filled {
    color: #333;
}

.hotspot {
    position: absolute;
    padding: 0px 5px;
    min-width: 100px;
    cursor: pointer;
    color: #da291c;
}

.hotspot div {
    min-width: 80px;
    padding: 3px 5px;
    float: right;
    background: rgba(255, 255, 255, 1.0);
}

.hotspot i {
    color: #da291c;
    padding-top: 0px;
    margin-right: 12px;
    font-size: 25px;
}

.template {
    padding-bottom: calc(15vh + 70px);
    clear: both;
}



.clear {
    clear: both;
}

@media (max-width: 575px) {
    .icons.activ:after {
        bottom: -45px;
        left: 2vw;
    }
}

@media (max-width: 575px) {
    .icons:after {
        bottom: -55px;
        left: 2vw;
    }
}

.iconInnerRow {
    overflow: hidden;
    height: 100%;
}

#search:after,
#menuicon:after {
    content: "";
}

#mainMenuContainer.open {
    display: block !important;
    position: fixed;
    top: 130px;
    padding-top: 10vh;
    left: 0;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    height: calc(100vh);
    padding-left: 25px;
    /*transition: all 0.3s ease-in-out;*/
    padding-bottom: 10vh;
    z-index: 9800;
}

@media (min-width: 576px) {
    #mainMenuContainer.open {
        display: block !important;
        position: fixed;
        top: 90px;
        padding-top: 10vh;
        left: 0;
        background-color: rgba(255, 255, 255, 1);

        overflow-y: scroll;
        height: calc(100vh);
        padding-left: 25px;
        /*transition: all 0.3s ease-in-out;*/
        padding-bottom: 10vh;
    }
}

@media (max-width: 575px) {
    .menuLevel1 {
        background-image: none;
        width: 100vw;
        margin-bottom: 20px;
        
    }
}

@media (max-width: 575px) {
    .menuLevel1:after {
        content: url(../../assets/img/arrow.svg);
        transform: scale(0.5);
        position: absolute;
        display: block;
        right: 25px;
        margin-top: -30px;
        font-size: 20px;
    }
}

#menu.open {
    height: 100vh;
}

#menuback {
    background-color: white;
    padding-right: 82px;
    padding-left: 10px;
    height: 40px;
    width: 40px;
    position: fixed;
    top: 145px;
    left: 110vw;
    background-image: url(../../assets/img/arrowleft.svg);
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 12px;
    z-index: 9999;
    transition: 0.3s all ease-in-out;
    border-radius: 20px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
}



#menuback.here {
    left: 30px;
}

#menuback.removed {
    left: 110vw !important;
}

@media (min-width: 576px) {
    #menuback {
        display: none;
    }
}

#menuback:after {
    content: 'Back';
    position: absolute;
    left: 37px;
    top: 10px;
    font-weight: 600;
}


@media (min-width: 768px) {
    .pageTextContainer {
        width: calc(50vw - 50px);
        margin-left: 20px;
        order: 1;
        float: left;
    }
}

@media (min-width: 1200px) {
    .pageTextContainer {
        width: calc(50vw - 150px);
        margin-left: 60px;
        order: 1;
        float: left;
    }
}

@media (max-width: 767px) {
    .pageTextContainer {
        width: 100vw;
        margin-left: 0px;
    }
}

#template2,
#template3 {}

video {
    width: 100vw !important;
    max-height: 100% !important;
    position: relative;
    max-width: 100vw;
}

#hotspotContainer {
    width: 100vw !important;
    position: relative;
}

#hotspotContainer img {
    max-width: 100vw;
    min-width: 100vw;
}

.pageImageOuter {
    max-height: 30vh;

}

@media (max-width: 576px) {
    .pageImageOuter {
        margin-bottom: 10vh;

    }
}


@media (min-width: 768px) {
    .pageImageOuter {
        max-height: 45vh;
        height: 45vh;
        width: calc(50vw - 20px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        margin-right: 20px;
        position: relative;
        position: sticky;
        top: 120px;
    }
}

@media (min-width: 1200px) {
    .pageImageOuter {
        max-height: 45vh;
        height: 45vh;
        width: calc(50vw - 150px);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        float: right;
        margin-right: 60px;
        position: relative;
        position: sticky;
        top: 120px;
    }
}


.pageImagesSelectors {
    display: table;
    margin: 2vh auto;
    margin-bottom: 5vh;
}

.pageImagesSelectors a {
    margin: 0 5px;
}

template2,
#template3 {}

#navFunktionen {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    pointer-events: auto;
}

.funktionWindow.here {
    transition: all 1s ease-in-out, padding 0s;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.funktionWindow {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.10);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    border-radius: 15px;
    position: fixed;
    top: 45px;
    z-index: 9999;
    transition: all 0.2s ease-in-out, padding 0.2s;
    transform-origin: top center;
    overflow: hidden;
}

@media (max-width: 575px) {
    .funktionWindow {
        background: rgba(255, 255, 255, 1);
        box-shadow: none;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        border-radius: 15px;
        position: fixed;
        top: 130px !important;
        left: 0 !important; 
        z-index: 9999 !important;
        width: 100vw !important;
        transition: all 0.2s ease-in-out, padding 0.2s;
        transform-origin: top center;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    .funktionWindow.here {
        top: 130px !important;
        padding-top: 50px !important;
        overflow: scroll;
        height: calc(100vh - 130px) !important;
    }
}

#searchWindow {
    top: 70px !important;
}

#searchWindow.here {
    top: 70px !important;

}

#notificationWindow {
    width: 420px;
    position: absolute;
    left: calc(10vw - 10px);
    z-index: 9999;
    max-height: 0;
}

#notificationWindow.here {
    width: 420px;
    position: absolute;
    left: calc(10vw - 10px);
    z-index: 9999;
    max-height: 50vh;
}

@media (max-width: 575px) {
    #notificationWindow.here {
        width: 420px;
        position: absolute;
        left: calc(10vw - 10px);
        z-index: 9999;
        max-height: 50vh;
        height: calc(100vh - 130px);
        max-height: 100vh;
    }
}

@media (max-width: 575px) {
    #notificationWindow span:first-child {
        width: 420px;
        border-bottom: 1px #333 solid;
        border-top: 1px #333 solid;
        padding: 20px 30px;
        display: table;
        margin-top: 60px;
    }
}

#notificationWindow span {
    width: 420px;
    border-bottom: 1px #333 solid;
    padding: 20px 30px;
    display: table;
    margin-top: 0px;
}

#notificationWindow span:last-child {
    border-bottom: 0px #333 solid;
}

@media (max-width: 575px) {
    #notificationWindow span:last-child {
        border-bottom: 1px #333 solid;
    }
}

#dashboardWindow {
    width: 600px;
    left: calc(10vw + 61px);
    max-height: 0;
}

#dashboardWindow.here {
    width: 600px;
    left: calc(10vw + 61px);
    max-height: 100vh;
}

@media (max-width: 575px) {
    #dashboardWindow.here {
        width: 600px;
        left: calc(10vw + 61px);
        max-height: 100vh;
        overflow-y: scroll;
        height: calc(100vh - 130px);
    }
}

.dashboardContent {
    width: 165px;
    height: 100%;
    border-right: #333 solid 1px;
    float: left;
}

@media (max-width: 575px) {
    .dashboardContent {
        width: 100vw;
        height: initial;
        border-right: 0;
        border-bottom: 1px #333 solid;
        padding-bottom: 0;
        float: left;
        padding-top: 20px;
    }
}

.dashboardContentInner {
    min-height: 170px;
    padding: 20px 30px 0;
}

@media (max-width: 575px) {
    .dashboardContentInner {
        width: 50%;
        float: left;
        min-height: 170px;
        padding-top: 20px;
        padding: 0;
    }
}

.dashboardContentInner span {
    border: 8px solid #C1432E;
    height: 88px;
    width: 88px;
    border-radius: 50%;
    margin: 0 auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

@media (max-width: 575px) {
    .dashboardContentInner span {
        margin: 0 auto;
        position: relative;
        left: calc(25vw - 52.5px);
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
}

.dashboardContentInner p {
    text-align: center;
    margin-top: 10px;
    font-size: 15px;
    color: #C1432E;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 700;
}

.leafletHistory {
    float: left;
    width: auto;
    padding: 30px 0 0 30px;
}

#mediaCenter {
    top: 90px;
    width: 100vw;
    max-height: 0;
    left: 0;
    box-shadow: none;
}

#mediaCenter.here {
    top: 90px;
    width: 100vw;
    max-height: calc(100vh - 90px);
    box-shadow: none;
}

#slidesCenter {
    top: 90px;
    width: 100vw;
    max-height: 0;
    left: 0;
    box-shadow: none;
}

#slidesCenter.here {
    top: 90px;
    width: 100vw;
    max-height: calc(100vh - 90px);
    box-shadow: none;
}


#LinksCenter {
    top: 90px;
    width: 100vw;
    max-height: 0;
    left: 0;
    box-shadow: none;
}

#LinksCenter.here {
    top: 90px;
    width: 100vw;
    max-height: calc(100vh - 90px);
    box-shadow: none;
}

#myPresentationsWindow {
    padding: 0 50px;
    left: 0;
    max-height: 0;
    top: 90;
    width: 100vw;
}

@media (max-width: 575px) {
    #myPresentationsWindow {
        padding: 0 20px;
    }
}

#myPresentationsWindow.here {
    top: 90px;
    width: 100vw;
    height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
    box-shadow: none;
    padding: 70px 50px 0; 
}

@media (max-width: 575px) {
    #myPresentationsWindow.here {
        padding: 70px 20px 0;
            max-height: calc(100vh - 90px);
    }
}

#videoCenter {
    top: 90px;
    left: 0;
    width: 100vw;
    max-height: 0;
    box-shadow: none;
}

#videoCenter.here {
    top: 90px;
    left: 0;
    width: 100vw;
    max-height: calc(100vh - 90px);
    box-shadow: none;
}

.articles {
    float: left;
    width: 300px;
    height: calc(100vh - 90px);
    border-right: 1px #333 solid;
    padding: 70px 20px 0;
    overflow-y: scroll;
}

@media (max-width: 1024px) {
    .articles {
        position: relative;
        float: left;
        width: 300px;
        height: calc(100vh - 90px);
        border-right: 1px #333 solid;
        padding: 70px 20px 0;
        overflow-y: scroll;
        left: -300px;
        transition: left 0.3s ease-in-out;
    }
}

@media (max-width: 1024px) {
    .opened .articles {
        position: relative;
        float: left;
        width: 300px;
        height: calc(100vh - 90px);
        border-right: 1px #333 solid;
        padding: 70px 20px 120px;
        overflow-y: scroll;
        overflow-x: hidden;
        left: 0px;
        transition: left 0.3s ease-in-out;
    }
}

@media (max-width: 1024px) {
    .articles.here {
        position: relative;
        left: 0;
    }
}

.articles a {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
    word-break: break-all;
}

#mediaCenterContent {
    float: left;
    padding: 50px;
    width: calc(100vw - 300px);
    height: calc(100vh - 90px);
    overflow: scroll;
}

@media (max-width: 1024px) {
    #mediaCenterContent.here {
        position: initial;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
    }
}

@media (max-width: 1024px) {
    #mediaCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 1024px) {
    .opened #mediaCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
        margin-left: 300px;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }
}

#LinksCenterContent {
    float: left;
    padding: 50px;
    width: 100vw;
    height: calc(100vh - 90px);
}

@media (max-width: 1024px) {
    #LinksCenterContent.here {
        position: initial;
        float: left;
        padding: 20px;
        width: 100vw;
        height: calc(100vh - 90px);
    }
}



@media (max-width: 1024px) {
    #LinksCenterContent {
        position: absolute;
        float: left;
        padding: 20px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 1024px) {
    .opened #LinksCenterContent {
        position: absolute;
        float: left;
        padding: 20px;
        width: 100vw;
        height: calc(100vh - 90px);
        margin-left: 300px;
        transition: all 0.3s ease-in-out;
    }
}

#LinksCenterContent a {
    min-width: 20vw;
    width: 20%;
    margin-right: 5%;
    float: left;
    padding: 20px 20px 20px 50px;
    display: block;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    transition: background 0.3s ease-in-out;
    margin-bottom: 20px;
}

@media (max-width:576px) {
    #LinksCenterContent a {
        min-width: 20vw;
        width: calc(100vw - 110px);
        margin-right: 0;
        float: none;
    }

}

#LinksCenterContent a::before {
    content: url(../img/links.svg);
    position: absolute;
    margin-left: -32px;
}

#LinksCenterContent a:hover {
    background-color: #efefef;
}

#slidesCenterContent {
    float: left;
    padding: 50px;
    width: calc(100vw - 300px);
    height: calc(100vh - 90px);
    overflow: scroll;
}

@media (max-width: 1024px) {
    #slidesCenterContent.here {
        position: initial;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
    }
}

@media (max-width: 1024px) {
    #slidesCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 1024px) {
    .opened #slidesCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
        margin-left: 300px;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }
}


@media (max-width: 1024px) {
    .opened #videoCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
        margin-left: 300px;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
    }
}

@media (max-width: 575px) {
    #mediaCenterContent {
        position: absolute;
        float: left;
        padding: 20px;
        width: 100vw;
        overflow: initial;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 575px) {
    #slidesCenterContent {
        position: absolute;
        float: left;
        padding: 20px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

#videoCenterContent {
    float: left;
    padding: 50px;
    width: calc(100vw - 300px);
    height: calc(100vh - 90px);
    overflow: scroll;
}

@media (max-width: 1024px) {
    #videoCenterContent {
        position: absolute;
        float: left;
        padding: 50px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
    }
}

@media (max-width: 575px) {
    #videoCenterContent {
        position: absolute;
        float: left;
        padding: 20px;
        width: 100vw;
        height: calc(100vh - 90px);
        transition: all 0.3s ease-in-out;
        overflow: initial;
    }
}

@media (max-width: 1024px) {
    #videoCenterContent.here {
        position: initial;
        float: left;
        padding: 50px;
        width: calc(100vw - 300px);
        height: calc(100vh - 90px);
    }
}

#mediaCenterContent h1 {
    font-size: 40px;
    line-height: initial;
    margin-bottom: 20px;
}


#slidesCenterContent h1 {
    font-size: 40px;
    line-height: initial;
    margin-bottom: 20px;
}

#LinksCenterContent h3 {
    font-size: 40px;
    line-height: initial;
    margin-bottom: 20px;
}

#myPresentationsWindow h1 {
    font-size: 40px;
    line-height: initial;
    margin-bottom: 20px;
    float: left;
}

#videoCenterContent h1 {
    font-size: 40px;
    line-height: initial;
    margin-bottom: 20px;
}

.downloadables, .downloadablesv {
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    display: block;
    width: initial;
    word-break: break-all;
    max-width: 60vw;
    max-height: 160px;
    font-size: 16px;
    padding: 30px 20px 30px 80px;
    background-image: url(../../assets/img/pdf.svg);
    background-repeat: no-repeat;
    background-position: 26px center;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

.downloadablesv {
    background-image: url(../../assets/img/videocenter.svg);
}

@media (max-width: 1024px) {
    .downloadables, .downloadablesv {
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        display: block;
        width: calc(50% - 20px - 100px);
        font-size: 16px;
        max-height: initial;
        padding: 30px 20px 30px 80px;
        background-image: url(../../assets/img/pdf.svg);
        background-repeat: no-repeat;
        background-position: 26px center;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .downloadablesv {
        background-image: url(../../assets/img/videocenter.svg);
    }    
}

@media (max-width: 575px) {
    .downloadables, .downloadablesv {
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        display: block;
        width: calc(100% - 100px);
        max-height: 160px;
        font-size: 16px;
        padding: 30px 20px 30px 80px;
        background-image: url(../../assets/img/pdf.svg);
        background-repeat: no-repeat;
        background-position: 26px center;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .downloadablesv {
        background-image: url(../../assets/img/videocenter.svg);
    }

}

@media (max-width: 834px) {
    #mediaCenterContent.here .downloadables,  #mediaCenterContent.here .downloadablesv {
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        display: block;
        width: calc(100% - 20px);
        height: 80px;
        font-size: 16px;
        padding: 30px 20px 30px 80px;
        background-image: url(../../assets/img/pdf.svg);
        background-repeat: no-repeat;
        background-position: 26px center;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }

    .downloadablesv {
        background-image: url(../../assets/img/videocenter.svg);
    }

}

.downloadSection {
    clear: both;
    padding-top: 5vh;
    height: initial;
}

.videoSection {
    clear: both;
    padding-top: 5vh;
    height: initial;
}

.downloadSection:first-child {
    clear: both;
    padding-top: 0vh;
    height: initial;
}

.videoSection:first-child {
    clear: both;
    padding-top: 0vh;
    height: initial;
}

.siteThumbnail {
    width: calc(25% - 20px);
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
}

@media (max-width: 1200px) {
    .siteThumbnail {
        width: calc(33% - 20px);
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .siteThumbnail {
        width: 100%;
        float: left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
}

.videoThumbnail {
    width: calc(33% - 50px);
    float: left;
    margin-right: 50px;
    margin-bottom: 50px;
    overflow: hidden;
}

@media (max-width: 1025px) {
    .videoThumbnail {
        width: calc(50% - 50px);
        float: left;
        margin-right: 50px;
        margin-bottom: 50px;
    }
}

@media (max-width: 575px) {
    .videoThumbnail {
        width: calc(100vw - 40px);
        float: left;
        margin-right: 50px;
        margin-bottom: 50px;
    }
    
    .funktionWindow .articles{
        margin-top: -50px;
    }
    
}



.siteThumbnail img {
    min-width: 100%;
    min-height: calc(((100vw - 200px) * 0.25 - 20px) * 0.56);
    display: block;
    margin-bottom: 20px;
}

@media (max-width: 575px) {
    .siteThumbnail img {
        min-width: 100%;
        min-height: calc(90vw * 0.56);
        display: block;
        margin-bottom: 20px;
    }
}

.videoThumbnail img {
    min-width: 100%;
    min-height: calc(((100vw - 400px) * 0.3333 - 50px) * 0.56);
    display: block;
    margin-bottom: 20px;
}

@media (max-width: 1024px) {
    .videoThumbnail img {
        min-width: 100%;
        min-height: calc((50vw - 50px) * 0.56);
        display: block;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .videoThumbnail img {
        min-width: 100%;
        min-height: calc(100vw * 0.56);
        display: block;
        margin-bottom: 20px;
    }
}

.addButton {
    float: right;
    max-height: 50px;
    font-size: 16px;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 14px 25px;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .addButton {
        float: left;
        max-height: 50px;
        font-size: 16px;
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        margin: 0;
        padding: 14px 0;
        white-space: nowrap;
        width: 90vw;
        text-align: center;
        margin-left: 5vw;
    }
}

.editButton {
    float: right;
    max-height: 50px;
    font-size: 16px;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 14px 25px;
    white-space: nowrap;
    margin-left: 20px;
}

@media (max-width: 575px) {
    .editButton {
        float: left;
        max-height: 50px;
        font-size: 16px;
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        padding: 14px 25px;
        white-space: nowrap;
        margin-left: 20px;
        width: calc(50vw - 50px - 10px - 5vw);
        text-align: center;
    }
}

.deleteButton {
    float: right;
    max-height: 50px;
    height: calc(50px - 24px);
    font-size: 16px;
    background: #D03A27;
    color: white;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    padding: 12px 25px;
    white-space: nowrap;
    margin-left: 20px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.deleteButton:hover,
.forwardButton:hover {
    filter: saturate(0.5) brightness(0.7);
}

@media (max-width: 575px) {
    .deleteButton {
        float: left;
        max-height: 50px;
        font-size: 16px;
        background: #D03A27;
        color: white;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        padding: 12px 25px;
        white-space: nowrap;
        margin-left: 0;
        margin-bottom: 20px;
        line-height: 1;
        width: calc(42.5vw - 50px);
        margin-left: 5vw;
        text-align: center;
    }
}

.deleteButton i {
    display: block;
    margin-bottom: -20px;
    margin-right: 20px;
    font-size: 23px;
}

#presentationContent {
    width: 100%;
    margin-top: 30px;
    clear: both;
    height: inherit;
    display: block;
}

#presentationHeading {
    clear: both;
    display: block;
    height: 50px;
}

.clear {
    clear: both;
}

#presentationContent img {
    height: 110px;
    width: 110px;
    margin: 20px;
    float: left;
}

.presentations {
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    display: block;
    width: calc(25% - 20px);
    padding-right: 30px;
    margin-right: 20px;
    float: left;
    margin-bottom: 20px;
    position: relative;
    padding: 20px;
}

@media (max-width: 1200px) {
    .presentations {
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        display: block;
        width: calc(33% - 20px);
        padding-right: 30px;
        margin-right: 20px;
        float: left;
        margin-bottom: 20px;
    }
}

@media (max-width: 575px) {
    .presentations {
        background: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        display: block;
        width: 100%;
        padding-right: 30px;
        margin-right: 20px;
        float: left;
        margin-bottom: 20px;
    }
}

.presentations h2 {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}


.presentations .innerButtonRow {
    position: initial;
}

#searchWindow.here {
    right: 10px;
    padding: 20px;
    width: 420px;
    max-height: 100vh;
}

#searchWindow {
    right: 10px;
    padding: 0 20px;
    width: 420px;
    overflow: hidden;
    max-height: 0vh;
}

#profileWindow.here {
    right: 80px;
    padding: 20px 20px 0;
    max-width: 420px;
    max-height: 100vh;
}

@media (max-width: 575px) {
    #profileWindow.here {
        right: 80px;
        padding: 20px;
        max-width: 420px;
        height: calc(100vh - 120px);
        max-height: 100vh;
    }
}

#profileWindow {
    right: 80px;
    max-width: 420px;
    max-height: 0;
    padding: 0 20px;
}

#searchWindow:before {
    right: 5vw;
    right: 25px;
    left: initial;
}

.emailInput {
    width: 200px;
    margin: 0 0 20px;
    border-radius: 12px;
    height: 40px;
    text-align: center;
    padding: 0;
    font-size: 12px;
}

.login {
    width: 200px;
    padding-bottom: 20px;
}

@media (max-width: 575px) {
    .login {
        width: calc(100vw - 40px);
        padding-bottom: 20px;
    }

    .login > *,
    .passwortInput {
        width: 100% !important;
        max-width: 100% !important;
    }
}

.passwortInput {
    max-width: 200px;
    display: block;
    margin: 0 0 20px;
    border-radius: 12px;
    height: 40px;
    text-align: center;
    padding: 0;
}

.loginButton:active {
    background: #D03A27 !important;
    opacity: 0.9;
    box-shadow: none;
    border: none;
}

.loginButton:focus {
    background: #D03A27;
    opacity: 0.5;
    box-shadow: none;
    border: none;
}

.loginButton:hover {
    background: #D03A27;
    opacity: 0.7;
    box-shadow: none;
}

.loginButton {
    height: 40px;
    font-size: 16px;
    background: #D03A27;
    color: white;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    white-space: nowrap;
    line-height: 1;
    min-width: 200px;
    display: block;
    border: none;
}

#versionNumber {
    opacity: 0.5;
    font-size: 10px;
    color: #333333;
    letter-spacing: 0;
    text-align: right;
    float: right;
    margin-bottom: 10px;
}

.logedIn .profile {
    display: block;
}

.name {
    font-size: 18px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0;
    margin-top: 10px;
    display: block;
    line-height: 1;
}

.buttonRow {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 20px;
    margin-bottom: -20px;
}

.buttonRow {
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 02vh;
    margin-bottom: -20px;
    height: 65px;
}

@media (max-width: 575px) {
    .buttonRow {
        width: 100vw;
        margin-left: -20px;
        margin-right: -20px;
        margin-top: 5vh;
        margin-bottom: 0;
        height: 65px;
    }
}

.refreshButton {
    width: calc(16.666% - 1px);
    border-top: 1px solid;
    border-left: 1px solid;
    display: block;
    float: left;
    height: 100%;
    background-image: url(../../assets/img/refresh.svg);
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 575px) {
    .refreshButton {
        width: 50px;
        border-top: 0;
        border-left: 0;
        display: block;
        float: initial;
        height: 50px;
        margin-left: 20px;
        margin-top: 20px;
        background-image: url(../../assets/img/refresh.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-color: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
    }
}

.alertButton {
    width: calc(16.666% - 1px);
    border-top: 1px solid;
    display: block;
    display: block;
    float: left;
    height: 100%;
    background-image: url(../../assets/img/alert.svg);
    background-position: center 48%;
    background-repeat: no-repeat;
    border-radius: 0 0 0 15px;
}


.logedOut .alertButton,
.logedOut .refreshButton,
.logedOut .languageButton {
    width: 33%;
}



@media (max-width: 575px) {

    .logedOut .alertButton,
    .logedOut .refreshButton,
    .logedOut .languageButton {
        width: 50px;
    }

    .refreshButton:after {
        content: 'Update';
        position: absolute;
        left: 90px;
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .languageButton:after {
        content: 'Language';
        position: absolute;
        left: 90px;
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .lockButton:after {
        content: 'Change Password';
        position: absolute;
        left: 90px;
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .alertButton:after {
        content: 'Failed Files';
        position: absolute;
        left: 90px;
        margin-top: 15px;
    }
}

@media (max-width: 575px) {
    .alertButton {
        width: 50px;
        border-top: 0;
        display: block;
        float: initial;
        height: 50px;
        margin-left: 20px;
        background-image: url(../../assets/img/alert.svg);
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0 0 0 15px;
        background-color: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
    }
}

.lockButton {
    width: calc(16.666% - 1px);
    border-top: 1px solid;
    display: block;
    float: left;
    height: 100%;
    border-left: 1px solid;
    background-image: url(../../assets/img/lock.svg);
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 575px) {
    .lockButton {
        background-image: url(../../assets/img/lock.svg);
        background-position: center;
        background-repeat: no-repeat;
        border-top: 0;
        display: block;
        float: initial;
        height: 50px;
        border: 0;
        width: 50px;
        margin-top: 20px;
        margin-left: 20px;
        border-radius: 0 0 0 15px;
        background-color: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
    }
}

.languageButton {
    height: 100%;
    border-top: 1px solid;
    width: calc(16.666% - 1px);
    border-left: 1px solid;
    display: block;
    float: left;
    background-image: url(../../assets/img/globe.svg);
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 575px) {
    .languageButton {
        background-image: url(../../assets/img/globe.svg);
        background-position: center;
        background-repeat: no-repeat;
        border-top: 0;
        display: block;
        float: initial;
        height: 50px;
        border: 0;
        width: 50px;
        margin-left: 20px;
        margin-top: 20px;
        border-radius: 0 0 0 15px;
        background-color: #FFFFFF;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
    }
}

.logoutButton {
    width: calc(16.66% * 2 + 1px);
    float: left;
    max-height: 43px;
    height: 100%;
    background: #D03A27;
    border-radius: 0 0 15px 0;
    text-transform: uppercase;
    font-weight: 700;
    color: white;
    padding-top: 23px;
    font-size: 16px;
    text-align: center;
    transition: color 0.3s ease-in-out;
}

@media (max-width: 575px) {
    .logoutButton {
        width: 100vw;
        float: left;
        height: 100%;
        background: #D03A27;
        border-radius: 0;
        text-transform: uppercase;
        font-weight: 700;
        color: white;
        padding-top: 23px;
        font-size: 16px;
        text-align: center;
        margin-top: 5vh;
        transition: color 0.3s ease-in-out;
    }
}

#profileWindow.logedIn {
    width: 420px;
}

.logedIn .login {
    display: none;
}

.profile {
    display: none;
}

.buttonRow span:hover {
    background-color: rgba(193, 67, 46, 0.50);
}

.buttonRow span span:hover {
    background-color: rgba(193, 67, 46, 0.00);
}

.buttonRow span {
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.logoutButton:hover {
    background-color: darkred !important;
}

.searchInput {
    width: 100%;
    height: 40px;
    padding-top: 0 !important;
    background: rgba(0, 0, 0, 0.80);
    border-radius: 35px;
    border: none;
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 18px;
    background-image: url(../../assets/img/search_white.svg);
    background-repeat: no-repeat;
    background-position: 5% center;
    margin-bottom: 20px;
}

.searchInput:focus {
    background: rgba(100, 100, 100, 0.80);
    color: #ddd;
    background-image: url(../../assets/img/search_white.svg);
    background-repeat: no-repeat;
    background-position: 5% center;
}

.searchInput:active {
    background: rgba(100, 100, 100, 0.80);
    color: #ddd;
    background-image: url(../../assets/img/search_white.svg);
    background-repeat: no-repeat;
    background-position: 5% center;
}

.searchInput:focus::placeholder {
    color: #ddd;

}

.searchInput::placeholder {
    color: white;
    text-transform: uppercase;
}

.searchInput::-webkit-search-cancel-button {
    position: relative;
    right: 10px;

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-image: url(../img/cancle.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.searchSwitch {
    width: 100%;
    height: 40px;
    border: #333 solid 1px;
    border-radius: 20px;
    overflow: hidden;
}

.searchSwitch span {
    width: 50%;
    height: 100%;
    display: block;
    text-align: center;
    color: #333;
    padding-top: 9px;
    float: left;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.searchSwitch span.active {
    background-color: #333;
    border: none !important;
    color: white;
}

.searchResultContainer {
    margin-top: 30px;
    border-top: 2px solid;
    max-height: 70vh;
    overflow: scroll;
}

.searchResult {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid;
    padding-left: 20px;
    padding-right: 20px;
    background-image: url(../../assets/img/arrow.svg);
    background-repeat: no-repeat;
    background-position: 95% center;
    position: relative;
    height: 120px;
}

.searchResult img {
    max-height: 80px;
    max-width: 110px;
    display: block;
    position: absolute;
}

.resultTitle {
    position: absolute;
    top: 30px;
    left: 140px;
    font-size: 20px;
    color: #333333;
    letter-spacing: 0;
    max-width: 55%;
    overflow: hidden;
    white-space: nowrap;
}

.resultText {
    position: absolute;
    top: 55px;
    left: 140px;
    max-width: 50%;
    display: block;
}

.searchResultContainerOuter {
    overflow: hidden;
    margin-left: -20px;
    margin-right: -20px;
    margin-bottom: -20px;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .here #myPresentationButtonRow {
        position: fixed;
        width: 100vw;
        bottom: 5vh;
        left: initial;
        margin: 0;
        right: 5vh;
        z-index: 100;
    }
}

@media (max-width: 575px) {
    .here #myPresentationButtonRow {
        position: fixed;
        width: 100vw;
        bottom: 5vh;
        left: 0;
        margin: 0;
        z-index: 100;
        right: 0;
    }
}

#myPresentationButtonRow {
    width: initial;
    float: right;
    right: 20px;
}

@media (max-width: 300px) {
    #myPresentationButtonRow {
        width: initial;
        float: right;
    }
}

#leafletWindow {
    max-height: 0;
    left: 0;
    top: 90px;
    padding: 0 20px;
}

@media (max-width: 575px) {
    #leafletWindow {
        padding: 0 20px;
    }
}

#leafletWindow.here {
    top: 90px;
    width: 100vw;
    height: calc(100vh - 90px);
    max-height: calc(100vh - 90px);
    box-shadow: none;
    padding: 70px 50px 0;
}

@media (max-width: 575px) {
    #leafletWindow.here {
         max-height: calc(100vh - 130px);
        height: calc(100vh - 130px);
        padding:70px 20px 0;
    }
}


#leafletContainer{
    width: 100%;
    margin-top: 30px;
    clear: both;
    height: inherit;
    display: inline-table;
    padding-bottom: 50vh;
}




#myPresentationsWindowEdit {
    top: 90px;
    left: 0;
    max-height: 0;
    box-shadow: none;
    padding: 0 50px;
    width: 100vw;
    overflow: hidden;
}

@media (max-width: 575px) {
    #myPresentationsWindowEdit {
        top: 90px;
        left: 0;
        max-height: 0;
        box-shadow: none;
        padding: 0 20px;
        width: 100vw;
        overflow: hidden;
    }
}

#myPresentationsWindowEdit.here {
    top: 90px;
    width: 100vw;
    max-height: calc(100vh - 90px);
    box-shadow: none;
    padding: 50px;
    overflow-y: scroll;
    height: calc(100vh - 90px);
}

@media (max-width: 575px) {
    #myPresentationsWindowEdit.here {
        top: 90px;
        width: 100vw;
        max-height: calc(100vh - 130px);
        height: calc(100vh - 130px);
        padding: 20px;
        padding-bottom: 25vh;
    }
}






.leafletContainer {
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    width: calc(33% - 20px);
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    float: left;
    padding: 20px;
    position: relative;
    transition: 0s;
}

@media (min-width: 1600px) {
    .leafletContainer {
        width: calc(25% - 20px);
    }
}

.leafletContainer img {
    min-width: 110px;
    min-height: 110px;
    object-fit: cover;
}

@media (max-width: 575px) {
    .leafletContainer img {
        min-width: 60px;
        min-height: 60px;
    }
}

@media (max-width: 1200px) {
    .leafletContainer {
        width: calc(50% - 20px);
    }
}

@media (max-width: 575px) {
    .leafletContainer {
        width: 100%;
        margin-right: 0;
        height: 110px;
        margin-left: 0;
        margin-bottom: 20px;
        margin-top: 0 !important;
    }
}

.imageContainer {
    height: 110px;
    width: 110px;
    overflow: hidden;
    float: left;
}

@media (max-width: 575px) {
    .imageContainer {
        height: 60px;
        width: 60px;
        overflow: hidden;
        float: left;
    }
}

.categoryContainer {
    margin-left: 20px;
    float: left;
    font-size: 16px;
    line-height: 24px;
    color: #C1432E;
    letter-spacing: 0;
    display: block;
    width: calc(100% - 150px);
    height: 24px;
    overflow: hidden;
}

@media (max-width: 575px) {
    .categoryContainer {
        margin-left: 20px;
        float: left;
        font-size: 10px;
        color: #C1432E;
        letter-spacing: 0;
        display: block;
        line-height: 12px;
        height: 12px;
        width: calc(100% - 130px);
    }
}

.leafletTitleContainer {
    float: left;
    margin-top: 10px;
    margin-left: 20px;
    font-size: 20px;
    color: #2B2B2B;
    letter-spacing: 0;
    width: calc(100% - 130px);
    line-height: 25px;
    min-height: 25px;
    max-height: 49px;
    overflow: hidden;
}

@media (max-width: 575px) {
    .leafletTitleContainer {
        float: left;
        margin-top: 7px;
        margin-left: 20px;
        font-size: 12px;
        color: #2B2B2B;
        letter-spacing: 0;
        width: calc(100% - 130px);
        line-height: 14px;
        height: 28px;
        font-weight: 600;
        overflow: hidden;
    }
}

.leafletCommentContainer,
.leafletEditCommentContainer {
    width: calc(100% - 130px);
    opacity: 0.5;
    float: left;
    font-size: 15px;
    color: #2B2B2B;
    letter-spacing: 0;
    margin-left: 20px;
    margin-top: 10px;
    max-height: 40px;
    overflow: scroll;
     -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;
}

.leafletCommentContainer::-webkit-scrollbar {
  display: none;
}

.leafletEditCommentContainer::-webkit-scrollbar {
  display: none;
}



img {
    width: 100%;
}

@media (max-width: 575px) {

    .leafletCommentContainer,
    .leafletEditCommentContainer {
        width: calc(100% - 130px);
        opacity: 0.5;
        float: left;
        font-size: 12px;
        color: #2B2B2B;
        letter-spacing: 0;
        margin-left: 20px;
        margin-top: 6px;
    }
}

.leafletCheckContainer {
    position: absolute;
    right: 20px;
    top: 20px;
    border: 1px solid #333333;
    border-radius: 4px;
    height: 20px;
    width: 20px;
    transition: 0.3s all;
}

.selected .leafletCheckContainer {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: #C1432E;
    border: 1px solid #C1432E;
    border-radius: 4px;
    height: 20px;
    width: 20px;
    background-image: url(../../assets/img/checked.svg);
    background-position: center;
    background-repeat: no-repeat;
}

#leafletButtonRow {
    position: relative;
    bottom: 50px;
    right: 50px;
}

.here #leafletButtonRow {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: calc(100vw - 100px)
}

@media (max-width: 575px) {
    #leafletButtonRow {
        position: relative;
        bottom: 5vh;
        right: 0;
        width: 100vw;
    }
}

@media (max-width: 575px) {
    .here #leafletButtonRow {
        position: fixed;
        bottom: 5vh;
        right: 0;
        width: 100vw;
    }
}

#myPresentationButtonRowLow {
    position: relative;
    bottom: 50px;
    right: 50px;
}

.here #myPresentationButtonRowLow {
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: calc(100vw - 100px)
}

@media (max-width: 575px) {
    #myPresentationButtonRowLow {
        position: relative;
        bottom: 5vh;
        right: 0;
        width: 100vw;
    }
}

@media (max-width: 575px) {
    .here #myPresentationButtonRowLow {
        position: fixed;
        bottom: 5vh;
        right: 0;
        width: 100vw;
    }
}

.forwardButton {
    float: left;
    max-height: 50px;
    font-size: 16px;
    background: #008BCE;
    color: white;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    margin: 0;
    padding: 14px 25px;
    white-space: nowrap;
    text-align: center;
    margin-left: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

@media (max-width: 575px) {
    .forwardButton {
        float: left;
        max-height: 50px;
        font-size: 16px;
        background: #008BCE;
        color: white;
        box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
        border-radius: 12px;
        margin: 0;
        padding: 14px 0px;
        white-space: nowrap;
        text-align: center;
        margin-left: 5vw;
        cursor: pointer;
        width: 42.5vw;
        margin-right: 5vw;
    }
}

.deselectButton {
    font-size: 20px;
    color: #C1432E;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    padding: 14px 25px;
    max-height: 50px;
    float: right;
    cursor: pointer;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    transition: all 0.3s ease-in-out;
    margin-left: 20px;
}

.deselectButton:hover {
    filter: brightness(0.7);
}

@media (max-width: 575px) {
    .deselectButton {
        font-size: 16px;
        color: #C1432E;
        text-transform: uppercase;
        letter-spacing: 0;
        font-weight: 700;
        padding: 14px 0;
        max-height: 50px;
        float: left;
        cursor: pointer;
        margin-right: 0;
        text-align: center;
        width: 42.5vw;
        margin-left: 5vw;
    }
}

#presentationContentInner {
    clear: both;
}

.openTitleList:hover {
    background-color: #eee;
}

.openTitleList {
    position: fixed;
    left: 10px;
    top: 100px;
    z-index: 9999;
    height: 40px;
    width: 40px;
    display: block;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../assets/img/opentitlelist.svg);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}

@media (max-width: 575px) {
    #menu.open .openTitleList {
        top: 140px;
    }
}

@media (max-width: 575px) {
    .openTitleList {
        top: 80px;
        transition: top 0.3s ease-in-out;
    }
}

.openTitleList.actived {
    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../../assets/img/closetitlelist.svg);
}

#breadcrumRow {
    position: fixed;
    top: 100px;
    left: 70px;
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    height: 40px;
    z-index: 9000;
}

@media (max-width: 575px) {
    #menu.open #breadcrumRow {
        top: 140px;
        display: none;
    }
}

@media (max-width: 575px) {
    #breadcrumRow {
        top: 80px;
        transition: top 0.3s ease-in-out;
        display: flex;
        overflow: scroll;
        max-width: 80vw;
         -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
    }
    
    #breadcrumRow::-webkit-scrollbar {
  display: none;
}

    #breadcrumRow span:last-child {
        padding-right: 5vw;
    }
}

#breadcrumRow span:last-child {
    margin-right: 20px;
}

#breadcrumRow span:hover {
    opacity: 0.5;
}

#breadcrumRow span {
    padding-top: 10px;
    display: block;
    margin-right: 10px;
    float: left;
    transition: opacity 0.5s ease-in-out;
    cursor: pointer;
    white-space: nowrap;
}

#breadcrumRow span:first-child {
    padding-left: 15px;
}

#breadcrumRow span:first-child:before {
    content: '';
    margin-left: 0;
    margin-right: 0;
}

#breadcrumRow span:before {
    content: '>';
    margin-right: 10px;
}

span: {
    padding-top: 10px;
    display: block;
    padding-left: 10px;

}

.template .buttonRow {
    margin: 0;
    margin-left: 60px;
    height: initial;
    width: initial
}

@media (max-width: 1200px) {
    .template .buttonRow {
        margin-left: 20px;

    }
}

@media (max-width: 576px) {
    .hotspot {
        position: initial !important;
        width: 90vw !important;
        background-color: #da291c !important;
        color: white !important;
        padding: 5px 0 !important;
        text-align: center !important;
        margin-bottom: 20px;
        margin-bottom: 20px;
        height: 40px;
        margin-left: 5vw;
        border-radius: 10px;

    }

    .hotspot div {
        background-color: transparent;
        width: 90vw;
    }

    .hotspot i {
        display: none !important;
    }
}

.articlesSidebar.here {
    left: 0;
}

.articlesSidebar {
    width: 300px;
    height: calc(100vh - 90px);
    border-right: 1px #333 solid;
    position: fixed;
    padding: 70px 20px 120px;
    overflow-y: scroll;
    bottom: 0;
    left: -300px;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 0;
    transition: left 0.3s ease-in-out;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

@media (max-width:576px){
    .articlesSidebar{
        height: calc(100vh - 70px);
    }
}

.articlesSidebar::-webkit-scrollbar {
    display: none;
}


.articlesSidebar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.articles::-webkit-scrollbar {
    display: none;
}


.articles {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.articlesSidebar a {
    width: 100%;
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
}

#center_inner {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}

#overlay-content-rectangle {
    padding: 50px;
    max-height: 90vh;
    max-width: 90vw;
    margin: 0 auto;
    background-color: white;
    border-radius: 25px;
}

@media (max-width: 576px) {
    #overlay-content-rectangle {
        padding: 25px;
        max-height: 90vh;
        max-width: 90vw;
        margin: 0 auto;
        background-color: white;
        border-radius: 25px;
        overflow-y: scroll;
    }
}

#onlineOffline {
    display: ;
}

#onlineOffline.active {
    display: block;
}

#overlay-content-rectangle .btn {
    display: block;
    margin: 0 auto;
    height: 50px;
    border-radius: 10px;
    box-shadow: none;
    font-size: 18px;
    transition: opacity 0.3s ease-in-out;
}

#overlay-content-rectangle .btn:hover {
    opacity: 0.5;
}

#overlay-content-rectangle .btn-primary {
    background-color: #CC2C1E;
    margin-bottom: 30px
}

#overlay-content-rectangle .btn-secondary {
    color: #CC2C1E;
    border: #CC2C1E 3px solid;
    background-color: white;

}

.downloading > * {
    text-align: center;
    width: 100%;
    margin-bottom: 1vh
}

.downloading > * span {
    color: #cc2c1e
}

.center_inner {
    display: none;
}

.center_inner.active {
    display: block;
}

.question {
    display: none;
}

.question.active {
    display: block;
}

.downloading {
    display: none;
}

.downloading.active {
    display: block;
}

#reDownload {
    display: none;
}

#reDownload.active {
    display: block;
}

#language {
    display: none;
}

#language.active {
    display: block;
}

#failedFiles {
    display: none;
}

#failedFiles.active {
    display: block;
}

#downloadBar {
    width: 100%;
    display: block;
    height: 10px;
    border: 5px #cc2c1e solid;
    border-radius: 20px;
    margin-top: 2vh;
    overflow: hidden;
    padding: 1.7px 3px 2px;

}

@media (max-width:576px){
    #downloadBar {
    width: 90%;
}
}

#downloadBarInner {
    height: 100%;
    border-radius: 5px;
    display: block;
    background-color: #cc2c1e;
}

#reDownload .btn {
    width: 45% !important;
    display: inline-block;
    margin-top: 2vh;
    margin-left: 2%;
    margin-right: 2%;

}

#reDownload h2,
#language h2 {
    width: 100%;
    text-align: center;
    font-size: 1.5vh;
}

#reDownload h3 {
    width: 50%;
    display: block;
    text-align: center;
    margin: 2vh auto 0;
    font-size: 16px;
}

.languageSelect {
    max-width: 50vw;
    margin-top: 2vh;
}

@media (max-width:576px) {
    .languageSelect {
        max-width: 70vw;
        margin-top: 2vh;
    }

}

.languageSelect a {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
    color: #333 !important;
    float: left;
    padding: 0 25px !important;
    display: block;
    border-left: 1px solid;
    border-right: 1px solid;
    margin: 0 -1px
}

#failedFiles {
    width: calc(90vw - 100px);
    position: relative;
    height: calc(90vh - 100px);
    overflow: scroll;
      -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

}

#failedFiles::-webkit-scrollbar {
  display: none;
}


.failedFilesTitleContainer {
    width: 80%;
    overflow: hidden;
    font-size: 20px;
}

.failedFilesContainer {
    background: #FFFFFF;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.10);
    border-radius: 12px;
    width: calc(33% - 20px);
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 50px;
    float: left;
    padding: 20px;
    position: relative;
    transition: 0s;
}

#faileFilesButtonRow {
    position: absolute;
    top: 0px;
    right: 0;
    widows: 50%;

}




.failedFilesCheckContainer {
    position: absolute;
    right: 20px;
    top: 20px;
    border: 1px solid #333333;
    border-radius: 4px;
    height: 20px;
    width: 20px;
    transition: 0.3s all;
}

.selected .failedFilesCheckContainer {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: #C1432E;
    border: 1px solid #C1432E;
    border-radius: 4px;
    height: 20px;
    width: 20px;
    background-image: url(../../assets/img/checked.svg);
    background-position: center;
    background-repeat: no-repeat;
}


#failedFiles h2 {
    margin-top: 2vh;
    margin-bottom: 4vh;
    font-size: 30px;

}

.failedFilesContainer p {
    margin-top: 10px
}

#faileFilesButtonRow .btn {
    float: left;
    margin-left: 50px
}

@media (min-width: 1600px) {
    .failedFilesContainer {
        width: calc(25% - 20px);
    }
}


@media (max-width: 576px) {
    .failedFilesContainer {
        width: calc(90%);
        margin-bottom: 20px;
    }
    
    .failedFilesTitleContainer{
        font-size: 15px;
        margin-top: 0;
        margin-bottom: 0;
        
    }
    
    #faileFilesButtonRow{
        bottom: 0;
        top: initial;
    }
    
    #faileFilesButtonRow .btn{
        width: 100% !important;
        margin: 20px 0 0 0 !important;
    }
}


.error {
    width: 100%;
    margin-top: 20px;
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Noto Sans' !important;
    color: red;
}

#changePassword .emailInput {
    width: 100%;
}

#changePassword h2 {
    margin-bottom: 20px
}

#changePassword .btn {
    width: 45% !important;
    display: inline-block;
    margin-top: 2vh;
    margin-left: 2%;
    margin-right: 2%;
}

#changePassword {
    max-width: 450px;
}

#changePassword .btn-primary,
#sendLeaflet .btn-primary,
#addPresentation .btn-primary,
#changePasswordOk .btn-primary,
#addPageToPresentation .btn-primary,
#confirmDeleteToPresentation .btn-primary {
    margin-bottom: 0;
}

.emailInput:focus,
.passwortInput:focus {
    background-color: rgba(100, 100, 100, 0.80);
    color: white;
}

.emailInput:focus[placeholder],
.passwortInput:focus[placeholder] {
    color: white;
}


.emailInput:active,
.passwortInput:active {
    background-color: rgba(100, 100, 100, 0.80);
    color: white;
}

.emailInput:active[placeholder],
.passwortInput:active[placeholder] {
    color: white;
}

#sendLeaflet h2 {
    margin-bottom: 10px;
}

#sendLeaflet {
    min-width: 70vw;
    overflow: scroll;
}

@media (max-width:576px) {
    #sendLeaflet {
        max-width: 90vw;
    }
}

#addPresentation h2,
#changePasswordOk h2,
#addPageToPresentation h2,
#confirmDeleteToPresentation h2 {
    margin-bottom: 20px;
}

#sendLeaflet .btn,
#addPresentation .btn,
#changePasswordOk .btn,
#addPageToPresentation .btn, 
#confirmDeleteToPresentation .btn,
#confirmDeleteLeaflets .btn,
#confirmAddAllToLeaflet .btn,
#confirmAddAllToPresentation .btn {
    width: 45% !important;
    display: inline-block;
    margin-top: 2vh;
    margin-left: 2%;
    margin-right: 2%;
    font-size: 14px;
}



#sendLeaflet .emailInput,
#addPresentation .emailInput {
    width: 100%;
}

#sendLeaflet textarea {
    padding-top: 10px;
    min-height: 100px;
    max-height: 100px;
    max-width: 100%;
}

.question .btn {
    height: initial !important;
    max-width: 600px;
    display: flex !important;
    align-items: center;
}

.question .btn h2,
.question .btn p {
    text-align: left;
}

#onlineSymbol {
    height: 70px;
    width: 70px;
    background-image: url(../img/online.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-right: 25px;
    margin-left: 10px;

}

#offlineSymbol {
    height: 70px;
    width: 70px;
    background-image: url(../img/offline.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-right: 25px;
    margin-left: 10px
}

@media (max-width:576px) {

    #onlineSymbol {
        height: 70px;
        width: 100%;
        background-image: url(../img/online.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        float: left;
        margin-right: 25px;
        margin-left: 10px;

    }

    #offlineSymbol {
        height: 70px;
        width: 100%;
        background-image: url(../img/offline.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        float: left;
        margin-right: 25px;
        margin-left: 10px
    }

}

.question .btn-secondary {
    background-color: #999 !important;
    border-color: #999 !important;
    color: #000 !important;
}

.question h2 {
    margin-bottom: 10px;
}

.innerButtonRow {
    max-height: 30px;
    position: absolute;
    bottom: 20px;
    left: 5px;
    width: calc(100% - 10px)
}

.innerButtonRow > * {
    float: right;
    max-height: 30px !important;
    padding: 0px 15px !important;
    height: 35px;
    margin: 0% 10px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.5s ease-in-out;
}

.innerButtonRow > *:hover {
    opacity: 0.5
}

#addPageToPresentation .btn {
    width: 100%;
}

.addPageToPresentationContent {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #CC2C1E;
    border: #CC2C1E 3px solid;
    background-color: white;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 2vh;
}

.addPageToPresentationContent:first-child{
    margin-top: 0;
}

.addPageToPresentationContent:hover {
    text-align: center;
    color: white;
    border: #CC2C1E 3px solid;
    background-color: #CC2C1E;

}



#addPageToPresentation .btn {
    width: 100% !important;
    margin-left: 0;
}

.buttonRow span.active {
    border: none !important;
}

.deletePresentationButton {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-image: url(../img/deletebtn.svg);
    background-position: center;
    background-size: 50%;
    padding: 0 !important;
    background-repeat: no-repeat;
}

.editPresentationButton {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    background-image: url(../img/editprebtn.svg);
    background-position: center;
    background-size: 50%;
    padding: 0 !important;
    background-repeat: no-repeat;
}

.alert {
    background-color: #CC2C1E;
    padding: 2px 6px;
    min-width: 15px;
    font-size: 8px;
    line-height: 1;
    margin-left: 12px;
    margin-top: 2px;
    border-radius: 10px;
    color: white;
    text-align: center;
    font-weight: 800;
}

#slidesCenterContent .templates {
    height: 100vh;
}

@media (max-width:576px) {
    .alert {
        margin-left: 34px;

    }

    #slidesCenterContent .templates {
        height: initial;
        margin-bottom: 5vh;
    }

    .funktionWindow h1 {
        font-size: 20px;
    }
}

.loginMask{
    height: 100vh;
width: 100vw;
display: flex;
    position: fixed;
align-items: center;
justify-content: center;
    z-index: 99999;
    background-color: #da291c;
    
}

.loginWindow{
    background: #FFFFFF;
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.10);
border-radius: 10px;
max-width: 500px;
margin: 0 auto;
padding: 60px;
}

.loginWindow input{
    background: transparent;
border: 1px solid #DDDDDD;
border-radius: 10px;
margin-bottom: 30px;
height: 50px;
width: 100% !important;
max-width: 350px;
display: block;
padding-left: 18px;
font-size: 15px;
min-width: 270px;
transition: all 0.3s ease-in-out;
}

.loginWindow h2{
    font-weight: 900;
font-size: 20px;
color: #333333;
text-align: center;
text-transform: uppercase;
}

.submitButton{
    border-radius: 5px !important;
    background-color: #da291c !important;
    border: none;
    box-shadow: none !important;
}

.kundenLogo{
    margin: 20px auto 30px;
height: 70px;
width: 100%;
background-image: url(../img/kundenlogo.jpg);
background-size: 70%;
background-repeat: no-repeat;
background-position: center;
}