body {
	background-image: url(../images/bg.jpg);
	background-size: cover;
	background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: 100%;
	background-color: #f5f5f3;
	position: relative;
}

.container{
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 5px;
	padding-top: 30px;
}

.container-fluid a:hover{
    text-decoration: none; 
    color: #4444;
}

.container-fluid a:link{
    text-decoration: none; 
    font-color: #2222;
}

.container-fluid a:visited{
    text-decoration: none; 
    font-color: #2222;
}


/*TYPESTYLES*/

body{
	font-family: 'Ek Mukta', sans-serif; weight: 200; line-height: 140%;
}

footer{
	font-family: 'Ek Mukta', sans-serif; weight: 400; line-height: 120%; text-align: center;
}

h1, h2, h3 {
	font-family: 'Ek Mukta', sans-serif; 
	font-weight: 500; 
	letter-spacing: 1.5px;
	text-align: center;
	text-decoration: none;
	}

h1 {
	font-size: 1.6em;
	text-decoration: none;
 	text-transform: uppercase;
 	  color: #000000;
 	}
 	 
h2 {
  font-size: 1.5em;
  text-transform: uppercase;
  color: #baa591;
}
h3 {
  font-size: 1.3em;
  color: #cc3300;
}
p {
	font-size: 1.2em;
	color: #000000;
	padding-right: 15%;
	padding-left: 15%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
}

h2 small {
	color: #baa591;
}

hr {
	width: 50px;
	margin-left: auto;
	margin-right: auto;
	height: 1.5px;
	background-color:#000000;
	color:#000000;
	border: 0 none;
}

/*=== LINKS ===*/

a {
color: #000000;
-webkit-transition: color 0.3s;
transition: color 0.3s;
text-decoration: none;
}
a:link {
color: #baa591;
text-decoration: none;
}
a:visited {
color: #000000;
}
a:hover {
color: #cc3300;
text-decoration: none;
}
div#my_container a {
color: #CCCCCC;
}
p.my_class a {
color: #CCCCCC;
}
ul.my_list a {
color: #CCCCCC;
}


/*=== NAVBAR ===*/


#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(0, 0, 0, 1);
	display: inline-table;	
}
#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    letter-spacing: 1px;
    background-color: rgba(255, 255, 255, 1);
    border-width: 0px;
    border-radius: 0px;
    padding-right: 20px;
}

#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(0, 0, 0, 1);
    background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: #baa591;
    background-color: #f5f5f3;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: #baa591;
    background-color: #f5f5f3;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: transparent;
    background-color: #f5f5f3;
    margin-top: 20px;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #f5f5f3;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #000000;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #baa591;
}
.transparentbar {
		background-repeat:no-repeat;
        cursor:pointer;
        outline:none;
        border:none;
        box-shadow:none; 
        background-image: none;
        background-color: #fff;
        opacity: 0.8;
        border-color: transparent;
        width: auto;
        letter-spacing: 1px;
}

article {
	padding-top: 50px;
	padding-bottom: 50px;
}

.first-para a{
	padding-top: 450px;
	padding-bottom: 150px;	
}

.following-para a{
	padding-top: 150px;
	padding-bottom: 150px;	
}






/*=== CAROUSEL ===*/


.carousel{
	width: 100%;
	height: 100%;
	padding-top: 300px;
	width: center;
	overflow: hidden;
}

.carousel-inner {
	width: 100%;
	height: 100%;
	overflow: hidden;
}


/*=== JUMBOTRON ===*/


.jumbotron{
	margin-top: 0px;
	padding-top: 300px;
	padding-bottom: 20px;
	background-size: cover;
	background-position: center 80px; 
	color: #fff;
	margin-bottom: 0;
	padding-right: 10%;
	padding-left: 10%;
}
.jumbotron-salon{
	background-image: url(../images/slide4.jpg);
}
.jumbotron-services{
	background-image: url(../images/slide5.jpg);
}
.jumbotron-contact{
	background-image: url(../images/slide9.jpg);
}
.jumbotron p{
 	 color: #fff;
}

