@-webkit-keyframes anim-moema-1 {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@keyframes anim-moema-1 {
	60% {
		-webkit-transform: scale3d(0.8, 0.8, 1);
		transform: scale3d(0.8, 0.8, 1);
	}
	85% {
		-webkit-transform: scale3d(1.1, 1.1, 1);
		transform: scale3d(1.1, 1.1, 1);
	}
	100% {
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}
@-webkit-keyframes anim-moema-2 {
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.6, 1.6, 1.6);
		transform: scale3d(1.6, 1.6, 1.6);
	}
}
@keyframes anim-moema-2 {
	to {
		opacity: 0;
		-webkit-transform: scale3d(1.6, 1.6, 1.6);
		transform: scale3d(1.6, 1.6, 1.6);
	}
}

.custom-button{
    &.btn_hovered{
        a{
            span.main-text{
                transition: all .3s;
            }
        }
        
        a.hover_moema{
            overflow: visible;
            
            &:hover{
                -webkit-animation: anim-moema-1 0.3s forwards;
                animation: anim-moema-1 0.3s forwards;
            }
        }
        
        a.right_ico_hover:hover{
            span.main-text{
                transform: translate(-10px, 0);
            }
        }
        
        a.left_ico_hover:hover{
            span.main-text{
                transform: translate(10px, 0);
            }
        }
    }
    
    i{   
        &.icon-left{
            margin-right: 12px;
            position: relative;
            z-index: 3;
        }
        
        &.icon-right{
            margin-left: 12px;
            position: relative;
            z-index: 3;
        }
        
        &.hover-icon{
            position: absolute;
            line-height: 27px;
            
            &.icon-left{
                left: 20px;
                opacity: 0;
                transform: translate(10px, 0);
                transition: all .3s;
            }
            
            &.icon-right{
                right: 20px;
                opacity: 0;
                transform: translate(-10px, 0);
                transition: all .3s;
            }
        }
    }
    
    a{
        display: inline-block;
        position: relative;
        overflow: hidden;
        line-height: 27px;
        font-size: 14px;
        padding: 20px 40px;
        transition: all .2s;
        box-sizing: border-box;
        
        span {
            box-sizing: border-box;
        }
        
        &:hover{
            i.hover-icon{
                opacity: 1;
                transform: translate(0, 0);
            }
        }
        
        &.hover_antiman{
            overflow: visible;
        }
        
        &.hover_isi{
            &:hover{
                transition: all .3s ease .3s;
                background: transparent !important;
            }
        }
        
        span.main-text{
            transform: translate(0, 0);
            opacity: 1;
            display: inline-block;
            transition: all .3s;
        }
        
        span.main-text.hover_isi{
            position: relative;
        }      
        
        span.winona-text{
            position: absolute;
            top: ~"calc(50% + 35px)";
            width: 100%;
            z-index: 2;
            left: 0;
            transform: translate(0, -50%);
            opacity: 0;
            padding: 20px 40px;
            transition: all .3s;
            
            &.icon_vis_right{
                text-align: left;
            }
            
            &.icon_vis_left{
                text-align: right;
            }
            
            &.icon_hov_right{
                text-align: left;
            }
            
            &.icon_hov_left{
                text-align: right;
            }
        }
        
        span.saqui-text{
            position: absolute;
            top: 50%;
            width: 100%;
            z-index: 2;
            left: 0;
            -webkit-transform-origin: -25% 50%;
            transform-origin: -25% 50%;
            transform: translate(0, -50%) rotate3d(0, 0, 1, 45deg);
            opacity: 0;
            padding: 20px 40px;
            transition: all .3s;
            
            &.icon_vis_right{
                text-align: left;
            }
            
            &.icon_vis_left{
                text-align: right;
            }
            
            &.icon_hov_right{
                text-align: left;
            }
            
            &.icon_hov_left{
                text-align: right;
            }
        }
        
        span.antiman-text{
            position: absolute;
            top: -1px;
            width: ~"calc(100% + 2px)";
            height: ~"calc(100% + 2px)";
            z-index: 2;
            left: -1px;
            transform: translate(0, 0) scale(1.2);
            opacity: 0;
            transition: all .3s;
        }
        
        span.isi-text{
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            left: 0;
            border-radius: 36px;
            transform: translate(102%, 0);
            transition: all .3s;
        }
        
        span.moema-text{
            position: absolute;
            top: -20px;
            left: -20px;
            bottom: -20px;
            right: -20px;
            background: inherit;
            z-index: -1;
            opacity: 0.4;
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
        
        span.wapasha-text{
            position: absolute;
            top: -20px;
            left: -20px;
            bottom: -20px;
            right: -20px;
            background: inherit;
            z-index: -1;
            opacity: 0;
            -webkit-transform: scale3d(0.6, 0.6, 1);
            transform: scale3d(0.6, 0.6, 1);
            transition: all .3s;
        }
        
        &:hover{
            span.winona-text{
                top: 50%;
                opacity: 1;
            }
            
            span.saqui-text{
                top: 50%;
                opacity: 1;
                transform: translate(0, -50%) rotate3d(0, 0, 1, 0deg);
            }
            
            span.antiman-text{
                opacity: 1;
                transform: translate(0, 0) scale(1);  
            }
            
            span.isi-text{
                border-radius: 0;
                transform: translate(0, 0);  
            }
            
            span.moema-text{
                -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
                animation: anim-moema-2 0.3s 0.3s forwards;
            }
            
            span.wapasha-text{
                transform: scale3d(1, 1, 1);
                -webkit-transform: scale3d(1, 1, 1);
                opacity: 1;
            }
            
            span.main-text.hover_winona{
                opacity: 0;
                transform: translate(0, -35px);  
            }
            
            span.main-text.hover_saqui{
                opacity: 0;
            } 
            
            span.main-text.hover_isi{
                z-index: 3;
            } 
            
            .fa{
                z-index: 3;
            }
        }
        
        &:hover{
            
        }
    }
    
    @media(max-width: 767px){
        text-align: center !important;
    }
}

/* Integration in header and native code changes */
body.sellocity-custom-button--active {
    
    /* All buttons anywhere on site */
    .sellocity-custom-button {

        .sellocity-custom-btn-medium {
            padding: 6px 26px;
        }
        .sellocity-custom-btn-small {
            padding: 2px 22px;
        }
        .sellocity-custom-btn-large {
            padding: 10px 30px;
        }

        a {
            font-size: 16px;
        }

        span {
            /* Fix for blury text on hover */
            line-height: 26px;
            
            &.antiman-text {
                pointer-events: none;
            }
        }

    }
    
    /* All buttons only in header */
    .header_wrapper {
        
        #div_header_menu {
            line-height: 1;
            
            #menu-custom-button {
                margin-right: 10px;
                vertical-align: middle;
            }
        }
    
        &.sticky-header {
            
            #div_header_menu {
                
                &.menu_wrapper {
                    height: auto;
                }
                
                #menu-custom-button {
                   
                    .sellocity-custom-btn-large,
                    .sellocity-custom-btn-small,
                    .sellocity-custom-btn-medium {
                        padding: 2px 22px;
                        font-size: 16px !important;
                        
                        i {
                            line-height: 19px !important;
                        }
                    }
                }
                
                #search-trigger {
                    vertical-align: middle;
                }
            }
        }
    }

}

/* Fix for responsive menu */
body.sellocity-custom-button--active {
    
    .pbtheme-responsive-menu {
        
        .sellocity-custom-button {
            text-align: left !important;
            margin-bottom: 5px;
        }
    }
}