/* Contact Form
=================== */

    .form-container {
      padding: 5%;
      background: #404040;            
      width: 100%;
	  margin: 1em 0 0 0;
	  border-radius: 0px;
		
    }

label {
	
	color:white;
}

.button-primarys {
	
	background-color:firebrick;
	color: white;
	border: none;
	margin: .5em 0 0 0 ;
	padding: 0 1em 0 1em;
}



h1, p 
{
  text-align: center;
	color: white;
}

input, textarea , button
{
  width: 100%;
}    
textarea
{
  height: 200px;
}



.form-container h1{
	color:white;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 700;
	font-size: 2.4em;
	text-align: center;
	line-height: 1em;
	
}

#contact{ 
  background-color: #404040; 
  padding: 15px;
	
}
#contact label{
  display: block;
  margin-top: 10px;
  font-weight: bold;
  color:white;
	font-size:1.2em;
	margin-bottom: .2em;
}
#contact input, #contact textarea{
  width: 100%;
  box-sizing: border-box;
	margin-bottom: 1em;
}
#contact input[type=text], #contact input[type=email]{
  padding: 10px;

}

#contact textarea{
	min-height:200px;
	height: auto;
	
}
#contact input[type=submit]{
  background-color: firebrick;
  border: 0;
  margin-top: 10px;
  padding: 10px;
  color: white;
	font-size: 1em;
	font-weight: 700;
	border-radius: 5px;
}

#contact input[type=submit]:hover{
	background-color: gray;
	
}



@media (min-width: 37rem) {

	.form-container {           
      width: 100%;
	  border-radius: 0px;
		
    }

	
	#contact{ 
  background-color: #404040; 
  padding: 15px;
	border-radius: 10px;
}
	

	
	
}

@media (min-width: 60rem) {


	
		    .form-container {
      padding: 5%;
      background: #404040;            
      width: 40em;
	  margin: 1em auto 2em auto;
	  border-radius: 10px;
		
    }
	
	
}