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

 1.import google fonts
 2.Header
 3.Isotope filtering
 4.General
 5.Home section
 6.about section
 7.statistic sections
 8.portfolio section
 9.team section
 10.banner section
 11.services section
 12.blog section
 13.Tweets section
 14.testimonial section
 15.clients section
 16.Contact
 17.single post
 18.single project
 19.shortcodes
 20.footer
 21.Responsive part
-------------------------------------------------*/
/* import google fonts */
@import url('https://fonts.googleapis.com/css2?family=Exo&display=swap');
/* 400*/
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@200&display=swap');
/* 200*/
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@200;400;600&display=swap');
/* 600*/
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@200;400;600;900&display=swap');
/* 900 */

.reset-elem,
.megamenu ul.mega-list,
#portfolio-section ul.filter,
#portfolio-section2 ul.filter,
.modal .modal-dialog .modal-content .modal-body ul.social-list,
#blog-section .blog-box .blog-post .post-content ul.post-tags,
ul.pagination-list,
section#clients-section .clients-box ul.clients-list,
section#clients-section2 .clients-box ul.clients-list,
section#clients-section3 .clients-box ul.clients-list,
section#clients-section4 .clients-box ul.clients-list,
.contact-info-box ul.contact-list,
.single-post ul.post-tags,
.single-post .text-boxes ul.tags-list,
.share-post-box ul.share-box,
.comment-area-box>ul,
.single-project .post-head ul.navigate-posts,
.single-project .project-details ul.project-list,
.single-project .project-details ul.share-icons,
ul.social-list,
ol.order-list,
ul.unorder-list,
#pricing-section .pricing-box ul.pricing-table,
#pricing-section2 .pricing-box ul.pricing-table,
#pricing-section3 .pricing-box ul.pricing-table,
footer ul.social-icons {
  margin: 0;
  padding: 0;
}

.paragraph,
p {
  font-size: 13px;
  color: #565656;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 24px;
  margin: 0 0 10px;
}

.heading1,
h1 {
  color: #131313;
  font-size: 30px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  margin: 0 0 20px;
}

.heading2,
.accordion-box.first-style .card-header h5,
.accordion-box.second-style .card-header h5,
.accordion-box.third-style .card-header h5,
.accordion-box.fourth-style .card-header h5,
h2 {
  color: #131313;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin: 0 0 10px;
  line-height: 28px;
}

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

.heading4,
h4 {
  color: #333333;
  font-size: 14px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  margin: 0;
  line-height: 28px;
}

.heading5,
h5 {
  color: #333333;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  margin: 0;
  line-height: 28px;
}

.heading6,
h6 {
  color: #333333;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  margin: 0;
  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;
}

/**
 * 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.
 */
/*------------------------------------------------- */
/* =  Header
 *------------------------------------------------- */
.navbar {
  padding: 0;
  background: transparent !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;
  width: 100%;
  position: fixed;
  z-index: 9999;
}

header {
  padding: 0;
}

header.active .navbar {
  background: #4A4746 !important;
}

a.open-vertical {
  color: #131313;
  font-size: 18px;
}

.navbar-brand {
  
  padding-top: 0;
}

.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: #fff !important;
  font-size: 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;
  padding: 30px 25px !important;
  position: relative;
  text-transform: uppercase;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

.navbar-nav>li>a i {
  font-size: 13px;
  margin-left: 10px;
}

.navbar-nav>li:hover>a {
  opacity: 0.2;
}

.navbar-nav>li:first-child>a {
  padding-left: 15px !important;
}

header.second-style .navbar {
  background: #fff !important;
  border: 1px solid #f1f1f1;
}

header.second-style .navbar-nav>li>a {
  color: #131313 !important;
  font-weight: 600;
}

.megamenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  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;
}

.megamenu .inner-megamenu {
  margin: 0 auto;
  max-width: 1140px;
  background: #222222;
  padding: 25px 30px;
}

.megamenu h2 {
  color: #fff;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.megamenu ul.mega-list li {
  display: block;
  margin-bottom: 8px;
  padding-bottom: 5px;
  position: relative;
}

.megamenu ul.mega-list li a {
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  color: #fff;
  font-weight: 300;
}

.megamenu ul.mega-list li a i {
  margin-right: 10px;
  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;
}

.megamenu ul.mega-list li a:hover {
  opacity: 0.85;
}

.megamenu ul.mega-list li a:hover i {
  color: #cd3a54;
}

.megamenu ul.mega-list li:last-child {
  padding-bottom: 0;
  border: none;
}

li:hover .megamenu {
  visibility: visible;
  opacity: 1;
  margin-top: 0;
}

/*-------------------------------------------------- */
/* 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;
}

/*------------------------------------------------- */
/* =  General */
/*------------------------------------------------- */
body {
  background: #fff;
}

#container {
  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;
}

#container.active {
  opacity: 1;
}

