/

*----------------------------------------------------------------------------------
----
Theme Name: CREATIVE PHOTOGRAPHY
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly PHOTOGRAPHY HTML
template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
-----------------------------------------------------------------------------------
-----
1. BASE CSS
2. TOP AREA
2.1 MAINMENU AREA
2.2 WELCOME SLIDER AREA
3. LATEST SHORT AREA
3.1. FUN FACT AREA
4. ABOUT AREA
5. PRICEING AREA
6. TESTMONIAL AREA
7. CONTACT AREA
8. GALLERY AREA
9. FOOTER AREA
10. SCROLL TO TOP
-----------------------------------------------------------------------------------
-----*/

/*--------------------
1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|
Raleway:300,400,500');
.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;
}

button:focus {
outline: 0;
}

img {
max-width: 100%;
height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 15px;
font-weight: 400;
font-family: 'Montserrat', sans-serif;
}

html,
body {
height: 100%
}

body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
line-height: 1.6em;
font-weight: 400;
color: #363636;
}

a:hover {
text-decoration: none
}

.navbar-toggle {
border: 2px solid #0bedff;
border-radius: 0;
}

.navbar-toggle .icon-bar {
background: #0bedff none repeat scroll 0 0;
}

/* 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 {
font-size: 20px;
 margin-bottom: 80px;
padding-bottom: 20px;
position: relative;
}

.area-title::after {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(left, #03edfd, #deadfc)
repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to right, #03edfd, #deadfc) repeat
scroll 0 0;
bottom: 0;
content: "";
height: 2px;
left: 50%;
margin-left: -100px;
position: absolute;
width: 200px;
}

.area-title h2 {
color: #1d2247;
font-size: 60px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
margin-bottom: 30px;
padding: 0 10px;
position: relative;
text-transform: uppercase;
}

.area-title p {
margin-bottom: 0;
}

.section-padding {
padding: 100px 0;
}

.padding-top {
padding-top: 100px;
}

.padding-bottom {
padding-bottom: 100px;
}

.red-bg {
background: #0bedff;
color: #fff;
}

.dark-bg {
background: #37363d;
color: #fff;
}

.gray-bg {
background: #F4F4F4;
}

.no-padding {
padding: 0;
}

.no-margin {
margin: 0;
}

/*--------------------------
2. TOP AREA
---------------------------*/

.top-area {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}

.top-area-bg {
background: rgba(0, 0, 0, 0) url("img/slider/slide_1.jpg") no-repeat scroll
center center / cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}

.top-area-bg::before {
background: #2d2242 url("img/pattarn.png") repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

#particles-js {
height: 100%;
position: absolute;
width: 100%;
z-index: 9;
}

.wel-come-text-area {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
 display: flex;
height: 100%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-top: 100px;
position: absolute;
text-align: center;
width: 100%;
z-index: 3;
}

/*---------------------------------
2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.mainmenu-area {
background: rgba(31, 31, 34, 0.7) none repeat scroll 0 0;
position: relative;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
z-index: 9999 !important;
}

.navbar-header {
-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: 60%;
}

ul#nav {
float: right;
-webkit-transition: 0.3s;
transition: 0.3s;
}

ul#nav li a {
 background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #fff;
letter-spacing: 2px;
padding: 40px 15px;
position: relative;
text-transform: uppercase;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

ul#nav li a::after {
background: #0bedff 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: #0bedff;
}

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

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

.is-sticky .mainmenu-area {
background: rgba(31, 31, 34, 0.9) none repeat scroll 0 0;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
z-index: 99999 !important;
}

.fullscreen-button {
float: right;
height: 100px;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 40px;
}
.is-sticky .fullscreen-button {
height: 40px;
}

.fullscreen-button a {
color: #fff;
font-size: 20px;
height: 40px;
margin-top: -20px;
padding-top: 9px;
position: absolute;
text-align: center;
top: 50%;
width: 40px;
}

.fullscreen-button a::before {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
content: "\f065";
font-family: FontAwesome;
height: 100%;
left: 0;
padding-top: 7px;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.fullscreen-button a.open::before {
content: "\f066";
}

.fullscreen-button a:hover::before {
color: #0bedff;
}

/*-----------------------------------
2.2 WELCOME SLIDER AREA
-------------------------------------*/

