.sidebar .menu li,
.sidebar .menu ul li:first-child {
  border-top: 1px solid #eee
}

.widget_search input,
input,
textarea {
  border: 1px solid #eee
}

.banner,
.banner2,
.banner_image {
  overflow: hidden
}

.first_col img,
.first_col_side img {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s
}

.banner h1,
.read_more_2,
h1 {
  font-weight: 400
}

.guy,
.pc {
  left: 50%
}

.protfolio:nth-child(odd) .imag_prot,
.whiteside {
  float: right
}

body {
  color: #484d57
}

a {
 
}

.clr {
  clear: both
}

a:hover {
  color: #ffffff;
  text-decoration: none
}

textarea {
  height: 100px
}

.comment-form-comment label {
  width: 100%
}

.submit {
  background-color: #08b1f4;
  color: #fff;
  border: none;
  padding: 5px 20px
}

.side-title,
.sidebar .menu li:last-child {
  border-bottom: 1px solid #eee
}

.submit:hover {
  background-color: #333
}

.inne_tes .col-md-1,
.inne_tes .col-md-10,
.inne_tes .col-md-2,
.padd_not,
.protfolio,
.protfolio .col-md-6,
.sidebar .menu {
  padding: 0
}

.sidebar .menu li {
  list-style-type: none;
  padding: 5px 0
}

.sidebar .menu li:first-child {
  border-top: none
}

.sidebar .menu ul li:last-child {
  border-bottom: none
}

.sidebar .menu ul {
  margin: 0;
  padding: 0
}

.side-title {
  font-size: 16px;
  padding: 5px 10px 5px 20px;
  background-repeat: no-repeat;
  background-position: center left
}

.widget_search input {
  width: 100%;
  padding: 5px 10px
}

.widget_search label {
  width: 100%;
  margin-top: 10px
}

.banner_image {
  padding: 0;
  margin-bottom: 15px;
  margin-left: 20px;
  text-align: center;
  position: relative;
  min-height: 400px;
  background-color: #f1f1f1
}

.date_sie,
.image_div,
.text_div {
  position: absolute
}

.banner_image img {
  width: 100%;
  padding: 0
}

.search_image {
  padding: 0;
  margin-right: 20px
}

.search_image img {
  max-width: 100%;
  padding: 0
}

.page_5 ul {
  padding-left: 50px
}

.image_div {
  width: 100%;
  height: 100%
}

.progress,
.progress-bar {
  height: 4px
}

.text_div {
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  margin-top: 30%
}

.fetured_cols,
.footer_bar,
.logos,
.text-cemte {
  text-align: center
}

.main_text h2,
.text_div h1 {
  font-size: 40px
}

.date_sie {
  width: 100px;
  background-color: #333;
  right: 0;
  margin-top: 120px;
  color: #fff;
  padding: 20px 0;
  line-height: 40px
}

#sticky-social a,
.banner,
.banner2 {
  position: relative
}

.date_sie span {
  font-size: 50px;
  line-height: 50px;
  border-bottom: 1px solid #fff
}

.footer_bar,
.footer_bar h2 {
  font-size: 15px
}

.pro_text .col-md-3 {
  border-right: 1px solid #eee
}

.pro_text .col-md-3:last-child {
  border-right: none
}

.top_bar {
  width: 100%;
  background-color: #000;
  padding: 10px;
  color: #fff
}

.logos {
  padding: 10px;
  z-index: 100
}

.logos img {
  text-align: left;
  float: left
}

.banner {
  width: 100%;
  min-height: 600px;
  margin-top: 100px
}

.banner2 {
  width: 100%;
  min-height: 800px;
  margin-bottom: 0;
  padding-bottom: 50px
}

.fetured_cols_outer {
  margin-top: 30px;
  text-align: center;
  padding: 0 0 100px
}

.fetured_cols .img-responsive,
.max_widtho {
  max-width: 100%
}

.read_more_2 {
  background-color: #fbed03;
  padding: 8px 20px 10px;
  color: #000;
  border-radius: 30px;
  border: none
}

.read_more_1,
.read_more_2:hover {
  background-color: #333;
  color: #fff
}

.read_more_2:hover {
  text-decoration: none
}

.read_more_1 {
  padding: 8px 20px 10px;
  border-radius: 30px
}

.read_more_1:hover {
  color: #000;
  text-decoration: none;
  background-color: #fbed03
}

.footer_outer {
  background-color: #fff;
  width: 100%;
  padding: 80px 0;
  margin-top: -2px
}

.footer_bar {
  width: 100%;
  background-color: #000000;
  padding: 10px 0;
  color: #ffffff;
  font-weight:300;
  
}

