#book-zoom{
        -webkit-transition: -webkit-transform 1s;
        -moz-transition: -moz-transform 1s;
        -ms-transition: -ms-transform 1s;
        -o-transition: -o-transform 1s;
        transition: transform 1s;
}

.animated{
        -webkit-transition:margin-left 0.2s ease-in-out;
        -moz-transition:margin-left 0.2s ease-in-out;
        -o-transition:margin-left 0.2s ease-in-out;
        -ms-transition:margin-left 0.2s ease-in-out;
        transition:margin-left 0.2s ease-in-out;
}

#flipbook{
 position: absolute;
  width: 100%;
  height: 100px;
  left: 3%;
}

	
.paginador{
	width: 50px;
  height: 10px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
}

.pag{
  width: 1px;
  height: 1px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  font-style: italic;
   font-size: 12px;
font-family: Roboto Slab, serif;
  margin: 1% 0 0 50%; 
}




.gematria_res_color {
color: red;
}
    





.hard{
        background-image:url(../pics/covers.jpg);
}

 .page{
         width:400px;
        height:300px;
        background:white;

        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
        box-shadow:0 0 20px rgba(0,0,0,0.2);
}




 .page2{
         width:400px;
        height:300px;
         background: #fafaeb;
        -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
        -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
        box-shadow:0 0 20px rgba(0,0,0,0.2);
}





         .even .gradient{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:url(../pics/right-border.png);
        background-position:right top;
        background-repeat: repeat-y;
}

         .odd .gradient{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image:url(../pics/left-border.png);
        background-position:left top;
        background-repeat: repeat-y;
}

.page-wrapper{
        -webkit-perspective:2000px;
        -moz-perspective: 2000px;
        -ms-perspective: 2000px;
        perspective: 2000px;
}

.shadow{
        -webkit-transition: -webkit-box-shadow 0.5s;
        -moz-transition: -moz-box-shadow 0.5s;
        -o-transition: -webkit-box-shadow 0.5s;
        -ms-transition: -ms-box-shadow 0.5s;

        -webkit-box-shadow:0 0 20px #ccc;
        -moz-box-shadow:0 0 20px #ccc;
        -o-box-shadow:0 0 20px #ccc;
        -ms-box-shadow:0 0 20px #ccc;
        box-shadow:0 0 20px #ccc;
}

.tabs{
        width:942px;
        height:22px;
        top:-22px;
        position:relative;
        z-index:1;
}



.tabs > div{
        width:461px;
        height:22px;
        float:left;
}

.tabs .left{
        text-align:left;
        margin-left:10px;
}


.tabs .right{
        text-align:right;
        margin-right:10px;
}

.tabs a{
        color:black;
        -webkit-border-image: url(../pics/tab-off.png) 5 20 5 20 repeat stretch;
        border-width: 5px 20px 5px 20px;
        display:inline-block;
        font:bold 10px arial;
        text-shadow:1px 1px 0 #ddd;
        color:#333;
        line-height:12px;
        text-decoration:none;
}



.tabs .on,
.tabs .on:hover{
        -webkit-border-image: url(../pics/tab-on.png) 5 20 5 20 repeat stretch;
        cursor:default;
}

.tabs a:hover{
        color:black;
        text-decoration: none;
        cursor:pointer;
        -webkit-border-image: url(../pics/tab-hover.png) 5 20 5 20 repeat stretch;

}

.texto
{
font-size: 14px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_normal
{
font-size: 16px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_titulo
{
font-size: 17px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_peq
{
font-size: 12px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript
{
color: red;
font-size: 11px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript2
{
color: red;
font-size: 14px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_hebreo
{
font-size: 24px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_hebreo2
{
font-size: 22px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_titulo_mobil
{
font-size: 11px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_normal_mobil_transliterado
{
font-size: 10px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_normal_mobil
{
font-size: 10px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_hebreo_mobil
{
font-size: 10px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript_mobil
{
color: red;
font-size: 8px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript_mobil2
{
color: red;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.pag_mobil{
  width: 1px;
  height: 1px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  font-style: italic;
   font-size: 6px;
font-family: Roboto Slab, serif;
  margin: 1% 0 0 50%; 
}

.iconos{
width: 18px;
height: 18px;
}

/* ----------- ##############980###########----------- */
@media screen and (max-width: 820px) {
#flipbook{
 position: absolute;
  width: 100%;
  height: 30%;
  left: 0%;
}

	
	
}


/* ----------- ##############980###########----------- */
@media screen and (max-width: 980px) {
#flipbook{
 position: absolute;
  width: 100%;
  height: 30%;
  left: 1%;
}

	
	
}


/* ----------- ##############479###########----------- */
@media screen and (max-width: 479px) {
/* start of phone styles */
#flipbook{
 position: absolute;
  width: 100%;
  height: 400px;
  left: 1%;
}

}



/* ----------- ##############1400##########----------- */
@media screen and (max-width: 1400px) {
#flipbook{
 position: absolute;
  width: 100%;
  height: 30%;
  left: 1%;
}

.texto_normal
{
font-size: 12px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_titulo
{
font-size: 15px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_hebreo
{
font-size: 24px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript
{
color: red;
font-size: 10px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

.texto_superscript2
{
color: red;
font-size: 12px;
font-style: normal;
font-weight: normal;
font-family: Roboto Slab, serif;
}

}