.animate {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*=== FADE IN LEFT ===*/
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
/*==== FADE IN RIGHT ===*/
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.wobble {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
.color1 .circle .mask .fill {
  background-color: #00cdd5;
}
.color1 .inset {
  background-image: url("../images/respond@3x.png");
}
.color2 .circle .mask .fill {
  background-color: #d2d900;
}
.color2 .inset {
  background-image: url("../images/investigate@3x.png");
}
.color3 .circle .mask .fill {
  background-color: #25e9b6;
}
.color3 .inset {
  background-image: url("../images/protect@3x.png");
}
.color4 .circle .mask .fill {
  background-color: #dc320c;
}
.color4 .inset {
  background-image: url("../images/empower@3x.png");
}
/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
  .radial-progress {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: #7d3309;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 2s;
    transition: -ms-transform 2s;
    transition: transform 2s;
  }
  .radial-progress .circle .mask {
    clip: rect(0px, 200px, 200px, 100px);
  }
  .radial-progress .circle .mask .fill {
    clip: rect(0px, 100px, 200px, 0px);
  }
  .radial-progress .inset {
    width: 150px;
    height: 150px;
    position: absolute;
    margin-left: 25px;
    margin-top: 25px;
    background-color: #7d3309;
    border-radius: 50%;
    background-size: 150px;
    background-repeat: no-repeat;
  }
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .radial-progress {
    margin: 0 auto;
    width: 146px;
    height: 146px;
    background-color: #7d3309;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    width: 146px;
    height: 146px;
    position: absolute;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 2s;
    transition: -ms-transform 2s;
    transition: transform 2s;
  }
  .radial-progress .circle .mask {
    clip: rect(0px, 146px, 146px, 73px);
  }
  .radial-progress .circle .mask .fill {
    clip: rect(0px, 73px, 146px, 0px);
  }
  .radial-progress .inset {
    width: 109.5px;
    height: 109.5px;
    position: absolute;
    margin-left: 18.25px;
    margin-top: 18.25px;
    background-color: #7d3309;
    border-radius: 50%;
    background-size: 109.5px;
    background-repeat: no-repeat;
  }
}
/* Medium devices (desktops, 980px and up) */
@media (min-width: 980px) {
  .radial-progress {
    margin: 0 auto;
    width: 194px;
    height: 194px;
    background-color: #7d3309;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    width: 194px;
    height: 194px;
    position: absolute;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 2s;
    transition: -ms-transform 2s;
    transition: transform 2s;
  }
  .radial-progress .circle .mask {
    clip: rect(0px, 194px, 194px, 97px);
  }
  .radial-progress .circle .mask .fill {
    clip: rect(0px, 97px, 194px, 0px);
  }
  .radial-progress .inset {
    width: 145.5px;
    height: 145.5px;
    position: absolute;
    margin-left: 24.25px;
    margin-top: 24.25px;
    background-color: #7d3309;
    border-radius: 50%;
    background-size: 145.5px;
    background-repeat: no-repeat;
  }
}
/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .radial-progress {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: #7d3309;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 50%;
  }
  .radial-progress .circle .mask,
  .radial-progress .circle .fill {
    -webkit-backface-visibility: hidden;
    transition: -webkit-transform 1.5s;
    transition: -ms-transform 1.5s;
    transition: transform 1.5s;
  }
  .radial-progress .circle .mask {
    clip: rect(0px, 200px, 200px, 100px);
  }
  .radial-progress .circle .mask .fill {
    clip: rect(0px, 100px, 200px, 0px);
  }
  .radial-progress .inset {
    width: 150px;
    height: 150px;
    position: absolute;
    margin-left: 25px;
    margin-top: 25px;
    background-color: #7d3309;
    border-radius: 50%;
    background-size: 150px;
    background-repeat: no-repeat;
  }
}