/*
Alexis - Responsive Portoflio Template
Version: 1.0
Author: Mizanur Rahman
*/



/* --------------------------------------
=========================================
   1. GLOBAL STYLES AND FIXES
=========================================
-----------------------------------------*/



/*---------------------------------------
   1.1 HTML, BODY & PRE LOADER
-----------------------------------------*/

html {

  font-size: 100%;

  box-sizing: border-box;

}
*,


*:before,
*:

after {

  box-sizing: inherit;

}


body {

  font-family: 'poppins', helvetica, sans-serif;

  font-size: 15px;

  line-height: 27px;

  color: #616161;

  font-weight: 400;

  text-align: center;

  overflow-x: hidden !important;

}



/* PRE LOADER */


.preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fefefe;

    z-index: 99999;

    height: 100%;

    width: 100%;

    overflow:
 hidden !important;

}


.status {

    width: 40px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -20px 0 0 -20px;

}



.loader {

  position: relative;

  margin: 0px auto;

  width: 70px;

}

.loader:before {

  content: '';

  display: block;

  padding-top: 100%;

}

.circular {

  -webkit-animation: rotate 2s linear infinite;

  animation: rotate 2s linear infinite;

  height: 100%;
  -webkit-transform-origin: center center;

  -ms-transform-origin: center center;

  transform-origin: center center;

  width: 100%;

  position: absolute;

  top: 0;
  bottom: 0;

  left: 0;

  right: 0;

  margin: auto;

}

.path {

  stroke-dasharray: 1,200;

  stroke-dashoffset: 0;

  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;

  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;

  stroke-linecap: round;

}

@-webkit-keyframes rotate {

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }
}

@keyframes rotate {

  100% {

    -webkit-transform: rotate(360deg);

    transform: rotate(360deg);

  }
}

@-webkit-keyframes dash {

  0% {

    stroke-dasharray: 1,200;

    stroke-dashoffset: 0;

  }

  50% {

    stroke-dasharray: 89,200;

    stroke-dashoffset: -35px;

  }

  100% {

    stroke-dasharray: 89,200;

    stroke-dashoffset: -124px;

  }
}

@keyframes dash {

  0% {

    stroke-dasharray: 1,200;

    stroke-dashoffset: 0;

  }

  50% {

    stroke-dasharray: 89,200;

    stroke-dashoffset: -35px;

  }

  100% {

    stroke-dasharray: 89,200;

    stroke-dashoffset: -124px;

  }
}

@-webkit-keyframes color {

  100%,
  0% {

    stroke: #fc5f45;

  }

  40% {

    stroke: #b27cf5;

  }

  66% {

    stroke: #38c695;
  }

  80%,
  90% {

    stroke: #feb960;

  }
}

@keyframes color {

  100%,
  0% {

    stroke: #fc5f45;

  }

  40% {

    stroke: #b27cf5;

  }

  66% {

    stroke: #38c695;

  }

  80%,
  90% {

    stroke: #feb960;

  }
}


/*---------------------------------------
   1.2 ANCHOR AND INPUT FIELD
-----------------------------------------*/


a {

  text-decoration: none;

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

  color: #313131;

}



a:hover {

  text-decoration: none;

  color: #fc5f45;

}

textarea.input-field:focus,
textarea.input-field:active,
input.input-field:focus,
input.input-field:active {

  border: 1px solid #fc5f45;

  outline: 0;

  background: #ffffff;
}



/*---------------------------------------
   1.3 BOOTSTRAP FIXES / OTHTER FIXES
-----------------------------------------*/


@-webkit-viewport {

  width: device-width;

}

@-moz-viewport {

  width: device-width;

}

@-ms-viewport {

  width: device-width;

}

@-o-viewport {

  width: device-width;

}

@viewport {

  width: device-width;

}

*,

*:before,
*:

after {

  box-sizing: border-box;

}


ul,
ol {

  padding-left: 0 !important;

}


li {

  list-style: none;

}


.row.no-gutters [class^="col-"],
.row.no-gutters [class*=" col-"] {

  padding-right: 0;

  padding-left: 0;

}



/* CAROUSEL NAV */


