/*--------------------------------------------------------------------------------------
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 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 #ff0000;
	border-radius: 0;
}

.navbar-toggle .icon-bar {
	background: #ff0000 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: #ff0000;
	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 #ff0000;
	box-shadow: 0 0 0 10px #ff0000;
	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 {
	padding-left: 100px;
}

.section-padding {
	padding: 100px 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;
}

.light-gray-bg {
	background: #EBEBEB;
}

.gray-bg {
	background: #fff;
}

.dark-bg {
	background: #000000;
	color: #ffffff;
}

a.readmore {
	background: #920707 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: #ff0000 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: #fff;
	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: #ff0000  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: #ff0000;
}

.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: #ff0000;
}

.is-sticky .navbar-header {
	margin-top: -6px;
}

.is-sticky .mainmenu-area {
	background-image: linear-gradient(to right, #ef0b0b, #bd0f0f, #a20e0e, #8a0505, #6d0404);
	-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%;
}

.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: #f5f5f5;
	font-size: 148px;
	letter-spacing: 0;
	line-height: 0.8;
	text-align: right;
}

.welcome-text h1 span {
	color: #ff0000;
	display: block;
	font-size: 55px;
	letter-spacing: 10px;
	position: relative;
}

.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: #920707 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: #000;
	color: #920707;
}


/*-----------------------------
    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: #ff0000 none repeat scroll 0 0;
	content: "";
	height: 60%;
	left: 0;
	position: absolute;
	top: 0px;
	width: 100%;
	height: 75%;
	box-shadow: 1px 20px 20px 7px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.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: #fff 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: 60%;
}

.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: #ff0000;
}


/*------------------------------
    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: #ff0000 none repeat scroll 0 0;
	content: "";
	height: 100%;
	position: absolute;
	right: 50%;
	top: 0;
	width: 30%;
	box-shadow: 13px -11px 12px 0px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.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: #ff0000;
	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: #ff0000 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: #ff0000 none repeat scroll 0 0;
	opacity: 0;
	padding: 5px 15px;
	-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: 30px 20px 20px;
	position: relative;
}

.price-top-title {
	border-bottom: 1px solid #e1e1e1;
	min-height: 146px;
	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: 50px 0;
	position: relative;
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	z-index: 1;
}

.price-details ul {
	font-size: 14px;
	letter-spacing: 1px;
	list-style: outside none none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.price-details ul li {
	padding: 7px 0;
}

.price-button {
	border-top: 1px solid #e1e1e1;
	padding-bottom: 40px;
	-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: #ff0000;
}

.single-price.active .price-button a {
	background: #fff none repeat scroll 0 0;
	color: #000;
}

.single-price.active .price-button a:hover {
	background: #ff0000 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%;
	box-shadow: 1px -4px 20px 3px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.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: #ff0000 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-image: url("img/contact_bg.jpg");
	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: #ff0000;
}

.contact-detaisls {
	padding-left: 40px;
}

.single-contact {
	min-height: 50px;
	padding-left: 50px;
	position: relative;
}

.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: #ff0000 none repeat scroll 0 0;
	content: "";
	display: inline-block;
	height: 2px;
	left: 10px;
	margin-right: 10px;
	position: relative;
	top: -5px;
	width: 100px;
}

.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;
}

.contact-area .contact-form button {
	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%;
}

.contact-area .contact-form button:hover {
	background: #ff0000 none repeat scroll 0 0;
	border-color: #ff0000;
	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;
	text-align:center;
}

.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: #ff0000;
}

.footer-menu a {
	color: #fff;
}

.footer-menu a:hover {
	color: #ff0000;
}

.send-message-query a.readmore {
	background: #fff none repeat scroll 0 0;
	color: #000;
	margin-top: -20px;
}

.send-message-query a.readmore:hover {
	background: #ff0000 none repeat scroll 0 0;
}


/*------------------------------
    11. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
	background: #ff0000 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;
}

/* loading */

