.s1__smoke {
    position: absolute;
    left: calc(50% - 93px);
    top: -178px;
}

@media (min-width: 768px){
    .s1__smoke {
        left: 72px;
        top: -192px;
    }
}

@media (min-width: 992px){
    .s1__smoke {
        left: 145px;
        top: -179px;
    }
}

@media (min-width: 1200px){
    .s1__smoke {
        left: 175px;
        top: -188px;
    }
}

.s1__smoke-bbq-r {
    background-image: url('/img/smoke/smoke-bbq-right.png');
    width: 316px;
    height: 328px;
    position: absolute;
    opacity: 0;
}
.s1__smoke-bbq-r1 {
    -webkit-animation: smokeBbqR 4s linear infinite;
    animation: smokeBbqR 4s linear infinite;
}
.s1__smoke-bbq-r2 {
    -webkit-animation: smokeBbqR 4s 1.5s linear infinite;
    animation: smokeBbqR 4s 1.5s linear infinite;
}
.s1__smoke-bbq-r3 {
    -webkit-animation: smokeBbqR 4s 3s linear infinite;
    animation: smokeBbqR 4s 3s linear infinite;
}

@-webkit-keyframes smokeBbqR {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(18px, -33px);
        transform: translate(18px, -33px);
        opacity: 0.6;
    }
    66% {
        -webkit-transform: translate(36px, -66px);
        transform: translate(36px, -66px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(54px, -100px);
        transform: translate(54px, -100px);
        opacity: 0;
    }
}

@keyframes smokeBbqR {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(18px, -33px);
        transform: translate(18px, -33px);
        opacity: 0.6;
    }
    66% {
        -webkit-transform: translate(36px, -66px);
        transform: translate(36px, -66px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(54px, -100px);
        transform: translate(54px, -100px);
        opacity: 0;
    }
}

/*left*/
.s1__smoke-bbq-l {
    background-image: url('/img/smoke/smoke-bbq-left.png');
    width: 281px;
    height: 328px;
    position: absolute;
    opacity: 0;
    left: -130px;
    z-index: 1;
}
.s1__smoke-bbq-l1 {
    -webkit-animation: smokeBbqL 4s linear infinite;
    animation: smokeBbqL 4s linear infinite;
}
.s1__smoke-bbq-l2 {
    -webkit-animation: smokeBbqL 4s 1.5s linear infinite;
    animation: smokeBbqL 4s 1.5s linear infinite;
}
.s1__smoke-bbq-l3 {
    -webkit-animation: smokeBbqL 4s 3s linear infinite;
    animation: smokeBbqL 4s 3s linear infinite;
}

@-webkit-keyframes smokeBbqL {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(-21px, -33px);
        transform: translate(-21px, -33px);
        opacity: 0.8;
    }
    66% {
        -webkit-transform: translate(-42px, -66px);
        transform: translate(-42px, -66px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(-63px, -100px);
        transform: translate(-63px, -100px);
        opacity: 0;
    }
}

@keyframes smokeBbqL {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(-21px, -33px);
        transform: translate(-21px, -33px);
        opacity: 0.8;
    }
    66% {
        -webkit-transform: translate(-42px, -66px);
        transform: translate(-42px, -66px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(-63px, -100px);
        transform: translate(-63px, -100px);
        opacity: 0;
    }
}


/*smoke2*/
.s2__smoke {
    position: absolute;
    left: calc(50% - 180px);
    top: 209px;
    z-index: 999;
    opacity: 0.5;
}

@media (min-width: 768px){
    .s2__smoke {
        left: -10px;
        top: 200px;
        opacity: 0.6;
    }
}

@media (min-width: 992px){
    .s2__smoke {
        left: 60px;
        top: 205px;
    }
}

@media (min-width: 1200px){
    .s2__smoke {
        left: 88px;
    }
}

.s1__smoke-bbq-in1 {
    background-image: url('/img/smoke/smoke-bbq-in1-2.png');
    width: 206px;
    height: 137px;
    position: absolute;
    opacity: 0;
}
.s1__smoke-bbq-in1_1 {
    -webkit-animation: smokeBbqIn1 4s linear infinite;
    animation: smokeBbqIn1 4s linear infinite;
}
.s1__smoke-bbq-in1_2 {
    -webkit-animation: smokeBbqIn1 4s 1.5s linear infinite;
    animation: smokeBbqIn1 4s 1.5s linear infinite;
}
.s1__smoke-bbq-in2 {
    background-image: url('/img/smoke/smoke-bbq-in1-2.png');
    width: 206px;
    height: 137px;
    position: absolute;
    opacity: 0;
}
.s1__smoke-bbq-in2_1 {
    -webkit-animation: smokeBbqIn2 4s linear infinite;
    animation: smokeBbqIn2 4s linear infinite;
}
.s1__smoke-bbq-in2_2 {
    -webkit-animation: smokeBbqIn2 4s 2s linear infinite;
    animation: smokeBbqIn2 4s 2s linear infinite;
}
.s1__smoke-bbq-in2_3 {
    opacity: 1;
}

@-webkit-keyframes smokeBbqIn1 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
        opacity: 0.6;
    }
    66% {
        -webkit-transform: translate(0, -40px);
        transform: translate(0, -40px);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, -60px);
        transform: translate(0, -60px);
        opacity: 0;
    }
}

@keyframes smokeBbqIn1 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
        opacity: 0.6;
    }
    66% {
        -webkit-transform: translate(0, -40px);
        transform: translate(0, -40px);
        opacity: 0.8;
    }
    100% {
        -webkit-transform: translate(0, -60px);
        transform: translate(0, -60px);
        opacity: 0;
    }
}

@-webkit-keyframes smokeBbqIn2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(0, -8px);
        transform: translate(0, -8px);
        opacity: 0.4;
    }
    66% {
        -webkit-transform: translate(0, -16px);
        transform: translate(0, -16px);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(0, -25px);
        transform: translate(0, -25px);
        opacity: 0;
    }
}

@keyframes smokeBbqIn2 {
    0% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 0;
    }
    33% {
        -webkit-transform: translate(0, -8px);
        transform: translate(0, -8px);
        opacity: 0.4;
    }
    66% {
        -webkit-transform: translate(0, -16px);
        transform: translate(0, -16px);
        opacity: 0.7;
    }
    100% {
        -webkit-transform: translate(0, -25px);
        transform: translate(0, -25px);
        opacity: 0;
    }
}