.banner_bar,
.footer_banner {
  background-color: #08b1f4;
  background-position: left;
  width: 100%;
  background-repeat: no-repeat
}

.footer_bar a:hover {
  color: #ccc;
  text-decoration: none
}

.footer_banner {
  color: #fff;
  padding: 30px 0
}

.foot_cols {
  color: #999;
  border-top: 1px solid #000000;
  padding-top: 50px;
  margin-bottom: 50px
}

.foot_cols .foot-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff
}

.foot_cols a {
  color: #666;
  text-decoration: underline
}

.foot_cols a:hover {
  text-decoration: none;
  color: #fbed03
}

.locatopn_map {
  margin-bottom: -10px
}

.foot_cols ul {
  padding: 0;
  margin: 0
}

.foot_cols ul li {
  padding: 0;
  list-style-type: none
}

.foot_cols ul li a {
  color: #999;
  font-size: 14px;
  line-height: 18px
}

.page_5 h1 {
  padding-bottom: 20px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-position: left bottom
}

.banner_bar {
  padding: 15px;
  color: #fff;
  line-height: 0;
  margin-bottom: 30px
}

.banner_bar h2 {
  margin: 0;
  padding: 0;
  font-size: 25px
}

.header_outer {
  z-index: 500;
  position: absolute;
  top: 0;
  width: 100%
}

.header_outer a,
.inner_box_dic h3 {
  color: #000
}

.header_outerinn {
  width: 100%;
  position: absolute;
  top: 60px
}

.page_5 {
  margin-top: 30px;
  text-align: justify
}

.protfolio .pro_text {
  padding: 20px
}

.marg__gfs,
.marg_top {
  margin-top: 50px
}

.bord_right {
  border-right: 1px solid #eee;
  text-align: justify;
  padding-left: 0
}

.bor_btmm {
  padding-bottom: 20px;
  margin-bottom: 20px;
  background-repeat: no-repeat;
  background-position: center bottom
}

.bg_code_image {
  min-height: 250px;
  background-position: left;
  background-attachment: fixed
}

.get_quote {
  min-height: 10px;
  text-align: center;
  color: #fff;
  padding: 50px 0;
  background-position: right
}

.get_quote h2 {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 20px
}

.enqury_outer .form-control,
.packeages h3 {
  margin-bottom: 20px
}

.get_quote a {
  text-align: center;
  padding: 20px 50px;
  color: #fff
}

.get_quote .likss {
  font-size: 25px;
  font-family: 'Roboto Condensed', sans-serif;
  padding-top: 20px
}

.get_quote .likss1 {
  border-right: 1px solid #666
}

.progress-title {
  font-weight: 600;
  color: #30353e;
  margin: 0 0 10px;
  line-height: 16px;
  text-transform: capitalize;
  font-family: Roboto, sans-serif;
  letter-spacing: 1px
}

.inner_text,
.main_menu,
.packeages h3 {
  text-transform: uppercase
}

.progress {
  background: #677180;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 40px;
  overflow: visible
}

.enqury_outer,
.to_banner {
  background-repeat: no-repeat
}

.first_col,
.first_col_side {
  height: 350px
}

.progress .progress-bar {
  box-shadow: none;
  position: relative;
  -webkit-animation: 2s animate-positive;
  animation: 2s animate-positive
}

.progress .progress-bar:after {
  content: "";
  display: block;
  border: 6px solid transparent;
  border-radius: 100%;
  position: absolute;
  top: -4px;
  right: -4px
}

.progress .progress-value {
  font-size: 15px;
  font-weight: 700;
  color: #000;
  position: absolute;
  top: -24px;
  right: 0
}

.progress.default .progress-bar {
  background: #fbed03
}

.progress.default .progress-bar:after {
  border-color: #fbed03
}

[class*=entypo-]:before {
  font-family: entypo, sans-serif
}

#sticky-social {
  left: 0;
  position: fixed;
  top: 250px;
  z-index: 300
}

#sticky-social a {
  background: #333;
  color: #fff;
  display: block;
  height: 35px;
  font: 16px/35px "Open Sans", sans-serif;
  text-align: center;
  width: 35px;
  text-decoration: none
}

#sticky-social a span {
  line-height: 35px;
  left: -120px;
  position: absolute;
  text-align: center;
  width: 120px
}

#sticky-social a:hover span {
  left: 100%;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s
}

#sticky-social a[class*=facebook],
#sticky-social a[class*=facebook] span,
#sticky-social a[class*=facebook]:hover,
.footer_social li .facebook {
  background: #3b5998;
  text-decoration: none
}

#sticky-social a[class*=twitter],
#sticky-social a[class*=twitter] span,
#sticky-social a[class*=twitter]:hover,
.footer_social li .twitter {
  background: #00aced;
  text-decoration: none
}

