/*-------------------------------------------------
 =  Table of Css

 1.Import google fonts & basic style of template
 2.Header
 3.Isotope filtering
 4.Kenburn slider basic
 5.General
 6.testimonial section
 7.Team Sections
 8.services page
 9.portfolio section
 10.clients section
 11.feature section
 12.News section
 13.Sidebar
 14.Statistic sections
 15.About sections
 16.Single Project
 17.Contact
 18.Footer
 19.Responsive part
-------------------------------------------------*/
/* import google fonts */
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900|Poppins:300,400,500,600,700");
.reset-elem, .dropdown, .page-list ul, section.team-section .team-box .team-post .inner-team-post ul.social-icons, section.what-we-do .what-we-do-upper .what-we-box .inner-content ul, section.what-we-do2 .what-we-do-upper .what-we-box .inner-content ul, section.portfolio-section ul.filter, section.clients-section .clients-box ul.client-list, section.feature-section .feature-box .feature-post ul.list-features, section.blog-section .blog-box .blog-post ul.post-meta, .pagination-list-box ul.pages-list, .sidebar .category-widget ul, .sidebar .popular-widget ul.popular-list, .sidebar .tags-widget ul.tags-list, section.blog-section .blog-box.single-post .share-tags-box ul.share-list, section.blog-section .blog-box.single-post .share-tags-box ul.tags-list, section.blog-section .blog-box.single-post ul.share-project, .comment-area-box > ul, section.contact-section ul.info-list, footer .up-footer .footer-widget ul.social-icons, footer .up-footer .footer-widget ul.recent-posts, footer .up-footer .footer-widget ul.instagram-list {
  margin: 0;
  padding: 0; }

.paragraph, p, section.blog-section .blog-box .blog-post ul.post-meta li {
  font-size: 13px;
  color: #666666;
  font-family: "Merriweather", serif;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 10px; }

.heading1, h1 {
  color: #222222;
  font-size: 48px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  line-height: 56px;
  margin: 0 0 20px; }

.heading2, h2 {
  color: #222222;
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  margin: 0 0 15px;
  line-height: 28px; }

.heading3, h3 {
  color: #999999;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  margin: 0 0 4px;
  line-height: 28px; }

.back-cover {
  background-size: cover !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important; }

