header {
    position:relative;
    margin:0;
    left:0;
    top:0;
    width:100%;
    height:128px;
    transition:height 0.6s ease;
    /*box-shadow:10px -100px 100px 10px #232323;*/
}

header.expanded {
    height:208px;
}

#logo {
    position:fixed;
    left:30px;
    top:20px;
    z-index:100;
    transition:opacity 1s ease;
    cursor:pointer;
    opacity:1.0;
}

#logo:hover {
    opacity:0.7;
}

#logo span {
    position:absolute;
    top:75px;
    left:218px;
    height:31px;
    width:80px;
    font-size:1.1rem;
    opacity:1;
    transition:opacity 1.2s ease;
    background-color:#23ae87;
    color:white;
    padding:1px 6px;
    white-space:nowrap;
    line-height:31px;
    font-weight:300;
    text-align:center;
}

#logo span.visible {
    opacity:1;
}

#logo img {
    position:absolute;
    top:0px;
    height:120px;
    left:0px;
}

#home-container {
    position:fixed;
    top:5px;
    height:32px;
    left:341px;
    right:341px;
    background-color:#ffffff;
    transition:all 1.2s ease;
    opacity:0;
    visibility:hidden;
    z-index:100;
}

#home-container.fixed {
    opacity:1;
    visibility:visible;
}

#path {
    position: absolute;
    bottom: 5px;
    font-size: 0.8rem;
    left: 8px;
}

.arrow {
    color:#23ae87;
}

.path-link {
    background-color:#ffffff;
    color:#232323;
    transition:all 0.5s ease;
    cursor:pointer;
    padding:2px 4px;
    font-weight:300;
    position:relative;
    top:-1px;
}

.path-link:hover {
    background-color:#fe5f58;
    color:#ffffff;
}

.path-link.selected {
    background-color:#23ae87;
    color:#ffffff;
}

#bricks {
    position:absolute;
    text-align:center;
    left:50%;
    top:0;
    margin-left:120px;
    width:130px;
    height:100%;
    overflow:hidden;
    font-size:1.1rem;
    line-height:1.5rem;
    transition:top 1s ease;
    z-index:-10;
}

#header-left {
    position:absolute;
    left:0;
    top:0;
    width:340px;
    height:128px;
}

#header-center {
    position:absolute;
    text-align:center;
    left:25%;
    top:0;
    margin-left:50px;
    width:360px;
    height:140px;
    font-size:1.1rem;
    line-height:1.5rem;
    transition:top 1s ease;
}

#header-right {
    position:absolute;
    right:40px;
    top:0px;
    width:300px;
    height:156px;
}

#search {
    position: absolute;
    top: 67px;
    left: 120px;
    width: 60px;
    height: 60px;
}

#search img {
    margin: auto;
    position: absolute;
    max-width: 50%;
    left: 0;
    right: 0;
    top: 4px;
    bottom: 0;
}

#cart {
    position: absolute;;
    right:60px;
    top:59px;
    background-color:#23ae87;
    width:80px;
    border-radius:100px;
    height:80px;
    cursor:pointer;
    transition:all 0.4s ease;
    z-index:10;
}

#cart img {
    margin: auto;
    position: absolute;
    max-width: 40%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 4px;
}

#cart:hover {
    right:50px;
    top:49px;
    width:100px;
    height:100px;
}

.line {
    position:absolute;
    background-color:#23ae87;
}

.line.horizontal {
    height:1px;
    width:0;
}

.line.vertical {
    width:1px;
    height:0;
}

#line-center-container {
    position:absolute;
    left:340px;
    top:127px;
    right:340px;
    height:1px;
}

#line-center-container.fixed {
    position:fixed;
    top:37px;
    z-index:100;
}

#line-center {
    left:0px;
    top:0px;
}

/* ********** */
/* Lines Left */
/* ********** */

#line-left-1 {
    left:0px;
    top:95px;
}

#line-left-2 {
    left:20px;
    bottom:33px;
}

#line-left-3 {
    left:20px;
    top:95px;
}

#line-left-4 {
    left:20px;
    top:95px;
}

#line-left-5 {
    left:340px;
    top:95px;
}

#line-left-5.fixed {
    position:fixed;
    top:5px;
    z-index:100;
}

#line-left-6 {
    right:320px;
    top:800px;
}

/* ************ */
/* Lines Center */
/* ************ */

