:root{
    /* Color */
    --primary-color: #FFC809;
    --secondary-color: #5A5A5A;
    --secondary-color-2: #a8a8a8;
    --tertiary-color: #Fee383;
    --tertiary-color-2: rgba(254, 227, 131, .8);
    --background-color: #ECEFF1;
    --text-color: #222;
    --white-color: #fff;
    --black-color: #000;

    /* Shadow */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Font  Style */
    --letter-spacing-button: 1.5px;
}

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

.catfish-button{
    border: transparent;
    color: var(--text-color) !important;
    letter-spacing: var(--letter-spacing-button);
    text-transform: uppercase;

    &:hover,
    &:focus,
    &:active{
        border: transparent;
        color: var(--white-color);
    }
}

.catfish-button:focus:not(:active){
    box-shadow: none;
}

.catfish-input{

    &:active,
    &:focus{
        border-color: var(--tertiary-color);
        box-shadow: 0 0 0 .125em var(--tertiary-color-2);
    }
}

.catfish-select{

    &:focus,
    &:active{
        border-color: var(--tertiary-color);
        box-shadow: 0 0 0 .125em var(--tertiary-color-2);
    }
}

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

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

/* General - End */

/* ---------------------- */
/* Utility Classes -Start */
/* ---------------------- */
.block-icon{
    & .block:first-child{
        margin-bottom: 0;
    }
}
/* Utility Classes -End*/

/* ---------------------- */
/* Components - Start */
/* ---------------------- */
.listWrapper{

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

        @media screen and (max-width: 475px){
            width: 100%;
        }
    }

    & .small-product-item{
        border-top: none !important;
        box-shadow: var(--shadow-md);
    }

    & .item-box{
        border-top: none !important;
    }

    & .category-item,
    & .sub-category-item{

        & .product-title,
        & .category-title{
            background-color: var(--primary-color) !important;

            @media screen and (min-width: 768px){
                transform: translateY(0) !important;
                -webkit-transform: translateY(0) !important;
                -moz-transform: translateY(0) !important;
                -ms-transform: translateY(0) !important;
                -o-transform: translateY(0) !important;
            }

            @media screen and (max-width: 768px){
                padding: 2rem .5rem 2rem .5rem !important;
            }
    
            & a{
                text-transform: uppercase;
                color: var(--text-color) !important;
                letter-spacing: var(--letter-spacing-button);
                font-weight: 600;
            }
        }

        &:hover{

            & .product-title,
            & .category-title{
                & a{
                    color: var(--white-color) !important;
                }
            }
        }
    }
    
}

