/* General Demo Style */
/* @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext');

*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

html { 
	height: 100%; 
	font-size: 80%;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	*zoom: 1;
}

body {
	font-family: 'Open Sans', Calibri, Arial, sans-serif;
	background: #fff url(../images/bcg/BCG-2019.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom;
	font-weight: 400;
	font-size: 14px; 
	font-size: 1.4rem;
	line-height: 160%;
	color: #333;
	-webkit-font-smoothing: antialiased;
	overflow-y: scroll;
	overflow-x: hidden;
}

a {
	color: #c43131;
	text-decoration: none;
}

p img {
	width: 100%;
	height: auto;
	margin-top: 30px;
	margin-bottom: 30px;
	}

.main a {
	text-decoration: underline;
}

.main li {
	margin-left: 20px;
	padding-left: 0px;
	padding-bottom: 5px;
	/* border: 3px solid red; */
}

p {
	margin-top: 10px;
	margin-bottom: 20px;
}

img.sto {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}

.container {
	width: 100%;
	position: relative;
}

audio {
	margin-top: 20px;
	margin-bottom: 10px;
}

.ccon {
	/* border: 1px solid red;*/
}

.clr {
	clear: both;
	padding: 0;
	height: 0;
	margin: 0;
}

.container > header,
.main {
	width: 80%;
	max-width: 960px;
	margin: 0 auto;
	padding: 0px;
	padding-left: 30px;
	padding-right: 50px;
}

#banner {
	width: 100%;
	height: auto;
	/* border: 1px solid green; */
	clear: both;
}

#banner img {
	width: 100%;
	height: auto;
}

#banner h1 {
	display: none;
}

#cards-container {
	/* overflow: auto; */
	/* border: 1px solid red; */
	width: 100%;
	margin-left: auto;
}

.container > header {
	padding: 30px;
}

.container > header h1 {
	margin: 0;
	font-weight: 700;
	color: #333;
	float: left;
	font-size: 36px; 
	font-size: 3.6rem;
	line-height: 46px; 
	line-height: 4.6rem;
}

.container > header h1 span {
	display: block;
	color: #c43131;
	font-size: 20px;
	line-height: 28px;
	line-height: 2.8rem;
	font-weight: 300;
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

.container > header h1 rd {
	color: #8e2424;
}

.container > .main h2,
.container > .main h3,
.container > .main h4 {
	/* padding-top: 0px;
	margin-top: 0px;*/
	padding-bottom: 10px;
	margin-bottom: 10px; 
	line-height: 140%;
	/* border: 1px solid yellow; */
}

.container > .main h3,
.container > .main h4 {
	/* border: 1px solid yellow; */
}

.main {
	margin-bottom: 20px;
}

.blogno {
	color: #8e2424;
	font-size: 200%;
	padding-right: 20px;
	
}

/* výklad DIV  */

#cbcg {
  width: 336px;
  height: 216px;
  background-image: url("../images/reading/back-all-cards-big.png");
  background-size: 336px 216px;
  background-repeat: no-repeat;
  margin: auto;
  /* border: 1px solid red; */
}

#cbcg, #cbcgpc {
  width: 336px;
  height: 216px;
  background-image: url("../images/reading/back-all-cards-big.png");
  background-size: 336px 216px;
  background-repeat: no-repeat;
  margin: auto;
  /* border: 1px solid red; */
  display: none;
}

#cbcgpc {
  width: 850px;
  height: 547px;
  background-size: 850px 547px;
  display: block;
}

/* Header Style */
.codrops-top {
	font-size: 11px; 
	font-size: 1.1rem;
	line-height: 24px; 
	line-height: 2.4rem;
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	z-index: 9999;
	position: relative;
	box-shadow: 1px 0px 1px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #333;
	font-weight: 400;
	text-shadow: 0 -1px 0 #fff;
	display: inline-block;
}

.codrops-top a:hover {
	background: rgba(255,255,255,0.8);
	color: #000;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.support-note {
	clear: both;
}

.support-note span{
	color: #ac375d;
	font-size: 16px;
	font-size: 1.6rem;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}

.resbtn {
	text-align: center;
}

.resbtn img {
	width: 30px;
	height: 30px;
	margin-top: 20px;
}

.nbt-l,
.nbt-r {
	background-color: #900;
	border-radius: 6px;
	padding: 6px;
	margin-top: 5px;
	border: 1px solid #FFF;
	color: #FFF;
	float: left;
}

.nbt-r {
	float: right;
}

.actions {
	width: 100%;
	padding: 0 0 20px 0;
	text-align: center;
	margin-top: 5px;
}

.actions span {
	box-shadow: 0 1px 1px rgba(0,0,0,0.2);
	background: #fff;
	color: #888;
	font-weight: 700;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	padding: 5px 10px;
	text-transform: uppercase;
	margin: 3px;
	border-radius: 3px;

}

