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}
header,footer,nav,section,aside,main,article,figure,figcaption{display:block}body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea{margin:0;padding:0}table{border-spacing:0;border-collapse:collapse}caption,th,td{text-align:left;text-align:start;vertical-align:top}abbr,acronym{font-variant:normal;border-bottom:1px dotted #666;cursor:help}blockquote,q{quotes:none}fieldset,img,iframe{border:0}ul{list-style-type:none}sup{vertical-align:text-top}sub{vertical-align:text-bottom}del{text-decoration:line-through}ins{text-decoration:none}body{font:12px/1 "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;color:#000}input,button,textarea,select{font-family:inherit;font-size:99%;font-weight:inherit}pre,code{font-family:Monaco,monospace}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}h1{font-size:1.8333em}h2{font-size:1.6667em}h3{font-size:1.5em}h4{font-size:1.3333em}table{font-size:inherit}caption,th{font-weight:700}a{color:#00f}h1,h2,h3,h4,h5,h6{margin-top:1em}h1,h2,h3,h4,h5,h6,p,pre,blockquote,table,ol,ul,form{margin-bottom:12px}
@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%}
#wrapper{width:960px;margin:0 auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:left;margin-left:10px;margin-right:10px;display:inline}.mod_article [class^=ce_],.mod_article [class*=" ce_"],.mod_article [class^=content-],.mod_article [class*=" content-"],.mod_article [class^=mod_],.mod_article [class*=" mod_"]{margin-left:10px;margin-right:10px}.ce_sliderStart>.content-slider{margin-left:0;margin-right:0}.mod_article .mod_newsreader,.mod_article .mod_eventreader{margin-left:0;margin-right:0}.mod_article [class^=layout_]>*,.mod_article [class*=" layout_"]>*,.mod_article [class^=event_]>*,.mod_article [class*=" event_"]>*{margin-left:10px;margin-right:10px}.mod_article.grid1,.mod_article.grid2,.mod_article.grid3,.mod_article.grid4,.mod_article.grid5,.mod_article.grid6,.mod_article.grid7,.mod_article.grid8,.mod_article.grid9,.mod_article.grid10,.mod_article.grid11,.mod_article.grid12{margin-left:0;margin-right:0}#main .inside{overflow:hidden}.grid1{width:60px}.grid2{width:140px}.grid3{width:220px}.grid4{width:300px}.grid5{width:380px}.grid6{width:460px}.grid7{width:540px}.grid8{width:620px}.grid9{width:700px}.grid10{width:780px}.grid11{width:860px}.grid12{width:940px}.mod_article.grid1{width:80px}.mod_article.grid2{width:160px}.mod_article.grid3{width:240px}.mod_article.grid4{width:320px}.mod_article.grid5{width:400px}.mod_article.grid6{width:480px}.mod_article.grid7{width:560px}.mod_article.grid8{width:640px}.mod_article.grid9{width:720px}.mod_article.grid10{width:800px}.mod_article.grid11{width:880px}.mod_article.grid12{width:960px}.offset1{margin-left:90px!important}.offset2{margin-left:170px!important}.offset3{margin-left:250px!important}.offset4{margin-left:330px!important}.offset5{margin-left:410px!important}.offset6{margin-left:490px!important}.offset7{margin-left:570px!important}.offset8{margin-left:650px!important}.offset9{margin-left:730px!important}.offset10{margin-left:810px!important}.offset11{margin-left:890px!important}.offset12{margin-left:970px!important}.mod_article.offset1{margin-left:80px!important}.mod_article.offset2{margin-left:160px!important}.mod_article.offset3{margin-left:240px!important}.mod_article.offset4{margin-left:320px!important}.mod_article.offset5{margin-left:400px!important}.mod_article.offset6{margin-left:480px!important}.mod_article.offset7{margin-left:560px!important}.mod_article.offset8{margin-left:640px!important}.mod_article.offset9{margin-left:720px!important}.mod_article.offset10{margin-left:800px!important}.mod_article.offset11{margin-left:880px!important}.mod_article.offset12{margin-left:960px!important}@media (min-width:768px) and (max-width:979px){#wrapper{width:744px}.grid1{width:42px}.grid2{width:104px}.grid3{width:166px}.grid4{width:228px}.grid5{width:290px}.grid6{width:352px}.grid7{width:414px}.grid8{width:476px}.grid9{width:538px}.grid10{width:600px}.grid11{width:662px}.grid12{width:724px}.mod_article.grid1{width:62px}.mod_article.grid2{width:124px}.mod_article.grid3{width:186px}.mod_article.grid4{width:248px}.mod_article.grid5{width:310px}.mod_article.grid6{width:372px}.mod_article.grid7{width:434px}.mod_article.grid8{width:496px}.mod_article.grid9{width:558px}.mod_article.grid10{width:620px}.mod_article.grid11{width:682px}.mod_article.grid12{width:744px}.offset1{margin-left:72px!important}.offset2{margin-left:134px!important}.offset3{margin-left:196px!important}.offset4{margin-left:258px!important}.offset5{margin-left:320px!important}.offset6{margin-left:382px!important}.offset7{margin-left:444px!important}.offset8{margin-left:506px!important}.offset9{margin-left:568px!important}.offset10{margin-left:630px!important}.offset11{margin-left:692px!important}.offset12{margin-left:754px!important}.mod_article.offset1{margin-left:62px!important}.mod_article.offset2{margin-left:124px!important}.mod_article.offset3{margin-left:186px!important}.mod_article.offset4{margin-left:248px!important}.mod_article.offset5{margin-left:310px!important}.mod_article.offset6{margin-left:372px!important}.mod_article.offset7{margin-left:434px!important}.mod_article.offset8{margin-left:496px!important}.mod_article.offset9{margin-left:558px!important}.mod_article.offset10{margin-left:620px!important}.mod_article.offset11{margin-left:682px!important}.mod_article.offset12{margin-left:744px!important}}@media (max-width:767px){#wrapper{width:auto}.grid1,.grid2,.grid3,.grid4,.grid5,.grid6,.grid7,.grid8,.grid9,.grid10,.grid11,.grid12{float:none!important;display:block!important;width:auto!important}.offset1,.offset2,.offset3,.offset4,.offset5,.offset6,.offset7,.offset8,.offset9,.offset10,.offset11,.offset12{margin-left:10px!important}}
#colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden;-webkit-transform:translate3d(0,0,0)}#cboxWrapper{max-width:none}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto;-webkit-overflow-scrolling:touch}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%;height:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block;max-width:none;-ms-interpolation-mode:bicubic}.cboxIframe{width:100%;height:100%;display:block;border:0;padding:0;margin:0}#colorbox,#cboxContent,#cboxLoadedContent{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}#cboxOverlay{background:#000;opacity:.9;filter:alpha(opacity = 90)}#colorbox{outline:0}#cboxContent{margin-top:20px;background:#000}.cboxIframe{background:#fff}#cboxError{padding:50px;border:1px solid #ccc}#cboxLoadedContent{border:5px solid #000;background:#fff}#cboxTitle{position:absolute;top:-20px;left:0;color:#ccc}#cboxCurrent{position:absolute;top:-20px;right:0;color:#ccc}#cboxLoadingGraphic{background:url(../../assets/colorbox/images/loading.gif) no-repeat center center}#cboxPrevious,#cboxNext,#cboxSlideshow,#cboxClose{border:0;padding:0;margin:0;overflow:visible;width:auto;background:0 0}#cboxPrevious:active,#cboxNext:active,#cboxSlideshow:active,#cboxClose:active{outline:0}#cboxSlideshow{position:absolute;top:-20px;right:90px;color:#fff}#cboxPrevious{position:absolute;top:50%;left:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top left;width:28px;height:65px;text-indent:-9999px}#cboxPrevious:hover{background-position:bottom left}#cboxNext{position:absolute;top:50%;right:5px;margin-top:-32px;background:url(../../assets/colorbox/images/controls.png) no-repeat top right;width:28px;height:65px;text-indent:-9999px}#cboxNext:hover{background-position:bottom right}#cboxClose{position:absolute;top:5px;right:5px;display:block;background:url(../../assets/colorbox/images/controls.png) no-repeat top center;width:38px;height:19px;text-indent:-9999px}#cboxClose:hover{background-position:bottom center}
html {
    height: 100%;

}

