*{
  margin: 0;
  padding: 0;
}

/* .lyte-xscol,
.lyte-smcol,
.lyte-mdcol,
.lyte-lgcol,
.lyte-xlcol, */
.lyte-col-1,
.lyte-col-2,
.lyte-col-3,
.lyte-col-4,
.lyte-col-5,
.lyte-col-6,
.lyte-col-7,
.lyte-col-8,
.lyte-col-9,
.lyte-col-10,
.lyte-col-11,
.lyte-col-12,
.lyte-smcol-1,
.lyte-smcol-2,
.lyte-smcol-3,
.lyte-smcol-4,
.lyte-smcol-5,
.lyte-smcol-6,
.lyte-smcol-7,
.lyte-smcol-8,
.lyte-smcol-9,
.lyte-smcol-10,
.lyte-smcol-11,
.lyte-smcol-12,
.lyte-mdcol-1,
.lyte-mdcol-2,
.lyte-mdcol-3,
.lyte-mdcol-4,
.lyte-mdcol-5,
.lyte-mdcol-6,
.lyte-mdcol-7,
.lyte-mdcol-8,
.lyte-mdcol-9,
.lyte-mdcol-10,
.lyte-mdcol-11,
.lyte-mdcol-12,
.lyte-lgcol-1,
.lyte-lgcol-2,
.lyte-lgcol-3,
.lyte-lgcol-4,
.lyte-lgcol-5,
.lyte-lgcol-6,
.lyte-lgcol-7,
.lyte-lgcol-8,
.lyte-lgcol-9,
.lyte-lgcol-10,
.lyte-lgcol-11,
.lyte-lgcol-12,
.lyte-xlcol-1,
.lyte-xlcol-2,
.lyte-xlcol-3,
.lyte-xlcol-4,
.lyte-xlcol-5,
.lyte-xlcol-6,
.lyte-xlcol-7,
.lyte-xlcol-8,
.lyte-xlcol-9,
.lyte-xlcol-10,
.lyte-xlcol-11,
.lyte-xlcol-12{
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lyte-row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%;
}

.lyte-col{
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%
}

.lyte-container-fluid,
.lyte-container-lg,
.lyte-container-md,
.lyte-container-sm,
.lyte-container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.lyte-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

/* left right alignment codes */

.al-right{
  margin-left: auto;
}
.content-al-right{
  align-items: flex-end;
}
.justify-align-center{
  justify-content: center;
}
 /* Extra small devices (portrait phones, less than 576px) */
 /* No media query for `xs` since this is the default in Bootstrap */

 .lyte-col-1{
   -ms-flex: 0 0 8.333333%;
   flex: 0 0 8.333333%;
   max-width: 8.333333%
 }
.lyte-col-2{
   -ms-flex: 0 0 16.666667%;
   flex: 0 0 16.666667%;
   max-width: 16.666667%
 }
.lyte-col-3{
   -ms-flex: 0 0 25%;
   flex: 0 0 25%;
   max-width: 25%
 }
.lyte-col-4{
   -ms-flex: 0 0 33.333333%;
   flex: 0 0 33.333333%;
   max-width: 33.333333%
 }
.lyte-col-5{
   -ms-flex: 0 0 41.666667%;
   flex: 0 0 41.666667%;
   max-width: 41.666667%
 }
.lyte-col-6{
   -ms-flex: 0 0 50%;
   flex: 0 0 50%;
   max-width: 50%
 }
.lyte-col-7{
   -ms-flex: 0 0 58.333333%;
   flex: 0 0 58.333333%;
   max-width: 58.333333%
 }
.lyte-col-8{
   -ms-flex: 0 0 66.666667%;
   flex: 0 0 66.666667%;
   max-width: 66.666667%
 }
.lyte-col-9{
   -ms-flex: 0 0 75%;
   flex: 0 0 75%;
   max-width: 75%
 }
.lyte-col-10{
   -ms-flex: 0 0 83.333333%;
   flex: 0 0 83.333333%;
   max-width: 83.333333%
 }
.lyte-col-11{
   -ms-flex: 0 0 91.666667%;
   flex: 0 0 91.666667%;
   max-width: 91.666667%
 }
