:root {
  --bs-body-bg: rgba(0, 0, 0, 0.05);
  --bs-primary: #4682b4;
  --bs-primary-rgb: 70, 130, 180;
  --bs-info: #7e9cb5;
  --bs-info-rgb: 126, 156, 181;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4682b4;
  --bs-btn-border-color: #4682b4;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #155a93;
  --bs-btn-hover-border-color: #155a93;
}

.accordion {
  --bs-accordion-active-color: #ffffff;
  --bs-accordion-active-bg: #4682b4;
}

.navbar {
  --bs-navbar-toggler-padding-x: 0.35rem;
}

@font-face {
  font-family: "Oleo Script";
  src: url(./font/oleo-script-swash-caps-all-400-normal.woff);
}

@font-face {
  font-family: "Encode Sans Expanded";
  src: url(./font/EncodeSansExpanded-Light.ttf);
}

.text-highlight {
  color: var(--bs-primary);
  font-family: "Oleo Script", Arial, Helvetica, sans-serif;
}

.navbar-brand {
  font-family: "Encode Sans Expanded", Arial, Helvetica, sans-serif;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  --bs-navbar-brand-color: rgba(255, 255, 255, 1);
  --bs-navbar-brand-hover-color: rgba(255, 255, 255, 1);
}

@media only screen and (min-width: 1200px) {
  .navbar .navbar-nav .nav-item .nav-link {
    padding: 0 0.8em;
  }
  .navbar .navbar-nav .nav-item:not(:last-child) .nav-link {
    /*border-right: 2px solid var(--bs-gray-500);*/
  }
  .nav-link:hover {
    text-decoration: underline dotted;
    text-underline-offset: 6px;
  }
  .navbar {
    /*background-color: rgba(255,255,255,0.7);*/
    --bs-navbar-color: rgba(255, 255, 255, 1);
    --bs-navbar-hover-color: rgba(255, 255, 255, 1);
  }
  .nav-link-highlight {
    border: 2px solid #ffffff;
    /* color: steelblue; */
    padding: 0.2em 0.8em !important;
  }
}

@media only screen and (max-width: 991px) {
  .nav-link-highlight {
    color: steelblue;
  }
}

@media only screen and (min-width: 992px) {
  .arrow-left {
    position: relative;
  }

  .arrow-left:after {
    top: 2em;
    position: absolute;
    content: " ";
    pointer-events: none;
    width: 0;
    height: 0;
    left: 0;
    border: 1.8em solid #000;
    border-color: transparent transparent #fff #fff;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-box-shadow: -5px 5px 5px 0 rgba(0, 0, 0, 0.15);
    box-shadow: -5px 5px 5px 0 rgba(0, 0, 0, 0.15);
  }

  .arrow-right {
    position: relative;
  }

  .arrow-right:after {
    top: 7em;
    position: absolute;
    content: " ";
    pointer-events: none;
    width: 0;
    height: 0;
    left: 100%;
    border: 1.8em solid #000;
    border-color: transparent transparent #fff #fff;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    -webkit-box-shadow: -5px 5px 5px 0 rgba(0, 0, 0, 0.15);
    box-shadow: -5px 5px 5px 0 rgba(0, 0, 0, 0.15);
  }
}

.success-animation { margin:50px auto;}

.checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position:relative;
    top: 5px;
    right: 5px;
   margin: 0 auto;
}
.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4bb71b;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
 
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}