@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Barlow:400,400i,500,700,700i,800&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:600&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,500,600,700&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i&subset=latin-ext');


/* CSS Document */
/* 
https://stackoverflow.com/questions/15167545/how-to-crop-a-rectangular-image-into-a-square-with-css
https://www.w3schools.com/howto/howto_css_image_overlay.asp
https://www.jqueryscript.net/tags.php?/Infinite%20Scroll/
*/
* {

    

    

    /* font-family: 'Barlow', sans-serif; */
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: 18px;
    color: #001744;
        
        
}

a, a:hover {
    color: #001744;
}

a.detail-link, a.detail-link:hover {
    color: white;
    text-decoration: none;
    
    
}

#main { margin-top: 80px; }
#header { background-color:#FFF; }

.red {
    color: #ff0000;
}

.bg-light {
    background-color:#FFF !important;
    font-size: 20px;
    
    
}


.navbar {
        padding-left: 0; 
        padding-right: 0;
        height: 40px;
}

.nav-item { width: 150px;}

.navbar-light .navbar-nav .nav-link {
    font-weight: 500;
    color: black;
    
}

.navbar-light a:hover {
    color: red !important;
}




a.navlink {
    color: #000;
    font-family: 'Barlow Condensed', Impact, sans-serif;
}

h1, h2, h3, h4, h5, h6, h1.titul a {
    margin: 11.5px 0;
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: normal;
    line-height: 23px;
    color: inherit;
    text-rendering: optimizelegibility;
    font-size: 56px;
    line-height: 1.1;
    color:#001744;
    text-transform: uppercase;
    letter-spacing: 10px;
	
}

h1.titul, h1.titul a {
    margin-top: 65px;
}


p {
        font-size: 18px;
        font-family: 'Barlow', Impact, sans-serif;
        margin: 15px;
}

p.podnadpis ,a.podnadpis, .podnadpis span, .podnadpis a {
      font-family: 'Barlow Condensed', Impact, sans-serif;
      font-size: 30px;
}

p.vice ,a.vice, .vice a {
       text-decoration: underline;
      font-family: 'Barlow Condensed', Impact, sans-serif;
      font-size: 22px;
}



@media (min-width: 992px) {

    .obalka-homepage {
        padding: 40px; 
        width: 450px;   
    }

    .obalka {
        padding: 40px; 
        width: 600px;   
    }
    
    
}

@media (max-width: 1200px) {

    .obalka-homepage {
        
        width: 100%;   
    }    
    
    
    #obsah-navigacni-listy {
        background-color: #FFF
    }
    
.obalka { width: 100%; }


.row-topodstatne{
    
    margin-top: 0px; 
    padding-top: 0px; 
    background-color: #f3ba72;
}

.row-topodstatne .dvs{
    
    background-color: #89b6d8;
}

.edice { 
    display: none;
}
}


#header {
    
    background-color: #f3ba72;
}

#header.dvs {
    
    background-color: #89b6d8;
}

.col-cena {
    padding-top: 110px;
    padding-bottom: 30px;
}

@media (min-width: 1200px) {

.col-cena {
    padding-top: 90px;
    padding-bottom: 30px;
}
    
    
.row-cena {
    margin-top: 0px;    
}



.row-topodstatne{
    
    margin-top: -230px; 
    padding-top: 120px; 
    background-color: #f3ba72;
}

.row-topodstatne.dvs{
    
    background-color: #89b6d8;
}


.topodstatne {
    padding-left: 105px;
    padding-right: 105px;
    
}

.edice-mobile { 
    display: none;
}

}
.topodstatne li {
    margin-top: 15px;
    font-size: 30px;
    
}


@media (min-width: 768px) and (max-width: 1200px) {

   #obsah-navigacni-listy {
        background-color: #f3ba72;
    }

    #obsah-navigacni-listy.dvs {
        background-color: #89b6d8;
    }

}


@media (min-width: 768px) {
    .okraj50 {
        padding-left: 50px; 
        padding-right: 50px;
        
    }
}    

@media (max-width: 768px) {

.topodstatne {
    padding-left: 0px;
    padding-right: 0px;
    
 
}

h1, h2, h3, h4, h5, h6 {
    font-size: 46px;
    letter-spacing: 5px;
	
}


}