.r-button{
    --uirButtonBackgroundColor: var(--rButtonBackgroundColor, transparent);
    --uirButtonPadding: var(--rButtonPadding, var(--rButtonPaddingTop, 0) var(--rButtonPaddingRight, 0) var(--rButtonPaddingBottom, 0) var(--rButtonPaddingLeft, 0));
    --uirButtonBorderWidth: var(--rButtonBorderWidth, 0);
    --uirButtonBorderStyle: var(--rButtonBorderStyle, solid);
    --uirButtonBorderColor: var(--rButtonBorderColor, currentColor);
    --uirButtonFontFamily: var(--rButtonFontFamily, inherit);
    --uirButtonFontSize: var(--rButtonFontSize,  inherit);
    --uirButtonColor: var(--rButtonColor);
  
    background-color: var(--uirButtonBackgroundColor);
    padding: var(--uirButtonPadding);
  
    border-width: var(--uirButtonBorderWidth);
    border-style: var(--uirButtonBorderStyle);
    border-color: var(--uirButtonBorderColor);
  
    cursor: pointer;
  
    font-family: var(--uirButtonFontFamily);
    font-size: var(--uirButtonFontSize);
  }
  
  .r-button::-moz-focus-inner,
  .r-button[type="button"]::-moz-focus-inner,
  .r-button[type="reset"]::-moz-focus-inner,
  .r-button[type="submit"]::-moz-focus-inner {
    
    /* Remove the inner border and padding in Firefox. */
    
    border-style: none;
    padding: 0;
  }
  
  /* The component will reset browser's styles of link */
  
  .r-link{
      --uirLinkDisplay: var(--rLinkDisplay, inline-flex);
      --uirLinkTextColor: var(--rLinkTextColor);
      --uirLinkTextDecoration: var(--rLinkTextDecoration, none);
  
      display: var(--uirLinkDisplay) !important;
      color: var(--uirLinkTextColor) !important;
      text-decoration: var(--uirLinkTextDecoration) !important;
  }
  
  /* The component will reset browser's styles of list */
  
  .r-list{
      --uirListPaddingLeft: var(--rListPaddingLeft, 0);
      --uirListMarginTop: var(--rListMarginTop, 0);
      --uirListMarginBottom: var(--rListMarginBottom, 0);
      --uirListListStyle: var(--rListListStyle, none);
  
      padding-left: var(--uirListPaddingLeft) !important;
      margin-top: var(--uirListMarginTop) !important;
      margin-bottom: var(--uirListMarginBottom) !important;
      list-style: var(--uirListListStyle) !important;
  }
  
  /* Basic styles of the hamburger component */
  
  .m-hamburger{
    --uiHamburgerDisplay: var(--hamburgerDisplay, inline-flex);
    --uiHamburgerWidth: var(--hamburgerWidth, 28px);
    --uiHamburgerHeight: var(--hamburgerHeight, 20px);
    --uiHamburgerThickness: var(--hamburgerThickness, 4px);
    --uiHamburgerBorderRadius: var(--hamburgerBorderRadius, 5px);
    --uiHamburgerBgColor: var(--hamburgerBgColor, currentColor);
  
    display: var(--uiHamburgerDisplay);
    width: var(--uiHamburgerWidth);
    height: var(--uiHamburgerHeight);
  
    position: relative;
    text-indent: -9999px;
  }
  
  .m-hamburger::before, 
  .m-hamburger::after, 
  .m-hamburger__label{
    width: 100%;
    height: var(--uiHamburgerThickness);
    border-radius: var(--uiHamburgerBorderRadius);
    background-color: var(--uiHamburgerBgColor);
  
    position: absolute;
    left: 0;
  }
  
  .m-hamburger::before, 
  .m-hamburger::after{
    content:"";
  }
  
  .m-hamburger::before{
    top: 0;
  }
  
  .m-hamburger::after{
    bottom: 0;
  }
  
  .m-hamburger__label{
    /* The calculation of middle hamburger button line position */
    
    top: calc(50% - calc(var(--uiHamburgerThickness) / 2));
  }
  
  /*
  =====
  MENU STYLES
  =====
  */
  
  .menu{
    --uiMenuCircleSize: var(--menuCircleSize, 100px);
    --uiMenuCircleOffset: var(--menuCircleOffset, 10px);
    --uiMenuCircleBgColor: var(--menuCircleBgColor, currentColor);
  
    --hamburgerWidth: var(--menuHamburgerWidth, 28px);
    --hamburgerHeight: var(--menuHamburgerHeight, 20px);
    --hamburgerBgColor: var(--menuHamburgerBgColor, #fff);
  
    box-sizing: border-box;
    width: 100%;
  
    display: flex;
    flex-direction: column;
    align-items: center;  
  
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9998;
  }
  
  .menu__nav{
    box-sizing: border-box;
    width: 100%;
    height: 0;
  
    transition: opacity .2s ease-out;
    opacity: 0;
  
    display: flex;
    /* align-items: flex-end; */
    z-index: 2;
    align-items: flex-start;
  }
  
  .menu__list{
    width: 100%;
    max-height: 100%;
    display: none;
  }
  
  .menu__toggle{
    box-sizing: border-box;
    width: var(--uiMenuCircleSize);
    height: calc(var(--uiMenuCircleSize) / 2);
    padding: var(--uiMenuCircleOffset);
  
    flex: none;
  
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  
  .menu__toggle::before{
    /*
    1. The font-size property is used to simplify calculations of the element's sizes and position
    2. The negative value for the bottom property need for hiding half of circle. 
    */
  
    content: "";
    width: 1em;
    height: 1em;
    font-size: var(--uiMenuCircleSize); /* 1 */
  
    background-color: var(--uiMenuCircleBgColor);
    border-radius: 50%;
  
    position: absolute;
    bottom: -.5em; /* 2 */
    left: calc(50% - .5em);
  
    will-change: width, height;
    transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
      width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
      height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
  }
  
  .menu__hamburger::before{
    /* Increase of click button area   */
  
    content: "";
    width: 100%;
    height: 100%;
  
    position: absolute;
    top: 0;
    left: 0;
  }
  
  /* styles of hamburger's animation */
  
  .m-hamburger::before, 
  .m-hamburger::after, 
  .m-hamburger__label{
    transition-timing-function: ease;
    transition-duration: .15s;  
  }
  
  .m-hamburger::before, 
  .m-hamburger::after{
    transition-property: transform;
  }
  
  .m-hamburger__label{
    transition-property: transform, opacity;
  }
  
  /*
  =====
  MENU STATES
  =====
  */
  
  .menu__hamburger:focus{
    outline: none;
  }
  
  .menu_activated{
    height: 100%;
  }
  
  .menu_activated .menu__nav{
    height: 100%;
    opacity: 1;
  
    will-change: opacity;
    transition-duration: .2s;
    transition-delay: .3s;
  }
  
  .menu_activated .menu__toggle::before{
    width: 100vmax;
    height: 100vmax;
    transform: translate3d(-50vh, -50vh, 0) scale(5);
    transition-duration: 1s;
  }
  
  .menu_activated .menu__list{
    display: flex;
    justify-content: center;
  }
  
  .menu_activated .m-hamburger::before{
    top: 50%;
    transform: translate3d(0, -50%, 0) rotate(45deg);
  }
  
  .menu_activated .m-hamburger::after{
    transform: translate3d(0, -50%, 0) rotate(135deg);
    top: 50%;
  }
  
  .menu_activated .m-hamburger__label{
    transform: rotate(-45deg) translate3d(-.285em,-.3em, 0);
    opacity: 0;
  }
  
  /*
  =====
  SETTINGS
  =====
  */
  
  :root{
    --colorWhite: #fff;
    --colorMain: rgb(166,73,78);
    --rLinkTextColor: var(--colorMain);
    --menuCircleSize: 100px;
    --menuCircleBgColor: var(--colorMain);
    --menuHamburgerWidth: 28px;
    --menuHamburgerHeight: 20px;
    --menuHamburgerBgColor: var(--colorWhite);
  }
  
  /*
  =====
  DEMO
  =====
  */
  
  @media (min-width: 768px){
  
    html{
      font-size: 62.5%;
    }
  }
  
  @media (max-width: 767px){
  
    html{
      font-size: 50%;
    }
  }
  
  
  .page{
    max-width: 380px;
    padding: 10px;
    margin: auto;  
    text-align: center;
  }
  
  .page__name{
    display: block;
    font-size: 3rem;
    font-weight: 700;
  }
  
  .page__hint{
    display: block;
    line-height: 1.45;
    margin-top: 1rem;
  }
  
  .menu__group{
    /* --rLinkTextColor: var(--colorWhite); */
    --rLinkTextColor:rgb(246,181,130);
    padding: .5rem 3rem; 
    font-size: 2.7rem;
    font-weight: 700;
    text-transform: uppercase;
  }