body { background-color: #F8F8F8;  margin-top: 10px; padding-top: 0; padding-left: 20px; padding-right: 20px;  font-family: 'Inter', Arial, sans-serif;  }
a { color: #111; text-decoration: none; border-bottom: 1px solid #c8c8c8;}
a:hover { background-color: #f8f8f8;}
strong { font-weight: bold;}

hr.cleaner { clear: both; border: 0px solid white; }

#maincontent { width: auto;  background-color: white; margin-top: 0;  max-width: 1800px;  margin-left: auto; margin-right: auto; min-height: 1000px; margin-bottom: 20px; }

#topmenu { background-color: #2E2D2D; height: 260px; }
#topmenu {

    background-color:hsla(0,0%,14%,1);
    background-image:
    radial-gradient(at 93% 22%, hsla(241,0%,10%,1) 0px, transparent 50%),
    radial-gradient(at 44% 87%, hsla(340,0%,16%,1) 0px, transparent 50%),
    radial-gradient(at 18% 15%, hsla(342,0%,8%,1) 0px, transparent 50%);
}

#topmenu h1 { width: 350px; font-size: 2em; font-weight: 600; text-transform: uppercase; padding-left: 80px; padding-top: 50px; color: white; }
#topmenu h1 img { width: 60px; float: left; position: relative; top: 11px; padding-right: 20px; }

#likeh1 { width: 350px; font-size: 2em; font-weight: 600; text-transform: uppercase; padding-left: 80px; padding-top: 50px; color: white; }
#likeh1 img { width: 60px; float: left; position: relative; top: 11px; padding-right: 20px; }

#topmenu #menu { padding-top: 50px; padding-left: 80px; height: 60px;  }
#topmenu #menu #gpslink { color: black; background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(202, 202, 202)); border: 1px solid black;  padding: 10px; padding-left: 15px; padding-right: 15px; font-size: 90%; border-radius: 3px; }
#topmenu #menu { color: white;  }
#topmenu #menu .inputtext { padding: 10px; width: 230px; }
#topmenu #menu .inputsubmit { padding: 10px; width: 50px; }
#topmenu form { display: inline; }

.widecontentblock {  padding: 80px; padding-top: 60px; }
.widecontentblock h1 { font-size: 2em; font-weight: bold; margin-bottom: 40px;  }

h2 { font-size: 2em; font-weight: 500; margin-bottom: 60px;  }

h3 { font-size: 1.4em; font-weight: 500; margin-bottom: 10px;  }
#cities .cities_one_column { float: left; width: 18%; margin-right: 1%; }

li { margin-bottom: 20px; }

#banks .one_bank { width: 200px; height: 200px; border: 1px solid silver; margin-bottom: 10px; float: left; margin-right: 20px;}
#banks .one_bank p { text-align: center;  font-size: 1em;  color: rgb(107, 107, 107); }
#banks .one_bank h3 { font-size: 1em; text-align: center; margin-bottom: 5px;  }
#banks .one_bank .image { 
    width: 100%; 
    
    height: 120px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
#banks .one_bank img { max-width: 120px; max-height: 50px;  }
#banks .one_bank:hover { background-color: #f8f8f8; }

#maincontent .widecontentblock .oneatm_data { padding: 2%;  width: auto; margin-bottom: 20px; border: 1px solid rgb(222, 222, 222); margin-bottom: 10px; height: 130px; }
/* nastaveni gradientu */
#maincontent .widecontentblock .oneatm_data { background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(247, 247, 247)); }
#maincontent .widecontentblock .oneatm_data { clear: both; }
#maincontent .widecontentblock .oneatm_data p { line-height: 140%; }

#maincontent .widecontentblock .oneatm_data .column1 { float: left; width: 20%; height: 130px; }
#maincontent .widecontentblock .oneatm_data .column1 p { 
    text-align: center; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 100%; 
    margin: 0; 
}
#maincontent .widecontentblock .oneatm_data .column1 p img {  height: 80px; }


#maincontent .widecontentblock .oneatm_data .column2 { float: left; width: 40%; height: 130px;  }

#maincontent .widecontentblock .oneatm_data .column3 { float: left; width: 22%; height: 130px;  }
#maincontent .widecontentblock .oneatm_data .column3 .links { margin-top: 5px; }
#maincontent .widecontentblock .oneatm_data .column3 p { line-height: 160%; }

#maincontent .widecontentblock .oneatm_data .column4 { float: left; width: 16%; height: 130px; text-align: center;  }
#maincontent .widecontentblock .oneatm_data .column4 img { float: left; width: 16%; height: 130px; width: 173px; }

#maincontent .widecontentblock #gpsdata { margin: 0; padding: 0; }

#maincontent .widecontentblock #gpsdata #loading-indicator { text-align: center; margin-top: 20px; margin-bottom: 20px; margin-left: auto; margin-right: auto;  }
#maincontent .widecontentblock #gpsdata #loading_div { margin-left: auto; margin-right: auto;  text-align: center;   }


#howmany_atms_found { margin-bottom: 20px; }
#info_no_atms_found { background-color: rgb(255, 240, 167); padding: 15px; margin-bottom: 10px; padding-left: 30px; }

/* maly monitor */
@media only screen and (max-width: 1500px) {
    
    body { padding-left: 0; padding-right: 0; margin-top: 0; }

}

/* maly monitor */
@media only screen and (max-width: 1200px) {
    
    body { padding-left: 0; padding-right: 0; margin-top: 0; }
    #maincontent .widecontentblock .oneatm_data .column1 { width: 25%; }
    #maincontent .widecontentblock .oneatm_data .column2 { width: 26%; }
    #maincontent .widecontentblock .oneatm_data .column3 { width: 25%; }
    #maincontent .widecontentblock .oneatm_data {  height: 170px; }

}

/* maly monitor */
@media only screen and (max-width: 960px) {
    
    #maincontent .widecontentblock .oneatm_data .column1 { float: none; width: 100%; }
    #maincontent .widecontentblock .oneatm_data .column2 { float: none; width: 100%; clear: both;}
    #maincontent .widecontentblock .oneatm_data .column3 { float: none; width: 100%; }
    #maincontent .widecontentblock .oneatm_data {  height: 550px; }

}



/* mobil sirsi jako fold treba */
@media only screen and (max-width: 650px) {
    body { padding-left: 0; padding-right: 0; }
    #maincontent .widecontentblock .oneatm_data {  height: 550px; }

#topmenu { background-color: #2E2D2D; height: 300px; }
#topmenu #menu .inputtext { padding: 10px; width: 230px; position: relative; top: 20px; }
#topmenu #menu .inputsubmit { padding: 10px; width: 50px; position: relative; top: 20px; }


}


/* mobil */
@media only screen and (max-width: 500px) {
    #cities .cities_one_column { float: none;  }
    #maincontent .widecontentblock .oneatm_data {  height: 600px; }
    #maincontent .widecontentblock .oneatm_data .column2 {  float: none; width: 100%; clear: both; height: 180px;}

    #topmenu h1 { width: 220px; font-size: 1.4em; font-weight: 600; text-transform: uppercase; padding-left: 40px; padding-top: 30px; color: white; }
    #topmenu h1 img { width: 40px; float: left; position: relative; top: 11px; padding-right: 20px; }

    #likeh1 { width: 220px; font-size: 1.4em; font-weight: 600; text-transform: uppercase; padding-left: 40px; padding-top: 30px; color: white; }
    #likeh1 img { width: 40px; float: left; position: relative; top: 11px; padding-right: 20px; }

    #topmenu #menu { padding-top: 40px; padding-left: 40px; height: 40px;  }

    .widecontentblock {  padding: 40px; padding-top: 40px; }
.widecontentblock h1 { font-size: 2em; font-weight: bold; margin-bottom: 20px;  }

#topmenu { background-color: #2E2D2D; height: 240px; }
#topmenu #menu .inputtext { padding: 10px; width: 230px; position: relative; top: 20px; }
#topmenu #menu .inputsubmit { padding: 10px; width: 50px; position: relative; top: 20px; }


#cities .cities_one_column { float: none; width: 90%; margin-right: 1%; }

h2 { font-size: 2em; font-weight: 500; margin-bottom: 30px;  }

h3 { font-size: 1.4em; font-weight: 500; margin-bottom: 10px;  }

}


/* mobil */
@media only screen and (max-width: 325px) {
  
}