.lyte-col-12{
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   max-width: 100%
 }

 /* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .lyte-container {
        max-width: 540px
  }
  .lyte-container,
  .lyte-container-sm {
      max-width: 540px
  }
  .lyte-smcol-1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }
  .lyte-smcol-2{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }
  .lyte-smcol-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }
  .lyte-smcol-4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
  .lyte-smcol-5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }
  .lyte-smcol-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }
  .lyte-smcol-7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }
  .lyte-smcol-8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }
  .lyte-smcol-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
  }
  .lyte-smcol-10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }
  .lyte-smcol-11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }
  .lyte-smcol-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }
 }

 /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .lyte-container {
        max-width: 720px
  }
  .lyte-container,
  .lyte-container-md,
  .lyte-container-sm {
      max-width: 720px
  }
  .lyte-mdcol-1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }
  .lyte-mdcol-2{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }
  .lyte-mdcol-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }
  .lyte-mdcol-4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
  .lyte-mdcol-5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }
  .lyte-mdcol-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }
  .lyte-mdcol-7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }
  .lyte-mdcol-8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }
  .lyte-mdcol-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
  }
  .lyte-mdcol-10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }
  .lyte-mdcol-11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }
  .lyte-mdcol-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }
    .lyte-mdcol-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        max-width: auto;
        width: auto;
    }
}

 /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .lyte-container {
      max-width: 960px
  }
  .lyte-container,
  .lyte-container-lg,
  .lyte-container-md,
  .lyte-container-sm {
      max-width: 960px
  }
  .lyte-lgcol-1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }
.lyte-lgcol-2{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }
.lyte-lgcol-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }
.lyte-lgcol-4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
.lyte-lgcol-5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }
.lyte-lgcol-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }
.lyte-lgcol-7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }
.lyte-lgcol-8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }
.lyte-lgcol-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
  }
.lyte-lgcol-10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }
.lyte-lgcol-11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }
.lyte-lgcol-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }
 }

 /* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .lyte-container,
  .lyte-container-lg,
  .lyte-container-md,
  .lyte-container-sm,
  .lyte-container-xl {
      max-width: 1140px
  }
  .lyte-container {
        max-width: 1140px
    }
  .lyte-xlcol-1{
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%
  }
.lyte-xlcol-2{
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%
  }
.lyte-xlcol-3{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%
  }
.lyte-xlcol-4{
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%
  }
.lyte-xlcol-5{
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%
  }
.lyte-xlcol-6{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%
  }
.lyte-xlcol-7{
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%
  }
.lyte-xlcol-8{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%
  }
.lyte-xlcol-9{
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%
  }
.lyte-xlcol-10{
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%
  }
.lyte-xlcol-11{
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%
  }
.lyte-xlcol-12{
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%
  }
 }

.slyte-icon {
  -webkit-mask: url(slytecss-components-sprite-048c3cd6f1c7eef9b801.svg) no-repeat;
  mask: url(slytecss-components-sprite-048c3cd6f1c7eef9b801.svg) no-repeat;
  background-color: #5B5D5F;
}
.slyte-plus-icon {
  -webkit-mask-position: -10px -9px;
  mask-position: -10px -9px;
  width: 12px;
  height: 12px;
}
/**
 * @selector slyte-plus-icon
 * @name plus
*/
.slyte-minus-icon {
  -webkit-mask-position: -34px -14px;
  mask-position: -34px -14px;
  width: 13px;
  height: 2px;
}
/**
 * @selector slyte-minus-icon
 * @name minus
*/
.slyte-right-arrow-fill-icon {
  -webkit-mask-position: -133px -9px;
  mask-position: -133px -9px;
  width: 8px;
  height: 12px;
}
/**
 * @selector slyte-right-arrow-fill-icon
 * @name right-arrow-fill
*/
.slyte-right-arrow-line-icon {
  -webkit-mask-position: -109px -9px;
  mask-position: -109px -9px;
  width: 8px;
  height: 12px;
}
/**
 * @selector slyte-right-arrow-line-icon
 * @name right-arrow-line
*/
.slyte-left-arrow-line-icon {
  -webkit-mask-position: -109px -9px;
  mask-position: -109px -9px;
  width: 8px;
  height: 12px;
  rotate: 180deg;
}
/**
 * @selector slyte-left-arrow-line-icon
 * @name left-arrow-line
*/
.slyte-right-end-arrow-icon {
  -webkit-mask-position: -226px -685px;
  mask-position: -226px -685px;
  width: 16px;
  height: 12px;
}
/**
 * @selector slyte-right-end-arrow-icon
 * @name right-arrow-end
*/
.slyte-left-end-arrow-icon {
  -webkit-mask-position: -132px -685px;
  mask-position: -132px -685px;
  width: 16px;
  height: 12px;
}
/**
 * @selector slyte-left-end-arrow-icon
 * @name left-arrow-end
*/
.slyte-down-arrow-fill-icon {
  -webkit-mask-position: -155px -12px;
  mask-position: -155px -12px;
  width: 14px;
  height: 7px;
}
/**
 * @selector slyte-down-arrow-fill-icon
 * @name down-arrow-fill
*/
.slyte-down-arrow-fill-sm-icon {
  -webkit-mask-position: -347px -91px;
  mask-position: -347px -91px;
  width: 10px;
  height: 6px;
}
/**
 * @selector slyte-down-arrow-fill-sm-icon
 * @name down-arrow-fill-small
*/
.slyte-down-arrow-line-icon {
  -webkit-mask-position: -58px -11px;
  mask-position: -58px -11px;
  width: 13px;
  height: 8px;
}
/**
 * @selector slyte-down-arrow-line-icon
 * @name down-arrow-line
*/
.slyte-info-unclosed-icon {
  -webkit-mask-position: -39px -34px;
  mask-position: -39px -34px;
  width: 29px;
  height: 28px;
}
/**
 * @selector slyte-info-unclosed-icon
 * @name info-unclosed
*/
.slyte-success-unclosed-icon {
  -webkit-mask-position: -126px -34px;
  mask-position: -126px -34px;
  width: 29px;
  height: 28px;
}
/**
 * @selector slyte-success-unclosed-icon
 * @name success-unclosed
*/
.slyte-error-unclosed-icon {
  -webkit-mask-position: -82px -34px;
  mask-position: -82px -34px;
  width: 29px;
  height: 28px;
}
/**
 * @selector slyte-error-unclosed-icon
 * @name error-unclosed
*/
.slyte-warning-unclosed-icon {
  -webkit-mask-position: -169px -36px;
  mask-position: -169px -36px;
  width: 29px;
  height: 28px;
}
/**
 * @selector slyte-warning-unclosed-icon
 * @name warning-unclosed
*/
.slyte-info-line-icon {
  -webkit-mask-position: -213px -34px;
  mask-position: -213px -34px;
  width: 29px;
  height: 29px;
}
/**
 * @selector slyte-info-line-icon
 * @name info-line
*/
.slyte-success-line-icon {
  -webkit-mask-position: -300px -34px;
  mask-position: -300px -34px;
  width: 28px;
  height: 29px;
}
/**
 * @selector slyte-success-line-icon
 * @name success-line
*/
.slyte-error-line-icon {
  -webkit-mask-position: -256px -34px;
  mask-position: -256px -34px;
  width: 29px;
  height: 29px;
}
/**
 * @selector slyte-error-line-icon
 * @name plus error-line
*/
.slyte-warning-line-icon {
  -webkit-mask-position: -343px -34px;
  mask-position: -343px -34px;
  width: 29px;
  height: 28px;
}
/**
 * @selector slyte-warning-line-icon
 * @name warning-line
*/
.slyte-info-fill-icon {
  -webkit-mask-position: -10px -76px;
  mask-position: -10px -76px;
  width: 36px;
  height: 37px;
}
/**
 * @selector slyte-info-fill-icon
 * @name info-fill
*/
.slyte-success-fill-icon {
  -webkit-mask-position: -107px -76px;
  mask-position: -107px -76px;
  width: 36px;
  height: 37px;
}
/**
 * @selector slyte-success-fill-icon
 * @name success-fill
*/
.slyte-error-fill-icon {
  -webkit-mask-position: -58px -76px;
  mask-position: -58px -76px;
  width: 37px;
  height: 37px;
}
/**
 * @selector slyte-error-fill-icon
 * @name error-fill
*/
.slyte-warning-fill-icon {
  -webkit-mask-position: -156px -79px;
  mask-position: -156px -79px;
  width: 37px;
  height: 31px;
}
/**
 * @selector slyte-warning-fill-icon
 * @name warning-fill
*/
.slyte-close-icon {
  -webkit-mask-position: -10px -42px;
  mask-position: -10px -42px;
  width: 13px;
  height: 12px;
}
/**
 * @selector slyte-close-icon
 * @name close
*/
.slyte-tick-icon {
  -webkit-mask-position: -165px -131px;
  mask-position: -165px -131px;
  width: 16px;
  height: 12px;
}
/**
 * @selector slyte-tick-icon
 * @name tick
*/
.slyte-close-sm-icon {
  -webkit-mask-position: -209px -88px;
  mask-position: -209px -88px;
  width: 13px;
  height: 12px;
}
/**
 * @selector slyte-close-sm-icon
 * @name close-small
*/
.slyte-checkbox-line-checked-icon {
  -webkit-mask-position: -40px -129px;
  mask-position: -40px -129px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-checkbox-line-checked-icon
 * @name checkbox-checked
*/
.slyte-error-line-fill-line-icon {
  -webkit-mask-position: -345px -261px;
  mask-position: -345px -261px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-error-line-fill-line-icon
 * @name error-fill-small
*/
.slyte-error-line-sm-line-icon {
  -webkit-mask-position: -36px -261px;
  mask-position: -36px -261px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-error-line-sm-line-icon
 * @name error-line-small
*/
.slyte-success-line-sm-icon {
  -webkit-mask-position: -316px -260px;
  mask-position: -316px -260px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-success-line-sm-icon
 * @name success-line-small
*/
.slyte-search-sm-icon {
  -webkit-mask-position: -265px -161px;
  mask-position: -265px -161px;
  width: 20px;
  height: 18px;
}
/**
 * @selector slyte-search-sm-icon
 * @name search-sm
*/
.slyte-search-icon {
  -webkit-mask-position: -743px -355px;
  mask-position: -743px -355px;
  width: 22px;
  height: 21px;
}
/**
 * @selector slyte-search-icon
 * @name search
*/
.slyte-copy-icon {
  -webkit-mask-position: -374px -260px;
  mask-position: -374px -260px;
  width: 15px;
  height: 17px;
}
/**
 * @selector slyte-copy-icon
 * @name copy
*/
.slyte-cloud-download-icon {
  -webkit-mask-position: -266px -86px;
  mask-position: -266px -86px;
  width: 18px;
  height: 17px;
}
/**
 * @selector slyte-cloud-download-icon
 * @name cloud-download
*/
.slyte-cloud-upload-icon {
  -webkit-mask-position: -236px -87px;
  mask-position: -236px -87px;
  width: 18px;
  height: 14px;
}
/**
 * @selector slyte-cloud-upload-icon
 * @name cloud-upload
*/
.slyte-download-icon {
  -webkit-mask-position: -296px -86px;
  mask-position: -296px -86px;
  width: 17px;
  height: 17px;
}
/**
 * @selector slyte-download-icon
 * @name download
*/
.slyte-credit-icon {
  -webkit-mask-position: -318px -191px;
  mask-position: -318px -191px;
  width: 15px;
  height: 15px;
}
/**
 * @selector slyte-credit-icon
 * @name credit
*/
.slyte-play-icon {
  -webkit-mask-position: -259px -129px;
  mask-position: -259px -129px;
  width: 13px;
  height: 15px;
}
/**
 * @selector slyte-play-icon
 * @name play
*/
.slyte-previous-icon {
  -webkit-mask-position: -227px -128px;
  mask-position: -227px -128px;
  width: 18px;
  height: 15px;
}
/**
 * @selector slyte-previous-icon
 * @name previous
*/
.slyte-pause-icon {
  -webkit-mask-position: -288px -129px;
  mask-position: -288px -129px;
  width: 10px;
  height: 16px;
}
/**
 * @selector slyte-pause-icon
 * @name pause
*/
.slyte-stop-icon {
  -webkit-mask-position: -315px -129px;
  mask-position: -315px -129px;
  width: 15px;
  height: 15px;
}
/**
 * @selector slyte-stop-icon
 * @name stop
*/
.slyte-next-icon {
  -webkit-mask-position: -347px -128px;
  mask-position: -347px -128px;
  width: 15px;
  height: 16px;
}
/**
 * @selector slyte-next-icon
 * @name next
*/
.slyte-bold-icon {
  -webkit-mask-position: -9px -161px;
  mask-position: -9px -161px;
  width: 13px;
  height: 16px;
}
/**
 * @selector slyte-bold-icon
 * @name bold
*/
.slyte-italic-icon {
  -webkit-mask-position: -39px -161px;
  mask-position: -39px -161px;
  width: 12px;
  height: 16px;
}
/**
 * @selector slyte-italic-icon
 * @name italic
*/
.slyte-underline-icon {
  -webkit-mask-position: -66px -161px;
  mask-position: -66px -161px;
  width: 17px;
  height: 16px;
}
/**
 * @selector slyte-underline-icon
 * @name underline
*/
.slyte-textcolor-icon {
  -webkit-mask-position: -96px -161px;
  mask-position: -96px -161px;
  width: 18px;
  height: 16px;
}
/**
 * @selector slyte-textcolor-icon
 * @name text-color
*/
.slyte-align-left-icon {
  -webkit-mask-position: -127px -161px;
  mask-position: -127px -161px;
  width: 18px;
  height: 16px;
}
/**
 * @selector slyte-align-left-icon
 * @name align-left
*/
.slyte-align-right-icon {
  -webkit-mask-position: -196px -161px;
  mask-position: -196px -161px;
  width: 18px;
  height: 16px;
}
/**
 * @selector slyte-align-right-icon
 * @name align-right
*/
.slyte-align-center-icon {
  -webkit-mask-position: -162px -161px;
  mask-position: -162px -161px;
  width: 18px;
  height: 16px;
}
/**
 * @selector slyte-align-center-icon
 * @name align-center
*/
.slyte-align-justify-icon {
  -webkit-mask-position: -230px -161px;
  mask-position: -230px -161px;
  width: 18px;
  height: 16px;
}
/**
 * @selector slyte-align-justify-icon
 * @name align-justify
*/
.slyte-important-icon {
  -webkit-mask-position: -207px -261px;
  mask-position: -207px -261px;
  width: 11px;
  height: 16px;
}
/**
 * @selector slyte-important-icon
 * @name important
*/
.slyte-discussion-icon {
  -webkit-mask-position: -233px -261px;
  mask-position: -233px -261px;
  width: 16px;
  height: 15px;
}
/**
 * @selector slyte-discussion-icon
 * @name discussion
*/
.slyte-announcement-icon {
  -webkit-mask-position: -261px -262px;
  mask-position: -261px -262px;
  width: 16px;
  height: 14px;
}
/**
 * @selector slyte-announcement-icon
 * @name announcement
*/
.slyte-profile-icon {
  -webkit-mask-position: -176px -260px;
  mask-position: -176px -260px;
  width: 17px;
  height: 18px;
}
/**
 * @selector slyte-profile-icon
 * @name profile
*/
.slyte-dot-icon {
  -webkit-mask-position: -259px -382px;
  mask-position: -259px -382px;
  width: 5px;
  height: 4px;
}
/**
 * @selector slyte-dot-icon
 * @name dot
*/
.slyte-left-arrow-icon {
  -webkit-mask-position: -72px -307px;
  mask-position: -72px -307px;
  width: 14px;
  height: 13px;
}
/**
 * @selector slyte-left-arrow-icon
 * @name left-arrow
*/
.slyte-right-arrow-icon {
  -webkit-mask-position: -118px -307px;
  mask-position: -118px -307px;
  width: 14px;
  height: 13px;
}
/**
 * @selector slyte-right-arrow-icon
 * @name right-arrow
*/
.slyte-edit-icon {
  -webkit-mask-position: -18px -305px;
  mask-position: -18px -305px;
  width: 17px;
  height: 17px;
}
/**
 * @selector slyte-edit-icon
 * @name edit
*/
.slyte-plus-fill-icon {
  -webkit-mask-position: -11px -501px;
  mask-position: -11px -501px;
  width: 21px;
  height: 20px;
}
/**
 * @selector slyte-plus-fill-icon
 * @name plus-fill
*/
.slyte-minus-fill-icon {
  -webkit-mask-position: -47px -501px;
  mask-position: -47px -501px;
  width: 21px;
  height: 20px;
}
/**
 * @selector slyte-minus-fill-icon
 * @name minus-fill
*/
.slyte-backspace-icon {
  -webkit-mask-position: -74px -377px;
  mask-position: -74px -377px;
  width: 17px;
  height: 14px;
}
/**
 * @selector slyte-backspace-icon
 * @name backspace
*/
.slyte-user-line-icon {
  -webkit-mask-position: -290px -260px;
  mask-position: -290px -260px;
  width: 14px;
  height: 18px;
}
/**
 * @selector slyte-user-line-icon
 * @name user-line
*/
.slyte-user-fill-icon {
  -webkit-mask-position: -176px -260px;
  mask-position: -176px -260px;
  width: 17px;
  height: 18px;
}
/**
 * @selector slyte-user-fill-icon
 * @name user-fill
*/
.slyte-globe-fill-icon {
  -webkit-mask-position: -460px -397px;
  mask-position: -460px -397px;
  width: 17px;
  height: 17px;
}
/**
 * @selector slyte-globe-fill-icon
 * @name globe-fill
*/
.slyte-globe-line-icon {
  -webkit-mask-position: -460px -430px;
  mask-position: -460px -430px;
  width: 17px;
  height: 17px;
}
/**
 * @selector slyte-globe-line-icon
 * @name globe-line
*/
.slyte-settings-icon {
  -webkit-mask-position: -826px -355px;
  mask-position: -826px -355px;
  width: 20px;
  height: 22px;
}
/**
 * @selector slyte-settings-icon
 * @name settings
*/
.slyte-notification-icon {
  -webkit-mask-position: -866px -355px;
  mask-position: -866px -355px;
  width: 20px;
  height: 22px;
}
/**
 * @selector slyte-notification-icon
 * @name notification
*/
.slyte-file-fill-icon {
  -webkit-mask-position: -496px -429px;
  mask-position: -496px -429px;
  width: 14px;
  height: 18px;
}
/**
 * @selector slyte-file-fill-icon
 * @name file-fill
*/
.slyte-file-line-icon {
  -webkit-mask-position: -496px -397px;
  mask-position: -496px -397px;
  width: 14px;
  height: 17px;
}
/**
 * @selector slyte-file-line-icon
 * @name file-line
*/
.slyte-card-list-fill-icon {
  -webkit-mask-position: -568px -430px;
  mask-position: -568px -430px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-card-list-fill-icon
 * @name card-list-fill
*/
.slyte-card-list-line-icon {
  -webkit-mask-position: -567px -397px;
  mask-position: -567px -397px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-card-list-line-icon
 * @name card-list-line
*/
.slyte-connect-fill-icon {
  -webkit-mask-position: -607px -429px;
  mask-position: -607px -429px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-connect-fill-icon
 * @name connect-fill
*/
.slyte-connect-line-icon {
  -webkit-mask-position: -608px -397px;
  mask-position: -608px -397px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-connect-line-icon
 * @name connect-line
*/
.slyte-laptop-fill-icon {
  -webkit-mask-position: -646px -431px;
  mask-position: -646px -431px;
  width: 16px;
  height: 14px;
}
/**
 * @selector slyte-laptop-fill-icon
 * @name laptop-fill
*/
.slyte-laptop-line-icon {
  -webkit-mask-position: -646px -399px;
  mask-position: -646px -399px;
  width: 16px;
  height: 14px;
}
/**
 * @selector slyte-laptop-line-icon
 * @name laptop-line
*/
.slyte-calendar-check-fill-icon {
  -webkit-mask-position: -685px -430px;
  mask-position: -685px -430px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-calendar-check-fill-icon
 * @name calendar-check-fill
*/
.slyte-calendar-check-line-icon {
  -webkit-mask-position: -685px -398px;
  mask-position: -685px -398px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-calendar-check-line-icon
 * @name calendar-check-line
*/
.slyte-filter-fill-icon {
  -webkit-mask-position: -752px -431px;
  mask-position: -752px -431px;
  width: 17px;
  height: 15px;
}
/**
 * @selector slyte-filter-fill-icon
 * @name filter-fill
*/
.slyte-filter-line-icon {
  -webkit-mask-position: -753px -398px;
  mask-position: -753px -398px;
  width: 16px;
  height: 15px;
}
/**
 * @selector slyte-filter-line-icon
 * @name filter-line
*/
.slyte-target-line-icon {
  -webkit-mask-position: -532px -397px;
  mask-position: -532px -397px;
  width: 18px;
  height: 18px;
}
/**
 * @selector slyte-target-line-icon
 * @name target-line
*/
.slyte-hacker-line-icon {
  -webkit-mask-position: -786px -355px;
  mask-position: -786px -355px;
  width: 23px;
  height: 22px;
}
/**
 * @selector slyte-hacker-line-icon
 * @name hacker-line
*/
.slyte-at-icon {
  -webkit-mask-position: -533px -430px;
  mask-position: -533px -430px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-at-icon
 * @name at
*/
.slyte-processor-fill-icon {
  -webkit-mask-position: -719px -430px;
  mask-position: -719px -430px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-processor-fill-icon
 * @name processor-fill
*/
.slyte-processor-line-icon {
  -webkit-mask-position: -719px -398px;
  mask-position: -719px -398px;
  width: 16px;
  height: 16px;
}
/**
 * @selector slyte-processor-line-icon
 * @name processor-line
*/
.slyte-book-fill-icon {
  -webkit-mask-position: -794px -430px;
  mask-position: -794px -430px;
  width: 14px;
  height: 17px;
}
/**
 * @selector slyte-book-fill-icon
 * @name book-fill
*/
.slyte-book-line-icon {
  -webkit-mask-position: -794px -397px;
  mask-position: -794px -397px;
  width: 14px;
  height: 17px;
}
/**
 * @selector slyte-book-line-icon
 * @name book-line
*/

.slyte-badge {
  display: inline-flex;
  padding: 3px 8px;
  font-size: 13px;
  font-family: var(--puviRegular);
  border-radius: 5px;
}
/**
 * @selector slyte-badge
 * @description Create badge component
*/
.slyte-btn.slyte-btn-with-inline-badge .slyte-badge {
  margin-left: 25px;
  vertical-align: middle;
}
/**
 * @selector slyte-badge-btn-with-inline-badge
 * @description Adds badge to inline of the button 
*/
.slyte-badge.slyte-badge-corner {
  position: absolute;
  border: 1.5px solid #fff;
}
/**
 * @selector slyte-badge-corner
 * @description Adds a badge to the corner of the button
*/
.slyte-badge:empty {
  padding: 6px;
}
.slyte-badge-primary {
  color: #fff;
  border: 1px solid #0984E3;
  background-color: #0984E3;
}
/**
 * @selector slyte-badge-primary
 * @description Style for blue color badge
*/
.slyte-badge-secondary {
  border: 1px solid transparent;
  color: #292C2E;
  background-color: #D7DBDE;
}
/**
 * @selector slyte-badge-secondary
 * @description Style for dark gray color badge
*/
.slyte-badge-outline {
  border: 1px solid #0984E3;
  color: #0984E3;
}
/**
 * @selector slyte-badge-outline
 * @description Style for outlined badge
*/
.slyte-badge-success {
  color: #fff;
  background-color: #21BF64;
  border: 1px solid #21BF64;
}
/**
 * @selector slyte-badge-success
 * @description Style for green color badge
*/
.slyte-badge-error {
  color: #fff;
  background-color: #E74C3C;
  border: 1px solid transparent;
}
/**
 * @selector slyte-badge-error
 * @description Style for red color badge
*/
.slyte-badge-light {
  color: #292C2E;
  border: 1px solid #C8CCCF;
  background-color: #fff;
}
/**
 * @selector slyte-badge-light
 * @description Style for white color badge
*/
.slyte-badge-warning {
  color: #292C2E;
  background-color: #F2A62E;
  border: 1px solid transparent;
}
/**
 * @selector slyte-badge-warning
 * @description Style for orange color badge
*/
.slyte-badge-dark {
  color: #fff;
  background-color: #292C2E;
  border: 1px solid transparent;
}
/**
 * @selector slyte-badge-dark
 * @description Style for black color badge
*/
.slyte-badge-wrapper .slyte-badge {
  margin: 20px;
}
.slyte-btn.slyte-btn-with-inline-badge {
  padding: 7px 6px 7px 20px;
}
.slyte-badge-with-icon {
  display: inline-flex;
  padding: 3px 10px;
}
/**
 * @selector slyte-badge-with-icon
 * @description Adds an icon to badge
*/
.slyte-badge-with-icon .slyte-badge-text {
  padding-right: 10px;
}
/**
 * @selector slyte-badge-text
 * @description Text for the badge
*/
.slyte-badge-with-icon :last-child {
  padding-right: 0;
}
.slyte-badge .slyte-icon {
  background-color: #292C2E;
}
.slyte-badge-primary .slyte-icon {
  background-color: #fff;
}
.slyte-badge-outline .slyte-icon {
  background-color: #0984E3;
}
.slyte-badge.slyte-badge-corner-responsive {
  position: absolute;
  border: 1.5px solid #fff;
  top: 0;
  right: 0;
  transform: translateX(50%) translateY(-50%);
}
/**
 * @selector slyte-badge-corner-responsive
 * @description Responsive corner styled badge
*/
.slyte-badge-left-icon {
  margin-right: 10px;
}
.slyte-badge.slyte-badge-topRight {
  top: -12px;
  right: -13px;
}
.slyte-badge.slyte-badge-topLeft {
  top: -12px;
  left: -13px;
}
.slyte-badge.slyte-badge-bottomRight {
  bottom: -12px;
  right: -13px;
}
.slyte-badge.slyte-badge-bottomLeft {
  bottom: -12px;
  left: -13px;
}
.slyte-badge.slyte-badge-topRight:empty {
  top: -7px;
  right: -7px;
}
.slyte-badge.slyte-badge-topLeft:empty {
  top: -7px;
  left: -7px;
}
.slyte-badge.slyte-badge-bottomRight:empty {
  bottom: -7px;
  right: -7px;
}
.slyte-badge.slyte-badge-bottomLeft:empty {
  bottom: -7px;
  left: -7px;
}

/* CSS for Plugins - draggable, droppable and sortable */

/* Sortable CSS Start */
.lyteSortableColumns{
    content: '';
    clear: both;
    display: block;
}
.lyteSortableAvailable {
    width: 280px;
    border: 1px solid #e7e7e7;
    box-sizing: border-box;
    margin-right: 20px;
    float: left;
}
.lyteSortableHeading {
    display: inline-block;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 10px;
}
.lyteSortableAvailableUL{
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}
.lyteSortableAvailableUL{
    margin: 0;
    padding: 7px 7px;
}
.lyteSortableAvailableUL li{
    text-align: center;
    position: relative;
}
.lyteSortableAvailableUL li {
    list-style-type: none;
    padding: 7px 20px;
    border: 1px dashed #e7e7e7;
    /*cursor: move;*/
}
.lyteSortableAvailableUL li:hover {
    background-color: #f7f7f7;
}
.lyteSortableAvailableUL li:hover{
    visibility: visible;
}

.lyteSortablePlaceholder{
    background-color: #F5F6CE;
    /*border: 1px dashed #eee;*/
}

.lyteSortableElem{
    background-color: #f7f7f7;
}

.anchor{
    border: 2px solid #202423;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: block;
}
.lyteSortableDisabledPlaceholder{
    background-color: #ff9191;
}
/* Sortable CSS END */

/* Draggable CSS Start */
.draggable-handle-element{
    cursor: move;
}
.draggable-div-container{
    width: 700px;
    height: 300px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    background-color: rgba(232, 232, 232, 0.29);
}
.drag-element{
    width: 130px;
    border: 2px solid #9f9999;
    height: 114px;
    background-color: white;
}
.drag-element .padding {
    margin-top: 45px;
    text-align: center;
}
#handle{
    border: 1px dashed #a7a0a0;
    text-align: center;
    width: 58px;
    height: 53px;
    margin: auto;
    margin-top: 28px;
    z-index: auto;
}

/* Draggable CSS End */

/* Droppable CSS Start */
.droppable_element{
    border: 1px solid black;
    float : right;
    width: 180px;
    height: 200px;
    margin-top: 50px;
    background-color: antiquewhite;
}
.dropHere{
    border: 1px solid black;
    width: 160px;
    height: 160px;
    background-color: white;
    text-align: center;
    display: inline-block;
    float: right;
    margin-right: 170px;
    margin-top: 70px;
}
.dropHere .padding{
    margin-top: 70px;
}
.activeDD{
    background-color: #42a2ebbd;
}

.hoverDD{
    background-color: #19bc7d;
}
.dropped{
    background-color: yellow;
}
/* Droppable CSS End */
@charset "UTF-8";
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT

Copyright (c) 2014 Daniel Eden
*/

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

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

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

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
  }

  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-transform-origin: center bottom;
      -ms-transform-origin: center bottom;
          transform-origin: center bottom;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
          animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
            transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
            transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.rubberBand {
  -webkit-animation-name: rubberBand;
          animation-name: rubberBand;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }
}

.shake {
  -webkit-animation-name: shake;
          animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
            transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
            transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
            transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
            transform: rotate3d(0, 0, 1, -5deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
      -ms-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation-name: swing;
          animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
            transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.tada {
  -webkit-animation-name: tada;
          animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
            transform: none;
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
            transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
            transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
            transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
            transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
            transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.wobble {
  -webkit-animation-name: wobble;
          animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
            transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
          animation-name: bounceIn;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
          animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
          animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInRight {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
  }

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
          animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }

  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
          animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
            transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
          animation-name: bounceOut;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
          animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0);
            transform: translate3d(20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
          animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0);
            transform: translate3d(-20px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
          animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0);
            transform: translate3d(0, -10px, 0);
  }

  40%, 45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0);
            transform: translate3d(0, 20px, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
          animation-name: bounceOutUp;
}

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

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

.fadeIn {
  -webkit-animation-name: fadeIn;
          animation-name: fadeIn;
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
          animation-name: fadeInDownBig;
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
          animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
          animation-name: fadeInLeftBig;
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
          animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
          animation-name: fadeInRightBig;
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
          animation-name: fadeInUpBig;
}

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

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

.fadeOut {
  -webkit-animation-name: fadeOut;
          animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
            transform: translate3d(0, 2000px, 0);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
          animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
          animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
            transform: translate3d(-2000px, 0, 0);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
          animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
          animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
            transform: translate3d(2000px, 0, 0);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
          animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
            transform: translate3d(0, -2000px, 0);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
          animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
            transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
            transform: perspective(400px) scale3d(.95, .95, .95);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  -webkit-animation-name: flip;
          animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
          animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
          animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
          animation-name: flipOutX;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
            transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
            transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
          animation-name: flipOutY;
  -webkit-animation-duration: .75s;
          animation-duration: .75s;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
            transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
            transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
            transform: skewX(-5deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
          animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
            transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
          animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
            transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
          animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
          animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
          animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
          animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
            transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
          animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
            transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
          animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
          animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
          animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: left bottom;
            transform-origin: left bottom;
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
            transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
          animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    opacity: 1;
  }

  100% {
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
            transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
          animation-name: rotateOutUpRight;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  20%, 60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
            transform: rotate3d(0, 0, 1, 80deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
  }

  40%, 80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
            transform: rotate3d(0, 0, 1, 60deg);
    -webkit-transform-origin: top left;
            transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 700px, 0);
            transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
          animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
          animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
            transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
          animation-name: rollOut;
}

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  -webkit-animation-name: zoomIn;
          animation-name: zoomIn;
}

@-webkit-keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInDown {
  -webkit-animation-name: zoomInDown;
          animation-name: zoomInDown;
}

@-webkit-keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInLeft {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInLeft {
  -webkit-animation-name: zoomInLeft;
          animation-name: zoomInLeft;
}

@-webkit-keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
            transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInRight {
  -webkit-animation-name: zoomInRight;
          animation-name: zoomInRight;
}

@-webkit-keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomInUp {
  -webkit-animation-name: zoomInUp;
          animation-name: zoomInUp;
}

@-webkit-keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  100% {
    opacity: 0;
  }
}

.zoomOut {
  -webkit-animation-name: zoomOut;
          animation-name: zoomOut;
}

@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutDown {
  -webkit-animation-name: zoomOutDown;
          animation-name: zoomOutDown;
}

@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
            transform: scale(.1) translate3d(-2000px, 0, 0);
    -webkit-transform-origin: left center;
            transform-origin: left center;
  }
}

.zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
          animation-name: zoomOutLeft;
}

@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
            transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
            transform: scale(.1) translate3d(2000px, 0, 0);
    -webkit-transform-origin: right center;
            transform-origin: right center;
  }
}

.zoomOutRight {
  -webkit-animation-name: zoomOutRight;
          animation-name: zoomOutRight;
}

@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
            transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
            animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
            transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    -webkit-transform-origin: center bottom;
            transform-origin: center bottom;
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
            animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
}

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
          animation-name: zoomOutUp;
}

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

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    -webkit-transform: translateY(-200%) translateX(-2%) rotate3d(0, 0, 1, 10deg);
            transform: translateY(-200%) translateX(-2%) rotate3d(0, 0, 1, 10deg);
           opacity: 0;
  }
  40%{
    transform:translateY(-40%) translateX(6%) rotate3d(0, 0, 1, -10deg);
    visibility: visible;

  } 
  70%{
    transform:translateY(-20%) translateX(-6%) rotate3d(0, 0, 1, 20deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0) translateX(0%) rotate3d(0, 0, 1, 0deg);
            transform: translateY(0) translateX(0%) rotate3d(0, 0, 1, 0deg);
            visibility: visible;
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
          animation-name: slideInDown;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

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

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

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

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
          animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
          animation-name: slideInRight;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes slideInUp {
  0% {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    visibility: visible;
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.slideInUp {
  -webkit-animation-name: slideInUp;
          animation-name: slideInUp;
}

@-webkit-keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

@keyframes slideOutDown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
}

.slideOutDown {
  -webkit-animation-name: slideOutDown;
          animation-name: slideOutDown;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
          animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  100% {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
          animation-name: slideOutUp;
}

:root {
	--main-theme-color: #669e99;
	--new-arrival-bg: #669e99;
	--doc-bg-main: #333;
}
:root {
	--slytedoc-primary-font: 'PuviRegular', sans-serif;
	--slytedoc-secondary-font: 'PuviBold', sans-serif;
	--slytedoc-medium-font: 'PuviMedium', sans-serif;
	--slytedoc-semibold-font: 'PuviSemiBold', sans-serif;
	/*	Document heading related variables Begins	*/
	/*	Used in the main heading of the page	*/

	--slytedoc-page-heading-font-size: 45px;
	--slytedoc-page-heading-font-weight: 400;
	--slytedoc-page-heading-text-color: #000;
	--slytedoc-page-heading-margin-bottom: 30px;

	/*	Document heading related variables Ends	*/

	/*	Document page content variables Begins	*/
	/*	Used for normal content of the page	*/

	--slytedoc-page-content-font-size: 17px;
	--slytedoc-page-content-text-color: #000;

	/*	Document page content variables Ends	*/

	/*	Document content list variables Begins	*/
	/*	Used in places where list of items is needed.	*/
	/*	Example of places used: Lyte --> Components --> Lyte Component.*/
	/*	Example of places used: UI Components --> Components --> Accordion.*/

	--slytedoc-content-list-border-color: #000;
	--slytedoc-content-list-padding: 10px 20px 10px 35px;
	--slytedoc-content-list-margin-bottom: 20px;
	--slytedoc-content-list-item-font-size: 16px;
	--slytedoc-content-list-item-padding: 5px 0;

	/*	Document content list variables Ends	*/

	/*	Document Right panel variables Begins	*/
	/*	Used in Right panel of documents.	*/

	--slytedoc-rightpanel-heading-font-size: 17px;
	--slytedoc-rightpanel-heading-font-weight: 600;
	--slytedoc-rightpanel-heading-padding: 0px 21px;
	--slytedoc-rightpanel-margin-top: 33px;
	--slytedoc-rightpanel-content-text-color: #666;
	--slytedoc-rightpanel-content-font-size: 14px;
	--slytedoc-rightpanel-active-content-text-color: #000;

	--slytedoc-rightpanel-content-circle-width: 5px;
	--slytedoc-rightpanel-content-circle-height: 5px;
	--slytedoc-rightpanel-content-circle-bg: #fff;
	--slytedoc-rightpanel-content-circle-border: 1px solid #ccc;
	--slytedoc-rightpanel-heading-color: #333;
	--slytedoc-rightpanel-content-hover-circle-bg: #000;
	--slytedoc-rightpanel-content-hover-circle-opacity: 0.7;
	--slytedoc-rightpanel-active-content-circle-bg: #000;
	--slytedoc-rightpanel-active-content-circle-border: 1px solid #669a99;

	/*	Document Right panel variables Ends	*/

	/*	Document subheading variables Begins	*/
	/*	Used in subheading of documents.	*/
	/*	Example of places used: UI Components --> Components --> Accordion --> API.*/

	--slytedoc-sub-heading-margin: 80px 0 15px;
	--slytedoc-sub-heading-color: #000;
	--slytedoc-sub-heading-font-weight: 400;
	--slytedoc-sub-heading-font-size: 30px;

	/*	Document subheading variables Ends	*/

	/*	Document content subheading variables Begins	*/
	/*	Used in subheading of documents. This is another variant of subheading style	*/
	/*	Example of places used: UI Components --> Components --> Accordion --> API.*/

	--slytedoc-content-subheading-font-weight: normal;
	--slytedoc-content-subheading-padding: 5px 0px;
	--slytedoc-content-subheading-margin: 30px 0 0;
	--slytedoc-content-subheading-border-color: #222;
	--slytedoc-content-subheading-color: #000;
	--slytedoc-content-subheading-font-size: 22px;

	/*	Document content subheading variables Ends	*/

	/*	Document content list variables Begins	*/
	/*	Used for showing list of items in Document	*/
	/*	Example of places used: UI Components --> Components --> Accordion --> Tags of the accordion.*/

	--slytedoc-contentlist-custom-border: 0;
	--slytedoc-contentlist-custom-margin-bottom: 20px;
	--slytedoc-contentlist-custom-border-radius: 5px;
	--slytedoc-contentlist-custom-bg: #f5f5f5;
	--slytedoc-contentlist-custom-padding: 10px;

	/*	Document content list variables Ends	*/

	/*	Document property description section variables Begins	*/
	/*	Example of places used: UI Components --> Components --> Accordion --> API --> Property / Methods / Utils description.*/

	--slytedoc-fundes-jsonparse-padding: 10px 20px;
	--slytedoc-fundes-jsonparse-font-size: 14px;
	--slytedoc-fundes-jsonparse-border-radius: 6px;
	--slytedoc-fundes-jsonparse-margin: 20px 0;
	--slytedoc-fundes-jsonparse-border: 1px solid #ccc;
	--slytedoc-fundes-objkey-color: #444;
	--slytedoc-fundes-objkey-margin-right: 10px;
	--slytedoc-fundes-objkey-font-size: 15px;
	--slytedoc-fundes-td-padding: 8px 0;
	--slytedoc-fundes-objval-color: #111;
	--slytedoc-fundes-objval-margin-left: 10px;
	--slytedoc-fundes-objval-font-size: 15px;
	--slyte-doc-nav-background: #fafbfd;
	--slytedoc-code-border-radius: 20px 20px 0 0;
	--slytedoc-bottom-code-border-radius: 0 0 20px 20px;
	--slyte-doc-nav-borderRadius: 10px;

	/*	Document property description section variables Ends	*/

}

page-header {

	/*	Document - page header tab - variables Begins */

	--slytedoc-pageheader-tab-text-color: #777;
	--slytedoc-pageheader-tab-padding: 9px 20px;
	--slytedoc-pageheader-tab-line-height: 20px;
	--slytedoc-pageheader-tab-font-size: 16px;
	--slytedoc-pageheader-tab-border-color: #ddd;

	--slytedoc-pageheader-tab-hover-text-color: #222;
	--slytedoc-pageheader-tab-hover-border-color: #555;

	--slytedoc-pageheader-tab-active-bg: #fff;
	--slytedoc-pageheader-tab-active-text-color: #000;
	--slytedoc-pageheader-tab-active-border-color: #111;

	/*	Document - page header tab - variables Ends */

}

*,
*:after,
*:before {
	padding: 0;
	margin: 0;
}

@font-face {
	font-family: "LatoBold";
	font-style: normal;
	font-weight: 400;
	src: url(https://webfonts.zohowebstatic.com/latobold/font.woff2) format('woff2');
}

@font-face {
	font-family: "LatoRegular";
	font-style: normal;
	font-weight: 400;
	src: url(https://webfonts.zohowebstatic.com/latoregular/font.woff2) format('woff2');
}

@font-face {
	font-family: "LatoLight";
	font-style: normal;
	font-weight: 400;
	src: url(https://webfonts.zohowebstatic.com/latolight/font.woff2) format('woff2');
}

@font-face {
	font-family: "PuviBold";
	font-style: normal;
	font-weight: 400;
	src: url(ZohoPuviBold-d1ffa4e23253b4dabf40.woff2) format('woff2');
}

@font-face {
	font-family: "PuviRegular";
	font-style: normal;
	font-weight: 400;
	src: url(ZohoPuviRegular-e11077de49b7c3904c5c.woff2) format('woff2');
}

@font-face {
	font-family: "PuviLight";
	font-style: normal;
	font-weight: 400;
	src: url(ZohoPuviLight-28847641a31da5bf5668.woff2) format('woff2');
}



.dom_example_highlight {
	color: black;
	font-weight: bold;
}


html {
	font-family: PuviRegular, sans-serif;
	font-size: 14px;
	font-size: calc(.775rem - -.25 *(100vw - 20rem) / 100);
}

#outlet {
	height: 100%;
	overflow-x: hidden;
}

.outline0 {
	outline: 0;
}

.flex {
	display: flex;
}

.flexColumn {
	flex-direction: column;
}

.dBlock {
	display: block;
}

.dN {
	display: none;
}

.cP {
	cursor: pointer;
}

.pLR50 {
	padding-left: 50px;
	padding-right: 50px;
}

.pT15 {
	padding-top: 15px;
}

.pT30 {
	padding-top: 30px;
}

.mT3 {
	margin-top: 3px;
}

.mT5 {
	margin-top: 5px;
}

.mT10 {
	margin-top: 10px;
}

.mT20 {
	margin-top: 20px;
}

.mT30 {
	margin-top: 30px;
}

.mB5 {
	margin-bottom: 5px;
}

.mB10 {
	margin-bottom: 10px;
}

.mB15 {
	margin-bottom: 15px;
}

.mB20 {
	margin-bottom: 20px;
}

.mB30 {
	margin-bottom: 30px;
}

.mB60 {
	margin-bottom: 60px;
}

.mR10 {
	margin-right: 10px;
}

.mR20 {
	margin-right: 20px;
}

.mR30 {
	margin-right: 30px;
}

.mL10 {
	margin-left: 10px;
}

.p10 {
	padding: 10px;
}

.pL20 {
	padding-left: 20px;
}

.pL30 {
	padding-left: 30px;
}

.pB5 {
	padding-bottom: 5px;
}

.pB7 {
	padding-bottom: 7px;
}

.pB10 {
	padding-bottom: 10px;
}

.pB20 {
	padding-bottom: 20px;
}

.p15 {
	padding: 15px;
}

.pR30 {
	padding-right: 30px;
}

.pT7 {
	padding-top: 7px;
}

.whiteBg {
	background: #fff;
}

.vat {
	vertical-align: top;
}

.oAuto {
	overflow: auto;
}

.pA {
	position: absolute;
}

.docSprite {
	background: url(lyteDocFontIcons-41533ee0b606630bd1cf.svg);
}

.docSpriteSvg {
	background-image: url(lyteDocFontIcons-41533ee0b606630bd1cf.svg);
}

.nightMode .docSpriteSvg {
	background-image: url(lyteDocNightFontIcons-db403c9d2424cf5eacc3.svg);
}

a {
	text-decoration: none;
	color: #000;
}

.mAuto {
	margin: auto;
}

.mLAuto {
	margin-left: auto;
}

.pR {
	position: relative;
}

.dIB {
	display: inline-block;
}

.dN {
	display: none;
}

.vam {
	vertical-align: middle;
}

.alignCenter {
	text-align: center;
}

.alignRight {
	text-align: right;
}

.alignLeft {
	text-align: left;
}

.w100per {
	width: 100%;
}

.w80px {
	width: 80px;
}

.w300 {
	width: 300px;
}

.f18 {
	font-size: 18px;
}

p {
	font-size: 14px;
	color: #444;
	line-height: 1.55;
}

#mobile-indicator {
	display: none;
}

.anatomyImg {
	width: 100%;
	display: inherit;
	margin: auto;
	margin-bottom: 20px;
}

.boxShadow {
	border: 1px solid #dcd2d2;
}

.downloadIcon {
	display: inline-block;
	background: url(downloadCloud-2f74db9dbbcedee7302d.png);
	width: 16px;
	height: 16px;
	background-size: 100%;
	opacity: 0.7;
	cursor: pointer;
}

@keyframes slideInFromTop {
	0% {
		transform: translateY(-100%);
	}

	100% {
		transform: translateY(0);
	}
}

@keyframes slideInFromLeft {
	0% {
		transform: translateX(-100%) translateY(-60px);
	}

	100% {
		transform: translateX(0) translateY(0);
		visibility: visible;
	}
}

/* .nav{
	list-style: none;
}
.nav li{
    margin-left: 30px;
    text-decoration: none;
  	z-index: 1;
  	display: inline-block;
  	position: relative;
  	font-size: 18px;
}
.headerWrap .nav a{
	font-family: 'Lato', Calibri, Arial, sans-serif;
    font-weight: 800;
    margin-left: 30px;
    text-decoration: none;
  	z-index: 1;
  	display: inline-block;
  	position: relative;
  	color:#195d2b;
  	font-weight: 400;
}
.headerWrap .nav a:before{
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background: #195d2b;
  visibility: hidden;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
  top: 110%;
}
.headerWrap a:hover:before,
.headerWrap a:focus:before {
  visibility: visible;
  transform: scaleX(1);
}
.headerWrap li.active a:before,.headerWrap li.active a:focus{
	 visibility: hidden;
}
.logoText{
    font-size: 35px;
    top: 8px;
    left: 165px;
    position: absolute;
    letter-spacing: 1.5px;
    color: #195d2b;
}

.main{
	margin-top: 60px;
	 -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.banner{
	text-align: center;
	margin-top: 180px;
	padding-bottom: 80px;
}
.lyteImage{
	background: url('../images/lyte1.png') no-repeat center;
	height: 120px;
	position: relative;
	-webkit-animation-delay: 0.4s;
	    animation-delay: 0.4s;
	visibility: hidden;
}
.banner h1{
	letter-spacing: 0.5px;
	font-size: 40px;
	font-weight: 400;
	padding-top: 20px;
}
.secondaryText{
	font-size: 20px;
	padding-top: 20px;
}
.panels{
	height: 400px;
	//margin-top: 120px;
	padding-top:30px;
	padding-left:100px;
	position: relative;
	z-index: 1000;
	box-sizing: border-box;
	overflow: hidden;
}
.article{
	width:293px;
	float:left;
	text-align:center;
}
footer {
	height: 100px;
	position: relative;
	z-index: 1000;
	box-sizing: border-box;
	overflow: hidden;
}
footer h3{
	padding-top: 120px;
	text-align: center;
}
.docLayout {
	display: flex;
	flex-direction: row;
	margin-top: 70px;
}*/



.black-box {
	padding: 10px 30px;
	margin: 20px 0 30px 0;
	box-sizing: border-box;
	background: #e1e2f3;
	color: #000;
	/* line-height: 1.5em; */
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 14px;
}

.build-box {
	padding: 10px 30px;
	margin: 20px 0 30px 0;
	box-sizing: border-box;
	background: rgba(27, 85, 105, 0.08);
	color: black;
	/* line-height: 1.5em; */
	font-family: "Lucida Console", Monaco, monospace;
	font-size: 14px;
}

.type {
	color: #43853d;
	text-decoration: none;
	border-radius: 2px;
	padding: 1px 3px;
}

.text {
	text-rendering: optimizeLegibility;
	margin: 0 0 1.125rem 0;
	line-height: 1.55;
}

build-comp ul {
	margin: 1rem 0 0 2rem;
}

build-comp li {
	margin: 0 0 .8rem .5rem;
}

.customContainer {
	background: #fbf8f4 !important;
}

.customHandler {
	background: #e2d751 !important;
}

.menuContentBdr {
	height: 30px;
	padding-bottom: 7px;
	box-sizing: unset;
	box-shadow: 0 5px 6px -7px black;
	margin-left: 135px;
}

.sideList lyte-accordion-header {
	background: #f9f9f9;
	color: #333;
	padding: 15px;
	font-size: 14px;
	font-weight: 400;
}



.scrollIdTopSpacing {
	padding: 10px;
}



.docmainContentWrap.lyteDom {
	width: calc(100% - 35px);
}

.lyteDom.rightMenu {
	display: none;
}

.rightMenu .propTree {
	padding: 20px;
}

.rightMenuHead {
	display: block;
	padding: 40px 20px 20px;
	font-size: 17px;
	font-weight: 400;
}

.lyteAccordionActiveBold {
	border-left: solid 3px #bbb;
	padding: 8px 16px;
	font-size: 15px;
	font-weight: 400;
}

.sideMenu lyte-accordion-item:hover,
.sideMenu lyte-accordion-item {
	margin: 0px 0;
	border-bottom: 0;
}

.sideMenu lyte-accordion-header {
	background: #fff;
	font-size: 15px;
	color: #444;
	/* font-family: 'Roboto'; */
	font-family: PuviRegular, sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: 10px 15px;
	outline: 0;
}

.sideMenu .lyteAccordionActive lyte-accordion-header {
	/* color: #111; */
}

.sideMenu lyte-accordion-header .h_link {
	padding: 10px 15px;
	display: block;
}

.h_link a {
	color: #000;
	outline: 0;
}

.sideMenu .s_link {
	padding: 0px;
}

.sideMenu .m_link {
	font-size: 14px;
	cursor: pointer;
	color: #666;
}

.activeSideMenu a {
	color: #000;
	font-size: 15px;
}

.sideMenu .m_link a {
	padding: 5px 0px 5px 40px;
	color: #666;
	display: block;
	transition: font-weight 0.3s linear;
	outline: 0;
}

.sideMenu .m_link:hover {
	background: #e0f2f1;
	color: #000;
}

.leftPanelLink {
	color: #555;
}

.contentSubheadings + .slyte-badge {
    margin-left: 5px;
}

.sideMenu .m_link:hover .leftPanelLink,
.activeSideMenu .leftPanelLink {
	color: #111;
}

.sideMenu .lyteAccordionActive lyte-accordion-body,
.sideMenu lyte-accordion-body {
	padding: 0;
	width: auto;
	font-family: PuviRegular, sans-serif
		/* font-family: 'Roboto', sans-serif; */
}

.sideMenu .lyteAccordionActive lyte-accordion-body {
	/* padding: 10px 0; */
	overflow: visible !important;
}

.sideMenu lyte-accordion-body link-to {
	padding: 5px 0;
	display: block;
}

.sideMenu lyte-icon.lyteAccordionArrow {
	left: unset;
	right: 10px;
	opacity: 0.4;
	transition: opacity 0.3s ease;
}

.sideMenu lyte-accordion-header:hover lyte-icon.lyteAccordionArrow {
	opacity: 1;
}

.sideMenu .lyteAccordionActive lyte-icon.lyteAccordionArrow {
	background-position: -42px 0;
	width: 6px;
	height: 10px;
	opacity: 1;
	transform: rotate(90deg);
}

.sideMenu lyte-accordion-item .activeSideMenu a,
.lyteAccordionActive lyte-accordion-header,
.sideMenu .m_link:hover a {
	color: #000;
}

.sideMenu lyte-accordion-item .m_link:hover {
	background: #fff;
}


.lyteDummyEventContainer lyte-button {
	border: none !important;
	border-bottom: solid 1px #ddd !important;
}


.sideMenu lyte-accordion-item .activeSideMenu {
	/* border-right: 3px solid #4db6ac; */
	font-weight: 500;
	color: #000;
	/* background: #ecf5f5; */
}

.sideMenu .lyteAccordionActive lyte-accordion-header {
	font-weight: 500;
	color: #000;
}

.docIntroContainer,
.docSettingsContainer {
	font-size: 17px;
	font-weight: 400;
	padding: 80px 150px;
	/* margin-bottom: 500px; */
}

.docSections {
	margin-bottom: 50px;
	padding-bottom: 25px;
	border-bottom: solid 1px #ddd;
}

/* .docSections:last-of-type{
	border-bottom : solid 1px #fff;
} */
.docIntroContainer {
	width: calc(100% - (80px + 12rem));
	padding: 80px 6rem;
}

.docIntroContainer p,
.docSettingsContainer p {
	font-size: var(--slytedoc-page-content-font-size);
	color: var(--slytedoc-page-content-text-color);
	-webkit-font-smoothing: antialiased;
}

h1-wrap h1 {
	font-size: 32px;
	margin-bottom: 30px;
	color: #000;
}

.quickStartSection {
	margin: 30px 0;
}

.quickStartSectionContent {
	/* padding: 0 10px; */
}

.passageHeadings {
	text-transform: capitalize;
	font-weight: 400;
	font-size: 18px;
	margin: 30px 0 15px;
}

.docSubheadings {
	margin: var(--slytedoc-sub-heading-margin);
	color: var(--slytedoc-sub-heading-color);
	font-weight: var(--slytedoc-sub-heading-font-weight);
	font-size: var(--slytedoc-sub-heading-font-size);
}

.docAPISubheading,
.contentSubheadings {
	font-weight: var(--slytedoc-content-subheading-font-weight);
	display: inline-block;
	padding: var(--slytedoc-content-subheading-padding);
	margin: var(--slytedoc-content-subheading-margin);
	/* border-bottom: 1px solid var(--slytedoc-content-subheading-border-color); */
	color: var(--slytedoc-content-subheading-color);
	font-size: var(--slytedoc-content-subheading-font-size);
}

.contentSubheadings+.docContentList {
	margin-top: 10px;
}

.docContent {
	margin: 20px 0;
}

.docCode {
	color: #45a5f5;
}

.pointsHeading {
	margin: 15px 0;
	font-weight: 400;
}

.pointsCont {
	list-style: none;
	/* padding-left: 20px; */
	margin-bottom: 20px;
}

.quickStartSyn .list-items {
	list-style-type: circle;
	padding: 5px;
}

.pointsCont .list-items {
	position: relative;
	margin: 8px 0;
	color: #000;
	font-size: 17px;
	font-weight: 400;
}

.pointsCont .list-items::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 7px;
	width: 7px;
	height: 7px;
	background: var(--main-theme-color);
	border-radius: 50%;
}

.snippetFunName {
	color: #70a6ff;
}

.snippetTagName {
	color: orange;
}

.snippetTagAttr {
	color: wheat;
}

.snippetValue {
	color: white;
}

.snippetDotVariable {
	color: darkorange;
}

.snippetVariable {
	color: wheat;
}

.snippetKeyWord {
	color: #00baff;
}

.snippetString {
	color: #ffcc00;
}

.snippetLastVar {
	color: #94a2e0;
}

.snippetComment {
	color: grey;
}

@media screen and (max-width: 1270px) {
	#mobile-indicator {
		display: block;
	}

	#header {
		max-height: 70px;
	}

	.navBarOpen {
		max-height: 500px !important;
	}

	#header.open {
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

	#header .logo {
		left: 45px;
	}

	#header .logoText {
		display: none;
	}

	#header .nav.navbar-nav {
		float: none;
		margin-right: 0px;
		margin-top: 60px;
	}

	#header li {
		display: block !important;
		margin: 0;
	}

	#header li a {
		display: block;
		padding: 20px 0;
		margin-left: 30px;
	}

	.headerWrap .nav a {
		color: #fff;
	}

	.menuIcon {
		display: block;
	}

	.headerWrap a:hover:before,
	.headerWrap a:focus:before {
		visibility: hidden;
	}

	.main {
		margin-top: 0px;
	}

	.sideArrow {
		display: block;
		transition: left 0.3s ease;
		left: 0;
	}

	.sideMenuCont {
		position: relative;
		z-index: 30;
		background: #fff;
	}
}

