html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

.cookies-warning {
	position: fixed;
	bottom: 0.625rem;
	left: 0.625rem;
	display: flex;
	align-items: center;
	background: var(--body-color);
	padding: 1em;
	max-width: 100%;
	z-index: 100;
	border-radius: 0.325rem;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	border: 1px solid rgba(var(--rgb-primary), 0.06);
	animation: slideInLeftToRight 500ms ease;
	animation-fill-mode: both;
	animation-delay: 5s;
}

.cookies-warning.hidden {
	display: none;
}

.cookies-warning .info {
	display: flex;
	align-items: center;
}

.cookies-warning span {
	font-weight: 400;
}

.cookies-warning a {
	font-weight: 600;
	text-decoration: underline;
}

.cookies-warning .ico-holder {
	width: 40px;
	margin-right: 1.25em;
}

.cookies-warning .btn-holder {
	margin-left: 1.6em;
}

.cookies-warning .btn-holder button {
	padding: 0 2.5em;
}

/* section{
    scroll-snap-align: start;
    scroll-snap-stop: always;
} */
/* //HAMBURGER */
.side {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--body-color);
	padding-top: 70px;
	display: none;
	z-index: 99;
	animation: ease-in-out 0.5s slideInLeft;
}

.hamburger-menu {
	display: none;
}

.hamburger-menu .login {
	font-weight: 600;
	background: var(--primary);
	color: var(--body-color);
	border: 2px solid transparent;
	padding: 7px 20px;
	border-radius: 6px;
	transition: 300ms;
}

.hamburger-menu .login:hover {
	background: var(--body-color);
	border-color: var(--primary);
	color: var(--primary);
}

.hamburger-menu .side ul {
	height: 100%;
	display: flex;
	margin: auto;
	flex-direction: column;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	font-size: 2.5rem;
	margin: 0;
}

.hamburger-menu .side ul .login {
	margin-top: 50px;
}

.hamburger-menu .side ul li {
	margin: 0;
	padding-left: 20px;
	letter-spacing: 0;
	line-height: 1.6;
	font-weight: 600;
}

.hamburger-menu .side ul a:hover {
	color: var(--secondary);
}

.slide {
	margin: 0;
	position: absolute;
	height: 30px;
	width: 30px;
	cursor: pointer;
	opacity: 0;
	z-index: 9;
}

.slide:checked ~ .spans span {
	transition: 0.5s;
}
.slide:checked ~ .spans span:first-child {
	transform: rotate(45deg);
	position: absolute;
	bottom: 50%;
}

.slide:checked ~ .spans span:last-child {
	transform: rotate(-45deg);
	position: absolute;
	bottom: 50%;
}

.spans {
	width: 22px;
	height: 12px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
	z-index: 999;
}

.spans span {
	background: var(--primary);
	height: 2px;
	width: 100%;
	display: inline-block;
}

/* //END OF HAMBURGER */

section {
	position: relative;
}

section .title h1 {
	font-size: 2em;
	font-family: var(--lora);
	font-weight: 400;
	margin-bottom: 3em;
}

section .mobile-title {
	position: absolute;
	top: 0;
	bottom: 0;
	right: -20px;
	left: -20px;
	align-items: center;
	background: #fff;
	height: 100%;
	z-index: 10;
	animation: fadeOut 1s ease-in-out 2s, putZindex 0.1s ease 3s;
	animation-fill-mode: forwards;
	display: none;
}

section .mobile-title h1 {
	margin: auto;
	font-size: 4em;
	font-family: var(--lora);
	font-weight: 400;
	animation: fadeInUp 1s ease-in-out, fadeOutUp 1s ease-in-out 2s;
	padding-left: 20px;
	opacity: 0;
	animation-fill-mode: forwards;
}

