/*--------------------------------------------------------------------------------------

Theme Name: BD-PHOTOGRAPHY

Theme URI: http://devitfamily.com

Author URI: http://devitfamily.com

Description: 100% Responsive, Highly Customizable, SEO Friendly Photography Portfolio HTML5 template using Twitter Bootstrap Latest, Search Engine Friendly.

Author: ThemeCTG

Version: 1.0

----------------------------------------------------------------------------------------

   1. BASE CSS

    2. TOP AREA

        2.1 MAINMENU AREA

        2.2 WELCOME TEXT AREA

    3. ABOUT AREA

    4. SERVICE AREA

    5. PORTFOLIO AREA

    6. PRICEING AREA

    7. FACT AREA

    8. BLOG AREA

    9. CONTACT AREA

    10. FOOTER AREA

    11. SCROLL TO TOP

----------------------------------------------------------------------------------------*/





/*--------------------

   1. BASE CSS

----------------------*/



@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900|Roboto:400,700');

.alignleft {

	float: left;

	margin-right: 15px;

}



.alignright {

	float: right;

	margin-left: 15px;

}



.aligncenter {

	display: block;

	margin: 0 auto 15px;

}



a {

	-webkit-transition: 0.3s;

	transition: 0.3s;

}



a:focus,

a:hover {

	outline: 0 solid;

	text-decoration: none;

}



ul,

ol {

	margin: 0;

	padding: 0;

	list-style: none;

}



button:focus {

	outline: 0;

}



img {

	max-width: 100%;

	height: auto;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	margin: 0 0 15px;

	font-weight: 700;

	font-family: 'Montserrat', sans-serif;

	letter-spacing: 2px;

}



html,

body {

	height: 100%

}



body {

	font-family: 'Roboto', sans-serif;

	font-size: 16px;

	line-height: 1.5em;

	font-weight: 400;

	color: #555555;

}



a:hover,

a:focus {

	text-decoration: none;

	outline: 0;

}



.fix {

	overflow: hidden;

}



.relative {

	position: relative;

	overflow: hidden;

}



.absulute {

	position: absolute;

}



.v-center {

	position: absolute;

	left: 0;

	top: 50%;

	-webkit-transform: translateY(-50%);

	transform: translateY(-50%);

}



.social-bookmark li {

	display: inline;

}

.social-bookmark li:nth-child(n) { margin-left: 0px; }

.social-bookmark li a {

	display: inline-block;

	font-size: 16px;

	height: 30px;

	padding-top: 3px;

	text-align: center;

	width: 30px;

}



.inline li {

	display: inline;

}



.inline-block li {

	display: inline-block;

	padding: 5px 15px;

}



.navbar-toggle {

	border: 2px solid #000000;

	border-radius: 0;

}



.navbar-toggle .icon-bar {

	background: #000000 none repeat scroll 0 0;

}



.is-sticky .navbar-toggle {

	border: 2px solid #ffffff;

}



.is-sticky .navbar-toggle .icon-bar {

	background: #ffffff

}





/* Remove Chrome Input Field's Unwanted Yellow Background Color */



input:-webkit-autofill,

input:-webkit-autofill:hover,

input:-webkit-autofill:focus {

	-webkit-box-shadow: 0 0 0px 1000px white inset !important;

}



.area-title {

	display: inline-block;

	margin-bottom: 40px;

	position: relative;

}



.area-title h2 {

	color: #ff9933;

	font-size: 72px;

	font-weight: 800;

	line-height: 1;

	margin-bottom: 0;

	position: relative;

	text-transform: uppercase;

	z-index: 9;

}



.area-title h4 {

	font-size: 30px;

}



.area-title.title-inverse {

	float: right;

}



.title-box {

	-webkit-box-shadow: 0 0 0 10px #ff9933;

	box-shadow: 0 0 0 10px #ff9933;

	height: 80%;

	left: 0;

	position: absolute;

	top: -10px;

	width: 16%;

	z-index: 1;

}



.area-title.title-inverse .title-box {

	left: auto;

	right: 0;

}



.hidding-content {

	    margin-bottom: 40px

}



.section-padding {

	padding: 70px 0;

}



.padding-top {

	padding-top: 100px;

}



.padding-bottom {

	padding-bottom: 100px;

}



.padding-100-70 {

	padding-top: 100px;

	padding-bottom: 70px;

}



.padding-100-50 {

	padding-top: 100px;

	padding-bottom: 50px;

	



}



