/*
 * Theme Name: NR Global
 * Description: Công nghệ thông tin ngày càng phát triển, nó giúp con người mua thực hiện công việc mua bán, tìm kiếm thông tin sản phẩm ngày càng hiệu quả hơn. Thay vì phải chạy đến tận nơi bán sản phẩm để tìm hiểu thông tin hay mua một sản phẩm nào đó, bạn chỉ việc ngồi ở nhà và với một thiết bị được kết nối internet là bạn có thể có tất cả. Có thể nói website là một công cụ hữu hiệu nhất trong hoạt động quảng bá thương hiệu, sản phẩm, dịch vụ một cách hiệu quả. Bạn là một người kinh doanh thì việc thiết kế một website là điều vô cùng cần thiết và cấp bách trong thời buổi công nghệ này, đó là sợi dây liên kết giữa doanh nghiệp và khách hàng, giúp cho doanh nghiệp quảng bá thương hiệu, sản phẩm và dịch vụ của mình đến với mọi người một cách nhanh chóng, hiệu quả, dễ dàng và trực quan nhất.
 * Theme URI: https://nrglobal.vn
 * Version: 8.0
 * Theme Author: gaumapdev@gmail.com
 * Author: Gấu Mập Dev
 * Author URI: https://gaumapdev.com
 * Textdomain: gaumap
 */

.header-slogan{
    line-height: 23px;
}
.header-main--fixed,
.menu-sm{
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    padding: 5px 0 !important;
        box-shadow: 2px 2px 20px #00000026;
}
.header-main--fixed .logo img{
        max-height: 68px;
    width: auto !important;
}
.menu-sm .mobile-menu_logo img{
    max-height: 65px;
}

.category-des,
.des-email{
    line-height: 25px;
}
#hamburger:before, #hamburger:after, #hamburger span{
    background-color: #000 !important;
}
#hamburger{
    right: auto;
    top: 35px;
    left: 7px;
    background-color: transparent !important;
}
.menu-sm #hamburger{
    top: 10px;
}
.navigation,
.navigation ul,
.navigation ul li,
.navigation ul li a {
    list-style: none;
    line-height: 0;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.navigation ul li ul li {
    border-bottom: 1px solid #fff;
}

.navigation ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.navigation:after,
.navigation > ul:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.navigation > ul > li {
    display: inline-block;
}

.navigation > ul > li > a {
    color: #000;
    display: block;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    padding: 0 8px;
    text-transform: uppercase;
    white-space: nowrap;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    overflow: hidden;
    font-weight: 700;
    height: 35px;
    padding-top: 4px;
}

.navigation ul li:first-child a {
    margin-left: 0
}

.navigation ul li:last-child a {
    margin-right: 0;
}



.navigation > ul > li.active > a,
.navigation > ul > li:hover > a {
    color: #660066;
}

.navigation > ul > li.active > a:hover:before,
.navigation > ul > li.active > a:focus:before,
.navigation > ul > li.active > a:active:before {
    display: none;
}

.navigation ul ul {
    position: absolute;
    left: -9999px;
    top: 40px;
    width: 200px;
    z-index: 999;
    padding-top: 15px;
    opacity: 0;
    -webkit-transition: top 0.2s ease, opacity 0.2s ease-in;
    -o-transition: top 0.2s ease, opacity 0.2s ease-in;
    transition: top 0.2s ease, opacity 0.2s ease-in;
}

.navigation ul ul ul {
    width: 200px;
}

.navigation.align-right ul ul {
    text-align: right;
}

.navigation > ul > li > ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #660066;
    top: -1px;
    left: 30%;
}

.navigation.align-right > ul > li > ul::after {
    left: auto;
    right: 20px;
}

.navigation ul ul ul::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-right-color: #660066;
    top: 12px;
    left: -8px;
}

.navigation.align-right ul ul ul::after {
    border-right-color: transparent;
    border-left-color: #387002;
    left: auto;
    right: -4px;
}

.navigation > ul > li:hover > ul {
    top: 28px;
    left: -25px;
    opacity: 1;
}

.navigation.align-right > ul > li:hover > ul {
    left: auto;
    right: 0;
}

.navigation ul ul ul {
    padding-top: 0;
    padding-left: 6px;
}

.navigation.align-right ul ul ul {
    padding-right: 6px;
}

.navigation ul ul > li:hover > ul {
    left: 200px;
    top: 0;
    opacity: 1;
}

.navigation.align-right ul ul > li:hover > ul {
    left: auto;
    right: 100%;
    opacity: 1;
}

.navigation ul ul li a {
   background-color: #660066;
    border-bottom: 1px solid #660066;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    padding: 6px 10px;
    line-height: 20px;
    font-weight: 700;
}

