@media screen and (max-width: 768px){

	.main{
		width:95%;
		position:relative;
		height:95%;
	}
	.book{
		width:100%;
		height:100%;
		position:absolute;
		max-height:1000px;
	}
	.cover .front{
	   background-position:top;	
	}
	.front-overlay{
		z-index:20;
		background-color:rgba(0,0,0,0.6);
	}
	.intro-wrapper{
		z-index:40;
		left:30px;
		margin-top:20%;
		width:90%;
		color:#FFF;
    }
	#aline{
		width:100%;
		margin-left:0;
	}
	.intro-content{
		width:80%;
		max-width:90%;
		display:block;
		position:absolute;
		z-index:100;
		text-shadow:1px 1px 1px #000;
	}
	#open-it{
		width:45%;
		padding:5px 10px 5px 10px;
	 	display:block;
	 	text-align:center;
	}
	#open-it:hover{
	}
	.intro-content h3{
		opacity:1;
	}
	.intro-content p{
		opacity:.8;
	}
	.btn {
		opacity:.8;
	}
	.btn-1e:hover,
	.btn-1e:active {
		opacity:1;
	}
	.bb-custom-side {
		position: static;
		float: none;
		width: 100%;
		height:auto;
	}
	
	body{
		height:auto;
		width:auto;
		overflow: visible;
		overflow-x: hidden;
	}
	#top-perspective{
		position:relative;
		height:auto;
		width:100%;
		display:none;
	}
	#top-wrapper{
		position:static;
		height:auto;
		margin:auto;
		width:100%;
		max-width:630px;
	}
	#book-1{
		position:static;
		height:auto;
		padding:0 0 0 0;
		border:none;
	}
	.bb-custom-wrapper .bb-bookblock{
		height:auto;
		float:none;
		min-height:680px;
		background:#FFF;
	}
	.bb-item{
		position:static;
		height:auto;
		min-height:680px;
	}
	.bb-custom-side::before{
		content:none;
	}
	.bb-custom-wrapper::before, .bb-custom-wrapper::after{
		content:none;		
	}
	#top-perspective.modalview{
		-webkit-perspective: none;
		perspective: none;
	}
	.modalview.animate #top-wrapper{
		width:100%;
		height:auto;
		overflow:visible;
	}
	.effect-moveleft.animate #top-wrapper {
		-webkit-transform: translateX(-70%) rotateY(15deg) translateZ(-20px);
		-moz-transform: translateX(-70%) rotateY(15deg) translateZ(-20px);
		transform: translateX(-70%) rotateY(15deg) translateZ(-20px);
	}
	.cover::before{
		display:block;
		opacity:.36;
	}
	#menu-wrapper{
		margin-top:30px;
		right:5%;
		display:none;
	}
	#close-button{
		right:5%;
	}
	#menu-copy{
		position: fixed;
	}
	#phone-menu{
		position:fixed;
		top:0;
		left:0;
		visibility:visible;
		height: 40px;
		width: 100%;
		background:#FFF;
		opacity:.8;
		z-index:60;
	}
	.book-timeline > li .time-data{
		font-size: 1em;
		font-family: 'Marvel', Verdana, Geneva, sans-serif;
		padding: 3px 0px;
		border: none;
		width:20%;
		display:block;
	}
	.outer-nav{
		height: auto;
	}
	.outer-nav a{
		font-size:1.1em;
	}
	
	.blog-page{
		width:100%;
		margin-top:0px;
		margin-bottom:0px;
		padding:30px;
	}
}
@media (min-width: 769px) and (max-width: 992px) {
	.bb-custom-wrapper {
		font-size: 90%;
	}
	.main{
		width:90%;
	}
	.book{
		width:50%;
		max-height:800px;
	}
	.intro-wrapper{
		right:0px;
  	}
	#menu-wrapper{
		right:10%;
	}
	.book-timeline > li .time-data{
		left:-2%;
	}
	.portfolio-item .mask > a.fancybox{
		display:none;
	}
}
@media (min-width: 992px) and (max-width: 1200px) {
	.main{
		width:80%;
	}
	.book{
		width:50%;
	}
	.intro-wrapper{
		right:20px;
  	}
	#menu-wrapper{
		right:12%;
	}
	.portfolio-item .mask > a.fancybox{
		height:60px;
	}

}
@media (min-width: 1201px) and (max-width: 1300px)  {
	.main{
		width:80%;
		max-width:1100px;
	}
	.book{
		width:500px;
		min-width:360px;
	}
	.intro-wrapper{
		right:0px;
  	}
	#top-wrapper{
		max-width:1100px;
		max-height:760px;
	}
	#menu-wrapper{
		right:13%;
	}

}

