/*-------------------------------------------------------------------------------------
Theme Name: maple
Theme URI:  
Version:    1.0
Author: vedhathemes
-------------------------------------------------------------------------------------*/


/**
****************************************
@File: maple Theme page Styles

* This file contains the styling for the main-core, this
is the file you need to edit to change the look of the
theme.

/*=========================
  preloader
  =========================*/

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: #fbcd06;
  display: flex;
  justify-content: center;
  align-items: center;
}
.preloader .lines {
  width: 63px;
  height: 40px;
  position: absolute;
}
.preloader .lines .line {
  width: 63px;
  height: 8px;
  background-color: #fff;
  position: absolute;
  clip: rect(0, 0, 20px, 0);
}
.preloader .lines .line.line-1 {
  top: 0;
  -webkit-animation: slide 2s ease 0s infinite;
          animation: slide 2s ease 0s infinite;
}
.preloader .lines .line.line-2 {
  top: 13px;
  -webkit-animation: slide 2s ease 0.25s infinite;
          animation: slide 2s ease 0.25s infinite;
}
.preloader .lines .line.line-3 {
  top: 27px;
  -webkit-animation: slide 2s ease 0.5s infinite;
          animation: slide 2s ease 0.5s infinite;
}
.preloader .loading-text {
  position: absolute;
  top: 40px;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 10px;
  font-family: sans-serif;
  letter-spacing: 3px;
  line-height: 10px;
  height: 10px;
  -webkit-animation: fade 1s ease 0s infinite;
          animation: fade 1s ease 0s infinite;
}

@-webkit-keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}

@keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*============================
  common style
  ===========================*/
    html
    {
      height: 100%;
    }
    body
    {
        font-family: 'PT Sans', sans-serif;
        height: 100%;
    }

/*============================
  Typography
  ===========================*/
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
  {
    body {
  background: #000;
}

.preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 60px;
  margin: -30px 0 0 -40px;
}
.preloader .lines {
  width: 80px;
  height: 40px;
  position: absolute;
}
.preloader .lines .line {
  width: 80px;
  height: 10px;
  background-color: #fff;
  position: absolute;
  clip: rect(0, 0, 20px, 0);
}
.preloader .lines .line.line-1 {
  top: 0;
  -webkit-animation: slide 2s ease 0s infinite;
          animation: slide 2s ease 0s infinite;
}
.preloader .lines .line.line-2 {
  top: 15px;
  -webkit-animation: slide 2s ease 0.25s infinite;
          animation: slide 2s ease 0.25s infinite;
}
.preloader .lines .line.line-3 {
  top: 30px;
  -webkit-animation: slide 2s ease 0.5s infinite;
          animation: slide 2s ease 0.5s infinite;
}
.preloader .loading-text {
  position: absolute;
  top: 50px;
  text-align: center;
  width: 100%;
  color: #fff;
  font-size: 13px;
  font-family: sans-serif;
  letter-spacing: 3px;
  line-height: 10px;
  height: 10px;
  -webkit-animation: fade 1s ease 0s infinite;
          animation: fade 1s ease 0s infinite;
}

@-webkit-keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}

@keyframes slide {
  0% {
    clip: rect(0, 0, 20px, 0);
  }
  30% {
    clip: rect(0, 80px, 20px, 0);
  }
  50% {
    clip: rect(0, 80px, 20px, 0);
  }
  80% {
    clip: rect(0, 80px, 20px, 80px);
  }
  100% {
    clip: rect(0, 80px, 20px, 80px);
  }
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
font-family: 'Roboto Slab', serif;
    font-weight: 700;
    margin: 0px;
    color: #222222;
  }  
  h1
  {
    font-size: 50px;
  }
  h2
  {
    font-size: 40px;
  }
  h3
  {
    font-size: 30px;
  }
  h4
  {
    font-size: 24px;
    text-transform: uppercase;
  }
  h5
  {
    font-size: 18px;
  }    
  h6
  {
    font-size: 16px;
  }
  h4 span,
  h5 span,
  h6 span
  {
    color: #fbcd06;
  }
  p.lead
  {
    font-size: 18px;
    color:#222;
    line-height: 24px;
  }
  p
  {
    font-size: 14px;
    color:#777777;
    line-height: 22px;
  }
  p span
  {
    color: #81ad07;
  }
  p.small
  {
    color:#777777;
    line-height: 18px;
  }
  a:hover,
  a:focus,
  button:hover,
  button:focus
  {
    text-decoration: none;
    outline: none;
  }
/*============================
  general ui
  ===========================*/
code
{
    margin-bottom: 10px;
    display: inline-block;
}
.d-flex
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.d-height
{
  height: 100%;
}
/*----------------------------
  padding
  ---------------------------*/