.container .Copyright {
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

.preloader {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-top: -2px;
  margin-left: -18px;
  -webkit-backface-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;
}

.preloader img {
  -webkit-backface-visibility: hidden;
}

.title-section {
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}

.title-sectio {
  margin-bottom: 60px;
  position: relative;
  text-align: center;
}

.title-section h1 {
  margin-bottom: 30px;
  color: #d3a084;
  font-size: 38px;
  font-family: 'Exo-bold', sans-serif;
  text-align: center;
}

.title-sectio h1 {
  margin-bottom: 30px;
  color: #d3a084;
  font-size: 38px;
  font-family: 'Exo-bold', sans-serif;
  text-align: center;
}

.title-sectio span {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: #d3a084;
  margin-bottom: 20px;
}

.title-section span {
  display: inline-block;
  width: 60px;
  height: 1px;
  background: #d3a084;
  margin-bottom: 20px;
}

.title-section p {
  font-size: 15px;
  font-weight: 300;
  max-width: 470px;
  margin: 0 auto;
  font-family: 'Exo', sans-serif;
}

.title-section .row {
  flex: 1;
  display: flex;
}

.title-section .column .paragraphe-présentation {
  text-align: justify;
  /* font-weight: 00; */
  color: #212529;
  font-family: 'Exo', sans-serif;
}

.title-section h2 {
  font-weight: 300;
  font-family: 'Exo', sans-serif;
}

.column {
  flex: 1;
  padding: 20px;
}

.column h2 {
  color: #d3a084;
  margin-top: 19%;
}

/* table */
table {
  border-collapse: collapse;
  width: 96%;
  margin-top: -11%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

.about-box td {
  font-size: 15px;
  color: #212529;
  font-weight: 300;
  max-width: 470px;
  font-family: 'Exo', sans-serif;
}

/*  */
.title-section.white-style h1,
.title-section.white-style p {
  color: #fff;
}

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

.owl-carousel {
  margin-left: -15px;
  margin-right: -15px;
}

.owl-carousel .item {
  padding: 0 15px;
}

.owl-theme .owl-controls .owl-pagination {
  display: none !important;
}

.owl-carousel {
  width: auto;
}

.owl-theme .owl-controls {
  margin-top: 20px;
  text-align: center;
}

.owl-theme .owl-controls .owl-buttons div {
  font-size: 11px;
  color: #ffffff;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  background: #cd3a54;
  border: 1px solid transparent;
  margin-left: 2px;
  outline: none;
  padding: 0;
  opacity: 1;
  margin: 0 3px;
  -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;
}

.owl-theme .owl-controls .owl-buttons div:hover {
  opacity: 0.6 !important;
}

.owl-theme .owl-controls .owl-buttons div.owl-prev:after {
  content: '\f104';
  font-family: 'FontAwesome';
  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;
  color: #fff;
}

.owl-theme .owl-controls .owl-buttons div.owl-next:after {
  content: '\f105';
  font-family: 'FontAwesome';
  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;
  color: #fff;
}

.center-button {
  /* padding: 10px 0; */
  text-align: center;
}

#btn-cover {
  color: #fff;
  font-size: 17px;
  
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 3px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-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;
  margin: 0;
  
  outline: none;
  cursor: pointer;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  background: #AC9B7D;
  
}

a.default-button:hover {
  opacity: 0.85;
}

section.page-banner-section {
  padding: 240px 0 50px;
  /*
   * 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.
     */
  /*
     * 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;
}

.black-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.929);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.812) 6%, rgba(0, 0, 0, 0.18) 100%);
}

@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/4@2x.jpg") center center;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section.page-banner-section {
    background: #111 url("../upload/banners/4@2x.jpg") center center;
    background-size: cover;
  }
}

/* suuprimer en haut */
section.page-banner-section h1 {
  display: inline-block;
  color: #fff;
  margin-bottom: 0px;
  font-weight: 300;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: capitalize;
  font-weight: 300;
  padding: 14px 20px 14px;
  position: relative;
}

section.page-banner-section h1:before {
  content: '\f0a9';
  color: #131313;
  font-size: 17px;
  font-family: 'FontAwesome';
  position: absolute;
  top: 14px;
  left: -20px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#content-section {
  padding: 100px 0;
}

/*-------------------------------------------------- */
/* 1. Slider news
/*------------------------------------------------- */
#home-section {
  /*
   * 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.
     */

  /*
     * 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.
   */
}
#home-section {
  background: #111 url("../images/img/chantier.jpeg") center center no-repeat;
  background-size: cover;
}
@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) {
  #home-section {
    background: #111 url("../images/img/chantier.jpeg") center center no-repeat;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  #home-section {
    background: #111 url("../images/img/chantier.jpeg") center center no-repeat;
    background-size: cover;
  }
}

#home-section.background-color-style {
  background: #cd3a54;
}

#home-section .flexslider {
  background: transparent;
}

.slider-text {
  margin-bottom: 40px;
  top: 50%;
  margin-top: -90px;
  position: absolute;
  width: 100%;
  z-index: 99;
}

.slider-text .slider-caption {
  max-width: 700px;
  padding: 0 15px;
  margin: 0 auto;
  text-align: center;
}

.slider-text .slider-caption h1 {
  margin-bottom: 25px;
  font-size: 40px;
  font-weight: 300;
  line-height: 48px;
  color: #fff;
  position: relative;
  text-transform: initial;
  z-index: 2;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
}