#body {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.rightMenu lyte-tree {
	margin-left: 0;
	padding-left: 20px;
	background: transparent;
}

.rightMenu lyte-tree-body {
	margin-top: 15px;
}

.rightMenu .mainContainer::before {
	border-left: 1px solid #ddd;
	height: calc(100% - 50px);
	top: 45px;
}

.sideTreeWrapper>lyte-tree>.lyteTreeBodyDiv>lyte-tree-body>.mainContainer::before {
	top: 28px;
	height: calc(100% - 35px);
}

.sideTreeWrapper>lyte-tree>lyte-tree-body,
.sideTreeWrapper>lyte-tree>lyte-tree-body>.mainContainer>lyte-tree>lyte-tree-body:first-child {
	margin-top: 0;
}

.sideTreeWrapper lyte-tree-body:last-of-type>.mainContainer::after {
	left: -13px;
	top: 15px;
}

.rightMenu lyte-tree lyte-tree lyte-tree-content::before {
	width: var(--slytedoc-rightpanel-content-circle-width);
	height: var(--slytedoc-rightpanel-content-circle-height);
	border-bottom: none;
	left: -15px;
	top: 7px;
	background: var(--slytedoc-rightpanel-content-circle-bg);
	border-radius: 50%;
	border: var(--slytedoc-rightpanel-content-circle-border);
	z-index: 15;
	transition: background 0.3s ease;
}

