/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
/*
main > .container {
  padding: 60px 15px 0;
}
*/
.b-example-divider {
  height: 3rem;
  background-color: rgba(0, 0, 0, .1);
  border: solid rgba(0, 0, 0, .15);
  border-width: 1px 0;
  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
}

.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1rem;
  font-size: 2rem;
  color: #fff;
  border-radius: .75rem;
}

.icon-link {
  display: inline-flex;
  align-items: center;
}
.icon-link > .bi {
  margin-top: .125rem;
  margin-left: .125rem;
  transition: transform .25s ease-in-out;
  fill: currentColor;
}
.icon-link:hover > .bi {
  transform: translate(.25rem);
}

.icon-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  border-radius: .75rem;
}

.rounded-4 { border-radius: .5rem; }
.rounded-5 { border-radius: 1rem; }

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card-cover {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/**/

.loader {
  position: absolute;
  top: calc(50% - 0px);
  left: calc(50% - 500px);
  width: 70vh;
  height: 70vh;
  border-radius: 50%;
  perspective: 875vh;
}

.inner {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border-radius: 50%;  
}

.inner.one {
  left: 0%;
  top: 0%;
  animation: rotate-one 8s linear infinite;
/*  border-bottom: 3px solid #EFEFFA;
*/
  border-bottom: 3px solid #67cc6c;
}

.inner.two {
  right: 0%;
  top: 0%;
  animation: rotate-two 8s linear infinite;
/*  border-right: 3px solid #EFEFFA;
*/
  border-right: 3px solid #67cc6c;
}

.inner.three {
  right: 0%;
  bottom: 0%;
  animation: rotate-three 8s linear infinite;
/*  border-top: 3px solid #EFEFFA;
*/
  border-top: 3px solid #67cc6c;
}

@keyframes rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

/*
.anime{
.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 160px;
  height: 160px;
  margin: -80px 0px 0px -80px;
  background-color: transparent;
  border-radius: 50%;
  border: 2px solid #E3E4DC;
  /* animation: rotate3 3s linear infinite;
  &:before {
    content: '';
    width: 164px;
    height: 164px;
    display: block;
    position: absolute;
    border: 2px solid #898a86;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    box-sizing: border-box;
    // border-bottom-color: transparent;
    // border-left-color: transparent;
    // border-right-color: transparent;
    clip: rect(0px, 35px, 35px, 0px);
    z-index: 10;
    animation: rotate infinite;
    animation-duration: 3s;
    animation-timing-function: linear;
  }
  &:after {
    content: '';
    width: 164px;
    height: 164px;
    display: block;
    position: absolute;
    border: 2px solid #c1bebb;
    border-radius: 50%;
    top: -2px;
    left: -2px;
    box-sizing: border-box;
    // transform: rotate(30deg);
    // border-bottom-color: transparent;
    // border-left-color: transparent;
    // border-right-color: transparent;
    clip: rect(0px, 164px, 150px, 0px);
    z-index: 9;
    // animation: rotate2 infinite, rotate3 infinite;
    // animation-duration: 3s;
    // animation-timing-function: linner;
    animation: rotate2 3s linear infinite;
  }
}

.hexagon-container {
  position: relative;
  top: 33px;
  left: 41px;
  border-radius: 50%;
}

.hexagon {
  position: absolute;
  width: 40px;
  height: 23px;
  background-color: #556C82;
  &:before {
    content: "";
    position: absolute;
    top: -11px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 11.5px solid #556C82;
  }
  &:after {
    content: "";
    position: absolute;
    top: 23px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 11.5px solid #556C82;
  }
}

@each $index,
$top,
$left in (1, 0px, 0px),
(2, 0px, 42px),
(3, 36px, 63px),
(4, 72px, 42px),
(5, 72px, 0px),
(6, 36px, -21px),
(7, 36px, 21px) {
  $time: 3s; // thx to @zeakd for this formula
  $delay: $time / 14;
  .hexagon.hex_#{$index} {
    top: $top;
    left: $left;
    //cubic-bezier(.155,1.105,.295,1.12)
    animation: Animasearch $time ease-in-out infinite;
    animation-delay: $delay*$index;
  }
}

@keyframes Animasearch {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  15%,
  50% {
    transform: scale(0.5);
    opacity: 0;
  }
  65% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0);
    clip: rect(0px, 35px, 35px, 0px);
  }
  50% {
    clip: rect(0px, 40px, 40px, 0px);
  }
  100% {
    transform: rotate(360deg);
    clip: rect(0px, 35px, 35px, 0px);
  }
}

@keyframes rotate2 {
  0% {
    transform: rotate(0deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
  50% {
    clip: rect(0px, 164px, 0px, 0px);
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(720deg);
    clip: rect(0px, 164px, 150px, 0px);
  }
}

@keyframes rotate3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

}
*/