/* -----------------------------------------------------------
    Author       : Tanvirul Haque
    Template Name: Black - Onepage Business Template
    Version      : 1.0
------------------------------------------------------------*/
/*============================================================
    CSS TABLE OF CONTENTS
==============================================================
    01. GENAREL CSS STYLE
    02. START HEADER AREA CSS STYLE
    03. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
    04. START ABOUT AREA CSS STYLE
    05. START SERVICES AREA CSS STYLE
    06. START COUNT AREA CSS STYLE
    07. START WHY CHOOSE AREA CSS STYLE
    08. START PORTFOLIO AREA CSS STYLE	
    09. START TESTIMONIAL AREA CSS STYLE
	10. START TEAM AREA CSS STYLE
	11. START PRICING AREA CSS STYLE
	12. START HOW WORK AREA CSS STYLE
    13. START BLOG AREA CSS STYLE
	14. START PRODUCTS & SUBSCRIBE AREA CSS STYLE
	15. START PARTNER AREA CSS STYLE
    16. START CONTACT FORM AREA CSS STYLE
    17. START FOOTER TOP AREA CSS STYLE
    18. START FOOTER AREA CSS STYLE
	19. START BLOG PAGE CSS STYLE
	20. START PROJECT PAGE CSS STYLE
=============================================================*/
/*
* -------------------------------------------------------------
*    01. GENAREL CSS STYLE
* -------------------------------------------------------------
*/
body {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 14px;
	font-weight: 300;
	letter-spacing: 1px;
    background-color: #fff;
    font-family: 'Ubuntu', sans-serif;
}
html,
body { height: 100% }
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #333;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Roboto Slab', serif;
}
a {
    text-decoration: none;
    font-family: 'Ubuntu', sans-serif;
    -webkit-transition: all 0.36s;
    transition: all 0.36s;
}
a:hover {
    color: #fff;
    text-decoration: none;
}
a:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
}
p { line-height: 2 }
ul,
li {
    margin: 0;
    padding: 0;
}
fieldset {
    border: 0 none;
    margin: 0 auto;
    padding: 0;
}
.section-padding { padding: 80px 0 }
.section-title {
    margin-bottom: 50px;
}
.section-title h2 {
	margin-bottom: 10px;
	padding-bottom: 15px;
	position: relative;
}
.section-title h2:after {
	border-bottom: 3px double #333;
	bottom: 0;
	content: "";
	height: 3px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	width: 10%;
}
.section-title p {
    margin: auto;
    width: 70%;
}
.button{
	font-family: 'Ubuntu', sans-serif;
	text-transform: uppercase;
	display: inline-block;
	padding: 12px 25px;
	position:relative;
	font-weight: 700;
	font-size: 13px;
	color: #333;
	letter-spacing:1px;
	background: transparent;
	border: 2px solid #333;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
	-webkit-transform: translateZ(0px);
	        transform: translateZ(0px);
	-webkit-transition-duration: 0.3s;
	        transition-duration: 0.3s;
	-webkit-transition-property: color;
	transition-property: color;
	vertical-align: middle;
	-webkit-transition: 0.36s;
			transition:0.36s;
}
.button:before {
	background: #333 none repeat scroll 0 0;
	position: absolute;
	content: "";
	z-index: -1;
	bottom: 0;
	right: 0;
	left: 0;
	top: 0;
	-webkit-transform: scaleY(0);
	        transform: scaleY(0);
	-webkit-transition-duration: 0.3s;
	        transition-duration: 0.3s;
	-webkit-transform-origin: 50% 50% 0;
	        transform-origin: 50% 50% 0;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-transition-timing-function: ease-out;
	        transition-timing-function: ease-out;
}
.button:hover {	color:#fff }
.button:hover.button:before{
	-webkit-transform: scaleY(1);
	        transform: scaleY(1);
	-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	        transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.home-btn-bg {
	background: #333;
	margin-right: 10px;
}
.preloader {
	position:fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/preloader.gif) center no-repeat #fff; 
}
.carousel-indicators .active { background-color: #333 }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: #333 none repeat scroll 0 0 }
/*
* -------------------------------------------------------------
*    01. END GENAREL CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    02. START HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
.header-area { height: 100%; }
.header-top-info {
	background: #333 none repeat scroll 0 0;
}
.top-info-left a {
	display: inline-block;
	font-size: 13px;
	color: #fff;
	margin: 5px 10px 5px 0;
}
.top-info-left a i{ margin-right: 5px }
.top-info-right ul { float: right }
.top-info-right li { float: left }
.top-info-right li a { display: block }
.top-info-right li a i {
	text-align: center;
	line-height: 25px;
	font-size: 16px;
	height: 25px;
	margin: 2px;
	width: 25px;
	color: #fff;
    -webkit-transition: all 0.36s ease-out;
            transition: all 0.36s ease-out;
}
.top-info-right li a i:hover {
	-webkit-transform: scale(1.1);
	        transform: scale(1.1);
}
.home-slide-area,
.home-slide-area div { height: 100% }
.home-slide-area div.home-display-table-cell,
.home-slide-area div.home-display-table-cell div { height: auto }
.single-slide-bg {
    position: relative;
    z-index: 1;
}
.single-slide-bg:after {
	background: rgba(0, 0, 0, 0.3);
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
}
.home-display-table {
    width: 100%;
    height: 100%;
    display: table;
}
.home-display-table-cell {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.slide-bg1 {
    background: url(../img/bg/slide1.jpg) scroll 0 0;
    background-size: cover;
}
.slide-bg2 {
    background: url(../img/bg/slide2.jpg) scroll 0 0;
    background-size: cover;
}
.slide-bg3 {
    background: url(../img/bg/slide3.jpg) scroll 0 0;
    background-size: cover;
}
.slide-bg4 {
    background: url(../img/bg/slide4.jpg) scroll 0 0;
    background-size: cover;
}


#home-carousel .item h2 {
    color: #fff;
    font-size: 60px;
	font-weight: 700;
    margin-bottom: 20px;
}
#home-carousel .item p {
    width: 70%;
    color: #fff;
	font-size: 16px;
    margin: 0 auto 30px;
}
#home-carousel .item  .button { color: #fff }
.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
			transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}
/*
* -------------------------------------------------------------
*    02. END HEADER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    03. START BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
.header-top-area {
    position: relative;
    background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
    width: 100%;
    z-index: 999;
    -webkit-transition: all 0.36s ease-out;
            transition: all 0.36s ease-out;
}
.sticky-wrapper {
    position: absolute;
    width: 100%;
    z-index: 999;
}
.navbar-default {
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: medium none;
	border-radius: 0;
	margin-bottom: 0;
	-webkit-transition: all 0.36s ease-in-out 0s;
	transition: all 0.36s ease-in-out 0s;
	width: 100%;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus { background-color: transparent }
.navbar-brand {
    color: #fff !important;
    font-family: 'Roboto Slab', serif;
    font-size: 26px;
    font-weight: 700;
    padding: 30px 0;
    letter-spacing: 3px;
    text-transform: uppercase;
    -webkit-transition: 0.36s;
    transition: 0.36s;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form { border-color: #fff }
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus { background-color: #fff }
.navbar-default .navbar-toggle .icon-bar { background-color: #333 }
.mainmenu li a {
    color: #fff !important;
    font-family: 'Ubuntu', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 30px 15px;
    -webkit-transition: all 0.36s ease-in-out 0s;
    transition: all 0.36s ease-in-out 0s;
}
.mainmenu ul.nav.navbar-nav li a:hover { color: #333 !important }
.shop-cart i {
	font-size: 18px;
	float: left;
}
.shop-cart > span {
	background: #fff none repeat scroll 0 0;
	border-radius: 50%;
	color: #333;
	display: inline-block;
	font-size: 10px;
	font-weight: 400;
	height: 18px;
	letter-spacing: 0;
	line-height: 16px;
	text-align: center;
	width: 18px;
	position: absolute;
	margin-top: -8px;
}
.navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0 }
.is-sticky .header-top-area{
    background: #fff;
    box-shadow: 0px 3px 4.7px 0.3px rgba(0, 0, 0, 0.24);
}
.is-sticky .mainmenu li a {
    padding: 20px 15px;
    color: #666 !important; 
}
.is-sticky .mainmenu ul.nav.navbar-nav li.active a { color: #333 !important }
.is-sticky .navbar-brand {
    color: #333 !important;
    font-size: 24px;
    padding: 20px 0;
}
/*
* -------------------------------------------------------------
*    03. END BOOTSTRAP NAVIGATION OVERRIDES CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    04. START ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
.about-text h3,
.skills-progress h3 { margin-bottom: 20px }
.about-text p { margin-bottom: 15px }
.about-text ul { margin-bottom: 25px }
.about-text ul li {
  font-size: 13px;
  margin-bottom: 10px;
}
.about-text li i {
    margin-right: 5px;
	color: #333;
}
.skills-progress { overflow: hidden }
.skills-progress .progress {
    background: #ddd none repeat scroll 0 0;
    position: relative;
    overflow: visible;
    margin: 40px 0 0;
    box-shadow: none;
    border-radius: 0;
    height: 10px;
}
.skills-progress .progress-bar {
    background: #333 none repeat scroll 0 0;
    box-shadow: none;
}
.skills-progress .progress .lead {
    left: 0;
    top: -25px;
    color: #333;
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    text-transform: uppercase;
}
.skills-progress .progress-bar > p {
	float: right;
	font-size: 12px;
	font-weight: 700;
	margin-right: -16px;
	margin-top: -25px;
	position: relative;
	color: #333;
}
/*
* -------------------------------------------------------------
*    04. / END ABOUT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    05. START SERVICE AREA CSS STYLE
* -------------------------------------------------------------
*/
.service-area {
	background: #f6f6f6 none repeat scroll 0 0;
	padding-bottom: 50px;
}
.single-service {
	background: #fff;
	margin-bottom: 30px;
	padding: 50px 25px;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}

.single-service:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-service i {
    font-size: 52px;
	color: #333;
}
.single-service h4 { margin: 20px 0 10px 0 }
.single-service p { font-size: 13px }
.owl-carousel .item  {
	display: block;
	width: 100%;
	height: auto;
}
a.read-more i {
    font-size: 10px;
	margin-right: 5px;
	color: #999;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
a.read-more {
    color: #999;
    font-size: 12px;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}

a.read-more:hover i,
a.read-more:hover { color:#333 }
/*
* -------------------------------------------------------------
*    05. / END SERVICE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    06. START COUNT AREA CSS STYLE
* -------------------------------------------------------------
*/
.count-area {
	background: url("../img/bg/count-bg.jpg");
	background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.count-area:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}
.counter {
	background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;
	padding: 30px;
}
.counter h2,
.counter p {
	color: #fff;
	margin: 0;
}
.counter i {
	color: #fff;
	float: left;
	font-size: 46px;
	margin-right: 15px;
	margin-top: 8px;
}
/*
* -------------------------------------------------------------
*    06. / END COUNT AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    07. START WHY CHOOSE AREA CSS STYLE
* -------------------------------------------------------------
*/
.single-choose { margin-bottom: 30px }
.single-choose h5 { margin: 15px 0 }
.single-choose i {
    background: #f6f6f6 none repeat scroll 0 0;
	color: #000;
    float: left;
    width: 80px;
    height: 80px;
    font-size: 42px;
    line-height: 80px;
    margin-right: 20px;
    text-align: center;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.single-choose p { overflow: hidden }
.single-choose:hover i {
	background: #333;
	color: #f6f6f6;
}
/*
* -------------------------------------------------------------
*    07. / END WHY CHOOSE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    08. START PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
.portfolio-area { background: #f6f6f6 none repeat scroll 0 0 }
.portfolio-filter ul {
    list-style: outside none none;
    margin-bottom: 10px;
    text-align: center;
}
.portfolio-filter ul li {
    margin: 5px;
    cursor: pointer;
    font-size: 12px;
    padding: 10px 20px;
    display: inline-block;
    border: 2px solid #fff;
    text-transform: uppercase;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.portfolio-filter ul li.active,
.portfolio-filter ul li:hover { border: 2px solid #333 }
.grid .mix {
    display: none;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.single-work {
    margin-top: 30px;
	overflow: hidden;
	position: relative;
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.single-work:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.work-overlay {
	height: auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 20px;
    opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-webkit-transform: translate3d(0px, 100%, 0px);
			transform: translate3d(0px, 100%, 0px);
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.single-work:hover .work-overlay {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	transform: translate3d(0px, 0px, 0px);
		-webkit-transform: translate3d(0px, 0px, 0px);
}
.work-title{ float: left }
.work-title p{ margin: 0 }
.work-icon { float: right }
.work-icon a {
	display: inline-block;
	font-size: 18px;
	margin: 10px 5px;
	-webkit-transform: translate3d(0px, 200%, 0px);
			transform: translate3d(0px, 200%, 0px);
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.work-icon a:hover{ color: #333 !important }
.single-work:hover .work-icon a {
	color: #666;
	-webkit-transform: translate3d(0px, 0px, 0px);
			transform: translate3d(0px, 0px, 0px);
}
.single-work:hover .work-icon a:first-child {
	-webkit-transition-delay: 0.1s;
			transition-delay: 0.1s;
}
.single-work:hover .work-icon a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
			transition-delay: 0.15s;
}
.single-work:hover .work-icon a:nth-child(3) {
	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
}
.portfolio-btn { margin-top: 30px }
.portfolio-btn a i {
	font-size: 14px;
	margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    08. / END PORTFOLIO AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    09. START TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
.testimonial-area {
	background: url("../img/bg/testimonial-bg.jpg");
	background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.testimonial-area:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}
.testimonial-area .item img {
	background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0;
	border-radius: 50%;
	height: 80px;
	margin: 0 auto 10px;
	padding: 5px;
}
.testimonial-area .item h6 {
	font-weight: 400;
	margin: 10px 0 15px;
	color: #fff;
}
.testimonial-area .item h4,
.testimonial-area .item p { color: #fff }
/*
* -------------------------------------------------------------
*    09. / END TESTIMONIAL AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    10. START TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
.team-area { padding-bottom: 50px }
.single-team{
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.single-team:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-team-img{
	position: relative;
	overflow: hidden;
	margin-bottom: 30px;
}
.team-overlay {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    position: absolute;
	padding: 20px;
    height: auto;
    width: 100%;
    bottom: 0;
    left: 0;
    opacity: 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	transform: translate3d(0px, 100%, 0px);
		-webkit-transform: translate3d(0px, 100%, 0px);
    transition: all 0.36s ease-in-out 0s;
		-webkit-transition: all 0.36s ease-in-out 0s;
}
.single-team:hover .team-overlay {
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	transform: translate3d(0px, 0px, 0px);
		-webkit-transform: translate3d(0px, 0px, 0px);
}
.team-title { float: left }
.team-title p{ margin: 0 }
.team-social-link { float: right }
.team-social-link a {
	display: inline-block;
	font-size: 28px;
	margin-top: 10px;
	-webkit-transform: translate3d(0px, 200%, 0px);
			transform: translate3d(0px, 200%, 0px);
	-webkit-transition: all 0.36s ease-in-out 0s;
			transition: all 0.36s ease-in-out 0s;
}
.team-social-link a:hover{ color: #333 !important }
.single-team:hover .team-social-link a {
	color: #666;
	-webkit-transform: translate3d(0px, 0px, 0px);
			transform: translate3d(0px, 0px, 0px);
}
.single-team:hover .team-social-link a:first-child {
	-webkit-transition-delay: 0.1s;
			transition-delay: 0.1s;
}
.single-team:hover .team-social-link a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
			transition-delay: 0.15s;
}
.single-team:hover .team-social-link a:nth-child(3) {
	-webkit-transition-delay: 0.2s;
			transition-delay: 0.2s;
}
/*
* -------------------------------------------------------------
*    10. / END TEAM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    11. START PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
.pricing-area { background: #f6f6f6 }
.single-pricing {
	background: #fff;
	-webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.single-pricing:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.price {
    padding: 25px;
    -webkit-transition: all 0.6s ease 0s;
			transition: all 0.6s ease 0s;
}
.single-pricing h3 {
	border-bottom: 1px solid #ddd;
	display: inline-block;
	font-family: "Ubuntu",sans-serif;
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 3px;
	margin-bottom: 10px;
	padding: 0 0 10px;
	-webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.price h4 {
	color: #666;
	font-size: 52px;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.price h4 sub { font-size: 18px }
.price span { font-size: 12px }
.pricing-list {
    list-style: outside none none;
    text-align: center;
    padding: 0 25px;
}
.pricing-list li {
    border-bottom: 1px solid #eee;
    color: #161616;
    padding: 15px 0;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.pricing-btn { padding: 25px 0 }
.single-pricing.recommended {
	box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
    -webkit-transform: scale(1.05);
			transform: scale(1.05);
}
.single-pricing.recommended .price h4,
.single-pricing:hover .price h4 { color: #333 }
/*
* -------------------------------------------------------------
*    11. / END PRICING AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    12. START HOW WORK AREA CSS STYLE
* -------------------------------------------------------------
*/
.video-area iframe {
	width: 100%;
	height: 310px;
	border: medium none;
}
.video-text  h3 { margin-bottom: 20px }
/*
* -------------------------------------------------------------
*    12. / END HOW WORK AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    13. START BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
.blog-area { background: #f6f6f6 }
.single-blog {
	background: #fff;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.single-blog:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-blog img { padding: 10px 10px 0 10px }
.blog-content { padding: 25px }
.blog-content span {
    font-size: 12px;
    color: #333;
}
.blog-content span i { color: #333 }
.blog-content a h2 {
    font-size: 20px;
    margin: 5px 0 15px;
}
.blog-btn { margin-top: 30px }
.blog-btn a i {
	font-size: 14px;
	margin-right: 10px;
}
/*
* -------------------------------------------------------------
*    13. / END BLOG AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    14. START PRODUCTS AREA CSS STYLE
* -------------------------------------------------------------
*/
.products { padding-bottom: 50px }
.single-product {
    background: #f6f6f6;
    position: relative;
	overflow: hidden;
	margin-bottom: 30px;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.single-product > a > i {
    background: #333 none repeat scroll 0 0;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    margin-right: 20px;
    line-height: 40px;
    margin-top: -20px;
    font-size: 18px;
    height: 40px;
    width: 40px;
    color: #fff;
    float: left;
    right: 0;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.single-product:hover { box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08) }
.single-product:hover a i {
    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.08);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}
.product-info { padding: 20px }
.single-product img { padding: 10px 10px 0 10px }
.product-info h5 { margin: 5px 0 }
.product-rating i { color: #ffc321 }
.product-info p { margin: 0 }
/*
* -------------------------------------------------------------
*    14. / END PRODUCTS AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    15. START PARTNER & SUBSCRIBE AREA CSS STYLE
* -------------------------------------------------------------
*/
.partner-area { background: #f6f6f6 }
#partner-carousel .item img {
	display: block;
	margin: 0 auto;
	width: auto;
}
.subscribe-title { padding-bottom: 10px }
.subscribe-area {
	background: url("../img/bg/partner-bg.jpg");
	background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.subscribe-area:after {
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    position: absolute;
    height: 100%;
    width: 100%;
    content: "";
    left: 0;
    top: 0;
    z-index: -111;
}
.subscribe-title h2,
.subscribe-title p { color: #fff }
.signup .form-control {
	border-color: #fff;
	color: #fff;
}
.signup .form-control::-moz-placeholder { color: #fff }
.signup-btn-bg {
	border: 2px solid #fff !important;
	color: #fff !important;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.signup-btn-bg:hover {
	background: #f6f6f6;
	color: #333 !important;
}
/*
* -------------------------------------------------------------
*    15. / END PARTNER & SUBSCRIBE AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    16. START CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
.form-control {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #ccc;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    margin: 10px 0;
    height: 45px;
    padding: 0;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.form-control::-moz-placeholder {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.form-control:hover,
.form-control:focus {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border-color: -moz-use-text-color -moz-use-text-color #333;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
    outline: 0 none;
}
.btn-contact-bg:hover,
.btn-contact-bg:focus {
    background: #333 none repeat scroll 0 0;
    color: #fff;
}
.success {
    text-align: center;
    margin: 80px 0;
    font-size: 18px;
    font-weight: 700;
}
/*
* -------------------------------------------------------------
*    16. / END CONTACT FORM AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    17. START FOOTER TOP AREA CSS STYLE
* -------------------------------------------------------------
*/
.footer-top-area { background: #f6f6f6 none repeat scroll 0 0 }
.footer-widget h4 { margin-bottom: 20px }
.social-icon a i {
    color: #666;
    font-size: 26px;
    line-height: 28px;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.social-icon a i:hover { color: #333 }
.single-contact-info { margin-bottom: 10px }
.single-contact-info i {
    background: #333;
    text-align: center;
    margin-right: 10px;
    line-height: 35px;
	font-size: 16px;
    height: 35px;
    color: #fff;
    float: left;
    width: 35px;
}
.single-contact-info p { font-size: 12px }
.single-latest-post {
    overflow: hidden;
    margin-bottom: 10px;
}
.single-latest-post img {
	background: #f0f0f0 none repeat scroll 0 0;
	float: left;
	margin-right: 10px;
	padding: 3px;
	width: 30%;
}
.single-latest-post a h2 {
    font-size: 12px;
	margin: 5px 0;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.single-latest-post span { font-size: 12px }
.single-latest-post span i {
	margin-right: 5px;
	font-size: 14px;
	color: #333;
}
.single-latest-post:hover a h2{ color: #333 }
.footer-widget ul li a {
    color: #666;
    display: block;
    margin-bottom: 10px;
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.footer-widget ul li a i {
	color: #333;
    margin-right: 5px;
}
.footer-widget ul li a:hover { color: #333 }
/*
* -------------------------------------------------------------
*    17. / END FOOTER TOP AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    18. START FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
.copyright {
    background: #333;
    padding: 30px 0;
    color: #fff;
}
.copyright p { margin: 0 }
/*
* -------------------------------------------------------------
*    18. / END FOOTER AREA CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    19. SINGLE BLOG PAGE CSS STYLE
* -------------------------------------------------------------
*/
.breadcrumb-main{
	background:url(../img/bg/breadcrumb-bg.jpg);
	background-position: center center;
	background-size: cover;
	position: relative;
	height:  350px;
	z-index:1;
}
.breadcrumb-main::after {
	background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
	position: absolute;
	content: "";
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	z-index: -1;
}
.breadcrumb-title{ padding-top: 200px }
.breadcrumb-title h2{
	font-weight: 700;
	color: #fff;
}
.breadcrumb-title p,
.breadcrumb-title p a{ color: #fff }
.single-blog-details,
.comments-area { padding-bottom: 50px }
.single-blog-details h3 {
	margin: 30px 0 20px;
	font-weight: 700;
}
.single-blog-info{ margin: 0 0 20px }
.single-blog-info span {
	color: #999;
	font-size: 12px;
	margin-right: 10px;
	display: inline-block;
}
.single-blog-info span i,
.single-comment span i {
	margin-right: 5px;
	font-size: 14px;
	color: #333;
}
.comments-area h4,
.comment-form h4 {
    padding: 10px 0;
	margin-bottom: 20px;
	border-bottom: 3px double #eee;
}
.single-comment img {
	float: left;
	width: auto;
	height: 100px;
	margin-right: 15px;
	border: 5px solid #f0f0f0;
}
.single-comment h5 { margin-bottom: 10px }
.single-comment span {
	color: #999;
	display: block;
	font-size: 12px;
	margin-bottom: 10px;
}
.single-comment p {
	font-size: 13px;
	overflow: hidden;
}
.reply-comment { margin-left: 50px }
.single-comment span.reply-button {
	display: block;
	float: right;
	cursor: pointer;
}
.single-widget{	margin-bottom: 50px }
.search-box input{
    margin: 0;
	height: 50px;
    padding: 0 0 0 15px;
	border: 1px solid #ccc;
}
.search-box input:hover,
.search-box input:focus {	border: 1px solid #333 }
.latest-post h4,
.categories h4,
.tags h4 {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 3px double #eee;
}
.latest-post > .single-latest-post{ margin-bottom: 30px }
.categories li a {
    color: #555;
    display: block;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.categories li a:hover { color: #333 }
.categories li a i {
    margin-right: 10px;
	color: #333;
}
.tags li a {
    border: 1px solid #ccc;
    color: #555;
    display: block;
    float: left;
    font-size: 12px;
    margin: 5px;
    padding: 5px 15px;
    text-transform: uppercase;    
    -webkit-transition: all 0.36s ease 0s;
			transition: all 0.36s ease 0s;
}
.tags li a:hover {
    background: #333 none repeat scroll 0 0;
    border: 1px solid #333;
    color: #fff;
}
/*
* -------------------------------------------------------------
*    19. END BLOG PAGE CSS STYLE
* -------------------------------------------------------------
*/
/*
* -------------------------------------------------------------
*    20. SINGLE PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/
.details-single-project{ margin: 50px 0 20px }
.about-single-project h4,
.details-single-project h4 {
	border-bottom: 3px double #eee;
	margin-bottom: 20px;
	padding-bottom: 10px;
}
.details-single-project li {
    color: #555;
    font-size: 14px;
    padding: 0 0 10px 0;
}
.details-single-project li a,
.details-single-project li i {
    margin-right: 10px;
	color: #333;
}
.related-projects h4 {
	border-bottom: 3px double #eee;
	margin-top: 30px;
	padding: 10px 0;
}
/*
* -------------------------------------------------------------
*    20. END PROJECT PAGE CSS STYLE
* -------------------------------------------------------------
*/
/* Reglas para manejar la visibilidad del logo */
.logo-light {
  display: none;
  margin-top: -13px; /* Ajuste para subir el logo 3 píxeles */
}

.logo-dark {
  display: block;
  margin-top: -13px; /* Ajuste para subir el logo 3 píxeles */
}

.sticky .logo-dark {
  display: none;
}

.sticky .logo-light {
  display: block;
}