@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;
}
.banner{width:150px;  float:left; background:#ffe200; margin:0px 10px 0px 0px;}

div#envelope{
width:100%;    position: relative;
    z-index: 99999;
	margin-top:-225px;
}
h1{text-align:center;}	

form header {
  margin: 0; 
  text-align:center;
  font-family: 'roboto';
  }
  
form header div {
  font-size: 90%;
 }

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



 
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*/


/* 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) {

div#envelope{
    width:280px; margin:0px auto;
	} 
.banner{width:309px; padding:10px; float:left; background:#ffe200; margin:0px 10px 0px 0px;}	
div#responsive{
width:100%;
margin-left:3%;
}  

form header {
  margin: 0; 
  text-align:center;
 font-family: 'roboto';
  }
  
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:96%;
  padding:10px;
  border:none; margin:5px;  
}
.baanertest{ width:90%;text-align:justify;}
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]{

padding:5px 5px;
border-radius:5px;

margin-right:20%
}
.banner{width:100%; padding:10px; float:left; background:#ffe200; margin:0px 10px 0px 0px;}
}
@media screen and (max-device-width: 350px) {
body {
   margin:0;
   padding:0;
  font-family: 'roboto';
  
  }
div#envelope{
    width:100%;
	} 
	
div#responsive{
width:90%;

}  
.banner{width:285px; padding:10px; float:left; background:#ffe200; margin:0px 10px 0px 0px;}
form header {
  margin: 0; 
  text-align:center;
font-family: 'roboto';
  }
  
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]
 {

  padding: 10px;
  border:none;
 
}
 
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:auto;
padding:5px ;
border-radius:5px;
border:2px solid  #4697e4;
margin-right:10%; margin-top:5%;
}
.baanertest{ width:auto;text-align:center; font-size:13px;}
.submit{ margin-left:30%;}
}