@media (min-width: 1301px) {
	.main{
		width:80%;
		max-width:1200px;
	}
	.book{
		width:560px;
		min-width:360px;
	}
	.intro-wrapper{
		right:20px;
  	}
	#top-wrapper{
		max-width:1160px;
		max-height:800px;
	}
	.portfolio-item .mask > a.fancybox{
		height:80px;
	}
	#menu-wrapper{
		right:15%;
	}
}
@media screen and (max-height: 750px){
	
	
	 .book-open .book {
		z-index: 1000;
		-webkit-animation: scaleUpSmallBook 0.5s forwards;
		animation: scaleUpSmallBook 0.5s forwards;
	}
	
	 .book-close .book {
		-webkit-animation: scaleDownSmallBook 0.5s forwards;
		animation: scaleDownSmallBook 0.5s forwards;
	}
	@-webkit-keyframes scaleUpSmallBook { 
	  85%,
	  100% { -webkit-transform: scale(1.1,1) }
	}
	
	@keyframes scaleUpSmallBook { 
	  85%,
	  100% { transform: scale(1.1,1) }
	}
	
	@-webkit-keyframes scaleDownSmallBook { 
	  0%,
	  15% { -webkit-transform:scale(1.1,1) }
	
	  100% { -webkit-transform: scale(1) }
	}
	
	@keyframes scaleDownSmallBook { 
	  0%,
	  15% { transform: scale(1.1,1) }
	
	  100% { transform: scale(1) }
	}
	
	.bb-custom-wrapper.book-show {
		visibility: visible;
		-webkit-transition: visibility 0s;
		transition: visibility 0s;
		-webkit-animation: openBigBook 0.5s forwards;
		animation: openBigBook 0.5s forwards;
	}
	
	.no-cssanimations .bb-custom-wrapper.book-show { opacity: 1 }
	
	.bb-custom-wrapper.book-hide {
	
	   -webkit-animation: closeBigBook 0.5s forwards;
		animation: closeBigBook 0.5s forwards;    
	}
	
	.no-cssanimations .bb-custom-wrapper.book-hide { opacity: 0 }
	
	@-webkit-keyframes openBigBook { 
	  45% {
		  opacity: 0;
	  }
	
	  85% { opacity: 1 }
	
	  100% {
		  opacity: 1;
		  -webkit-transform: scale(1);
	  }
	}
	
	@keyframes openBigBook { 
	  45% {
		  opacity: 0;
	  }
	
	  85% { opacity: 1 }
	
	  100% {
		  opacity: 1;
	  }
	}
	
	@-webkit-keyframes closeBigBook { 
	  0%,
	  15% {
		  opacity: 1;
	  }
	
	  55%,
	  100% {
		  opacity: 0;
	  }
	}
	
	@keyframes closeBigBook { 
	  0%,
	  15% {
		  opacity: 1;
	  }
	
	  55%,
	  100% {
		  opacity: 0;
	  }
	}

}
@media screen and (max-height: 500px){
	#menu-wrapper{
		top:36%;
	}
	#menu-copy{
		bottom:-30%;
	}
}