/*
  Theme Name: Bijoy
  Author: Devsmoni
  Version: 1.0
  Demo URL : https://skmoni.com/html/tf/bijoy    
  Description: Bijoy is a clean and minimal Portfolio HTML template. The template is very user friendly platform also is suitable for creative professionals, photographers, web designers, freelancers, architect, and including bloggers can use this template. Bijoy is compatible with smartphones, tablets , desktop PCs, laptops, and all web browsers will be able to view your high-quality content. With the latest code, this template is ideal for portfolio, weblogs and enterprises of any kind, as this template is an incredible powerful and fun multipurpose template, suited to everyone.
    
*/

/*--  [Table of contents]

	1. Theme default CSS
	2. Body 
	3. Header
	4. Slider
	5. Feature
	5. Breadcrumb
	6. Portfolio
	7. About Us
	8. Service
	9. Counter 
	10. Team 
	11. Download
	12. Testimonial
	13. Clients
	14. Blog 
	15. Pricing
	16. contact
	17. Footer
	
----*/

/* Link default css*/
@import url('https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700|Open+Sans:300,400,600,700');
@import url('css/font-awesome.min.css');
@import url('css/owl.carousel.min.css');
@import url('css/animate.css');
/* 1. Theme default CSS*/
.m-0{margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;}
.p-0{padding-top:0;padding-right:0;padding-bottom:0;padding-left:0;}
.mt-0{margin-top:0}
.mt-10{margin-top:10px}
.mt-15{margin-top:15px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mt-50{margin-top:50px}
.mt-60{margin-top:60px}
.mt-70{margin-top:70px}
.mt-80{margin-top:80px}
.mt-90{margin-top:90px}
.mt-100{margin-top:100px}
.mt-110{margin-top:110px}
.mt-120{margin-top:120px}
.mt-130{margin-top:130px}
.mt-140{margin-top:140px}
.mt-150{margin-top:150px}
.mr-0{margin-right:0px}
.mr-10{margin-right:10px}
.mr-15{margin-right:15px}
.mr-20{margin-right:20px}
.mr-30{margin-right:30px}
.mr-40{margin-right:40px}
.mr-50{margin-right:50px}
.mr-60{margin-right:60px}
.mr-70{margin-right:70px}
.mr-80{margin-right:80px}
.mr-90{margin-right:90px}
.mr-100{margin-right:100px}
.mr-110{margin-right:110px}
.mr-120{margin-right:120px}
.mr-130{margin-right:130px}
.mr-140{margin-right:140px}
.mr-150{margin-right:150px}
.mb-0{margin-bottom:0}
.mb-10{margin-bottom:10px}
.mb-15{margin-bottom:15px}
.mb-20{margin-bottom:20px}
.mb-30{margin-bottom:30px}
.mb-40{margin-bottom:40px}
.mb-50{margin-bottom:50px}
.mb-60{margin-bottom:60px}
.mb-70{margin-bottom:70px}
.mb-80{margin-bottom:80px}
.mb-90{margin-bottom:90px}
.mb-100{margin-bottom:100px}
.mb-110{margin-bottom:110px}
.mb-120{margin-bottom:120px}
.mb-130{margin-bottom:130px}
.mb-140{margin-bottom:140px}
.mb-150{margin-bottom:150px}
.ml-0{margin-left:0}
.ml-10{margin-left:10px}
.ml-15{margin-left:15px}
.ml-20{margin-left:20px}
.ml-30{margin-left:30px}
.ml-40{margin-left:40px}
.ml-50{margin-left:50px}
.ml-60{margin-left:60px}
.ml-70{margin-left:70px}
.ml-80{margin-left:80px}
.ml-90{margin-left:90px}
.ml-100{margin-left:100px}
.ml-110{margin-left:110px}
.ml-120{margin-left:120px}
.ml-130{margin-left:130px}
.ml-140{margin-left:140px}
.ml-150{margin-left:150px}
.pt-0{padding-top:0}
.pt-10{padding-top:10px}
.pt-15{padding-top:15px}
.pt-20{padding-top:20px}
.pt-30{padding-top:30px}
.pt-40{padding-top:40px}
.pt-50{padding-top:50px}
.pt-60{padding-top:60px}
.pt-70{padding-top:70px}
.pt-80{padding-top:80px}
.pt-90{padding-top:90px}
.pt-100{padding-top:100px}
.pt-110{padding-top:110px}
.pt-120{padding-top:120px}
.pt-130{padding-top:130px}
.pt-140{padding-top:140px}
.pt-150{padding-top:150px}
.pr-0{padding-right:0}
.pr-10{padding-right:10px}
.pr-15{padding-right:15px}
.pr-20{padding-right:20px}
.pr-30{padding-right:30px}
.pr-40{padding-right:40px}
.pr-50{padding-right:50px}
.pr-60{padding-right:60px}
.pr-70{padding-right:70px}
.pr-80{padding-right:80px}
.pr-90{padding-right:90px}
.pr-100{padding-right:100px}
.pr-110{padding-right:110px}
.pr-120{padding-right:120px}
.pr-130{padding-right:130px}
.pr-140{padding-right:140px}
.pb-0{padding-bottom:0}
.pb-10{padding-bottom:10px}
.pb-15{padding-bottom:15px}
.pb-20{padding-bottom:20px}
.pb-30{padding-bottom:30px}
.pb-40{padding-bottom:40px}
.pb-50{padding-bottom:50px}
.pb-60{padding-bottom:60px}
.pb-70{padding-bottom:70px}
.pb-80{padding-bottom:80px}
.pb-90{padding-bottom:90px}
.pb-100{padding-bottom:100px}
.pb-110{padding-bottom:110px}
.pb-120{padding-bottom:120px}
.pb-130{padding-bottom:130px}
.pb-140{padding-bottom:140px}
.pb-150{padding-bottom:150px}
.pl-0{padding-left:0}
.pl-10{padding-left:10px}
.pl-15{padding-left:15px}
.pl-20{padding-left:20px}
.pl-30{padding-left:30px}
.pl-40{padding-left:40px}
.pl-50{padding-left:50px}
.pl-60{padding-left:60px}
.pl-70{padding-left:70px}
.pl-80{padding-left:80px}
.pl-90{padding-left:90px}
.pl-100{padding-left:100px}
.pl-110{padding-left:110px}
.pl-120{padding-left:120px}
.pl-130{padding-left:130px}
.pl-140{padding-left:140px}
.pl-150{padding-left:150px}
.ptb-0{padding:0}
.ptb-10{padding:10px 0}
.ptb-20{padding:20px 0}
.ptb-30{padding:30px 0}
.ptb-40{padding:40px 0}
.ptb-50{padding:50px 0}
.ptb-60{padding:60px 0}
.ptb-70{padding:70px 0}
.ptb-80{padding:80px 0}
.ptb-90{padding:90px 0}
.ptb-100{padding:100px 0}
.ptb-110{padding:110px 0}
.ptb-120{padding:120px 0}
.ptb-130{padding:130px 0}
.ptb-140{padding:140px 0}
.ptb-150{padding:150px 0}
.mtb-0{margin:0}
.mtb-10{margin:10px 0}
.mtb-15{margin:15px 0}
.mtb-20{margin:20px 0}
.mtb-30{margin:30px 0}
.mtb-40{margin:40px 0}
.mtb-50{margin:50px 0}
.mtb-60{margin:60px 0}
.mtb-70{margin:70px 0}
.mtb-80{margin:80px 0}
.mtb-90{margin:90px 0}
.mtb-100{margin:100px 0}
.mtb-110{margin:110px 0}
.mtb-120{margin:120px 0}
.mtb-130{margin:130px 0}
.mtb-140{margin:140px 0}
.mtb-150{margin:150px 0;}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10{float:left;}
.col-1{width:10%;}
.col-2{width:20%;}
.col-3{width:30%;}
.col-4{width:40%;}
.col-5{width:50%;}
.col-6{width:60%;}
.col-7{width:70%;}
.col-8{width:80%;}
.col-9{width:90%;}
.col-10{width:100%;}
.white-bg{background:#ffffff;}
.gray-bg{background:#f6f6f6;}
.transparent-bg{background:transparent;}
/*2. Body CSS*/
body {
  font-family: 'Open Sans', sans-serif;
  font-weight: normal;
  font-style: normal;
}
.img,img{
 max-width: 100%;
transition: all 0.3s ease-out 0s;
}
.fix{overflow: hidden;}
.uppercase {text-transform: uppercase;}
.capitalize { text-transform: capitalize;}
.height-100-vh{height:100vh}
.height-80-vh{height:80vh!important}
.height-70-vh{height:70vh!important}
a, .button {
  -webkit-transition: all 0.3s ease-out 0s;
  -moz-transition: all 0.3s ease-out 0s;
  -ms-transition: all 0.3s ease-out 0s;
  -o-transition: all 0.3s ease-out 0s;
  transition: all 0.3s ease-out 0s;
}
a:focus,
.button:focus {
  text-decoration: none;
  outline: none;
}
a:focus, a:hover, .portfolio-cat a:hover, .footer-menu li a:hover {
  text-decoration: none;
}
a, button {
  color: #444;
  outline: medium none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Dosis', sans-serif;
  font-weight: normal;
  color: #232332;
  margin-top: 0px;
  font-style: normal;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 
    color: inherit;
}
.space{
    height: 70px;
}
h1 {
    font-size: 40px;
    font-weight: 500;
}
h2 {
    font-size: 35px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 22px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}
ul {
  margin: 0px;
  padding: 0px;
}
li { list-style: none }
p {
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  color: #555;
  margin-bottom: 15px;
}
hr{
  padding: 0px;
  border-bottom: 1px solid #eceff8;
  border-top: 0px;
}
label {
  color: #444;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
}
*::-moz-selection {
  background: #d6b161;
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: #000;
  color: #fff;
  text-shadow: none;
}
::selection {
  background: #555;
  color: #fff;
  text-shadow: none;
}
*::-moz-placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}
*::placeholder {
  color: #555555;
  font-size: 14px;
  opacity: 1;
}

/* button style */
.btn {
  -moz-user-select: none;
  background: #333 none repeat scroll 0 0;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 2px;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: dosis;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.42857;
  margin-bottom: 0;
  padding: 7px 20px;
  text-align: center;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
  vertical-align: middle;
}
.btn.btn-name:hover{border-color:#fff;color:#fff;}
.btn:hover{background:transparent;border-color:#444}
.btn.btn-large {
  padding: 10px 25px;
}
.btn-lg {
  font-weight: 700;
  padding: 13px 31px;
}
.blak-btn:hover{
    border: #000;
    color: #000;
}
/* Link in Images */
#paralax{background: url(img/slider/paralax.jpg) repeat scroll center top / cover;
  background-attachment: fixed;
}
#paralax2 {
  background: rgba(0, 0, 0, 0) url("img/slider/paralax2.jpg") repeat scroll center top / cover ;
  background-attachment: fixed;
}
.counter-bg {background: url(img/bg/counter-bg.jpg) repeat scroll center top / cover;} 
.port-bg{background: url(img/bg/port-bg.jpg) repeat scroll center top / cover;} 
.service-bg{background: url(img/bg/service-bg.jpg) repeat scroll center top / cover;}
.slide-1 {background: rgba(255, 255, 255, 0.3) url("img/slider/slider-1.jpg") repeat scroll center top / cover ;}
.slide-2 {background: rgba(0, 0, 0, 0) url("img/slider/2.jpg") repeat scroll center top / cover ;
position: relative;}
slide, .slide-3 {background: rgba(0, 0, 0, 0) url("img/slider/slider-1.jpg") repeat scroll center top / cover ;}
.slide-2:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #000;
    opacity: .65;
}
.slide:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    height: 70%;
    background: #000;
    opacity: .65;
}
/*Main CSS Start From Here*/
/* 3. header area CSS */
header {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 22;
}
.header-area{
 }