.lyteDocAPIPage .rightMenu [lyte-tree-level="2"] .treeValue {
	color: var(--slytedoc-rightpanel-heading-color);
	font-family: var(--slytedoc-secondary-font);
}

.newArrival {
	position: relative;
	background: #f5f5f5;
	padding: 15px;
	border-radius: 6px;
}

.content .newArrival {
	margin-top: 15px;
}

.newArrivalContainer {
	position: relative;
	border-radius: 6px;
	background: #ffffff;
	padding: 15px;
	margin: 15px 0px;
	box-shadow: 0px 0px 10px #ddd;
}

.rightMenu lyte-tree lyte-tree lyte-tree-content:hover::before {
	background: var(--slytedoc-rightpanel-content-hover-circle-bg);
	opacity: var(--slytedoc-rightpanel-content-hover-circle-opacity);
}

.rightMenu lyte-tree lyte-tree lyte-tree-content.rightNavActiveElem::before {
	background: var(--slytedoc-rightpanel-active-content-circle-bg);
	opacity: 1;
	left: -15px;
	transform: scale(2);
	border: var(--slytedoc-rightpanel-active-content-circle-border);
}

.rightMenu .treeValue {
	font-size: var(--slytedoc-rightpanel-content-font-size);
	font-family: var(--slytedoc-primary-font);
	color: var(--slytedoc-rightpanel-content-text-color);
}

