.vc_editor .weberall-advanced-button-container {
    border: 1px dashed rgba(125,125,125,.4);
}
.weberall-advanced-button {
    display: inline-block;
}

.weberall-overlay.active {
    position: fixed;
    top: 0;
    left: 0;
    background-color: #cdcdcd;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    z-index: 110;
}

/*Show gray border around menu that is hidden by toggle-button element*/
body.vc_editor:not(.toggle-button-active) .weberall-element-container.header-menu-container {
    border: 5px solid rgb(128,128,128, 0.1);
}

/*Toggle button - Responsive menu button*/

.toggle-button-container {
    outline: none;
}
.toggle-button {
    text-decoration: none;
    outline: none;
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.toggle-button * {
    vertical-align: middle;
}

.landscape .text_normal_before, .landscape .text_active_before {
    margin-right: 8px;
}
.landscape .text_normal_after, .landscape .text_active_after {
    margin-left: 8px;
}

/* X burger 3 lines toggle/menu button */
.lines-main {
    /*display: inline-block;*/
    margin: auto;
}
.line{
    background-color: #000000;
    height: 2px;
    display: block;
}
.toggle-button.active .line-2, .toggle-button.close_only .line-2{
    opacity: 0;
}

/*Center image in menu button*/
img.toggle-button-content {
    margin: auto;
}

/* Toggle Button Mini*/
.toggle_button_mini {
    font-size: 18px;
}
.toggle_button_mini .line {
    transition: all linear .3s;
    width: 16px;
    margin: 4px auto;
}
.toggle_button_mini.lines-main, img.toggle_button_mini {
    width: 16px;
}
/*Hamburger 3 lines hover state*/
.toggle-button:hover .toggle_button_mini .line-1, .toggle-button:hover .toggle_button_mini .line-3 {
    width: 10px;
}
/*Hamburger 3 lines active state*/
.toggle-button.active .toggle_button_mini .line-1{
    -webkit-transform: translate(0px, 6px) rotate(45deg);
    transform: translate(0px, 6px) rotate(45deg);
}
.toggle-button.active .toggle_button_mini .line-3{
    -webkit-transform: translate(0px, -6px) rotate(-45deg);
    transform: translate(0px, -6px) rotate(-45deg);
}
/*Hamburger 3 lines both active and hover state at the same time*/
.toggle-button.active:hover .toggle_button_mini .line-1 {
    -webkit-transform: translate(0px, 6px) rotate(135deg);
    transform: translate(0px, 6px) rotate(135deg);
    width: 16px;
}
.toggle-button.active:hover .toggle_button_mini .line-3 {
    -webkit-transform: translate(0px, -6px) rotate(45deg);
    transform: translate(0px, -6px) rotate(45deg);
    width: 16px;
}

/*Menu Button Small*/
.toggle_button_small{
    font-size: 24px;
}
.toggle_button_small .line{
    transition: all linear .3s;
    width: 22px;
    margin: 6px auto;
}
.toggle_button_small.lines-main, img.toggle_button_small {
    width: 22px;
}
.toggle-button:hover .toggle_button_small .line-1, .toggle-button:hover .toggle_button_small .line-3 {
    width: 14px;
}
.toggle-button.active .toggle_button_small .line-1{
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}
.toggle-button.active .toggle_button_small .line-3{
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}
.toggle-button.active:hover .toggle_button_small .line-1 {
    -webkit-transform: translate(0px, 8px) rotate(135deg);
    transform: translate(0px, 8px) rotate(135deg);
    width: 22px;
}
.toggle-button.active:hover .toggle_button_small .line-3 {
    -webkit-transform: translate(0px, -8px) rotate(45deg);
    transform: translate(0px, -8px) rotate(45deg);
    width: 22px;
}

/*Menu Button Normal*/
.toggle_button_normal{
    font-size: 28px;
}
.toggle_button_normal .line{
    transition: all linear .3s;
    width: 24px;
    margin: 6px auto;
}
.toggle_button_normal.lines-main, img.toggle_button_normal {
    width: 24px;
}
.toggle-button:hover .toggle_button_normal .line-1, .toggle-button:hover .toggle_button_normal .line-3 {
    width: 14px;
}
.toggle-button.active .toggle_button_normal .line-1{
    -webkit-transform: translate(0px, 8px) rotate(45deg);
    transform: translate(0px, 8px) rotate(45deg);
}
.toggle-button.active .toggle_button_normal .line-3{
    -webkit-transform: translate(0px, -8px) rotate(-45deg);
    transform: translate(0px, -8px) rotate(-45deg);
}
.toggle-button.active:hover .toggle_button_normal .line-1 {
    -webkit-transform: translate(0px, 8px) rotate(135deg);
    transform: translate(0px, 8px) rotate(135deg);
    width: 24px;
}
.toggle-button.active:hover .toggle_button_normal .line-3 {
    -webkit-transform: translate(0px, -8px) rotate(45deg);
    transform: translate(0px, -8px) rotate(45deg);
    width: 24px;
}

/*Menu Button Large*/
.toggle_button_large{
    font-size: 42px;
}
.toggle_button_large .line{
    transition: all linear .3s;
    width: 34px;
    margin: 9px auto;
}
.toggle_button_large.lines-main, img.toggle_button_large {
    width: 34px;
}
.toggle-button:hover .toggle_button_large .line-1, .toggle-button:hover .toggle_button_large .line-3 {
    width: 22px;
}
.toggle-button.active .toggle_button_large .line-1{
    -webkit-transform: translate(0px, 11px) rotate(45deg);
    transform: translate(0px, 11px) rotate(45deg);
}
.toggle-button.active .toggle_button_large .line-3{
    -webkit-transform: translate(0px, -11px) rotate(-45deg);
    transform: translate(0px, -11px) rotate(-45deg);
}
.toggle-button.active:hover .toggle_button_large .line-1 {
    -webkit-transform: translate(0px, 11px) rotate(135deg);
    transform: translate(0px, 11px) rotate(135deg);
    width: 34px;
}
.toggle-button.active:hover .toggle_button_large .line-3 {
    -webkit-transform: translate(0px, -11px) rotate(45deg);
    transform: translate(0px, -11px) rotate(45deg);
    width: 34px;
}

/*Extra Large size 5em*/
.toggle_button_extra_large{
    font-size: 74px;
}
.toggle_button_extra_large .line{
    transition: all linear .3s;
    width: 66px;
    margin: 22px auto;
}
.toggle_button_extra_large.lines-main, img.toggle_button_extra_large {
    width: 66px;
}
.toggle-button:hover .toggle_button_extra_large .line-1, .toggle-button:hover .toggle_button_extra_large .line-3 {
    width: 44px;
}
.toggle-button.active .toggle_button_extra_large .line-1{
    -webkit-transform: translate(0px, 24px) rotate(45deg);
    transform: translate(0px, 24px) rotate(45deg);
}
.toggle-button.active .toggle_button_extra_large .line-3{
    -webkit-transform: translate(0px, -24px) rotate(-45deg);
    transform: translate(0px, -24px) rotate(-45deg);
}
.toggle-button.active:hover .toggle_button_extra_large .line-1 {
    -webkit-transform: translate(0px, 24px) rotate(135deg);
    transform: translate(0px, 24px) rotate(135deg);
    width: 66px;
}
.toggle-button.active:hover .toggle_button_extra_large .line-3 {
    -webkit-transform: translate(0px, -24px) rotate(45deg);
    transform: translate(0px, -24px) rotate(45deg);
    width: 66px;
}

/*Icon or image hides the first element and displays the second element as menu button*/
.toggle-button-close {
    display: none;
}
.toggle-button-close.fa, .toggle-button-close.fab, .toggle-button-close.fad, .toggle-button-close.fal, .toggle-button-close.far, .toggle-button-close.fas {
    display: none;
}
/*.fa, .fab, .fad, .fal, .far, .fas*/
/*The first option is for toggle button on its own, the second is for toggle button directly in menu li element, the third is for toggle button in a inner row and the inner row is in menu li element. */
.toggle-button.active .toggle-button-close, .weberall-nav-li.active > a > div > .toggle-button .toggle-button-close, .weberall-nav-li.active > a > div > div > div > div > div .toggle-button .toggle-button-close {
    display: unset;
}
/*Two menu buttons next to each other hides the first one and the second button comes to its place if you hover over the first one*/
.toggle-button.active.portrait .toggle-button-close {
    display: block;
}
/*The first option is for toggle button on its own, the second is for toggle button directly in menu li element, the third is for toggle button in a inner row and the inner row is in menu li element. */
.toggle-button.active .toggle-button-open, .weberall-nav-li.active > a > div > .toggle-button .toggle-button-open, .weberall-nav-li.active > a > div > div > div > div > div .toggle-button-open {
    display: none !important;
}


/*Hamburger 3 lines X - For custom option: Backup Start*/
/*Hamburger 3 lines normal state*/
/*.toggle-button-line-1,.toggle-button-line-2,.toggle-button-line-3{
    width: 30px;
    background: #000000;
    height: 2px;
    display: flex;
    margin: 9px auto;
    border-radius: 2px;
    transition: all linear .3s;
}*/

/*Hamburger 3 lines hover state*/
/*.toggle-button:hover .toggle-button-line-1, .toggle-button:hover .toggle-button-line-3 {
    width: 20px;
}*/

/*Hamburger 3 lines active state*/
/*.toggle-button.active .toggle-button-line-1{
    -webkit-transform: translate(0px,11px) rotate(45deg);
    transform: translate(0px,11px) rotate(45deg);
}
.toggle-button.active .toggle-button-line-2{
    opacity: 0;
}
.toggle-button.active .toggle-button-line-3{
    -webkit-transform: translate(0px, -11px) rotate(-45deg);
    transform: translate(0px, -11px) rotate(-45deg);
}*/

/*Hamburger 3 lines active and hover state*/
/*.toggle-button.active:hover .toggle-button-line-1 {
    width: 30px;
    -webkit-transform: translate(0px,11px) rotate(135deg);
    transform: translate(0px,11px) rotate(135deg);
}
.toggle-button.active:hover .toggle-button-line-3 {
    width: 30px;
    -webkit-transform: translate(0px, -11px) rotate(45deg);
    transform: translate(0px, -11px) rotate(45deg);
}*/

/*Hamburger 3 lines X - For Custom option: Backup End*/

/*BUTTON OR LINK ELEMENT*/
.weberall-button-or-link, .button-or-link-icon, .weberall-button-or-link > p {
    display: inline-block;
}
.button-or-link-icon_left, .post-read-more-icon_left {
    margin-right: 10px;
}
.button-or-link-icon_right, .post-read-more-icon_right {
    margin-left: 10px;
}

/*If no data available for any element in editor mode it will show a no data message with silver background color.*/
.no-data-for-element {
    background-color: rgba(190, 194, 203, 0.5); /*#bec2cb*/
    padding: 15px;
    margin: 1px;
}

/*LOGO ELEMENT*/
.weberall-logo {
    display: flex;
}

/*CATEGORIES WITH POSTS COUNT ELEMENT*/
.categories-with-posts-count-link {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
}

/*POST CATEGORIES ELEMENT*/
.post-categories-link {
    color: #000;
    text-decoration: none;
    display: inline-block;
}

/*POST TAGS ELEMENT*/
.post-tags-link {
    color: #000;
    text-decoration: none;
    display: inline-block;
}

/* COMMENTS NUMBER ELEMENT - comments-number */
.comments-number-icon {
    margin-right: 10px;
}

/* "LISTING / ARCHIVE / RELATED" ELEMENT */
/*.weberall_block_main_title.related-product-title {*/
.weberall_block_main_title {
    margin-left: 15px;
    margin-bottom: 25px;
}

.weberall-posts-container .article {
/*    overflow: hidden;*/
    display: block; /* The .article element is li element that has display:list-item which adds extra space to the top of each element, display:block removes it. */
}

.article-inner.vc_column-inner {
    width: unset;
    position: relative;
}

/*MASONRY*/
/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- Listing / Archive / Related element (grid-item) for listing pages ---- */

@media only screen and (min-width: 768px) {
    .grid-sizer,
    .grid-item {
        float: left;
    }

    .vc_col-sm-2 { width: 16.66666667% !important; }
    .vc_col-sm-2\.4 { width: 20% !important; }
    .vc_col-sm-3 { width: 25% !important; }
    .vc_col-sm-4 { width: 33.33333333% !important; }
    .vc_col-sm-4\.8 { width: 40% !important; }
    .vc_col-sm-6 { width: 50% !important; }
    .vc_col-sm-7\.2 { width: 60% !important; }
    .vc_col-sm-8 { width: 66.66666666% !important; }
    .vc_col-sm-9 { width: 75% !important; }
    .vc_col-sm-9\.6 { width: 80% !important; }
    .vc_col-sm-10 { width: 83.33333333% !important; }
    .vc_col-sm-12 { width: 100% !important; }
}

/*ISOTOPE*/

/* ---- filter buttons ---- */

.listing-archive-related-filter-button {
    font-size: 1rem;
    color: #394b85;
    padding: 10px 18px;
    margin-bottom: 35px;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}
.listing-archive-related-filter-button.is-checked {
    color: #000;
}

.button-group.filters-button-group.left {
    text-align: left;
}
.button-group.filters-button-group.center {
    text-align: center;
}
.button-group.filters-button-group.right {
    text-align: right;
}

/* "Listing / Archive / Related" element load more button and pagination */
.display_style_presentation {
    font-size: 20px;
}
.page-numbers {
    padding: 0 .5em;
}
.btn-weberall-load {
    width: 130px;
    cursor: pointer;
    opacity: 1;
}
.btn-weberall-load:hover, .btn-weberall-load:focus {
    opacity: 1;
}
.btn-weberall-load.loading {
    cursor: default;
    opacity: 0.5;
}
.btn-weberall-load .text {
    display: block;
}

span.page-numbers.current {
    font-weight: bold;
}

/*Post featured image*/
.post-featured-image-container {
    overflow: hidden;
}


/*VC ROW*/
.show_on_hover {
    opacity: 0;
    transition: all 1s;
}
.article:hover .show_on_hover {
    opacity: 1;
}

.article:hover .show_on_hover.bounceIn {
    -webkit-animation-name: bounceIn !important;
    animation-name: bounceIn !important;
}
.article:hover .show_on_hover.bounceInDown {
    -webkit-animation-name: bounceInDown !important;
    animation-name: bounceInDown !important;
}
.article:hover .show_on_hover.bounceInLeft {
    -webkit-animation-name: bounceInLeft !important;
    animation-name: bounceInLeft !important;
}
.article:hover .show_on_hover.bounceInRight {
    -webkit-animation-name: bounceInRight !important;
    animation-name: bounceInRight !important;
}
.article:hover .show_on_hover.bounceInUp {
    -webkit-animation-name: bounceInUp !important;
    animation-name: bounceInUp !important;
}
/*Fade*/
.article:hover .show_on_hover.fadeIn {
    -webkit-animation-name: fadeIn !important;
    animation-name: fadeIn !important;
}
.article:hover .show_on_hover.fadeInDown {
    -webkit-animation-name: fadeInDown !important;
    animation-name: fadeInDown !important;
}
.article:hover .show_on_hover.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig !important;
    animation-name: fadeInDownBig !important;
}
.article:hover .show_on_hover.fadeInLeft {
    -webkit-animation-name: fadeInLeft !important;
    animation-name: fadeInLeft !important;
}
.article:hover .show_on_hover.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig !important;
    animation-name: fadeInLeftBig !important;
}
.article:hover .show_on_hover.fadeInRight {
    -webkit-animation-name: fadeInRight !important;
    animation-name: fadeInRight !important;
}
.article:hover .show_on_hover.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig !important;
    animation-name: fadeInRightBig !important;
}
.article:hover .show_on_hover.fadeInUp {
    -webkit-animation-name: fadeInUp !important;
    animation-name: fadeInUp !important;
}
.article:hover .show_on_hover.fadeInUpBig {
    -webkit-animation-name: fadeInUpBig !important;
    animation-name: fadeInUpBig !important;
}
/*Flippers*/
.article:hover .show_on_hover.flipInX {
    -webkit-animation-name: flipInX !important;
    animation-name: flipInX !important;
}
.article:hover .show_on_hover.flipInY {
    -webkit-animation-name: flipInY !important;
    animation-name: flipInY !important;
}
/*Lightspeed*/
.article:hover .show_on_hover.lightSpeedIn {
    -webkit-animation-name: lightSpeedIn !important;
    animation-name: lightSpeedIn !important;
}
/*Rotating Entrances*/
.article:hover .show_on_hover.rotateIn {
    -webkit-animation-name: rotateIn !important;
    animation-name: rotateIn !important;
}
.article:hover .show_on_hover.rotateInDownLeft {
    -webkit-animation-name: rotateInDownLeft !important;
    animation-name: rotateInDownLeft !important;
}
.article:hover .show_on_hover.rotateInDownRight {
    -webkit-animation-name: rotateInDownRight !important;
    animation-name: rotateInDownRight !important;
}
.article:hover .show_on_hover.rotateInUpLeft {
    -webkit-animation-name: rotateInUpLeft !important;
    animation-name: rotateInUpLeft !important;
}
.article:hover .show_on_hover.rotateInUpRight {
    -webkit-animation-name: rotateInUpRight !important;
    animation-name: rotateInUpRight !important;
}
/*Specials*/
.article:hover .show_on_hover.rollIn {
    -webkit-animation-name: rollIn !important;
    animation-name: rollIn !important;
}
/*Zoom Entrances*/
.article:hover .show_on_hover.zoomIn {
    -webkit-animation-name: zoomIn !important;
    animation-name: zoomIn !important;
}
.article:hover .show_on_hover.zoomInDown {
    -webkit-animation-name: zoomInDown !important;
    animation-name: zoomInDown !important;
}
.article:hover .show_on_hover.zoomInLeft {
    -webkit-animation-name: zoomInLeft !important;
    animation-name: zoomInLeft !important;
}
.article:hover .show_on_hover.zoomInRight {
    -webkit-animation-name: zoomInRight !important;
    animation-name: zoomInRight !important;
}
.article:hover .show_on_hover.zoomInUp {
    -webkit-animation-name: zoomInUp !important;
    animation-name: zoomInUp !important;
}
/*Slide Entrances*/
.article:hover .show_on_hover.slideInDown {
    -webkit-animation-name: slideInDown !important;
    animation-name: slideInDown !important;
}
.article:hover .show_on_hover.slideInLeft {
    -webkit-animation-name: slideInLeft !important;
    animation-name: slideInLeft !important;
}
.article:hover .show_on_hover.slideInRight {
    -webkit-animation-name: slideInRight !important;
    animation-name: slideInRight !important;
}
.article:hover .show_on_hover.slideInUp {
    -webkit-animation-name: slideInUp !important;
    animation-name: slideInUp !important;
}








