/* CSS Document */



@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,700');





body{font-family: 'Ubuntu', sans-serif; max-width: 100%; min-height: 100%;}



/* default class */

.container{padding-left:0; padding-right:0;}

.navbar-default{ background-color:transparent; border:0;}

.rel{ position:relative;}

.abs{ position:absolute;}



/* container */

.container-fluid{ padding-left:0; padding-right:0;}



/* custom background */

.main-bkg{background: url(../images/bkg.jpg) repeat bottom center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;

  width: 100%;

  overflow-x: hidden;

}

  

.login-bkg{background: url(../images/login-bkg.jpg) no-repeat center center fixed; 

  -webkit-background-size: cover;

  -moz-background-size: cover;

  -o-background-size: cover;

  background-size: cover;}  



.main-logo{ width:100%; text-align:center; margin:10px 0 20px 0;}

.main-logo img{ max-width:100%;}



.main-heading{ text-align:center; text-transform:uppercase; color:#000; margin:5px 0; letter-spacing:1px; font-weight:400; vertical-align:middle;}

.main-heading img{ width:50px; vertical-align:middle;}



ul.login-buttons{ margin:100px 0 60px 0; padding:0px; text-align:center;}

ul.login-buttons li{ list-style:none; display:inline-block; padding:0 20px;}

ul.login-buttons li .image{ width:100px; height:100px; text-align:center; vertical-align:inherit; background:#e91e31; border-radius:50%; padding:25px;}

ul.login-buttons li .image img{ max-width:100%; transition:all ease-in-out 0.3s;}

ul.login-buttons li:hover .image img{ transform:scale(1.1);}



ul.login-buttons li a{ color:#fff; text-transform:uppercase; letter-spacing:1px; display:block; font-weight:400; font-size: 20px;}

ul.login-buttons li a span{ display:block; margin:10px 0;}

ul.login-buttons li a:hover{ text-decoration:none;}



.login-wrap{ width:70%; margin:auto; text-align:center; padding:40px 0;}

.login-wrap .field-wrap{ width:100%;}

.login-wrap .field-wrap label{ display:block; text-align:left; color:#fff; font-weight:300; font-size:15px; letter-spacing:1px;}



.login-wrap .field-wrap input[type="text"]{ width:100%; border:none; padding:10px; background:rgba(255,255,255,0.4); outline:none; color:#fff; letter-spacing:1px; border-radius:5px;}

.login-wrap .field-wrap input[type="text"]::placeholder{ color:#fff !important; letter-spacing:1px;}

.login-wrap .field-wrap input[type="text"]:focus{ background:rgba(255,255,255,0.4);}





.login-wrap .field-wrap input[type="password"]{ width:100%; border:none; padding:10px; background:rgba(255,255,255,0.4); outline:none; color:#fff; border-radius:5px;}

.login-wrap .field-wrap input[type="password"]::placeholder{ color:#fff !important;}



.login-wrap input[type="submit"]{ width:40px; height:40px; background:#e91e31; color:#fff; border:none; margin:25px 0 0 0; float:left; outline:none; transition:all ease-in-out 0.3s; border-radius:5px;}

.login-wrap input[type="submit"]:hover{ background:#000;}



.forgot{ width:100%; text-align:center; color:#fff; margin:100px 0 0 0;}

.forgot a{ color:#fff; text-decoration:none; font-size:18px; font-weight:700; vertical-align:middle; display:inline-block; transition:all ease-in-out 0.3s;}

.forgot img{ margin-right:10px;}



.forgot a:hover{ color:#876ba8;}









/* new app codings */

.main-wrapper{ width: 450px; padding: 10px 0 40px 0; text-align: center; background: rgba(255,255,255,0.7); box-shadow: 0px 0px 20px #666; margin: 45px auto 0;}

.form-wrap{ width: 80%; text-align: center; margin: 20px auto 0;}

.form-wrap input{ padding: 25px 37px 25px 15px; border-radius: 3px; color: #666;}



.form-wrap .usern{ background: url(../images/username.png) no-repeat 95% center #fff; }

.form-wrap .pass{ background: url(../images/password.png) no-repeat 95% center #fff; }



.form-wrap a{ font-weight: 700; outline: none;}



.poweredby{text-align: center; padding: 25px 0 0 0; color: #fff; text-shadow: 0px 0px 5px #333;}

.poweredby a{color: #fff;}





input.login-button{ background-color:#0299da; border:none; color: #fff; font-size: 15px; padding: 10px 45px; letter-spacing: 1px; transition: all ease-in-out 0.2s;}

input.login-button:hover{ background-color: #f58737; color: #fff; }















/* mcc */

/* ================= Tablet (landscape) 1024px ================= */

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

{

}





/* ================= Tablet (Portrait) 768px - 959px ================= */

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

{



.main-wrapper{ width: 300px; height: 300px; padding: 10px; border-radius: 0; margin-top: 30px;}

.main-wrapper img{width: 20%;}



.form-wrap{width: 90%;}

.main-logo{margin: 5px 0;}



.poweredby{position: static; margin-bottom: 10px; width: 100%; text-align: center;}



}





/* ================= mobile (landscape) 515 ================= */

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

{

.main-wrapper{ width: 300px; height: 300px; padding: 10px; border-radius: 0; margin-top: 30px;}

.main-wrapper img{width: 20%;}



.form-wrap{width: 90%;}

.main-logo{margin: 5px 0;}



.poweredby{position: static; margin-bottom: 10px; width: 100%; text-align: center;}



}



/* ================= Mobile (Landscape) 480px - 767px ================= */

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

{

.main-wrapper{ width: 300px; height: 300px; padding: 10px; border-radius: 0; margin-top: 30px;}

.main-wrapper img{width: 20%;}



.form-wrap{width: 90%;}

.main-logo{margin: 5px 0;}



.poweredby{position: static; margin-bottom: 10px; width: 100%; text-align: center;}



}





/* ================= Mobile (Portrait) below 480px  ================= */

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

{

.main-wrapper{ width: 300px; height: 300px; padding: 10px; border-radius: 0; margin-top: 50px;}

.main-wrapper img{width: 20%;}



.form-wrap{width: 90%;}

.main-logo{margin: 5px 0;}



.poweredby{position: absolute; bottom: 20px; width: 100%; text-align: center;}





}