.rightMenu lyte-tree-content.rightNavActiveElem .treeValue {
	/* color: var(--main-theme-color); */
	color: var(--slytedoc-rightpanel-active-content-text-color);
}

.sideTreeWrapper>lyte-tree>.lyteTreeBodyDiv>lyte-tree-body>.mainContainer>lyte-yield {
	display: none;
}

.docTreeStr {
	padding: 10px;
	background: #332f43;
	margin: 30px 0;
	border-radius: 2px;
	/* box-shadow: 0px 0px 10px 2px #ccc; */
}

.docTreeStr lyte-tree {
	background: #332f43;
}

.docTreeStr lyte-tree-body:last-of-type>.mainContainer::after {
	background: #332f43;
}

.docContentList {
	margin-bottom: var(--slytedoc-content-list-margin-bottom);
	/* border-radius: 5px; */
	/* border:solid 1px #e2e2e2; */
	/* background: #f5f5f5; */
	border: solid 1px var(--slytedoc-content-list-border-color);
	padding: var(--slytedoc-content-list-padding);
}

component-ssr .docContentList {
	border: none;
}

.docContentList:not(.bulletStyle) {
	list-style: none;
}

.bulletStyle .list-item {
	margin: 10px 0px;
}

.docOrderedList {
	padding: 10px 0px;
	list-style: none;
}

