.op3-element[data-op3-element-type="button"],
.op3-element[data-op3-element-type="coursebutton"],
.op3-element[data-op3-element-type="lessonbutton"] {
    max-width: 50%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;

    > .op3-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 22px;
        background-color: transparent;
        text-align: center;
        box-shadow: none;
        font-size: 16px;
        //font-weight: inherit;
        //font-style: inherit;
        //text-decoration: none;
        //text-transform: inherit;
        //text-shadow: inherit;
        //color: #fff;
        overflow: hidden;
        background-clip: border-box;

        span {
            display: inline-block;
            min-width: 1em;
            font-size: inherit;
            font-weight: inherit;
            font-style: inherit;
            transition: font-size 0.2s ease;
        }

        .op3-icon {
            font-size: 100%;
            display: none;
        }

        .op3-divider {
            height: 100%;
            width: 8px;
            min-width: 0;
            display: none;
        }

        &[data-op3-action='none'],
        &[data-op-action='none'] {
            cursor: default;
        }

        &[data-op3-action='disabled'],
        &[data-op-action='disabled'] {
            pointer-events: none;
            opacity: 0.4;
            cursor: default;
        }
    }

    .op3-text-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .op3-subtext {
        display: none;
        font-size: 16px;
        line-height: 1em;
    }

    [data-op3-contenteditable] {
        min-width: 0.5em;
    }

    .op3-background-ancestor {
        z-index: 0;

        [data-op3-background='overlay'] {
            z-index: -1;
        }

        [data-op3-border] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.2);
            border-width: 0;
            border-radius: inherit;
            pointer-events: none;
            box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.4);
        }
    }

    // Button spiner for form submit
    .submitting {
        display: inline-block;
        width: 24px;
        height: 24px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-radius: 50%;
        border-top-color: #fff;
        animation: spin 1s infinite;
        -webkit-animation: spin 1s infinite;
    }

    @keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spin {
        to {
            -webkit-transform: rotate(360deg);
        }
    }

    /**
     * Button Effect Style
     */
    [data-op-effect-style]:hover {
        animation: none;
    }

    // Bounce
    [data-op-effect-style='bounce'] {
        animation: effectBounce 1.5s infinite;
        animation-timing-function: ease-in;
        transition: 0.2s;
    }

    @keyframes effectBounce {
        15% {
            transform: translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        35% {
            transform: translateY(-35%);
            box-shadow: 0 8px 5px -5px rgba(0, 0, 0, 0.25);
        }
        45% {
            transform: translateY(0%);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        55% {
            transform: translateY(-20%);
            box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.25);
        }
        70% {
            transform: translateY(0%);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        80% {
            transform: translateY(-10%);
            box-shadow: 0 4px 3px -3px rgba(0, 0, 0, 0.25);
        }
        90% {
            transform: translateY(0%);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        95% {
            transform: translateY(-2%);
            box-shadow: 0 2px 3px -3px rgba(0, 0, 0, 0.25);
        }
        99% {
            transform: translateY(0%);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
        100% {
            transform: translateY(0);
            box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
        }
    }

    // Rocking (small)
    [data-op-effect-style='rockingsmall'] {
        animation: effectRockingsmall 2s infinite;
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        transition: 0.2s;
    }

    @keyframes effectRockingsmall {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(2deg);
        }
        75% {
            transform: rotate(-2deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    // Rocking (large)
    [data-op-effect-style='rockinglarge'] {
        animation: effectRockinglarge 2s infinite;
        animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
        transition: 0.2s;
    }

    @keyframes effectRockinglarge {
        0% {
            transform: rotate(0deg);
        }
        25% {
            transform: rotate(0deg);
        }
        50% {
            transform: rotate(5deg);
        }
        75% {
            transform: rotate(-5deg);
        }
        100% {
            transform: rotate(0deg);
        }
    }

    // Pulsate
    [data-op-effect-style='pulsate'] {
        animation: effectPulsate 0.5s ease-in-out infinite both;
    }

    @keyframes effectPulsate {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.1);
        }
        100% {
            transform: scale(1);
        }
    }

    // Heartbeat
    [data-op-effect-style='heartbeat'] {
        animation: effectHeartbeat 1.5s ease-in-out infinite both;
    }

    @keyframes effectHeartbeat {
        from {
            transform: scale(1);
            transform-origin: center center;
            animation-timing-function: ease-out;
        }
        10% {
            transform: scale(0.91);
            animation-timing-function: ease-in;
        }
        17% {
            transform: scale(0.98);
            animation-timing-function: ease-out;
        }
        33% {
            transform: scale(0.87);
            animation-timing-function: ease-in;
        }
        45% {
            transform: scale(1);
            animation-timing-function: ease-out;
        }
    }

    // Vibrate
    [data-op-effect-style='vibrate'] {
        animation: effectVibrate 0.3s linear infinite both;
    }

    @keyframes effectVibrate {
        0% {
            transform: translate(0);
        }
        20% {
            transform: translate(-2px, 2px);
        }
        40% {
            transform: translate(-2px, -2px);
        }
        60% {
            transform: translate(2px, 2px);
        }
        80% {
            transform: translate(2px, -2px);
        }
        100% {
            transform: translate(0);
        }
    }

    // Blink
    [data-op-effect-style='blink'] {
        animation: effectBlink 0.9s infinite both;
    }

    @keyframes effectBlink {
        0%,
        50%,
        100% {
            opacity: 1;
        }
        25%,
        75% {
            opacity: 0;
        }
    }

    @keyframes op3-animation-bob {
      0% {
        transform: translateY(-8px)
      }
      50% {
        transform: translateY(-4px)
      }
      100% {
        transform: translateY(-8px)
      }
    }

    [data-op-effect-style-hover='bob'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='bob']:hover {
        animation: none;
        transform: translateY(-8px);
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='bounceIn'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    @keyframes bounceIn {
        20%, 40%, 60%, 80%, from, to {
            animation-timing-function: cubic-bezier(.215, .61, .355, 1)
        }

        0% {
            opacity: 0;
            transform: scale3d(.3, .3, .3)
        }

        20% {
            transform: scale3d(1.1, 1.1, 1.1)
        }

        40% {
            transform: scale3d(.9, .9, .9)
        }

        60% {
            opacity: 1;
            transform: scale3d(1.03, 1.03, 1.03)
        }

        80% {
            transform: scale3d(.97, .97, .97)
        }

        to {
            opacity: 1;
            transform: scale3d(1, 1, 1)
        }
    }

    [data-op-effect-style-hover='bounceIn']:hover {
        animation: none;
        transition-duration: .3s;
        transition-property: transform;
        transform: scale(1.2);
        transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
    }

    [data-op-effect-style-hover='bounceOut'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='bounceOut']:hover {
        animation: none;
        transition-duration: .5s;
        transition-property: transform;
        transform: scale(0.8);
        transition-timing-function: cubic-bezier(0.47, 2.02, .31, -.36);
    }

    @keyframes op3-animation-buzz {
        50% {
            transform: translateX(3px) rotate(2deg)
        }
        100% {
            transform: translateX(-3px) rotate(-2deg)
        }
    }

    [data-op-effect-style-hover='buzz']:hover {
        animation-name: op3-animation-buzz;
        animation-duration: .15s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }


    @keyframes op3-animation-buzz-out {
        10% {
            transform: translateX(3px) rotate(2deg)
        }
        20% {
            transform: translateX(-3px) rotate(-2deg)
        }
        30% {
            transform: translateX(3px) rotate(2deg)
        }
        40% {
            transform: translateX(-3px) rotate(-2deg)
        }
        50% {
            transform: translateX(2px) rotate(1deg)
        }
        60% {
            transform: translateX(-2px) rotate(-1deg)
        }
        70% {
            transform: translateX(2px) rotate(1deg)
        }
        80% {
            transform: translateX(-2px) rotate(-1deg)
        }
        90% {
            transform: translateX(1px) rotate(0)
        }
        100% {
            transform: translateX(-1px) rotate(0)
        }
    }

    [data-op-effect-style-hover='buzzOnce']:active,
    [data-op-effect-style-hover='buzzOnce']:focus,
    [data-op-effect-style-hover='buzzOnce']:hover {
        animation-name: op3-animation-buzz-out;
        animation-duration: .75s;
        animation-timing-function: linear;
        animation-iteration-count: 1
    }


    [data-op-effect-style-hover='float'] {
        transition-duration: .3s;
        transition-property: transform;
        //transition-timing-function: ease-out
    }

    [data-op-effect-style-hover='float']:hover {
        //animation-name: op3-animation-float;
        transform: translateY(-8px);
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='grow'] {
        transition-duration: .3s !important;
        transition-property: transform !important;
    }

    [data-op-effect-style-hover='grow']:active,
    [data-op-effect-style-hover='grow']:focus,
    [data-op-effect-style-hover='grow']:hover {
        animation: op3-animation-grow;
        transform: scale(1.1);
        transition-duration: .3s;
        transition-property: transform;
    }

    @keyframes op3-animation-grow {
        100% {
            transform: scale(1.1);
        }
    }

    [data-op-effect-style-hover='growRotate'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='growRotate']:hover {
        animation: none;
        transition-duration: .3s;
        transition-property: transform;
        transform: scale(1.1) rotate(4deg);
    }

    @keyframes op3-animation-hang-sink {
        100% {
            transform: translateY(8px)
        }
    }

    @keyframes op3-animation-hang {
        0% {
            transform: translateY(8px)
        }
        50% {
            transform: translateY(4px)
        }
        100% {
            transform: translateY(8px)
        }
    }

    [data-op-effect-style-hover='hang'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='hang']:active,
    [data-op-effect-style-hover='hang']:focus,
    [data-op-effect-style-hover='hang']:hover {
        animation-name: op3-animation-hang-sink, op3-animation-hang;
        animation-duration: .3s, 1.5s;
        animation-delay: 0s, .3s;
        animation-timing-function: ease-out, ease-in-out;
        animation-iteration-count: 1, infinite;
        animation-fill-mode: forwards;
        animation-direction: normal, alternate;
    }

    [data-op-effect-style-hover='pop'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    @keyframes op3-animation-pop {
        50% {
            transform: scale(1.2)
        }
    }

    [data-op-effect-style-hover='pop']:hover {
        animation-name: op3-animation-pop;
        animation-duration: .3s;
        animation-timing-function: linear;
        animation-iteration-count: 1;
    }

    [data-op-effect-style-hover='pulse'] {
        transition-duration: .3s;
        transition-property: transform;
    }

    @keyframes op3-animation-pulse {
        25% {
            transform: scale(1.1)
        }
        75% {
            transform: scale(0.9)
        }
    }

    [data-op-effect-style-hover='pulse']:hover {
        animation-name: op3-animation-pulse;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    [data-op-effect-style-hover='pulseGrow'] {
        transition-duration: .3s;
        transition-property: transform
    }

    @keyframes op3-animation-pulse-grow {
        to {
            transform: scale(1.1)
        }
    }

    [data-op-effect-style-hover='pulseGrow']:hover {
        animation-name: op3-animation-pulse-grow;
        animation-duration: .3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    [data-op-effect-style-hover='pulseShrink'] {
        transition-duration: .3s;
        transition-property: transform
    }

    @keyframes op3-animation-pulse-shrink {
        to {
            transform: scale(0.9)
        }
    }

    [data-op-effect-style-hover='pulseShrink']:hover {
        animation-name: op3-animation-pulse-shrink;
        animation-duration: .3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-direction: alternate;
    }

    @keyframes op3-animation-push {
        50% {
            transform: scale(0.8)
        }
        100% {
            transform: scale(1)
        }
    }

    [data-op-effect-style-hover='push']:hover {
        animation-name: op3-animation-push;
        animation-duration: .3s;
          animation-timing-function: linear;
        animation-iteration-count: 1;
    }

    [data-op-effect-style-hover='rotate'] {
        transition-duration: .3s;
        transition-property: transform
    }

    .op3-animation-rotate {
        transition-duration: .3s;
        transition-property: transform
    }

    [data-op-effect-style-hover='rotate']:hover {
        animation: none;
        transform: rotate(4deg);
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='shrink'] {
        transition-duration: .3s;
        transition-property: transform
    }

    [data-op-effect-style-hover='shrink']:hover {
        animation: none;
        transform: scale(0.9);
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='sink'] {
        transition-duration: .3s;
        transition-property: transform;
        transition-timing-function: ease-out;
    }

    [data-op-effect-style-hover='sink'] {
        transition-duration: .3s;
        transition-property: transform;
        transition-timing-function: ease-out;
    }

    [data-op-effect-style-hover='sink']:hover {
        animation: none;
        transform: translateY(8px);
        transition-duration: .3s;
        transition-property: transform;
    }

    [data-op-effect-style-hover='skew'] {
        transition-duration: .3s;
        transition-property: transform
    }

    [data-op-effect-style-hover='skew']:hover {
        animation: none;
        transform: skew(-10deg);
    }

    [data-op-effect-style-hover='skewRight'] {
        transition-duration: .3s;
        transition-property: transform;
        transform-origin: 0 100%
    }

    [data-op-effect-style-hover='skewRight']:hover {
        animation: none;
        transform: skew(-10deg);
    }


    [data-op-effect-style-hover='skewLeft'] {
        transition-duration: .3s;
        transition-property: transform;
        transform-origin: 0 100%
    }

    [data-op-effect-style-hover='skewLeft']:hover {
        animation: none;
        transform: skew(10deg);
    }

    @keyframes op3-animation-wobble-vertical {
        16.65% {
            transform: translateY(8px)
        }
        33.3% {
            transform: translateY(-6px)
        }
        49.95% {
            transform: translateY(4px)
        }
        66.6% {
            transform: translateY(-2px)
        }
        83.25% {
            transform: translateY(1px)
        }
        100% {
            transform: translateY(0)
        }
    }

    [data-op-effect-style-hover='wobbleVertical'] {
        transform-origin: 0 100%
    }

    [data-op-effect-style-hover='wobbleVertical']:hover {
        animation-name: op3-animation-wobble-vertical;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

    @keyframes op3-animation-wobble-horizontal {
        16.65% {
            transform: translateX(8px)
        }
        33.3% {
            transform: translateX(-6px)
        }
        49.95% {
            transform: translateX(4px)
        }
        66.6% {
            transform: translateX(-2px)
        }
        83.25% {
            transform: translateX(1px)
        }
        100% {
            transform: translateX(0)
        }
    }

    [data-op-effect-style-hover='wobbleHorizontal'] {
        transform-origin: 0 100%
    }

    [data-op-effect-style-hover='wobbleHorizontal']:hover {
        animation-name: op3-animation-wobble-horizontal;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

    @keyframes op3-animation-wobble-top {
        16.65% {
            transform: skew(-12deg)
        }
        33.3% {
            transform: skew(10deg)
        }
        49.95% {
            transform: skew(-6deg)
        }
        66.6% {
            transform: skew(4deg)
        }
        83.25% {
            transform: skew(-2deg)
        }
        100% {
            transform: skew(0)
        }
    }

    [data-op-effect-style-hover='wobbleTop'] {
        transform-origin: 0 100%;
    }

    [data-op-effect-style-hover='wobbleTop']:hover {
        animation-name: op3-animation-wobble-top;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

    @keyframes op3-animation-wobble-bottom {
        16.65% {
            transform: skew(-12deg)
        }
        33.3% {
            transform: skew(10deg)
        }
        49.95% {
            transform: skew(-6deg)
        }
        66.6% {
            transform: skew(4deg)
        }
        83.25% {
            transform: skew(-2deg)
        }
        100% {
            transform: skew(0)
        }
    }

    [data-op-effect-style-hover='wobbleBottom'] {
        transform-origin: 100% 0
    }

    [data-op-effect-style-hover='wobbleBottom']:hover {
        animation-name: op3-animation-wobble-bottom;
        animation-duration: 1s;
        animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
    }

    @keyframes op3-animation-wobble-skew {
        16.65% {
            transform: skew(-12deg)
        }
        33.3% {
            transform: skew(10deg)
        }
        49.95% {
            transform: skew(-6deg)
        }
        66.6% {
            transform: skew(4deg)
        }
        83.25% {
            transform: skew(-2deg)
        }
        100% {
            transform: skew(0)
        }
    }

    [data-op-effect-style-hover='wobbleSkew']:hover {
        animation-name: op3-animation-wobble-skew;
        animation-duration: 1s;
          animation-timing-function: ease-in-out;
        animation-iteration-count: 1;
        //transition-duration: .3s;
        //transition-property: transform
    }

    /* Revert all other animations to initial state */

    [data-op-effect-style-hover='push'] {
        transition-duration: .3s;
        transition-property: transform;
    }
}

.op3-element[data-op3-element-type="button"]:not([data-op3-element-spec="postlistbutton"]),
.op3-element[data-op3-element-type="coursebutton"],
.op3-element[data-op3-element-type="lessonbutton"] {
    > .op3-link {
        &:hover {
            filter: brightness(1.05);
            color: #fff;
        }
    }
}

// To satisfy Typography Control Panel we must use stronger
// CSS selector for button link.
#op3-designer-element .op3-element[data-op3-element-type="button"],
#op3-designer-element .op3-element[data-op3-element-type="coursebutton"],
#op3-designer-element .op3-element[data-op3-element-type="lessonbutton"] {
    .op3-link {
        font-weight: inherit;
        font-style: inherit;
        text-decoration: none;
        text-transform: inherit;
        text-shadow: inherit;
        color: #fff;
    }
}