/* Made with love by Mutiullah Samim*/

/* Made with love by Mutiullah Samim*/
@import url('https://fonts.googleapis.com/css?family=Numans');

body {
      /*--------------------------------------------*/
      background: url(../Mimg/fibra.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
         /*---------------------------------*/
     
    }

.container{
align-content: center;
width: 400px;
margin-top: 200px; ;
}

.card{
margin-bottom: auto;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 6px;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}


/*---------------- mkn 240225 ----------------------------------*/

.alert {
 /* padding: 15px;
  margin-bottom: 21px;*/
  border: 1px solid transparent;
  border-radius: 4px;
  margin-left: 480px;
width: 300px;
height: 40px;
top: 230px;
z-index: 999;

}
.alert {
  margin-top: 0px;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}
.alert-dismissable,
.alert-dismissible {
  padding-right: 35px;
}
.alert-dismissable .close,
.alert-dismissible .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}
.alert-success {
  background-color: #0064C8;
  border-color: #0064C8;
  color: #ffffff;
}
.alert-success hr {
  border-top-color: #15a589;
}
.alert-success .alert-link {
  color: #e6e6e6;
}
.alert-info {
  background-color: #3498db;
  border-color: #3498db;
  color: #ffffff;
}
.alert-info hr {
  border-top-color: #258cd1;
}
.alert-info .alert-link {
  color: #e6e6e6;
}
.alert-warning {
  background-color: #f39c12;
  border-color: #f39c12;
  color: #ffffff;
}
.alert-warning hr {
  border-top-color: #e08e0b;
}
.alert-warning .alert-link {
  color: #e6e6e6;
}
.alert-danger {
  background-color: #e74c3c;
  border-color: #e74c3c;
  color: #ffffff;

}
.alert-danger hr {
  border-top-color: #e43725;
  top: 0px;
}
.alert-danger .alert-link {
  color: #e6e6e6;
}
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}

.progress {
  overflow: hidden;
  height: 21px;
  margin-bottom: 21px;
  background-color: #ecf0f1;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}



@media (max-device-width: 767px) {   /*and (orientation: landscape) {*/

/*@media only screen and (min-width: 360px)
{ 

/*body {
      background: url(../Mimg/fibra.jpg);
      background-attachment: fixed;
      background-size: cover;
      background-repeat: no-repeat;
    }*/

  /* --- mueve todos los elementos ---*/
 .container{
           font-size: 15px;
           align-content: center;
           width: 400px;
           margin-top: 200px; ;
        }

.card{
 margin-left: 5px;   
margin-bottom: auto;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 6px;
margin-left: 10px;
color: #FFC312;
}


/*------- el tamano de cuadro negro que contiene los inputs y demas objetos ---*/
.card{
height: 350px;
margin-top: auto;
margin-bottom: auto;
width: 380px;
background-color: rgba(0,0,0,0.5) !important;
}

.social_icon span{
font-size: 40px;
margin-left: 10px;
color: #FFC312;

}

.social_icon span:hover{
color: white;
cursor: pointer;
}

}


/*---------------- mkn ------------------------------------------*/

/*---------------- mkn ------------------------------------------*/