.header-menu{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.header-menu__top{margin-bottom:20px;display:grid;font-family:Bebas Neue,sans-serif;color:#626262;grid-template-columns:repeat(3,1fr);grid-column-gap:10px;grid-template-rows:1fr;width:100%;height:60px}@media screen and (max-width:480px){.header-menu__top{grid-template-columns:2fr 1fr}}.header-menu__top-title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:1.5rem}@media screen and (max-width:768px){.header-menu__top-title{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.header-menu-weather{width:100%;display:grid;grid-template-columns:1fr 1fr;grid-column-gap:100px;grid-row-gap:30px}@media screen and (max-width:768px){.header-menu-weather{grid-template-columns:1fr}}
.update-button{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;width:100%;grid-column:2}@media screen and (max-width:768px){.update-button{-webkit-box-align:center;-ms-flex-align:center;align-items:center}}@media screen and (max-width:480px){.update-button{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}}.update-button__button{background:#c0c0c6;border-radius:5px;height:40px}@media screen and (max-width:768px){.update-button__button-text{display:none}}.update-button__button-icon{height:40px;display:none}@media screen and (max-width:768px){.update-button__button-icon{display:block}}
.weather-main.updating .weather-main__icon{animation:rot 1s linear 0s infinite normal none running;-webkit-animation:rot 1s linear 0s infinite normal none running}@keyframes rot{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes rot{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.weather-main{width:100%;display:grid;grid-template-areas:"city city" "icon degree";grid-template-columns:repeat(2,1fr);-webkit-transition-duration:1s;-o-transition-duration:1s;transition-duration:1s;-webkit-transition-timing-function:linear;-o-transition-timing-function:linear;transition-timing-function:linear;grid-row-gap:10px}.weather-main__city{grid-area:city;font-size:2rem}.weather-main__city h2{font-weight:700}.weather-main__icon{grid-area:icon;height:150px;width:150px}@media screen and (max-width:1024px){.weather-main__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:150px;width:150px}}@media screen and (max-width:480px){.weather-main__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:110px;width:110px}}.weather-main__degree{grid-area:degree;text-align:end;font-size:6rem}.weather-main.updating{width:100%;display:grid;grid-template-areas:"city city city" ". icon .";grid-template-columns:repeat(3,1fr);grid-row-gap:10px;grid-template-rows:40% 1fr}.weather-main.updating .weather-main__icon{grid-area:icon;height:120px;width:120px}@media screen and (max-width:1024px){.weather-main.updating .weather-main__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:80px;width:80px}}
.weather-detailed__item{background:#d1dfe9;width:100%;padding:5px 10px;margin-bottom:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;font-size:.9rem}.weather-detailed__title{font-weight:700;padding-right:10px}
.city-card{grid-template-areas:"city-card-header" "city-card-data";grid-template-rows:20% 1fr;align-self:end}.city-card__header{grid-area:city-card-header;padding-bottom:10px}.city-card__data{grid-area:city-card-data}
.city-card-header{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.city-card-header,.city-card-header__first-part{display:-webkit-box;display:-ms-flexbox;display:flex}.city-card-header__first-part{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.city-card-header__first-part>*{margin-right:10px}.city-card-header__second-part{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.city-card-header__header{-o-text-overflow:ellipsis;text-overflow:ellipsis;font-weight:700}.city-card-header__degree,.city-card-header__header{display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.5rem}.city-card-header__degree,.city-card-header__icon{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.city-card-header__icon{-ms-flex-negative:0;flex-shrink:0;width:40px;height:40px}.city-card-header__close,.city-card-header__icon{display:-webkit-box;display:-ms-flexbox;display:flex}.city-card-header__close{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}
.round-button{background:#97bcd6;border-radius:50%;height:40px;width:40px}
.card-loading__icon{animation:rot 1s linear 0s infinite normal none running;-webkit-animation:rot 1s linear 0s infinite normal none running}@keyframes rot{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes rot{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.card-loading{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.card-loading__icon{margin-top:20px;height:120px;width:120px}@media screen and (max-width:1024px){.card-loading__icon{-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:80px;width:80px}}
.favorite-cities{display:grid;grid-template-areas:"add-menu" "city-cards";grid-template-rows:minmax(auto,10%) 1fr;grid-template-columns:1fr;grid-row-gap:20px;width:100%}.favorite-cities__add{grid-area:add-menu}.favorite-cities__cities{grid-area:city-cards;display:grid;grid-template-columns:repeat(2,1fr);grid-column-gap:100px;grid-row-gap:20px}@media screen and (max-width:640px){.favorite-cities__cities{grid-template-columns:1fr}}@media screen and (max-width:768px){.favorite-cities__cities{grid-column-gap:50px;grid-template-columns:1fr}}
.add-city{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media screen and (max-width:640px){.add-city{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start;-webkit-box-align:start;-ms-flex-align:start;align-items:start}}.add-city__header{font-size:1.5rem;font-family:Bebas Neue,sans-serif;color:#626262}.add-city__input{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-wrap:nowrap;flex-wrap:nowrap}@media screen and (max-width:768px){.add-city__input{width:100%}}@media screen and (max-width:640px){.add-city__input{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:start}}.add-city__input form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;width:300px}@media screen and (max-width:768px){.add-city__input form{width:350px}}@media screen and (max-width:640px){.add-city__input form{width:100%}}.add-city__input form input{background:#dcdfe6;padding:10px;width:200px;height:40px;margin-right:10px;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2}.add-city__input form input::-webkit-input-placeholder{font-size:.9rem}.add-city__input form input::-moz-placeholder{font-size:.9rem}.add-city__input form input:-ms-input-placeholder{font-size:.9rem}.add-city__input form input::-ms-input-placeholder{font-size:.9rem}.add-city__input form input::placeholder{font-size:.9rem}.add-city__input form button{font-size:1.5rem}
.app{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:0 40px}@media screen and (max-width:1024px){.app{padding:0 30px}}@media screen and (max-width:768px){.app{padding:0 20px}}.app-container{width:100%}@media screen and (min-width:1024px){.app-container{max-width:1000px}}.app-header{min-height:30vh;grid-row:1/1;grid-column:1/1;margin-bottom:40px}.app-body{min-height:70vh;grid-row:2/2;grid-column:1/1}
@font-face{font-family:Bebas Neue;font-weight:400;font-style:normal;src:url(../../BebasNeueRegular.woff) format("woff")}@font-face{font-family:Open Sans;font-weight:600;font-style:normal;src:url(../../OpenSans-SemiBold.woff) format("woff")}@font-face{font-family:Open Sans;font-weight:400;font-style:normal;src:url(../../OpenSans-Regular.woff) format("woff")}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;font-size:100%;vertical-align:baseline}a:active,a:hover{outline:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}html{-webkit-box-sizing:border-box;box-sizing:border-box}:focus{outline:0}audio,img,video{max-width:100%;height:auto}audio,canvas,iframe,img,svg,video{vertical-align:middle}iframe{border:0}textarea{resize:none;overflow:auto;vertical-align:top;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none}button,input,select,textarea{outline:none;border:none;font-size:100%;margin:0}button,input{line-height:normal}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}html{line-height:1.4;font-size:18px;color:#101010;height:100%}@media screen and (max-width:1280px){html{font-size:16px}}@media screen and (max-width:768px){html{font-size:15px}}@media screen and (max-width:480px){html{font-size:14px}}body{margin:0;padding:0;font-family:Open Sans,sans-serif;font-size:18px;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}h1,h2,h3,h4,h5,h6{margin:0}a{text-decoration:none}li,ul{margin:0;padding:0;list-style-type:none}