.owl-theme .owl-controls .owl-page span {

  display: block;

  width: 17px;

  height: 17px;

  filter: alpha(opacity=50);

  opacity: 1;

  border-radius: 20px;

  background: transparent;

  border: 2px solid rgba(252, 95, 69, 0.5);

}


.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {

  filter: alpha(opacity=100);

  opacity: 1;

  background: #fc5f45;

  border: 3px solid #ffffff;

  box-shadow: 0px 0px 0px 2px #fc5f45;

}



/*---------------------------------------
   1.4 TEXT / COLORS
-----------------------------------------*/


.dark-text_mein {

  color: #d3b289;

}
.dark-text0 {

  color: #604b32;

}
.dark-text {

  color: #313131;

}

.dark-text2 {

  color: #616161;

}

.white-text {

  color: #ffffff;

}

.red-text {

  color: #fc5f45;

}

.green-text {
  color: #38c695;

}

.purple-text {

  color: #b27cf5;

}

.yellow-text {

  color: #feb960;

}

.uppercase {

  text-transform: uppercase;

}

.small-text {

  font-size: 14px;

}

.small-text0 {

  font-size: 30px;

}

.extra-small-text {

  font-size: 13px;

}

strong,
.strong {

  font-weight: 500;

}

.text-shadow01 {
  text-shadow: 5px 5px 15px #84766c;
}

.text-shadow02 {
  text-shadow: 3px 3px 3px #84766c;
}



.text-shadow03 {
  text-shadow: 2px 2px 2px #84766c;
}

.text-shadow04 {
  text-shadow: 1px 1px 1px #ffffff;
}



/*---------------------------------------
   1.5 LINES, SHADOW & GRADEINTS
-----------------------------------------*/


.howay-line-bottom {

  border-bottom: 3px solid #eb6100;

}

.howay02-line-bottom {

  border-bottom: 3px solid #666464;

}

.red-line-bottom {

  border-bottom: 3px solid #fc5f45;

}

.green-line-bottom {

  border-bottom: 3px solid #38c695;

}

.purple-line-bottom {

  border-bottom: 3px solid #b27cf5;

}

.yellow-line-bottom {

  border-bottom: 3px solid #feb960;

}

.red-line-top {

  border-top: 3px solid #fc5f45;

}

.green-line-top {

  border-top: 3px solid #38c695;

}

.purple-line-top {

  border-top: 3px solid #b27cf5;

}

.yellow-line-top {

  border-top: 3px solid #feb960;

}

.four-lines {

  width: 100%;

}

.four-lines .line {

  width: 25%;

  float: left;

}

.diffuse-shadow {

  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);

}

.image-border {

  box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.2);

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.red-gradient-overlay:after {

  position: absolute;

  content: "";

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  opacity: 0.5;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.5) 100%);

  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.5) 100%);

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

}

.green-gradient-overlay:after {

  position: absolute;

  content: "";

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  opacity: 0.5;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.6) 100%);

  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.6) 100%);

  -webkit-transition: all ease 0.25s;
  transition: all ease 0.25s;

}

.purple-gradient-overlay:after {

  position: absolute;

  content: "";

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  opacity: 0.5;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.6) 100%);

  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.6) 100%);

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

}

.yellow-gradient-overlay:after {

  position: absolute;

  content: "";

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  opacity: 0.5;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.6) 100%);

  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.6) 100%);

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

}

.dark-gradient-overlay:after {

  position: absolute;

  content: "";

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  opacity: 0.75;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 50%, #000000 100%);

  background: linear-gradient(to bottom, rgba(255, 0, 0, 0) 50%, #000000 100%);

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

}

/*---------------------------------------
   1.6 HEADINGS, SECTION HEADERS & BG
-----------------------------------------*/




/* SECTION NUMBER, HEADER AND BG */


.section-number {

  font-weight: 700;

  font-size: 273px;

  color: #e0e0e0;

  opacity: 0.3;

  position: absolute;

  top: 110px;

  left: 0;

}

.centered-number {

  right: 0;

  left: 0;

}

.section-heading {

  position: relative;

  z-index: 10;

}

section {

  position: relative;

}

.section-header {

  position: relative;

  z-index: 10;

  margin-bottom: 25px;

}

.sub-heading {

  font-size: 18px;

  margin-top: 13px;
}
.bgcolor-2 {

  background: #f7f7f7;
}

.white-bg {
  background: rgba(255,255,255,0.75);

}


/*---------------------------------------
   1.7 BUTTONS
-----------------------------------------*/


.standard-button {
  padding: 0 40px 0 40px;

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 500;

  border-radius: 30px;

  margin-top: 25px;

  margin-bottom: 25px;

  line-height: 50px;

  border: none;

  box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.2);

}