.padding-30-15 {

		padding-top: 30px;

	padding-bottom: 15px;

}





.light-gray-bg {

	background: #EBEBEB;

}



.gray-bg {

	background: #E1E1E1;

}



.dark-bg {

	background: #000000;

	color: #ffffff;

}



a.readmore {

	background: #000000 none repeat scroll 0 0;

	border-radius: 50px;

	color: #ffffff;

	display: inline-block;

	letter-spacing: 1px;

	margin-top: 20px;

	padding: 10px 30px;

	text-align: center;

}



a.readmore:hover {

	background: #ff9933 none repeat scroll 0 0;

	color: #000000;

}





/*--------------------------

    2. TOP AREA

---------------------------*/



.top-area {

	height: 100%;

	position: relative;

	width: 100%;

}



.top-area-bg,

.video-area-bg {

	background: rgba(0, 0, 0, 1);

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

}



.top-area-bg::after,

.video-area-bg:after {

	background: #000;

	content: "";

	height: 100%;

	left: 0;

	opacity: 0.6;

	position: absolute;

	top: 0;

	width: 100%;

}





/*---------------------------------

    2.1 MAINMENU AREA

-----------------------------------*/



.header-top-area {

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

	z-index: 999;

}



.mainmenu-area {

	position: relative;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	z-index: 9999 !important;

}



.navbar-header {

	margin-top: 6px;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.navbar {

	border-bottom: 0 none;

	border-top: 0 none;

	margin-bottom: 0;

}



.navbar-brand>img {

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.is-sticky .navbar-brand>img {

	max-width: 80%;

}



ul#nav {

	background: rgba(0, 0, 0, 0) -webkit-gradient(linear, left top, left bottom, from(#fff), to(transparent)) repeat scroll 0 0;

	background: rgba(0, 0, 0, 0) linear-gradient(#fff, transparent) repeat scroll 0 0;

	float: right;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



ul#nav li a {

	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

	color: #000000;

	font-size: 14px;

	font-weight: 700;

	letter-spacing: 1px;

	padding: 40px 15px;

	position: relative;

	text-transform: capitalize;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



ul#nav li a::after {

	background: #ff9933 none repeat scroll 0 0;

	bottom: 0;

	content: "";

	height: 2px;

	left: 0;

	position: absolute;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	width: 0;

}



ul#nav li.active a::after,

ul#nav li:hover a::after {

	width: 100%;

}



ul#nav li a:hover,

ul#nav li.active a {

	color: #ff9933;

}



.is-sticky ul#nav li a {

	padding: 20px 15px;

	color: #ffffff;

}



.is-sticky ul#nav li a:hover,

.is-sticky ul#nav li.active a {

	color: #ff9933;

}



.is-sticky .navbar-header {

	margin-top: -6px;

}



.is-sticky .mainmenu-area {

	background: #000000;

	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

	box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);

	z-index: 99999;

}



.bs-example-js-navbar-scrollspy {

	float: right;

}



button.collapsed.navbar-toggle.navbar-bdphoto {

	display: block;

	float: right;

	margin: 32px 0;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.is-sticky button.collapsed.navbar-toggle.navbar-bdphoto {

	margin: 12px 0;

}



.is-sticky ul#nav {

	background: transparent;

}





/*-----------------------------------

    2.2 WELCOME TEXT AREA

-------------------------------------*/



.welcome-text-area {

	color: #ffffff;

	-webkit-box-align: end;

	-ms-flex-align: end;

	align-items: flex-end;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-orient: vertical;

	-webkit-box-direction: normal;

	-ms-flex-direction: column;

	flex-direction: column;

	height: 100%;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;

	padding-top: 100px;

	width: 100%; margin: 7% 0 0 0px;

}



.home-top-layer {

	background: rgba(0, 0, 0, 0) url("img/slider/home_side_layer.jpg") repeat scroll 0 0 / cover;

	height: 100%;

	position: absolute;

	right: 0;

	top: 0;

	width: 60%;

}



.home-top-layer::after {

	background: #000 none repeat scroll 0 0;

	content: "";

	display: none;

	height: 100%;

	left: 0;

	opacity: 0.4;

	position: absolute;

	top: 0;

	width: 100%;

}



.home-top-layer img {

	height: 100%;

	width: 100%;

}



.welcome-text h3,

.welcome-text h1 {

	letter-spacing: 6px;

	text-transform: uppercase;

}