#sticky-social a[class*=gplus],
#sticky-social a[class*=gplus] span,
#sticky-social a[class*=gplus]:hover,
.footer_social li .gplus {
  background: #dd4b39;
  text-decoration: none
}

#sticky-social a[class*=linkedin],
#sticky-social a[class*=linkedin] span,
#sticky-social a[class*=linkedin]:hover,
.footer_social li .linkedin {
  background: #007bb6;
  text-decoration: none
}

#sticky-social a[class*=instagrem],
#sticky-social a[class*=instagrem] span,
#sticky-social a[class*=instagrem]:hover {
  background: #517fa4;
  text-decoration: none
}

#sticky-social a[class*=stumbleupon],
#sticky-social a[class*=stumbleupon] span,
#sticky-social a[class*=stumbleupon]:hover {
  background: #eb4924;
  text-decoration: none
}

#sticky-social a[class*=pinterest],
#sticky-social a[class*=pinterest] span,
#sticky-social a[class*=pinterest]:hover {
  background: #cc2127;
  text-decoration: none
}

#sticky-social a[class*=flickr],
#sticky-social a[class*=flickr] span,
#sticky-social a[class*=flickr]:hover {
  background: #ff0084;
  text-decoration: none
}

#sticky-social a[class*=tumblr],
#sticky-social a[class*=tumblr] span,
#sticky-social a[class*=tumblr]:hover {
  background: #32506d;
  text-decoration: none
}

.footer_social {
  margin: 0 auto;
  padding: 0;
  width: auto;
  margin-top: 20px
}

.footer_social li {
  float: left;
  list-style-type: none;
  margin-right: 10px
}

.foot_cols .footer_social li a {
  color: #fff;
  border-bottom: none;
  width: 40px;
  height: 40px;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  border-radius: 50px;
  line-height: 30px
}

.footer_social li i {
  font-size: 20px;
  margin-top: -2px
}

.footer_social li .instagram {
  background: #9730e3;
  text-decoration: none
}

.footer_social li a span {
  text-align: center;
  width: 120px
}

.footer_social li a:hover {
  opacity: 1
}

.scroll-fix {
  z-index: 100
}

.fonto {
  font-size: 25px;
  color: #ff0205
}

.bord_read,
.inner_text {
  font-size: 14px;
  color: #fff
}

.padd_left_not {
  padding-left: 0
}

.inne_tes .col-md-11,
.padd_right_not {
  padding-right: 0
}

.marg_top2,
.packeages h3 {
  margin-top: 20px
}

.clr_1 {
  color: #6aaf08
}

.main_menu {
  font-size: 14px
}

.outer_menu {
  box-shadow: 0 0 5px #ddd;
  z-index: 500;
  background-color: #fff
}

.first_col_side,
.first_col_side2 {
  position: relative;
  background-color: #099;
  text-align: left;
  width: 100%;
  overflow: hidden
}

.padd_not_2 {
  padding: 5px
}

.first_col {
  overflow: hidden;
  position: relative;
  width: 100%
}

.first_col img {
  transition: 1s;
  width: 100%;
  max-width: none
}

.first_col:hover img {
  margin-top: -5%;
  margin-left: -5%;
  width: 110%
}

.first_col_side img {
  height: 350px;
  transition: 1s;
  width: auto;
  max-width: none
}

.first_col_side:hover img {
  height: 400px;
  margin-top: -25px
}

.first_col_side2 {
  height: 300px;
  margin-bottom: 30px
}

.first_col_side2 img {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  transition: 1s;
  width: auto;
  max-width: none;
  height: 320px
}

.first_col_side2:hover img {
  height: 380px;
  margin-top: -30px;
  margin-left: -30px
}

.first_col_side2 .inner_text h1 {
  font-size: 20px
}

.inner_text {
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 50px
}

.bord_read {
  padding: 5px 15px;
  border: 2px solid #fff;
  border-radius: 5px
}

.bord_read:hover {
  text-decoration: none;
  color: #333;
  background-color: #fff;
  -webkit-transition: background-color .5s;
  -moz-transition: background-color .5s;
  -o-transition: background-color .5s;
  transition: background-color .5s
}

.footer {
  width: 100%;
  padding: 15px;
  text-align: center;
  background-color: #000;
  color: #fff
}

.footer_top {
  width: 100%;
  background-color: #222;
  min-height: 200px
}

.mag_gap {
  margin: 00px auto
}

.welcome_outer {
  width: 100%;
  padding: 30px 0;
  background-color: #f2f8fb
}

.bold_s {
  font-size: 25px;
  font-weight: 700
}

.padd_rs {
  padding-top: 10px
}

.mag_tos {
  margin-top: 0
}

