*{
    margin:0;
    padding:0;
  }
      .ifTbDiv{
          position: absolute;
          width:100%;
          height:100vh;
          display: none;
          justify-content: center;
          align-items: center;
          background-color: rgba(199, 199, 199, 0.623);
          border-radius:0px 0px 20px 20px;
          backdrop-filter: blur(5px);
          -webkit-backdrop-filter: blur(5px);
      }
      .ifTDiv{
          position: absolute;
          width: 400px;
          height: 200px;
          text-align: center;
          font-size:80px;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
      }
      .ifTDivCicon{
          position: absolute;
          left: 0px;
          animation-name: ifTDivCicon;
          animation-duration: 1s;
          animation-iteration-count: infinite;
      }
      .ifTDivSicon{
          position: absolute;
          right: 0px;
          animation-name: ifTDivSicon;
          animation-duration: 1s;
          animation-iteration-count: infinite;
      }
      .ifTDivXicon{
          position: absolute;
          color:#fd7470;
          font-size:100px;
          margin-left: 10px;
          text-shadow: 0px 0px 5px rgba(194, 62, 22, 0.801);
          display:none;
      }
.ifTbar{
width: 200px;
height: 40px;
background-color: rgba(230, 208, 208, 0.1);
position: absolute;
border-radius: 100px;
box-shadow: inset 0 0 0 2px rgba(0,0,0,.05);
margin-left: 15px;
margin-right: -5px;
}
.ifTbar:after{
border-radius: 100px;
content: '';
position: absolute;
background-color: #fff;
left: 2px;
top: 2px;
bottom: 2px;
right: 160px;
animation-name: ifTbar;
animation-duration: 1s;
animation-easing-function: linear;
animation-iteration-count: infinite;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
@keyframes ifTbar{
0%{
  right: 160px;
  left: 5px;
  background-color: #97AEEA;
}
5%{
  left: 5px;
}
50%{
  right: 5px;
  left: 160px;
  background-color: #FF9B81;
}
55%{
  right: 5px;
}
100%{
  right: 160px;
  left: 5px;
  background-color: #97AEEA;
}
}
@keyframes ifTDivCicon{
0%{
  color:#97AEEA;
}
50%{
  color: #a8bdf7;
}
100%{
  color:#97AEEA;
}
}
@keyframes ifTDivSicon{
0%{
  color:#f8ae99;
}
50%{
  color: #FF9B81;
}
100%{
  color:#f8ae99;
}
}
@media (max-width:1000px){
  .ifTbDiv{
   border-radius:0px;
}
}
@media (max-width:500px){
      .ifTDiv{
          width: 200px;
          font-size:50px;
      }
      .ifTDivXicon{
          font-size:70px;
      }
.ifTbar{
width: 80px;
height:20px;
margin-left: 14px;
margin-right: 0px;
}
.ifTbar:after{
left: 2px;
top: 2px;
bottom: 2px;
right: 40px;
}
@keyframes ifTbar{
0%{
  right: 40px;
  left: 2px;
  background-color: #97AEEA;
}
5%{
  left: 2px;
}
50%{
  right: 2px;
  left: 40px;
  background-color: #FF9B81;
}
55%{
  right: 2px;
}
100%{
  right: 40px;
  left: 2px;
  background-color: #97AEEA;
}
}
}
.ifTtest{
  margin-top:60px;
  font-size:10px;
}