/*
Template Name: Pearl - Beauty & Salon One Page HTML Template;
Version: 1.0;
Theme Author: ThemePackNet;
Theme URI: http://spoilcoconut.com;
Tags: beauty, salon, spa, parlour, make-up, clean, mash-up, skin, hair-style, eye-makeup, cosmetic, health, nail, wellness;
Description: Pearl is a beauty and salon HTML template by ThemePackNet. The template for hair salon, eye make-up, skin care etc. The template includes service, portfolio, testimonial etc. It has high quality and clean code structure. Just edit and use.;
 */

/***************************************************/
/************** TABLE OF CONTENTS ****************
01. GLOBAL CSS
02. HEADER CSS
03. SLIDER CSS
04. SERVICE CSS
05. ABOUT CSS
06. TESTIMONIAL CSS
07. PORTFOLIO CSS
08. PRICING TABLE CSS
09. BLOG CSS
10. CONTACT CSS
11. NEWSLETTER CSS
12. FOOTER CSS
13. BACK TO TOP
*/
/***************************************************/



/***************************************************/
/************** GLOBAL CSS *****************/
/***************************************************/

body {
    overflow-x: hidden;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1px;
    height: 100%;
    font-family: 'Lato', sans-serif;
    background: #fff;
    color: #777;
}
section{
	padding: 90px 0;
}
.section-bg{
	background: rgba(96, 96, 96, 0.08);
}
.title-desc{
	padding-bottom: 35px;
}
.title-desc h2{
	
	font-size: 30px;
	position: relative;
	color: #606060;
	padding-bottom: 30px;
	text-transform: uppercase;
	font-family: 'Montserrat', sans-serif;
}
.title-desc h2:after{
	background: #FE0074;
    bottom: 0;
    content: "";
    height: 5px;
    left: calc(50% - 15px);
    position: absolute;
    width: 30px;
    top: 50px;
}
.title-desc h2:before{
	border-bottom: 2px dashed #606060;
    bottom: 0;
    content: "";
    height: 1px;
    left: calc(50% - 70px);
    position: absolute;
    width: 140px;
    top: 55px;
}
.title-desc h2 span{
	color: #FE0074;
}
.spacer-45 {
    height: 45px;
}
li{
	list-style: none;
}
a{
	color: #606060;
	text-decoration: none;
}
a:hover,
.has-error .help-block{
	color: #FE0074;
}
.has-error .form-control:focus{
	border-color: #FE0074;
	box-shadow: none;
}
.form-control:focus{
	box-shadow: none;
}
.form-control{
	border-radius: 0;
}

/***************************************************/
/************** HEADER CSS *****************/
/***************************************************/
.brand-centered {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}
.brand-centered .navbar-brand {
	display: flex;
	align-items: center;
	color: #fff;
    
    font-size: 28px;
    transition: all 500ms ease-in-out;
}
.brand-centered .navbar-brand:hover{
	color: #FE0074;
}
.navbar-toggle {
    z-index: 1;
}
.navbar-alignit .navbar-header {
	transform-style: preserve-3d;
	height: 50px;
}
.navbar-alignit .navbar-brand {
	top: 50%;
	display: block;
	position: relative;
	height: auto;
	transform: translate(0,-50%);
	margin-right: 15px;
	margin-left: 15px;
}
.navbar-nav>li>.dropdown-menu {
	z-index: 9999;
}
.navbar-brand {
  	padding: 0px;
}
.navbar-brand>img {
	height: 100%;
	padding: 15px;
	width: auto;
}
img#mid-logo{
	margin-right: 10px; 
	padding: 0;
}
.navbar-brand{
	margin-top: 10px;
}

#header-area .navbar-default{
	background: transparent;
	border-color: transparent;
	height: 75px;
}
#pearlnav ul li{
	padding-top: 10px;
}
#pearlnav ul li a{
	color: #fff;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1.5px;
    transition: all 150ms ease-in-out;
    line-height: 2;
}
#pearlnav ul li a:hover{
	color: #FE0074;
}
 
@media screen and (min-width:968px) and (max-width:1050px){
		
	img#mid-logo{
		width:200px;
		height:auto;
		margin-right:100px; 
	}
}

@media screen and (min-width:768px) and (max-width:968px){
		
	img#mid-logo{
		width:100px;
		height:auto;
		margin-right:70px; 
	}
}

