.title,h1,p,span{background-color:#666;-webkit-background-clip:text;-moz-background-clip:text;background-clip:text;color:#dcdcdc;text-shadow:2px 2px 10px #000}.title{display:inline;text-align:center;font-family:Poppins,Arial,sans-serif}.city,.title{font-size:40px;color:#dcdcdc;text-shadow:2px 2px 10px #000}.city{font-family:Poppins,sans-serif}h1{font-size:100px}.date,h1{text-align:center}.date{display:inline;font-size:30px;margin:30px 0 20px;text-transform:capitalize;text-shadow:2px 2px 10px #000;color:#dcdcdc}.text{font-size:22px;text-align:center}.chat{font-size:27px;padding-left:70px;position:relative;text-shadow:2px 2px 10px #000;color:#dcdcdc}.chat:before{content:"";position:absolute;width:70px;height:70px;background-image:url(img/d2.gif);background-size:cover;opacity:.6;left:-5px}.clouds-info,.feels-info,.humidity-info,.pressure-info,.wind-info{font-weight:700;text-shadow:2px 2px 10px #000;color:#dcdcdc}.clock{font-size:32px;color:rgba(240,248,255,.38);font-family:Poppins,sans-serif;text-shadow:2px 2px 10px #000;color:#dcdcdc}
.btn{position:relative;width:70px;height:70px;padding:2px 8px;margin:20px;background-color:hsla(0,0%,83.9%,.82);font-size:28px;font-family:Poppins,Arial,sans-serif;color:#868383;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;outline:none;transition:all .3s ease;box-shadow:-7px -7px 20px 0 hsla(0,4%,81%,.51),7px 7px 20px 0 #000}.btn,.btn:before{border-radius:50%}.btn:before{position:absolute;height:80%;width:80%;content:"";background:#d6d6d6;top:50%;left:50%;transform:translate(-50%,-50%)}.btn:hover{transform:scale(1.05)}.btn:hover:before{box-shadow:inset -7px -7px 20px 0 #fff,inset 7px 7px 20px 0 rgba(0,0,0,.3)}.btn i{z-index:5;color:#868383;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s ease}.reload{text-shadow:1px 1px 1px wheat}.reload.loading{animation:rotate 2s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.reload:before{background-image:url(img/bg.png);background-position:50%;background-repeat:no-repeat;background-size:contain}.btn:hover i{font-size:31px}.grade{background-color:rgba(0,0,0,.43)!important;border-radius:20px;margin:20px 2px}.grade.cels:before,.grade.far:before{position:absolute;height:55%;width:80%;font-family:Poppins,Arial,sans-serif;font-weight:700;content:"C°";background:none}.grade.far:before{content:"F° "}.grade:hover:before{box-shadow:none}.grade.checked{color:rgba(240,248,255,.78);background-color:hsla(0,0%,50.2%,.42)!important;box-shadow:inset -3px -3px 8px 0 #fff,inset 3px 3px 8px 0 rgba(0,0,0,.3)}.grades{width:350px;display:flex;flex-direction:row}.select{color:rgba(240,248,255,.78);-webkit-user-select:none;-ms-user-select:none;user-select:none;font-size:26px;font-weight:700;outline:none!important;background-color:rgba(0,0,0,.43)!important;border-radius:20px}.select option{outline:none;background-color:rgba(0,0,0,.308)}.select option,.select option:checked,.select option:hover{cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.select option:checked,.select option:hover{outline:none!important;border-radius:10px;background-color:rgba(146,145,145,.308)!important}.search{height:50px;max-width:360px;padding:2px 8px 2px 10px;border-radius:10px;background-color:hsla(0,0%,100%,.57);font-size:28px;color:#868383;-webkit-user-select:none;-ms-user-select:none;user-select:none;outline:none;box-shadow:-1px -1px 1px 0 hsla(0,0%,100%,.7),1px 1px 1px 0 rgba(0,0,0,.1)}.search-form{margin:20px 0;display:flex;position:relative!important}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}.search::-webkit-input-placeholder{opacity:.4;font-family:Poppins,Arial,sans-serif;font-weight:lighter;color:#333}.search:-ms-input-placeholder{opacity:.4;font-family:Poppins,Arial,sans-serif;font-weight:lighter;color:#333}.search::-ms-input-placeholder{opacity:.4;font-family:Poppins,Arial,sans-serif;font-weight:lighter;color:#333}.search::placeholder{opacity:.4;font-family:Poppins,Arial,sans-serif;font-weight:lighter;color:#333}.search:focus{background-color:hsla(0,0%,100%,.84)}.cross,.voice{position:absolute;width:40px;height:40px;top:0;cursor:pointer;background-color:transparent;background-clip:unset;background-size:cover;background-position:50%;opacity:.3;transition:all .3s ease;margin-top:5px}.cross{background-image:url(img/cross.png);right:200px}.voice{background-image:url(img/voice.png);right:160px}.voice:hover{opacity:.6}.cross:hover{opacity:1}.voice.speakPls{animation:pulse 1s infinite}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(83,82,77,.4)}70%{box-shadow:0 0 0 15px rgba(83,82,77,.4)}to{box-shadow:0 0 0 0 rgba(83,82,77,.4)}}.submit{width:150px;height:50px;background-color:rgba(0,0,0,.43);border:none;border-radius:12px;color:rgba(240,248,255,.78);font-size:20px;font-family:Poppins,Arial,sans-serif;transition:all .3s ease;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none;outline:none;box-shadow:-3px -3px 1px hsla(0,0%,100%,.19),3px 3px 1px rgba(94,104,121,.28)}.submit:hover{box-shadow:-3px -3px 7px hsla(0,0%,100%,.45),3px 3px 7px rgba(94,104,121,.28)}.day-night{background-image:url(img/daynight.png);background-position:50%;background-repeat:no-repeat;background-size:contain;opacity:.5}.day-night:before{display:none}.day-night.white{transition:all .3s ease;opacity:1;box-shadow:-7px -7px 20px 0 hsla(0,30%,84%,.51),7px 7px 20px 0 #8a8686}.speechVoice{width:40px;border-radius:10px;background-color:rgba(250,255,255,.36);background-image:url(img/sp.png);background-size:cover;background-position:50%}.speechVoice:before,.stopSpeech{display:none}.stopSpeech{position:fixed;margin-top:60px;margin-left:320px;width:50px;height:30px;border-radius:10px;font-size:12px;color:#f0f8ff;background-color:rgba(250,255,255,.36)}.stopSpeech:before{display:none}.stopSpeech.go{display:block}
.map,.map-local,.proposal,.temperature,.title-text{padding:15px;border-radius:20px;margin:20px}.temp-days{margin:20px 0 0;grid-area:side;border-radius:20px}.title-text{margin:60px 0 0}.prev,.tomorrow{background-color:hsla(0,0%,50.2%,.42);box-shadow:inset -3px -3px 8px 0 #fff,inset 3px 3px 8px 0 rgba(0,0,0,.3)}.prev,.today,.tomorrow{width:170px;padding:2px 8px;border-radius:20px;margin:20px}.today{background-color:rgba(0,0,0,.43);box-shadow:inset -3px -3px 7px hsla(0,0%,100%,.45),inset 3px 3px 7px rgba(94,104,121,.28)}.temp-days p{font-size:24px;color:#f0f8ff}.prev img,.today img,.tomorrow img{height:100px}
*{padding:0;margin:0;border:0}*,:after,:before{box-sizing:border-box}body,html{width:100%;min-width:100%;position:relative;margin:0;padding:0;font-family:Poppins,Arial,sans-serif;display:flex;flex-direction:column;min-height:100vh;background:url(img/fon.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat;transition:background-image 1s ease-out}a{text-decoration:none;color:rgba(109,165,210,.37);letter-spacing:1px;-webkit-text-decoration:underline solid rgba(22,150,189,.8);text-decoration:underline solid rgba(22,150,189,.8)}a:hover{color:rgba(243,240,240,.712)}li{list-style:none}.grid{display:grid;grid-template-areas:"header header header header" "side sidebar sidebar content" "side sidebar sidebar content";grid-template-columns:200px auto auto 35%;grid-template-rows:100px auto auto 200px;background-color:rgba(38,38,38,.52);height:100vh;width:100%;max-width:100%;padding:10px}header{grid-area:header;display:flex;justify-content:space-evenly;width:100%}aside{width:100%;grid-area:sidebar}.proposal{height:200px}main{width:100%;margin-top:120px}.hat,main{grid-area:content}.hat{text-align:center}.row{width:100%;display:flex;justify-content:space-evenly}.column{display:flex;flex-direction:column}.search-inp{justify-content:center;padding-top:12px}.icon-now{height:150px;-o-object-fit:contain;object-fit:contain}.content{width:100%;font-size:28px}.map{margin:60px 20px 20px 0;width:100%;height:100%}.map-local{height:300px}ymaps{max-width:100%}.ymaps-2-1-76-map.ymaps-2-1-76-i-ua_js_yes.ymaps-2-1-76-map-bg{border:10px solid transparent;border-radius:85px;overflow:hidden}.start{display:none;position:absolute;width:100%;height:100%;top:0;left:0;background-color:#292929;z-index:901;background-image:url(img/28.jpg);background-position:50%;background-repeat:no-repeat}.start.show{display:block}.search-form.error:before{content:"Not found by request...";display:block;z-index:901;position:absolute;bottom:-30px;width:250px;height:35px;padding:5px 15px;border-radius:10px;background-color:rgba(41,41,41,.62);color:rgba(255,130,70,.76);box-shadow:0 .6em .5em -.5em rgba(0,0,0,.35)}.reload.error{position:relative}.reload.error:before{content:"sorry, image haven't found yet...";display:block;z-index:901;position:absolute;font-size:17px;width:320px;height:35px;margin-top:55px;padding:5px 15px;border-radius:10px;background-color:rgba(41,41,41,.38);background-image:none;color:hsla(0,0%,100%,.76);box-shadow:0 .6em .5em -.5em rgba(0,0,0,.35)}
@media (max-width:1290px){.city,.title{font-size:30px}.date{font-size:28px}}@media (max-width:1120px){.grid{grid-template-areas:"header header header" "sidebar sidebar content" "side side side";grid-template-columns:auto auto auto;grid-template-rows:100px 560px auto}.column{flex-direction:row}.temp-days{width:100%;display:flex;justify-content:center;margin:0 auto}.chat{font-size:22px}.city,.title{font-size:26px}.map{max-width:500px;width:100%;text-align:center}.date{font-size:22px}.submit{width:110px}.voice{right:115px}.cross{right:150px}header{display:block}header .row:first-child{height:80px;margin-top:-20px;justify-content:end}.search-inp{justify-content:end;padding-top:0}.proposal{margin:0}}@media (max-width:965px){.map-local{margin-top:0}.ymaps-2-1-76-map{max-width:350px}}@media (max-width:900px){.grid{grid-template-areas:"header" "hat" "sidebar" "content" "side";grid-template-rows:100px 150px 200px auto auto;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.temperature{margin:0}.temperature .row:first-child{justify-content:end}.icon-now{height:350px;position:absolute;right:0}.hat{margin-top:60px;grid-area:hat}.map{float:right;max-width:400px}.proposal{width:40%}}@media (max-width:678px){.icon-now{height:200px;position:absolute;right:10%}.proposal{width:100%}.content{font-size:22px}main{margin-top:210px}.map{margin-right:0;max-width:100%}.map-local{margin:0 auto}.ymaps-2-1-76-map{max-width:450px}}@media (max-width:620px){.chat{font-size:18px}.proposal{max-width:80%;width:100%}.column{flex-direction:column;width:100%}.prev,.today,.tomorrow{max-width:95%;display:flex;justify-content:space-around;align-items:center;background-color:hsla(210,1%,40%,.39);margin:5px;width:100%}}@media (max-width:545px){.map-local{height:150px}.btn{width:50px;height:50px;margin:20px 0}.btn,.select{font-size:16px}.select{width:58px}.grades{padding-left:10px}.search{height:40px;max-width:330px;width:60%}.cross{right:210px}.voice{right:180px}.cross,.voice{width:30px;height:30px}.submit{width:80px;height:40px}.map,.map-local,.proposal,.temperature,.title-text{padding:15px 0 0}.map{padding-top:0}main{margin-top:160px}.icon-now{right:0;height:135px}h1{font-size:70px}.hat p{font-size:15px;width:80%}.text{margin-top:20px}.ymaps-2-1-76-map.ymaps-2-1-76-i-ua_js_yes.ymaps-2-1-76-map-bg{width:75%!important}}@media (max-width:440px){.prev,.today,.tomorrow{max-width:70%}.hat{text-align:left}.temperature{padding:30px 0 0}}
.grid.light{background-color:hsla(0,0%,94%,.41)}.map-local.light p,.map.light p,.map.light span,.proposal.light p,.temp-days.light p,.temperature.light p,.temperature.light span{color:#464545!important;text-shadow:7px 7px 30px #f1f1f1,-7px -7px 30px #f1f1f1;font-weight:600}.prev.light,.tomorrow.light{background-color:#dcdcdc;box-shadow:-3px -3px 7px hsla(0,2%,70%,.45),3px 3px 9px rgba(0,0,0,.28)}.today.light{background-color:#b1b0b0;box-shadow:inset -3px -3px 7px hsla(0,0%,100%,.45),inset 3px 3px 7px rgba(94,104,121,.28)}.prev.light p,.today.light p,.tomorrow.light p{color:#696868}.submit.light{background-color:#e4e4e4;color:rgba(0,0,0,.67);font-weight:600;box-shadow:-3px -3px 20px hsla(0,1%,80%,.38),3px 3px 20px rgba(23,25,29,.37)}.submit.light:hover{background-color:#f3eeee;box-shadow:-3px -3px 20px rgba(87,76,76,.38),3px 3px 20px rgba(201,203,208,.37)}.grade.light.checked{color:#fff8dc;background-color:#8c8888;box-shadow:inset -3px -3px 8px 0 #fff,inset 3px 3px 8px 0 rgba(0,0,0,.3)}.grade.light,.reload.light,.select.light{box-shadow:-7px -7px 20px 0 hsla(0,30%,84%,.51),7px 7px 20px 0 #8a8686}.ymaps-2-1-76-inner-panes.light:after{background:url(img/map-mask-light.png);background-size:cover;background-position:50%;background-repeat:no-repeat;z-index:900}.clock.light{color:#fff;text-shadow:2px 2px 10px #000,-2px -2px 10px #000}