/*Author: Alireza Farjad  Date: 7/16/2016*/

/*Style rule for logo*/
logo {
	padding: 0;
	margin: 0;
	float: left;
	background-color: #000000;
}

/*Styles the properties of background*/
body {
	background-color: #000000;
	background-image: url("leather.jpg");
	background-attachment: fixed;
	}

/*Style set rule for main section of mobile view */
main {
	display: block;
	margin-top: 0.5em;
	padding: 1em;
	border-radius: 2em 2em 2em 2em;
	overflow: auto;
	opacity: 0.8;
	font-family: patua-one;
	font-style: normal;
	font-weight: 400;
	color: #FFFFFF;
	text-decoration: none;
	}

h1 	{
	color: #9D7E32;
}
.permwrapper {
	margin-top: 10%;
	display: block;
	background-color: #000000;
	opacity: 1;
}


/*Styles the properties of the text and styles within the main section*/
	
#container {
	width: 100%;
	margin: 0 auto;
	font-family: Georgia, "Times new roman", serif;
		}
		
#wrapper {
	margin-top: 4em;
	background-color: #000000;
	opacity: 0.8;
}
/*Style rule set the background color for paragraph element*/
P {
	color: #FFFFFF;
	}
label {
	color: #FFFFFF;
	}
	
legend {
	color: #FFFFFF;
	}	
	
/* Style rule for form color*/	
form {
	color: #667292;
	width: 100%;
	}

/* Style rule for table properties*/	
table, th, td {
	margin: auto;
	border: solid  #667292;
	border-collapse: collapse;
	color: #667292;
}

/*Style for mobile layout*/
	
/*Style for the header specifies margins, background-color, paddings, and other details*/
header {
	text-align: center;
	margin-top: 0.2em;
	padding: 1px;
	border-radius: 0.5em;
	color: #000000;
	}

/* Style for navigation links specifies text properties */
nav {
	font-family: Georgia, "Times new roman", serif;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	color: #000000;
		}

/* Style specifies padding and margins for unordered list */
nav ul {
	padding: 1%;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	color: #000000;
}

/* Style for "nav li" specifies the background-color, rounded corners, removes bullet style, and applies margins and padding for list item within the navigation */
nav li {
	background-color: #000000;
	border-radius: 2em;
	list-style-type: none;
	margin: 0.3em;
	padding: 0.4em;
	}
nav li a {
	color: #FFFFFF;
	text-decoration: none;
	margin-left: 0.3%;
	margin-right: auto;
}
h3 {
	color: #9D7E32;
}
/* Style for the footer*/
footer {
	text-align: center;
	display: block;
	font-size:0.7em;
	color: #667292;
	margin-top: 2%;
	padding-top: 10%;
	}
	
footer a{
	color: #9D7E32;
}
	
/*Style for fluid images*/
img {
	max-width: 100%;
	}

/*Style rule for hpic class photos */	
.hpic {
	display: block;
	margin: auto;
}

/* Style displays the mobile class */
.mobile {
	display: inline;
	}
/* Styles hide the desktop class */
.desktop {
	display: none;
}
.h3 {
	color: #9D7E32;
}
/* Style rule for Form Input and Label */
input, textarea {
	display: block;
	margin-bottom: 1em;
}

form text {
	color: #FFFFFF;
}

/* Style rule for buttons*/
.btn {
	background-color: #9D7E32;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
	cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
	}
.btn:hover {
   background-color: #FFFFFF;
   color:#9D7E32;
}

aside.menu ul li a {
	text-decoration: none;
	color: #9D7E32;
}

	
.booknowtop {
	background-color: #9D7E32;
	width: 100%;
	float: right;
	white-space: nowrap;
	display: inline;
	text-align: center;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	border-radius: 10px;
	}	

.booknowtop a {
	white-space: nowrap;
	text-decoration: none;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	font-family: alex-brush;
	color: #FFFFFF;
}	

#map  {
        width: 100%;
        height: 400px;
		margin-top: 1.5em;
		opacity: 0.9;
     }
#last #getintouch #booknow2 {
	background-color: #9D7E32;
	color: #FFFFFF;
	font-family: alex-brush;
	font-style: normal;
	font-weight: 400;
	font-size: 48px;
	text-decoration: none;
	padding-left: 30px;
	padding-right: 30px;
	border-radius: 10px;
	display: block;
	text-align: center;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}
