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

body {margin: 0; padding: 0; height: calc(100vh - 420px); padding-top: 60px; background: url('../images/bg.jpg') no-repeat center bottom; background-size: cover; background-attachment: fixed;}

body {scroll-behavior: smooth;}

html {min-height: 100%;}

*:focus {outline: none;}

* {font-family: 'cormorant garamond',sans-serif;}

.clear {clear: both;}
.stone {position: relative;}
.hide {display: none;}

textarea {resize: none;}

h1 {color: #333333; text-transform: uppercase; font-size: 22px; font-weight: normal; border-bottom: solid 1px #e1e1e1; padding-bottom: 5px;}
h1 strong {border-bottom: solid 3px #0d60d2; padding-bottom: 4px;}
h3 {color: #686868; font-size: 18px; font-weight: normal; text-transform: uppercase; margin: 10 0; padding: 10px 10px;}
#footer h3 {color: #ffffff; font-size: 18px; font-weight: normal; text-transform: uppercase; margin: 0; padding: 10px 0 0 0;}
h5 {background-color: #f4f4f4; color: #686868; font-size: 18px; font-weight: normal; text-transform: uppercase; margin: 10 0; padding: 10px 10px;}

hr {clear: both; border-style: none; border-bottom: solid 1px #323232; padding-top: 10px; margin: 0;}

p {font-size: 13px; text-align: justify;}

a {font-size: 13px; text-align: justify; color: #0d60d2; text-decoration: none;}
/* a:hover {text-decoration: underline;} */

.wrapper {position: relative; width: 1245px; margin: 0 auto;}

header {transition: all 0.5s ease; height: 60px; background-color: rgba(0, 0 , 0, 0.7); position: fixed; z-index: 50; left: 0; top: 0; right: 0;}
/* .stick header {height: 6px;} */

/* .stick header #headerTop{height: 0;} */

#content {height: calc(100vh - 60px);}
#content.grid { padding-left: 30%; padding-right: 5%;}

#content .wrapper {background-color: #ffffff; padding: 20px;}
#content.grid .wrapper {background-color: transparent; width: 95%;}

.bookEdit {display: none !important;}
.admin .bookEdit {display: block !important;}

.list .libraryTable {display: table; background-color: #ffffff; width: 100%; border-collapse: collapse;}
.list .libraryTable .libraryRow {display: table-row;}
.list .libraryTable .libraryRow>div {display: table-cell; border: solid 1px #aaaaaa; padding: 5px; font-size: 12px;}
.list .bookCover {width: 60px; height: 80px; background-position: center; background-repeat: no-repeat; background-size: contain;}
.list .shelf {display: none;}
.list .gridWrapper {display: table-row-group;}
.list .bookEdit {display: none !important;}

.grid .gridWrapper {display: flex; flex-wrap: wrap; align-items: center;}

.grid .libraryTable .libraryRow {width: 24%; height: 410px; margin-bottom: 40px; text-align: center; position: relative;;}

.grid .gridHide {display: none;}
.grid .publishDate {display: none;}
.grid .publishDate {display: none;}
.grid .publisher {display: none;}
.grid .bookCover {position: absolute; top: 0; left: 5%; right: 5%; height: 350px; background-position: center; background-repeat: no-repeat; background-size: contain; margin: 0 auto; box-shadow: 0px 4px 4px rgba(0, 0 , 0, 0.5)}

.grid .bookCoverBlur {filter: blur(7px); position: absolute; top: 0; left: 5%; right: 5%; height: 350px; background-position: center; background-repeat: no-repeat; background-size: cover; margin: 0 auto; box-shadow: 0px 4px 4px rgba(0, 0 , 0, 0.5)}

.grid .bookAuthor {transition: all .2s ease-in-out; color: #ffffff; width: 0; position: absolute; top: 55px; font-weight: bolder; font-size: 18px; opacity: 0; background-color: #990000; box-shadow: 2px 2px 2px rgba(0, 0 , 0, 0.5);}
.grid .libraryRow:hover .bookAuthor {opacity: 1; right: 30%; width: 70%;}

.grid .bookTitle {transition: all .2s ease-in-out; position: absolute; bottom: 60px; left: 5%; right: 5%; font-family: 'josefin sans', sans-serif; font-size: 12px; text-transform: uppercase; background-color: rgba(255, 255 , 255, 0.5); padding: 10px 0; z-index: 7; opacity: 0;}
.grid .libraryRow:hover .bookTitle {opacity: 1;}

.grid .bookNumber {position: absolute; top: 0; left: 5%; width: 40px; height: 40px; text-align: center; background-color: #990000; z-index: 5; color: #ffffff; box-shadow: 2px 2px 2px rgba(0, 0 , 0, 0.5); box-sizing: border-box; padding-top: 6px;}
.grid .bookEdit {transition: all .2s ease-in-out; opacity: 0; position: absolute; top: 0; right: 5%; width: 40px; height: 40px; background-color: #990000; z-index: 6; cursor: pointer; box-sizing: border-box; padding: 5px;}
.grid .bookEdit:hover {opacity: 1;}
.editIcon {display: inline-block; width: 30px; height: 30px; background: url('../images/185043_ink_pen_icon.svg') no-repeat center; background-size: contain;}


.shelf {width: 140%; background: url('../images/shelf-bg.png') no-repeat top center; height: 130px; background-size: contain; margin-top: -120px; margin-left: -5%; margin-right: -5%;}

.page {display: inline-block; padding: 5px 3px; text-align: center; width: 30px; height: 30px; text-align: center; margin-bottom: 5px; background-color: #990000; color: #ffffff; box-sizing: border-box; margin: 1px;}
.page.active {background-color: #555555;}

#paggination {position: fixed; bottom: 0; left: 0; right: 0; text-align: center; z-index: 60; padding: 20px 0; background-color: rgba(0, 0 , 0, 0.4);}
#paggination a {box-shadow: 0 0 1px 1px rgba(255, 255 , 255, 0);}

#searchBox {position: absolute; left: 0; top: 10px; padding: 10px; border-style: none; width: 40%; margin-left: 20px;}

#listGrid {position: absolute; right: 0; top: 20px; cursor: pointer;}
#listGrid i {color: #ffffff;}

.grid .fa-bars {display: none;}
.list .fa-bars {display: inline;}

.grid .fa-th {display: inline;}
.list .fa-th {display: none;}

#bookAdd {display: none; position: absolute; right: 30px; top: 20px; cursor: pointer;}
.admin #bookAdd {display: block;}
#bookAdd i {color: #ffffff;}

#addEditBook {position: fixed; top: 50%; left: 50%; width: 80%; margin-left: -40%; height: 600px; margin-top: -300px; background-color: rgba(55, 55 , 55, 0.96); border-radius: 20px; z-index: 90; overflow: hidden;}
#addEditBook .stone {height: 100%;}
#addEditBookClose {position: absolute; top: 10px; right: 10px; cursor: pointer;border-radius: 50%;}
#addEditBookClose i {font-size: 40px;}

#addEditBook input[type="text"] {width: 100%; padding: 10px 10px; border: solid 1px #aaa; background-color: #eee; color: #000;}
#addEditBook input[type="submit"] {width: 70%; padding: 10px 10px; border: solid 1px #000000; background-color: #990000; color: #fff;}
#deleteBook {width: 25%; margin-left: 5%; padding: 10px 10px; border: solid 1px #000000; background-color: #000000; color: #fff;}

#addEditBook .formRow {position: absolute; left: 40%; right: 10%; }

#addEditBook .formRow:nth-child(1) {top: 50px;}
#addEditBook .formRow:nth-child(2) {top: 100px;}
#addEditBook .formRow:nth-child(3) {top: 150px;}
#addEditBook .formRow:nth-child(4) {top: 200px;}
#addEditBook .formRow:nth-child(5) {top: 250px;}
#addEditBook .formRow:nth-child(6) {top: 300px;}
#addEditBook .formRow:nth-child(7) {top: 350px;}
#addEditBook .formRow:last-child {bottom: 50px; cursor: pointer;}

#addEditBook select {padding: 5px; width: 20%;}

#addEditBook #ranking {width: 50px;}
#addEditBook #favourite {width: 100px;}

#editBookCover {left: 0; width: 30%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;}

#stats {position: fixed; left: 5%; top: 100px; width: 10%;}
#stats div strong {width: 40px; float: right;}

#filterWrapper {position: absolute; right: 60px; top: 15px; cursor: pointer; width: 100px;}
.filter>div {transition: all .5s ease-in-out; width: 30px; height: 30px; float: left; background-size: contain; background-position: center; margin-right: 10px; filter: grayscale(1);}
.filter.active>div {filter: grayscale(0);}
#comicFilter div {background-image: url('../images/comics_icon.png');}
#bookFilter div {background-image: url('../images/book_icon.png');}

@media (max-width: 1024px) {
    #content.grid {padding: 0 5%;}
    #stats {display: none;}
    #filterWrapper {display: none;}
    .page {font-size: 20px; width: 50px; height: 40px;}
    .wrapper {width: 100%;}
    #searchBox {width: auto; right: 5%; left: 5%; margin: 0;}
}