/******************************************************************
 Name: I-Book
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Banner Section
6.  Product Section
7.  Instagram Section
8.  Latest Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Default CSS
/*----------------------------------------*/
* {
  list-style: none;
  padding: 0;
  margin: 0;
}

@font-face {
  src: url('../fonts/Oswald-VariableFont_wght.ttf');
  font-family: Oswald;
}
@font-face {
  src: url('../fonts/Mulish-VariableFont_wght.ttf');
  font-family: Mulish;
}

html,
body {
  height: 100%;
  font-family: "Mulish", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #0b0c2a;
  margin-top: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #ffffff;
  font-weight: 400;
  font-family: "Mulish", sans-serif;
}

h1 {
  font-size: 60px;
}

h2 {
  font-size: 34px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 22px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 15px;
  font-family: "Mulish", sans-serif;
  color: #ffffff;
  font-weight: 400;
  line-height: 25px;
  margin: 0 0 15px 0;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}
a {
  color: #ffab01;
}
a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #ffffff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/
/* neon border */
.neon_border_bottomRight {
  box-shadow: 0px 2px 5px #4069e2;
}
.neon_border_topLeft {
  box-shadow: 0px -2px 5px #4069e2;
}
.section-title {
  margin-bottom: 30px;
}

.section-title h4,
.section-title h5 {
  color: #ffffff;
  font-weight: 600;
  line-height: 21px;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
  font-family: "Oswald", sans-serif;
}

.section-title h4:after,
.section-title h5:after {
  position: absolute;
  left: 0;
  top: -6px;
  height: 32px;
  width: 4px;
  background: #ffab01;
  content: "";
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

.text-gray {
  color: #c5c5c5;
}

/* buttons */

.primary-btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  letter-spacing: 2px;
}

.primary-btn span {
  font-size: 18px;
  margin-left: 5px;
  position: relative;
  top: 3px;
}

.site-btn {
  font-size: 13px;
  color: #ffffff;
  background: #ffab01;
  font-weight: 700;
  border: none;
  border-radius: 2px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  padding: 12px 30px;
}

/* Preloder */

#preloder {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #0b0c2a;
  opacity: 90%;
}

#preloder img {
  width: 80%;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

#preloderHome {
  display: flex;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #0b0c2a;
  opacity: 100%;
}

#preloderHome img {
  height: 100vh;
  width: 100vw;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

/*  */
.bg-music {
  height: 60px;
  width: 60px;
  position: fixed;
  bottom: 12%;
  right: 15%;
  box-shadow: 2px 5px 10px #4069e2;
  backdrop-filter: blur(10px);
  border-radius: 50px;
  text-align: center;
  z-index: 1;
}

.bg-music .audiobtn i {
  font-size: 40px;
}
.audiobtn {
  border: none;
  color: #ffffff;
  background: transparent;
  opacity: 0.3;
  transition: all linear 0.2s;
}
.audiobtn:hover {
  opacity: 0.8;
}
.fa-play-circle-o {
  display: none;
}
/*  */

.spacial-controls .search-switch {
  display: block;
  height: 100%;
  padding-top: 30px;
  background: #323232;
  text-align: center;
  cursor: pointer;
}

.popUPmodel {
  display: none;
  position: fixed;
  width: 100%;
  height: 110%;
  top: 0;
  left: 0;
  /* background: inherit; */
  backdrop-filter: blur(10px);
  box-shadow: 0 0 10px 2px #4069e2;

  z-index: 99999;
}
.info-model-body {
  height: 70%;
  width: 100%;
  padding-right: 5px;
  position: relative;
}
.info-model-body .visit_aria {
  position: absolute;
  height: 10%;
  width: 20%;
  top: 20%;
  left: 5%;
  /* box-shadow: -4px -4px 5px #4069e2; */
  box-shadow: 4px 4px 5px #ffab01;
  box-shadow: 0 0 10px 2px #ffab01;
  padding: 10px 15px;
  border-radius: 15px;
}

.info-model-body .ask_form_area {
  position: absolute;
  height: 20%;
  width: 20%;
  top: 20%;
  right: 5%;
  /* box-shadow: -4px -4px 5px #4069e2; */
  box-shadow: 4px 4px 5px #ffab01;
  box-shadow: 0 0 10px 2px #ffab01;
  padding: 10px 15px;
  border-radius: 15px;
}
.info-model-body .ask_form_area a {
  color: #4069e2;
  font-weight: bold;
}
/* info start */

.info_container {
  color: white;
  background-color: white;
  border-radius: 2px;
  box-shadow: 0 35px 80px 7px rgba(0, 0, 0, 0.1);
  margin: 50px 0;
  height: 250px;
  width: 250px;
  perspective: 1000px;
}

.container--facebook {
  background-color: #37508d;
}

.container--twitter {
  background-color: #4069e2;
}

.container--instagram {
  background-color: #195484;
}

