/*------------------------------------*\
  #Root
\*------------------------------------*/

:root {
  --Primary-color: #1E7EBA;
  --Secondary-color: #083D5B;
  --Tertiary-color: #a09e62;
  --Accent-color: #D5E8F6;

  /* Button Color */
  --Button-color: #083D5B;
  --Button-hover-color: #07354f;

  --Text-color: #000;

  --Border-default: 1px solid #DCE2E6;

  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #000;
  --Grey-color: #F1F6FA;

  --Danger-color: #AB2840;
  --Danger-hover-color: #a1263c;
}

/*------------------------------------*\
#BASE
\*------------------------------------*/
/* Typography */
@font-face {
  font-family: BebasNue;
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/8/BebasNeue-Normal-700.ttf');
}

@font-face {
  font-family: 'Outfit';
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/8/Outfit-Light.ttf');
  font-weight: 400;
}

@font-face {
  font-family: 'Outfit';
  src: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/8/Outfit-Medium.ttf');
  font-weight: 500;
}

.step-title h2,
.title,
.content h1,
.content h2 {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
}

.subtitle,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
}

.title:not(span, label) {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  color: var(--Primary-color);
}

/* Buttons */
.catfish-button,
.button,
a {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
}

html:not(.page-dynamicproduct-editor) .catfish-button:not(.is-outlined) {
  color: var(--White-color);
}

.catfish-button,
.button {
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
}

a.link {
  display: flex;
  align-items: baseline;
}

a.link span:not(.icon) {
  font-weight: 500;
}

a.link:hover span:not(.icon) {
  text-decoration: underline;
  text-decoration-color: var(--Secondary-color);
  -moz-text-decoration-color: var(--Secondary-color);
}

a.link span {
  color: var(--Secondary-color);
}


html:not(.page-dynamicproduct-editor) .catfish-button:not(.is-danger, .is-outlined, #deleteall, #continueshoppingDummy) {
  background-color: var(--Button-color);

  &:hover,
  &:focus,
  &:active {
    background-color: var(--Button-hover-color);
    box-shadow: unset !important;
  }
}

.catfish-button.is-outlined {
  border-color: var(--Button-color);
  color: var(--Primary-color);

  &:focus {
    background-color: var(--Button-color);
    color: var(--White-color);
    box-shadow: unset;
    border-color: unset;
  }
}

p:not(.back-link)>a {
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: .3s;
  text-underline-offset: 0.25rem;

  &:hover {
    color: var(--Button-hover-color);
    text-decoration: underline !important;
  }
}

#deleteall {
  background-color: var(--Danger-color);

  &:hover {
    background-color: var(--Danger-hover-color);
  }
}

#continueshoppingDummy,
.is-outlined {
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  border-color: var(--Button-color);
  color: var(--Button-color);

  &:hover {
    border: 2px solid var(--Button-hover-color);
    background-color: var(--Button-hover-color) !important;
    color: #fff;
  }
}

/* Images */
.image img {
  opacity: 1;
  transition: opacity .3s;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
}

.image:hover img {
  opacity: .4;
}

/*------------------------------------*\
#UTILITIES
\*------------------------------------*/
.has-background-custom-1 {
  background-color: var(--Accent-color);
}

.border-top-bottom {
  border-top: var(--Border-default);
  border-bottom: var(--Border-default);
}

/*------------------------------------*\
#COMPONENTS
\*------------------------------------*/
/* Buttons */
a.button.is-primary {
  background-color: var(--Button-color);
  text-transform: uppercase;
  color: var(--White-color);

  &:hover {
    background-color: var(--Button-hover-color);
  }
}

.link-box-column a.box {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;

  &:hover,
  &:focus {
    box-shadow: unset;

    & img {
      opacity: .4;
    }
  }

  & .image {
    height: 200px;
    width: 200px;
    margin-bottom: 1rem;
  }

  & img {
    opacity: 1;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
  }

  & div:nth-child(3) {
    display: none;
  }
}

