body {
    background: #FFFFFF;
    color: #333333;
    font: 85%/140% Arial, Helvetica, sans-serif;
    width: 800px;
    width: 960px;
    max-width: 96%;
    margin: 0 auto;
}

h1 {
    font-size: 1.7em;
    line-height: 110%;
    color: #000;
    margin: 1% auto 2% auto;
    text-align: center;
}

h2, h3 {
    font-size: 1.2em;
    color: #000;        
    padding: 1%;
    margin: 1%;
}

h3 {
    font-size: 1em;
}

p {
    /*margin: 0 0 20px;*/
    padding: 1%;
    margin: 1%;
}

address {
    color: #000;
    padding: 0.5%;
    margin: 1%;
}

article { 
    display: block;
}

#pagewrap {
    width: 978px;
    max-width: 96%;
    margin: 0 auto;
}
.wrapper {
    overflow: hidden;
}

a, a:hover, a:visited {
    color: #303030;
}

/************************************************************************************
MENU
*************************************************************************************/

.topmenu {
    width: 100%;
    background-color: #FFDF8F;    
    background-color: #FEFEFE;    
    margin: 2px auto 0px auto;
    overflow: hidden;
    border-radius: 4px;
}

.topmenu ul {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow: hidden;
    background-color: #FFDF8F;    
    background-color: #ffdf8f;        
}

.topmenu li a {    
    display: block;
    font-size: 14px;
    padding: 10px 20px;
    margin: 0 1px 0 1px;
    /*  border-left: 1px solid #F4F4F4;
      border-right: 1px solid #CAA445;
      border-top: 1px solid #CAA445;
      border-bottom: 1px solid #CAA445;*/
    color: #303030;
    text-decoration: none;
    text-transform: uppercase;
}

.topmenu li a:hover, .topmenu .topmenu-btn:hover {
    /*background-color: #ebc669;*/
    background-color: #eece7e;
}

.topmenu .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

/* menu icon */

.topmenu .topmenu-icon {
    cursor: pointer;
    display: inline-block;
    float: left;
    padding: 28px 20px;
    position: relative;
    user-select: none;
}

.topmenu .topmenu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.topmenu .topmenu-icon .navicon:before,
.topmenu .topmenu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.topmenu .topmenu-icon .navicon:before {
    top: 5px;
}

.topmenu .topmenu-icon .navicon:after {
    top: -5px;
}

/* menu btn */

.topmenu .topmenu-btn {
    display: none;
}

.topmenu .topmenu-btn:checked ~ .menu {
    max-height: 240px;
}

.topmenu .topmenu-btn:checked ~ .topmenu-icon .navicon {
    background: transparent;
}

.topmenu .topmenu-btn:checked ~ .topmenu-icon .navicon:before {
    transform: rotate(-45deg);
}

.topmenu .topmenu-btn:checked ~ .topmenu-icon .navicon:after {
    transform: rotate(45deg);
}

.topmenu .topmenu-btn:checked ~ .topmenu-icon:not(.steps) .navicon:before,
.topmenu .topmenu-btn:checked ~ .topmenu-icon:not(.steps) .navicon:after {
    top: 0;
}

.smallmenu {
    margin: 0 0 0 16px;
    padding: 0 0 24px 0;
}

.smallmenu li {    
    display: inline-block;
    list-style-type: none;        
}

.smallmenu li a {
    float: left;
    margin: 8px 0 0 0;
    padding: 6px 10px;
    text-decoration: none;
    border-radius: 4px;
}

.smallmenu li a:hover {
    line-height: 98%;
}

/* 36em = 573px */

@media (min-width: 760px) {
    .topmenu ul {
        display: flex;
        flex-flow: wrap;
    }    
    .topmenu {
        margin: 0.5% auto;
    }
    .topmenu li {
        float: left;
    }
    .topmenu li a {
        padding: 10px 20px;
    }
    .topmenu .menu {
        clear: none;
        float: left;
        max-height: none;
    }
    .topmenu .topmenu-icon {
        display: none;
    }
}