.red-button {

  color: #ffffff;

  background: #eb6100;

}

.howay-button {

  color: #ffffff;

  background: #7a685d;

}

.howay-button:hover,
.howay-button:active,
.howay-button:active:hover,
.howay-button:focus:hover,
.howay-button:focus {

  background-color: #c68d65;

  color: #ffffff;
  outline: none;

}

.red-button:hover,
.red-button:active,
.red-button:active:hover,
.red-button:focus:hover,
.red-button:focus {

  background-color: #fc5f45;

  color: #ffffff;
  outline: none;

}

.red-outline {

  color: #fc5f45;

  background: #fff;

  border: 2px solid #eb6100;

  line-height: 46px;

  padding: 0 38px 0 38px;

}
.red-outline:hover,
.red-outline:active,
.red-outline:active:hover,
.red-outline:focus:hover,
.red-outline:focus {

  background-color: #eb6100;

  color: #ffffff;

  outline: none;

  border: 2px solid #fc5f45;

}

.green-button {

  color: #ffffff;

  background: #38c695;

}

.green-button:hover,
.green-button:active,
.green-button:active:hover,
.green-button:focus:hover,
.green-button:focus {

  background-color: #17bb82;

  color: #ffffff;

  outline: none;

}

.green-outline {

  color: #38c695;

  background: #fff;

  border: 2px solid #38c695;

  line-height: 46px;

  padding: 0 38px 0 38px;

}

.green-outline:hover,
.green-outline:active,
.green-outline:active:hover,
.green-outline:focus:hover,
.green-outline:focus {

  background-color: #38c695;

  color: #ffffff;

  outline: none;

  border: 2px solid #38c695;

}

.purple-button {

  color: #ffffff;

  background: #b27cf5;

}

.purple-button:hover,
.purple-button:active,
.purple-button:active:hover,
.purple-button:focus:hover,
.purple-button:focus {
  background-color: #954fed;

  color: #ffffff;

  outline: none;

}

.purple-outline {

  color: #b27cf5;

  background: #fff;

  border: 2px solid #b27cf5;

  line-height: 46px;

  padding: 0 38px 0 38px;

}

.purple-outline:hover,
.purple-outline:active,
.purple-outline:active:hover,
.purple-outline:focus:hover,
.purple-outline:focus {

  background-color: #b27cf5;

  color: #ffffff;

  outline: none;

  border: 2px solid #b27cf5;

}

.yellow-button {

  color: #ffffff;

  background: #feb960;

}

.yellow-button:hover,
.yellow-button:active,
.yellow-button:active:hover,
.yellow-button:focus:hover,
.yellow-button:focus {

  background-color: #ed9c34;

  color: #ffffff;

  outline: none;

}

.yellow-outline {

  color: #feb960;

  background: #fff;

  border: 2px solid #feb960;

  line-height: 46px;

  padding: 0 38px 0 38px;

}

.yellow-outline:hover,
.yellow-outline:active,
.yellow-outline:active:hover,
.yellow-outline:focus:hover,
.yellow-outline:focus {

  background-color: #feb960;
  color: #ffffff;

  outline: none;

  border: 2px solid #feb960;

}
/* --------------------------------------
=========================================
   2. SECTIONS
=========================================
-----------------------------------------*/


/*---------------------------------------
   2.1 SECTION: HOME PAGE
-----------------------------------------*/



.home .color-overlay {

  padding-top: 175px;
  padding-bottom: 125px;

}

.home .intro {

  margin-top: 62px;

  margin-bottom: 18px;

}

.home .cta {

  text-align: center;

}

.home .cta .standard-button {
  margin-right: 10px;
  margin-left: 10px;

}
.home-features {

  margin-top: 55px;

}

.home-features .single-feature {

  margin-bottom: 45px;

}

