/* https://codepen.io/anandaprojapati/full/KgvNvv/ */
.btn {
  background: transparent;
  border: 2px solid transparent;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  margin: 18px;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  outline: none;
  position: relative;
  top: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  -webkit-transition: all 0.2s ease-in-out 0s;
  -moz-transition: all 0.2s ease-in-out 0s;
  -ms-transition: all 0.2s ease-in-out 0s;
  transition: all 0.2s ease-in-out 0s;
}

/* Green */
.green {
  background: #10bc98;
  color: #fff;
  box-shadow: 0 3px 0 #0c8d72;
}
.green:hover {
  background: #13d7ae;
}
.green:active, .green:focus {
  background: #0fae8d;
}
.green.press-me:active {
  box-shadow: 0 2px 0 #0c8d72;
}
.green.transparent {
  border-color: #10bc98;
}
.green.effect-left:after, .green.effect-right:after, .green.effect-up:after, .green.effect-down:after, .green.effect-horiz:after, .green.effect-vart:after, .green.effect-box:after, .green.effect-down-left:after, .green.effect-up-right:after {
  background: #13d7ae;
}
.green.effect-glow:hover {
  box-shadow: 0 0 10px 0 #10bc98 inset, 0 0 10px 2px #10bc98;
}

.light-green {
  background: #87bc58;
  color: #fff;
  box-shadow: 0 3px 0 #6ea140;
}
.light-green:hover {
  background: #c0da82;
}
.light-green:active, .light-green:focus {
  background: #7fb84d;
}
.light-green.press-me:active {
  box-shadow: 0 2px 0 #6ea140;
}
.light-green.transparent {
  border-color: #87bc58;
}
.light-green.effect-left:after, .light-green.effect-right:after, .light-green.effect-up:after, .light-green.effect-down:after, .light-green.effect-horiz:after, .light-green.effect-vart:after, .light-green.effect-box:after, .light-green.effect-down-left:after, .light-green.effect-up-right:after {
  background: #c0da82;
}
.light-green.effect-glow:hover {
  box-shadow: 0 0 10px 0 #87bc58 inset, 0 0 10px 2px #87bc58;
}

/* Orange */
.orange {
  background: #e77e22;
  color: #fff;
  box-shadow: 0 3px 0 #c16515;
}
.orange:hover {
  background: #f6b417;
}
.orange:active, .orange:focus {
  background: #dd7418;
}
.orange.press-me:active {
  box-shadow: 0 2px 0 #c16515;
}
.orange.transparent {
  border-color: #e77e22;
}
.orange.effect-left:after, .orange.effect-right:after, .orange.effect-up:after, .orange.effect-down:after, .orange.effect-horiz:after, .orange.effect-vart:after, .orange.effect-box:after, .orange.effect-down-left:after, .orange.effect-up-right:after {
  background: #f6b417;
}
.orange.effect-glow:hover {
  box-shadow: 0 0 10px 0 #e77e22 inset, 0 0 10px 2px #e77e22;
}

/* Blue */
.blue {
  background: #3cbce1;
  color: #fff;
  box-shadow: 0 3px 0 #1fa4cb;
}
.blue:hover {
  background: #56d7ed;
}
.blue:active, .blue:focus {
  background: #2fb7df;
}
.blue.press-me:active {
  box-shadow: 0 2px 0 #1fa4cb;
}
.blue.transparent {
  border-color: #3cbce1;
}
.blue.effect-left:after, .blue.effect-right:after, .blue.effect-up:after, .blue.effect-down:after, .blue.effect-horiz:after, .blue.effect-vart:after, .blue.effect-box:after, .blue.effect-down-left:after, .blue.effect-up-right:after {
  background: #56d7ed;
}
.blue.effect-glow:hover {
  box-shadow: 0 0 10px 0 #3cbce1 inset, 0 0 10px 2px #3cbce1;
}

/* Purple */
.purple {
  background: #9a59b5;
  color: #fff;
  box-shadow: 0 3px 0 #7f4497;
}
.purple:hover {
  background: #c472e6;
}
.purple:active, .purple:focus {
  background: #944fb0;
}
.purple.press-me:active {
  box-shadow: 0 2px 0 #7f4497;
}
.purple.transparent {
  border-color: #9a59b5;
}
.purple.effect-left:after, .purple.effect-right:after, .purple.effect-up:after, .purple.effect-down:after, .purple.effect-horiz:after, .purple.effect-vart:after, .purple.effect-box:after, .purple.effect-down-left:after, .purple.effect-up-right:after {
  background: #c472e6;
}
.purple.effect-glow:hover {
  box-shadow: 0 0 10px 0 #9a59b5 inset, 0 0 10px 2px #9a59b5;
}