@media only screen and (max-width:768px) { 
    .navbar-default .navbar-nav > li > a {
        margin-top: 10px;
        padding: 8px;
    }

}
@media only screen and (max-width:480px) { 
    .menu-top { 
    	background-color: #fff 
    }
    .navbar-default .navbar-nav > li > a { 
    	color: #fff  !important;
    }
}
.navbar-default.menu-shrink {
    background-color: #606060  !important;
    width: 100%;
    transition: all 550ms ease-in-out;
}

@media only screen and (max-width:480px) { 
    .menu-top {
        color: #606060 !important;
        margin-left: 0px;
    }
}

.menu-shrink .mainmenu ul li a{
	color: #606060 !important;
	transition: all 0.3s;
}
.menu-shrink .mainmenu ul li a:hover{
	color: #ff6d6d !important;
}

/***************************************************/
/************** SLIDER CSS *****************/
/***************************************************/
#pearlCarousel .item .carousel-caption{
	padding-bottom: 25%;
}
#pearlCarousel .item h1{
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 50px;
    font-size: 50px;
    line-height: 25px;
    font-weight: 400;
    white-space: nowrap;
    letter-spacing: 1px;
}

a.slider-btn {
    border: 1px solid #fff;
    padding: 8px 18px;
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    background: #FE0074;
    transition: all 500ms ease-in-out;
}
a.slider-btn:hover{
	background: #606060;
}
#pearlCarousel .carousel-indicators{
	right: 0;
	left: inherit;
}
#pearlCarousel .carousel-indicators li{
	border-radius: 0;
}
#pearlCarousel .carousel-indicators li.active{
	background: #FE0074;
}


#pearlCarousel  .carousel-inner .item {
    background-repeat: no-repeat;
    background-size: cover;  
}
#pearlCarousel  .carousel-inner .item:after {
	background: rgba(0,0,0,.7);
	bottom: 0;
	content: " ";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}


#pearlCarousel .active .carousel-caption h1 {
  	animation: fadeInUp 300ms linear 300ms both;
}
#pearlCarousel .active .carousel-caption a{
  	animation: fadeInUp 300ms linear 600ms both;
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}
	
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/***************************************************/
/************** SERVICE CSS *****************/
/***************************************************/
.pearl-tab-list .nav-tabs{
	border-bottom: inherit;
}
.pearl-tab-list {
    text-align: center;
    padding-bottom: 60px;
}
.pearl-tab-list ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	/* For IE, the outcast */
	zoom: 1;
	*display: inline;
}
.pearl-tab-list li {
	float: left;
	padding: 2px 5px;
	list-style: none;
	border: 1px solid #606060;
	margin: 0 3px;
}
.pearl-tab-list li a{
	color: #606060;
	font-size: 15px;
}
.pearl-tab-list .nav-tabs li a:hover{
	border-color: transparent;
	background: transparent;
}
.pearl-tab-list li.active{
	background: #FE0074;
	padding: 3px;
	border: 1px solid #FE0074;
}
.pearl-tab-list li.active a{
	background-color: inherit;
	border: none;
	color: #fff;
}
.pearl-tab-list li.active a:hover,
.pearl-tab-list li.active a:focus{
	background-color: inherit;
	border: none;
	color: #fff;
}
.tab-content h2{
	text-transform: uppercase;
    font-size: 23px;
    color: #606060;
    line-height: 32px;
}

ul.service-list{
	margin-top: 45px;
}
ul.service-list li{
	position: relative;
	list-style: none;
	padding-bottom: 7px;
}
ul.service-list li:before{
	content: "\f004";
    position: absolute;
    font-family: FontAwesome;
    font-size: 15px;
    color: #FE0074;
    left: -35px;
    padding-top: 3px;	
}

/***************************************************/
/************** ABOUT CSS *****************/
/***************************************************/
.about-left img{
	display: block;
	margin: 0 auto;	
	margin-bottom: 35px;
}
.about-right h3{
	text-transform: uppercase;
    line-height: 32px;
}
.about-right h1{
	margin-top: 50px;
    color: #FE0074;
    
}

.artist-img {
	position: relative;
}

.artist-img .img-responsive {
	display: block;
	width: 100%;
	height: auto;
}