.ion {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fa.fa-facebook {
  color: #37508d;
}

.fa.-fa-social-twitter {
  color: #00a5ea;
}

.ion.ion-social-instagram {
  color: #195484;
}

.box {
  align-items: flex-end;
  background-color: white;
  border-radius: 2px;
  color: white;
  font-size: 2.25rem;
  justify-content: center;
  position: relative;
  text-align: center;
  transition: transform 0.8s;
  transform-style: transform-3d;
  perspective: 1000px;
  height: 250px;
  width: 250px;
  box-shadow: 0px 0px 10px #000000;
}
.box > .badge {
  background: #4069e2;
  position: absolute;
  left: 16%;
  top: 7%;
  transform: translate(-50%, -10%);
}
.box > * {
  transition: transform 0.8s;
  transform-style: transform-3d;
}

.box--left {
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.box--right {
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.box--middle {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.info_container:hover .box--left,
.active .box--left {
  transform: translate(-20px, -30px);
}
.info_container:hover .box--left .ion,
.active .box--left .ion {
  transform: rotate(270deg) rotateY(180deg) translate(-122%, -4%);
}

.info_container:hover .box--right,
.active .box--right {
  transform: translate(20px, -30px);
}

.info_container:hover .box--middle,
.active .box--middle {
  transform: translate(10px, -40px);
}

.count {
  font-size: 20px;
  color: #000000b7;
  display: block;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.follow {
  bottom: 0;
  color: white;
  display: block;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: absolute;
}

.follow--left {
  right: 0;
  transform: translate(-14px, -10px);
}

.follow--middle {
  left: 50%;
  transform: translate(-50%, -10px);
}

.follow--right {
  left: 0;
  transform: translate(14px, -10px);
}

.button {
  background-color: rgba(255, 255, 255, 0.7);
  border: 0;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08), 0 4px 12px 0 rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  color: #555;
  cursor: pointer;
  flex-wrap: nowrap;
  font-size: 0.875rem;
  outline: 0;
  padding: 10px 30px;
  position: relative;
  text-align: center;
  display: block;
  transition: box-shadow 0.15s, background-color 0.15s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  vertical-align: middle;
}
.button:active {
  box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.05);
}
/* info end */

.search-model-form {
  padding: 0 15px;
}

.search-model-form input {
  width: 500px;
  font-size: 30px;
  border: none;
  border-bottom: 2px solid #ffab01;
  background: 0 0;
  color: #ffffff;
}
.search-model-form input::placeholder {
  font-size: 30px;
  color: #ffffff;
}

.popUPmodel-close-switch {
  position: absolute;
  width: 50px;
  height: 50px;
  background: #4069e2;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  font-size: 28px;
  line-height: 28px;
  top: 30px;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
  background: #070720;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  transition: 0.3s;
  border-radius: 0 0 15px 15px;
  box-shadow: 0px 2px 5px #4069e2;
}
.nav-up {
  top: -70px;
}

.header__logo {
  padding: 20px 0 17px;
}

.header__logo a {
  display: inline-block;
}

.header__menu {
  text-align: center;
}

.header__menu ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  margin-right: 16px;
  margin-top: 18px;
}

.header__menu ul li.active a {
  background: #ffab01;
  color: #ffffff;
}

.header__menu ul li:hover a {
  background: #ffffff33;
  color: #ffab01;
}

.header__menu ul li:hover .dropdown {
  top: 62px;
  opacity: 1;
  visibility: visible;
}

.header__menu ul li:hover .dropdown li a {
  background: transparent;
}

.header__menu ul li:last-child {
  margin-right: 0;
}

.header__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 82px;
  width: 150px;
  background: #ffffff;
  text-align: left;
  padding: 5px 0;
  z-index: 9;

  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}

.header__menu ul li .dropdown li a {
  font-size: 14px;
  color: #111111;
  font-weight: 500;
  padding: 5px 20px;
}

.header__menu ul li a {
  color: #b7b7b7;
  display: block;
  font-weight: 700;
  border-radius: 8px;
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
  padding: 10px 20px;
}

.header__menu ul li a span {
  position: relative;
  font-size: 17px;
  top: 2px;
}

.header__right {
  text-align: right;
  padding: 20px 0 15px;
}

.header__right a {
  display: inline-block;
  font-size: 22px;
  color: #ffffff;
  margin-right: 30px;
}

.header__right a:last-child {
  margin-right: 0;
}

.slicknav_menu {
  display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero {
  padding-top: 50px;
}

.hero__items {
  height: 600px;
  padding: 250px 0 42px 50px;
  border-radius: 5px;
}

.hero__text {
  position: relative;
  z-index: 9;
}

.hero__text .label {
  font-size: 13px;
  color: #ffab01;
  background: #ffffff;
  padding: 5px 14px 3px;
  display: inline-block;
  position: relative;
  top: -100px;

  -webkit-transition: all, 0.2s;
  -o-transition: all, 0.2s;
  transition: all, 0.2s;
}

.hero__text h2 {
  color: #ffffff;
  font-size: 42px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  line-height: 52px;
  margin-top: 35px;
  margin-bottom: 8px;
  position: relative;
  top: -100px;

  -webkit-transition: all, 0.4s;
  -o-transition: all, 0.4s;
  transition: all, 0.4s;
}

.hero__text p {
  color: #ffffff;
  font-size: 16px;
  margin-bottom: 40px;
  position: relative;
  top: -100px;

  -webkit-transition: all, 0.6s;
  -o-transition: all, 0.6s;
  transition: all, 0.6s;
}

.hero__text a {
  background: #ffab01;
  padding: 12px 20px;
  border-radius: 0 4px 4px 0;
  position: relative;
  bottom: 0px;
  right: 0px;
  -webkit-transition: all, 0.8s;
  -o-transition: all, 0.8s;
  transition: all, 0.8s;
}

.hero__text a .span_1 {
  font-size: 20px;
  color: #ffffff;
}

.hero__text a .span_2 {
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* .hero__text a .fa-angle-right {
  font-size: 20px;
  display: inline-block;
  background: #ffab01;
  padding: 11px 5px 16px 8px;
  color: #ffffff;
  border-radius: 0 4px 4px 0;
} */

/* .hero__slider .s_btn {
  font-size: 13px;
  color: #ffffff;
  background: #ffab01;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 50px;
  z-index: 9;
} */

.hero__slider.owl-carousel .owl-item.active .hero__text .label {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text h2 {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text p {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-item.active .hero__text a {
  top: 0;
  opacity: 1;
}

.hero__slider.owl-carousel .owl-dots {
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

.hero__slider.owl-carousel .owl-dots button {
  height: 8px;
  width: 8px;
  background: #b7b7b7;
  border-radius: 50%;
  margin-right: 10px;
}

.hero__slider.owl-carousel .owl-dots button.active {
  background: #ffffff;
}

.hero__slider.owl-carousel .owl-dots button:last-child {
  margin-right: 0;
}

.hero__slider.owl-carousel .owl-nav button {
  font-size: 36px;
  height: 66px;
  width: 66px;
  background: #0b0c2a;
  line-height: 66px;
  text-align: center;
  color: #ffffff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: relative;
  z-index: 1;
  position: absolute;
  left: -33px;
  top: 50%;
  margin-top: -47px;
}

.hero__slider.owl-carousel .owl-nav button.owl-next {
  left: auto;
  right: -33px;
}

.hero__slider.owl-carousel .owl-nav button:after {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 54px;
  width: 54px;
  background: rgba(255, 255, 255, 0.1);
  content: "";
  z-index: -1;
  margin: 0 auto;
}

.hero__slider.owl-carousel .owl-nav button span {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  display: block;
  z-index: 1;
}

/*---------------------
  Product
-----------------------*/

.product {
  padding-bottom: 60px;
  padding-top: 80px;
}

.product-page {
  padding-top: 60px;
}

.btn__all {
  text-align: right;
}

.trending__product {
  margin-bottom: 30px;
}

.popular__product {
  margin-bottom: 50px;
}

.recent__product {
  margin-bottom: 50px;
}

.product__item {
  margin-bottom: 30px;
}

.product__item__pic {
  height: 325px;
  position: relative;
  border-radius: 5px;
}

.product__item__pic .ep {
  font-size: 13px;
  color: #ffffff;
  background: #ffab01;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  top: 10px;
}

.product__item__pic .comment {
  font-size: 13px;
  color: #ffffff;
  background: #3d3d3d;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 10px;
}

.product__item__pic .view {
  font-size: 13px;
  color: #ffffff;
  background: #3d3d3d;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.product__item__text {
  padding-top: 20px;
}

.product__item__text ul {
  margin-bottom: 10px;
}

.product__item__text ul li {
  list-style: none;
  font-size: 10px;
  color: #ffffff;
  font-weight: 700;
  padding: 1px 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  display: inline-block;
}

.product__item__text h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}
.product__sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
}
.product__sidebar .section-title h5 {
  color: #ffffff;
  font-weight: 600;
  font-family: "Oswald", sans-serif;
  line-height: 21px;
  text-transform: uppercase;
  padding-left: 20px;
  position: relative;
}

.product__sidebar .section-title h5:after {
  position: absolute;
  left: 0;
  top: -6px;
  height: 32px;
  width: 4px;
  background: #ffab01;
  content: "";
}

.product__sidebar__view {
  position: relative;
  margin-bottom: 80px;
}

.filter__controls {
  position: absolute;
  right: 0;
  top: -5px;
}

.filter__controls li {
  list-style: none;
  font-size: 13px;
  color: #b7b7b7;
  display: inline-block;
  margin-right: 7px;
  cursor: pointer;
}

.filter__controls li.active {
  color: #ffffff;
}

.filter__controls li:last-child {
  margin-right: 0;
}

.product__sidebar__view__item {
  height: 190px;
  position: relative;
  border-radius: 5px;
  margin-bottom: 20px;
}

.product__sidebar__view__item .ep {
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
  background: #ffab01;
  display: inline-block;
  padding: 2px 12px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 5px;
}

.product__sidebar__view__item .view {
  font-size: 13px;
  color: #ffffff;
  background: #3d3d3d;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  position: absolute;
  right: 10px;
  top: 10px;
}

.product__sidebar__view__item h5 {
  position: absolute;
  left: 0px;
  top: 5px;
  padding: 0 10px 0 10px;
  border-radius: 10px;
}

.product__sidebar__view__item h5 a {
  color: #ffab01;
  font-weight: 700;
  line-height: 26px;
}

.product__sidebar__comment {
  margin-bottom: 35px;
}

.product__sidebar__comment__item {
  margin-bottom: 20px;
  overflow: hidden;
}

.product__sidebar__comment__item__pic {
  float: left;
  margin-right: 15px;
}
.product__sidebar__comment__item__pic img {
  height: 115px;
  max-width: 76px;
}

.product__sidebar__comment__item__text {
  overflow: hidden;
}

.product__sidebar__comment__item__text ul {
  margin-bottom: 10px;
}

.product__sidebar__comment__item__text ul li {
  list-style: none;
  font-size: 10px;
  color: #ffffff;
  font-weight: 700;
  padding: 1px 10px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50px;
  display: inline-block;
}

.product__sidebar__comment__item__text h5 {
  margin-bottom: 10px;
}

.product__sidebar__comment__item__text h5 a {
  color: #ffffff;
  font-weight: 700;
  line-height: 26px;
}

.product__sidebar__comment__item__text span {
  display: block;
  font-size: 13px;
  color: #b7b7b7;
}

.product__page__title {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 10px;
  margin-bottom: 60px;
}

.product__page__title .section-title {
  margin-bottom: 0;
}

.product__page__title .product__page__filter {
  text-align: right;
}

.product__page__title .product__page__filter p {
  color: #ffffff;
  display: inline-block;
  margin-bottom: 0;
  margin-right: 16px;
}

.product__page__title .product__page__filter .nice-select {
  float: none;
  display: inline-block;
  font-size: 15px;
  color: #3d3d3d;
  font-weight: 700;
  border-radius: 0;
  padding-left: 15px;
  padding-right: 40px;
  height: 32px;
  line-height: 32px;
}

.product__page__title .product__page__filter .nice-select:after {
  border-bottom: 2px solid #111;
  border-right: 2px solid #111;
  height: 8px;
  top: 47%;
  width: 8px;
  right: 15px;
}

.product__page__title .product__page__filter .nice-select .list {
  margin-top: 0;
  border-radius: 0;
}

.product__pagination {
  padding-top: 0px;
}

.product__pagination a {
  display: inline-block;
  font-size: 15px;
  color: #b7b7b7;
  font-weight: 600;
  height: 50px;
  width: 50px;
  border: 1px solid transparent;
  border-radius: 50%;
  line-height: 48px;
  text-align: center;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.product__pagination a:hover {
  color: #ffffff;
}

.product__pagination a.current-page {
  border: 1px solid #ffffff;
}

.product__pagination a i {
  color: #b7b7b7;
  font-size: 15px;
}

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

.book-details {
  padding-top: 60px;
}

.book__details__content {
  margin-bottom: 65px;
}

.book__details__text {
  position: relative;
}

.book__details__text p {
  color: #b7b7b7;
  font-size: 18px;
  line-height: 30px;
}

.book__details__pic {
  height: 440px;
  border-radius: 5px;
  position: relative;
}

.book__details__pic .comment {
  font-size: 13px;
  color: #ffffff;
  background: #3d3d3d;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  position: absolute;
  left: 10px;
  bottom: 25px;
}

.book__details__pic .view {
  font-size: 13px;
  color: #ffffff;
  background: #3d3d3d;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  position: absolute;
  right: 10px;
  bottom: 25px;
}

.book__details__title {
  margin-bottom: 20px;
}

.book__details__title h3 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 13px;
}

.book__details__title span {
  font-size: 15px;
  color: #b7b7b7;
  display: block;
}

.book__details__rating {
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.book__details__rating .rating i {
  font-size: 24px;
  color: #e89f12;
  display: inline-block;
}

.book__details__rating span {
  display: block;
  font-size: 18px;
  color: #b7b7b7;
}

.book__details__widget {
  margin-bottom: 15px;
}

.book__details__widget ul {
  margin-bottom: 20px;
}

.book__details__widget ul li {
  list-style: none;
  font-size: 15px;
  color: #ffffff;
  line-height: 30px;
  position: relative;
  padding-left: 18px;
}

.book__details__widget ul li:before {
  position: absolute;
  left: 0;
  top: 12px;
  height: 6px;
  width: 6px;
  background: #b7b7b7;
  content: "";
}

.book__details__widget ul li span {
  color: #b7b7b7;
  width: 115px;
  display: inline-block;
}

.book__details__btn .follow-btn {
  font-size: 13px;
  color: #ffffff;
  background: #ffab01;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 4px;
  margin-right: 11px;
}

.book__details__btn .watch-btn span {
  font-size: 13px;
  color: #ffffff;
  background: #ffab01;
  display: inline-block;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 4px 0 0 4px;
  margin-right: 1px;
}

.book__details__btn .watch-btn i {
  font-size: 20px;
  display: inline-block;
  background: #ffab01;
  padding: 11px 5px 16px 8px;
  color: #ffffff;
  border-radius: 0 4px 4px 0;
}

.book__details__review {
  margin-bottom: 55px;
}

.book__review__item {
  overflow: hidden;
  margin-bottom: 15px;
}

.book__review__item__pic {
  float: left;
  margin-right: 20px;
  position: relative;
}

.book__review__item__pic:before {
  position: absolute;
  right: -30px;
  top: 15px;
  border-top: 15px solid transparent;
  border-left: 15px solid #1d1e39;
  content: "";
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.book__review__item__pic img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.book__review__item__text {
  overflow: hidden;
  background: #1d1e39;
  padding: 18px 30px 16px 20px;
  border-radius: 10px;
}

.book__review__item__text h6 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.book__review__item__text h6 span {
  color: #b7b7b7;
  font-weight: 400;
}

.book__review__item__text p {
  color: #b7b7b7;
  line-height: 23px;
  margin-bottom: 0;
}

.book__details__form form textarea {
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  padding-left: 20px;
  padding-top: 12px;
  height: 110px;
  border: none;
  border-radius: 5px;
  resize: none;
  margin-bottom: 24px;
}

.book__details__form form button {
  font-size: 11px;
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #ffab01;
  border: none;
  padding: 15px 15px;
  border-radius: 2px;
}

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

.book__video__player {
  margin-bottom: 70px;
}

.book__video__player .plyr--video {
  border-radius: 5px;
  background: transparent;
}

.book__video__player .plyr audio,
.book__video__player .plyr iframe,
.book__video__player .plyr video {
  width: 102%;
}

.book__video__player .plyr--full-ui.plyr--video .plyr__control--overlaid {
  display: block;
}

.book__video__player .plyr--video .plyr__control.plyr__tab-focus,
.book__video__player .plyr--video .plyr__control:hover,
.book__video__player .plyr--video .plyr__control[aria-expanded="true"] {
  background: transparent;
}

.book__video__player .plyr--video .plyr__controls {
  background: transparent;
}

.book__video__player .plyr--video .plyr__progress__buffer {
  color: transparent;
}

.book__video__player .plyr--full-ui input[type="range"] {
  color: #ffffff;
}

.book__video__player
  .plyr__controls
  .plyr__controls__item.plyr__progress__container {
  position: absolute;
  left: 26px;
  bottom: 45px;
  width: calc(100% - 60px);
}

.book__video__player .plyr__menu {
  margin-right: 70px;
}

.book__video__player .plyr__controls .plyr__controls__item:first-child {
  position: absolute;
  left: 32px;
  bottom: 8px;
}

.book__video__player .plyr__controls .plyr__controls__item:last-child {
  position: absolute;
  right: 32px;
  bottom: 8px;
}

.book__video__player .plyr__volume {
  position: absolute;
  width: auto;
  left: 76px;
  bottom: 8px;
}

.book__video__player .plyr__controls .plyr__controls__item.plyr__time {
  position: absolute;
  left: 106px;
  bottom: 12px;
}

.book__video__player .plyr__control--overlaid {
  background: transparent;
  background: var(
    --plyr-video-control-background-hover,
    var(--plyr-color-main, var(--plyr-color-main, transparent))
  );
}

.book__video__player .plyr__control--overlaid svg {
  height: 60px;
  width: 50px;
}

.book__details__episodes {
  margin-bottom: 35px;
}

.book__details__episodes a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  padding: 10px 20px;
  border-radius: 4px;
  margin-right: 15px;
  margin-bottom: 20px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.book__details__episodes a:hover {
  color: #000000;
  background: #ffffff;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
  padding-top: 35px;
}

.breadcrumb__links a {
  font-size: 15px;
  color: #ffffff;
  margin-right: 18px;
  display: inline-block;
  position: relative;
}

.breadcrumb__links a i {
  margin-right: 5px;
  color: #ffab01;
}

.breadcrumb__links a:after {
  position: absolute;
  right: -14px;
  top: 0;
  content: "";
  font-family: "FontAwesome";
}

.breadcrumb__links span {
  font-size: 15px;
  color: #b7b7b7;
  display: inline-block;
}

/*---------------------
    Normal Breadcrumb
-----------------------*/

.normal-breadcrumb {
  height: 300px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.normal__breadcrumb__text h2 {
  color: #ffffff;
  font-size: 48px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  margin-bottom: 22px;
}

.normal__breadcrumb__text p {
  color: #ffffff;
  font-size: 24px;
  margin-bottom: 0;
}

/*---------------------
    Blog
-----------------------*/

.blog {
  padding-top: 70px;
  padding-bottom: 90px;
}

.blog__item {
  height: 580px;
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
  margin-bottom: 10px;
}

.blog__item.small__item {
  height: 285px;
}

.blog__item.small__item .blog__item__text {
  padding: 0 30px;
}

.blog__item.small__item .blog__item__text p {
  margin-bottom: 5px;
}

.blog__item.small__item .blog__item__text h4 a {
  font-size: 20px;
  line-height: 30px;
}

.blog__item__text {
  position: absolute;
  left: 0;
  bottom: 25px;
  text-align: center;
  width: 100%;
  padding: 0 105px;
}

.blog__item__text p {
  color: #ffffff;
  margin-bottom: 12px;
}

.blog__item__text p span {
  color: #ffab01;
  margin-right: 5px;
}

.blog__item__text h4 a {
  color: #ffffff;
  line-height: 34px;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
  padding-top: 40px;
}

.blog__details__title {
  text-align: center;
}

.blog__details__title h6 {
  font-size: 15px;
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog__details__title h6 span {
  color: #b7b7b7;
  font-weight: 400;
  text-transform: none;
}

.blog__details__title h2 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  margin-bottom: 20px;
}

.blog__details__title .blog__details__social a {
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
  padding: 16px 35px 14px 20px;
  border-radius: 2px;
  margin-right: 6px;
}

.blog__details__title .blog__details__social a:last-child {
  margin-right: 0;
}

.blog__details__title .blog__details__social a.facebook {
  background: #3b5998;
}

.blog__details__title .blog__details__social a.pinterest {
  background: #ca2027;
}

.blog__details__title .blog__details__social a.linkedin {
  background: #0372b1;
}

.blog__details__title .blog__details__social a.twitter {
  background: #39a1f2;
}

.blog__details__title .blog__details__social a i {
  margin-right: 6px;
}

.blog__details__pic {
  margin-bottom: 25px;
  height: 650px;
}

.blog__details__pic img {
  min-width: 100%;
}

.blog__details__item__text {
  margin-bottom: 30px;
}

.blog__details__item__text h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 20px;
}

.blog__details__item__text img {
  min-width: 100%;
  margin-bottom: 26px;
}

.blog__details__item__text p {
  color: #ffffff;
  font-size: 17px;
  line-height: 30px;
  margin-bottom: 0;
}

.blog__details__tags {
  margin-bottom: 60px;
}

.blog__details__tags a {
  display: inline-block;
  color: #b7b7b7;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin-right: 6px;
  padding: 6px 15px;
  margin-bottom: 10px;
}

.blog__details__tags a:last-child {
  margin-right: 0;
}

.blog__details__btns {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px 0 15px;
  margin-bottom: 65px;
}

.blog__details__btns__item {
  margin-bottom: 20px;
}

.blog__details__btns__item.next__btn {
  text-align: right;
}

.blog__details__btns__item h5 a {
  font-size: 17px;
  letter-spacing: 2px;
  color: #ffffff;
}

.blog__details__btns__item h5 a span {
  font-size: 30px;
  color: #b7b7b7;
  position: relative;
  top: 8px;
}

.blog__details__comment {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 30px;
}

.blog__details__comment h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 26px;
}

.blog__details__comment__item {
  margin-bottom: 40px;
  overflow: hidden;
}

.blog__details__comment__item.blog__details__comment__item--reply {
  padding-left: 112px;
}

.blog__details__comment__item__pic {
  float: left;
  margin-right: 40px;
}

.blog__details__comment__item__text {
  overflow: hidden;
}

.blog__details__comment__item__text span {
  font-size: 14px;
  color: #b7b7b7;
  display: block;
  margin-bottom: 10px;
}

.blog__details__comment__item__text h5 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.blog__details__comment__item__text p {
  color: #b7b7b7;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 25px;
}

.blog__details__comment__item__text a {
  display: inline-block;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 20px;
  letter-spacing: 2px;
  border-radius: 2px;
  margin-right: 14px;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.blog__details__comment__item__text a:hover {
  background: #ffab01;
}

.blog__details__form {
  padding-top: 50px;
}

.blog__details__form h4 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 26px;
}

.blog__details__form form input {
  height: 50px;
  width: 100%;
  background: #11133d;
  font-size: 15px;
  color: #a6a6a6;
  padding-left: 20px;
  border-radius: 2px;
  border: none;
  margin-bottom: 30px;
}

.blog__details__form form input::-webkit-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form input::-moz-placeholder {
  color: #a6a6a6;
}

.blog__details__form form input:-ms-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form input::-ms-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form input::placeholder {
  color: #a6a6a6;
}

.blog__details__form form textarea {
  height: 115px;
  width: 100%;
  background: #11133d;
  font-size: 15px;
  color: #a6a6a6;
  padding-left: 20px;
  border-radius: 2px;
  padding-top: 12px;
  resize: none;
  border: none;
  margin-bottom: 34px;
}

.blog__details__form form textarea::-webkit-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form textarea::-moz-placeholder {
  color: #a6a6a6;
}

.blog__details__form form textarea:-ms-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form textarea::-ms-input-placeholder {
  color: #a6a6a6;
}

.blog__details__form form textarea::placeholder {
  color: #a6a6a6;
}

/*---------------------
  Login
-----------------------*/

.login {
  padding-top: 130px;
  padding-bottom: 120px;
}

.login__form {
  position: relative;
  padding-left: 145px;
}

.login__form:after {
  position: absolute;
  right: -14px;
  top: -40px;
  height: 330px;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}

.login__form h3 {
  color: #ffffff;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-bottom: 30px;
}

.login__form form .input__item {
  position: relative;
  width: 370px;
  margin-bottom: 20px;
}

.login__form form .input__item:before {
  position: absolute;
  left: 50px;
  top: 10px;
  height: 30px;
  width: 1px;
  background: #b7b7b7;
  content: "";
}

.login__form form .input__item input {
  height: 50px;
  width: 100%;
  font-size: 15px;
  color: #b7b7b7;
  background: #ffffff;
  border: none;
  padding-left: 76px;
}

.login__form form .input__item input::-webkit-input-placeholder {
  color: #b7b7b7;
}

.login__form form .input__item input::-moz-placeholder {
  color: #b7b7b7;
}

.login__form form .input__item input:-ms-input-placeholder {
  color: #b7b7b7;
}

.login__form form .input__item input::-ms-input-placeholder {
  color: #b7b7b7;
}

.login__form form .input__item input::placeholder {
  color: #b7b7b7;
}

.login__form form .input__item span {
  color: #b7b7b7;
  font-size: 20px;
  position: absolute;
  left: 15px;
  top: 13px;
}

.login__form form button {
  border-radius: 0;
  margin-top: 10px;
}

.login__form .forget_pass {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  position: absolute;
  right: 60px;
  bottom: 12px;
}

.login__register {
  padding-left: 30px;
}

.login__register h3 {
  color: #ffffff;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-bottom: 30px;
}

.login__register .primary-btn {
  background: #ffab01;
  padding: 12px 42px;
}

.login__social {
  padding-top: 52px;
}

.login__social__links {
  text-align: center;
}

.login__social__links span {
  color: #ffffff;
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.login__social__links ul li {
  list-style: none;
  margin-bottom: 15px;
}

.login__social__links ul li:last-child {
  margin-bottom: 0;
}

.login__social__links ul li a {
  color: #ffffff;
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  width: 460px;
  padding: 14px 0;
  position: relative;
  margin: 0 auto;
}

.login__social__links ul li a.facebook {
  background: #4267b2;
}

.login__social__links ul li a.google {
  background: #ff4343;
}

.login__social__links ul li a.twitter {
  background: #1da1f2;
}

.login__social__links ul li a i {
  font-size: 20px;
  position: absolute;
  left: 32px;
  top: 14px;
}

/*---------------------
  Sign Up
-----------------------*/

.signup {
  padding-top: 130px;
  padding-bottom: 150px;
}

.signup .login__form:after {
  height: 450px;
}

.signup .login__form h5 {
  font-size: 15px;
  color: #ffffff;
  margin-top: 36px;
}

.signup .login__form h5 a {
  color: #ffab01;
  font-weight: 700;
}

.signup .login__social__links {
  text-align: left;
  padding-left: 40px;
}

.signup .login__social__links h3 {
  color: #ffffff;
  font-weight: 700;
  font-family: "Oswald", sans-serif;
  margin-bottom: 30px;
}

.signup .login__social__links ul li a {
  margin: 0;
  text-align: center;
}

/*---------------------
  Footer
-----------------------*/

.footer {
  background: #070720;
  padding-top: 60px;
  padding-bottom: 40px;
  position: relative;
  border-radius: 15px 15px 0 0;
  box-shadow: 0px -2px 5px #4069e2;
}

.page-up {
  position: absolute;
  left: 50%;
  top: -25px;
  margin-left: -25px;
}

.page-up a {
  display: inline-block;
  font-size: 36px;
  color: #ffffff;
  height: 50px;
  width: 50px;
  background: #ffab01;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
}

.page-up a span {
  position: relative;
  top: 2px;
  left: -1px;
}

.footer__nav {
  text-align: center;
}

.footer__nav ul li {
  list-style: none;
  display: inline-block;
  position: relative;
  margin-right: 40px;
}

.footer__nav ul li:last-child {
  margin-right: 0;
}

.footer__nav ul li a {
  font-size: 20px;
  color: #ffffff;
  display: block;
  font-weight: 700;
}

.footer__copyright__text {
  color: #b7b7b7;
  margin-bottom: 0;
  text-align: center;
}

.footer__copyright__text a {
  color: #ffab01;
}

/* book design start */
.book {
  position: relative;
  height: 300px;
  max-width: 230px;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/*
	2. background & color
*/

/* HARDCOVER FRONT */
.hardcover_front li:first-child {
  background-color: #eee;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* reverse */
.hardcover_front li:last-child {
  background: #fffbec;
}

/* HARDCOVER BACK */
.hardcover_back li:first-child {
  background: #fffbec;
}

/* reverse */
.hardcover_back li:last-child {
  background: #fffbec;
}

.book_spine li:first-child {
  background: #eee;
}

.book_spine li:last-child {
  background: #333;
}

/* thickness of cover */

.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  background: #999;
}

/* page */

.page > li {
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1),
    inset -1px 0px 1px rgba(150, 150, 150, 0.2);
  border-radius: 0px 5px 5px 0px;
}

/*
	  3. opening cover, back cover and pages
  */

.hardcover_front {
  transform: rotateY(-34deg) translateZ(8px);
  z-index: 100;
}

.hardcover_back {
  transform: rotateY(-15deg) translateZ(-8px);
}

.page li:nth-child(1) {
  transform: rotateY(-28deg);
}

.page li:nth-child(2) {
  transform: rotateY(-30deg);
}

.page li:nth-child(3) {
  transform: rotateY(-32deg);
}

.page li:nth-child(4) {
  transform: rotateY(-34deg);
}

.page li:nth-child(5) {
  transform: rotateY(-36deg);
}

/*
	  4. position, transform & transition
  */

.hardcover_front,
.hardcover_back,
.book_spine,
.hardcover_front li,
.hardcover_back li,
.book_spine li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.hardcover_front,
.hardcover_back {
  transform-origin: 0% 100%;
}

.hardcover_front {
  transition: all 0.8s ease, z-index 0.6s;
}

/* HARDCOVER front */
.hardcover_front li:first-child {
  cursor: default;
  user-select: none;
  transform: translateZ(2px);
}

.hardcover_front li:last-child {
  transform: rotateY(180deg) translateZ(2px);
}

/* HARDCOVER back */
.hardcover_back li:first-child {
  transform: translateZ(2px);
}

.hardcover_back li:last-child {
  transform: translateZ(-2px);
}

/* thickness of cover */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before,
.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before,
.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before,
.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before,
.book_spine li:first-child:after,
.book_spine li:first-child:before,
.book_spine li:last-child:after,
.book_spine li:last-child:before {
  position: absolute;
  top: 0;
  left: 0;
}

/* HARDCOVER front */
.hardcover_front li:first-child:after,
.hardcover_front li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_front li:first-child:after {
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_front li:first-child:before {
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_front li:last-child:after,
.hardcover_front li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_front li:last-child:after {
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px)
    translateY(-78px);
}

.hardcover_front li:last-child:before {
  box-shadow: 0px 0px 30px 5px #333;
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px)
    translateY(-78px);
}

/* thickness of cover */

.hardcover_back li:first-child:after,
.hardcover_back li:first-child:before {
  width: 4px;
  height: 100%;
}

.hardcover_back li:first-child:after {
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.hardcover_back li:first-child:before {
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
}

.hardcover_back li:last-child:after,
.hardcover_back li:last-child:before {
  width: 4px;
  height: 160px;
}

.hardcover_back li:last-child:after {
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px)
    translateY(-78px);
}

.hardcover_back li:last-child:before {
  box-shadow: 10px -1px 80px 20px #666;
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px)
    translateY(-78px);
}

/* BOOK SPINE */
.book_spine {
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
  width: 16px;
  z-index: 0;
}

.book_spine li:first-child {
  transform: translateZ(2px);
}

.book_spine li:last-child {
  transform: translateZ(-2px);
}

/* thickness of book spine */
.book_spine li:first-child:after,
.book_spine li:first-child:before {
  width: 4px;
  height: 100%;
}

.book_spine li:first-child:after {
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
}

.book_spine li:first-child:before {
  transform: rotateY(-90deg) translateZ(-12px);
}

.book_spine li:last-child:after,
.book_spine li:last-child:before {
  width: 4px;
  height: 16px;
}

.book_spine li:last-child:after {
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px)
    translateY(-6px);
}

.book_spine li:last-child:before {
  box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px)
    translateY(-6px);
}

.page,
.page > li {
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
}

.page {
  width: 100%;
  height: 98%;
  top: 1%;
  left: 3%;
  z-index: 10;
}

.page > li {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transition-property: transform;
  transition-timing-function: ease;
}

.page > li:nth-child(1) {
  transition-duration: 0.6s;
}

.page > li:nth-child(2) {
  transition-duration: 0.6s;
}

.page > li:nth-child(3) {
  transition-duration: 0.4s;
}

.page > li:nth-child(4) {
  transition-duration: 0.5s;
}

.page > li:nth-child(5) {
  transition-duration: 0.6s;
}

/*
	  5. events
  */

.book:hover > .hardcover_front {
  transform: rotateY(-145deg) translateZ(0);
  z-index: 0;
}

.book:hover > .page li:nth-child(1) {
  transform: rotateY(-30deg);
  transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
  transform: rotateY(-35deg);
  transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
  transform: rotateY(-118deg);
  transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
  transform: rotateY(-130deg);
  transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
  transform: rotateY(-140deg);
  transition-duration: 1.2s;
}

#dw_bt:hover {
  opacity: 0.8;
}

#dw_bt {
  box-shadow: 0px 0px 7px 0px rgba(24, 24, 24, 0.1);
  cursor: pointer;
  border: 0px;
  font-size: larger;
  color: white;
  background-color: rgba(158, 27, 50, 1);
  padding: 10px 20px;
  border-radius: 10px;
}

.hover-item {
  transition: 0.5s;
  background-color: #ffffff48;
  border-radius: 5px;
}

.hover-item:hover {
  background-color: #ffffff8e;
}

/* book design end */

/* social media icon */
.sticky-icon {
  z-index: 1;
  position: fixed;
  top: 25%;
  right: 0%;
  width: 250px;
  display: flex;
  flex-direction: column;
}
.sticky-icon a {
  transform: translate(190px, 0px);
  border-radius: 50px 0px 0px 50px;
  text-align: left;
  margin: 2px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  font-size: 22px;
  font-family: Oswald;
  transition: all 0.8s;
}
.sticky-icon a:hover {
  color: #fff;
  transform: translate(0px, 0px);
  opacity: 100%;
}
.sticky-icon a:hover i {
  transform: rotate(360deg);
}
/*.search_icon a:hover i  {
	transform:rotate(360deg);}*/
.Facebook {
  background-color: #1877f2;
  color: #fff;
  opacity: 50%;
}

.Youtube {
  background-color: #fa0910;
  color: #fff;
}

.Twitter {
  background-color: #53c5ff;
  color: #fff;
}

.Instagram {
  background-color: #fd1d1d;
  color: #fff;
}

.Google {
  background-color: #d34836;
  color: #fff;
}
.sticky-icon a i {
  background-color: #fff;
  height: 40px;
  width: 40px;
  color: #ffffff;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  margin-right: 20px;
  transition: all 0.5s;
}
/* .sticky-icon a i.fa-users {
  background-color: #fff;
  color: #2c80d3;
}

.sticky-icon a i.fa-facebook-f {
  background-color: #fff;
  color: #2c80d3;
}

.sticky-icon a i.fa-google-plus-g {
  background-color: #fff;
  color: #d34836;
}

.sticky-icon a i.fa-instagram {
  background-color: #fff;
  color: #fd1d1d;
}

.sticky-icon a i.fa-youtube {
  background-color: #fff;
  color: #fa0910;
}

.sticky-icon a i.fa-twitter {
  background-color: #fff;
  color: #53c5ff;
}
.fas fa-shopping-cart {
  background-color: #fff;
}

.fa-arrow-circle-up {
  font-size: 30px;
} */
/* social share button */

/* profile */
.profile_container {
  user-select: none;
  margin: 60px auto;
  background: #231e39;
  color: #b3b8cd;
  border-radius: 5px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 10px 2px rgb(64, 105, 226);
}
.cover_photo {
  background: url(../img/profile/cover_photo.jpg);
  height: 160px;
  width: 100%;
  border-radius: 5px 5px 0 0;
}
.profile {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  margin: 93px 0 0 -175px;
  border: 1px solid #1f1a32;
  padding: 7px;
  background: #292343;
  box-shadow: 2px 2px 5px #4069e2;
}
.profile_name {
  font-size: 30px;
  font-weight: bold;
  margin: 10px 0 0 120px;
  line-height: 30px;
}
.about {
  margin-top: 15px;
  line-height: 21px;
}
button {
  margin: 10px 0 20px 0;
}
.msg_btn,
.follow_btn {
  background: #ffab01;
  border: 1px solid #ffab01;
  padding: 10px 25px;
  color: #231e39;
  border-radius: 3px;
  font-family: Montserrat, sans-serif;
  cursor: pointer;
}
.follow_btn {
  margin-left: 10px;
  background: transparent;
  color: #ffab01;
}
.follow_btn:hover {
  color: #231e39;
  background: #ffab01;
  transition: 0.5s;
}
.profile_container a {
  color: #ffffff;
}
.profile_container i {
  padding-left: 20px;
  font-size: 20px;
  margin-bottom: 30px;
  cursor: pointer;
  transition: 0.5s;
}
.profile_container i:hover {
  color: #ffab01;
}
/* habit_building playlist */
.list-group-item {
  background: transparent;
  box-shadow: 0px 0px 10px #4069e2;
}

/*------------------------------------------------------------------------------- 
                                                        Responsive Media Quaries 
---------------------------------------------------------------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
  .header__logo img {
    width: 15rem;
  }
  .hero {
    overflow: hidden;
  }
}

@media only screen and (min-width: 1200px) {
  .header__logo img {
    width: 15rem;
  }
  .container {
    max-width: 1170px;
  }
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__logo img {
    width: 15rem;
  }
  .hero {
    overflow: hidden;
  }
  .login__form {
    position: relative;
    padding-left: 32px;
  }
  .login__social__links ul li a {
    width: 380px;
  }
  .blog__item__text {
    padding: 0 50px;
  }
  .blog__details__pic {
    height: 540px;
  }
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero {
    overflow: hidden;
  }

  .header .container {
    position: relative;
  }
  .header__right {
    position: absolute;
    right: 140px;
    top: -65px;
    padding: 0;
  }
  .header__menu {
    display: none;
  }
  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }
  .header__logo img {
    width: 15rem;
  }
  .slicknav_nav {
    position: absolute;
    left: 0;
    top: 101px;
    width: 100%;
    box-shadow: 0px 0px 10px #4069e2;
    backdrop-filter: blur(5px);
    padding: 15px 30px;
    border-radius: 0 0 15px 15px;
    z-index: 9;
  }
  .slicknav_nav ul {
    text-align: center;
    font-size: 20px;
    margin: 0;
  }
  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin: 10px;
    color: #ffffff;
    font-weight: 600;
    background: #ffffff33;
    border-radius: 10px;
    transition: all 0.5s;
  }

  .slicknav_nav a:hover {
    border-radius: 10px;
    color: #ffab01;
    background: #ffffff;
  }

  .slicknav_nav ul li.active a {
    background: #ffab01;
    color: #ffffff;
    border-radius: 10px;
  }

  .slicknav_btn {
    border-radius: 30px;
    box-shadow: 2px 2px 5px #4069e2;
    transition: all 0.3ms;
    position: absolute;
    right: 0;
    top: 30px;
  }
  .slicknav_nav .slicknav_arrow {
    color: #111111;
  }
  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .product__sidebar {
    padding-top: 50px;
  }
  .footer__logo {
    text-align: center;
    margin-bottom: 20px;
  }
  .footer__nav {
    margin-bottom: 15px;
  }
  .footer__copyright__text {
    text-align: center;
  }
  .book__details__widget ul li span {
    width: 90px;
  }
  .book__details__pic {
    margin-bottom: 40px;
  }
  .book__details__sidebar {
    padding-top: 50px;
  }
  .login__form {
    padding-left: 0;
    margin-bottom: 40px;
  }
  .login__form:after {
    display: none;
  }
  .login__form form .input__item {
    width: auto;
  }
  .login__register {
    padding-left: 0;
  }
  .signup .login__social__links {
    padding-left: 0;
  }
  .blog__details__pic {
    height: 400px;
  }
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
  .hero {
    overflow: hidden;
  }
  .hero__items {
    height: 300px;
  }
  .header {
    position: relative;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    transition: 0.3s;
  }
  .nav-up {
    top: -70px;
  }
  .header .container {
    position: relative;
  }
  .header__right {
    position: absolute;
    right: 130px;
    top: -55px;
    padding: 0;
  }
  .header__menu {
    display: none;
  }
  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }
  .header__logo img {
    width: 10rem;
  }
  .slicknav_nav {
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    box-shadow: 0px 0px 10px #4069e2;
    backdrop-filter: blur(5px);
    border-radius: 15px;
    padding: 15px 30px;
    z-index: 9;
  }
  .slicknav_nav ul {
    text-align: center;
    font-size: 20px;
    margin: 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 7px 0;
    margin-bottom: 10px;
    color: #ffffff;
    font-weight: 600;
    background: #ffffff33;
    border-radius: 10px;
    transition: all 0.5s;
  }

  .slicknav_nav a:hover {
    border-radius: 10px;
    background: #ffffff;
    color: #ffab01;
  }

  .slicknav_nav ul li.active a {
    background: #ffab01;
    color: #ffffff;
    border-radius: 10px;
  }

  .slicknav_btn {
    border-radius: 30px;
    box-shadow: 2px 2px 5px #4069e2;
    transition: all 0.3ms;
    position: absolute;
    right: 5px;
    top: 20px;
  }
  .slicknav_btn:active {
    box-shadow: 0px 0px 10px #4069e2;
  }
  .slicknav_nav .slicknav_arrow {
    color: #111111;
  }
  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: transparent;
    color: #111111;
  }

  .product__sidebar {
    padding-top: 50px;
  }
  .footer__logo {
    text-align: center;
    margin-bottom: 20px;
  }
  .footer__nav {
    margin-bottom: 15px;
  }
  .footer__copyright__text {
    text-align: center;
  }
  .blog__details__title h2 {
    font-size: 34px;
    line-height: normal;
  }
  .book__details__pic {
    margin-bottom: 40px;
  }
  .book__details__sidebar {
    padding-top: 50px;
  }
  .btn__all {
    text-align: left;
  }
  .product__page__title .section-title {
    margin-bottom: 10px;
  }
  .product__page__title .product__page__filter {
    text-align: left;
  }
  .book__details__rating {
    text-align: left;
    position: relative;
    margin-bottom: 20px;
  }
  .blog__details__social {
    overflow: hidden;
  }
  .blog__details__title .blog__details__social a {
    margin-right: 10px;
    margin-bottom: 10px;
    width: calc(50% - 10px);
    float: left;
  }
  .login__form {
    padding-left: 0;
    margin-bottom: 40px;
  }
  .login__form:after {
    display: none;
  }
  .login__form form .input__item {
    width: auto;
  }
  .signup .login__social__links {
    padding-left: 0;
  }
  .login__social__links ul li a {
    width: auto;
  }
  .blog__item__text {
    padding: 0 30px;
  }
  .login__register {
    padding-left: 0;
  }
  .product__sidebar__view .filter__controls li {
    margin-right: 2px;
  }
  .search-model-form input {
    width: 100%;
  }
  .blog__details__pic {
    height: 300px;
  }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
  #preloderHome img {
    height: 100vh;
    object-fit: cover;
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    transition: 0.3s;
  }
  .nav-up {
    top: -70px;
  }
  .hero__slider.owl-carousel .owl-nav {
    display: none;
  }

  .hero__text h2 {
    font-size: 32px;
  }
  .footer__nav ul li {
    margin-right: 10px;
  }
  .book__details__btn .follow-btn {
    padding: 14px 26px;
    margin-right: 11px;
    margin-bottom: 25px;
  }
  .book__details__widget ul li span {
    width: 85px;
  }
  .book__video__player .plyr__volume {
    left: 65px;
  }
  .book__video__player .plyr__controls .plyr__controls__item.plyr__time {
    left: 95px;
  }
  .book__video__player .plyr__menu {
    margin-right: 60px;
  }
  .blog__details__title h2 {
    font-size: 30px;
    line-height: normal;
  }
  .blog__details__title .blog__details__social a {
    padding: 16px 25px 14px 20px;
  }
  .blog__details__comment__item.blog__details__comment__item--reply {
    padding-left: 0;
  }
  .blog__details__comment__item__pic {
    margin-right: 25px;
  }
  .blog__details__comment__item__text a {
    margin-right: 6px;
  }
  .login__social__links ul li a i {
    left: 20px;
  }
  .login__form .forget_pass {
    position: relative;
    left: 0;
    bottom: 0;
    margin-top: 25px;
  }
  .header__right a {
    margin-right: 10px;
  }
  .book__review__item__text h6 span {
    font-size: 12px;
  }
  .book__review__item__text {
    padding: 18px 20px 20px;
  }
  .trending__product .book {
    height: 200px;
    max-width: 150px;
  }
  .info-model-body .visit_aria {
    position: absolute;
    min-height: 15%;
    width: 90%;
    top: 20%;
    left: 5%;
    /* box-shadow: -4px -4px 5px #4069e2; */
    /* box-shadow: 4px 4px 5px #ffab01; */
    box-shadow: 0 0 10px 2px #ffab01;
    padding: 10px;
  }
  .info_container {
    height: 150px;
    width: 150px;
  }
  .box {
    height: 150px;
    width: 150px;
  }
  .count {
    font-size: 16px;
  }
  .follow {
    font-size: 14px;
  }
  .blog__details__pic {
    height: 220px;
  }
}
/* Support */
.main-area-content,
.transaction-history {
}

