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

:root{
  --Primary-color:  #1f4488;
  --Secondary-color:  #fcd00d;
  --Tertiary-color: #a09e62;
  --Accent-color: #D5E8F6;

  /* Button Color */
  --Button-color: #1f4488;
  --Button-hover-color: #16305f;

  --Text-color: #000;

  --Border-default: 1px solid #ddd;
  
  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: #000;
  --Grey-color: #F3F3F3;

  --Danger-color: #cf4646;
  --Danger-hover-color: #cc3c3c;
}

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

.content h1, 
.content h2, 
.content h3, 
.content h4, 
.content h5, 
.content h6{
font-family: BebasNue;
}

.title:not(span, label){
font-family: BebasNue;
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);
}

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

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

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;

&: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(--Black-color)!important;
  }
}
/*------------------------------------*\
#LAYOUTS
\*------------------------------------*/
/* Header */
/* Navigation */
#main-nav, #main-navbar.navbar-menu{

& a.navbar-item,
& a.navbar-link{
  text-transform: uppercase;
  font-weight: 700;

  &: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(--Text-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{
              color: var(--Button-color);
              font-weight: 700;
          }

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

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

& .badge{
  background-color: var(--Black-color);
}
}

& .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-item img {
  max-height: 7em;
}

.is-header-logo {
  height: 7.5rem;
}
}
.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;
  font-weight: 700;
  color: var(--Primary-color);
  margin-bottom: .5rem !important;
}

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

    &:hover{
        color: var(--Button-hover-color);
        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;
  font-weight: 700;
  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 {
    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;
}
}

.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);
}

.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: var(--Grey-color);
  padding: 0.3125rem 0.625rem;
}

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

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

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

.navigationmenu{

& .navigationmenu--title{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.25rem;
  color: var(--Primary-color);
  border-bottom: var(--Border-default);
  padding-bottom: 1.75rem;
}

& .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);
}

/* 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
\*------------------------------------*/