/*!
 * Start Bootstrap - Half Slider (https://startbootstrap.com/template-overviews/half-slider)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-half-slider/blob/master/LICENSE)
 */

@import url("https://fonts.googleapis.com/css?family=Abril+Fatface");
@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i&display=swap");
a:hover {text-decoration: none; color: #fff;}
.redColor {color:#d71312}

.carousel-item {
  height: 75vh;
  min-height: 450px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.navbar-toggler {color:#d71312 !important; background: rgba(215,19,18,1);}
.navbar-dark .navbar-nav .nav-link {color:#fff;}
.logo {margin-top: -20px;}
.navigation { background:#d71312; padding: 0 15px; border-radius: 10px;}
.navigation a {padding-left:15px !important; padding-right:15px !important; display: inline-block;}

.carousel-inner h2 {text-shadow:2px 0px 2px rgba(0,0,0,0.3)}
.bannerCap1 { position: absolute; top: 30%;}
.bannerCap1 h2 {font-family: 'Abril Fatface', cursive; font-size: 70px;}
.firstSlid { background:#000; display: inline-block; padding: 4px;}
.firstSlid span {border:dashed 1px #d71312; padding:5px 10px; color: #d71312; display: block; font-size: 20px;}

.bannerCap2 {position: absolute; top: 30%; text-align: left;}
.bannerCap2 h2 {font-family: 'Abril Fatface', cursive; font-size: 70px; margin-bottom: 30px;}
.secondSlid {background:#d71312; padding: 10px 20px; color: #fff; font-size: 22px; font-weight: 600;}

.bannerCap3 {position: absolute; top: 30%; text-align: left;}
.bannerCap3 h2 {font-family: 'Abril Fatface', cursive; font-size: 70px; margin-bottom: 30px;}
.thirdSlid {background:#d71312; padding: 9px 18px; color: #fff; font-size: 22px; font-weight: 600; border-radius: 20px; line-height: 30px;}

.bannerCap4 {position: absolute; top: 30%; text-align: left;}
.bannerCap4 h2 {font-family: 'Abril Fatface', cursive; font-size: 70px; margin-bottom: 30px;}
.fourthSlid {background:#fff; padding: 9px 18px; color: #ff0095; font-size: 22px; font-weight: 600; border-radius: 20px; line-height: 30px;}
.fourthSlid:hover {color:#000;}

.bannerCap5 {position: absolute; top: 30%;}
.bannerCap5 h2 {font-family: 'Abril Fatface', cursive; font-size: 70px; margin-bottom: 30px;}
.fifthSlid {background:#fff; padding: 9px 18px; color: #3a8200; font-size: 22px; font-weight: 600; border-radius: 20px; line-height: 30px;}
.fifthSlid:hover {background:#3a8200; color: #fff;}
.fifthSlid_1 {background:#005ebe; padding: 9px 18px; color: #fff; font-size: 22px; font-weight: 600; border-radius: 20px; line-height: 30px;}
.fifthSlid_1:hover {background:#fff; color: #005ebe;}

.sections {margin:30px auto;}
.sections h1 {font-size:30px; font-weight: 700; margin-bottom: 20px;}
.sections .box {margin:10px auto;}
.sections img {width:100%; box-shadow: 0px 0px 5px rgba(0,0,0,0.3);}
.aboutCard {margin:100px auto 0px auto;}
.aboutCard h1 {margin-top:0px;}
.aboutCard img {width:100%;}

.howtouse {margin:100px auto 0px auto;}
.howtouse h1 {margin-top:0px;}
.howtouse img {width:100%;}

.contactus {margin:5px auto 0px auto;}

.logoBox {border:solid 1px #d71312; text-align: center; padding: 20px 20px 50px 20px; margin-bottom: 20px; position: relative; border-radius: 10px;}
.logoBox img {width:auto; box-shadow: 0px 0px 0px;}
.logoBox h6 {margin:15px 0 5px 0; font-weight: 600; font-size:14px;}
.logoBox p {font-size:12px; text-transform: uppercase;}
.discount a {position:absolute; bottom: 0px; left: 0px; width: 100%; background: #000; color: #d71312; padding:10px 2px; font-size: 14px; border-radius: 10px;}
.discount a:hover {background: #d71312; color: #fff;}
.fullAds {width: 100%; margin-bottom: 30px;}
.fullAds img {width:100%;}
.fullWidth img {width:100%;}
.makeOver {background:#f2f1f7;}
.makeOverText {position:relative; min-height: 350px;}
.makeOverText div {position:absolute; top:15%; left: 2%; right:2%; display: block; z-index: 99;}
.makeOverText div img { width: 250px; margin-bottom:30px;}
.makeOverText div a {background:#ec268f; padding:10px 20px; color:#fff;}
.makeOverText div a:hover {background:#000; color:#ec268f;}
.makeOverText h4 {font-family: 'Abril Fatface', cursive; font-size: 40px; margin-bottom: 20px;}
.footerRigt {text-align:right; color: #fff;}
.modal-body {padding-top:25px;}
.modal-body img {width:80px;}
.modal-body h6 {color:#d71312; font-size: 20px; margin-top: 20px;}
.modal-body ul {margin:0px; padding:0 0 0 20px; font-size: 14px;}
.modal-body a {font-size:14px; color: #999;}
.modal-body p {margin:15px 0;}
.modal-body a {background:#d71312; color: #fff; padding: 10px 20px; margin-top: 15px; display: block; text-align: center; border-radius: 3px;}
.options {background:#f7ffbc; border-radius: 30px;}
.close { position: absolute; right:20px; top:20px; z-index: 999;}
.terms {margin:30px auto;}
.termsBtn {background:#db2827; color:#fff; border: none; padding:10px 20px; border-radius: 10px;}
.terms .collapse h3{padding:20px 0 0 0;}

.salon {background:url(../images/Api-Ruche-Bg.jpg) left top no-repeat; background-size: cover; background-attachment: fixed; padding: 10% 0 10% 0; min-height: 450px;}
.salon h2 {margin: 0px;}
.salon h3 {font-size:50px;}
.salon img {width:200px;}
.salon a {color:#d71312;}
#tabs{ color: #000;}
#tabs .nav-tabs {border:none;}
#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {color: #fff !important; background-color: #d71312;}
#tabs .nav-tabs .nav-link {border: 1px solid transparent; border-radius: 10px; color: #000; font-size: 17px; padding: 6px 8px; font-family: 'Roboto Condensed', sans-serif;}
.tab-content {margin:0px 0 50px 0;}


#topMenu {background-color:#fff;  overflow: auto;}
#box {background-color:#fff; position:relative; padding:5px; width:100%;}
.scroller {color:#ffffff; width:40px; text-align:center; cursor:pointer; display:none; padding:5px; margin-top:5px;}
.scroller-right{float:right;}
.scroller-left {float:left;}
.wrapper {position:relative;  margin:0 auto;  overflow:hidden; padding:5px; height:50px;}
.list { position:absolute; left:0px;  top:0px; min-width:1920px; margin-left:12px; margin-top:0px;}
.item{padding:10px;	display:table-cell;  margin:1px;  position:relative;  text-align:center; cursor:grab; cursor:-webkit-grab; color:#efefef; order: 1px dotted #111; vertical-align:middle;}

.tab {float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; min-height: 300px;}
.tab button {display: block; background-color: inherit; color: black; padding: 15px 10px; width: 100%; border: none; outline: 5px; text-align: left; cursor: pointer; transition: 0.3s; font-size: 15px;}
.tab button:hover {background-color: #d71312; color: #fff; border: 1px solid transparent; border-radius: 10px;}
.tab button.active {border: 1px solid transparent; border-radius: 10px; color: #fff; background-color: #d71312;}
.tabcontent {float: left; padding: 0px 12px; border: 1px solid #ccc; width: 70%; border-left: none;  min-height: 300px;}
.tabcontent h3 {margin-top:20px;}

@media (min-width: 768px) { 
	.aboutCard h1 {margin-top:50px;}
	.howtouse h1 {margin-top:50px;}
	.makeOverText div {position:absolute; top:25%; left: 20%;}
	.logoBox img {width:auto; box-shadow: 0px 0px 0px;}
	.salon a {color:#fcac05;}
}

@media screen and (max-width: 480px) {
	
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
	
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

	
}