.docOrderedList .listContent {
	padding-left: 20px;
}

.docOrderedList .listContentParas {
	margin: 10px 0;
}

.docContentList .list-items {
	font-size: var(--slytedoc-content-list-item-font-size);
	padding: var(--slytedoc-content-list-item-padding);
}

.docOrderedList .list-items {
	padding-bottom: 15px;
}

.docOrderedList .listHead,
.docContentList .listHead {
	margin: 10px 0;
	color: #333;
	font-weight: normal;
	font-size: 19px;
}

.docContentList .list-items:first-child .listHead {
	margin-top: 0;
}

.example_container {
	margin-bottom: 40px;
}

.example_container lyte-accordion-body {
	width: auto;
}

.takeMeTo {
	font-weight: 400;
	color: #2c7bd0;
}

page-header {
	position: relative;
	z-index: 10;
	display: inline-block;
	width: calc(100% - 290px);
}

.tab-details>div {
	display: flex;
	padding: 0 6rem;
}

.tab-details span {
	color: var(--slytedoc-pageheader-tab-text-color);
	padding: var(--slytedoc-pageheader-tab-padding);
	cursor: pointer;
	line-height: var(--slytedoc-pageheader-tab-line-height);
	flex-grow: 1;
	text-align: center;
	font-size: var(--slytedoc-pageheader-tab-font-size);
	border-bottom: 1px solid var(--slytedoc-pageheader-tab-border-color);
}

