/*-------------------------------------------------
 =  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 Section
 8.services page
 9.portfolio section
 10.clients section
 11.feature section
 12.Quote section
 13.News section
 14.Sidebar
 15.Statistic section
 16.About sections
 17.Single Post
 18.Single Project
 19.Contact
 20.Footer
 21.Responsive part
-------------------------------------------------*/
/* import google fonts */
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,500,600,700,800,900|Montserrat:400,500,600,700|Roboto:300,300i,400,400i,500,500i,700");
.reset-elem, .dropdown, .fixed-vertical-header .inner-fixed-vertical ul.social-list, .page-list ul, section.team-section .team-box .team-post .hover-box ul.social-icons, section.portfolio-section ul.filter, .sidebar .social-widget ul.social-list, .sidebar .instagram-widget ul.insta-list, .sidebar .popular-widget ul.popular-list, .sidebar .tags-widget ul.tags-list, .sidebar .category-widget ul, section.single-post-section .single-box ul.post-tags, section.single-post-section .single-box ul.list-post, section.single-post-section .single-box .share-tags-box ul.share-list, section.single-post-section .single-box .share-tags-box ul.tags-list, .comment-area-box > ul, .comment-area-box ul.depth, footer .up-footer .footer-widget ul.social-icons {
  margin: 0;
  padding: 0; }

.paragraph, p {
  font-size: 15px;
  color: #37404d;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  line-height: 26px;
  margin: 0 0 10px;
  text-align:center; }

.heading1, h1 {
  color: #37404d;
  font-size: 30px;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  line-height: 38px;
  margin: 0 0 15px; }

.heading2, h2, .comment-area-box > ul li .comment-box .comment-content h4 {
  color: #37404d;
  font-size: 21px;
  font-family: "Raleway", sans-serif;
  font-weight: 800;
  text-transform: capitalize;
  margin: 0 0 10px;
  line-height: 30px; }

.heading3, h3 {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #37404d;
  margin: 0 0 5px;
  text-transform: uppercase; }

.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: rgba(255, 255, 255, 0.85) !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; }
  .navbar a.navbar-brand {
    float: none; }
    .navbar a.navbar-brand img {
      margin-bottom: 5px; }

.navbar-toggler {
  outline: none !important;
  cursor: pointer; }

header {
  padding: 0;
  z-index: 99999;
  position: relative; }
  header a.open-close-menu {
    color: #37404d;
    font-size: 12px; }
  header a.open-search {
    color: #37404d;
    font-size: 12px;
    margin-right: 20px; }

