@media only screen and (min-width:1200px) and  (max-width:1365px) {
.container{width:100%;}

}

@media only screen and (min-width:1004px) and  (max-width:1199px) {
.container{width:100%;}
}

@media only screen and (max-width:1003px) {
.container{width:100%;}

.bg-form{ margin-top:5%; margin-right: 60%; width:100%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}
.foot{ text-align:left;}
}

@media only screen and (max-width:767px) {
.bg-form{ margin-top:5%; margin-right: 60%; width:100%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}
.foot{ text-align:left;}
.box-icon{ margin-top:0; }
.logo{ margin-top:2%; border-bottom:1px solid; margin-bottom: -70px;}
}

@media only screen and (max-width:599px) {
.bg-form{ margin-top:5%; margin-left:-24%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}
.foot{ text-align:left;}
}

@media only screen and (max-width:480px) {
.bg-form{ margin-top:5%; margin-left:0%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}
.foot{ text-align:left;}
.side-left{ margin-left:0;}
.box-icon{ margin-top:0; }
.panel-body{ text-align: justify; line-height: 23px;}
.midtext h1{ font-size:29px;}
.iconfa span{ margin-left:0;}
}

@media only screen and (max-width:360px) {
.bg-form{ margin-top:5%; margin-left:0%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}

.foot{ text-align:left;}
.side-left{ margin-left:0;}
}
@media only screen and (max-width:320px) {
.bg-form{ margin-top:5%; margin-left:0%;}
.top-bg span{ float:left;}
.loginside{ float:left; margin-top:10px;}

.logo{ margin-top:2%; border-bottom:1px solid; margin-bottom: -70px;}
.side-left{ margin-left:0;}
}