:root{
  /*  Background Color Scheme  */
  --home: white;
  --home-o: rgba(247,184,51, 1);
  --likes: white;
  --likes-o: rgba(247,184,51, 1);
  --search: white;
  --search-o: rgba(247,184,51, 1);
  --profile: white;
  --profile-o: rgba(247,184,51, 1);
  /*  Text Colors  */
  --dark-text: white;
  --grey-text: hsl(0, 0%, 29%);
  
  --menucolor: #524ec5;
}


.topmenuecontainer, .topmenuecontainerSmall{
  z-index: 100;
  position: -webkit-fixed;
  position: fixed;
  top: 0;

  display: flex;
  flex-direction: row;
  flex-wrap: none;
  width: 100%;
  color: white;
  background-color: #524ec5;
/*  overflow:hidden;*/
  justify-content: space-between;

-webkit-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.17);
-moz-box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.17);
box-shadow: 0px 2px 3px 1px rgba(0,0,0,0.17);
}

.topmenuecontainerSmall{
  display: none;
}

.menuecontainer{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow:hidden;
}

.menuecontainer > div {
  cursor: pointer;
  padding: 1em 2em;
}

.menuecontainer > div:hover{
  border-bottom: 4px currentColor solid;
  padding-bottom: calc(1em - 4px);
}

.menuecontainer > .checkedmenuitem {
  font-weight: bold;
  border-bottom: 4px currentColor solid;
  padding-bottom: calc(1em - 4px);
}

.menuecontainer > div > ul {
  position: absolute;
  left: 0px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100vw;
  color: #524ec5;
  background-color: #f1f1f1;
  overflow:hidden;
  list-style: none;
  visibility: hidden;
  margin-top: calc(1em + 1px);
  font-weight: normal;
  border-top: 1px #524ec5 solid;
  border-bottom: 1px #524ec5 solid;

  overflow: hidden;

  -webkit-box-shadow: 0px 8px 9px 1px rgba(0,0,0,0.11);
  -moz-box-shadow: 0px 8px 9px 1px rgba(0,0,0,0.11);
  box-shadow: 0px 8px 9px 1px rgba(0,0,0,0.11);
}

.menuecontainer > div:hover > ul {
  visibility: visible;
}

.checkedmenuitem > ul {
  font-weight: normal;
}

.menuecontainer ul > a:hover li,
.menuecontainer .checkedsubmenuitem {
  border-bottom: 4px #524ec5 solid;
  padding-bottom: calc(1em - 4px);
}

.menuecontainer .checkedsubmenuitem{
  font-weight: bold;
  padding-bottom: calc(1em - 4px);
}

.menuecontainer li {
  cursor: pointer;
  padding: 1em 1.5em;
  text-align: center;
}

#bergtrefflogo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 1em 2em;
  white-space: nowrap;
}

.menupreview {
  height: 150px;
  width: 150px;
  object-fit: cover;
}

/* that behaves like the normal menu - since the normal menu is "position: fixed" the content would be too high and behind the menu. So this is hidden and takes care that the contents position is done correctly. */
.fakeplaceholdermenu{
  visibility: hidden;
  position: static;
}

