body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* roboto-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('../../files/theme/fonts/roboto-v50-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 200;
  src: url('../../files/theme/fonts/roboto-v50-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../../files/theme/fonts/roboto-v50-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../../files/theme/fonts/roboto-v50-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../../files/theme/fonts/roboto-v50-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url('../../files/theme/fonts/roboto-v50-latin-600italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-600italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../../files/theme/fonts/roboto-v50-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: url('../../files/theme/fonts/roboto-v50-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../../files/theme/fonts/roboto-v50-latin-700italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/* Initial: Elemente ausblenden, solange JS noch nicht fertig ist */
html:not(.js-ready) #banner-h1,
html:not(.js-ready) #banner-p,
html:not(.js-ready) #toptext,
html:not(.js-ready) #header span,
html:not(.js-ready) #header-article span img,
html:not(.js-ready) #kontaktBtn {
  visibility: hidden;
}

body {
    font-family:'Roboto', sans-serif;
    font-size:22px;
}
#header-span {
    position: absolute;
    top: 0;
    left: 30px;
    z-index: 2;
    padding: 15px;
    background-color: #fff;
    font-size:32px;
    display:block;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
#header-article span img {
    width: 150px;
}
img {
    display:block;
}
#header {
    position: relative;
}
#header-article {
    height:80px;
}
h1 {
    margin-bottom:30px;
    color:#073f99;
    font-weight: normal;
    font-size: 50px;
}
h2 {
    margin-bottom:20px;
    margin-top:1em;
    color:#073f99;
}
p {
    margin-bottom:16px;
    font-size:26px;
    line-height:1.4;
    font-weight:100;
}
a {
     color:#073f99;
     font-weight:bold;
     font-size:22px;
     text-underline-offset: 4px;
}
a.btn-margin-right {
    margin-right:15px;
}
.box-left a.btn, .box-right a.btn {
    margin-bottom:0 !important;
}
.links-text a {
    font-size:26px;
    font-weight:400;
}
div#article-1 {
    background-color: #063f9a;
    color: #fff;
}
div#article-1 h2 {
    color:#fff;
}
div#toptext {
    padding-top: 110px;
    padding-bottom: 30px;
}
.content-text {
    padding-left:30px;
    padding-right:30px;
    padding-top:30px;
    padding-bottom:30px;
}
.content-text h1 {
    margin-top:30px;
}
.block-icons .content-text {
    padding-top:25px;
    padding-bottom:25px;
}
h1.content-headline {
    margin-top: 30px;
}
.content-headline {
     padding-left:30px;
    padding-right:30px;
    padding-top:15px;
    margin-bottom:0;
}

.box-kupfer {
    background-color: #cb8a72;
}

.box-messing {
    background-color: #ccaf6f;
}
.box-aluminium {
    background-color: #abacab
}
.box-bronze {
    background-color: #9c6c3d;
}
.box-rotguss {
    background-color: #bb6652;
}
.box-grauguss {
    background-color: #8a8b8a;
}
.box-left h2, .box-right h2 {
    color: #fff;
    margin-top: 10px;
    margin-bottom: 20px;
}

ul li {
    margin-left: 15px;
    margin-bottom:15px;
}

.box-left {
    float: left;
    width: calc(50% - 15px);
    margin-right: 30px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    margin-bottom:30px;
    padding-top:15px;
}

.box-right {
    float: left;
    width: calc(50% - 15px);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    margin-bottom:30px;
    padding-top:15px;
}
.box-left ul li, .box-right ul li, .aufzaehlung-pfeil li {
    background-image:url(/files/theme/icons/arrow-right-circle-fill.svg);
    background-size:22px 22px;
    padding-left:30px;
    background-repeat: no-repeat;
    background-position: left top 3px;
    list-style-type: none;
    margin-left:0;
    margin-bottom:0;
    line-height: 1.3;
    font-size: 21px;
}
.aufzaehlung-pfeil li { 
    margin-bottom:15px;
    font-size:26px;
}
#footer .mod_article {
    background-color: #073f99;
    line-height: 1.5em;
}
#footer .footertop {
    width: 1280px;
    margin: 0 auto;
    color: #fff;
    padding: 22px 0;
    height: auto;
    text-align:center;
    font-weight:400;
}

