/* Open Sans 400 */
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    src: url('../Fonts/OpenSans/OpenSans-Regular.woff2') format('woff2'),
        url('../Fonts/OpenSans/OpenSans-Regular.woff') format('woff');
}

/* Open Sans 700 */
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    src: url('../Fonts/OpenSans/OpenSans-Bold.woff2') format('woff2'),
        url('../Fonts/OpenSans/OpenSans-Bold.woff') format('woff');
}


/* Globale Definitionen
---------------------------------------------------------------------------------------------- */
* {
    box-sizing: border-box;
}

/*
html, body {
    height: 100%;
} */


html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

img {
    width: 100%;
    height: auto;
}

/*
img {
    max-width: 100%;
    height: auto;
    width: auto;
}
   
@-moz-document url-prefix() {  
    img{
        width: 100%;
        max-width: 100%;
    }
}
*/
.background_white {
    background-color: #fff;
}



/* IE
---------------------------------------------------------------------------------------------- */

.ce-textpic,
.ce-gallery {
    overflow: initial;
    height: 100%;
    width: 100%;
}


/* Schriften, Headings
---------------------------------------------------------------------------------------------- */

body {
    font-family: 'Open Sans', sans-serif;
    color: #212529;
    font-size: 16px;
}

h2 {
    font-size: 1.5em;
    margin-top: 50px;
    font-weight: bold;
    margin-bottom: 1em;
}

h3 {
    font-size: 1.3em;
    font-weight: 100;
    margin-top: 30px;
    margin-bottom: 20px;
}

a {
    font-weight: bold;
    -webkit-transition: color 0.2s ease-in-out;
    -moz-transition: color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out;
    -o-transition: color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out;
}

a:hover {
    text-decoration: none;
    color: #999;
}

.slideshow_container,
/* #content a:not(.slick-slide):not(.referenzLighboxLink) img, */
#content a:not(.slick-slide):not(.cbp-caption):not(.referenzLighboxLink) img,
#sidebar a:not(.slick-slide):not(.cbp-caption) img {
    border: 5px solid transparent;
    transition: all 0.5s ease;
}

.slideshow_container:hover,
/* #content a:not(.slick-slide):not(.referenzLighboxLink):hover img, */
#content a:not(.slick-slide):not(.cbp-caption):not(.referenzLighboxLink):hover img,
#sidebar a:not(.slick-slide):not(.cbp-caption):hover img {
    border: 5px solid #efefef;
}



/* Tabelle
---------------------------------------------------------------------------------------------- */
table {
    border-collapse: collapse;
    font-size: 0.9em;
    width: 100%;
}

td,
th {
    padding: 0.3em 1em;
    background: #fff;
    text-align: left;
}

td {
    border-bottom: 1px solid #eee;
}


/* Cookie-Banner cookieman
--------------------------------------------------------------------------------------------- */
#cookieman-modal .btn,
#cookieman-modal .btn-primary,
#cookieman-modal .btn-secondary {
    font-size: 18px;
    color: #fff !important;
    border: 2px solid;
    border-color: #00619f;
    border-radius: 3px;
    padding: 10px 15px;
    line-height: normal;
}

#cookieman-modal .btn-primary {
    background-color: #00619f;
    color: #fff !important;
    border: 2px solid #00619f;
}

#cookieman-modal .btn-secondary {
    background-color: transparent;
    color: #00619f !important;
}

#cookieman-modal .btn-default {
    color: #00619f !important;
}

#cookieman-modal .btn-secondary:hover,
#cookieman-modal .btn-secondary:focus {
    color: #00619f !important;
    background-color: transparent;
    text-decoration: underline;
}

#cookieman-modal [data-bs-toggle="collapse"][data-bs-target="#cookieman-settings"]::after {
    right: 8px;
    background-color: #00619f;
}

#cookieman-modal .accordion-button {
    color: #00619f !important;
}




/* Header
---------------------------------------------------------------------------------------------- */

#header_container {
    overflow: hidden;
    width: 100%;
    padding: 0;
    position: relative;
}

.slide-image.no_parallax {
    display: none;
    background-repeat: no-repeat;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: center center;

    -ms-behavior: url('/js/backgroundsize/backgroundsize.htc');
}

