/* ==============================================
 * Dot Elastic
 * ==============================================
 */
.dot-elastic{
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;  
  display: inline-flex;
  left: 20px;  
  bottom: 1px;
  margin-left: 10px;
} 

.btn-main-sm:hover .dot-elastic{
  animation: dot-elastic 1s linear;  
}

.dot-elastic::before,
.dot-elastic::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-elastic::before {
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;  
}

.btn-main-sm:hover .dot-elastic::before{
  animation: dot-elastic-before 1s linear;  
}

.dot-elastic::after {
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #fff;
  color: #fff;  
}

.btn-main-sm:hover .dot-elastic::after{
  animation: dot-elastic-after 1s linear;  
}

@keyframes dot-elastic-before {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elastic {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elastic-after {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


/* ==============================================
 * Dot Elastic Blue
 * ==============================================
 */
.dot-elasticb{
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #6b8dae;
  color: #6b8dae;  
  display: inline-flex;
  left: 20px;  
  bottom: 1px;
  margin-left: 10px;
} 

.btn-main-sm-outline:hover .dot-elasticb{
  animation: dot-elasticb 1s linear;  
}

.dot-elasticb::before,
.dot-elasticb::after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
}
.dot-elasticb::before {
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #6b8dae;
  color: #6b8dae;  
}

.btn-main-sm-outline:hover .dot-elasticb::before{
  animation: dot-elasticb-before 1s linear;  
}

.dot-elasticb::after {
  left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 5px;
  background-color: #6b8dae;
  color: #6b8dae;  
}

.btn-main-sm-outline:hover .dot-elasticb::after{
  animation: dot-elasticb-after 1s linear;  
}

@keyframes dot-elasticb-before {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1.5);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elasticb {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 1.5);
  }
  75% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes dot-elasticb-after {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1, 0.67);
  }
  75% {
    transform: scale(1, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}


 /* ==============================================
 * Arrow Up
 * ==============================================
 */

div.arrowu {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  left: 21px;
  top: 1.1px;  
  transform: rotate(1deg);
  right: 0;
}
div.arrowu::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 0.4vmin 0.4vmin 0 0;
  border-style: solid;
  border-color: #fff;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;  
}
div.arrowu:after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 0.4vmin 0 0;
  border-style: solid;
  border-color: #fff;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

.btn-main-sm:hover div.arrowu::after {
  transform: rotate(45deg);
  border-color: #fff;
  height: 150%;
}
.btn-main-sm:hover div.arrowu::before {
  border-color: #fff;
  transform: scale(0.8);
}

/* ==============================================
 * Arrow Normal / White
 * ==============================================
 */

div.arrow {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  left: 21px;
  top: 1.1px;  
  transform: rotate(45deg);
  right: 0;
}
div.arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 0.4vmin 0.4vmin 0 0;
  border-style: solid;
  border-color: #fff;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;  
}
div.arrow:after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 0.4vmin 0 0;
  border-style: solid;
  border-color: #fff;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

.btn-main-sm:hover div.arrow::after {
  transform: rotate(45deg);
  border-color: #fff;
  height: 150%;
}
.btn-main-sm:hover div.arrow::before {
  border-color: #fff;
  transform: scale(0.8);
}

 /* ==============================================
 * Arrow for catcard
 * ==============================================
 */

div.arrowcat {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  left: 3px;
  top: 1.1px;  
  transform: rotate(45deg);
  right: 0;
}
div.arrowcat::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 0.4vmin 0.4vmin 0 0;
  border-style: solid;
  border-color: #587d9f;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;  
}
div.arrowcat:after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 0.4vmin 0 0;
  border-style: solid;
  border-color: #587d9f;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

.catcard-sm:hover div.arrowcat::after {
  transform: rotate(45deg);
  border-color: #587d9f;
  height: 150%;
}
.catcard-sm:hover div.arrowcat::before {
  border-color: #587d9f;
  transform: scale(0.8);
}


/* ==============================================
 * Arrow for a
 * ==============================================
 */

div.arrowa {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  position: relative;
  display:inline-block;
  left: 3px;
  top: 1.1px;  
  transform: rotate(1deg);
  right: 0;
}
div.arrowa::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 0.4vmin 0.4vmin 0 0;
  border-style: solid;
  border-color: #587d9f;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;  
}
div.arrowa:after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 0.4vmin 0 0;
  border-style: solid;
  border-color: #587d9f;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

a:hover div.arrowa::after {
  transform: rotate(45deg);
  border-color: #587d9f;
  height: 150%;
}
a:hover div.arrowa::before {
  border-color: #587d9f;
  transform: scale(0.8);
}