/* VAR */

:root {
   --primary-color: #ec1c29;
   --action-btn-size: 55px;
   --reader-inner-offset: 32px;
   --swiper-navigation-size: 16px;
   --border-radius: 6px;
}

@media only screen and (max-width: 991px) {
   :root {
      --action-btn-size: 50px;
      --reader-inner-offset: 22px;
   }
}

@media only screen and (max-width: 767px) {
   :root {
      --action-btn-size: 46px;
      --reader-inner-offset: 20px;
   }
}



/* loader */

.loader {
   position: absolute;
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   z-index: 10;
   background-color: #292929;
   overflow: hidden;
}

.loader__container {
   width: 190px;
   height: 190px;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -70%);
   position: absolute;
}

.loader__blob {
   width: 190px;
   height: 190px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
}

.loader__blob span:nth-child(1) {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
   opacity: 0.4;
   background: var(--primary-color);
   transition: 0.5s;
   animation: rotate-blob 8s linear infinite;
}

.loader__blob:hover span:nth-child(1) {
   background: var(--primary-color);
   opacity: 0.9;
}

.loader__blob span:nth-child(2) {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
   opacity: 0.3;
   background: var(--primary-color);
   transition: 0.5s;
   animation: rotate-blob 7s linear infinite;
}

.loader__blob:hover span:nth-child(2) {
   background: var(--primary-color);
   opacity: 0.7;
}

.loader__blob span:nth-child(3) {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
   opacity: 0.2;
   background: var(--primary-color);
   transition: 0.5s;
   animation: rotate-blob2 13s linear infinite;
}

.loader__blob:hover span:nth-child(3) {
   background: var(--primary-color);
   opacity: 0.5;
}

