@font-face {
 font-family:"Roboto-Local";
 src:url("../font/thin.woff2") format("woff2");
 font-weight:100;
 font-style:normal
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/thin-italic.woff2") format("woff2");
 font-weight:100;
 font-style:italic
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/light.woff2") format("woff2");
 font-weight:300;
 font-style:normal
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/light-italic.woff2") format("woff2");
 font-weight:300;
 font-style:italic
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/regular.woff2") format("woff2");
 font-weight:400;
 font-style:normal
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/regular-italic.woff2") format("woff2");
 font-weight:400;
 font-style:italic
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/medium.woff2") format("woff2");
 font-weight:500;
 font-style:normal
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/medium-italic.woff2") format("woff2");
 font-weight:500;
 font-style:italic
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/bold.woff2") format("woff2");
 font-weight:700;
 font-style:normal
}
@font-face {
 font-family:"Roboto-Local";
 src:url("../font/bold-italic.woff2") format("woff2");
 font-weight:700;
 font-style:italic
}
* {
 padding:0;
 margin:0;
 border:0;
 box-sizing:border-box
}
html {
 font-family:"Roboto-Local";
 color:#000;
 background-color:#000;
 scroll-behavior:smooth
}
img,
svg {
 display:block
}
*::-moz-selection {
 background:#989a13
}
*::selection {
 background:#989a13
}
.current-salat::-moz-selection {
 background:#fff
}
.current-salat::selection {
 background:#fff
}
svg {
 cursor:pointer;
 transition:fill 75ms ease-in-out
}
svg:hover {
 fill:#989a13
}
.preloader {
 position:fixed;
 top:0;
 left:0;
 bottom:0;
 right:0;
 width:100%;
 height:100vh;
 background-color:#000;
 z-index:999;
 display:flex;
 align-items:center;
 justify-content:center
}
.body-wrap {
 padding:50px 100px;
 width:100%;
 height:100vh;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 background: white;
}
@media screen and (max-width: 1200px) {
 .body-wrap {
  padding:25px 50px
 }
}
@media screen and (max-width: 910px) {
 .body-wrap {
  padding:25px
 }
}
@media screen and (max-width: 480px) {
 .body-wrap {
  padding:15px
 }
}
nav {
 font-size:24px;
 font-weight:500;
 display:flex;
 align-items:center;
 justify-content:space-between
}
nav .logo {
 cursor:pointer;
 display:flex;
 align-items:center
}
nav .logo img {
 margin-left:6px
}
.select-city-modal {
 position:fixed;
 background-color:rgb(0, 0, 0);
 top:0;
 left:0;
 right:0;
 left:0;
 width:100%;
 height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 pointer-events:none;
 opacity:0;
 transition:opacity 75ms ease-in-out
}
.select-city-modal .modal {
 width:700px;
 margin:20px
}
.select-city-modal .modal .searchbar {
 /*! box-shadow:0 0 10px 1px rgba(255, 255, 255, 0.5); */
 width:100%;
 border:20px solid #000;
 border-bottom:none;
 border-top-left-radius:12px;
 border-top-right-radius:12px;
 background-color:#000;
 padding-bottom:20px
}
.select-city-modal .modal .searchbar input {
 border:none;
 outline:none;
 width:100%;
 font-family:inherit;
 font-size:16px;
 font-weight:300;
 color:#429922;
 padding:11px;
 border-radius:6px;
 background-color:#fff;
}
.select-city-modal .modal .cities {
 /*! box-shadow:0 0 10px 1px rgba(255, 255, 255, 0.5); */
 width:100%;
 height:300px;
 background-color:#fff;
 border:20px solid #000;
 border-top:none;
 border-bottom-left-radius:12px;
 border-bottom-right-radius:12px;
 overflow-y:scroll
}
.select-city-modal .modal .cities div {
 font-weight:300;
 padding:1px 0;
 cursor:pointer;
 transition:color 50ms ease-in-out;
}
.select-city-modal .modal .cities div:hover {
 color:#989a13
}
.select-city-modal .modal .cities::-webkit-scrollbar {
 width:5px
}
.select-city-modal .modal .cities::-webkit-scrollbar-thumb {
 border-radius:5px;
 background:#e0e0e0
}
.city-and-date {
 text-align:center;
 padding-bottom:40px
}
.city-and-date .city {
 font-size:60px;
 font-weight:500;
 padding-bottom:8px
}
@media screen and (max-width: 850px) {
 .city-and-date .city {
  font-size:50px
 }
}
@media screen and (max-width: 500px) {
 .city-and-date .city {
  font-size:36px
 }
}
.city-and-date .date {
 font-size:18px;
 font-weight:300
}
@media screen and (max-width: 850px) {
 .city-and-date .date {
  font-size:17px
 }
}
@media screen and (max-width: 500px) {
 .city-and-date .date {
  font-size:16px
 }
}
.salat-tiles {
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 flex-wrap:wrap
}
@media screen and (max-width: 1100px) {
 .salat-tiles {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  justify-content:space-evenly
 }
}
@media screen and (max-width: 500px) {
 .salat-tiles {
  grid-template-columns:1fr 1fr
 }
}
.salat-tiles .tile {
 padding:18px
}
@media screen and (max-width: 500px) {
 .salat-tiles .tile {
  padding:16px 8px
 }
}
.salat-tiles .tile .name {
 font-weight:300;
 font-size:17px
}
@media screen and (max-width: 850px) {
 .salat-tiles .tile .name {
  font-size:16px
 }
}
@media screen and (max-width: 500px) {
 .salat-tiles .tile .name {
  font-size:15px
 }
}
.salat-tiles .tile .time {
 font-size:50px;
 font-weight:500
}
@media screen and (max-width: 850px) {
 .salat-tiles .tile .time {
  font-size:40px
 }
}
@media screen and (max-width: 500px) {
 .salat-tiles .tile .time {
  font-size:36px
 }
}
.salat-tiles .tile .relative-time {
 font-weight:300;
 font-size:17px
}
@media screen and (max-width: 850px) {
 .salat-tiles .tile .relative-time {
  font-size:16px
 }
}
@media screen and (max-width: 500px) {
 .salat-tiles .tile .relative-time {
  font-size:15px
 }
}
.current-salat {
 color:#369533;
}
footer {
 display:flex;
 justify-content:center
}
footer a {
 padding:5px 10px
}