@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");body{background-color:#fff;font-family:"Open Sans","Helvetica",sans-serif;font-size:.9rem}.content{display:flex;height:100vh}.container{padding:20px}.flex{display:flex;align-items:center}.login__box h1{font-size:1.3rem;text-transform:uppercase;font-weight:600;color:#4f4e50}.login__box img{padding-right:20px;margin-right:20px;border-right:1px solid #c4c4c4}.col-btw{display:flex;flex-direction:column;justify-content:space-between}header{background-image:url("../img/city-design.jpg");background-position:cover;background-position:100% 60%;width:65%}.login{width:35%;margin-top:5em}.login__box{display:flex;flex-direction:column;justify-content:space-between}.input__wrapper input{padding:5px 10px;border-radius:5px;border:1px solid #ddd}.input__wrapper label{width:30%}.input__wrapper input[type="text"],.input__wrapper input[type="password"]{flex:1 1 auto;margin-left:15px}.input__wrapper input[type="text"]:hover,.input__wrapper input[type="password"]:hover{border-color:#0095d9;box-shadow:0 0 1px rgba(0,149,217,0.4)}.input__wrapper{width:300px;display:flex;justify-content:space-between;align-items:center;margin:15px 0}.form__btn{background-color:#8bb92e;color:#fff;padding:7px 25px !important;border:0;border-radius:3px;cursor:pointer;color:#fff;text-transform:uppercase;margin:20px 0}.form__btn:hover{transform:translateY(1px);background-color:#9dbf54;box-shadow:inset 0 0 0 1px #9dbf54,0 1px 4px rgba(44,45,48,0.2);transition:all 75ms ease-in-out}@media only screen and (max-width:985px){.content{flex-direction:column;background-color:#ededed}header{display:none}.login__box{min-width:310px}.login{width:100%;margin:auto 0}.login__box{box-shadow:0 0 6px 2px rgba(217,214,217,1);background-color:#fff;align-items:center}.login form{display:flex;flex-direction:column;align-items:center}.login__input input{padding:5px 10px}}@media only screen and (max-width:320px){.container{padding:10px}}