header {
  position: fixed;
  width: 100%;
  padding: 16px 4px 0 10px;
  top: 0;
  left: 0;
  height: 69px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  z-index: 4;
  flex-direction: column;
  /* background: #00000040; */
  /* transform: translateY(50px); */
  }

#logo {
  width: 160px;
  height: 60;
  background-repeat: no-repeat;
  background-position: right;
  background-size: 100px;
  transition: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  margin-left: -4px;
  top: 12px;
  left: 39px;
  position: fixed;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 10;
  border-radius: 11px;
  cursor: pointer;
}

#ribbon{
    
width: 100%;height: 50px;top: 0;left: 0;background: #f84536;display: flex;justify-content: center;align-items: center;font-weight: 700;overflow: hidden;height: 50px;/* display: none; *//* border-radius: 10px; *//* margin: 10px; */font-size: 18px;cursor: pointer;overflow: hidden;position: relative;display: flex;z-index: 10;position: fixed;}

#logo.visible:hover #c{
    transform: scale(1) translate3d(0px, 0px, 0px);
}

#ribbon button{
    
}

#logo.visible:hover #wordmark{
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    filter: blur(0px);
}

#c{
    transition: 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
}

#wordmark{
    transition: 0.15s cubic-bezier(0.22, 0.61, 0.36, 1);
    filter: blur(0px);
}

#logo.visible{
    transform: translate3d(-2px,9px,0);
}

#logo svg{
    position: absolute;
    width: 100%;
}

#logo.visible #wordmark{
    opacity: 0;
    transform: translate3d(-100px, 0px, 0px);
    filter: blur(3px);
}

#logo.visible #c{
    transform: scale(1.5) translate3d(27px, -1px, 10px);
}

.toTop{

margin-right: 10px;

width: 40px;

background: #86868633;

backdrop-filter: blur(20px);
}

#logo.collapsed{
    width: 0px;
    opacity: 1;
}

.logo-white{
    width: 22px;
    height: 59px;
    background-image: url("../../files/logo-w.svg");
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    transition: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1;
    position: absolute;
    border-bottom-left-radius: 9px;
}

header button{
    position: relative;
    cursor: pointer;
}

header button.updates{
    position: relative;
    cursor: pointer;
    margin-right: 6px;
    /* width: 137px; */
    color: wheat;
    /* background: #e7e7e7; */
    /* text-decoration: underline; */
    color: #4d4d4d;
    background: #f2f2f4;
    box-shadow: none;
    }

header hr{
    position: absolute;
    width: 89px;
    top: 27px;
    background: #ffffff47;
    display: none;
}

header .backdrop{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    height: 55px;
    margin: 15px;
    border-radius: 18px;
    box-shadow: 0 0px 0px #0000003b;
}


header#hdr.scrolled{
    /* box-shadow: 0 1px 20px #0000003b; */
    backdrop-filter: blur(20px);
}


header.scrolled .backdrop{
    background: white;
    box-shadow: 0 1px 20px #0000003b;
}

#hdr #inlineRibbon{

color: #ffffff;margin-left: 201px;margin: auto;right: 328px;position: absolute;background: #ffffff0d;padding: 15px 16px 10px 14px;overflow: hidden;border-radius: 0;height: 100%;box-sizing: border-box;display: flex;align-items: flex-start;flex-direction: column;justify-content: flex-start;display: none;/* border-radius: 15px; *//* backdrop-filter: blur(30px); */border-left: 1px solid #ffffff21;border-right: 1px solid #ffffff21;}

#inlineRibbon span{

/* background: #f84536; */padding: 0 20px;color: #f84536;font-size: 14px;font-weight: 600;text-align: center;width: auto;}

#inlineRibbon a{
    
padding: 0 20px;/* color: #161616; */font-weight: 600;}

#hdr.scrolled .updates{
}

#hdr.scrolled .backdrop{

}

#hdr.scrolled #inlineRibbon{
background: #0000000d;color: #00000082;font-weight: 600;border-left: 1px solid #00000030;border-right: 1px solid #00000030;cursor: pointer;display: none;}

#hdr.scrolled #inlineRibbon span{
    color: gray}

#hdr.scrolled .ribbon{
}

#hdr.scrolled .nav{/* background: #ffffff; *//* box-shadow: 0 1px 20px #0000003b; */}

.button-group{
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-dark{
    width: 35px;
    height: 59px;
    background-image: url("../../files/symbol.svg");
    background-repeat: no-repeat;
    background-position: left;
    transform: scale(1) translate3d(0px, 0px,0);
    transition: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0;
    position: absolute;
}

.logo-dark{
    width: 35px;
    height: 59px;
    background-image: url("../../files/symbol.svg");
    background-repeat: no-repeat;
    background-position: left;
    transform: scale(1) translate3d(0px, 0px,0);
    transition: 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0;
    z-index: 11;
    position: absolute;
}

#logo.collapsed .logo-white{
    transform: scale(1) translate3d(-30px, 6px,0);
    /* opacity: 1; */
}

#logo.collapsed .logo-dark{
    transform: scale(1) translate3d(-30px, 6px,0);
    opacity: 1;
}

header .nav{

display: flex;width: 100%;height: 65px;padding: 0px 20px;box-sizing: border-box;position: relative;justify-content: center;align-items: center;flex-grow: 1;/* border-top:   1px solid #ffffff21; */}


header.hidden{

/* transform: translateY(-120px); */}

#ribbon span{flex-grow: 1;height: 100%;text-align: center;display: flex;justify-content: center;align-items: center;}

#ribbon .close{
    
background: #00000021;height: 100%;width: 58px;/* position: absolute; */right: 0;background-image: url(../../files/close.svg);background-size: 13px;background-repeat: no-repeat;background-position: center;}


header button {
  /* width: 142px; */
  height: 40px;
  border-radius: 12px;
  border: none;
  color: #ffffff;
  font-family: 'Greycliff';
  font-weight: 700;
  font-size: 15px;
  z-index: 0;
  /* box-shadow: none; */
  /* background: transparent; */
}