.actions span:hover {
	background: #f7f7f7;
}

.actions span:active {
	background: #aaa;
	color: #fff;
	box-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

.actions span.disabled {
	opacity: 0.8;
	color: #ddd;
}

.light {
	padding: 0px 0px 0px;
}

.light span {
	background: #aaa;
	color: #fff;
	text-shadow: 0 1px 1px rgba(0,0,0,0.3);
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.2), 0 1px 1px rgba(255,255,255,0.8);
}

.light span:hover {
	background: #444;
}

.nav-space {
	margin-left: 3px;
	margin-bottom: 5px;
}

.nav-space span {
	font-weight: bold;
	color: #c43131;
}

#nav-prev, #nav-next {
	width: 30px;
	height: 30px;
	font-size: 18px;
	line-height: 20px;
}

#close {
	float: right;
}

/* Lukas */


#div_A1 { display: none }
#div_A2 { display: none }
#div_A3 { display: none }
#div_A4 { display: none }
#div_A5 { display: none }
#div_A6 { display: none }
#div_A7 { display: none }
#div_A8 { display: none }
#div_A9 { display: none }
#div_A10 { display: none }

#div_B1 { display: none }
#div_B2 { display: none }
#div_B3 { display: none }
#div_B4 { display: none }
#div_B5 { display: none }
#div_B6 { display: none }
#div_B7 { display: none }
#div_B8 { display: none }
#div_B9 { display: none }
#div_B10 { display: none }


a {
	cursor: hand; cursor: pointer;
}

.fb-like-box  {
	margin-bottom: 30px;
}


.si img {
	width: 60px;
	margin: 20px;
	margin-top: 0px;
	/* border: 3px solid red; */
}

.chaptercolapse {
	/* background-color: #FFF; */
	padding: 20px;
	margin-bottom: 10px;
	margin-top: 0px;
}

.chaptercolapse ul {
	display: none;
}

.cset img {
	float: left;
	width: 130px;
	height: auto;
	margin-right: 15px;
	margin-left: 15px;
	margin-top: 30px;
}

.cset h2,
.cset h3,
.cset h4 {
	margin-top: 30px;
	margin-bottom: 10px;
}

.glry {
	margin: auto;
	text-align: center;
	/* border: 1px solid red; */
}

.img20,
.img30,
.img40,
.img50,
.img60,
.img70,
.img80 {
	text-align: center;
	background-color: #f3ede4;
}

.img20 img,
.img30 img,
.img40 img,
.img50 img,
.img60 img,
.img70 img,
.img80 img {
	height: auto;
	margin: auto;
	padding: 30px;
}