@keyframes rotate-blob {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

@keyframes rotate-blob2 {
   0% {
      transform: rotate(360deg);
   }

   100% {
      transform: rotate(0deg);
   }
}

.blob__inner {
   position: relative;
   padding: 40px 60px;
   text-align: center;
   z-index: 10000;
}

.loader__logo {
   color: #fff;
   width: 90px;
   height: auto;
   display: block;
}

.loader__logo>svg {
   width: 100%;
   height: 100%
}

.loader__link {
   width: 200px;
   text-decoration: none;
   color: rgba(255, 255, 255, 0.15);
   font-size: .6125rem;
   text-transform: uppercase;
   letter-spacing: .75rem;
   text-align: center;
   position: absolute;
   top: 130%;
   left: calc(50% - 100px);
   user-select: none;
}


@media only screen and (max-width: 991px) {

   .loader__container,
   .loader__blob {
      width: 120px;
      height: 120px;
   }

   .loader__logo {
      width: 60px;
   }
}



/* action buttons */

.interface {
   margin: 0 var(--reader-inner-offset);
   width: calc(100% - (2 * var(--reader-inner-offset)));
}

.interface .actions {
   padding-bottom: var(--reader-inner-offset);
}

.interface .actions button,
.interface .actions.darker button.menu,
.interface .actions>span {
   border-radius: 100px;
   margin-left: 10px;
   width: var(--action-btn-size);
   height: var(--action-btn-size);
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   transition: color 0.2s, background-color 0.2s;
}

.interface .actions.darker button:hover,
.interface .actions button:hover {
   background-color: rgba(0, 0, 0, 0.9);
   color: #fff;
}


.interface .actions button.menu {
   margin-left: 0 !important;
   width: auto;
   display: flex;
   flex-direction: row;
}

.interface .actions button.menu::after {
   display: none;
}

.interface .actions button.menu:hover {
   background-color: #ab101a;
}

.interface .actions.darker button.menu span {
   display: none;
}

.interface .actions.darker button.menu .icon-menu:before,
.interface .actions.darker button.menu .icon-grid:before {
   content: "\e603";
}

.interface .actions button.back {
   font-size: 1.125rem;
}

.interface .actions button.back span {
   height: 11px;
   overflow: hidden;
}

.interface .actions button.back .icon-back {
   margin: -4px 0 5px;
}

.interface .actions button.back .icon-back:before {
   content: "\e05a";
}


@media only screen and (max-width: 767px) {
   .interface .actions.darker button.menu {
      font-size: 16px;
   }

   .interface .actions button.menu span {
      font-size: 15px;
   }

   .interface .actions button.back .icon-back {
      margin: -7px 0 5px;
   }

   .interface .actions button.back span {
      font-size: 8px;
   }
}



/* pages progress */

.interface .metadata .page-count {
   bottom: calc(var(--reader-inner-offset) * 1.6);
   background-color: rgba(0, 0, 0, .35);
   border-radius: 30px;
   color: #fff;
   font-size: 10px;
   font-weight: 400;
   padding: 5px 9px;
}

.interface .metadata .page-progress {
   bottom: var(--reader-inner-offset);
   opacity: 0.7;
   border-radius: 10px;
   height: 4px;
   overflow: hidden;
}

.interface .metadata .page-progress>div {
   border-radius: 10px;
}


@media only screen and (max-width: 991px) {
   .interface .metadata .page-progress {
      width: 12rem;
   }
}

@media only screen and (max-width: 767px) {
   .interface .metadata .page-count {
      bottom: auto;
      top: calc(var(--reader-inner-offset) * 1.6);
   }

   .interface .metadata .page-progress {
      bottom: auto;
      top: calc(var(--reader-inner-offset) * 0.8);
   }
}



/* reader button prev/next */

.reader .page-next,
.reader .page-prev {
   width: var(--action-btn-size);
   height: var(--action-btn-size);
   color: rgba(255, 255, 255, 0.8);
   transition: color 0.2s, background-color 0.2s;
}

.reader .page-next i,
.reader .page-prev i {
   font-size: var(--swiper-navigation-size);
   vertical-align: middle;
}

.reader .page-next,
.reader .page-next:hover {
   margin-right: var(--reader-inner-offset);
}

.reader .page-prev,
.reader .page-prev:hover {
   margin-left: var(--reader-inner-offset);
}

.reader .page-next:hover,
.reader .page-prev:hover {
   background-color: rgba(0, 0, 0, 0.9);
   color: #fff;
}



/* info */

.info {
   margin: 0 var(--reader-inner-offset);
   width: calc(100% - (2 * var(--reader-inner-offset)));
}

.info .bar {
   border-radius: var(--border-radius);
   background-color: rgba(255, 255, 255, 0.18);
}

.info .description {
   gap: 0.5rem 3rem;
   margin-block: 0.5rem;
}

.info .description dt {
   text-align: left;
}

@media only screen and (max-width: 1199px) {
   .info .bar {
      border-radius: 0 0 6px 6px;
   }
}

@media only screen and (max-width: 991px) {
   .info .description {
      gap: 0.5rem 1rem;
   }
}

@media only screen and (max-width: 767px) {
   .info .description {
      gap: 0.375rem 1rem;
   }
}

@media only screen and (max-height: 470px) {
   .info {
      flex-direction: column;
   }

   .info .bar {
      position: absolute;
      left: 0;
      top: 0;
   }

   .info h1 {
      place-self: end;
   }

   .info .description {
      gap: 0.25rem 1rem;
      place-self: end;
   }
}



/* image swiper */

.interface .company {
   font-size: 0;
   width: 46px;
   height: 22px;
   bottom: 10px;
   right: 0;
   background: url('/skins/cnc/ikiosek-white.svg') no-repeat 0 0;
   background-size: auto 100%;
}

.interface .swiper {
   background: none;
   height: calc(var(--reader-inner-offset) + 210px);
   width: calc(100% + var(--reader-inner-offset) * 2);
   left: calc(var(--reader-inner-offset) * -1);
   right: calc(var(--reader-inner-offset) * -1);
}

.interface .swiper .swiper-wrapper {
   padding-block: 0;
}

.interface .swiper .swiper-wrapper .swiper-slide img {
   box-shadow: 0 2px 9px rgba(0, 0, 0, 0.5);
   border-radius: var(--border-radius);
   border: none;
   height: auto;
   transition: border 0.2s, border-radius 0.2s;
}

.interface .swiper .swiper-wrapper .active img,
.interface .swiper .swiper-wrapper .active-left img,
.interface .swiper .swiper-wrapper .active-right img {
   border: 4px solid var(--primary-color);
   display: block;
}

.interface .swiper .swiper-slide .thumb {
   position: relative;
   cursor: pointer;
}

.interface .swiper .thumb.active::after,
.interface .swiper .thumb.active-left::after,
.interface .swiper .thumb.active-right::after {
   content: "";
   background-color: var(--primary-color);
   border-radius: var(--border-radius);
   width: 100%;
   height: 100%;
   display: block;
   opacity: 0.1;
   top: 0;
   left: 0;
   position: absolute;
}

.interface .swiper .swiper-wrapper .active-left img {
   border-right: 0;
}

.interface .swiper .swiper-wrapper .active-right img {
   border-left: 0;
}

.interface .swiper .swiper-button-prev,
.interface .swiper .swiper-button-next {
   width: var(--action-btn-size);
   height: var(--action-btn-size);
   color: rgba(255, 255, 255, 0.8);
   background: rgba(0, 0, 0, 0.75);
   border: none;
   border-radius: 50%;
   cursor: pointer;
   position: absolute;
   top: calc(50% - var(--action-btn-size) / 1.5);
   z-index: 1000;
   transition: color 0.2s, background-color 0.2s;
}

.interface .swiper .swiper-button-prev:hover,
.interface .swiper .swiper-button-next:hover {
   background: #000;
}

.interface .swiper .swiper-button-prev {
   left: var(--reader-inner-offset);
}

.interface .swiper .swiper-button-next {
   right: var(--reader-inner-offset);
}

.swiper-button-next:after,
.swiper-button-prev:after {
   font-size: var(--swiper-navigation-size);
   font-weight: 600;
   vertical-align: middle;
   margin: 0 !important;
}

.interface .swiper.has-title .swiper-slide:nth-of-type(odd),
.interface .swiper.no-title .swiper-slide:nth-of-type(2n) {
   margin-right: 10px;
}


@media only screen and (min-width: 500px) {
   .interface .swiper.has-title .swiper-slide:nth-of-type(2n) {
      margin-left: 10px;
   }
}

@media only screen and (max-width: 1199px) {
   .interface .swiper .swiper-wrapper .swiper-slide .thumb {
      overflow: hidden;
      height: 195px;
   }

   .interface .swiper .swiper-wrapper .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
   }
}