.slider-text .slider-caption p {
  font-size: 16px;
  position: relative;
  max-width: 700px;
  margin: 0 auto 30px;
  z-index: 2;
  color: #fff;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

.slider-text .flex-direction-nav {
  bottom: initial;
  top: 50%;
  margin-top: -20px;
  right: 0px;
  padding: 0 5px;
  width: 100%;
  opacity: 0;
}

.slider-text .flex-direction-nav li a {
  background: #fff !important;
  width: 40px;
  height: 40px;
  line-height: 40px;
}

.slider-text .flex-direction-nav li a:after {
  color: #343434 !important;
  font-size: 15px;
}

.slider-text .flex-control-paging {
  display: none;
}

.slider-text .flex-control-paging li a {
  background: #131313;
  padding: 3px 7px;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-size: 10px;
}

.slider-text .flex-control-paging li a:hover,
.slider-text .flex-control-paging li a.flex-active {
  background: #cd3a54;
  color: #fff;
}

.slider-news:hover .flex-direction-nav {
  opacity: 1;
}

#home-section2 .tp-caption.NotGeneric-Title {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  text-transform: initial;
}

#home-section2 .tp-caption.NotGeneric-SubTitle {
  font-family: "Open Sans", sans-serif;
  letter-spacing: 1px;
}

#home-section2 .tp-caption.NotGeneric-Icon {
  font-size: 20px;
}

#home-section2 .rev-btn {
  color: #fff;
  font-size: 11px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  padding: 12px 24px;
  background: #cd3a54;
  border: 1px solid #cd3a54 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#home-section2 .rev-btn:hover {
  opacity: 0.7;
}

#home-section2 .tp-caption.tp-shape.tp-shapewrapper {
  border: none !important;
}

/*-------------------------------------------------- */
/*  About section
/*------------------------------------------------- */
#about-section {
  padding: 100px 0;
}

.about-box {
  text-align: center;
  display: flex;
  height: 1vh;
  flex-direction: column;
}

/* .about-box .ligne {
  flex: 1;
  padding: 0;
} */

.about-box .about-post {
  max-width: 300px;
  margin: 0 auto 40px;
}

.about-box .about-post a {
  display: inline-block;
  width: 80px;
  height: 80px;
  text-decoration: none;
  border: 1px solid #f1f1f1;
  background: #f7f7f7;
  line-height: 78px;
  font-size: 20px;
  text-align: center;
  color: #cd3a54;
  margin-bottom: 25px;
  -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;
}

.about-box .about-post a:hover {
  background: #cd3a54;
  color: #fff;
}

.about-post h2 {
  color: #dac9a9;
}

/*------------------------------------------------- */
/* =  Statistic sections
/*------------------------------------------------- */
section.statistic-section {
  padding: 80px 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/2.jpg") center center fixed;
  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/2@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section.statistic-section {
    background: #111 url("../upload/banners/2@2x.jpg") center center fixed;
    background-size: cover;
  }
}

section.statistic-section .statistic-post {
  margin-bottom: 20px;
  text-align: center;
}

section.statistic-section .statistic-post h2 {
  color: #fff;
}

section.statistic-section .statistic-post p {
  margin: 0 0 20px;
  padding-bottom: 10px;
  position: relative;
  line-height: inherit;
}

section.statistic-section .statistic-post p:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -15px;
  bottom: 0px;
  width: 30px;
  height: 2px;
  background: #cd3a54;
}

section.statistic-section .statistic-post span.timer {
  color: #fff;
  font-size: 48px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  margin: 0;
}

section.statistic-section2 {
  padding: 80px 0;
  background: #f7f7f7;
}

section.statistic-section2 .statistic-post {
  margin-bottom: 20px;
  text-align: center;
}

section.statistic-section2 .statistic-post h2 {
  color: #131313;
  font-weight: 300;
}

section.statistic-section2 .statistic-post p {
  margin: 0 0 20px;
  padding-bottom: 10px;
  position: relative;
  line-height: inherit;
}

section.statistic-section2 .statistic-post p:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -15px;
  bottom: 0px;
  width: 30px;
  height: 2px;
  background: #cd3a54;
}

section.statistic-section2 .statistic-post span.timer {
  color: #131313;
  font-size: 48px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  margin: 0;
}

section.statistic-section3 {
  padding: 80px 0;
  background: #cd3a54;
}

section.statistic-section3 .statistic-post {
  margin-bottom: 20px;
  text-align: center;
}

section.statistic-section3 .statistic-post h2 {
  color: #fff;
}

section.statistic-section3 .statistic-post p {
  margin: 0 0 0px;
  position: relative;
  line-height: inherit;
}

section.statistic-section3 .statistic-post span.timer {
  color: #fff;
  font-size: 48px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  margin: 0;
}

section.statistic-section4 {
  padding: 100px 0;
  background: #f7f7f7;
}

section.statistic-section4 .statistic-post {
  margin-bottom: 20px;
  text-align: center;
}

section.statistic-section4 .statistic-post h2 {
  color: #131313;
  font-weight: 300;
  font-size: 14px;
}

section.statistic-section4 .statistic-post i {
  color: #cd3a54;
  font-size: 36px;
}

section.statistic-section4 .statistic-post p {
  margin: 0;
  position: relative;
  line-height: inherit;
}

section.statistic-section4 .statistic-post span.timer {
  color: #131313;
  font-size: 48px;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  margin: 0;
}

/*------------------------------------------------- */
/* =  portfolio section
/*------------------------------------------------- */
#portfolio-section {
  padding: 100px 0;
}