.smallmenuicon span {
	-webkit-transition-duration: 0s; transition-duration: 0s;
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.smallmenuicon:hover span {
	background-color: rgba(0,0,0,0.0);
	-webkit-transition-delay: 0.2s; transition-delay: 0.2s;
}
.smallmenuicon span:before {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.smallmenuicon:hover span:before {
	margin-top: 0;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}
.smallmenuicon span:after {
	-webkit-transition-property: margin, -webkit-transform; transition-property: margin, transform;
	-webkit-transition-duration: 0.2s; transition-duration: 0.2s;
	-webkit-transition-delay: 0.2s, 0s; transition-delay: 0.2s, 0s;
}
.smallmenuicon:hover span:after {
	margin-top: 0;
	-webkit-transform: rotate(-45deg); transform: rotate(-45deg);
	-webkit-transition-delay: 0s, 0.2s; transition-delay: 0s, 0.2s;
}




/*--- small menu --- */
:root{
  /*  Background Color Scheme  */
  --home: white;
  --home-o: rgba(247,184,51, 1);
  --likes: white;
  --likes-o: rgba(247,184,51, 1);
  --search: white;
  --search-o: rgba(247,184,51, 1);
  --profile: white;
  --profile-o: rgba(247,184,51, 1);
  /*  Text Colors  */
  --dark-text: white;
  --grey-text: hsl(0, 0%, 29%);
}

.tab-bar p{
  margin: 0;
  display: none;
}

.tab-bar{
  --border-radius: 0px;
  background-color: #524ec5;
  width: 100%;
  height: 60px;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  bottom: 0;
}

.tab-bar .button{
/*   width: 90px; */
  display: flex;
  justify-content: center;
  align-items: center;
/*   height: 50px; */
  padding: 12px 15px;
  margin: 5px;
  border-radius: 30px;
/*   overflow: hidden; */
  width: 40px;
/*   margin-left: -50%; */
  font-weight: 500;
  cursor: pointer;
}

.tab-bar .button svg{
  height: 25px;
  vertical-align: middle;
  
}

.tab-bar .button.selected svg{
  padding-right: 10px;
}

.tab-bar .button path{
  fill: var(--dark-text)
}

.tab-bar .button.home.selected{
/*   background-color: var(--home-o); */
  color: var(--home);
}

.tab-bar .button.home.selected path{
  fill: var(--home);
}

.tab-bar .button.likes.selected{
  background-color: var(--likes-o);
  color: var(--likes);
}

.tab-bar .button.likes.selected path{
  fill: var(--likes);
}

.tab-bar .button.search.selected{
  background-color: var(--search-o);
  color: var(--search);
}

.tab-bar .button.search.selected path{
  fill: var(--search);
}

.tab-bar .button.profile.selected{
  background-color: var(--profile-o);
  color: var(--profile);
}

.tab-bar .button.profile.selected path{
  fill: var(--profile);
}

.selected.home{
  animation: grow-h .2s linear forwards;
}
.selected.likes{
  animation: grow-l .2s linear forwards;
}
.selected.search{
  animation: grow-s .2s linear forwards;
}
.selected.profile{
  animation: grow-p .2s linear forwards;
}
.selected p{
  animation: fadein .1s linear forwards;
  display: inherit;
}

.deselected.home{
  animation: shrink-h .2s linear forwards;
}
.deselected.likes{
  animation: shrink-l .2s linear forwards;
}
.deselected.search{
  animation: shrink-s .2s linear forwards;
}
.deselected.profile{
  animation: shrink-p .2s linear forwards;
}

@keyframes grow-h{
  0%{
    width: 40px;
    background-color: none;
  }
  100%{
    width: 90px;
    background-color: var(--home-o);
  }
}
@keyframes grow-l{
  0%{
    width: 40px;
    background-color: none;
  }
  100%{
    width: 90px;
    background-color: var(--likes-o);
  }
}

@keyframes grow-s{
  0%{
    width: 40px;
    background-color: none;
  }
  100%{
    width: 90px;
    background-color: var(--search-o);
  }
}

@keyframes grow-p{
  0%{
    width: 40px;
    background-color: none;
  }
  100%{
    width: 90px;
    background-color: var(--profile-o);
  }
}

@keyframes shrink-h{
  0%{
    width: 90px;
    background-color: var(--home-o);
  }
  100%{
    width: 40px;
    background-color: none;
  }
}

@keyframes shrink-l{
  0%{
    width: 90px;
    background-color: var(--likes-o);
  }
  100%{
    width: 40px;
    background-color: none;
  }
}

@keyframes shrink-s{
  0%{
    width: 90px;
    background-color: var(--search-o);
  }
  100%{
    width: 40px;
    background-color: none;
  }
}

@keyframes shrink-p{
  0%{
    width: 90px;
    background-color: var(--profile-o);
  }
  100%{
    width: 40px;
    background-color: none;
  }
}

@keyframes fadein{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

@keyframes fadeout{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
/*-------------------*/




/* --- GOOEY MENU --- */
.menu {
  -webkit-filter: url("#shadowed-goo");
          filter: url("#shadowed-goo");
}

.menu-item, .menu-open-button {
  background: var(--menucolor);;
  border-radius: 100%;
  width: 70px;
  height: 70px;
  position: fixed;
  bottom: -23px;
  color: white;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform ease-out 200ms;
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
  font-size: 0.8em;
  text-decoration: none;
  
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
}

.menu-open {
  display: none;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  -webkit-transition: -webkit-transform 200ms;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.hamburger-1 {
  -webkit-transform: translate3d(0, -8px, 0);
          transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  -webkit-transform: translate3d(0, 8px, 0);
          transform: translate3d(0, 8px, 0);
}

.menu-open:checked + .menu-open-button .hamburger-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
          transform: translate3d(0, 0, 0) rotate(45deg);
}
.menu-open:checked + .menu-open-button .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
          transform: translate3d(0, 0, 0) scale(0.1, 1);
}
.menu-open:checked + .menu-open-button .hamburger-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
          transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  position: relative;
  /*left: 50%;*/
  /*bottom: 0;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;*/
  width: 80px;
  /*height: 250px;*/
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item:hover {
  background: var(--home-o);
  color: var(--home);
}
.menu-item:nth-child(3) {
  -webkit-transition-duration: 70ms;
          transition-duration: 70ms;
}
.menu-item:nth-child(4) {
  -webkit-transition-duration: 130ms;
          transition-duration: 130ms;
}
.menu-item:nth-child(5) {
  -webkit-transition-duration: 190ms;
          transition-duration: 190ms;
}
.menu-item:nth-child(6) {
  -webkit-transition-duration: 250ms;
          transition-duration: 250ms;
}
.menu-item:nth-child(7) {
  -webkit-transition-duration: 310ms;
          transition-duration: 310ms;
}

.menu-open-button {
  z-index: 101;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
          transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
          transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked + .menu-open-button {
  background-color: var(--home-o);
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: 200ms;
          transition-duration: 200ms;
  -webkit-transform: scale(0.75, 0.75) translate3d(0, 0, 0);
          transform: scale(0.75, 0.75) translate3d(0, 0, 0);
}

.menu-open:checked ~ .menu-item {
  -webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
          transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);

  width: 80px;
  height: 80px;
}
.menu-open:checked ~ .menu-item:nth-child(3) {
  -webkit-transition-duration: 160ms;
          transition-duration: 160ms;
  -webkit-transform: translate3d(114.42548px, -21.48084px, 0);
          transform: translate3d(114.42548px, -21.48084px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(4) {
  -webkit-transition-duration: 240ms;
          transition-duration: 240ms;
  -webkit-transform: translate3d(77.18543px, -93px, 0);
          transform: translate3d(77.18543px, -93px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(5) {
  -webkit-transition-duration: 320ms;
          transition-duration: 320ms;
  -webkit-transform: translate3d(0.09158px, -121px, 0);
          transform: translate3d(0.09158px, -121px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(6) {
  -webkit-transition-duration: 400ms;
          transition-duration: 400ms;
  -webkit-transform: translate3d(-77.04956px, -95.37192px, 0);
          transform: translate3d(-77.04956px, -95.37192px, 0);
}
.menu-open:checked ~ .menu-item:nth-child(7) {
  -webkit-transition-duration: 480ms;
          transition-duration: 480ms;
  -webkit-transform: translate3d(-114.40705px, -21.66307px, 0);
          transform: translate3d(-114.40705px, -21.66307px, 0);
}


/* --------- */


.menu a, .topmenuecontainerSmall a{
  text-decoration: none;
}

.menuecontainer a{
  text-decoration: inherit;
}

.menuecontainer a:link, .menuecontainer a:visited,
.menu a:link, .menu a:visited {
  color: inherit;
}

.tab-bar > a:hover, .tab-bar > a:active,
.menuecontainer a:hover, .menuecontainer a:active {
  transition: all 0s;
  color: inherit;
  border-radius: 0;
  padding: 0;
  margin: 0;
  z-index: inherit;
  background-color: inherit;
}

.menu a:hover, .menu a:active {
  transition: all 0s;
  color: inherit;
  border-radius: 100%;
  padding: inherit;
  margin: inherit;
  z-index: inherit;
}



@media only screen and (max-width : 993px) {
  .topmenuecontainer {
    display: none;
  }
  .topmenuecontainerSmall {
    display: flex;
  }
  
  .bergtreff-footer {
	margin-bottom: 60px;
  }
}