/* Yellow */
.yellow {
  background: #fac75a;
  color: #fff;
  box-shadow: 0 3px 0 #f9b629;
}
.yellow:hover {
  background: #fce17a;
}
.yellow:active, .yellow:focus {
  background: #fac24b;
}
.yellow.press-me:active {
  box-shadow: 0 2px 0 #f9b629;
}
.yellow.transparent {
  border-color: #fac75a;
}
.yellow.effect-left:after, .yellow.effect-right:after, .yellow.effect-up:after, .yellow.effect-down:after, .yellow.effect-horiz:after, .yellow.effect-vart:after, .yellow.effect-box:after, .yellow.effect-down-left:after, .yellow.effect-up-right:after {
  background: #fce17a;
}
.yellow.effect-glow:hover {
  box-shadow: 0 0 10px 0 #fac75a inset, 0 0 10px 2px #fac75a;
}

/* Grey */

.grey {
  background: #4c4c4c;
  color: #fff;
  box-shadow: 0 3px 0 #333333;
}
.grey:hover {
  background: #747373;
}
.grey:active, .grey:focus {
  background: #444444;
}
.grey.press-me:active {
  box-shadow: 0 2px 0 #333333;
}
.grey.transparent {
  border-color: #4c4c4c;
}
.grey.effect-left:after, .grey.effect-right:after, .grey.effect-up:after, .grey.effect-down:after, .grey.effect-horiz:after, .grey.effect-vart:after, .grey.effect-box:after, .grey.effect-down-left:after, .grey.effect-up-right:after {
  background: #747373;
}
.grey.effect-glow:hover {
  box-shadow: 0 0 10px 0 #4c4c4c inset, 0 0 10px 2px #4c4c4c;
}

/* Red */

.red {
  background: #e84c3d;
  color: #fff;
  box-shadow: 0 3px 0 #d82a1a;
}
.red:hover {
  background: #f57b8a;
}
.red:active, .red:focus {
  background: #e63b2b;
}
.red.press-me:active {
  box-shadow: 0 2px 0 #d82a1a;
}
.red.transparent {
  border-color: #e84c3d;
}
.red.effect-left:after, .red.effect-right:after, .red.effect-up:after, .red.effect-down:after, .red.effect-horiz:after, .red.effect-vart:after, .red.effect-box:after, .red.effect-down-left:after, .red.effect-up-right:after {
  background: #f57b8a;
}
.red.effect-glow:hover {
  box-shadow: 0 0 10px 0 #e84c3d inset, 0 0 10px 2px #e84c3d;
}

/* Dark Blue */
.dark-blue {
  background: #34495e;
  color: #fff;
  box-shadow: 0 3px 0 #22303d;
}
.dark-blue:hover {
  background: #425c77;
}
.dark-blue:active, .dark-blue:focus {
  background: #2f4154;
}
.dark-blue.press-me:active {
  box-shadow: 0 2px 0 #22303d;
}
.dark-blue.transparent {
  border-color: #34495e;
}
.dark-blue.effect-left:after, .dark-blue.effect-right:after, .dark-blue.effect-up:after, .dark-blue.effect-down:after, .dark-blue.effect-horiz:after, .dark-blue.effect-vart:after, .dark-blue.effect-box:after, .dark-blue.effect-down-left:after, .dark-blue.effect-up-right:after {
  background: #425c77;
}
.dark-blue.effect-glow:hover {
  box-shadow: 0 0 10px 0 #34495e inset, 0 0 10px 2px #34495e;
}

/* Deep Plum */
.deep-plum {
  background: #6d3b6a;
  color: #fff;
  box-shadow: 0 3px 0 #552e53;
}
.deep-plum:hover {
  background: #8a4a86;
}
.deep-plum:active, .deep-plum:focus {
  background: #62345f;
}
.deep-plum.press-me:active {
  box-shadow: 0 2px 0 #552e53;
}
.deep-plum.transparent {
  border-color: #6d3b6a;
}
.deep-plum.effect-left:after, .deep-plum.effect-right:after, .deep-plum.effect-up:after, .deep-plum.effect-down:after, .deep-plum.effect-horiz:after, .deep-plum.effect-vart:after, .deep-plum.effect-box:after, .deep-plum.effect-down-left:after, .deep-plum.effect-up-right:after {
  background: #8a4a86;
}
.deep-plum.effect-glow:hover {
  box-shadow: 0 0 10px 0 #6d3b6a inset, 0 0 10px 2px #6d3b6a;
}