body {
	/* uf20230926 Reset base font size to 10px */
	font-size: 10px /* 62.5% */;
	font-family: 'nerislight';
    border-top: 14px solid #000000;
    /*background-color: rgb(230, 230, 230);*/
    /*background-image: url("../../files/pics/headerBrushed.png");*/

    background-repeat: no-repeat;
    height: 100%;
    position: relative;
}

h1 {
	font-size: 2.6em;
	/*font-family: 'nerissemibold';*/
    font-family: 'nerislight';
    margin-top: 0px;
}

h2 {
    font-size: 2em;
    margin-top: 0px;
}

h3 {
    font-size: 1.6em;
    margin-top: 0px;
}

p {
    margin-top: 1.4em;
	font-size: 1.4em;
	font-family: 'nerislight';
	/* uf20230926 add hyphenation in paragraphs */
	-moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

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

#container {
    padding-bottom: 60px;
    overflow: visible;
    /*position: relative;*/
    height: 100%;
}


.clearall {
    clear: both;
}

.headbox {
   background-color: #000000;
   color: #FFFFFF;
   display: inline-block;
   margin-top: 0px;
   width: 100%;
   /*height: 100px;*/
   text-align: left;
   padding-top: 60px;
   padding-bottom: 60px;
}

/****************** INTRO STYLES *************************/
/****************** Clean up this mess *******************/
#renderCanvas {
    position: absolute;
    width   : 100%;
    height  : 100%;
    left: 0px;
    overflow: visible;
    touch-action: none;
}