.artist-img .overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: rgba(254, 0, 116, 0.88);
	overflow: hidden;
	width: 100%;
	height:0;
	transition: .5s ease;
}
.artist-img:hover .overlay {
	bottom: 0;
	height: 100%;
}
.artist-img .text {
	white-space: nowrap; 
	color: white;
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

h4.single-artist-name{
	font-size: 20px;
    margin-top: 20px;
}

.about-single{
	text-align: center;	
}
.about-single ul{
	margin-top: 25px;
	padding: 0;	
}
.about-single ul li{
	display: inline;
    padding: 0 8px;
}
.about-single ul li a{
	border: 1px solid #606060;
    padding: 6px 8px;
    color: #606060;
    font-size: 16px;
    transition: all 500ms ease-in-out;
}
.about-single ul li a i{
	width: 15px;
    height: 15px;
}
.about-single ul li a:hover i{
	color: #FE0074;
}
.about-single ul li a:hover{
	border: 1px solid #FE0074;
}

/***************************************************/
/************** TESTIMONIAL CSS *****************/
/***************************************************/
#pearlTestimonial .carousel-control.left,
#pearlTestimonial .carousel-control.right{
	background-image: none;
	top: 20px;
	color: #FE0074;
}
#pearlTestimonial .item{
	width: 70%;
	margin: 0 auto;
}

/***************************************************/
/************** PORTFOLIO CSS *****************/
/***************************************************/
.portfolio-filters { 
	margin-bottom: 40px;
}
.portfolio-filters li.active,
.portfolio-filters li:hover,
.portfolio-filters li.active:focus{
	color: #FE0074 !important;
}
ul.portfolio-filters li {
	color: #606060;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	margin-right: 5px;
	padding: 0 20px;
	text-transform: uppercase;
	transition: all 0.4s ease 0s;
}
@media only screen and (max-width:480px) { 
    .portfolio-filters li { 
    	margin-bottom: 10px;
    }
}
.portfolio-filters li:hover { 
	color: #FE0074;
	cursor: pointer;
}
.grid .mix {
    display: none;
    opacity: 0;
    filter: alpha(opacity=0);
}
.image-wrapper { 
	position: relative;
}
.image-wrapper img {
    width: 100% !important;
    height: auto;
}
.image-overlay {
    background: rgba(191, 19, 73, 0.7);
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.image-overlay span a {
    color: #fff;
    left: 33%;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
}


/* Custom */

.image-overlay span a span{
    color: #fff;
    left: 0%;
    position: absolute;
    text-transform: uppercase;
    top: 48%;
}




.image-wrapper:hover .image-overlay {
    opacity: 1;
    filter: alpha(opacity=100);
}
.portfolio_btn {
	margin: 0;
	padding-top: 60px;
}
.portfolio_btn a { 
	border: medium none;
}
.no-padding{
	padding: 0;
}

/***************************************************/
/************** PRICING TABLE CSS *****************/
/***************************************************/
.price_table_container{
	text-align:center;
	margin-top:35px;
	font-family: 'Open Sans', sans-serif;
}

.price_table_heading{
	font-size:36px;
	padding:10px;
	background:#EEE;
}

.price_table_row {
    padding:15px;
	background: #FFF;
}

.cost{
	padding:30px;
	font-size:30px;
}
.cost span{
	font-size:15px;
}

.price_table_row:nth-of-type(even) {
    background: #F8F8F8;
}

.btn{
	border-radius:0px;
}

.recommended{
	background:#FE0074; 
	color:#FFF;	
	padding:3px 0 3px 0;
	margin-top:10px;  
	text-align:center;
	margin-bottom:-35px;
}

.spacer{
	width:100%;
	height:50px;
}

/*BTN-DARK*/
.btn-dark {
	color: #fff;
	background-color: #444;
	border-color: #444;
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark.focus,
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
	color: #fff;
	background-color: #222;
	border-color: #222;
}
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
	background-image: none;
}


/*BTN-ROYAL---------*/
.btn-royal {
	color: #fff;
	background-color: #8E74E2;
	border-color: #8E74E2;
}
.btn-royal:hover,
.btn-royal:focus,
.btn-royal.focus,
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
  color: #fff;
  background-color: #7451E8;
  border-color: #7451E8;
}
.btn-royal:active,
.btn-royal.active,
.open > .dropdown-toggle.btn-royal {
  background-image: none;
}


