.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

:root {
  --vpcolorprimary: #008000;
  --vpcolorsecondary: #064906;
}

/* bootstrap overrid */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  font-weight: 400 !important;
}

.card {
  border: 0;
  -webkit-box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%) !important;
  box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%) !important;

  margin-top: 20px;
}

.card-img-top {
  width: 200px;
  margin-top: 20px;
}

@media(min-width: 992px) {
  #mainNavBar{
    margin-top: 34px;
  }
}

.nav-link.active{
  color: #064906 !important; 
}

/* vpdroid */
#intro {
  /* Margin to fix overlapping fixed navbar */
  margin-top: 120px !important;
}

.fa-youtube{
  color: #FF0000 !important;
}

.fa-facebook-f{
  color: #4267B2 !important;
}

.fa-twitter{
  color: #1DA1F2 !important;
}
.fa-telegram{
  color:#0088cc;
}
.text-primary-color {
  color: var(--vpcolorprimary);
}
.bg-primary-color {
  background-color: var(--vpcolorprimary);
}
.text-secondary-color{
  color: var(--vpcolorsecondary);
}
.bg-secondary-color {
  background-color: var(--vpcolorsecondary);
}

.homeImage {
  -webkit-transform: scale(1.6) rotateZ(-16deg); 
  -ms-transform: scale(1.6) rotateZ(-16deg); 
  transform: scale(1.6) rotateZ(-16deg); 
}

@keyframes anchor-underline {
  0%, 10% {
    left: 0;
    right: 100%;
  }
  40%, 60% {
    left: 0;
    right: 0;
  }
  90%, 100% {
    left: 100%;
    right: 0;
  }
}

/* Styles animation anchor underline */
.animateUnderline {
  position: relative;
  text-decoration: none;
  transition: color .4s ease-out;
}

.animateUnderline:after {
  border-radius: .5em;
  border-top: .15em solid var(--vpcolorprimary);
  content: "";
  position: absolute;
    right: 100%;
    bottom: .14em;
    left: 0;
  transition: right .4s cubic-bezier(0,.5,0,1),
              border-color .4s ease-out;
}

.animateUnderline:hover:after {
  animation: anchor-underline 2s cubic-bezier(0,.5,0,1) infinite;
  border-color: var(--vpcolorprimary);
}

@keyframes anchor-underline {
  0%, 10% {
    left: 0;
    right: 100%;
  }
  40%, 60% {
    left: 0;
    right: 0;
  }
  90%, 100% {
    left: 100%;
    right: 0;
  }
}