#line-center-1 {
    left:0px;
    top:0px;
}

#line-center-2 {
    left:0px;
    bottom:0px;
}

#line-center-3 {
    left:120px;
    bottom:73px;
}

#line-center-4 {
    left:120px;
    top:67px;
}

#line-center-5 {
    left:0px;
    bottom:0px;
}

#line-center-6 {
    left:240px;
    bottom:45px;
}

#line-center-7 {
    left:0px;
    bottom:0px;
}

#line-center-8 {
    left:360px;
    bottom:85px;
}

/* *********** */
/* Lines Right */
/* *********** */

#line-right-1 {
    left:0px;
    top:0px;
}

#line-right-2 {
    left:0px;
    bottom:29px;
}

#line-right-2.fixed {
    position:fixed;
    top:9px;
    left:auto;
    bottom:auto;
    right:339px;
    z-index:100;
}

#line-right-3 {
    left:0px;
    top:95px;
}

#line-right-4 {
    left:0px;
    top:99px;
}

#line-right-5 {
    left:120px;
    bottom:61px;
}

#line-right-6 {
    left:120px;
    top:99px;
}
/*
#line-right-6.fixed {
    position:fixed;
    top:9px;
    left:auto;
    bottom:auto;
    right:219px;
    z-index:100;
}
*/
#line-right-7 {
    left:120px;
    top:67px;
}

#line-right-8 {
    left:120px;
    top:127px;
}

#line-right-9 {
    left:180px;
    bottom:89px;
}

#line-right-10 {
    left:180px;
    top:127px;
}

#line-right-11 {
    left:180px;
    top:39px;
}

#line-right-12 {
    left:180px;
    top:155px;
}

#line-right-13 {
    left:300px;
    bottom:61px;
}

#line-right-14 {
    left:300px;
    top:99px;
}

#line-right-15 {
    left:300px;
    top:95px;
}

#line-right-16 {
    left:300px;
    top:99px;
}

#line-right-17 {
    right:-40px;
    top:800px;
}

#line-right-18 {
    right:-20px;
    top:800px;
}

.menu-container {
    position:absolute;
    display:block;
    background-color:rgba(255,255,255,0);
    transition:all 0.6s ease;
    color:#232323;
    width:121px;
    top:0;
    cursor:pointer;
    overflow:hidden;
}

.menu-container.expanded {
    cursor:default;
}

#header-center .menu-container:hover, #header-center .menu-container.expanded {
    background-color:#23ae87;
}

#header-center .menu-container:hover .menu, #header-center .menu-container.expanded .menu {
    color:#ffffff;
}

.menu {
    position:absolute;
    font-size:1rem;
    text-align:center;
    line-height:40px;
    transition:all 0.6s ease;
    height:40px;
    width:121px;
    font-weight:300;
    bottom:0;
    left:0;
}

.submenu {
    position:absolute;
    font-size:0.9rem;
    text-align:center;
    line-height:27px;
    height:27px;
    width:119px;
    font-weight:300;
    left:0px;
    color:#232323;
    transition:all 0.5s ease;
    cursor:pointer;
    border-style:solid;
    border-color:#23ae87;
    border-width:1px;
}

.submenu:hover {
    background-color:#29cd9f;
    color:#ffffff;
}
/*
#menu-buecher {
    left:-121px;
    width:242px;
    top:56px;
    height:40px;
}

#menu-buecher:hover {
    top:49px;
    height:46px;
}
*/
/*
@keyframes example-1 {
  0%   {top:49px; height:46px;}
  100%  {top:28px; height:68px;}
}

#menu-buecher.expanded {
    top:28px;
    height:68px;
    animation-name: example-1;
    animation-duration: 0.4s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
*/

#header-right .menu-container:hover .menu, #header-right .menu-container.expanded .menu {
    background-color:#23ae87;
    color:#ffffff;
}
/*
#menu-buecher .submenu {
    left:121px;
    width:119px;
    top:40px;
    height:26px;
    bottom:auto;
}

@keyframes example-3 {
  0%   {left:121px;}
  100% {left:1px;}
}

#menu-buecher .submenu:last-of-type {
    left:121px;
    width:119px;
    bottom:auto;
}

#menu-buecher.expanded .submenu:last-of-type {
    left:1px;
    animation-name: example-3;
    animation-delay:0.4s;
    animation-duration: 0.6s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
*/

