@import url('https://fonts.googleapis.com/css?family=Roboto');
html, body{
    width:100%;
    height:100%;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    margin:0;
    padding:0;
    color: #404040;
    scroll-behavior: smooth;

}
header{
    width:100%;
    background-color: white;
    box-shadow: 1px 1px 10px #eaeaea;
}
header nav{
    width:100%;
    background-color: white;
    display:grid;
    grid-template-columns: 1fr 1fr;
    padding: 1rem 0;
}
header nav h1{
    margin:0;
    align-self: center;
    justify-self: center;
    padding: 0 0.25rem;
}
header nav img{
    height:75px;
    width:auto;
}
header nav ul{
    list-style-type: none;
    align-self: center;
    justify-self: center;
}
header nav ul li{
    display: inline-block;
}
header nav ul li .icon{
    display: none;
}
header nav ul li a{
    color: #404040;
    font-size: 1.5rem;
    text-decoration: none;
    font-weight: bold;
    padding: 1rem 2rem;
}
header nav ul li a:hover span{
    border-bottom: solid 3px rgba(1,123,175,0.8);
}

#heroblock{
    height: 550px;
    background-image: url('header.png');
    background-position:center center;
    background-repeat: no-repeat;
    background-size: cover;
    display:grid;
    grid-template-columns: 1fr 1fr;
}

#heroblock .herotext{
    display:grid;
    grid-template-rows: 1fr 1fr;
}
#heroblock h2{
    padding: 1rem;
    background-color: rgba(1,123,175,0.8);
    color:white;
    font-size: 2rem;
    justify-self: right;
    align-self: end;
    margin:0;
    margin-bottom: 1rem;
    font-weight: normal;
    letter-spacing: 1px;
}
#heroblock p{
    padding: 1rem;
    background-color: rgba(1,123,175,0.8);
    color:white;
    font-size: 2rem;
    justify-self: right;
    align-self: start;
    margin:0;
    margin-top: 1rem;
    font-weight: bold;
    letter-spacing: 1px;
}
#dovolena{
    background-color: white;
    color: red;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem 0;
}

#ordinacnihodiny{
    display: grid;
    grid-template-columns: 1fr 1fr;
}


#ordinacnihodiny .hodinyblock{
    background-color: rgba(1,123,175,1);
    color: white;
    display:grid;
    grid-template-rows: 1fr 4fr;
    padding: 2rem 0;
}
#ordinacnihodiny .hodinyblock .hodinytitle{
    justify-self: center;
    align-self: center;
    padding: 1rem 0;
}
#ordinacnihodiny .hodinyblock .hodinytitle h2{
    font-size: 2rem;
    margin:0;
}
#ordinacnihodiny .hodinyblock .hodinytable{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 3rem 4rem;
}
#ordinacnihodiny .hodinyblock .hodinytable > *{
    justify-self: left;
    align-self: center;
}
#ordinacnihodiny .hodinyblock ul{
    list-style-type: none;
    font-size: 1.5rem;
    margin: 0;
    padding: 0;
    text-align: center;
    font-weight: bold;
}
#ordinacnihodiny .hodinyblock ul li{
    padding: 0.5rem 0;
}
#ordinacnihodiny .addinfoblock{
    background-color: #404040;
    color:white;
}
#ordinacnihodiny .phonicon{
    height: 50px;
}
#ordinacnihodiny .hodinyblock .hodinytable .dayparttable{
    justify-self: center;
}

.addinfoblock{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.addinfoblock .addinblockin{
justify-self: center;
align-self: center;
padding: 0 4rem;
text-align: center;
}
.addinfoblock .addinblockin p{
    font-size:1.5rem;
}
.addinfoblock .addinblockin p:nth-child(1){
    font-size: 2.5rem;
    font-weight: bold;
    display:grid;
    grid-template-columns: auto auto;
}
.addinfoblock .addinblockin p:nth-child(1) img{
    align-self: center;
    justify-self: right;
    padding:0 0.5rem;
}
.addinfoblock .addinblockin p:nth-child(1) span{
    align-self: center;
    justify-self: left;
}

#sluzby{
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 0;
}
#sluzby h2{
    color: rgba(1,123,175,1);
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}
#sluzby .sluzbyblock .sluzbytitle p{
    font-size:1.5rem;
    text-align: center;
}
#sluzby .sluzbyblock .sluzbycontent{
    display: grid;
    grid-template-columns: 1fr 1fr;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbyimages img{
    float: right;
    padding: 1rem;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbyimages{
    align-self: center;
    justify-self: right;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbylist{
    font-size: 2rem;
    align-self: center;
    justify-self: left;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbylist ul{
    list-style-type: none;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbylist ul li{
    padding: 1rem 0;
}
#sluzby .sluzbyblock .sluzbycontent .sluzbylist span{
    font-size: 1.5rem;
}
#sluzby .sluzbyblock .sluzbyfooter{
    font-size:1.5rem;
    text-align: center;
}
#sluzby .sluzbyblock .sluzbyfooter a{
    font-size:1.5rem;
    color: rgba(1,123,175,1);
    text-decoration: none;
    font-weight: bold;
}
#sluzby .sluzbyblock .sluzbyfooter a:hover{
    opacity: 0.8;
}
#pojistovny{
    background-color: rgba(1,123,175,1);
}
#pojistovny .pojistovnyblock{
    max-width: 1200px;
    padding: 3rem;
    margin: 0 auto;
}
#pojistovny h2{
    color: white;
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}
#pojistovny .pojistovnytitle p{
    font-size:1.5rem;
    text-align: center;
    color: white;
}
#pojistovny .pojistovnyimages{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
#pojistovny .pojistovnyimages img{
    justify-self: center;
    align-self: center;
}
#pojistovny .pojistovnylist{
    color: white;
    display: grid;
}
#pojistovny .pojistovnylist .pojistovnylisttext{
    text-align: center;
    font-size:1.5rem;
    padding: 1rem 0; 
}
#pojistovny .pojistovnylistl table{
    font-size:1.5rem;
    margin: 0 auto;
    padding-bottom: 1rem;   
}
#pojistovny .pojistovnylistl table td{
    padding: 1rem;
}