#frameTracker {
  display: none; /* hide the frame tracker by default */
  position: absolute;
  left: 0px;
  top: 0px;
  font-family: sans-serif;
  color: black;
}

#intro_wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  /*min-height: 700px;*/

  overflow: visible;
  top: 0px;
  left: 0px;
}

.introtext {
  /*display: none;*/
  background-color: rgba(255, 255, 255, 0.9);
}

#show_intro_btn {
  pointer-events: auto;
  cursor: pointer;
  background-color: black;
  color: white;
  padding: 4px;
  margin-left: 10px;
  border-radius: 8px;
  width: 40px;
  text-align: center;
  font-family: "nerissemibold";
}

#footer {
    margin-top: 12px;
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    width: 100%;
}

#main {
    clear: both;
    position: relative;
    /*background-color: red;*/
    /*border: 1px solid;*/
    margin-top: 60px;
    margin-bottom: 60px;
    height: 100%;
    overflow: visible;
}

.contact #main {
    /*background-image: url("../../files/pics/Logo_White_BGImage.jpg");*/
    background-size: contain;
    /*min-height: 800px;*/
}

#contact_form {
    display: none !important;
}

#menu_icon {
    /*text-align: right;*/
    float: right;
    margin-right: 10px;
    margin-top: 18px;
    display: none;
}

#star_icon {
    text-align: right;
    margin-top: 60px;
}

#logo {
    float: left;
    margin-left: 10px;
    margin-top: 30px;
}

/**
* Blog Styles
**/
.layout_full {
    /*background-color: #e9e9ea;*/
    /*border-bottom: 5px solid #cdcfd0;*/
    margin-bottom: 40px;
    padding-bottom: 20px;
}

.layout_full h1 {
    font-size: 1.6em;
    margin-bottom: 4px;
    /*float: left;*/
    border-top: 1px solid #cccccc;
    padding-top: 12px;
}

.layout_full h2 {
   font-size: 1.4em;
    margin-bottom: 4px;
}

.blog p {
    /*font-size: 1.4em;*/
    margin-top: 4px;
}

.info {
    margin-top: 0px;
    clear: both;
}

.pagination {
    clear: both;
}

.pagination ul li {
    display: inline-block;
    font-size: 1.4em;
    margin-right: 5px;
}

.pagination ul li .current {
    color: #4377b1;
    font-weight: bold;
}

.pagination ul li a {
    text-decoration: none;
    color: #00f;
}

.centered_blog_image {
    text-align: center;
}

.offset_top {
    margin-top: 30px;
}

.awaycanvas {
    position: relative;
}

/* Impressum styles *****************************************************/
#impressum  p {
    margin-top: 12px;
    margin-bottom: 0px;
}

#impressum h3 {
    margin-top: 16px;
    margin-bottom: 0px;
}

.impressum_link {
    font-size: 1.3em;
    color: #969798;
}

.impressum_link a {
    text-decoration: none;

    color: #969798;
}

/* Image rollover stuff *************************************************/

.overlay_image {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 20px;
    /*border-top: 30px solid;*/
    padding-top: 30px;
    background-color: black;
    position: relative;
}

.overlay_image h2 {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    /*top: 50%;*/
    padding-top: auto;
    background-color: orange;
    position: absolute;
}

