@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
* {
    /* With these codes padding and border does not increase it's width and gives intuitive style.*/
  
	-webkit-box-sizing: border-box;   
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.headLogo { 
	-webkit-box-sizing: !important;     
	-moz-box-sizing: !important;
	box-sizing: !important;
}

div#envelope{
	width: 55%;
	margin: 10px 30% 10px 25%;
	padding:10px 0;
	border: 2px solid gray;
	border-radius:10px;
} 	
form{
	width:72%;
	margin:4% 14%;
}

label {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:small;
    font-size: 12px;
	letter-spacing:2px;
	color: #330;
}
.salons {
	font-family:Verdana;
	font-size:16px;
	letter-spacing:0px;
	line-height:26px;
}
select {
    margin-bottom: 20px;
    margin-top: 4px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
option {
    font-size: 14px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height:30px;
	padding-bottom:6px;
	padding-top:6px;
}


/* Makes responsive fields.Sets size and field alignment.*/

input {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.when1, .when2, .when3 {
    display: block;   
}
.when1 {
    float: left;
    width: 22%;
}
.when1S {
    float: left;
    width: 25%;
}
.when2 {
    float: left;
    width: 36%;
}
.when3 {
    float: right;
    width: 36%;
}

.whenBox {
    inline-block;
    width: 100%;
}

input[type=text]{
	margin-bottom: 20px;
	margin-top: 4px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #996;
}
input[type=email]{
	margin-bottom: 20px;
	margin-top: 4px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #996;
}
input[type=tel]{
	margin-bottom: 20px;
	margin-top: 4px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #996;
}
input[type=date]{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 20px;
	margin-top: 4px;
	width:100%;
	padding: 6px;
	border-radius:5px;
	border:1px solid #996;
}
input[type=time]{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 20px;
	margin-top: 4px;
	width:100%;
	padding: 6px;
	border-radius:5px;
	border:1px solid #996;
}
input[type=submit]
{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin-bottom: 20px;
	width:100%;
	padding: 10px;
	border-radius:5px;
	border:1px solid #996;
	background-color: #4180C5;
	color: aliceblue;
	font-size:15px;
	cursor:pointer;
}
#submit:hover
{
 background-color: #996;
}
textarea{
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	width:100%;
	padding: 10px;
	margin-top: 4px;
    border:1px solid #996;
	border-radius:5px; 
	margin-bottom: 20px;
	resize:none;
  } 
input[type=text]:focus,textarea:focus {
	border-color: #4697e4;
}

@media only screen and (width: 1024px) {
    
    form{
	width:80%;
	margin:4% 14%;
}
}

@media screen and (max-width: 600px) {
	
	form{
	width:88%;
	margin:4% 6%;
}
.when1, .when2, .when3 {
    width: 100%;
}

}