/*+++++++++++++++++++++
=====================================
 Template Name : Himu
 Author Name : Mostafizur Rahman
 Author URI : http://mostafiz.me/
 Template URI :http://mostafiz.me/demo/himu/
 Version : 1.1
===============================
+++++++++++++++++++*/





/*
====================================
------------------------------------
	1. Typography
	2. Header
	3. Main Slider
	4. About Us
	5. Service
	6. Our Team
	7. Portfolio
	8. Clients
	9. Our Blog
	10. Contact
	11. Footer
	12. Carousel Effect
	13. Isotope
	14. Portfolio Hover effect
-------------------------------------
=====================================
*/


/*====================
======Typography=====
======================*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);



body  section{
	padding: 75px 0;
}

a:hover {
	outline: none;
	text-decoration:none;
}

a:focus {
	outline:none;
	outline-offset: 0;
}

a {
	-webkit-transition: 300ms;
	-moz-transition: 300ms;
	-o-transition: 300ms;
	transition: 300ms;
	color:#fc7700;
}

.slider-btn {
	background-color:#fc7700;
	color: #FFF;
	-webkit-box-shadow: inset 0 0 0 2px #fc7700;
	box-shadow: inset 0 0 0 2px #fc7700;
	text-transform: uppercase;
	width: 190px;
	text-align: center;
	height: 55px;
	line-height:55px;
	padding: 0;
	font-size: 18px;
	font-weight:800;
	border: 0;
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}

.slider-btn:hover {
	background-color:#43484E;
	-webkit-box-shadow: inset 0 0 0 2px #43484E;
	box-shadow: inset 0 0 0 2px #43484E;
	color:#fff
}


.parallax-section{
	min-height: 300px;
	width: 100%;
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}


.preloader{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: table;
	background: #fff;
	z-index: 9999;
}

.preloder-wrap{
	display: table-cell;
	vertical-align: middle;
}

.preloder-inner {
	width: 200px;
	height: 100px;
	margin: 0 auto;
}

.ball {
	width: 10px;
	height: 10px;
	margin: 10px auto;
	border-radius: 50px;
}
  
.ball:nth-child(1) {
	background: #ff005d;
	-webkit-animation: right 1s infinite ease-in-out;
	-moz-animation: right 1s infinite ease-in-out;
	animation: right 1s infinite ease-in-out;    
}

.ball:nth-child(2) {
	background: #35ff99;
	-webkit-animation: left 1.1s infinite ease-in-out;
	-moz-animation: left 1.1s infinite ease-in-out;
	animation: left 1.1s infinite ease-in-out;
}

.ball:nth-child(3) {
	background: #008597;
	-webkit-animation: right 1.05s infinite ease-in-out;
	-moz-animation: right 1.05s infinite ease-in-out;
	animation: right 1.05s infinite ease-in-out;
}

.ball:nth-child(4) {
	background: #ffcc00;
	-webkit-animation: left 1.15s infinite ease-in-out;
	-moz-animation: left 1.15s infinite ease-in-out;
	animation: left 1.15s infinite ease-in-out;
 }

.ball:nth-child(5) {
	background: #2d3443;  
	-webkit-animation: right 1.1s infinite ease-in-out;
	-moz-animation: right 1.1s infinite ease-in-out;
	animation: right 1.1s infinite ease-in-out;
}

.ball:nth-child(6) {
	background: #ff7c35;  
	-webkit-animation: left 1.05s infinite ease-in-out;
	-moz-animation: left 1.05s infinite ease-in-out;
	animation: left 1.05s infinite ease-in-out;
}

.ball:nth-child(7) {
	background: #4d407c;  
	-webkit-animation: right 1s infinite ease-in-out;
	-moz-animation: right 1s infinite ease-in-out;
	animation: right 1s infinite ease-in-out;
}


@-webkit-keyframes right {
	0%   { -webkit-transform: translate(-15px);   }
	50%  { -webkit-transform: translate(15px);    }
	100% { -webkit-transform: translate(-15px);   }
}

@-webkit-keyframes left {
	0%   { -webkit-transform: translate(15px);    }
	50%  { -webkit-transform: translate(-15px);   }
	100% { -webkit-transform: translate(15px);    }
}

@-moz-keyframes right {
	0%   { -moz-transform: translate(-15px);   }
	50%  { -moz-transform: translate(15px);    }
	100% { -moz-transform: translate(-15px);   }
}

@-moz-keyframes left {
	0%   { -moz-transform: translate(15px);    }
	50%  { -moz-transform: translate(-15px);   }
	100% { -moz-transform: translate(15px);    }
}

@keyframes right {
	0%   { transform: translate(-15px);  }
	50%  { transform: translate(15px);   }
	100% { transform: translate(-15px);  }
}

@keyframes left {
	0%   { transform: translate(15px);   }
	50%  { transform: translate(-15px);  }
	100% { transform: translate(15px);   }
}


.vertical-middle{
	width: 100%;
	height: 100%;
	display: table;
}

.vertical-middle div{
	display: table-cell;
	vertical-align: middle;
}


/*======================
======Portfolio CSS=====
========================*/

#portfolio {
  padding-top:70px;
  padding-bottom: 100px;
  background:#fff;
}

#portfolio p, 
#portfolio h2 {
	margin-bottom:30px;
}

#portfolio 
.portfolio-filter {
  margin-bottom:40px;
  margin-top:10px;
}

#portfolio 
.portfolio-filter li {
  display: inline-block;
}

