@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');

 body{
     margin: 0px;
     padding: 0px;
     font-size: 16px;
     font-family: 'Poppins', sans-serif;
     background: url("../img/fullbackground.jpg");
     background-repeat: no-repeat;
     background-size: cover;
     box-sizing: border-box;
}
 .mainbox{
     width: 100%;
     height: 100vh 
}
 .leftbox{
     width: 50%;
     float: left;
     height: 100vh 
}
 .rightbox{
     width: 50%;
     float: right;
     height: 100vh 
}
 .logindiv {
     width: 90%;
     background: #fff;
     padding: 5%;
     margin-top: 15% 
}
 .loginbox {
     border: 5px solid #ececec;
     border-radius: 7px;
     height: auto;
     margin: 3% 15% 2% 18%;
     padding: 5%;
     overflow: hidden;
     width: 65%;
     border: 1px solid #b5b5b5;
}
 .group {
     position:relative;
     margin-bottom:35px;
}
 input {
     font-size:18px;
     padding:5%;
     display:block;
     width: 90%;
     border:none;
     padding: 2% 5%;
     border-bottom:1px solid #757575;
}
 input:focus {
     outline:none;
}
/* LABEL ======================================= */
 label {
     color:#999;
     font-size:18px;
     font-weight:normal;
     position:absolute;
     pointer-events:none;
     left:5px;
     top:10px;
     transition:0.2s ease all;
     -moz-transition:0.2s ease all;
     -webkit-transition:0.2s ease all;
}
/* active state */
 input:focus ~ label, input:valid ~ label {
     top:-20px;
     font-size:14px;
     color:#5264AE;
}
/* BOTTOM BARS ================================= */
 .bar {
     position:relative;
     display:block;
     width:100%;
}
 .bar:before, .bar:after {
     content:'';
     height:2px;
     width:0;
     bottom:1px;
     position:absolute;
     background:#5264AE;
     transition:0.2s ease all;
     -moz-transition:0.2s ease all;
     -webkit-transition:0.2s ease all;
}
 .bar:before {
     left:50%;
}
 .bar:after {
     right:50%;
}
/* active state */
 input:focus ~ .bar:before, input:focus ~ .bar:after {
     width:50%;
}
/* HIGHLIGHTER ================================== */
 .highlight {
     position:absolute;
     height:60%;
     width:100px;
     top:25%;
     left:0;
     pointer-events:none;
     opacity:0.5;
}
/* active state */
 input:focus ~ .highlight {
     -webkit-animation:inputHighlighter 0.3s ease;
     -moz-animation:inputHighlighter 0.3s ease;
     animation:inputHighlighter 0.3s ease;
}
/* ANIMATIONS ================ */
 @-webkit-keyframes inputHighlighter {
     from {
         background:#5264AE;
    }
     to {
         width:0;
         background:transparent;
    }
}
 @-moz-keyframes inputHighlighter {
     from {
         background:#5264AE;
    }
     to {
         width:0;
         background:transparent;
    }
}
 @keyframes inputHighlighter {
     from {
         background:#5264AE;
    }
     to {
         width:0;
         background:transparent;
    }
}
 .loginbox button {
     padding: 15px 40px;
     font-size: 20px;
     text-transform: uppercase;
     font-weight: 700;
     border: 0px;
     letter-spacing: 1px;
     margin-top:20px;
     background: -moz-linear-gradient(90deg, rgba(255, 151, 54, 1) 0%, rgba(255, 151, 54, 1) 50%, rgba(224, 133, 47, 1) 100%);
    /* ff3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(224, 133, 47, 1)), color-stop(50%, rgba(255, 151, 54, 1)), color-stop(100%, rgba(255, 151, 54, 1)));
    /* safari4+,chrome */
     background: -webkit-linear-gradient(90deg, rgba(255, 151, 54, 1) 0%, rgba(255, 151, 54, 1) 50%, rgba(224, 133, 47, 1) 100%);
    /* safari5.1+,chrome10+ */
     background: -o-linear-gradient(90deg, rgba(255, 151, 54, 1) 0%, rgba(255, 151, 54, 1) 50%, rgba(224, 133, 47, 1) 100%);
    /* opera 11.10+ */
     background: -ms-linear-gradient(90deg, rgba(255, 151, 54, 1) 0%, rgba(255, 151, 54, 1) 50%, rgba(224, 133, 47, 1) 100%);
    /* ie10+ */
     background: linear-gradient(0deg, rgba(255, 151, 54, 1) 0%, rgba(255, 151, 54, 1) 50%, rgba(224, 133, 47, 1) 100%);
    /* w3c */
     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#E0852F', endColorstr='#FF9736', GradientType=0);
    /* ie6-9 */
     color: #fff;
}
 .logintext {
     padding-bottom: 50px
}
 .logintext h3 {
     color: #a3206c;
     font-size: 28px;
     font-weight: 500;
     margin: 0 0 0px;
     padding: 0;
}
 .logintext p {
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;
     color: #4f4f4f;
     font-family: "Calibri W01 Light";
     font-size: 16px;
}
 .copyright{
     font-size: 14px;
     color: gray;
     text-align: center;
     margin: 3% 15% 2% 18%;
     padding:0 0%;
     overflow: hidden;
     width: 75%;
}
 .famelogo {
     border-radius: 3px;
     bottom: 0;
     height: 290px;
     left: -43px;
     margin: auto;
     position: absolute;
     right: 0;
     top: -63px;
     width: 290px;
     z-index: 9999;
}
 .footer{
     margin: 70% 10% 0 5%;
     width:80%;
}
 .newsfeed {
     text-align: center;
     font-size: 18px;
     width: 100%;
     padding: 15px 0px 15px 0px;
     border-radius: 20px;
     background: rgba(0, 0, 0, 0.3);
     color: #eee;
     font-weight: 500;
}
 .nump {
     font-weight: bold;
     margin: 10px 0px;
     font-size: 14px;
     color: #111;
}
 .socialbox {
     width: 25px;
     height: 25px;
     float: left;
    /*margin: 5px 5px;
    */
     margin: 0px 5px;
}
 .socialbox img{
     width: 25px;
     height: 25px;
}
 .socialbox {
     width: 25px;
     height: 25px;
     float: left;
    /*margin: 5px 5px;
    */
     margin: 0px 5px;
}
 .socialbox img{
     width: 25px;
     height: 25px;
}
 .nump > a {
     color: #000;
}
 .nump{
     display:block;
     width:33.3%;
     float:left
}
 .nump1{
     text-align: left
}
 .nump2{
     text-align: center
}
 .nump3 {
    text-align: right
}
 .socialmedia {
    text-align: center;
     display: inline-block;
}
 @media screen and (max-width:900px){
     .famelogo {
         border-radius: 3px;
         bottom: 0;
         height: 290px;
         left: 0;
         margin: auto;
         position: relative;
         right: 0;
         top: 0;
         width: 290px;
         z-index: 9999;
    }
     .rightbox{
         width: 90%;
         float: left;
         height: auto;
         margin: 0px 5%;
    }
     .loginbox {
         padding: 5%;
         width: 90%;
         margin: 0px;
    }
     .copyright {
         margin: 0;
         padding: 0 0%;
         width: 100%;
    }
     .leftbox {
         width: 100%;
         float: left;
         height: auto;
    }
     .footer {
         margin: 5% 5%;
         width: 90%;
    }
}
 @media screen and (max-width:540px){
     .nump {
         display: block;
         width: 100%;
         float: left;
    }
     .nump1, .nump2, .nump3{
         text-align: center
    }
     .famelogo {
         height: 200px;
         width: 200px;
         z-index: 9999;
    }
     .famelogo img{
         width: 200px
    }
}