[data-transition="all"]{
  transition: all 0.6s;
  -webkit-transition: all 0.6s;
  -moz-transition: all 0.6s;
  -o-transition: all 0.6s;
  -ms-transition: all 0.6s;
}
[data-transition-drt="100"]{
  transition-duration: 0.1s;
  -webkit-transition-duration: 0.1s;
  -moz-transition-duration: 0.1s;
  -o-transition-duration: 0.1s;
  -ms-transition-duration: 0.1s;
}
[data-transition-drt="200"]{
  transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
}
[data-transition-drt="300"]{
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
}
[data-transition-drt="400"]{
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
}
[data-transition-drt="500"]{
  transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
}
[data-transition-drt="600"]{
  transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -ms-transition-duration: 0.6s;
}
[data-transition-drt="700"]{
  transition-duration: 0.7s;
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  -ms-transition-duration: 0.7s;
}
[data-transition-drt="800"]{
  transition-duration: 0.8s;
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
}
[data-transition-drt="900"]{
  transition-duration: 0.9s;
  -webkit-transition-duration: 0.9s;
  -moz-transition-duration: 0.9s;
  -o-transition-duration: 0.9s;
  -ms-transition-duration: 0.9s;
}
[data-transition-drt="1000"]{
  transition-duration: 1s;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  -ms-transition-duration: 1s;
}
[data-transition-delay="200"]{
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
[data-transition-delay="400"]{
  -webkit-transition-delay: 0.4s;
  -o-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
[data-transition-delay="600"]{
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
[data-transition-delay="800"]{
  -webkit-transition-delay: 0.8s;
  -o-transition-delay: 0.8s;
  transition-delay: 0.8s;
}
[data-transition-delay="1000"]{
  -webkit-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}

[data-animation="roundHover"]{
  position:relative;
  overflow:hidden;
}
[data-animation="roundHover"]::after{
  content:'';
  position:absolute;
  top:50%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  left:50%;
  width:0;
  height:0;
  border-radius:50%;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -ms-transition: all 0.4s;
  background:white;
  z-index:-1;
  overflow:hidden;
  z-index:10;
  background:#FFF;
}
[data-animation="roundHover"] > div{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  transform: translateY(-50%) translateX(-50%) scale(1);
  clip-path: circle(0px at center);
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  z-index:11;
}
[data-animation="roundHover"]:hover > div{
  clip-path: circle(400px at center);
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-animation="roundHover"]:hover::after{
  width:1200px;
  height:1200px;
  transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-animation="roundHover"][data-animation-drt="200"]:hover::after, [data-animation="roundHover"][data-animation-drt="200"]:hover > div{
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-animation="roundHover"][data-animation-drt="400"]:hover::after, [data-animation="roundHover"][data-animation-drt="400"]:hover > div{
  transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
}
[data-animation="roundHover"][data-animation-drt="800"]:hover::after, [data-animation="roundHover"][data-animation-drt="800"]:hover > div{
  transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  -webkit-transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  -moz-transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  -o-transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
  -ms-transition: all 0.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}