/*
#header_container .slide-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center; 
} */

#header_title {
    display: none;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-transform: uppercase;
    padding: 10px 40px;
    box-shadow: 5px 5px 5px #333;
}

#header_title h1 {
    margin: 0;
    font-weight: bold;
    text-align: center;
}



/* Menü (#menu_container)
---------------------------------------------------------------------------------------------- */
#menu_container {
    background-color: #fff;
}

#menu_container .logo {
    /* height: 82px; */
    padding-top: 10px;
    text-align: left;
}

#menu_container .logo a {
    padding: 0;
}

#menu_container .logo img {
    max-height: 45px;
    width: auto;
}

#menu_container nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

#menu_container nav li {
    text-align: center;
    position: relative;
    /* width: 100%; */
    margin: auto;
}

#menu_level_1 .container {
    padding-top: 10px;
}

#menu_level_2 {
    padding-top: 20px;
}


#menu_container .sqs img {
    height: 45px;
    padding-top: 0px;
    width: auto;
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#menu_container .sqs a {
    padding-bottom: 18px;
}

#menu_container .sqs a:hover img {
    opacity: 1;
}



/* menu_level_1
---------------------------------------- */
#menu_level_1 {
    position: relative;
    height: 82px;
    z-index: 10;
}

#menu_level_1.menu_shadow {
    box-shadow: 0 20px 20px -20px #222;
}

#menu_level_1 nav {
    padding-top: 10px;
}

#menu_level_1 a {
    color: black;
    font-weight: normal;
    padding: 10px 15px 29px 15px;
    position: relative;
    display: block;
}

#menu_level_1 .menu_level_2 {
    display: none;
}

#menu_level_1 .aktiv a,
#menu_level_2 .aktiv a {
    font-weight: bold;
}




/* menu_level_2
---------------------------------------- */
.menu_level_2_container {
    position: relative;
    height: 55px;
}

.menu_level_2_container .empty_container {
    height: 55px;
}

.menu_level_2_container .aktiv_container,
.menu_level_2_container .hovering_container {
    height: 55px;
    -webkit-transition: visibility 0.5s ease-in-out;
    -moz-transition: visibility 0.5s ease-in-out;
    -ms-transition: visibility 0.5s ease-in-out;
    -o-transition: visibility 0.5s ease-in-out;
    transition: visibility 0.5s ease-in-out;
    display: none;
}

.menu_level_2_container .shadow {
    box-shadow: 0 20px 20px -20px #222;
    height: 55px;
}

#menu_level_2 {
    font-size: 0.8em;
    z-index: 5;
    position: relative;
}



#menu_level_2 li {
    position: relative;
}

#menu_level_2 a {
    color: #fff;
    font-weight: normal;
    padding-bottom: 17px;
    position: relative;
}

#menu_container nav img {
    width: 30px;
    height: auto;
}




/* Arrow
---------------------------------------- */

#menu_container #menu_level_1 .hovering a:after,
#menu_container #menu_level_2 .hovering a:after,
#menu_level_1 nav a:hover:after,
#menu_level_2 nav a:hover:after {
    position: absolute;
    content: '';
    bottom: 0;
    width: 0;
    height: 0;
    border-width: 15px 10px 0 10px;
    border-color: transparent;
    border-style: solid;
    border-top-color: #fff;
    border-bottom: 0;
    margin: 0 0 -14px -45%;
}

#menu_container #menu_level_2 .hovering a:after,
#menu_level_2 nav a:hover:after {
    margin: 0 0 -14px -65% !important;
}


/* SlickNav
---------------------------------------------------------------------------------------------- */

.slicknav_nav {
    font-size: 1.2em;

}

.slicknav_btn {
    display: none !important;
}


.slicknav_menu {
    background-color: #fff !important;
}

.slicknav_menu a {
    color: #212529;
    font-weight: normal;
}

.slicknav_btn {
    background-color: #fff !important;
}

.slicknav_menu .slicknav_icon-bar {
    width: 1.5em;
    height: 0.17em;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background-color: transparent !important;
    font-weight: bold;
    color: initial;
}

.slicknav_menu img {
    max-width: 200px;
    float: left;
}

.slicknav_nav ul {
    margin: 0 0 0 0;
}