.transaction-history .card-header {
  background-color: transparent;
  box-shadow: 0px 2px 200px #4069e2;
}
.transaction-history .card-header i {
  font-size: 1.5rem;
  padding-right: 20px;
}
.transaction-history .card {
  background-color: transparent;
  height: auto;
  overflow: auto;
  box-shadow: 2px 2px 10px #4069e2;
  border-radius: 5px;
  color: #fff;
}
.transaction-history .card-footer {
  background-color: transparent;
}
.transaction-history .transaction-history-wrapper {
  list-style-type: none;
}
.transaction-history .transaction-history-wrapper li {
  border-bottom: 1px solid #efe9e9;
  padding: 10px 20px;
}
.transaction-history .transaction-history-wrapper li .f {
  align-items: center;
  display: flex;
  padding-left: 0px;
}
.transaction-history .transaction-history-wrapper li .f i {
  font-size: 1.6rem;
  padding: 0 5px;
}
.transaction-history .transaction-history-wrapper li .f .spending-text {
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  line-height: 1.2rem;
  padding-left: 10px;
}
.transaction-history
  .transaction-history-wrapper
  li
  .f
  .spending-text
  .heading {
  font-weight: 600;
}
.transaction-history .transaction-history-wrapper li .f .spending-text .sub {
  font-size: 0.8rem;
}
.transaction-history .transaction-history-wrapper li .amt-right {
  padding-right: 0;
  text-align: right;
}
.transaction-history .transaction-history-wrapper li .amt-right .amount {
  font-weight: 600;
}
.transaction-history .transaction-history-wrapper li .amt-right span {
  padding-left: 10px;
}
.transaction-history .transaction-footer {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0 15px 0 25px;
}
.transaction-history .transaction-footer .missing-transactions i {
  padding-right: 15px;
}
.imp-info {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  padding: 20px 10px;
  text-align: center;
  box-shadow: 2px 2px 10px #4069e2;
  backdrop-filter: blur(5px);
  border-radius: 5px;
}
.imp-info .info-text:before {
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 10px;
  margin-right: 5px;
  width: 10px;
}
.imp-info .info-text {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
}
.imp-info .info-amt {
  padding-left: 18px;
}
.income-txt .info-text:before {
  background-color: #1bb678;
}
.expense-txt .info-text:before {
  background-color: #d0021b;
}

.ct-series-a .ct-bar,
.ct-series-a .ct-line,
.ct-series-a .ct-point,
.ct-series-a .ct-slice-donut {
  stroke: #1bb678;
  stroke-width: 5px;
}
.ct-series-b .ct-bar,
.ct-series-b .ct-line,
.ct-series-b .ct-point,
.ct-series-b .ct-slice-donut {
  stroke: #d0021b;
  stroke-width: 5px;
}

.money-plus {
  color: #2ecc71;
}

.money-minus {
  color: #c0392b;
}

@media only screen and (min-width: 768px) {
  .w-768 {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .transaction-history {
    padding-left: 15px;
  }
}
@media only screen and (min-width: 1200px) {
  .max-1200 {
    display: none;
  }
  .main-area-content,
  .transaction-history {
    padding-left: 15px;
    padding-right: 15px;
  }
}