/*
 * jQuery Booklet Plugin
 * Copyright (c) 2010 - 2013 William Grauvogel (http://builtbywill.com/)
 *
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 *
 * Version : 1.4.2
 *
 * Originally based on the work of:
 *	1) Charles Mangin (http://clickheredammit.com/pageflip/)
 */
	@import url(https://fonts.googleapis.com/css?family=Lato:200,300,400,700);
	@import url("https://fonts.googleapis.com/css?family=Neucha|Cabin+Sketch&display=swap");
/* 
	@import url("../sketchy_bootstrap.css");
 */
	body{
	background:#ddd url("images/wood.jpg"); 
	padding:2% 1% 0%;
	font-family: 'Lato', sans-serif;
    color:#333;
	font-weight:400;
	font-size:14px;
	 transform: scale(1.0);
	}

/*   */ 
   

	@media screen and (min-width: 1367px) {
          	#footer {margin-bottom:-50px!important;
}  
  
  
  .booklet {
       
        transform: scale(1.05); 
       position:absolute; top: 10%; left:0%;  
       }
   }
   
   

        	@media screen and (min-width: 1281px) {
   .booklet {
       
        transform: scale(1.0);
     position:absolute; top: 0%; left:0%;
    }
   }
   
   
   
   

   	@media screen and (max-width: 1280px) {
  .booklet {
       
        transform: scale(0.88); 
      position:absolute; top: -10%; left:0%;
    }
   }
   
      	@media screen and (max-width: 1180px) {
  .booklet {
       
        transform: scale(0.82); 
       position:absolute; top: -10%; left:-5%;
      
    }
   } 
   
         	@media screen and (max-width: 1080px) {
  .booklet  {
       
        transform: scale(0.78); 
       position:absolute; top: -10%; left:-10%;
      
    }
   }
   /*smartphone-landscape */
        	@media screen and (max-width: 800px) {
        	

.booklet { 
    
           transform: scale(0.42); 
         
        position:absolute;
  top: -200px; left:-250px;
       
       
       /**/
      
    }
   
   }
   
   
   // X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
   
   

          	@media  (max-width: 767.98px) {

        	 body { max-height:414px; max-width:736px; overflow:auto; position:fixed; top:0; right:0;
 -moz-transform: scale(0.9, 0.9);
   zoom: 0.9;
   zoom:90%;
}   
.booklet, #mybook  { 
  -moz-transform: scale(1.1); 
  zoom: 1.1;
   zoom:110%;
 position:relative; margin:-240px auto 0 ;
  /*top: -220px; left:-240px;*/
    }
 }

             	@media(max-width: 575.98px) {

        	 body { max-height:320px; max-width:568px; overflow:auto; position:fixed; top:0; right:0;
 -moz-transform: scale(0.9, 0.9);
   zoom: 0.9;
   zoom:90%;
}   
.booklet, #mybook  { 
  -moz-transform: scale(.9); 
  zoom: .9;
   zoom:90%;
 position:relative; margin:-280px auto 0 ; z-index:+1!important;
  /*top: -220px; left:-240px;*/
    }
 }
   
   
   
   
   

/*   */
   
/* 
	h1,h2 { 
	font-family: 'Lato', sans-serif;
	font-weight:200;
	}
	h1 { 
	font-family: 'Lato', sans-serif;
	font-weight:200;
	font-size: 30px;
	}
	
 
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: "Cabin Sketch", cursive;
  font-weight: 500;
  line-height: 1.2;
}
*/

