/*! 
* 
*
* Copyright (c) 2014 Eric Kiilu 

*/

.lp{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
background-image: url(../images/texture.png);
background-color: #404040;
width:100%;
height: 100%;
visibility: hidden;
 
}

.lp-book{
background-color: #404040;
display: block;
position: absolute;
left: 0;
right: 0;
margin: auto;
top:50px;
}

#lp-left{
position: absolute;
overflow: visible;
display: block;
left: 1000;
}

#lp-inner-left{
position: absolute;
overflow: hidden;
padding-bottom: 500px;
top: -300px;

-moz-user-select: none; 
-khtml-user-select: none; 
-webkit-user-select: none; 
-o-user-select: none;
}


#lp-inner-2-left{
position: absolute;
overflow: hidden;
padding-bottom: 500px;
top: -300px;
}


#lp-right-page{
position: absolute;
background-color: #ffffff;
}

#lp-left-page{
position: absolute;
background-color: #ffffff;
}

#lp-clip {
position: absolute;
top: 300px;
width: 100%;
height: 100%;
}

#lp-clip-shadow{
position: absolute;
overflow: hidden;
background:-moz-linear-gradient(right, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5));
background:-webkit-linear-gradient(right,rgba(0,0,0,0) 1%,rgba(25,25,25,0.3));


}

#lp-clip2 {
position: absolute;
top: 300px;
background-color: #ffffff;
}

#lp-right-clip2 {
position: absolute;
background-color: white;
top: 300px;
-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;
}

#lp-right-clip {
position: absolute;
top: 300px;
}

#lp-inner-clip {
position: absolute;
overflow: hidden;
background-color: #ffffff;

}

#lp-right-inner-clip {
position: absolute;
background-color: white;
}

#lp-right{
position: absolute;
left: 50%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: 0;
}

#lp-inner-right{
position: absolute;
overflow: hidden;
padding-bottom: 500px;
top: -300px;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;

}
#lp-inner-2-right{
position: absolute;
overflow: hidden;
padding-bottom: 500px;
top: -300px;
}

#lp-shadow{
width:40px;
height: 100%;
position: absolute;
}
#shadow{
width: 40px;
height: 100%;
background-color: yellow;
position: absolute;


}

#zoom-in{
position: absolute;
top:30%;
left: 0%;
border-top-right-radius: 50%;
border-bottom-right-radius:50%;
padding: 1.5%;
z-index: 10;
}  
#prevbtn{
position: absolute;
top:40%;
left: 0%;
border-top-right-radius: 50%;
border-bottom-right-radius:50%;
padding: 1.5%;
z-index: 10;

background-image: url("../images/previous_white.svg");
background-size: 100% 100%;
width: 1%;
height: 10%;

}

#nextbtn{
position: absolute;
top:40%;
right: 0%;
border-top-left-radius: 100%;
border-bottom-left-radius:100%;
padding: 1.5%;
z-index: 10;


background-image: url("../images/next_white.svg");
background-size: 100% 100%;
width: 1%;
height: 10%;
}
/*Thumbnail holder */
.thumbnail-holder-left{
position: absolute;
height: 100%;
width: 50%;
left: 0%;
outline:none;
background-color: white;
border-right: 2px solid rgba(255, 255, 255, 0.2);

}

.thumbnail-holder-right{
position: absolute;
height: 100%;
width: 50%;
right: 0%;
background-color: white;
border-left: 2px solid rgba(0, 0, 0, 0.5);
}

#nextthumbnail{
position: absolute;
background-color: rgba(0, 0, 0, 0.7); /* Color white with alpha 0.9*/
border-top-left-radius: 4px;
border-top-right-radius: 4px;
padding-left: 2%;
padding-right: 3%;
z-index: 10;

left: 0;
right: 0;
margin: auto;
width: 1%;
top: -25%;
height: 25%;
}

#showPage{
color: white;
font-weight: bold;
text-align: center;
width: 50%;
position: absolute;
right: 0;
margin: auto;
top: 0;
bottom: 0; 
}
#page-number{
color: white;
position: absolute;
left: 20%;
font-weight: bold;
}

#menu-options{
width: 5%;
height: 4%;
background-color: #666;
background-color: rgba(0, 0, 0, 0.7); /* Color white with alpha 0.9*/
position: absolute;
top: -4%;
left: 44.5%;
bottom: 1%;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
z-index: 10;
}

#thumbnails{
width: 100%;
height: 15%;
background-color: rgba(0, 0, 0, 0.7); /* Color white with alpha 0.9*/
background-image: url(../js/paper/images/texture.png);