.saard {
  margin-top: 15px
}

.scroll-fix {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 0 5px #f1f1f1
}

.main_text,
.main_text2 {
  position: absolute;
  z-index: 50;
  width: 100%
}

.main_text {
  top: 15%;
  color: #000;
  text-align: center
}

.borderriht {
  border-right: 1px dashed #ddd
}

.icon_box {
  font-size: 60px;
  color: #fbed03;
  padding-top: 20px
}

.fetured_cols:hover,
.icon_box:hover i {
  margin-top: -20px;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
  transition: 1s
}

.to_banner {
  min-height: 100px;
  background-color: #09c
}

.main_text2 {
  top: 0;
  color: #000;
  text-align: left;
  min-height: 600px
}

.banner h1 {
  font-size: 30px;
  margin-top: 200px
}

.image-wrapper h4,
.images_amount,
.inner_box_dic h3,
.packeages h3 {
  font-weight: 700
}

.color_2,
.foot_cols h4,
.need_help p {
  color: #ccc
}

.icons_s .glyph-icon {
  font-size: 50px
}

.digital_eader {
  width: 100%;
  margin-top: 50px;
  background-color: #09c
}

.enqury_outer {
  min-height: 500px;
  background-position: center top;
  text-align: center;
  padding-top: 50px
}

.enqury_outer textarea .form_et {
  height: 150px !important
}

.packeages {
  border-radius: 10px;
  width: 100%;
  padding-bottom: 30px;
  background-color: #fff;
  box-shadow: 0 0 20px #ccc
}

.packeages h3 {
  font-size: 20px;
  padding-top: 30px
}

.packeages ul {
  list-style-type: none;
  padding: 0 15px;
  text-align: left;
  font-size: 14px
}

.packeages ul li {
  border-bottom: 1px solid #ddd;
  padding: 10px 0
}

.packeages ul li:first-child {
  border-top: 1px solid #ddd
}

.images_amount {
  background-color: #5eb9f0;
  width: 100%;
  padding: 0;
  font-size: 30px;
  color: #fff
}

.need_help {
  border-radius: 30px;
  padding: 20px;
  text-align: center;
  min-height: 240px;
  line-height: 18px
}

.need_help h3 {
  margin-top: 10px;
  color: #fff
}

.need_help h4 {
  margin-top: 10px;
  color: #fbed03
}

.need_help .glyph-icon {
  font-size: 30px;
  color: #333;
  background-color: #fbed03;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  padding-top: 10px;
  border-radius: 100px;
  line-height: 1
}

.pc:after,
.stage {
  border-radius: 50%
}

.emplyee,
.pad_btms {
  margin-bottom: 50px
}

.magics_ops2 {
  margin-top: 20px !important
}

@media (max-width:768px) {
  .banner,
  .yellowside {
    height: auto
  }
  .clr2 {
    clear: both
  }
  .banner_bar h2 {
    font-size: 18px
  }
  #bar,
  .main_text2,
  .scroll-fix {
    position: relative
  }
  .get_quote .likss {
    font-size: 14px
  }
  .borderriht,
  .get_quote .likss1 {
    border-right: none
  }
  .banner2 h3,
  .btn-circle,
  .date_sie,
  .icons_s,
  .inne_tes .col-md-1 .glyph-icon {
    display: none
  }
  .banner_image {
    width: 100%;
    min-height: 200px
  }
  .banner_image h1,
  .first_col h1 {
    font-size: 25px
  }
  .first_col {
    min-height: 300px
  }
  .saard {
    text-align: center
  }
  .banner {
    overflow: visible
  }
  .banner h1 {
    margin-top: 200px
  }
  .bar-progress {
    margin-bottom: 200px
  }
  .banner2 {
    overflow: scroll;
    min-height: 450px;
    margin-bottom: 80px
  }
  .bold_s {
    margin-top: 20px;
    width: 100%;
    display: inline-block
  }
  .packeages {
    margin-bottom: 30px
  }
  .need_help {
    margin-top: 30px
  }
  .inne_tes .col-md-11,
  .padd_mobiles {
    padding: 0
  }
  .footer_bar {
    padding: 15px 10px
  }
  .logos {
    padding-left: 30px
  }
  .magics_ops {
    margin-top: 10px !important
  }
  .inners_ts h1 {
    margin-top: 0
  }
  .inners_ts img {
    margin-top: 50px
  }
}

@media (min-width:768px) {
  .banner_image {
    width: 100%;
    min-height: 300px
  }
  .banner_image h1 {
    font-size: 40px
  }
}

@media (min-width:980px) {
  .banner_image {
    width: 100%;
    min-height: 400px
  }
  .banner_image h1 {
    font-size: 40px
  }
}