#footer .footer-border {
    width: 100%;
    height: 3px;
    background-color: #fff;
}

#footer .footerbottom {
    color: #fff;
    width: 1280px;
    margin: 0 auto;
    padding-top: 22px;
    padding-bottom: 22px;
}
#footer .footer-left {
    float: left;
    padding-left: 30px;
    padding-right: 90px;
    width:469px;
    margin-bottom:22px;
}

#footer h3 {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 1em;
    font-weight:400;
    text-transform: uppercase;
}
#footer .mod_customnav {
    float: left;
    margin-right: 90px;
}

#footer .mod_customnav li {
    list-style-type: none;
    margin-left: 0;
    margin-bottom:0;
}

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

#footer .footer-center {
    float: left;
    width:463px;
    margin-bottom:22px;
}

#footer .footer-right {
    float: left;
    margin-bottom:22px;
}
#footer .inside {
    background-color: #073f99;
}
div#toptext {
    width: 50%;
    float: left;
}
#article-1 .content-image {
    width: 50%;
    float: left;
}

#article-1 figure {
    width: 100%;
}
div.block-icons {
    background-color: #073f99;
    color:#fff;
}

.mod_navigation ul {
    list-style-type: none;
}
#topnav li {
    display: inline-block;
    margin-left: 0;
    margin-bottom:0;
    margin-right: 30px;
    width:120px;
}

#topnav {
    text-align: center;
    padding: 29px 0;
}
#topnav li a {
    color:#000;
    text-decoration:none;
    font-weight: normal;
}
.beige-bg {
    background-color: #e4d2ac !important;
}
#footer {
    margin-top:30px;
    font-weight:100;
}
#footer a {
    font-weight:100;
}
span.active, li.active strong.active {
    color:#ab822d;
}
#footer .mod_customnav li.active strong.active {
    color: #fff;
    
}
.red-box {
    background-color:#a6070b;
    color:#fff;
    border-radius:25px;
    margin:0 30px 30px 30px;
}
.red-box a {
    color:#fff;
}
a.btn, input.btn {
    background-color:#073f99;
    padding:4px 14px;
    color:#fff;
    display: inline-block;
    font-weight: bold;
    border-radius: 15px;
    text-decoration: none;
}
p.banner-h1 {
    font-size: 2em;
    line-height:1;
    font-weight:600;
    margin-bottom:0.3em;
}
p#banner-p {
    line-height:1.2; 
    margin-bottom:0.5em;             
}

#main .mod_article {
    width: 1280px;
    margin: 0 auto;
}

div.block-icons.mod_article {
    width: 100% !important;
}

.mod_article {
    background-color: #fff;
}

div#article-1 {
    border-bottom: 3px solid #fff;
}

div#wrapper {
    background-color: #eee;
}
#article-1 p.banner-h1 {
    font-size: 4em;
}

div#toptext {
    padding-left: 100px;
    padding-right: 100px;
    padding-top: 160px;
    padding-bottom:0;
}

#header-article span img {
    width: 246px;
}

#header-span {
    left: 100px;
}