.home-features .single-feature .icon {

  font-size: 45px;

  margin-bottom: 28px;

}

.color-overlay {

  background: linear-gradient(-45deg, rgba(246, 255, 0, .1), rgba(255, 0, 161, .1));

}


/*.color-overlay {

  background: rgba(38, 39, 50, 0.75);

}
*/

/* LOGO AND STICKY NAVIGATION */


.sticky-navigation {

  background: #ffffff;

  min-height: 75px;

  border-bottom: 0;

  -webkit-backface-visibility: hidden;

  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.25);

}

.sticky-navigation .navbar-brand {
  margin-top: 9px;

}

.sticky-navigation .navbar-brand img {

  max-height: 26px;

}

.sticky-navigation .current a {

  color: #fc5f45 !important;

}
.sticky-navigation .main-navigation li a {

  line-height: 45px;

  color: #313131;

  font-weight: 500;

  font-size: 14px;

}

.sticky-navigation .main-navigation li a:hover,
.sticky-navigation .main-navigation li a:focus {

  color: #fc5f45;

}



/*---------------------------------------
   2.2 SECTION: ABOUT US
-----------------------------------------*/


.about-us {

  padding-top: 50px;

  padding-bottom: 50px;

}

.about-us .featured-image {

  position: relative;

  width: 100%;

}

.about-us .featured-image img {

  width: 100%;

  display: block;

}

.overflow-box {

  margin-left: -200px;

  position: relative;

  z-index: 10;

}

.about-box {

  background: #ffffff;

  position: relative;

  margin-top: 75px;

  z-index: 10;

  overflow: hidden;

}

.about-box .about-content {

  padding-top: -60px;

  padding-left: 82px;

  padding-right: 82px;

}

.about-box p {

  margin-top: 22px;

  margin-bottom: 100px;

  position: relative;

}


/*---------------------------------------
   2.3 SECTION: OUR FOCUS
-----------------------------------------*/


.our-focus {

  position: relative;

  padding-top: 114px;

  padding-bottom: 150px;

}

.focuses .single-focus {

  padding-left: 28px;

  padding-right: 28px;

  padding-top: 60px;

  margin-top: 50px;

}

.focuses .single-focus .icon {

  font-size: 55px;
  margin-bottom: 20px;

}

.focuses .single-focus p {

  margin-top: 20px;

  margin-bottom: 53px;

}



/*---------------------------------------
   2.4 SECTION: VIDEO
-----------------------------------------*/
/*---------------------------------------
   2.5 SECTION: PORTFOLIO
-----------------------------------------*/


.portfolio .portfolio-items {

  margin-top: 40px;

}

.portfolio .portfolio-items li {

  display: inline-block;

  width: 33.333333333%;

  float: left;

  padding: 10px;

}

.portfolio .portfolio-items li img {

  width: 100%;

}

.grid {

  position: relative;

  list-style: none;

  text-align: center;

}

.grid figure {

  position: relative;

  float: left;

  overflow: hidden;

  margin: 5px;

  padding: 5px;

  min-width: 280px;

  max-width: 370px;

  width: 33.333333333%;

  background: #fff;

  text-align: center;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.grid figure:hover {

  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);

}

.grid figure img {

  position: relative;
  display: block;

  max-width: 100%;

  opacity: 1;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}
