.control-center {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    bottom: 0;
    z-index: 99;
    right: 7%;
    margin-bottom: 3.3%;
}

.option-btn {
  background-color: #0053a5;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    box-shadow: 0px 0px 19px 5px rgb(255 255 255 / 30%);
    position: relative;
    cursor: pointer;
    z-index: 9;
}

.option-btn:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
  background-position: center center;
  background-size: 25px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyIDYxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxjaXJjbGUgY3g9IjY5LjU0NSIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+CgkJPGNpcmNsZSBjeD0iMzA2IiBjeT0iMzA2IiByPSI2OS41NDUiIGZpbGw9IiNGRkZGRkYiLz4KCQk8Y2lyY2xlIGN4PSI1NDIuNDU1IiBjeT0iMzA2IiByPSI2OS41NDUiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}

.option-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDQ3Ljk3MSA0Ny45NzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQ3Ljk3MSA0Ny45NzE7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTI4cHgiIGhlaWdodD0iMTI4cHgiPgo8Zz4KCTxwYXRoIGQ9Ik0yOC4yMjgsMjMuOTg2TDQ3LjA5Miw1LjEyMmMxLjE3Mi0xLjE3MSwxLjE3Mi0zLjA3MSwwLTQuMjQyYy0xLjE3Mi0xLjE3Mi0zLjA3LTEuMTcyLTQuMjQyLDBMMjMuOTg2LDE5Ljc0NEw1LjEyMSwwLjg4ICAgYy0xLjE3Mi0xLjE3Mi0zLjA3LTEuMTcyLTQuMjQyLDBjLTEuMTcyLDEuMTcxLTEuMTcyLDMuMDcxLDAsNC4yNDJsMTguODY1LDE4Ljg2NEwwLjg3OSw0Mi44NWMtMS4xNzIsMS4xNzEtMS4xNzIsMy4wNzEsMCw0LjI0MiAgIEMxLjQ2NSw0Ny42NzcsMi4yMzMsNDcuOTcsMyw0Ny45N3MxLjUzNS0wLjI5MywyLjEyMS0wLjg3OWwxOC44NjUtMTguODY0TDQyLjg1LDQ3LjA5MWMwLjU4NiwwLjU4NiwxLjM1NCwwLjg3OSwyLjEyMSwwLjg3OSAgIHMxLjUzNS0wLjI5MywyLjEyMS0wLjg3OWMxLjE3Mi0xLjE3MSwxLjE3Mi0zLjA3MSwwLTQuMjQyTDI4LjIyOCwyMy45ODZ6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.option-btn.open:after {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}

