/*
@File: Emilono Template Styles

* This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

This files table contents are outlined below>>>>>

*******************************************
*******************************************

** - Default CSS
** - Preloader CSS
** - Coming Soon CSS
*/
/*================================================
Default CSS
=================================================*/
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Serif:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap");
body {
  padding: 0;
  margin: 0;
  font-family: "IBM Plex Serif", serif;
}

a {
  text-decoration: none;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a:hover, a:focus {
  text-decoration: none;
}

p {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: #4f575b;
}

p:last-child {
  margin-bottom: 0;
}

.d-table {
  width: 100%;
  height: 100%;
}

.d-table-cell {
  vertical-align: middle;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  color: #000000;
}

img {
  max-width: 100%;
}

/*================================================
Preloader CSS
=================================================*/
.preloader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #63D0FF;
  top: 0;
  left: 0;
}

.preloader .loader {
  position: absolute;
  top: 43%;
  left: 0;
  right: 0;
  -webkit-transform: translateY(-43%);
          transform: translateY(-43%);
  text-align: center;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}

.preloader .box {
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-animation: animate .5s linear infinite;
          animation: animate .5s linear infinite;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px;
}

.preloader .shadow {
  width: 100%;
  height: 5px;
  background: #000;
  opacity: 0.1;
  position: absolute;
  top: 59px;
  left: 0;
  border-radius: 50%;
  -webkit-animation: shadow .5s linear infinite;
          animation: shadow .5s linear infinite;
}

@-webkit-keyframes loader {
  0% {
    left: -100px;
  }
  100% {
    left: 110%;
  }
}

@keyframes loader {
  0% {
    left: -100px;
  }
  100% {
    left: 110%;
  }
}

@-webkit-keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
            transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
            transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
            transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
            transform: translateY(0) rotate(90deg);
  }
}

@keyframes animate {
  17% {
    border-bottom-right-radius: 3px;
  }
  25% {
    -webkit-transform: translateY(9px) rotate(22.5deg);
            transform: translateY(9px) rotate(22.5deg);
  }
  50% {
    -webkit-transform: translateY(18px) scale(1, 0.9) rotate(45deg);
            transform: translateY(18px) scale(1, 0.9) rotate(45deg);
    border-bottom-right-radius: 40px;
  }
  75% {
    -webkit-transform: translateY(9px) rotate(67.5deg);
            transform: translateY(9px) rotate(67.5deg);
  }
  100% {
    -webkit-transform: translateY(0) rotate(90deg);
            transform: translateY(0) rotate(90deg);
  }
}

@-webkit-keyframes shadow {
  50% {
    -webkit-transform: scale(1.2, 1);
            transform: scale(1.2, 1);
  }
}

@keyframes shadow {
  50% {
    -webkit-transform: scale(1.2, 1);
            transform: scale(1.2, 1);
  }
}

/*================================================
Coming Soon CSS
=================================================*/
.coming-soon-area {
  height: 100vh;
  background: #63D0FF;
  position: relative;
  z-index: 1;
}

.coming-soon-content {
  max-width: 670px;
  text-align: center;
  margin: 0 auto;
}

.coming-soon-content .logo {
  margin-bottom: 40px;
}

.coming-soon-content .logo a {
  display: inline-block;
}

.coming-soon-content h1 {
  line-height: 1;
  margin-bottom: 0;
  font-size: 55px;
  font-weight: 700;
  color: #ffffff;
}

#timer {
  z-index: 2;
  position: relative;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  margin: 40px auto 0;
  border-radius: 5px;
}

#timer div {
  color: #000000;
  display: inline-block;
  font-size: 35px;
  font-weight: 700;
  border-right: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0 35px;
}

#timer div#days {
  padding-left: 0;
}

#timer div#seconds {
  border-right: none;
  padding-right: 0;
}

#timer span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  margin-top: -5px;
}

#wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  z-index: -1;
  left: 0;
}

#wrapper #clouds {
  background: url("../img/clouds.png") repeat-x 0 bottom #63D0FF;
  width: 100%;
  height: 190px;
  min-height: 190px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  -webkit-transform: translate3d(0, 0, 0.01);
          transform: translate3d(0, 0, 0.01);
}

#wrapper #ground {
  background: url("../img/grass-tile.png") repeat-x 0 0 transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 192px;
  min-height: 192px;
  border: 0 none transparent;
  outline: 0 none transparent;
  -webkit-transform: translate3d(0, 0, 0.01);
          transform: translate3d(0, 0, 0.01);
  will-change: transform;
}
/*# sourceMappingURL=style.css.map */