.jumbotron h1{
 	 color: #fff;
}


/*=== FOOTER ===*/

footer {
        position: relative;
        bottom: 0;
        width: 100%;     
        height: auto;
        background-color: #f5f5f3;
        opacity: .8;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: .8em;
        text-align: center;
        text-decoration: none;
        }

#index{
        position: relative;
        bottom: 0;
        width: auto;     
        height: auto;
        background-color: transparent;
        opacity: .8;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: .8em;
        text-align: center;
        text-decoration: none;
        }



/*=== TABLET XSM ===*/
@media screen and (min-width: 320px) {

	.carousel {
		padding-top: 40px;
	}

	.carousel.slide{
    	max-width: 350px; //the largest you want the image to stretch
    	min-width: 320px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 650px;
   		left: 50%;
   		margin-left: -300px;
	}

	.jumbotron{
		margin-top: 0px;
		padding-top: 300px;
		padding-bottom: 20px;
		background-size: cover;
		background-position: center 80px; 
	}

}

/*=== IPHONE6 ===*/
@media screen and (min-width: 360px) {

	.carousel {
		padding-top: 80px;
	}

	.carousel.slide{
    	max-width: 550px; //the largest you want the image to stretch
    	min-width: 400px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 750px;
   		left: 50%;
   		margin-left: -370px;
	}
	.jumbotron-contact{
		margin-top: 0px;
		padding-top: 300px;
		padding-bottom: 20px;
		background-size: cover;
		background-position: center 20px; 
	}
}
/*=== IPHONE6S ===*/
@media screen and (min-width: 412px) {

	.carousel {
		padding-top: 100px;
	}

	.carousel.slide{
    	max-width: 900px; //the largest you want the image to stretch
    	min-width: 700px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 900px;
   		left: 50%;
   		margin-left: -450px;
	}

	.jumbotron{
		margin-top: 0px;
		padding-top: 350px;
		padding-bottom: 20px;
		background-size: cover;
		background-position: center 80px; 
	}

}

/*=== MY MEDIA QUERY BETWEEN XS&XM ===*/
@media screen and (min-width: 600px) {
	
	.carousel.slide{
    	max-width: 1200px; //the largest you want the image to stretch
    	min-width: 1000px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 1200px;
   		left: 50%;
   		margin-left: -600px;
	}
	.carousel {
		padding-top: 120px;
	}

	.jumbotron{
		margin-top: 0px;
		padding-top: 350px;
		padding-bottom: 20px;
		background-size: cover;
		background-position: center 130px; 
	}
hr {
	width: 60px;
	height: 2.2px;
	}
}

/*=== TABLET SM APPLE IPAD===*/
@media screen and (min-width: 768px) {
	
	.navbar-nav {
	    margin-top: 5%;
	  }

	.carousel {
		padding-top: 90px;
	}
	.carousel.slide{
    	max-width: 1200px; //the largest you want the image to stretch
    	min-width: 800px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 1500px;
   		left: 50%;
   		margin-left: -700px;
	}

	.jumbotron h1 {
	    font-size: 3em;
	    color: #00ff4e;
	}
	.header-container{
	    width:100%;
	    height:450px;
	    position: relative;
	}

	.jumbotron{
		margin-top: 0px;
		padding-top: 500px;
		padding-bottom: 20px;
		background-size: cover;
		background-position: center 90px; 
	}

	.jumbotron-contact{
	background-position: center 30px; 
	}
hr {
	width: 70px;
	height: 2.2px;
	}
}