#portfolio-section ul.filter {
  text-align: center;
  margin-bottom: 40px;
}

#portfolio-section ul.filter li {
  display: inline-block;
  margin: 0 5px 2px;
}

#portfolio-section ul.filter li a {
  color: #131313;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  padding: 10px 20px;
  border: 1px solid #f1f1f1;
}

#portfolio-section ul.filter li a.active,
#portfolio-section ul.filter li a:hover {
  background: #cd3a54;
  color: #fff;
}

#portfolio-section .portfolio-box {
  margin-bottom: 40px;
}

#portfolio-section .portfolio-box .project-item {
  width: 25%;
  padding: 0px;
  position: relative;
}

#portfolio-section .portfolio-box .project-item img {
  width: 100%;
  height: auto;
}

#portfolio-section .portfolio-box .project-item .hover-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  text-align: center;
  display: flex;
  align-items: 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;
  opacity: 0;
}

#portfolio-section .portfolio-box .project-item .hover-box .inner-hover {
  width: 100%;
}

#portfolio-section .portfolio-box .project-item .hover-box h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 20px;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
}

#portfolio-section .portfolio-box .project-item .hover-box h2 a {
  color: #fff;
}

#portfolio-section .portfolio-box .project-item .hover-box span {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: #cd3a54;
  margin-bottom: 25px;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
}

#portfolio-section .portfolio-box .project-item .hover-box p {
  color: #fff;
  font-size: 12px;
  margin-bottom: 0;
}

#portfolio-section .portfolio-box .project-item:hover .hover-box {
  opacity: 1;
}

#portfolio-section .portfolio-box .project-item:hover .hover-box h2 {
  margin-bottom: 0;
}

#portfolio-section .portfolio-box .project-item:hover .hover-box span {
  margin-bottom: 5px;
}

#portfolio-section .portfolio-box.three-col .project-item {
  width: 33.33333%;
}

#portfolio-section2 {
  padding: 100px 0;
}

#portfolio-section2 ul.filter {
  text-align: center;
  margin-bottom: 40px;
}

#portfolio-section2 ul.filter li {
  display: inline-block;
  margin: 0 5px 2px;
}

#portfolio-section2 ul.filter li a {
  color: #131313;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  padding: 10px 20px;
  border: 1px solid #f1f1f1;
}

#portfolio-section2 ul.filter li a.active,
#portfolio-section2 ul.filter li a:hover {
  background: #cd3a54;
  color: #fff;
}

#portfolio-section2 .portfolio-box {
  margin-bottom: 40px;
  margin-left: -15px;
  margin-right: -15px;
}

#portfolio-section2 .portfolio-box .project-item {
  width: 33.3333%;
  padding: 15px;
  position: relative;
}

#portfolio-section2 .portfolio-box .project-item .image-box {
  position: relative;
}

#portfolio-section2 .portfolio-box .project-item .image-box img {
  width: 100%;
  height: auto;
}

#portfolio-section2 .portfolio-box .project-item .image-box .hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  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;
  opacity: 0;
}

#portfolio-section2 .portfolio-box .project-item .image-box .hover-image a.zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 13px;
  background: #cd3a54;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  outline: none;
}

#portfolio-section2 .portfolio-box .project-item .image-box:hover .hover-image {
  opacity: 1;
}

#portfolio-section2 .portfolio-box .project-item .image-box:hover .hover-image a.zoom {
  margin-top: -20px;
}

#portfolio-section2 .portfolio-box .project-item .content-box {
  text-align: center;
  padding: 20px 10px;
}

#portfolio-section2 .portfolio-box .project-item .content-box h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 0px;
  transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -webkit-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
}

#portfolio-section2 .portfolio-box .project-item .content-box h2 a {
  color: #131313;
}

#portfolio-section2 .portfolio-box .project-item .content-box p {
  font-size: 12px;
  margin-bottom: 0;
}

#portfolio-section2 .portfolio-box .project-item:hover .hover-box {
  opacity: 1;
}

#portfolio-section2 .portfolio-box .project-item:hover .hover-box h2 {
  margin-bottom: 0;
}

#portfolio-section2 .portfolio-box .project-item:hover .hover-box span {
  margin-bottom: 5px;
}

/*-------------------------------------------------- */
/*  Team section
/*------------------------------------------------- */
#team-section {
  background: rgb(232, 232, 232);
  padding: 100px 0;
  
}
#team-section-end{
  background: #AC9B7D;
}

#team-section .team-box {
  text-align: center;
}

#team-section .team-box .team-post .team-gal {
  position: relative;
  margin-bottom: 20px;
}

#team-section .team-box .team-post .team-gal .hover-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  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;
  opacity: 0;
}

#team-section .team-box .team-post .team-gal .hover-box a {
  outline: none;
}

#team-section .team-box .team-post img {
  width: 100%;
  height: auto;
}

#team-section .team-box .team-post>h2 {
  padding-bottom: 5px;
  margin-bottom: 5px;
  position: relative;
}

/* slider image */
.team-post h2 {
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  margin-top: -21px;
}

#team-section .team-box .team-post:hover .team-gal .hover-box {
  opacity: 1;
}

.modal {
  z-index: 9999999;
  text-align: left;
}

