@charset "utf-8";
/* CSS Document */

/*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*/
/*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*//*Login page csss*/



*{ margin:0px; padding:0px;}

body{ width:100%;background:url(../img/bg-login.png) no-repeat;}

.main{ float:left; height:auto; width:100%;}

.header{ float:left; width:100%; height:150px; background:url(../img/header.png) no-repeat;}

.leftlogo{ float: left;
    height: auto;
    width: 153px;
    margin: 2px 0px 0px 135px;}

.text{float: left;}
.text h1{ text-align: center;color: #000;font-weight: bold;font-family: "Arial Black", Gadget, sans-serif;font-size: 39px; margin: 35px 0px 0px 180px; font-style:italic;
}




.rightlogo{float: right;height: auto;width: 180px;margin: 7px 56px 0px 0px;}

.login{ margin: auto;width: 60%; height:375px; border: 5px solid rgb(231, 145, 53);margin-top:170px; margin-bottom:70px;
    border-radius: 7px;}
	
.left{ float: left;background: rgba(255, 255, 255, 0.68);height:375px;width: 50%;}	
.left img{margin: 8px 0px 0px 8px;}

.right{ float:left;  height:375px; width:50%;     background: rgba(0, 0, 0, 0.68);}	

.right h3{ text-align: center;color: #dc7f1c;padding-top: 15px;font-size: 25px;font-family:Arial, Helvetica, sans-serif;}
.right h4{ text-align: center;color: rgba(255, 255, 255, 0.82); padding-top: 15px;font-size: 18px;font-family: Arial, Helvetica, sans-serif;}

.input-group {
	padding: 20px 35px;
    position:relative;
    
}
#perror{position: absolute;
bottom: 41%;
right: 55%; padding:0px;}

.input-group-addon {
   padding:8px 16px;

    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 1%;
    position: absolute; border-right:0px;
}
.input-group-addon img{ margin:0px 0px 0px -8px;}

.form-control {height: 34px;
    padding: 6px 52px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    width: 69%;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold; margin-bottom:20px;
   
}
.forget{  text-decoration:none; color:fff !important;  float:left;}

.input-group a{ color:#FFF; margin-top:10px; font-family: sans-serif;}

.input-group p{ color: #FFF;
    padding-top: 60px;
    text-align: center;
    font-size: 13px;}

.input-group a:hover{ color:#dc7f1c;}

.btn{    float: right;

    padding: 15px 30px;
    border: none;
    background: #dc7f1c;
    color: #fff;
    border-radius: 3px;
    font-weight: bold; cursor: pointer;}
	
.footer{ float: left;
    width: 100%;
    text-align: center;
    color: #fff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    background: rgba(231, 145, 53, 0.83);}
    
    
  
	
	
	
/* CSS Document */

/*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss */
/*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss *//*responsive csss */



/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 736px) {
   
/* STYLES GO HERE */

/*================================ new css 10:45 d ======================*/

body{ width:100%;background:url(../img/bg-mobil.png) no-repeat;}

.header{ float:left; width:100%; height:70px; background:url(../img/header-mob.png) no-repeat;}

.leftlogo{ margin:0px; width:auto;}

.leftlogo img{ width: 59px;
margin: 3px 0px 0px 16px;}

.text h1{text-align: center;color: #000;font-weight: bold;font-family: "Arial Black", Gadget, sans-serif;font-size: 15px;margin: 15px 22px;font-style: italic;}
.rightlogo {float: right;height: auto; margin:0px; width:auto;}
.rightlogo img{width: 61px;margin: 15px 13px 0px 0px;}

.login {
    margin: auto;
    width: 90%; height:720px;
    border: 5px solid rgb(231, 145, 53);
    margin-top: 85px;
    margin-bottom: 20px;
    border-radius: 7px;}
	
	
	
.left {
   float: left;
background: rgba(255, 255, 255, 0.68);
height: 315px;
width: 100%;
}

.left img {
   
    width: 270px;
  margin: 32px 0px 0px 25px;
}

.right{ width:100%; height:405px;}

.form-control{ width:65% !important;}
	



}
	
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	
	body{ width:100%;background:url(../img/bg-tab.png) no-repeat;}

.header{ float:left; width:100%; height:88px; background:url(../img/header-tab.png) no-repeat;}

.leftlogo{ margin: 2px 45px; width:auto;}

.leftlogo img{ width: 59px;
margin: 3px 0px 0px 16px;}

.text h1{margin: 17px 75px; font-size:26px;}
.rightlogo {float: right;height: auto; margin:0px; width:auto;}
.rightlogo img{width: 110px;
margin: 15px 30px 0px 0px;}

.login { width:95%; margin-top:150px; height: 385px;}
	
	
	
.left {
  float: left;
background: rgba(255, 255, 255, 0.68);
height: 385px;
width: 50%;
}

.left img {
   
   width: 350px;
margin: 33px 0px 0px 4px;
}

.right{ width: 50%;
height: 385px;}

.form-control{ width:65%;}


	
	
	
	
	
	
	
	
}


@media only screen and (min-device-width : 980px) and (max-device-width : 1280px) {
	
	.form-control{ width:75%;}
	
}