/*
	Theme Name: Revolution Child Theme
	Theme URI: http://themeforest.net/user/fuelthemes
	Description: <strong>A Premium theme for magazine, editor, community and more! WordPress Theme by <a href="http://www.themeforest.net/user/fuelthemes">fuelthemes</a></strong> – Update notifications available on Twitter and Themeforest <a href="http://twitter.com/anteksiler">Follow us on twitter</a> – <a href="http://themeforest.net/user/fuelthemes">Follow us on Themeforest</a>
	Version: 1.0.0
	Author: fuelthemes
	Template: revolution
	Text Domain: revolution
	Domain Path: /inc/languages
*/


:root {
    --btn-padding-lr: 80px;
    --btn-padding-tb: 20px;
}

.cta-shine {
    overflow: hidden;
    position: relative;
	transition: all 0.3s;
}


.shine-only:before {
    content: none !important;
}

.cta-shine:after {
    content: "";
    position: absolute;
    transform:  translate(calc(-210% + var(--btn-padding-lr)),-40%) rotate(5deg);
    width: 100%;
    height: 200%;
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient( to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.0) 100% );
    animation-duration: 4s;
    animation-name: shine-effect;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    will-change: transform;
}

.cta-shine:hover:after {
    animation: none;
}

.cta-shine.shine-only:after {
    animation-name: shine-effect !important;
}

@keyframes shine-effect {

    0% {
        opacity: 0.5;
        transform:  translate(calc(-210% + var(--btn-padding-lr)),-0%) rotate(5deg);
    }
    10% {
        opacity: 0.5;
        transform:  translate(calc(-210% + var(--btn-padding-lr)),-0%) rotate(5deg);
    }

    70% {
        opacity: 1;
        transform: translate(calc(50% + var(--btn-padding-lr)),-0%) rotate(5deg);
    }

    100% {
        opacity: 0.5;
        transform: translate(calc(50% + var(--btn-padding-lr)),-0%) rotate(5deg);
    }
}

.cta-shine:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 200%;
    transform: translate(calc(-110% - var(--btn-padding-lr)),-0%) rotate(5deg);
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.13);
    background: linear-gradient( to right, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.5) 47%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 0.0) 100% );
    transition: all 0s;
    will-change: transform;
}

.cta-shine:hover:before {
    transform: translate(calc(110% - var(--btn-padding-lr)),-0%) rotate(5deg);
    opacity: 1;
    transition: all 1.5s;
}

/* end */