.slicknav_nav ul.menu_level_2 {
    padding-left: 30px;
    font-size: 0.9em;
}

.slicknav_nav li {
    border-top: 1px solid #ddd;
}

.slicknav_nav a,
.slicknav_nav .slicknav_row {
    padding: 10px 10px;
}


.slicknav_nav .menu_level_2 li a {
    color: #212529;
}

.slicknav_nav li.aktiv>a,
.slicknav_nav li.aktiv a.slicknav_row a,
.slicknav_nav .menu_level_2 li.aktiv a {
    font-weight: bold;
}


.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    background-color: #444 !important;
}




/* Icon Menu Right
---------------------------------------------------------------------------------------------- */
#menuFixedright {
    overflow: hidden;
    width: 150px;
    height: 100%;
    /* position:fixed; */
    position: absolute;
    right: 0;
    margin-top: -50px;
    /* margin-top:100px; */
    z-index: 1;
    cursor: pointer;
    font-size: 16px;
}

#menuFixedright li {
    width: 150px;
    height: 50px;
    background-color: #000;
    list-style: none;
    margin-left: 70px;
    margin-bottom: 2px;
    line-height: 50px;
    -webkit-transition: 2s;
    transition: 0.4s;
}

#menuFixedright li:hover {
    background-color: #444;
}

#menuFixedright li a {
    text-decoration: none;
    color: #fff;
    display: block;
}

#menuFixedright li i {
    font-size: 16px;
    color: white;
    margin-left: 11px;
    margin-right: 15px;
}

/* Hover */

#menuFixedright li:hover {
    margin-left: -40px;
    cursor: pointer;
}

/* FadeIn Content
---------------------------------------------------------------------------------------------- */

#menu_container,
#content_container,
#footer_container {

    display: none;

}



/* Content
---------------------------------------------------------------------------------------------- */

#content_container {
    padding-top: 50px;
    padding-bottom: 100px;
    line-height: 1.6em;
}

#content h2:first-of-type,
aside h2:first-of-type {
    margin-top: 0;
}

#content_container.content-sidebar #content {
    padding-right: 40px;
}

#content_container.content-sidebar #sidebar {
    padding-left: 40px;
}

aside .ce-gallery {
    margin-bottom: 25px !important;
}


/* Standard-Bausteine
-------------------------- */
.ce-column {
    margin-right: 0;
}

hr {
    margin: 3em 0;
}

.text-sm {
    font-size: 0.8em;
}

#content .row.text-sm {
    margin: 1em 0 3em 0;
}



/* Aside / Sidebar
---------------------------------------------------------------------------------------------- */
aside#sidebar ul {
    list-style-type: none;
    padding: 0;
}

aside#sidebar {
    border-left: 1px solid #eee;
}


/* Footer (#footer_container)
---------------------------------------------------------------------------------------------- */

#footer_container {
    font-size: 0.7em;
    background-color: #e1e1e1;
}

#footer_container,
#footer_container a {
    color: #888;
    font-weight: normal;
}

#footer_container.background_color,
#footer_container.background_color a,
#footer_container.background_color a:hover {
    color: #fff;
    font-weight: normal;
}


#footer_fill {
    display: none;
    background-color: #e1e1e1;
}

/* Footer
---------------------------------------- */

#footer_container #footer {
    padding-top: 20px;
}

#footer_arrow {
    position: absolute;
    border-width: 90px 50px 0 50px;
    border-color: transparent;
    border-top-color: #fff;
    border-style: solid;
    left: 50%;
    transform: translate(-50%, -0%);
}


#footer_arrow.arrow_home {
    margin-top: 0;
    z-index: 11;
}


/* Footer Additional (alles aus einer Hand...)
---------------------------------------- */

#footer_additional_container {
    /* height: 120px; */
    padding: 20px 0;
}


#footer_additional ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

#footer_additional li {
    float: left;
    position: relative;
}

#footer_additional img {
    width: 25px;
    height: 25px;
    padding-right: 5px;
    opacity: 0.5;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

#footer_additional a:hover img {
    opacity: 1;
}



#footer_additional span {
    font-size: 1.5em;
    padding-bottom: 15px;
    display: block;
}


/* Footer Nav (Impressum...)
---------------------------------------- */