.img20 img {width: 20%}
.img30 img {width: 30%}
.img40 img {width: 40%}
.img50 img {width: 50%}
.img60 img {width: 60%}
.img70 img {width: 70%}
.img80 img {width: 80%}

		.jbi, .sbi {
				width: 90px;
				height: auto;
				float: right;
		}
		
		.sbi {
				width: 120px;
				float: left;
				margin-right: 60px;
				margin-top: 10px;
		}
		
		.imgilus,
		.tim {
				width: 45%;
				height: auto;
				float: right;
				margin-left: 70px;
				margin-bottom: 70px;
		}
		
		.imgilus {
				margin-top: 30px;
				margin-bottom: 30px;
		}
		
		.fimg {
				width: 100%;
				height: auto;
				clear: both;
				margin-top: 30px;
				margin-bottom: 30px;
		}
		
		.foot {
				text-align: center;
				margin-top: 60px;
				/* background-color: #FF0;*/
				font-size: 80%;
		}
		
		.foot span {
				display: block;
				color: #999;
		}
		
		.cd {
				clear: both;
				border-top: 2px dotted #999;
				margin-top: 30px;
				margin-bottom: 30px;
		}
		
		.vz {
			margin-left: 25px;
		}
		
		h4.lih {
			margin-top: -20px;
			/* border: 3px solid green; */
			/* line-height: 120%; */
		}
		
		.listofcards ul {
			list-style: none;
		}
		
		.listofcards {
			text-align: center;
		}
		
		.cnav {
			width: 100%;
			clear: both;
			font-size: 80%;
			margin-bottom: 20px;
			margin-top: -20px;
			/* border: 1px solid red; */ 
		}

		.inspir  {
			width: 100%;
			clear: both;
			border: 1px solid #e8c33e;
			background-color: #fdf9ea;
			margin-bottom: 20px;
			padding: 30px;
			padding-top: 30px;
			margin-top: 50px;
		}
		
		.cset  {
			width: 100%;
			clear: both;
			border: 1px solid #e8c33e;
			background-color: #fdf9ea;
			margin-bottom: 20px;
			padding: 30px;
			padding-top: 0px;
			margin-top: 30px;
		}
		
		.cset ul {
			list-style-type: none;
			margin-left: -20px;
			padding-left: 0px;
		}
		
		.cset ul li {
			float: left;
			padding-right: 20px;
			padding-bottom: 15px;
			padding-left: 0px;
			margin-left: 0px;
		}
		
		.jbpic {
			float: right;
			padding-left: 50px;
			padding-bottom: 50px;
			width: 50%;
		}
		
		.sn {
			font-size: 100%;
			font-weight: normal;
			color: #c43131;
		}
		
		.red {
			color: #c43131;
		}
		
		.blgini  {
			margin-bottom: 0;
			padding-bottom: 0;
		}
		
		/* Kartářky */
	
			#ftheadline {
				font-size: 1.5em;
				color: #333;
				font-weight: bold;
				margin-top: 60px;
				margin-bottom: 25px;
			}
			
			#homepage #ftheadline {
				color: #FFF;
			}
			
			#ft {
			 border: 2px dotted #999;
			 padding: 20px;
			 margin-bottom: 40px;
			 text-align: left;
			 background-color: #FFF;
			 color: #4E4852;
			 font-weight: bold;
			}
			
			#ft .element {
			 clear: both;
			 padding-bottom: 40px;
			}
			
			#ft .element a {
			 color: #8e2424;
			}
			
			#ft .element img {
			 float: left;
			 width: 130px;
			 height: auto; 
			 margin-right: 20px; 
			 margin-bottom: 20px;
			}
			
			#ft .element p {
			 margin: 0px;
			 padding: 0px;
			 line-height: 1.5;
			}
			
			#ft .element span.name {
			 font-size: 1.5em;
			 font-weight: bold;
			}
			
			#ft .element strong {
			 font-weight: normal;
			 color: #4E4852;
			}
			
			#ft .element strong.no {
			 font-size: 1.5em;
			 font-weight: bold;
			 clear: both;
			 color: #8e2424;
			}
			
			#ft .element span.no {
			 font-size: 1em;
			 font-weight: bold;
			}
			
			#ft .element .sms {
			 color: #c43131;
			 margin-top: 10px;
			 font-size: 1.3em;
			}
			
			#ft .element span.groups {
				font-size: 1em;
				font-style: italic;
				color: #999;
			}
			
			#ft .aright {
				margin: 0px;
				margin-top: -15px;
				margin-bottom: 20px;
				padding: 0px;
				text-align: right;
				color: #c43131;
				font-size: 150%;
			}
			
			#ft .infobox {
				font-size: 0.8em;
				text-align: center;
				color: #393939;
				background-color: #f0f0f0;
				padding: 10px;
			}
			
			#ft .infobox p {
				margin: 0px;
				padding: 0px;
				line-height: 1.5;
				font-weight: normal;
			}
			
			#ft .infobox a {
				color: #393939;
			}
			
			#ft .status {
				float: right;
			}
			
			#ft .status img {
				width: 60px;
				height: auto;
				margin-right: 0px;
			}
			
			#ftdetail .status {
				float: right;
			}
			
			#ftdetail .status img {
				width: 100px;
				height: auto;
				margin-right: 0px;
			}
			
			#ftdetail .element #toptext {
				font-size: 1.5em;
			}
			
			#ftdetail .element span.groups {
				font-style: italic;
				color: #999;
			}
			
			#ftdetail .element strong.no {
			 color: #c43131;
			 font-weight: bold;
			}
			
			#ftdetail .element .sms {
			 color: #c43131;
			 margin-top: 10px;
			 margin-bottom: 45px;
			}
	
		/* Google reklama */
		
			.spacer {
				width: 100%;
				height: 1px;
				clear: both;
				/* border: 1px solid green; */
			}
			
			.googleadd_responsive,
			.googleadd_336,
			.googleadd_responsive_long {
				width: 336px;
				height: 280px;
				margin: auto;
				margin-bottom: 20px;
				margin-top: 20px;
				padding: 0px;
				clear: both;
				overflow: hidden;
				/*border: 1px solid red;*/
			}
			
			.googleadd_responsive_long {
				width: 728px;
				height: 90px;
				margin-top: 30px;
				margin-bottom: 30px;
			}
			
			.googleadd_responsive_long.top {
				margin-top: 0px;
			}
			
			@media screen and (max-width: 960px) {	
								#cbcg, #cbcgpc {
 								 display: none;
								}
								#cbcg {
 								 display: block;
								}
			}

			@media screen and (max-width: 960px) {
						/*
						.googleadd_responsive,
						.googleadd_responsive_long {
							width: 336px;
							height: 280px;
						}
						*/

								.container > header,
								.main {
									width: 98%;
									padding: 0 10px;
								}
								
								.container > header {
									padding: 10px;
								}

								.googleadd_responsive,
								.googleadd_responsive_long {
									width: 320px;
									height: 100px;
								}
								
								.googleadd_336 {
									width: 300px;
									height: 250px;
								}
								
								header,
								h1 {
									text-align: center;
								}
								
								/* .menumob {
									text-align: left;
								} */
								.blogno {
									clear: both;
									display: block;
									padding-bottom: 20px;
									}
									
									
									.img20,
									.img30,
									.img40,
									.img50,
									.img60,
									.img70,
									.img80 {
										text-align: center;
										background-color: transparent;
									}
									
									.img20 img,
									.img30 img,
									.img40 img,
									.img50 img,
									.img60 img,
									.img70 img,
									.img80 img {
										height: auto;
										margin: auto;
										padding: 0px;
									}
									
									.img20 img {width: 100%}
									.img30 img {width: 100%}
									.img40 img {width: 100%}
									.img50 img {width: 100%}
									.img60 img {width: 100%}
									.img70 img {width: 100%}
									.img80 img {width: 100%}
								
			}
			
			

			
			@media screen and (max-width: 736px) {
				
								.jbi, .sbi {
									width: 60%;
									height: auto;
									float: none;
									margin: auto;
									clear: both; 
								}
								
								.sbi {
									width: 40%;
									margin-bottom: 20px;
								}
								
								.imgilus,
								.tim {
									width: 50%;
									height: auto;
									margin: auto;
									margin-left: 25%;
									margin-bottom: 3%;
									float: none;
									clear: both;
								}
								
								.imgilus {
									width: 80%;
									margin: auto;
									margin-left: 10%;
									margin-top: 5%;
									margin-bottom: 3%;
									
								}
								
								.jbpic {
								float: none;
								padding: 50px;
								width: 80%;
								clear: both;
								}
						
			}
			
		
		
		
		
		
		
		
			
