*{
    margin: 0px;
    padding:0px;
    box-sizing: border-box;
    text-decoration: none;


}


body{
    background-image:url("login-bg-2.jpg");
   
    background-size: 100vw auto;
 
 
   
   
}

#motus_logo{
width:310px;
margin: 2vh auto;
}



#main-box{
    width: 60vh;
    height: 45vh;
    background-color: #fff;
    margin-top: 25vh;
    margin-left: 12vh;
    border-radius: 15px;
}

#input-box{
    display: flex;
    flex-direction: column;
    position: relative;
    bottom:5vh;
   

}





#input-box input{
    
font-family: Segoe, 'Segoe UI',  Arial, Verdana, 'sans-serif';
    
margin: 0 auto;
    
width: 70%;
    
height: 5vh;
    
font-size: 16px;
    
border:0px;
    
background-color: white;
    
margin-top: 3vh;
    
padding-left: 10px;
    
border-radius: 8px;
    
border: 1px solid #f68b1f;
}


#input-box input:hover{
    border: 2px solid #f68b1f;
    outline: none;
    
}



#submit{
    outline: nones;
    width: 25%;
    height: 7vh;
    font-size: 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    margin: 2vh auto;
    background-color: #f68b1f;
    letter-spacing: 3px;
    cursor: pointer;
    border:0px;
    color: #fff;
    transition: 0.5s;
    border-radius: 15px;
}


#submit:hover{
    
    background-color:#545454;
    color: white;
    border: 1px solid #f68b1f;
    transition: 0.5s;
}


#reklam{
   position: relative;
   
}
#reklam img{
    width: 52%;
    position: absolute;
    right: 100px;
    bottom: 100px;
    opacity: 0.5;
}





#logo_scf{
    width: 50%;
    margin: 0 auto;
    position: relative;
    bottom: 5vh;
   
}

#logo:hover{
   position: relative;
   bottom: 15px;
  
}

footer{
    width: 100%;
    height: 12vh;   
    background-color: black;
    position: absolute;
    bottom: 0px;
    color: white;left: 0;


   
}


#content-footer{
    display: flex;
    justify-content: space-between;
}


footer p{
    margin-top: 5vh;
    margin-left:17vh ;
}




#number-box{
    width: 55vh;
    height: 9vh;
    color: black;
    text-align: left;
    display: flex;
	justify-content: center;
	align-items: center;
    text-align: center;
    font-size: 2.5vh;
    background-color: #FFD508;
    margin-top: 1.5vh;
    margin-right: 2vh;
    border-radius: 5px;
    font-family: Segoe, 'Segoe UI',  Arial, Verdana, 'sans-serif';
    padding-left: 2vh;
    


}





#footer_sfc{
    width: 15vh;
    position: absolute;
    bottom: 1vh;    
}


#phone-logo{
    width: 10vh;
    padding-right: 6vh;
    padding-top: 1.5vh;
}

.main-form-box{display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: Segoe, 'Segoe UI',  Arial, Verdana, 'sans-serif';}
.main-form-box i{font-size: 64px; color: #f60000;}

.login-kayit-stn{display: flex; justify-content: center;}
.login-kayit-link{font:bold 17px Segoe, 'Segoe UI',  Arial, Verdana, 'sans-serif'; color: #000; text-decoration: underline;}
@media (min-width: 0px) and (max-width: 512px) 
{


    #number-box{
        font-size: 2vh;
        padding-left: 0.5vh;
          
          
      
      
      }
      
      
      #main-box{
          width: 40vh;
          height: auto;
          background-color: #fff;
          border-radius: 0;
          margin: 10vh auto;
      }
      
      
      
    
      #input-box input{
          
          font-family: Segoe, 'Segoe UI',  Arial, Verdana, 'sans-serif';
          margin: 0 auto;
          width: 70%;
          height: 5vh;
          font-size: 18px;
          border:0px;
          background-color: white;
          margin-top: 3vh;
          padding-left: 10px;
          border-radius: 15px;
          border: 1px solid #f68b1f;
          
        

      
      
      
      }
      
  
      #submit{
      
          width: 30%;
          height: 7vh;
          
          border-radius: 15px;
        
          
      
      }




    


      footer p{
        display: none;
    }
      





#number-box{
    width: 27vh;
    position: absolute;
    right: 2vh;
}




}


@media (min-width:0px) and (max-width: 768px) 
{

	
	
	body{
    background-image: url("login-mb-2.jpg");
   
    background-size: 100vw auto;
 
 
   
   
}
	
	
    #main-box{
      
       
       margin: 0 auto;
       margin-top: 10vh;
 
       
    }
    
    
    #input-box input{
        
        
        border-radius: 10px;
     
      
       
        
     
    
    }
    
    
    
    #submit{
        border-radius: 20px;
      
        
    
    }
    
    
    footer #content-footer p{
        display: none;
    }
    
    
    
    
    
    
    
    
    
    
    #content-footer{
        display: flex;
        justify-content: flex-start;
    }
    
    #number-box{
        width: 50%;
        position: absolute;
        right:2vh;
    }
    
    
    
    
    
    
    
    
    
    }