#footer_nav {
    padding-top: 42px;
    text-align: right;
}

#footer_nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
    justify-content: left;
}

#footer_nav li {
    padding-right: 10px;
    float: left;
}


/* Footer Icon
---------------------------------------- */

#footer_icon {
    text-align: center;
}

#footer_icon img {
    width: 75px;
    position: relative;
    margin-top: -18px;
    /* opacity: 0.5; */
}




/* Back to top
---------------------------------------------------------------------------------------------- */
#scrolltop {
    display: none;
    font-style: inherit;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
}

#scrolltop a {
    color: #fff;
}





/* Team-Portrait
---------------------------------------------------------------------------------------------- */

.team .ce-bodytext p:last-of-type {
    margin-bottom: 0;
}

.team .mail {
    line-height: 1.5;
}

.team img.image-embed-item {
    border: solid #efefef 2px;
}


/* Portfolio: Partner
---------------------------------------------------------------------------------------------- */

#portfolio.partner .cbp-item .wrap {
    background-color: #f6f6f6;
    padding: 15px;
    height: 195px;
    text-align: center;
    line-height: 11px;
}

#portfolio.partner .cbp-item .wrap:hover {
    background-color: #e6e6e6;
}

#portfolio.partner span {
    color: #000;
    font-size: 11px;
    font-weight: normal;
}



/* Portfolio: Referenzen
---------------------------------------------------------------------------------------------- */

.cbp-caption-zoom .cbp-caption-activeWrap {
    background-color: transparent;
}


.cbp-caption:hover {
    cursor: pointer;
}


img.grayscale {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.cbp-caption:hover img.grayscale {
    -webkit-filter: grayscale(0%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.cbp-caption-zoom .cbp-caption:hover .cbp-caption-defaultWrap {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

#portfolio.referenzen .cbp-item {
    color: #000;
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
    height: 210px;
}



#referenz_modal .modal-body {
    padding: 0;
}

#referenz_modal .title h1 {
    color: #fff;
    font-weight: 700;
    padding: 10px;
    margin: 0;
    line-height: 1.5;
    padding-left: 15px;
}

#referenz_modal .arrow_referenz {
    left: inherit;
    right: 0;
}

#referenz_modal .content {
    margin-top: 20px;
    padding: 15px;
}

#referenz_modal .close {
    cursor: pointer;
}

#referenz_modal .close img {
    height: 100px;
    width: 100px;
    margin: 1em;
}

#referenz_modal .referenz_bilder .col-sm-6 {
    padding-bottom: 20px;
}


/* referenzLightbox 
---------------------------------------------------------------------------------------------- */



.ce-gallery figcaption {
    width: 100% !important;
    color: #000;
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
    display: inline-block;
}

.referenzLightbox .ce-column {
    padding: 15px;
    /* overflow: hidden;
    position: relative; */

}


.img-hover-zoom {
    /* height: 190px;
    width: 190px; */
    overflow: hidden;
}

.img-hover-zoom img {
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s ease-out;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);

}

.img-hover-zoom:hover img {
    transform: scale(1.1);
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}


/* Ajax Loading 
---------------------------------------------------------------------------------------------- */
.ajax-loading {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255, 255, 255, .8);

    /*            url('http://sampsonresume.com/labs/pIkfp.gif') 
                50% 50% 
                no-repeat; */
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .ajax-loading {
    display: block;
}


.lds-ring {
    display: inline-block;
    position: relative;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
}

.lds-ring div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 51px;
    height: 51px;
    margin: 6px;
    border: 6px solid #fed;
    border-radius: 50%;
    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: gray transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
    animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
    animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
    animation-delay: -0.15s;
}

@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}






/* Linkklassen mit FontAwesome-Symbolen belegen
---------------------------------------------------------------------------------------------- */


