*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;font-family:PT Sans Narrow,sans-serif;font-size:18px;font-weight:400;min-height:100vh}body h1{font-size:50px}.wrapper{background:linear-gradient(180deg,#006cd7,#62809f,#a5a5a5);background-size:300% 500%;min-height:100vh;width:100%}.gray-bg{-webkit-animation:gray_bg 2s ease-in-out forwards;animation:gray_bg 2s ease-in-out forwards}@-webkit-keyframes gray_bg{0%{background-position:0 10%}to{background-position:0 50%}}@keyframes gray_bg{0%{background-position:0 10%}to{background-position:0 50%}}.blue-bg{-webkit-animation:blue_bg 2s ease-in-out forwards;animation:blue_bg 2s ease-in-out forwards}@-webkit-keyframes blue_bg{0%{background-position:0 50%}to{background-position:0 10%}}@keyframes blue_bg{0%{background-position:0 50%}to{background-position:0 10%}}.shell{margin:0 auto;max-width:1400px;padding:0 15px;width:100%}.btn{cursor:pointer;transition:.2s}.btn--search{background:transparent;border:none;padding:15px}.grid{display:flex;flex-flow:row wrap;margin:0 -20px}.grid .grid__col{flex:1 1;justify-content:center;max-width:100%;padding:0 20px}.grid .grid__col--1of2{display:flex;flex:0 0 50%;max-width:50%}.grid .grid__col--1of3{display:flex;flex:0 0 33.3333333333%;max-width:33.3333333333%}.grid .grid__col--1of4{display:flex;flex:0 0 25%;max-width:25%}.grid .grid__col--1of5{display:flex;flex:0 0 20%;max-width:20%}.grid-no-gutter{margin:0}.forecast{padding:80px 0}.card-forecast{-webkit-animation:forecast-load 1s ease-in;animation:forecast-load 1s ease-in;background:rgba(0,0,0,.2);border-radius:10px;justify-content:space-between;margin-top:20px;padding:10px 15px;transition:.4s}.card-forecast,.card-forecast .card__clouds,.card-forecast .card__left{align-items:center;display:flex}.card-forecast .card__day{width:170px}.card-forecast .card__temperature{align-items:center;display:flex;width:380px}.card-forecast .card__temperature p{font-size:30px;margin-left:20px}.card-forecast .card__image{margin-right:20px}.card-forecast .card__clouds{width:80px}.card-forecast .card__clouds i{margin-right:10px}@media(max-width:1024px){.card-forecast{display:block}.card-forecast .card__left{display:block;margin:0 auto;text-align:center}.card-forecast .card__day{width:100%}.card-forecast .card__temperature{margin:0 auto}.card-forecast .card__image{margin:0}.card-forecast .card__clouds{margin:20px auto 0}}@media(max-width:768px){.card-forecast .card__temperature{display:block;width:100%}.card-forecast .card__temperature p{margin:0}}@-webkit-keyframes forecast-load{0%{opacity:0}to{opacity:1}}@keyframes forecast-load{0%{opacity:0}to{opacity:1}}.section-search{padding-top:30px}.search-form{background-color:rgba(0,0,0,.3);border-radius:10px;display:flex;transition:.2s}.search-form input{background-color:transparent;border:none;color:#fff;font-size:20px;outline:none;padding:15px;width:100%}.search-form input::-webkit-input-placeholder{color:#cdcdcd}.search-form input::placeholder{color:#cdcdcd}.search-form:focus-within{background-color:rgba(0,0,0,.4)}.search-form i{color:#cdcdcd}.weather{padding-top:80px}.weather .weather__inner{-webkit-animation:weather-load 1s ease-in-out;animation:weather-load 1s ease-in-out;background:rgba(0,0,0,.2);border-radius:10px;padding:20px}.weather .weather__bottom{display:flex;justify-content:center;padding-top:60px;width:100%}.weather .weather__temperature{align-items:center;border-right:1px solid #d3d3d3;display:flex;justify-content:center;width:50%}.weather .weather__temperature .weather__temperature-icon{height:auto;max-width:200px;width:100%}.weather .weather__temperature img{height:auto;width:100%}.weather .weather__temperature h1{font-size:80px}.weather .weather__temperature p{font-size:22px}.weather .weather__details{display:flex;justify-content:center;width:50%}@media(max-width:1024px){.weather .weather__bottom{display:block;margin:0 auto}.weather .weather__temperature{border-bottom:1px solid #d3d3d3;border-right:none;margin:0 auto;width:80%}.weather .weather__temperature h1{font-size:50px}.weather .weather__details{width:100%}}@media(max-width:768px){.weather .weather__temperature{display:block;padding-bottom:20px;text-align:center}.weather .weather__temperature-icon{margin:0 auto}}.card-weather{align-items:center;display:flex;text-align:center}.card-weather .card__details h3{margin-bottom:3px}@media(max-width:1024px){.card-weather{margin-top:60px}}@-webkit-keyframes weather-load{0%{opacity:0}to{opacity:1}}@keyframes weather-load{0%{opacity:0}to{opacity:1}}
/*# sourceMappingURL=main.c306895d.css.map*/