.image-download-box a.box {
  display: flex;
  flex-direction: column;
  background: transparent;

  &>div {
    display: flex;
    justify-content: center;
  }

  & .image.is-64x64 {
    margin-bottom: .5rem;
    height: 128px;
    width: 128px;
    display: flex;
  }

  & img {
    object-fit: contain;
  }

  & div:nth-child(3) {
    display: none;
  }

  &:hover,
  &:focus {
    box-shadow: unset;
  }
}

/* File Upload */
.file-upload-block {

  .link .icon {
    color: var(--Primary-color);
    margin-right: .25rem
  }

  .link span {
    color: var(--Black-color);
    font-weight: 400 !important;
  }
}

/* Search Module */
.search-box {

  #btn-small-search {
    width: 120px;
    background-color: var(--Secondary-color) !important;
    color: var(--White-color) !important;
  }
}

/*------------------------------------*\
#LAYOUTS
\*------------------------------------*/
/* Header */
/* Navigation */
#main-nav,
#main-navbar.navbar-menu {

  & a.navbar-item,
  & a.navbar-link {
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    font-weight: 500;

    &:hover {
      color: var(--Button-color);
    }
  }

  & .navbar-link:not(.is-arrowless)::after {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
  }

  & .navbar-link:hover:not(.is-arrowless)::after,
  & .navbar-link:focus:not(.is-arrowless)::after {
    border-color: var(--Button-color);
  }

  & .navbar-item:hover .navbar-link:not(.is-arrowless)::after {
    border-color: var(--Button-color);
  }

  /* Dropdown */
  & .navbar-dropdown {

    & a {

      &:hover {
        background-color: unset;
      }
    }
  }

  & .navbar-end {

    & .button.is-small,
    & .button.is-white {
      background: transparent;
      color: var(--White-color);
      padding-left: 1rem;
      padding-right: 1rem;
      transition: .3s;
      -webkit-transition: .3s;
      -moz-transition: .3s;
      -ms-transition: .3s;
      -o-transition: .3s;

      & i {
        font-size: 1.1rem;
        font-weight: 400;
      }

      &:hover,
      &:active,
      &:focus {
        background: transparent;


        & i {
          font-weight: 700;
        }
      }

      &:focus {
        box-shadow: none;
      }
    }
  }
}

& .nav-search-container {
  background-color: rgba(0, 0, 0, .2);
}

@media screen and (min-width: 1088px) {
  .navbar-end .navbar-item.is-hidden-touch {
    background-color: var(--Secondary-color);
  }
}

.navbar-end .navbar-item:nth-child(2) {
  background-color: var(--Secondary-color);
}

/* Footer */
.arone-footer {
  padding-bottom: 1.5rem;
}

.ict-dedicated-footer {

  @media screen and (max-width: 475px) {
    text-align: center;

    & .dedicated-footer-logo {
      display: flex;
      justify-content: center;
    }

    & .ict-social-links {
      justify-content: center;
    }
  }

  & .ict-dedicated-footer-column-1 {

    &img {
      object-fit: contain;
    }
  }

  & .ict-dedicated-footer-column-1 .is-flex>a {
    margin-bottom: 1rem;
  }

  & h3 {
    font-size: 1.4444444444444rem;

    margin-bottom: .5rem !important;
  }

  & a {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: .3s;
    text-underline-offset: 0.25rem;

    &:hover {
      text-decoration: underline !important;
    }
  }

  & .footer-copyright {

    & h4 {
      font-size: 80%;
      padding-top: 1.5rem;
      margin-top: 1.5rem;
      display: flex;
      justify-content: flex-end;
      border-top: var(--Border-default);
    }
  }
}

@media screen and (max-width: 475px) {
  .ict-dedicated-footer .ict-list li {
    text-align: center !important;
  }
}

