@charset "UTF-8";

.bb-custom-nav {
    background: url(../img/anime_170706__.png);
    z-index: 250;
}
.bb-bookblock .bb-item {
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
}
#bb-item-begin {
//    opacity: 1;
}
#bb-item-first {
	-webkit-transform: rotateY(0deg);
	transform: rotateY(0deg);
	z-index: 200;
}
#bb-item-second {
	-webkit-transform: rotateY(0);
	transform: rotateY(0);
	z-index: 200;
}
#bb-item-third::after {
//    content: "";
    position: absolute;
    background: url(../img/anime_170706_nodo.png);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
    z-index: -1;
}
#bb-item-third {
    width: 100%;
}
.bb-bookblock {
//    display: block !important;
	position: relative;
	z-index: 200;
	color: #fff;
	line-height: 50px;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.bb-bookblock.shown .begin {
	-webkit-animation: begin 0.5s linear 0s;
	animation: begin 0.5s linear 0s;
}
.bb-bookblock.shown .first {
	-webkit-animation: first 0.5s linear 0.5s forwards;
	animation: first 0.5s linear 0.5s forwards;
}
.bb-bookblock.shown .second {
	-webkit-animation: second 0.5s linear 1s forwards;
	animation: second 0.5s linear 1s forwards;
}
.bb-bookblock.shown .third {
	-webkit-animation: third 1s linear 0.5s forwards;
	animation: third 1s linear 0.5s forwards;
}
.bb-custom-map {
    opacity: 0;
	-webkit-animation: map 0.8s linear 0s forwards;
	animation: map 0.8s linear 0s forwards;
}
@keyframes begin {
    from {
        opacity: 1;
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    to {
        opacity: 1;
        -webkit-transform: translate(230px, 0);
        transform: translate(230px, 0);
    }
}
@keyframes first {
    from {
        opacity: 1;
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
    to {
        opacity: 1;
        -webkit-transform: rotateY(-90deg);
        transform: rotateY(-90deg);
    }
}
@keyframes second {
    from {
        opacity: 1;
        -webkit-transform: rotateY(90deg);
        transform: rotateY(90deg);
    }
    to {
        opacity: 1;
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
    }
}
@keyframes third {
    from, to {
        opacity: 1;
    }
}
@keyframes map {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}