#portfolio 
.portfolio-filter li a:hover, 
#portfolio 
.portfolio-filter li a:focus,
#portfolio 
.portfolio-filter li a:active , 
#portfolio 
.portfolio-filter li .active{
	border: 1px solid #0089c9;
	color: #686868;
	box-shadow: none;
	-webkit-box-shadow: none;
	opacity: 1;
}

#portfolio 
.portfolio-filter li a {
	color: #686868;
	font-size: 16px;
	text-transform: uppercase;
	border: none;
	background: rgba(67, 72, 78, 0);
	opacity: .8;
	border: 1px solid rgba(252, 119, 0, 0);
	border-radius: inherit;
}

.portfolio-items > div{
  padding:0;
}

.portfolio-items img{
  width:100%;
}

.view {  
  cursor: default;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  width:100%;
}

.efffect h4 {  
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s linear 0s;
}

.efffect h3 {
	opacity: 0;
	transform: scale(0);
	-webkit-transition: all 0.5s linear 0s;
	-moz-transition: all 0.5s linear 0s;
	-ms-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
}

.efffect img {
	transform: scaleY(1);
	-moz-transform: scaleY(1);
	-webkit-transform: scaleY(1);
	-o-transform: scaleY(1);
	-ms-transform: scaleY(1);  
	transition: all 0.7s ease-in-out 0s;
	-moz-transition: all 0.7s ease-in-out 0s;
	-webkit-transition: all 0.7s ease-in-out 0s;
	-o-transition: all 0.7s ease-in-out 0s;
}

.view img {
	display: block;
	position: relative;
}

.efffect .mask {
	background-color: #F6F6F6;
    border:4px solid #333333;
	-webkit-transition: all 0.5s linear 0s;
	-moz-transition: all 0.5s linear 0s;
	-ms-transition: all 0.5s linear 0s;
	-o-transition: all 0.5s linear 0s;
	transition: all 0.5s linear 0s;
	opacity: 0
}

.view .mask, .view .content {
	height:100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width:100%;
}

.mask h3 {
	color: #43484E;
	font-size: 22px;
	font-weight: 700;
	margin-top: 30px;
	text-transform: uppercase;
	transition: height 500ms ease 0s;
}

.mask h4 {
	color:#000;
	font-size: 14px;
	font-weight: 200;
	padding: 0 35px 5px;
}

.mask i {
	border: 2px solid #333;
	border-radius: 50%;
	color: #333;
	font-size: 17px;
	margin-left: 8px;
	padding: 8px;
}

.mask i:hover{
	background-color:#fc7700;
	color:#fff;  
}




/*============================
======Carousel Effect CSS=====
==============================*/


.carousel.scale .carousel-inner > .item.left > div:nth-child(1),
.carousel.scale .carousel-inner > .item.right > div:nth-child(1) {
  -webkit-animation: fadeOutDown 300ms linear 0ms both;
  animation: fadeOutDown 300ms linear 0ms both;
}
.carousel.scale .carousel-inner > .item.next > div:nth-child(1),
.carousel.scale .carousel-inner > .item.prev > div:nth-child(1) {
  -webkit-animation: fadeInDown 300ms linear 75ms both;
  animation: fadeInDown 300ms linear 75ms both;
}

.carousel.scale .carousel-inner > .item.left > div:nth-child(2),
.carousel.scale .carousel-inner > .item.right > div:nth-child(2) {
  -webkit-animation: fadeOutDown 300ms linear 75ms both;
  animation: fadeOutDown 300ms linear 75ms both;
}
.carousel.scale .carousel-inner > .item.next > div:nth-child(2),
.carousel.scale .carousel-inner > .item.prev > div:nth-child(2) {
  -webkit-animation: fadeInDown 300ms linear 150ms both;
  animation: fadeInDown 300ms linear 150ms both;
}

.carousel.scale .carousel-inner > .item.left > div:nth-child(3),
.carousel.scale .carousel-inner > .item.right > div:nth-child(3) {
  -webkit-animation: fadeOutDown 300ms linear 150ms both;
  animation: fadeOutDown 300ms linear 150ms both;
}
.carousel.scale .carousel-inner > .item.next > div:nth-child(3),
.carousel.scale .carousel-inner > .item.prev > div:nth-child(3) {
  -webkit-animation: fadeInDown 300ms linear 225ms both;
  animation: fadeInDown 300ms linear 225ms both;
}

.carousel.scale .carousel-inner > .item.left > div:nth-child(4),
.carousel.scale .carousel-inner > .item.right > div:nth-child(4) {
  -webkit-animation: fadeOutDown 300ms linear 225ms both;
  animation: fadeOutDown 300ms linear 225ms both;
}
.carousel.scale .carousel-inner > .item.next > div:nth-child(4),
.carousel.scale .carousel-inner > .item.prev > div:nth-child(4) {
  -webkit-animation: fadeInDown 300ms linear 300ms both;
  animation: fadeInDown 300ms linear 300ms both;
}


/*==================================
====== Isotope Recommended CSS=====
====================================*/

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
/* End: Recommended Isotope styles */




/*==================================
====== Portfolio Hover effect=======
====================================*/


.efffect img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}
.efffect .mask {
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   cursor: zoom-in;
}
.efffect h4 {   
   background: transparent;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
}
.efffect h3 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   font-size:22px;
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}
.mask a i {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform:rotate(-180deg);
   -moz-transform:rotate(-180deg);
   -o-transform:rotate(-180deg);
   -ms-transform:rotate(-180deg);
   transform:rotate(-180deg);
   -webkit-transition:all 0.5s linear 0.7s;
   -moz-transition: all 0.5s linear 0.7s;
   -o-transition:all 0.5s linear 0.7s;
   -ms-transition:all 0.5s linear 0.7s;
   transition:all 0.5s linear 0.7s;
}