.mobicon { display: none; position: absolute; right: 20px; top: 20px; height: 24px; width: 30px; z-index: 3; cursor: pointer; }
.mobicon span { position: absolute; width: 30px; height: 4px; left: 0px; background-color: #fff; }
.mobicon span.first { top: 0px; }
.mobicon span.sec { top: 10px; }
.mobicon span.third { top: 20px; }
.mobicon.open span.sec{ opacity: 0; }
.mobicon.open span.first {-webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 10px; }
.mobicon.open span.third { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -10px; }

@media( min-width : 1281px ) {
    #naviMain { display: block !important; }
}

@media( max-width : 1280px ) {
    #naviMain { display: none; position: absolute; left: 10px; top: 110px; }
    .mobicon { display: block; }
    .sidebar .sidebarlinks, .sidebar .adress { display: none; }
    .sidebar { bottom: auto; right: 10%; padding: 15px 15px 13px; position: absolute; }
    .home .sidebar { bottom: auto; padding: 15px 15px 0; right: 10%; position: absolute; }
    .home .sidebar .logo { margin-bottom: 0; padding-bottom: 13px; }
    .home .main { text-align: left; padding: 20px; border-top: none; border-bottom: 20px solid #fff; margin-top: 0; }
    .home .main .lead br { display: none; }
    .home .main p:not(.lead) { padding-left: 0; }
    header, .home header { padding-top: 140px; position: static; }
    header .navigation ul { padding-right: 0; }
    .main { padding: 0 20px 20px; margin: 0; }
    footer { display: block; background-color: rgba(255,255,255,0.5); margin-top: -30px; padding: 0 20px 20px; }
    .office p + img { width: auto; }
}

@media( max-width : 1024px ) {
    #naviMain { left: auto; top: 160px; right: 10vw; width: 330px; height: 240px; background-color: rgba(255,255,255,0.5); z-index: 3; }
    header .navigation ul li { display: block; }
    header .navigation ul a { padding: 5px; display: block; color: #006268; }
    header .navigation ul a:hover, header .navigation ul a.active:hover, header .navigation ul a.active { background-color: unset; }
    .main ul { padding-left: 20px; }
}

@media( max-width : 850px ) {
    .grid_30_30_30 > .row > .col, .grid_30_70 > .row > .col_30, .grid_30_70 > .row > .col_70, .grid_20_80 > .row > .col_20, .grid_20_80 > .row > .col_80 { flex-basis: 100%; max-width: 100%; }
    .hallux .grid_30_30_30 > .row > .col { flex-basis: 30%; max-width: 30%; }
    .grid > .row { flex-wrap: wrap; }
    .hallux .grid > .row { flex-wrap: nowrap; }
    .grid_25_25_25_25 > .row > .col { flex-basis: 50%; max-width: 50%; }
    .grid_20_80 .col_20 p { margin-bottom: 0; }
}

@media( max-width : 650px ) {
    .home .main img, .office p + img { width: 100%; margin-bottom: 20px; }
}

@media( max-width : 500px ) {
    header { padding-top: 140px; position: static; }
    #naviMain { right: 0; width: 100%; }
    .sidebar { padding: 15px 0 13px; position: absolute; }
    .sidebar, .home .sidebar { left: 0; right: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
    .home .sidebar { padding: 15px 0 0; }
    .lead { font-size: 20px; line-height: 25px; }
    #cookie-bar .inner { padding: 0 18px; }
    .hallux .small { display: none; }
    .hallux .small.mobile { display: block; }
    .hallux .grid_30_30_30 > .row > .col { flex-basis: 100%; max-width: 100%; }
    .hallux .grid > .row { flex-wrap: wrap; }
    .grid_25_25_25_25 > .row > .col { flex-basis: 100%; max-width: 100%; margin-bottom: 20px; }
    .grid_25_25_25_25 > .row > .col_25_4 { margin-bottom: 0; }
}