@media (min-width: 846px) {
    .topmenu ul {
        display: flex;
        justify-content: center;
    }
    .topmenu {
        margin: 0.5% auto;
    }
    .topmenu li {
        float: left;
    }
    .topmenu li a {
        padding: 10px 20px;
    }
    .topmenu .menu {
        clear: none;
        float: left;
        max-height: none;
    }
    .topmenu .topmenu-icon {
        display: none;
    }
}



/************************************************************************************
HEADER
*************************************************************************************/

.header {
    display: block;
    margin: 0 auto;
    font-size: 150%;
    line-height: 200%;
    text-transform: uppercase;        
    text-align: center;
    font-weight: bold;
    color: #303030;
}

.logo {
    border-radius: 4px;
}

.logo a {
    color: #ffffff !important;
    text-decoration: none;
    /*    text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
        color: #9c8468;
        opacity: 0.3;*/
}

.logo {
    color: #ffffff;
    height: 96px;    
    position: 0 auto;
    font-size: 53px;
    margin-top: 0;
    font-weight: bolder;
    text-align: center;
}

.logo span {
    display: block;
    padding-top: 0px;    
}

.logorect {
    margin: 16px 0 0 0;
}

/************************************************************************************
FOOTER
*************************************************************************************/

.fullwidthfoot {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

.fullwidthfootbottom {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 4px;
}

.logo50 {
    width: 50%; 
    border-radius: 4px;
}

.logo50 a {
    color: #ffffff !important;
    text-decoration: none;
}

.logo50 {
    float: left;
    color: #ffffff;
    height: 48px;    
    position: 0 auto;
    font-size: 38px;
    margin-top: 0;
    font-weight: bolder;
    text-align: center;
}

.logo50 span {
    display: block;
    padding-top: 0px;    
}

.footmenu {
    float: left;
    height: 160px;
    padding-left: 10%;
}

.footmenu a {
    float: left;
    margin-top: 6px;
    padding: 6px 10px;
}

.footmenu a:hover {
    font-weight: bold;
}

.footmenu ul {
    list-style-type: none;
}

.footmenu ul li a {
    float: none;
    text-decoration: none;
}

.footmenu ul li a:hover {
    text-decoration: underline;
}

.footadress {
    float: left;
    padding-left: 50px;
    height: 160px;
}

.footadress a {   
    display: block;
    width: 100%;
    margin: 0;
    padding: 10% 5% 0 25%;
    font-size: 120%;
    font-weight: bold;
    text-decoration: none;
}

.footadress p {
    width: 100%;
    padding: 0 5% 5% 25%;
}

.footopeningtime {
    float: left;
    width: 100%;
    height: 160px;
}

.footopeningtime p {
    width: 80%;
    padding: 5% 5% 0 5%;
}

#foottimetable {
    width: 90%;
    padding: 4% 5% 5% 20%;
}

#foottimetable .ttrow {
    clear: both;
}

#foottimetable .ttrowbold {
    font-weight: bold;
    clear: both;
}

#foottimetable .ttden {
    float: left;
    width: 30%;
}

#foottimetable .ttod {
    float: left;
    width: 15%;
}
#foottimetable .ttspace {    
    float: left;
    text-align: center;
    width: 10%;
}
#foottimetable .ttod {
    float: left;
    width: 15%;
}
#foottimetable .ttdo {
    float: left;
    width: 20%;
}

#foottimetable .ttosoba {
    float: left;
    width: 30%;
}

.copywrite {
    height: 32px;
    text-align: center;
    font-size: 0.8em;
    line-height: 32px;    
}

/************************************************************************************
KONTAKT
*************************************************************************************/

#kontakt a {
    color: #000;
    font-style: normal;
    font-weight: bolder;
    letter-spacing: 0.1em;
}

#kontakt p {
    padding-left: 0;
}

#kontakt h2{
    padding-left: 3%;
    font-size: 110%;
}

#kontakt address {
    padding-left: 3%;
    font-size: 95%;
}

#kontakt address p {
	padding: 2% 2% 2% 0;
}

#kontakt.bold, #kontakt strong {
    font-size: 95%;
    font-weight: bold;
}