.anchor, a {
  display: inline-block;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

/*------------------------------------------------- */
/* =  Header
 *------------------------------------------------- */
.navbar {
  padding: 0 15px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  border-bottom: none;
  width: 100%;
  z-index: 999999;
  background: transparent !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }
  .navbar a.navbar-brand {
    float: none; }
    .navbar a.navbar-brand img {
      margin-bottom: 5px; }

header {
  padding: 0;
  z-index: 99999;
  position: relative; }
  header a.open-close-menu {
    color: #fff;
    font-size: 13px; }

header.active {
  padding-bottom: 90px; }
  header.active .navbar {
    background: #232323 !important; }

.navbar-nav {
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  padding-top: 46px;
  padding-bottom: 46px; }
  .navbar-nav > li > a {
    color: #fff !important;
    font-size: 12px;
    font-weight: 500 !important;
    font-family: "Poppins", sans-serif;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    padding: 6px 22px !important;
    margin: 0 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border: 2px solid transparent;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    border-radius: 20px; }
    .navbar-nav > li > a i {
      font-size: 13px;
      margin-left: 10px; }
  .navbar-nav > li > a.active,
  .navbar-nav > li > a:hover {
    border: 2px solid #fff; }
  .navbar-nav li.drop-link {
    position: relative; }

.navbar-nav.active > li > a {
  opacity: 0;
  visibility: hidden; }

.navbar-collapse {
  position: relative; }

.dropdown {
  position: absolute;
  border-top: 2px solid #0080ff;
  top: 100%;
  left: 0;
  background: #fff;
  width: 200px;
  visibility: hidden;
  opacity: 0;
  margin-top: 10px;
  transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out; }
  .dropdown > li {
    position: relative;
    display: block;
    border-bottom: 1px solid #e3e1f3; }
    .dropdown > li a {
      display: block;
      padding: 14px 20px;
      color: #6c7a89;
      font-size: 12px;
      font-weight: 600;
      font-family: "Poppins", sans-serif;
      text-transform: uppercase; }
    .dropdown > li > a:hover {
      background: #f2f4f8;
      color: #0080ff; }
    .dropdown > li .dropdown.level2 {
      top: -2px;
      left: 100%;
      border-left: 1px solid #292929; }

li:hover > .dropdown {
  visibility: visible;
  opacity: 1;
  margin-top: -1px; }

/**
 * Allows you to use retina images at various pixel densities.
 * Examples:
 *
 *   @include retina(/images/mypic.jpg, 2);
 *   @include retina(/images/mypic.jpg, 3, 100px 100px, left top no-repeat transparent);
 *
 * @param  {Value}  $path               The path to the file name minus extension.
 * @param  {Number} $cap:    2          The highest pixel density level images exist for.
 * @param  {Value}  $size:   auto auto  The intended width of the rendered image.
 * @param  {Value}  $extras: null       Any other `background` values to be added.
 */
/*-------------------------------------------------- */
/* 1. Isotope filtering */
/*------------------------------------------------- */
.isotope-item {
  z-index: 2; }

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1; }

.isotope, .isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  transition-property: transform, opacity; }

/*-----------------------------------------------------------------------------
 *
 *KENBURNER RESPONSIVE BASIC STYLES OF HTML DOCUMENT
 *
 *Screen Stylesheet
 *
 *version:    1.0
 *date:       07/27/11
 *author:     themepunch
 *email:      support@themepunch.com
 *website:    http://www.themepunch.com */
/*----------------------------------------------------------------------------- */
.boxedcontainer {
  max-width: 1170px;
  margin: auto;
  padding: 0px 30px; }

/*********************************************
 *    -   SETTINGS FOR BANNER CONTAINERS  -
 ********************************************* */
.tp-banner-container {
  width: 100%;
  position: relative;
  padding: 0; }

.tp-banner {
  width: 100%;
  position: relative; }

.tp-banner-fullscreen-container {
  width: 100%;
  position: relative;
  padding: 0; }

/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
.title-section {
  text-align: center;
  margin-bottom: 80px;
  position: relative; }
  .title-section p {
    max-width: 500px;
    margin: 0 auto;
    color: #999999;
    line-height: 24px; }

.title-section.white-style h1 {
  color: #ffffff; }

.title-section.white-style span {
  color: #c5cae9; }

#home-section {
  overflow: hidden;
  background: #111111; }
  #home-section .tp-caption.Concept-Title {
    font-size: 72px;
    font-family: "Poppins", sans-serif;
    font-weight: 700 !important;
    letter-spacing: -2px !important; }
  #home-section .tp-caption.Concept-SubTitle {
    font-family: "Poppins", sans-serif;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: center;
    font-size: 20px;
    color: #bdbdbd; }
  #home-section .persephone .tp-bullet {
    width: 30px;
    height: 3px;
    background: rgba(255, 255, 255, 0.5);
    border: none; }
  #home-section .persephone .tp-bullet:hover, #home-section .persephone .tp-bullet.selected {
    background: #fff; }

a.button-white {
  color: #0080ff;
  font-size: 11px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  padding: 9px 50px;
  background: #fff;
  font-weight: 600;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  border-radius: 24px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out; }

a.button-white:hover {
  color: #fff;
  background: #0080ff; }

a.button-one {
  color: #fff;
  font-size: 12px;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  padding: 12px 45px;
  background: #0080ff;
  letter-spacing: 1px;
  font-weight: 500;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  border-radius: 24px;
  transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  margin: 0; }

a.button-one:hover {
  color: #0080ff;
  background: #fff; }

.center-button {
  text-align: center; }

a.button-two {
  color: #222222;
  font-size: 13px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  padding: 13px 20px 10px;
  text-transform: uppercase;
  border: 2px solid #222222;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  border-radius: 25px; }

a.button-two:hover {
  background: #222222;
  color: #fff; }

button.mfp-close, button.mfp-arrow, a.zoom {
  outline: none; }

section.page-banner-section {
  padding: 60px 0;
  text-align: center;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban3.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section {
      background: #111 url("../upload/banners/ban3@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section {
      background: #111 url("../upload/banners/ban3@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.page-banner-section .page-banner-box {
    padding: 140px 0 90px; }
  section.page-banner-section h1 {
    font-size: 48px;
    line-height: 60px;
    color: #ffffff;
    margin-bottom: 0px; }

section.page-banner-section.services-banner {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban5.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.services-banner {
      background: #111 url("../upload/banners/ban5@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.services-banner {
      background: #111 url("../upload/banners/ban5@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.portfolio-banner {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban6.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.portfolio-banner {
      background: #111 url("../upload/banners/ban6@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.portfolio-banner {
      background: #111 url("../upload/banners/ban6@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.blog-banner {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban7.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.blog-banner {
      background: #111 url("../upload/banners/ban7@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.blog-banner {
      background: #111 url("../upload/banners/ban7@2x.jpg") center center no-repeat;
      background-size: cover; } }

section.page-banner-section.contact-banner {
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban8.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.page-banner-section.contact-banner {
      background: #111 url("../upload/banners/ban8@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.page-banner-section.contact-banner {
      background: #111 url("../upload/banners/ban8@2x.jpg") center center no-repeat;
      background-size: cover; } }

.page-list {
  text-align: center;
  padding: 18px;
  background: #fff;
  border-bottom: 1px solid #eeeeee; }
  .page-list ul li {
    display: inline-block;
    margin-right: 4px; }
    .page-list ul li a {
      color: #999999;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      border-bottom: 1px solid transparent; }
    .page-list ul li a:hover {
      color: #0080ff;
      border-bottom: 1px solid #0080ff; }
  .page-list ul li:before {
    content: '\f105';
    font-family: 'FontAwesome';
    font-size: 10px;
    color: #999999;
    margin-right: 6px; }
  .page-list ul li:first-child:before {
    content: '';
    margin-right: 0; }

.ban-line-section {
  background: #0080ff;
  padding: 70px;
  text-align: center; }
  .ban-line-section h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 0; }

.ban-line-section.second-style {
  background: #fff;
  text-align: center; }
  .ban-line-section.second-style h2 {
    color: #222222; }
    .ban-line-section.second-style h2 span {
      display: inline-block;
      margin-right: 100px; }
    .ban-line-section.second-style h2 a {
      line-height: 20px; }

/*------------------------------------------------- */
/* =  testimonial section
/*------------------------------------------------- */
section.testimonial-section {
  padding: 120px 0 140px;
  background: #fff;
  text-align: center; }
  section.testimonial-section i {
    color: #0080ff;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 40px; }
  section.testimonial-section .testimonial-box .testimonial-post {
    margin-bottom: 0px; }
    section.testimonial-section .testimonial-box .testimonial-post img {
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      margin-bottom: 25px;
      max-width: 100px;
      height: auto; }
    section.testimonial-section .testimonial-box .testimonial-post p {
      font-size: 17px;
      max-width: 600px;
      margin: 0 auto 40px;
      line-height: 30px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.testimonial-section .testimonial-box .testimonial-post h2 {
      margin-bottom: -6px; }
    section.testimonial-section .testimonial-box .testimonial-post a {
      display: inline-block;
      font-size: 13px;
      color: #666666;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      line-height: 18px;
      color: #0080ff;
      text-decoration: underline !important; }

.owl-theme .owl-controls {
  margin-top: 40px; }

.owl-theme .owl-controls .owl-buttons {
  display: none; }

.owl-theme .owl-controls .owl-page span {
  background: #999999;
  border: 2px solid transparent;
  width: 10px;
  height: 10px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%; }

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {
  background: transparent;
  border-color: #e0e0e0; }

/*------------------------------------------------- */
/* =  Team Sections */
/*------------------------------------------------- */
section.team-section {
  padding: 100px 0;
  background: #ffffff; }
  section.team-section .team-box {
    margin-left: -15px;
    margin-right: -15px; }
    section.team-section .team-box .team-post {
      text-align: center;
      margin: 0 15px; }
      section.team-section .team-box .team-post .inner-team-post {
        position: relative;
        z-index: 2; }
        section.team-section .team-box .team-post .inner-team-post .image-hover {
          position: relative; }
        section.team-section .team-box .team-post .inner-team-post .image-hover:after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: transparent;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out; }
        section.team-section .team-box .team-post .inner-team-post img {
          width: 100%;
          margin-bottom: 35px; }
        section.team-section .team-box .team-post .inner-team-post h2 {
          margin-bottom: 0; }
        section.team-section .team-box .team-post .inner-team-post p {
          font-size: 12px;
          color: #999999;
          position: relative;
          padding-bottom: 32px; }
        section.team-section .team-box .team-post .inner-team-post ul.social-icons {
          opacity: 0;
          position: absolute;
          width: 100%;
          text-align: center;
          left: 0;
          top: 50%;
          margin-top: -70px;
          z-index: 2;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out; }
          section.team-section .team-box .team-post .inner-team-post ul.social-icons li {
            display: inline-block;
            margin: 0 4px; }
            section.team-section .team-box .team-post .inner-team-post ul.social-icons li a {
              color: #666666;
              font-size: 15px; }
            section.team-section .team-box .team-post .inner-team-post ul.social-icons li a:hover {
              color: #0080ff; }
      section.team-section .team-box .team-post .inner-team-post:after {
        content: '';
        position: absolute;
        bottom: 0px;
        top: 20px;
        left: 20px;
        right: 20px;
        border: 2px solid #0080ff;
        opacity: 0;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out; }
    section.team-section .team-box .team-post:hover .inner-team-post .image-hover:after {
      background: rgba(255, 255, 255, 0.9); }
    section.team-section .team-box .team-post:hover .inner-team-post ul.social-icons {
      opacity: 1; }
    section.team-section .team-box .team-post:hover .inner-team-post:after {
      opacity: 1; }

/*------------------------------------------------- */
/* =  services page */
/*------------------------------------------------- */
section.services-section {
  padding: 140px 0;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban1.jpg") center bottom no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.services-section {
      background: #111 url("../upload/banners/ban1@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.services-section {
      background: #111 url("../upload/banners/ban1@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  section.services-section .services-box {
    padding-bottom: 15px;
    min-height: 360px; }
    section.services-section .services-box .services-post {
      margin-bottom: 70px; }
      section.services-section .services-box .services-post span, section.services-section .services-box .services-post i {
        color: #0080ff;
        font-size: 42px;
        display: inline-block;
        float: left;
        padding-top: 5px; }
      section.services-section .services-box .services-post .services-content {
        margin-left: 100px; }
      section.services-section .services-box .services-post h2 {
        color: #fff; }
      section.services-section .services-box .services-post p {
        color: #cccccc; }

section.services-section2 {
  padding: 100px 0;
  background: #f9f9f9; }
  section.services-section2 .services-box {
    margin-bottom: 70px; }
    section.services-section2 .services-box .services-post {
      margin-bottom: 30px;
      padding: 45px 65px;
      background: #fff; }
      section.services-section2 .services-box .services-post h2 {
        line-height: 42px;
        margin-bottom: 30px; }
        section.services-section2 .services-box .services-post h2 i, section.services-section2 .services-box .services-post h2 span {
          display: inline-block;
          color: #0080ff;
          font-size: 36px;
          margin-right: 20px;
          float: left; }
      section.services-section2 .services-box .services-post p {
        color: #999999;
        margin-bottom: 0; }
  section.services-section2 .center-area p, section.services-section2 .center-area h1 {
    margin-bottom: 30px; }

section.what-we-do {
  background: #222222;
  overflow: hidden;
  position: relative;
  padding: 70px 0; }
  section.what-we-do div.image-holder {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    overflow: hidden; }
  section.what-we-do img {
    width: 100%;
    height: auto; }
  section.what-we-do .what-we-do-upper {
    position: relative;
    z-index: 2; }
    section.what-we-do .what-we-do-upper .what-we-box {
      border: 2px solid #fff;
      padding: 80px 60px; }
      section.what-we-do .what-we-do-upper .what-we-box .inner-content {
        width: 40%; }
        section.what-we-do .what-we-do-upper .what-we-box .inner-content h1 {
          color: #fff;
          margin-bottom: 30px; }
        section.what-we-do .what-we-do-upper .what-we-box .inner-content p {
          margin-bottom: 30px;
          color: #999999; }
        section.what-we-do .what-we-do-upper .what-we-box .inner-content ul li {
          display: block;
          color: #eee;
          font-size: 13px;
          font-family: "Poppins", sans-serif;
          line-height: 28px;
          margin-bottom: 2px; }
        section.what-we-do .what-we-do-upper .what-we-box .inner-content ul li:before {
          content: '\f00c';
          font-size: 10px;
          font-family: 'FontAwesome';
          line-height: 28px;
          color: #0080ff;
          margin-right: 10px; }

section.what-we-do2 {
  background: #fff;
  overflow: hidden;
  position: relative; }
  section.what-we-do2 img {
    width: 50%;
    height: auto; }
  section.what-we-do2 .what-we-do-upper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center; }
    section.what-we-do2 .what-we-do-upper .what-we-box {
      padding-left: 60px; }
      section.what-we-do2 .what-we-do-upper .what-we-box .inner-content h1 {
        margin-bottom: 30px; }
      section.what-we-do2 .what-we-do-upper .what-we-box .inner-content p {
        margin-bottom: 30px;
        color: #999999; }
      section.what-we-do2 .what-we-do-upper .what-we-box .inner-content ul li {
        display: block;
        color: #666666;
        font-size: 13px;
        font-family: "Poppins", sans-serif;
        line-height: 28px;
        margin-bottom: 2px; }
      section.what-we-do2 .what-we-do-upper .what-we-box .inner-content ul li:before {
        content: '\f00c';
        font-size: 10px;
        font-family: 'FontAwesome';
        line-height: 28px;
        color: #0080ff;
        margin-right: 10px; }

/*------------------------------------------------- */
/* =  portfolio section */
/*------------------------------------------------- */
section.portfolio-section {
  padding: 140px 0 0; }
  section.portfolio-section ul.filter {
    margin-bottom: 80px;
    text-align: center; }
    section.portfolio-section ul.filter li {
      display: inline-block;
      margin: 0;
      margin-right: 15px; }
      section.portfolio-section ul.filter li a {
        color: #666666;
        font-size: 14px;
        font-family: "Poppins", sans-serif;
        font-weight: 400;
        border-bottom: 1px solid transparent; }
      section.portfolio-section ul.filter li a:hover,
      section.portfolio-section ul.filter li a.active {
        color: #0080ff;
        border-bottom: 1px solid #0080ff; }
    section.portfolio-section ul.filter li:before {
      content: '|';
      color: #ccc;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      font-weight: 400;
      margin-right: 20px; }
    section.portfolio-section ul.filter li:first-child:before {
      content: '';
      margin-right: 0; }
    section.portfolio-section ul.filter li:last-child {
      margin-right: 0; }
  section.portfolio-section .portfolio-box.iso-call {
    margin-left: -15px;
    margin-right: -15px; }
    section.portfolio-section .portfolio-box.iso-call .project-post {
      margin: 15px;
      width: 350px; }
  section.portfolio-section .portfolio-box {
    overflow: hidden;
    margin-bottom: 30px; }
    section.portfolio-section .portfolio-box .project-post {
      padding-bottom: 20px;
      float: left;
      width: 25%;
      position: relative; }
      section.portfolio-section .portfolio-box .project-post img {
        width: 100%;
        height: auto; }
      section.portfolio-section .portfolio-box .project-post .project-content {
        text-align: center;
        padding: 25px 10px;
        position: relative;
        z-index: 3; }
        section.portfolio-section .portfolio-box .project-post .project-content h2 {
          font-size: 15px;
          margin-bottom: 0px; }
          section.portfolio-section .portfolio-box .project-post .project-content h2 a {
            color: #222222; }
          section.portfolio-section .portfolio-box .project-post .project-content h2 a:hover {
            color: #0080ff; }
        section.portfolio-section .portfolio-box .project-post .project-content span {
          display: block;
          margin: 0;
          color: #bbbbbb;
          font-size: 12px;
          font-family: "Merriweather", serif;
          font-style: italic;
          font-weight: 400;
          line-height: 20px; }
      section.portfolio-section .portfolio-box .project-post .hover-box {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        border: 2px solid #0080ff;
        z-index: 2;
        opacity: 0; }
        section.portfolio-section .portfolio-box .project-post .hover-box a.zoom {
          position: absolute;
          top: 50%;
          margin-top: -40px;
          left: 50%;
          margin-left: -10px;
          color: #0080ff;
          font-size: 26px;
          line-height: 26px;
          text-align: center; }
        section.portfolio-section .portfolio-box .project-post .hover-box a.zoom:hover {
          opacity: 0.7; }
    section.portfolio-section .portfolio-box .project-post:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.8);
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.portfolio-section .portfolio-box .project-post:hover:before {
      opacity: 1; }
    section.portfolio-section .portfolio-box .project-post:hover .hover-box {
      opacity: 1; }

section.portfolio-section.portfolio-page {
  background: #f9f9f9;
  padding: 90px 0; }

/*------------------------------------------------- */
/* =  clients section */
/*------------------------------------------------- */
section.clients-section {
  padding: 80px 0;
  border-top: 1px solid #eeeeee; }
  section.clients-section .clients-box {
    max-width: 1660px;
    margin: 0 auto; }
    section.clients-section .clients-box ul.client-list {
      overflow: hidden; }
      section.clients-section .clients-box ul.client-list li {
        float: left;
        width: 16.666666%;
        list-style: none;
        text-align: center; }
        section.clients-section .clients-box ul.client-list li a {
          padding: 10px 30px;
          text-align: center;
          opacity: 0.4;
          width: auto;
          max-width: 100%; }
          section.clients-section .clients-box ul.client-list li a img {
            max-width: 100%;
            height: auto; }
        section.clients-section .clients-box ul.client-list li a:hover {
          opacity: 1; }

/*------------------------------------------------- */
/* =  feature section */
/*------------------------------------------------- */
section.feature-section {
  padding: 140px 0 300px;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/1.jpg") center bottom no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.feature-section {
      background: #111 url("../upload/banners/1@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.feature-section {
      background: #111 url("../upload/banners/1@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  section.feature-section .feature-box .feature-post {
    margin-bottom: 30px; }
    section.feature-section .feature-box .feature-post h2 {
      font-size: 24px;
      line-height: 50px;
      margin-bottom: 20px; }
      section.feature-section .feature-box .feature-post h2 span, section.feature-section .feature-box .feature-post h2 i {
        color: #0080ff;
        font-size: 46px;
        margin-right: 30px;
        float: left;
        display: inline-block; }
    section.feature-section .feature-box .feature-post p {
      color: #999999;
      margin-bottom: 25px; }
    section.feature-section .feature-box .feature-post ul.list-features li {
      display: block;
      color: #666666;
      font-size: 13px;
      font-family: "Poppins", sans-serif;
      line-height: 28px;
      margin-bottom: 2px; }
    section.feature-section .feature-box .feature-post ul.list-features li:before {
      content: '\f00c';
      font-size: 10px;
      font-family: 'FontAwesome';
      line-height: 28px;
      color: #999999;
      margin-right: 10px; }

/*------------------------------------------------- */
/* =  News section */
/*------------------------------------------------- */
section.news-section {
  padding: 140px 0;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban2.jpg") center bottom no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.news-section {
      background: #111 url("../upload/banners/ban2@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.news-section {
      background: #111 url("../upload/banners/ban2@2x.jpg") center bottom no-repeat;
      background-size: cover; } }
  section.news-section .news-box {
    margin-left: -15px;
    margin-right: -15px; }
    section.news-section .news-box .news-post {
      padding: 0 15px; }
      section.news-section .news-box .news-post p.auth-paragraph {
        font-family: "Poppins", sans-serif; }
        section.news-section .news-box .news-post p.auth-paragraph a {
          color: #666666; }
        section.news-section .news-box .news-post p.auth-paragraph a:hover {
          color: #0080ff; }
      section.news-section .news-box .news-post p {
        margin-bottom: 15px; }
      section.news-section .news-box .news-post h2 {
        font-size: 24px;
        margin-bottom: 30px; }
        section.news-section .news-box .news-post h2 a {
          color: #222222; }
        section.news-section .news-box .news-post h2 a:hover {
          color: #0080ff; }
      section.news-section .news-box .news-post > a {
        color: #0080ff;
        font-size: 13px;
        font-family: "Poppins", sans-serif; }
      section.news-section .news-box .news-post > a:hover {
        text-decoration: underline !important; }

section.blog-section {
  padding: 100px 0;
  background: #f9f9f9; }
  section.blog-section .blog-box .blog-post {
    margin-bottom: 50px;
    box-shadow: 0 10px 25px #f3f3f3;
    -webkit-box-shadow: 0 10px 25px #f3f3f3;
    -moz-box-shadow: 0 10px 25px #f3f3f3;
    -o-box-shadow: 0 10px 25px #f3f3f3; }
    section.blog-section .blog-box .blog-post img, section.blog-section .blog-box .blog-post iframe {
      width: 100%;
      height: auto; }
    section.blog-section .blog-box .blog-post .flexslider img {
      margin-bottom: 0; }
    section.blog-section .blog-box .blog-post iframe {
      height: 340px;
      border: none; }
    section.blog-section .blog-box .blog-post .post-content {
      padding: 40px 100px;
      background: #fff; }
      section.blog-section .blog-box .blog-post .post-content > a {
        color: #0080ff;
        font-size: 13px;
        font-family: "Poppins", sans-serif; }
      section.blog-section .blog-box .blog-post .post-content > a:hover {
        text-decoration: underline !important; }
    section.blog-section .blog-box .blog-post h2 {
      font-size: 24px;
      margin-bottom: 30px; }
      section.blog-section .blog-box .blog-post h2 a {
        color: #222222; }
      section.blog-section .blog-box .blog-post h2 a:hover {
        color: #0080ff; }
    section.blog-section .blog-box .blog-post ul.post-meta {
      margin-bottom: 20px; }
      section.blog-section .blog-box .blog-post ul.post-meta li {
        display: inline-block;
        font-family: "Poppins", sans-serif;
        margin-bottom: 0; }
        section.blog-section .blog-box .blog-post ul.post-meta li a {
          color: #666666; }
        section.blog-section .blog-box .blog-post ul.post-meta li a:hover {
          color: #0080ff; }
    section.blog-section .blog-box .blog-post p {
      margin-bottom: 20px; }

.pagination-list-box {
  margin-bottom: 20px;
  overflow: hidden; }
  .pagination-list-box a.prev,
  .pagination-list-box a.next {
    color: #666666;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    margin-bottom: 0;
    margin-top: -30px; }
  .pagination-list-box a.prev:hover,
  .pagination-list-box a.next:hover {
    color: #0080ff; }
  .pagination-list-box a.prev {
    float: left; }
  .pagination-list-box a.next {
    float: right; }
  .pagination-list-box ul.pages-list {
    text-align: center; }
    .pagination-list-box ul.pages-list li {
      display: inline-block; }
      .pagination-list-box ul.pages-list li a {
        width: 30px;
        height: 30px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        text-align: center;
        color: #999999;
        font-size: 13px;
        font-family: "Poppins", sans-serif;
        line-height: 30px; }
      .pagination-list-box ul.pages-list li a:hover,
      .pagination-list-box ul.pages-list li a.active {
        color: #fff;
        background: #0080ff; }

/*------------------------------------------------- */
/* =  Sidebar */
/*------------------------------------------------- */
.sidebar {
  padding-right: 70px;
  margin-bottom: 60px; }
  .sidebar .widget {
    margin-bottom: 50px; }
  .sidebar .search-widget input[type="search"] {
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #eeeeee;
    width: 100%;
    outline: none;
    color: #999999;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    background: #fff;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out; }
  .sidebar .search-widget button {
    background: transparent;
    border: none;
    float: right;
    margin-top: -36px;
    margin-right: 15px;
    position: relative;
    z-index: 2; }
  .sidebar .search-widget button i {
    color: #999999;
    font-size: 13px; }
  .sidebar .text-widget p {
    font-family: "Merriweather", serif;
    margin-bottom: 0; }
  .sidebar .category-widget ul li {
    list-style: none;
    margin-bottom: 10px; }
    .sidebar .category-widget ul li a {
      color: #666666;
      font-size: 13px;
      font-family: "Merriweather", serif;
      position: relative;
      padding-left: 14px; }
    .sidebar .category-widget ul li a:before {
      content: '';
      position: absolute;
      top: 7px;
      left: 0;
      width: 5px;
      height: 5px;
      background: #999999;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    .sidebar .category-widget ul li a:hover {
      color: #222222; }
    .sidebar .category-widget ul li a:hover:before {
      background: #222222; }
  .sidebar .category-widget ul li:last-child {
    margin-bottom: 0px; }
  .sidebar .popular-widget ul.popular-list li {
    list-style: none;
    overflow-y: hidden;
    margin-bottom: 20px; }
    .sidebar .popular-widget ul.popular-list li img {
      float: left;
      max-width: 70px; }
    .sidebar .popular-widget ul.popular-list li .side-content {
      margin-left: 90px;
      padding-top: 4px; }
      .sidebar .popular-widget ul.popular-list li .side-content h2 {
        font-size: 13px;
        line-height: 20px;
        font-weight: 400;
        margin-bottom: 0px; }
        .sidebar .popular-widget ul.popular-list li .side-content h2 a {
          color: #666666; }
        .sidebar .popular-widget ul.popular-list li .side-content h2 a:hover {
          color: #0080ff; }
      .sidebar .popular-widget ul.popular-list li .side-content span {
        display: inline-block;
        margin: 0;
        color: #999;
        font-size: 11px;
        font-family: "Merriweather", serif;
        font-style: italic; }
  .sidebar .popular-widget ul.popular-list li:last-child {
    margin-bottom: 0; }
  .sidebar .tags-widget ul.tags-list li {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 5px; }
    .sidebar .tags-widget ul.tags-list li a {
      color: #999999;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      padding: 4px 6px;
      border: 2px solid #eeeeee; }
    .sidebar .tags-widget ul.tags-list li a:hover {
      color: #ffffff;
      border: 2px solid #222222;
      background: #222222; }

/*------------------------------------------------- */
/* =  Statistic sections*/
/*------------------------------------------------- */
section.statistic-section {
  padding: 100px 0;
  /*
   * Set a counter and get the length of the image path.
   */
  /*
   * Loop ver the image path and figure out the
   * position of the dot where the extension begins.
   */
  /*
   * If we were able to figure out where the extension is,
   * slice the path into a base and an extension. Use that to
   * calculate urls for different density environments. Set
   * values for different environments.
   */
  /*
     * Set a base background for 1x environments.
     */
  background: #111 url("../upload/banners/ban4.jpg") center center no-repeat;
  background-size: cover;
  /*
     * Create an @2x-ish media query.
     */
  /*
     * Create media queries for all environments that the user has
     * provided images for.
     */
  /*
   * If anything went wrong trying to separate the file from its
   * extension, set a background value without doing anything to it.
   */ }
  @media all and (-webkit-min-device-pixel-ratio: 1.5), all and (-o-min-device-pixel-ratio: 3 / 2), all and (min--moz-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 1.5) {
    section.statistic-section {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.statistic-section {
      background: #111 url("../upload/banners/ban4@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.statistic-section .statistic-post {
    margin-bottom: 30px; }
    section.statistic-section .statistic-post span.lnr, section.statistic-section .statistic-post i {
      color: #fff;
      display: inline-block;
      margin-bottom: 20px;
      font-size: 32px; }
    section.statistic-section .statistic-post h1 {
      color: #fff;
      margin-bottom: 10px; }
    section.statistic-section .statistic-post p {
      color: #fff;
      font-size: 14px;
      margin: 0; }

/*------------------------------------------------- */
/* =  About sections */
/*------------------------------------------------- */
section.about-section {
  padding: 100px 0;
  position: relative;
  background: #f9f9f9; }
  section.about-section .container {
    position: relative;
    z-index: 2; }
  section.about-section .about-box {
    padding-bottom: 30px; }
    section.about-section .about-box .about-post {
      margin-bottom: 50px; }
      section.about-section .about-box .about-post img {
        width: 100%;
        height: auto;
        margin-bottom: 20px; }
      section.about-section .about-box .about-post h2 {
        margin-bottom: 40px;
        font-size: 24px; }
    section.about-section .about-box .about-post-image {
      margin-bottom: 30px; }
      section.about-section .about-box .about-post-image img {
        width: 100%;
        height: auto; }
  section.about-section .skills-box {
    padding-top: 30px; }
    section.about-section .skills-box .skills-progress > p {
      margin-bottom: 15px;
      font-family: "Poppins", sans-serif; }
    section.about-section .skills-box .skills-progress div.meter {
      height: 4px;
      background: #eeeeee;
      margin-bottom: 40px;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      -ms-border-radius: 3px;
      border-radius: 3px;
      overflow: hidden; }
      section.about-section .skills-box .skills-progress div.meter p {
        height: 100%;
        background: #0080ff; }

/*------------------------------------------------- */
/* =  Single Post */
/*------------------------------------------------- */
section.blog-section .blog-box.single-post img {
  margin-bottom: 30px;
  width: 100%;
  height: auto; }

section.blog-section .blog-box.single-post .post-content {
  margin-top: -30px; }

section.blog-section .blog-box.single-post p {
  margin-bottom: 30px; }

section.blog-section .blog-box.single-post .share-tags-box {
  padding-top: 30px;
  border-top: 1px solid #eeeeee;
  margin-bottom: 30px; }
  section.blog-section .blog-box.single-post .share-tags-box ul.share-list li {
    display: inline-block;
    margin-right: 1px;
    margin-bottom: 1px; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li span {
      color: #666666;
      font-size: 14px;
      font-family: "Poppins", sans-serif;
      margin-right: 10px; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li a {
      padding: 6px 12px;
      color: #fff;
      font-size: 12px;
      font-family: "Poppins", sans-serif; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li a:hover {
      opacity: 0.7; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li a.facebook {
      background: #474ad5; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li a.twitter {
      background: #56a3d8; }
    section.blog-section .blog-box.single-post .share-tags-box ul.share-list li a.google {
      background: #e45b5b; }
  section.blog-section .blog-box.single-post .share-tags-box ul.tags-list {
    text-align: right; }
    section.blog-section .blog-box.single-post .share-tags-box ul.tags-list li {
      display: inline-block;
      margin-right: 1px;
      margin-bottom: 1px; }
      section.blog-section .blog-box.single-post .share-tags-box ul.tags-list li span {
        color: #666666;
        font-size: 13px;
        font-family: "Poppins", sans-serif;
        margin-right: 6px; }
      section.blog-section .blog-box.single-post .share-tags-box ul.tags-list li a {
        color: #999999;
        font-size: 12px;
        font-family: "Merriweather", serif; }
      section.blog-section .blog-box.single-post .share-tags-box ul.tags-list li a:hover {
        color: #222222;
        text-decoration: underline !important; }

section.blog-section .blog-box.single-post ul.share-project {
  margin-top: 30px;
  margin-bottom: 40px; }
  section.blog-section .blog-box.single-post ul.share-project li {
    display: inline-block;
    color: #333333;
    font-size: 15px;
    font-family: "Poppins", sans-serif;
    margin-right: 12px; }
    section.blog-section .blog-box.single-post ul.share-project li a {
      font-size: 14px;
      color: #bdbdbd; }
    section.blog-section .blog-box.single-post ul.share-project li a:hover {
      color: #0080ff; }

.center-area {
  text-align: center; }

.comment-area-box {
  margin-bottom: 40px;
  padding-bottom: 40px;
  padding-top: 40px;
  border-bottom: 1px solid #eeeeee; }
  .comment-area-box > ul {
    padding-top: 10px; }
    .comment-area-box > ul li {
      list-style: none; }
      .comment-area-box > ul li .comment-box {
        overflow: hidden;
        margin-bottom: 55px; }
        .comment-area-box > ul li .comment-box img {
          max-width: 70px;
          float: left;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%; }
        .comment-area-box > ul li .comment-box .comment-content {
          margin-left: 100px; }
          .comment-area-box > ul li .comment-box .comment-content h4 {
            color: #222222;
            font-size: 14px;
            font-family: "Poppins", sans-serif;
            font-weight: 600;
            margin: 0; }
          .comment-area-box > ul li .comment-box .comment-content span, .comment-area-box > ul li .comment-box .comment-content a {
            font-size: 12px;
            color: #999999;
            font-family: "Merriweather", serif;
            display: inline-block;
            margin: 0 0 16px; }
          .comment-area-box > ul li .comment-box .comment-content a {
            font-family: "Poppins", sans-serif;
            float: right;
            margin-top: -10px; }
          .comment-area-box > ul li .comment-box .comment-content a:hover {
            color: #0080ff; }
          .comment-area-box > ul li .comment-box .comment-content p {
            margin-bottom: 0px; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 100px; }

.contact-form-box h2 {
  margin-bottom: 0; }

.contact-form-box > span {
  display: block;
  font-size: 12px;
  color: #999999;
  font-family: "Merriweather", serif;
  display: inline-block;
  font-style: italic;
  margin: 0 0 25px; }

.contact-form-box #comment-form {
  margin: 0; }
  .contact-form-box #comment-form input[type="text"],
  .contact-form-box #comment-form textarea {
    width: 100%;
    padding: 10px 20px;
    background: #fff;
    color: #999999;
    font-size: 13px;
    font-family: "Poppins", sans-serif;
    outline: none;
    border: 1px solid #eeeeee;
    margin: 0 0 30px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px; }
  .contact-form-box #comment-form textarea {
    height: 120px;
    margin-bottom: 30px; }
  .contact-form-box #comment-form input[type="submit"] {
    color: #fff;
    font-size: 12px;
    font-family: "Poppins", sans-serif;
    text-transform: uppercase;
    padding: 12px 45px;
    background: #0080ff;
    font-weight: 500;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    -ms-border-radius: 24px;
    border-radius: 24px;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    margin: 0;
    border: none; }
  .contact-form-box #comment-form input[type="submit"]:hover {
    color: #fff;
    background: #222222; }

/*------------------------------------------------- */
/* =  Single Project */
/*------------------------------------------------- */
section.single-portfolio-section {
  padding: 140px 0;
  background: #f9f9f9; }
  section.single-portfolio-section .single-portfolio-box {
    margin-bottom: 70px; }
    section.single-portfolio-section .single-portfolio-box h1 {
      margin-bottom: 80px; }
    section.single-portfolio-section .single-portfolio-box .single-galery .project-gal {
      margin-bottom: 30px; }
      section.single-portfolio-section .single-portfolio-box .single-galery .project-gal a {
        display: block; }
        section.single-portfolio-section .single-portfolio-box .single-galery .project-gal a img {
          width: 100%;
          height: auto; }
    section.single-portfolio-section .single-portfolio-box .project-content {
      padding-top: 20px; }
      section.single-portfolio-section .single-portfolio-box .project-content p {
        color: #999999;
        margin-bottom: 20px; }
    section.single-portfolio-section .single-portfolio-box .project-details {
      padding-top: 60px; }
      section.single-portfolio-section .single-portfolio-box .project-details p {
        margin-bottom: 0;
        color: #999999; }
        section.single-portfolio-section .single-portfolio-box .project-details p span {
          color: #222222; }

section.similar-projects-section {
  padding: 100px 0;
  background: #fff; }
  section.similar-projects-section .similar-projects-box {
    margin-left: -15px;
    margin-right: -15px; }
    section.similar-projects-section .similar-projects-box .item {
      margin: 0 15px; }
    section.similar-projects-section .similar-projects-box .project-post {
      padding-bottom: 20px;
      position: relative; }
      section.similar-projects-section .similar-projects-box .project-post img {
        width: 100%;
        height: auto; }
      section.similar-projects-section .similar-projects-box .project-post .project-content {
        text-align: center;
        padding: 25px 10px;
        position: relative;
        z-index: 3; }
        section.similar-projects-section .similar-projects-box .project-post .project-content h2 {
          font-size: 15px;
          margin-bottom: 0px; }
          section.similar-projects-section .similar-projects-box .project-post .project-content h2 a {
            color: #222222; }
          section.similar-projects-section .similar-projects-box .project-post .project-content h2 a:hover {
            color: #0080ff; }
        section.similar-projects-section .similar-projects-box .project-post .project-content span {
          display: block;
          margin: 0;
          color: #bbbbbb;
          font-size: 12px;
          font-family: "Merriweather", serif;
          font-style: italic;
          font-weight: 400;
          line-height: 20px; }
      section.similar-projects-section .similar-projects-box .project-post .hover-box {
        position: absolute;
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        border: 2px solid #0080ff;
        z-index: 2;
        opacity: 0; }
        section.similar-projects-section .similar-projects-box .project-post .hover-box a.zoom {
          position: absolute;
          top: 50%;
          margin-top: -40px;
          left: 50%;
          margin-left: -10px;
          color: #0080ff;
          font-size: 26px;
          line-height: 26px;
          text-align: center; }
        section.similar-projects-section .similar-projects-box .project-post .hover-box a.zoom:hover {
          opacity: 0.7; }
    section.similar-projects-section .similar-projects-box .project-post:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.8);
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.similar-projects-section .similar-projects-box .project-post:hover:before {
      opacity: 1; }
    section.similar-projects-section .similar-projects-box .project-post:hover .hover-box {
      opacity: 1; }

/*------------------------------------------------- */
/* =  Contact */
/*------------------------------------------------- */
#map {
  width: 100%;
  height: 500px; }

section.contact-section {
  padding: 100px 0;
  background: #f9f9f9; }
  section.contact-section #contact-form {
    margin: 0;
    padding: 45px 100px;
    background: #ffffff; }
    section.contact-section #contact-form h2 {
      font-size: 24px;
      margin-bottom: 30px; }
    section.contact-section #contact-form input[type="text"],
    section.contact-section #contact-form textarea {
      width: 100%;
      padding: 10px 20px;
      background: transparent;
      color: #999999;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      outline: none;
      border: 1px solid #cccccc;
      margin: 0 0 30px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out; }
    section.contact-section #contact-form input[type="text"]:focus,
    section.contact-section #contact-form textarea:focus {
      border: 1px solid #0080ff; }
    section.contact-section #contact-form textarea {
      height: 120px;
      margin-bottom: 30px; }
    section.contact-section #contact-form input[type="submit"] {
      color: #fff;
      font-size: 12px;
      font-family: "Poppins", sans-serif;
      text-transform: uppercase;
      padding: 12px 30px;
      background: #0080ff;
      font-weight: 500;
      -webkit-border-radius: 24px;
      -moz-border-radius: 24px;
      -ms-border-radius: 24px;
      border-radius: 24px;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      margin: 0;
      border: none; }
    section.contact-section #contact-form input[type="submit"]:hover {
      opacity: 0.7; }
  section.contact-section .contact-details {
    margin-bottom: 50px;
    padding-left: 50px; }
    section.contact-section .contact-details p {
      color: #999999; }
  section.contact-section ul.info-list li {
    display: block;
    margin-bottom: 0px;
    font-size: 13px;
    font-family: "Merriweather", serif;
    color: #999999;
    line-height: 26px; }
    section.contact-section ul.info-list li i {
      color: #0080ff;
      font-size: 14px;
      margin-right: 10px; }

/*------------------------------------------------- */
/* =  Footer */
/*------------------------------------------------- */
footer {
  padding-top: 100px;
  background: #222222; }
  footer .up-footer {
    padding-bottom: 30px; }
    footer .up-footer .footer-widget {
      margin-bottom: 60px; }
      footer .up-footer .footer-widget h3 {
        color: #fff;
        font-weight: 600 !important;
        font-size: 18px;
        margin-bottom: 40px; }
      footer .up-footer .footer-widget h2 {
        color: #fff;
        font-size: 24px;
        margin-bottom: 40px; }
      footer .up-footer .footer-widget img {
        margin-top: 8px;
        margin-bottom: 40px; }
      footer .up-footer .footer-widget p {
        color: #757575;
        margin-bottom: 20px; }
        footer .up-footer .footer-widget p span {
          color: #bdbdbd; }
      footer .up-footer .footer-widget ul.social-icons li {
        display: inline-block;
        margin-right: 6px; }
        footer .up-footer .footer-widget ul.social-icons li a {
          color: #fff;
          width: 40px;
          height: 40px;
          border: 2px solid #757575;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          line-height: 36px;
          text-align: center;
          background: transparent;
          font-size: 14px; }
        footer .up-footer .footer-widget ul.social-icons li a:hover {
          border: 2px solid #999999;
          background: #999999; }
      footer .up-footer .footer-widget ul.recent-posts li {
        display: block;
        margin-bottom: 20px; }
        footer .up-footer .footer-widget ul.recent-posts li h2 {
          font-size: 13px;
          color: #999999;
          font-family: "Merriweather", serif;
          font-weight: 400;
          margin-bottom: 1px; }
          footer .up-footer .footer-widget ul.recent-posts li h2 a {
            color: #999999; }
          footer .up-footer .footer-widget ul.recent-posts li h2 a:hover {
            color: #0080ff; }
        footer .up-footer .footer-widget ul.recent-posts li > a {
          color: #777777;
          font-size: 13px;
          font-family: "Poppins", sans-serif; }
        footer .up-footer .footer-widget ul.recent-posts li > a:hover {
          opacity: 0.7; }
      footer .up-footer .footer-widget ul.recent-posts li:last-child {
        margin-bottom: 0; }
      footer .up-footer .footer-widget ul.instagram-list li {
        display: inline-block;
        margin-bottom: 14px;
        margin-right: 10px; }
        footer .up-footer .footer-widget ul.instagram-list li a img {
          max-width: 72px;
          height: auto;
          margin: 0; }
      footer .up-footer .footer-widget form.subscribe input[type="text"] {
        padding: 12px 20px;
        border: 1px solid transparent;
        outline: none;
        background: #fff;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        border-radius: 0px;
        width: 100%;
        color: #999999;
        font-size: 13px;
        font-family: "Merriweather", serif;
        font-weight: 400;
        margin: 0; }
      footer .up-footer .footer-widget form.subscribe input[type="submit"] {
        float: right;
        margin-top: -45px;
        color: #fff;
        font-size: 13px;
        font-family: "Merriweather", serif;
        padding: 12px 30px 12px;
        background: #0080ff;
        font-weight: 400;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        -ms-border-radius: 0px;
        border-radius: 0px;
        transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        outline: none;
        border: 1px solid transparent;
        position: relative;
        z-index: 2;
        cursor: pointer; }
      footer .up-footer .footer-widget form.subscribe input[type="submit"]:hover {
        background: #fff;
        color: #0080ff; }
    footer .up-footer .social-widget h3 {
      margin-bottom: 25px; }
  footer p.copyright-line {
    text-align: center;
    padding: 30px 0;
    color: #757575;
    background: #1e1e1e; }

/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1920px) {
  section.what-we-do img {
    width: auto;
    height: 100%; } }

@media (max-width: 1199px) {
  section.portfolio-section .portfolio-box.iso-call .project-post {
    width: 290px; }
  section.page-banner-section h1 {
    font-size: 30px;
    line-height: 40px; }
  section.what-we-do2 .what-we-do-upper .what-we-box {
    padding-left: 30px; }
  section.contact-section .contact-details {
    padding-left: 0; }
  #map {
    height: 400px; } }

@media (max-width: 991px) {
  .navbar-brand {
    padding: 25px 0px 20px; }
  .navbar-toggle {
    margin-top: 20px; }
  .navbar-nav {
    background: #222222;
    padding-top: 15px;
    padding-bottom: 15px; }
  .navbar-nav > li > a {
    padding: 5px 10px;
    border: none !important; }
  .navbar a.open-close-menu {
    display: none; }
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a.active {
    color: #0080ff !important; }
  section.what-we-do .what-we-do-upper .what-we-box {
    padding: 40px 30px; }
  section.what-we-do2 img {
    width: 100%;
    height: auto;
    margin-bottom: 70px; }
  section.what-we-do2 .what-we-do-upper {
    position: relative;
    height: auto;
    top: initial;
    display: block;
    padding-bottom: 70px; }
  section.what-we-do2 .what-we-do-upper .what-we-box {
    padding-left: 0px; }
  section.clients-section .clients-box ul.client-list li,
  section.portfolio-section .portfolio-box .project-post {
    width: 33.333333%; }
  section.portfolio-section .portfolio-box.iso-call .project-post {
    width: 330px; }
  section.contact-section #contact-form {
    margin-bottom: 50px;
    padding: 30px; }
  .sidebar {
    padding-right: 0; }
  section.blog-section .blog-box .blog-post iframe {
    height: 300px; }
  #map {
    height: 300px; } }

@media (max-width: 767px) {
  .ban-line-section.second-style h2 span {
    display: block;
    margin-right: 0;
    margin-bottom: 15px; }
  section.what-we-do {
    padding: 0 0 70px; }
    section.what-we-do div.image-holder {
      position: relative;
      width: 100%;
      height: auto;
      margin-bottom: 70px; }
      section.what-we-do div.image-holder img {
        width: 100%;
        height: auto; }
    section.what-we-do .what-we-do-upper .what-we-box .inner-content {
      width: 100%; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 0; }
  section.clients-section .clients-box ul.clients-list li {
    width: 33.3333333%; }
  section.portfolio-section .portfolio-box .project-post {
    width: 50%; }
  .tparrows {
    display: none !important; }
  #home-section .tp-caption.Concept-Title {
    letter-spacing: 0px !important; }
  section.portfolio-section .portfolio-box.iso-call .project-post {
    width: 100%;
    margin: 15px 0; }
  section.portfolio-section .portfolio-box.iso-call {
    margin-left: 0;
    margin-right: 0; }
  ul.depth {
    padding-left: 0; }
  section.services-section2 .services-box .services-post {
    padding: 30px; }
  section.blog-section .blog-box .blog-post .post-content {
    padding: 40px 30px; }
  section.blog-section .blog-box .blog-post iframe {
    height: 200px; }
  section.blog-section .blog-box.single-post .share-tags-box ul.tags-list {
    text-align: left;
    margin-top: 30px; }
  #map {
    height: 200px; } }

@media (max-width: 500px) {
  section.portfolio-section .portfolio-box .project-post {
    width: 100%; }
  section.clients-section .clients-box ul.client-list li {
    width: 50%; } }