.logo h4{
  padding: 25px 0;
  transition: all 0.3s ease 0s;
  color: #fff;
  font-weight: 600;
  margin: 0;
}
.logo-black h4{
    color: #000;
}
.sticky .logo h4 {
  color: #222;
  padding: 21px 0;
}
.menu-area {
  float: right;
}
.menu-area ul{}
.menu-area ul li {
  float: left;
  margin-left: 25px;
  position: relative;
}
.menu-area ul li a {
  color: #fff;
  display: block;
  font-size: 12px;
  padding: 27px 0;
  text-transform: uppercase;
}
.menu-black ul > li > a{
    color: #000;
}
.sticky .menu-area ul > li > a {
  padding: 23px 0;
  color: #222;
}
.menu-area ul li:hover > a::before {
  float: left;
  opacity: 1;
  width: 50%;
}
.menu-area ul li > a::before {
  background: #fff none repeat scroll 0 0;
  bottom: 23px;
  content: "";
  height: 1px;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  transition: all 0.3s ease 0s;
  width: 0;
}
.menu-black ul li > a::before {
  background: #000 none repeat scroll 0 0;
  bottom: 23px;
}
.sticky .header-area .menu-area nav ul li a:before{
  background: #000 none repeat scroll 0 0;
  bottom: 23px;
}
.sticky .header-area .menu-area nav ul.submenu li > a:before{
  background: none;
}
.menu-area ul li ul.submenu {
  background: #222 none repeat scroll 0 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
  opacity: 0;
  position: absolute;
  top: 100%;
  transform: scaleY(0);
  transition: all 0.4s ease 0s;
  visibility: hidden;
  width: 180px;
}
.menu-area ul li:hover > ul.submenu {
  opacity: 1;
  transform: scaleY(1);
  visibility: visible;
}
ul.white-sub li a {
  color: #fff;
}
.sticky .header-area .submenu li a {
  color: #fff;
}
.menu-area ul li ul.submenu {}
.menu-area ul li ul.submenu li{}
.menu-area ul li ul.submenu li {
  margin: 0;
  display: block;
  width: 100%;
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
}
.menu-area ul li ul.submenu li a {
  padding: 10px;
  font-size: 11px;
}
.menu-area ul li ul.submenu li a:before{
    background: none;
}
.menu-area ul li ul.submenu li:hover a{
    background: rgba(51, 51, 51, 0.5) none repeat scroll 0 0;
}
.menu-area li ul li a i{float:right}
.menu-area ul li ul.submenu li ul {
  left: 100%;
  top: 0;
}
.menu-area ul li ul.submenu li ul.submenu {
  width: 150px;
}
.menu-area ul li ul.submenu li ul li{}
.menu-area ul li ul.submenu li ul li a{
    background: #222;
}
.menu-area ul li ul.submenu li ul li:hover a{
    background: #444;
}
.sticky {
  background: #ffffff none repeat scroll 0 0;
  box-shadow: 0 -1px 0 #f5f5f5 inset;
  left: 0;
  margin: auto;
  position: fixed;
  top: 0;
  transition: height 0.3s ease-out 0s, background 0.3s ease-out 0s, box-shadow 0.3s ease-out 0s;
  width: 100%;
  z-index: 1030;
}
.header-fixed {
  left: 0;
  position: absolute;
  right: 0;
  z-index: 1030;
}
/* 4. Slider area CSS */
.slider img{
    width: 100%;
    height: 100vh;
}
.main-slider{
    height: 100vh;
}
.main-slider-content {
  top: 50%;
  position: absolute;
  transform: translateY(-50%);
}
.main-slider-content h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.main-slider-content h2{
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 5px;
    margin-top: 15px;
}
.main-slider-content p{
    width: 60%;
}
.slider-active.owl-carousel {
  position: relative;
}
.slider-active.owl-carousel .owl-nav div {
  background: #000 none repeat scroll 0 0;
  font-size: 15px;
  height: 40px;
  line-height: 39px;
  opacity: 0.4;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  visibility: hidden;
  transition: .4s;
}
.slider-active:hover.owl-carousel .owl-nav div{
    visibility: visible;
}
.slider-active.owl-carousel .owl-nav .owl-prev {
  left: 15px;
}.slider-active.owl-carousel .owl-nav .owl-next {
  right: 15px;
}
.slider-area{}
.hero-caption {
  display: table;
  height: 100vh;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  width: 100%;
}
.hero-text {
  display: table-cell;
  height: 100%;
  position: relative;
  vertical-align: middle;
}
.slider-content {
  text-align: center;
}
.slider-content h2 {
  color: #fff;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 50px;
  opacity: 0.9;
  margin-bottom: 60px;
}
.slider-content > p {
    font-size: 16px;
    letter-spacing: 10px;
    opacity: 0.6;
    color: #999;
}
.slider-content h2.m-small{
    margin-bottom: 30px;
}
.slider-content p.small {
  color: #ddd;
  font-size: 12px;
  letter-spacing: 3px;
}
.slider-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.slider-wrapper h4 {
  color: #ddd;
  font-size: 27px;
  font-weight: 500;
  margin-bottom: 15px;
}
.slider-wrapper.black > h4 {
  color: #333;
}
.slider-wrapper.black h2 {
  color: #000;
}
.slider-wrapper span {
  font-size: 35px;
  font-weight: 400;
  letter-spacing: 3px;
}
.cd-headline.clip.is-full-width > span {
  font-size: 30px;
  font-weight: 500;
}
.cd-headline {
  color: #fff;
  padding: 10px 0;
}
.cd-headline b {
  font-weight: 500;
}
/* 5. Feature area CSS */
.feature-area{}
.feature-wrapper{}
.feature-box{}
.feature-box:hover .feature-box-icon span {
    color: #27ae60;
}
.feature-box:hover .feature-box-title h4 {
    color: #27ae60;
}
.feature-box-icon{}
.feature-box-icon span {
  color: #444;
  font-size: 40px;
  font-weight: bold;
  padding-bottom: 15px;
  transition: all 0.4s ease 0s;
}
.feature-box-title{}
.feature-box-title h4 {
  color: #000;
  font-family: sans-serif;
  padding: 10px 0;
  text-transform: none;
  transition: all 0.4s ease 0s;
}
.feature-box-text{}
.feature-box-text p{}
/* 5. Breadcrumb area */
.breadcrumb {
  margin: 0px;
  padding: 8px 15px 0;
}
.breadcrumb-wrapper h3 {
  font-weight: 500;
  letter-spacing: 40px;
}
/* 6. Portfolio area CSS */
.home-portfolio-area {
  overflow: hidden;
}
.portfolio-menu {
  text-align: center;
  padding: 10px 0;
}
.portfolio-menu button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: medium none;
  color: #999;
  font-family: dosis;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  padding: 0 15px;
  text-transform: uppercase;
  transition: .4s;
}
.portfolio-menu button:hover{
    color: #000;
}
.portfolio-menu .active {
  color: #000;
}
.single-portfolio-box{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.single-portfolio-box a{
    display: block;
}
.portfolio-content {
  background: #444 none repeat scroll 0 0;
  bottom: 0;
  color: #ffffff;
  padding: 7px 0;
  position: absolute;
  text-align: left;
  transform: translateY(100%);
  width: 100%;
  padding-left: 30px;
  padding-top: 30px;
}
.portfolio-content h4 {
  color: #fff;
  font-weight: 600;
  padding-bottom: 10px;
  text-transform: capitalize;
}
.portfolio-content p{
    font-size: 14px;
    color: #aaaaaa;
}
.single-portfolio-box:hover .portfolio-content {
  opacity: 0.5;
  top: 0;
  transform: translateY(0px);
  transition: all 0.5s ease 0s;
}
.portfolio-img {
  top: 0;
  overflow: hidden;
  transition: .3s;
}
.portfolio-img > img {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  width: 100%;
}
.single-portfolio-box:hover .portfolio-img {
  transform: scale(1.2);
  transition: .3s;
}
/* 7. About Us */
.about-area h4 {
  font-size: 16px;
  font-weight: 500;
}
.about-area p {
  font-size: 13px;
  line-height: 25px;
}
.section-scroll {
  color: #999;
  transition: all 0.4s ease 0s;
}
.section-scroll:hover {
  color: #000;
}
.skill > h2 {
  padding-bottom: 15px;
  font-weight: 600;
}
.skill.upcase > h4 {
  font-size: 12px;
  font-weight: 400;
  padding-bottom: 2px;
}
.skill span {
  float: right;
}
.progress {
  background-color: #ddd;
  border-radius: 0;
  box-shadow: none;
  height: 4px;
  margin-bottom: 15px;
}
.progress .progress-bar {
  background-color: #000;
  box-shadow: none;
  line-height: 4px;
}
/* 8. Service area CSS */
.service-area{}
.section-title {
  margin-bottom: 60px;
}
.section-title h2 {
  color: #000;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 10px;
  margin-bottom: 20px;
}
.section-title p {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.service-wrapper{}
.content-box {
  margin: 25px 0;
  text-align: center;
}
.content-box-icon {
  font-size: 36px;
}
.content-box-icon span {
  color: #444;
  transition: .4s;
}
.content-box-icon span:hover {
  color: #000;
  cursor: grab;
}
.content-box-title {
  color: #666;
  font-family: dosis;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 5px 0 0;
  text-transform: uppercase;
}
.content-box-text {
  color: #666;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 25px;
  margin: 15px 0 0;
}
/* 9. Counter area CSS */
.single-counter {
  padding-bottom: 20px;
}
.single-counter h2 {
  font-weight: 400;
  letter-spacing: 5px;
}
.single-counter h5 {
  font-weight: 500;
  letter-spacing: 3px;
  padding-top: 10px;
}
/* 10. Team area CSS */
.team-member {
    position: relative;
}
.team-member > img {
    filter: grayscale(100%);
    width: 100%;
}
.team-member::before {
    background: transparent none repeat scroll 0 0;
    content: " ";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: all 0.27s cubic-bezier(0, 0, 0.58, 1) 0s;
    width: 100%;
    z-index: 1;
}
.team-wrapper:hover .team-member::before {
    background: rgba(33, 40, 45, 0.55);
}
.team-info {
    padding: 15px 0;
}
.team-text-icon {
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    opacity: 0;
    transition: all .3s ease 0s;
}
.team-info {
    padding: 15px 0;
}
.team-icon > a {
    border: 1px solid transparent;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 40px;
    line-height: 36px;
    text-align: center;
    width: 40px;
    border-radius: 50%;
    margin: 0 10px;
}
.team-icon > a:hover {
    background: #fff;
    color: #666
}
.team-wrapper:hover .team-icon > a {
    margin: 0 5px;
}
.team-wrapper:hover .team-text-icon {
    opacity: 1;
}
.team-info h3 {
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
}
.team-info span {
    color: #fff;
    text-transform: uppercase;
}
.team-member > img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
/* 11. Download area CSS */
.call-to-action > h3 {
  font-weight: 500;
  letter-spacing: 1.5px;
}
.call-to-action > p {
  margin: 0;
}
.call-to-action a{
  margin-top: 15px;
}
/* 12. Testimonial area CSS */
.test-bg {background: url(img/bg/test-bg.jpg) repeat scroll center top / cover;
position: relative;}
.test-bg:before{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: #000;
    opacity: .50;
}
.testimonial-box {
  margin: auto;
  max-width: 700px;
}
.testimonial-box blockquote {
  background: #ffffff none repeat scroll 0 0;
  border: medium none;
  font-size: 17px;
  font-style: normal;
  line-height: 1.6;
  margin: 0;
  padding: 50px;
  position: relative;
  color: #000;
}
.testimonial-box blockquote:after {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #fff transparent transparent;
  border-image: none;
  border-style: solid;
  border-width: 8px;
  bottom: -16px;
  content: "";
  display: block;
  height: 0;
  left: 20px;
  position: absolute;
  right: 0;
  width: 0;
}
.testimonial-content{margin-top: 20px;
position: relative;}
.testimonial-name {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.testimonial-pos {
  color: #ffffff;
  display: block;
  font-size: 14px;
  margin-top: 5px;
}
.testimonial-pos > a {
  color: #ffffff;
}
/* 13. Clients area CSS */
.owl-carousel .owl-item .img-clients img {
  width: inherit;
}
.clients-active.owl-carousel {
  position: relative;
}
.clients-active.owl-carousel .owl-nav div {
  background: #000 none repeat scroll 0 0;
  font-size: 15px;
  height: 40px;
  line-height: 39px;
  opacity: 0.4;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  visibility: hidden;
  transition: .4s;
}
.clients-active:hover.owl-carousel .owl-nav div{
    visibility: visible;
}
.clients-active.owl-carousel .owl-nav .owl-next {
  right: 0;
}
/* 14. Blog area CSS */
.readm-btn {
  position: absolute;
  width: 50px;
  height: 50px;
  display: table;
  background: #fff;
  right: 15px;
  bottom: -25px;
  text-align: center;
  color: #333 !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

.readm-btn i {
  vertical-align: middle;
  display: table-cell;
}

.readm-btn:hover {
  color: #fff !important;
  background: #333;
}

.section-title h2 {
  font-weight: 500;
  padding-bottom: 30px;
}
.single-blog-item {
  box-shadow: 0px 12px 30px rgba(0, 0, 0, 0.12);
  background: #fff;
  margin-bottom: 30px;
}
.blog-item-thumb {
  position: relative;
}
.blog-item-thumb img{
  min-width: 100%;
}
.blog-item-content {
  padding: 0 15px 5px;
}
.blog-item-content h2 {
  font-size: 20px;
  margin: 30px 0 10px;
  font-weight: 600;
  transition: .4s;
}
.blog-item-content h2:hover {
  color: #888;
}
.blog-item-content h4 {
  font-size: 14px;
  margin-bottom: 10px;
  color: #7d7d7d;
  font-weight: 400;
  letter-spacing: 0.04em;
}
/*Blog page CSS*/
.post {
	margin: 0 0 60px;
}
.post-meta {
  font-size: 15px;
  float: right;
}
.post-title, .post-title a {
  color: #111;
  font-size: 20px;
  font-weight: 400;
  margin: 10px 0 15px;
}
.post-title a:hover{color:#999}
.post-thumbnail {
  margin: 0 0 25px;
}
.widget {
  margin: 0 0 40px;
}
.widget form{position:relative}
.form-control {
  border: 2px solid #eee;
  border-radius: 2px;
  box-shadow: none;
  color: #999999;
  font-size: 14px;
  height: 39px;
}
.form-control:focus {
  border-color: #444;
}
.widget form input{}
.widget form button {
  background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
  border: 0 none;
  color: #666;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}
.widget-title {
  font-weight: 600;
  position: relative;
}
.widget-title::before {
  border-bottom: 2px solid #eeeeee;
  bottom: 0;
  content: "";
  display: block;
  position: absolute;
  width: 100%;
}
.widget-title::after {
  border-bottom: 2px solid #666;
  content: "";
  display: block;
  margin: 20px auto 25px 0;
  position: relative;
  width: 35px;
  z-index: 1;
}
.icons-list > li {
  border-top: 1px solid #eee;
  padding: 10px 0;
}
.icons-list > li:first-child {
  border: 0 none;
  padding-top: 0;
}
.icons-list a {
  color: #999999;
}
.icons-list a:hover {
  color: #444;
}
.widget-posts-image {
  float: left;
  width: 44px;
}
.widget-posts-body {
  margin-left: 58px;
}
.widget .recent-posts > li {
  border-top: 1px solid #eee;
  overflow: hidden;
  padding: 10px 0;
}
.widget-posts-image img {
  max-width: 100%;
}
.widget .recent-posts > li:first-child {
  border: 0 none;
  padding-top: 0;
}
.widget-posts-title {
  font-size: 12px;
  font-weight: 600;
  margin: 2px 0 3px;
}
.widget-posts-meta {
  font-size: 12px;
  opacity: 0.7;
}
ul.tags{}
ul.tags li {
  display: inline-block;
}
ul.tags li a {
  background: #f8f8f8 none repeat scroll 0 0;
  border-radius: 2px;
  color: #666;
  display: inline-block;
  font-size: 13px;
  margin: 0 0 6px;
  padding: 8px 12px;
  text-transform: capitalize;
}
ul.tags li a:hover{background:#000;color:#fff}
.post-content blockquote {
  color: #fff;
  font-size: 20px;
  font-style: normal;
  padding: 30px 25px;
  border: 0;
}
.post-content blockquote i {
  display: block;
  font-size: 24px;
  margin: 0 0 20px;
}
.post.format-quote .post-content {
  background: #444 none repeat scroll 0 0;
  padding: 30px 25px;
}
.format-quote .post-content p {
  color: #fff;
  font-size: 18px;
  line-height: 34px;
}
.post-content footer {
  color: #fff;
}
blockquote.blockquote {
  background-color: #f6f6f6;
  border-left: 2px solid #464646;
  color: #666666;
  font-size: 14px;
  line-height: 26px;
  margin: 23px 0;
  padding: 14px 50px;
}
h3.leave-comment-text {
  border-bottom: 1px solid #5b5b5b;
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 30px;
  padding-bottom: 10px;
}
.news-allreply {
  display: inline-block;
  float: left;
  text-align: center;
}
.news-allreply img {
  border-radius: 100%;
  width: 100%;
}
.nes-icon > a i {
  color: #666666;
  font-size: 14px;
  margin-top: 10px;
}
.blog-img-details {
  padding-left: 90px;
}
.blog-title > h3 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
  text-transform: capitalize;
}
.blog-title > span {
  color: #666666;
  display: block;
  margin-bottom: 7px;
}
.blog-middle-mrg {
  margin: 32px 0 33px 90px;
}
.leave-comment{}
.leave-comment-text{}
h3.leave-comment-text{}
.leave-form{}
.leave-form input {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #c1c1c1;
  color: #666666;
  font-family: "Lato",sans-serif;
  font-size: 14px;
  height: 35px;
  margin-bottom: 30px;
  padding: 0 20px;
  width: 100%;
}
.text-leave textarea {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #c1c1c1;
  color: #666666;
  font-family: "Lato",sans-serif;
  font-size: 14px;
  height: 165px;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
}
/* single posts */
blockquote.single-blockquote {
  background: #444;
}
blockquote.single-blockquote p {
  color: #fff;
}
.comments, .comment-form {
  margin-bottom: 70px;
}
.comment, .comment-content {
  position: relative;
}
.comment-avatar {
  float: left;
  margin: 5px 0 0;
  max-width: 70px;
  position: relative;
  z-index: 1;
}
.comment-avatar::after {
  background: #f5f5f5 none repeat scroll 0 0;
  content: "";
  height: 2px;
  left: 70px;
  position: absolute;
  top: 34px;
  width: 20px;
  z-index: -1;
}
.comment-avatar img {
  border-radius: 50%;
  height: 70px;
  width: 70px;
}
.comment-tools {
  padding: 0 30px;
  position: absolute;
  right: 0;
  top: 25px;
  z-index: 1;
}
.comment-tools a {
  color: #666;
  margin: 0 0 0 15px;
}
.comment-content {
  background: #f5f5f5 none repeat scroll 0 0;
  border-radius: 2px;
  margin: 0 0 35px 90px;
  padding: 30px;
  position: relative;
}
.comment-content h5 {
  font-size: 16px;
  font-weight: 600;
}
.comment-reply {
  margin-left: 90px;
}
/* Pagination */
.pagination > li {
  display: inline-block;
  margin-right: 2px;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
  border-radius: 3px;
}
.pagination > li > a, .pagination > li > span {
  border: 2px solid #eeeeee;
  border-radius: 3px;
  color: #777777;
  display: block;
  float: none;
  padding: 8px 15px;
}
.pagination > .active > a, .pagination > .active > span {
  background: #27cbc0 none repeat scroll 0 0;
  border-color: #27cbc0;
  color: #ffffff;
}
.pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
  background-color: #333;
  border-color: #333;
  color: #ffffff;
}
.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
  background-color: #333;
  border-color: #333;
  color: #fff;
  cursor: default;
  z-index: 3;
}

/* 15. Pricing Area CSS */

.work-title h2 {
  font-weight: 500;
}
.pricing-table {
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0 1px 1px #eee;
  position: relative;
  text-align: center;
  margin: 10px 0 0;
}
.pricing-title, .pricing-action {
  padding: 25px 0;
}
.pricing-title h6 {
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0 0 10px;
  text-transform: uppercase;
}
.pricing-price {
  border-bottom: 1px solid #f5f5f5;
  border-top: 1px solid #f5f5f5;
  padding: 20px 0;
}
.pricing-price .price-unit {
  color: #222222;
  font-size: 54px;
  text-transform: uppercase;
}
.price-unit > span {
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 3.5;
  vertical-align: top;
}
.pricing-features ul {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.pricing-features ul li:nth-child(2n+1) {
  background: #f8f8f8 none repeat scroll 0 0;
}
.pricing-features ul li {
  border-bottom: 1px solid #f5f5f5;
  padding: 8px 0;
  font-size: 14px;
  color: #999;
}

/* 16. contact */
.contact-form{}
.
.contact-person > h4 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: 15px;
}
.alt-content-box {
  margin: 25px 0;
  padding-left: 55px;
  position: relative;
}
.alt-content-box-icon {
  color: #111;
  font-size: 28px;
  height: 38px;
  left: 0;
  line-height: 38px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 38px;
}
.alt-content-box-title {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 2px;
}
.input-lg {
  border-radius: 0;
  box-shadow: none;
  font-size: 12px;
  height: 35px;
  text-transform: uppercase;
}
.form-control:focus {
  box-shadow: none;
  border-color: #000;
}
.alt-content-box-icon i {
  font-size: 30px;
}
#map{height:420px;width:100%}
/* 17. Footer */
.footer-area{}
.footer-bg{background: #1B1D1F;}
.footer-col-1{}
.footer-title{}
.footer-title h4 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 5px;
  line-height: 20px;
  margin-bottom: 30px;
}
.footer-content{}
.footer-content p{
    color: #888;
}
.footer-content a {
  color: #fff;
    padding: 5px;
}
.social-icon{
    margin-bottom: 5px;
}
.social-icon a {
  background: #fff none repeat scroll 0 0;
  color: #000;
  display: inline-block;
  font-size: 18px;
  height: 35px;
  line-height: 34px;
  margin: 0 10px 5px 0;
  text-align: center;
  transition: all 0.4s ease 0s;
  width: 35px;
}
.social-icon a:hover {
  background: #444 none repeat scroll 0 0;
  color: #fff;
}
.recent-posts {
  list-style: outside none none;
  margin: 0;
  padding: 0;
}
.recent-posts > li {
  margin-bottom: 25px;
}
.recent-posts a {
  text-decoration: none;
}
.footer-posts-body {
}
.footer-posts-title {
  color: #fff;
  font-family: "Open Sans";
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  margin: 2px 0 5px;
}
.recent-posts a {
  text-decoration: none;
}
.footer-posts-meta {
  color: #fff;
  font-size: 11px;
  opacity: 0.4;
}
.tagcloud > a {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #fff;
  border-radius: 15px;
  color: #fff;
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 24px;
  margin: 10px 10px 5px 0;
  padding: 1px 15px;
  text-transform: uppercase;
}
.tagcloud a:hover{
  background: #fff none repeat scroll 0 0;
  color: #000;
 }
.grey-bg{
    background: #f6f6f6;
}
.footer .copyright {
  font-size: 11px;
  font-weight: 700;
  margin: 0;
}
.copyright {
  color: #000;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.insta-image {
  float: left;
  margin-bottom: 15px;
  width: 33%;
}
.insta-image img {
  width: 80%;
}
/* scrollUp */
a#scrollUp {
  background: #444 none repeat scroll 0 0;
  bottom: 50px;
  color: #fff;
  height: 40px;
  line-height: 40px;
  position: absolute;
  right: 50px;
  text-align: center;
  width: 40px;
}
/*---- [Preloader] */

.page-loader {
	background: #fff;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 9998;
}
.loader {
	background: #666;
	position: absolute;
	display: inline-block;
	height: 40px;
	width: 40px;
	left: 50%;
	top: 50%;
	margin: -20px 0 0 -20px;
	text-indent: -9999em;
	-webkit-border-radius: 100%;
	   -moz-border-radius: 100%;
	        border-radius: 100%;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation: ball-scale 1s 0s ease-in-out infinite;
	        animation: ball-scale 1s 0s ease-in-out infinite;
}

@-webkit-keyframes ball-scale {

	0% {
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
		    -ms-transform: scale(0);
		     -o-transform: scale(0);
		        transform: scale(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
	}

}

@keyframes ball-scale {

	0% {
		-webkit-transform: scale(0);
		   -moz-transform: scale(0);
		    -ms-transform: scale(0);
		     -o-transform: scale(0);
		        transform: scale(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: scale(1);
		   -moz-transform: scale(1);
		    -ms-transform: scale(1);
		     -o-transform: scale(1);
		        transform: scale(1);
	}

}
/* css end here */