.grid figure:hover img {

  -webkit-filter: brightness(70%);

  filter: brightness(70%);

  -webkit-transition: all ease 0.25s;

  transition: all ease 0.25s;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.grid figure figcaption {

  padding-right: 5px;

  padding-left: 5px;

  color: #fff;

  font-size: 1.25em;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.grid figure figcaption .caption-text {

  padding: 20px 20px 0 20px;

  color: #fff;

  font-size: 1.25em;

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.grid figure figcaption::before,
.grid figure figcaption::after {

  pointer-events: none;

}

.grid figure figcaption,
.grid figure figcaption > a {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.grid figure figcaption > a {

  z-index: 1000;

  text-indent: 200%;

  white-space: nowrap;

  font-size: 0;

  opacity: 0;

}

.grid figure h6,
.grid figure p {

  margin: 0;

}

.grid figure p {

  font-size: 15px;

}

figure.effect-zoe figcaption {

  top: auto;

  bottom: 0;

  height: 3.75em;

  background: #fff;

  color: #3c4a50;

  -webkit-transition: -webkit-transform 0.35s;

  transition: transform 0.35s;

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

  transform: translate3d(0, 100%, 0);

}

figure.effect-zoe h6 {
  margin-top: 5px;

}

figure.effect-zoe h6 span {

  padding: 10px;

}

figure.effect-zoe p.icon-links a {

  float: right;

  color: #3c4a50;

  font-size: 1.4em;

}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {

  color: #252d31;

}

figure.effect-zoe p.description {

  position: absolute;

  bottom: 10em;

  width: 100%;

  text-align: center;

  color: #fff;

  text-transform: none;

  font-size: 90%;

  opacity: 0;


  /* Fix for Chrome 37.0.2062.120 (Mac) */


  -webkit-transition: opacity 0.35s;

  transition: opacity 0.35s;

  -webkit-backface-visibility: hidden;


  /* Fix for Chrome 37.0.2062.120 (Mac) */


}


figure.effect-zoe p.description span {

  font-size: 60px;

  color: #fff;

}

figure.effect-zoe p.description span:hover {

  color: #fff;

}

figure.effect-zoe h6,
figure.effect-zoe p.icon-links a {

  -webkit-transition: -webkit-transform 0.35s;

  transition: transform 0.35s;

  -webkit-transform: translate3d(0, 200%, 0);

  transform: translate3d(0, 200%, 0);

}

figure.effect-zoe p.icon-links a span::before {

  display: inline-block;

  padding: 8px 10px;

  font-family: 'feathericons';

  speak: none;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}

figure.effect-zoe h6 {

  display: inline-block;

}

figure.effect-zoe:hover p.description {

  opacity: 1;

}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h6,
figure.effect-zoe:hover p.icon-links a {

  -webkit-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

}

figure.effect-zoe:hover h6 {

  -webkit-transition-delay: 0.05s;

  transition-delay: 0.05s;

}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {

  -webkit-transition-delay: 0.1s;

  transition-delay: 0.1s;

}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {

  -webkit-transition-delay: 0.15s;

  transition-delay: 0.15s;

}

figure.effect-zoe:hover p.icon-links a:first-child {

  -webkit-transition-delay: 0.2s;

  transition-delay: 0.2s;

}



/* SINGLE PROJECT */


#loader {

  min-height: 930px;

  position: relative;

  display: none;

}

#loader .loader-icon {

  background-color: #FFF;

  margin: -35px -35px;

  top: 50%;

  left: 50%;

  z-index: 10000;

  position: fixed;

  width: 70px;

  height: 70px;

  background-size: 30px 30px;

  border-radius: 5px;

}

.project-image img {

  max-width: 100%;

}

.single-project {

  margin-top: 40px;

  margin-bottom: 40px;

}

.project-details-list {

  margin-top: 50px;

}

.project-details-list li {

  margin-bottom: 10px;

  border-bottom: 1px dotted #efefef;

}

.back-button {

  display: none;

  padding-top: 13px;

  padding-bottom: 10px;

}



/*---------------------------------------
   2.6 SECTION: TEAM MEMBER
-----------------------------------------*/


.member-list {

  margin-top: 25px;

}

.member-list .single-member {

  margin-top: 25px;

  background: #fff;

}

.member-list .single-member .member-pic {

  position: relative;

  display: inline-block;

  border: 5px solid #ffffff;

}

.member-list .single-member .member-pic img {

  width: 100%;

  display: block;

}

.member-list .single-member h6 {

  margin-top: 5px;
  margin-bottom: 0;

}

.member-list .single-member .extra-small-text {

  margin-bottom: 12px;

}



/*---------------------------------------
   2.7 SECTION: STATS
-----------------------------------------*/


.stats {

  background: url(../images/backgrounds/3.jpg) no-repeat top;

  background-size: cover;

}

.stats .color-overlay {

  padding-top: 150px;

  padding-bottom: 50px;

}

.stats .stats-icon {

  font-size: 50px;

  margin-bottom: 30px;

}

.stats .stats-text {

  color: rgba(255, 255, 255, 0.7);

  margin-top: 13px;

  margin-bottom: 30px;

}

.stats .bottom-icon {

  font-size: 20px;

  margin-bottom: 90px;

}

/*---------------------------------------
   2.8 SECTION: WORK STEPS
-----------------------------------------*/


.work-steps {

  padding-top: 114px;

  padding-bottom: 150px;

}
.steps {

  margin-top: 125px;

}



/* WORK STEPS BACKGROUND IMAGES */


.steps .step-1-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), url(../images/fact_01.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), url(../images/fact_01.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-2-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), url(../images/box_01.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), url(../images/box_01.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-3-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), url(../images/fact.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), url(../images/fact.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-4-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), url(../images/sales_01.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), url(../images/sales_01.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-5-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), url(../images/tokyo_01.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(252, 95, 69, 0.1) 100%), url(../images/tokyo_01.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-6-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), url(../images/howayphillipines.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(56, 198, 149, 0.1) 100%), url(../images/howayphillipines.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-7-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), url(../images/bg/bg_01_03.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(178, 124, 245, 0.1) 100%), url(../images/bg/bg_01_03.jpg) no-repeat top;

  background-size: cover;

}