/*Default*/
.article:hover .show_on_hover.top-to-bottom {
    -webkit-animation-name: wpb_ttb !important;
    animation-name: wpb_ttb !important;
}
.article:hover .show_on_hover.bottom-to-top {
    -webkit-animation-name: wpb_btt !important;
    animation-name: wpb_btt !important;
}
.article:hover .show_on_hover.left-to-right {
    -webkit-animation-name: wpb_ltr !important;
    animation-name: wpb_ltr !important;
}
.article:hover .show_on_hover.right-to-left {
    -webkit-animation-name: wpb_rtl !important;
    animation-name: wpb_rtl !important;
}
.article:hover .show_on_hover.appear {
    -webkit-animation-name: appear !important;
    animation-name: appear !important;
}



/* Animations with animation-delay shows elements on load and then disappears and load it again on animation-delay time, the opacity:0 on 0% and opacity:1 on 100% stops the first appearance. */
@-webkit-keyframes bounce{0%{opacity:0;transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%,20%,53%,80%{opacity:1;transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
@keyframes bounce{0%{opacity:0;transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%,20%,53%,80%{opacity:1;transition-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}40%,43%{transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{transition-timing-function:cubic-bezier(.755,.050,.855,.060);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}
@-webkit-keyframes flash{0%{opacity:0;}100%,50%{opacity:1}25%,75%{opacity:0}}
@keyframes flash{0%{opacity:0;}100%,50%{opacity:1}25%,75%{opacity:0}}
@-webkit-keyframes pulse{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@-webkit-keyframes rubberBand{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes rubberBand{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@-webkit-keyframes shake{0%{opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}
@keyframes shake{0%{opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}
@-webkit-keyframes swing{0%{opacity:0;}20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{opacity:1;-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}
@keyframes swing{0%{opacity:0;}20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{opacity:1;-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}
@-webkit-keyframes tada{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes tada{0%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);transform:scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@-webkit-keyframes wobble{0%{opacity:0;-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes wobble{0%{opacity:0;-webkit-transform:none;transform:none}15%{-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)}100%{opacity:1;-webkit-transform:none;transform:none}}

@-webkit-keyframes flip{0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}
@keyframes flip{0%{opacity:0;-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);transform:perspective(400px) rotate3d(0,1,0,-360deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}

@-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:hidden}100%{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible;}}
@keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:hidden}100%{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible;}}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}100%{-webkit-transform:translateX(0);transform:translateX(0)}}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:hidden}100%{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible;}}
@-webkit-keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:hidden}100%{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible;}}
@keyframes slideInRight{0%{-webkit-transform:translateX(100%);transform:translateX(100%);visibility:hidden}100%{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible;}}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:hidden}100%{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible;}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:hidden}100%{-webkit-transform:translateY(0);transform:translateY(0);visibility:visible;}}

@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}
@keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(100%);transform:translateY(100%)}}
@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}
@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%)}}
@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}
@keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{visibility:hidden;-webkit-transform:translateX(100%);transform:translateX(100%)}}
@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}
@keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{visibility:hidden;-webkit-transform:translateY(-100%);transform:translateY(-100%)}}