position: absolute;
top: 100%;
left: 0%;
bottom: 1%;
z-index: 10;
padding-top: 5px;

}
/*This is a single nav bar thumbnail */
.thumbnail-final{
height:100%;
width: 15%;
position: absolute;
}

.inner_thumbnail{
width: 90%;
height: 90%;
position: absolute;
left: 10%;
top: 7%;
}
/*This is used to enlarge an image when the mouse is hoved */
.outer_thumbnail{
width: 100%;
height: 100%;
position: relative;
}
/*This is displayed when the image is missing for the thumbnail */
.nopicture{
width: 100%;
height: 100%;
}

/*This deals with the nav bar found at the bottom */
.thumbnails-nav{
width: 87%;
height: 85%;
position: absolute;
left: 7%;
overflow: hidden;
}
/*current thumbnails navigations */
.thumbnails-nav-current{
width: 94.5%;
height: 100%;
position: absolute;
left: -2%;
}
.thumbnails-nav-next{
width: 15%;
height: 100%;
position: absolute;
z-index: 10;
left: 120%;
}
.thumbnails-nav-prev{
width: 15%;
height: 100%;
position: absolute;
z-index: 10;
left: -15%;
}
.current-page-thumbnail{
height: 85%;
width: 60%;
background-color: purple;
position: absolute;
left: 10%;
}
.prev-page-thumbnail{
height: 95%;
width: 10%;
position: absolute;
right: 10%;
}

.next-page-thumbnail{
height: 95%;
width: 9%;
position: absolute;
left: 10%;
}

#first-page{
padding: 1%;
top: 30%;
left: 0%;
position: absolute;
background-color: rgba(0, 0, 0, 1); /* Color white with alpha 0.9*/
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
#last-page{
padding: 1%;
top: 30%;
position: absolute;
right: 0%;
background-color: rgba(0, 0, 0, 1); /* Color white with alpha 0.9*/
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}


#next-thumb-page{
padding: 1%;
top: 10%;
position: absolute;
right: 1%;

}
#prev-thumb-page{
padding: 1%;
top: 10%;
left: 1%;
position: absolute;

}


#next-page{
padding: 1%;
top: 30%;
left: 3%;
position: absolute;
background-color: green;

}
#prev-page{
padding: 1%;
top: 30%;
padding: 1%;
position: absolute;
right: 3%;
background-color: yellow;
}

#loader{
left: 50%;
top: 45%;
position: absolute;
}


#slider-viewer{
left:25%;
position: absolute;

}

#nextbook{
background-color: purple;
position: absolute;
width:100%;
height: 400px;
left: 100%;
margin-left: 5%;
}
#nextbook2{
background-color: purple;
position: absolute;
width:100%;
height: 400px;
left: 100%;
margin-left: 5%;
}

#left-shadow{
height: 100%;
width: 3%;
position: absolute;
left: 0%;
z-index: 0;
background:-moz-linear-gradient(right, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5)); 
background:-webkit-linear-gradient(right,rgba(0,0,0,0) 1%,rgba(25,25,25,0.3)); 
}

#right-shadow{
height: 100%;
width: 3%;
position: absolute;
right: 0%;
z-index: 0;
background:-moz-linear-gradient(left, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5)); 
background:-webkit-linear-gradient(left,rgba(0,0,0,0) 1%, rgba(25,25,25,0.3));
}


#top-left-shadow{
height: 100%;
width: 3%;
position: absolute;
right: 100%;
z-index: 0;
background:-moz-linear-gradient(right, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5)); 
background:-webkit-linear-gradient(right,rgba(0,0,0,0) 1%,rgba(25,25,25,0.3)); 
}

#top-right-shadow{
height: 200%;
width: 20%;
position: absolute;
right: 0%;
z-index: 10;
background:-moz-linear-gradient(left, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5));
background:-webkit-linear-gradient(left,rgba(0,0,0,0) 1%, rgba(25,25,25,0.3));
background-color: black;
}

#top-right-shadow2{
height: 100%;
width: 3%;
position: absolute;
right: 97%;
z-index: 10;
background:-moz-linear-gradient(right, rgba(0,0,0, 0) 1%, rgba(104,102,102,0.5));
background:-webkit-linear-gradient(right,rgba(0,0,0,0) 1%, rgba(25,25,25,0.3));
}


/*This class is added when the mouse is over the thumbnail this shows the dark color */
.mouse_over_thumbnail{
background-color: rgba(0,0,0,0);
width: 100%;
height: 100%;
position: absolute;
z-index: 100;
}

.mouse_out_thumbnail{
	background-color: rgba(0,0,0,.4);
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
}