@media (min-width:1200px) {
  .banner_image h1 {
    font-size: 40px
  }
}

#particle-canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0
}

.stage {
  width: 400px;
  height: 400px;
  background-color: #f5f2f1;
  position: relative
}

.guy,
.pc,
.pc:after,
.pc:before,
.stage:after,
.table {
  position: absolute
}

.stage:after {
  background-color: #eae4df;
  height: 100px;
  width: 100%;
  content: '';
  bottom: 0
}

.table {
  bottom: 75px;
  width: 100%;
  height: 8px;
  background-color: #caa17f;
  z-index: 40;
  border-radius: 20px
}

.pc {
  z-index: 2;
  bottom: 100px;
  width: 142px;
  height: 98px;
  background-color: #c0c0c2;
  border-radius: 5px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.pc:after {
  content: '';
  width: 14px;
  height: 14px;
  background-color: #b5b7ba;
  top: 51%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%)
}

.pc:before {
  content: '';
  top: 4px;
  left: 0;
  right: 0;
  height: calc(100% - 4px);
  background-color: #d1d3d5;
  border-radius: 2px
}

.guy {
  width: 174px;
  height: 130px;
  -webkit-transform: translateX(-50%) translateY(0) translateZ(0);
  transform: translateX(-50%) translateY(0) translateZ(0);
  bottom: 198px;
  -webkit-animation: 3.5s cubic-bezier(.4, 0, 1, 1) infinite alternate guyMove;
  animation: 3.5s cubic-bezier(.4, 0, 1, 1) infinite alternate guyMove
}

@-webkit-keyframes guyMove {
  0%,
  30% {
    -webkit-transform: translateX(-50%) translateY(45px) translateZ(0)
  }
  15%,
  45% {
    -webkit-transform: translateX(-50%) translateY(50px) translateZ(0)
  }
  100%,
  60% {
    -webkit-transform: translateX(-50%) translateY(0) translateZ(0)
  }
}

@keyframes guyMove {
  0%,
  30% {
    transform: translateX(-50%) translateY(45px) translateZ(0)
  }
  15%,
  45% {
    transform: translateX(-50%) translateY(50px) translateZ(0)
  }
  100%,
  60% {
    transform: translateX(-50%) translateY(0) translateZ(0)
  }
}

.body,
.body:after {
  position: absolute;
  -webkit-transform: translateX(-50%);
  left: 50%;
  border-radius: 50px 50px 0 0
}

.body {
  width: 70px;
  height: 40px;
  bottom: -14px;
  z-index: 1;
  transform: translateX(-50%);
  background-color: #36508a
}

.body:after {
  content: '';
  width: 60px;
  height: 30px;
  transform: translateX(-50%);
  background-color: #4563a5;
  bottom: 5px
}

.face,
.neck {
  background-color: #f6d2be;
  -webkit-transform: translateX(-50%)
}

.face,
.face:after,
.neck {
  border-radius: 0 0 50px 50px;
  position: absolute;
  left: 50%
}

.eye:after,
.face:after {
  background-color: #fddac5;
  content: ''
}

.neck {
  width: 26px;
  height: 26px;
  bottom: 4px;
  z-index: 4;
  transform: translateX(-50%)
}

.face {
  width: 78px;
  height: 58px;
  bottom: 26px;
  transform: translateX(-50%)
}