.modal .modal-dialog .modal-content {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  background: #ffffff;
  border: none;
}

.modal .modal-dialog .modal-content .modal-body {
  padding: 30px;
  font-weight: 400;
  font-family: 'Exo', sans-serif;

}

.modal .modal-dialog .modal-content .modal-body h2 {
  font-weight: 600;
  font-family: 'Exo', sans-serif;
  text-transform: uppercase;
  margin-bottom: -4px;
  margin-top: 10px;
}

.modal .modal-dialog .modal-content .modal-body p {
  display: inline-block;
  font-family: 'Exo', sans-serif;
  font-weight: 200;
  font-size: 15px;
  color: #111;
}

.modal .modal-dialog .modal-content .modal-body h3 {
  font-weight: 600;
  font-family: 'Exo', sans-serif;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.modal .modal-dialog .modal-content .modal-body ul.social-list {
  text-align: left;
}

.modal .modal-dialog .modal-content .modal-body ul.social-list li {
  display: inline-block;
  margin-right: 0px;
  font-weight: 200;
}

.modal .modal-dialog {
  max-width: 580px;
  margin: 100px auto;
}

/*-------------------------------------------------- */
/*  banner section
/*------------------------------------------------- */
section.banner-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/3.jpg") center center fixed;
  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.banner-section {
    background: #111 url("../upload/banners/3@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section.banner-section {
    background: #111 url("../upload/banners/3@2x.jpg") center center fixed;
    background-size: cover;
  }
}

section.banner-section blockquote {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

section.banner-section h1 {
  color: #fff;
  margin-bottom: 10px;
  font-weight: 300;
  line-height: 46px;
}

section.banner-section span {
  color: #fff;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

section.banner-section2 {
  padding: 140px 0;
  background: #f7f7f7;
}

section.banner-section2 blockquote {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

section.banner-section2 h1 {
  margin-bottom: 10px;
  font-weight: 300;
  line-height: 46px;
}

section.banner-section2 span {
  color: #cd3a54;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

section.banner-section3 {
  padding: 100px 0;
  background: #ffffff;
}

blockquote.style-1 {
  padding: 30px;
  padding-left: 50px;
  margin: 0 auto;
  text-align: left;
  border-left: 5px solid #f1f1f1;
  background: #f7f7f7;
  margin-bottom: 40px;
}

blockquote.style-1 h1 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 300;
  line-height: 34px;
}

blockquote.style-1 span {
  color: #cd3a54;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

blockquote.style-2 {
  padding: 30px;
  padding-left: 50px;
  margin: 0 auto;
  text-align: left;
  border-left: 5px solid rgba(255, 255, 255, 0.3);
  background: #cd3a54;
  margin-bottom: 40px;
}

blockquote.style-2 h1 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 300;
  line-height: 34px;
}

blockquote.style-2 span {
  color: #cd3a54;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

blockquote.style-2 h1,
blockquote.style-2 span {
  color: #fff;
}

blockquote.style-3 {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
  padding: 40px 60px;
  background: #f7f7f7;
}

blockquote.style-3 p {
  color: #131313;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  line-height: 36px;
  margin-bottom: 0;
}

blockquote.style-4 {
  max-width: 900px;
  margin: 0 auto 40px;
  text-align: center;
  padding: 40px 60px;
  background: #cd3a54;
}

blockquote.style-4 p {
  color: #fff;
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  line-height: 36px;
  margin-bottom: 0;
}

/*-------------------------------------------------- */
/*  Services section
/*------------------------------------------------- */
#services-section {
  padding: 100px 0;
}

#services-section .services-box .services-post {
  margin: 0 0 30px;
  padding-bottom: 30px;
  text-align: right;
  padding-right: 10px;
  border-bottom: 1px solid #f1f1f1;
}

#services-section .services-box .services-post a {
  float: right;
  display: inline-block;
  width: 80px;
  height: 80px;
  text-decoration: none;
  border: 1px solid #f1f1f1;
  background: #f7f7f7;
  line-height: 78px;
  font-size: 20px;
  text-align: center;
  color: #cd3a54;
  margin-bottom: 25px;
  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;
}

#services-section .services-box .services-post a:hover {
  background: #cd3a54;
  color: #fff;
}

#services-section .services-box .services-post h2 {
  margin-top: 5px;
  margin-bottom: 4px;
}

#services-section .services-box .services-post h2,
#services-section .services-box .services-post p {
  margin-right: 105px;
}

#services-section .services-box .services-post.right-post {
  text-align: left;
  padding-right: 0px;
  padding-left: 10px;
}

#services-section .services-box .services-post.right-post a {
  float: left;
}

#services-section .services-box .services-post.right-post h2,
#services-section .services-box .services-post.right-post p {
  margin-left: 105px;
  margin-right: 0px;
}

#services-section .services-box .row:last-child .services-post {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

#services-section2 {
  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/6.jpg") center center fixed;
  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) {
  #services-section2 {
    background: #111 url("../upload/banners/6@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  #services-section2 {
    background: #111 url("../upload/banners/6@2x.jpg") center center fixed;
    background-size: cover;
  }
}

#services-section2 .services-box .services-post {
  margin: 0 0 40px;
  text-align: center;
}

