/*

Author: radekthemes
Template: Granda - One Page Parallax
Version: 1.0

*/
/* ----------------------------------------
   ----------- 1.GENERAL STYLES -----------
   ---------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700,800');
html, body {
 	height: 100%;
}
body {
 	-webkit-font-smoothing: antialiased;
  background: #111;
 	font-family: 'Poppins', Helvetica, Arial, sans-serif;
 	font-size: 16px;
 	line-height: 1.5;
 	letter-spacing: 1px;
}
body.no-scroll {
  overflow: hidden;
}
input::-moz-focus-inner {
    border: 0;
}
ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}
/* ----------------------------------------
   -------------- 2.TYPOGRAPHY ------------
   ---------------------------------------- */
h1,
h2,
h3,
h4,
h5,
a {
 	color: #fff;
 	font-family: 'Poppins', Helvetica, Arial, sans-serif;
  line-height: 1.5;
 	margin: 0;
 	padding: 0;
}
h1 {
	font-size: 39px;
  color: #fff;
  line-height: 59px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
h2 {
  color: #fff;
  font-weight: 800;
 	font-size: 25px;
  line-height: 38px;
 	letter-spacing: 0.075em;
}
h3 {
  color: #fff;
	font-size: 16px;
	letter-spacing: 0.16em;
  font-weight: 700;
}
h4 {
  font-size: 12px;
  letter-spacing: 0.1em;
}
p {
 	color: #89898b;
 	line-height: 24px;
 	letter-spacing: 0.1em;
 	font-size: 16px;
}
a {
 	text-decoration: none;
 	font-size: 14px;
  font-weight: 600;
  outline: none !important;
  cursor: pointer;
}
a:hover,
a:focus,
a:active {
 	color: #8a6038;
 	text-decoration: none;
 	outline: none !important;
}
/* ----------------------------------------
   -------------- 4.PRELOADER -------------
   ---------------------------------------- */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: #111;
  overflow: hidden;
}
.preloader-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.preloader-icon {
  width: 72px;
  height: 72px;
  display: inline-block;
  padding: 0px;
}
.preloader-icon span {
  position: absolute;
  display: inline-block;
  width: 72px;
  height: 72px;
  border-radius: 100%;
  background-color: #8a6038;
  -webkit-animation: preloader-fx 1.6s linear infinite;
  animation: preloader-fx 1.6s linear infinite;
}
.preloader-icon span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}
@keyframes preloader-fx {
  0% {transform: scale(0, 0); opacity:0.5;}
  100% {transform: scale(1, 1); opacity:0;}
}
@-webkit-keyframes preloader-fx {
  0% {-webkit-transform: scale(0, 0); opacity:0.5;}
  100% {-webkit-transform: scale(1, 1); opacity:0;}
}
/* ----------------------------------------
   -------------- 5.BUTTONS ---------------
   ---------------------------------------- */
   .btn {
     font-weight: 600;
     color: #fff;
     font-size: 12px;
     padding: 18px 40px;
     display: inline-block;
     vertical-align: middle;
     position: relative;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
   }
   .btn-dark {
     background-color: #8a6038;
     border: 1px solid transparent;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     transition: all 0.4s ease;
   }
   .btn-dark:hover,
   .btn-dark:active,
   .btn-dark:focus,
   .btn-dark:active:focus,
   .btn-dark.active.focus,
   .btn-dark.active:focus,
   .btn-dark.focus,
   .btn-dark:active:focus,
   .btn-dark:focus {
     background-color: transparent;
     color: #8a6038;
     outline: none;
     border: 1px solid #8a6038;
   }

   .btn-light {
     background-color: transparent;
     border: 1px solid #8a6038;
     color: #8a6038;
     -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
     transition: all 0.4s ease;
   }
   .btn-light:hover,
   .btn-light:active,
   .btn-light:focus,
   .btn-light:active:focus,
   .btn-light.active.focus,
   .btn-light.active:focus,
   .btn-light.focus,
   .btn-light:active:focus,
   .btn-light:focus {
     background-color: #8a6038;
     color: #fff;
     outline: none;
     border: 1px solid transparent;
   }
.intro {
  width: 100%;
  height: 80%;
  background: url(../img/banner.jpg) center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
.intro .intro-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
}
.intro .intro-msg h3 {
  margin-bottom: 24px;
}
.inner {
  padding-top: 144px;
  background-color: #191919;
  text-align: center;
}
.inner h2 {
  margin-bottom: 60px;
  line-height: 48px;
}
.demo {
  padding: 144px 0;
}
.demo .item {
  margin-bottom: 48px;
}
.demo .item img {
  margin-bottom: 24px;
  -webkit-box-shadow: 0px 0px 20px 2px rgba(255,255,255,0.05);
  -moz-box-shadow: 0px 0px 20px 2px rgba(255,255,255,0.05);
  box-shadow: 0px 0px 20px 2px rgba(255,255,255,0.05);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.demo .item:hover img {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.demo .work-sp {
  margin-bottom: 60px;
}
footer {
  padding: 72px 0;
  background: #191919;
}