#article-1 p {
    font-size: 58px;
}
.icon-top {
    width:84px; /* war 120 px */
    height:84px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: inline-block;
    margin-right: 15px;
    margin-left: 15px;
}
.icon-bar {
    text-align:center;
    margin-bottom:0;
}
.icon-bar p {
    margin-bottom:0;
    line-height:1;
}
.icon-ueber-uns {
    background-image:url(/files/theme/icons/Icon-ueber-uns-w.svg);
}
.icon-ueber-uns.active {
    background-image:url(/files/theme/icons/Icon-ueber-uns-br.svg);
}
.icon-produkte {
    background-image:url(/files/theme/icons/Icon-Produkte-w.svg);
}
.icon-produkte.active {
    background-image:url(/files/theme/icons/Icon-Produkte-br.svg);
}
.icon-service {
    background-image:url(/files/theme/icons/Icon-Service-w.svg);
}
.icon-service.active {
    background-image:url(/files/theme/icons/Icon-Service-br.svg);
}
.icon-downloads {
    background-image:url(/files/theme/icons/Icon-Downloads-w.svg);
}
.icon-downloads.active {
    background-image:url(/files/theme/icons/Icon-Downloads-br.svg);
}
a.pfeil {
    background-image: url(/files/theme/icons/Icon-Pfeil-br.svg);
    padding-top: 10px;
    display: inline-block;
    padding-right: 45px;
    background-position: right bottom 2px;
    background-repeat: no-repeat;
    background-size:35px 35px;
}

a.pfeil-w {
    background-image: url(/files/theme/icons/Icon-Pfeil-w.svg);
    padding-top: 10px;
    display: inline-block;
    padding-right: 45px;
    background-position: right bottom 2px;
    background-repeat: no-repeat;
    background-size:35px 35px;
}
.h2-qualimanagement i {
background-image:url(/files/theme/icons/Icon-QualiManagement-db.svg);
    margin-right:10px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px; 
    width:50px;
    height:50px;
    display:inline-block;  
    margin-bottom: -6px;
}

.h2-team i {

    background-image:url(/files/theme/icons/Icon-Team-db.svg);
    margin-right:10px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom:-5px;
}

.h2-sortiment i {
    padding-top:17px;
    background-image:url(/files/theme/icons/Icon-NE-Sortiment-db.svg);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -8px;
}

.h2-kundenbetreuung i {
    background-image:url(/files/theme/icons/Icon-Kundenbetreuung-db.svg);
    margin-right:10px;
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -5px;
}

.h2-schneidecenter i {
    background-image:url(/files/theme/icons/Icon-Schneidecenter-db.svg);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
     width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -12px;
}

.h2-versand i {
    background-image:url(/files/theme/icons/Icon-Versand-db.svg);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -8px;
}

.h2-24h i {
    background-image:url(/files/theme/icons/Icon-24-std-dbsvg.svg);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -8px;
}

.h2-logistik i {
    background-image:url(/files/theme/icons/Icon-Logistik-db.svg);
    background-repeat:no-repeat;
    background-position:bottom left;
    background-size:50px 50px;
    width:50px;
    height:50px;
    display:inline-block;
    margin-bottom: -8px;
}

ul.aufzaehlung li {
    list-style-type:none;
    background-image:url(/files/theme/icons/Icon-Aufzaehlung-db.svg);
    margin-left:0;
    background-repeat:no-repeat;
    background-position:top left;
    font-weight: 100;
    font-size: 26px;
    background-size: 30px;
    padding-left: 45px;
    line-height:1.4;
}
.box-kupfer, .box-messing {
    height: 287px;
    position: relative;
}

.box-messing a.btn, .box-kupfer a.btn {
    position: absolute;
    left: 30px;
    bottom: 30px;
}

.box-aluminium, .box-bronze {
    height: 390px;
    position: relative;
}

.box-aluminium a.btn, .box-bronze a.btn {
    position: absolute;
    left: 30px;
    bottom: 30px;
}

.box-rotguss, .box-grauguss {
    height: 265px;
    position: relative;
}

.box-rotguss a.btn, .box-grauguss a.btn {
    position: absolute;
    left: 30px;
    bottom: 30px;
}
.content-text.media.media--right figure {
    margin-left: 20px;
    margin-bottom: 20px;
}
a#kontaktBtn {
    position: absolute;
    top: 24px;
    right: 15px;
}
.col-md-6 {
    float:left;
    width:50%;
}
.col-md-8 {
    width:66.66%;
    float:left;
}
.col-md-4 {
    width:33.33%;
    float:left;
}
.col-md-3 {
   float:left;
    width:25%; 
}
.content-text p:last-child {
    margin-bottom: 0;
}
.content-image {
    padding-left:30px;
    padding-right:30px;
}
.content-image.borderless {
    padding-left:0;
    padding-right:0;
}
.iso-logo figure {
    position: absolute;
    width: 400px;
    margin-left: 50%;
    margin-top: 90px;
    margin-left: 60px;
    z-index: 5;
}

