main.css

@import url('toolbar.css');
@import url('sidebar.css');

@font-face {
	font-family: 'fontello';
	src: url('../font/fontello.eot?60518104');
	src: url('../font/fontello.eot?60518104#iefix') format('embedded-opentype'),
		url('../font/fontello.woff?60518104') format('woff'),
		url('../font/fontello.ttf?60518104') format('truetype'),
		url('../font/fontello.svg?60518104#fontello') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: rgb(50, 54, 57);
}

#content {
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	display: flex;
	position: absolute;
	overflow: hidden;
	background: #fff;
	align-items: center;

	box-shadow: 0 3px 9px #000;
	-webkit-box-shadow: 0 3px 9px #000;
	-moz-box-shadow: 0 3px 9px #000;
	-ms-box-shadow: 0 3px 9px #000;
}

#content,
#content.closed,
#viewer {
	transition: width 0.3s;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
}

#content.closed {
	width: calc(100% - 300px);
}

#content.closed> #viewer {
	width: calc(100% - 116px);
}

#viewer {
    display: flex;
	width: calc(100% - 416px);
	height: calc(100% - 116px);
	margin: 0 auto;
	z-index: 2;
	overflow: hidden;
	align-items: center;
	vertical-align: middle;
    box-shadow: 0 0 16px rgba(0,0,0,.12),0 16px 16px rgba(0,0,0,.24);
    color: inherit;
}

#viewer .epub-view {
    width: auto !important;
}

#viewer iframe {
	border: none;
}

#prev {
	padding-left: 10px;
}

#next {
	text-align: end;
	padding-right: 10px;
}

.arrow {
	flex: 1;
}

.arrow:disabled,
.arrow.disabled {
	visibility: hidden;
}

.arrow span {
	color: #E2E2E2;
	cursor: pointer;
	overflow: hidden;
	font-size: 64px;
	font-family: arial, sans-serif;
	font-weight: bold;
	vertical-align: middle;

	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.arrow span:hover {
	color: #777;
}

.arrow:active > span,
.arrow.active > span {
	color: #000;
}

#divider {
	left: 50%;
	height: calc(100% - 116px);
	margin: 0;
	padding: 0;
	display: none;
	position: absolute;
	border-left: 1px dotted #777;
}

#loader {
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	width: 64px;
	height: 64px;
	position: absolute;
	background-size: 64px;
	background-image: url('../img/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
}

/* #overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: hidden;
    top: 0;
    left: 0;
    z-index: 1000;
    opacity: 0;
    background: rgba(255,255,255,0.8);

    transition: all 0.3s;    
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
} */

/* @media only screen and (max-width: 1040px) {
    #viewer{
        width: 50%;
        margin-left: 25%;
    }

    #divider,
    #divider.show {
        display: none;
    }
} */

/* @media only screen and (max-width: 900px) {
    #viewer{
        width: 60%;
        margin-left: 20%;
    }

    #prev {
        left: 20px;
    }

    #next {
        right: 20px;
    }
} */

/* @media only screen and (max-width: 550px) {
    #viewer{
        width: 80%;
        margin-left: 10%;
    }

    #prev {
        left: 0;
    }

    #next {
        right: 0;
    }

    .arrow {
        height: 100%;
        top: 45px;
        width: 10%;
        text-indent: -10000px;
    }

    #content {
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transition: .3s;
        -webkit-transition: -webkit-transform .3s;
        -moz-transition: -moz-transform .3s;
        -ms-transition: -moz-transform .3s;
    }

    #content.closed {
        transform: translate(260px, 0);
        -webkit-transform: translate(260px, 0);
        -moz-transform: translate(260px, 0);
        -ms-transform: translate(260px, 0);
    }
} */

/* For iPad portrait layouts only */
/* @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
    #viewer iframe {
        width: 460px;
        height: 740px;
    }
} */
/* For iPad landscape layouts only */
/* @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
    #viewer iframe {
        width: 460px;
        height: 415px;
    }
} */
/* For iPhone portrait layouts only */
/* @media only screen and (max-device-width: 480px) and (orientation: portrait) {
    #viewer {
        width: 256px;
        height: 432px;
    }
    #viewer iframe {
        width: 256px;
        height: 432px;
    }
} */
/* For iPhone landscape layouts only */
/* @media only screen and (max-device-width: 480px) and (orientation: landscape) {
    #viewer iframe {
        width: 256px;
        height: 124px;
    }
} */