.deo-preview-bar {position: fixed;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-flow: row nowrap;flex-flow: row nowrap;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;z-index: 1000;right: 0;top: 0;bottom: 0;-webkit-transform: translateX(100%);-ms-transform: translateX(100%);transform: translateX(100%);background-color: #fff;-webkit-transition: -webkit-transform .2s ease-in-out;transition: -webkit-transform .2s ease-in-out;-o-transition: transform .2s ease-in-out;transition: transform .2s ease-in-out;transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;-webkit-transition: transform .2s ease-in-out;}.deo-preview-bar__icons {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}.deo-preview-bar__icon {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;position: relative;margin: 4px 0;height: 48px;line-height: 48px;text-align: center;color: #162b37;-webkit-transform: translateX(-100%);-ms-transform: translateX(-100%);transform: translateX(-100%);}.deo-preview-bar__icon-label {opacity: 0;visibility: hidden;min-width: 110px;padding-right: 20px;padding-left: 20px;position: absolute;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;will-change: transform;right: 100%;background-color: #162b37;color: #fff;border-radius: 5px 0 0 5px;}.deo-preview-bar__icon-holder {background-color: #fff;width: 48px;border-radius: 5px 0 0 5px;-webkit-box-shadow: 0 0 10px rgba(22 43 55 / .2);box-shadow: 0 0 10px rgba(22 43 55 / .2);}.deo-preview-bar__icon-holder--accent {color: #2abf77;}.deo-preview-bar__icon svg {width: 16px;vertical-align: middle;}.deo-preview-bar__icon:hover .deo-preview-bar__icon-label {opacity: 1;visibility: visible;}.deo-preview-bar__icon:hover {color: #2abf77;}.deo-preview-bar__panel {width: 300px;padding: 40px;height: 100%;overflow-x: hidden;overflow-y: scroll;position: relative;background-color: #fff;}.deo-preview-bar__panel-header, .deo-preview-bar__panel-item {padding-bottom: 24px;}.deo-preview-bar__panel-items {list-style: none;padding: 0;margin: 0;}.deo-preview-bar__panel-header-title {text-transform: uppercase;font-size: 1rem;}.deo-preview-bar__panel-title {margin-top: 10px;margin-bottom: 4px;font-size: 1rem;font-weight: 500;text-transform: capitalize;}.deo-preview-bar__panel-item-url {display: block;}.deo-preview-bar__panel-img-holder {position: relative;overflow: hidden;}.deo-preview-bar__panel-img {-webkit-transition: -webkit-transform .4s linear;transition: -webkit-transform .4s linear;-o-transition: transform .4s linear;transition: transform .4s linear;transition: transform .4s linear, -webkit-transform .4s linear;-webkit-transition: transform .4s linear;}.deo-preview-bar__panel-item-url:hover .deo-preview-bar__panel-img {-webkit-transform: scale( 1.1 );-ms-transform: scale( 1.1 );transform: scale( 1.1 );}html.deo-preview-bar--is-open {overflow: hidden;}.deo-preview-bar-overlay {-o-transition: all .2s linear;transition: all .2s linear;-webkit-transition: all .2s linear;z-index: 1000;content: '';position: fixed;background-color: rgba( 0,0,0,.3 );display: block;bottom: 0;top: 0;right: 0;left: 0;visibility: hidden;opacity: 0;}html.deo-preview-bar--is-open .deo-preview-bar-overlay {opacity: 1;visibility: visible;}html.deo-preview-bar--is-open .deo-preview-bar {-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}.deo-preview-bar__close {position: absolute;top: 0;right: 0;background-color: transparent;border: 0;padding: 10px;color: #162b37;}.deo-preview-bar__close:hover, .deo-preview-bar__close:focus {color: #2abf77;background-color: transparent;}