.face:after {
  width: 68px;
  height: 52px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.eye {
  width: 12px;
  height: 12px;
  background-color: #533d34;
  position: absolute;
  left: 15px;
  top: 14px;
  z-index: 5;
  border-radius: 50px
}

.eye:after,
.nose {
  position: absolute;
  height: 14px
}

.eye:nth-child(2) {
  left: auto;
  right: 15px
}

.eye:after {
  width: 16px;
  left: -2px;
  border-radius: 50%;
  -webkit-animation: 3.5s cubic-bezier(.4, 0, 1, 1) infinite alternate eyeMove;
  animation: 3.5s cubic-bezier(.4, 0, 1, 1) infinite alternate eyeMove
}

@-webkit-keyframes eyeMove {
  0%,
  15%,
  30%,
  45% {
    -webkit-transform: translateY(16px) translateZ(0)
  }
  100%,
  60% {
    -webkit-transform: translateY(4px) translateZ(0)
  }
}

@keyframes eyeMove {
  0%,
  15%,
  30%,
  45% {
    transform: translateY(16px) translateZ(0)
  }
  100%,
  60% {
    transform: translateY(4px) translateZ(0)
  }
}

.hat,
.nose {
  -webkit-transform: translateX(-50%)
}

.nose {
  background-color: #efc2a3;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  z-index: 5;
  border-radius: 20px
}

.hat,
.hat:before {
  border-radius: 50px 50px 0 0;
  left: 50%;
  background-color: #4563a5;
  position: absolute
}

.hat {
  height: 42px;
  width: 78px;
  top: 4px;
  transform: translateX(-50%);
  z-index: 5
}

.hair-left,
.hair-right {
  top: 46px;
  z-index: 5;
  height: 14px
}

.hat:before {
  height: 6px;
  width: 10px;
  content: '';
  top: -3px;
  margin-left: -5px
}

.hat:after {
  height: 8px;
  width: 42px;
  background-color: #4563a5;
  position: absolute;
  content: '';
  border-radius: 50px 0 0 50px;
  bottom: 0;
  left: -38px
}

.hair-left {
  background-color: #5e3919;
  position: absolute;
  left: 48px;
  width: 8px;
  border-radius: 0 0 0 50px
}

.hair-left:before,
.hair-right {
  border-radius: 0 0 50px;
  background-color: #5e3919;
  position: absolute;
  width: 8px
}

.hair-left:before {
  content: '';
  top: 0;
  left: 8px;
  height: 8px
}

.hair-right {
  right: 48px
}

.hair-right:before {
  content: '';
  position: absolute;
  top: 0;
  right: 8px;
  width: 8px;
  height: 8px;
  background-color: #5e3919;
  border-radius: 0 0 0 50px
}

.hair-middle {
  background-color: #5e3919;
  top: 45px;
  left: 49%;
  width: 14px;
  height: 6px;
  border-radius: 0 0 100px 100px;
  position: absolute;
  z-index: 4;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) rotate(-15deg)
}

.hair-middle:after {
  content: '';
  position: absolute;
  top: -4px;
  right: -3px;
  width: 8px;
  height: 14px;
  border-radius: 0 50px 50px 0;
  background-color: #5e3919;
  transform: rotate(-15deg)
}

.hat-hair:after,
.hat-hair:before {
  height: 8px;
  background-color: #5e3919;
  position: absolute;
  content: ''
}

.hat-hair {
  width: 24px;
  height: 10px;
  background-color: #5e3919;
  border-radius: 50px 50px 0 0;
  position: absolute;
  bottom: 10px;
  right: 6px
}

.hat-hair:before {
  width: 8px;
  top: -5px;
  right: 3px;
  border-radius: 0 50px 0 0
}

.hat-hair:after {
  width: 14px;
  top: 2px;
  right: -10px;
  border-radius: 0 0 50px
}

.hat-close {
  position: absolute;
  bottom: 0;
  right: 2px;
  width: 28px;
  height: 10px;
  border-radius: 0 100px 100px 0;
  background-color: #879ed0
}

.mouth {
  width: 18px;
  height: 8px;
  border-radius: 0 0 50px 50px;
  background-color: #fff;
  position: absolute;
  bottom: 11px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 12
}

.ear-left,
.ear-right {
  position: absolute;
  top: 50px;
  width: 16px;
  height: 24px;
  background-color: #f6d2be
}

.ear-left {
  left: 40px;
  border-radius: 50px 0 0 50px
}

.ear-right {
  right: 40px;
  border-radius: 0 50px 50px 0
}

.clock,
.clock:before {
  border-radius: 50%;
  position: absolute
}

.clock {
  width: 80px;
  height: 80px;
  background-color: #eae4df;
  right: 16px;
  top: 24px
}

.marker-top,
.pointer-hour,
.pointer-min {
  background-color: #e0dddb
}

.clock:before {
  content: '';
  width: 66px;
  height: 66px;
  background-color: #f6f7f8;
  top: 7px;
  left: 7px;
  z-index: 2
}

.book.one,
.book.three:after,
.book.two {
  background-color: #fff
}

.pointer-min {
  height: 22px;
  width: 4px;
  border-radius: 0 0 50px 50px;
  position: absolute;
  left: 50%;
  top: calc(50% + 10px);
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-30deg);
  transform: translateX(-50%) translateY(-50%) rotate(-30deg);
  z-index: 20;
  transform-origin: top;
  -webkit-animation: 30s linear infinite min;
  animation: 30s linear infinite min
}

.pointer,
.pointer-hour {
  top: 50%;
  position: absolute
}

.floating,
.yellowside img {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out
}

@-webkit-keyframes min {
  0% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-30deg)
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(330deg)
  }
}

@keyframes min {
  0% {
    transform: translateX(-50%) translateY(-50%) rotate(-30deg)
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotate(330deg)
  }
}

.pointer-hour {
  width: 14px;
  height: 4px;
  border-radius: 50px 0 0 50px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 20;
  left: 22px
}

.pointer {
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 10px;
  height: 10px;
  border: 3px solid #e0dddb;
  background-color: #f6f7f8;
  border-radius: 50%;
  z-index: 30
}

