input,div{
box-sizing:border-box;			
}

[class*="col-"]{
float:left;
}

.login-frm{
font-size:80%;
padding:15px;

background: white;
margin:0px;
}

input[type="text"],input[type="password"],input[type="email"]{
font-size:100%;
width:100%;
padding:8px;
background: #f1f1f1;
margin-bottom:10px;
}
.logo{
display:block;
width:40%;
height:auto;
margin:auto;
}
#error{
text-align:center;
width:100%;
background-color:#ff3333;
border-radius:5px;
padding:5px;
}

input[type="submit"]{
padding:10px;
width:100%;
background: #0091cd;
border-color: #0066cc;
color:white;
}

input[type="submit"]:hover{
background: #006bb3;
}
body{
font-size:1.5em;
}

@media only screen and (min-width: 768px){
body{
background: #f1f1f1;
}


.col-1{
width:8.33%;

}
.col-2{
width:16.66%;

}	
.col-3{
width:25%;

}		
.col-4{
width:33.33%;

}
.col-5{
width:41.66%;

}	
.col-6{
width:50%;

}		
.col-7{
width:58.33%;

}
.col-8{
width:66.66%;

}	
.col-9{
width:75%;

}	
.col-10{
width:83.33%;

}
.col-11{
width:91.66%;

}	
.col-12{
width:100%;

}
.login-frm{
width:25%;
margin:auto;
max-width:350px;
border:1px solid black;
}
.container{
margin-top:5%;
font-size:100%;
}

}

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

.col-m-1{
width:8.33%;

}
.col-m-2{
width:16.66%;

}	
.col-m-3{
width:25%;

}		
.col-m-4{
width:33.33%;

}
.col-m-5{
width:41.66%;

}	
.col-m-6{
width:50%;

}		
.col-m-7{
width:58.33%;

}
.col-m-8{
width:66.66%;

}	
.col-m-9{
width:75%;

}	
.col-m-10{
width:83.33%;

}
.col-m-11{
width:91.66%;

}	
.col-m-12{
width:100%;

}
.login-frm{
width:100%;
}
.container{
font-size:130%;
}
}