.overlay_image .caption {
	position: absolute;
	top: 8px;
	left: 12px;
	text-align: left;
	color: white;
	font-size: 1.2em;
}

.overlay_image img {
	display: block;
}

.work_detail h2 {
    text-transform: uppercase;
}


#adressheader {
    clear: both;
    margin-right: 10px;
    position: relative;
    float: right;
}

/* Menu stuff *************************************************/

#mainnav {
    font-size: 1.6em;
    display: block;
    clear: both;
}

#mainnav a {
    display: block;
    color: #000000;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

#mainnav ul {
    margin-left: 10px;
    margin-top: 30px;
    font-family: 'nerislight';

}

#mainnav ul li {
    display: inline-block;
    /*padding: 2px;*/
    padding-top: 2px;
    padding-left: 0px;
    padding-right: 0px;

    margin-left: 40px;
    text-transform: uppercase;
    /*font-family: 'nerissemibold';*/
}

#mainnav ul li.welcome {
   margin-left: 0px;
}

#contact_menu {
    text-transform: uppercase;
    font-size: 1.5em;
    font-family: 'nerislight';
}


#contact_menu ul li {
    padding-top: 8px;
    display: inline-block;
}

#contact_menu span.active {
    /*background-color: white;*/
    padding-left: 10px;
    padding-right: 10px;

    padding-bottom: 8px;
}

#contact_menu a {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    color: black;
    text-decoration: none;
    /*margin: 0px;*/
}
#contact_menu li.active {
    margin-left: 10px;
    margin-right: 10px;
}

/*
uf20230926 begin: style the bottom menu similar to the top menu
#contact_menu li.active {
    color: #d3d83d;
}
*/
#contact_menu li.active {
  border-bottom: 1px solid #4377b1;
  color: #4377b1;
}
#contact_menu li a:hover {
    color: #4377b1;
}
/*
uf20230926 end: style the bottom menu similar to the top menu
*/

/*
#mainnav ul li.welcome:hover {
    background-color: #D7D7D7;
}
#mainnav ul li.about:hover {
    background-color: #ABE855;
}
#mainnav ul li.portfolio:hover {
    background-color: #ABE855;
}
#mainnav ul li.references:hover {
    background-color: #FFDB3F;
}
#mainnav ul li.blog:hover {
    background-color: #E8842E;
}
#mainnav ul li.contact:hover {
    background-color: #FF504E;
}

*/

#mainnav ul li.active {
    border-top: 1px solid #4377b1;
    color: #4377b1;
}

#mainnav ul li a:hover {
    color: #4377b1;
}

.work_detail #mainnav ul .references a {
    border-top: 1px solid #4377b1;
    color: #4377b1;
}

#work_top_link {
    /*margin-right: 10px;*/
    /*
    padding: 6px;
    margin: 0px;
    */
    right: 0px;
    position: fixed;
    /*background-color: #4377b1;*/
    opacity: 0.7;
}

#work_top_link .empty {
    display: none;
}

#work_top_link ul {
   padding: 0px;
   margin: 0px;
}

#work_top_link ul li {
   padding: 5px;
   margin: 0px;
   background-color: #4377b1;
}

#work_top_link ul li a {
    font-size: 1.2em;
    text-decoration: none;
    padding: 0px;
    /*background-color: #4377b1;*/

    color: white;
}

ol {
    padding-left: 1.4em;
    font-size: 1.4em;
    list-style-position: outside;
}

.formbody {
    font-size: 1.4em;
}

.contact .text ,.textarea {
    border-style: none;
    background-color: #e4e7ea;
    width: 100%;
    padding: 12px 8px;
    margin-bottom: 4px;
}

.contact input:focus, .textarea:focus {
    border-style: none;
    background-color: #ffffff;
    /*background-color: lime;*/
    outline: none;
}

.contact .ce_form table {
    width: 100%;
}

#disziplin_design ul {
    font-size: 1.2em;
}

#disziplin_entwicklung ul {
    font-size: 1.2em;
}


