/* ------------------------------- Fade-In Page ------------------------------- */

html {
-webkit-animation: fadein 1s;
-moz-animation: fadein 1s;
-ms-animation: fadein 1s;
-o-animation: fadein 1s;
animation: fadein 1s;
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}
/* FADE-IN PAGE */


html,body {
margin: 0;
padding: 0;
overflow: auto !important;
}


/* ------------------------------- Magazine HELP-ARROW ------------------------------- */

input[type=checkbox]#HelpTextMagazin {
	position: absolute;
	display: block;
	top: 570px;
	margin-left: 550px;
	opacity: 0;
}
input[type=checkbox]#HelpTextMagazin + label {
	width: 108px;
	height: 47px;
	background: url('../../../../HelpArrow/ReadMagazin.png')  no-repeat;
	background-size: 100%;
	position: absolute;
	display: block;
	top: 330px;
	margin-left: -170px;
	cursor: pointer;
	z-index: 5000;
}
input[type=checkbox]#HelpArrowMagazin {
	position: absolute;
	display: block;
	top: 600px;
	margin-left: 550px;
	opacity: 0;
}
input[type=checkbox]#HelpArrowMagazin + label {
	position: absolute;
	display: block;
	width: 120px;
	height: 80px;
	padding-top: 50px;
	background: url('../../../../HelpArrow/ArrowLTR-1.png') no-repeat;
	background-position: 0% 40%;
	top: 345px;
	margin-left: -170px;
	cursor: pointer;
	z-index: 5002;
}


.RemoveHelp {
opacity: 0;
transition: opacity 0.2s linear;
}




/* ------------------------------- Background ------------------------------- */

#fb5 .fb5-bcg-book{
background-image: url('../../../../IMG/BGLight.png');
width: 100%;
height: 100%
}

#fb5{
position: relative;
overflow: hidden;
margin: 0 auto;
display: block;
width: 100%;
height: 100%;
opacity: 0;
}


#fb5 #fb5-container-book {
position: absolute;
z-index: 5;
display: none;
width: 1100px;
height: 775px;
}


#fb5 #fb5-deeplinking li{
list-style: none;
}




/* ------------------------------- Book ------------------------------- */

#fb5 #fb5-book {
position: relative;
z-index: 10;
width: 100%; 
height: 100%;
}

#fb5 #fb5-book .turn-page {
background-color: #FFF;
background-size: 100% 100%;
border-radius: 10px;
}


/* ------------------------------- Binding Shadow ------------------------------- */

#fb5 .binding-left {
width: 180px;
height: 100%;
  background: -webkit-linear-gradient(left, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: -o-linear-gradient(right, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: -moz-linear-gradient(right, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: linear-gradient(to right, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
display: block;
position: relative;
right: 0;
z-index: 11;
opacity: 0.4;
border-radius: 10px;
}


#fb5 .binding-right {
width: 100px;
height: 100%;
  background: -webkit-linear-gradient(right, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: -o-linear-gradient(left, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: -moz-linear-gradient(left, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
  background: linear-gradient(to left, #b6b6b6 5% , #ffffff 20% , #f6f5f5 30% , transparent 45% );
display: block;
position: relative;
float: right;
z-index: 11;
opacity: 0.6;
border-radius: 10px;
}




/* ------------------------------- Arrows ------------------------------- */

#fb5 .fb5-nav-arrow {
position: absolute;
top: 50%;
z-index: 15;
background: url(../img/arrow-navpage.png);
width: 34px;
height: 136px;
margin-top: -68px;
cursor: pointer;
}

#fb5 .fb5-nav-arrow.next{
right: -34px;
background-position: 0 0;
cursor: pointer;
}

#fb5 .fb5-nav-arrow.prev{
left: -34px;
background-position: 0 -372px;
display: none;
cursor: pointer;
}



/* ------------------------------- Footer and Tools Bar ------------------------------- */

#fb5 #fb5-footer #fb5-logo {
width: 200px;
height: 100px;
display: block;
position: absolute;
margin: 0 auto;
bottom: 20px;
z-index: 5;
}

#fb5 #fb5-footer {
opacity:0;
position: absolute;
bottom: 0;
z-index: 15;
width: 100%;
height: 50px;
margin: 0;
padding: 0;
}

#fb5 #fb5-footer .fb5-bcg-tools {
background-color: #000000;
height: 100%;
left: 0;
opacity: 0.55;
position: absolute;
top: 0;
width: 100%;
}