/* Blue Steel */
.blue-steel {
  background: #3f5f7a;
  color: #fff;
  box-shadow: 0 3px 0 #324c62;
}
.blue-steel:hover {
  background: #547a99;
}
.blue-steel:active, .blue-steel:focus {
  background: #39566f;
}
.blue-steel.press-me:active {
  box-shadow: 0 2px 0 #324c62;
}
.blue-steel.transparent {
  border-color: #3f5f7a;
}
.blue-steel.effect-left:after, .blue-steel.effect-right:after, .blue-steel.effect-up:after, .blue-steel.effect-down:after, .blue-steel.effect-horiz:after, .blue-steel.effect-vart:after, .blue-steel.effect-box:after, .blue-steel.effect-down-left:after, .blue-steel.effect-up-right:after {
  background: #547a99;
}
.blue-steel.effect-glow:hover {
  box-shadow: 0 0 10px 0 #3f5f7a inset, 0 0 10px 2px #3f5f7a;
}

/* Saffron */
.saffron-amber {
  background: #c67b1f;
  color: #fff;
  box-shadow: 0 3px 0 #9e6219;
}
.saffron-amber:hover {
  background: #e0942c;
}
.saffron-amber:active, .saffron-amber:focus {
  background: #b2701c;
}
.saffron-amber.press-me:active {
  box-shadow: 0 2px 0 #9e6219;
}
.saffron-amber.transparent {
  border-color: #c67b1f;
}
.saffron-amber.effect-left:after, .saffron-amber.effect-right:after, .saffron-amber.effect-up:after, .saffron-amber.effect-down:after, .saffron-amber.effect-horiz:after, .saffron-amber.effect-vart:after, .saffron-amber.effect-box:after, .saffron-amber.effect-down-left:after, .saffron-amber.effect-up-right:after {
  background: #e0942c;
}
.saffron-amber.effect-glow:hover {
  box-shadow: 0 0 10px 0 #c67b1f inset, 0 0 10px 2px #c67b1f;
}

.teal-mist {
  background: #2f7f78;
  color: #fff;
  box-shadow: 0 3px 0 #256660;
}
.teal-mist:hover {
  background: #3f9e96;
}
.teal-mist:active, .teal-mist:focus {
  background: #2a726c;
}
.teal-mist.press-me:active {
  box-shadow: 0 2px 0 #256660;
}
.teal-mist.transparent {
  border-color: #2f7f78;
}
.teal-mist.effect-left:after, .teal-mist.effect-right:after, .teal-mist.effect-up:after, .teal-mist.effect-down:after, .teal-mist.effect-horiz:after, .teal-mist.effect-vart:after, .teal-mist.effect-box:after, .teal-mist.effect-down-left:after, .teal-mist.effect-up-right:after {
  background: #3f9e96;
}
.teal-mist.effect-glow:hover {
  box-shadow: 0 0 10px 0 #2f7f78 inset, 0 0 10px 2px #2f7f78;
}

.mulberry-wine {
  background: #7a2e4d;
  color: #fff;
  box-shadow: 0 3px 0 #61243d;
}
.mulberry-wine:hover {
  background: #9b3b63;
}
.mulberry-wine:active, .mulberry-wine:focus {
  background: #6e2945;
}
.mulberry-wine.press-me:active {
  box-shadow: 0 2px 0 #61243d;
}
.mulberry-wine.transparent {
  border-color: #7a2e4d;
}
.mulberry-wine.effect-left:after, .mulberry-wine.effect-right:after, .mulberry-wine.effect-up:after, .mulberry-wine.effect-down:after, .mulberry-wine.effect-horiz:after, .mulberry-wine.effect-vart:after, .mulberry-wine.effect-box:after, .mulberry-wine.effect-down-left:after, .mulberry-wine.effect-up-right:after {
  background: #9b3b63;
}
.mulberry-wine.effect-glow:hover {
  box-shadow: 0 0 10px 0 #7a2e4d inset, 0 0 10px 2px #7a2e4d;
}

.oxidized-copper {
  background: #4c8b7a;
  color: #fff;
  box-shadow: 0 3px 0 #3b6e61;
}
.oxidized-copper:hover {
  background: #63a796;
}
.oxidized-copper:active, .oxidized-copper:focus {
  background: #457f70;
}
.oxidized-copper.press-me:active {
  box-shadow: 0 2px 0 #3b6e61;
}
.oxidized-copper.transparent {
  border-color: #4c8b7a;
}
.oxidized-copper.effect-left:after, .oxidized-copper.effect-right:after, .oxidized-copper.effect-up:after, .oxidized-copper.effect-down:after, .oxidized-copper.effect-horiz:after, .oxidized-copper.effect-vart:after, .oxidized-copper.effect-box:after, .oxidized-copper.effect-down-left:after, .oxidized-copper.effect-up-right:after {
  background: #63a796;
}
.oxidized-copper.effect-glow:hover {
  box-shadow: 0 0 10px 0 #4c8b7a inset, 0 0 10px 2px #4c8b7a;
}