.welcome-text h1 {

	color: #ff9933;

	font-size: 148px;

	letter-spacing: 0;

	line-height: 0.8;

	text-align: right;

}



.welcome-text h1 span {

	display: block;

	font-size: 55px;

	letter-spacing: 10px;

	position: relative;

	text-transform: lowercase;

}



.welcome-text h1 span::before {

	background: #fff none repeat scroll 0 0;

	content: "";

	display: inline-block;

	height: 2px;

	margin-right: 10px;

	position: relative;

	top: -10px;

	width: 25%;

}



.home-button {

	margin-top: 60px;

}



.home-button a {

	background: #ff9933 none repeat scroll 0 0;

	border-radius: 50px;

	color: #ffffff;

	font-size: 15px;

	letter-spacing: 2px;

	padding: 12px 30px;

	text-transform: uppercase;

}



.home-button a:hover {

	background: #ffffff;

	color: #ff9933;

}





/*-----------------------------

    3. ABOUT AREA

-------------------------------*/



.about-area .area-title {

	margin-bottom: 20px;

}



.about-image {

	-webkit-box-shadow: 0 0 0 10px #000000 inset;

	box-shadow: 0 0 0 10px #000000 inset;

	margin-right: 0;

	margin-top: 0;

	position: relative;

}



.about-image img {

	-webkit-transform: translateY(30px) translateX(-30px);

	transform: translateY(30px) translateX(-30px);

	width: 100%;

	z-index: 1;

}



.about-slider-area {

	position: relative;

}



.about-slider-area::before {

	background: #000 none repeat scroll 0 0;

	content: "";

	height: 60%;

	left: 0;

	position: absolute;

	top: 0px;

	width: 100%;

}



.about-slider {

	background: #000 none repeat scroll 0 0;

	margin: 0 auto 100px;

	text-align: center;

	width: 80%;

}



.about-slider img {

	display: block;

	margin: 0 auto;

	width: 90%;

}



.about-area .owl-item img {

	background: #000 none repeat scroll 0 0;

	max-width: 100%;

	width: auto;

}



.about-slider {

	background: #000 none repeat scroll 0 0;

	margin: 0 auto 100px;

	text-align: center;

	width: 80%;

}



.about-area .owl-controls {

	bottom: 20px;

	position: absolute;

	right: -60px;

}



.about-area .owl-controls .owl-nav>div {

	color: #000000;

	display: inline-block;

	font-size: 35px;

	height: 40px;

	padding-top: 2px;

	text-align: center;

	-webkit-transition: 0.3s;

	transition: 0.3s;

	width: 60px;

}



.about-area .owl-controls .owl-nav>div:hover {

	color: #ff9933;

}





/*------------------------------

    4. SERVICE AREA

-------------------------------*/



.service-top {

	position: relative;

}



.service-top-area-bg {

	background: rgba(0, 0, 0, 0) url("img/service/service_bg_1.jpg") no-repeat scroll center center / cover;

	bottom: 0px;

	height: 100%;

	left: 0;

	position: absolute;

	width: calc(50%);

}



.service-top::before {

	background: #000 none repeat scroll 0 0;

	content: "";

	height: 100%;

	position: absolute;

	right: 50%;

	top: 0;

	width: 30%;

}



.service-bottom {

	position: relative;

}



.service-bottom-area-bg {

	background: rgba(0, 0, 0, 0) url("img/service/service_bg_2.jpg") no-repeat scroll center center / cover;

	height: 63%;

	position: absolute;

	right: 0;

	top: 0;

	width: 50%;

}



.single-service {

	margin-top: 100px;

}



.service-details {

	background: #f1f1f1 none repeat scroll 0 0;

	padding: 20px;

}



.service-image img {

	width: 100%;

}



.service-details h3 {

	color: #ff9933;

	font-size: 24px;

	text-transform: uppercase;

}



.service-details>h3 i {

	margin-right: 10px;

}



.service-details h3 span {

	color: #333;

	display: block;

}





/*-----------------------------

    5. PORTFOLIO AREA

-------------------------------*/



.portfolio-area {

	color: #fff;

	position: relative;

}



.portfolio-area-bg {

	background: rgba(0, 0, 0, 0) url("img/portfolio/portfolio_bg.jpg") no-repeat scroll center center / cover;

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

}



.service-top-area-bg:after,

.service-bottom-area-bg::after,

.portfolio-area-bg::after,

.contact-area-bg:after {

	background: #000 none repeat scroll 0 0;

	content: "";

	height: 100%;

	left: 0;

	opacity: 0.5;

	position: absolute;

	top: 0;

	width: 100%;

}



