/* =============================================================================
=    Base Styles
============================================================================= */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Montserrat', sans-serif;
}

button {
  /* safari button has default margin  */
  margin: 0;
}

input, textarea {
  font-family: 'Montserrat', sans-serif;
}

img {
  max-width: 100%;
  width: auto\9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

#app {
  width: 100%;
  height: 100%;
}

div, form, nav {
  box-sizing: border-box;
}

/* =============================================================================
=    App styles
============================================================================= */

.svg-success {
  stroke-width: 2px;
  stroke: #8EC343;
  fill: none;
}
.svg-success path {
  stroke-dasharray: 17px, 17px;
  stroke-dashoffset: 0px;
  -webkit-animation: checkmark 0.25s ease-in-out 0.7s backwards;
  animation: checkmark 0.25s ease-in-out 0.7s backwards;
}
.svg-success circle {
  stroke-dasharray: 76px, 76px;
  stroke-dashoffset: 0px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  -webkit-animation: checkmark-circle 0.6s ease-in-out forwards;
  animation: checkmark-circle 0.6s ease-in-out forwards;
}

@keyframes checkmark {
  0% {
    stroke-dashoffset: 17px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes checkmark-circle {
  0% {
    stroke-dashoffset: 76px;
  }
  100% {
    stroke-dashoffset: 0px;
  }
}

/* =============================================================================
=    Animation helpers
============================================================================= */
@keyframes flash {
    0%, 100%, 50% {
        opacity: 1
    }
    25%,
    75% {
        opacity: 0
    }
}
.flash {
    animation-name: flash
}
@keyframes pulse {
    0%, 100% {
        transform: scale3d(1, 1, 1)
    }
    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }
}
.pulse {
    animation-name: pulse
}
@keyframes rubberBand {
    0%, 100% {
        transform: scale3d(1, 1, 1)
    }
    30% {
        transform: scale3d(1.25, .75, 1)
    }
    40% {
        transform: scale3d(.75, 1.25, 1)
    }
    50% {
        transform: scale3d(1.15, .85, 1)
    }
    65% {
        transform: scale3d(.95, 1.05, 1)
    }
    75% {
        transform: scale3d(1.05, .95, 1)
    }
}
.rubberBand {
    animation-name: rubberBand
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}
.bounce {
    animation-name: bounce;
}


/* =============================================================================
=    Scrollbars
============================================================================= */
.scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: #20242c;
}

.scrollbar::-webkit-scrollbar {
	width: 10px;
	background-color: #F5F5F5;
}

.scrollbar::-webkit-scrollbar-thumb {
	background-color: #687082;
}

/* hide google recaptcha badge */
.grecaptcha-badge { visibility: hidden; }