/* Sections */
@media screen and (max-width: 1087px) {

  section.additional-description-section,
  section.related-products-section,
  .block.block-account-navigation,
  .account-page {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

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

  section.section.is-large,
  .homeFeaturedProductsWrapper,
  .ict-dedicated-footer {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  section.additional-description-section,
  section.related-products-section,
  .block.block-account-navigation,
  .account-page {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

/* Product Card */
.listItem {

  & .category-item {
    display: flex;
    position: unset !important;
  }

  & .product-item--info {
    padding-top: 1rem;
  }

  & .product-title {
    display: flex;
    justify-content: center;
    transform: translate(0) !important;
    font-size: 1.25rem;
    opacity: unset !important;
    width: 100%;
    -webkit-transform: translate(0) !important;
    -moz-transform: translate(0) !important;
    -ms-transform: translate(0) !important;
    -o-transform: translate(0) !important;
    word-break: unset !important;
    white-space: wrap !important;

    & a {
      font-family: 'Outfit', sans-serif;
      font-weight: 500;
      width: 100%;
      text-align: center;
      color: var(--Primary-color);
    }
  }

  & .small-product-item .category-item .picture {
    position: absolute;
    height: 50%;
    width: 100%;
    top: 35%;
    left: 25%;
    transform: translate(-25%, -35%);
    -webkit-transform: translate(-25%, -35%);
    -moz-transform: translate(-25%, -35%);
    -ms-transform: translate(-25%, -35%);
    -o-transform: translate(-25%, -35%);
  }

  .small-product-item .category-item .picture a img {
    opacity: 1;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s;
  }

  .small-product-item .category-item:hover .picture a img {
    opacity: .3;
  }

  .catfish-default-product-box .product-item--image .picture img,
  .small-product-item .category-item .picture a img {
    object-fit: contain;
  }

  .product-item--info .flex-container {
    justify-content: center;
  }

  .item-box .product-item .product-item--info .pricerow .buttons .productlistproductdetailbutton.showproductlandingpage{
    background-color: transparent !important;
    color: var(--Primary-color);
    border: 2px solid var(--Primary-color);

    &:hover,
    &:focus,
    &:active{
      background-color: var(--Primary-color) !important;
      color: var(--White-color);
    }
  }
}

.sub-category-grid .listWrapper .item-box .sub-category-item .picture img,
.item-box .product-item--image .picture img {
  opacity: 1;
  transition: opacity .3s;
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -ms-transition: opacity .3s;
  -o-transition: opacity .3s;
}

.sub-category-grid .listWrapper .item-box:hover .sub-category-item .picture img,
.item-box:hover .product-item--image .picture img {
  opacity: .4;
}

.sub-category-grid .listWrapper .item-box {
  border-top: unset;
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title {
  transform: unset;
  -webkit-transform: unset;
  -moz-transform: unset;
  -ms-transform: unset;
  -o-transform: unset;
  background-color: var(--Primary-color);

  a{
    font-family: 'Outfit', sans-serif;
    color: var(--White-color);
    font-weight: 500;
  }
}

.sub-category-grid .listWrapper .item-box .sub-category-item:hover .category-title {
  background-color: #1f4488c9;
}

@media screen and (max-width: 1279px) and (min-width: 1088px) {
  & .listItem {
    width: 33.333333% !important;
  }
}

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

  & .listItem {
    width: 100% !important;
  }
}

/*------------------------------------*\
#ADMIN PAGES
\*------------------------------------*/
/* Homepage */
#homeFeaturedCategoriesTitleRow .title {
  display: none;
}

.homeFeaturedCategoriesWrapper {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.main-banner {
  border-top: 1px solid var(--Grey-color);
  border-bottom: 1px solid var(--Grey-color);
}

.main-banner .column:first-child {
  padding-left: 0;

  .image.is-4by3 {
    padding-top: 30%;
  }
}

@media screen and (max-width: 1600px) and (min-width: 1088px) {
  .main-banner {
    background-size: 60%;
    background-position: left;
  }
}


/* Category page */

@media screen and (min-width: 1088px) {
  .arone-category-page .listItem {
    width: 33.333333% !important;

    .description,
    .product--sku {
      text-align: center;
    }
  }
}

.page-catalog-category {

  & breadcrumb-section {
    background-color: var(--Grey-color);
  }

  & .navigationmenu {
    padding-top: 0;
  }

}

.breadcrumb-section {
  & .breadcrumb.level {
    background: #95BFDE;
    padding: 0.3125rem 0.625rem;
  }

  .breadcrumb li+li::before {
    color: var(--Black-color);
  }

  & .breadcrumb a:hover {
    color: var(--Primary-color);
  }

  & li:first-child a {
    align-items: baseline;
  }

  & a {
    color: var(--Text-color)
  }
}

.navigationmenu {

  & .navigationmenu--title {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--Primary-color);
    border-bottom: var(--Border-default);
    padding-bottom: 1.75rem;
    margin-top: 3rem;
  }

  & .navigationmenu--categories {

    & li {
      background-color: transparent;
    }

    & a {
      color: var(--Primary-color);
    }
  }

}

.hero.category-hero-section {
  background: transparent;
  color: var(--Primary-color);

  & .hero-body {
    padding-top: 0;
  }

  & h1.title {
    color: var(--Primary-color);
    border-bottom: var(--Border-default);
    padding-bottom: .5rem;
  }
}

.category-subcategory-section {
  padding-right: 2rem;
  padding-left: 2rem;
  padding-top: 0;
  border-bottom: var(--Border-default);
}

.ui-dialog {
  .ui-dialog-titlebar {
    border-bottom: 2px solid var(--Grey-color);
    background-color: var(--Primary-color);

    .ui-dialog-title {
      font-weight: 700;
      color: var(--White-color);
    }
  }

  .ui-button {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
  }

  .ui-dialog-buttonpane {
    background-color: var(--White-color);
    border-top: none;

    .ui-button.ui-widget:nth-child(2) {
      background-color: transparent;
      border: 2px solid var(--Danger-color);
      color: var(--Danger-color);

      &:hover,
      &:focus,
      &:active {
        background-color: var(--Danger-hover-color);
        color: var(--White-color);
      }
    }
  }
}

.dialog {
  .modal-card-head {
    border-bottom: 2px solid var(--Grey-color);

    .modal-card-title {
      color: var(--Primary-color);
    }
  }

  .modal-card-foot {
    background-color: var(--White-color);
    border-top: 2px solid var(--Grey-color);

    .button.is-light {
      background-color: transparent;
      border: 2px solid var(--Danger-color);
      color: var(--Danger-color);

      &:hover,
      &:focus,
      &:active {
        background-color: var(--Danger-hover-color);
        color: var(--White-color);
      }
    }
  }
}

/* Product Landing */
/* Mega Edit */
.loadingScreen .loadingLogo::before {
  content: "";
  /* Change the mega edit image here using the same naming structure on CSS  override */
  background: url("/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/8/ME-Logo.png");
  width: 20rem;
  height: 50%;
  position: absolute;
  top: -2rem;
  display: block;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.loadingScreen .loadingSpinner {
  position: relative;
  top: 5rem;
}

.loadingScreen .loadingLogo .loadScreenStepIndicator {
  font-size: 1.5rem;
  margin-top: 2rem;
}

.loadingScreen .fa-cog {
  height: 10rem !important;
  width: 10rem !important;
}

.ME_loading_hints {
  display: none !important;
}

/* Basket */
.cart-item-row {

  & .product__title a {
    color: var(--Primary-color);
  }
}

/*------------------------------------*\
#CHECKOUT STEPS
\*------------------------------------*/

/*------------------------------------*\
#MY ACCOUNT PAGES
\*------------------------------------*/
/* Change Password */
.customer-pass-recovery {

  & .button {
    background-color: var(--Primary-color);

    &:hover {
      background-color: var(--Button-hover-color);

      & input {


        &:hover {
          background-color: transparent !important;
        }
      }
    }

    & input {
      background-color: transparent !important;
    }
  }
}


/*------------------------------------*\
  #TOPIC PAGES
\*------------------------------------*/