/* ==========================================================================
   Custom styles — Siêu thị Điện máy Lê Triều
   Ghi đè / bổ sung các style của Flatsome template.
   Không chỉnh sửa trực tiếp flatsome.css / flatsome-shop.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bootstrap Pagination (dùng trong trang danh mục sản phẩm)
   -------------------------------------------------------------------------- */
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.header-nav .menu .menu-item a img{
    width:24px !important;
}
.pagination > li { display: inline; }
.pagination > li > a,
.pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #428bca;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #2a6496;
    background-color: #eee;
    border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    z-index: 2;
    color: #fff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: #fff;
    border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span { padding: 10px 16px; font-size: 18px; }
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.pagination-sm > li > a,
.pagination-sm > li > span { padding: 5px 10px; font-size: 12px; }
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span { border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }

/* Pager */
.pager { padding-left: 0; margin: 20px 0; text-align: center; list-style: none; }
.pager li { display: inline; }
.pager li > a,
.pager li > span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus { text-decoration: none; background-color: #eee; }
.pager .next > a, .pager .next > span { float: right; }
.pager .previous > a, .pager .previous > span { float: left; }
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span { color: #777; cursor: not-allowed; background-color: #fff; }

.clearfix { display: inline; }

/* --------------------------------------------------------------------------
   Product video embed (YouTube responsive iframe)
   -------------------------------------------------------------------------- */
.product-video { margin: 12px 0; }
.product-video > div {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.product-video iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}

/* --------------------------------------------------------------------------
   Menu image (Easy Social Share Buttons plugin icon spacing)
   -------------------------------------------------------------------------- */
.menu-image {
    padding-right: 10px;
}

/* --------------------------------------------------------------------------
   Easy Social Share Buttons (essb_) — extracted from inline <style>
   -------------------------------------------------------------------------- */
.essb_links_list li.essb_totalcount_item .essb_t_l_big .essb_t_nb:after,
.essb_links_list li.essb_totalcount_item .essb_t_r_big .essb_t_nb:after {
    color: #777777;
    content: "shares";
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: center;
    text-transform: uppercase;
    margin-top: -5px;
}

.essb_links_list li.essb_totalcount_item .essb_t_l_big,
.essb_links_list li.essb_totalcount_item .essb_t_r_big {
    text-align: center;
}

.essb_displayed_sidebar .essb_links_list li.essb_totalcount_item .essb_t_l_big .essb_t_nb:after,
.essb_displayed_sidebar .essb_links_list li.essb_totalcount_item .essb_t_r_big .essb_t_nb:after {
    margin-top: 0px;
}

.essb_displayed_sidebar_right .essb_links_list li.essb_totalcount_item .essb_t_l_big .essb_t_nb:after,
.essb_displayed_sidebar_right .essb_links_list li.essb_totalcount_item .essb_t_r_big .essb_t_nb:after {
    margin-top: 0px;
}

.essb_totalcount_item_before, .essb_totalcount_item_after {
    display: block !important;
}

.essb_totalcount_item_before .essb_totalcount,
.essb_totalcount_item_after .essb_totalcount {
    border: 0px !important;
}

.essb_counter_insidebeforename {
    margin-right: 5px;
    font-weight: bold;
}

.essb_width_columns_1 li { width: 100%; }
.essb_width_columns_1 li a { width: 92%; }
.essb_width_columns_2 li { width: 49%; }
.essb_width_columns_2 li a { width: 86%; }
.essb_width_columns_3 li { width: 32%; }
.essb_width_columns_3 li a { width: 80%; }
.essb_width_columns_4 li { width: 24%; }
.essb_width_columns_4 li a { width: 70%; }
.essb_width_columns_5 li { width: 19.5%; }
.essb_width_columns_5 li a { width: 60%; }
.essb_width_columns_6 li { width: 16%; }
.essb_width_columns_6 li a { width: 55%; }

.essb_links li.essb_totalcount_item_before,
.essb_width_columns_1 li.essb_totalcount_item_after {
    width: 100%;
    text-align: left;
}

.essb_network_align_center a { text-align: center; }
.essb_network_align_right .essb_network_name { float: right; }

/* --------------------------------------------------------------------------
   Site customization (custom-css) — layout, colors, typography, header
   -------------------------------------------------------------------------- */
:root {
    --primary-color: #4a90e2;
}

/* Site Width */
.full-width .ubermenu-nav, .container, .row {
    max-width: 1230px;
}

.row.row-collapse { max-width: 1200px; }
.row.row-small   { max-width: 1222.5px; }
.row.row-large   { max-width: 1260px; }

body.framed, body.framed header, body.framed .header-wrapper,
body.boxed, body.boxed header, body.boxed .header-wrapper,
body.boxed .is-sticky-section {
    max-width: 1260px;
}
.box-overlay .box-image {
    -webkit-mask-image:none !important;
}
.box-image {
    padding: 5px;
}

.header-main {
    height: 55px;
}
#logo img    { max-height: 55px; }
#logo        { width: 250px; }
.header-bottom { min-height: 36px; }
.header-top    { min-height: 20px; }

.has-transparent + .page-title:first-of-type,
.has-transparent + #main > .page-title,
.has-transparent + #main > div > .page-title,
.has-transparent + #main .page-header-wrapper:first-of-type .page-title {
    padding-top: 105px;
}

.header.show-on-scroll, .stuck .header-main { height: 70px !important; }
.stuck #logo img { max-height: 55px !important; }
.search-form { width: 78%; }

.header-bg-color, .header-wrapper { background-color: #4a90e2; }

.header-bottom {
    background-color: #fff;
    border-bottom: 1px solid #ececec;
}

.header-bottom-nav > li > a { line-height: 16px; }

@media (max-width: 549px) {
    .slideder-contaner { margin-left: 0px; }
    .header-main { height: 70px; }
    #logo img    { max-height: 70px; }
}

.header-top { background-color: #273896 !important; }

/* Color */
.accordion-title.active, .has-icon-bg .icon .icon-inner, .logo a,
.primary.is-underline, .primary.is-link, .badge-outline .badge-inner,
.nav-outline > li.active > a, .cart-icon strong,
[data-color='primary'], .is-outline.primary {
    color: #4a90e2;
}

[data-text-color="primary"] { color: #4a90e2 !important; }

/* Background */
.scroll-to-bullets a, .featured-title, .label-new.menu-item > a:after,
.nav-pagination > li > .current, .nav-pagination > li > span:hover,
.nav-pagination > li > a:hover, .has-hover:hover .badge-outline .badge-inner,
button[type="submit"], .button.wc-forward:not(.checkout):not(.checkout-button),
.button.submit-button, .button.primary:not(.is-outline), .featured-table .title,
.is-outline:hover, .has-icon:hover .icon-label,
.nav-dropdown-bold .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold > li > a:hover,
.nav-dropdown-bold.dark .nav-column li > a:hover,
.nav-dropdown.nav-dropdown-bold.dark > li > a:hover,
.tagcloud a:hover, .grid-tools a, input[type='submit']:not(.is-form),
.box-badge:hover .box-text, input.button.alt, .nav-box > li > a:hover,
.nav-box > li.active > a, .nav-pills > li.active > a,
.current-dropdown .cart-icon strong, .cart-icon:hover strong,
.nav-line-bottom > li > a:before, .nav-line-grow > li > a:before,
.nav-line > li > a:before, .banner, .header-top,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.primary.is-outline:hover, .button.primary:not(.is-outline),
input[type='submit'].primary, input[type='reset'].button,
input[type='button'].primary, .badge-inner {
    background-color: #4a90e2;
}

/* Border */
.nav-vertical.nav-tabs > li.active > a, .scroll-to-bullets a.active,
.nav-pagination > li > .current, .nav-pagination > li > span:hover,
.nav-pagination > li > a:hover, .has-hover:hover .badge-outline .badge-inner,
.accordion-title.active, .featured-table, .is-outline:hover,
.tagcloud a:hover, blockquote, .has-border, .cart-icon strong:after,
.cart-icon strong, .blockUI:before, .processing:before, .loading-spin,
.slider-nav-circle .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover .arrow,
.primary.is-outline:hover {
    border-color: #4a90e2;
}

.nav-tabs > li.active > a { border-top-color: #4a90e2; }

/* Fill */
.slider .flickity-prev-next-button:hover svg,
.slider .flickity-prev-next-button:hover .arrow {
    fill: #4a90e2;
}

/* Background Color secondary */
[data-icon-label]:after, .secondary.is-underline:hover,
.secondary.is-outline:hover, .icon-label,
.button.secondary:not(.is-outline), .button.alt:not(.is-outline),
.badge-inner.on-sale, .button.checkout, .single_add_to_cart_button {
    background-color: #fbda00;
}

.secondary.is-underline, .secondary.is-link, .secondary.is-outline,
.stars a.active, .star-rating:before, .woocommerce-page .star-rating:before,
.star-rating span:before, .color-secondary {
    color: #fbda00;
}

[data-text-color="secondary"] { color: #fbda00 !important; }
.secondary.is-outline:hover { border-color: #fbda00; }

body { font-size: 100%; }
body { font-family: "Roboto", sans-serif; }
body { font-weight: 400; }
body { color: #353535; }
.nav > li > a { font-family: "Roboto", sans-serif; }
.nav > li > a { font-weight: 700; }

h1, h2, h3, h4, h5, h6, .heading-font,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
    font-family: "Roboto", sans-serif;
}

h1, h2, h3, h4, h5, h6, .heading-font, .banner h1, .banner h2 { font-weight: 700; }
h1, h2, h3, h4, h5, h6, .heading-font { color: #1c1c1c; }
.alt-font { font-family: "Roboto", sans-serif; }

.header:not(.transparent) .header-bottom-nav.nav > li > a { color: #333333; }
.header:not(.transparent) .header-bottom-nav.nav > li > a:hover,
.header:not(.transparent) .header-bottom-nav.nav > li.active > a,
.header:not(.transparent) .header-bottom-nav.nav > li.current > a,
.header:not(.transparent) .header-bottom-nav.nav > li > a.active,
.header:not(.transparent) .header-bottom-nav.nav > li > a.current {
    color: #288ad6;
}

.header-bottom-nav.nav-line-bottom > li > a:before,
.header-bottom-nav.nav-line-grow > li > a:before,
.header-bottom-nav.nav-line > li > a:before,
.header-bottom-nav.nav-box > li > a:hover,
.header-bottom-nav.nav-box > li.active > a,
.header-bottom-nav.nav-pills > li > a:hover,
.header-bottom-nav.nav-pills > li.active > a {
    color: #FFF !important;
    background-color: #288ad6;
}

a { color: #111111; }
a:hover { color: #4a90e2; }

.tagcloud a:hover {
    border-color: #4a90e2;
    background-color: #4a90e2;
}

@media screen and (min-width: 550px) {
    .slideder-contaner { margin-left: 228px; }
    .products .box-vertical .box-image {
        min-width: 300px !important;
        width: 300px !important;
    }
}

.absolute-footer, html { background-color: #dbdbdb; }
.page-title-small + main .product-container > .row { padding-top: 0; }

.label-new.menu-item > a:after     { content: "New"; }
.label-hot.menu-item > a:after     { content: "Hot"; }
.label-sale.menu-item > a:after    { content: "Sale"; }
.label-popular.menu-item > a:after { content: "Popular"; }

/* --------------------------------------------------------------------------
   WP custom CSS — global, header, content, footer overrides
   -------------------------------------------------------------------------- */

/*---------global-----------*/
.has-shadow > .col > .col-inner    { height: 100%; }
.flickity-viewport .col.is-selected { height: 100%; }
.flickity-viewport .col-inner       { height: 100%; }
.product-small.box.has-hover.box-normal.box-text-bottom { height: 100%; }

.product-small.box:hover {
    border: 2px solid #eee;
    border-radius: 5px;
}

p.name.product-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 33px;
    margin-bottom: 10px;
}

.price-wrapper { display: table; }
.price-wrapper .price {
    height: 33px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 120%;
}

.related-products-wrapper .product-small.box {
    background-color: #fff;
    border: 2px dashed #ddd;
}
.related-products-wrapper .box-text.box-text-products { padding: 15px; }

.nav-previous,
.nav-next {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    height: auto;
}

.blog-archive h5.post-title.is-large {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 43px;
}

.blog-archive p.from_the_blog_excerpt {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    height: 43px;
}

#shop-sidebar ul, #product-sidebar ul, .post-sidebar ul {
    font-size: 14px;
    border: 1px solid #ddd;
    padding: 15px;
    background-color: #fff;
}

ul.woocommerce-widget-layered-nav-list {
    max-height: 300px;
    overflow: auto;
    padding-right: 20px;
}

ul.product_list_widget { font-size: 14px; }

/*-------------header-------------*/
.header-bottom ul > li > a { font-weight: normal; }
.header-bottom ul > li.current-menu-item > a { color: #288ad6 !important; }

.mona_html a { font-size: 16px; color: #fff; }
.mona_html span { font-size: 11px; font-weight: normal; color: #f1f1f1; opacity: .7; }

.header-main input.search-field.mb-0 {
    width: 100%;
    height: 36px;
    border-radius: 5px 0px 0px 5px;
}

.header-main button.ux-search-submit.submit-button.secondary.button.icon.mb-0 {
    height: 36px;
    border-radius: 0px 5px 5px 0px;
    background-color: #fff;
    color: #273896;
}

#mega-menu-wrap {
    width: 228px !important;
    background: #ffde02 !important;
    position: relative;
    box-shadow: 0 0 4px 0 rgba(0,0,0,.2);
}

#mega-menu-title {
    padding: 5px 0 5px 15px;
    color: #111;
    font-size: 14px;
}

#mega_menu > li > a > img { max-width: 30px; margin-left: -5px; }
#mega_menu > li {
    position: relative;
    z-index: 8;
    padding-top: 0px !important;
}
#mega_menu li a {
    padding: 6.7px 15px !important;
    display: block;
    font-size: 14px;
    color: #111;
}
#mega_menu li a:hover { color: #4a90e2; }

/*-------------content-------------*/
.badge-container.absolute.left.top.z-1 { width: 100%; }

.callout.badge.badge-circle {
    float: right;
    margin-right: 15px;
    height: 25px;
}

.badge-inner.secondary.on-sale { border-radius: 2px; }

span.onsale {
    font-size: 14px;
    color: #000;
    padding: 0 5px;
    font-weight: 500;
}

.price-wrapper ins span     { color: #c10017; }
.price-wrapper span.amount  { color: #c10017; }
.product_list_widget span.woocommerce-Price-amount.amount { font-size: 12px; }

.box_news .box-image   { display: none; }
.box_news .is-divider  { display: none; }
.box_news .box-text {
    padding-top: .5em;
    padding-bottom: .5em;
    position: relative;
    width: 100%;
    height: 58px;
    border-top: 1px solid #eee;
}
.box_news .box-text h5 { font-size: 14px; line-height: 1.4em; font-weight: normal; }
.box_news .box-text h5:hover { color: #4a90e2; }

.bt_news { margin-bottom: 0; }
.bt_news span { font-size: 14px; }
.row .row-small:not(.row-collapse), .container .row-small:not(.row-collapse) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-bottom: 0;
}
.mona_menu ul {
    margin: 0;
}
.mona_menu ul li {
    display: inline;
    padding: 10px 5px;
    border: 1px solid #4a90e2;
    border-radius: 99px;
}
.mona_menu ul li a         { color: #4a90e2; }
.mona_menu ul li:hover     { border: 1px solid #d0021b; }
.mona_menu ul li:hover a   { color: #fff; }

.bt_menu_product span { color: #333; }

.dvls_maps_row.dvls_maps_header { background-color: #fff; padding: 0; }
.dvls_maps_wrap .dvls_near_you  { margin: 10px 0 0; display: none !important; }

/*-------------footer-------------*/
.sec_footer { font-size: 14px; line-height: 15px; }
.mona_sidebar ul { margin: 0px; padding: 0px; }
.mona_sidebar ul li a { padding: 0px 0px 18px 0px; }
.mona_sidebar ul.menu > li + li,
.mona_sidebar .widget > ul > li + li { border-top: 0px solid #ececec; }

.sec_footer .accordion-inner { padding: 0.5em 0em; }
.sec_footer span.menu-image-title { color: #288ad6; }
.sec_footer .accordion-title span { color: #288ad6; font-weight: bold; }
.sec_footer .accordion-title {
    border-top: 0px;
    font-size: 14px;
    margin-top: -10px;
}
.sec_footer .accordion-title.active { background-color: rgba(0,0,0,0); }
.sec_footer .accordion .toggle {
    width: 2em;
    height: 1em;
    margin-right: 0px;
    top: 0em;
    border-radius: 999px;
    position: absolute;
    left: 0;
}

/* --------------------------------------------------------------------------
   Mobile sidebar menu
   -------------------------------------------------------------------------- */
.limobimenu {
    border-top: 1px solid #ececec !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

.ulmobimenu { background-color: white; }

/* --------------------------------------------------------------------------
   Bootstrap Modal (inline-extracted — replaces Bootstrap CDN dependency)
   -------------------------------------------------------------------------- */
.close {
    float: right;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    filter: alpha(opacity=50);
    opacity: .5;
}
button.close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.modal-open { overflow: hidden; }
.modal {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}
.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    -o-transform: translate(0, -25%);
    transform: translate(0, -25%);
}
.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
}
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }
.modal-dialog { position: relative; width: auto; margin: 10px; }
.modal-content {
    position: relative;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #999;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal-backdrop {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #000;
}
.modal-backdrop.fade { filter: alpha(opacity=0); opacity: 0; }
.modal-backdrop.in   { filter: alpha(opacity=50); opacity: .5; }

.modal-header { min-height: 16.43px; padding: 15px; border-bottom: 1px solid #e5e5e5; }
.modal-header .close { margin-top: -2px; }
.modal-title { margin: 0; line-height: 1.42857143; }
.modal-body  { position: relative; padding: 15px; }
.modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; }
.modal-footer .btn + .btn      { margin-bottom: 0; margin-left: 5px; }
.modal-footer .btn-group .btn + .btn { margin-left: -1px; }
.modal-footer .btn-block + .btn-block { margin-left: 0; }
.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

@media (min-width: 768px) {
    .modal-dialog  { width: 600px; margin: 30px auto; }
    .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); box-shadow: 0 5px 15px rgba(0,0,0,.5); }
    .modal-sm      { width: 300px; }
}
@media (min-width: 992px) {
    .modal-lg { width: 900px; }
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Hotline floating button animations (phone + zalo)
   -------------------------------------------------------------------------- */
.phonering-alo-phone {
    position: fixed;
    visibility: hidden;
    background-color: transparent;
    width: 200px;
    height: 200px;
    cursor: pointer;
    z-index: 200000 !important;
    right: 150px;
    bottom: -50px;
    left: -50px;
    display: block;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
}
.phonering-alo-phone.phonering-alo-show   { visibility: visible; }
.phonering-alo-phone.phonering-alo-static { opacity: .6; }
.phonering-alo-phone.phonering-alo-hover,
.phonering-alo-phone:hover                { opacity: 1; }

.phonering-alo-ph-circle {
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid rgba(30,30,30,0.4);
    opacity: .1;
    -webkit-animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle {
    -webkit-animation: phonering-alo-circle-anim 1.1s infinite ease-in-out !important;
    animation: phonering-alo-circle-anim 1.1s infinite ease-in-out !important;
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle {
    -webkit-animation: phonering-alo-circle-anim 2.2s infinite ease-in-out !important;
    animation: phonering-alo-circle-anim 2.2s infinite ease-in-out !important;
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle,
.phonering-alo-phone:hover .phonering-alo-ph-circle {
    border-color: #00aff2;
    opacity: .5;
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle,
.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle {
    border-color: #272d6b;
    opacity: .5;
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle {
    border-color: #00aff2;
    opacity: .5;
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle,
.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle {
    border-color: #ccc;
    opacity: .5;
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle {
    border-color: #75eb50;
    opacity: .5;
}

.phonering-alo-ph-circle-fill {
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    position: absolute;
    background-color: #000;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-circle-fill {
    -webkit-animation: phonering-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
    animation: phonering-alo-circle-fill-anim 1.7s infinite ease-in-out !important;
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-circle-fill {
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out !important;
    opacity: 0 !important;
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-circle-fill,
.phonering-alo-phone:hover .phonering-alo-ph-circle-fill {
    background-color: rgba(39,45,107,0.5);
    opacity: .75 !important;
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-circle-fill,
.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-circle-fill {
    background-color: rgba(39,45,107,0.5);
    opacity: .75 !important;
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-circle-fill {
    background-color: rgba(0,175,242,0.5);
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-circle-fill,
.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-circle-fill {
    background-color: rgba(204,204,204,0.5);
    opacity: .75 !important;
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-circle-fill {
    background-color: rgba(117,235,80,0.5);
    opacity: .75 !important;
}

.phonering-alo-ph-img-circle {
    width: 60px;
    height: 60px;
    top: 70px;
    left: 70px;
    position: absolute;
    background: rgba(30,30,30,0.1) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNmlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjarY6xSsNQFEDPi6LiUCsEcXB4kygotupgxqQtRRCs1SHJ1qShSmkSXl7VfoSjWwcXd7/AyVFwUPwC/0Bx6uAQIYODCJ7p3MPlcsGo2HWnYZRhEGvVbjrS9Xw5+8QMUwDQCbPUbrUOAOIkjvjB5ysC4HnTrjsN/sZ8mCoNTIDtbpSFICpA/0KnGsQYMIN+qkHcAaY6addAPAClXu4vQCnI/Q0oKdfzQXwAZs/1fDDmADPIfQUwdXSpAWpJOlJnvVMtq5ZlSbubBJE8HmU6GmRyPw4TlSaqo6MukP8HwGK+2G46cq1qWXvr/DOu58vc3o8QgFh6LFpBOFTn3yqMnd/n4sZ4GQ5vYXpStN0ruNmAheuirVahvAX34y/Axk/96FpPYgAAACBjSFJNAAB6JQAAgIMAAPn/AACA6AAAUggAARVYAAA6lwAAF2/XWh+QAAAB/ElEQVR42uya7W3CMBCG31QM4A1aNggTlG6QbpBMkHYC1AloJ4BOABuEDcgGtBOETnD9c1ERCH/lwxeaV8oPFGP86Hy+DxMREW5Bd7gRjSDSNGn4/RiAOvm8C0ZCRD5PSkQVXSr1nK/xE3mcWimA1ZV3JYBZCIO4giQANoYxMwYS6+xKY4lT5dJPreWZY+uspqSCKPYN27GJVBDXheVSQe494ksiEWTuMXcu1dld9SARxDX1OAJ4lgjy4zDnFsC076A4adEiRwAZg4hOUSpNoCsBPDGM+HqkNGynYBCuILuWj+dgWysGsNe8nwL4GsrW0m2fxZBq9rW0rNcX5MOQ9eZD8JFahcG5g/iKT671alGAYQggpYWvpEPYWrU/HDTOfeRIX0q2SL3QN4tGhZJukVobQyXYWw7WtLDKDIuM+ZSzscyCE9PCy5IttCvnZNaeiGLNHKuz8ZVh/MXTVu/1xQKmIqLEAuJ0fNo3iG5B51oSkeKnsBi/4bG9gYB/lCytU5G9DryFW+3Gm+JLwU7ehbJrwTjq4DJU8bHcVbEV9dXXqqP6uqO5e2/QZRYJpqu2IUAA4B3tXvx8hgKp05QZW6dJqrLTNkB6vrRURLRwPHqtYgkC3cLWQAcDQGGKH13FER/NATzi786+BPDNjm1dMkfjn2pGkBHkf4D8DgBJDuDHx9BN+gAAAABJRU5ErkJggg==) no-repeat center center;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.phonering-alo-phone.phonering-alo-active .phonering-alo-ph-img-circle {
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out !important;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out !important;
}
.phonering-alo-phone.phonering-alo-static .phonering-alo-ph-img-circle {
    -webkit-animation: phonering-alo-circle-img-anim 0 infinite ease-in-out !important;
    animation: phonering-alo-circle-img-anim 0 infinite ease-in-out !important;
}
.phonering-alo-phone.phonering-alo-hover .phonering-alo-ph-img-circle,
.phonering-alo-phone:hover .phonering-alo-ph-img-circle {
    background-color: #00aff2;
}
.phonering-alo-phone.phonering-alo-green.phonering-alo-hover .phonering-alo-ph-img-circle,
.phonering-alo-phone.phonering-alo-green:hover .phonering-alo-ph-img-circle {
    background-color: #272d6b;
}
.phonering-alo-phone.phonering-alo-green .phonering-alo-ph-img-circle {
    background-color: #00aff2;
}
.phonering-alo-phone.phonering-alo-gray.phonering-alo-hover .phonering-alo-ph-img-circle,
.phonering-alo-phone.phonering-alo-gray:hover .phonering-alo-ph-img-circle {
    background-color: #ccc;
}
.phonering-alo-phone.phonering-alo-gray .phonering-alo-ph-img-circle {
    background-color: #75eb50;
}

@-webkit-keyframes phonering-alo-circle-anim {
    0%   { -webkit-transform: rotate(0) scale(.5) skew(1deg); -webkit-opacity: .1; }
    30%  { -webkit-transform: rotate(0) scale(.7) skew(1deg); -webkit-opacity: .5; }
    100% { -webkit-transform: rotate(0) scale(1) skew(1deg);  -webkit-opacity: .1; }
}

@-webkit-keyframes phonering-alo-circle-fill-anim {
    0%   { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .2; }
    50%  { -webkit-transform: rotate(0) scale(1) skew(1deg);  opacity: .2; }
    100% { -webkit-transform: rotate(0) scale(.7) skew(1deg); opacity: .2; }
}

@-webkit-keyframes phonering-alo-circle-img-anim {
    0%   { -webkit-transform: rotate(0) scale(1) skew(1deg); }
    10%  { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
    20%  { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
    30%  { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); }
    40%  { -webkit-transform: rotate(25deg) scale(1) skew(1deg); }
    50%  { -webkit-transform: rotate(0) scale(1) skew(1deg); }
    100% { -webkit-transform: rotate(0) scale(1) skew(1deg); }
}

@keyframes phonering-alo-circle-anim {
    0%   { -webkit-transform: rotate(0) scale(.5) skew(1deg); transform: rotate(0) scale(.5) skew(1deg); opacity: .1; }
    30%  { -webkit-transform: rotate(0) scale(.7) skew(1deg); transform: rotate(0) scale(.7) skew(1deg); opacity: .5; }
    100% { -webkit-transform: rotate(0) scale(1) skew(1deg);  transform: rotate(0) scale(1) skew(1deg);  opacity: .1; }
}

@keyframes phonering-alo-circle-fill-anim {
    0%   { -webkit-transform: rotate(0) scale(.7) skew(1deg); transform: rotate(0) scale(.7) skew(1deg); opacity: .2; }
    50%  { -webkit-transform: rotate(0) scale(1) skew(1deg);  transform: rotate(0) scale(1) skew(1deg);  opacity: .2; }
    100% { -webkit-transform: rotate(0) scale(.7) skew(1deg); transform: rotate(0) scale(.7) skew(1deg); opacity: .2; }
}

@keyframes phonering-alo-circle-img-anim {
    0%   { -webkit-transform: rotate(0) scale(1) skew(1deg);     transform: rotate(0) scale(1) skew(1deg); }
    10%  { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
    20%  { -webkit-transform: rotate(25deg) scale(1) skew(1deg);  transform: rotate(25deg) scale(1) skew(1deg); }
    30%  { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
    40%  { -webkit-transform: rotate(25deg) scale(1) skew(1deg);  transform: rotate(25deg) scale(1) skew(1deg); }
    50%  { -webkit-transform: rotate(0) scale(1) skew(1deg);      transform: rotate(0) scale(1) skew(1deg); }
    100% { -webkit-transform: rotate(0) scale(1) skew(1deg);      transform: rotate(0) scale(1) skew(1deg); }
}

.phonering-alo-phonez { left: 70px !important; }

.phonering-alo-ph-img-circlezalo {
    width: 60px;
    height: 60px;
    top: 70px;
    left: 70px;
    position: absolute;
    background: rgba(30,30,30,0.1) url(/images/logozalo.png) no-repeat center center;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.phonering-alo-phone-face { left: 190px !important; }

.phonering-alo-ph-img-circle-face {
    width: 60px;
    height: 60px;
    top: 70px;
    left: 70px;
    position: absolute;
    background: rgba(30,30,30,0.1) url(/images/face.png) no-repeat center center;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}