.portfolio-menu {

	font-size: 12px;

	letter-spacing: 2px;

	margin-bottom: -100px;

	text-transform: uppercase;

}



.portfolio-menu li {

	cursor: pointer;

	position: relative;

	z-index: 1;

}



.portfolio-menu li::after {

	background: #ff9933 none repeat scroll 0 0;

	content: "";

	height: 30%;

	left: 0;

	position: absolute;

	top: 50%;

	-webkit-transform: translateY(-50%) skewX(-20deg);

	transform: translateY(-50%) skewX(-20deg);

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	width: 0;

	z-index: -1;

}



.portfolio-menu li.active::after {

	width: 50%;

}



.portfolio-content {

	margin-top: -100px;

}



.single-portfolio {

	overflow: hidden;

	position: relative;

	-webkit-transition: all 0.3s ease-in-out 0s;

	transition: all 0.3s ease-in-out 0s;

}



.portfolio-details {

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

	color: #ffffff;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-orient: vertical;

	-webkit-box-direction: normal;

	-ms-flex-direction: column;

	flex-direction: column;

	height: 100%;

	-webkit-box-pack: center;

	-ms-flex-pack: center;

	justify-content: center;

	left: 0;

	position: absolute;

	text-align: center;

	top: 0;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	width: 100%;

	z-index: 9;

}



.portfolio-details::before,

.portfolio-details::after {

	border-left: 2px solid;

	border-right: 2px solid;

	content: "";

	height: calc(100% - 40px);

	left: 20px;

	position: absolute;

	top: 20px;

	-webkit-transform: scaleY(0);

	transform: scaleY(0);

	-webkit-transition: all 0.5s ease 0s;

	transition: all 0.5s ease 0s;

	width: calc(100% - 40px);

	z-index: -1;

}



.portfolio-details::before {

	border-left: inherit;

	border-right: inherit;

	border-top: 2px solid;

	border-bottom: 2px solid;

	-webkit-transform: scaleX(0);

	transform: scaleX(0);

}



.portfolio-details h4 {

    background: #000 none repeat scroll 0 0;

    opacity: 0;

    /* padding: 5px 15px; */

    margin: 0px;

    -webkit-transform: translateY(-30px);

    transform: translateY(-30px);

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}