#kvalifikace{
padding: 3rem 0;
}
#kvalifikace .kvalifikaceblock{
 max-width: 1200px;
 margin: 0 auto;
}
#kvalifikace .kvalifikaceblock h2{
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
}
#kvalifikace .kvalifikaceblock p{
    font-size: 1.5rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
}
#kvalifikace .kvalifikaceblock ul{
    list-style-type: none;
    text-align: center;
    padding: 0;
}
#kvalifikace .kvalifikaceblock ul li{
    padding: 1rem 0;
    font-size: 1.5rem;
}

#kontakt{
background-color: white;
box-shadow: -1px -1px 10px #eaeaea;
}
#kontakt .kontaktblock{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 3rem 0;
    max-width: 1200px;
    margin: 0 auto;
}
#kontakt .kontaktblock .kontaktleft{
    display:grid;
    justify-self: center;
    align-self: center;
}
#kontakt .kontaktblock .kontaktright{
    justify-self: center;
    align-self: center;
}
#kontakt .kontaktblock .kontaktleft img{
    height:75px;
    width:auto;
    justify-self: center;
    align-self: center;
}
#kontakt .kontaktblock .kontaktleft ul{
    list-style-type: none;
    font-size: 1.5rem;
    justify-self: center;
    align-self: center;
    padding: 0;
}
#kontakt .kontaktblock .kontaktleft p{
    display: grid;
grid-template-columns: 25px auto;
justify-self: center;
align-self: center;
}
#kontakt .kontaktblock .kontaktleft p .phonicon{
    height: 25px;
    align-self: center;
}
#kontakt .kontaktblock .kontaktleft p span{
    justify-self: left;
    align-self: center;
    padding-left: 0.5rem;
    font-size: 1.5rem;
}


#kontakt .footerend{
    background-color: rgba(1,123,175,1);
    color: white;
    text-align: center;
    padding: 0.5rem 0;
}
#kontakt .footerend p{
    margin: 0;
}
#kontakt .footerend p a{
    color: white;
    font-weight: bold;
    text-decoration: none;
}
#kontakt .footerend p a:hover{
    opacity: 0.8;
}
header nav .icon {
    display: none;
  }

