@charset "iso-8859-2";
/* CSS Document */
body{
background: #778e29; /* Old browsers */
background: -moz-linear-gradient(top,  #778e29 0%, #dce3c4 67%, #fefefd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #778e29 0%,#dce3c4 67%,#fefefd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #778e29 0%,#dce3c4 67%,#fefefd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#778e29', endColorstr='#fefefd',GradientType=0 ); /* IE6-9 */
/*font:Verdana, Geneva, sans-serif; font-size:1.5em;*/
font:Courier, monospace; font-size:1.5em;	
padding:0px;

}
h2{ clear:both; font-size: 1em;}
#header{ text-align:center;  width: calc(100vw - 200px);  background:url(../img/fabel_baner_bg.jpg) top no-repeat; background-color:#FFF;  margin-top:-10px; margin-left:40px; 
padding-top: 11vw;}




.circles-container {
    display: flex; 
    position: absolute;
	top: 1vw;
 	 z-index: 80;
    justify-content: space-around; 
    
   
    padding-top: 1vw; 
    
    
    width: 90%; 
    margin: 0 auto; 
}

.dd, .l, .hoy, .sach, .aue, .schk {
    display: block; 
    width: 11vw; 
    height: 11vw; 
   margin: 0; 
position: relative; 
    z-index: 1;
    transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
    transform: scale(1); 
	 background-color:#FFF; 
border-radius: 140px;
}

.dd:hover, .l:hover, .hoy:hover, .sach:hover, .aue:hover, .schk:hover {
    border: 6px #FC0 solid;
    transform: scale(1.2); 
    z-index: 99; 
}



/*
.dd, .l, .hoy, .sach, .aue, .schk{display:block; width:11vw; height:11vw;  background-color:#FFF; 
border-radius: 140px; margin-left: calc((100vw - 1080px)/14);
	transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
	transform: translateY(0) scale(1); 
	position: relative; 
    z-index: 1; 
    }

.dd:hover, .l:hover, .hoy:hover, .sach:hover, .aue:hover, .schk:hover{border:6px #FC0 solid; transform: translateY(1vw) scale(1.2); z-index: 10; }
*/
.dd{  background:url(../img/fabelf_baner_DD.jpg) no-repeat center; padding:0px; background-size: cover;}
.l{ background:url(../img/fabelf_baner_l.jpg) no-repeat center; padding:0px; background-size: cover;}
.hoy{ background:url(../img/fabelf_baner_hoy.jpg) no-repeat center; padding:0px; background-size: cover;}
.sach{  background:url(../img/fabelf_baner_sa.jpg) no-repeat center; padding:0px; background-size: cover;}
.aue{ background:url(../img/fabelf_baner_au.jpg) no-repeat center; padding:0px; background-size: cover;}
.schk{ background:url(../img/fabelf_baner_schk.jpg) no-repeat center; padding:0px; background-size: cover;}
#titel{
	
	
}
#a0, #a1, #a2, #a3, #a4, #a5{display:block; width:250px; height:250px; float:left;  margin-top:20px;
-webkit-border-radius:125px; -moz-border-radius:125px; border-radius:125px;
 -khtml-border-radius:125px;  background-position:center; border:6px #4E7629 solid;}
#a0{ background:url(../img/index4.jpg) no-repeat center #FFF;}
#a1{ background:url(../img/index1.jpg) no-repeat center #FFF;}
#a2{ background:url(../img/index2.jpg) no-repeat center #FFF;}
#a3{ background:url(../img/ico1.jpg) no-repeat center #FFF;}
#a4{ background:url(../img/ico2.jpg) no-repeat center #FFF;}
#a5{ background:url(../img/index3.jpg) no-repeat center #FFF;}



.dritel_block{display: block; float: left; width:calc(33vw - 140px); height:calc(33vw / 2);  text-align:justify; -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px;
 -khtml-border-radius:25px;  padding: 10px;   border:2px #4E7629 solid; font-size:1.2vw; font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif"; font-style: italic; margin: 10px;
	
	filter: grayscale(100%); 
	transition: filter 0.3s ease-in-out;
	text-decoration: none; color: black;
}

.dritel_block:hover{filter: grayscale(0%);}

.content_gr{
	text-align:justify;
	margin:20px;
	}
.clear{ float:none; clear:both;}

#textblock1{  }
#textblock2{}
#banerblock{z-index:999; position:absolute; top:300px; width:600px;}