.iso-logo {
    position: relative;
    z-index: 1000;
    width:40% !important;
}

.iso-logo img {
    z-index: 5;
    display: block;
    position: relative;
    border-radius: 10px;
    max-width:320px;
}
.overflow-visible {
    overflow: visible !important;
}
#image-plattensaege {
    float:left;
    margin-right:30px;
    padding-right:0;
    padding-left:0;
    margin-left:30px;
    width:calc(65.47% - 60px);
}
#image-bandsaege {
    float:left;
    padding-left:0;
    margin-right:30px;
    padding-right:0;
    width: calc(34.53% - 30px);
}
.metalle-quadrat-container {
    padding-left: 30px;
}

.metalle-quadrat {
    float: left;
    width: 16.66%;
    padding-left: 0;
    padding-top:0;
    cursor:pointer;
}
.metalle-quadrat img {
    border-radius:10px;
    border:3px solid transparent;
}
.metalle-quadrat.active img {
    border-color:#fff;
}
.metall-rechteck {
    float: left;
    width: 25%;
    padding-left: 0;
    padding-top:0;
    color:#073f99;
}
.metall-rechteck img {
    border-radius:5px;
}

.portfolio {
    padding-left: 30px;
    margin: 0 30px;
    background: #fff;
    border-radius: 25px;
    margin-bottom:20px;
}

.portfolio .content-headline {
    padding-left: 0;
    padding-right: 0;
    color:#073f99;
    margin-bottom:20px;
    padding-top:30px;
}
.portfolio .content-text.hinweis {
    padding:0 0 30px 0;
}
#header .hamburger {
    position: absolute;
    right: 20px;
    top: 15px;
    display:none;
}
div#menu {
    position: fixed;
    background-color: #fff;
    width: 320px;
    right: 0;
    top: 0;
    z-index: 100;
    padding: 30px;
    height: 100%;
    transform: translateX(320px);
    transition: transform 0.5s ease-in-out;
    border-left:3px solid #073f99;
}
div#menu.is-active {
    transform: translateX(0);
}
#menu li {
    list-style-type: none;
}
#menu li a {
    text-decoration:none;
}
#klaro a {
    font-size: 22px;
}

.klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn {
    font-size: 22px;
}

#klaro {
    font-size:22px;
}

#klaro p {
    font-size: 22px;
}

.klaro .cookie-modal .cm-list-title, .klaro .context-notice .cm-list-title, .klaro .cookie-notice .cm-list-title {
    font-size: 22px;
}
#lieferuebersichten .content-text {
    padding: 0 30px;
}

#lieferuebersichten h2.content-headline {
    margin-bottom: 30px;
}

div#lieferuebersichten {
    padding-bottom: 30px;
}

.hid, label.hid, input.hid {
    display: none;
}
.vis, label.vis, input.vis {
    display: block;
    float:left;
}
#gewichtsrechner label {
    clear:both;
    width: 250px;
}
#gewichtsrechner input {
    margin-bottom:20px;
}
#gewichtsrechner label, #gewichtsrechner input, #gewichtsrechner span, #gewichtsrechner select {
font-family: 'Roboto', sans-serif;
font-weight:100;
font-size: 26px;;
}
#abmessungen .mm
{
    margin-top: 4px;
    margin-left:5px;
}
#gewichtsrechner label.toplabel {
    width: 100px;
    display: inline-block;
}
#dichte {
    margin-left:10px;
}
@media (min-width: 1024px) and (max-width: 1279px) {
    #header .hamburger {
    display:none;
}
.metall-rechteck {
    width:33.33%;
}
#main .mod_article {
    width: 1024px;
}
#footer .footertop {
    width: 1024px;
}
#footer .footerbottom {
    width: 1024px;

}
footer#footer, footer#footer a {
    font-size: 18px;
}
#footer .footer-left {
    width: 407px;
}