.cup,
.cup:after {
  border-right: 4px solid transparent
}

.marker-top {
  width: 6px;
  height: 6px;
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 20;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.marker-left,
.marker-right {
  width: 6px;
  height: 6px;
  background-color: #e0dddb;
  top: 50%;
  z-index: 20;
  position: absolute;
  border-radius: 50%
}

.marker-right {
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.marker-bottom {
  width: 6px;
  height: 6px;
  background-color: #e0dddb;
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 20;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%)
}

.marker-left {
  left: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%)
}

.cup {
  width: 36px;
  height: 60px;
  position: absolute;
  bottom: 90px;
  z-index: 20;
  right: 56px;
  border-top: 50px solid #fff;
  border-left: 4px solid transparent
}

.cup-cover,
.progress-wrap {
  bottom: 150px
}

.cup:after {
  content: '';
  position: absolute;
  right: -1px;
  top: -46px;
  width: 4px;
  border-top: 38px solid rgba(220, 220, 220, .41);
  border-left: 0 solid transparent
}

.cup-cover,
.cup-cover:after {
  z-index: 21;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  position: absolute
}

.cup-cover {
  width: 44px;
  right: 52px;
  border-bottom: 6px solid #ce4646
}

.cup-cover:after {
  content: '';
  width: 32px;
  right: 2px;
  bottom: 0;
  border-bottom: 4px solid #af4242
}

.book.one {
  position: absolute;
  bottom: 100px;
  width: 64px;
  height: 16px;
  left: 46px;
  border-top: 3px solid #fb904d;
  border-right: 6px solid #fb904d;
  border-bottom: 3px solid #fb904d;
  border-radius: 0 4px 4px 0
}

.book.three,
.book.two {
  height: 20px;
  position: absolute
}

.book.two {
  bottom: 116px;
  width: 70px;
  left: 44px;
  border-top: 3px solid #45a58b;
  border-right: 11px solid #45a58b;
  border-bottom: 3px solid #45a58b;
  border-radius: 0 7px 8px 0
}

.book.three {
  bottom: 136px;
  width: 62px;
  left: 48px;
  background-color: #ff443d
}

