@media all and (max-width: 850px) {

     nav {
          display: block;
          position:fixed;
          height: 100%;
          background: white;
          width: 100%;
          border-right: 2px solid whitesmoke;
          box-sizing: border-box;
          visibility: hidden;
          opacity: 0;
          z-index: 10;
          transition: visibility 0.5s, opacity 0.5s linear;
     }
     
     nav.open {
          visibility: visible;
          opacity: 1;    
     }
     
     nav ul{
          text-align: center;
     }
     
     nav ul li{
          padding: 8px;
          font-weight: 200;
          font-size: 20px;
          width: 200px;
          margin: auto;
          box-sizing: border-box;
          border: none;
     }
     
     nav ul li:hover a{
          color: #BCAAA4;
     }
     
     nav ul li:hover{
          border: none;
     }

     #content{
          height:100%;
          background: white;
          width: 100%;
          margin-left: 0px;
          position: relative;
          box-sizing: border-box;
     }
     
     #content div {
          padding-top: 24px;
     }

     #content section{
          width: calc(100% - 128px);
          margin-left: 64px;
          position: absolute;
     }
     
     #button_menu {
          display: block;
          cursor: pointer;
          width: 26px;
          height: 24px;
          margin-left: auto;
          margin-right: auto;
          padding: 16px;
          padding-top: 20px;
          bottom: 24px;
          position: fixed;
          z-index: 100;
          left: 0;
          right: 0;
          background-color: #BCAAA4;
          border-radius: 2px;
          transition: background-color 0.5s cubic-bezier(0, 0, 1, 0.18);
     }
     
     #button_menu.open {
          background-color: white;
     }

     #button_menu i {
          background-color: #000;
          content: '';
          display: block;
          width: 100%;
          height: 4px;
     }
     
     #button_menu i:nth-child(1) {
          -webkit-animation: outT 0.8s backwards;
          animation: outT 0.8s backwards;
          -webkit-animation-direction: reverse;
          animation-direction: reverse;
     }
     
     #button_menu i:nth-child(2) {
          margin: 5px 0;
          -webkit-animation: outM 0.8s backwards;
          animation: outM 0.8s backwards;
          -webkit-animation-direction: reverse;
          animation-direction: reverse;
     }
     
     #button_menu i:nth-child(3) {
          -webkit-animation: outBtm 0.8s backwards;
          animation: outBtm 0.8s backwards;
          -webkit-animation-direction: reverse;
          animation-direction: reverse;
     }
     
     #button_menu.open i:nth-child(1) {
          -webkit-animation: inT 0.8s forwards;
          animation: inT 0.8s forwards;
     }
     
     #button_menu.open i:nth-child(2) {
          -webkit-animation: inM 0.8s forwards;
          animation: inM 0.8s forwards;
     }
     
     #button_menu.open i:nth-child(3) {
          -webkit-animation: inBtm 0.8s forwards;
          animation: inBtm 0.8s forwards;
     }
     
     .ripple {
          transition: none;
     }
     
     .ripple.start{
          border-radius: 0 0 100% 0;
          max-width: 0;
          max-height: 0;
          background: whitesmoke;
          z-index:0;
          transition: none;
     }

     .ripple.end{
          border-radius: 0;
          max-width: 100%;
          max-height: 100%;
          background: white;
     }
}