@media(max-width: 1300px){
    #heroblock{
        grid-template-columns: 2fr 1fr;
    }
    header nav {
        grid-template-columns: 1fr 2fr;
    }
}
@media(max-width: 1600px){
    header nav {
        grid-template-columns: 1fr 3fr;
    }
}
@media(max-width: 1110px){
    #ordinacnihodiny .hodinyblock .hodinytable{
        padding: 1rem 1rem;
        grid-template-columns: 1fr 2fr 2fr;
    }
    .addinfoblock .addinblockin p{
        margin: 1rem 0;
        font-size:1.25rem;
    }
    .addinfoblock .addinblockin p:nth-child(1){
        font-size: 2em;
    }
    .addinfoblock .addinblockin p:nth-child(1) img{
        padding:0 0.5rem;
        width: 40px;
        height: 40px;
    }
    .addinfoblock .addinblockin p:nth-child(1) span{

    }
    #heroblock{
        grid-template-columns: 5fr 1fr;
    }
    header nav ul li a {
        font-size: 1.25rem;
    }
}
@media(max-width: 1000px){

}
@media(max-width: 900px){
    .addinfoblock .addinblockin{
        padding: 0 2rem;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist {
        font-size: 1.5rem;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist span {
        font-size: 1.25rem;
    }
}
@media(max-width: 790px){
    #ordinacnihodiny{
        display: grid;
        grid-template-columns: 1fr;
    }
    .addinfoblock .addinblockin{
        padding: 4rem;
    }
    #ordinacnihodiny .hodinyblock .hodinytable > *{
        justify-self: center;
        align-self: center;
    }
    #sluzby .sluzbyblock .sluzbycontent{
        grid-template-columns: 1fr;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbyimages{
        justify-self: center;
        text-align: center;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbyimages img{
        float: none;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist{
        justify-self: center;
        text-align: center;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist ul{
        padding: 0;
        margin: 0;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist {
        font-size: 2rem;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbylist span {
        font-size: 1.5rem;
    }
    #heroblock{
        grid-template-columns: 1fr;
        text-align:center;
    }
    #heroblock h2, #heroblock p{
        justify-self: center;
        text-align:center;
    }
    #kontakt .kontaktblock{
        grid-template-columns: 1fr;
    }
    #kontakt .kontaktblock .kontaktleft, #kontakt .kontaktblock .kontaktright{
        padding: 1rem 0;
        text-align: center;
    }
}
@media(max-width: 600px){
    #pojistovny .pojistovnyblock .pojistovnylist .pojistovnylistl table tr{
        display:grid;
        grid-template-columns: 1fr;
        text-align: center;
    }
    #pojistovny .pojistovnyblock .pojistovnylist .pojistovnylistl table td:nth-child(1){
        font-weight: bold;
    }
    #pojistovny .pojistovnyblock{
        padding: 1rem 0;
    }
    header nav img{
        height:50px;
        width:auto;
    }
}
@media(min-width: 600px) and (max-width: 1000px){
    #pojistovny .pojistovnyblock .pojistovnyimages{
        grid-template-columns: repeat(12, 1fr);
    }
    #pojistovny .pojistovnyblock .pojistovnyimages img{
        padding: 1rem 0;
      }
    #pojistovny .pojistovnyblock .pojistovnyimages img:nth-child(-1n + 3) {
        grid-column: span 4;
      }
    #pojistovny .pojistovnyblock .pojistovnyimages img:nth-last-child(2) {
        grid-row-start: 2;
        grid-column: 3 / span 4;
      }
      #pojistovny .pojistovnyblock .pojistovnyimages img:nth-last-child(1) {
        grid-row-start: 2;
        grid-column: 7 / span 4;
      }
}
@media(min-width: 400px) and (max-width: 600px){

    #pojistovny .pojistovnyblock .pojistovnyimages{
        grid-template-columns: 1fr 1fr;
    }
    #pojistovny .pojistovnyblock .pojistovnyimages img{
        padding: 1rem 0;
      }
    #pojistovny .pojistovnyblock .pojistovnyimages img:nth-child(-1n + 3) {
        grid-column: initial;
      }
    #pojistovny .pojistovnyblock .pojistovnyimages img:nth-last-child(2) {
        grid-row-start: initial;
        grid-column: initial;
      }
      #pojistovny .pojistovnyblock .pojistovnyimages img:nth-last-child(1) {
        grid-row-start: 3;
        grid-column: span 2;
        justify-self: center;
      }
}
@media(max-width: 480px){
    .addinfoblock .addinblockin{
        padding: 4rem 2rem;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbyimages img{
        width: 300px;
        height: auto;
    }
}

  
  @media screen and (max-width: 900px) {
      header{
          position:fixed;
          top:0;
          left:0;
      }
      #heroblock{
        margin-top:90px;
    }
    header nav ul{
        display:none;
    }
    header nav ul{
        position: absolute;
        width: 100%;
        top: 85px;
        z-index: 10;
        background-color: rgba(255,255,255,0.9);
        margin:0;
        padding: 0;
        text-align: center;
        overflow-x: hidden; /* Hide horizontal scrollbar */
        overflow-y: scroll; /* Add vertical scrollbar */
    }
    header nav ul li{
        padding: 1rem 0;
    }
    header nav .icon {
        font-size: 2rem;
        text-decoration: none;
        color: rgba(1,123,175,1);
        display:block;
        align-self: center;
        justify-self: right;
        padding: 0 2rem;
    }
    #sluzby .sluzbyblock ul li, #sluzby .sluzbyblock p, #pojistovny .pojistovnyblock, #kvalifikace .kvalifikaceblock ul li, #kontakt ul li{
        padding: 0.5rem;
    }
  }
  @media(max-width: 400px){
    #pojistovny .pojistovnyblock .pojistovnyimages{
        grid-template-columns: 1fr;
    }
    #pojistovny .pojistovnyblock .pojistovnyimages img{
        padding: 1rem 0;
      }
      #ordinacnihodiny .hodinyblock ul{
        font-size: 1.25rem;
    }
    #ordinacnihodiny .hodinyblock .hodinytable {
        padding: 0.5rem;
        grid-template-columns: 1fr 3fr 3fr;
    }
    header nav .icon {
        font-size: 1.5rem;
    }
    #sluzby .sluzbyblock .sluzbycontent .sluzbyimages img{
        padding: 0.5rem 0;
    }
    header nav .icon {
        padding: 0 1rem;
    }
    #heroblock{
        height: 400px;
    }
}