@media only screen and (max-width: 991px) {
   .interface .swiper {
      height: calc(var(--reader-inner-offset) + 220px);
   }
}

@media only screen and (max-width: 767px) {
   .interface .swiper {
      height: calc(var(--reader-inner-offset) + 195px);
   }

   .interface .swiper .swiper-wrapper .swiper-slide .thumb {
      height: 170px;
   }
}

@media only screen and (max-height: 470px) {
   .interface .company {
      display: none;
   }

   .interface .swiper {
      height: calc(var(--reader-inner-offset) + 170px);
   }
}



/* links */

.links {
   gap: 0.5rem;
}

.links a {
   font-size: 0.9375rem;
   padding-left: 10px;
   padding-right: 10px;
   border-radius: 40px;
   transition: background-color 0.2s, color 0.2s;
}

.links a i {
   transition: color 0.2s;
}

.links a .icon-link-out::before {
   content: "\e051";
}

.links a:hover {
   background-color: var(--primary-color);
   color: #fff;
}

.links a:hover i {
   color: #fff;
}



/* overlay */

.overlay {
   background-color: #000;
   opacity: 0.78;
}


/* info mess */

.info__mess {
   border-radius: var(--border-radius);
   overflow: hidden;
}



/* SCROLL MODE */

.scroll .interface .actions button {
   margin-top: 10px;
}

.scroll .interface .scroll-thumbs::-webkit-scrollbar-thumb {
   border-radius: var(--border-radius);
}

.scroll .interface .scroll-thumbs .thumb,
.scroll .interface .scroll-thumbs .thumb::after {
   border-radius: var(--border-radius);
}

.scroll .interface .scroll-thumbs .thumb img {
   border-radius: calc(var(--border-radius) - 4px);
}