/*BTN-STATIC---------*/
.btn-static {
  color: #fff;
  background-color: #2BB0A6;
  border-color: #2BB0A6;
}
.btn-static:hover,
.btn-static:focus,
.btn-static.focus,
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
  color: #fff;
  background-color: #07A094;
  border-color: #07A094;
}
.btn-static:active,
.btn-static.active,
.open > .dropdown-toggle.btn-static {
  background-image: none;
}

#pricing .btn-block{
	background: #606060;
	color: #fff;
	transition: all 500ms ease-in-out;
}
#pricing .btn-block.active,
#pricing .btn-block:hover{
	background: #FE0074;
}


/***************************************************/
/************** BLOG CSS *****************/
/***************************************************/
.single-blog a{
	text-decoration: none;
	transition: all 200ms ease-in-out;
}
.single-blog a h2{
	padding: 20px 0;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 1.7;
    font-family: 'Montserrat', sans-serif;
}
.date-author{
	padding-bottom: 15px;
    
}
.single-blog p{
	padding-bottom: 20px;
}
a.read-more{
	background: #606060;
    color: #fff;
    padding: 10px 19px;
    text-decoration: none;
    transition: all 500ms ease-in-out;
}
a.read-more:hover{
	background: #FE0074;
}

/***************************************************/
/************** CONTACT CSS  *****************/
/***************************************************/
.single-contact h3{
	
	padding-bottom: 25px;
	text-transform: uppercase;
}
ul.work-menu li{
	position: relative;
	padding: 5px 0;
}
ul.work-menu li:before{
	position: absolute;
	content: "\f017";
	font-family: FontAwesome;
	top: 5px;
    left: -40px;
}
.single-contact p i{
	width: 15px;
    height: 15px;
    margin-right: 15px;
}
.single-contact form{
	margin-top: 30px;
}
.single-contact .form-group{
	margin-bottom: 0;
}
.send-btn{
	background: #606060;
    color: #fff;
    border: none;
    padding: 5px 20px;
    transition: all 500ms ease-in-out;
}
.send-btn:hover{
	background: #FE0074;
}
#msgSubmit {
    color: #606060;
}
.single-contact iframe{
    /* Originally pointer-events: none; */
	margin-top: 20px;
	height: 200px;
	border: none;
}

/***************************************************/
/************** NEWSLETTER CSS *****************/
/***************************************************/
#newsletter{
	-webkit-background-size: cover;
	background-size: cover;
	height: 400px;
	background-attachment: fixed;
	position: relative;
	color: #fff;
}
#newsletter:before {
    background: rgba(0,0,0,0.85);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.newsletter-content{
	padding: 25px 0;
}
.newsletter-content h2{
	text-transform: uppercase;
    
    font-size: 25px;
    padding-bottom: 20px;
}
.newsletter-form{
	padding-top: 75px;
    width: 80%;
    float: right;
}
.newsletter-form .form-control {
	height: 50px;
	border-color: transparent;
	border-radius: 20px 0 0 20px;
	border: 1px solid #606060;
}
.newsletter-form .form-control:focus {
	box-shadow: none;
	border-color: #0606060 
}
.newsletter-form .btn {
	min-height: 50px; 
	border-radius: 0 20px 20px 0;
	background: #606060;
	color: #fff;
	transition: all 500ms ease-in-out;
}
.newsletter-form .btn:hover{
	background: #FE0074;
}

/***************************************************/
/************** FOOTER CSS *****************/
/***************************************************/
footer{
	background: #FE0074;
	color: #fff;
	padding: 10px 0;
}
.footer-social ul{
	float: right;
}
.footer-social ul li{
	display: inline;
	padding: 0px 7px;
}
.footer-social ul li:last-child{
	padding: 0;
}
.footer-social ul li a{
	transition: all 500ms ease-in-out;
	color: #fff;
}
.footer-social ul li a:hover{
	color: #606060;
}

/***************************************************/
/************** BACK TO TOP *****************/
/***************************************************/
#back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 9999;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 30px;
    background: #606060;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #FE0074;
    color: #fff;
}
#back-to-top.show {
    opacity: 1;
}