.pre-loader {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    display: block;
    background-color: #007ced;
    background: linear-gradient(to bottom, #007ced 1%, #cce7ff 100%);
}

#cloud-intro {
    position: relative;
    height: 100%;
    background: url(https://i.imgur.com/VwO4ylN.png);
  background: url(https://i.imgur.com/VwO4ylN.png) 0 200px,
              url(https://i.imgur.com/sWifZt4.png) 0 300px,
              url(https://i.imgur.com/hleo0UW.png) 100px 250px;
    animation: wind 20s linear infinite;
}

.drone {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 250px;
    height: 80px;
    background-color: #212121;
    border-radius: 10px;
}

.arm {
    position: absolute;
    width: 40.0160064px;
    height: 150.06002401px;
    background-color: #212121;
}

.arm:before {
    content: "";
    width: 50.020008px;
    height: 50.020008px;
    background: #717171;
    position: absolute;
    top: 0;
    left: 50%;
    margin-top: -25.010004px;
    margin-left: -25.010004px;
    border-radius: 50%;
    z-index: 1;
}

.arm:after {
    content: "";
    position: absolute;
    top: -30.0120048px;
    left: -10.0040016px;
    width: 60.0240096px;
    height: 60.0240096px;
    border-radius: 30%;
    background-color: #212121;
}

.arm.top-left-arm,
.arm.top-right-arm {
    top: -100px;
}

.arm.bottom-left-arm,
.arm.bottom-right-arm {
    bottom: -100px;
}

.arm.top-right-arm,
.arm.bottom-right-arm {
    right: -50.020008px;
}

.arm.top-left-arm,
.arm.bottom-left-arm {
    left: -50.020008px;
}

.arm.top-left-arm {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.arm.top-right-arm {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.arm.bottom-left-arm {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.arm.bottom-right-arm {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.prop {
    position: absolute;
    top: -70px;
    left: 50%;
    width: 18px;
    height: 140px;
    margin-left: -9px;
    background-color: coral;
    z-index: 1;
    border-top-right-radius: 5px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 5px;
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    -webkit-animation: rotate 300ms linear infinite;
    animation: rotate 400ms linear infinite;
}

.loadingText {
    text-align: center;
    height: 25px;
    padding-top: 12px;
    font-family: sans-serif;
    font-size: 25px;
    color: #717171;
}

@media only screen
/* iphone 2G, 3G, 4, 4S */

and (min-device-width: 320px) and (max-device-width: 480px) {
    .drone {
        width: calc(250px / 2);
        height: calc(80px / 2);
    }
    .arm {
        width: calc(40.0160064px / 2);
        height: calc(150.06002401px / 2);
    }
    .arm:before {
        content: "";
        width: calc(50.020008px / 2);
        height: calc(50.020008px / 2);
        margin-top: calc(-25.010004px / 2);
        margin-left: calc(-25.010004px / 2);
    }
    .arm:after {
        top: calc(-30.0120048px / 2);
        left: calc(-10.0040016px / 2);
        width: calc(60.0240096px / 2);
        height: calc(60.0240096px / 2);
    }
    .arm.top-left-arm,
    .arm.top-right-arm {
        top: calc(-100px / 2);
    }
    .arm.bottom-left-arm,
    .arm.bottom-right-arm {
        bottom: calc(-100px / 2);
    }
    .arm.top-right-arm,
    .arm.bottom-right-arm {
        right: calc(-50.020008px / 2);
    }
    .arm.top-left-arm,
    .arm.bottom-left-arm {
        left: calc(-50.020008px / 2);
    }
    .prop {
        top: calc(-70px / 2);
        left: calc(50% / 2);
        width: calc(18px / 2);
        height: calc(140px / 2);
        margin-left: calc(-9px / 8);
    }
    .loadingText {
        height: calc(25px / 2);
        padding-top: calc(25px / 2);
        font-size: calc(25px / 2);
    }
}

@media only screen
/* iphone 5 & 5s */

and (min-device-width: 320px) and (max-device-width: 568px) {
    .drone {
        width: calc(250px / 2);
        height: calc(80px / 2);
    }
    .arm {
        width: calc(40.0160064px / 2);
        height: calc(150.06002401px / 2);
    }
    .arm:before {
        content: "";
        width: calc(50.020008px / 2);
        height: calc(50.020008px / 2);
        margin-top: calc(-25.010004px / 2);
        margin-left: calc(-25.010004px / 2);
    }
    .arm:after {
        top: calc(-30.0120048px / 2);
        left: calc(-10.0040016px / 2);
        width: calc(60.0240096px / 2);
        height: calc(60.0240096px / 2);
    }
    .arm.top-left-arm,
    .arm.top-right-arm {
        top: calc(-100px / 2);
    }
    .arm.bottom-left-arm,
    .arm.bottom-right-arm {
        bottom: calc(-100px / 2);
    }
    .arm.top-right-arm,
    .arm.bottom-right-arm {
        right: calc(-50.020008px / 2);
    }
    .arm.top-left-arm,
    .arm.bottom-left-arm {
        left: calc(-50.020008px / 2);
    }
    .prop {
        top: calc(-70px / 2);
        left: calc(50% / 2);
        width: calc(18px / 2);
        height: calc(140px / 2);
        margin-left: calc(-9px / 8);
    }
    .loadingText {
        height: calc(25px / 2);
        padding-top: calc(25px / 2);
        font-size: calc(25px / 2);
    }
}

@media only screen
/* iphone 6 Plus */

and (min-device-width: 414px) and (max-device-width: 736px) {
    .drone {
        width: calc(250px / 2);
        height: calc(80px / 2);
    }
    .arm {
        width: calc(40.0160064px / 2);
        height: calc(150.06002401px / 2);
    }
    .arm:before {
        content: "";
        width: calc(50.020008px / 2);
        height: calc(50.020008px / 2);
        margin-top: calc(-25.010004px / 2);
        margin-left: calc(-25.010004px / 2);
    }
    .arm:after {
        top: calc(-30.0120048px / 2);
        left: calc(-10.0040016px / 2);
        width: calc(60.0240096px / 2);
        height: calc(60.0240096px / 2);
    }
    .arm.top-left-arm,
    .arm.top-right-arm {
        top: calc(-100px / 2);
    }
    .arm.bottom-left-arm,
    .arm.bottom-right-arm {
        bottom: calc(-100px / 2);
    }
    .arm.top-right-arm,
    .arm.bottom-right-arm {
        right: calc(-50.020008px / 2);
    }
    .arm.top-left-arm,
    .arm.bottom-left-arm {
        left: calc(-50.020008px / 2);
    }
    .prop {
        top: calc(-70px / 2);
        left: calc(50% / 2);
        width: calc(18px / 2);
        height: calc(140px / 2);
        margin-left: calc(-9px / 8);
    }
    .loadingText {
        height: calc(25px / 2);
        padding-top: calc(25px / 2);
        font-size: calc(25px / 2);
    }
}

@media only screen
/* iphone 6 */

and (min-device-width: 375px) and (max-device-width: 667px) {
    .drone {
        width: calc(250px / 2);
        height: calc(80px / 2);
    }
    .arm {
        width: calc(40.0160064px / 2);
        height: calc(150.06002401px / 2);
    }
    .arm:before {
        content: "";
        width: calc(50.020008px / 2);
        height: calc(50.020008px / 2);
        margin-top: calc(-25.010004px / 2);
        margin-left: calc(-25.010004px / 2);
    }
    .arm:after {
        top: calc(-30.0120048px / 2);
        left: calc(-10.0040016px / 2);
        width: calc(60.0240096px / 2);
        height: calc(60.0240096px / 2);
    }
    .arm.top-left-arm,
    .arm.top-right-arm {
        top: calc(-100px / 2);
    }
    .arm.bottom-left-arm,
    .arm.bottom-right-arm {
        bottom: calc(-100px / 2);
    }
    .arm.top-right-arm,
    .arm.bottom-right-arm {
        right: calc(-50.020008px / 2);
    }
    .arm.top-left-arm,
    .arm.bottom-left-arm {
        left: calc(-50.020008px / 2);
    }
    .prop {
        top: calc(-70px / 2);
        left: calc(50% / 2);
        width: calc(18px / 2);
        height: calc(140px / 2);
        margin-left: calc(-9px / 8);
    }
    .loadingText {
        height: calc(25px / 2);
        padding-top: calc(25px / 2);
        font-size: calc(25px / 2);
    }
}

@keyframes wind{
    0% {
        background-position: 0 -200px, 0 -300px, -100px -250px;
    }
    100% {
        background-position: -1000px -200px, -1200px -300px, -1100px -250px;
    }

}
@-webkit-keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* shadow up*/
.shadowup{
	box-shadow: 0px -8px 20px 1px rgba(0,0,0,0.2);
    transition: 0.3s;
}

/*shadow down*/
.shadowdown{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}

.image-color{
	border: 2px solid #ff0000;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 14px 15px 12px 1px rgba(0, 0, 0, 0.19);
}

.image-shadow{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 14px 15px 12px 1px rgba(0, 0, 0, 0.19);
}

/* -------GALLERY---------*/