#kontakt .phone {
    font-size: 120%;
    font-weight: bolder;
    line-height: 130%;
    font-style: normal;
}

#kontakt form {        
    width: 100%;
    padding: 1% 3%;
    margin: 0;
    font-size: 100%;
    line-height: 180%;
}

#kontakt input {
    margin: 0 0 8px 0;
    border-radius: 4px;
    border: 1px solid #75d2c8;
    padding: 4px;
}

#kontakt label {  
    color: #62bab0;
}

#kontakt textarea {
    width: 90%;
    border-radius: 4px;
    border: 1px solid #75d2c8;
    padding: 4px;
}

#kontakt .mail_butt {
    border-radius: 4px;
    border: 1px solid #75d2c8;
    color: #FFFFFF;
    background-color: #75d2c8;
    padding: 8px 26px;
    font-size: 110%;
    font-weight: bold;
}

#kontakt img .col50 {
    float: left;
    display: block;
    width: 100%;
}

/************************************************************************************
MAPY
*************************************************************************************/

/*
.wrapper_eh {
    display: table;  Make the container element behave like a table 
    width: 100%;  Set full-width to expand the whole page 
}

.col_eh {    
    display: table-cell;
    max-width: 0px;
}*/

.wrapper_eh {
    display: table;
    width: 100%;
    border-radius: 4px;
}

.scrollable {
    overflow:scroll !important;
}

.col_eh {
    float: left;
    width: 50%;
    height: 440px;
    overflow: hidden;
    border-radius: 4px;
}

.col_eh h2 {
    margin: 0;
    padding: 2% 5% 2% 5%;
}

.col_eh p {
    margin: 0;
    padding: 5% 5% 0 5%;
}

#mapa-brno {      
    width: 100%;
    height: 440px;
    border-radius: 4px;
}

.break {
    clear: both;
}

.break2 {
    height: 2px;
    clear: both;
}

/************************************************************************************
COLUMN
*************************************************************************************/
.col {
    background: #eee;
    float: left;
    /*margin-left: 3.2%;*/
    /*margin-bottom: 30px;*/
    margin-bottom: 0px;
    border-radius: 4px;
}
.fullwidth .col {
    float: none;
    margin-left: 0;
}

/* grid4 col */
.grid4 .col {
    /*width: 22.6%;*/
    width: 25%;
    height: 13px;
    padding-bottom: 22%;
}
/* grid3 col */
.grid3 .col {
    width: 33.3%;
}
/* grid2 col */
.grid2 .col {
    width: 50%;
}
/* clear col */
.grid4 .col:nth-of-type(4n+1),
.grid3 .col:nth-of-type(3n+1),
.grid2 .col:nth-of-type(2n+1) {
    margin-left: 0;
    clear: left;
}

/************************************************************************************
ARTICLE
************************************************************************************/


.shadow {
    -moz-box-shadow:    inset 0 0 10px #555555;
    -webkit-box-shadow: inset 0 0 10px #555555;
    box-shadow:         inset 0 0 3px #555555;
}

article#top, article#table {
    background-color: #FAFAFA;
    padding: 6px 0;
}

article#top p {    
    width:92%;
    margin: 0.5em 1.5em;
    padding: 0.5em 1.5em;    
    text-align: left;    
    line-height: 1.6em;
}

article#top h2, article#table h2, #equip h2 {
    width: 95%;
    margin: 16px 8px 8px 14px;
    padding: 0.5em;    
    text-align: left;    
    text-transform: uppercase;
    line-height: 24px;
    border-left: 20px solid #84e0d7;
    border-radius: 4px 4px;
}

article#top h3, article#table h2, #equip h3 {
    width: 95%;
    margin: 12px 8px 8px 14px;
    padding: 0.5em;    
    text-align: left;    
    text-transform: uppercase;
    line-height: 20px;
    border-left: 20px solid #ffdf8e;
    border-radius: 4px 4px;
}

article#top div, article#top ul {
    margin: 12px 14px 8px 14px;
    border-left: 20px solid #f0f0f0;
    border-right: 20px solid #f0f0f0;
    border-radius: 4px 4px;
}