/* THis is used to hold up tags that are invisble to the user tho they are accessible through the dom */
#bookcontainer{
	display: none;
}

#lpcontainer{
	display: none;
}
.pageContent{
	width: 100%;
	height: 100%;
}

.spinner{
	position: relative;
	width: 5%;
	height: 5%;
	margin: auto 0;
	position: absolute;
	top:0;
	bottom:0; 
	left:0;
	right:0;
	margin:auto;
}

.thumbnail-spinner{
	width: 100%;
	height: 100%;
}
.thumbnail-spinner-inner{
	width: 30%;
	height: 20%;
	position: absolute;
	top:0;
	bottom:0; 
	left:0;
	right:0;
	margin:auto;
    background-color: #ffff00;
}

#lp{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	cursor:hand;
	cursor: pointer;
}

#instructions{
	color: white;
	background-color:rgba(0,0,0,0.3);
	border: 2px solid white;
	border-radius: 5%;
	width: 50%;
	height: 20%;
	position: absolute;
	left: 10%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	margin: auto;
	padding: 3%;
	font-weight: bold;
	font-size: 12px;
}

.thumbnail-page{
	color: #000000;
	background-color:rgba(0,0,0,0.4);
	border: 0px solid black;
	border-radius: 10%;
	width: 50%;
	height: 30%;
	position: absolute;
	left: 10%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	margin: auto;
	padding-bottom: 20%;
	padding-top: 5%;
	padding-left: 0%;
	padding-right:0%;
	font-weight: bold;
	font-size: 17px;
	z-index: 10;
	text-align: center;
}
#nextthumbnail{
	display:none;
}

#closebtn{
     background-image: url("../images/close.svg");
    background-size: 100% 100%;
    height: 40%;
    position: absolute;
    right: -10%;
    width: 50%;
}
#nextNav{
    position:absolute;
    right:-10%;
    width: 20%;
    height: 100%;
    background-size: 100% 100%;
    background-image: url("../images/next_page.svg");
}
#prevNav{
    position:absolute;
    left:-10%;
    height: 100%;
    width: 20%;
    background-size: 100% 100%;
    background-image: url("../images/previous.svg");
}

#topnavbar {
  background-color: #222840;
  background-image: url("http://www.febaf.it/wp-content/themes/abiania/img/logo.jpg");
  background-repeat: no-repeat;
  background-size: contain;
  border: 2px solid #ccc;
  border-radius: 7px;
  height: 36px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 5px;
  width: 52%;
  z-index: 50;
}
.navbuttons{
	width: 50%;
	height: 100%;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	position: relative;
}


.navbuttons2{
	position: absolute;
	width: 40px;
	height: 90%;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 5%;
}

.closebutton{
  position: absolute;
  width: 50px;
  left: 95%;
  background-color: yellow;
}

.slider {
  position: absolute;
  width: 50px;
  left: 5%;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 90%;
  display: none;
}

.pagecounter{
	position: absolute;
	width: 70%;
	height: 90%;
	top: 0;
	bottom: 0;
	margin: auto;
	right: 0;
	left: 0;

}
.mfp-wrap input[type="text"]{
	font-size: 10px;
	height: 10px;
	position: absolute;
	left: 5%;
	top: 0;
	bottom: 0;
	margin: auto;
}

input[type="range"] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  width: 100%;
  height: 10px;
  margin: 0;
  border: none;
  padding: 1px 2px;
  border-radius: 14px;
  background: #232528;
  box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  -webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
  outline: none; /* no focus outline */
}

input[type="range"]::-moz-range-track {
  border: inherit;
  background: transparent;
}

input[type="range"]::-ms-track {
  border: inherit;
  color: transparent; /* don't drawn vertical reference line */
  background: transparent;
}

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
  background: transparent;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