.hide_on_hover {
    opacity: 1;
    transition: all 1s;
}
.article:hover .hide_on_hover {
    opacity: 0;
}



/*Comments*/
.comment {
    position: relative;
}
.comment-body {
    margin-top: 45px;
}
.comment img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 3px;
}
.comment cite.fn {
    font-size: 20px;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
    vertical-align: top;
}
.comment span.says {
    display: none;
}
.comment .comment-meta.commentmetadata {
    display: inline-block;
    position: absolute;
    left: 55px;
    top: 30px;
}
.comment-content {
    border: 1px solid gray;
    border-radius: 3px;
    margin-top: 15px;
    padding: 20px 20px 60px;
}
.comment .reply {
    position: absolute;
    margin: -40px 0 0 20px;
}
nav.comments-pagination.pagination {
    margin-top: 20px;
    margin-bottom: 20px;
}
nav.comments-pagination.pagination * {
    text-decoration: none;
    margin: 6px;
    color: #000;
}
/* hr horizontal line between posted comments and comment form*/
.styled-separator {
    margin: 30px 0;
}

.comment > .comment {
    margin-left: 30px;
}

/* WOOCOMMERCE PRODUCTS */

/* Add to cart listting, added to cart notice (message) button */
.demo-data-for-element a.button, .woocommerce-message a.button.wc-forward {
    font-size: 100%;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    position: relative;
    text-decoration: none;
    overflow: visible;
    padding: .618em 1em;
    font-weight: 700;
    border-radius: 3px;
    left: auto;
    color: #515151;
    background-color: #ebe9eb;
    border: 0;
    display: inline-block;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
}

