.category {
    padding: 6%
}

.row {
    margin: 0
}

.middle-row{
    display:none
}

.image2 {
}

.padding-top-custom {
    padding-top: 25px
}

.categoryItem {
    padding-right: 12.5px;
    padding-left: 12.5px;
}

.CinnerStyle {
    overflow: hidden;
    box-shadow: 0 0 5px #00000070;
    position: relative;
    top: 0;
    transition: all 0.3s ease-in-out 0s
}

.categoryItem img {
    width: 100%;
    height: 100%
}

.style1 {
    flex: 0 0 50%;
    max-width: 50%
}

    .style1 .CinnerStyle {
        border-radius: 40px 0
    }

.Kitchenstyle1{
    flex:0 0 33.33333%;
    max-width:33.33333%
}
.radius1 .CinnerStyle {
    border-radius: 40px 0
}
.radius2 .CinnerStyle {
    border-radius: 40px 40px 0 0
}
.radius3 .CinnerStyle {
    border-radius:0 40px
}

.Kitchenstyle2{
    flex:0 0 66.66666%;
    max-width:66.66666%
}

.style2 {
    flex: 0 0 50%;
    max-width: 50%
}

    .style2 .CinnerStyle {
        border-radius: 0 40px
    }

.style3 {
    flex: 0 0 100%;
    max-width: 100%;
}

    .style3 .CinnerStyle {
        border-radius: 40px 0
    }

.style4 {
    flex: 0 0 100%;
    max-width: 100%;
}

    .style4 .CinnerStyle {
        border-radius: 0 40px
    }

.Column1 {
    flex: 0 0 62%;
    max-width: 62%
}

.Column2 {
    flex: 0 0 38%;
    max-width: 38%
}


.colapseInfo {
    position: absolute;
    bottom: -115px;
    width: 100%;
    transition: all 0.3s ease-in-out 0s
}

.CinnerStyle:hover {
    cursor: pointer;
    box-shadow: 0 0 5px #000000a3;
    top: -10px
}

    .CinnerStyle:hover .colapseInfo {
        bottom: 0
    }

.colapseInfo h2 {
    font-family: iranyekanwebbold,Ebrima;
    font-size: 20px;
    color: white;
    line-height: 115px;
    background-color: #f8b500bd;
    padding: 0 7%;
    margin-bottom: 0
}

.navigation p {
    margin-bottom: 10px
}

.navigation p {
    line-height: 50px
}

.navigation ul li {
    line-height: 38px
}

.innerStyle {
    padding: 40px 40px
}

.show-1370 {
    display: none
}


#carving #sticky {
    padding-bottom: 0 !important;
    height: 100%
}

#Handle .category {
    padding: 0;
    margin: 6% auto 6%;
    width: 80%
}

#Handle #sticky {
    padding-bottom: 0 !important;
    height: 100%
}

.innerStyle {
    height: 100%
}

.ValveContainer {
    width: 82.8%;
    margin: 0 auto
}

.imageSection {
    flex: 0 0 76%;
    max-width: 76%;
}

    .imageSection img {
        width: 100%
    }

.infoSection {
    flex: 0 0 24%;
    max-width: 24%;
    padding: 6% 0 2% 4%
}

.ValveItem {
    padding: 15px 0;

}

.ValveShadowStyle {
    border-radius: 0 20px;
    box-shadow: 0 0 5px #00000045;
    overflow: hidden;
    text-align: center;
    position: relative;
    top: 0;
    transition: all 0.3s ease-in-out 0s
}

    .ValveShadowStyle:hover {
        top: -10px;
        box-shadow: 0 0 9px #00000065
    }


.infoSection h2 {
    font-size: 14px;
    margin-bottom: 20px
}

.infoSection p {
    font-size: 13px;
    line-height: 25px;
    margin-bottom: 0;
    font-family: iranyekanwebregular
}

.ValveItem .button_su {
    margin-top: 30px
}

.ValveItem .button_su_inner {
    width: 120px
}

.ValveItem .button_text_container {
    font-size: 13px
}



@media only screen and (max-width:1700px) {
    .category {
        padding: 5% 4%
    }

    .categoryItem {
        padding-left: 10px;
        padding-left: 10px
    }

    .padding-top-custom {
        padding-top: 20px
    }

    .colapseInfo h2 {
        font-size: 17px
    }

    .colapseInfo h2 {
        line-height: 95px
    }

    .innerStyle {
        padding: 40px 40px 587px
    }

    .SliderNext, .SliderPrev {
        width: 22px
    }

    .imageSection img {
        padding: 2.5% 0
    }

    .infoSection h2 {
        margin-bottom: 10px
    }
}

@media only screen and (max-width:1400px) {
    .category {
        padding: 5% 2%
    }

    .innerStyle {
        padding: 40px 40px 624px
    }
}