.portfolio-details h5 {

	opacity: 0;

	-webkit-transform: translateY(30px);

	transform: translateY(30px);

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.single-portfolio:hover .portfolio-details {

	background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;

}



.single-portfolio:hover .portfolio-details::after,

.single-portfolio:hover .portfolio-details::before {

	-webkit-transform: scale(1);

	transform: scale(1);

}



.single-portfolio:hover .portfolio-details h4,

.single-portfolio:hover .portfolio-details h5 {

	opacity: 1;

	-webkit-transform: translate(0px, 0px);

	transform: translate(0px, 0px);

}





/*------------------------------

    6. PRICEING AREA

-------------------------------*/



.single-price {

	border: 1px solid #e1e1e1;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	background: #f1f1f1;

}



.price-title,

.price-button {

	color: #000000;

	padding: 20px 20px 10px;

	position: relative;

}



.price-top-title {

	border-bottom: 1px solid #e1e1e1;

	text-transform: uppercase;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.price-title p {

	text-transform: uppercase;

}



.price-title h3 {

	font-size: 60px;

	font-weight: 700;

}



.price-details {

	overflow: hidden;

	padding: 30px 0;

	position: relative;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	z-index: 1;

}

.img-before {    padding: 30px 0px 20px 0px; }

.img-before2 {    padding: 10px 0px 30px 0px; }

.cliping-path-img  { padding:20px 0 0 0px; }



.price-details h3  {     margin: 0 0 15px; text-transform:uppercase;     color: #ff9933;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    letter-spacing: 2px; font-size: 20px; }



.price-details ul {

	font-size: 14px;

	letter-spacing: 1px;

	list-style: outside none none;

	margin: 0;

	padding: 0;

	text-transform: uppercase;

}





.price-details2 {

	overflow: hidden;

	padding: 30px 0;

	position: relative;  text-align: left;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	z-index: 1;

}



.price-details2 ul {

	font-size: 14px;

	letter-spacing: 0px;

	list-style: outside none none;

	margin: 0;    

	padding: 0;

	text-transform: none;

}



.price-details2 ul li {

	padding: 7px 0;     text-align: -webkit-left;	

}



.price-details ul li {

	padding: 3px 0;

}



.price-button {

	border-top: 1px solid #e1e1e1;

	padding-bottom: 30px;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	padding-top: 20px;

}



.single-price.active,

.single-price:hover {

	background: #000000 none repeat scroll 0 0;

	color: #fff;

}



.active .price-title,

.active .price-button {

	color: #fff;

}



.single-price.active .price-details::after,

.single-price:hover .price-details::after {

	left: 0;

	opacity: 1;

}



.single-price.active .price-title,

.price-button {

	color: #ff9933;

}



.single-price.active .price-button a {

	background: #fff none repeat scroll 0 0;

	color: #000;

}



.single-price.active .price-button a:hover {

	background: #ff9933 none repeat scroll 0 0;

	color: #000000;

}





/*----------------------------------

    7. FACT AREA

-----------------------------------*/



.fact-area {

	color: #fff;

	font-size: 18px;

	font-weight: 400;

	letter-spacing: 2px;

	position: relative;

	text-transform: capitalize;

}



.fact-area-bg {

	background: rgba(0, 0, 0, 0) url("img/fact-area-bg.jpg") no-repeat scroll center center / cover;

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

}



.fact-area-bg::after {

	background: #000;

	content: "";

	height: 100%;

	left: 0;

	opacity: 0.5;

	position: absolute;

	top: 0;

	width: 100%;

}



.fact-icon {

	border-radius: 50%;

	font-size: 40px;

	height: 80px;

	margin: 0 auto;

	padding-top: 16px;

	text-align: center;

	width: 80px;

}



h3.counter {

	font-size: 40px;

	position: relative;

}



h3.counter::after {

	background: #ff9933 none repeat scroll 0 0;

	bottom: -8px;

	content: "";

	height: 2px;

	left: 50%;

	position: absolute;

	-webkit-transform: translateX(-50%);

	transform: translateX(-50%);

	width: 100px;

}





/*-----------------------------

    8. BLOG AREA

-------------------------------*/



.single-blog {

	margin-top: 150px;

	position: relative;

	z-index: 9;

}



.single-blog::before {

	background: #000 none repeat scroll 0 0;

	content: "";

	height: 79%;

	left: 50px;

	position: absolute;

	top: -50px;

	width: 80%;

	z-index: -1;

}



.post-details {

	background: #f1f1f1 none repeat scroll 0 0;

	bottom: -50px;

	left: 50px;

	padding: 20px;

	position: absolute;

	-webkit-transition: 0.3s;

	transition: 0.3s;

}



.post-thumbnail img {

	max-width: 80%;

}



.post-details .postmeta {

	font-size: 14px;

	letter-spacing: 2px;

	margin-bottom: 20px;

	text-transform: uppercase;

}



.post-details h3 {

	color: #000000;

	font-weight: 600;

	letter-spacing: 1px;

}



.post-details .postmeta a {

	color: #000;

}



.post-details .postmeta a:last-child {

	float: right;

}



.single-blog a.readmore i {

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

}



.single-blog a.readmore {

	background: inherit;

	color: #000;

	padding: 0;

}



.single-blog a.readmore:hover i {

	padding-left: 10px;

}



.blog-area .row div:last-child .single-blog {

	margin-bottom: 50px;

}



.single-blog:hover .post-details {

	background: #ffffff;

	-webkit-box-shadow: 0 0 20px -4px;

	box-shadow: 0 0 20px -4px;

}





/*------------------------------

    9. CONTACT AREA

-------------------------------*/



.portfolio-area {

	margin-bottom: 100px;

}



.portfolio-area-bg::before {

	background: #e1e1e1 none repeat scroll 0 0;

	bottom: -100px;

	content: "";

	height: 100px;

	position: absolute;

	width: 100%;

}



.contact-area {

	color: #fff;

	position: relative;

}



.contact-area-bg {

	background-attachment: scroll, scroll;

	background-clip: border-box, border-box;

	background-color: #000;

	

	background-origin: padding-box, padding-box;

	background-position: left center, right center;

	background-repeat: no-repeat, repeat;

	background-size: 50% 100%;

	height: 100%;

	left: 0;

	position: absolute;

	top: 0;

	width: 100%;

}



.contact-area a {

	color: #ffffff;

}



.contact-area a:hover {

	color: #ff9933;

}



.contact-detaisls {

	padding-left: 40px;

}



.single-contact {

	min-height: 50px;

	padding-left: 50px;

	position: relative; padding-bottom: 10px;
 
}



.contact-icon {

	color: #fff;

	font-size: 20px;

	height: 40px;

	left: 0;

	position: absolute;

	text-align: center;

	top: 0;

	width: 40px;

}



.contact-social h3,

.contact-social .social-bookmark {

	display: inline-block;

}



.contact-social h3 {

	color: #fff;

	font-size: 18px;

	position: relative;

}



.contact-social h3::after {

	background: #ff9933 none repeat scroll 0 0;

	content: "";

	display: inline-block;

	height: 2px;

	left: 10px;

	margin-right: 10px;

	position: relative;

	top: -5px;

	width: 60px;

}



.social-bookmark {

	margin-bottom: 50px;

}



.footer-logo img {

	max-width: 130px;

}



.footer-logo,

.address-details {

	margin-bottom: 20px;

}



.contact-area .modal-content {

	background: rgba(0, 0, 0, 0) url("img/contact_bg.jpg") no-repeat scroll center center / cover;

	border-radius: 0;

	color: #fff;

	z-index: 2;

}



.contact-area .modal-content::after {

	background: #000 none repeat scroll 0 0;

	content: "";

	height: 100%;

	left: 0;

	opacity: 0.5;

	position: absolute;

	top: 0;

	width: 100%;

	z-index: -1;

}



.contact-area .modal-content h4 {

	color: #fff;

	text-align: center;

	z-index: 9;

}



.contact-area .form-control {

	background: transparent none repeat scroll 0 0;

	border: 1px solid;

	border-radius: 0;

	color: #fff;

	min-height: 40px;

}



.btn1 {

	background: transparent none repeat scroll 0 0;

	border: 1px solid;

	height: 40px;

	letter-spacing: 2px;

	text-transform: uppercase;

	-webkit-transition: all 0.3s ease 0s;

	transition: all 0.3s ease 0s;

	width: 100%;

}



.btn1:hover {

	background: #ff9933 none repeat scroll 0 0;

	border-color: #ff9933;

	color: #000;

}



.contact-area .close {

	color: #fff;

	opacity: 1;

}



.modal.fade .modal-dialog {

	-webkit-transform: translate(0px, 0px);

	transform: inherit translate(0px, 0px)

}





/*------------------------------

    10. FOOTER AREA

-------------------------------*/



.footer-area {

	border-top: 1px solid #333333;

	color: #ffffff;

	padding: 35px 0;

}



.footer-copyright p {

	margin-bottom: 0;

}



.footer-copyright a.footer-logo {

	border-bottom: 2px solid;

	display: block;

	margin-bottom: 5px;

	margin-right: 10px;

	max-width: 300px;

	padding-bottom: 10px;

}



.footer-copyright a {

	color: #ff9933;

}



.footer-menu a {

	color: #fff;

}



.footer-menu a:hover {

	color: #ff9933;

}



.footer-menu ul {     text-align: center;

    margin-top: 0px; }

	

	.footer-menu ul li {       list-style: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    text-transform: capitalize;

    margin: 0px 20px 0px 20px; }



.send-message-query a.readmore {

	background: #fff none repeat scroll 0 0;

	color: #000;

	margin-top: -20px;

}



.send-message-query a.readmore:hover {

	background: #ff9933 none repeat scroll 0 0;

}





/*------------------------------

    11. SCROLL TO TOP

-------------------------------*/



a.scrolltotop {

	background: #ff9933 none repeat scroll 0 0;

	bottom: 20px;

	-webkit-box-shadow: 0 0 0 7px transparent;

	box-shadow: 0 0 0 7px transparent;

	color: #ffffff;

	display: none;

	font-size: 20px;

	height: 40px;

	padding-top: 5px;

	position: fixed;

	right: 20px;

	text-align: center;

	width: 40px;

	z-index: 99;

}



a.scrolltotop:hover {

	-webkit-box-shadow: 0 0 0 0 #000000;

	box-shadow: 0 0 0 0 #000000;

	background: #000000;

}

#before-after{

		position: relative;

		width: 600px;

		height: 500px;

		border: 2px solid grey;

		margin: 50px auto 0px;;

	}

	

	#before-after1{

		position: relative;

		width: 600px;

		height: 500px;

		border: 2px solid grey;

		margin: 50px auto 0px;;

	}

		

			

		.view{

			position: absolute;

			top: 0px;

			left: 0px;

			width: 100%;

			height: 100%;

			overflow: hidden;

		}

				

		  .view-before{

			  z-index: 100;

		  }

				

      .view-after{

				z-index: 200;

			}

				.view img{ width:auto; max-width: none; }

			#dragme{

				position: absolute;

				width: 5px;

				height: 100%;

				top: 0px;

				left: 0px;

				background-color: black;

				cursor: pointer;

				z-index: 300;

			}

			

			/*

				Controls

			*/

			

		ul{

			text-align: center;

			margin-top: 50px;

		}

			

			ul li{

				list-style: none;

			display: -webkit-box;

				font-size: 16px;

				cursor: pointer; 

     text-transform: capitalize;

				margin: 0px 20px 0px 20px

			}

			.we-do { }

			.we-do h4 {      margin: 0 0 15px;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    letter-spacing: 2px; }

	

		.we-do2 { margin-top:40px; }

			.we-do2 h4 {      margin: 0 0 15px;

    font-weight: 700;

    font-family: 'Montserrat', sans-serif;

    letter-spacing: 2px; }

	

	.services-section {

	overflow: hidden

}