.steps .step-8-image {

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), url(../images/bg/bg_01_03.jpg) no-repeat top;

  background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), linear-gradient(to bottom, rgba(255, 0, 0, 0) 0%, rgba(254, 185, 96, 0.1) 100%), url(../images/bg/bg_01_03.jpg) no-repeat top;

  background-size: cover;

}

.steps .step {

  padding-bottom: 50px;

}

.steps .step .step-image {

  position: relative;

}

.steps .step .step-image img {

  width: 100%;

}

.steps .step .step-box-left {

  position: relative;

  padding: 38px;

  float: left;

  margin-left: -150px;

  margin-top: -50px;

  z-index: 10;

  width: 458px;

  height: 300px;

}
.steps .step .step-box-right {

  position: relative;

  padding: 38px;

  float: right;

  margin-right: -150px;

  margin-top: -50px;

  z-index: 10;

  width: 458px;

  height: 300px;

}

.steps .step .step-number {

  position: relative;

  z-index: -1;

  float: left;

  font-size: 50px;

  font-family: 'Libre Baskerville', 'Playfair Display', Georgia, serif;

  font-weight: 600;

  color: #efefef;

  width: 67px;

  height: 100%;

  margin-top: 12px;

  margin-left: -10px;

  margin-right: 26px;

}

.steps .step .step-number:after {

  content: "";

  background: #e0e0e0;

  position: absolute;

  z-index: -1;

  top: -26px;

  right: 20px;

  width: 1px;

  height: 115px;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}

.steps .step .content-area {
  margin-top: 28px;

}

.steps .step .content-area p {

  padding-right: 13px;

}




/*---------------------------------------
   2.9 SECTION: PRICING TABLE
-----------------------------------------*/




.price-circle-red {

  background: #fc5f45;

  width: 106px;

  height: 106px;

  margin: auto;

  border-radius: 50%;

  border: 3px solid #fff;

  box-shadow: 0px 0px 0px 3px #fc5f45;

}

.price-circle-red h4 {

  margin-bottom: 0;

  margin-top: 23px;

}

.price-circle-red .extra-small-text {

  line-height: 0.6;

}

.price-circle-green {

  background: #38c695;

  width: 106px;

  height: 106px;

  margin: auto;

  border-radius: 50%;

  border: 3px solid #fff;

  box-shadow: 0px 0px 0px 3px #38c695;

}

.price-circle-green h4 {

  margin-bottom: 0;

  margin-top: 23px;

}

.price-circle-green .extra-small-text {

  line-height: 0.6;

}

.price-circle-purple {

  background: #b27cf5;

  width: 106px;

  height: 106px;

  margin: auto;

  border-radius: 50%;

  border: 3px solid #fff;

  box-shadow: 0px 0px 0px 3px #b27cf5;

}

.price-circle-purple h4 {

  margin-bottom: 0;

  margin-top: 23px;

}

.price-circle-purple .extra-small-text {

  line-height: 0.6;

}

.price-circle-yellow {

  background: #feb960;

  width: 106px;

  height: 106px;

  margin: auto;

  border-radius: 50%;

  border: 3px solid #fff;

  box-shadow: 0px 0px 0px 3px #feb960;

}