.p-0
{
    padding: 0px;
}
.p-10
{
    padding: 10px;
}
.p-20
{
    padding: 20px;
}
.p-30
{
    padding: 30px;
}
.p-40
{
    padding: 40px;
}
.pl-0
{
    padding-left: 0;
}
.pl-10
{
    padding-left: 10;
}
.pl-20
{
    padding-left: 20;
}
.pl-30
{
    padding-left: 30;
}
.pr-0
{
    padding-right: 0;
}
.pr-10
{
    padding-right: 10;
}
.pr-20
{
    padding-right: 20;
}
.pr-30
{
    padding-right: 30;
}
.pt-0
{
    padding-top: 0;
}
.pt-10
{
    padding-top: 10;
}
.pt-20
{
    padding-top: 20;
}
.pt-30
{
    padding-top: 30;
}
.pt-40
{
    padding-top: 40;
}
.pt-50
{
    padding-top: 50;
}
.pt-60
{
    padding-top: 60;
}
.pt-70
{
    padding-top: 70;
}
.pt-80
{
    padding-top: 80;
}
.pt-90
{
    padding-top: 90;
}
.pt-100
{
    padding-top: 100;
}
.pb-0
{
    padding-bottom: 0;
}
.pb-10
{
    padding-bottom: 10;
}
.pb-20
{
    padding-bottom: 20;
}
.pb-30
{
    padding-bottom: 30;
}
.pb-40
{
    padding-bottom: 40;
}
.pb-50
{
    padding-bottom: 50;
}
.pb-60
{
    padding-bottom: 60;
}
.pb-70
{
    padding-bottom: 70;
}
.pb-80
{
    padding-bottom: 80;
}
.pb-90
{
    padding-bottom: 90;
}
.pb-100
{
    padding-bottom: 100;
}
.py-10
{
    padding: 10px 0;
}
.py-20
{
    padding: 20px 0;
}
.py-30
{
    padding: 30px 0;
}
.py-40
{
    padding: 40px 0;
}
.py-50
{
    padding: 50px 0;
}
.py-60
{
    padding: 60px 0;
}
.py-70
{
    padding: 70px 0;
}
.py-80
{
    padding: 80px 0;
}
.py-90
{
    padding: 90px 0;
}
.py-100
{
    padding: 100px 0;
}
.px-10
{
    padding: 0 10px;
}
.px-20
{
    padding: 0 20px;
}
.px-30
{
    padding: 0 30px;
}
.px-40
{
    padding: 0 40px;
}
.px-50
{
    padding: 0 50px;
}
.px-60
{
    padding: 0 60px;
}
.px-70
{
    padding: 0 70px;
}
.px-80
{
    padding: 0 80px;
}
.px-90
{
    padding: 0 90px;
}
.px-100
{
    padding: 0 100px;
}


/*----------------------------
  margin
  ---------------------------*/
.m-0
{
    margin: 0px;
}
.m-10
{
    margin: 10px;
}
.m-20
{
    margin: 20px;
}
.m-30
{
    margin: 30px;
}
.m-40
{
    margin: 40px;
}
.ml-0
{
    margin-left: 0;
}
.ml-10
{
    margin-left: 10;
}
.ml-20
{
    margin-left: 20;
}
.ml-30
{
    margin-left: 30;
}
.mr-0
{
    margin-right: 0;
}
.mr-10
{
    margin-right: 10;
}
.mr-20
{
    margin-right: 20;
}
.mr-30
{
    margin-right: 30;
}
.my-10
{
    margin: 10px 0;
}
.my-20
{
    margin: 20px 0;
}
.my-30
{
    margin: 30px 0;
}
.my-40
{
    margin: 40px 0;
}
.my-50
{
    margin: 50px 0;
}
.my-60
{
    margin: 60px 0;
}
.my-70
{
    margin: 70px 0;
}
.my-80
{
    margin: 80px 0;
}
.my-90
{
    margin: 90px 0;
}
.my-100
{
    margin: 100px 0;
}
.mx-10
{
    margin: 0 10px;
}
.mx-20
{
    margin: 0 20px;
}
.mx-30
{
    margin: 0 30px;
}
.mx-40
{
    margin: 0 40px;
}
.mx-50
{
    margin: 0 50px;
}
.mx-60
{
    margin: 0 60px;
}
.mx-70
{
    margin: 0 70px;
}
.mx-80
{
    margin: 0 80px;
}
.mx-90
{
    margin: 0 90px;
}
.mx-100
{
    margin: 0 100px;
}

/*--------------------------
  Button
  --------------------------*/
  .purchase-btn
  {
    padding: 6px 12px;
    background: rgba(163, 204, 80, 0.9);
    font-size: 25px;
    font-family: 'PT Sans', sans-serif;
    color: #fff;
  }
  .purchase-btn:hover,
  .purchase-btn:focus
  {
    color:#fff;
  }
/*--------------------------
  colors
  --------------------------*/
  .light-gray
  {
    background: #efefef;
  }

/*---------------------------
  list style
  ---------------------------*/
  ul li,ol li
  {
    padding-bottom: 10px;
  }
  ul.custom
  {
    list-style: none;
  }
  ul.custom li
  {
    position: relative;
  }
  ul.custom li:before
  {
    content: "\e079";
    font-family: 'simple-line-icons';
    position: relative;
    top: 2px;
    padding-right: 10px;
    color: #000000;
  }

  /*-------------------------------
    heading
    ------------------------------*/
    .common-head h3
    {
      text-transform: uppercase;
      font-weight: 700;
    }
    .common-head label
    {
      text-transform: uppercase;
      font-size: 13px;
      color: #888;
      letter-spacing: 4px;
    }
    .common-head label span
    {
      color: #a3cc50;
    }
    .common-head h4
    {
      line-height: 34px;
    }

/*===============================
  buttons
  ===============================*/
  .small-default
  {
    background: #362e17;
    font-size: 14px;
    color: #fff;
    border-radius: 0px;
    transition: .2s ease-in;
    line-height: 0;
    padding: 17px 20px 20px;
  }
  .maple-outline-btn
  {
    background: none;
    font-size: 14px;
    color: #fff;
    border-radius: 0px;
    transition: .2s ease-in;
    border:1px solid #a3cc50;
    color: #a3cc50;
    line-height: 0;
    padding: 17px 20px 20px;
  }
  .maple-outline-btn:hover
  {
    background: #a3cc50;
  }
  .small-default:hover
  {
    color: #fff;
    box-shadow:5px 5px 8px 0px #ddd;
  }
  .btn-maple
  {
    background: #a3cc50;
    color: #fff !important;
  }