div h3{
    color : #000000;
    font-size:50px;
}

div h3 span{
        color : #FFF;
        font-size:50px;
   }
   
   div span {
        font-weight: 200;
   }
   
   h1{
        font-weight: 200;
   }
   
   .login_box{
       background: #ff0000; /* Old browsers */
       background: -moz-linear-gradient(45deg,  #f32d27 5%, #ff6b45 99%); /* FF3.6+ */
       background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#f32d27), color-stop(99%,#ff6b45)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(45deg,  #f32d27 5%,#ff6b45 99%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(45deg,  #f32d27 5%,#ff6b45 99%); /* Opera 11.10+ */
       background: -ms-linear-gradient(45deg,  #f32d27 5%,#ff6b45 99%); /* IE10+ */
       background: linear-gradient(45deg,  #f32d27 5%,#ff6b45 99%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff6b45', endColorstr='#ff6b45',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
       
       width:35%;
      /* height:70%; */
       position:absolute;
       top:10%;
       left:32.5%;
       
       -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
   -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
   box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
   }

   .login_box-yellow{
    background: #ffff00; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #ffff00 5%, #ffee00 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#ffff00), color-stop(99%,#ff6b45)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  #ffff00 5%,#ffee00 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  #ffff00 5%,#ffee00 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  #ffff00 5%,#ffee00 99%); /* IE10+ */
    background: linear-gradient(45deg,  #ffff00 5%,#ffee00 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffee00', endColorstr='#ffee00',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
    
    width:35%;
   /* height:70%; */
    position:absolute;
    top:10%;
    left:32.5%;
    
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
}

.login_box-lightblue{
    background: LIGHTBLUE; /* Old browsers */
    background: -moz-linear-gradient(45deg,  LIGHTBLUE 5%, LIGHTBLUE 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,LIGHTBLUE), color-stop(99%,#ff6b45)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  LIGHTBLUE 5%,LIGHTBLUE 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  LIGHTBLUE 5%,LIGHTBLUE 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  LIGHTBLUE 5%,LIGHTBLUE 99%); /* IE10+ */
    background: linear-gradient(45deg,  LIGHTBLUE 5%,LIGHTBLUE 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#LIGHTBLUE', endColorstr='#LIGHTBLUE',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
    
    width:35%;
   /* height:70%; */
    position:absolute;
    top:10%;
    left:32.5%;
    
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
}

.login_box-gray{

    background: #ffffff; 
/*
    background: rgb(240, 244, 243); 
    background: -moz-linear-gradient(45deg,  rgb(240, 244, 243) 5%, rgb(240, 244, 243) 99%); 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,rgb(240, 244, 243)), color-stop(99%,rgb(240, 244, 243))); 
    background: -webkit-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
    background: -o-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
    background: -ms-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%);
    background: linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=rgb(240, 244, 243), endColorstr=rgb(240, 244, 243),GradientType=1 ); 
*/    
    width:40%;
    /*min-width: 720px;*/
    position:absolute;
    margin: auto;
    top:0;
    left:30%;
/*    
    -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
*/

border-bottom : 1px solid rgb(30, 43, 122);

}

.label {
    color: rgb(38, 41, 235);
    font-size: 24px;
    font-weight: 500;

}

.login_box-lightblue .label {
    color: rgb(38, 41, 235);
    font-size: 24px;
    font-weight: 500;

}

.form-control{
    color: #000000 !important;
    font-size: 20px;
    border: none;
    padding: 25px;
    padding-left: 10px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}
.form-control:focus{
    border-radius: 0px;
    border-bottom: 2px solid #FC563B;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}


.outter{
    padding: 0px;
    border: 1px solid rgba(255, 255, 255, 0.178);
    border-radius: 50%;
    width: 100%;
    text-align: center;
     margin: 0 auto;
}
.image-circle{
    border-radius: 50%;
    width: 100%;
    height:100%;
    border: 4px solid #FFF;
}



.loginreset { 
    margin: 5px 0px 0px 0px;
    font-size: 16px;
    text-align: right;
}
#twocodereset { 
    margin: 50px 0px 0px 0px;
    font-size: 16px;
    text-align: right;
}

#loginmessage { 
    width: 100%;
    margin: 0px 0px;
    float:left;
    padding: 10px 10px 10px;

    box-shadow: 0 0 0px;
    font-size: 16px;
    text-align: center;
    display: none; 
    }
    
#loginmessage.error { 
    border: 1px solid #ff0000; 
    background-color: #cc0000; 
    font-size: 18px; 
    color: #ffffff; 
    }

#loginmessage.success { 
    border: 1px solid #0000ff; 
    background-color: #2f6cee; 
    color:#ffffff;
    font-size: 18px; 
    }

#loginmessage form label { 
    margin-left: 5px; 
    font-size: 18px; 
    }

    .btn-gray{
        background-color: rgb(240, 244, 243);
        border-radius: 0px ;
        margin: 30px 15px ;
        padding: 5px ;
        width: 150px  ;
        font-size: 18px ;
        font-weight: inherit ;
    }
    
    .btn-gray:hover {
        background-color: rgb(130, 133, 132);
        border-radius: 0px ;
        margin: 15px ;
        padding: 5px ;
        width: 150px ;
        font-size: 18px ;
        font-weight: inherit ;
        color:#FC563B
    }


     
   .follow{
       background-color:#FC563B;
       height: 80px;
       cursor:pointer;
   }
   
   .follow:hover {
       background-color:#F22F26;
       height: 80px;
       cursor:pointer;
   }
   
   .login_control{
       background-color:#FFF;
       padding:10px 0 10px 0;
       
   }
   
   .control {
       color:#000;
       margin:10px 0 10px 0;
   }
   
   .line{
       border-bottom : 2px solid rgb(30, 43, 122);
       margin:0 0 10px 0;
    }
   
   .login_box-lightblue {
    border-bottom : 2px solid rgb(89, 141, 252);
    margin:10px;
}

/*      smart phone                                                              */
.invalid_loginmessage { width:100%; clear:both; font-size:12px; color:#990000; text-align:center; padding-top:5px; height:auto}


   @media (max-width: 992px) {
   
    div h3{
        color : #000000;
        font-size:60px;
    }
    
       .login_box-gray{

        background: #ffffff; 
        /*
            background: rgb(240, 244, 243); 
            background: -moz-linear-gradient(45deg,  rgb(240, 244, 243) 5%, rgb(240, 244, 243) 99%); 
            background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,rgb(240, 244, 243)), color-stop(99%,rgb(240, 244, 243))); 
            background: -webkit-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
            background: -o-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
            background: -ms-linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%);
            background: linear-gradient(45deg,  rgb(240, 244, 243) 5%,rgb(240, 244, 243) 99%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=rgb(240, 244, 243), endColorstr=rgb(240, 244, 243),GradientType=1 ); 
        */    
            width:100%;
            /*min-width: 720px;*/
            position:absolute;
 
            top:0;
            left:0%;
            /*    
            -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
            -moz-box-shadow:    0px 0px 8px 0px rgba(50, 50, 50, 0.54);
            box-shadow:         0px 0px 8px 0px rgba(50, 50, 50, 0.54);
        */
        
        border-bottom : 1px solid rgb(30, 43, 122);
        
            }


    .login_control{
        background-color:#FFF;
        padding:0px 0 10px 0;
        
    }
    .control {
        color:#000;
        margin:0px;
    }

    .outter{
        padding: 0px;
        border: 1px solid rgba(255, 255, 255, 0.178);
        border-radius: 50%;
        width: 100%;
        height: auto;
        text-align: center;
         margin: 0 auto;
    }
    .image-circle{
        border-radius: 50%;
        width: 100%;
        height:100%;
        border: 4px solid #FFF;
    }
        

    .line{
        border-bottom : 2px solid rgb(30, 43, 122);
        margin:0px;
     }
     
    .label {
        color: rgb(38, 41, 235);
        font-size: 50px;
        font-weight: 500;
    }
    
    .login_box-lightblue .label {
        color: rgb(38, 41, 235);
        font-size: 50px;
        font-weight: 500;
    
    }

    
    .form-control{
        color: #000000 !important;
        font-size: 50px  !important;
        border: none;
        padding: 50px;
        padding-left: 10px;
        border-bottom: 1px solid #CCC;
        margin-bottom: 10px;
        outline: none;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

   
    #loginmessage { 
        width: 100%;
        margin: 0px 0px;
        float:left;
        padding: 10px 10px 10px;
    
        box-shadow: 0 0 0px;
        font-size: 32px;
        text-align: center;
        display: none; 
        }
        
    #loginmessage.error { 
        border: 1px solid #ff0000; 
        background-color: #cc0000; 
        font-size: 32px;
        color: #ffffff; 
        }
    
    #loginmessage.success { 
        border: 1px solid #0000ff; 
        background-color: #2f6cee; 
        color:#ffffff;
        font-size: 32px;
        }
    
    #loginmessage form label { 
        margin-left: 5px; 
        font-size: 32px;
        }
        
    
    .invalid_loginmessage { width:100%; clear:both; font-size:12px; color:#990000; text-align:center; padding-top:5px; height:auto}
    
    .btn-gray{
        background-color: rgb(240, 244, 243);
        border-radius: 0px ;
        margin: 30px 15px ;
        padding: 5px ;
        width: 250px  ;
        font-size: 50px ;
        font-weight: inherit ;
    }
    
    .btn-gray:hover {
        background-color: rgb(130, 133, 132);
        border-radius: 0px ;
        margin: 15px ;
        padding: 5px ;
        width: 250px ;
        font-size: 50px ;
        font-weight: inherit ;
        color:#FC563B
    }


}

/*----------------------------------------------------------------------------------------------*/