@media only screen and (max-width:1370px) {
    .Column2 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .Column1 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .style2 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .radius2 .CinnerStyle{
        border-radius:0 40px
    }


    .Kitchenstyle1 {
        flex: 0 0 50%;
        max-width: 50%
    }

    .Kitchenstyle2{
        flex:0 0 100%;
        max-width:100%
    }

    .middle-row{
       display:flex;
       width:100%
    }

    .style1 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .style2 {
        margin-top: 20px
    }

    .Hide-1370 {
        display: none
    }

    .show-1370 {
        display: block
    }

    .noPadding-1370 {
        padding-top: 0
    }

    .Padding-1370 {
        padding-top: 20px
    }

    .style1 .border-style-1370 {
        border-radius: 0 27px
    }

    .style2 .border-style-1370 {
        border-radius: 27px 0
    }

    .route p {
        margin-bottom: 0;
        margin-top: 5px
    }

    .style3 .CinnerStyle, .style1 .CinnerStyle {
        border-radius: 27px 0
    }

    .style2 .CinnerStyle, .style4 .CinnerStyle {
        border-radius: 0 27px
    }

    .innerStyle {
        border-radius: 27px 0;
        padding: 40px 40px 150px
    }

    .innerBackground {
        border-radius: 0 27px
    }

    #Handle .category {
        width: 84%
    }


    .ValveContainer {
        display: flex;
        flex-wrap: wrap;
        width: 95%
    }

    .ValveItem {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 10px
    }

    .imageSection {
        flex: 0 0 100%;
        max-width: 100%
    }

    .infoSection {
        flex: 0 0 100%;
        max-width: 100%
    }

    .ValveShadowStyle {
        padding: 12px 12px 0
    }

    .ValveItem:nth-of-type(1) .ValveShadowStyle,
    .ValveItem:nth-of-type(4) .ValveShadowStyle,
    .ValveItem:nth-of-type(5) .ValveShadowStyle {
        border-radius: 20px 0
    }
}

@media only screen and (max-width:1200px) {
    .colapseInfo h2 {
        font-size: 16px;
        line-height: 80px
    }


    .route p {
        font-size: 12px
    }

    .sidebar h3 {
        font-size: 16px
    }
}

@media only screen and (max-width:991px) {
    .colapseInfo {
        bottom: 0
    }

    #carving #sticky {
        padding-bottom: 40px !important
    }

    #Handle #sticky {
        padding-bottom: 40px !important
    }



    .category {
        padding: 5% 0
    }

    .colapseInfo h2 {
        line-height: 65px;
        background-color: #f8b500e6
    }

    .navigation ul li {
        line-height: 30px
    }

    .innerStyle {
        padding: 25px 40px !important
    }

    .categoryItem {
        padding-right: 15px;
        padding-left: 15px
    }

    .style2 {
        margin-top: 30px
    }

    .padding-top-custom {
        padding-top: 30px
    }

    .noPadding-1370 {
        padding: 0 !important
    }

    .Padding-1370 {
        padding-top: 30px
    }

    #CarveTopElement {
        left: 18%
    }

    .innerBackground {
        padding: 3.5% 7% 8% !important
    }
}

@media only screen and (max-width:730px) {
    .colapseInfo h2 {
        font-size: 14px;
        line-height: 55px
    }
}

@media only screen and (max-width:670px) {
    .colapseInfo h2 {
        font-size: 12px
    }
}

@media only screen and (max-width:600px) {
    .Column1 {
        flex: 0 0 100%;
        max-width: 100%;
        order: 1
    }

    .padding-600{
        padding-top:30px
    }

    .Kitchenstyle1 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .Column2 {
        flex: 0 0 100%;
        max-width: 100%
    }

    .innerBackground {
        padding: 20px 50px
    }

    .colapseInfo h2 {
        font-size: 16px
    }

    .style3 {
        padding-top: 20px
    }

    .style3 {
        padding-top: 30px
    }

    #carving .style3 {
        padding-top: 10px
    }

    #carving .style4 {
        padding-top: 30px
    }

    #carving .padding-top-custom {
        padding-top: 0
    }

    .style1 {
        margin-top: 30px
    }

    .padding-top-custom .style3 {
        padding-top: 0
    }

    .footer {
        width: 45% !important;
        left: 15% !important
    }

    .navigation {
        margin-top: 14px
    }

        .navigation ul li:hover {
            color: #ffc801
        }

    #Handle .category {
        width: 100%
    }

    #Kitchen .style3 {
        padding-top: 10px
    }

    .ValveItem {
        flex: 0 0 100%;
        max-width: 100%
    }
}


@media only screen and (max-width:500px) {
    .innerBackground {
        padding: 10px 30px
    }
}

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


    .category {
        padding: 5% 0
    }

    .route {
        display: flex;
        flex-wrap: wrap;
        line-height: 30px;
        padding-bottom: 10px
    }

        .route div {
            flex: 0 0 100%
        }


        .route i {
            padding-top: 6px;
            margin-right: 8px;
            line-height: 30px
        }
}

@media only screen and (max-width:400px) {
    .innerBackground {
        padding: 20px 30px
    }
}