.welcome-slider-area.owl-carousel {
position: relative;
height: 100%;
z-index: 9;
}

.welcome-slider-area.owl-carousel div:not(.owl-controls) {
height: 100%;
}

.single-welcome-slide::before {
background: #000 url(img/pattarn.png);
content: "";
height: 100%;
left: 0;
 opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}

.single-welcome-slide {
-moz-box-align: center;
-moz-box-pack: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
width: 100%;
z-index: 9;
padding-top: 100px;
}

.welcome-slider-area .owl-controls {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
height: 150px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: -75px;
position: absolute;
right: 5%;
top: 50%;
z-index: 9;
}

.welcome-slider-area .owl-dots > div {

background: #7a8693 none repeat scroll 0 0;
display: block;
height: 3px !important;
margin-bottom: 20px;
width: 50px;
-webkit-transition: 0.3s;
 transition: 0.3s;
}

.welcome-slider-area .owl-dots > div.active {

background: #fff;
}

.welcome-slide-one {
background: url('img/slider/slide_1.jpg');
}

.welcome-slide-two {
background: url('img/slider/slide_2.jpg');
}

.welcome-slide-three {
background: url('img/slider/slide_3.jpg');
}

.welcome-slide-four {
background: url('img/slider/slide_4.jpg');
}

.welcome-slide-one,
.welcome-slide-two,
.welcome-slide-three,
.welcome-slide-four {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}