.navigation ul ul li:last-child a {
    border-bottom: none;
}



.navigation ul ul li:hover > a,
.navigation ul ul li > a:hover,
.navigation ul ul li > a:focus {
    color: #fff;
}

.navigation ul ul li.active > a {
    background-color: #DF0000;
    color: #fff;
}

.navigation ul ul li:hover > a::before,
.navigation ul ul li > a:hover:before,
.navigation ul ul li > a:focus:before {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.navigation ul ul li.active > a::before {
    color: #fff;
}

.swal2-popup .swal2-styled.swal2-confirm{
    background-color: #660066 !important;
}
.feature-products a.view-all i{
    font-weight: 600;
    margin-left: 5px;
    margin-top: 0px;
}
.slider-product .owl-dots .owl-dot span,
.slider-testomminal .owl-dots .owl-dot span{
    background-color: #660066;
}
.slider-product .owl-dots .owl-dot.active span,
.slider-testomminal .owl-dots .owl-dot.active span{
    width: 30px;
     background-color: #660066;
}
.intro-block__img{
    text-align: center;
}
.intro-block__img a img{
    max-width: 100%;
    max-height: 450px;
    webkit-animation: zoom-fade 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
    animation: zoom-fade 1.5s cubic-bezier(0.26, 0.54, 0.32, 1) 0s forwards;
}
.intro-block__caption h3,
.section-heading h3,
.blog-home h3{
    font-size: 35px;
    margin-bottom: 20px;
    font-weight: 700;
}
.intro-block__caption .content *{
    font-size: 1.11765em;
    line-height: 30px;
}
.intro-block__caption .view-more,
.info-block .view-more{
    margin: 30px 13.33333px 0 0;
}
.intro-block__caption .view-more a,
.info-block .view-more a{
    background-color: #660066;
    color: #fff;
    padding: 9px 20px;
    font-weight: 700;
    font-size: 16x;
}
.inner-content > i{
    display: block;
    margin: 0 auto 20px;
    font-size: 20px;
}
.inner-content .content{
    margin-bottom: 20px;
    margin-top: 20px;
    line-height: 25px;
}
.inner-content .name{
    font-weight: 700;
    letter-spacing: 0em;
    line-height: 1.2;
    font-size: 1.11765em;
    font-style: normal;
}
.info-block{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.info-block .box-info{
    background-color: #fff;
    padding: 30px;
}
.box-info__sub{
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 5px;
    font-size: 16px;
    margin-bottom: 10px;
}
.box-info__title{
    font-size: 28px;
        font-weight: 700;
    letter-spacing: 0em;
    line-height: 1.2;
    margin-bottom: 20px;
}
.box-info__content{
    font-size: 16px;
    line-height: 30px;
}
#register-letter input{
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding-left: 45px;
}
#register-letter button{
       position: absolute;
    left: 10px;
    top: 7px;
    color: #fff;
    font-size: 26px;
}
#register-letter .button-footer-res{
    left: 77%;
    font-weight: bold;
    /* right: 0 !important; */
    background-color: white !important;
    font-size: 12px;
    display: block;
    width: max-content;
    padding: 6px 12px;
    border-radius: 4px;
    color: #660066;
}
#register-letter button:focus{
    outline: none;
}
#register-letter input::-webkit-input-placeholder { /* Edge */
  color: #fff;
}

#register-letter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

