/* Flipbook CSS - Ultima Atualizacao: 15/07/2019 */


/* Header FlipBook*/

#flipBookArea {
    overflow: hidden;
    position: relative;
    min-height: 780px;
    background: url(../img/bg-flip.jpg) top center repeat-x;
    background-size: contain;
    padding-bottom: 30px;
}

.menuFlip {
    overflow-x: hidden;
    position: relative;
    background: rgb(0,0,0,0.4);
}
.menuFlip .container {
	position: relative;
	text-align: center;
	padding: 15px 0px;
}

.menuFlip .container p {
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	margin-bottom: 0px;
}

.menuFlip .container .backI {
    position: absolute;
	font-size: 20px;
	cursor: pointer;
	top: 10px;
    left: 0px;
	color: #fff;
	margin: 0px;
	margin-top: 0px;
	padding: 0px;
}

.menuFlip .container .backI i {
    margin-right : 10px;
}




/* Flipbook */
#flipbook{
    width:500px;
    height: 780px;
    display: block;
    margin: 40px auto!important;
    box-shadow: 0px 0px 10px 0px #ccc;

}


#flipbook div img {
    width: 100%!important;
    height: 100%!important;
}

#indiceFlipbook, #flipbookContainer {
    height: 780px;
    overflow: hidden;

}

#flipbookContainer.zoomed {
    width: 100%!important;
    height: 100%!important;
}


#flipbook .page{
    background: url(../img/loading.gif) center no-repeat;
    width:500px;
    height: 740px;
    background-color:white;
    line-height:300px;
    font-size:20px;
    text-align:center;
}

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

#flipbook .hard{
    background:#ccc !important;
    color:#333;
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    font-weight:bold;
}

#flipbook .odd{
    background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
    background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
    
}

#flipbook .even{
    background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
    background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%);
    background-image:linear-gradient(left, #fff 95%, #dadada 100%);
    -webkit-box-shadow:inset 0 0 5px #666;
    -moz-box-shadow:inset 0 0 5px #666;
    -o-box-shadow:inset 0 0 5px #666;
    -ms-box-shadow:inset 0 0 5px #666;
    box-shadow:inset 0 0 5px #666;
}

/* Controles */

.zoom-in, .zoom-out, .fullscreen, .prev-btn.zoomed, .next-btn.zoomed {
    position: absolute!important;
    background-color: rgb(0,0,0,0.7);
    padding: 10px!important;
    width:40px;
    font-size: 15px;
    height:40px;
    text-align: center;
    display: block;
    border: 0px;
    color: #fff;
    margin: 0px;
    z-index: 999;
    right: 20px;
    left: auto;
    transition: 0.2s;   
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;}

.zoom-in:hover, .zoom-out:hover, .fullscreen:hover, .prev-btn.zoomed:hover, .next-btn.zoomed:hover {
    background:#000;
    color: #fff;
}

.fullscreen {
    top: 40px;
}

.zoom-in {
    top: 90px;
}
.zoom-out {
    top: 140px;}

.prev-btn, .next-btn {
    cursor: pointer;
    border:none;
    background: none;
    position: absolute;
    outline: none;
    font-size: 25px;
    color: #ccc;
	transition: 0.2s;   

}

.prev-btn:hover, .next-btn:hover {
    color: #000;
}
.prev-btn{
    left: 8%;
    top: 50%;
}

.next-btn{
    right: 10%;
    top: 50%;
}

.prev-btn.zoomed  {
	top: 190px;
}

.next-btn.zoomed  {
	top: 240px;
}

/* Indice */

#indiceFlipbook{
	padding-top: 20px;
	position: relative;
}

#indiceFlipbook .indice{
    width: 100%;
    max-height: 650px;
    display: block;
    margin: 20px 0px!important;
	text-align: left;
	border:2px solid #ccc;
	padding: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
    overflow-x:hidden;
    overflow-y:auto;
}