.services-section .heading:before {

	content: '\f1ea'

}

.single-service {

	border: 1px solid #eaeaea;

	padding: 40px 20px;

	text-align: center;     min-height: 400px;

	overflow: hidden;     margin-top: 10px;     margin-bottom: 30px;

}

.single-service .icon-in {  width:30%; }

.overlay-number {

	font-size: 112px;

	font-weight: 600;

	position: absolute;

	left: -5px;

	top: 15px;

	color: #f0f0f0

}

.single-service i {

	font-size: 58px;

	margin-bottom: 15px

}

.single-service h3 {

	font-size: 18px;

	margin: 10px 0;

	text-transform: uppercase;

	-webkit-transition: all .3s;

	transition: all .3s

}

.bgc-image {

	position: relative;

	width: 100%;

	overflow: hidden;

	height: 500px

}

.bgc-image:after {

	position: absolute;

	content: '';

	background-color: #000;

	left: 0;

	top: 0;

	opacity: .5;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	width: 100%;

	height: 100%

}

.funfacts-section {

	background: url(assets/img/bgc-1.jpg) 50% 0 no-repeat fixed

}

.funfacts-list {

	position: relative;

	z-index: 2;

	margin: 0 auto

}

.single-funfacts {

	text-align: center;

	color: #fff;

	border-width: 4px;

	border-style: solid;

	padding: 30px 0 0;

	border-radius: 6px

}