.price-circle-yellow h4 {

  margin-bottom: 0;

  margin-top: 23px;

}

.price-circle-yellow .extra-small-text {

  line-height: 0.6;

}

.packages .single-package {

  margin-top: 51px;

  padding-bottom: 12px;

}

.packages .single-package h5 {

  margin-top: 27px;

  margin-bottom: 22px;

}

.packages .single-package .feature-list {

  margin-top: 38px;

}

.packages .single-package .feature-list li {

  margin-top: 12px;

  margin-bottom: 12px;

}

.packages .single-package .feature-list li .icon {

  margin-right: 5px;

  font-weight: bold;

}



/*---------------------------------------
   2.10 SECTION: TESTIMONIALS
-----------------------------------------*/



.testimonials .color-overlay {

  padding-top: 114px;

  padding-bottom: 140px;

}

.testimonials .section-number {

  color: #5d5d62;

}

.testimonials .single-feedback {

  margin-top: 50px;

  overflow: visible;

  width: 100%;

}

.testimonials .single-feedback .client-image {

  position: relative;

  margin-right: -15px;

}

.testimonials .single-feedback .client-image img {

  width: 100%;

  display: block;

  margin-top: 1px;

}

.testimonials .single-feedback .feedback-content {

  margin-top: 43px;

  margin-left: -15px;

  padding: 25px 0 0 0;

}

.testimonials .single-feedback .feedback-content .q-sign {

  font-family: 'Libre Baskerville', 'Playfair Display', Georgia, serif;

  font-weight: 700;

  font-size: 337px;

  color: #e0e0e0;

  opacity: 0.3;

  position: absolute;

}

.testimonials .single-feedback .feedback-content .top {

  top: 200px;

  left: 10px;

}

.testimonials .single-feedback .feedback-content .bottom {

  bottom: -75px;
  right: 15px;

}

.testimonials .single-feedback .feedback-content blockquote {

  border: none;

  padding-left: 60px;

  padding-right: 60px;

  margin-bottom: 0;

}

.testimonials .single-feedback .feedback-content blockquote p {

  font-size: 15px;

  color: #616161;

}

.testimonials .single-feedback .feedback-content blockquote cite {

  margin-top: 30px;

  margin-bottom: 20px;

  font-style: normal;

}

.testimonials .single-feedback .feedback-content blockquote cite .client-image {

  max-width: 100px;

  float: left;

  margin-right: 20px;

}

.testimonials .single-feedback .feedback-content blockquote cite .client-details {

  float: left;

}

.testimonials .single-feedback .feedback-content blockquote cite .signature {

  margin-bottom: 20px;

}

.testimonials .single-feedback .feedback-content blockquote cite .signature img {

  max-height: 31px;

}

.testimonials .single-feedback .feedback-content blockquote cite h6 {

  margin-bottom: 0;

}

.testimonials .owl-carousel .owl-wrapper-outer {

  margin-bottom: -30px;

}

.testimonials .owl-theme .owl-controls {

  text-align: right;

  position: relative;

  z-index: 10;

  margin-top: 5px;

}

.testimonials .owl-theme .owl-controls .owl-page span {

  border: 2px solid #fff;

}

.testimonials .owl-theme .owl-controls .owl-page.active span,
.testimonials .owl-theme .owl-controls.clickable .owl-page:hover span {

  border: 3px solid #000000;

}



/*---------------------------------------
   2.11 SECTION: FEATURES
-----------------------------------------*/




.feature-grid {

  margin-top: 75px;

}

.feature-box {

  margin-bottom: 70px;

  padding-right: 20px;

  padding-left: 20px;

}

.feature-box .feature-header {

  margin-bottom: 26px;

}

.feature-box .feature-header h6 {

  margin-top: -4px;

}

.feature-box .feature-header .icon {

  float: left;

  font-size: 60px;

  margin-left: -2.5px;

  margin-top: -0.5px;

  margin-right: 5px;

}



/* CALL TO ACTION */


.cta-bottom {

  margin-top: 50px;

}

.cta-bottom h4 {

  display: inline-block;

  margin-right: 25px;

  margin-top: 30px;

}

