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


div#envelope{
	width: 80%;
	margin: 10px 10% 10px 10%;
	background-color: #Fff;
	padding: 0;
	border: 1px solid gray;
	border-radius: 10px;
	} 
	
div#responsive{
width:100%;
/*margin-left:5%;*/
}  

form header {
  margin: 0; 
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }
  
form header div {
  font-size: 90%;
 }

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text],
input[type=email],
input[type=url],
input[type=tel]
 {
	width: 100%;
	background:#f2f8ff;
	    padding: 10px;
    border-radius: 6px;
    border: 3px solid #ccc;
	    font-family: 'Open Sans', sans-serif;
		font-size:0.8em;
		-webkit-appearance: none;
-webkit-border-radius: 0;
}
textarea{
	width: 100%;
	background:#f2f8ff;
	    padding: 10px;
    border-radius: 6px;
    border: 3px solid #ccc;
	    font-family: 'Open Sans', sans-serif;
		font-size:0.8em;
		-webkit-appearance: none;
-webkit-border-radius: 0;
  }


/*div{
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 3px;
	padding-left: 0;
}*/
 
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=tel]:focus,
textarea:focus {
  border-color: #4697e4;
}
label{
margin-left:0;
}

/* Sets form button size*/
input[type=submit]{
	border-radius: 50px;
	border: 2px solid #3a8ce0;
	background:#3a8ce0;
	color:#fff;
	padding-top: 12px;
    padding-right: 30px;
    padding-bottom: 12px;
    padding-left: 30px;
	    font-family: lemonde-sans, sans-serif;
		font-size:0.9em;
		-webkit-transition: all .30s ease-in-out;
    -moz-transition: all .30s ease-in-out;
    -ms-transition: all .30s ease-in-out;
    -o-transition: all .30s ease-in-out;
    transition: all .30s ease-in-out;
	-webkit-appearance: none;
-webkit-border-radius: 0;
}
input[type=submit]:hover{
	border: 2px solid #587593;
	background:#587593;
}

/* By using @ media form can have different layout for screen, mobile phone, tablet.*/

/* Sets the form layout for mobile phone, tablet*/
@media screen and (max-device-width: 600px) {
body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif;
  
  }
div#envelope{
width:50%;
	margin: 10px 30% 10px 25%;
	background-color:#f2f4fb;
	padding:0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
div#responsive{
width:100%;
/*margin-left:25%;*/
}  

form header {
  margin: 0; 
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }
  
form header div {
  font-size: 90%;
 }

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text],
input[type=email],
input[type=url],
input[type=tel]
 {
width:100%;
  padding: 15px;
  border-radius:5px;
  border:1px solid #7ac9b7;
}
textarea{
	width:100%;
    border:1px solid #7ac9b7;
	border-radius:5px 
  }


div{
  /*padding:10px 0;*/
}
 
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=tel]:focus,
textarea:focus {

  border-color: #4697e4;
}
label{
margin-left:0;
}


input[type=submit]{
width:160px;
padding:20px 2px;
border-radius:5px;
border:2px solid  #4697e4;
margin-right:10%
}
}
select {width:100%;
height:50px;
border:1px solid #7ac9b7;
font-size:16px;}