/* thumb */

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eee), color-stop(100%, #eee)); /* android <= 2.2 */
  background-image: -webkit-linear-gradient(top , #ccc 0, #eee 100%); /* older mobile safari and android > 2.2 */;
  background-image: linear-gradient(to bottom, #eee 0, #eee 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 10px;
  background-image: linear-gradient(to bottom, #eee 0, #eee 100%); /* W3C */
}

input[type="range"]::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  border: 0;
  background-image: linear-gradient(to bottom, #eee 0, #eee 100%); /* W3C */
}


#floatingBarsG{
position:relative;
width:62px;
height:77px}

.blockG{
position:absolute;
background-color:#FFFFFF;
width:10px;
height:24px;
-moz-border-radius:8px 8px 0 0;
-moz-transform:scale(0.4);
-moz-animation-name:fadeG;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:8px 8px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:8px 8px 0 0;
-ms-transform:scale(0.4);
-ms-animation-name:fadeG;
-ms-animation-duration:1.04s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:8px 8px 0 0;
-o-transform:scale(0.4);
-o-animation-name:fadeG;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:8px 8px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:1.04s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#rotateG_01{
left:0;
top:28px;
-moz-animation-delay:0.39s;
-moz-transform:rotate(-90deg);
-webkit-animation-delay:0.39s;
-webkit-transform:rotate(-90deg);
-ms-animation-delay:0.39s;
-ms-transform:rotate(-90deg);
-o-animation-delay:0.39s;
-o-transform:rotate(-90deg);
animation-delay:0.39s;
transform:rotate(-90deg);
}

#rotateG_02{
left:8px;
top:10px;
-moz-animation-delay:0.52s;
-moz-transform:rotate(-45deg);
-webkit-animation-delay:0.52s;
-webkit-transform:rotate(-45deg);
-ms-animation-delay:0.52s;
-ms-transform:rotate(-45deg);
-o-animation-delay:0.52s;
-o-transform:rotate(-45deg);
animation-delay:0.52s;
transform:rotate(-45deg);
}

#rotateG_03{
left:26px;
top:3px;
-moz-animation-delay:0.65s;
-moz-transform:rotate(0deg);
-webkit-animation-delay:0.65s;
-webkit-transform:rotate(0deg);
-ms-animation-delay:0.65s;
-ms-transform:rotate(0deg);
-o-animation-delay:0.65s;
-o-transform:rotate(0deg);
animation-delay:0.65s;
transform:rotate(0deg);
}

#rotateG_04{
right:8px;
top:10px;
-moz-animation-delay:0.78s;
-moz-transform:rotate(45deg);
-webkit-animation-delay:0.78s;
-webkit-transform:rotate(45deg);
-ms-animation-delay:0.78s;
-ms-transform:rotate(45deg);
-o-animation-delay:0.78s;
-o-transform:rotate(45deg);
animation-delay:0.78s;
transform:rotate(45deg);
}

#rotateG_05{
right:0;
top:28px;
-moz-animation-delay:0.9099999999999999s;
-moz-transform:rotate(90deg);
-webkit-animation-delay:0.9099999999999999s;
-webkit-transform:rotate(90deg);
-ms-animation-delay:0.9099999999999999s;
-ms-transform:rotate(90deg);
-o-animation-delay:0.9099999999999999s;
-o-transform:rotate(90deg);
animation-delay:0.9099999999999999s;
transform:rotate(90deg);
}

#rotateG_06{
right:8px;
bottom:7px;
-moz-animation-delay:1.04s;
-moz-transform:rotate(135deg);
-webkit-animation-delay:1.04s;
-webkit-transform:rotate(135deg);
-ms-animation-delay:1.04s;
-ms-transform:rotate(135deg);
-o-animation-delay:1.04s;
-o-transform:rotate(135deg);
animation-delay:1.04s;
transform:rotate(135deg);
}

#rotateG_07{
bottom:0;
left:26px;
-moz-animation-delay:1.1700000000000002s;
-moz-transform:rotate(180deg);
-webkit-animation-delay:1.1700000000000002s;
-webkit-transform:rotate(180deg);
-ms-animation-delay:1.1700000000000002s;
-ms-transform:rotate(180deg);
-o-animation-delay:1.1700000000000002s;
-o-transform:rotate(180deg);
animation-delay:1.1700000000000002s;
transform:rotate(180deg);
}

#rotateG_08{
left:8px;
bottom:7px;
-moz-animation-delay:1.3s;
-moz-transform:rotate(-135deg);
-webkit-animation-delay:1.3s;
-webkit-transform:rotate(-135deg);
-ms-animation-delay:1.3s;
-ms-transform:rotate(-135deg);
-o-animation-delay:1.3s;
-o-transform:rotate(-135deg);
animation-delay:1.3s;
transform:rotate(-135deg);
}

@-moz-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

.thumbnail-play{
    width:100%;height:87%;
    position:absolute;
    left:0;
    top:0;
    padding:0;
    background-color:rgba(0,0,0,0.1);
    background-image:url("../images/play.svg");
    background-size: 50% 30%;
    background-position: center 90%;
    background-repeat: no-repeat;
    padding-bottom: 20%;
    text-align: center;
    font-size: 1px;
    color: white;
    font-weight: bolder;
}
.thumbnail-play:hover{
    background-color:rgba(0,0,0,0.3);

}