.product-grid{

    & .productlistproductdetailbutton{
        text-transform: uppercase;
        letter-spacing: var(--letter-spacing-button);
        color: var(--text-color);

        &:focus{
            box-shadow: unset;
        }

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

/* Components - End */

/* ---------------------- */
/* ----Module - Start ----*/
/* ---------------------- */
/* Header */
.ict-navbar{
    background-color: var(--primary-color);

    & .is-header-logo {
        height: 2.5rem;
        margin-top: 1rem;

        @media screen and (max-width: 1280px){
            height: 2.2rem;
        }
    }


    & a.navbar-item, & a.navbar-link{
        text-transform: uppercase;
        padding: .5rem 1.2rem;

        &:hover,
        &:focus{
            color: var(--white-color);
        }

        @media screen and (max-width: 1280px){
            font-size: 0.875rem;
            font-weight: 700;
            padding: .5rem .75rem;
        }
    }

    & a.navbar-link{
        padding-right: 2.5rem;
    }

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

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

    & .navbar-dropdown{
        background-color: var(--primary-color);
        border-top-color: var(--secondary-color);

        & a.navbar-item{

            &:hover,
            &:focus{
                background-color: var(--secondary-color);
            }
        }
    }

    & .navbar-item:hover .navbar-link {
        color: var(--white-color);
    }

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

    & .navbar-end{

        & .navbar-item.is-hidden-touch{
            padding-left: 0;
        }

        & .button.is-small,
        & .button.basket-link{
            font-size: 1.2rem;
            color: var(--text-color);
            padding-left: 1rem;
            padding-right: 1rem;
            text-transform: uppercase;
            background-color: transparent;

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

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

        & .button.basket-link{

            .fa-shopping-cart{
                font-size: 1.2rem;
                font-weight: 900;
            }
        }

        & .badge{
            background-color: var(--secondary-color);
            box-shadow: none;
        }
    }
}

.navbar-brand {
    @media screen and (max-width: 1087px){
        & .navbar-right-mobile{

            & i{
                font-weight: 600;
                font-size: 1.3rem;
            }
        }

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

.ict-navbar{
    @media screen and (max-width: 1088px) {
        .navbar-menu.is-active{
            background-color: var(--primary-color);
            border-top: 2px solid var(--secondary-color-2);
        }
    }
}

.nav-search-container{
    background-color: var(--tertiary-color-2);
}

/* Footer */
.ict-dedicated-footer{
    padding-top: 3rem;
    padding-bottom: 3rem;

    & .column.ict-dedicated-footer-column-1{
        width: 50%;

        & .image{
            padding-top: 25%;
        }

        & img{
            object-fit: contain;
        }
    }

    & .column.ict-dedicated-footer-column-2{
        display: none;
    }

    & .footer-copyright{
        font-size: .825rem;
        color: var(--secondary-color-2)
    }

    @media screen and (max-width: 1087px) {
        & .column.ict-dedicated-footer-column-3{
            display: none;
        }
    }

    @media screen and (max-width: 767px) {
        & .column{
            width: 100%;
        }

        & .footer-copyright{
            text-align: center !important;
        }

        & .column.ict-dedicated-footer-column-4{
            margin-bottom: 1.5rem;
            & p{
                text-align: center !important;
            }
        }

    }
}

/* Slider */
.infigo-slider{

    .flex-direction-nav{

        .flex-prev,
        .flex-next{
            background: var(--secondary-color);
            text-align: center;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            height: 3rem !important;
            width: 3rem !important;
        }

        .flex-prev{
            left: 2.5rem !important;

            &::before{
                margin-right: .2rem;
            }
        }

        .flex-next{
            right: 2.5rem !important;
            text-align: center !important;
            
            &::before{
                margin-left: .2rem;
            }
        }

        & a::before{
            font-size: 2rem !important;
        }

        @media only screen and (max-width: 1088px) {
            display: none;
        }
    }

    &:hover{

        .flex-direction-nav{

            .flex-prev{
                left: 3rem !important;
            }

            .flex-next{
                right: 3rem !important;
            }
        }
    }
}
/* Modules - End */
/* ---------------------- */
/* -----Pages - Start-----*/
/* ---------------------- */
/* Homepage */
/* Category Section */
#homeFeaturedCategoriesTitleRow{
    
    & .title{
        text-align: left !important;
        padding-bottom: .5rem;
        border-bottom: 2px solid var(--secondary-color-2);
        margin-bottom: 2.5rem;
        color: var(--secondary-color);
    }
}

/* Category page */
.navigationmenu{
    
    & li.active{
        
        & a{
            color: var(--text-color) !important;
        }
    }
}

.arone-category-page, .arone-product-landing-page{
    & .breadcrumb-section{
        background-color: var(--white-color);
    }

    & .breadcrumb{
        
        & li {
            
            &:first-child{

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

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

/* Product Landing Page */
.global-content-under-image, .enterQuantityBoxLabel, .quantityBox {
	display: none
}

/* Countdown timer */
.countdown_timer{

    & .heading,
    & .title{
        color: var(--text-color) !important;
    }
}

.price-quantity-start-wrapper{
    
    .columns {
        @media screen and (max-width: 767px) {
            display: flex;
        }
    }

    & .price {
        order: 1;
        width: 50%;
    }

    & .add-to-cart-buttons-wrapper {
        order: 2;
    }

    & .quantity-wrapper {
        order: 3;
    }

    & .priceScriptInfo {
        order: 4;
    }

    & .newProductPriceWrapper {
        background: var(--primary-color);
        padding: .35rem;
        border-radius: 4px;
    }

    & #priceHide {
        font-weight: 900;
        text-align: right;
        width: 100%;
        padding-right: 1.5rem;
    }
}

.product-variant-line{

    & .block.is-medium:not(:last-child){
        margin-bottom: 2rem;
    }

    & .attributes{

        & .attribute{

            padding: .5rem;
        }
    }
}

/* Basket Page */
.shoppingcart__wrapper .cartform{

    & .cart-item-row{

        @media screen and (min-width: 1471px) {
            & .cart--actions{
                flex-grow: 0;
                flex-basis: 10%;
           }
    
            & .productpicture{
                flex-grow: 1;
                flex-basis: 20%;
            }

            & .product{
                flex-grow: 1;
                flex-basis: 25%;
            }

            & .cart--quantity,
            & .cart--itemtotal{
                flex-basis: 15%;
            }
        }
    }
}

.cart-item-row  .product{

    & .rawAttributeInfo__item {
        display: flex;
        font-size: .833em;
    }
    
    & .rawAttributeInfo__item:not(:first-child) {
        margin-top: .5rem;
    }
    
    & .rawAttributeInfo__item:not(:first-child) .title {
        margin-top: 0;
    }
    
    & .rawAttributeInfo__item span.title {
        flex-shrink: 0;
        flex-basis: auto;
        font-size: .975em;
        font-weight: 600;
    }
    
    & .rawAttributeInfo__item .separator {
        margin-right: .5rem;
        margin-left: .2rem;
    }    
}

.shoppingcart__wrapper .cart-footer{
    

    & .cart-footer__container{
        border: 2px solid var(--secondary-color-2);
    }

    #continueshoppingDummy{
        border: 2px solid var(--primary-color);

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

.ui-dialog .ui-dialog-titlebar {
    background-color: var(--primary-color);
}

.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-buttonpane {
    background-color: var(--background-color);
}    

.ui-dialog-buttonpane{
    border-top: 1px solid var(--secondary-color-2);
}

.ui-dialog .ui-dialog-buttonpane{

    & .ui-button{
        border-color: transparent;
    }
}

/* Edit Page */

.cancelEdit {
    color: var(--text-color) !important;
    border: 2px solid var(--primary-color);

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

/* Editors Page */
.queue__item__download {
    text-wrap: wrap;
    padding: 1rem;
}

.queue__item.notification {

    & .queue__item__download{
        height: 3.75em;
    }
   
}

.file-label .drag-upload__queue p:nth-child(4){
        padding: 1rem;
}

/* Checkout Page */
.iopNameEditingArea{
    display: flex;
    flex-direction: column;

    & label{
        margin-bottom: .25rem;
    }
}

.page-checkout-onepagecheckout .advanced-select{

    & .item-list{

        & button.text-item{
             
            & span{
                color: var(--text-color);
            }
        }
    }
}

.setcustomname-page{

    & .column{
        width: 100%;
    }
}

.page-shoppingcart-setmandatorycustomnames .cart-item-row {
    background: var(--white-color);
}
/* Topic Pages */
/* Contact Page */
.title.has-style-custom-1{

    &::before {
        content: "";
        width: 15px;
        height: 32px;
        background: var(--primary-color);
        display: inline-block;
    }
}

/* FAQ page */
.ict-accordion{

    & .button.accordion-title{
        border-radius: 4px;
        color: var(--text-color);
        

        &:hover,
        &:active,
        &:focus{
            border-color: transparent;
            color: var(--white-color);
        }

        & i{
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
        }

        &:hover{

            & i{
                color: var(--white-color) !important;
            }
        }
    }

    .accordion-item.is-active{

        & .accordion-title{
            color: var(--white-color);
        }

        & i{
            color: var(--white-color) !important;
        }
    }

    & .accordion-content{
        padding-bottom: 1rem;
    }
}

/* Pages - End */

/* ---------------------- */
/* -----Responsiveness----*/
/* ---------------------- */

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

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

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

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

@media only screen and (max-width: 320px) {
    
}
/* Responsiveness - End */