#indiceFlipbook .imprimir {
	font-size: 16px;
	cursor: pointer;
	float: right;
	color: #000;
	background: none;
	margin: 20px 3px;
	padding: 4px 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border:2px solid #000;
}  
#indiceFlipbook .imprimir:hover{
    background-color: #fff;
    color: #000;
}



#indiceFlipbook .indice h2,#indiceFlipbook .indice ul  {
    margin: 0px;

}

#indiceFlipbook h2 {
    margin: 20px 0px;
    float: left;
    display: block;
}

#indiceFlipbook .indice ul {
 	padding: 0px;
    list-style-type: none;

}

 
#indiceFlipbook .indice ul li {
    padding: 10px;
    background-color: rgba(0,0,0,0.05);
    cursor: pointer;
    font-size: 14px;
    margin: 5px 0px;
    -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	font-style: italic;

 }

 #indiceFlipbook .indice ul li b{
    display: block;
    font-size: 16px;
    font-style: normal;
 }

 #indiceFlipbook .indice ul li .badge {
    float: left!important;
    display: inline-block;
    margin-right: 10px;
 }

 #indiceFlipbook .indice ul li:hover{
	background-color: #549e80;
	color: #fff;
 }

 #indiceFlipbook .indice ul li:hover .badge {
    background-color: rgba(71,122,100,1);
 }


@media (max-width: 992px) 
{
    #flipbookContainer {
    height: 780px;
} 

#flipBookArea .flipContainer {
    padding: 0px!important;
}


.fullscreen {
    display: none!important;
}

.zoom-in {
    top: 40px;
}
.zoom-out {
    top: 90px;}


.prev-btn:hover, .next-btn:hover {
    color: #000;
}
.prev-btn{
    left: 8%;
    top: 50%;
}

.next-btn{
    right: 10%;
    top: 50%;
}

.prev-btn.zoomed  {
top: 140px;

}

.next-btn.zoomed  {
top: 190px;
}



#flipbook, .page {
    width:  500px!important;
    height: 740px!important;
}
#flipbook div img {
    width: 100%!important;
    height: 100%!important;
}


.zoom-in, .zoom-out, .fullscreen, .prev-btn, .next-btn,  .prev-btn.zoomed, .next-btn.zoomed {
    right: 20px!important;
}


}

@media (max-width: 768px) 
{

    #flipbookContainer {
    height: 620px;
} 


#flipbook, .page {
    width:  370px!important;
    height: 548px!important;
}
#flipbook div img {
    width: 100%!important;
    height: 100%!important;
}




 .menuFlip { padding: 0px 30px; }
    .menuFlip .container .backI span, .menuFlip .container p span {
        display: none;
    }

    .zoom-in, .zoom-out, .fullscreen, .prev-btn, .next-btn, .prev-btn.zoomed, .next-btn.zoomed {
    position: absolute!important;
    background-color: rgb(0,0,0,0.7);
    padding: 10px!important;
    width:35px;
    font-size: 13px;
    height:35px;
    text-align: center;
    display: block;
    border: 0px;
    color: #fff;
    margin: 0px;
    z-index: 999;
    right: 0px;
    left: auto;
    transition: 0.2s;   
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.zoom-in:hover, .zoom-out:hover, .fullscreen:hover, .prev-btn:hover, .next-btn:hover {
    background:#000;
    color: #fff;
}

.prev-btn{
top: 140px;
}

.next-btn{
top: 190px;
}


.prev-btn.zoomed  {

right: 0px;

}

.next-btn.zoomed  {

right: 0px;

}



}

@media (max-width: 375px) 
{

    #flipbook{
    width:100%!important;
    height: 500px!important;
}




    #flipbookContainer {
    height: 500px!important;
} 


    #flipbook, .page {
        width:  300px!important;
        height: 444px!important;
    }
}


@media (max-width: 320px) 
{

    #flipbook{
    width:100%!important;
    height: 430px!important;
}



    #flipbookContainer {
    height: 430px!important;
} 


    #flipbook, .page {
        width:  260px!important;
        height: 385px!important;
    }
}