.cta-bottom .standard-button {

  margin-top: 20px;

}

/*---------------------------------------
   2.12 SECTION: BLOG
-----------------------------------------*/




.blog-posts {

  margin-top: 76px;

}

.post-info div {

  display: inline-block;

  margin-right: 20px;

}

.post-title:hover {

  text-decoration: underline;

}

.featured-post {

  margin-bottom: 23px;

}

.featured-post .post-featured-image {

  position: relative;

}

.featured-post .post-featured-image img {

  width: 100%;

  display: block;

}

.featured-post .post-info {

  margin-top: -50px;

  position: relative;

  padding-left: 50px;

}

.featured-post .post-info div {

  display: inline-block;

}

.featured-post .post-info .date {

  opacity: 0.7;

}

.featured-post .post-content {

  padding-left: 50px;

  padding-right: 50px;

  margin-top: 50px;

  padding-bottom: 28px;

}

.featured-post .post-content p {

  margin-top: 17px;

}

.regular-post {

  padding: 26px 35px 26px 35px;

  margin-bottom: 23px;

}



/*---------------------------------------
   2.13 SECTION: SUBSCRIBE FORM
-----------------------------------------*/


.subscribe-section {

  padding-top: 120px;

  padding-bottom: 125px;

}

.subscribe-form {

  margin-top: 11px;

}

.subscribe-form .input-box {

  border: 2px solid #efefef;

  border-top-left-radius: 30px;

  border-bottom-left-radius: 30px;

  padding: 0 20px 0 27px;

  width: 300px;

  background: #f7f7f7;

  line-height: 46px;

}

.subscribe-form input.input-box:focus {

  border: 2px solid #fc5f45;

  outline: 0;

  background: #ffffff;

}

.subscribe-form .standard-button {

  border-top-left-radius: 0;

  border-bottom-left-radius: 0;

  margin-left: -7px;

  padding: 0 25px 0 25px;

}

.mailchimp-success,
.mailchimp-error {

  display: none;

}



/*---------------------------------------
   2.14 SECTION: FOOTER
-----------------------------------------*/


.get-in-touch {

  background: url(../images/backgrounds/1_h.jpg) no-repeat top;
  background-size: cover;

  padding-top: 114px;

  padding-bottom: 150px;

}

.success {

  display: none;

}

.contact-form {

  text-align: center;

  margin-top: 51px;

}

.contact-form .input-field {

  line-height: 49px;

  width: 100%;

  border: 1px solid #efefef;

  border-radius: 4px;

  text-align: center;

  padding: 0 10px 0 10px;

  margin-bottom: 24px;

}

.contact-form textarea.input-field {

  max-height: 225px;

  line-height: 27px;

  padding-top: 15px;

}

.contact-form .standard-button {

  margin-top: 17px;

}

.contact-form ::-webkit-input-placeholder {

  text-align: center;

}

.contact-form :-moz-placeholder {


  /* Firefox 18- */


  text-align: center;

}

.contact-form ::-moz-placeholder {


  /* Firefox 19+ */


  text-align: center;

}

.contact-form :-ms-input-placeholder {

  text-align: center;

}



/* CONTACT FORM */


.footer .footer-col {

  padding: 50px 40px 45px 40px;

  text-align: left;

}

.footer .footer-col h6 {

  margin-bottom: 28px;

}

.footer .footer-col .social-icons {

  padding-top: 5px;

}

.footer .footer-col .social-icons a {

  color: #ffffff;

  font-size: 30px;

  margin-right: 10px;

}

.footer .footer-col .social-icons a:hover {

  color: #fc5f45;

}

.footer .footer-logo {

  margin-top: 45px;

  text-align: center;

}

.footer .footer-logo img {

  max-height: 38px;

}


.fixed-bg {

  background-attachment: fixed;

}


/* ------------------------------------------------------------------------------
   Section-number
-------------------------------------------------------------------------------*/

.section-number-top {

  font-weight: 700;

  font-size: 150px;

  color: #e0e0e0;

  opacity: 0.3;

  position: absolute;

  left: 0;

}
.z-9999 {
  z-index: -9999;
}

.top-margin {
    margin: auto;
}

.top-200 {
    top: -200px;
}


.diffuse-shadow {

  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.05);

}