.midnight-indigo {
  background: #2f2e6b;
  color: #fff;
  box-shadow: 0 3px 0 #252456;
}
.midnight-indigo:hover {
  background: #3f3d8a;
}
.midnight-indigo:active, .midnight-indigo:focus {
  background: #2a295f;
}
.midnight-indigo.press-me:active {
  box-shadow: 0 2px 0 #252456;
}
.midnight-indigo.transparent {
  border-color: #2f2e6b;
}
.midnight-indigo.effect-left:after, .midnight-indigo.effect-right:after, .midnight-indigo.effect-up:after, .midnight-indigo.effect-down:after, .midnight-indigo.effect-horiz:after, .midnight-indigo.effect-vart:after, .midnight-indigo.effect-box:after, .midnight-indigo.effect-down-left:after, .midnight-indigo.effect-up-right:after {
  background: #3f3d8a;
}
.midnight-indigo.effect-glow:hover {
  box-shadow: 0 0 10px 0 #2f2e6b inset, 0 0 10px 2px #2f2e6b;
}
/* Ash Grey */

.ash-grey {
  background: #bec3c7;
  color: #fff;
  box-shadow: 0 3px 0 #a3aaaf;
}
.ash-grey:hover {
  background: #d0d5d9;
}
.ash-grey:active, .ash-grey:focus {
  background: #b0b6bb;
}
.ash-grey.press-me:active {
  box-shadow: 0 2px 0 #a3aaaf;
}
.ash-grey.transparent {
  border-color: #bec3c7;
}
.ash-grey.effect-left:after, .ash-grey.effect-right:after, .ash-grey.effect-up:after, .ash-grey.effect-down:after, .ash-grey.effect-horiz:after, .ash-grey.effect-vart:after, .ash-grey.effect-box:after, .ash-grey.effect-down-left:after, .ash-grey.effect-up-right:after {
  background: #d0d5d9;
}
.ash-grey.effect-glow:hover {
  box-shadow: 0 0 10px 0 #bec3c7 inset, 0 0 10px 2px #bec3c7;
}

.rounded {
  border-radius: 5px;
}
.rounded[class*='effect-']:after {
  border-radius: 5px;
}

.full-rounded {
  border-radius: 20em;
}
.full-rounded[class*='effect-']:after {
  border-radius: 20em;
}

.press-me:active {
  top: 3px;
}

.transparent {
  background: none;
  box-shadow: none;
  text-shadow: none;
  color: #000;
}

[class*='effect-']:hover, [class*='effect-']:active, [class*='effect-']:focus {
  background: none;
}
[class*='effect-']:after {
  content: "";
  position: absolute;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -ms-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  z-index: -1;
}

.effect-left:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.effect-left:hover:after {
  width: 100%;
}

.effect-right:after {
  height: 100%;
  right: 0;
  top: 0;
  width: 0;
}

.effect-right:hover:after {
  width: 100%;
}

.effect-up:after {
  width: 100%;
  left: 0;
  top: 0;
  height: 0;
}

.effect-up:hover:after {
  height: 100%;
}

.effect-down:after {
  width: 100%;
  left: 0;
  bottom: 0;
  height: 0;
}

.effect-down:hover:after {
  height: 100%;
}

.effect-horiz:after {
  height: 100%;
  left: 50%;
  top: 0;
  width: 0;
}

.effect-horiz:hover:after {
  width: 100%;
  left: 0;
}

.effect-vart:after {
  width: 100%;
  top: 50%;
  left: 0;
  height: 0;
}

.effect-vart:hover:after {
  height: 100%;
  top: 0;
}

.effect-box:after {
  width: 0;
  top: 50%;
  left: 50%;
  height: 0;
}

.effect-box:hover:after {
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}

.effect-down-left:after {
  width: 0;
  top: 0;
  left: 0;
  height: 0;
}

.effect-down-left:hover:after {
  width: 100%;
  height: 100%;
}

.effect-up-right:after {
  width: 0;
  right: 0;
  bottom: 0;
  height: 0;
}

.effect-up-right:hover:after {
  width: 100%;
  height: 100%;
}

 /* Card hover effect */
.w3-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.w3-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Progress Bar */
.progress-bar {
  background: repeating-linear-gradient(
    45deg,
    #4CAF50,
    #4CAF50 10px,
    #43a047 10px,
    #43a047 20px
  );
  background-size: 200% 200%;
  animation: stripeMove 3s linear infinite;
  transition: width 1.5s ease-in-out;
}

@keyframes stripeMove {
  from { background-position: 0 0; }
  to { background-position: 40px 0; }
}