/* Product meta: SKU, Categories, Tags using function woocommerce_template_single_meta() */
.weberall-product-meta div span {
    margin-right: 10px;
    display: inline-block;
}

/* Product sale badge */
/* Product sale badge - The first one is for listing type product. The second works for archive shop */
.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
    position: relative;
    left: unset;
    right: unset;
    top: unset;
    display: flex;
    width: 3.236em;
    height: 3.236em;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.woocommerce-Price-amount {
    display: inline-block;
}

.weberall-product-rating .star-rating {
    float: left;
}
/* It display:none the review number link for related products which goes to the current product (single page) reviews. */
.article .woocommerce-review-link {
    display: none;
}

/* DATA TABS */
.woocommerce-tabs li {
    display: inline-block;
    margin-right: 1em;
}
.woocommerce-tabs a {
    color: #000;
}

/* According to woocommerce this class should be products "$woocommerce_products_class = ' products columns-' . esc_attr( wc_get_loop_prop( 'columns' ) );" for <ul class="products columns-*" in file ../elements/wpbakery/listing-archive-related-wpbakery.php but it adds the second product on 50% position even in 4 columns per row. The following CSS resolves this issue */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin: 0;
}


/* ICON */
/* elementor applies box-sizing to all elements. This makes icon styles consistent. */
.weberall-advanced-icon {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Changes the default position:absolute from i::before. This makes the icon to use the margin and padding properties. */
.elementor-icon i::before, .elementor-icon svg::before {
    position: relative;
    display: inline-block;
}

/* ADVANCED BUTTON */
.vc_advanced_button .vc_controls-container.vc_controls {
    bottom: -30px;
}