#register-letter input::placeholder {
  color: #fff;
}
#contact_form button{
    background-color: #660066;
    border-color: #660066;
}
.blog-right-listing {
    display: inline-block;
    width: 100%;
    margin: 0 0 30px 0;
}
.feature-img {
    display: inline-block;
    width: 100%;
    position: relative;
}
.feature-img img{
    width: 100%;
    height: auto;
}
.blog-right-listing .date-feature {
    top: inherit;
    bottom: -40px;
    right: inherit;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 24px;
    color: #ffffff;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
    text-align: center;
    background: #660066;
    -webkit-border-radius: 17px;
    -moz-border-radius: 17px;
    -ms-border-radius: 17px;
    -o-border-radius: 17px;
    border-radius: 17px;
    width: 78px;
    height: 78px;
    position: absolute;
    
    padding: 12px 5px;
}
.feature-info {
    display: inline-block;
    width: 100%;
    padding: 41px 25px 20px 25px;
    text-align: center;
}
.feature-info h5 {
    color: #20202f;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 15px 0;
    font-size: 20px;
}
.feature-info > a {
    color: #000;
    line-height: 30px;
    display: inline-block;
    width: auto;
    padding: 6px 35px;
    min-width: 170px;
    border: 2px solid #660066;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
    border-radius: 50px;
    text-align: center;
    line-height: 24px;
    box-shadow: none;
    background: transparent;
    font-size: 16px;
    font-weight: normal;
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
.feature-info .icon-right-4 {
    margin-left: 12px;
}
.tem.album{
    margin-bottom: 15px;
}
.video-wrapper {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.youtube {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.footer-credit a{
    color: #fff;
}

#review_form_wrapper
{
    padding : 15px;
}

#review_form
{
    border        : solid 2px silver;
    padding       : 15px;
    border-radius : 5px;
}

#review_form input[type=text], #review_form input[type=email], #review_form textarea
{
    border  : solid 1px silver;
    padding : 5px;
    width   : 100%;
    display : block;
}

#reply-title, .woocommerce-Reviews-title
{
    font-size     : 1.5rem;
    font-weight   : 500;
    margin-bottom : 15px;
    display       : block;
}

.comment-notes, .comment-form-cookies-consent
{
    display : none;
}

.woocommerce .star-rating span::before
{
    color : var(--warning);
}

.header-search {
    padding: 0 10px;
}

.header-search #frm-search {
    top: 35px;
    right: -5px;
    width: 300px;
    padding: 5px;
    background-color: rgb(192 192 192 / 3%);
    border: solid 1px silver;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    z-index: 9;
}

.header-search #frm-search input {
    padding-left: 5px;
    font-size: 14px;
}

.header-search #frm-search button {
    top: 1px;
    right: 0;
    background-color: #660066;
    color: #fff;
    z-index: 99;
}
.shop-detail_info .product-price ins{
    padding: 0 15px;
}
.shop-detail_info p.product:hover{
    box-shadow: none;
} 
.shop-detail_info p.product:hover:after{
    display: none;
}
.product-type a:hover{
    color: #660066;
}
.normal-btn.outline.loading:after{
    top: 15px !important;
}
.woocommerce a.remove{
    line-height: 14px !important;
}
.woocommerce-cart table.cart td.actions .coupon .input-text{
    width: 115px !important;
}
.woocommerce button.button, .woocommerce input.button,
.woocommerce a.button:not(.normal-btn){
    font-family: inherit !important;
}
.product-select input[type="number"]{
    display: none;
}
.product-select .group-cart:hover a.normal-btn.outline:after{
    box-shadow: none !important;
}
.product .product-select a.added_to_cart{
    display: none !important;
}
.product .product-select a.normal-btn.outline.loading{
    padding: 1rem 30px 1rem 1rem;
}
.weight-product ul{
    margin: 0 -7.5px 25px;
}
.weight-product ul li{
    display: inline-block;
    padding: 0 7.5px
}
.weight-product ul li span{
    color: #000;
    border: 1px solid #000;
    border-radius: 5px;
    padding: 6px 15px;
    display: block;
    font-size: 14px;
    cursor: pointer;
}
.weight-product ul li.active span,
.weight-product ul li:hover span{
    color: #fff;
    border-color: #660066;
    background: #660066;
}
.price-rate h3.product-price{
    color: var(--danger) !important;
}
.product .product-price del{
    margin-right: 10px;
}
.price-rate h3.product-price span.display-regular{
    font-size: 16px;
    color: #ccc;
    text-decoration: line-through;
}
.group-cart-vid button:after{
    top: 15px !important;
}
body:not(.home) .group-cart.product:hover:after{
    display: none;
}
.product-select .group-cart-vid button{
    padding: 1rem 10px !important;
}
.product-select .group-cart-vid button.loading{
    padding: 1rem 30px 1rem 10px !important;
}
.product-select .group-cart-vid button.loading:after{
    top: 16px !important;
}
body.home .group-cart-vid button.loading:after{
    font-family: WooCommerce;
    content: "\e01c";
    vertical-align: top;
    font-weight: 400;
    position: absolute;
    top: 0.618em;
    right: 1em;
    animation: spin 2s linear infinite;
}
body.home .group-cart-vid button.added:after{
    font-family: WooCommerce;
    content: "\e017";
    margin-left: 0.53em;
    vertical-align: bottom; 
}


@media (min-width : 992px)
{
    #reviews
    {
        display   : flex;
        flex-wrap : wrap;
    }
    
    #comments
    {
        width : 60%;
    }
    
    #review_form_wrapper
    {
        width : 40%;
    }
}

.windows8 .wBall {
    position: absolute;
    width: 76px;
    height: 76px;
    opacity: 0;
    -moz-transform: rotate(225deg);
    -moz-animation: orbit 4.95s infinite;
    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 4.95s infinite;
    -ms-transform: rotate(225deg);
    -ms-animation: orbit 4.95s infinite;
    -o-transform: rotate(225deg);
    -o-animation: orbit 4.95s infinite;
    transform: rotate(225deg);
    animation: orbit 4.95s infinite;
}