/*logo-zoom*/
.transitione {
    -webkit-transform: scale(1.5); 
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5) rotate(0deg);
   /*transform: rotate(180deg);*/
}
/*Zustand bei ":hover" */
.fade  {
opacity: .6;
-webkit-transition:opacity 500ms ease-out;
-moz-transition:opacity 500ms ease-out;
-o-transition:opacity 500ms ease-out;
transition:opacity 500ms ease-out;
}
.zoomy{
    -webkit-transition:width .5s, height .5s,  -webkit-transform .5s;
    transition:width .5s, height .5s,  transform .5s;
}


	h1 { 
	font-family: "Cabin Sketch", cursive !important;
	margin-top: 1rem;
    margin-bottom: 0rem;
	font-weight:200;
	font-size: 38px;
	color:#666;
	}
	h2 { 
	font-family: "Cabin Sketch", cursive !important;
	margin-top: .8rem;
    margin-bottom: 0rem;
	font-weight:200;
	font-size: 28px;
	color:#666;
	}

	.booklet {width:1200px; height:750px; position:relative; margin:0 auto; overflow:visible !important; vertical-align:middle;
	
	border:1px solid transparent
	}
	.booklet .b-page {left:0; top:0; position:absolute; overflow-x:hidden; overflow-y:scroll; padding:0; outline:1px solid transparent;
	}
     .page_inner {width:auto; max-height:680px; position:relative; overflow-y:scroll; padding:0 20px 20px; margin:0; outline:0px solid #999; 
	}
	
	.page_inner li {line-height:180%; margin-left:-20px;
	}
	   .lefter { padding-left:50px; 
	}
		.righter { padding-right:50px;
	}
	
	.right {width:100%; height:100%; position:relative; top:0px; overflow:hidden; padding:0; margin:0; outline:1px solid transparent;
	}
	
	.booklet .b-pN  {}
	.booklet .b-p0  {}
	.booklet .b-p1  {}
	.booklet .b-p2  {}    
	.booklet .b-p3  {}
	.booklet .b-p4  {}
	   
   	/* Page Wrappers */
	.booklet .b-wrap       {top:0px; position:absolute; }
	.booklet .b-wrap-left  {background:#fff;}
	.booklet .b-wrap-right {background:#efefef;}
	
	.booklet .b-pN .b-wrap,
	.booklet .b-p1 .b-wrap,
	.booklet .b-p2 .b-wrap,
	.booklet .b-p3 .b-wrap,
	.booklet .b-p4 .b-wrap  {left:0;}
	.booklet .b-p0 .b-wrap  {right:0;}
	
   	/* Custom Page Types */
	.booklet .b-page-blank  {padding:0; width:100%; height:100%;}
	.booklet .b-page-cover  {padding:0; width:100%; height:100%; background:#925C0E url("images/cover_last.png");background-size:cover;  }
	.booklet .b-page-cover h3  {color:#fff; text-shadow:0px 1px 3px #222;}
   
   	/* Page Numbers */
	.booklet .b-counter {bottom:10px; z-index: +10; position:absolute; display:block; width:25px; height:20px; background:#ccc; color:#444; text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:10px; padding:5px 0 0;}
	.booklet .b-wrap-left  .b-counter  {left:10px;}
	.booklet .b-wrap-right .b-counter {right:10px;}
   
   	/* Page Shadows */
	.booklet .b-shadow-f  {right:0; top:0; position:absolute; opacity:0; background: #fff url("images/shadow-top-forward.png"); background-repeat:repeat-y; background-position:100% 0;}
	.booklet .b-shadow-b  {left:0;  top:0; position:absolute; opacity:0; background: #fff url("images/shadow-top-back.png");    background-repeat:repeat-y; background-position:0 0;}
	
	.booklet .b-p0 {background: #fff url("images/shadow.png"); background-repeat:repeat-y; background-position:100% 10px;}
	.booklet .b-p3 {background: #fff url("images/shadow.png"); background-repeat:repeat-y; background-position:0 10px;}
	
   	/* Overlay Controls */
	.booklet .b-grab     {cursor: url("images/openhand.cur"), default;}
	.booklet .b-grabbing {cursor: url("images/closedhand.cur"), default;}
	
   	/* Overlay Controls */
	.booklet .b-overlay      {top:0; position:absolute; height:100%; width:50%;}
	.booklet .b-overlay-prev {left:0;}
	.booklet .b-overlay-next {right:0;}
	
   	/* Tab Controls */
	.booklet .b-tab        {background:#000; height:40px; width:100%; padding:10px 0 0; text-align:center; color:#ccc; position:absolute; font-size:12px;}
	.booklet .b-tab-prev   {left:0;}
	.booklet .b-tab-next   {right:0;}
	.booklet .b-tab:hover  {background:#aaa; color:#000;}	
	
   	/* Arrow Controls */
	.booklet .b-arrow          {display:block; position:absolute; text-indent:-9999px; top:0; height:100%; width:74px;}
	.booklet .b-arrow div      {display:none; text-indent:-9999px; height:170px; width:74px; position:absolute; left:0; top:25%;}
	.booklet .b-arrow-next     {right:-80px;}
	.booklet .b-arrow-prev     {left:-80px;}
	.booklet .b-arrow-next div {background:url("images/arrow-next.png") no-repeat left top;}
	.booklet .b-arrow-prev div {background:url("images/arrow-prev.png") no-repeat left top;}
		
/* @z-index fix (needed for older IE browsers)
----------------------------------------*/

    body              {z-index:0;}
    .b-menu           {z-index:100;}
    .b-selector       {z-index:100;}
    .booklet          {z-index:10;}
    .b-pN             {z-index:10;}
    .b-p0             {z-index:30;}
    .b-p1             {z-index:20;}
    .b-p2             {z-index:20;}
    .b-p3             {z-index:30;}
    .b-p4             {z-index:10;}
    .b-prev           {z-index:40;}
    .b-next           {z-index:40;}
    .b-counter        {z-index:40;}
	
/* @Menu Items
----------------------------------------*/
	.b-menu {height:40px; padding:0 0 10px;}
	
	.b-selector             {height:40px; position:relative; float:right; border:none; color:#cecece; cursor:pointer; font:normal 12px "Myriad Pro", Myriad, "DejaVu Sans Condensed","Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;}
	.b-selector .b-current  {padding:8px 15px 12px; line-height:20px; min-width:18px; height:20px; display:block; background:#000; text-align:center;}
	.b-selector-page        {width:auto; margin-left:15px;}
	.b-selector-chapter     {width:auto;}
	
	.b-selector:hover            {color:#fff; background-position:left 0px;}
	.b-selector:hover .b-current {background-position:right 0px;}
	.b-selector ul               {overflow:hidden; margin:0; list-style:none !important; position:absolute; top:40px; right:0; padding:0 0 10px; background:#000; width:240px;}
	.b-selector li               {border:none;}
	.b-selector a                {color:#cecece; height:14px; text-decoration:none; display:block; padding:5px 10px;}
	.b-selector a .b-text        {float:left; clear:none;}
	.b-selector a .b-num         {float:right; clear:none;}
	.b-selector a:hover          {color:#fff;}