body{
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 300;
}
a{
  color: #0092c8;
}
.preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #a7ddf1;
    z-index: 1001;
    text-align: center;
}
.preloader__image {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -120px;
    margin-top: -120px;
    width: 240px;
    height: 240px;
    display: block;
}
.btn-primary{
  background-color: #0092c8;
  border-color: #0092c8;
}
.nav-link{
	color: #0092c8;
}
.header_address{
  color: #d480b2;
}
.carousel-item{
  background: #e1eef4;
}
.carousel-item > img{
  height: 100%;
  width: auto;
  margin: 0 auto;
}
.carousel-caption{
  text-align: left;
  color: #0092c8;
  right: auto;
  left: auto;
}
.hello{
  font-size: 1.25em;
  padding-top: 15vh;
}
.bg-light1 h2{
  color: #ca408e;
}
.bg-light1 .rounded-circle{
  background: #ffe9f3;
  width: 320px;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  padding: 0 32px;
  margin: 0 auto;
  border: 16px solid #e29ac2
}
.bg-light1 .rounded-circle--alt{
  background: #d7f1fd;
}
.text-center{
  text-align: center;
}
.decor{
  position: absolute;
  border-radius: 50%;
  background: url(../img/pattern.png) repeat #fff;
  background-size: 50%;
  border: 20px solid #d480b2;
  width: 20vh;
  height: 20vh;
  left: -40px;
  bottom: 20vh;
  z-index: 1;
  opacity: 0.3;
}
.decor.header-decor1{
  left: 120px;
  bottom: -50px;
  width: 15vh;
  height: 15vh;
}
.decor.header-decor2{
  left: 200px;
  bottom: -10px;
  z-index: 1;
  width: 30vh;
  height: 30vh;
}
.decor.header-decor3{
  right: -30px;
  top: 10px;
  width: 38vh;
  height: 38vh;
  left: auto;
}
.info{
  border-radius: 40px;
  padding: 32px;
  background: #e1eef4;
  color: #d480b2;
  font-size: 1.25em;
  height: 100%;
  border: 10px solid #fff;
}
.info img{
  float: left;
  width: 120px;
  max-width: 100%;
}
.info span{
  display: block;
  overflow: hidden;
}
.info1{
  padding-left: 42px;
  color: #fff;
  font-size: 1.25em;
}
.featurette-heading{
  color: #d480b2;
}
.header h1{
  color: #0092c8;
  font-size: 2.8em;
  max-width: 700px;
  font-weight: 300;
  line-height: 1;
  z-index: 1;
}
.header .container{
  position: relative;
  z-index: 1;
}
.hello{
  color: #83bbd0;
}
.header .nav a:hover{
  color: #333;
}
.header-bg{
  background: url(../img/hyppo-slide.jpg) no-repeat 50% 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
}
div.bg-light1{
  background-color: #deeff4;
  margin-top: 0;
  padding: 100px 0;
}
div.bg-light2{
  background: url(../img/game.jpg) no-repeat 50% 0;
  margin-top: 3rem;
  padding: 100px 0;
  background-size: cover;
}
h2{
  color: #0092c8;
}
.bg{
  background: url(../img/pattern_hyppo1.jpg) repeat;
  margin-top: 50px;
}
.header{
  height: 100vh;
  min-height: 480px;
  background: #e1eef4;
  position: relative;
}
.wrapper{
  padding: 100px 0;
}
.footer{
  font-size: 0.86rem;
  background: #5e808d;
  color: #fff;
}
.doc-pic img{
  display: block;
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
.doc-pic{
  display: block;
}
.doc-pic span{
  height: 200px;
  overflow: hidden;
  display: block;
  margin-bottom: 1rem;
}

/*
*
* Animations for the wow-effect ^_^
*/
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  opacity: 1;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

html:not(.lt-ie10) .not-animated {
  opacity: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  animation-name: fadeInLeft;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  animation-name: fadeOut;
}

@keyframes slideInDown {
  0% {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInDown {
  animation-name: slideInDown;
}

@keyframes slideInUp {
  0% {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInUp {
  animation-name: slideInUp;
}

@keyframes slideInLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
}

@keyframes slideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.slideInRight {
  animation-name: slideInRight;
}

@keyframes slideOutDown {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
  }
}

.slideOutDown {
  animation-name: slideOutDown;
}

@keyframes scaleInY {
  0% {
    top: 0;
    bottom: 100%;
  }
  50% {
    transform: scale3d(1, 1, 1);
  }
  100% {
    top: 100%;
    bottom: auto;
    transform: scale3d(1, 0, 1);
  }
}

@keyframes scaleFadeIn {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}

.scaleFadeIn {
  display: flex;
  overflow: hidden;
  animation-name: scaleFadeIn;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scaleFadeInWrap {
  display: flex;
  align-items: stretch;
}

.wow-outer {
  position: relative;
  overflow: hidden;
}
.wow-outer > span{
  display: block;
}
@media screen and (max-width: 768px){
  .header-bg{
    background-position: 100% 100%;
  }
  .decor.header-decor2{
    left: 176px;
    width: 24vh;
    height: 24vh;
  }
  .decor.header-decor1{
    left: 37px;
  }
}
@media screen and (max-width: 767px){
  .header_address{
    font-size: 15px;
    margin-top: 1rem;
  }
  .nav{
    font-size: 15px;
    margin-top: 1rem;
    justify-content: unset!important;
  }
  .nav-link{
    padding-left: 0;
  }
  .decor{
    opacity: 0.1;
  }
  .hello{
    padding-top: 2rem;
  }
  .header h1{
    font-size: 32px;
  }
  .header-bg{
    background-position: 85% 100%;
  }
  .decor.header-decor3{
    top: -50px;
  }
  .featurette-heading{
    margin-top: 2rem;
  }
  .info{
    font-size: 15px;
    margin-block: 1rem;
    height: auto;
  }
  .info1{
    font-size: 15px;
    padding-left: 0;
  }
  .doc-pic{
    margin-bottom: 2rem;
  }
  .doc-pic span{
    height: 100px;
  }
  .doc-pic img{
    max-height: 100px;
  }
}