@media (max-width: 767px) {

    #menu_icon.cssonly {
        display: none;
    }

    #menu_icon {
        display: block;
    }

    #main {
        margin-top: 20px;
    }

    #mainnav ul li {
        display: none;
        font-size: 1.2em;
        padding: 6px;
        margin-left: 0px;
        margin-bottom: 12px;
    }

    #mainnav.cssonly ul li {
        display: block;
    }

    #mainnav.smallMenuOpen ul li {
        display: block;

    }

    #mainnav.smallMenuOpen {
      background-color: rgba(255, 255, 255, 0.8);
    }

    #work_top_link {
        position: static;
        display: inline-block;
        margin-left: 10px;
        margin-bottom: 0px;
        right: 20px;
    }

    #contact_form {
        /*display: none;*/
    }
    
    #mainnav, #contact_menu {
        font-size: 1.2em;
    }

    .mod_article, .mod_article[class*="grid"] {
      margin-left: 10px;
      margin-right: 10px;
    }
    
    [class*="grid"] {
      margin-left: 0;
      margin-right: 0;
    }
    
    body.about .mod_article.offset2 {
        margin-left: 10px !important;
    }
    
    .mod_article .mod_newslist, 
    .mod_article .mod_newslist [class*="layout_"] > *{
      margin-left: 0;
      margin-right: 0;
    }
    
    .mod_article .mod_newslist .layout_full {
        padding-bottom: 0;
    }
}





@font-face {
    font-family: 'nerisblack';
    src: url('../../files/fonts/neris-black-webfont.eot');
    src: url('../../files/fonts/neris-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/neris-black-webfont.woff') format('woff'),
         url('../../files/fonts/neris-black-webfont.ttf') format('truetype'),
         url('../../files/fonts/neris-black-webfont.svg#nerisblack') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




@font-face {
    font-family: 'nerislight';
    src: url('../../files/fonts/neris-light-webfont.eot');
    src: url('../../files/fonts/neris-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/neris-light-webfont.woff') format('woff'),
         url('../../files/fonts/neris-light-webfont.ttf') format('truetype'),
         url('../../files/fonts/neris-light-webfont.svg#nerislight') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




@font-face {
    font-family: 'nerissemibold';
    src: url('../../files/fonts/neris-semibold-webfont.eot');
    src: url('../../files/fonts/neris-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../files/fonts/neris-semibold-webfont.woff') format('woff'),
         url('../../files/fonts/neris-semibold-webfont.ttf') format('truetype'),
         url('../../files/fonts/neris-semibold-webfont.svg#nerissemibold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#hambi {
    transition-duration: 0.5s;
    position: absolute;
    width: 45px;
    height: 45px;
    top: 15px;
    right: 15px;
    display: none;
}
@media (max-width: 767px) {
    #hambi {
        display: block;
    }
}
#hambi .icon-left {
    transition-duration: 0.5s;
    position: absolute;
    height: 6px;
    width: 22.5px;
    top: 22.5px;
    background-color: #212121;
    left: 0px;
}
#hambi .icon-left:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 22.5px;
    height: 6px;
    background-color: #212121;
    content: "";
    top: -15px;
}
#hambi .icon-left:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 22.5px;
    height: 6px;
    background-color: #212121;
    content: "";
    top: 15px;
}
#hambi .icon-left:hover {
    cursor: pointer;
}
#hambi .icon-right {
    transition-duration: 0.5s;
    position: absolute;
    height: 6px;
    width: 22.5px;
    top: 22.5px;
    background-color: #212121;
    left: 22.5px;
}
#hambi .icon-right:before {
    transition-duration: 0.5s;
    position: absolute;
    width: 22.5px;
    height: 6px;
    background-color: #212121;
    content: "";
    top: -15px;
}
#hambi .icon-right:after {
    transition-duration: 0.5s;
    position: absolute;
    width: 22.5px;
    height: 6px;
    background-color: #212121;
    content: "";
    top: 15px;
}
#hambi.open .icon-left {
    transition-duration: 0.5s;
    background: transparent;
}
#hambi.open .icon-left:before {
    transform: rotateZ(45deg) scaleX(1.4) translate(3px, 3px);
}
#hambi.open .icon-left:after {
    transform: rotateZ(-45deg) scaleX(1.4) translate(3px, -3px);
}
#hambi.open .icon-right {
    transition-duration: 0.5s;
    background: transparent;
}
#hambi.open .icon-right:before {
    transform: rotateZ(-45deg) scaleX(1.4) translate(-3px, 3px);
}
#hambi.open .icon-right:after {
    transform: rotateZ(45deg) scaleX(1.4) translate(-3px, -3px);
}
#hambi:hover {
    cursor: pointer;
}