#footer .mod_customnav {
    margin-right: 53px;
}

#footer .footer-center {
    width: 342px;
}
}
@media (min-width: 1024px) and (max-width: 1220px) {
    #header .hamburger {
    display:block;
}
#topnav, a#kontaktBtn {
    display:none;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
    #header .hamburger {
    display:block;
}
.metall-rechteck {
    width:33.33%;
}
.metalle-quadrat {
    width: 33.33%;
}
    .red-box.col-md-6 {
    width: auto;
}
    .col-md-6, .col-md-4, .col-md-8 {
        width:100%;
        float:none;
    }
    .col-md-4.content-image img {
    max-width: 320px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.iso-logo {
    width: 100% !important;
}

.iso-logo figure {
    position: relative;
    margin: 0 auto;
    padding-bottom: 20px;
}

.overflow-visible {
    overflow: hidden;
}
#topnav, a#kontaktBtn {
    display:none;
}
#main .mod_article {
    width: 768px;
}

#footer .footertop {
    width: 768px;
}

#footer .footerbottom {
    width: 768px;
}
.box-left, .box-right {
    width:100%;
}
footer#footer, footer#footer a {
    font-size: 18px;
}

#footer .footer-center {
    padding-left: 30px;
}
}
@media (min-width: 0px) and (max-width: 767px) {
    p#banner-p {
        margin-bottom:1em;
    }
    div#toptext {
    padding-top: 86px !important;
}
    .iso-logo figure {
        width:320px;
    }
    #footer .footer-center {
        width:100%;
    }
    #footer .footer-left {
    width:100%;
    }
    #header .hamburger {
    display:block;
}
.metall-rechteck {
    width:50%;
}
.metalle-quadrat {
    width: 50%;
}
.red-box.col-md-6 {
    width: auto;
}
.iso-logo {
    width: 100% !important;
}

.iso-logo figure {
    position: relative;
    margin: 0 auto;
    padding-bottom: 20px;
}

.overflow-visible {
    overflow: hidden;
}
     .col-md-6, .col-md-4, .col-md-8 {
        width:100%;
        float:none;
    }
    .col-md-4.content-image img {
    max-width: 320px;
    margin: 0 auto;
    margin-bottom: 20px;
}
.box-left, .box-right {
    width:100%;
    height:auto !important;
    padding-bottom: 70px !important;
}
#topnav, a#kontaktBtn {
    display:none;
}
#main .mod_article, #header .mod_article {
    width: 100%;
    min-width:375px;
}

#footer .footertop {
    width: 100%;
    min-width:375px;
}

#footer .footerbottom {
   width: 100%;
    min-width:375px;
}
#article-1 .content-image, div#toptext
{
    width: 100%;
}
footer#footer, footer#footer a{
    font-size: 18px;
}

#footer .footer-center {
    padding-left: 30px;
}

#footer .footer-right {
    padding-left: 30px;
}
}
@media (min-width: 0px) and (max-width: 580px) {
.metall-rechteck {
    width:100%;
}
}
@media (min-width: 431px) and (max-width: 659px) {
.icon-top {
    width: 80px;
    height: 80px;
    margin-right: 6px;
    margin-left:6px;
}
.block-icons .content-text {
    padding-top:20px;
    padding-bottom:20px;
}
}
@media (min-width: 0px) and (max-width: 1024px) {
.icon-top {
width:66px;
height: 66px;
margin-right: 5px;
margin-left: 5px;
}
.block-icons .content-text {
    padding-top:20px;
    padding-bottom:20px;
}
h1 {
    font-size:28px;
    font-weight:bold;
}
h1.startseite {
    font-size:24px;
}
h2 {
    font-size:24px;
}
p {
    font-size:22px;
}
.links-text a {
    font-size:22px;
    font-weight:400;
}
ul.aufzaehlung li {
    font-size:22px;
}
.box-left ul li, .box-right ul li, .aufzaehlung-pfeil li {
    font-size:18px;
    line-height: 1.6;
}
.box-left, .box-right {
    padding-bottom: 90px !important;
}
a {
    font-size:20px;
}
a.btn
 {
    margin-bottom: 15px;
}
a.btn-margin-right {
    margin-right:0;
}
#lieferuebersichten .content-text.col-md-4 {
    padding-bottom: 0;
    padding-top: 0;
}

