audio{ width:180px; height:26px; bottom:5px; position:absolute; left:5px; border:none}

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

.clearfix:after {
	clear: both;
}

body,html {
	position: relative;
	height: 100%; 
}

body { margin:0; padding:0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 13px;background: url(../img/bg2.jpg) #c27d30;
	line-height: 1.5;
	color: #333; 
	
}

 .swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative; 
}
.swipe-wrap {
  overflow: hidden;
  position: relative;  
}
.swipe-wrap > div  {
  float:left;
  width:100%; 
  position: relative;
}

#mySwipe .swiper-slide  { 
  display:block;
  
}

#mySwipe .swiper-slide img  { max-width:100%;

}
#mySwipe div img { border:5px solid #FFF;

  display:block; 
  text-align:center;

}


.navigation .active{color:#fec659;}
.extruder{position:fixed;cursor:default;  }
.extruder .content {display:none;  height:100%;background:url(../img/navbg.png);  }
.hidden{ display:none}
.extruder.left{  height:100%;background:url(../img/navbg.png); }
.extruder.left .ext_wrapper{height:100%;}

.extruder.left.content{ height:100%; display:none;   }
.extruder.left .flap{
	position: absolute;
	width:120px;
height:102px;
	top: 10px;
	cursor: pointer;
	background: url(../img/menu1.png) no-repeat;
	margin-right:-140px; 
	right:0;  
	}
	
	.extruder.left .flap:hover{ }

.navig{ width:100px; float:left; text-align:left; margin-top:10px; list-style:none; }
.navigimg{ width:80px; float:left;  margin-top:10px; list-style:none; }

.navig li{  color:#FFF; height:45px; line-height:45px }
.navigimg li{ height:45px; margin-left:15px}

.navig a{ text-decoration:none; color:#FFF;}
.navig a:hover{ color:#fec659;}

#logo{ margin-top:10px; margin-bottom:5%; width:156px; height:90px; margin-left:20px}

.navigation{height: 90px;margin-top:10px; 
	width: 100%; 
	background: url(../img/navbg.png);	z-index:9999; margin-bottom:20px}
.items{margin: 0 auto; padding:0;z-index:9997; width:590px;}

.items li{display: inline-block;
	padding: 0 55px;
	text-align: center;z-index:9997
	}

.menuitems{ display:block; position:absolute; top:10px; right:10px}
.menuitems img{ width:100%}

.itemsfoto{margin: 0 auto; padding:0;z-index:9997; width:500px;}

.itemsfoto li{display: inline-block;
	padding: 0 30px; height:90px; line-height:90px;
	text-align: center;z-index:9997
	}
	
	.itemsfoto li a{text-decoration:none; color:#fff; font-size:15px;
	
	}
	
		.itemsfoto li a:hover{color:#fec659;
	}

	
.fade{  animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */}

.rotate img, .rotate5 img, .rotate1 img,.rotate2 img, .rotate3 img, .rotate4 img { transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.rotate img:hover{transform:rotate(5deg); -webkit-transform:rotate(5deg); -moz-transform:rotate(5deg); -ms-transform:rotate(5deg); -o-transform:rotate(5deg)}
.rotate1 img:hover{transform:rotate(15deg);-webkit-transform:rotate(15deg); -moz-transform:rotate(15deg); -ms-transform:rotate(15deg); -o-transform:rotate(15deg)}
.rotate2 img:hover{transform:rotate(-25deg);-webkit-transform:rotate(-25deg); -moz-transform:rotate(-25deg); -ms-transform:rotate(-25deg); -o-transform:rotate(-25deg)}
.rotate3 img:hover{transform:rotate(-5deg);-webkit-transform:rotate(-5deg); -moz-transform:rotate(-5deg); -ms-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
.rotate4 img:hover{transform:rotate(10deg);-webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -ms-transform:rotate(10deg); -o-transform:rotate(10deg)}
.rotate5 img:hover{transform:rotateZ(180deg); -webkit-transform:rotateZ(180deg); -moz-transform:rotateZ(180deg); -ms-transform:rotateZ(180deg); -o-transform:rotateZ(180deg)}



/*bookblock*/



.bb-bookblock {
	width: 670px;
	height: 503px;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	-webkit-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}
.bb-bookblock img{width:100%}
.bb-page {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	transition-property: transform;
}

.bb-vertical .bb-page {
	width: 50%;
	height: 100%;
	left: 50%;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	transform-origin: left center;
}

.bb-horizontal .bb-page {
	width: 100%;
	height: 50%;
	top: 50%;
	-webkit-transform-origin: center top;
	-moz-transform-origin: center top;
	transform-origin: center top;
}

.bb-page > div,
.bb-outer,
.bb-content,
.bb-inner {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: none;
}

.bb-outer {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-vertical .bb-content {
	width: 200%;
}

.bb-horizontal .bb-content {
	height: 200%;
}

.bb-page > div {
	width: 100%;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.bb-page > div:not(:only-child) {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.bb-vertical .bb-back {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-horizontal .bb-back {
	-webkit-transform: rotateX(-180deg);
	-moz-transform: rotateX(-180deg);
	transform: rotateX(-180deg);
}

.bb-outer {
	width: 100%;
	overflow: hidden;
	z-index: 999;
}

.bb-overlay, 
.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.7);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.2);
}

/* */

.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

.bb-bookblock.bb-horizontal > div.bb-page:first-child,
.bb-bookblock.bb-horizontal > div.bb-page:first-child .bb-back {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/* Content display */
.bb-vertical .bb-front .bb-content {
	left: -100%;
}

.bb-horizontal .bb-front .bb-content {
	top: -100%;
}

/* Flipping classes */
.bb-vertical .bb-flip-next,
.bb-vertical .bb-flip-initial {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}

.bb-vertical .bb-flip-prev {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.bb-horizontal .bb-flip-next,
.bb-horizontal .bb-flip-initial {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

.bb-horizontal .bb-flip-prev {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}

.bb-vertical .bb-flip-next-end {
	-webkit-transform: rotateY(-15deg);
	-moz-transform: rotateY(-15deg);
	transform: rotateY(-15deg);
}

.bb-vertical .bb-flip-prev-end {
	-webkit-transform: rotateY(-165deg);
	-moz-transform: rotateY(-165deg);
	transform: rotateY(-165deg);
}

.bb-horizontal .bb-flip-next-end {
	-webkit-transform: rotateX(15deg);
	-moz-transform: rotateX(15deg);
	transform: rotateX(15deg);
}

.bb-horizontal .bb-flip-prev-end {
	-webkit-transform: rotateX(165deg);
	-moz-transform: rotateX(165deg);
	transform: rotateX(165deg);
}

.bb-item {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	background: none;
}

/* No JS */
.no-js .bb-bookblock, 
.no-js ul.bb-custom-grid li {
	width: auto;
	height: auto;
}

.no-js .bb-item {
	display: block;
	position: relative;
}








.bb-custom-wrapper { 
display:block; width:670px; 

	margin: 0 auto;
	text-align: center;
}

.bb-custom-wrapper nav { z-index:9999; position:relative; text-align:right; margin-top:12px; margin-right:10px;
	
}

.bb-custom-wrapper nav a {position: relative;
	width: 32px;
	height: 32px;
	
	background: #633d30; background:rgba(99,61,48,0.8);
	border-radius: 50%;
	color: #fff;
	line-height: 30px;
	text-align: center;
	speak: none;
	font-weight: bold;
	cursor: pointer;
	display: inline-block;
	
	opacity:0.8;
	font-size:16px;
	margin:0 ; text-decoration:none;
	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; 
}

.bb-custom-wrapper nav a:hover {
	background: #fca203;
}


/* No JS */
.no-js .bb-custom-wrapper {
	height: auto;
}

.no-js .bb-custom-content {
	height: auto;
}
.bb-custom-side {
	width: 50%; background:#fff;
 padding:0;
	color:#333; 
	float: left;
	height: 503px; position:relative; 
	overflow: hidden;
	
}
.bb-custom-side ul{ margin:40px 20px 0;  }
.bb-custom-side ul li { list-style:none}
.bb-custom-side h1 { text-align:left; font-size:20px; font-weight:300;
margin:0; color:#633d30; padding-bottom:3px;
}

.bb-custom-side h2 { text-align:center; font-size:30px; font-weight:300;
margin:40px 20px; color:#ed1724; line-height:36px;
}

.bb-custom-side h3 { text-align:center; font-size:16px; font-weight:300;
margin:20px 10px 0; color:#3d3333;line-height:24px;
}

.bb-custom-side p { text-align:left; font-size:13px; margin:0 0 6px 0; padding:0 0 6px 0;
border-bottom:1px dotted #633d30;  color:#97561e;
	
	
}


.bb-custom-side h4 { text-align:center; font-size:18px; font-weight:300;
margin:0px; color:#ed1724;line-height:18px;  padding:10px 0 10px 0;
}

.bb-custom-side h5 { text-align: justify; font-size:14px; font-weight:300;
margin:0px; color:#633d30;line-height:18px; margin:0; padding:40px;
}



.swipnav{position: relative;
	width: 32px;
	height: 32px;
	
	background: #633d30; background:rgba(99,61,48,0.8);
	border-radius: 50%;
	
	line-height: 30px;
	text-align: center;
	
	cursor: pointer;
	display: inline-block;
	
	opacity:0.8;
	
	margin:0 0 10px ; text-decoration:none;
	transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; }
	
	.swipnav:hover{background:#fca203;}


@media (max-width: 720px) {

.bb-custom-side h1 { text-align:left; font-size:18px; font-weight:300;
margin:0; color:#633d30; padding-bottom:3px;
}

.bb-custom-side h2 { text-align:center; font-size:25px; font-weight:300;
margin:30px 10px; color:#ed1724; line-height:30px;
}

.bb-custom-side h3 { text-align:center; font-size:16px; font-weight:300;
 color:#3d3333;line-height:24px;
}

.bb-custom-side p { text-align:left; font-size:11px; margin:0 0 6px 0; padding:0 0 6px 0;
border-bottom:1px dotted #633d30;  color:#97561e;
	
	
}
.bb-custom-side h4 { text-align:center; font-size:14px; font-weight:300;
margin:0px; color:#ed1724;line-height:18px; margin:0; padding:10px 0 10px 0;
}

.bb-custom-side h5 { text-align: justify; font-size:12px; font-weight:300;
margin:0px; color:#633d30;line-height:18px; margin:0; padding:30px;
}



	}




@media (max-width: 600px) {
.bb-custom-wrapper { 
width:480px; 
}
.bb-bookblock {	

	width:480px; 
	height: 360px; 
	
	
}
.bb-item {
	width: 480px;
	height: 360px;
	
}
.bb-custom-side {
	
	height: 360px; 
	
}

		.menuitems{ display:none;}

#mySwipe div img { border:none;


}

.extruder.left .flap{
	position: absolute;
	width:77px;
height:65px;
	top: 10px;
	cursor: pointer;
	background: url(../img/menu1small.png) no-repeat;
	margin-right:-87px; 
	right:0;  
	}

.navig li{  color:#FFF; height:40px; line-height:40px }
.navigimg li{ height:40px; margin-left:15px}
#logo{ margin-bottom:-25px; margin-left:30px}
#logo img{ height:70px; width:121px;}
.navigation{ height:65px; }

.itemsfoto{width:300px; margin:0 auto}

.itemsfoto li{
	padding: 0 10px; height:65px; line-height:65px;
	
	}
	
	.itemsfoto li a{ font-size:10px;
	
	}
	
.items{width:350px; margin:0 auto}

.items li{
	padding: 0 10px;
	
	}
	.items img{ height:60px}
	
	
	
.bb-custom-side ul{ margin:25px 15px 0;  }

.bb-custom-side h1 { text-align:left; font-size:11px; font-weight:300;
margin:0; color:#633d30; padding-bottom:3px;
}

.bb-custom-side h2 { text-align:center; font-size:12px; font-weight:300;
margin:10px 5px; color:#ed1724; line-height:24px;
}

.bb-custom-side h3 { text-align:center; font-size:10px; font-weight:300;
 color:#3d3333;line-height:12px;
}

.bb-custom-side p { text-align:left; font-size:9px !important; margin:0 0 3px 0; padding:0 0 3px 0;
border-bottom:1px dotted #633d30;  color:#97561e;
	
	
}
.bb-custom-side h4 { text-align:center; font-size:16px; font-weight:300;
margin:0px; color:#ed1724;line-height:18px; margin:0; padding:15px 0 15px 0;
}

.bb-custom-side h5 { text-align: justify; font-size:9px; font-weight:300;
margin:0px; color:#633d30;line-height:18px; margin:0; padding:10px;
}


}


@media (max-width: 500px) {
	
.extruder.left .flap{
	position: absolute;
	width:77px;
height:65px;
	top: 10px;
	cursor: pointer;
	background: url(../img/menu1small.png) no-repeat;
	margin-right:-87px; 
	right:0;  
	}

.navig li{  color:#FFF; height:40px; line-height:40px }
.navigimg li{ height:40px; margin-left:15px}
#logo{ margin-bottom:-25px; margin-left:30px}
#logo img{ height:70px; width:121px;}
.navigation{ height:65px; }

.itemsfoto{width:300px; margin:0 auto}

.itemsfoto li{
	padding: 0 10px; height:65px; line-height:65px;
	
	}
	
	.itemsfoto li a{ font-size:10px;
	
	}
	
.items{width:350px; margin:0 auto}

.items li{
	padding: 0 10px;
	
	}
	.items img{ height:60px}
	
	
	
.bb-custom-side ul{ margin:20px 10px 0;  }

.bb-custom-side h1 { text-align:left; font-size:9px; font-weight:300;
margin:0; color:#633d30; padding-bottom:1px;
}

.bb-custom-side h2 { text-align:center; font-size:12px; font-weight:300;
margin:10px 5px; color:#ed1724; line-height:24px;
}

.bb-custom-side h3 { text-align:center; font-size:9px; font-weight:300;
 color:#3d3333;line-height:12px;
}

.bb-custom-side p { text-align:left; font-size:8px !important; margin:0 0 3px 0; padding:0 0 1px 0;
border-bottom:1px dotted #633d30;  color:#97561e;
	
	
}
.bb-custom-side h4 { text-align:center; font-size:10px; font-weight:300;
margin:0px; color:#ed1724;line-height:13px; margin:0; padding:5px 0 5px 0;
}

.bb-custom-side h5 { text-align: justify; font-size:7px; font-weight:300;
margin:0px; color:#633d30;line-height:11px; margin:0; padding:10px;
}


.bb-custom-wrapper { 
width:350px; 
}
.bb-bookblock {	

	width:350px; 
	height: 263px; 
	
}
.bb-item {
	width: 350px;
	height: 263px;
	
}
.bb-custom-side {
	
	height: 263px; 
	
}


}
@media (max-width: 400px) {

.bb-custom-wrapper { 
width:300px; 
}
.bb-bookblock {	

	width:300px; 
	height: 220px; 
	
}
.bb-item {
	width: 300px;
	height: 220px;
	
}
.bb-custom-side {
	
	height: 220px; 
	
}

.bb-custom-side ul{ margin:10px 5px 0;  }

.bb-custom-side h1 { text-align:left; font-size:7px; font-weight:300;
margin:0; color:#633d30; padding-bottom:1px;
}

.bb-custom-side h2 { text-align:center; font-size:12px; font-weight:300;
margin:10px 5px; color:#ed1724; line-height:10px;
}

.bb-custom-side h3 { text-align:center; font-size:7px; font-weight:300;
 color:#3d3333;line-height:12px;
}

.bb-custom-side p { text-align:left; font-size:7px !important; margin:0 0 3px 0; padding:0 0 1px 0;
border-bottom:1px dotted #633d30;  color:#97561e;
	
	
}
.bb-custom-side h4 { text-align:center; font-size:10px; font-weight:300;
margin:0px; color:#ed1724;line-height:13px; margin:0; padding:5px 0 5px 0;
}

.bb-custom-side h5 { text-align: justify; font-size:7px; font-weight:300;
margin:0px; color:#633d30;line-height:11px; margin:0; padding:10px;
}

}