/* ------------------------------- Icons Title ------------------------------- */


#fb5 .fb5-tooltip{
display: none;
position: absolute;
background: #00c0ff !important; 
color: #FFFFFF;
padding: 10px;
font-family: IranSans-Light;
font-size: 16px;
font-weight: 400;
border-radius: 5px;
left: 0;
top: -25px;
padding: 10px;
z-index: 5;
}

#fb5 .fb5-tooltip b {
width: 0;
height: 0;
position: absolute;
display: block;
bottom: -7px;
left: 6px;
border-right: 10px solid rgba(0, 0, 0, 0);
border-top: 10px solid #00c0ff;
}

#fb5 .fb5-menu ul {
list-style: none; 
margin: 0;
padding: 0;
}
#fb5 .fb5-menu#fb5-center {
margin: 0 auto;
margin-top: 25px;
left: 0;
right: 0;
}


/* ------------------------------- Icons ------------------------------- */


#fb5 .fb5-menu li a.fb5-download{
display: inline-block;
width: 40px;
height: 60px;
background-image: url('../img/Icon-Download.png');
margin: 0 auto;
left: -230px;
right: 0;
float: none;
top: -30px;
position: absolute;
z-index: 10;
transition: transform 0.1s ease-out;
cursor: pointer; list-style-type:none
}
#fb5 .fb5-menu li a.fb5-download:hover{
transform: translate(0, -5px);
cursor: pointer;
}


#fb5 .fb5-menu li a.fb5-zoom-in{
display: inline-block;
width: 40px;
height: 60px;
background-image: url(../img/Icon-ZoomIn.png);
margin: 0 auto;
left: -90px;
right: 0;
float: none;
top: -30px;
list-style: none;
position: absolute;
z-index: 10;
transition: transform 0.1s ease-out;
cursor: pointer;
}
#fb5 .fb5-menu li a.fb5-zoom-in:hover{
transform: translate(0, -5px);
cursor: pointer;
}


#fb5 .fb5-menu li a.fb5-zoom-out{
display: inline-block;
width: 40px;
height: 60px;
background-image: url(../img/Icon-ZoomOut.png);
margin: 0 auto;
left: 40px;
right: 0;
float: none;
top: -30px;
list-style: none;
position: absolute;
z-index: 10;
transition: transform 0.1s ease-out;
cursor: pointer;
}
#fb5 .fb5-menu li a.fb5-zoom-out:hover{
transform: translate(0, -5px);
cursor: pointer;
}



#fb5 .fb5-menu li a.fb5-zoom-original{
display: inline-block;
width: 40px;
height: 60px;
background-image: url(../img/Icon-ZoomOriginal.png);
margin: 0 auto;
left: 170px;
right: 0;
float: none;
top: -30px;
list-style: none;
position: absolute;
z-index: 10;
transition: transform 0.1s ease-out;
cursor: pointer;
}
#fb5 .fb5-menu li a.fb5-zoom-original:hover{
transform: translate(0, -5px);
cursor: pointer;
}


#fb5 #fb5-button-back{
display: inline-block;
width: 40px;
height: 60px;
background-image: url(../img/Icon-FirstPage.png);
margin: 0 auto;
left: 280px;
right: 0;
float: none;
bottom: 20px;
list-style: none;
position: absolute;
z-index: 10;
transition: transform 0.1s ease-out;
cursor: pointer;
}
#fb5 #fb5-button-back:hover{
transform: translate(0, -5px);
cursor: pointer;
}





/* ------------------------------- Responsive ------------------------------- */

@media screen and (max-width: 768px) { 
/*
 .fb5-nav-arrow.next{
transform-origin: 0 center;
-ms-transform-origin: 0 center;
-webkit-transform-origin: 0 center; 
 }

 .fb5-nav-arrow.prev{
transform-origin: right center;
-ms-transform-origin: right center;
-webkit-transform-origin: right center; 
 }

.fb5-nav-arrow{
transform: scale(2);
ms-transform: scale(2);
-webkit-transform: scale(2);
}
/*/
}