.book.three:after {
  content: '';
  position: absolute;
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.fonts_icon {
  font-size: 50px;
  color: #000;
  margin-top: 40px
}

.bg_yellow,
.text-black {
  color: #343f52
}

.fonts_icon2 {
  margin-top: 10px;
  width: 100%;
  clear: both;
  display: block
}

.fonts_icon2 .uil {
  font-size: 25px;
  color: #000;
  line-height: 25px
}

.fonts_icon2 b {
  color: #666
}

.inners_ts {
  width: 100%;
  background-color: #f7f7f7;
  padding: 50px 0 0;
  margin-bottom: 50px;
  min-height: 500px
}

.pb-100 {
  padding-bottom: 100px
}

.form-control,
.form-floating>.form-control {
  background-color: #fff
}

.marg_b_t {
  margin-top: 50px;
  margin-bottom: 100px
}

.bg_colr {
  background-color: #f5f5fc
}

.inne_tes .glyph-icon {
  line-height: 0
}

.fonts_icon2 .glyph-icon {
  line-height: 1
}

.navbar {
  min-height: 0;
  margin-bottom: 0
}

.whiteside,
.yellowside {
  max-height: 110vh;
  min-height: 110vh;
  overflow: hidden;
  background-size: auto 90%;
  background-repeat: no-repeat
}

.foot_cols h2,
.foot_cols h3,
.image-wrapper .meta,
.image-wrapper p {
  color: #000000
}

.inner_box_dic p,
p {
  font-weight: 400;
  line-height: 28px
}

.item-inner .card {
  min-height: 350px
}

.btn-primary.btn-circle.ripple::after,
.btn-primary.btn-circle.ripple::before,
.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,
.plyr--video .plyr__controls .plyr__control:hover,
.plyr--video .plyr__controls .plyr__control[aria-expanded=true] {
  background-color: #fbec04
}

.inner_box_dic p {
  font-size: 18px;
  margin-bottom: 10px
}

.inne_tes h3,
.page_5 h1 {
  font-weight: 700
}

.page_5 h1 {
  font-size: 30px
}

.inne_tes h3,
p {
  font-size: 1.15rem;
  line-height:35px;
}

.btn-white {
  background-color: #fcf13f;
  border-color: #fcf13f
}

.bg_yellow,
.yellowside {
  background-color: #fbed03
}

.btn-outline-white {
  border-color: #fcf13f;
  color: #343f52
}

.bg_yellow {
  border-color: #fbed03
}

body,
tml {
  scroll-behavior: smooth
}

.fill {
  width: 100%;
  height: 110vh;
  margin-top: -100px
}

.yellowside {
  padding: 0;
  background-image: url(../images/logopart3.png);
  background-position: right center;
  color: #000;
  position: relative
}

.whiteside {
  background-image: url(../images/logopart2.png);
  background-position: left center;
  padding-bottom: 90px
}

.overly {
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  z-index: 100;
  opacity: 0;
  background-image: url(../images/logopart3.png);
  background-size: auto 90%;
  background-repeat: no-repeat;
  background-position: right center
}

.inner_box_dic {
  width: 60%;
  margin: 220px auto 0
}

.watsapp_img1,
.watsapp_img2 {
  width: 70px;
  height: 70px;
  z-index: 100;
  bottom: 10px;
  position: fixed
}

.welcome_outer {
  background-size: 60%
}

.inner_box_dic img {
  max-width: 350px
}

.inner_texts {
  padding-left: 100px
}

.floating {
  margin-left: 30px;
  margin-top: 5px
}

.watsapp_img1 {
  left: 10px;
  animation: 1s infinite shake2
}

.watsapp_img2 {
  left: 75px
}

.magics_ops {
  margin-top: 50px !important
}

.inners_ts h1 {
  margin-top: 150px
}

.watsapp_img1 img,
.watsapp_img2 img {
  min-width: 100%
}

.inner_contactform {
  ;
  background-repeat: no-repeat;
  background-position: center bottom
}

.inner_bg_2,
.inner_bg_over {
  background-image: url(../images/bg1.webp)
}

.padd_on_desk {
  padding-top: 50px
}

.mar_gin_ads {
  margin-top: -100px !important
}

.rounded-4-lg-start {
  border-radius: 0 20px 20px 0 !important
}

@keyframes floating {
  0%,
  100% {
    transform: translate(0, 0)
  }
  50% {
    transform: translate(0, 30px)
  }
}

@keyframes shake2 {
  0% {
    transform: translate(1px, 1px) rotate(0)
  }
  10% {
    transform: translate(-1px, -2px) rotate(0deg)
  }
  20% {
    transform: translate(-3px, 0) rotate(1deg)
  }
  30% {
    transform: translate(3px, 2px) rotate(0)
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg)
  }
  50% {
    transform: translate(-1px, 2px) rotate(0deg)
  }
  60% {
    transform: translate(-3px, 1px) rotate(0)
  }
  70% {
    transform: translate(3px, 1px) rotate(0deg)
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg)
  }
  90% {
    transform: translate(1px, 2px) rotate(0)
  }
  100% {
    transform: translate(1px, -2px) rotate(0deg)
  }
}

@media (max-width:768px) {
  .whiteside,
  .yellowside {
    padding-bottom: 50px;
    min-height: 300px;
    height: auto
  }
  .down_btn,
  .whiteside {
    display: none
  }
  .fill,
  .yellowside img {
    max-width: 100%
  }
  .yellowside {
    float: left
  }
  .whiteside {
    margin-top: 100px
  }
  .inner_box_dic {
    width: 80%;
    margin-top: 50px
  }
  .welcome_outer {
    background-size: 100%
  }
  .fill {
    height: auto;
    overflow: hidden
  }
  .inner_texts {
    padding-left: 30px
  }
  .foot_cols {
    text-align: center;
    padding-top: 15px;
    margin-bottom: 15px
  }
  .foot_cols .footer_social {
    margin: 0 auto;
    text-align: center;
    width: 60%
  }
  .need_help {
    margin-top: 15px;
    padding: 0;
    min-height: 100px
  }
  .watsapp_img1,
  .watsapp_img2 {
    width: 50px;
    height: 50px
  }
}

@media (min-width:769px) and (max-width:1024px) {
  .inner_contactform .inner_padding {
    padding: 50px
  }
  .inner_box_dic {
    width: 80%
  }
  .inner_box_dic img {
    max-width: 100%
  }
  .yellowside img {
    max-width: 500px
  }
  .inner_texts {
    padding-left: 50px
  }
}

@media (min-width:1025px) and (max-width:1200px) {
  .inner_contactform .inner_padding {
    padding: 50px
  }
  .inner_box_dic {
    width: 80%
  }
  .inner_box_dic img {
    max-width: 100%
  }
  .yellowside img {
    max-width: 500px
  }
  .inner_texts {
    padding-left: 50px
  }
}

.mobi_magbottm {
  text-align: right;
  padding-top: 5px;
}


.padd_desktop { padding:0px 100px;}

@media (max-width: 768px) {
  .mobi_magbottm {
    margin-bottom: 30px !important;
    text-align: left;
  }
  
  .padd_desktop { padding:0px 15px;}
}