/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* https://codepen.io/ahmedbeheiry/pen/vxKmWw */
.focus-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9996; /* under cookie-law-info-bar */
    width: 300px;
    height: 100%;
    padding: 80px 30px 30px;
    color: #fff;
    background-color: rgba(23, 23, 23, 0.9);
    box-shadow: 0 0 15px rgba(23, 23, 23, 0.2);
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.focus-wrap,
.focus-wrap.closing {
    transform: translate3d(360px, 0, 0);
}
.focus-wrap.active,
.focus-wrap.opening {
    transform: translate3d(0px,0,0);
}
.focus-title a {
    color: #cbaa5c;
}
.focus-title a:hover,
.focus-title a:focus,
.focus-title a:active {
    color: #bc9c50;
}
.focus-open-btn,
.focus-close-btn {
    position: fixed;
    z-index: 9995;
    border: none;
    outline: none;
    display: block;
}
.focus-open-btn {
    bottom: 10%;
    left: 0;
    width: 150px;
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
    transform: translate3d(-180px,0,0);
}
/* https://stackoverflow.com/a/26986310 */
/* https://stackoverflow.com/a/16516826 */
/* https://stackoverflow.com/a/22392363 */
.focus-open-main {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(23, 23, 23, 0.5);
}
.focus-wrap .focus-open-main {
    animation: translate-with-delay 10s ease infinite;
}
@keyframes translate-with-delay {
    from { transform: translate3d(0px,0,0); }
    90% { transform: translate3d(0px,0,0); }
    92% { transform: translate3d(-20px,0,0); }
    95% { transform: translate3d(0px,0,0); }
    97% { transform: translate3d(-20px,0,0); }
    to { transform: translate3d(0px,0,0); }
}
.focus-open-btn:hover {
    transform: translate3d(-210px,0,0);
}
.focus-open-btn:hover .focus-open-main {
    animation: none;
}
.focus-wrap.active .focus-open-btn,
.focus-wrap.opening .focus-open-btn,
.focus-wrap.closing .focus-open-btn {
    left: initial;
    right: -180px;
    transform: translate3d(0px,0,0);
}
.focus-wrap.active .focus-open-main,
.focus-wrap.opening .focus-open-main,
.focus-wrap.closing .focus-open-main {
    animation: none;
}
.focus-open-btn .focus-title {
    margin: 1em 20px 0 0;
}
.focus-close-btn {
    z-index: 9997;
    top: 26px;
    right: 23px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
    background-color: transparent;
}
/* https://stackoverflow.com/a/49570948 */
.focus-close-btn i::before {
    display: inline-block; /* mandatory to be able to use transform */
    transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1);
}
.focus-close-btn i:hover::before,
.focus-close-btn.hover i::before {
    transform: rotate(180deg);
}

/* https://salferrarello.com/css-pulse-animation/ */
/* https://css-tricks.com/snippets/css/shake-css-keyframe-animation/ */
/* https://codepen.io/dmytrous/pen/vgoWxY */
/* https://stackoverflow.com/a/34762127 */
.focus-wrap .fusion-button {
    animation: pulse-with-delay 3s ease infinite;
}
@keyframes pulse-with-delay {
    0% { transform: scale( 1 ); }
    60% { transform: scale( 1 ); }
    70% { transform: scale( 1.1 ); }
    80% { transform: scale( 1 ); }
    90% { transform: scale( 1.1 ); }
    100% { transform: scale( 1 ); }
}

@media (max-width: 992px) {
    .focus-wrap {
        display: none;
    }
}

/* https://codepen.io/nxworld/pen/oLdoWb */
.ribbon {
    width: 150px;
    height: 150px;
    overflow: hidden;
    position: absolute;
    z-index: 9998;
}
.ribbon::before,
.ribbon::after {
    position: absolute;
    z-index: -1;
    content: '';
    display: block;
    border: 5px solid #a18150;
}
.ribbon span {
    position: absolute;
    display: block;
    width: 225px;
    padding: 15px 0 15px 70px;
    background-color: #cbaa5c;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    color: #fff;
    font: 700 18px/1 'PT Sans', sans-serif;
    /*text-shadow: 0 1px 1px rgba(0,0,0,.2);*/
    text-transform: uppercase;
    text-align: left;
}
.ribbon-top-left {
    top: -20px;
    left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
    border-top-color: transparent;
    border-left-color: transparent;
}
.ribbon-top-left::before {
    top: 0;
    right: 0;
}
.ribbon-top-left::after {
    bottom: 0;
    left: 0;
}
.ribbon-top-left span {
    right: -25px;
    top: 30px;
    transform: rotate(-45deg);
}

.focus-open-btn .ribbon {
    width: 76px;
    height: 76px;
}
.focus-open-btn .ribbon span {
    width: 200px;
    padding: 5px 0;
    font-size: 10px;
    text-align: center;
}
.focus-open-btn .ribbon-top-left {
    top: -10px;
}
.focus-open-btn .ribbon-top-left span {
    right: -55px;
    top: 22px;
}

/* https://webdeasy.de/en/hide-google-recaptcha-badge/ */
.grecaptcha-badge {
    visibility: hidden;
}