#header-right .menu-container.top {
    left:0px;
    top:56px;
    height:40px;
}

#header-right .menu-container.top:hover {
    top:44px;
    height:46px;
}

/*
#header-right .menu-container.top .menu {
    top:0;
    bottom:auto;
}
*/

#header-right .menu-container.bottom {
    left:0px;
    top:99px;
    height:40px;
}

#header-right .menu-container.bottom:hover {
    height:46px;
}

@keyframes example-2 {
  0%   {height:46px;}
  40%  {height:67px;}
  100% {height:95px;}
}

#header-right .menu-container.expanded {
    height:95px;
    animation-name: example-2;
    animation-duration: 1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

#header-right .menu-container .submenu {
    display:none;
}

#header-right .menu-container.expanded .submenu {
    display:block;
    bottom:40px;
    height:25px;
}

#header-right .menu-container.expanded .submenu:last-of-type {
    display:block;
    bottom:66px;
    height:27px;
}

#menu-neues {
    height:67px;
}

#menu-neues:hover {
    height:73px;
}

#menu-neues.expanded {
    height:77px;
}

#menu-sale {
    left:120px;
    height:95px;
}

#menu-sale:hover {
    height:101px;
}

#menu-sale.expanded {
    height:105px;
}

#menu-events {
    left:240px;
    height:55px;
}

#menu-events:hover {
    height:61px;
}

#menu-events.expanded {
    height:65px;
}

.brick {
    position:relative;
    margin-top:15px;
    height:15px;
    width:80px;
    background-color:#23ae87;
    opacity:0;
    transition:opacity 1.4s ease;
    border-radius:3px;
}

.b1 {
    left:40px;
}

.b2 {
    left:0px;
}

.b3 {
    left:50px;
}

nav#filter {
    position:absolute;
    text-align:right;
    right:40px;
    width:400px;
    font-size:1.2rem;
    top:22.4px;
}

nav#menu > div > ul > li.selected {
    margin:0;
    padding:0;
    max-width:0;
}

.name-list {
    position: absolute;
    top: 128px;
    width: 50%;
    left:60px;
    right:0;
    transition:all 1s ease;
    max-height:0px;
    overflow:hidden;
}

.name-list.expanded {
    visibility:visible;
    opacity:1;
    max-height:140px;
}

.name-list .alphabet {
    position:relative;
    width:calc(100% - 42px);
    margin:0;
    padding-top:18px;
    padding-left:20px;
    padding-right:20px;
    font-size:1rem;
    font-weight:300;
    text-align:justify;
    border-bottom-color:#23ae87;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-right-color:#23ae87;
    border-right-style:solid;
    border-right-width:1px;
}

.name-list .alphabet li {
    max-width: none;
    line-height: 28px;
    display: inline;
    margin: 0;
    padding: 1px 4px;
    font-weight:400;
    color:#dedede;
    transition:all 0.6s ease;
}

.name-list .alphabet li.present {
    cursor:pointer;
    background-color:#ffffff;
    color:#5d5d5d;
}

.name-list .alphabet li.present:hover {
    background-color:#fe5f58;
    color:#ffffff;
}

.name-list .alphabet li.present.selected {
    background-color:#23ae87;
    color:#ffffff;
}

.name-list .alphabet .separator {
    display: inline-block;
    line-height: 28px;
    height: 20px;
    position: relative;
    margin-left: -3px;
    margin-right: -3px;
    color:#8f8f8f;
}

.name-list .filler {
    display:inline-block;
    height:1px;
    width:100%;
}

.name-list .names {
    position:relative;
    width:calc(100% - 42px);
    margin:0;
    /*padding-top:6px;
    padding-bottom:24px;*/
    padding-left:20px;
    padding-right:0;
    font-size:1rem;
    font-weight:300;
    text-align:justify;
    border-left-color:#23ae87;
    border-left-style:solid;
    border-left-width:1px;
    max-height:0px;
    overflow:hidden;
    transition:all 0.4s ease;
}

.name-list .names.selected {
    max-height:120px;
}

.name-list .names li {
    max-width:none;
    display:inline-block;
    line-height:28px;
    padding-left:4px;
    padding-right:4px;
    transition:all 0.6s ease;
    cursor:pointer;
}

.name-list .names li:hover {
    background-color:#fe5f58;
    color:#ffffff;
}

.name-list .names li.selected {
    background-color:#23ae87;
    color:#ffffff;
}