.control-center {
        
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}
.option-btn {

    background-color: #e44234;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    box-shadow: 0px 0px 12px 2px rgba(193, 19, 6, 0.6);
    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: 40px;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA9CAYAAADxoArXAAAACXBIWXMAAC4jAAAuIwF4pT92AAALA2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzYwLCAyMDIwLzAyLzEzLTAxOjA3OjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpwaG90b3Nob3A9Imh0dHA6Ly9ucy5hZG9iZS5jb20vcGhvdG9zaG9wLzEuMC8iIHhtbG5zOnhtcFJpZ2h0cz0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3JpZ2h0cy8iIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIiB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIgeG1wOkNyZWF0ZURhdGU9IjIwMjEtMTAtMjBUMTI6NDA6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIzLTA1LTAzVDE0OjM5OjM1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIzLTA1LTAzVDE0OjM5OjM1KzA4OjAwIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUyBXaW5kb3dzIiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6NmEzYzhiZjQtNzY0Yi00MjQyLWE3MDUtNDA2YzM1YjBmNDJiIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmFhNDFmYWM4LTMwNzctYTI0Ni05MmQ3LTMwNWJjODkyZjQxNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YjQ5MmEwMTQtMzE1ZS0xMWVjLTlmMmItZjhlMDZkZjZlMDAyIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBSaWdodHM6TWFya2VkPSJGYWxzZSIgdGlmZjpPcmllbnRhdGlvbj0iMSIgdGlmZjpYUmVzb2x1dGlvbj0iMzAwLzEiIHRpZmY6WVJlc29sdXRpb249IjMwMC8xIiB0aWZmOlJlc29sdXRpb25Vbml0PSIyIiBleGlmOkNvbG9yU3BhY2U9IjEiIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSIxNDE3IiBleGlmOlBpeGVsWURpbWVuc2lvbj0iMTQxNyI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjE3ZGRhYzIyLTYyYzgtMDE0YS1hNzBjLWE4MjMxMGEwMWY0MSIgc3RFdnQ6d2hlbj0iMjAyMy0wNS0wM1QxNDozODoxMyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MTk4Yzk2NC04YWMxLTZmNDQtODE3Zi03ZTEyYWQ5ZThlZjEiIHN0RXZ0OndoZW49IjIwMjMtMDUtMDNUMTQ6Mzk6MDQrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY29udmVydGVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJmcm9tIGFwcGxpY2F0aW9uL3ZuZC5hZG9iZS5waG90b3Nob3AgdG8gaW1hZ2UvcG5nIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJkZXJpdmVkIiBzdEV2dDpwYXJhbWV0ZXJzPSJjb252ZXJ0ZWQgZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YTA4ZjA3NDUtOGRmNC02YTQ0LTlhMzAtYmM4YjQzMjRjNzYwIiBzdEV2dDp3aGVuPSIyMDIzLTA1LTAzVDE0OjM5OjA0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmFhNDFmYWM4LTMwNzctYTI0Ni05MmQ3LTMwNWJjODkyZjQxNyIgc3RFdnQ6d2hlbj0iMjAyMy0wNS0wM1QxNDozOTozNSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MTk4Yzk2NC04YWMxLTZmNDQtODE3Zi03ZTEyYWQ5ZThlZjEiIHN0UmVmOmRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiNDkyYTAxNC0zMTVlLTExZWMtOWYyYi1mOGUwNmRmNmUwMDIiIHN0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOmI0OTJhMDE0LTMxNWUtMTFlYy05ZjJiLWY4ZTA2ZGY2ZTAwMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnpZnDMAAAeOSURBVGiB5ZtpjBVFEMd/jwWXa0HuSxQkAoIohxBXEaMRRA0GUUM8UIyIaKKigpgYlC/eBx7RgAoY8MIDxCiHogIqIMq5eBCBgIKggCDXujBL+6Gmd+cNPT09b98EEv7J5L2Zru6uf3dPV3V1T0YpxYmE6gCUp1pHPaAzcAbQGmgCFAEZoBTYA/wJbAB+ATanqUz1lMrtBFwJXAB0BU5zzLcXKAF+AOYB8wEvn4pllFL56uGGwI3ALUCPvJQI24GZwBSkEaqMfBBuAowG7gTq5kOpCMwBngO+rEohVSU8BhgL1KmKEgkxA3gQeecTI1fC3YE3gG65VJoHKOABYHzSjLkQHplLRSlhNjAY2O+aISnh14FhyfWqwBFgN2KOPKAQOBmoVYUy/wD6AutchJMQ/gQYkFCZXcDXwGJgObCeSsIgZrEIsc9nA8WIKTsnYT2H/Lwr4gRdCc8B+idQYD5iSmYBBxLk0+gFXA8MB2o75lFIQ5XYhFwITwNucqx0ATAOWOgoH4fGwCjEGrjgINAW+DtKII7waOBph4oOAXcBkxwVS4qOwESgj4Psb0D7qEQb4a7ASocKSoCBwEYH2ariKcQGx2EycJspwUZ4G9A8puB5JHu384HhSG/HoS8yl2ShWoTwE0ST1evJpBNZvvAabnPK+6aHJsLNgIciClHIsm4NcIWLdinhbeDeGJkGwCPhh6Yh/Q5iEsLQZEuBlsg69lhjKjDEkq4QP1/b/aN6uAVmskEM4vggC3AzsoSMQgaxNBUIE74nIqPu3c+AublqlxIGx6RnDf3wkP4HGfthaMItsLfoscJC7DZ6APApZPdwb+xk3+X4JAvxE1jFrB4kHDc0Hs9ZnfSxCvjZkj4AqAHZhC+JEM74ha3Nh2Yp4hVLWm38OJsmXB/xV8M44v/OyJ9eqWFWTHoxUKQJ98DshOhni/KlVYrYij3O1RPorgl1sggeAr7Pl1YpY4ElrQPQUQfi21gENyIB8jRRB+gHnIu4toeR0M0KZHQddCznV0taU6BF9cBNGNocbYuppDlwMdJoJyGNs9FXdLeDkqMQ371RRPou4FXgUSoXLlH4y5JWD2ioCRdZBKN6twh4HtlpqGFIP4DY7rFE2++PEFfVhkZ+GYOBq7AH6/61pNUC6uh32LTHlPF/TXs7pyPDZxhmsiDDdBgSgbjIkD6VeLJBtEcCErZ9KluwqgCopgkfsgiGG6MI2edpGaehj7rIZNIh8Kwv9lVOFGoB31jSoxofpOM8Tdg0bPX7Uj/0fDqycZYUcwL/XzKkvwVch0QsewJXI7sbYbQmOs5Wz1J/KXBA957NR24V+N8NuNwgsxpxztcCZchE1hu4ISDTFrgQ6aGgk7MPuAxYEirzR+BjZJdjNtlDeTTwJLLYCaKFhcceYBdKKZSnbleeUhHXYeWpBspTKE9NMqSP9dNMV3vlqTUB2cnKU4NC+btY8uurofLU/lC+MQa5KRYeS5SnbtWEiyOEjvi/ffwCt4XSpzgoW6g8tcuX36k8VRLIP8Ehv76GhOpeaZDZaCE8WXmqlyZcS3mqzCBU7v/e7RcYTPOUp2o7Kjs0Qok2CQijPLU9VH+dQNqpFrJKeWqE8lShnrRKkcBcFPoDp4SeLcXdA3qTo3f41gGbHPNrBCe+AuTsiMbAmLyLgbLgguFzg5BO74fY1OA+0XI3HSvwXejeZl6iEN4YaBP4P8KSbyd+hwYJvxchXI7Y4nC8y+bGmbA6dJ/LaZ2tofvG/m8v4ExLvorlbZBwSYQS1RCj3YDsow1Jzw1sCd3vTJgfjnaQ9Ho9boN+mv4TXgO/bBDWLuaR0PPGYcEYhN9h5137AMJnSZYiHt/5ljybgW/1TZjwRMw9V4AQDq5WujiraUYu569aB/6XI2Snx+TJisWFCe/HPDwy/hXs5WI3HStwkqHMpAg28mEkjtXbIr8X2YuqgCmsM5boXi4I3NdDlmuuKDSUlxTB2HNN7IELkAM4WYjaLr0DmOCgwCrcjy41BdohPVuALC93OOYFiYYkOY23DkNg0rY/vAI3MtciC/m0MZN45yKITshh1SzYCDfDvooqR3qqDGn9NOPW7XE8luTjYSI2DqI2xEEci2ss6Rlk4ihEbPjIBAolxYcJZL/AsktiIwzioYyz5K1BpXkZj6xhk57lsqEdcl6jC0f7ASasR9zgSLie03qR6K1UkBIyVDbgMmTB8AG5eVSXIiGgIX65OoJqwxakYfbYhJKcxHsWOdBpg36vNf5DIhkLkcXGJiTsuh/psZqIy9oSmWR6Iyfx2jhpVIkNwHk4NG7Ss5ajgGcc5PTwM70yCiFcjgTlwvY5KRYiYafSOEHI7TRtf8QZd/WlbeSDcBm2YYwH7k+SIU4JE+YiZsJ4LCiiDpd6kpDdhHxTkYisViYX7EZ2AgYSc5gzzygHHkO+kJmdSwH5+shjKHAfcgQ4DexDznG+QBU/88nnVy0gNnAI8p4nXS+bsAhxW6fhtjEXi3wT1qiJ2NJiJPzSGXuQHCRetg4xX8uAr0jhwGpahINoBZyFeE3NEbtbG5mkypDhugP4HfjJv1L7PjBzon17+D/SCiXbeA1OVAAAAABJRU5ErkJggg==)
}
.option-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    visibility: hiddden;
    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/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNjEyIDYxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjEyIDYxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxjaXJjbGUgY3g9IjY5LjU0NSIgY3k9IjMwNiIgcj0iNjkuNTQ1IiBmaWxsPSIjRkZGRkZGIi8+CgkJPGNpcmNsZSBjeD0iMzA2IiBjeT0iMzA2IiByPSI2OS41NDUiIGZpbGw9IiNGRkZGRkYiLz4KCQk8Y2lyY2xlIGN4PSI1NDIuNDU1IiBjeT0iMzA2IiByPSI2OS41NDUiIGZpbGw9IiNGRkZGRkYiLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K)
}
.option-btn.open:after {
    opacity: 0;
    visibility: hiddden;
    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;
}
.left-sidebar {
    list-style: none;
    background-color: #e44234;
    height: 50px;
    padding: 15px 25px 0 35px;
    margin: 0;
    margin-right: -0px;
    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(1) {
}
.left-sidebar li:nth-child(2) {
}
.left-sidebar li:nth-child(3) {
}

.left-sidebar {
    opacity: 0;
    visibility: hidden;
}
.open .left-sidebar {
    animation-name: leftslide;
    animation-duration: .5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}
.open .left-sidebar li:nth-child(1) {
    animation-name: fadeIn;
    animation-duration: .3s;
    animation-delay: .5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

.open .left-sidebar li:nth-child(2) {
    animation-name: fadeIn;
    animation-duration: .3s;
    animation-delay: .4s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
.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;
}
@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 {
        opcity: 0;
    }
    to {
        opacity: 1;
    }
}