@charset "utf-8";

.bb-bookblock {
	margin: 0 auto;
	position: relative;
	z-index: 100;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	
}

.bb-page {
	position: absolute;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition-property: -webkit-transform;
	transition-property: transform;
}

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

.bb-horizontal .bb-page {
	width: 100%;
	height: 50%;
	top: 50%;
	-webkit-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;
	-webkit-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;
	transform-style: preserve-3d;
}

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

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

.bb-outer {
	width: 100%;
	/*border-radius: 3rem;*/
	overflow: hidden;
	z-index: 999;
}

.bb-overlay, 
.bb-flipoverlay {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
	border-radius: 2.5rem;
}

.bb-flipoverlay {
	background-color: rgba(0, 0, 0, 0.2);
	/*border-radius: 2.5rem;*/
}

.bb-bookblock.bb-vertical > div.bb-page:first-child,
.bb-bookblock.bb-vertical > div.bb-page:first-child .bb-back {
	-webkit-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);
	transform: rotateX(180deg);
}

/* Content display */
.bb-content {
	border-radius: 3rem;
}

.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);
	transform: rotateY(-180deg);
}

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

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

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

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

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

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

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

.bb-item {
	clear:both;
	width: 100%;
	display: none;
	/* box-shadow: 0 0 3rem rgb(0 0 0 / 10%);
	border-radius: 3rem; */
	transition: all .5s;
}
.bb-item:before,.bb-item:after {content:" ";display:table;}
.bb-item:after {clear:both;}

/* 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;
}


/* demo2 */

@font-face {
	font-family: 'arrows';
	src:url('arrows/arrows.eot');
	src:url('arrows/arrows.eot?#iefix') format('embedded-opentype'),
		url('arrows/arrows.woff') format('woff'),
		url('arrows/arrows.ttf') format('truetype'),
		url('arrows/arrows.svg#arrows') format('svg');
	font-weight: normal;
	font-style: normal;}