.option-btn.open:before {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}
.right-sidebar {
  list-style: none;
  background-color: #0053a5;
  height: 50px;
  padding: 0 25px 0 35px;
  margin: 0;
  margin-left: -25px;
  border-radius: 20px;
  box-shadow: 0px 2px 20px 2px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.right-sidebar li {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  height: 100%;
  width: 20px;
  margin-left: 20px;
  display: inline-block;
  cursor: pointer;
  opacity: 0;
}

.left-sidebar li:nth-child(1) { background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB2CAYAAAAZUrcsAAAEIUlEQVR4nO2dgY6cMAxE2Wr//5eptLo90S2EJB7b4+w8qVLVnjjww0kgwXns+7454nrwYjwiTvfPShETvkKVnf+yR8TES6hkXuMaGw+hknmPW4zQQiWzH5dYPRNOMGS0R0QrLjs6HqgMVWZe84i8iRFCJZMIq9AZmd96A1xlKTQeFqHKTEJmhfbI/LbBDwUzQiWTmFGhIzLVJCcwIlSZWYBeoZJZhJ43RRVkWpv3ZW7GO6HMMpF99PtY5cW2hLLK9BxsHY9dUu6VUEaZ0aPmkll7JhQh06M5vKMn8JZXlSXEfgqNkNkbGI/pOMszMnyqy4OjUKvMqKxEBPV4jJHzppf6nLggC5Zm0SuQo3Kpm2DkigUEZwGNDNyIXMpsjVyXO9r3hs70n+A1yHIlSuiMTAbKSY0QWlXmG2+plIvEzuhpMtllvpm5lhRagyLv4FaReeTBPs+b9bFSRZk9pMvOEFpdJnXTy/o54X74wwjtTRgttCc7q6xFinoNOgRbhq60sCzlWiKF3mVn9mu/GUbPz/16WDJUSz5BRAltZWd1mVR9KXPRDC0LnSBC6Ex2SuYkKmuDgeYGlFB/QvvRTKEa2TrgLXTmva36TwMssy0ChPrQxZBQHBRdhYQuhoQuhoQuhoTioBi5S+hiZC9BEWCyMlRvg5xgbHKVxQYyhSpLHdCgaDG8hVZedzsCzTVlz7aEFAVOJrRrUZMbj6tgBqHVs1RfcP/wDY8n4SN5lhoLVaV/bdGMK8oXS2SDoQ/9lFpFLKoEHhSWOkV320mxQSlzI3tsqZKpKppxYOZ7Siax9OXaMzKU8lP2DkpspMA6fcYmtswzM/MEN0sQS+2Lyj4fmi01spYwhOwmt1dqZLAsNZLSpTIUQO6tn+f9Vilj4wM4LBWtR4siouR6BF6l4X6YFTMbQJYat9AbgK3m/Gz50qiseHz8HbX9JmxjAjahG/H+o2fBvjrX1s+e/fzx301S2esUMTzbjZ6HteyA6UausKZo1Z0hXKQyNrlnRJaSi94nBtr8VhF6pKeKp/WYkceBSq0o9JMVlq7ApGpdLg+QPlVCsXj2713HllAuenacaIqVUD5Mj0oSiidq1H36eyTUztUnkymb50qoL+FSJRSD50rGIakSiiNb6gsJxZIp9dVvSyie1EyV0HhcZ4sk1AfPPUabx5ZQP1KkSqgv5nezo0ioP6GffEhoDGipejlPAEqqps+IcG9+JTSeWaldA6gVFomtylSmSug6vDJfTe5iSGg+iHXFv8eQUA5mpf73IZX60HjuNpI31UNqZai228CDKF7V/P+7DDV/gCouacV1OuY9fagyFUNIHJ+dtQIqSq1W9BHCu8mdLVbBDPP1uN1sxyZXfWUModt8SKov7vE9G+Wu2PxmQrGzkjLVTnxZnm3b/gL/j9UMSjfUaAAAAABJRU5ErkJggg==); }

.left-sidebar li:nth-child(2) { background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABeCAYAAADc6BHlAAABr0lEQVR4nO3b246CMBhF4ZbM+79yJ0MchjhgLKVdNf/6row3SneQHty5lFJSf/nnE3LOAz7qsyyDvu2IkD/SqACSIRwbGYAOGADMAGAGADMA2NcMX2K3FIkyU9oWRDPdAZGmqdu11t4B+6XsnQMWcY2wXnPNHfC8j+C+wg1af4IMoZGzIFhNAEe/0+7vNKq9A8rJa110ZR3QY+BzwLtpfX7O9AyI9EDfrnWKlfDupCzcrMpZEMwAYAYAMwCYAcBGBuC+0YFRATj4J5bH4PQcIAdfkiRJT/LjT1G9D0MsaJxYPNdl2ZCB2ZCBuRsKMwCYAcAMAGYAMBsyDBsysMsNmV5syFTofYQZSm0ADvzNWp4BhnGDlpLe2Xuq8G4ADnQn786CRhzY2JCB2ZCh2JCRAURlADADgBkAzIYMzIYMbHFwJEmSNF4e8Keov71mGzL//DZkep5G2Qt4wYYMzIYMzN1QmAHADABmADADgNmQYdiQgVU3ZF7tIdwxcDZkxDAAmAHADABmALBZAoh4UrPWfWepKKVgNSUbMrPwGQAzAJgBwAwAZgAwGzIwGzKklNI3DZw6vhkBtwcAAAAASUVORK5CYII=) }

.left-sidebar {
  list-style: none;
  background-color: #0053a5;
  height: 50px;
  padding: 0 25px 0 35px;
  margin: 0;
  margin-right: -25px;
  border-radius: 20px;
  box-shadow: 0px 2px 20px 2px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.left-sidebar li {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 20px;
  height: 100%;
  width: 20px;
  margin-right: 20px;
  display: inline-block;
  cursor: pointer;
  opacity: 0;
}

.left-sidebar li:nth-child(3) { background-image: url(data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAByCAYAAADXohZkAAADHElEQVR4nO2d227DMAxD3aL//8sZMGxYFrSxZYsydTmPQ9MhDMfKstw9juNoAZHe1EP04sf4y58l7vQ1Q0QTeEUoiMgvxJtuQEuc3/cRRcYdESOCCu8ORmWnmpPLwWA8C2xRXx6rv8erwG6K9yhVxAjnPDV7QFky+PphpVaG9fDmYM0l8MPCydmrCLiTIws8Kh5U5KgCm2VsDy8Z7Lanmj2DG/rhRauDpdFQVYTneGgOBHa/nxUpg+nioZELLBEAKe5SyccqMFM0pGxXnrGIhmmRvQtsmbtT17LVweGmYGolB8bzSk4SD9vmJpgcbFY6WcIicMgJxJYkg7c+PIYMZlmxQagq4g9Iru8WGOkwig9NTw52Uzmc2SlwiG5Zj10Chy3LrnhYyVm4N+0ZDXdl2RVrBzMJMJO94muy1sFmo6ysGWwVDaHmItJUDmesHMwi7mzNO10rR8hg2nhoRg5m7JbVGQ0A5vHQDARm7JaZ9imYHGzRLTP/sEUK7L1bpvLAUQJ7r3nV/poYVnLI+QZ4t6zH7gx2uUshQdvB6bplPTKck0s5FxFuxfYJTQdX5fAGLQczdsvSzkW432eToCGw924Z9VyE97IMjmUVwTjfkPYLOcLs3806mMkpW7tlPbKdk1u9ToxFBlucBqKNFLSDw3fLekgdnHa+YZbMcxEmoDI4Tbesh8TB1S2bYNTB1S2bBJHB1F+QYc2IwN5PYm4tFXsC1ybmIpoR4fYsGxItgVPtUkj4VEWwR0Ov/0vj+Gjn5OhYXcntjgb6B1DfFwHm6mDv3TI66pwcmNkMrrJsEMYMDrULwiZwuC2ms8Dof36XkpdQhOo3CHlmdxgar+fk3FDn5MAgBKabcNyJtsAl7gWJwOnHoGaoU0Zgdp0ySvPXMOrgO0HKuTesOHhG2HQ5PpvB5dpBLOeDU1YhVu3KtCWexXRl6vq5zmiAQQqcXtwGFLjE/UH7jEZPWG/l3e39HMe/27ne2/e1mgJHXO2N/nuzd/f3/TMNgTPHQdc4qxlcWdvBarInLTMOLnEFSBxcwk6g0Q8ubqgBbCSttS+nSoYmbjcJ/wAAAABJRU5ErkJggg==); }

/*.left-sidebar li:nth-child(1) { background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEwIDUxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnIGlkPSJmYXZvcml0ZSI+CgkJPHBhdGggZD0iTTI1NSw0ODkuNmwtMzUuNy0zNS43Qzg2LjcsMzM2LjYsMCwyNTcuNTUsMCwxNjAuNjVDMCw4MS42LDYxLjIsMjAuNCwxNDAuMjUsMjAuNGM0My4zNSwwLDg2LjcsMjAuNCwxMTQuNzUsNTMuNTUgICAgQzI4My4wNSw0MC44LDMyNi40LDIwLjQsMzY5Ljc1LDIwLjRDNDQ4LjgsMjAuNCw1MTAsODEuNiw1MTAsMTYwLjY1YzAsOTYuOS04Ni43LDE3NS45NS0yMTkuMywyOTMuMjVMMjU1LDQ4OS42eiIgZmlsbD0iI0ZGRkZGRiIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) }*/

.right-sidebar, .left-sidebar {
  opacity: 0;
  visibility: hidden;
}
.open .right-sidebar {
  animation-name: rightslide;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.open .left-sidebar {
  animation-name: leftslide;
  animation-duration: .5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}

.open .right-sidebar li:nth-child(1), .open .left-sidebar li:nth-child(2),.open .left-sidebar li:nth-child(3) {
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-delay: .4s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

.open .right-sidebar li:nth-child(2), .open .left-sidebar li:nth-child(1),.open .left-sidebar li:nth-child(3) {
  animation-name: fadeIn;
  animation-duration: .3s;
  animation-delay: .5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}


@keyframes 
rightslide {  from {
 opacity: 0;
 visibility: hidden;
 transform: translate(-30%, 0);
}

to {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
}

@keyframes 
leftslide {  from {
 opacity: 0;
 visibility: hidden;
 transform: translate(30%, 0);
}

to {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
}

@keyframes 
fadeIn {  from {
 opacity: 0;
}

to { opacity: 1; }
}