.welcome {
	padding: 0;
	height: 100vh;
	height: max(100vh, 600px);
	position: relative;
	background: linear-gradient(to right, #fff 0% 35%, rgba(var(--rgb-primary), 0.06) 35% 100%);
	overflow-x: hidden;
	overflow: hidden;
}

header {
	display: flex;
	min-height: 90px;
	padding: 0 20px;
	align-items: center;
	justify-content: space-between;
	animation: fadeIn 0.5s ease-in-out;
}

header .logo img {
	height: 1.5625em;
}

header nav ul {
	display: flex;
	list-style: none;
}

header .full-nav ul a {
	margin: 0 13px;
}
footer nav ul li,
header nav ul li {
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.8em;
	font-weight: 600;
	transition: 0.4s;
}
footer nav ul li:hover,
header .full-nav ul li:hover {
	color: var(--secondary);
}

header .buttons-box {
	display: flex;
}

header .buttons-box > a {
	padding: 5px 20px;
	font-weight: bold;
	border-radius: 5px;
	transition: 0.5s;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	cursor: pointer;
}

header .buttons-box .login {
	margin-right: 10px;
	background: var(--body-color);
	color: var(--primary);
	border: 2px solid var(--primary);
}

header .buttons-box .login:hover {
	background: var(--primary);
	color: var(--body-color);
}

header .buttons-box .register {
	background: var(--primary);
	color: var(--body-color);
	border: 2px solid var(--primary);
}

header .buttons-box .register:hover {
	background: var(--body-color);
	color: var(--primary);
}

.welcome .container {
	height: calc(var(--height-of-page, 100vh) - 90px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.welcome .container .content {
	margin-top: -5vh;
	display: grid;
	grid-gap: 2em;
	grid-template: 1fr / 0.87fr 1fr;
	align-items: center;
	position: relative;
}

/* --Slider down ico-- */

.slide-down-holder {
	font-size: 1rem;
	justify-content: flex-end;
	align-items: center;
	display: none;
}

.slide-down {
	height: 6em;
	width: 3.5em;
	border-radius: 3em;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	animation: move-cursor 2s ease-in-out infinite;
	margin-bottom: -2vh;
}

.slide-down::before {
	content: '';
	position: absolute;
	height: 2em;
	width: 2em;
	/* background: rgba(var(--rgb-primary), .9); */
	background: var(--secondary);
	border-radius: 50%;
	opacity: 1;
	animation: 2s fadeCicle ease-in-out infinite;
	margin-bottom: 0.5em;
}

.welcome .container .content .info {
	padding: 60px 0;
	padding-right: 10px;
	position: relative;
}

.welcome .container .content .info > * {
	animation: fadeInUp 0.5s ease-in-out;
	animation-fill-mode: both;
}

.welcome .container .content .info > *:nth-child(1) {
	animation-delay: 0.4s;
}
.welcome .container .content .info > *:nth-child(2) {
	animation-delay: 0.6s;
}
.welcome .container .content .info > *:nth-child(3) {
	animation-delay: 0.8s;
}
.welcome .container .content .info > *:nth-child(4) {
	animation-delay: 1s;
}
.welcome .container .content .info > *:nth-child(5) {
	animation-delay: 1.5s;
}

.welcome .container .content .info h1 {
	font-size: 3em;
	font-family: var(--lora);
	color: #111;
	line-height: 1.2;
	margin: 30px 0;
}

.welcome .container .content .info p {
	margin: 0;
	font-size: 1.2em;
	color: #111;
}

.container .content .info .button-holder {
	margin-top: 50px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.container .content .info a {
	font-size: 1em;
	position: relative;
	border-radius: 6px;
	margin-top: 0;
}

.container .content .info a i {
	margin-left: 5px;
}

.container .content .info .button-holder .take-a-look-inside {
	background: var(--body-color);
	color: var(--primary-color);
	border-color: var(--primary-color);
	border-style: dashed;
	padding: 7px 15px;
	opacity: 0.8;
	transition: 500ms;
}

.container .content .info .button-holder .take-a-look-inside i {
	margin-right: 0.5em;
}

.container .content .info .button-holder .take-a-look-inside:hover {
	opacity: 1;
	border-style: solid;
	border-color: var(--primary);
	background: var(--primary);
	color: var(--body-color);
}

.welcome .container .content .info .ticket-holder {
	font-size: 0.9em;
	margin-top: 20px;
	text-decoration: underline;
	font-weight: 500;
	color: rgba(var(--rgb-primary), 0.68);
}

.welcome .container .content .info .under:hover {
	color: var(--primary);
}

.welcome .container .content .info .under i {
	transform: rotate(-45deg);
	margin-right: 10px;
	color: var(--secondary);
}

.welcome .container .content .info .under:hover i {
	animation: 1s ease-in-out rotate-dance;
}

/* //Mobel */

.welcome .container .content .mcokup-holder {
	display: flex;
	justify-content: center;
	align-items: center;
}

.welcome .container .content .mockup {
	position: relative;
	margin: auto;
}

.mockup .mobile {
	width: 100%;
	max-width: 12.5em;
	height: 25.625em;
	border-radius: 1.25em;
	border: 0.5em solid #ececeb;
	background: #fff;
	z-index: 1;
	position: absolute;
	top: 20%;
	left: -4%;
	box-sizing: content-box;
	box-shadow: 0 1em 2.5em rgba(0, 0, 0, 0.12);
	display: flex;
	flex-direction: column;
	animation: fadeIn 0.5s ease-in-out;
	animation-fill-mode: both;
	animation-delay: 0.3s;
}

.mockup .mobile .side-buttons {
	position: absolute;
	top: 2.5em;
	left: -1.2em;
}

.mockup .mobile .side-buttons div {
	width: 0.5em;
	height: 2em;
	background: #b3b3ae;
	border-radius: 0.3125em;
}

.mockup .mobile .side-buttons div:first-child {
	margin-bottom: 3em;
	height: 3em;
}

.mockup .mobile .side-buttons div:last-child {
	margin-top: 0.625em;
}

.mockup .mobile .header {
	font-size: 0.6em;
	padding: 0 2em;
	min-height: 4em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
	animation: fadeIn 1s ease;
	overflow: hidden;
}

.mockup .mobile .header > div {
	flex-shrink: 0;
}

.mockup .mobile .header i {
	margin: 0 0.3125em;
	font-size: 0.8em;
}

.mockup .mobile .body {
	padding: 0 1.25em;
	font-size: 0.6em;
	flex: 1;
	font-family: var(--lora);
	line-height: 1.5;
	overflow: hidden;
}

.mockup .mobile .body .overlay {
	animation: 10s scroll ease-in-out infinite;
}

.mockup .mobile .footer {
	padding: 0 0.625em;
	min-height: 1.875em;
	display: flex;
	align-items: center;
	/* border-top: 1px solid #ddd; */
	font-size: 0.9em;
}

.mockup .mobile .footer .progress {
	width: 100%;
}

.mockup .mobile .footer .line-holder {
	background: #bababa;
	height: 1px;
	border-radius: 1.25em;
}

.mockup .mobile .footer .line .circle,
.mockup .mobile .footer .line {
	background: #eee;
}

.mockup .mobile .footer .line-holder .line .circle span {
	color: #777;
}

.mockup .mobile .footer .line-holder .line {
	display: flex;
	background: var(--primary);
	height: 100%;
	align-items: center;
}

.mockup .mobile .footer .line-holder .line .circle {
	height: 3px;
	width: 3px;
	background: var(--primary);
	margin-left: auto;
	border-radius: 50%;
	display: flex;
	position: relative;
}

.mockup .mobile .footer .line-holder .line .circle span {
	position: absolute;
	top: -10px;
	margin: auto;
	font-size: 0.3em;
}

/* //website */

.mockup .website {
	width: 100%;
	max-width: 44.25em;
	height: 25em;
	border: 2px solid #eee;
	border-radius: 0.625em;
	box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	animation: fadeIn 0.5s ease-in-out;
	animation-delay: 0.4s;
	animation-fill-mode: both;
}

.mockup .website .header {
	min-height: 1.25em;
	border-bottom: 2px solid #eee;
	padding: 0 10px;
	background: #f4f4f4;
	border-radius: 7px 7px 0 0;
	display: flex;
	align-items: center;
}

.mockup .website .header > .circle {
	--bg-col: #eee;
	height: 0.4375em;
	width: 0.4375em;
	border-radius: 100px;
	background: var(--bg-col);
	margin-right: 0.625em;
}

.mockup .website .body {
	background: var(--bg);
	background-size: cover;
	width: 100%;
	height: calc(100% - 20px);
	border-radius: 0 0 10px 10px;
	position: relative;
}

.mockup .website .body .books {
	position: absolute;
	bottom: 3.875em;
	left: calc(100% - 3.25em);
	display: flex;
}

.mockup .website .body .books > *:nth-child(1) {
	animation: fadeIn 0.5s ease-in-out;
	animation-fill-mode: both;
	animation-delay: 0.5s;
}

.mockup .website .body .books > *:nth-child(2) {
	animation: fadeInLeft 0.5s ease-in-out;
	animation-fill-mode: both;
	animation-delay: 1s;
}

.mockup .website .body img {
	width: 4.625em;
	height: 6.5em;
	border-radius: 0 2px 2px 0;
	box-shadow: 0px 8px 20px 1px rgb(6 35 64 / 30%);
	object-fit: cover;
	transition: filter 0.2s;
	margin-right: 1.25em;
}

.welcome .book-shelf {
	display: flex;
	margin: 7.5em 0 3.125em 3.75em;
}

.welcome .book-shelf .book {
	margin-right: 3.125em;
}

/* //CUSTOMISE READING TO YOUE NEEDS// */

.customise-reading {
	position: relative;
}

.customise-reading .container {
	display: grid;
	grid-template: 1fr / 1.6fr 1fr;
}

.customise-reading .container .reader-holder {
	background: rgba(var(--rgb-primary), 0.06);
	padding: 100px 20px;
}

/* // READER /// */

.customise-reading .container .reader-holder .reader {
	background: #fff;
	box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	max-width: 85em;
	margin: 0 -100px 0 50px;
	font-family: var(--lora);
}

.reader .header {
	padding: 20px;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #ddd;
}

.reader .header .tools {
	position: relative;
}

.reader .header i {
	cursor: pointer;
	position: relative;
}

.reader .header .customise-holder {
	position: absolute;
	left: -50%;
	top: -6px;
	height: 30px;
	width: 30px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

/* @keyframes jump {
    0% {
      box-shadow:  0 0 0 #cccccc,
                   0 0 0 #ffffff,
                    10px 10px 10px #cccccc inset,
                    -10px -10px 10px #ffffff inset;
    }
    100% {
      box-shadow:  10px 10px 10px #cccccc,
                   10px 10px 10px #ffffff,
                   0 0 0 #cccccc inset,
                   0 0 0 #ffffff inset;
    }
  } */

.reader .header .back i {
	margin-right: 10px;
}

.reader .header .tools i {
	margin-right: 20px;
}

.reader .header .tools i:last-child {
	margin-right: 0;
}

.reader .body {
	padding: 20px 60px;
	position: relative;
}

.reader .body .text-holder {
	height: 411px;
	max-width: inherit;
	column-fill: auto;
	column-gap: 50px;
	column-width: 225px;
	overflow: hidden;
	line-height: 1.5;
	text-align: justify;
}

.reader .body .text-holder p {
	margin: 0;
}

.reader .body mark {
	--col-of-mark: var(--gorgeous-light);
	background: var(--col-of-mark);
}

.reader .progress {
	padding: 20px 30px;
}

.reader .line-holder {
	width: 100%;
	background: #bababa;
	height: 2px;
	border-radius: 20px;
}

.reader .line .circle,
.reader .line {
	background: #eee;
}

.reader .line-holder .line .circle span {
	color: #777;
}

.reader .line-holder .line {
	display: flex;
	background: var(--primary);
	height: 100%;
	width: 36%;
	/*  Line progress in procents */
	align-items: center;
}

.reader .line-holder .line .circle {
	height: 7px;
	width: 7px;
	background: var(--primary);
	margin-left: auto;
	border-radius: 50%;
	display: flex;
	position: relative;
}

.reader .line-holder .line .circle span {
	position: absolute;
	top: -25px;
	margin: auto;
	font-size: 13px;
}

/* Reader themes // */

.customise-reading .container .reader-holder .reader.dark {
	--color-animation: #111;
	background: #211e37;
	color: #eeedef;
}

.customise-reading .container .reader-holder .reader.dark .line-holder {
	background: #555;
}

.customise-reading .container .reader-holder .reader.dark .line .circle,
.customise-reading .container .reader-holder .reader.dark .line {
	background: #fff;
}

.customise-reading .container .reader-holder .reader.tan {
	background: #fbf3e6;
	color: #4d1d0c;
	border-bottom-color: #4d1d0c;
}

/* // reader components */

.component-customise {
	position: relative;
}

.component-customise .aside {
	display: block;
	font-size: 0.9rem;
	max-width: 300px;
	border: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 2px 4px 0 rgba(14, 30, 37, 0.12);
}

.component-customise .aside .header {
	border-top: 1px solid #eee;
	border-color: #eee;
}

/* // Most popular books */

.popular-books .grid {
	display: grid;
	grid-template: 1fr 1fr / repeat(3, 1fr);
}

.popular-books .grid .book {
	display: grid;
	grid-template: 1fr / auto 215px;
	margin: 0;
	margin-bottom: 50px;
}

.popular-books .grid .book .book-info {
	padding: 20px;
}

.popular-books .grid .book .book-info .author {
	font-size: 0.7em;
	margin-bottom: 5px;
	color: #a5a4aa;
}

.popular-books .grid .book .book-info .title {
	font-size: 1.3em;
	font-family: var(--lora);
	font-weight: 400;
}

.popular-books .grid .book .book-info .stars-holder {
	margin-top: 10px;
}

/* // Audio player showoff :)  */

.audio-player {
	padding: 100px 0;
}

.audio-player .grid {
	display: grid;
	grid-template: 1fr / 1fr 1.6fr;
}

/* --=--------------=-=-=-=-=-=-=-----------=====------===-=-=-=-=-=-=-= */

.audio-player .grid .audio-track-holder {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 20px;
	position: relative;
}

.audio-player .grid .audio-track-holder .audio-track {
	margin-top: 20px;
	background: linear-gradient(to right, rgba(var(--rgb-secondary), 0.15), transparent);
	padding: 10px 20px 10px 30px;
	border-radius: 10px;
	position: relative;
	box-sizing: content-box;
	width: 75%;
	cursor: pointer;
}

.audio-player .grid .audio-track-holder .audio-track[disabled] {
	filter: grayscale(100%);
	user-select: none;
	pointer-events: none;
	opacity: 0.5;
	font-size: 0.8rem;
}

.audio-player .grid .audio-track-holder .audio-track.active {
	border: 1px solid var(--secondary);
	background: rgba(var(--rgb-secondary), 0.09);
}

.audio-player .grid .audio-track-holder .audio-track.active .title {
	font-weight: 600;
}

.audio-player .grid .audio-track-holder .audio-track.active .circle {
	background: #fff;
}

.audio-player .grid .audio-track-holder .audio-track .circle {
	height: 25px;
	width: 25px;
	border-radius: 50%;
	color: var(--body-color);
	display: grid;
	place-items: center;
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translate(-50%, -50%);
	background: var(--secondary);
	font-size: 0.5em;
}

.audio-player .grid .audio-track-holder .audio-track .title {
	font-size: 0.8em;
}

.audio-player .grid .audio-track-holder .audio-track .info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7em;
	color: #7c8ba0;
}

.audio-player .grid .player-holder {
	background: rgba(var(--rgb-primary), 0.06);
	padding: 100px 20px;
}

.audio-player .grid .audio-track-holder .audio-track .sound-waves {
	display: none;
}

.audio-player .grid .audio-track-holder .audio-track.active .sound-waves {
	display: flex;
}

.audio-player .grid .audio-track-holder .audio-track.active i {
	display: none;
}

.audio-player .grid .player {
	display: flex;
	flex-direction: column;
	max-width: 85em;
	margin: 0 40px 0 -90px;
	min-height: 555px;
	background: #fff;
	box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
	border-radius: 10px;
}

.audio-player .grid .player .header {
	height: 60px;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #ddd;
}

.audio-player .grid .player .header .title {
	font-size: 0.9em;
	font-family: var(--lora);
}

.audio-player .grid .player .header .author {
	font-size: 0.7em;
	color: #a5a4aa;
	margin-top: 2px;
}

.audio-player .grid .player .header .profile img {
	height: 30px;
	width: 30px;
	border: none;
}

.audio-player .grid .player .header .profile span {
	font-size: 0.7em;
	margin-left: 7px;
}

.audio-player .grid .player .main {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.audio-player .grid .player .main .books-holder {
	display: flex;
	margin: auto;
	width: 100%;
	justify-content: space-between;
	position: relative;
}

/* //MobileOnly */

.books-holder .mobile-info .title {
	margin-top: 10px;
	font-size: 1.1em;
	font-family: var(--lora);
	text-overflow: ellipsis;
	width: 207px;
	white-space: nowrap;
	overflow: hidden;
}

.books-holder .mobile-info .author {
	font-size: 1em;
	color: #a5a4aa;
	margin-top: 7px;
}

.audio-player .grid .player .main .books-holder .book {
	margin: 0;
}

.audio-player .grid .player .main .books-holder .book .cover img {
	box-shadow: none;
	box-shadow: -10px -10px 30px #fff, 10px 10px 30px #aeaec040;
}

.audio-player .grid .player .main .books-holder .book-small-left {
	transform: scale(0.8);
	margin-left: -50px;
}

.audio-player .grid .player .main .books-holder .book-small-left::before,
.audio-player .grid .player .main .books-holder .book-small-right::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 5;
}

.audio-player .grid .player .main .books-holder .book-small-left::before {
	background: linear-gradient(to right, rgba(var(--rgb-primary), 0.3), transparent);
}

.audio-player .grid .player .main .books-holder .book-small-right {
	transform: scale(0.8);
	margin-right: -50px;
}

.audio-player .grid .player .main .books-holder .book-small-right::before {
	background: linear-gradient(to left, rgba(var(--rgb-primary), 0.3), transparent);
}

.audio-player .grid .player .player-controls {
	height: 60px;
	display: flex;
	padding: 0 20px;
	position: relative;
}

.audio-player .grid .player .player-controls > div {
	flex: 1;
}

.player .player-controls .audio-progress-bar {
	position: absolute;
	height: 4px;
	width: 100%;
	background: #eee;
	top: -5px;
	left: 0;
	border-radius: 5px;
	cursor: pointer;
}

/* OnlyMobile */
.player-holder .player .player-controls div.progress-bar-mobile {
	flex: 0;
}

.player .player-controls .sound-controler:hover .progress .line,
.player .player-controls .audio-progress-bar:hover .progress {
	background: var(--secondary);
}

.player .player-controls .sound-controler .progress .line,
.player .player-controls .audio-progress-bar .progress {
	background: rgba(var(--rgb-secondary), 0.5);
	width: var(--width);
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	border-radius: 5px;
	cursor: pointer;
}

.player .player-controls .audio-progress-bar {
	transition: background 0.2s ease-in-out;
}

.player .player-controls .audio-progress-bar .progress {
	transition: all 0.03s linear;
}

.player .player-controls .sound-controler .progress .line .circle,
.player .player-controls .audio-progress-bar .progress .circle {
	height: 12px;
	width: 12px;
	position: absolute;
	background: var(--secondary);
	border-radius: 50px;
	cursor: pointer;
	margin-right: -7px;
	transform: scale(0);
	position: absolute;
}

.player .player-controls .sound-controler:hover .progress .line .circle,
.player .player-controls .audio-progress-bar:hover .progress .circle {
	transform: scale(1);
}

.player .player-controls .book-details {
	align-self: center;
}

.player .player-controls .book-details .title {
	font-size: 0.7em;
}

.player .player-controls .book-details .duration {
	font-size: 0.6em;
	color: var(--secondary);
}

.player .player-controls .book-details .duration span {
	min-width: 15px;
	display: inline-block;
	text-align: center;
}

.player .player-controls .main-controls {
	display: flex;
	align-items: center;
	justify-content: center;
}

.player .player-controls i {
	font-size: 0.7em;
}

.player .player-controls .main-controls > div {
	margin: 0 7px;
}

.player .player-controls .main-controls .stop-play {
	cursor: pointer;
	background: var(--secondary);
	height: 1.875em;
	width: 1.875em;
	display: flex;
	border-radius: 50%;
	box-shadow: 0 20px 50px rgba(var(--rgb-secondary), 0.6);
	color: #fff;
}

/* // Loading animtion while whaithing for audio to load.. */

.player .player-controls .main-controls .stop-play.loading i {
	animation: rotate 2.5s cubic-bezier(0, 1.49, 1, 0.89) infinite;
}

.player .player-controls .main-controls .stop-play i {
	margin: auto;
}

.player .player-controls .main-controls .stop-play i.fa-play {
	transform: translateX(1px);
}

.player .player-controls .main-controls .stop-play:hover {
	transform: scale(1.05);
}

.player .player-controls .main-controls .stop-play:active {
	transform: scale(0.97);
}

.player .player-controls .main-controls .thirty-sec {
	--size: 1.5625em;
}

.player .player-controls .main-controls .back-and-forward {
	--size: 1.5625em;
}

.player .player-controls .sound-controler {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.player .player-controls .sound-controler .volume {
	position: relative;
	width: 10px;
	cursor: pointer;
}

.player .player-controls .sound-controler .volume .wifi {
	transform: rotate(90deg) translate(-50%);
	position: absolute;
	top: 58%;
	display: none;
	font-size: 5px;
	right: -2px;
}

.player .player-controls .sound-controler .progress {
	max-width: 100%;
	width: 80px;
	height: 4px;
	background: #eee;
	margin-left: 10px;
	border-radius: 4px;
	cursor: pointer;
}

/* //PRICING */

.pricing {
	padding-bottom: 100px;
}

.pricing .grid {
	display: grid;
	grid-template: 1fr / 1fr 1fr;
}

.pricing .grid .price-info-holder {
	background: rgba(var(--rgb-primary), 0.06);
	padding: 100px 20px;
}

.pricing .grid .price-info-holder .pricing-info {
	background: var(--body-color);
	padding: 40px 50px;
	box-shadow: 0 16px 24px 2px rgb(0 0 0 / 14%), 0 6px 30px 5px rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
	border-radius: 10px;
	margin: 0 -100px 0 50px;
}

.pricing-info h2 {
	font-family: var(--lora);
	font-weight: 400;
	font-size: 1.5em;
	padding-bottom: 10px;
}

.pricing-info .you-get .card {
	margin-bottom: 30px;
}

.pricing-info .you-get .card .header {
	display: flex;
	align-items: center;
	margin-bottom: 7px;
}

.pricing-info .you-get .card .header .img img {
	height: 40px;
	background: transparent;
}

.pricing-info .you-get .card .header span {
	margin-left: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
}

.pricing-info .you-get .card .body span {
	display: block;
	margin-left: 50px;
}

.pricing-info .you-get .card .body ul li::marker {
	color: var(--secondary);
}

.pricing .grid .price-options {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	padding-left: 20px;
}

.pricing .grid .price-options .option {
	display: grid;
	grid-template: 1fr / 1fr 1fr;
	position: relative;
	background: var(--body-color);
	margin-bottom: 20px;
	padding: 10px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
	border-radius: 5px;
}

.price-options .option .left {
	padding: 1.8em 3.7em 1.8em 1.8em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.price-options .option .left .name {
	font-family: var(--lora);
	font-size: 2em;
	font-weight: 400;
}
.price-options .option .left .name span {
	display: block;
}

.price-options .option .left .name span:last-child {
	font-size: 0.5em;
}

.price-options .option .right {
	padding: 0.6em 2.5em;
	display: flex;
	background: rgba(var(--rgb-secondary), 0.09);
}

.price-options .option .right .price-info {
	margin: auto;
}

.price-options .option .right .previus-price {
	font-size: 1.3em;
	font-weight: 500;
	color: rgba(var(--rgb-primary), 0.8);
	position: relative;
	display: inline-block;
}

/* .price-options .option .right .previus-price::after{
   content: "";
   position: absolute;
   top: 50%;
   left: -3px;
   right: -3px;
   background: var(--secondary);
   height: 1px;
} */

.price-options .option .right .price {
	font-size: 2.5em;
	line-height: 1;
	font-weight: 600;
	padding-right: 10px;
	color: var(--secondary);
}

.price-options .option .right .annually {
	font-size: 0.9em;
	color: rgba(var(--rgb-primary), 0.8);
}

/* discount */
.price-options .option .right .price-info .discount {
	position: absolute;
	top: -0.5em;
	right: -1.5em;
	padding: 0.5em 3em 0.5em 1em;
	font-size: 1em;
	font-weight: 500;
	color: #fff;
	background: var(--primary);
	clip-path: polygon(100% 0, 84% 50%, 100% 100%, 0 100%, 0 0);
}

.price-options .option .left .enroll {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--secondary);
	font-weight: 600;
	font-size: 1em;
	letter-spacing: 1px;
	border: 2px solid var(--secondary);
	padding: 10px 20px;
	margin-top: 30px;
	border-radius: 5px;
	transition: 0.2s linear;
}

.price-options .option .left .enroll i {
	font-size: 1em;
	transition: 0.2s linear;
	margin-left: 10px;
}

.price-options .option .left .enroll:hover {
	background: var(--secondary);
	color: var(--body-color);
}

.price-options .option .left .enroll:hover i {
	transform: translate(5px);
}

.price-options .option .sale {
	position: absolute;
	right: -30px;
	top: -10px;
	padding: 10px 40px 10px 20px;
	background: var(--primary);
	color: #fff;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	clip-path: polygon(0 0, 100% 0, 85% 46%, 100% 100%, 0 100%);
}

.price-options .enter-coupon {
	border-radius: 5px;
	margin-left: 120px;
	background: var(--body-color);
	margin-bottom: 20px;
	padding: 40px;
	position: relative;
	overflow: hidden;
	z-index: 1;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.price-options .enter-coupon::before {
	content: '';
	position: absolute;
	top: -1px;
	left: -155px;
	height: 207px;
	width: 47em;
	background: rgba(var(--rgb-secondary), 0.09);
	border-radius: 38%;
	z-index: -1;
}

.price-options .enter-coupon::after {
	content: '';
	position: absolute;
	top: -100px;
	left: -300px;
	height: 434px;
	width: 60em;
	background: rgba(var(--rgb-secondary), 0.09);
	border-radius: 38%;
	transform: rotate(-28deg);
	z-index: -1;
}

.price-options .enter-coupon .info h2 {
	margin: 0;
	font-size: 2em;
	line-height: 1.1;
}

.price-options .enter-coupon form .form-elements {
	display: flex;
}

.price-options .enter-coupon form label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.8em;
	font-weight: 600;
}

.price-options .enter-coupon form .form-elements .input-holder {
	flex: 1;
	margin-right: 10px;
}

.price-options .enter-coupon form .form-elements input {
	background: white;
	padding: 12px 10px;
	border: none;
	border: 2px solid var(--secondary);
	width: 100%;
	height: 48px;
	padding: 0px 14px;
	padding-right: 30px;
	font-size: 16px;
	border-radius: 5px;
}

.price-options .enter-coupon form .form-elements button {
	background: var(--secondary);
	color: #fff;
	font-weight: 600;
	font-size: 1em;
	padding: 10px 40px;
	border: 2px solid transparent;
	border-radius: 5px;
	cursor: pointer;
	transition: 0.2s;
	letter-spacing: 0.5px;
}

.price-options .enter-coupon form .form-elements button:hover {
	color: var(--secondary);
	background: var(--body-color);
	border-color: var(--secondary);
}

.price-options .enter-coupon form .form-elements button[disabled] {
	filter: grayscale(50%);
}

.price-options .enter-coupon form .form-elements button[disabled]:hover {
	color: #fff;
	background: var(--secondary);
	border: 2px solid transparent;
}

.price-options .enter-coupon form .form-elements button[disabled]:active {
	transform: none;
}

.price-options .enter-coupon form .form-elements button:active {
	transform: scale(0.95) perspective(1px) translateZ(0);
	backface-visibility: hidden;
}

.price-options .enter-coupon form span {
	opacity: 0;
	position: absolute;
}

.price-options .enter-coupon form span.error {
	opacity: 1;
	display: inline-block;
	margin-top: 10px;
	font-size: 0.7em;
	padding: 5px 10px;
	background: rgba(var(--rgb-secondary), 0.15);
	color: var(--secondary);
	transition: 300ms;
}
/* // Footer */

footer {
	background: rgba(var(--rgb-primary), 0.06);
	padding: 40px 50px;
	padding-bottom: 0;
}

footer .content {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

footer .content .right {
	display: flex;
	flex-direction: column;
}

footer .content .right .social {
	margin-bottom: 20px;
}

footer .content .right .social .ico {
	font-size: 1.5em;
	margin-right: 20px;
	font-family: var(--lora);
	border-bottom: 1px solid rgba(var(--rgb-primary), 0.5);
	position: relative;
	transition: 0.3s;
}

footer .content .right .social .ico::before {
	content: '\f30c';
	font-family: 'Font Awesome 6 Pro';
	font-weight: 900;
	position: absolute;
	height: 10px;
	width: 10px;
	top: -2px;
	right: -7px;
	font-size: 10px;
	transform: rotate(45deg);
	color: rgba(var(--rgb-primary), 0.5);
	transition: 0.3s;
}

footer .content .right .social .ico:hover {
	color: var(--secondary);
	padding-bottom: 2px;
}
footer .content .right .social .ico:hover::before {
	transform: rotate(45deg) translate(2px, -3px);
}

footer .right .legal {
	margin-bottom: 20px;
}

footer .right .legal ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .right .legal ul li {
	color: rgba(var(--rgb-primary), 0.6);
	margin-bottom: 5px;
	font-weight: 500;
	text-decoration: underline;
}

footer .right .legal ul li a {
	transition: 0.5s;
}

footer .right .legal ul li a:hover {
	color: var(--secondary);
}

footer nav ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin-top: 50px;
}

footer nav ul li {
	margin-right: 20px;
}

footer .logo {
	display: inline-block;
}

footer .logo img {
	height: 25px;
}

footer .copy-rights {
	display: block;
	margin-top: 40px;
	margin-bottom: 10px;
	font-size: 0.8em;
}

.back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	height: 50px;
	width: 50px;
	background: rgba(var(--rgb-primary), 0.68);
	border-radius: 50%;
	z-index: 100;
	display: flex;
	cursor: pointer;
	display: none;
}

.back-to-top:hover {
	background: rgba(var(--rgb-primary), 0.78);
}

.back-to-top i {
	margin: auto;
	font-size: 1em;
	color: #fff;
}

/* //RESPOSNIVE STUFF */

@media screen and (max-width: 1500px) {
	body {
		font-size: 0.9em;
	}

	/* .welcome .container .content {
        grid-gap: 30px;
        grid-template: 1fr / .7fr 1fr;
    } */

	.audio-player .grid .audio-track-holder {
		padding-left: 15px;
	}

	/* Audio */

	.audio-player .grid .player {
		margin: 0 20px 0 -70px;
	}
}

@media screen and (max-width: 1250px) {
	body {
		font-size: 0.9rem;
		/* background: yellowgreen; */
	}
	/* //Welecome */
	.welcome {
		background: linear-gradient(to right, #fff 0% 45%, rgba(var(--rgb-primary), 0.06) 45% 100%);
	}

	.welcome .info {
		font-size: 0.9em;
	}

	.mockup .website .body .books {
		display: none;
	}

	.mockup-holder {
		margin-left: 4em;
	}

	/* Reader */

	.customise-reading .container .reader-holder .reader {
		margin: 0 -90px 0 -10px;
	}
}

@media screen and (max-width: 1190px) {
	body {
		font-size: 0.8rem;
	}

	/* .welcome .container .content {
        grid-template: 1fr / .6fr 1fr;
    } */

	.mockup .website {
		font-size: 0.8em;
	}

	.mockup .mobile {
		font-size: 0.6rem;
	}

	/* Reader */

	.customise-reading .info {
		padding-left: 20px;
	}

	/* //Popular books */
	.popular-books .grid {
		display: grid;
		grid-template: 1fr 1fr / repeat(2, 1fr);
	}

	/* //Audio */

	.audio-player .grid .player {
		margin: 0 0px 0 -50px;
		font-size: 1rem;
	}

	/* //Price */

	.pricing .grid .price-info-holder .pricing-info {
		margin: 0 -90px 0 0px;
	}
}

@media screen and (max-width: 1000px) {
	body {
		font-size: 0.9rem;
	}

	header .buttons-box {
		display: none;
	}

	nav .full-nav {
		display: none;
	}

	nav .hamburger-menu {
		display: block;
	}

	.welcome {
		height: unset;
		background: #fff;
	}

	.welcome .container {
		display: block;
		height: unset;
	}

	.welcome .container .content {
		grid-template: 1fr / 1fr 0.4fr;
		margin: 100px 0;
	}

	.welcome .container .content .mockup {
		position: relative;
	}

	.mockup .website {
		display: none;
	}

	.mockup .mobile {
		font-size: 1rem;
		width: 12.5em;
		position: relative;
		left: unset;
	}

	/* Reader */
	.customise-reading .info {
		padding-left: 10px;
	}

	.customise-reading .container {
		display: grid;
		grid-template: 1fr / 1.9fr 1fr;
	}

	.customise-reading .container .reader-holder {
		padding: 0;
		background: transparent;
	}

	.customise-reading .container .reader-holder .reader {
		max-width: 85em;
		margin: 0;
	}

	.segment:nth-child(3) {
		display: none;
	}

	.component-customise .aside {
		margin-top: 20px;
		position: relative;
		align-self: center;
	}

	/* //Audio */

	.audio-player .grid {
		display: grid;
		grid-template: 1fr / 1fr 1.8fr;
	}

	.audio-player .grid .audio-track-holder .audio-track {
		width: 85%;
	}

	.audio-player .grid .player {
		margin: 0;
		font-size: 0.9rem;
		width: 100%;
	}

	.audio-player .grid .player-holder {
		padding: 0;
		background: transparent;
		height: 100%;
		display: flex;
		align-items: center;
	}
	.audio-player .grid .audio-track-holder .audio-track:last-of-type,
	.audio-player .grid .audio-track-holder .audio-track:first-of-type {
		display: none;
	}

	/* //Pricing */

	.pricing .grid {
		grid-template: auto auto / 1fr;
	}

	.pricing .grid .price-options {
		padding-left: 0;
	}

	.pricing .grid .price-info-holder {
		padding: 0;
		background: transparent;
		display: flex;
		align-items: center;
	}

	.pricing .grid .price-info-holder .pricing-info {
		box-shadow: 0 16px 40px rgb(0 0 0 / 12%);
		padding: 20px 25px;
		width: 100%;
		margin-bottom: 20px;
	}

	.pricing .grid .price-info-holder .pricing-info .you-get {
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}

	.pricing .grid .price-info-holder .pricing-info .you-get .card {
		flex: 1;
		padding-left: 40px;
	}

	.pricing .grid .price-info-holder .pricing-info .you-get .card:first-child {
		padding-left: 0;
	}

	.pricing-info .you-get .card .body span {
		margin-left: 0;
	}

	.price-options .enter-coupon {
		margin-left: 0;
	}

	.pricing .grid .price-options {
		align-items: center;
	}
}

[mobileOnly] {
	display: none;
}

@media screen and (max-width: 775px) {
	[opacity] {
		opacity: 0;
	}

	[mobileOnly] {
		display: block;
	}

	body {
		background: #fff;
		font-size: 0.9em;
	}

	header {
		min-height: 60px;
		border-bottom: 1px solid var(--border-color);
	}

	header .logo img {
		height: 1.3em;
	}

	.big-funtenjer {
		padding: 0 23px;
	}

	.cookies-warning {
		bottom: 0;
		left: 0;
		padding: 2em 1em;
		flex-direction: column;
	}

	.cookies-warning .btn-holder {
		margin-left: 0;
		flex-basis: 100%;
		width: 100%;
	}

	.cookies-warning .btn-holder button {
		padding: 0;
		margin-top: 1.5em;
		width: 100%;
	}

	.slide-down-holder {
		display: flex;
	}

	.scroll-container {
		/* scroll-snap-type: y mandatory;
        overflow-y: scroll; */
		height: var(--height-of-page);
	}

	.welcome .container .content {
		grid-template: 1fr auto / 1fr;
		margin: 0 auto;
	}

	.welcome .container .content .info {
		padding: 50px 0;
	}

	.welcome .container .content .info h1 {
		margin: 10px 0 30px 0;
		font-size: 3em;
	}

	.welcome .container .content .info a {
		width: 100%;
		height: 48px;
		display: flex;
		align-items: center;
		font-size: 1.1em;
	}
	.welcome .container .content .info a.btn-primary,
	.container .content .info .button-holder .take-a-look-inside {
		padding: 5px 25px;
	}
	.container .content .info .button-holder .take-a-look-inside i {
		margin-left: 0;
	}

	.container .content .info .button-holder a:first-child {
		justify-content: space-between;
	}
	.container .content .info .button-holder a:first-child i {
		font-size: 1.5em;
		animation: slideInLeftToRight 1.6s ease-in-out infinite alternate;
	}

	.container .content .info .button-holder {
		margin-top: 30px;
	}

	.mockup .mobile {
		display: none;
	}

	/* Reader */

	.customise-reading .container {
		grid-template: 1fr / 1fr 0;
		position: relative;
	}

	.customise-reading .container .reader-holder .reader {
		box-shadow: none;
		border-radius: 0px;
		margin: 0 -20px;
	}

	.reader .body .text-holder {
		column-width: 325px;
		height: calc(var(--height-of-page) - 140px);
	}

	.customise-reading .title {
		display: none;
	}

	.customise-reading .info {
		position: absolute;
		top: 60px;
		right: -20px;
		display: none;
	}

	.component-customise .aside {
		width: 250px;
	}

	.reader .header .customise-holder {
		animation: 1s jump infinite ease alternate;
	}

	.reader .body {
		padding: 20px 40px;
	}

	/* //Popular books */
	.popular-books {
		padding: 50px 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		margin-right: -20px;
	}

	/* .popular-books > .title{
        margin-top: auto ;
    } */

	.popular-books .grid {
		grid-template: 1fr / repeat(6, 1fr);
		overflow-y: hidden;
		overflow-x: auto;
		font-size: 1rem;
	}

	.popular-books .grid::-webkit-scrollbar {
		display: none;
	}

	.popular-books .grid {
		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	.popular-books .grid .book {
		font-size: 0.9em;
		display: block;
		margin-bottom: 50px;
		margin-right: 100px;
	}

	.popular-books .grid .book .book-info {
		padding: 0;
		padding-top: 20px;
	}

	/* //Audio */

	.audio-player {
		/* scroll-snap-stop: always; */
		padding: 0;
	}

	.audio-player > .title {
		display: none;
	}

	.audio-player .grid {
		display: block;
		margin: 0 -20px;
	}

	.audio-player .grid .audio-track-holder {
		display: none;
	}

	.audio-player .grid .player {
		box-shadow: none;
		border-radius: 0;
		height: var(--height-of-page);
	}

	/* audio player header */

	.audio-player .grid .player .header {
		border-bottom: none;
	}

	.audio-player .grid .player .header .author,
	.audio-player .grid .player .header .profile,
	.audio-player .grid .player .header .title {
		display: none;
	}

	.audio-player .grid .player .main .books-holder .book-small-left,
	.audio-player .grid .player .main .books-holder .book-small-right {
		display: none;
	}
	/* audi player main */

	.audio-player .grid .player .main .books-holder {
		width: auto;
	}

	.audio-player .grid .player .main .books-holder .book {
		font-size: 1.3rem;
	}

	/* audio player controls */

	.player .player-controls {
		font-size: 1rem;
	}

	.audio-player .grid .player .player-controls {
		height: 150px;
		font-size: 1.5rem;
	}

	.player .player-controls .sound-controler,
	.player .player-controls .book-details {
		display: none;
	}

	.player .player-controls .progress-bar-mobile {
		display: flex;
		align-items: flex-end;
		position: absolute;
		width: 100%;
		top: 0px;
		left: 0;
	}

	.player .player-controls .progress-bar-mobile span {
		font-size: 0.5em;
		margin: 0 15px;
		width: 40px;
	}

	.player .player-controls .progress-bar-mobile .audio-progress-bar {
		position: relative;
	}

	.player .player-controls .main-controls > div {
		margin: 0 10px;
	}

	/* //Pricing */

	.pricing .grid {
		display: block;
	}

	.pricing .title h1 {
		margin-bottom: 30px;
	}

	.pricing .grid .price-info-holder .pricing-info .you-get {
		display: block;
		margin-top: 40px;
	}

	.pricing .grid .price-info-holder .pricing-info .you-get .card {
		padding-left: 0;
	}

	.price-options .enter-coupon form .input-holder {
		display: block;
	}

	.price-options .enter-coupon form .input-holder input {
		margin-bottom: 10px;
	}

	.price-options .option .sale {
		right: 20px;
	}

	.price-options .option .right {
		flex: 1.1;
	}

	.price-options .option .left {
		padding: 1.8em 2em 1.8em 1.5em;
	}

	.price-options .option {
		width: 100%;
	}
	.price-options .option .left {
		padding: 30px 10px;
		flex: 1;
	}

	.price-options .option .right {
		flex: 1;
		padding: 0;
	}

	.price-options .enter-coupon form .form-elements {
		display: block;
	}
	/* // Footer */
	footer {
		padding: 40px 10px;
	}

	footer .content {
		flex-direction: column-reverse;
	}

	footer nav {
		display: none;
	}
}

/* //END */

@media screen and (max-width: 400px) {
	body {
		font-size: 0.8em;
	}
}

/* // Animations */

@keyframes slideInLeftToRight {
	from {
		-webkit-transform: translate3d(-200%, 0, 0);
		transform: translate3d(-200%, 0, 0);
		visibility: visible;
	}

	to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes putZindex {
	to {
		z-index: -40;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes fadeOutUp {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

@keyframes fadeCicle {
	50% {
		opacity: 0.1;
		transform: translateY(-3em);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 80%, 0);
		transform: translate3d(0, 80%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes scroll {
	0%,
	10%,
	100% {
		transform: translateY(0);
	}

	25%,
	40% {
		transform: translateY(-20%);
	}

	50%,
	80% {
		transform: translateY(-40%);
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}

@keyframes jump {
	0% {
		transform: scale(1);
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
	}
	100% {
		transform: scale(1.05);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	}
}

@keyframes rotate {
	from {
		transform: rotate(0) translateX(1px);
	}
	to {
		transform: rotate(360deg) translateX(1px);
	}
}

input{
	border-radius: 0;
}

.funtenjer {
	position: relative;
}

.search-aside,
.bookmark-aside,
.chapters-aside,
.aside {
	position: absolute;
	top: -20px;
	right: 0;
	background: #fff;
	border: 2px solid var(--primary);
	font-family: 'Poppins', sans-serif;
	max-width: 350px;
	width: 100%;
	display: none;
	z-index: 10;
	border-top: 1px solid;
}

main.light .search-aside,
main.light .bookmark-aside,
main.light .chapters-aside,
main.light .aside.light {
	background: var(--light-theme-background);
	color: var(--light-theme-color);
}

/* main.tan .search-aside,
main.tan .bookmark-aside,
main.tan .chapters-aside,
main.tan .aside {
	background: var(--tan-theme-background);
	color: var(--tan-theme-color);
} */

main.dark .search-aside,
main.dark .bookmark-aside,
main.dark .chapters-aside,
main.dark .aside {
	background: var(--dark-theme-background);
	color: var(--dark-theme-color);
}

.aside nav input {
	display: none;
}

.search-aside nav .header,
.bookmark-aside nav .header,
.chapters-aside nav .header,
.aside nav .header {
	padding: 0 20px;
	height: 60px;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #333;
	justify-content: space-between;
}

.search-aside nav .header div i,
.bookmark-aside nav .header div i,
.chapters-aside nav .header div i,
.aside nav .header div i {
	margin-right: 10px;
}

.search-aside nav .header>i,
.bookmark-aside nav .header>i,
.chapters-aside nav .header>i,
.aside nav .header>i {
	cursor: pointer;
	position: relative;
}

.search-aside nav .header>i::after,
.bookmark-aside nav .header>i::after,
.chapters-aside nav .header>i::after,
.aside nav .header>i::after {
	content: "";
	position: absolute;
	top: -20px;
	right: -20px;
	left: -20px;
	bottom: -20px;
}

.aside nav .header>i:active {
	font-size: 0.875em;
}

.aside .body {
	padding: 0 20px;
}

.aside .body .segment:not(:last-child) {
	border-bottom: 1px solid #eee;
}

.aside .body .segment {
	padding-bottom: 10px;
}

.aside .body .segment:first-child {
	padding-bottom: 20px;
}

.aside .body .segment .row {
	display: flex;
	align-items: center;
}

.aside .body .segment h3 {
	font-size: 0.9375em;
	font-weight: 400;
}

.aside .body .segment .colors .color-circle {
	margin-right: 10px;
	width: 40px;
	height: 40px;
	background: var(--page-color);
	border: 1px solid #eee;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
}

.aside .body .segment .colors .color-circle::before {
	content: '';
	height: 5px;
	width: 5px;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%, 0);
	background: var(--primary);
	border-radius: 50%;
	opacity: 0;
	transition: 0.5s;
}

.aside .body .segment .colors input:checked+.color-circle::before {
	opacity: 1;
}

.aside .body .segment i {
	cursor: pointer;
}

.aside .body .segment i:active {
	font-size: 0.875em;
}

.aside .body .segment .color-circle .active {
	border: 1px solid var(--star-background);
	border-radius: 50%;
	width: 100px;
	height: 100px;
	background: #333;
}

.aside .body .segment .change-circle {
	display: flex;
	justify-content: center;
	position: relative;
	align-items: center;
	height: 25px;
	width: 25px;
	border-radius: 50%;
	font-size: 0.625em;
	border: 1px solid #333;
	cursor: pointer;
}

.aside .body .segment .change-circle::after {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
}

.aside .body .segment .change-circle:active i {
	font-size: 0.875em;
}

.aside .body .segment .value {
	margin: 0 13px;
	font-size: 1.25em;
}

.aside .body .segment .column {
	display: flex;
	flex-direction: column;
}

.aside .body .segment .option {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.aside .body .segment .option input:checked+label::before {
	opacity: 1;
}

.aside .body .segment .option label {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 1px solid var(--primary);
	border-radius: 50%;
	cursor: pointer;
}

.aside .body .segment .option label::after {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -144px;
	bottom: -10px;
}

.aside .body .segment .option label::before {
	content: '';
	height: 8px;
	width: 8px;
	background: var(--primary);
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	transition: 0.3s;
}

.aside .body .segment .option span {
	margin-left: 10px;
	font-size: 0.813em;
}

.aside .body .segment .line-height,
.aside .body .segment .justification {
	border: 1px solid var(--primary);
	display: flex;
	border-radius: 5px;
	overflow: hidden;
}

.aside .body .segment .line-height input:checked+label,
.aside .body .segment .justification input:checked+label {
	background: var(--primary);
	color: #fff;
	font-weight: 700;
}

.aside .body .segment .line-height label,
.aside .body .segment .justification label {
	flex: 1;
	padding: 3px 20px;
	font-size: 0.813em;
	cursor: pointer;

}

.aside .body .segment .justification label:first-of-type {
	border-right: 1px solid var(--primary);
}

.aside .body .segment .line-height label:nth-child(4) {
	border-right: 1px solid var(--primary);
	border-left: 1px solid var(--primary);
}

/* ///////////////////////////////// CHAPTER //////////////////////////////// */

.chapters-aside{
	-webkit-user-select: none;        
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}

.chapters-aside .body {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: calc(100vh - 200px);
}

.highlights-container input[type='text'],
.search-aside .body input[type='text'],
.chapters-aside input[type='text'] {
	width: 100%;
	padding: 15px 20px;
	border: none;
	border-bottom: 1px solid var(--primary);
	background: #f7f7f7;
	border-radius: 0;
}

/* // Dark theme */
main.dark ~ .highlights-popup .highlights-container input[type='text'],
main.dark .search-aside .body input[type='text'],
main.dark .chapters-aside input[type='text'] {
	background: var(--dark-theme-background);
	color: var(--dark-theme-color);
	-webkit-text-fill-color: var(--dark-theme-color);
	box-shadow: none;
}

.search-aside .body{
	position: relative;
}

.search-aside .body input[type='text'] {
	border: 0;
	border-radius: 0;
}

.search-aside .body .suggestions{
	background: #fff;
	border: 2px solid #333;
	border-top: none;
	position: absolute;
	top: calc(100% + 2px);
	right: -2px;
	left: -2px;
	max-height: calc(100vh - 190px);
	overflow: auto;
	/* display: none; */
}

.search-aside .body .suggestions .row{
	padding: 15px 20px;
	font-size: .8em;
	border-bottom: 1px solid #eee;
	transition: 300ms;
	cursor: pointer;
}

/* // Dark theme */
main.dark .search-aside .body .suggestions .row{
	background: var(--dark-theme-background);
	color: var(--dark-theme-color);
}

.search-aside .body .suggestions .row:hover{
	background: rgba(var(--rgb-primary), .06);
}



.search-aside .body .suggestions .row span{
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 300px;
}


.chapters-aside .body .row {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}

.chapters-aside .body .row.locked {
	position: relative;
    user-select: none;
    pointer-events: none;
	background: rgba(var(--rgb-primary), .03);
}

.chapters-aside .body .row.locked::after{
	content: "\f023";
	font-weight: 900;
	font-family: "Font Awesome 6 Pro";
	position: absolute;
	right: 10px;
    font-size: .7em;
	color: rgba(var(--rgb-primary), .6);
}

main.dark .chapters-aside .body .row.locked::after{
	color: #eee;
}

.chapters-aside .body .row .arrow{ 
	font-size: .6em;
	margin-right: 10px;
}

.chapters-aside .body .row .title{
	flex: 1;
	text-overflow: ellipsis;
	overflow: hidden;
}

.chapters-aside .body .row .page {
	padding-left: 10px;
	
}

.chapters-aside .body .row:hover span {
	text-decoration: underline;
}

.chapters-aside .body .row span {
	font-size: 0.813em;
}

/* ///////////////////////////////// END //////////////////////////////// */

.bookmark-aside .body .row {
	padding: 10px 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	transition: background 0.3s linear;
}

.bookmark-aside .body .row:hover {
	background: var(--primary);
	color: #fff;
}

.bookmark-aside .body .row i {
	margin-right: 10px;
}

.chapters-aside .body .row span {
	font-size: 0.813em;
}

/* // Highlights box */

.highlights-popup{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(var(--rgb-primary), .3);
	display: none;
	z-index: 20;
}

.highlights-popup .highlights-container{
	background: #fff;
	border-right: 2px solid #333;
	max-width: 400px;
}

/* // Dark theme */
main.dark ~ .highlights-popup .highlights-container{
	background: var(--dark-theme-background);
	color: var(--dark-theme-color);
}

.highlights-popup .highlights-container .header{
	border-bottom: 1px solid #333;
}

.highlights-popup .highlights-container .header .title{
	display: flex;
	align-items: center;
	padding: 20px;
}

.highlights-popup .highlights-container .header span{
	margin-left: 10px;
}
.highlights-container input[type='text']{
	border-top: 2px solid #333;
}


.highlights-popup .highlights-container .body{
	overflow: auto;
	height: calc(100vh - 114px);
}

.highlights-popup .highlights-container .row{
	font-family: var(--lora);
	line-height: 1.5;
	padding-bottom: 10px;
	cursor: pointer;
	padding: 10px 30px 10px 20px;
}


.highlights-popup .highlights-container .row:hover{
	background: rgba(var(--rgb-primary), .04)
}

.highlights-popup .highlights-container .row mark{
	background: var(--color);
}

/* // Dark theem */

main.dark ~ .highlights-popup .highlights-container .row mark{
	color: var(--dark-theme-color);
}


/* // Customise for mobile */
.customise-aside-mobile{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	display: none;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
	box-shadow:0 .25rem 1rem rgba(48,55,66,.15);
	z-index: 10;
}

.customise-aside-mobile .aside{
	display: block;
	position: unset;
	border: none;
	max-width: unset;
}

.customise-aside-mobile .aside .segment{
	padding: 20px 0;
}

.customise-aside-mobile .segment.modes .row{
	justify-content: space-around;
}


.customise-aside-mobile .font-size-holder{
	width: 100%;
}

.customise-aside-mobile .font-size-holder .letter{
	font-size: 1em;
	font-family: var(--lora);
	font-weight: 900;
}

.customise-aside-mobile .font-size-holder .letter:last-child{
	font-size: 1.5em;
}

.customise-aside-mobile .font-size-holder .line{
	flex: 1;
	display: flex;
	position: relative;
	align-items: center;
	height: 2px;
	border-radius: 50px;
	background: #111;
	margin: 0 20px;
}

.customise-aside-mobile .font-size-holder .line::before{
	content: "";
	position: absolute;
	top: -20px;
	bottom: -20px;
	left: 0;
	right: 0;
}


.customise-aside-mobile .font-size-holder .line .circle{
	position: absolute;
	left: calc( var(--left) - 15px);
	width: 30px;
	height: 30px;
	background: var(--primary);
	border-radius: 50%;
}

.customise-aside-mobile .segment.fonts{
	overflow: auto;
}

.customise-aside-mobile .segment.fonts {
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}

.customise-aside-mobile .segment.fonts::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
}

.customise-aside-mobile .segment .fonts .option{
	margin: 0;
}

.customise-aside-mobile .segment .fonts .option label{
	width: unset;
	height: unset;
	display: block;
	border-radius: 1em;
	margin-right: 10px;
	padding: 5px 15px;
}

.customise-aside-mobile .segment .fonts .option label span{
	margin: 0;
	white-space: nowrap;
}

.customise-aside-mobile .segment .fonts .option label::before{
	display: none;
}

.customise-aside-mobile .segment .fonts .option input:checked + label{
	background: var(--primary);
	color: #fff;
}

/* .customise-aside-mobile .segment.justification{
	padding: 5px 0;
} */

.customise-aside-mobile .segment .line-height label,
.customise-aside-mobile .segment.justification .justification label{
	padding: 5px 20px;
}
.customise-aside-mobile .segment.justification .justification label i{
	margin-right: 5px;
}

@media screen and (max-height: 870px) {
	.aside .body{
		overflow: auto;
		height: calc(100vh - 140px);
	}

	.customise-aside-mobile .aside .body{
		overflow: unset;
		height: unset;
	}
}


@media screen and (max-width: 1200px) {
	body::after{
		content: "";
	}
} 

@media screen and (max-width: 800px) {
.search-aside,
.bookmark-aside,
.chapters-aside,
.aside {
	position: absolute;
	top: -20px;
	right: -20px;
	left: -20px;
	width: unset;
	max-width: unset;
	border: none;
	box-shadow:0 .25rem 1rem rgba(48,55,66,.15);
}

.highlights-container input[type='text'],
.search-aside .body input[type='text'],
.chapters-aside input[type='text'] {
	padding: 30px;
}

.search-aside .body .suggestions .row,
.chapters-aside .body .row,
.bookmark-aside .body .row{
	padding: 20px;
}
}