.infoblock{ width:100%;
	display:block;
	list-style:none; float:none; clear:both; }
.infoblock li{ 
	float:left;
	display:block;
	width:12vw; 
	height:13vw;

 margin-right:5%;
 margin-left:5%;
 margin-bottom:20px;

 
	}
.right{ display: block;float: right; font-size:0.7em; margin-right:10px; margin-top:20px; border:#38672E thin  outset;
	/* IE6-9 */
  -moz-border-radius: 8px;
  -khtml-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  font-weight: 800;
  margin: 5px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
 
	background:#FFF;}
.infoblock li p{ visibility:hidden;}
.infoblock li:hover p{visibility:visible; background: rgba(255, 255, 255, 0.8); color:#333; width:12vw; 	height:13vw; font-size:0.7em; margin-top:-0px; cursor: pointer; display:table-cell;  text-align:center; vertical-align:middle;}
#i1{ background:url(../img/1.jpg) no-repeat center;  background-size: cover; }
#i2{ background:url(../img/2.jpg) no-repeat center;  background-size: cover;}
#i3{ background:url(../img/3.jpg) no-repeat center;  background-size: cover;}
#i4{ background:url(../img/4.jpg) no-repeat center;  background-size: cover;}
#i5{ background:url(../img/5.jpg) no-repeat center;  background-size: cover;}
#i6{ background:url(../img/6.jpg) no-repeat center;  background-size: cover;}
#i7{ background:url(../img/7.jpg) no-repeat center;  background-size: cover;}
#i8{ background:url(../img/8.jpg) no-repeat center;  background-size: cover;}
#i9{ background:url(../img/9.jpg) no-repeat center;  background-size: cover;}


/*guide*/
.Section1{ display:block; float:left; width: calc(100vw - 400px); padding:20px; margin:20px; background-color:#FFF; 
-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;
  -khtml-border-radius:10px;}
 
.Section2{ display:block; float:right; width:250px; margin-right:10px; position:absolute; top:50px; right:20px; z-index:500;}
.bon{ display:block; text-align:justify;  width:640px; padding:10px; margin:20px; background-color:#FFF; border:2px #7D8C48 solid;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
  -khtml-border-radius:4px;
 font-style:italic;} 
 
 .bon img{ display:block; clear:both; margin:20px 20px 20px 20px;}
 
 .bon1{ background-color:#D3E3BB; padding:10px; margin:20px; background-color:#FFF; border:2px #7D8C48 solid;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
 -moz-border-radius:4px; -khtml-border-radius:4px; -webkit-border-radius:4px;}
 
 h3{ clear:both;}
 #logo {display:block; width:280px; height:136; float:left; margin:50px;}
 
#futer{ display:block; width:100%; background-color:#444031; height:6em;  bottom:0px; margin-top:90px;}
.bottom_block{  width:20%; color:#333; float:left; height:1.5em; border: 3px solid #444031; margin:50px 5% -50px 5% ; 
		-webkit-border-radius:20px; 
	-moz-border-radius:20px; 
	border-radius:20px;
 -moz-border-radius:20px; 
 -khtml-border-radius:20px; 
 -webkit-border-radius:20px;
 background:#FFF;
 display:table-cell;  text-align:center; vertical-align:bottom;
 font-size:0.8em;
  }

.carousel-3d {
    padding: 20px;
    -webkit-perspective: 400px;
    perspective: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}
.carousel-3d > * {
    flex: 0 0 auto;
}
.carousel-3d figure {
    margin: 0;
    width: 40%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}
.carousel-3d figure img,
.carousel-3d figure div {
    width: 70%;
    box-sizing: border-box;
    padding: 0;
}
.carousel-3d figure img {
    user-select: none;
}
.carousel-3d figure div:not(:first-of-type),
.carousel-3d figure img:not(:first-of-type) {
    position: absolute;
    left: 0;
    top: 0;
}
.carousel-3d nav {
    display: flex;
    justify-content: center;
    margin: 20px 0 0;
}
.carousel-3d nav button {
    flex: 0 0 auto;
    margin: 0 5px;
    cursor: pointer;
    color: #337AB7;
    background: #BFE2FF;
    border: 1px solid #337AB7;
    padding: 5px 10px;
    font-weight: bold;
    transition: all .3s ease;
}
.carousel-3d nav button:hover {
    color: #FFF;
    background: #337AB7;
}