/*
	Responsive.css
	
*/

@media screen and (min-width: 320px) and (max-width: 479px) {
	#header{
		width:100%;
		border: solid 0px red;
		margin: 20px 0;
		padding: 0;
	}

	#header span{
		display: table;
    	margin: 0 auto;
	}

	#header span img{
		max-width: 90%;
    	height: auto;
	}

	#wrap {
		width: 96% !important;
		margin: 0 auto;
		border: solid 0px red;
		padding: 0;
	}

	.col_12 {
		width: 100% !important;
		
	}
	
	#footer{
		width:100% !important;
	}

	#footer img{
		max-width: 90%;
    		height: auto;
	}

	.form-container {
		padding: 20px;
	}

	.col-30 {
		float: left;
		width: 30%;
		margin-top: 6px;
		padding: 7px 0px;
    	font-size: 0.9em;
   		
    	text-align: left;
	}

	.col-70 {
		float: left;
		width: 70%;
		margin-top: 6px;
		padding: 7px 0px;
    	font-size: 0.9em;
   		
    	text-align: left;
	}

	.row {
		width: 100%;
		float: none;
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}

	.form-container input[type="submit"] {
		font-family: "open-sans", arial, verdana, sans-serif;
		font-size: 12px;
	}
	
	.form-container input[type="text"] {
	width: 80%; 
}

.form-container input[type="password"] {
	width: 80%; 
}
}

/*smartphone landscape*/

@media screen and (min-width: 480px) and (max-width: 767px)  {
	#header{
		width:100%;
		margin: 20px 0;
		padding: 0;
	}

	#header span{
		display: table;
    		margin: 0 auto;
	}

	#header span img{
		max-width: 90%;
    		height: auto;
	}

	#wrap {
		width: 96% !important;
		margin: 0 auto;
		border: solid 0px red;
		padding: 0;
	}

	.col_12 {
		width: 100% !important;
		
	}

	#footer{
		width:100% !important;
	}

	#footer img{
		max-width: 90%;
    	height: auto;
	}

	.form-container {
		padding: 20px;
	}

	.col-30 {
		float: left;
		width: 30%;
		margin-top: 6px;
		padding: 7px 0px;
    	font-size: 0.9em;
   		
    	text-align: left;
	}

	.col-70 {
		float: left;
		width: 70%;
		margin-top: 6px;
		padding: 7px 0px;
    		font-size: 0.9em;
   		
    		text-align: left;
	}

	.row {
		width: 100%;
		float: none;
	}

	/* Clear floats after the columns */
	.row:after {
		content: "";
		display: table;
		clear: both;
	}

	.form-container input[type="submit"] {
		font-family: "open-sans", arial, verdana, sans-serif;
		font-size: 12px;
	}

}