/* NAVIGACE */

.nav, .nav ul, .nav li, .nav a, .nav > li  {margin: 0; padding: 0;}

#menumob {
	margin-bottom: 30px;
	margin-top: -5px;
}

#menumob a {
	text-decoration: none;
	color: black;
	font-weight: bold;
	/* border: 1px solid red; */
}

.toggleMenu {
	/* zobrazí se na mobilu jako "menu"*/
    /* 
	display:  none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
	font-size: 150%;
	*/
    background: #e8c33e;
    padding: 10px 15px;
    color: black;
	font-size: 100%;
}
.nav {
    list-style: none;
     *zoom: 1;
     background-color: #e8c33e;  /* barva 1. level menu */
	 padding-left: 15px; /* odsazení celého menu od kraje vlevo */
	 color: black;
}
.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 15em;
}
.nav a {
    padding: 10px 15px 10px 15px;
    color: black;
	/* border: 1px solid #F00; */
	background-color: #e8c33e;
}
.nav li {
    position: relative;
	margin-right: 10px; /* odsazení položek menu 1 úrovně */
}
.nav > li {
    float: left;
    border-top: none; /* 1px solid #CCC; */
}
.nav > li > .parent {
    background-image: url("../images/downArrow.png");
    background-repeat: no-repeat;
    background-position: right;
}
.nav > li > a {
    display: block;
}
.nav li  ul {
    position: absolute;
    left: -9999px;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
}
.nav li li a {
    display: block;
    background: #fdf9ea; /* barva 2. level menu */
    position: relative;
    z-index:100;
	border: 1px solid #e8c33e;
    border-top: 1px solid white;  /* barva oddělovače 2. level menu */
	margin-left: -15px;
	padding-left: 35px;
	padding-right: 0px;
	margin-right: 0px;
}
.nav ul.last {
    max-width: 190px;
}
.nav li li li a {
    background: #fdf9ea;
    z-index:200;
    border-top: 1px solid white;
}


@media screen and (max-width: 960px) {

#menumob {
	margin-top: 0px;
}

	#menumob {
		font-size: 160%;
		display: block;
		clear: both;
	}
	#menumob a {
		padding: 15px;
	}
	.nav {
	 	padding-left: 0px;
	}
	.active {
        display: block;
    }
    .nav > li {
        float: none;
		border-top: 1px solid white;
    }
    .nav > li > .parent {
        background-position: 95% 50%;
    }
    .nav li li .parent {
        background-image: url("../images/downArrow.png");
        background-repeat: no-repeat;
        background-position: 95% 50%;
    }
    .nav ul {
        display: block;
        width: 100%;
    }
	.nav li {
		margin-right: 0px;
	}
   .nav > li.hover > ul , .nav li li.hover ul {
        position: static;
    }
	.nav ul.last {
    max-width: none;
	}

}