#last #getintouch #booknow2:hover{
	background-color: #FFFFFF;
	color:#9D7E32;
}
#getintouch p .phone {
	text-decoration: none;
	color: #FFFFFF;
}
#getintouch p .email {
	color: #FFFFFF;
	text-decoration: none;
}

.last {
	display: block;
	background-color: #000000;
	opacity: 0.7;
	overflow: auto;
	 }

.para{
	background-color: #FFFFFF;
	opacity: 0.8;
}


.policy p {
	color: #000000;
	margin: 2%;
}
#policy h1 {
	text-align: center;
	color:#9D7E32;
	}

.cert {
	opacity: 1;
	margin: 1em 0 1em 0;
	}	

.perm {
	text-align: center;
	padding-top: 3%;
}
.permpic {
	float: right;
	max-width: 40%;
	margin-left: 2%;
}
.permp {
	margin-bottom: 0px;
	margin-top: 0px;
}

#hairwrapper {
	background-color: #000000;
}	

#hairwrapper h1 {
	margin: 10px;
	padding-top: 10px;
}

#space {
	height: 70px;
}

#salonwrapper {
	background-color: #000000;
}
/* Media query for tablet viewport target screen size with a minimum width of 481pm */
@media only screen and (min-width: 480px) {

/*Style specifies the nav property for tablet view*/
nav {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	margin-left: auto;
	margin-right: auto;
	/*white-space: nowrap;*/
}

	
/* Style specifies a horizontal display for navigation links */
nav li {
	font-size: 0.77em;
	display: inline;
	/* [disabled]margin-left: 0.5%; */
	/* [disabled]margin-right: 0.5%; */
	margin-bottom: 1%;
	width: 20%;
	border-radius: 1em;
	/*white-space: nowrap;*/
	}
	
/* Style specifies to hide the mobile class */
.mobile {
	display: none;
}

/* Style specifies to display the desktop class */
.desktop {
	display: inline;
	}

/*Style rule for heading*/
h2 {
	text-align: center;
	color: #9D7E32;
}

/* Style for paragraph element within the main article element */
main article p {
	color: #FFFFFF;
	margin-top: 5%;
	margin-right: 5%;
	margin-left: 5%;
	margin-bottom: 5%;
	padding-top: 2%;
	padding-right: 2%;
	padding-left: 2%;
	padding-bottom: 2%;
	text-align: left;
	}

/*style for article element */
article.home {
	float: left;
	background-color: #000000;
	width: 31%;
	margin-top: 0.5%;
	margin-left: 1%;
	margin-right: 1%;
	padding-bottom: 0.5%;
	text-align: center;
	}
/* Style for aside element */
aside.home {
	font-style: italic;
	font-size: smaller;
	background-color: #9D7E32;
	border-radius: 0 3em 0em 3em;
	box-shadow: 0.2em 0.2em 0.2em 0.2em;
	padding: 1.5em;
	margin: 1em;
}
/* Style rule for label elements */
label {
	color: #FFFFFF;
	float: left;
	padding-right: 0.5em;
	text-align: right;
	width: 10em;
	}
	
/* Style rule for buttons*/
.btn {
	background-color: #9D7E32;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}


#container #last #book {
	display: inline-block;
	text-align: center;
	font-size: large;
	text-shadow: 0px 0px;
	overflow-x: auto;
	margin-top: 15%;
	margin-right: 3%;
	margin-bottom: 3%;
	margin-left: 30%;
	}



.last {
	display: block;
	background-color: #000000;
	opacity: 0.8;
	overflow: auto;
	 }
.last aside {
	width: 33%;
	float: left;
	opacity: 0.8;
}

.para {
	height: 506px;
	margin: 2% 0 2% 0;
}

.para section h1 {
	color: #9D7E32;
	text-align: center;
	margin-top: 3%;
	padding: 3% 0 2% 0;
}
.para section p {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 20px;
	margin: 2% 2% 0 2%;
	padding: 2% 0 2% 0;
}
.facebook {
	float: right;
}

section.hair1 img {
		float: left;
		margin-right: 2em;
}

section.hair2 img {
		float: left;
		margin-right: 2em;
}

section.hair3 img {
		float: left;
		margin-right: 2em;
}

section.hair1 {
	height: 400px;
}

section.hair2 {
	height: 400px;
}
section.hair3 {
	height: 410px;
	}

section.sal1 {
	height: 250px;
}

section.sal2 {
	height: 250px;
}

section.sal3 {
	height: 250px;
}

section.sal1 img {
	float: left;
	margin-right: 2em;
}

section.sal2 img {
	float: left;
	margin-right: 2em;
	}

section.sal3 img {
	float: left;
	margin-right: 2em;
	}
}
/*Media query for desktop viewport targets screens with a minimum width of 769px */
@media only screen and (min-width: 850px) {
	
/* Style specifies a width for container */
#container {
	width: 80%;
	}

