:root {

    --robo-slb: 'Roboto Slab', serif;

    --robo: 'Roboto', sans-serif;

    --ind-bold: 'Conv_Industry-Bold';

    --ind-light: 'Conv_Industry-Light';

    --ind-dim: 'Conv_Industry-Demi';

    --ind-med: 'Conv_Industry-Medium';

    --ind-book: 'Conv_Industry-Book';

}



.products-page {

    background-color: #eceff1;

    padding: 20px 0;

}



.product-grid h2 {

    font-family: var(--ind-bold);

    font-size: 55px;

    color: #000000;

    text-transform: uppercase;

}



.product-grid h2 small {

    font-family: 'Roboto Condensed', sans-serif;

    font-size: 22px;

    color: #777777;

    text-transform: capitalize;

}



.navbar-product ul {

    display: flex;

    font-family: var(--ind-dim);

}



.navbar-product ul li {

    flex-grow: 1;

    flex-basis: 0;

    margin: 2px;

    transition: all 0.8s;

    position: relative;

}



.navbar-product ul li span.img-c {

    position: relative;

    display: block;

    margin: 0 auto;

    transition: all 0.8s;

}



.navbar-product ul li span.img-c:after {

    content: '';

    height: 110px;

    width: 110px;

    background-color: #fff;

    position: absolute;

    top: 9px;

    border-radius: 50%;

    left: 48%;

    margin-left: -50px;

    z-index: 2;

    transition: all 0.8s;

}



.navbar-product ul li i {

    font-size: 14px;

}



.navbar-product ul li img {

    display: block;

    margin: 0 auto;

    width: 88px;

    transition: 0.8s;

    /* background-color: #ffffff; */

    padding: 20px 20px 0;

    border-top-left-radius: 50px;

    border-top-right-radius: 50px;

    position: relative;

    z-index: 3;

}



.navbar-product ul li a {

    color: #000000;

    font-size: 18px;

    border-bottom: 1px solid #d4d7d8;

    text-transform: uppercase;

    transition: all 0.8s;

}



.navbar-product ul li a span.link-text {

    background-color: #920c14;
	color:#fff; font-size:16px;

    display: block;

    height: 51px;

    line-height: 51px;

    text-align: center;

    position: relative;

    z-index: 5;

    transition: all 0.8s;
	

}



.navbar-product ul li a:hover,

.navbar-product ul li a:hover span.link-text,

.navbar-product ul li a:hover span.img-c:after {

    background-color: #000;

    color: #ffffff;

}



.navbar-product ul li a:hover img {

    filter: brightness(0%) invert(100%);

}



.navbar-product ul li ul.dropdown-p {

    display: none;

    background-color: #151515;

    padding: 0px;

    position: absolute;

    z-index: 9;

    width: 100%;

}



.navbar-product ul li:hover ul.dropdown-p {

    display: table;

    width: 100%;

    /* width: auto; */

}



.navbar-product ul li ul.dropdown-p li a {

    color: #cdcdcd;

    font-size: 15px;

    padding: 15px 10px;

    border-bottom: 0;

    display: block;

    text-transform: capitalize;

}



.navbar-product ul li ul.dropdown-p li a::hover {

    color: #fff;

}



.product_grid {

    float: left;

    width: 100%;

}



.grid {

    /* font-size: 0px; */

    padding-top: 10px;

    -moz-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

    -o-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

    -webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

    transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);

    min-height: 100%;

    padding-bottom: 100px;

    display: block;

    float: left;

    width: 100%;

}



.grid-item {

    border-bottom: 1px solid #e8e8e8;

    border-right: 1px solid #e8e8e8;

    /* display: inline-block; */

    width: calc(100%/4);

    float: left;

    min-height: 500px;

    text-align: center;

    position: relative;

    cursor: pointer;

    box-sizing: border-box;

    vertical-align: top;

    overflow: hidden;

    text-decoration: none;

    -moz-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    -o-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    -webkit-transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    background-color: #ffffff;

    line-height: 91px;

}