#lieferuebersichten h2.content-headline {
    margin-bottom: 30px;
}
}
@media (min-width: 431px) and (max-width: 720px) {
a.btn
 {
    margin-bottom: 15px;
}
a.btn-margin-right {
    margin-right:15px;
}
}
@media (max-width: 634px) {
#gewichtsrechner input {
    clear: both;
    width: calc(100% - 60px);
}

#gewichtsrechner label {
    margin-bottom: 10px;
}
}

@media (max-width: 1024px) {
    .icon-top {
        width:66px;
        height:66px;
    }
    
}

#footer, #footer a {
    font-size: 18px;
}
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: #000; }

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/*
   * 3DX
   */
.hamburger--3dx .hamburger-box {
  perspective: 80px; }

.hamburger--3dx .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx .hamburger-inner::before, .hamburger--3dx .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(180deg); }
  .hamburger--3dx.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dx.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DX Reverse
   */
.hamburger--3dx-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dx-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dx-r .hamburger-inner::before, .hamburger--3dx-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dx-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateY(-180deg); }
  .hamburger--3dx-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dx-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DY
   */
.hamburger--3dy .hamburger-box {
  perspective: 80px; }

.hamburger--3dy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dy .hamburger-inner::before, .hamburger--3dy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(-180deg); }
  .hamburger--3dy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DY Reverse
   */
.hamburger--3dy-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dy-r .hamburger-inner::before, .hamburger--3dy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg); }
  .hamburger--3dy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DXY
   */
.hamburger--3dxy .hamburger-box {
  perspective: 80px; }

.hamburger--3dxy .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dxy .hamburger-inner::before, .hamburger--3dxy .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg); }
  .hamburger--3dxy.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dxy.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * 3DXY Reverse
   */
.hamburger--3dxy-r .hamburger-box {
  perspective: 80px; }

.hamburger--3dxy-r .hamburger-inner {
  transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), background-color 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }
  .hamburger--3dxy-r .hamburger-inner::before, .hamburger--3dxy-r .hamburger-inner::after {
    transition: transform 0s 0.1s cubic-bezier(0.645, 0.045, 0.355, 1); }

.hamburger--3dxy-r.is-active .hamburger-inner {
  background-color: transparent !important;
  transform: rotateX(180deg) rotateY(180deg) rotateZ(-180deg); }
  .hamburger--3dxy-r.is-active .hamburger-inner::before {
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--3dxy-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -10px, 0) rotate(-45deg); }

/*
   * Arrow
   */
