body {
  background-color: #111;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: transparent;
  border: 30px solid red;
}

.no-slash {
  width: 30px;
  height: 230px;
  background-color: red;
  transform: rotate(45deg);
  position: relative;
  top: -20px;
  left: 90px;
  z-index: 2;
}

.cigarette {
  width: 230px;
  height: 30px;
  background-color: #FFF;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
  top: -142px;
  left: -18px;
  z-index: 1;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
}

.cigarette:after {
  content: '';
  width: 60px;
  height: 30px;
  background-color: #CC9900;
  position: absolute;
}

.cigarette:before {
  content: '';
  width: 15px;
  height: 30px;
  background-color: #CC9900;
  border-radius: 50%;
  border-left: 1px solid black;
  position: absolute;
  top: 0px;
  left: -9px;
}

.cigarette-head {
  width: 13px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: #FF0000;
  position: relative;
  top: -170px;
  left: 205px;
  z-index: 2;
  -webkit-animation: toke 2s infinite;
  -moz-animation: toke 2s infinite;
}

@keyframes toke {
  0%   { background-color: #FF0000;             }
  50%  { background-color: #990000; opacity: .9;}
  100% { background-color: #FF0000;             }
}


.smoke-container div {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 50%;
  border: 5px solid #eee;
  
}

.smoke-container {
  position: relative;
  bottom: 225px; right: 360px;
}

.smoke1 {
  position: absolute;
  top: 0;
  left: 0;
  animation: fumes1 2s .2s linear infinite;
  opacity: 0;
  z-index: 2;
}

@keyframes fumes1 {
  0%   { left: 340px; top: 210px; opacity: 0; }
  30%  { left: 400px; top: 200px; opacity: .8; border: 10px solid white; }
  100% { left: 450px; top: 190px; opacity: 0; }
}


.smoke2 {
  position: absolute;
  top: 0;
  left: 0;
  animation: fumes2 2s linear infinite;
  opacity: 0;
  z-index: 2;
}

@keyframes fumes2 {
0% { left: 370px; top: 220px; opacity: 0; }
20% { left: 400px; top: 200px; opacity: .6; border: 25px solid white; }
100% { left: 450px; top: 170px; opacity: 0; }
}

.smoke3 {
  position: absolute;
  top: 0;
  left: 0;
  animation: fumes3 2s linear infinite;
  opacity: 0;
  z-index: 2;
}

@keyframes fumes3 {
0% { left: 350px; top: 210px; opacity: 0; }
10% { left: 420px; top: 200px; opacity: .5; border: 10px solid white; }
100% { left: 460px; top: 180px; opacity: 0; }
}


.smoke4 {
  position: absolute;
  top: 0;
  left: 0;
  animation: fumes4 2s linear infinite;
  opacity: 0;
}

@keyframes fumes4 {
0% { left: 350px; top: 220px; opacity: 0; }
75% { left: 410px; top: 200px; opacity: .3; border: 18px solid white;}
100% { left: 430px; top: 190px; opacity: 0; }
}


.smoke5 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: .2;
  -webkit-animation: fumes5 2s linear infinite;
  -moz-animation: fumes5 2s linear infinite;
}

@keyframes fumes5 {
  0%   { top: 220px; left: 350px; opacity: .4; }
  40%  { top: 220px; left: 420px; opactiy: .8; border: 10px solid white;}
  100% { top: 215px; left: 430px; opacity: 0; border: 10px solid white;}
}

.smoke6 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fumes6 2s linear infinite;
}

@keyframes fumes6 {
  0%   { top: 215px; left: 350px; opacity: 0; }
  50%  { top: 220px; left: 400px; opacity: .5; }
  100% { top: 225px; left: 420px; opacity: 0; }
}