/*!/wp-content/themes/differenceengine_web/assets/css/style.css*/@import url(https://use.typekit.net/nkj5yba.css);@import url(https://fonts.googleapis.com/css?family=Mukta&display=swap);@charset "UTF-8";
/* Import font-face */


/* Variables */
/* Comic/Product Categories */
html {
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
html ::-webkit-scrollbar {
  width: 0;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

/* Body */
body {
  background-color: #f7f7f7;
  font-family: "dinosaur", san-serif;
  color: #545454;
}
body *, body *:focus {
  outline: none !important;
}
body .main {
  background-color: #f7f7f7;
}
body .main section,
body .main aside {
  margin: 2rem 0;
}

a {
  cursor: pointer;
  color: #e10098;
}

a.email-link,
a.email-link:hover,
a.email-link:visited {
  color: #545454;
}

a:hover {
  text-decoration: none;
  color: #e10098;
}

p {
  font-family: "Mukta", san-serif;
  font-size: 16px;
  margin-bottom: 0;
}
p strong {
  font-weight: 500;
}

ul {
  font-family: "Mukta", san-serif;
}
ul li {
  padding: 0;
}

/* Home Banner */
.home-banner {
  margin-bottom: 1.5rem;
  background-color: #002677;
}
.home-banner .nav-item a {
  font-family: "dinosaur", san-serif;
  text-transform: uppercase;
  color: #fff;
}

/* Shopping Cart Icon */
.shopping-cart-icon {
  cursor: pointer;
}
.shopping-cart-icon img {
  max-height: 1.7rem;
  padding: 0.1rem 0 0.5rem 0;
}

/* Pagination */
nav[aria-label="Page navigation"] {
  margin: 2rem 0;
}
nav[aria-label="Page navigation"] ul.pagination li.active span {
  background-color: #e10098;
  border-color: #e10098;
}

/* Webcomic Reader Navbar */
.translate-up {
  transform: translateY(-80px);
  transition: 0.5s;
}

.translate-down {
  transform: translateY(80px);
  transition: 0.5s;
}

/* Headings */
h1,
h2 {
  font-family: "dinosaur", san-serif;
  text-transform: uppercase;
  color: #002677;
  margin-bottom: 1rem;
  font-style: normal;
}

h3,
h4,
h6 {
  font-family: "dinosaur", san-serif;
  text-transform: uppercase;
  color: #002677;
  margin-bottom: 1rem;
  font-style: normal;
}

h1 {
  font-size: 30px;
  font-style: normal;
}

h2 {
  font-size: 24px;
  font-style: normal;
}

h3 {
  font-size: 22px;
  font-style: normal;
}

h4 {
  font-size: 18px;
  font-style: normal;
}

h5 {
  font-family: "dinosaur", san-serif;
  font-weight: bold;
  text-transform: none;
  color: #002677;
  margin-bottom: 1rem;
}

p {
  word-wrap: break-word;
}

/* Section */
section {
  margin: 2rem 0;
}
section .section-title {
  margin-top: 1rem;
}
section .section-title h1 {
  color: #002677;
}

section.border-top {
  border-top: 1px solid #e5e5e5;
}

/* 100pct width */
.w-100 {
  width: 100%;
}

/* Webcomic Single Page */
.sidebar {
  border-left: 1px solid #e5e5e5;
  padding: 0 0 0 1rem;
}

/* Share Buttons On Single Post Pages */
.share-buttons {
  background: none;
  border: 0;
}
.share-buttons ul {
  list-style-type: none;
  padding-left: 0;
}
.share-buttons ul li {
  width: 40px;
  height: 40px;
  text-align: center;
}
.share-buttons ul li a {
  color: #e10098;
  font-size: 16px;
  margin: auto;
}
.share-buttons ul li a:hover {
  color: #e10098;
}
.share-buttons.share-buttons--fix {
  position: sticky;
  top: 110px;
  z-index: 2;
  transition: ease-out;
}

/* Home Carousel */
section.section-carousel {
  margin-top: 2rem;
  border: 0;
}
section.section-carousel .home-carousel .carousel-indicators {
  position: relative;
  bottom: 0;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
section.section-carousel .home-carousel .carousel-indicators li {
  width: 10px;
  height: 10px;
  background-color: #f7f7f7;
  border: 1px solid #002677;
  border-radius: 100%;
  cursor: pointer;
}
section.section-carousel .home-carousel .carousel-indicators li.active {
  background-color: #002677;
  border: 1px solid #002677;
}
section.section-carousel .home-carousel .carousel-bottom {
  background-color: #e10098;
  height: 52px;
  overflow: hidden;
}

section.section-carousel .home-carousel .carousel-bottom .carousel-control {
  margin: 0.8rem 0;
}
section.section-carousel .home-carousel .carousel-bottom .carousel-control-icon {
  color: white;
  font-size: 20px;
}
section.section-carousel .home-carousel .carousel-bottom .carousel-title {
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
}
section.section-carousel .home-carousel .carousel-bottom .carousel-title a {
  font-family: "dinosaur", san-serif;
  color: white;
  font-size: 24px;
  text-transform: uppercase;
}

/* Navbar */
/* Social & Search Bar */
header.main-header {
  background-color: #f7f7f7;
  color: #e10098;
}
header.main-header .list-inline {
  margin-bottom: 0;
  margin-right: 0;
}
header.main-header .subnav-links,
header.main-header .subnav-links a {
  color: #e10098;
  padding: 0.5rem 0;
  text-align: right;
}

/* Naigation Menu */
.navbar-wrapper {
  background-color: #f7f7f7;
  margin-bottom: 25px;
}
.navbar-wrapper .navbar-desktop {
  padding: 0;
}
.navbar-wrapper .navbar-desktop div {
  padding: 0.5rem 0;
}
.navbar-wrapper .navbar-desktop .navbar-brand {
  padding: 0;
}
.navbar-wrapper .navbar-desktop .navbar-brand img {
  max-height: 65px;
}
.navbar-wrapper .navbar-desktop .navbar-nav {
  height: 65px;
  width: 100%;
  padding: 0.3rem 0;
}
.navbar-wrapper .navbar-desktop .navbar-nav .nav-item {
  margin-top: auto;
  margin-bottom: auto;
  height: 65px;
}
.navbar-wrapper .navbar-desktop .navbar-nav .nav-item a {
  font-size: 14px;
  color: #002677;
  font-family: "dinosaur", san-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.9rem 1.5rem 0.5rem 1.5rem;
  height: 65px;
}
.navbar-wrapper .navbar-desktop .navbar-nav .nav-item a:hover {
  padding-top: 0.9rem;
  color: #e10098;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iODEiIHZpZXdCb3g9IjAgMCA4NCA4MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjgwMjcgOC43NDkyMUw1Mi42MDI1IDE5Ljk5MjhMNzguNDA1NSA4LjA1ODU5TDc0Ljk1NTEgMjEuMTA0NiIgc3Ryb2tlPSIjZTEwMDk4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNOC4zMDgxIDU2LjcxTDMuMDY1NDMgNjguMDg4NEwzMy41NTg0IDYyLjQwMzRMNTYuNzQgNzEuMjgwNEw2Mi4yNTkgNjIuMjYwMkw4MS43MjIzIDYzLjk5NTJMNzguNDA1OCA0OS4zNTc0IiBzdHJva2U9IiNlMTAwOTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPgo=);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center -5px;
  overflow: visible;
  height: 65px;
}
.navbar-wrapper .navbar-desktop .navbar-nav .active > .nav-link, .navbar-wrapper .navbar-desktop .navbar-nav .show > .nav-link, .navbar-wrapper .navbar-desktop .navbar-nav .nav-link:focus {
  padding-top: 0.9rem;
  color: #e10098;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODQiIGhlaWdodD0iODEiIHZpZXdCb3g9IjAgMCA4NCA4MSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMwLjgwMjcgOC43NDkyMUw1Mi42MDI1IDE5Ljk5MjhMNzguNDA1NSA4LjA1ODU5TDc0Ljk1NTEgMjEuMTA0NiIgc3Ryb2tlPSIjZTEwMDk4IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPgo8cGF0aCBkPSJNOC4zMDgxIDU2LjcxTDMuMDY1NDMgNjguMDg4NEwzMy41NTg0IDYyLjQwMzRMNTYuNzQgNzEuMjgwNEw2Mi4yNTkgNjIuMjYwMkw4MS43MjIzIDYzLjk5NTJMNzguNDA1OCA0OS4zNTc0IiBzdHJva2U9IiNlMTAwOTgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIi8+Cjwvc3ZnPgo=);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center -5px;
  overflow: visible;
  height: 65px;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu {
  background-color: #f7f7f7;
  border: 1px solid #002677;
  border-radius: 0;
  margin: 0;
  padding: 1rem;
  z-index: 2;
  -webkit-transition-property: border-bottom-color;
  /* Safari */
  -webkit-transition-duration: 5s;
  /* Safari */
  -webkit-transition-delay: 2s;
  /* Safari */
  transition-property: border-bottom-color;
  transition-duration: 5s;
  transition-delay: 2s;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu li, .navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu li:hover, .navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu a, .navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu a:hover {
  margin-top: auto;
  margin-bottom: auto;
  height: 40px;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu a {
  text-align: left;
  letter-spacing: 1px;
  padding: 0.5rem 0.9rem;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu a:hover {
  background-color: #f7f7f7;
  color: #e10098;
  background-image: none;
  padding-top: 0.5rem;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu:before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-bottom: 15px solid #002677;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
.navbar-wrapper .navbar-desktop .navbar-nav .dropdown-menu:after {
  content: "";
  color: #002677;
  position: absolute;
  height: 100%;
  width: 100%;
  border-width: 0 5px 5px 0;
  border-style: solid;
  top: 6px;
  right: -6px;
  z-index: -1;
}
.navbar-wrapper.sticky {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  background-color: #f7f7f7;
  display: none;
}
.navbar-wrapper.sticky .navbar .navbar-brand img {
  max-height: 65px;
}
.navbar-wrapper.sticky .navbar .navbar-brand .sticky-logo {
  display: inline-block !important;
}
.navbar-wrapper .navbar-mobile {
  padding: 0;
}
.navbar-wrapper .navbar-mobile div {
  padding: 0;
}
.navbar-wrapper .navbar-mobile .navbar-brand img {
  max-height: 70px;
  padding: 0.3rem 0;
}
.navbar-wrapper .navbar-mobile .mobile-search {
  margin-top: 1rem;
}
.navbar-wrapper .navbar-mobile .hamburger {
  background-color: #f7f7f7;
  display: inline-block;
  cursor: pointer;
  border: 0;
  margin: 0;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-box {
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-inner {
  display: block;
  top: 50%;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-inner, .navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:before, .navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:after {
  position: absolute;
  background-color: #002677;
  width: 30px;
  height: 5px;
  border-radius: 1rem;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:before, .navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:after {
  content: "";
  display: block;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:before {
  top: -10px;
}
.navbar-wrapper .navbar-mobile .hamburger .hamburger-inner:after {
  bottom: -10px;
}
.navbar-wrapper .navbar-mobile .hamburger--spin .hamburger-inner {
  transition-duration: 0.22s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.navbar-wrapper .navbar-mobile .hamburger--spin .hamburger-inner:before {
  transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
}
.navbar-wrapper .navbar-mobile .hamburger--spin .hamburger-inner:after {
  transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.navbar-wrapper .navbar-mobile .hamburger--spin.is-active .hamburger-inner {
  transform: rotate(225deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.navbar-wrapper .navbar-mobile .hamburger--spin.is-active .hamburger-inner:before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
}
.navbar-wrapper .navbar-mobile .hamburger--spin.is-active .hamburger-inner:after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.navbar-wrapper .navbar-mobile .navbar-nav {
  width: 100%;
  background-color: #f7f7f7;
  margin-top: 0.5rem;
  margin-bottom: auto;
  padding: 0;
  border-top: 1px solid #e5e5e5;
}
.navbar-wrapper .navbar-mobile .navbar-nav .nav-item {
  -webkit-box-flex: 0;
  flex: 0;
  text-align: left;
}
.navbar-wrapper .navbar-mobile .navbar-nav .nav-item a {
  font-size: 14px;
  color: #002677;
  font-family: "dinosaur", san-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.9rem 0 0.5rem 0;
}
.navbar-wrapper .navbar-mobile .navbar-nav .nav-item a:hover {
  color: #e10098;
}
.navbar-wrapper .navbar-mobile .navbar-nav .active > .nav-link, .navbar-wrapper .navbar-mobile .navbar-nav .show > .nav-link, .navbar-wrapper .navbar-mobile .navbar-nav .nav-link:focus {
  color: #e10098;
}
.navbar-wrapper .navbar-mobile .mobile-social-url {
  margin-top: 0.5rem;
  border-top: 1px solid #e5e5e5;
}
.navbar-wrapper .navbar-mobile .mobile-social-url ul {
  margin: 0.5rem 0;
}
.navbar-wrapper .navbar-mobile .mobile-social-url li:not(:first-child) {
  margin: 0 1rem;
}

/* Mobile Navigation */
.navbar-mobile .dropdown-menu {
  background-color: #f7f7f7;
  border: none;
  border-radius: 0;
  margin-bottom: 0.5rem;
}
.navbar-mobile .dropdown-menu a {
  text-align: left;
  letter-spacing: 1px;
}
.navbar-mobile .dropdown-menu a:hover {
  background-color: #f7f7f7;
  color: #e10098;
  background-image: none;
}

.navbar-wrapper.sticky .navbar-mobile {
  padding-left: 1rem;
  padding-right: 1rem;
}
.navbar-wrapper.sticky .navbar-mobile .dropdown-menu {
  background-color: #f7f7f7 !important;
  border: none;
  border-radius: 0;
}

/* Input Forms & Button */
/* Input */
input,
textarea,
input:hover,
input:focus,
textarea:hover,
textarea:focus,
input.form-control,
textarea.form-control,
input.form-control:hover,
input.form-control:focus,
textarea.form-control:hover,
textarea.form-control:focus {
  background: transparent !important;
  border: 0;
  border-bottom: 2px solid #e10098 !important;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
  margin: 0.5rem 0;
  outline: 0;
  box-shadow: none !important;
}

input.form-control::placeholder,
textarea.form-control::placeholder {
  color: #545454;
  font-family: "Mukta", san-serif;
  font-size: 16px;
}

.form-check {
  margin: 1rem 0;
}

button.btn {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098;
  background-color: #f7f7f7;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  border: 1px solid #e10098 !important;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
button.btn:focus {
  outline: none;
  box-shadow: none;
}
button.btn:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-style: solid;
  top: 5px;
  right: -5px;
}

a.btn {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098;
  background-color: #f7f7f7;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  margin-left: 1rem;
  border: 1px solid #e10098;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
a.btn:focus {
  outline: none;
  box-shadow: none;
}
a.btn:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-style: solid;
  top: 5px;
  right: -5px;
}

button.btn-coming-soon {
  padding: 0.5rem 1rem;
}

.btn-animated {
  color: #f7f7f7;
  transition-property: color;
  transition-duration: 0.5s;
}
.btn-animated:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e10098;
  color: #f7f7f7;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.btn-animated:hover {
  color: #f7f7f7;
}
.btn-animated:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

button.btn-search {
  font-family: "Mukta", san-serif;
  font-weight: normal;
  font-size: 16px;
  color: #e10098;
  background-color: #f7f7f7;
  padding: 0.2rem 0.5rem;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  outline: none;
}

input.input-search {
  border-bottom: 2px solid transparent !important;
  outline: none;
  text-align: right;
}

input.input-search,
input.input-search:focus {
  color: #e10098;
  font-family: "dinosaur", san-serif;
  border: 0;
  border-bottom: 2px solid #e10098;
}

input.input-search::placeholder {
  color: #e10098;
  font-family: "dinosaur", san-serif;
  text-transform: uppercase;
  text-align: right;
}

.mobile-search input {
  width: 100% !important;
}
.mobile-search input::placeholder {
  text-align: left;
}

button.sort-button {
  border: 1px solid #C4C4C4;
  color: #545454;
}
button.sort-button:after {
  content: none;
}
button.sort-button:hover {
  border: 1px solid #e10098;
  color: #545454;
}

.dropdown-menu {
  background: #f7f7f7;
  border: 1px solid #C4C4C4;
  border-radius: 0;
  color: #e10098;
  padding: 0;
  font-size: 16px;
  z-index: 6;
}
.dropdown-menu .dropdown-item {
  color: #e10098;
  padding: 0.75rem 1.5rem;
}
.dropdown-menu .dropdown-item:hover {
  color: #fff;
  background: #e10098;
}

button.shopify-buy__btn {
  width: 100%;
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  background-color: #e10098;
  padding: 0.5rem 2rem;
  border: 1px solid #e10098;
  border-radius: 0;
  overflow: visible;
  outline: none;
  color: white;
  margin: 0 0 2rem;
}

/* Registration Forms */
.registration {
  border: 0;
  width: 50%;
  margin: auto;
}
.registration form div {
  display: block;
}
.registration form input {
  display: inline-block;
  border: 1px #e5e5e5 solid !important;
  display: block;
  padding: 0.5rem;
}

/* Web Comics */
/* Webcomics Section */
.rounded-circle {
    aspect-ratio: 1/1;     /* selalu kotak */
    width: 100%;           /* ikuti lebar parent */
    border-radius: 50%;
    object-fit: cover;
}
section.section-webcomics p {
  margin-bottom: 1rem;
}
section.section-webcomics .webcomics-card {
  margin: 20px 0;
}
section.section-webcomics .webcomics-read-all {
  font-family: "dinosaur", san-serif;
  margin-top: 1rem;
}
section.section-webcomics .webcomics-read-all a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-webcomics .webcomics-read-all a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}

section.section-webcomics .webcomics-image:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 104%;
  width: 80%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 0;
  right: -8px;
}
section.section-webcomics .webcomics-cover {
  width: 100%;
  height: 200px;
}
section.section-webcomics .webcomics-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  position: relative;
  overflow: visible;
  margin-bottom: 20px;
}

@media (max-width: 520px) {

  section.section-webcomics .webcomics-cover {
    width: 100%;
    height: auto;   /* biar proporsional */
    object-fit: contain; /* jaga proporsi */
    left: -24px;
  }
  section.section-webcomics .webcomics-image {
    height: auto;   /* biar ikut tinggi gambar */
  }
  
  section.section-webcomics .webcomics-image:after {
      content: "";
      color: #e10098;
      position: absolute;
      height: 108%;
      width: 80%;
      border: 0;
      border-right-width: 2px;
      border-bottom-width: 2px;
      border-style: solid;
      top: 0;
      right: -8px;
    }
}

section.section-webcomics .webcomics-image-hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 200px;
  z-index: 2;
  background: url(/wp-content/themes/differenceengine_web/assets/css/../images/DottedOverlay.svg);
  opacity: 0;
}
section.section-webcomics .webcomics-image-hover:hover {
  opacity: 0.5;
  transition: 0.5s ease;
}
section.section-webcomics .webcomics-body .webcomics-title a {
  color: #002677;
}
section.section-webcomics .webcomics-body .webcomics-text {
  font-family: "Mukta", san-serif;
  font-size: 16px;
}
section.section-webcomics .webcomics-body .webcomics-read a {
  font-family: "dinosaur", san-serif;
  color: #e10098;
}
section.section-webcomics .webcomics-body .webcomics-read a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-webcomics .webcomics-body .webcomics-read a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}

.custom-tab-navigation {
    display: flex;
    gap: 10px;
    border-bottom: 2px solid #e0e0e0;
    padding-left: 0;
    margin-bottom: 20px;
    list-style: none;
}

.custom-tab-navigation .nav-item {
    margin-bottom: -1px;
}

.custom-tab-navigation .nav-link {
    display: block;
    padding: 10px 15px;
    color: #545454;
    background-color: transparent;
    border-bottom: 5px solid #e10098;
    border-radius: 0;
    text-transform: uppercase;
    font-family: "dinosaur", san-serif;
    height: 50px;
}

.custom-tab-navigation .nav-link:hover {
    background-color: #eaeaea;
    color: #000;
}

.custom-tab-navigation .nav-link.active {
    color: #545454;
    background-color: transparent;
    border-bottom: 5px solid #e10098;
}

/* Breakpoint SM */
/* Breakpoint for iPhoneSE (portrait) */
/* Single Webcomic */
.webcomic-banner-cover {
  width: 100%;
  max-width: 1200px;
}
.webcomic-banner-cover .webcomic-banner-image {
  object-position: left;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 480;
}

section.section-webcomic-single p {
  margin-bottom: 1rem;
}

.webcomic-chapters-wrapper p {
  margin-bottom: 1rem;
}
.webcomic-chapters-wrapper .webcomic-chapter:first-child {
  border-top: 1px solid #e5e5e5;
}
.webcomic-chapters-wrapper .webcomic-chapter {
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-cover {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body {
  padding-left: 1rem;
  padding-top: 1rem;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body .webcomic-title .chapter-no {
  color: #545454;
  font-family: "Mukta", san-serif;
  font-size: 16px;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body .webcomic-title .chapter-title {
  font-size: 18px;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body .chapter-read {
  font-family: "dinosaur", san-serif;
  margin-top: 1.1rem;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body .chapter-read a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.webcomic-chapters-wrapper .webcomic-chapter .chapter-body .chapter-read a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}

/* Breakpoint SM */
@media (max-width: 991px) {
  /* Single Webcomic */
  .sidebar {
    border-left: 0;
    padding: 0;
  }

  .webcomic-chapters-wrapper .webcomic-chapter .chapter-body {
    padding-left: 0;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
@media only screen and (max-width: 320px) {
  .share-buttons .list-inline-item:not(:last-child) {
    margin-right: 0;
  }
}

@media only screen and (max-width: 768px) {
/* Homepage Banner */
    section.section-carousel .home-carousel .carousel-bottom {
      height: 37px;
    }
    
    section.section-carousel .home-carousel .carousel-bottom .carousel-title a {
      font-size: 14px;
    }
    
    section.section-carousel .home-carousel .carousel-bottom .carousel-control-icon {
      font-size: 16px;
    }
    
    section.section-carousel .home-carousel .carousel-bottom .carousel-control {
      margin: 0.6rem 0;
    }

/* Home Comic/Product Slide Mobile*/
    .home-comic-slide .wrap-view-all-carousel{
        margin-top:8px;
        margin-bottom:8px;
    }
    .home-comic-slide .wrap-post-price{
        margin-left: 0 !important;
        text-align: center !important;
    }

}

/* Webcomics Chapter */
/* Webcomic Chapter Header */
body.webcomic-chapter-read {
  background-color: white;
}
body.webcomic-chapter-read .container-fluid:first-child {
  padding: 0;
}

.webcomic-chapter-header-web,
.webcomic-chapter-header-mobile {
  color: #002677;
  z-index: 3;
  background-color: #f7f7f7;
}

.webcomic-chapter-header-web .header-logo {
  height: 55px;
  padding: 5px;
  margin-top: 0.45rem;
}
.webcomic-chapter-header-web .chapter-title {
  margin-top: 1.5rem;
}
.webcomic-chapter-header-web .pagination {
  margin-top: 1rem;
}
.webcomic-chapter-header-web .pagination button.chapter-no {
  background-color: #f7f7f7;
  color: #002677;
  padding: 0 2rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  outline: none;
  cursor: pointer;
}
.webcomic-chapter-header-web .pagination button.chapter-no:focus {
  outline: none;
  box-shadow: none;
}
.webcomic-chapter-header-web .pagination .chapter-pg {
  position: relative;
  display: inline-block;
  padding: 0.45rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  background-color: transparent;
  border: 0;
}
.webcomic-chapter-header-web .pagination .page-link {
  background-color: transparent;
  color: #B2B2B2;
  border: 0;
}
.webcomic-chapter-header-web .pagination .page-link:focus, .webcomic-chapter-header-web .pagination .page-link:hover {
  color: #e10098;
}
.webcomic-chapter-header-web .pagination .page-item.disabled .page-link {
  color: #e5e5e5;
}

.webcomic-chapter-header-mobile a.homeLink {
  color: #B2B2B2;
}
.webcomic-chapter-header-mobile [class*=col-] {
  padding-top: 1rem;
}
.webcomic-chapter-header-mobile button.chapter-no {
  background-color: #f7f7f7;
  color: #002677;
  padding: 0 2rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  outline: none;
  cursor: pointer;
}
.webcomic-chapter-header-mobile button.chapter-no:focus {
  outline: none;
  box-shadow: none;
}

section.section-webcomic-content {
  margin: 0;
  border: 0;
}
section.section-webcomic-content .webcomic-share {
  margin: 3rem 0;
}

.webcomic-chapter-bar-top,
.webcomic-chapter-bar-bottom {
  background: #f7f7f7;
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}
.webcomic-chapter-bar-top a,
.webcomic-chapter-bar-bottom a {
  color: #545454;
}
.webcomic-chapter-bar-top .toggle-bar,
.webcomic-chapter-bar-bottom .toggle-bar {
  background-color: white;
}
.webcomic-chapter-bar-top .toggle-bar .toggle-button,
.webcomic-chapter-bar-bottom .toggle-bar .toggle-button {
  background-color: #f7f7f7;
  color: #B2B2B2;
  padding: 0 2rem;
  border: 0;
  border-radius: 0;
  overflow: visible;
  outline: none;
  cursor: pointer;
}
.webcomic-chapter-bar-top .toggle-bar .toggle-button:focus,
.webcomic-chapter-bar-bottom .toggle-bar .toggle-button:focus {
  outline: none;
  box-shadow: none;
}
.webcomic-chapter-bar-top .carousel-inner .carousel-item.active,
.webcomic-chapter-bar-top .carousel-inner .carousel-item-next,
.webcomic-chapter-bar-top .carousel-inner .carousel-item-prev,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item.active,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-next,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-prev {
  display: flex;
}
.webcomic-chapter-bar-top .carousel-inner .carousel-item-right.active,
.webcomic-chapter-bar-top .carousel-inner .carousel-item-next,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-right.active,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-next {
  transform: translateX(0%);
}
.webcomic-chapter-bar-top .carousel-inner .carousel-item-left.active,
.webcomic-chapter-bar-top .carousel-inner .carousel-item-prev,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-left.active,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-prev {
  transform: translateX(0%);
}
.webcomic-chapter-bar-top .carousel-inner .carousel-item-right,
.webcomic-chapter-bar-top .carousel-inner .carousel-item-left,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-right,
.webcomic-chapter-bar-bottom .carousel-inner .carousel-item-left {
  transform: translateX(0);
}
.webcomic-chapter-bar-top .carousel-control,
.webcomic-chapter-bar-bottom .carousel-control {
  margin: 4rem 0;
}
.webcomic-chapter-bar-top .carousel-control-icon,
.webcomic-chapter-bar-bottom .carousel-control-icon {
  color: #545454;
  font-size: 20px;
}
.webcomic-chapter-bar-top .chapter-card,
.webcomic-chapter-bar-bottom .chapter-card {
  padding-top: 1.5rem;
  padding-bottom: 1rem;
}
.webcomic-chapter-bar-top .chapter-card .chapter-cover,
.webcomic-chapter-bar-bottom .chapter-card .chapter-cover {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.webcomic-chapter-bar-top .chapter-card .chapter-image,
.webcomic-chapter-bar-bottom .chapter-card .chapter-image {
  object-fit: cover;
  object-position: left;
  width: 100%;
  height: 100%;
}
.webcomic-chapter-bar-top .chapter-card .chapter-body,
.webcomic-chapter-bar-bottom .chapter-card .chapter-body {
  padding-left: 1rem;
  padding-top: 1rem;
}
.webcomic-chapter-bar-top .chapter-card .chapter-body .webcomic-title .chapter-no,
.webcomic-chapter-bar-bottom .chapter-card .chapter-body .webcomic-title .chapter-no {
  font-family: "Mukta", san-serif;
  font-size: 16px;
  margin-bottom: 0.5rem;
}
.webcomic-chapter-bar-top .chapter-card .chapter-body .webcomic-title .chapter-title,
.webcomic-chapter-bar-bottom .chapter-card .chapter-body .webcomic-title .chapter-title {
  font-size: 18px;
}
.webcomic-chapter-bar-top .chapter-card.active .chapter-image,
.webcomic-chapter-bar-bottom .chapter-card.active .chapter-image {
  border: 2px solid #e10098;
}
.webcomic-chapter-bar-top .chapter-card.active .chapter-body .webcomic-title .chapter-no,
.webcomic-chapter-bar-bottom .chapter-card.active .chapter-body .webcomic-title .chapter-no {
  color: #e10098;
}
.webcomic-chapter-bar-top .chapter-card.active .chapter-body .webcomic-title .chapter-title,
.webcomic-chapter-bar-bottom .chapter-card.active .chapter-body .webcomic-title .chapter-title {
  color: #e10098;
}

/* Breakpoint SM */
/* Breakpoint for iPhoneSE (portrait) */
/* Comics */
/* Home Comic/Product Slide */
.home-comic-slide {
  flex: 0 0 96%;
  max-width: 96%;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
}
.home-comic-slide .comic-scroll {
  overflow-x: scroll;
  scrollbar-width: none;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}
.home-comic-slide .comic-scroll ::-webkit-scrollbar {
  width: 0;
  /* Remove scrollbar space */
  background: transparent;
  /* Optional: just make scrollbar invisible */
}

.home-comic-slide-left {
  padding-left: 0;
  padding-right: 5px;
}

.home-comic-slide-right {
  padding-left: 5px;
  padding-right: 0;
}

.home-comic-slide-left, .home-comic-slide-right {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex: 0 0 2%;
  max-width: 2%;
}
.home-comic-slide-left .home-comic-slide-left-button, .home-comic-slide-left .home-comic-slide-right-button, .home-comic-slide-right .home-comic-slide-left-button, .home-comic-slide-right .home-comic-slide-right-button {
  padding: 1px 7px 2px;
  background-color: transparent;
  color: #C1C1C1;
  border-width: 0;
  border-style: none;
  border-color: transparent;
  border-image: initial;
  cursor: pointer;
}
.home-comic-slide-left .home-comic-slide-left-button, .home-comic-slide-right .home-comic-slide-left-button {
  text-align: left;
}
.home-comic-slide-left .home-comic-slide-right-button, .home-comic-slide-right .home-comic-slide-right-button {
  text-align: right;
}

.home-comic-slide .wrap-view-all-carousel{
    margin-top:-4px;
    margin-bottom:13px;
}

.home-comic-slide .wrap-post-price{
    margin-left: -14px;
    text-align: left;
    margin-bottom: 16px;
    margin-top: -8px;
}

/* Comic/Product Pills */
ul.nav-pills.comics-pill {
  min-height: 60px;
  margin: 1rem 0;
  flex-wrap: nowrap;
}
ul.nav-pills.comics-pill a.nav-link, ul.nav-pills.comics-pill a.nav-link.active {
  height: 60px;
  padding: 0 1.2rem;
  border-radius: 0;
  color: #fff !important;
  text-transform: uppercase;
  font-family: "dinosaur", san-serif;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
ul.nav-pills.comics-pill a.nav-link.all {
  background-color: #002677;
  position: relative;
}
ul.nav-pills.comics-pill a.nav-link.active.all:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 15px solid #002677;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 1;
}
ul.nav-pills.comics-pill a.nav-link.children {
  background-color: #ED184D;
  position: relative;
}
ul.nav-pills.comics-pill a.nav-link.active.children:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 15px solid #ED184D;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 1;
}
ul.nav-pills.comics-pill a.nav-link.young-adults {
  background-color: #F4C32E;
  position: relative;
}
ul.nav-pills.comics-pill a.nav-link.active.young-adults:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 15px solid #F4C32E;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 1;
}
ul.nav-pills.comics-pill a.nav-link.adults {
  background-color: #FF8A80;
  position: relative;
}
ul.nav-pills.comics-pill a.nav-link.active.adults:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
  margin: 0 auto;
  width: 0;
  height: 0;
  border-top: 15px solid #FF8A80;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  z-index: 1;
}

/* Comic/Product Pills */
ul.nav-pills.comics-tag-pill {
  margin: 2rem 0;
  min-height: 50px;
  border-bottom: 1px solid #C4C4C4;
}
ul.nav-pills.comics-tag-pill a.nav-link, ul.nav-pills.comics-tag-pill a.nav-link.active {
  border-radius: 0;
  text-transform: uppercase;
  font-family: "dinosaur", san-serif;
  height: 42px;
}
ul.nav-pills.comics-tag-pill a.nav-link {
  color: #959595;
}
ul.nav-pills.comics-tag-pill a.nav-link.active {
  color: #545454;
  background-color: transparent;
  border-bottom: 5px solid #e10098;
}

/* Comics Section */
section.section-comics p {
  margin-bottom: 1rem;
}
section.section-comics .comics-card {
  margin: 20px 0;
}
section.section-comics .comics-read-all {
  font-family: "dinosaur", san-serif;
  margin-top: 1rem;
}
section.section-comics .comics-read-all a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-comics .comics-read-all a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}

section.section-comics .comics-image {
  overflow: hidden;
  width: 100%;
  height: 350px;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

section.section-comics .comics-image:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
    z-index: 10;
    position: relative;
}

section.section-comics .comics-cover {
  width: 100%;
  height: 100%;
}

section.section-comics .comics-body .comics-title {
  height: 100%;
  text-align: left;
  text-transform: capitalize;
}
section.section-comics .comics-body .comics-title a {
  color: #002677;
}

/* Breakpoint SM */
@media (max-width: 991px) {
    
  /* Home Comic/Product Slide */
  .home-comic-slide {
    flex: 0 0 84%;
    max-width: 84%;
  }

  .home-comic-slide-left, .home-comic-slide-right {
    flex: 0 0 8%;
    max-width: 8%;
  }

  .home-comic-slide-left {
    padding-left: 0;
    padding-right: 0;
  }

  .home-comic-slide-right {
    padding-left: 0;
    padding-right: 0;
  }

  ul.nav-pills.comics-tag-pill {
    margin: 2rem 0;
    min-height: 50px;
    border-bottom: 0;
  }

  /* Comic Section */
  section.section-comics p {
    margin-bottom: 1rem;
  }
  section.section-comics .comics-card {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
  }
  section.section-comics .comics-image {
    height: 250px;
  }
  section.section-comics .comics-cover {
    height: 100%;
    object-fit: contain;
  }
  section.section-comics .comics-body .comics-title {
    height: 100%;
    overflow: hidden;
    font-size: 20px;
    text-align: center;
  }
}
/* Breakpoint for All mobile */
@media only screen and (max-width: 520px) {
  ul.nav-pills.comics-pill {
    flex-wrap: wrap; 
  }

  ul.nav-pills.comics-tag-pill {
    margin: 2rem 0;
    min-height: 50px;
    border-bottom: 0;
    display:none !important;
  }

  section.section-comics p {
    margin-bottom: 1rem;
  }
  section.section-comics .comics-card {
    margin: 0px 0px 8px 0px;
    padding-left: 5px;
    padding-right: 5px;
  }
  section.section-comics .comics-image {
    height: 180px;
  }
  section.section-comics .comics-cover {
    height: 100%;
    object-fit: contain;
  }
  section.section-comics .comics-body .comics-title {
    height: 100%;
    overflow: hidden;
    text-align: center;
  }
  section.section-comics .comics-body div {
    padding: 0;
  }
}
/* Single Comic */
section.section-comic-single p {
  margin-bottom: 1rem;
}
section.section-comic-single .comic-breadcrumb .breadcrumb {
  background-color: #f7f7f7;
  border-radius: 0;
  padding: 0.75rem 0;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}
section.section-comic-single .comic-breadcrumb .breadcrumb .breadcrumb-item {
  margin-right: 0.5rem;
}
section.section-comic-single .comic-breadcrumb .breadcrumb .breadcrumb-item:before {
  margin-right: 0.5rem;
}
section.section-comic-single .comic-title {
  color: #002677;
  margin-bottom: 2rem;
}
section.section-comic-single .comic-image {
  overflow: hidden;
  width: 100%;
  height: 500px;
  margin-bottom: 2rem;
}
section.section-comic-single .comic-cover {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
section.section-comic-single .comic-thumbnail {
  margin-bottom: 1.5rem;
}
section.section-comic-single .comic-thumbnail .comic-thumbnail-image {
  overflow: hidden;
  width: 100%;
  height: 60px;
}
section.section-comic-single .comic-thumbnail .comic-thumbnail-cover {
  width: 100%;
  height: 60px;
  object-fit: cover;
}
section.section-comic-single .comic-meta-data {
  list-style: none;
  padding: 0;
}
section.section-comic-single .comic-meta-data .attribute-name {
  font-weight: bolder;
  margin-right: 0.2rem;
}
section.section-comic-single .comic-description {
  margin-bottom: 1.5rem;
}
section.section-comic-single .comic-description h3 {
  margin: 2rem 0;
}
section.section-comic-single .single_add_to_cart_button {
  margin-bottom: 2rem;
}
section.section-comic-single .buy-accordion {
  margin-bottom: 2rem;
}
section.section-comic-single .buy-accordion .buy-card {
  border-radius: 0;
  border: 1px #e10098 solid;
}
section.section-comic-single .buy-accordion .buy-card:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-style: solid;
  top: 5px;
  right: -5px;
  z-index: -1;
}
section.section-comic-single .buy-accordion .buy-card .card-header {
  padding: 0;
  margin-bottom: 0;
  background-color: #f7f7f7;
  border-bottom: 0;
  z-index: 1;
}
section.section-comic-single .buy-accordion .buy-card .card-header .buy-btn {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098;
  background-color: #f7f7f7;
  padding: 0.2rem 0;
  margin: 0.5rem 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
section.section-comic-single .buy-accordion .buy-card .buy-card-body {
  background: #f7f7f7;
  border-top: 2px #e10098 solid;
  padding: 0.5rem 1.25rem;
}
section.section-comic-single .buy-accordion .buy-card .buy-card-body .buy-image {
  overflow: hidden;
  width: 100%;
  padding: 0.5rem 0;
}
section.section-comic-single .buy-accordion .buy-card .buy-card-body .buy-cover {
  width: 100%;
  height: 20px;
  object-fit: contain;
}
section.section-comic-single .buy-accordion .buy-card .buy-card-body .buy-text {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  font-family: "dinosaur", san-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  color: #545454;
}
section.section-comic-single .buy-accordion .buy-card .buy-card-body .buy-text a {
  color: #545454;
}
section.section-comic-single ul.nav-pills.single-comic-tab {
  margin: 3rem 0;
  height: 50px;
  border-bottom: 1px solid #C4C4C4;
}
section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link, section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link.active {
  border-radius: 0;
  text-transform: uppercase;
  font-family: "dinosaur", san-serif;
  height: 50px;
}
section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link {
  color: #959595;
  padding: 0;
  margin-right: 2rem;
}
section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link.active {
  color: #545454;
  background-color: transparent;
  border-bottom: 5px solid #e10098;
}
section.section-comic-single .creator-card {
  margin-bottom: 2rem;
}
section.section-comic-single .creator-card .creator-image {
  overflow: visible;
  margin-bottom: 2rem;
}
section.section-comic-single .creator-card .creator-image:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 235px;
  width: 95%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 20px;
  right: -5px;
}
section.section-comic-single .creator-card .creator-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
section.section-comic-single .character-card {
  margin-bottom: 2rem;
}
section.section-comic-single .character-card .character-image {
  height: 300px;
  overflow: hidden;
  margin-bottom: 1rem;
}
section.section-comic-single .character-card .character-cover {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
section.section-comic-single .activity-card {
  margin-bottom: 2rem;
}
section.section-comic-single .activity-card .activity-image {
  position: relative;
  height: 250px;
  overflow: visible;
  margin-bottom: 1.5rem;
}
section.section-comic-single .activity-card .bottom-left {
  height: 40px;
  width: 40px;
  background-color: #e10098;
  position: absolute;
  bottom: 0;
  font-size: 10px;
  color: white;
  padding: 2%;
  text-align: center;
}
section.section-comic-single .activity-card .activity-cover {
  width: 100%;
  height: 250px;
  object-fit: cover;
}
section.section-comic-single .video-card {
  margin-bottom: 2rem;
}
section.section-comic-single .video-card .video-body {
  margin: 1rem 0;
}

/* Product Thumbnail */
    .ekko-lightbox-nav-overlay a {
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5); /* optional: semi-transparent background */
        padding: 10px;
        z-index: 1050;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .ekko-lightbox-nav-overlay a:first-child {
        left: -80px;
        position: absolute;
    }
    
    .ekko-lightbox-nav-overlay a:last-child {
        right: -80px;
        position: absolute;
    }   

/* Breakpoint SM */
@media (max-width: 991px) {
  section.section-comic-single .buy-card {
    margin-bottom: 2rem;
  }
  section.section-comic-single .buy-card .buy-body {
    margin-bottom: 1rem;
  }
  section.section-comic-single .buy-card .buy-body .buy-image {
    overflow: hidden;
    width: 100%;
    height: 40px;
  }
  section.section-comic-single .buy-card .buy-body .buy-cover {
    width: 100%;
    height: 40px;
    object-fit: contain;
  }
  section.section-comic-single ul.nav-pills.single-comic-tab {
    justify-content: space-evenly;
  }
  section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link {
    margin-right: 0;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
@media only screen and (max-width: 320px) {
  section.section-comic-single .creator-card .creator-body {
    margin-top: 1.5rem;
  }
  section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link, section.section-comic-single ul.nav-pills.single-comic-tab a.nav-link.active {
    font-size: 14px;
  }
}
/* Blog */
/* Blog Section */
section.section-blog p {
  margin-bottom: 1rem;
}
section.section-blog .blog-carousel {
  margin: 20px 0;
  overflow: hidden;
}
section.section-blog .carousel-indicators {
  position: absolute;
  right: 0;
  margin-bottom: 0;
  bottom: 0;
  left: 12px;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  justify-content: left;
  margin-right: 0;
  margin-left: 0;
}
section.section-blog .blog-carousel-control {
  position: absolute;
  top: 0;
  bottom: 100px;
  width: 15%;
  color: #e10098;
  opacity: 1;
}
section.section-blog .carousel-indicators li {
  width: 10px;
  height: 10px;
  background-color: #f7f7f7;
  border: 1px solid #002677;
  border-radius: 100%;
  cursor: pointer;
}
section.section-blog .carousel-indicators li.active {
  background-color: #002677;
  border: 1px solid #002677;
}
section.section-blog .blog-read-all {
  margin-top: 1rem;
  font-family: "dinosaur", san-serif;
}
section.section-blog .blog-read-all a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-blog .blog-read-all a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}
section.section-blog .blog-card-big {
  /* CSS for 7:5 Ratio Images */
}
section.section-blog .blog-card-big .blog-image {
  position: relative;
  height: 400px;
  overflow: visible;
  margin-bottom: 20px;
}
section.section-blog .blog-card-big .blog-cover {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
section.section-blog .blog-card-big .blog-image-hover:hover {
  transition: 1s ease;
}
section.section-blog .blog-card-big .blog-image-75 {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 71.43% 0 0 0;
}
section.section-blog .blog-card-big .blog-cover-75 {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section.section-blog .blog-card-big .blog-image-75:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url(/wp-content/themes/differenceengine_web/assets/css/../images/DottedOverlay.svg);
}
section.section-blog .blog-card-big .blog-image-75:hover:after {
  opacity: 0.5;
  transition: 0.5s ease;
}
section.section-blog .blog-card-big .blog-image-hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 400px;
  z-index: 5;
}
section.section-blog .blog-card {
  margin: 2rem 0;
  /* CSS for 7:5 Ratio Images */
}
section.section-blog .blog-card .blog-image {
  position: relative;
  height: 200px;
  overflow: visible;
  margin-bottom: 20px;
}
section.section-blog .blog-card .blog-image-75::before {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 80%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 8px;
  right: -8px;
}
section.section-blog .blog-card .blog-cover {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
section.section-blog .blog-card .blog-image-hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 200px;
  z-index: 5;
}
section.section-blog .blog-card .blog-image-hover:hover {
  transition: 1s ease;
}
section.section-blog .blog-card .blog-image-75 {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 71.43% 0 0 0;
  margin-bottom: 0.75rem;
}
section.section-blog .blog-card .blog-cover-75 {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section.section-blog .blog-card .blog-image-75:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: url(/wp-content/themes/differenceengine_web/assets/css/../images/DottedOverlay.svg);
}
section.section-blog .blog-card .blog-image-75:hover:after {
  opacity: 0.5;
  transition: 0.5s ease;
}
section.section-blog .blog-body .blog-date {
  font-family: "Mukta", san-serif;
}
section.section-blog .blog-body .blog-title a {
  color: #002677;
}
section.section-blog .blog-body .blog-text {
  font-family: "Mukta", san-serif;
  font-size: 16px;
}
section.section-blog .blog-body .blog-read a {
  font-family: "dinosaur", san-serif;
  color: #e10098;
}
section.section-blog .blog-body .blog-read a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-blog .blog-body .blog-read a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}

/* Breakpoint SM */
@media (max-width: 991px) {
  section.section-blog .blog-carousel .carousel-item {
    min-height: 540px;
  }
  section.section-blog .carousel-indicators {
    left: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
/* Single Blog Section */
section.section-blog-single {
  border: 0;
}
section.section-blog-single .featured-blog-image {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 40% 0 0 0;
  overflow: hidden;
}
section.section-blog-single .featured-blog-cover {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section.section-blog-single .post-heading {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
section.section-blog-single p {
  font-family: "Mukta", san-serif;
  margin-bottom: 1rem;
}

/* Breakpoint SM */
@media (max-width: 991px) {
  section.section-blog-single img {
    width: 100%;
    height: auto;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
@media only screen and (max-width: 320px) {
  section.section-blog-single img {
    width: 100%;
    height: auto;
  }
  
  .ekko-lightbox-nav-overlay a {
        width: 30px;
        height: 30px;
        padding-bottom: 14px;
    }
  
  .ekko-lightbox-nav-overlay a:first-child {
        left: -10px;
        position: absolute;
    }
    
    .ekko-lightbox-nav-overlay a:last-child {
        right: -10px;
        position: absolute;
    }   
}
/* For Educators */
/* For Educators Section */
section.section-for-educators p {
  margin-bottom: 1rem;
}
section.section-for-educators .for-educators-card {
  margin: 20px 0;
}
section.section-for-educators .for-educators-read-all {
  margin-top: 1rem;
  font-family: "dinosaur", san-serif;
}
section.section-for-educators .for-educators-read-all a i {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section.section-for-educators .for-educators-read-all a:hover i {
  position: relative;
  transform: translateX(6px);
  -webkit-transform: translateX(6px);
}
section.section-for-educators .for-educators-image {
  position: relative;
  height: 200px;
  overflow: visible;
  margin-bottom: 20px;
}
section.section-for-educators .for-educators-image:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 80%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 8px;
  right: -8px;
}
section.section-for-educators .for-educators-cover {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section.section-for-educators .for-educators-image {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 71.43% 0 0 0;
  overflow: visible;
}
section.section-for-educators .for-educators-image-hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: url(/wp-content/themes/differenceengine_web/assets/css/../images/DottedOverlay.svg);
  opacity: 0;
}
section.section-for-educators .for-educators-image-hover:hover {
  opacity: 0.5;
  transition: 0.5s ease;
}
section.section-for-educators .for-educators-body .for-educators-title a,
section.section-for-educators .for-educators-body .for-educators-title a:hover,
section.section-for-educators .for-educators-body .for-educators-title a:visited {
  color: #002677;
}
section.section-for-educators .for-educators-body .for-educators-text {
  font-family: "Mukta", san-serif;
  font-size: 16px;
}
section.section-for-educators .for-educators-body .for-educators-read a {
  color: #e10098;
  font-family: "dinosaur", san-serif;
}

/* Breakpoint SM */
/* Breakpoint for iPhoneSE (portrait) */
/* Single For Educators Section */
section.section-for-educators-single {
  border: 0;
}
section.section-for-educators-single .post-heading {
  margin-top: 1rem;
  margin-bottom: 2rem;
}
section.section-for-educators-single p {
  font-family: "Mukta", san-serif;
  margin-bottom: 1rem;
}

/* Breakpoint SM */
@media (max-width: 991px) {
  section.section-for-educators-single img {
    width: 100%;
    height: auto;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
@media only screen and (max-width: 320px) {
  section.section-for-educators-single img {
    width: 100%;
    height: auto;
  }
}
/* About Page */
.custom-area {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.behind-the-team {
  margin-bottom: 3rem;
}
.behind-the-team .team-card {
  margin-bottom: 1rem;
  padding-right: 1rem;
}
.behind-the-team .team-card .team-role {
  color: #002677;
}
.behind-the-team .team-card .team-image {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: visible;
  margin-bottom: 2rem;
}
.behind-the-team .team-card .team-image:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 104%;
  width: 80%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 0;
  right: -8px;
}
.behind-the-team .team-card .team-image .team-cover {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  visibility: visible;
  opacity: 1;
  z-index: 2;
}
.behind-the-team .team-card .team-image .team-cover-hover {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.behind-the-team .team-card .team-image:hover .team-cover {
  opacity: 0;
}
/* WooCommerce */
.woocommerce-notices-wrapper {
  margin-right: auto;
  margin-left: auto;
}
.woocommerce-notices-wrapper p {
  padding: 0 12px !important;
}

@media (min-width: 576px) {
  .woocommerce-notices-wrapper {
    width: 540px;
  }
}
@media (min-width: 768px) {
  .woocommerce-notices-wrapper {
    width: 720px;
  }
}
@media (min-width: 992px) {
  .woocommerce-notices-wrapper {
    width: 960px;
  }
}
@media (min-width: 1200px) {
  .woocommerce-notices-wrapper {
    width: 1140px;
  }
}
.woocommerce-message {
  border-top-color: #e10098;
}

.woocommerce-message::before {
  content: "";
  color: #e10098;
}

.woocommerce-error,
.woocommerce-message {
  padding: 1rem;
  margin: 0 0 2em;
  position: relative;
  background-color: #f7f7f7;
  color: #545454;
  border-top: 3px solid #e10098;
  list-style: none outside;
  width: auto;
  word-wrap: break-word;
}

.woocommerce-info {
  padding: 1rem;
  margin: auto;
  position: relative;
  background-color: #f7f7f7;
  color: #545454;
  border-top: 0px solid #e10098;
  list-style: none outside;
  width: 15rem;
  word-wrap: break-word;
}

.woocommerce-error::before,
.woocommerce-message::before {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  margin-right: 0.5rem;
}

.woocommerce-info::before {
  display: none;
  position: relative;
  top: 0;
  left: 0;
  margin-right: 0.5rem;
}

.woocommerce table.shop_table {
  border: none;
  margin: 0 -1px 24px 0;
  text-align: left;
  width: 100%;
}
.woocommerce table.shop_table th {
  font-weight: 400;
  font-size: 14px;
  padding: 9px 12px;
  line-height: 1.5em;
  color: #545454;
}
.woocommerce table.shop_table tr {
  margin: 1rem 0 !important;
}
.woocommerce table.shop_table td {
  border-top: none;
  vertical-align: top;
}
.woocommerce table.shop_table tbody td {
  border-bottom: 1px solid #e5e5e5;
}
.woocommerce table.shop_table td.product-remove {
  vertical-align: middle;
  font-size: 1rem !important;
}
.woocommerce table.shop_table td.product-remove a, .woocommerce table.shop_table td.product-remove a:hover {
  color: #e10098 !important;
  background-color: white;
}
.woocommerce table.shop_table td.product-thumbnail {
  width: 10rem;
}
.woocommerce table.shop_table td.product-name {
  text-align: left;
}
.woocommerce table.shop_table td.product-name a {
  color: #002677;
  text-transform: uppercase;
}
.woocommerce table.shop_table td.product-price, .woocommerce table.shop_table td.product-subtotal {
  color: #e10098;
}
.woocommerce table.shop_table td.product-quantity input {
  color: #545454;
  border: 1px solid #C4C4C4 !important;
  box-sizing: border-box;
  border-radius: 4px;
  background: transparent !important;
  padding-left: 0;
  padding-right: 0;
  margin: 0.5rem 0;
  outline: 0;
  box-shadow: none !important;
  height: 2rem;
}
.woocommerce table.shop_table .cart_item {
  font-size: 24px;
}

.cart-image {
  overflow: hidden;
  width: 100%;
  height: 200px;
}
.cart-image img {
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}

.order td {
  vertical-align: middle !important;
}

.woocommerce table.cart td.actions .input-text {
  display: inline;
  width: initial;
  font-size: 14px;
  background: transparent !important;
  border: 1px solid #e10098 !important;
  padding: 0.19rem 2rem;
  margin: 0.5rem 0;
  outline: 0;
  box-shadow: none !important;
}

.woocommerce a.button {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098 !important;
  background-color: #f7f7f7 !important;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  border: 1px solid #e10098;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
.woocommerce a.button:focus {
  outline: none;
  box-shadow: none;
}
.woocommerce a.button:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  border-right-width: 4px;
  border-bottom-width: 4px;
  border-style: solid;
  top: 5px;
  right: -5px;
}
.woocommerce a.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e10098;
  color: #f7f7f7;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.woocommerce a.button:hover {
  color: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
}
.woocommerce a.button:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

.woocommerce a.button-without-border {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098 !important;
  background-color: #f7f7f7 !important;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  border: 1px solid #e10098;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
.woocommerce a.button-without-border:focus {
  outline: none;
  box-shadow: none;
}
.woocommerce a.button-without-border:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  border-right-width: 0;
  border-bottom-width: 0;
  border-style: solid;
  top: 0;
  right: 0;
}
.woocommerce a.button-without-border:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e10098;
  color: #f7f7f7;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.woocommerce a.button-without-border:hover {
  color: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
}
.woocommerce a.button-without-border:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

.coupon {
  float: none !important;
}

.woocommerce .cart .button {
  font-family: "dinosaur", san-serif;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  z-index: 1;
  cursor: pointer;
  color: #e10098 !important;
  background-color: #f7f7f7 !important;
  padding: 0.5rem 2rem;
  margin: 0.5rem 0;
  border: 1px solid #e10098;
  border-radius: 0;
  overflow: visible;
  outline: none;
}
.woocommerce .cart .button:focus {
  outline: none;
  box-shadow: none;
}
.woocommerce .cart .button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e10098;
  color: #f7f7f7;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  z-index: -1;
}
.woocommerce .cart .button:hover {
  color: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
}
.woocommerce .cart .button:hover:before {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66);
}

.woocommerce .woocommerce-customer-details address {
  border: none !important;
}

.woocommerce form .form-row label {
  color: #545454;
  font-style: normal;
  font-weight: normal;
}

.woocommerce-order-details__title {
  padding: 0 12px;
}

.privacy-checkbox .ur-label {
  display: none;
}
.privacy-checkbox ul {
  padding: 0;
}

.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 2em 0;
  text-align: left;
}
.woocommerce form.checkout_coupon input,
.woocommerce form.login input,
.woocommerce form.register input {
  display: inline-block;
  border: 1px #e5e5e5 solid !important;
  display: block;
  padding: 0.5rem;
}

section.section-login {
  width: 50%;
  margin: auto;
}
section.section-login .form-check {
  position: relative;
  display: block;
  padding-left: 0;
}
section.section-login .form-check-input {
  position: relative;
  margin-top: 0.3rem;
  margin-left: 0;
}

section.my-account-content ul {
  list-style-type: none;
  padding-left: 0;
  text-transform: uppercase;
}
section.my-account-content ul li {
  margin: 1rem 0;
}

.addresses div {
  margin-bottom: 1rem !important;
}

.woocommerce-address-fields p {
  display: block !important;
}
.woocommerce-address-fields p input {
  height: 3rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
  border: 1px #e5e5e5 solid !important;
  display: block;
  padding: 0.5rem;
}

.woocommerce-form .form-row {
  display: block !important;
}

.select2-container--default .select2-selection--single {
  background-color: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 0 !important;
  height: auto;
  padding: 5px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: unset;
  padding: 0 0.2rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

.select2-dropdown {
  border-radius: 0;
}
.select2-dropdown .select2-search__field {
  border: 1px solid #545454 !important;
}
.select2-dropdown .select2-results__options {
  padding: 0.3rem;
}
.select2-dropdown .select2-results__options .select2-results__option--highlighted {
  background-color: #e10098;
}

.woocommerce-billing-fields__field-wrapper p {
  display: block !important;
}

.woocommerce .form-row {
  display: block !important;
}

section.woocommerce-order-details table tfoot tr th {
  border-top: none !important;
  text-align: start !important;
}
section.woocommerce-order-details table tfoot tr td {
  border-top: none !important;
}

.order_details {
  font-weight: 100;
}

.wc-stripe-elements-field, .wc-stripe-iban-element-field {
  padding: 0.5rem;
}

/* Footer */
/* Footer */
.footer {
  margin-top: 3rem;
}
.footer .footer-text p {
  font-family: "Mukta", san-serif;
  margin-bottom: 1rem;
}
.footer .footer-copyright {
  margin: 2rem 0;
}
.footer .footer-copyright p {
  font-family: "Mukta", san-serif;
  font-size: 14px;
}

/* Return to top button */
#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 3;
  background: #e10098;
  width: 50px;
  height: 50px;
  text-decoration: none;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  border-radius: 35px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

#return-to-top:hover {
  bottom: 30px;
}

#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
  left: 16px;
  top: 13px;
  font-size: 19px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Subscribe Contact Form */
div.wpcf7-response-output {
  margin: 2rem 0;
  padding: 0;
  border: 0;
}

/* Contact Us Page */
section.section-contact {
  font-family: "Mukta", san-serif;
}
section.section-contact .contact-item i {
  color: #e10098;
}
section.section-contact .contact-us-social {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
section.section-contact .contact-us-social .contact-us-social-body {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Related Post */
section.related-post {
  border-top: 1px solid #e5e5e5;
  margin: 3rem 0;
}
section.related-post .row {
  margin-top: 1rem;
}
section.related-post .related-post-card .related-post-image {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: 71.43% 0 0 0;
  overflow: visible;
  margin-bottom: 20px;
}
section.related-post .related-post-card .related-post-image:after {
  content: "";
  color: #e10098;
  position: absolute;
  height: 103%;
  width: 80%;
  border: 0;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  top: 0;
  right: -8px;
}
section.related-post .related-post-card .related-post-cover {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
section.related-post .related-post-card .related-post-image-hover {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}
section.related-post .related-post-card .related-post-image-hover:hover {
  background: url(/wp-content/themes/differenceengine_web/assets/css/../images/DottedOverlay.svg);
  transition: 1s ease;
}
section.related-post .related-post-card .related-post-title a,
section.related-post .related-post-card .related-post-title a:hover,
section.related-post .related-post-card .related-post-title a:visited {
  color: #002677;
}

/* Font Awesome */
.fa-stack-1x {
  font-size: smaller;
}

/* Responsive Breakpoints */
/* Breakpoint SM */
@media (max-width: 991px) {
  section .section-title {
    margin-top: 0;
  }
}
/* Breakpoint for iPhoneSE (portrait) */
@media only screen and (max-width: 320px) {
  section .section-title {
    margin-top: 0;
  }
}
/*
 * Restore Bootstrap 3 "hidden" utility classes.
*/
/* Breakpoint XS */
@media (max-width: 575px) {
  .hidden-xs-down, .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up,
.hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px) {
  .hidden-sm-down, .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up,
.hidden-unless-xs, .hidden-unless-md, .hidden-unless-lg, .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-md-down, .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-lg, .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-lg-down, .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint XL */
@media (min-width: 1200px) {
  .hidden-xl-down,
.hidden-xs-up, .hidden-sm-up, .hidden-md-up, .hidden-lg-up, .hidden-xl-up,
.hidden-unless-xs, .hidden-unless-sm, .hidden-unless-md, .hidden-unless-lg {
    display: none !important;
  }
}

/*# Current File Updated by Asset CleanUp - Original Source Map: style.css.map */