.header{height:80px;background-color:#042960;display:flex;justify-content:center;align-items:center}.header>h1{text-transform:uppercase;letter-spacing:3px;color:#fff;font-weight:700}.footer{height:80px;background-color:#042960;display:flex;justify-content:right;align-items:center;color:#fff;padding-right:10px}.footer small{font-size:14px}.weather{width:90%;display:flex;flex-wrap:wrap;justify-content:space-around}.char{width:184px;height:100px;margin-top:10px;color:#0e448e;background-color:#fff;padding:15px 5px 12px;border-radius:10px;font-size:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start}.char--text{margin:8px 15px;font-weight:700;font-size:12px;color:#0e448e;text-transform:uppercase}.char--values{font-weight:700;font-size:28px;color:#0e448e}.city{margin:20px 40px 20px 20px;min-height:450px;width:540px;display:flex;flex-direction:column;border-radius:30px;background-image:linear-gradient(to bottom,#287ffe,#5eabfd);justify-content:space-evenly;align-items:center}.city h2{text-transform:uppercase;letter-spacing:2px;color:#fff}.login{margin:20px 40px 20px 20px;min-height:450px;width:540px;display:flex;flex-direction:column;border-radius:30px;background-image:linear-gradient(to bottom,#287ffe,#5eabfd);justify-content:space-evenly;align-items:center}.login h2{text-transform:uppercase;letter-spacing:1px;color:#fff;font-weight:200;font-size:18px}.form{background:#fff;padding:30px 40px;width:60%;height:200px;border-radius:4px;box-shadow:0 4px 10px 4px #13232f4d}input{font-size:16px;display:block;width:100%;padding:5px 10px;margin:10px 0;background:none;background-image:none;border:1px solid #b8bbbb;color:#000;border-radius:0;transition:border-color .25s ease,box-shadow .25s ease}input:focus{outline:0;border-color:#6d6e6e}input::placeholder{font-size:14px}.button{border:0;border-radius:4px;font-size:14px;font-weight:200;text-transform:uppercase;letter-spacing:1px;background:#2773e6;color:#fff;transition:all.5s ease;padding:10px;margin:15px 0;cursor:pointer}.button:hover,.button:focus{background:#0e448e}.button-logout{height:40px;width:110px;border:0;border-radius:4px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;background:#ffffff;color:#000;transition:all.5s ease;padding:10px;margin:30px;cursor:pointer}.button-logout:hover,.button-logout:focus{background:#124ea7;color:#fff}.user{margin:20px 40px 20px 20px;min-height:550px;width:80%;display:flex;flex-direction:column;border-radius:30px;background-image:linear-gradient(to bottom,#287ffe,#5eabfd);align-items:center}.user h2{color:#fff;font-weight:500;font-size:20px;margin:35px}.menu{width:100%;display:flex;justify-content:space-between}.data{width:100%;height:380px;background-color:#fff;display:flex;justify-content:center;align-items:center}.left{margin-left:50px;margin-right:50px;width:50%;padding:2px;font-size:17px}.right{margin-left:50px;margin-right:50px;width:50%}.right li{padding:2px;font-size:17px;color:#073d8f;word-spacing:3px}p{padding-top:2px;padding-bottom:2px;color:#073d8f;word-spacing:3px}.main{background-image:url(/assets/tlo-501feace.jpg);background-position:left;background-repeat:no-repeat;background-size:cover;min-height:calc(100vh - 160px);display:flex;justify-content:center;align-items:center}*{margin:0;padding:0;box-sizing:border-box}html{font-family:Lato,sans-serif}@media (min-width: 560px) and (max-width: 950px){.main{flex-direction:column}.city{margin-right:20px}}@media (max-width: 559px){.city{display:none}}