/*
Theme Name: sunshade
Theme URI: http://sunshade.com
Description: The sunshade theme based on the famous Wordpress CMS.
Version: 1.0
Author: saleem sunshade
*/

/*normal*/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0px; padding: 0px;}
html, body { font-family: 'avenirbook'; font-size: 24px; color: #444343; }
input, select, textarea { font-family: 'avenirbook'; font-size: 24px; color: #444343; }
body { background: #fff; }
img { outline:none; border:0 none; max-width: 100%;max-height: 100%; height: auto; vertical-align: top; }
a, input { outline: none; text-decoration:none; color:#000; }
h1,h2,h3,h4,h5,h6 { padding: 0px; font-weight: normal;}
.clear { clear: both; }
 input[type="search"]::-webkit-search-decoration {
 -webkit-appearance: none;
}
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #5d5c5c;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #5d5c5c;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #5d5c5c;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #5d5c5c;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;    
}

/* wrapper */
#wrapper { position: relative; float:left; width: 100%; min-height: 100%; }

/* Main Center */
.main-center { margin: 0 auto; width:100%; max-width:1170px; padding:0 15px;}

/* Header */
.site-header{ float:left; width:100%; padding:32px 28px 32px 40px; position:fixed; z-index:9; background-color:#fff;transition: all 0.5s ease 0s;}
.sticky{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); transition: all 0.5s ease 0s; padding: 15px 28px 15px 40px;}
.site-header .logo{ float:left; width:25%;}
.site-header .menu{ float:right; width:41%; padding-top: 11px;}
.site-header .menu ul{ float:left;}
.site-header .menu ul li{ float:left; list-style:none; padding:0 25px;}
.menu ul li a{ font:16px/36px 'open_sanssemibold'; color:#000; transition: all 0.3s ease 0s;}
.menu ul li a:hover, .menu ul li a.menu-active, .menu ul li a.active{ color:#a00019; transition: all 0.3s ease 0s;}
.site-header .menu .contact{ float:right; width:auto;}
.menu .contact a:before{ position:absolute;background-image:url(images/red-phone.png); background-repeat:no-repeat; background-size:cover; background-position:center;
height:23px; width:23px; content:""; left:-42px; top: 10px;}
.menu .contact a{ font:30px/36px 'open_sanssemibold'; color:#a00019; background:url(images/devider.png) no-repeat center left; padding-left:20px; position:relative;}
.menu .contact a:hover{ text-decoration:underline;}
#dedicated-mobile{ display:none;}

/* Content */
.content{ float:left; width:100%;margin-top: 120px;} 
.content .banner{ float:left; width:100%; position:relative;}
.content .banner img{ float:left; width:100%;}
.content .banner .title{position:absolute; right: 149px;top: 50%;margin-top: -135px;}
.content .banner h1 .sun{font:221px/204px 'dancing_scriptregular'; color:#000; display: inline-block;}
.content .banner h1 .shade{font:221px/204px 'dancing_scriptregular'; color:#a00019; display: inline-block;}
.content .banner h1 span{ display:block;font:61px/204px 'dancing_scriptregular'; color:#fff;}
.title .welcome{left: 151px; position: absolute; top: -90px;}
.title .hair { position: absolute; right: -3px;top: 120px;}
/* About Us */
.about-us{ float:left; width:100%; background-color:#fff; padding:87px 0 95px;}
.about-title{ float:left; text-align:center; width:100%;}
.about-title h2, .service-title h2, .product-title h2{display:inline-block;font:36px/52px 'open_sanssemibold'; color:#000;border-bottom: 1px solid #000;}
.beauty-salon{ float:left; width:100%; padding-top:95px; position:relative;}
.beauty-salon .left{ float:left; width:66%;}
.beauty-salon .left p{ font:16px/24px 'open_sanslight'; color:#000; padding-top:36px;}
.beauty-salon .left .ayurveda{ padding-top:25px;}
.beauty-salon .left em{ color:#a00019;font-style: normal;}
.beauty-salon .right{ position:absolute; right:11px;width: 43%;}
/* Our Services */
.our-services{ float:left; width:100%; background-color:#f1f1f1; padding:86px 0 15px;}
.service-title{ float:left; width:100%; text-align:center;}
.our-services .gallery{ float:left; width:100%; padding-top:100px;}
.our-services .gallery ul{ list-style:none;}
.our-services .gallery ul li{ float:left; width:33.33%; padding:0 12px 85px 12px;text-align: center;min-height: 449px;}
.our-services .gallery h2{font:20px 'open_sansregular'; color:#000; padding-top:25px;}
.serviceDetail { display: none; max-width: 800px;min-width:500px;padding: 0 12px;}
.serviceDetail h3{margin: 10px 0; color: #2e7f37;font-size: 20px; font-weight: bold; text-transform: uppercase;}
.serviceDetail p{font:16px/24px 'open_sanslight'; color:#000;}
.serviceDetail ul {
    float: left;
    padding:0 0 0 18px;
    width: 100%;
}
.serviceDetail li {
    float: left;
    width: 100%;font:18px/24px 'open_sanslight';
}


/* Our Products */
.our-product{ float:left; width:100%; background-color:#fff; padding:84px 0 9px 0;}
.product-title{ float:left; width:100%; text-align:center;}
.product-item{ width:100%; float:left;}
.product-item ul{ list-style:none; width:100%;}
.product-item ul li{ float:left; text-align:center; width:25%; padding:50px 12px 0;}
.product-item ul li h2{font:18px 'open_sanssemibold'; color:#000; text-transform:uppercase; padding:12px 0 5px 0;min-height: 67px;}
.product-item ul li p{ font:14px/16px 'open_sanslight'; color:#000; text-align:left;}
.productDetail{display: none; max-width: 800px;min-width:500px;text-align: center;padding: 0 12px;}
.productDetail h3{margin: 10px 0; color: #2e7f37;font-size: 20px; font-weight: bold; text-transform: uppercase;}
.productDetail p{font:16px/24px 'open_sanslight'; color:#000; text-align: left;}
.buy-btn { display: inline-block; margin: 14px 0 0;}
.buy-btn:hover{ background-color: #6a0000;transition: all 0.3s ease 0s;}
.buy-btn{
    background-color: #a00019;
    border: medium none;
    border-radius: 5px;
    color: #fff;
    font: bold 18px "Candara";
    height: 50px;
    margin-bottom: 0;
    max-width:300px;
    padding:11px 18px 0;
    text-transform: uppercase;transition: all 0.3s ease 0s;
	line-height:25px;
}

/* Why Choose Us */
.why-choose{ float:left; width:100%; background-image:url(images/why-choose-bg.jpg); background-position: center center; background-size: cover; padding:88px 0 47px 0;margin: 52px 0 0;}
.choose-title{ float:left; width:100%; text-align:center;}
.choose-title h2{font:36px/50px 'open_sanssemibold'; color:#fff; border-bottom:1px solid #fff; display: inline-block;}
.choose-title p{font:18px/24px 'open_sanslight'; color:#fff; padding:47px 0 51px 0;}
.choose-category{ float:left; width:100%;}
.choose-category ul li{ list-style:none; float:left; width:50%; padding:0 15px; min-height: 170px;}
.choose-category ul li:nth-child(odd){ padding-left:0;}
.choose-category ul li:nth-child(even){ padding-right:0;}
.choose-category h2{font:24px/24px 'open_sanssemibold'; color:#fff; padding-bottom: 20px;}
.choose-category p{ font:14px/24px 'open_sanslight'; color:#fff; padding-bottom:50px;}
/* Footer */
footer{ float:left; width:100%;}
.footer-center{ padding:55px 0 42px 0; float:left; width:100%;}
.footer-center .left-sec{ float:left; width:38.33%; padding:0 58px 0 20px;}
.left-sec address{ float:left; font-style:normal; padding-top:43px;}
.left-sec address p.name{font:bold 18px "Candara"; color:#a00019; padding:0;}
.left-sec address p{font:16px 'Candara'; color:#262626; padding:16px 0;}
.left-sec address ul li{ list-style:none;}
.left-sec address a, .left-sec address span{font:16px 'Candara'; color:#262626; display: inline-block;}
.left-sec address a:hover{ text-decoration:underline;}
.left-sec .social-link{ float:left; width:100%; padding-top:25px;}
.left-sec .social-link a:hover{ opacity:0.8;}
.left-sec .social-link a.facebook{ background:url(images/facebook.png) no-repeat center center; width:16px; height:27px; display:inline-block;}
.left-sec .social-link a.twitter{ background:url(images/twitter.png) no-repeat center center; width:34px; height:28px;display:inline-block;padding-left: 75px;}
.footer-center .map{ float:left; width:33.33%;padding:30px 59px 0 0}
.footer-center .map iframe{ float:left; width:100%;height:285px;}
.footer-form{ float:right; width:27.33%;}
.footer-form h2{ font: 24px/24px "open_sanssemibold"; color:#252525; text-transform:uppercase;border-bottom: 1px solid #000; display:inline-block;}
.footer-form form{ padding:30px 20px 0 0; position:relative;}
.footer-form form input{ border:1px solid #000; width:100%; height:45px; font:18px 'Candara'; color:#262626; margin-bottom:20px; padding-left:10px;-webkit-appearance: none;}
.footer-form form p{ width:100%; float:left; text-align:center;}
.footer-form form input[type="submit"]{ text-transform:uppercase; color:#fff; background-color:#a00019; border-radius:5px; border:none; max-width:155px; height:50px; margin-bottom:0; padding: 0; font: 18px/24px "open_sanssemibold";transition: all 0.3s ease 0s;}
.footer-form form input[type="submit"]:hover{ background:#6a0000; cursor:pointer;transition: all 0.3s ease 0s;}
span.wpcf7-not-valid-tip{ font-size:12px !important;position: absolute; top: 42px; left:0;}
div.wpcf7-validation-errors{ font-size:12px; display: inline-block !important; margin:5px 0 0 !important;}
div.wpcf7-mail-sent-ng { border: 2px solid #ff0000; display: inline-block !important; font-size: 12px; margin: 0; padding: 0;}
.myform label.error{ color:#F00; font:12px 'Candara';}
label#name-error{ position:absolute; top: 77px; left:0;}
label#email-error{ position:absolute;top: 141px; left:0;}
label#number-error{ position:absolute;top: 206px; left:0;}
/* Copy Right */
.copy-right{ float:left; width:100%; background-color:#151515; padding:10px 0;}
.copy-right .left{ float:left; width:auto; font:14px 'arial'; color:#c1c1c1;}
.copy-right .right{ float:right; width:auto;font:14px 'arial'; color:#c1c1c1;}
.copy-right .right a{ color:#c1c1c1; text-decoration:underline;}
.copy-right .right a:hover{ text-decoration:none;}
footer .back-to-top{ position:fixed; right:40px; bottom:40px;z-index: 9;}
footer .back-to-top a{background: #a00019  url(images/arrowup.png) no-repeat scroll center center; height: 40px;width: 40px; }

div.wpcf7-mail-sent-ok {
    border: 2px solid #398f14;
    float: left!important;
    font-size: 18px!important;
}
 

 /* Media Css*/ 
 @media only screen and (max-width: 1920px) {
.site-header .menu{ width:55%;}
 }

@media only screen and (max-width: 1779px) {
	.site-header .menu{ width:65%;}
	.menu ul li a{ font-size:14px;}
	.site-header .menu ul li{ padding:0 18px;}
	.menu .contact a{ font-size:25px; line-height:27px;}
	.content .banner .title{ right:118px;}
	.content .banner h1 span{ font-size:40px; line-height:135px;}
	.content .banner h1 .sun, .content .banner h1 .shade{ font-size:150px;}
	.title .welcome {left: 104px; top: -14px;}
}
@media only screen and (max-width: 1299px) {
.main-center{ width:95%;}
.site-header .logo{width: 17%;}
.site-header .menu{ width:70%;}
.menu ul li a{ font-size:12px;}
.site-header .menu ul li{ padding:0 12px;}
.menu .contact a{ font-size:18px;}
.menu .contact a::before{ top:2px; height:20px; width:20px;}
.content{ margin-top:112px;}
.content .banner h1 span { font-size: 30px; line-height: 90px;}
.content .banner h1 .sun, .content .banner h1 .shade{ font-size:110px;}
.content .banner .title {right: 110px;}
.title .welcome { left: 70px; top: 20px;}
.beauty-salon .left{ width:60%;}
.left img { width: 70%;}
.beauty-salon .left p{ padding-top: 30px; line-height:20px; font-size:13px;}
.our-services .gallery ul li{ min-height:372px;}
.our-services .gallery h2{ font-size:16px; padding-top: 15px;}
.product-item ul li h2{ font-size:14px; min-height:60px;}
.product-item ul li p{ font-size:12px;}
.left-sec address p{ font-size:14px;}
}
@media only screen and (max-width: 1023px) {
.site-header .menu{ width:67%; padding-top:0;}
.site-header .menu ul li{ padding:0 8px;}
.menu .contact a{ font-size:0; background:none; line-height:10px;}
.menu .contact a:hover{ text-decoration:none;}
.menu .contact a::before{top: -10px; left:0; background-size:15px;}
.content { margin-top: 101px;}
.content .banner h1 .sun, .content .banner h1 .shade{ font-size:75px;}
.content .banner h1 span{font-size: 21px;line-height: 45px;}
.content .banner .title{right: 106px;}
.title .welcome {left: 46px; top: 50px;}
.about-us{ padding:66px 0 60px;}
.beauty-salon, .our-services .gallery{ padding-top:65px;}
.our-services{ padding:66px 0 0;}
.our-services .gallery ul li{ min-height:282px; padding: 0 10px 50px;}
.our-services .gallery h2{ font-size:12px;}
.our-product{padding: 60px 0 80px;}
.product-item ul li{ width:50%; padding:50px 44px 0px; min-height:auto;}
.product-item ul li h2{ font-size:12px; min-height: 40px;}
.why-choose{ padding:65px 0 60px;}
.footer-center .left-sec{ padding:0 20px 0 0;}
.left-sec .footer-logo img { width: 60%;}
.left-sec address{ padding-top:25px;}
.left-sec address p.name, .left-sec address p, .left-sec address a, .left-sec address span{ font-size:14px;}
.footer-center .map{ padding:30px 20px 0 0;}
.footer-center .map iframe{ height:230px;}
.footer-form form{ padding:30px 0 0 0}
.footer-form form input{ height:36px; margin-bottom:20px; font-size:14px;}
.footer-form form input[type="submit"]{height: 32px;max-width: 92px; font-size:14px;}
span.wpcf7-not-valid-tip{ top:37px;}
}
@media only screen and (max-width: 767px) {	
.menuBox { display: none; }
#dedicated-mobile { display: block; clear: both; width: 100%; margin-top: 0px; position : relative; }
#dedicated-mobile a.trigger { color: #fff; font-family: arial; text-decoration: none; clear: both; display: block; position: relative; font-size: 0; }
#dedicated-mobile a.trigger span { content: " "; background: url(images/mobile-menu-icon.png) no-repeat scroll center center transparent; display: block; height: 17px; line-height: 1; margin-top: 0; position: fixed; right: 18px; top: 21px; width: 30px; -webkit-transition: all linear 0.5s; transition: all 0.4s ease; z-index: 999; }
#header.sticky #dedicated-mobile a.trigger span { top: 30px; }
#dedicated-mobile a.trigger.open span { background: url(images/cross.png) no-repeat scroll center center transparent; }
#dedicated-mobilemenu li a:hover, #dedicated-mobilemenu .menu-active { color: #fff; }
#dedicated-mobile #dedicated-mobilemenu { background: #a00019; list-style: outside none none; margin: 0; position: fixed; top: 57px; width: 100%; z-index: 99; padding:25px 8px; }
#dedicated-mobilemenu ul { margin:0; padding: 0 0 0 0; }
#dedicated-mobilemenu li { display: block; }
#dedicated-mobilemenu li a { display: block; padding: 8px 4px; font-size: 16px; line-height: 1; text-transform: uppercase; color : #ccc; text-decoration: none; font-family:'open_sanssemibold'; }
#dedicated-mobilemenu .contact a{padding: 8px 4px; font-size: 16px; line-height: 1; text-transform: uppercase; color : #ccc; text-decoration: none; font-family:'open_sanssemibold'; }
#dedicated-mobilemenu .contact a:hover{ color:#fff;}
#dedicated-mobilemenu li a:hover ul { display: block; }
#dedicated-mobilemenu .submenu { padding: 0; margin: 0; }
#dedicated-mobilemenu .submenu li { background: none; }
#dedicated-mobilemenu .submenu li a { margin: 0; }
#dedicated-mobilemenu .submenu li:first-child a { border-top: 0; }
.mobile-menu{ display:block;}
.site-header .menu{ width:auto;}
.site-header .menu ul{ display:none;left: 0; position: absolute; right: 0; width: 100%;background-color: #a00019; top:57px;}
.site-header .menu ul li{ width:100%;border-bottom: 1px solid #fff; padding:5px 0 5px 10px;}
.site-header .menu ul li:last-child{ border-bottom:none;}
.site-header .menu .contact{ margin-right:55px;}
.site-header {padding: 14px 18px;}
.site-header .logo{ width:40%;}
.menu ul li a{ display:block; color:#ccc; font-size:14px;}
.menu ul li a:hover, .menu ul li a.menu-active{ color:#fff;}
.menu .contact a::before{ top:-13px;}
.content { margin-top: 57px;}
.content .banner .title{right: 40px; margin-top: -115px;}
.content .banner h1 .sun, .content .banner h1 .shade{ font-size:33px;}
.content .banner h1 span{font-size: 10px; line-height: 0px;}
.title .welcome {left: 19px; top: 90px;}
.about-us { padding: 30px 0;}
.beauty-salon, .our-services .gallery { padding-top: 35px;}
.beauty-salon .right{ display:none;}
.beauty-salon .left {width: 100%;}
.about-title h2, .service-title h2, .product-title h2, .choose-title h2{font-size: 25px;line-height: 28px;}
.our-services { padding: 35px 0 0;}
.our-services .gallery ul li{ width:100%;}
.our-services .gallery h2 { font-size: 14px;}
.serviceDetail, .productDetail{ min-width:250px;}
.our-product {padding: 35px 0 80px;}
/*.productDetail{ min-width: auto;}*/
.product-item ul li{ width:100%;padding: 35px 15px 0px;}
.why-choose { padding: 40px 0 45px;}
.choose-title p{ font-size:16px;}
.choose-category ul li{ width:100%; padding:0;}
.footer-center .left-sec{ width:100%;}
.footer-center .map{ width:100%; padding-right:0;}
.footer-form{ width:100%; padding-top:30px;}
.copy-right{ text-align:center;}
.copy-right .left, .copy-right .right{ font-size:10px; float:none;}
}

@media only screen and (min-device-width: 479px) and (max-device-width: 639px) {
	.content .banner h1 .sun, .content .banner h1 .shade {
    font-size: 45px;
}
.content .banner h1 span{ font-size:13px;}
.title .welcome { left: 28px; top: 85px;}
.title .hair{ top:128px;}
.content .banner .title{ right:69px;}

}

div.wpcf7-validation-errors {
    border: 2px solid #f00!important;
}
.error-404.not-found > p{
    font-size: 20px;
    padding: 10px 0;
}
.error-404.not-found > a {
    font-size: 20px;
    padding: 10px 0;
	text-decoration:underline;
}
.error-404.not-found > a:hover{ text-decoration:none; }
.error404 .content {
    margin: 200px 0 80px;
}