.hamburger--arrow.is-active .hamburger-inner::before {
  transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

.hamburger--arrow.is-active .hamburger-inner::after {
  transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
   * Arrow Right
   */
.hamburger--arrow-r.is-active .hamburger-inner::before {
  transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }

.hamburger--arrow-r.is-active .hamburger-inner::after {
  transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
   * Arrow Alt
   */
.hamburger--arrowalt .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(-8px, -10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

.hamburger--arrowalt.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(-8px, 10px, 0) rotate(45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
   * Arrow Alt Right
   */
.hamburger--arrowalt-r .hamburger-inner::before {
  transition: top 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt-r .hamburger-inner::after {
  transition: bottom 0.1s 0.1s ease, transform 0.1s cubic-bezier(0.165, 0.84, 0.44, 1); }

.hamburger--arrowalt-r.is-active .hamburger-inner::before {
  top: 0;
  transform: translate3d(8px, -10px, 0) rotate(45deg) scale(0.7, 1);
  transition: top 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

.hamburger--arrowalt-r.is-active .hamburger-inner::after {
  bottom: 0;
  transform: translate3d(8px, 10px, 0) rotate(-45deg) scale(0.7, 1);
  transition: bottom 0.1s ease, transform 0.1s 0.1s cubic-bezier(0.895, 0.03, 0.685, 0.22); }

/*
   * Arrow Turn
   */
.hamburger--arrowturn.is-active .hamburger-inner {
  transform: rotate(-180deg); }
  .hamburger--arrowturn.is-active .hamburger-inner::before {
    transform: translate3d(8px, 0, 0) rotate(45deg) scale(0.7, 1); }
  .hamburger--arrowturn.is-active .hamburger-inner::after {
    transform: translate3d(8px, 0, 0) rotate(-45deg) scale(0.7, 1); }

/*
   * Arrow Turn Right
   */
.hamburger--arrowturn-r.is-active .hamburger-inner {
  transform: rotate(-180deg); }
  .hamburger--arrowturn-r.is-active .hamburger-inner::before {
    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1); }
  .hamburger--arrowturn-r.is-active .hamburger-inner::after {
    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1); }

/*
   * Boring
   */
.hamburger--boring .hamburger-inner, .hamburger--boring .hamburger-inner::before, .hamburger--boring .hamburger-inner::after {
  transition-property: none; }

.hamburger--boring.is-active .hamburger-inner {
  transform: rotate(45deg); }
  .hamburger--boring.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--boring.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }

/*
   * Collapse
   */
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Collapse Reverse
   */
.hamburger--collapse-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse-r .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Elastic
   */
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s; }

/*
   * Elastic Reverse
   */
.hamburger--elastic-r .hamburger-inner {
  top: 2px;
  transition-duration: 0.275s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
  .hamburger--elastic-r .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease; }
  .hamburger--elastic-r .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55); }

.hamburger--elastic-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-135deg);
  transition-delay: 0.075s; }
  .hamburger--elastic-r.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0; }
  .hamburger--elastic-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(270deg);
    transition-delay: 0.075s; }

/*
   * Emphatic
   */
.hamburger--emphatic {
  overflow: hidden; }
  .hamburger--emphatic .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic .hamburger-inner::after {
      top: 10px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }
    .hamburger--emphatic.is-active .hamburger-inner::before {
      left: -80px;
      top: -80px;
      transform: translate3d(80px, 80px, 0) rotate(45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic.is-active .hamburger-inner::after {
      right: -80px;
      top: -80px;
      transform: translate3d(-80px, 80px, 0) rotate(-45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
   * Emphatic Reverse
   */
.hamburger--emphatic-r {
  overflow: hidden; }
  .hamburger--emphatic-r .hamburger-inner {
    transition: background-color 0.125s 0.175s ease-in; }
    .hamburger--emphatic-r .hamburger-inner::before {
      left: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, left 0.125s 0.175s ease-in; }
    .hamburger--emphatic-r .hamburger-inner::after {
      top: 10px;
      right: 0;
      transition: transform 0.125s cubic-bezier(0.6, 0.04, 0.98, 0.335), top 0.05s 0.125s linear, right 0.125s 0.175s ease-in; }
  .hamburger--emphatic-r.is-active .hamburger-inner {
    transition-delay: 0s;
    transition-timing-function: ease-out;
    background-color: transparent !important; }
    .hamburger--emphatic-r.is-active .hamburger-inner::before {
      left: -80px;
      top: 80px;
      transform: translate3d(80px, -80px, 0) rotate(-45deg);
      transition: left 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }
    .hamburger--emphatic-r.is-active .hamburger-inner::after {
      right: -80px;
      top: 80px;
      transform: translate3d(-80px, -80px, 0) rotate(45deg);
      transition: right 0.125s ease-out, top 0.05s 0.125s linear, transform 0.125s 0.175s cubic-bezier(0.075, 0.82, 0.165, 1); }

/*
   * Minus
   */
.hamburger--minus .hamburger-inner::before, .hamburger--minus .hamburger-inner::after {
  transition: bottom 0.08s 0s ease-out, top 0.08s 0s ease-out, opacity 0s linear; }

.hamburger--minus.is-active .hamburger-inner::before, .hamburger--minus.is-active .hamburger-inner::after {
  opacity: 0;
  transition: bottom 0.08s ease-out, top 0.08s ease-out, opacity 0s 0.08s linear; }

.hamburger--minus.is-active .hamburger-inner::before {
  top: 0; }

.hamburger--minus.is-active .hamburger-inner::after {
  bottom: 0; }

/*
   * Slider
   */
.hamburger--slider .hamburger-inner {
  top: 2px; }
  .hamburger--slider .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider .hamburger-inner::after {
    top: 20px; }

.hamburger--slider.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--slider.is-active .hamburger-inner::before {
    transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0);
    opacity: 0; }
  .hamburger--slider.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-90deg); }

/*
   * Slider Reverse
   */
.hamburger--slider-r .hamburger-inner {
  top: 2px; }
  .hamburger--slider-r .hamburger-inner::before {
    top: 10px;
    transition-property: transform, opacity;
    transition-timing-function: ease;
    transition-duration: 0.15s; }
  .hamburger--slider-r .hamburger-inner::after {
    top: 20px; }

.hamburger--slider-r.is-active .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(-45deg); }
  .hamburger--slider-r.is-active .hamburger-inner::before {
    transform: rotate(45deg) translate3d(5.71429px, -6px, 0);
    opacity: 0; }
  .hamburger--slider-r.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(90deg); }

