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: #ffb7ff; 
    background: -moz-linear-gradient(45deg,  #ffb7ff 5%, #ffb7ff 99%); 
    background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#ffb7ff), color-stop(99%,#ffb7ff)); 
    background: -webkit-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
    background: -o-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
    background: -ms-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%);
    background: linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ffb7ff, endColorstr=#ffb7ff,GradientType=1 ); 
*/    
    width:50%;
    /*min-width: 720px;*/
    /*position:relative;*/
    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;
    background-color: #ffffff ;
}
.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;
    width: 100%;
    text-align: center;
     margin: 0 auto;
}

.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: #ffffff;
        border-radius: 0px ;
        margin: 30px 15px ;
        padding: 5px ;
        width: 150px  ;
        font-size: 18px ;
        font-weight: inherit ;
    }
    
    .btn-pink{
        background-color: #ffa8ff;
        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: #ffb7ff; 
            background: -moz-linear-gradient(45deg,  #ffb7ff 5%, #ffb7ff 99%); 
            background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#ffb7ff), color-stop(99%,#ffb7ff)); 
            background: -webkit-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
            background: -o-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
            background: -ms-linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%);
            background: linear-gradient(45deg,  #ffb7ff 5%,#ffb7ff 99%); 
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ffb7ff, endColorstr=#ffb7ff,GradientType=1 ); 
        */    
            width:100%;
            /*min-width: 720px;*/
           /* position:relative;*/
 
            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;
        width: 100%;
        height: auto;
        text-align: center;
         margin: 0 auto;
    }
        

    .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  ;
        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: #ccc;
        border-radius: 0px ;
        margin: 30px 15px ;
        padding: 5px ;
        width: 300px  ;
        font-size: 50px ;
        font-weight: inherit ;
    }
    
    .btn-pink{
        background-color: #ffa8ff;
        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: 300px ;
        font-size: 50px ;
        font-weight: inherit ;
        color:#FC563B
    }
    .loginreset { 
        margin: 5px 0px 0px 0px;
        font-size: 22px;
        text-align: right;
    }    
    #passreset{
        font-size:24px !important ;
    }

}

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