/*=== DESKTOP MD ===*/
@media screen and (min-width: 992px) {
		h1 {
	font-size: 1.8em;
	letter-spacing: 3px;
 	}
 	 
h2 {
  	font-size: 1.8em;
  	letter-spacing: 3px;
	}
h3 {
  	font-size: 1.7em;
  	letter-spacing: 3px;
	}

	p {
	font-size: 1.6em;
	color: #000000;
	padding-right: 15%;
	padding-left: 15%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
	}
hr {
	width: 70px;
	height: 2.2px;
	}

}
/*=== LARGE DESKTOP LG ===*/
@media screen and (min-width: 1200px) {
	
	.carousel {
		padding-top: 100px;
	}
	.carousel.slide{
    	max-width: 1500px; //the largest you want the image to stretch
    	min-width: 1200px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width: 1500px;
   		left: 50%;
   		margin-left: -750px;
	}
		h1 {
	font-size: 1.8em;
	letter-spacing: 3px;
 	}
 	 
h2 {
  	font-size: 1.8em;
  	letter-spacing: 3px;
	}
h3 {
  	font-size: 1.7em;
  	letter-spacing: 3px;
	}

	p {
	font-size: 1.6em;
	color: #000000;
	padding-right: 15%;
	padding-left: 15%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
	}
hr {
	width: 80px;
	height: 2.5px;
	}
}

/*=== X-LARGE DESKTOP LG ===*/
@media screen and (min-width: 1280px) {
	
	.carousel {
		padding-top: 110px;
	}
	.carousel.slide{
    	max-width: 2000px; //the largest you want the image to stretch
    	min-width: 1300px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width:1500px;
   		left: 50%;
   		margin-left: -700px;
	}

	#index{
    position: relative;
    }
    	h1 {
	font-size: 1.9em;
	letter-spacing: 3px;
 	}
 	 
h2 {
  	font-size: 1.9em;
  	letter-spacing: 3px;
	}
h3 {
  	font-size: 1.7em;
  	letter-spacing: 3px;
	}

	p {
	font-size: 1.6em;
	color: #000000;
	padding-right: 15%;
	padding-left: 15%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
	}
hr {
	width: 100px;
	height: 2.5px;
	}
}

/*=== X-LARGE LAPTOP ===*/
@media screen and (min-width: 1440px) {
	
	.carousel {
		padding-top: 110px;
	}
	.carousel.slide{
    	max-width: 2000px; //the largest you want the image to stretch
    	min-width: 1300px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width:1500px;
   		left: 50%;
   		margin-left: -750px;
	}

	.following-para a{
		padding-top: 200px;
		padding-bottom: 150px;	
	}
	h1 {
	font-size: 1.9em;
	letter-spacing: 3px;
 	}
 	 
h2 {
  	font-size: 1.9em;
  	letter-spacing: 3px;
	}
h3 {
  	font-size: 1.8em;
  	letter-spacing: 3px;
	}

p {
	font-size: 1.7em;
	color: #000000;
	padding-right: 15%;
	padding-left: 15%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
	letter-spacing: .5px;
	}
hr {
	width: 80px;
	height: 1px;
	}
}

/*=== HUGE DESKTOP ===*/
@media screen and (min-width: 1496px) {
	
	.carousel {
		padding-top: 110px;
	}
	.carousel.slide{
    	max-width: 2000px; //the largest you want the image to stretch
    	min-width: 1300px; //the "container" width 
    	overflow: hidden;
	}
	.carousel-inner{
   		width:2000px;
   		left: 50%;
   		margin-left: -950px;
	}

	.following-para a{
		padding-top: 200px;
		padding-bottom: 150px;	
	}
h1 {
	font-size: 1.9em;
	letter-spacing: 3px;
 	}
 	 
h2 {
  	font-size: 1.9em;
  	letter-spacing: 3px;
	}
h3 {
  	font-size: 1.8em;
  	letter-spacing: 3px;
	}

p {
	font-size: 1.7em;
	weight: 100;
	color: #000000;
	padding-right: 20%;
	padding-left: 20%;
 	vertical-align: center;
	text-align: center;
	line-height: 160%;
	}

hr {
	width: 100px;
	height: 3px;
	}
}