/*
   * Spin
   */
.hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Spin Reverse
   */
.hamburger--spin-r .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spin-r .hamburger-inner::before {
    transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; }
  .hamburger--spin-r .hamburger-inner::after {
    transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spin-r.is-active .hamburger-inner {
  transform: rotate(-225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spin-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; }
  .hamburger--spin-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg);
    transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }

/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
  .hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring-r.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
  .hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Stand
   */
.hamburger--stand .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
  .hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand.is-active .hamburger-inner {
  transform: rotate(90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
  .hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Stand Reverse
   */
.hamburger--stand-r .hamburger-inner {
  transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; }
  .hamburger--stand-r .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--stand-r .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--stand-r.is-active .hamburger-inner {
  transform: rotate(-90deg);
  background-color: transparent !important;
  transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; }
  .hamburger--stand-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--stand-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
  .hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--squeeze.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0;
    transition: top 0.075s ease, opacity 0.075s 0.12s ease; }
  .hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); }

/*
   * Vortex
   */
.hamburger--vortex .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex .hamburger-inner::before, .hamburger--vortex .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }
  .hamburger--vortex .hamburger-inner::before {
    transition-property: top, opacity; }
  .hamburger--vortex .hamburger-inner::after {
    transition-property: bottom, transform; }

.hamburger--vortex.is-active .hamburger-inner {
  transform: rotate(765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex.is-active .hamburger-inner::before, .hamburger--vortex.is-active .hamburger-inner::after {
    transition-delay: 0s; }
  .hamburger--vortex.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--vortex.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(90deg); }

/*
   * Vortex Reverse
   */
.hamburger--vortex-r .hamburger-inner {
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex-r .hamburger-inner::before, .hamburger--vortex-r .hamburger-inner::after {
    transition-duration: 0s;
    transition-delay: 0.1s;
    transition-timing-function: linear; }
  .hamburger--vortex-r .hamburger-inner::before {
    transition-property: top, opacity; }
  .hamburger--vortex-r .hamburger-inner::after {
    transition-property: bottom, transform; }

.hamburger--vortex-r.is-active .hamburger-inner {
  transform: rotate(-765deg);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); }
  .hamburger--vortex-r.is-active .hamburger-inner::before, .hamburger--vortex-r.is-active .hamburger-inner::after {
    transition-delay: 0s; }
  .hamburger--vortex-r.is-active .hamburger-inner::before {
    top: 0;
    opacity: 0; }
  .hamburger--vortex-r.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg); }