.welcome-text h1,
.welcome-text h2,
.single-welcome-slide h1,
.single-welcome-slide h2 {
font-size: 60px;
letter-spacing: 20px;
text-transform: uppercase;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.welcome-text h1,
.single-welcome-slide h1 {
font-weight: 700;
}

/*.custom_animateed {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}*/

.animate_left_to_right {
-webkit-animation: animate_left_to_right;
animation: animate_left_to_right;
 -webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animate_right_to_left {
-webkit-animation: animate_right_to_left;
animation: animate_right_to_left;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@-webkit-keyframes animate_left_to_right {
0% {
-webkit-transform: translateY(-35%)scaleY(0);
transform: translateY(-35%)scaleY(0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0)scaleY(1);
transform: translateY(0)scaleY(1);
}
}

@keyframes animate_left_to_right {
0% {
-webkit-transform: translateY(-35%)scaleY(0);
transform: translateY(-35%)scaleY(0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0)scaleY(1);
transform: translateY(0)scaleY(1);
}
}

@-webkit-keyframes animate_right_to_left {
0% {
-webkit-transform: translateY(35%)scaleY(0);
transform: translateY(35%)scaleY(0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0)scaleY(1);
transform: translateY(0)scaleY(1);
}
}

@keyframes animate_right_to_left {
0% {
-webkit-transform: translateY(35%)scaleY(0);
transform: translateY(35%)scaleY(0);
opacity: 0;
}
100% {
-webkit-transform: translateY(0)scaleY(1);
 transform: translateY(0)scaleY(1);
}
}

.service-area a.readmore:hover {
background: #fff;
color: #20c89e;
}

/*-----------------------------------
3. LATEST SHORT AREA
------------------------------------*/

.recent-photo-title-and-tag {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(top, rgba(0, 0, 0, 0),
#000) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0), #000)
repeat scroll 0 0;
bottom: 0;
color: #fff;
left: 0;
letter-spacing: 1px;
opacity: 0;
padding: 20px;
position: absolute;
text-transform: capitalize;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 100%;
}

.recent-photo-title-and-tag h3 {
font-size: 18px;
}

.recent-photo-title-and-tag a {
color: #fff;
}

.swiper-slide.swiper-slide-next .recent-photo-title-and-tag {
opacity: 1;
}

.swiper-container .arrow-left,
.swiper-container .arrow-right {
background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
color: #fff;
font-size: 30px;
height: 50px;
left: 0;
margin-top: -25px;
padding-top: 9px;
position: absolute;
text-align: center;
top: 50%;
width: 50px;
z-index: 9;
opacity: 0;
}

.swiper-container .arrow-right {
left: auto;
right: 0;
}

.swiper-container .arrow-left:hover,
.swiper-container .arrow-right:hover {
background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
}

.swiper-container:hover .arrow-left,
.swiper-container:hover .arrow-right {
opacity: 1;
}

/*-----------------------------------
3.1. FUN FACT AREA
------------------------------------*/

.single-fun-fact {
font-family: "Montserrat", sans-serif;
font-size: 24px;
letter-spacing: 1px;
margin-bottom: 80px;
text-transform: capitalize;
}

.fact-icon {
font-size: 100px;
height: 100px;
margin: 0 auto 20px;
text-align: center;
width: 100px;
}

.single-fun-fact h3 {
font-size: 80px;
font-weight: 700;
letter-spacing: 5px;
line-height: 1;
}

/*-----------------------------
4. ABOUT AREA
-------------------------------*/

.about-area {
position: relative;
}

.about-area-author-bg {
background: rgba(0, 0, 0, 0) url("img/about/spike.jpg") no-repeat scroll center
center / cover;
height: 100%;
left: 0;
 position: absolute;
top: 0;
width: 50%;
}

.about-content {
padding-left: 40px;
}

.about-details h4 {
font-size: 21px;
letter-spacing: 2px;
margin-bottom: 40px;
text-transform: capitalize;
}

.about-details p {
margin-bottom: 20px;
}

.author-sign {
margin: 40px 0;
}

.author-social-bookmark ul {
list-style: outside none none;
margin: 0;
padding: 0;
}

.author-social-bookmark ul li {
display: inline;
}

.author-social-bookmark ul li a {
color: #7a8693;
display: inline-block;
font-size: 20px;
height: 35px;
padding-top: 5px;
text-align: center;
width: 35px;
}

.author-social-bookmark ul li a:hover {
color: #fff;
}

.photographer-skills {
padding-top: 40px;
}

.skillst {
width: 100%;
}

.skillst .skillbar {
background: #fff none repeat scroll 0 0;
box-sizing: border-box;
 height: 5px;
margin-bottom: 30px;
margin-top: 50px;
position: relative;
width: 100%;
color: #7a8693;
}

.skillst .skill-info {
height: 30px;
left: 0;
position: absolute;
top: -30px;
width: 100%;
}

.skillst .skill-info div {

display: inline-block;
font-size: 14px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}

.skillst .skill-info div.count {

float: right;
}

.skillst .skillbarin {
background: transparent;
height: 100%;
position: relative;
}

.skillst .count-bar {
width: 0px;
}

.skillst .count-bar {
background: #7a8693;
height: 100%;
}

/*------------------------------
5. PRICEING AREA
-------------------------------*/

.single-price {
padding: 40px;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}

.price-title-and-rate {
position: relative;
text-align: center;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.price-icon {
font-size: 60px;
margin-bottom: 20px;
color: #0bedff;
}

.price-title {
font-size: 22px;
letter-spacing: 2px;
margin-bottom: 20px;
text-transform: uppercase;
}

.price-title-and-rate > h3 {
color: #0bedff;
font-size: 60px;
font-weight: 700;
}

.price-title-and-rate h3 span {
font-size: 24px;
}

.price-details {
background: #fff none repeat scroll 0 0;
padding-top: 50px;
}

.price-details ul {
list-style: outside none none;
margin: 0;
padding: 0;
}

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

.price-details ul li::before {
background: #1d2247 none repeat scroll 0 0;
content: "";
display: inline-block;
height: 2px;
margin-right: 15px;
margin-top: 10px;
width: 30px;
}

.price-button {
padding: 40px 0 0;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}

.price-button a {
background: #37363d none repeat scroll 0 0;
border: 1px solid transparent;
 border-radius: 3px;
color: #fff;
display: block;
font-size: 14px;
left: 50%;
letter-spacing: 3px;
margin: 0 auto;
padding: 15px;
text-align: center;
text-transform: uppercase;
top: -20px;
width: calc(100% - 30%);
}

.single-price.active,
.single-price:hover {
box-shadow: 0 0 20px #ebebeb;
}

.price-button a:hover {
background: #fafafa none repeat scroll 0 0;
border-color: #10ecff;
color: #333;
}

/*------------------------------
6. TESTMONIAL AREA
-------------------------------*/

.testmonial-area {
color: #fff;
position: relative;
text-align: center;
}

.testmonial-area-bg {
background: rgba(0, 0, 0, 0) url("img/testmonial/testmonial_bg.jpg") no-repeat
scroll center center / cover;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

.testmonial-area-bg::after {
background: #37363d none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}

.author-img {
border-radius: 50%;
 height: 120px;
margin: 0 auto 30px;
overflow: hidden;
width: 120px;
}

.author-img img {
border-radius: 50%;
}

.testmonial-author-name-title-img h4 {
font-size: 24px;
text-transform: uppercase;
}

.testmonial-author-name-title-img h5 {
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 0;
}

.testmonial-author-details {
font-family: "Montserrat", sans-serif;
font-size: 20px;
font-weight: 400;
line-height: 1.6;
padding: 30px;
position: relative;
}

.testmonial-area .owl-controls .owl-dots {

bottom: 0;
position: absolute;
text-align: center;
width: 100%;
}

.testmonial-area .owl-controls .owl-dots > div {

background: #e8edff none repeat scroll 0 0;
border-radius: 20px;
display: inline-block;
height: 10px;
margin: 0 5px;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
width: 10px;
}

.testmonial-area .owl-controls .owl-dots > div.active {

height: 20px;
}

/*------------------------------
7. CONTACT AREA
-------------------------------*/

.contact-area-details {
-webkit-box-align: center;
 -ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 90px 0;
position: relative;
}

.contact-from-bg {
background: #333 none repeat scroll 0 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 70%;
}

.footer-address-details,
.google-map {
padding-left: 40px;
color: #fff;
}

.contact-form-area {
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 10px #e4e4e4;
padding: 50px 40px;
position: relative;
z-index: 9;
}

.footer-address-details {
color: #7a8693;
letter-spacing: 1px;
margin-bottom: 40px;
position: relative;
text-transform: uppercase;
}

.footer-address-details::after {
background: #7a8693 none repeat scroll 0 0;
content: "";
height: 40px;
left: -30px;
position: absolute;
top: 0;
width: 40px;
}

.footer-address-details h3 {
color: #fff;
}

.footer-address-details a {
color: #7a8693;
}

.footer-address-details a:hover {
 color: #fff;
}

.form-control {
background: #f2f4f5 none repeat scroll 0 0;
border-radius: 0;
margin-bottom: 25px;
max-height: 140px;
min-height: 40px;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.contact-area .form-control:focus {
background: #fff none repeat scroll 0 0;
border-color: #0beeff;
box-shadow: 0 0 0;
color: #333;
outline: 0 none;
}

.contact-form button {
background: #333 none repeat scroll 0 0;
border: 1px solid transparent;
color: #fff;
font-size: 14px;
font-weight: 600;
letter-spacing: 2px;
margin-bottom: -20px;
padding: 10px 20px;
text-transform: uppercase;
-webkit-transition: 0.3s;
transition: 0.3s;
}

.contact-form button:hover {
background: #fafafa none repeat scroll 0 0;
border-color: #10ecff;
color: #333;
}

/*------------------------------
8. GALLERY AREA
--------------------------------*/

.single-gallery-items {
float: left;
width: 10%;
}

.single-gallery-items img {
width: 100%;
}

/*------------------------------
9. FOOTER AREA
-------------------------------*/
.footer-area {
background: rgba(31, 31, 34, 0.9) none repeat scroll 0 0;
color: #fff;
padding: 25px 0;
}

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

.footer-area a:hover {
color: #0bedff;
}

.footer-copyright p {
margin-bottom: 0;
margin-top: 10px;
}

.footer-social-bookmark ul {
list-style: outside none none;
margin: 10px 0 0;
padding: 0;
text-align: center;
}

.footer-social-bookmark ul li {
display: inline;
}

.footer-social-bookmark ul li a {
color: #fff;
display: inline-block;
font-size: 16px;
height: 35px;
margin-right: 4px;
padding-top: 5px;
text-align: center;
width: 35px;
}

.footer-social-bookmark ul li a:hover {
color: #0bedff;
}

/*------------------------------
10. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
background: #0bedff none repeat scroll 0 0;
bottom: 20px;
box-shadow: 0 0 0 7px transparent;
color: #fff;
display: none;
font-size: 20px;
height: 40px;
 padding-top: 6px;
position: fixed;
right: 20px;
text-align: center;
width: 40px;
z-index: 99;
}

a.scrolltotop:hover {
box-shadow: 0 0 0 0 #272727;
background: #272727;
}