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

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	padding-inline-start: 0;
}

@media screen and (max-width:900px) {
  .coverDesign {
    display:none; 
  }
  
  .book {
   display:flex;
   flex-direction:column;
   transform-origin: left top;
   animation-name: magnify;
   animation-duration: 0.3s;
   animation-timing-function: linear;       
   border-top:3px solid brown;
   border-bottom:3px solid brown;
   width:100%;
   margin:0 auto;
   overflow: hidden; 
   background:#f5f5bf; 
   min-height:calc(100vh - 40px);
   position:relative;   
  }
  
  .hardcover_front {
    order:2 
  }
  
  .hardcover_back {
    order:1
  }  
}

@keyframes magnify {   
  0%{   
    transform: scale(0);   
  }   
  100%{   
     transform: scale(1);                   
  }             
}

@media screen and (min-width:900px) {
.container {
  overflow:hidden;
}

.align > li {
	width: 90%;
	max-width:1300px;
	height:90vh;
	display: block;
	padding-top: 30px;
	padding-bottom: 30px;
	margin:0 auto;
	vertical-align: top;
}

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

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

.book {
	position: relative;
	width: 50%; 
	height:calc(90vh - 4px);
	float:right;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	perspective: 1000px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform:scale(0.8);
	-webkit-transition: all 1.2s ease;
	-moz-transition: all 1.2s ease;
	transition: all 1.2s ease;	
}

/*
	2. background & color
*/

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

/* reverse */
.hardcover_front li:last-child {
	background: #fffbec;
	background: -webkit-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: -o-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: -moz-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);	
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
	background: #fffbec;
	  background: -webkit-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: -o-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: -moz-linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);
  background: linear-gradient(to right, #f5f5bf, #fcfc9a, #987654);	
}

/* reverse */
.hardcover_back li:first-child {
	background: linear-gradient(to right, #987654, #fcfc9a, #f5f5bf);
}

/*
	3. opening cover, back cover and pages
*/

.hardcover_front {
	-webkit-transform: rotateY(-7deg) translateZ(4px);
	-moz-transform: rotateY(-7deg) translateZ(4px);
	transform: rotateY(-7deg) translateZ(4px);
}

.hardcover_back {
	-webkit-transform: rotateY(0) translateZ(-8px);
	-moz-transform: rotateY(0) translateZ(-8px);
	transform: rotateY(0) translateZ(-8px);

}
/*
	4. position, transform & transition
*/

.hardcover_front,
.hardcover_back,
.hardcover_front li,
.hardcover_back li {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:2px solid grey;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

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

/*
	5. events
*/

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

.active {
 transform:scale(1) 
}

.active > .hardcover_front {
	-webkit-transform: translateX(0) rotateY(-180deg) translateZ(0);
	-moz-transform: translateX(0) rotateY(-180deg) translateZ(0);
	transform: translateX(0) rotateY(-180deg) translateZ(0);	
	z-index: 0;
}

.hardcover_front {
	-webkit-transition: all 1.2s ease, z-index 0.6s;
	-moz-transition: all 1.2s ease, z-index 0.6s;
	transition: all 1.2s ease, z-index 0.6s, transform-origin 0s;
}

.active > .hardcover_front:after {
  content: "";
  width: 4px;
  height: 100%;
  background-color: #999;
}
/*
	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 {
  content: "";
	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%, transparent 100%);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.coverDesign h1 {
	color: black;
	font-weight:bold;
	font-size: 4em;
	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: black;
	font-size: 3em;
	text-align: center;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
}

.yellow {
	background-color: #f1c40f;
}

/* Basic ribbon */

.ribbon {
	background: #c0392b;
	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::before,
.ribbon::after{
  content: "";
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	border-bottom: 20px solid #c0392b;
	border-top: 20px solid transparent;
}

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

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

.bookmark {
  width:5px;
  height:100%;
  background:#999;
}
 
}

@media only screen and (min-width: 900px) and (max-height: 650px) {
  .container {
     width:calc(100% - 200px);
     height:85vh;
     position:relative;
     left:200px;
     top:50%;
     transform:translateY(-50%);
  }
  .align > li {
    padding-top:0;
    padding-bottom:0;
  }
  .book {
    height:85vh; 
  }
}