#social { position: fixed; z-index: 10; left: var(--left, inherit); right: var(--right, inherit); bottom: var(--bottom, inherit); display: none; }
#social .btn-frame {position: relative;margin: 30px 0px;display: block;width: 50px;height: 50px;cursor: pointer;}
#social .btn-frame i {background-color: var(--background);position: absolute;top: 0;left: 0;width: 50px;height: 50px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;z-index: 1;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: -moz-box;display: flex;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;-moz-box-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;-moz-box-pack: center;justify-content: center;} 
#social .btn-frame img { border-radius: 50%; vertical-align: middle; width: 70%;}
#social .btn-frame .kenit-alo-circle {width: 60px;height: 60px;top: -5px;right: -5px;position: absolute;background-color: transparent;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;}
#social .btn-frame .kenit-alo-circle-fill {position: relative;width: 70px;height: 70px;top: -10px;right: 10px;background-color: var(--background);border-radius: 100%;opacity: 0.35;}
#social .btn-frame .animated.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; }
#social .btn-frame .zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn; }
#social .btn-frame .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; }
#social .btn-frame .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; }
 
/* TODO: Toolbar */
.toolbar { background: var(--background); width: 100%; padding: 10px; bottom: 0px; position: fixed; z-index: 500; height: auto; left: 0px; max-height: 65px; display: none; }
.toolbar ul { list-style: none; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0px; margin: 0px; }
.toolbar ul li { text-align: center; width: 25%; }
.toolbar ul li a { display: block; width: 100%; cursor: pointer; }
.toolbar ul li a img { height: 20px; width: 20px; -webkit-animation: tada 1.2s infinite; -moz-animation: tada 1.2s infinite; -o-animation: tada 1.2s infinite; animation: tada 1.2s infinite; }
.toolbar ul li a span { color: var(--color); font-size: 10px; }