.single-funfacts i {

	display: block;

	font-size: 54px

}

.single-funfacts span {

	font-size: 40px;

	font-weight: 600;

	margin: 30px 0 15px;

	display: block;

	line-height: 40px

}

.single-funfacts h2 {

	font-size: 20px;

	color: #fff;

	font-family: Open Sans, sans-serif;

	padding: 15px 0;

	margin-bottom: 0

}



.heading {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	position: relative;

	margin-bottom: 40px;

	-ms-flex-wrap: wrap;

	flex-wrap: wrap

}

.heading p {

	margin-top: 50px;

	text-align: center;

	padding: 0 200px

}

.heading:before {

	position: absolute;

	content: '\f007';

	font-family: 'Font Awesome 5 Free';

	left: 50%;

	-webkit-transform: translateX(-50%);

	transform: translateX(-50%);

	top: 50px;

	width: 30px;

	height: 30px;

	z-index: 2;

	text-align: center;

	font-size: 16px;

	line-height: 30px;

	border-width: 1px;

	border-style: solid;

	border-radius: 6px;

	background: #fff

}

.heading:after {

	position: absolute;

	left: 50%;

	width: 200px;

	top: 68px;

	content: '';

	height: 1px;

	-webkit-transform: translateX(-50%);

	transform: translateX(-50%);

	opacity: .5;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"

}

.heading h2 {

	position: relative;

	margin-bottom: 0!important;

	font-size: 36px;

	text-align: center

}

.heading h2:before {

	position: absolute;

	content: '';

	width: 140px;

	height: 1px;

	left: 50%;

	top: 65px;

	opacity: .5;

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	margin-left: -70px

}



.diff { margin:50px 0 60px; }