#services-section2 .services-box .services-post a {
  width: 80px;
  height: 80px;
  text-decoration: none;
  background: #fff;
  line-height: 78px;
  font-size: 20px;
  text-align: center;
  color: #cd3a54;
  margin-bottom: 25px;
  -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;
}

#services-section2 .services-box .services-post a:hover {
  background: #cd3a54;
  color: #fff;
}

#services-section2 .services-box .services-post h2,
#services-section2 .services-box .services-post p {
  color: #fff;
}

#services-section2 .services-box .services-post p {
  font-size: 12px;
}

#services-section3 {
  padding: 100px 0;
  background: #f7f7f7;
}

#services-section3 .services-box .services-post {
  margin: 0 0 40px;
  text-align: center;
  padding: 0px 30px 30px;
  border: 1px solid #eeeeee;
  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;
}

#services-section3 .services-box .services-post a {
  display: block;
  width: 80px;
  height: 80px;
  text-decoration: none;
  border: 1px solid #eeeeee;
  background: #f9f9f9;
  line-height: 78px;
  font-size: 20px;
  text-align: center;
  color: #cd3a54;
  margin: -40px auto 25px;
  -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;
}

#services-section3 .services-box .services-post p {
  font-size: 12px;
}

#services-section3 .services-box .services-post:hover {
  border: 1px solid #cd3a54;
}

#services-section3 .services-box .services-post:hover a {
  border: 1px solid #cd3a54;
  background: #cd3a54;
  color: #fff;
}

/*-------------------------------------------------- */
/*  blog section
/*------------------------------------------------- */
#blog-section {
  background: #f7f7f7;
  padding: 100px 0;
}

#blog-section .blog-box .blog-post {
  margin-bottom: 20px;
}

#blog-section .blog-box .blog-post .post-image a {
  display: block;
}

#blog-section .blog-box .blog-post .post-image a img {
  width: 100%;
  height: auto;
}

#blog-section .blog-box .blog-post .post-content {
  padding: 24px 30px;
  background: #f3f3f3;
  text-align: center;
}

#blog-section .blog-box .blog-post .post-content h2 {
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0;
}

#blog-section .blog-box .blog-post .post-content h2 a {
  color: #131313;
}

#blog-section .blog-box .blog-post .post-content ul.post-tags {
  margin-bottom: 5px;
}

#blog-section .blog-box .blog-post .post-content ul.post-tags li {
  display: inline-block;
  margin-right: 10px;
  color: #131313;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

#blog-section .blog-box .blog-post .post-content ul.post-tags li i {
  font-size: 13px;
  color: #bbb;
  margin-right: 4px;
}

#blog-section .blog-box .blog-post .post-content p {
  margin-bottom: 0;
}

#blog-section .blog-box.grid-style .blog-post {
  margin-bottom: 40px !important;
}

#blog-section .blog-box.list-style {
  max-width: 800px;
  margin: 0 auto;
}

#blog-section .blog-box.list-style .blog-post {
  margin-bottom: 40px;
}

#blog-section .blog-box.list-style .blog-post .post-content {
  padding-bottom: 30px;
}

#blog-section .blog-box.list-style .blog-post .post-content p {
  margin-bottom: 15px;
}

ul.pagination-list {
  text-align: center;
}

ul.pagination-list li {
  display: inline-block;
}

ul.pagination-list li a {
  padding: 6px 14px;
  color: #131313;
  font-size: 12px;
  font-family: "Open Sans", sans-serif;
  border: 1px solid #f1f1f1;
}

ul.pagination-list li a.active {
  border: 1px solid #a1a1a1;
}

ul.pagination-list li a:hover {
  background: #cd3a54;
  border: 1px solid transparent;
  color: #fff;
}

/*------------------------------------------------- */
/* =  Tweets sections
/*------------------------------------------------- */
section.tweets-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/4.jpg") center center fixed;
  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.tweets-section {
    background: #111 url("../upload/banners/4@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section.tweets-section {
    background: #111 url("../upload/banners/4@2x.jpg") center center fixed;
    background-size: cover;
  }
}

section.tweets-section .tweets-box {
  text-align: center;
}

section.tweets-section .tweets-box>p i {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 60px;
  font-size: 22px;
  color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  margin-bottom: 30px;
}

section.tweets-section .tweets-box .tweet-post h1 {
  color: #fff;
}

section.tweets-section .tweets-box .tweet-post h1 a {
  color: #cd3a54;
}

section.tweets-section .tweets-box .tweet-post span {
  color: #fff;
  font-size: 13px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

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

section.tweets-section .owl-theme .owl-controls .owl-buttons div {
  background: rgba(0, 0, 0, 0.7);
}

/*-------------------------------------------------- */
/*  testimonial section
/*------------------------------------------------- */
#testimonial-section {
  padding: 100px 0;
}

#testimonial-section .testimonial-box .testimonial-post {
  padding: 40px;
  margin-bottom: 30px;
  border: 1px solid #f1f1f1;
}

#testimonial-section .testimonial-box .testimonial-post img {
  float: left;
  max-width: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

#testimonial-section .testimonial-box .testimonial-post .testimonial-content {
  margin-left: 140px;
}

#testimonial-section .testimonial-box .testimonial-post .testimonial-content p {
  margin-bottom: 0;
}