.tab-details span:hover {
	color: var(--slytedoc-pageheader-tab-hover-text-color);
	border-bottom-color: var(--slytedoc-pageheader-tab-hover-border-color);
}

.tab-details span.active {
	background: var(--slytedoc-pageheader-tab-active-bg);
	color: var(--slytedoc-pageheader-tab-active-text-color);
	border-bottom-color: var(--slytedoc-pageheader-tab-active-border-color);
	cursor: default;
}

.languageListTable {
	background: #f5f5f5;
	padding: 10px 0;
}

.languageListTable td {
	padding: 10px 30px;
	cursor: default;
}

.lyteCBoxCustomHeader {
	background: black;
	width: 100%;
	height: 10%;
}

.customHeader {
	color: white;
	width: 30%;
	font-size: 30px;
	font-weight: bold;
	position: absolute;
	transform: translate(0%, 55%);
}

.customTitle {
	width: 50%;
	height: 35px;
	position: absolute;
	transform: translate(51%, 71%);
	color: white;
	text-align: center;
	padding: 5px;
	font-size: 20px;
}

.customColorpickerContent {
	width: 60%;
	height: 70%;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	overflow: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.SortableColumns::after {
	content: '';
	clear: both;
	display: block;
}

.lyteDocSortableExample .lyteSortableAvailable {
	width: 280px;
	box-sizing: border-box;
	margin-right: 20px;
	float: left;
	padding: 20px;
	background: #eee;
}

.lyteDocSortableExample .sortable-parent {
	height: 230px;
	max-height: 400px;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	padding: 20px 15px;
	border: 1px solid #e6e6e6;
	font-family: PuviRegular, sans-serif;
	font-size: 15px;
	background: #fff;
}

.lyteDocSortableExample .sortable-element {
	position: relative;
	list-style-type: none;
	padding: 10px 20px 10px 25px;
	border: 1px solid #f0f0f0;
	cursor: move;
	margin: 0;
	margin-bottom: 5px;
	border-radius: 3px;
	color: #000;
	text-align: center;
}

.lyteDocSortableExample .sortable-element::before {
	content: '';
	position: absolute;

	background-position: -293px -4px;
	width: 4px;
	height: 13px;
	left: 11px;
	top: calc(50% - 6px);
	opacity: 0.6;
}

.lyteDocSortableExample .sortable-element.sortable-element-selected,
.lyteDocSortableExample .sortable-element:hover {
	background: #f6f9fa;
	border: 1px dashed #57a5c6;
}

.lyteDocSortableExample .lyteSortableDisabledPlaceholder::before,
.lyteDocSortableExample .lyteSortablePlaceholder::before {
	content: none;
}

/*------- Draggable & Droppable CSS -------*/
.draggable-handle-element {
	cursor: move;
}

.draggable-div-container {
	width: 700px;
	height: 300px;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	background-color: rgba(232, 232, 232, 0.29);
}

.drag-element {
	width: 130px;
	border: 2px solid #9f9999;
	height: 114px;
	background-color: white;
}

.drag-element .padding {
	margin-top: 45px;
	text-align: center;
}

#handle {
	border: 1px dashed #a7a0a0;
	text-align: center;
	width: 58px;
	height: 53px;
	margin: auto;
	margin-top: 28px;
	z-index: auto;
}

.lyteDraggablePlaceholder {
	background: #acdefa;
}

.lyteDraggableDisabledPlaceholder {
	background: #ffbbbb;
}

.lyteColorbox {
	z-index: 20000;
}


func-list {
	display: block;
}

func-list .docContentList {
	padding: 0;
	border: 0;
}

func-list .docContentList .list-items {
	padding: 15px 0;
}

func-list .docContentList .listHead {
	font-size: 19px;
	font-weight: 300;
}

func-list .docContentList a {
	color: #4090c4;
}

func-list .listContent {
	color: #555;
	margin-left: 6px;
}

func-list .docContentList link-to:hover {
	border-bottom: 1px solid #4090c4;
}




.loading-spinner {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.loading-spinner .loadingSpinnerDiv {
	transform-origin: 32px 32px;
	animation: loading-spinner 1.2s linear infinite;
}

.loading-spinner .loadingSpinnerDiv::after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 29px;
	width: 5px;
	height: 14px;
	border-radius: 20%;
	background: #fff;
}

.loading-spinner .loadingSpinnerDiv:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
}

.loading-spinner .loadingSpinnerDiv:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
}

@keyframes loading-spinner {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}


/*	The Below code will be removed once changes added from lyte-ui-components	*/

.lytePopover {
	z-index: 1040;
}

.alertPopup {
	max-width: 550px;
}

.alertPrimaryMsg {
	font-family: 'LatoBold', 'Open Sans', sans-serif;
	font-size: 15px;
}

.alertContentMiddle {
	vertical-align: top;
}

.lyteStatusIcon {
	margin-right: 10px;
}

/*	The Above code will be removed once changes added from lyte-ui-components	*/

.docCountUpDiv {
	margin-top: 20px;
	background: var(--main-theme-color);
	padding: 10px;
	display: inline-flex;
	color: #fff;
	font-size: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
}

.docCountUpDiv1 {
	margin-top: 20px;
	background: var(--main-theme-color);
	padding: 10px;
	display: inline-flex;
	color: #fff;
	font-size: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
}