article#top span, article#top .alert {
    display: block;
    margin: 12px 14px 8px 14px;
    border-left: 20px solid #ffffff;
    border-right: 20px solid #ffffff;
    border-radius: 4px 4px;
}

article#top .alert {
    border-color: #ffdf8e;
}

article#top a {
    display: inline;    
    height: auto;
    width: auto;
    padding: 0;
    margin: 0;
    line-height: 100%;
}

#top .menubutton {
    text-align: center;
}

#top .menubutton a {
    display: inline-block;    
    height: auto;
    width: 50%;
    padding: 1%;
    margin: 0 auto;
    line-height: 100%;
    text-align: center;
    background-color: #F5F5F5;
    border-radius: 4px 4px;
}

#top .pricelist {  
    margin: 12px 14px 8px 14px;
    border-left: 20px solid #f0f0f0;
    border-right: 20px solid #f0f0f0;
    border-radius: 4px 4px;    
    
}

#top .warning {
    border-color: #BBFFEE;
    background-color: #BBFFEE;
}

#top .pricerow {
    display: table-row;    
}

#top .pricerow .desc{
    display: table-cell;    
    float: left;
    width: 80%;
    border: none;
}

#top .pricerow .price{
    display: table-cell;
    float: left;
    width: 20%°;
    border: none;
    font-weight: bold;
}

#top .photo, #top .desc {
    float: left;
}

#equip .wrapper_eh {
    display: table;
    width: 100%;
    margin-top: 8px;
    margin-left: 14px;
    border-radius: 4px;
}

#equip p {
    text-align: left;
    width: 90%;
}

article#table table {
    border-collapse: collapse; 
}

article#table #toptimetable {
    width: 60%;
    margin: 16px auto;
    background-color: #FEFEFE;
    border-left: 20px solid #f0f0f0;
    border-right: 20px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 4px 4px;    
}

#toptimetable table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    color: #303030;
}

article#table #vactimetable {
    display: block;
    width: 60%;
    margin: 16px auto;
    padding: 0;
    background-color: #FEFEFE;
    border-left: 20px solid #84e0d7;
    border-right: 20px solid #84e0d7;
    border-top: 1px solid #84e0d7;
    border-bottom: 1px solid #84e0d7;
    border-radius: 4px 4px;            
}

#vachome {
    width: 100%;
    background-color: #BBFFEE;        
    border-radius: 4px;
    font-weight: bold;    
}

#vachome table {
    width:80%;
    margin: 10px auto;
}

#vachome .vactitle {
    width: 60%;
    padding-left: 5%;
}

#vachome .ttspace {
    width: 3%;
}

#vachome .tttitle {
    text-align: center;
    line-height: 3em; 
    border-bottom: 4px solid #84e0d7;
    text-transform: uppercase;
}

#vachome .ttod, #vachome .ttdo {
    text-align: center;
    line-height: 3em;
}

#vachome table tr {
    border-bottom: 1px solid #FEFEFE !important;
}

#vactimetable table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    font-weight: bold;
    /*color: #f9cd5e;*/
    color: #303030;
}

#vactimetable .vacrow {
    width: 100%;
    display: table-row;
    text-align: center;
}

#vactimetable .vactitle, #vactimetable .ttod, #vactimetable .ttspace, #vactimetable .ttdo {
    display: table-cell;
    height: 3em;
    line-height: 3em;
}

/*article#table .vactitle {
    width: 60%;
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
    background-color: #F7F7F7;
    border-right: 1px solid #f0f0f0;
    overflow: hidden;
}*/

#vactimetable .vactitle {
    width: 50%;
    text-align: left;
    background-color: #F7F7F7;
    border-right: 1px solid #f0f0f0;
    overflow: hidden;
    padding-left: 3%;
}

#vactimetable .ttod, #vactimetable .ttdo {
    text-align: center;
    width: 20%;
    overflow: hidden;    
}

#vactimetable .ttspace {
    text-align: center;
    width: 10%;
    overflow: hidden;
}

article#table table tr {
    width: 100%;
    height: 3em;
}

article#table table td {
    border-bottom: 1px solid #f0f0f0;
}