.bb-custom-wrapper {width:100%;position:relative;}
.bb-custom-wrapper .bb-bookblock {width:100%;min-height:46.7rem;border-radius:3rem;box-shadow:0 2rem 7rem -1rem rgb(221 221 221);}
.bb-custom-img {float:left;width:100%;border-radius:2.5rem 0 0 2.5rem;}
.bb-custom-video {float:left;width:100%;height:420px;border-radius:2.5rem 0 0 2.5rem;}
.bb-custom-wrapper h3 {font-size:1.4em;font-weight:300;margin: 0.4em 0 1em;}
.bb-custom-wrapper nav {width:100%;position:relative;z-index:0;text-align:center;}
.bb-custom-wrapper nav a {display: inline-block;width:30px;height: 30px;text-align: center;border-radius:2px;background:#883b61;color: #fff;font-size:0;margin:2px;}
.bb-custom-wrapper .bb-nav-prev {display:inline-block;position:absolute;top:50%;left:-8rem;font-size:0;transform:translateY(-50%);}
.bb-custom-wrapper .bb-nav-next {display:inline-block;position:absolute;top:50%;right:-8rem;font-size:0;transform:translateY(-50%);}
.bb-custom-wrapper nav a:hover {opacity: 0.6;}
.bb-custom-icon:before {font-family: 'arrows';speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;font-size: 60px;display: block;color:#fff;-webkit-font-smoothing: antialiased;transition:all .5s;}
.bb-custom-icon:hover::before {color:#28a7a1;}

.bb-custom-icon-first:before,
.bb-custom-icon-last:before {content: "\e002";}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-arrow-right:before {content: "\e003";}

.bb-custom-icon-arrow-left:before,
.bb-custom-icon-first:before {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
/* No JS */
.no-js .bb-custom-wrapper {	height: auto;}
.no-js .bb-custom-content {	height: 470px;}


.bb-custom-wrapper nav {
	text-align: center;
	margin-top: 3rem;
}

.bb-custom-wrapper nav span {
	display: inline-block;
	width: 5.5rem;
	line-height: 5.5rem;
	background: #fff;
	margin: 3px;
	cursor: pointer;
	box-shadow: 0 2rem 3rem -1rem rgb(221 221 221);
	transition:all .5s;
}

.bb-custom-wrapper nav span.bb-current {
	color:#fff;
	background: linear-gradient(-45deg, #008ba5, #00b7ce);
	box-shadow: 0 2rem 3rem -1rem rgb(0 139 165 / 50%);
	transition:all .5s;
}


/* ////////////////////////// */


/* Style from Caledario: */
.fc-container h2 {
	color: #000;
	margin: 0 0 6rem 0;
	font-weight: 600;
	font-size: 4rem;
	letter-spacing: -.1rem;
}

.fc-container {
	position: relative;
	float: left;
	width: 50%;
	min-height: 46.7rem;
	padding: 5rem;
	background:linear-gradient(90deg, rgba(235,235,235,1) 0%, rgba(255,255,255,1) 7%);
}

.fc-container-img {
	position: relative;
	float: left;
	width: 50%;
	min-height: 46.7rem;
	background:#000;
	
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    align-items: center;
}

/*
	A. Mini Reset 
*/
/* ///////////////////////////////////////////////////

HARDCOVER
Table of Contents

1. container
2. background & color
3. opening cover, back cover and pages
4. position, transform y transition
5. events
6. Bonus
	- Cover design
	- Ribbon
	- Figcaption
7. mini-reset

/////////////////////////////////////////////////////*/
/*
	1. container
*/

.sub-content-broc ::before, .sub-content-broc ::after {
  content: "";
}

/* basic grid, only for this demo */
.align {
  clear: both;
  text-align: center;
}

.align > li {
	float:left;
  width: 33.33%;
  min-height: 344px;
  display: inline-block;
  vertical-align: top;
}

.btnbook {
  display: inline-block;
  color: #00b7ce;
  text-transform: uppercase;
  border: 2px solid #00b7ce;
  margin-top: 100px;
  font-size: 1.7em;
  font-weight: 700;
  padding: 0.1em 0.4em;
  text-align: center;
  -webkit-transition: color 0.3s, border-color 0.3s;
  -moz-transition: color 0.3s, border-color 0.3s;
  transition: color 0.3s, border-color 0.3s;
}

.btnbook:hover {
  border-color: #28a7a1;
  color: #28a7a1;
}

.book {
  position: relative;
  width: 230px;
  height: 316px;
  margin:0 auto;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

/*
	2. background & color
*/
/* HARDCOVER FRONT */
.hardcover_front li:first-child {
  background-color: #eee;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
overflow: hidden;
}

/* reverse */
.hardcover_front li:last-child {
  background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
  background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
  background: #fffbec;
}

.book_spine li:first-child {
  background: #eee;
}

.book_spine li:last-child {
  background: #28a7a1;
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  background: #999;
}

/* page */
.page > li {
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: linear-gradient(to right, #e1ddd8 0%, #fffbf6 100%);
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
}

/*
	3. opening cover, back cover and pages
*/
.hardcover_front {
  -webkit-transform: rotateY(-34deg) translateZ(8px);
  -moz-transform: rotateY(-34deg) translateZ(8px);
  transform: rotateY(-34deg) translateZ(8px);
  z-index: 100;
}

.hardcover_back {
  -webkit-transform: rotateY(-15deg) translateZ(-8px);
  -moz-transform: rotateY(-15deg) translateZ(-8px);
  transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
  -webkit-transform: rotateY(-28deg);
  -moz-transform: rotateY(-28deg);
  transform: rotateY(-28deg);
}

.page li:nth-child(2) {
  -webkit-transform: rotateY(-30deg);
  -moz-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
}

.page li:nth-child(3) {
  -webkit-transform: rotateY(-32deg);
  -moz-transform: rotateY(-32deg);
  transform: rotateY(-32deg);
}

.page li:nth-child(4) {
  -webkit-transform: rotateY(-34deg);
  -moz-transform: rotateY(-34deg);
  transform: rotateY(-34deg);
}

.page li:nth-child(5) {
  -webkit-transform: rotateY(-36deg);
  -moz-transform: rotateY(-36deg);
  transform: rotateY(-36deg);
}

/*
	4. position, transform & transition
*/
.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
}

.hardcover_front {
  -webkit-transition: all 0.8s ease, z-index 0.6s;
  -moz-transition: all 0.8s ease, z-index 0.6s;
  transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.hardcover_front li:last-child {
  -webkit-transform: rotateY(180deg) translateZ(2px);
  -moz-transform: rotateY(180deg) translateZ(2px);
  transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.hardcover_back li:last-child {
  -webkit-transform: translateZ(-2px);
  -moz-transform: translateZ(-2px);
  transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  position: absolute;
  top: 0;
  left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_front li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_front li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
}

.hardcover_front li:last-child:before {
  box-shadow: 0px 0px 30px 5px #333;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(-2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(-2px) translateY(-78px);
}

/* thickness of cover */
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_back li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_back li:first-child:before {
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_back li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
}

.hardcover_back li:last-child:before {
  box-shadow: 10px -30px 80px 30px #666;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-235px) translateX(2px) translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
  -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  width: 16px;
  z-index: 0;
}

.book_spine li:first-child {
  -webkit-transform: translateZ(2px);
  -moz-transform: translateZ(2px);
  transform: translateZ(2px);
}

.book_spine li:last-child {
  -webkit-transform: translateZ(-2px);
  -moz-transform: translateZ(-2px);
  transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
  width: 4px;
  height: 100%;
}

.book_spine li:first-child:after {
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
  -webkit-transform: rotateY(-90deg) translateZ(-12px);
  -moz-transform: rotateY(-90deg) translateZ(-12px);
  transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
  width: 4px;
  height: 16px;
}

.book_spine li:last-child:after {
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
}

.book_spine li:last-child:before {
  box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-308px) translateX(2px) translateY(-6px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-308px) translateX(2px) translateY(-6px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-308px) translateX(2px) translateY(-6px);
}

.page,
.page > li {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.page {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}

.page > li {
  width: 100%;
  height: 100%;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  transition-timing-function: ease;
}

.page > li:nth-child(1) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

.page > li:nth-child(2) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

.page > li:nth-child(3) {
  -webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.page > li:nth-child(4) {
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.page > li:nth-child(5) {
  -webkit-transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  transition-duration: 0.6s;
}

/*
	5. events
*/
.book:hover > .hardcover_front {
  -webkit-transform: rotateY(-145deg) translateZ(0);
  -moz-transform: rotateY(-145deg) translateZ(0);
  transform: rotateY(-145deg) translateZ(0);
  z-index: 0;
}

.book:hover > .page li:nth-child(1) {
  -webkit-transform: rotateY(-30deg);
  -moz-transform: rotateY(-30deg);
  transform: rotateY(-30deg);
  -webkit-transition-duration: 1.5s;
  -moz-transition-duration: 1.5s;
  transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
  -webkit-transform: rotateY(-35deg);
  -moz-transform: rotateY(-35deg);
  transform: rotateY(-35deg);
  -webkit-transition-duration: 1.8s;
  -moz-transition-duration: 1.8s;
  transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
  -webkit-transform: rotateY(-118deg);
  -moz-transform: rotateY(-118deg);
  transform: rotateY(-118deg);
  -webkit-transition-duration: 1.6s;
  -moz-transition-duration: 1.6s;
  transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
  -webkit-transform: rotateY(-130deg);
  -moz-transform: rotateY(-130deg);
  transform: rotateY(-130deg);
  -webkit-transition-duration: 1.4s;
  -moz-transition-duration: 1.4s;
  transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
  -webkit-transform: rotateY(-140deg);
  -moz-transform: rotateY(-140deg);
  transform: rotateY(-140deg);
  -webkit-transition-duration: 1.2s;
  -moz-transition-duration: 1.2s;
  transition-duration: 1.2s;
}

/*
	6. Bonus
*/
/* cover CSS */
.coverDesign {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.coverDesign::after {
  background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
  background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.coverDesign h1 {
  color: #fff;
  font-size: 2.2em;
  letter-spacing: 0.05em;
  text-align: center;
  margin: 54% 0 0 0;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.coverDesign p {
  color: #f8f8f8;
  font-size: 1em;
  text-align: center;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
}

.yellow {
  background-color: #f1c40f;
  background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
  background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
  background-image: linear-gradient(to bottom, #f1c40f 58%, #e7ba07 0%);
}

.blue {
  background-color: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
  background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
  background-image: linear-gradient(to bottom, #3498db 58%, #2a90d4 0%);
}

.grey {
  background-color: #f8e9d1;
  background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
  background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
  background-image: linear-gradient(to bottom, #f8e9d1 58%, #e7d5b7 0%);
}

/* Basic ribbon */
.ribbon {
  color: #fff;
  display: block;
  font-size: 0.7em;
  position: absolute;
  top: 11px;
  right: 1px;
  width: 40px;
  height: 20px;
  line-height: 20px;
  letter-spacing: 0.15em;
  text-align: center;
  -webkit-transform: rotateZ(45deg) translateZ(1px);
  -moz-transform: rotateZ(45deg) translateZ(1px);
  transform: rotateZ(45deg) translateZ(1px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 10;
}
.ribbon.new {
  background: #63c930;
}
.ribbon.new:before, .ribbon.new:after {
  border-bottom: 20px solid #63c930;
}
.ribbon.bestseller {
  background: #28a7a1;
}
.ribbon.bestseller:before, .ribbon.bestseller:after {
  border-bottom: 20px solid #28a7a1;
}

.ribbon::before,
.ribbon::after {
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
}

.ribbon::before {
  left: -20px;
  border-left: 20px solid transparent;
}

.ribbon::after {
  right: -20px;
  border-right: 20px solid transparent;
}

/* figcaption */
figcaption {
  text-align: left;
  position: absolute;
  top: 120%;
  left: 0;
  width: 100%;
}

figcaption h1 {
  height: 5rem;
  margin: 0;
  font-size: 2rem;
}

figcaption span {
	display: inline-block;
	margin: 2rem auto 0 auto;
	text-align: center;
	color: #fff;
	background: #28a7a1;
	border:solid .2rem #28a7a1;
	transition:all .5s;
}

figcaption span a {padding: .6em 2rem;font-size:1.6rem;color:#fff;}
figcaption span:hover {background:#ecf0f1;border:solid .2rem #28a7a1;}
figcaption span:hover a {color:#28a7a1;}

figcaption p {
  color: #63707d;
  line-height: 1.3;
}


/*기준에서 아래 사이즈로 적용*/

@media screen and (max-width:1790px) {
}
@media screen and (max-width:1550px) {
	.bb-custom-wrapper .bb-nav-prev {display:none;}
	.bb-custom-wrapper .bb-nav-next {display:none;}
}
@media screen and (max-width:1490px) {
	.bb-custom-wrapper .bb-bookblock {min-height: 50rem;}
	.fc-container, .fc-container-img {min-height: 50rem;}
}
@media screen and (max-width:1370px) {
	.bb-custom-img {border-radius:0;}
}
@media screen and (max-width:1230px) {
	.bb-custom-img {}
	.bb-custom-video {}
	.bb-custom-wrapper .bb-bookblock {min-height: 54rem;}
	.fc-container, .fc-container-img {min-height: 54rem;}
}
@media screen and (max-width:1150px) {
}
@media screen and (max-width:960px) {
	.fc-container {width:100%;background:#fff;}
	.fc-container-img {width:100%;overflow:hidden;}
	
	.align > li {width:100%;margin-bottom:22rem;}
	.align > li:last-child {margin-bottom:0;}
	
	.bb-custom-wrapper .bb-bookblock {width:330px;min-height:560px;}
	.fc-container {min-height:280px;padding:3rem;}
	.fc-container-img {min-height:280px;}
	.fc-container-img iframe {height:280px;}
	.fc-container h2 {margin:0 0 3rem 0;font-size:3.5rem;text-align:center;}
	.sub-content-book hr {display:block;width:7rem;margin:0 auto 3rem auto;border-top:2px solid;}
	.sub-content-book li {font-size:2.2rem;line-height:3rem;}
}
@media screen and (max-width:800px) {
	.book {width:200px;height:275px;}
	figcaption h1 {height:7rem;font-size:2.4rem;}
	figcaption span a {font-size: 2rem;}
	
.hardcover_front li:last-child:before {
  box-shadow: 0px 0px 30px 5px #333;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(-2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(-2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(-2px) translateY(-78px);
}
.hardcover_back li:last-child:before {
  box-shadow: 10px -30px 80px 30px #666;
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(2px) translateY(-78px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(2px) translateY(-78px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-195px) translateX(2px) translateY(-78px);
}
.book_spine li:last-child:before {
  box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-268px) translateX(2px) translateY(-6px);
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-268px) translateX(2px) translateY(-6px);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-268px) translateX(2px) translateY(-6px);
}
}
@media screen and (max-width:700px) {
}