.windows8 .wBall .wInnerBall {
    background-color: #f7941e;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 0;
    top: 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.windows8 #wBall_1 {
    -moz-animation-delay: 1.08s;
    -webkit-animation-delay: 1.08s;
    -ms-animation-delay: 1.08s;
    -o-animation-delay: 1.08s;
    animation-delay: 1.08s;
}

.windows8 #wBall_2 {
    -moz-animation-delay: 0.22s;
    -webkit-animation-delay: 0.22s;
    -ms-animation-delay: 0.22s;
    -o-animation-delay: 0.22s;
    animation-delay: 0.22s;
}

.windows8 #wBall_3 {
    -moz-animation-delay: 0.43s;
    -webkit-animation-delay: 0.43s;
    -ms-animation-delay: 0.43s;
    -o-animation-delay: 0.43s;
    animation-delay: 0.43s;
}

.windows8 #wBall_4 {
    -moz-animation-delay: 0.65s;
    -webkit-animation-delay: 0.65s;
    -ms-animation-delay: 0.65s;
    -o-animation-delay: 0.65s;
    animation-delay: 0.65s;
}

.windows8 #wBall_5 {
    -moz-animation-delay: 0.86s;
    -webkit-animation-delay: 0.86s;
    -ms-animation-delay: 0.86s;
    -o-animation-delay: 0.86s;
    animation-delay: 0.86s;
}

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 0%;
    }

    30% {
        opacity: 1;
        -moz-transform: rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin: 7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 70%;
    }

    76% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 0%;
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin: 7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 70%;
    }

    76% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 0%;
    }

    30% {
        opacity: 1;
        -ms-transform: rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin: 7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 70%;
    }

    76% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

}

@-o-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -o-transform: rotate(180deg);
        -o-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -o-transform: rotate(300deg);
        -o-animation-timing-function: linear;
        -o-origin: 0%;
    }

    30% {
        opacity: 1;
        -o-transform: rotate(410deg);
        -o-animation-timing-function: ease-in-out;
        -o-origin: 7%;
    }

    39% {
        opacity: 1;
        -o-transform: rotate(645deg);
        -o-animation-timing-function: linear;
        -o-origin: 30%;
    }

    70% {
        opacity: 1;
        -o-transform: rotate(770deg);
        -o-animation-timing-function: ease-out;
        -o-origin: 39%;
    }

    75% {
        opacity: 1;
        -o-transform: rotate(900deg);
        -o-animation-timing-function: ease-out;
        -o-origin: 70%;
    }

    76% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -o-transform: rotate(900deg);
    }

}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin: 0%;
    }

    30% {
        opacity: 1;
        transform: rotate(410deg);
        animation-timing-function: ease-in-out;
        origin: 7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin: 30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin: 39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin: 70%;
    }

    76% {
        opacity: 0;
        transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }

}

@-webkit-keyframes shakeit {
    0% {
        -webkit-transform: rotate(0deg) translate(2px, 1px);
    }

    10% {
        -webkit-transform: rotate(1deg) translate(1px, 2px);
    }

    20% {
        -webkit-transform: rotate(-1deg) translate(3px, 0px);
    }

    30% {
        -webkit-transform: rotate(0deg) translate(0px, -2px);
    }

    40% {
        -webkit-transform: rotate(-1deg) translate(-1px, 1px);
    }

    50% {
        -webkit-transform: rotate(1deg) translate(1px, -2px);
    }

    60% {
        -webkit-transform: rotate(0deg) translate(3px, -1px);
    }

    70% {
        -webkit-transform: rotate(1deg) translate(-2px, -1px);
    }

    80% {
        -webkit-transform: rotate(-1deg) translate(1px, 1px);
    }

    90% {
        -webkit-transform: rotate(0deg) translate(-2px, -2px);
    }

    100% {
        -webkit-transform: rotate(1deg) translate(-1px, 2px);
    }

}

@keyframes shakeit {
    0% {
        transform: rotate(0deg) translate(2px, 1px);
    }

    10% {
        transform: rotate(1deg) translate(1px, 2px);
    }

    20% {
        transform: rotate(-1deg) translate(3px, 0px);
    }

    30% {
        transform: rotate(0deg) translate(0px, -2px);
    }

    40% {
        transform: rotate(-1deg) translate(-1px, 1px);
    }

    50% {
        transform: rotate(1deg) translate(1px, -2px);
    }

    60% {
        transform: rotate(0deg) translate(3px, -1px);
    }

    70% {
        transform: rotate(1deg) translate(-2px, -1px);
    }

    80% {
        transform: rotate(-1deg) translate(1px, 1px);
    }

    90% {
        transform: rotate(0deg) translate(-2px, -2px);
    }

    100% {
        transform: rotate(1deg) translate(-1px, 2px);
    }

}