.trashIcon {
	background: url(delete-button-8618c2a5c71beb2ff7ab.svg);
	background-size: 100%;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.trashIcon.trashIconHover:hover {
	background-image: url(delete-button-red-302d26eb793a193d318a.svg);
}

.pencilEditIcon {
	background: url(pencil_black-a4c3e1f74d75382d4418.svg);
	background-size: 100%;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

.pencilEditIcon.pencilEditIconHover:hover {
	background-image: url(pencil_green-8ed397a4ff96416ebd39.svg);
}

.rightTreeHeading {
	font-weight: var(--slytedoc-rightpanel-heading-font-weight);
	padding: var(--slytedoc-rightpanel-heading-padding);
	font-size: var(--slytedoc-rightpanel-heading-font-size);
	letter-spacing: 0px;
	margin-top: var(--slytedoc-rightpanel-margin-top);
}


.sliderAnatomy {
	display: block;
	text-align: center;
}

.sliderAnatomy img {
	height: 600px;
	width: auto;
}

.mainHeaderContent {
	font-size: 40px;
	font-weight: 600;
	color: #484848;
}

.docIntroContainer .promptMsg {
	color: #0000ff;
}

.nightMode .docCode {
	color: wheat;
}

/* Night mode styles */
.nightMode .docContent.promptMsg {
	color: #8eb9f2;
}

.nightMode p {
	color: #ddd;
}

.nightMode a {
	color: #fff;
}

.nightMode .takeMeTo {
	color: #59a8ff;
}

.nightMode body,
.nightMode #outlet {
	background: #444444;
}

.nightMode pre {
	background: #333;
}

.nightMode h1-wrap h1 {
	color: #fff;
}

.nightMode .docTreeStr,
.nightMode .docTreeStr lyte-tree-body:last-of-type>.mainContainer::after,
.nightMode .docTreeStr lyte-tree {
	background: #333333;
}

.nightMode .sideMenu lyte-accordion-header {
	color: #fff;
}

.nightMode .list-items {
	color: #fff;
}

.nightMode .docContentList>.list-items {
	color: #fff;
}

.nightMode .passageHeadings {
	color: #fff;
}

.nightMode .contentSubheadings {
	color: #fff;
}

.nightMode .sideMenu lyte-accordion-header {
	background: var(--doc-bg-main);
}

.nightMode .sideMenu .m_link a {
	color: #bbb;
}

.nightMode .list-items {
	color: #fff;
}

.nightMode .h_link a {
	color: #ddd;
}

.nightMode .sideMenu lyte-accordion-item .activeSideMenu a,
.nightMode .lyteAccordionActive lyte-accordion-header,
.nightMode .sideMenu .m_link:hover a {
	color: #fff;
}

.nightMode .sideMenu lyte-accordion-item .m_link:hover {
	background: #333
}

.nightMode page-header {

	/*	Document - page header tab - variables - nigth theme Begins */

	--slytedoc-pageheader-tab-text-color: #bbb;
	--slytedoc-pageheader-tab-padding: 9px 20px;
	--slytedoc-pageheader-tab-line-height: 20px;
	--slytedoc-pageheader-tab-font-size: 16px;
	--slytedoc-pageheader-tab-border-color: #666;

	--slytedoc-pageheader-tab-hover-text-color: #fff;
	--slytedoc-pageheader-tab-hover-border-color: #bbb;

	--slytedoc-pageheader-tab-active-bg: #565656;
	--slytedoc-pageheader-tab-active-text-color: #fff;
	--slytedoc-pageheader-tab-active-border-color: #fff;

	/*	Document - page header tab - variables - nigth theme Ends */

}
.nightMode {
	--slytedoc-rightpanel-heading-color: #fff;
}
.nightMode .tab-details span {
	color: #bbb;
	border-bottom-color: #666;
}

.nightMode .tab-details span.active {
	background: #565656;
	color: #fff;
	border-bottom-color: #fff;
}

.nightMode .tab-details span:hover {
	color: #fff;
	border-bottom-color: #bbb;
}

.nightMode .newArrivalContainer {
	background: #444;
	box-shadow: 0px 0px 10px #000;
}

.ex lyte-drop-item {
	background: #eee;
}

.nightMode .ex lyte-drop-item {
	background: #333;
	color: #fff;
}

.nightMode .ex lyte-drop-label {
	color: #fff;
}

.nightMode .list-items .listHead {
	color: #fff;
}

.nightMode .list-items .listContent {
	color: #fff;
}

.nightMode .dom_example_highlight {
	color: #fff;
}

.nightMode .ajaxDocOptionsWrap .listHead,
.nightMode .docContentList .options_type .listHead,
.nightMode ajax-doc .api_item_body .list-items .listHead,
.nightMode ajax-doc .api_item_body .list-items .listContent {
	color: #fff;
}

.nightMode .ajaxDocOptionsWrap .listContent {
	color: #fff;
}

.nightMode .panel .panel-default {
	border-color: #000;
}

.nightMode .panel-default>.panel-heading {
	color: #fff;
	background: #323232;
	border-color: #000;
}

.nightMode .panel-body {
	background: #444444;
}

.nightMode .rightTreeHeading {
	color: #fff;
}

.nightMode .downloadIcon {
	filter: invert(100%);
}


.offlineStop {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}

.offlineStop .searchIntroAnimation,
.offlineStop .searchIntroAnimation::before,
.offlineStop .searchIntroAnimation::after {
	animation: none;
	background-color: transparent;
}

.empty1,
.empty2,
.empty3,
.empty4,
.empty5 {
	background: url(000-7374305b52104d559453.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.full1,
.hoverFull1 {
	background: url(001-e528e68bd24b9c7eb1e3.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.full2,
.hoverFull2 {
	background: url(002-13ecde21bbea63a96fb2.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.full3,
.hoverFull3 {
	background: url(003-f036d1e79d872cef1d2f.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.full4,
.hoverFull4 {
	background: url(004-b8e838d6ee52c35b7af6.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.full5,
.hoverFull5 {
	background: url(005-0882a8928af99e8ad0f4.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.toggleEmpty {
	background: url(r1-e7f0096a309862037743.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.toggleHFull {
	background: url(r2-dc1c4ca0965ab7a1e899.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.toggleFull {
	background: url(r3-35e3fc3815f97cfdca52.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/* This css are for the custom icons */
.lRCustomRatingEmpty,
.lRCustomRatingHover {
	background: url(circle-outline-5ea4029f461a7b3e4327.png);
	background-repeat: no-repeat;
	background-size: contain;
}

.lRCustomRatingEmpty {
	opacity: 0.5;
}

.lRCustomRatingHover {
	opacity: 1;
}

.lRCustomRating {
	background: url(star-0cd6e724be42ea2bf135.png);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
}

#editor1,
#editor2,
#editor3 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: 15px;
}


.cropperOutputImg {
	max-width: 100%;
}

.imagePreviewDiv {
	width: 99%;
	border: 1px solid;
	border-radius: 5px;
	padding: 7px 0px 0px 7px;
}

.imagePreviewUl {
	list-style: none outside none;
}

.imagePreviewUl .li {
	float: left;
	padding: 0;
	margin: 0 7px 7px 0;
	position: relative;
	height: 64px;
	cursor: pointer;
	list-style: none outside none;
}

/*.imagePreviewUl .li:after{
	content: '';
    position: absolute;
    display: block;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 2px;
    left: 0;
    top: 0;
}*/
.imagePreviewUl .li .hoverDiv {
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.6);
	width: 63px;
	height: 63px;
	border-radius: 3px;
	display: none;
	z-index: 1;
}

.imagePreviewUl li img {
	object-fit: cover;
	width: 63px;
	height: 63px;
	border-radius: 2px;
}

lyte-colorbox-container.lyteCBoxWrapper__3.lyteColorboxDisplay {
	z-index: 10000;
}

#markdownContainer {
	/*border-spacing: 15px;*/
	width: 100%;
	border: solid 1px #7e7e7e;
	border-radius: 5px;
}

.markdownEditor {
	height: 800px;
	outline: none;
	border-radius: 5px;
	padding: 15px;
	font-size: 1.05rem;
	overflow: scroll;
	/*background: #fffbf8;*/
}

#outputDivForMarkdown {
	height: 800px;
	padding: 15px;
	border-radius: 5px;
	background: #f3f3f3;
	font-size: 1.05rem;
	overflow: scroll;
}

#outputDivForMarkdown p {
	min-height: 19px;
}

#outputDivForMarkdown a {
	color: -webkit-link;
	cursor: pointer;
	text-decoration: underline;
}

#outputDivForMarkdown thead {
	background: #c6c4c4;
}

#outputDivForMarkdown tbody {
	background: #fff;
}

#outputDivForMarkdown h1 {
	font-size: 2rem;
}

#outputDivForMarkdown ul,
#outputDivForMarkdown ol {
	padding-left: 30px;
}

#outputDivForMarkdown th,
#outputDivForMarkdown td {
	padding: 5px;
}

#markdownTable img {
	width: 160px;
	height: 90px;
}

#markdownExampleTable th,
#markdownExampleTable td {
	padding: 5px;
}

.markdownSupportedList {
	font-size: 16px;
	padding-left: 40px;
}

.docContentList.customDocList {
	border: var(--slytedoc-contentlist-custom-border);
	margin-bottom: var(--slytedoc-contentlist-custom-margin-bottom);
	border-radius: var(--slytedoc-contentlist-custom-border-radius);
	background: var(--slytedoc-contentlist-custom-bg);
	padding: var(--slytedoc-contentlist-custom-padding);
}

.nightMode .docContentList.customDocList {
	background-color: #383838;
}



/*	This css is for TOOLS in left panel	*/

.docLyteToolsSubSection {
	padding-left: 50px;
}

.tools-img {
	max-width: 100%;
	margin-bottom: 25px;
}

tools-eclipse-plugin .docContentList,
tools-chrome-extension .docContentList,
tools-vscode-extension .docContentList {
	border: none;
}

tools-eclipse-plugin .tools-img {
	margin-top: 25px;
	border: 1px solid gray;
}

tools-chrome-extension .tools-img {
	border-top: 1px solid gray;
}

.doc_snippet_result {
	width: 100%;
}
.navMenuWrapper .zlyteNavBar .zlyteNavVertical .zlyteLightTheme{
	height: 420px;
	}
	.navExampleWrapper{
		display: block;
		width: 100%;
		height: 200px;
		background: #ffecfd;
		border:solid 1px #e5e5e5;
		box-shadow: 0px 0px 3px #d5d5d5;
	}
	.thumbnailExample{
		padding: 20px;
		border: 1px solid #ccc;
		border-radius: 10px;
	}
	.thumbnailExample h5{
		margin: 10px;
	}
	.docNavMenuWrapper{
		background: #ffecfd;
		border:solid 1px #e5e5e5;
		box-shadow: 0px 0px 3px #d5d5d5;
	}
	.docSideNavbarExample{
		height: 100%;
	}
	.docExampleWrapper{
		border: 1px solid #f0f0f0 !important;
		width: 100%;
		height: 150px;
		background-color: rgb(244, 243, 243);
		border-radius: 5px;
	}
	.zlyteNavBar.zlyteNavVertical{
		height: 100% !important;
	}
	
	.zlyteNavCreateButton span{
		font-size: 14px;
	}
	.zlyteMenufeatherIcon {
		width: 34px;
		background-image: url(Feather-9ae915f74813f1b57c97.png);
		background-size: cover;
	}