article#table .ttden {
    background-color: #F7F7F7;
    border-right: 1px solid #f0f0f0;
}

article#table .ttrowbold {
    font-weight: bold;
}

.ttalt {
    text-align: left;    
}

#foottimetable .ttalt span {
    display: inline-block; 
    margin-left: 3%;
}

article {
    border-radius: 4px;
}

article .body {
    
}

article ul li {    
    list-style-type: none;
}

.lekari {
    margin: 0;
    padding: 0 0 0 14%;
}

article a, article .noa {
    display: block;
    width: 70%;
    height: 10%;
    padding: 10% 15%;
    padding-bottom: 5%; /*height*/
    text-align: center;
    font-size: 95%;
    font-weight: bold;
    overflow: hidden;
}

article p {        
    width: 95%;
    margin: 1% auto 0 auto;
    text-align: center;
    font-size: 1em;
    line-height: 1.3em;
    overflow: hidden;    
}

article img {
    width: 100%;
    border-radius: 4px;
}

.compact {
    margin: 0;
}

ul.compact {
    line-height: 100%;
    list-style-type: none;
    text-align: center;
    padding: 0;
}

.compact a {
    display: inline;
    font-size: 100%;
    line-height: 22px;
    padding: 0;
    font-weight: normal;
    text-decoration: none;
}

.compact a:hover {
    text-decoration: underline;
}

ul.newsmenu {
    margin-left: 16px;
    line-height: 140%;
    list-style-type: none;
    text-align: center;
    padding: 0;
}

.newsmenu .back a {
    background-color: #ffdf8f;
}

.newsmenu a {
    float: left;
    margin: 8px 6px 0 0;
    padding: 8px 10px 6px 10px;
    text-decoration: none;
    background-color: #BBFFEE;
    border-radius: 4px;    
    text-transform: uppercase;
}

.newsmenu a:hover {
    background-color: #75D2C8;
}

.news img {
    border-radius: 4px; 
}

#articletimetable {
    width: 90%;
    padding: 4% 5% 5% 18%;
}

#articletimetable .ttrow {
    font-weight: normal;
    clear: both;
}

#articletimetable .ttrowbold {
    font-weight: bold;
    clear: both;
}

#articletimetable .ttden {
    float: left;
    width: 30%;
}

#articletimetable .ttod {
    float: left;
    width: 15%;
}
#articletimetable .ttspace {    
    float: left;
    text-align: center;
    width: 10%;
}
#articletimetable .ttod {
    float: left;
    width: 15%;
}
#articletimetable .ttdo {
    float: left;
    width: 20%;
}

#articletimetable .ttosoba {
    float: left;
    width: 30%;
}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media screen and (max-width: 870px) {
    .topmenu a:not(:first-child) {display: none;}
    .topmenu a.icon {
        float: left;
        display: block;
    }
}

@media screen and (max-width: 870px) {
    .topmenu.responsive {position: relative;}
    .topmenu.responsive .icon {
        position: absolute;
        left: 0;
        top: 0;
    }
    .topmenu.responsive a {
        float: none;
        /*display: block;*/
        /*text-align: left;*/
    }
    article a {
        padding-bottom: 8%;
    }
}

/* reset cols to 2-column */
@media screen and (max-width: 740px) {
    /* grid4 */
    .grid4 .col {
        width: 50%;
        padding-bottom: 22%;
        padding-bottom: 40%;
    }
    .grid4 .col:nth-of-type(3n+1) {
        margin-left: 0;
        clear: none;
    }
    .grid4 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
    }
    article a {
        padding-bottom: 6%;
    }

    /* grid3 */
    .grid3 .col {
        width: 50%;
    }
    .grid3 .col:nth-of-type(3n+1) {
        margin-left: 3.2%;
        clear: none;
    }
    .grid3 .col:nth-of-type(2n+1) {
        margin-left: 0;
        clear: left;
    }
}

/* reset cols to fullwidth */
@media screen and (max-width: 500px) {
    /* grid4 */
    .col {
        width: 100% !important;
        margin-left: 0 !important;
        clear: none !important;
    }
}