/*Style rule for menu bar */
nav {
	margin-top: 0;
	padding-top: 10px;
	padding-bottom: 10px;
	opacity: 0.9;
}

/* Style specifies margin and padding for the ul within the nav */
nav ul {
	/*margin: 1em;*/
	padding-bottom: 0.44em;
	padding-top: 0.44em;
	white-space: nowrap;
	background-color: #000000;
	display: inline;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-left: 0px;
	padding-right: 0px;
	opacity: 0.9;
	border-top-color: #9D7E32;
	border-top-style: solid;
	border-bottom: thin solid #9D7E32;
		}
	
/*Style rule for pseduo-classes */
nav li a:link {
	color: #FFFFFF;
}

/* Psudo codes for menu bar */
nav li a:visited {
	background-color: #00C8FF;
}

nav li:hover {
	background-color: #CEB067;
	background-image: -webkit-linear-gradient(270deg,rgba(157,126,50,1.00) 0%,rgba(208,179,108,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(157,126,50,1.00) 0%,rgba(208,179,108,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(157,126,50,1.00) 0%,rgba(208,179,108,1.00) 100%);
	border-radius: 4px;
	background-image: linear-gradient(180deg,rgba(157,126,50,1.00) 0%,rgba(208,179,108,1.00) 100%);
	}

nav li:active {
	background-color: #0059FF;
}

/*Style rule for article element */	
article {
	padding-top: 0%;
	margin-top: 5%;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: large;
	display: block;
}
main .desktop article {
	/* [disabled]width: auto; */
	/* [disabled]height: auto; */
	display: block;
}


/*Style rule for h3 heading */
h3 {
	margin-top:5em;
}

/* Style for "nav li" specifies the background-color, rounded corners, removes bullet style, and applies margins and padding for list item within the navigation */
nav li {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	font-size: 1em;
	border-radius: 0;
	margin-left: -2px;
	margin-right: -2px;
	text-align: center;
		}
ul li a {
	font-size: 90%;
	text-align: center;
	margin-left: 1px;
	margin-right: 1px;

}
header a .logo {
	margin-right: -5px;
	padding-right: 0%;
	padding-top: 0%;
	padding-bottom: 0%;
	padding-left: 0%;
}
.ws_images {
	margin-top: 2%;
	margin-bottom: 2%;
	padding-top: 1%;
	padding-bottom: 1%;
	opacity: 1;
}
.booknowtop {
	float: right;
	width: 26%;
	border-radius: 10px;
	padding: 0 10px 0 10px;
	white-space: nowrap;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	font-family: alex-brush;
	color: #FFFFFF;
	cursor: pointer;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	}
	
.parallax {
	display: block;
	overflow: hidden;
	padding-top: 200px;
	background-image: url("2.jpg");
	background-attachment: fixed;
    	background-position: center;
   	background-repeat: no-repeat;
    	background-size: cover;
   
}

.parallax_contact {
	display: block;
	overflow: hidden;
	padding-top: 200px;
	background-image: url("salon1.jpg");
	background-attachment: fixed;
    	background-position: center;
   	 background-repeat: no-repeat;
   	background-size: cover;
}

.parallax_perm {
	display: block;
	overflow: hidden;
	padding-top: 200px;
	background-image: url("0016.jpg");
	background-attachment: fixed;
   	 background-position: center;
   	 background-repeat: no-repeat;
  	 background-size: cover;
}
.parallax_hair {
	display: block;
	overflow: hidden;
	padding-top: 200px;
	background-image: url("h4.jpe");
	background-attachment: fixed;
   	 background-position: center;
    	background-repeat: no-repeat;
  	 background-size: cover;
}

.parallax_salon {
	display: block;
	overflow: hidden;
	padding-top: 200px;
	background-image: url("obagi.jpg");
	background-attachment: fixed;
   	 background-position: center;
    	background-repeat: no-repeat;
   	background-size: cover;
}

.background #container #para {
	overflow-x: auto;
}
#container #para #policy {
	display: block;
}


}