@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 . */
     
  -moz-box-sizing: border-box; 
}

body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif;
  }
div#envelope{
	width:50%;
	margin: 10px 30% 10px 25%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	} 
	
form{
width:50%;
margin:0 29%;
max-width: 55%;
max-height: 33%;
margin-top: 100px;
padding: 1px;
}  

form header {
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
  padding: 5px;
  border-radius:5px;
  margin-left: -1px;
  padding-left: -10%;
  border:1px solid #7ac9b7;
}

input[type=password]{
margin-bottom: 20px;
margin-top: 10px;
  padding: 5px;
  border-radius:5px;
  border:1px solid #7ac9b7;
}

input[type=submit]
{
margin-bottom: 20px;
  width:30%;
  padding: 5px;
  border-radius:5px;
  /*margin-left: 61%;*/
  border:1px solid #4697e4;
  background-color:#fff;
}
textarea{
	width:100%;
	padding: 0px;
	margin-top: 10px;
    border:1px solid #7ac9b7;
	border-radius:5px; 
	margin-bottom: 20px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

.modal-header {
  padding-right: 100px;
  color:white;
}

 div#logo{
    float: right; 
    padding-top: 60px;
    margin: -15px 0 0 -18px;
	} 

 h3{color:white}
/* 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-width: 1059px) and (min-width : 755px) {
.modal-header {
  padding-right: 0px;
}

 div#logo{
display: none;
	} 

}

@media screen and (max-width: 756px){

@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.*/
    
  -moz-box-sizing: border-box; 
}

body {
   margin:0;
   padding:0;
  font-family: 'Droid Sans', sans-serif;
  
  }
div#envelope{
	width:50%;
	margin: 10px 30% 10px 25%;
	background-color:#f2f4fb;
	padding:10px 0;
	border:1px solid gray;
	border-radius:10px;
	}

div#imageModal{
display: inline-block;
	} 

form{
width:80%;
height:auto;
margin:0 5% 0 5%;
max-width: 90%;
margin-top: 140px;
}  

form header {
  text-align:center;
  font-family: 'Roboto Slab', serif;
  }
 

/* Makes responsive fields.Sets size and field alignment.*/
input[type=text]{
margin-bottom: 20px;
margin-top: 10px;
  width:100%;
  padding: 5px;
  border-radius:5px;
  border:1px solid #7ac9b7;
}

input[type=password]{
margin-bottom: 20px;
margin-top: 10px;
  width:100%;
  padding: 5px;
  border-radius:5px;
  border:1px solid #7ac9b7;
}

input[type=submit]
{
margin-bottom: 20px;
  width:30%;
  padding: 5px;
  border-radius:5px;
  border:1px solid #7ac9b7;
  margin-left: 61%;
  background-color:rgb(164, 230, 219);
}
textarea{
	width:100%;
	padding: 15px;
	margin-top: 10px;
    border:1px solid #7ac9b7;
	border-radius:5px; 
	margin-bottom: 20px;
	resize:none;
  }
 
input[type=text]:focus,
textarea:focus {
  border-color: #4697e4;
}

img { 
max-width: 310px;
} 

.modal-header {
  padding-right: 0px;
  padding-top: 0px;
  color: #0088cc;
}

div#logo{
        display: none;
        visibility: hidden;
    max-width: 3px;
    max-height: 1px;
    width: 1px;
    padding: 0px;
    /*position:absolute;float: right; margin: -15px 0 0 -18px;*/
}

div#form{
    width: 380px;
    /*position:absolute;float: right; margin: -15px 0 0 -18px;*/
}

div#imageModal{
    display: none;
    visibility: hidden;
}
 
 h3{color: #08c}  

}