.grid-item-inner {

    padding: 0px 0 10px 0;

    /* position: inherit; */

    transition: background-color 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.product__title {

    color: #161511;

    font-size: 16px;

    font-family: var(--ind-book);

    text-transform: uppercase;

    line-height: 40px;

    overflow: hidden;

    padding: 0px 10px;

    margin-bottom: 10px;

}



.product__title .text__line {

    width: 80px;

    height: 4px;

    background-color: #161511;

    display: block;

    margin: 0 auto;

    position: relative;

    overflow: hidden;

}



.product__title .text__line::after {

    content: '';

    width: 80px;

    height: 4px;

    background-color: #e11a36;

    display: block;

    position: absolute;

    transition: 0.8s;

    top: 0;

    left: -160px

}



.product__title .text__line::before {

    content: '';

    width: 80px;

    transition: 0.8s;

    height: 4px;

    background-color: #d3d3d3;

    display: block;

    position: absolute;

    top: 0;

    left: -80px;

}



.product__title_b_img {

    position: absolute;

    color: #eaeaea;

    font-size: 60px;

    font-family: var(--ind-bold);

    text-transform: uppercase;

    width: 100%;

    z-index: 1;

    top: 66px;

    transition: transform 1s, color 1s;

}



.product__image {

    position: absolute;

    z-index: 2;

    width: 100%;

    top: 135px;

}



.product__image img {

    display: block;

    margin: 0 auto;

    width: 75%;

    transition: transform 0.8s;

    /* transition: transform 1s; */

}



.product__image {

    zoom: .8;

}



.product__footer {

    position: absolute;

    bottom: 0;

    display: flex;

    width: 100%;

    height: 80px;

}



.product__footer div {

    flex-grow: 1;

    flex-basis: 0;

}



.product__footer .product__color {

    /* width: 50%; */

    /* float: left; */

    text-align: left;

    padding: 0 10px;

    margin-top: 20px;

}



.product__footer .product__color ul li {

    list-style: none;

    display: inline-block;

    width: 20px;

    height: 20px;

    border: 1px solid #f0f0f0;

    border-radius: 50px;

}



.product__footer .product__color ul li span {

    display: block;

    width: 20px;

    height: 20px;

    border-radius: 50px;

}



.product__footer .product__color ul li span.red {

    background-color: #e73624;

}



.product__footer .product__color ul li span.green {

    background-color: #0dc7a5;

}



.product__footer .product__color ul li span.blue {

    background-color: #797979;

}



.product__sku {

    font-family: var(--ind-bold);

    font-size: 16px;

    /* width: 50%; */

    /* float: left; */

    text-align: right;

    padding: 0 30px 10px;

}



.product__sku span {

    /* display: inline-block; */

    padding: 8px;

    /*     border-bottom: 4px solid #ccc; */

    transition: 0.8s;

    position: relative;

    z-index: 2;

}



.product__sku span:before {

    content: '';

    width: 100%;

    height: 4px;

    background-color: #e11a36;

    position: absolute;

    top: 90%;

    left: 0;

    right: 0;

    transition: 1s;

    z-index: -1;

}



.grid-item:hover .product__sku span:before {

    top: 0;

    height: 100%;

    color: #ffffff;

}



.grid-item:hover .product__sku {

    color: #fff;

}



.grid-item:hover {

    background-color: #f5f5f5;

}



.grid-item-inner:hover .product__title .text__line::before {

    left: 80px;

}



.grid-item-inner:hover .product__title .text__line::after {

    left: 0px;

}



.grid-item-inner:hover .product__title_b_img {

    color: #000;

    /*     font-size:60px; */

    transform: scale(1.1);

}



.grid-item:hover .product__image img {

    /* width: 80%; */

    transform: scale(1.04);

}



.grid-item:hover .product__sku span {

    border-color: #e11a36;

}



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

    .grid-item {

        width: calc(100%/4);

    }

}



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

    .grid-item {

        width: calc(100%/3);

    }

}



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

    .grid-item {

        width: calc(100%/3);

        min-height: 400px;

    }

    .product__title {

        font-size: 20px;

    }

}



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

    .grid-item {

        width: calc(100%/3);

    }

    .product__title {

        line-height: 25px;

    }

}



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

    .grid-item {

        width: calc(100%/2);

        min-height: 455px;

    }

    .navbar-product {

        display: none;

    }

}



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

    .grid-item {

        width: calc(100%/1);

        min-height: 460px;

    }

}