a.mail:before,
a.download:before,
a.external-link:before,
a.external-link-new-window:before,
a.internal-link:before {
    font-family: "Font Awesome 5 Free";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-weight: 900;
    padding-right: 5px;
    margin: 0;
    display: inline-block;
    text-decoration: none;

    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a.mail:before {
    content: "\f0e0";
}

a.download:before {
    content: "\f019";
}

a.external-link:before {
    content: "\f08e";
}

a.internal-link:before {
    content: "\f0c1";
}

a.external-link-new-window:before {
    content: "\f08e";
}

a.mail:hover:before,
a.download:hover:before,
a.external-link:hover:before,
a.external-link-new-window:hover:before,
a.internal-link:hover:before {
    color: #999;
}

a.mail:hover,
a.download:hover,
a.external-link:hover,
a.external-link-new-window:hover,
a.internal-link:hover {
    text-decoration: none;
}


/*  Header-Title Mobile
---------------------------------------------------------------------------------------------- */
#menu_mobile {
    padding: 15px 0 0 0;
}

#header_mobile {
    background-color: #fff;
}

#menu_mobile .logo {
    float: left;
    padding-left: 20px;
    margin: auto 0;
}

#menu_mobile img {
    max-height: 40px;
    max-width: 120px;
}

#header_title_mobile h1 {
    color: #fff;
    padding: 15px 0;
    font-size: 1.8em;
}

#header_mobile .slide-image {
    height: 200px;
}

#header_mobile #footer_arrow {
    transform: scale(0.5);
    margin-top: -23px;
    left: inherit;
}


/*  Jarallax
---------------------------------------------------------------------------------------------- */

.jarallax {
    position: relative;
    z-index: 0;
}

.jarallax>.jarallax-img {
    position: absolute;
    object-fit: cover;
    /* font-family: 'object-fit: cover;'; */
    background-position: 50% 50%;
    background-size: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}


/* jQuery Slick
---------------------------------------------------------------------------------------------- */
/* Pfeile */
.slick-prev:before,
.slick-next:before {
    color: #fff !important;
}

.slick-prev {
    left: 5px;
    z-index: 2;
}

.slick-next {
    right: 5px;
    z-index: 2;
}


/* Dots (Punkte) */
.slick-dots li button:before {
    color: #868686 !important;
}



/* Flexible iFrames
---------------------------------------------------------------------------------------------- */
#iframe-container {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 30px;
}

.youtube {
    padding-bottom: 56.25%;
}

.map {
    padding-bottom: 65%;
}

#iframe-container iframe,
#iframe-container object,
#iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* Powermail Formulare
---------------------------------------------------------------------------------------------- */
.powermail_legend,
.powermail_form h3 {
    display: none;
}

.powermail_fieldwrap {
    width: 100%;
}

.powermail_fieldset {
    margin-left: -15px;
}

.powermail_form .btn {
    color: #fff;
}

.powermail_form .form-group {
    margin-bottom: 30px !important;
    width: 100%;
}

/* Sternchen-Markierung */
.powermail_form .mandatory {
    font-weight: bold;
    color: red;
}

.powermail_form .mandatory:before {
    content: '\0000a0';
}



/*  Ausblendungen
---------------------------------------------------------------------------------------------- */

#header_mobile,
.slicknav_menu {
    display: none;
}



/*  @media, media-queries
---------------------------------------------------------------------------------------------------------------------------------------- */

/*  @media: Breakpoint Large (lg)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {}

/* end @media - Breakpoint Large (lg)» */


/*  @media: Breakpoint «Medium (md)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    #menu_container,
    #header_container {
        display: none !important;
    }

    #header_mobile,
    .slicknav_menu {
        display: block;
    }

    #menuFixedright {
        height: auto;
    }

    #menuFixedright li {
        margin-left: -40px;
    }

    .jarallax #jarallax-container-0 div {
        height: 200px !important;
    }

    #referenz_modal h1 {
        font-size: 1.2em;
    }

    #referenz_modal .arrow_referenz {
        border-width: 40px 20px 0 20px !important;
    }

    #referenz_modal .content {
        margin: 0;
    }

    #footer_arrow.arrow_home {
        margin-top: 0px;
        z-index: 11;
    }

    #footer_additional ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: block;
    }

    #footer_additional li {
        padding: 2px 0;
        float: none;
        display: block;
    }


}

/* end @media - Breakpoint «Medium (md)» */



/*  @media: Breakpoint «Small (sm)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {}

/* end @media - Breakpoint «Small (sm)» */



/*  @media: Breakpoint «X-Small (xs)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {}

/* end @media - Breakpoint «X-Small (xs)» */











/* Hamburger
---------------------------------------------------------------------------------------------- */

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


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



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