/**
 * Divi button animations
 * Source: https://divilover.com/css-code-snippets-for-divi-buttons/
 */

/* CSS for buttons - Icon Right */

.dl-icon-right {
  --btn-background: #3fdfba; /* set background color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right::after {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  right: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-right {
  overflow: hidden;
}

/* CSS for buttons - Icon Left */

.dl-icon-left {
  --btn-background: #3fdfba; /* set background color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left::before {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  left: -40px;
  width: 40px;
  background: var(--btn-background);
  margin: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left:hover::before {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-left {
  overflow: hidden;
}

/* CSS for buttons - Icon Animation - Fade In */

.dl-icon-fade {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: var(--btn-background);
  margin: 0;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-fade {
  overflow: hidden;
}

/* CSS for buttons - Icon Top */

.dl-icon-top {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top::after {
  position: absolute;
  top: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-top {
  overflow: hidden;
}

/* CSS for buttons - Icon Bottom */

.dl-icon-bottom {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom::after {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background: var(--btn-background);
  margin: 0;
  height: 100%;
  font-size: 2em !important;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-icon-bottom {
  overflow: hidden;
}

/* CSS for buttons - Text on hover - Fade In */

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: inherit;
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: opacity .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade:hover::after {
  opacity: 1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-fade {
  overflow: hidden;
}

/* CSS for buttons - Text on hover - Slide from the Left */

.dl-hover-text-left {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  left: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left:hover::after {
  left: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-left {
  overflow: hidden;
}

/* CSS for buttons - Text on hover - Slide from the Right */

.dl-hover-text-right {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: 0;
  bottom: 0;
  opacity: 1;
  right: -100%;
  width: 100%;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right:hover::after {
  right: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-right {
  overflow: hidden;
}

/* CSS for buttons - Text on hover - Slide from the Top */

.dl-hover-text-top {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  top: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top:hover::after {
  top: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-top {
  overflow: hidden;
}

/* CSS for buttons - Text on hover - Slide from the Bottom */

.dl-hover-text-bottom {
  --btn-background: #3fdfba; /* set background color */
}
#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom::after {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 0;
  bottom: -100%;
  opacity: 1;
  left: 0;
  height: 100%;
  right: 0;
  background: var(--btn-background);
  font-family: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .3s linear;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom:hover::after {
  bottom: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-hover-text-bottom {
  overflow: hidden;
}

/* CSS for buttons - Double border on hover - Top & Right */

.dl-double-border-top-right {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-right:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

/* CSS for buttons - Double border on hover - Top & Left */

.dl-double-border-top-left {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-top-left:hover::after {
  top: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

/* CSS for buttons - Double border on hover - Bottom & Right */

.dl-double-border-bottom-right {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-right::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-right:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
}

/* CSS for buttons - Double border on hover - Bottom & Left */

.dl-double-border-bottom-left {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-left::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-bottom-left:hover::after {
  top: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  right: calc(var(--border-width) * (-1) + var(--border-width) * 2.5);
  bottom: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
  left: calc(var(--border-width) * (-1) - var(--border-width) * 2.5);
}

/* CSS for buttons - Double border on hover - Center */

.dl-double-border-center {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-center::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-center:hover::after {
  top: calc(var(--border-width) * (-3.5));
  right: calc(var(--border-width) * (-3.5));
  bottom: calc(var(--border-width) * (-3.5));
  left: calc(var(--border-width) * (-3.5));
}

/* CSS for buttons - Double border on hover - Fade Out */
/* Edited by FZS */

.dl-double-border-fade-out {
  --border-width: 1px; /* set the Button border width */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-fade-out::after {
  display: block !important;
  margin: 0;
  top: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  border: inherit;
  border-radius: inherit;
  opacity: 1;
  content: '';
  z-index: -1;
  transition: all .25s ease-out;
  visibility: hidden;
  background-color: inherit;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-double-border-fade-out:hover::after {
  top: calc(var(--border-width) * (-8));
  right: calc(var(--border-width) * (-8));
  bottom: calc(var(--border-width) * (-8));
  left: calc(var(--border-width) * (-8));
  opacity: 0;
  visibility: visible;
}

/* CSS for buttons - Animated Lines on hover - Horizontal */

.dl-lines-horizontal {
  --border-width: 1px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::after {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 0;
  opacity: 0;
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::before {
  top: calc(var(--border-width) * (-1));
  left: 0;
  bottom: auto;
  right: auto;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: 0;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-horizontal:hover::after {
  width: 100%;
  opacity: 1;
}

/* CSS for buttons - Animated Lines on hover - from the Left */

.dl-lines-left {
  --border-width: 1px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-left::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  left: 0;
  right: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-left:hover::before {
  width: 100%;
  opacity: 1;
}

/* CSS for buttons - Animated Lines on hover - from the Right */

.dl-lines-right {
  --border-width: 1px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-right::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 0;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-right:hover::before {
  width: 100%;
  opacity: 1;
}

/* CSS for buttons - Animated Lines on hover - from the Center */

.dl-lines-center {
  --border-width: 1px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-center::before {
  display: block !important;
  margin: 0;
  content: '';
  width: 0;
  height: 100%;
  opacity: 0;
  border-width: var(--border-width);
  border-color: var(--border-color);
  border-style: solid;
  border-left: none;
  border-right: none;
  right: 50%;
  left: auto;
  top: calc(var(--border-width) * (-1));
  bottom: calc(var(--border-width) * (-1));
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-center:hover::before {
  width: 100%;
  opacity: 1;
  right: 0;
}

/* CSS for buttons - Animated Lines on hover - Corners */

.dl-lines-corners {
  --border-width: 1px; /* set line width */
  --border-color: #000 /* set line color */
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::after {
  display: block !important;
  margin: 0;
  content: '';
  border-radius: inherit;
  border-width: var(--border-width);
  border-color: transparent;
  border-style: solid;
  opacity: 1;
  width: 0;
  height: 0;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::before {
  top: calc(var(--border-width) * (-1));
  left: calc(var(--border-width) * (-1));
  bottom: auto;
  right: auto;
  border-right: none;
  border-bottom: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners::after {
  top: auto;
  left: auto;
  bottom: calc(var(--border-width) * (-1));
  right: calc(var(--border-width) * (-1));
  border-left: none;
  border-top: none;
}

#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners:hover::before,
#page-container .et-l .et_pb_section .et_pb_button.dl-lines-corners:hover::after {
  width: calc(100% + var(--border-width));
  height: calc(100% + var(--border-width));
  border-color: var(--border-color);
}

/* CSS for buttons - Attention Grabber - Pulse */

#page-container .et-l .et_pb_section .dl-pulse {
  animation: button-pulse 1.5s infinite;
}

@keyframes button-pulse {
  0%,
  30%,
  60%,
  100% {
    transform: scale(1);
  }

  15%,
  45% {
    transform: scale(1.15);
  }
}

#page-container .et-l .et_pb_section .dl-pulse:hover {
  animation: none;
}

/* CSS for buttons - Attention Grabber - Shadow Pulse */

#page-container .et-l .et_pb_section .dl-shadow-pulse {
  animation: shadow-pulse 1s infinite;
}

@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 #3fdfba; /* Set shadow color */
  }

  50% {
    box-shadow: 0 0 0 1em transparent;
  }

  100% {
    box-shadow: 0 0 transparent;
  }
}

#page-container .et-l .et_pb_section .dl-shadow-pulse:hover {
  animation: none;
}

/* CSS for buttons - Attention Grabber - Shake */

#page-container .et-l .et_pb_section .dl-shake {
  animation: button-shake 1.5s infinite;
}

@keyframes button-shake {
  10%,90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,50%,70% {
    transform: translate3d(-3px, 0, 0);
  }

  40%,60% {
    transform: translate3d(3px, 0, 0);
  }
}

#page-container .et-l .et_pb_section .dl-shake:hover {
  animation: none;
}

/* CSS for buttons - Attention Grabber - Border Pulse */

.dl-border-pulse {
  --border-width: 1px; /* set the border width */
  --border-color: #3fdfba; /* set the border color */
}

#page-container .et-l .et_pb_section .dl-border-pulse::after {
  display: block !important;
  margin: 0;
  border: var(--border-width) solid var(--border-color);
  border-radius: inherit;
  content: '';
  z-index: -1;
  transition: all .5s ease-out;
  animation: border-pulse 1.2s infinite;
  opacity: 1;
}

@keyframes border-pulse {
  0%,100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  50% {
    top: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    right: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    bottom: calc(var(--border-width) * (-1) - var(--border-width) * 3);
    left: calc(var(--border-width) * (-1) - var(--border-width) * 3);
  }
}

#page-container .et-l .et_pb_section .dl-border-pulse:hover::after {
  opacity: 0;
}