#testimonial-section .testimonial-box .testimonial-post .testimonial-content h2 {
  font-size: 13px;
  font-weight: 600;
}

#testimonial-section .testimonial-box .testimonial-post .testimonial-content h2 span {
  color: #cd3a54;
}

/*-------------------------------------------------- */
/*  clients section
/*------------------------------------------------- */
section#clients-section {
  padding: 80px 0;
  background: #cd3a54;
}

section#clients-section .clients-box ul.clients-list {
  overflow: hidden;
}

section#clients-section .clients-box ul.clients-list li {
  list-style: none;
  float: left;
  width: 16.66666%;
  text-align: center;
}

section#clients-section .clients-box ul.clients-list li a img {
  max-width: 100%;
  height: auto;
}

section#clients-section2 {
  padding: 100px 0;
}

section#clients-section2 .clients-box ul.clients-list {
  overflow: hidden;
}

section#clients-section2 .clients-box ul.clients-list li {
  list-style: none;
  float: left;
  width: 16.66666%;
  text-align: center;
}

section#clients-section2 .clients-box ul.clients-list li a img {
  max-width: 100%;
  height: auto;
}

section#clients-section3 {
  padding: 100px 0;
}

section#clients-section3 .clients-box ul.clients-list {
  overflow: hidden;
}

section#clients-section3 .clients-box ul.clients-list li {
  list-style: none;
  float: left;
  width: 16.66666%;
  text-align: center;
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
}

section#clients-section3 .clients-box ul.clients-list li a {
  padding: 30px;
}

section#clients-section3 .clients-box ul.clients-list li a img {
  max-width: 100%;
  height: auto;
}

section#clients-section3 .clients-box ul.clients-list li:nth-child(6n) {
  border-right: none;
}

section#clients-section3 .clients-box ul.clients-list li:nth-child(n+7) {
  border-bottom: none;
}

section#clients-section4 {
  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/3.jpg") center center fixed;
  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#clients-section4 {
    background: #111 url("../upload/banners/3@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section#clients-section4 {
    background: #111 url("../upload/banners/3@2x.jpg") center center fixed;
    background-size: cover;
  }
}

section#clients-section4 .clients-box ul.clients-list {
  overflow: hidden;
}

section#clients-section4 .clients-box ul.clients-list li {
  list-style: none;
  float: left;
  width: 16.66666%;
  text-align: center;
}

section#clients-section4 .clients-box ul.clients-list li a {
  padding: 30px;
  display: block;
}

section#clients-section4 .clients-box ul.clients-list li a img {
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------- */
/* =  Contact */
/*------------------------------------------------- */
.contact-info-box {
  padding: 100px 0;
}

.contact-info-box h2 {
  margin-bottom: 20px;
  font-size: 14px;
  text-transform: uppercase;
}

.contact-info-box p {
  margin-bottom: 20px;
}

.contact-info-box ul.contact-list li {
  display: block;
  padding-bottom: 6px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f1f1f1;
  overflow: hidden;
}

.contact-info-box ul.contact-list li span {
  display: inline-block;
  float: left;
  color: #cd3a54;
  font-size: 13px;
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  line-height: 38px;
  text-align: center;
  border: 1px solid #f1f1f1;
}

.contact-info-box ul.contact-list li p {
  margin-left: 60px;
  margin-top: 7px;
  margin-bottom: 0;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

.contact-info h2 {
  color: #d3a084;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  font-size: 18px;
}

.contact-info p {
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #131313;

}

#team-section-end .maps {
  width: 100%
}

#contact-form {
  margin: 0;
  color: #131313;

}

#contact-form h2 {
  color: #d3a084;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
  font-size: 18px;
}

#contact-form input[type="text"],
#contact-form textarea {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #131313;
  font-size: 17px;
  outline: none;
  border: 1px solid #efefef;
  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;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  border-radius: 0px;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

#contact-form textarea {
  height: 120px;
}

#contact-form button {
  color: #fff;
  font-size: 17px;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  padding: 12px 24px;
  background: #AC9B7D;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -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;
  margin: 0;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: 'Exo', sans-serif;
  font-weight: 400;
}

#contact-form button:hover {
  opacity: 0.85;
}

#contact-form #msg {
  padding: 10px 30px;
  margin-top: 10px;
}


section.bannerline-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/4.jpg") center center fixed;
  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.bannerline-section {
    background: #111 url("../upload/banners/4@2x.jpg") center center fixed;
    background-size: cover;
  }
}

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
  section.bannerline-section {
    background: #111 url("../upload/banners/4@2x.jpg") center center fixed;
    background-size: cover;
  }
}


@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) {
  #pricing-section3 {
    background: #111 url("../upload/banners/3@2x.jpg") center center fixed;
    background-size: cover;
  }
}

/*------------------------------------------------- */
/* =  Footer */
/*------------------------------------------------- */
footer {
  padding: 40px 0;
  background: #4a4746;
}

footer p {
  color: #fff;
  margin-bottom: 10px;
}

footer .social-icons {
  align-items: center;
  margin-left: 20em;
}


/*-------------------------------------------------*/
/* =  Responsive Part
/*-------------------------------------------------*/
@media (max-width: 1199px) {
  #portfolio-section .portfolio-box .project-item {
    width: 33.33333%;
  }

  .share-post-box ul.share-box li a {
    padding: 15px 24px;
  }
}