/* Testimonial CSS Code Start */
/* background */
.carousel-bg {
  background-color: none;
  margin-top: 40px;
  margin-bottom: 40px;
}
/* quote */
.quote-image {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  padding-top: 60px;
  width: 80px;
}
/* text-style */
.testimonial-style .testimonial-caption-style {
 
	    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #ffffff;
 bottom: 40%;
  text-shadow: none;
  top: 10%;
}
.testimonial-style .testimonial-authors {
  font-family: "Roboto";
  font-weight: 700;
  font-size: 14px;  font-style: italic;  
  color: #ff9933;
  line-height: 30px;
  margin-top: 40px;
}
/* carousel-height-control */
.testimonial-style .carousel-inner > .item {
  padding-top: auto;
  padding-bottom: auto;
  height: 380px;
}
/* carousel-left-right-control */
.testimonial-style .carousel-control.left {
  background: none;
  box-shadow: none;
  text-shadow: none;
}
.testimonial-style .carousel-control.right {
  background: none;
  box-shadow: none;
  text-shadow: none;
}
.testimonial-style .carousel-control {
  color: #ffffff;
}
.testimonial-style .carousel-control:hover {
  color: #ff9933;
  text-decoration: none;
  transition: background-color 1s ease;
}
/* indicators */
.testimonial-style .carousel-indicators .active {
  background-color: #fff;
  width: 14px;
  height: 14px;
  transition: background 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.testimonial-style .carousel-indicators li {
  border: 2px solid #354052;
  background-color: #354052;
}
/* Textimonial CSS Code End */



.center-heading {
  text-align: center;
}

.center-heading .section-title {
  font-weight: 400;
  font-size: 28px;
  color: #3B566E;
  letter-spacing: 1.1px;
  line-height: 38px;
  margin-bottom: 20px;
}

.center-heading.colored .section-title {
  color: #ffffff;
}

.center-text {
  text-align: center;
  font-weight: 400;
  font-size: 16px;
  color: #6F8BA4;
  line-height: 28px;
  letter-spacing: 1px;
  margin-bottom: 50px;
}

.center-text.colored {
  color: #C7E5FF;
}

.center-text p {
  margin-bottom: 30px;
}

.services-small-item {
  display: block;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  border-radius: 5px;
  padding: 40px 28px;
  text-align: center;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.services-small-item:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  border-radius: 5px;
  background-image: linear-gradient(135deg, #ffb66d 0%, #e97a0b 100%);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  opacity: 0;
}
.services-small-item.active:before, .services-small-item:hover:before {
  opacity: 1;
}

.services-small-item.active .icon:before, .services-small-item:hover .icon:before {
  opacity: .26;
}

.services-small-item.active .icon i, .services-small-item:hover .icon i {
  background: -webkit-linear-gradient(#fff, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-small-item.active .services-title, .services-small-item:hover .services-title {
  color: #ffffff;
}

.services-small-item.active p, .services-small-item:hover p {
  color: #ffffff;
}

.services-small-item.active .button i, .services-small-item:hover .button i {
  background-image: linear-gradient(135deg, #fff 0%, #fff 100%) !important;
  color: #2b708b !important;
}

.services-small-item:hover {
  margin-top: -15px;
}

.services-small-item .icon {
  width: 139px;
  height: 113px;
  margin: auto;
  position: relative;
  margin-bottom: 20px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}


.services-small-item .icon i {
  display: block;
  height: 67px;
  line-height: 67px;
  position: absolute;
  width: 100%;
  top: 22px;
  z-index: 2;
  font-size: 28px; font-weight: bold;
  background-image: linear-gradient(135deg, #80d0c7 0%, #13547a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.services-small-item .services-title {
  font-weight: 400;
  font-size: 16px; font-weight: bold;
  color: #3B566E;
  letter-spacing: 0.7px;
  margin-bottom: 15px;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.services-small-item p {
  font-weight: 400;
  font-size: 12px;
  color: #6F8BA4;
  line-height: 16px;
  position: relative;
  z-index: 2;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  margin-bottom: 30px;
}

.services-small-item .button {
  position: relative;
  z-index: 2;
}

.services-small-item .button i {
  width: 42px;
  height: 42px;
  background-image: linear-gradient(135deg, #80d0c7 0%, #13547a 100%);
  line-height: 42px;
  text-align: center;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  color: #fff;
  padding-left: 3px;
}

.services-small-item:hover + .item-bg {
  bottom: 30px;
}

.item-bg {
  content: '';
  position: absolute;
  width: 80%;
  height: 15px;
  bottom: 15px;
  left: 0px;
  right: 0px;
  margin: auto;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  z-index: 1;
  background: #fff;
  box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06);
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}