header.active {
  padding-bottom: 90px; }
  header.active .navbar {
    background: #fff !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; }
  .navbar-nav > li > a {
    color: #37404d !important;
    font-size: 12px;
    font-family: "Montserrat", 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: 25px 20px !important;
    margin: 0 3px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    border: none;
    -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 {
    color: #000 !important; }
  .navbar-nav li.drop-link {
    position: relative; }

header.transparent-style .navbar {
  background: transparent !important; }

header.transparent-style .navbar-nav > li > a {
  color: #fff !important; }

header.transparent-style .navbar-nav > li > a:hover {
  color: #39559a !important; }

header.transparent-style a.open-close-menu,
header.transparent-style a.open-search {
  color: #fff; }

header.transparent-style.active .navbar {
  background: #37404d !important; }

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

.navbar-collapse {
  position: relative; }

.dropdown {
  position: absolute;
  border-top: 2px solid #39559a;
  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: "Raleway", sans-serif;
      text-transform: uppercase; }
    .dropdown > li > a:hover {
      background: #f2f4f8;
      color: #39559a; }
    .dropdown > li .dropdown.level2 {
      top: -2px;
      left: 100%;
      border-left: 1px solid #292929; }

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

.search-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  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; }
  .search-area div {
    display: flex;
    width: 900px;
    max-width: 100%; }
  .search-area .search-form {
    margin: 0;
    text-align: center;
    position: relative;
    width: 900px;
    max-width: 100%; }
    .search-area .search-form input {
      background: transparent;
      border: 1px solid #cecece;
      padding: 5px 35px 11px;
      outline: none;
      color: #37404d;
      font-size: 34px;
      font-family: "Raleway", sans-serif;
      font-weight: 600;
      width: 100%;
      -webkit-border-radius: 44px;
      -moz-border-radius: 44px;
      -ms-border-radius: 44px;
      border-radius: 44px; }
    .search-area .search-form button {
      position: absolute;
      top: 16px;
      right: 36px;
      background: transparent;
      border: none;
      outline: none;
      color: #37404d;
      font-size: 25px !important;
      padding: 0; }
  .search-area a.close-search {
    display: inline-block;
    color: #37404d;
    position: relative;
    margin-right: 20px;
    margin-top: 20px; }
    .search-area a.close-search i {
      font-size: 25px; }
  .search-area a.close-search:hover {
    color: #39559a; }

.search-area.active {
  visibility: visible;
  opacity: 1; }

.fixed-header {
  position: fixed;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 9999999;
  top: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -webkit-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out; }

.fixed-header.active {
  visibility: visible;
  opacity: 1; }

.fixed-vertical-header {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: -345px;
  width: 345px;
  height: 100%;
  background: #131415;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out; }
  .fixed-vertical-header .inner-fixed-vertical {
    text-align: center; }
    .fixed-vertical-header .inner-fixed-vertical a.logo {
      width: 100%;
      padding: 80px 20px;
      border-bottom: 1px solid #252627; }
    .fixed-vertical-header .inner-fixed-vertical .navbar-vertical {
      padding: 80px 20px;
      border-bottom: 1px solid #252627; }
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li {
        display: block;
        position: relative;
        margin-bottom: 8px; }
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li a {
        color: #fff;
        font-size: 15px;
        font-family: "Montserrat", 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: 0;
        margin: 0;
        line-height: 30px;
        text-transform: uppercase;
        position: relative; }
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li:last-child {
        margin-bottom: 0; }
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li a.active,
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li a:hover {
        color: #39559a; }
      .fixed-vertical-header .inner-fixed-vertical .navbar-vertical li.drop-link {
        position: relative; }
    .fixed-vertical-header .inner-fixed-vertical ul.social-list {
      margin: 40px 0 30px; }
      .fixed-vertical-header .inner-fixed-vertical ul.social-list li {
        display: inline-block;
        margin-right: 6px;
        margin-bottom: 2px; }
        .fixed-vertical-header .inner-fixed-vertical ul.social-list li a {
          color: #37404d;
          width: 30px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          background: #f1f1f1;
          font-size: 14px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%; }
        .fixed-vertical-header .inner-fixed-vertical ul.social-list li a:hover {
          color: #fff;
          background: #39559a; }
      .fixed-vertical-header .inner-fixed-vertical ul.social-list li:last-child {
        margin-right: 0; }
    .fixed-vertical-header .inner-fixed-vertical p {
      color: #fff;
      font-size: 13px;
      line-height: 22px;
      margin-bottom: 0; }
  .fixed-vertical-header a.close-menu {
    position: absolute;
    top: 80px;
    left: -50px;
    width: 30px;
    height: 30px; }
    .fixed-vertical-header a.close-menu span {
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px;
      height: 22px;
      background: #fff;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius: 2px;
      border-radius: 2px;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      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; }
    .fixed-vertical-header a.close-menu span:last-child {
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
  .fixed-vertical-header a.close-menu:hover span {
    background: #39559a; }

.fixed-vertical-header.active {
  margin-right: 0; }

/**
 * 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: 40px;
  position: relative; }
  .title-section p {
    max-width: 500px;
    margin: 0 auto; }
  .title-section h1 {
    padding-top: 20px;
    position: relative; }
  .title-section h1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -25px;
    width: 50px;
    height: 2px;
    background: #39559a; }

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

#home-section {
  overflow: hidden;
  background: #111111; }
  #home-section .tp-caption.Concept-Title {
    font-size: 40px;
    font-family: "Raleway", sans-serif;
    font-weight: 800 !important;
    letter-spacing: 0px !important; }
    #home-section .tp-caption.Concept-Title span {
      color: #39559a; }
  #home-section .tp-caption.Concept-Title.black-style {
    color: #37404d; }
    #home-section .tp-caption.Concept-Title.black-style span {
      color: #39559a; }
  #home-section .tp-caption.NotGeneric-SubTitle {
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 300 !important;
    letter-spacing: 0px !important; }
  #home-section .tp-caption.NotGeneric-SubTitle.black-style {
    color: #37404d; }
  #home-section .tp-caption.Concept-SubTitle {
    font-family: "Raleway", sans-serif;
    font-style: normal !important;
    font-weight: 400 !important;
    text-align: center;
    font-size: 20px;
    color: #bdbdbd; }
    #home-section .tp-caption.Concept-SubTitle a {
      margin-right: 10px; }
  #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; }
  #home-section .gyges .tp-thumb-img-wrap {
    padding: 0;
    background: transparent; }
  #home-section .gyges .tp-thumb {
    opacity: 0.7; }
  #home-section .gyges .tp-thumb.selected {
    opacity: 1; }

a.button-white {
  color: #39559a;
  font-size: 11px;
  font-family: "Raleway", sans-serif;
  text-transform: capitalize;
  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: #39559a; }

a.button-one {
  color: #fff;
  font-size: 15px;
  font-family: "Raleway", sans-serif;
  text-transform: capitalize;
  padding: 13px 45px;
  background: #39559a;
  font-weight: 700;
  -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 {
  opacity: 0.7; }

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

a.button-two {
  color: #39559a;
  font-size: 15px;
  font-family: "Raleway", sans-serif;
  text-transform: capitalize;
  padding: 12px 30px 10px;
  border: 2px solid #39559a;
  font-weight: 700;
  -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-two:hover {
  background: #39559a;
  color: #fff; }

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

section.page-banner-section {
  padding: 60px 0;
  text-align: left;
  /*
   * 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("../images/hakkimizda.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("../images/hakkimizda.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("../images/hakkimizda.jpg") center center no-repeat;
      background-size: cover; } }
  section.page-banner-section .page-banner-box {
    padding: 140px 0 80px; }
  section.page-banner-section h1 {
    font-size: 40px;
    line-height: 50px;
    color: #ffffff;
    margin-bottom: 0px; }

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: #fff url("../images/urunler.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: #fff url("../images/urunler.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: #fff url("../images/urunler.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("../images/markalar.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("../images/markalar.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("../images/markalar.jpg") center center no-repeat;
      background-size: cover; } }
  section.page-banner-section.blog-banner h1 {
    color: #37404d; }

.page-list {
  text-align: center;
  padding: 10px 0 0; }
  .page-list ul li {
    display: inline-block;
    margin: 0 3px; }
    .page-list ul li a {
      padding: 12px 19px;
      color: #37404d;
      font-size: 13px;
      font-family: "Raleway", sans-serif;
      font-weight: 900;
      text-transform: uppercase;
      background: #f1f1f1;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      -ms-border-radius: 25px;
      border-radius: 25px; }
    .page-list ul li a.prev,
    .page-list ul li a.next {
      padding: 12px 30px; }
    .page-list ul li a.prev i {
      margin-right: 4px; }
    .page-list ul li a.next i {
      margin-left: 4px; }
    .page-list ul li a:hover {
      color: #fff;
      background: #39559a; }

/*------------------------------------------------- */
/* =  testimonial section
/*------------------------------------------------- */
section.testimonial-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/ban2.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.
   */
  text-align: center; }
  @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.testimonial-section {
      background: #111 url("../upload/banners/ban2@2x.jpg") center center no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.testimonial-section {
      background: #111 url("../upload/banners/ban2@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.testimonial-section i {
    color: #39559a;
    display: inline-block;
    font-size: 24px;
    margin-bottom: 40px; }
  section.testimonial-section .testimonial-box .testimonial-post {
    margin-bottom: 0px;
    padding: 0 15px; }
    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: 14px;
      font-weight: 400;
      margin-bottom: 0; }
    section.testimonial-section .testimonial-box .testimonial-post h2 {
      font-size: 19px;
      margin-bottom: -4px; }
    section.testimonial-section .testimonial-box .testimonial-post span {
      display: inline-block;
      font-size: 13px;
      color: #666666;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      line-height: 18px;
      color: #696969;
      margin-bottom: 10px; }

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

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

.owl-theme .owl-controls .owl-page span {
  background: #cecece;
  border: none;
  width: 15px;
  height: 15px;
  -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: #39559a;
  border: none; }

/*------------------------------------------------- */
/* =  Team Sections */
/*------------------------------------------------- */
section.team-section {
  padding: 100px 0;
  background: #f1f1f1; }
  section.team-section .team-box .team-post {
    margin-bottom: 50px;
    position: relative;
    text-align: center; }
    section.team-section .team-box .team-post img {
      width: 100%;
      height: auto; }
    section.team-section .team-box .team-post .hover-box {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8);
      /* For browsers that do not support gradients */
      background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.8));
      z-index: 2;
      opacity: 0;
      visibility: hidden;
      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-box .inner-hover {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; }
      section.team-section .team-box .team-post .hover-box h2 {
        color: #fff;
        margin-bottom: 0; }
      section.team-section .team-box .team-post .hover-box span {
        display: inline-block;
        font-size: 15px;
        color: #fff;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        margin: 0 0 100px;
        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-box ul.social-icons {
        padding: 24px 0;
        border-top: 1px solid #5b5b5b;
        margin-bottom: -40px;
        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-box ul.social-icons li {
          display: inline-block;
          margin: 0 10px; }
          section.team-section .team-box .team-post .hover-box ul.social-icons li a {
            color: #ffffff;
            font-size: 21px; }
          section.team-section .team-box .team-post .hover-box ul.social-icons li a:hover {
            color: #39559a; }
  section.team-section .team-box .team-post:hover .hover-box {
    opacity: 1;
    visibility: visible; }
    section.team-section .team-box .team-post:hover .hover-box span {
      margin-bottom: 25px; }
    section.team-section .team-box .team-post:hover .hover-box ul.social-icons {
      margin-bottom: 0; }

section.team-section.second-style {
  background: #fff;
  padding-bottom: 70px; }
  section.team-section.second-style .team-box {
    padding: 0 15px;
    overflow: hidden; }
    section.team-section.second-style .team-box .team-post {
      width: 20%;
      padding: 0 15px;
      float: left; }
      section.team-section.second-style .team-box .team-post .hover-box {
        left: 15px;
        right: 15px;
        width: auto; }

/*------------------------------------------------- */
/* =  services page */
/*------------------------------------------------- */
section.services-section {
  padding: 100px 0 60px; }
  section.services-section .services-box .services-post {
    text-align: center;
    margin-bottom: 40px; }
    section.services-section .services-box .services-post i {
      display: inline-block;
      color: #fff;
      font-size: 42px;
      margin-bottom: 25px;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: #37404d;
      -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; }
    section.services-section .services-box .services-post i:hover {
      background: #39559a; }
    section.services-section .services-box .services-post h2 {
      font-size: 18px;
      margin-bottom: 20px; }
      section.services-section .services-box .services-post h2 a {
        color: #37404d; }
      section.services-section .services-box .services-post h2 a:hover {
        color: #39559a; }

section.video-section {
  padding: 190px 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.video-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.video-section {
      background: #111 url("../upload/banners/ban3@2x.jpg") center center no-repeat;
      background-size: cover; } }
  section.video-section h1 {
    font-size: 30px;
    color: #fff;
    margin-bottom: 0; }
    section.video-section h1 a {
      margin: 0 35px;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
      color: #37404d;
      background: rgba(255, 255, 255, 0.85);
      font-size: 48px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      padding-left: 7px; }
    section.video-section h1 a:hover {
      color: #fff;
      background: #39559a; }

section.tabs-section {
  padding: 100px 0; }
  section.tabs-section .tabs-box .nav-tabs {
    border: none;
    text-align: center;
    justify-content: center; }
    section.tabs-section .tabs-box .nav-tabs a.nav-link {
      border: none;
      text-align: center;
      background: #e5e5e5;
      color: #37404d;
      font-size: 19px;
      font-family: "Raleway", sans-serif;
      font-weight: 700;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      -ms-border-radius: 0px;
      border-radius: 0px;
      padding: 14px 30px;
      margin-right: 1px;
      text-transform: capitalize; }
    section.tabs-section .tabs-box .nav-tabs a[aria-selected="true"] {
      color: #fff;
      background: #39559a; }
  section.tabs-section .tabs-box .tab-content {
    padding: 40px 40px 30px;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5; }
    section.tabs-section .tabs-box .tab-content img {
      width: 100%;
      height: auto; }
    section.tabs-section .tabs-box .tab-content p {
      font-size: 14px;
      margin-bottom: 15px; }

/*------------------------------------------------- */
/* =  portfolio section */
/*------------------------------------------------- */
section.portfolio-section {
  padding: 100px 0 70px; }
  section.portfolio-section ul.filter {
    margin-bottom: 25px;
    text-align: center; }
    section.portfolio-section ul.filter li {
      display: inline-block;
      margin: 0 8px; }
      section.portfolio-section ul.filter li a {
        color: #666666;
        font-size: 15px;
        font-family: "Raleway", sans-serif;
        font-weight: 600; }
      section.portfolio-section ul.filter li a:hover,
      section.portfolio-section ul.filter li a.active {
        color: #39559a; }
  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.iso-call.two-col .project-post {
    width: 540px; }
  section.portfolio-section .portfolio-box {
    overflow: hidden;
    margin-bottom: 30px; }
    section.portfolio-section .portfolio-box .project-post {
      position: relative; }
      section.portfolio-section .portfolio-box .project-post img {
        width: 100%;
        height: auto; }
      section.portfolio-section .portfolio-box .project-post .hover-box {
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        opacity: 0;
        background: rgba(255, 255, 255, 0.9);
        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-box .inner-hover {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          padding: 0 40px 40px; }
          section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 {
            margin-bottom: 30px;
            transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out; }
            section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 a {
              color: #37404d; }
            section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover h2 a:hover {
              color: #39559a; }
          section.portfolio-section .portfolio-box .project-post .hover-box .inner-hover span {
            display: inline-block;
            color: #696969;
            font-size: 15px;
            font-family: "Roboto", sans-serif;
            font-weight: 300;
            margin: 0; }
    section.portfolio-section .portfolio-box .project-post:hover .hover-box {
      opacity: 1; }
      section.portfolio-section .portfolio-box .project-post:hover .hover-box .inner-hover h2 {
        margin-bottom: 0; }

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

section.portfolio-section.second-style {
  background: #37404d;
  padding: 90px 0; }
  section.portfolio-section.second-style .portfolio-box {
    overflow: hidden;
    margin-bottom: 30px; }
    section.portfolio-section.second-style .portfolio-box .project-post {
      position: relative; }
      section.portfolio-section.second-style .portfolio-box .project-post img {
        width: 100%;
        height: auto; }
      section.portfolio-section.second-style .portfolio-box .project-post .hover-box {
        top: 20px;
        left: 20px;
        right: 20px;
        bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white; }
        section.portfolio-section.second-style .portfolio-box .project-post .hover-box .inner-hover {
          position: relative;
          bottom: initial;
          left: initial;
          text-align: center;
          padding: 0 20px; }

/*------------------------------------------------- */
/* =  clients section */
/*------------------------------------------------- */
section.clients-section {
  padding: 100px 0 70px;
  background: #fff; }
  section.clients-section .clients-box a {
    width: 100%;
    height: 270px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px; }
    section.clients-section .clients-box a img {
      max-width: 100%;
      height: auto;
      opacity: 0.4;
      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.clients-section .clients-box a:hover img {
    opacity: 1; }

section.clients-section.second-style {
  background: #37404d; }

/*------------------------------------------------- */
/* =  feature section */
/*------------------------------------------------- */
section.feature-section {
  padding: 100px 0; }
  section.feature-section .feature-box .feature-image img {
    width: 100%;
    height: auto; }
  section.feature-section .feature-box .feature-post {
    margin-bottom: 50px;
    padding-left: 20px; }
    section.feature-section .feature-box .feature-post i {
      float: left;
      display: inline-block;
      color: #fff;
      font-size: 42px;
      margin-right: 30px;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
      background: #37404d;
      -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; }
    section.feature-section .feature-box .feature-post i:hover {
      background: #39559a; }
    section.feature-section .feature-box .feature-post .feature-content {
      margin-left: 130px; }
    section.feature-section .feature-box .feature-post h2 {
      font-size: 23px;
      margin-bottom: 14px; }
      section.feature-section .feature-box .feature-post h2 a {
        color: #37404d; }
      section.feature-section .feature-box .feature-post h2 a:hover {
        color: #39559a; }

/*------------------------------------------------- */
/* =  quote section */
/*------------------------------------------------- */
section.quote-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("../images/alinti.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.
   */
  text-align: center; }
  @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.quote-section {
      background: #111 url("../images/alinti.jpg") center bottom no-repeat;
      background-size: cover; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    section.quote-section {
      background: #111 url("../images/alinti.jpg") center bottom no-repeat;
      background-size: cover; } }
  section.quote-section i {
    display: inline-block;
    font-size: 50px;
    color: #000;
    margin-bottom: 30px; }
  section.quote-section p {
    color: #000;
    max-width: 840px;
    margin: 0 auto 20px; }
  section.quote-section h2 {
    color: #000;
    font-size: 19px; }

/*------------------------------------------------- */
/* =  News section */
/*------------------------------------------------- */
section.news-section {
  padding: 100px 0; }
  section.news-section .news-box .news-post {
    margin-bottom: 35px; }
    section.news-section .news-box .news-post img {
      width: 100%;
      height: auto; }
    section.news-section .news-box .news-post .video-post {
      position: relative; }
      section.news-section .news-box .news-post .video-post div.hover-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        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.news-section .news-box .news-post .video-post div.hover-box a {
          width: 70px;
          height: 70px;
          line-height: 70px;
          text-align: center;
          color: #37404d;
          background: rgba(255, 255, 255, 0.85);
          font-size: 28px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          padding-left: 5px; }
        section.news-section .news-box .news-post .video-post div.hover-box a:hover {
          opacity: 0.8; }
    section.news-section .news-box .news-post .post-content {
      padding: 25px 30px;
      border: 1px solid #e5e5e5;
      border-top: none; }
    section.news-section .news-box .news-post p.auth-paragraph {
      color: #969696; }
      section.news-section .news-box .news-post p.auth-paragraph a {
        color: #969696; }
      section.news-section .news-box .news-post p.auth-paragraph a:hover {
        color: #39559a; }
    section.news-section .news-box .news-post p {
      font-size: 13px;
      margin-bottom: 20px; }
    section.news-section .news-box .news-post h2 {
      font-size: 19px;
      margin-bottom: 0px; }
      section.news-section .news-box .news-post h2 a {
        color: #222222; }
      section.news-section .news-box .news-post h2 a:hover {
        color: #39559a; }
    section.news-section .news-box .news-post > a {
      color: #39559a;
      font-size: 13px;
      font-family: "Raleway", sans-serif; }
    section.news-section .news-box .news-post > a:hover {
      text-decoration: underline !important; }
    section.news-section .news-box .news-post .post-meta-box {
      color: #999999;
      font-size: 13px;
      font-family: "Roboto", sans-serif;
      font-weight: 300; }
      section.news-section .news-box .news-post .post-meta-box a {
        float: right;
        color: #969696;
        margin-left: 7px; }
      section.news-section .news-box .news-post .post-meta-box a:hover {
        color: #39559a; }
      section.news-section .news-box .news-post .post-meta-box a.like:before {
        content: '|';
        font-size: 13px;
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        color: #969696;
        margin-right: 7px; }

/*------------------------------------------------- */
/* =  Sidebar */
/*------------------------------------------------- */
.sidebar .widget {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #e4e4e4; }
  .sidebar .widget h2 {
    margin-bottom: 15px;
    font-weight: 700; }

.sidebar .widget:last-child {
  padding-bottom: 0;
  border-bottom: none; }

.sidebar .text-widget img {
  width: 100%;
  height: auto;
  margin-bottom: 20px; }

.sidebar .text-widget p {
  margin-bottom: 0; }

.sidebar .social-widget ul.social-list li {
  display: inline-block;
  margin-right: 6px;
  margin-bottom: 2px; }
  .sidebar .social-widget ul.social-list li a {
    color: #37404d;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #f1f1f1;
    font-size: 14px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%; }
  .sidebar .social-widget ul.social-list li a:hover {
    color: #fff;
    background: #39559a; }

.sidebar .social-widget ul.social-list li:last-child {
  margin-right: 0; }

.sidebar .instagram-widget ul.insta-list li {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 7px; }
  .sidebar .instagram-widget ul.insta-list li a {
    display: inline-block; }
    .sidebar .instagram-widget ul.insta-list li a img {
      max-width: 106px;
      height: auto; }
  .sidebar .instagram-widget ul.insta-list li a:hover {
    opacity: 0.7; }

.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;
    width: 125px;
    height: auto; }
  .sidebar .popular-widget ul.popular-list li .side-content {
    margin-left: 145px; }
    .sidebar .popular-widget ul.popular-list li .side-content h2 {
      font-size: 15px;
      line-height: 20px;
      margin-bottom: 0px; }
      .sidebar .popular-widget ul.popular-list li .side-content h2 a {
        color: #37404d; }
      .sidebar .popular-widget ul.popular-list li .side-content h2 a:hover {
        color: #39559a; }
    .sidebar .popular-widget ul.popular-list li .side-content span {
      display: inline-block;
      margin: 0;
      color: #696969;
      font-size: 13px;
      font-family: "Roboto", sans-serif;
      font-weight: 300; }
      .sidebar .popular-widget ul.popular-list li .side-content span a {
        color: #696969; }
      .sidebar .popular-widget ul.popular-list li .side-content span a:hover {
        color: #39559a; }

.sidebar .popular-widget ul.popular-list li:last-child {
  margin-bottom: 5px; }

.sidebar .tags-widget ul.tags-list li {
  display: inline-block;
  margin-bottom: 15px;
  margin-right: 7px; }
  .sidebar .tags-widget ul.tags-list li a {
    padding: 6px 20px;
    color: #37404d;
    font-size: 13px;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    background: #f1f1f1;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px; }
  .sidebar .tags-widget ul.tags-list li a:hover {
    color: #fff;
    background: #39559a; }

.sidebar .category-widget ul li {
  list-style: none;
  margin-bottom: 8px; }
  .sidebar .category-widget ul li a {
    display: block;
    color: #37404d;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    position: relative;
    font-weight: 300; }
    .sidebar .category-widget ul li a span {
      font-weight: 700; }
  .sidebar .category-widget ul li a:hover {
    color: #39559a; }

.sidebar .category-widget ul li:last-child {
  margin-bottom: 0px; }

.sidebar .subscribe-widget {
  overflow: hidden;
  padding-bottom: 26px; }
  .sidebar .subscribe-widget h2 {
    margin-bottom: 10px; }

.sidebar .subscribe-widget input[type="text"] {
  width: 100%;
  padding: 10px 20px;
  background: transparent;
  color: #999999;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  outline: none;
  border: 1px solid #e8e8e8;
  margin: 5px 0 20px;
  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 .subscribe-widget input[type="text"]:focus {
  border: 1px solid #39559a; }

.sidebar .subscribe-widget button {
  float: right;
  color: #fff;
  font-size: 15px;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  padding: 12px 40px;
  background: #39559a;
  font-weight: 700;
  letter-spacing: 1px;
  -webkit-border-radius: 26px;
  -moz-border-radius: 26px;
  -ms-border-radius: 26px;
  border-radius: 26px;
  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; }

.sidebar .subscribe-widget button:hover {
  opacity: 0.7; }

/*------------------------------------------------- */
/* =  Statistic sections*/
/*------------------------------------------------- */
section.statistic-section {
  padding: 80px 0;
  background: #f1f1f1; }
  section.statistic-section .stat-box {
    text-align: center; }
    section.statistic-section .stat-box .circle-skill {
      position: relative; }
      section.statistic-section .stat-box .circle-skill .inner-circle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center; }
      section.statistic-section .stat-box .circle-skill span {
        color: #37404d;
        display: block;
        font-size: 60px;
        font-family: "Raleway", sans-serif;
        font-weight: 800;
        margin: 0;
        line-height: 60px; }
      section.statistic-section .stat-box .circle-skill p {
        margin: 0; }

/*------------------------------------------------- */
/* =  About sections */
/*------------------------------------------------- */
section.about-section {
  padding: 100px 0;
  position: relative; }
  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: 70px;
      padding-top: 20px; }
      section.about-section .about-box .about-post img {
        width: 100%;
        height: auto;
        margin-bottom: 20px; }
      section.about-section .about-box .about-post p {
        margin-bottom: 30px; }
    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 .about-box .video-popup {
      position: relative;
      margin-bottom: 70px; }
      section.about-section .about-box .video-popup img {
        width: 100%;
        height: auto;
        margin-bottom: 0; }
      section.about-section .about-box .video-popup div.hover-box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        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.about-section .about-box .video-popup div.hover-box a {
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          color: #37404d;
          background: rgba(255, 255, 255, 0.85);
          font-size: 40px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          padding-left: 5px; }
        section.about-section .about-box .video-popup div.hover-box a:hover {
          opacity: 0.8; }
    section.about-section .about-box .skills-progress {
      margin-top: -4px; }
    section.about-section .about-box .skills-progress div.meter {
      margin-bottom: 20px; }
    section.about-section .about-box .skills-progress > p {
      margin-bottom: 5px; }
  section.about-section .skills-box {
    padding-top: 70px;
    border-top: 1px solid #e4e4e4; }
  section.about-section .skills-progress > p {
    font-size: 19px;
    font-weight: 700;
    font-family: "Raleway", sans-serif;
    margin-bottom: 7px; }
    section.about-section .skills-progress > p span {
      float: right; }
  section.about-section .skills-progress div.meter {
    height: 30px;
    background: #e5e5e5;
    margin-bottom: 30px;
    overflow: hidden; }
    section.about-section .skills-progress div.meter p {
      height: 100%;
      background: #39559a; }
  section.about-section .accordion .card-header {
    padding: 0;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    background: #e5e5e5; }
    section.about-section .accordion .card-header h5 .btn {
      display: block !important;
      width: 100%;
      text-align: left;
      padding: 18px 30px;
      font-size: 18px;
      color: #37404d;
      font-family: "Raleway", sans-serif;
      font-weight: 700;
      text-transform: capitalize;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      -ms-border-radius: 0;
      border-radius: 0;
      text-decoration: none;
      cursor: pointer;
      position: relative; }
    section.about-section .accordion .card-header h5 .btn:after {
      content: '\f067';
      font-family: 'FontAwesome';
      color: #37404d;
      font-size: 12px;
      top: 24px;
      right: 30px;
      position: absolute;
      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.about-section .accordion .card-header h5 .btn[aria-expanded="true"] {
      background: #39559a;
      color: #fff; }
    section.about-section .accordion .card-header h5 .btn[aria-expanded="true"]:after {
      content: '\f068';
      color: #fff; }
  section.about-section .accordion .card {
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    background: transparent;
    margin-bottom: 1px; }
  section.about-section .accordion .card-body p {
    margin-bottom: 0; }
  section.about-section .center-text {
    text-align: center;
    margin-bottom: 30px; }
    section.about-section .center-text p {
      font-size: 20px;
      line-height: 33px; }

section.about-section.no-padd-bottom {
  padding-bottom: 0; }

/*------------------------------------------------- */
/* =  Single Post */
/*------------------------------------------------- */
section.single-post-section {
  padding: 150px 0 100px; }
  section.single-post-section .single-box img {
    margin-bottom: 25px;
    width: 100%;
    height: auto; }
  section.single-post-section .single-box .title-post {
    margin-bottom: 20px; }
  section.single-post-section .single-box p {
    margin-bottom: 20px; }
  section.single-post-section .single-box h1 {
    margin-bottom: 0px; }
  section.single-post-section .single-box ul.post-tags li {
    display: inline-block;
    color: #969696;
    margin-right: 5px;
    font-family: "Raleway", sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: capitalize; }
    section.single-post-section .single-box ul.post-tags li a {
      color: #969696; }
    section.single-post-section .single-box ul.post-tags li a:hover {
      color: #39559a; }
  section.single-post-section .single-box ul.post-tags li:before {
    content: '|';
    color: #999999;
    font-size: 11px;
    font-family: "Roboto", sans-serif;
    margin-right: 8px;
    font-weight: 300; }
  section.single-post-section .single-box ul.post-tags li:first-child:before {
    content: '';
    margin-right: 0; }
  section.single-post-section .single-box ul.list-post {
    padding-left: 18px;
    margin-bottom: 20px; }
    section.single-post-section .single-box ul.list-post li {
      color: #37404d;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      font-size: 15px;
      font-style: italic;
      line-height: 28px; }
  section.single-post-section .single-box .share-tags-box {
    padding-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    margin-bottom: 40px; }
    section.single-post-section .single-box .share-tags-box ul.share-list {
      text-align: right; }
      section.single-post-section .single-box .share-tags-box ul.share-list li {
        display: inline-block;
        margin-left: 5px; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a {
          width: 30px;
          height: 30px;
          background: #f1f1f1;
          line-height: 30px;
          text-align: center;
          color: #37404d;
          font-size: 14px;
          font-family: "Raleway", sans-serif;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a:hover {
          color: #fff; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a.facebook:hover {
          background: #3B5998; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a.twitter:hover {
          background: #1dcaff; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a.dribbble:hover {
          background: #ea4c89; }
        section.single-post-section .single-box .share-tags-box ul.share-list li a.github:hover {
          background: #333; }
    section.single-post-section .single-box .share-tags-box ul.tags-list {
      text-align: left; }
      section.single-post-section .single-box .share-tags-box ul.tags-list li {
        display: inline-block;
        margin-right: 5px; }
        section.single-post-section .single-box .share-tags-box ul.tags-list li a {
          padding: 6px 20px;
          color: #37404d;
          font-size: 13px;
          font-family: "Roboto", sans-serif;
          font-weight: 300;
          background: #f1f1f1;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          -ms-border-radius: 15px;
          border-radius: 15px; }
        section.single-post-section .single-box .share-tags-box ul.tags-list li a:hover {
          color: #fff;
          background: #39559a; }

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

.comment-area-box {
  max-width: 970px;
  margin: 0 auto 50px;
  border-bottom: 1px solid #e4e4e4; }
  .comment-area-box h2 {
    font-size: 19px;
    margin-bottom: 25px; }
  .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: 50px; }
        .comment-area-box > ul li .comment-box img {
          max-width: 80px;
          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;
          padding-top: 15px; }
          .comment-area-box > ul li .comment-box .comment-content h4 {
            font-size: 17px;
            margin-bottom: -5px; }
          .comment-area-box > ul li .comment-box .comment-content span, .comment-area-box > ul li .comment-box .comment-content a {
            font-size: 13px;
            color: #696969;
            font-family: "Roboto", sans-serif;
            display: inline-block;
            font-weight: 300;
            margin: 0 0 6px; }
          .comment-area-box > ul li .comment-box .comment-content a {
            text-transform: uppercase; }
          .comment-area-box > ul li .comment-box .comment-content a:hover {
            color: #39559a; }
          .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 {
  max-width: 970px;
  margin: 0 auto; }
  .contact-form-box h2 {
    font-size: 19px;
    margin-bottom: 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: 11px 20px;
      background: transparent;
      color: #999999;
      font-size: 15px;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      outline: none;
      border: 1px solid #e8e8e8;
      margin: 0 0 20px;
      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; }
    .contact-form-box #comment-form input[type="text"]:focus,
    .contact-form-box #comment-form textarea:focus {
      border: 1px solid #39559a; }
    .contact-form-box #comment-form textarea {
      height: 120px;
      margin-bottom: 30px; }
    .contact-form-box #comment-form input[type="submit"] {
      float: right;
      color: #fff;
      font-size: 15px;
      font-family: "Raleway", sans-serif;
      text-transform: uppercase;
      padding: 14px 40px;
      background: #39559a;
      font-weight: 700;
      letter-spacing: 1px;
      -webkit-border-radius: 26px;
      -moz-border-radius: 26px;
      -ms-border-radius: 26px;
      border-radius: 26px;
      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 {
      opacity: 0.7; }

/*------------------------------------------------- */
/* =  Single Project */
/*------------------------------------------------- */
section.single-portfolio-section {
  padding: 100px 0;
  background: #f9f9f9; }
  section.single-portfolio-section .single-portfolio-box h1 {
    margin-bottom: 20px;
    position: relative;
    padding-top: 20px; }
  section.single-portfolio-section .single-portfolio-box h1:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: #39559a; }
  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;
      outline: none; }
      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 p {
    margin-bottom: 20px; }
  section.single-portfolio-section .single-portfolio-box .project-details p {
    margin-bottom: 20px; }
    section.single-portfolio-section .single-portfolio-box .project-details p span {
      display: block;
      font-family: "Roboto", sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: #37404d;
      margin: 0 0 5px;
      text-transform: uppercase; }
    section.single-portfolio-section .single-portfolio-box .project-details p a {
      color: #39559a; }
  section.single-portfolio-section .single-portfolio-box ul.share-project {
    padding: 15px 0 40px;
    border-bottom: 1px solid #e5e5e5;
    margin: 0 0 40px; }
    section.single-portfolio-section .single-portfolio-box ul.share-project li {
      display: inline-block;
      margin-right: 4px; }
      section.single-portfolio-section .single-portfolio-box ul.share-project li a {
        color: #37404d;
        width: 34px;
        height: 34px;
        background: #f1f1f1;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        line-height: 34px;
        text-align: center;
        font-size: 13px; }
      section.single-portfolio-section .single-portfolio-box ul.share-project li a:hover {
        color: #fff;
        background: #37404d; }
  section.single-portfolio-section .single-portfolio-box .pag-list a.prev,
  section.single-portfolio-section .single-portfolio-box .pag-list a.next {
    float: left;
    padding: 12px 30px;
    color: #37404d;
    font-size: 13px;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    background: #f1f1f1;
    margin-right: 20px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    border-radius: 25px; }
    section.single-portfolio-section .single-portfolio-box .pag-list a.prev i,
    section.single-portfolio-section .single-portfolio-box .pag-list a.next i {
      margin-right: 4px; }
  section.single-portfolio-section .single-portfolio-box .pag-list a.next {
    margin-right: 0; }
    section.single-portfolio-section .single-portfolio-box .pag-list a.next i {
      margin-right: 0;
      margin-left: 4px; }
  section.single-portfolio-section .single-portfolio-box .pag-list a.prev:hover,
  section.single-portfolio-section .single-portfolio-box .pag-list a.next:hover {
    color: #39559a; }
  section.single-portfolio-section .single-portfolio-box .pag-list a.all-proj {
    float: left;
    margin-right: 20px;
    font-size: 30px;
    color: #37404d;
    line-height: 44px; }
  section.single-portfolio-section .single-portfolio-box .pag-list a.all-proj:hover {
    color: #39559a; }

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

section.contact-section {
  padding: 100px 0;
  background: #f9f9f9; }
  section.contact-section #contact-form {
    margin: 0; }
    section.contact-section #contact-form input[type="text"],
    section.contact-section #contact-form textarea {
      width: 100%;
      padding: 11px 20px;
      background: transparent;
      color: #999999;
      font-size: 15px;
      font-family: "Roboto", sans-serif;
      font-weight: 300;
      outline: none;
      border: 1px solid #e8e8e8;
      margin: 0 0 20px;
      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 #39559a; }
    section.contact-section #contact-form textarea {
      height: 120px;
      margin-bottom: 30px; }
    section.contact-section #contact-form input[type="submit"] {
      float: right;
      color: #fff;
      font-size: 15px;
      font-family: "Raleway", sans-serif;
      text-transform: uppercase;
      padding: 14px 40px;
      background: #39559a;
      font-weight: 700;
      letter-spacing: 1px;
      -webkit-border-radius: 26px;
      -moz-border-radius: 26px;
      -ms-border-radius: 26px;
      border-radius: 26px;
      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-form #msg {
      clear: both;
      text-align: right;
      padding: 10px 20px;
      margin-top: 50px; }
  section.contact-section .contact-details {
    margin-bottom: 50px; }
    section.contact-section .contact-details p {
      margin-bottom: 30px; }

section.contact-section.second-style {
  padding-top: 67px; }

/*------------------------------------------------- */
/* =  Footer */
/*------------------------------------------------- */
footer {
  padding-top: 90px;
  background: #fff; }
  footer .up-footer {
    padding-bottom: 30px; }
    footer .up-footer .footer-widget {
      margin-bottom: 30px; }
      footer .up-footer .footer-widget h2 {
        font-size: 19px;
        margin-bottom: 20px; }
      footer .up-footer .footer-widget p {
        margin-bottom: 0px; }
      footer .up-footer .footer-widget ul.social-icons li {
        display: inline-block;
        margin-right: 4px; }
        footer .up-footer .footer-widget ul.social-icons li a {
          color: #37404d;
          width: 50px;
          height: 50px;
          background: #fff;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          line-height: 50px;
          text-align: center;
          font-size: 19px; }
        footer .up-footer .footer-widget ul.social-icons li a:hover {
          color: #fff;
          background: #37404d; }
  footer p.copyright-line {
    text-align: center;
    padding: 15px 0;
    color: #fff;
    background: #37404d;
    margin-bottom: 0; }

/*-------------------------------------------------*/
/* =  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.portfolio-section .portfolio-box.iso-call.two-col .project-post {
    width: 450px; }
  section.page-banner-section h1 {
    font-size: 30px;
    line-height: 40px; }
  section.team-section.second-style .team-box .team-post {
    width: 33.3333%; }
  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 {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1); }
  .navbar-nav > li > a {
    padding: 5px 0px !important;
    border: none !important; }
  .navbar a.open-close-menu,
  .navbar a.open-search {
    display: none; }
  .navbar-nav > li > a:hover,
  .navbar-nav > li > a.active {
    color: #39559a !important; }
  header.transparent-style .navbar-collapse {
    background: #37404d; }
  section.feature-section .feature-box .feature-image img {
    margin-bottom: 50px; }
  section.video-section h1 span {
    display: block;
    margin: 20px 0; }
  section.tabs-section .tabs-box .nav-tabs a.nav-link {
    font-size: 15px;
    padding: 14px 20px; }
  section.portfolio-section .portfolio-box .project-post {
    width: 33.333333%; }
  section.portfolio-section .portfolio-box.iso-call .project-post,
  section.portfolio-section .portfolio-box.iso-call.two-col .project-post {
    width: 330px; }
  .sidebar {
    padding-right: 0; }
  section.blog-section .blog-box .blog-post iframe {
    height: 300px; }
  section.single-post-section {
    padding-top: 80px; } }

@media (max-width: 767px) {
  section.tabs-section .nav-tabs .nav-item {
    width: 50%;
    margin-bottom: 1px; }
  .comment-area-box ul.depth .comment-box {
    padding-left: 0; }
  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,
  section.portfolio-section .portfolio-box.iso-call.two-col .project-post {
    width: 100%;
    margin: 15px 0; }
  section.portfolio-section .portfolio-box.iso-call {
    margin-left: 0;
    margin-right: 0; }
  section.team-section.second-style .team-box .team-post {
    width: 50%; }
  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; }
  section.single-portfolio-section .single-portfolio-box .pag-list {
    overflow: hidden;
    margin-bottom: 50px; }
  section.video-section {
    padding: 90px 0; }
    section.video-section span {
      font-size: 22px; }
    section.video-section h1 a {
      width: 70px;
      height: 70px;
      line-height: 70px;
      font-size: 25px;
      padding-left: 6px; } }

@media (max-width: 500px) {
  section.portfolio-section .portfolio-box .project-post {
    width: 100%; }
  section.team-section.second-style .team-box .team-post {
    width: 100%; }
  section.tabs-section .nav-tabs .nav-item {
    width: 100%;
    margin-bottom: 1px; } }
    .text-left{
      text-align:left;
    }