/* version mobile */
@media (max-width: 991px) {
.navbar{
  height: 10%;
}
  .navbar-dark .navbar-toggler,
  .navbar-light .navbar-toggler {
    margin: 15px;
    margin-top: -45px;
    margin-left: 20em;
    cursor: pointer;
    outline: none;
  }

  .navbar-dark .navbar-brand {
    margin: 0 15px;
    
  }
  .navbar-brand{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
  }

  .navbar-nav>li>a,
  .navbar-nav>li.active>a {
    padding: 8px 0 !important;
    outline: none;
  }

  .navbar-nav {
    border-top: 1px solid red;
    padding-top: 10px;
    text-align: center;
    overflow: hidden;
    background-color: #111;
  }

  .navbar {
    background: #131313 !important;
  }

  .navbar-nav>li>a {
    background: transparent !important;
  }

  .megamenu {
    position: relative;
    top: initial;
    left: initial;
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    border-top: none;
    background: transparent;
  }

  .megamenu h2 {
    display: none;
  }

  .megamenu .inner-megamenu {
    background: transparent;
    padding: 10px;
  }

  header.second-style .megamenu ul.mega-list li a {
    color: #131313;
  }

  header.second-style .navbar-nav {
    border-top: none;
  }

  .navbar-collapse {
    max-height: 250px;
    overflow-y: scroll;
    padding-bottom: 20px;
  }

  .nav-item {
    background-color: #bbb;
    font-size: 30px;
  }


  #portfolio-section .portfolio-box .project-item,
  #portfolio-section .portfolio-box.three-col .project-item {
    width: 50%;
  }

  .share-post-box ul.share-box li a {
    padding: 15px 30px;
  }

  .slider-text .slider-caption h1 {
    font-size: 30px;
    line-height: 36px;
  }

  #portfolio-section ul.filter li {
    margin: 0 0 3px;
  }

  section#clients-section {
    padding: 80px 0 50px;
  }

  section#clients-section .clients-box ul.clients-list li,
  section#clients-section2 .clients-box ul.clients-list li,
  section#clients-section4 .clients-box ul.clients-list li {
    width: 33.3333%;
    margin-bottom: 30px;
  }

  section.page-banner-section {
    padding: 140px 0 60px;
  }

  #portfolio-section2 .portfolio-box .project-item {
    width: 50%;
  }

  section#clients-section3 .clients-box ul.clients-list li {
    width: 33.33333%;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(3n) {
    border-right: none;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(n+7) {
    border-bottom: 1px solid #f1f1f1;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(n+10) {
    border-bottom: none;
  }

  section.content-section .elegant-icons span.box1 {
    width: 33.3333%;
  }
}

@media (max-width: 767px) {
  .share-post-box ul.share-box li a {
    padding: 12px;
  }

  .slider-text .slider-caption h1,
  .title-section h1,
  section.banner-section h1,
  .single-post>h1 {
    font-size: 24px;
    line-height: 32px;
  }

  .single-post blockquote {
    padding: 30px;
  }

  #team-section .team-box .team-post {
    margin-bottom: 40px;
  }

  #services-section .services-box .row:last-child .services-post {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f1f1f1;
  }

  #contact-form {
    margin-bottom: 50px;
  }

  .project-details {
    margin-top: 30px;
  }

  section.content-section .elegant-icons span.box1 {
    width: 50%;
  }

  section.video-section .video-box iframe {
    width: 400px;
    height: 260px;
  }
}

@media (max-width: 575px) {
  #portfolio-section .portfolio-box .project-item {
    width: 100%;
  }

  .navbar-collapse {
    padding-left: 15px;
  }

  .comment-area-box ul.depth {
    padding: 0;
  }

  .comment-area-box ul.depth .comment-box {
    padding-left: 0;
  }

  .share-post-box ul.share-box li {
    margin-bottom: 2px;
  }

  .share-post-box ul.share-box li a {
    padding: 15px 25px;
  }

  section#clients-section .clients-box ul.clients-list li,
  section#clients-section2 .clients-box ul.clients-list li,
  section#clients-section4 .clients-box ul.clients-list li {
    width: 50%;
    margin-bottom: 30px;
  }



  .single-project .post-head ul.navigate-posts {
    display: none;
  }

  #portfolio-section2 .portfolio-box .project-item,
  #portfolio-section .portfolio-box.three-col .project-item {
    width: 100%;
  }

  .call-to-action.style-2 a,
  .call-to-action.style-4 a {
    float: none;
    margin-bottom: 20px;
  }

  .call-to-action.style-2 .action-content,
  .call-to-action.style-4 .action-content {
    margin-right: 0;
  }

  section#clients-section3 .clients-box ul.clients-list li {
    width: 50%;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(3n) {
    border-right: 1px solid #f1f1f1;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(2n) {
    border-right: none;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(n+10) {
    border-bottom: 1px solid #f1f1f1;
  }

  section#clients-section3 .clients-box ul.clients-list li:nth-child(n+11) {
    border-bottom: none;
  }

  section.content-section .elegant-icons span.box1 {
    width: 100%;
  }

  section.video-section .video-box iframe {
    width: 100%;
    height: 200px;
  }
}