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

:root{
  --Primary-color:  #0099D4;
  --Secondary-color:  #E00069;
  
  --Tertiary-color:  #FFDF00;
  --Accent-color:  #130E09;

  --Button-color:  #E00069;
  --Button-hover-color: #d30063;
  --Text-color: #130E09;
  
  /* Neutral Colors */
  --White-color: #fff;
  --Black-color: var(--Accent-color);
  --Grey-color: #ECEAE6;

  --Danger-color: #DE1212;
  --Danger-hover-color: #d21111;
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/

/*Button */
.catfish-button,
.button{
  font-weight: 500;
}

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

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

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

#continueshoppingDummy, .is-outlined, p.back-link > a{
    background-color: transparent;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    border-color: var(--Button-color);
    color: var(--Button-color);
    border-width: 2px;
    
    &:hover{
        border: 2px solid var(--Button-hover-color);
        background-color: var(--Button-hover-color);
        color: #fff;
    }
}

/* Typography */
.title.is-1{
  font-size: 4.5em;
  font-weight: 900;
}

.title.is-2{
  font-size: 3.25em;
  font-weight: 600;
  line-height: 1em;
}

.title.is-3{
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1em;
}

h3.title{
  color: var(--Secondary-color);
}


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

    &:hover{
        color: inherit;
        text-decoration: underline;
    }
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
/* Background Overlay */
.overlay{
    position: relative;

    &::before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 127, 170, 0.35);
    }
}

/* Responsiveness */
@media screen and (max-width: 1087px) {
  .is-justify-content-center-touch{
    justify-content: center !important;
  }
}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/
/* Badge */
.badge{
  background-color: var(--Tertiary-color);
  color: var(--Text-color);
}

/* Product Card */
.listItem{

  .item-box{

    .catfish-default-product-box{

      .product-item--info{

        .product-title a {
          color: var(--Text-color);
        }
      }
    }
  }
}

@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;
    }
  }
/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
/* Header */
.navbar{
  /* Logo */
  .is-header-logo {
      height: 2.5rem;
  }

  a.navbar-item,
  a.navbar-link{
    font-weight: 400;
  }
  

  /* Icons */
  @media screen and (min-width: 1088px) {
    .navbar-item  .button{
      font-size: 1.111em;
      padding-left: .75rem;
      padding-right: .75rem;
    }

    .navbar-item  .button.is-primary{
      background-color: transparent;
      color: var(--Black-color);
      padding-left: .75rem;
      padding-right: .75rem;
    }

    .navbar-item  i{
      font-size: 1em;
      font-weight: 700;
    }

    .navbar-dropdown{
      border-top: none;
      background-color: #007FAA;

      a.navbar-item{
        color: var(--White-color);
        transition: all .3s ease;
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -ms-transition: all .3s ease;
        -o-transition: all .3s ease;
      }

      a.navbar-item:hover{
        background-color: rgba(0, 0, 0, .03);
        opacity: .7;
      }
    }
  }
}

/* Footer */
.arone-footer {
  position: relative;
  font-weight: 300;

    > .container{
      position: unset !important;
    }

    > .columns{
      display: flex;
    }

    .column{
      width: 100%;
      display: flex;
      justify-content: center;
    }

    .column:nth-last-child(2){
      margin-bottom: 1.5rem;
    }
      
    .dedicated-footer-logo{
      display: flex;
      justify-content: center;
      margin-bottom: 3rem;

      img{
        height: 2rem
      }
    }
    
    .ict-dedicated-footer-column-1{

       .footer-column-content{
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    .ict-dedicated-footer-column-4{
      position: absolute;
      bottom: 0;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      background-color: #F7F6F6 !important;

      .is-flex{
        width: 1440px;
      }

      .footer-column-content{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-around;
      }

      .block{
        width: 100%;
      }

      .block:first-child,
      .block:first-child .block{
        margin-bottom: 0;
      }

      .block:last-child{
        text-align: right;
      }

      ul.ict-list {
        display: flex !important;
        gap: .5rem;

        li a{
          text-decoration: underline;
        }

        li:hover a,
        li:active a,
        li:focus a{
          color: var(--Primary-color);
        }
      }
    }

    .footer-copyright{
      text-align: right;
    }

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

      .ict-dedicated-footer-column-4 .footer-column-content{
        flex-direction: column;

        ul.ict-list {
          justify-content: center;
          flex-wrap: wrap;
        }

        .block:last-child{
          text-align: center;
        }
      }
    }
}

/* 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;
    }
}

/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/

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

/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/
/* Login */
.login__wrapper {
  background-size: contain;
  background-position: left center;
}
/*------------------------------------*\
    #TOPIC PAGES
\*------------------------------------*/