@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');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:100,400');

/* 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-size: 16px;
        font-family: 'Barlow', Impact, sans-serif;
    
        
        
}

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

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

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

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


.navbar {
        /*border-bottom: 1px solid #000;*/
        padding-left: 0; 
        padding-right: 0;
    
        
        
       
}

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

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



h1 { color: #999}

.img-box {
	padding:5px;
	
}
.img {

	max-width:100%;
/*	max-height:300px;*/

	
}

.small-logo {
	height: 50px; 
        margin-right: 15px;

}
.logo-flowee {
    margin-right: 35px;
    
}
.logo-denoffline {
    margin-top: 20px;
}    

#logo {
	height: 120px;
}

.popis-box {

	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: none;	
	text-align:center; 

	background-color: #666;
	opacity: 0.7;
	
	
}

.popis {

	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display: none;	
	text-align:center; 
}

.popis {
	color:#FFF;
	padding: 10px;
	
}

.active div.popis-box, .active div.popis  {
	display:block;	
}



/* social */
#social { padding-left:0;
          padding-top:20px;
}

#social .main-menu {
    margin: 0;
}
#social .main-menu li:first-child {
    padding-left: 0;
}
#social .main-menu li {
    padding: 0 10px;
}

ul.inline > li,ol.inline > li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    padding-left: 5px;
    padding-right: 5px;
}
li {
    line-height: 23px;
}

#social a, #social-detail a {
    color: #999;
}

.social a {
    color: #fff;
    padding-right: 15px;
}

.static-text h1,.static-text  p, .static-text div {
    color: #000;
    
}

.static-text p {
        font-size: 18px;
        font-family: 'Barlow', Impact, sans-serif;
}

.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 0px;
    padding-left: 0px;
}

.col-xs-5ths {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5ths {
        width: 20%;
        float: left;
    }
}

p {font-size: 24px;}





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

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

#main {  }
#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: 120px;

}

.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 {
    margin: 11.5px 0;
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: normal;
    line-height: 23px;
    color: inherit;
    text-rendering: optimizelegibility;
    font-size: 66px;
    line-height: 1.1;
    color:#001744;
    text-transform: uppercase;
    letter-spacing: 10px;
	
}

h1.titul {
    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;
}



@media (min-width: 992px) {
}

@media (max-width: 1200px) {

    #obsah-navigacni-listy {
        
    }
    
.obalka { width: 100%; }


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

.edice { 
    display: none;
}
}


#header {
    

}

.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: -101px; 
    padding-top: 150px; 
    background-color: #f3ba72;
}
.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 {
        
    }
 
}


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

    #content {
    padding-left: 210px; 
    padding-right: 250px; 
    overflow: hidden;
}

}    

@media (max-width: 768px) {

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

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


}

#obsah-navigacni-listy {
    z-index: 1000;
    background-color: white;
}


/*****************************************/
.nadpis {
    
    
}


.foto {
    width: 100px;
    height: 100px;
padding-bottom: 15px;
margin-bottom: 15px;
}
.foto-box {
    width: 100%;
    border-radius: 110px;
    
}

.box {
    padding-bottom: 25px;
    border-bottom: 1px solid grey;
    margin-bottom: 25px;
    
    
}

.box p {
    margin: 0;
    padding: 0;
}
.box .jmeno, .navbar-nav {
    color:grey;
    font-weight: bold;
    font-size: 18px;

}
.box .titulek {
    color:red;
    margin-bottom: 15px;
}

.nadpis {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 60px;
    color:grey;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0px;
    letter-spacing: 5px;
    
}

.radek { 

    padding-bottom: 15px;
    border-bottom: 1px solid grey;
    margin-bottom: 15px;
    font-weight: bold;
}
.radek span {
    font-weight: normal;
}

.radek .time {
    margin-right: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    color: grey;
    font-size: 18px;
    float: left;
}

.blok {
    
    margin-top: 30px;
    color: grey;
    font-size: 18px;
}