.matepro-body {
    overflow: hidden
}

.matepro-body .container {
    padding-right: 0;
    padding-left: 0
}

.matepro-body .container .product-listmenu {
    margin-top: 100px
}

.matepro-body .container .product-listmenu .navbar-toggler {
    background: url(../images/img_bglistpro.png);
    border-radius: 0;
    background-size: cover
}

.matepro-body .container .product-listmenu .navbar {
    width: 100%;
    display: block;
    padding: unset
}

.matepro-body .container .product-listmenu .navbar .nav-item .icon-line {
    display: none;
    float: right;
    position: relative;
    top: -85%;
    left: 20px
}

.matepro-body .container .product-listmenu .navbar-collapse {
    width: 100%;
    float: left;
    -webkit-box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75);
    box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75)
}

.matepro-body .container .product-listmenu .navbar-nav li a {
    width: 100%;
    color: #673b15;
    text-align: left;
    border-bottom: 1px solid #e1d8d0;
    font-size: 25px;
    padding-left: 15px;
    padding-bottom: 0;
    font-family: 'DB Helvethaica X Reg';
    cursor: pointer
}

.matepro-body .container .product-listmenu .navbar-nav a.active {
    color: #f08a2d
}

.matepro-body .container .product-listmenu .navbar-nav li a:hover {
    color: #f08a2d
}

.matepro-body .container .product-listmenu .nav-item {
    padding-left: 15px;
    padding-right: 15px
}

.matepro-body .container .product-listmenu .ima-search {
    width: 10%;
    position: relative;
    left: 5px;
    bottom: 3px
}

.matepro-body .container .product-listmenu .hnamebar {
    font-size: 25px;
    color: #fff;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px
}

.matepro-body .container .product-listmenu .animated-icon4 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    float: left;
    position: relative;
    top: -3px;
    right: 0;
    padding: 20px
}

.matepro-body .container .product-listmenu .animated-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

.matepro-body .container .product-listmenu .animated-icon4 span {
    background: #f3e5f5
}

.matepro-body .container .product-listmenu .animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.matepro-body .container .product-listmenu .animated-icon4 span:nth-child(1) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matepro-body .container .product-listmenu .animated-icon4 span:nth-child(2) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matepro-body .container .product-listmenu .animated-icon4 span:nth-child(3) {
    top: 26px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matepro-body .container .product-listmenu .animated-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 10px;
    left: 6px
}

.matepro-body .container .product-listmenu .animated-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0
}

.matepro-body .container .product-listmenu .animated-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 29px;
    left: 6px
}

.matepro-body .container .product-listmenu .navbar-drown {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1d8d0
}

.matepro-body .container .product-listmenu .navbar-drown .nav-item {
    padding-left: 0;
    padding-right: 0
}

.matepro-body .container .product-listmenu .navbar-drown li a {
    font-size: 22px;
    border: none
}

.matepro-body .container .product-listmenu .dropdown-menu .show {
    padding: 0
}

.matepro-body .container .product-listmenu .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    background: url(../images/icon_dropdown.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 6px;
    width: 10px;
    position: absolute;
    right: 20px;
    top: 20px
}

.matepro-body .container .hnam-prolist P {
    font-size: 25px;
    color: #915e36;
    margin: 10px
}

.matepro-body .container .padrow-style {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px
}

.matepro-body .container .padrow-style .padcol-style {
    padding-right: 5px;
    padding-left: 5px
}

.matepro-body .container .headproduct-list {
    background: url(../images/img_backprolist.png);
    border: 1px solid #e1d8d0;
    margin-bottom: 10px
}

.matepro-body .container .headproduct-list a:hover {
    color: unset;
    text-decoration: none
}

.matepro-body .container .headproduct-list .bodyproduct-list {
    text-align: center;
    padding: 10px;
    height: 230px
}

.matepro-body .container .headproduct-list .bodyproduct-list img {
    width: 100%;
    height: auto
}

.matepro-body .container .headproduct-list .bodyproduct-list .txt-namelist {
    color: #65351a;
    font-size: 22px;
    margin-top: 10px;
    line-height: 1em
}

.matepro-body .container .headproduct-list .btn-style1 {
    background-color: #fff;
    border: 5px solid #f58733;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    margin: auto;
    margin-bottom: 10px
}

.matepro-body .container .headproduct-list .btn-style1 a P {
    font-family: DDayStencil;
    font-size: 40px;
    color: #b2b2b2;
    margin-bottom: 0;
    position: absolute;
    bottom: 10px;
    margin-left: 4px
}

.matepro-body .container .headproduct-list .btn-style1 a:hover {
    color: unset;
    text-decoration: none
}

.matepro-body .container .headproduct-list .btn-style1:hover {
    background-color: #f58733;
    border: 5px solid #f58733;
    border-radius: 50px;
    width: 40px;
    height: 40px;
    margin: auto;
    margin-bottom: 10px
}

.matepro-body .container .headproduct-list .btn-style1:hover a P {
    font-family: DDayStencil;
    font-size: 40px;
    color: #fff;
    margin-bottom: 0;
    position: absolute;
    bottom: 10px;
    margin-left: 4px
}

.matepro-body .container .headproduct-list .btn-style1:hover a:hover {
    color: unset;
    text-decoration: none
}

.matepro-body .container .headproduct-list:hover {
    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .25);
    -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, .25);
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, .25)
}

.matelist-body {
    overflow: hidden
}

.matelist-body .product-listmenu {
    margin-top: 100px
}

.matelist-body .product-listmenu .navbar-toggler {
    background: url(../images/img_bglistpro.png);
    border-radius: 0;
    background-size: cover
}

.matelist-body .product-listmenu .navbar {
    width: 100%;
    display: block;
    padding: unset
}

.matelist-body .product-listmenu .navbar .nav-item .icon-line {
    display: none;
    float: right;
    position: relative;
    top: -85%;
    left: 20px
}

.matelist-body .product-listmenu .navbar-collapse {
    width: 100%;
    float: left;
    -webkit-box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75);
    -moz-box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75);
    box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .75)
}

.matelist-body .product-listmenu .navbar-nav li a {
    width: 100%;
    color: #673b15;
    text-align: left;
    border-bottom: 1px solid #e1d8d0;
    font-size: 25px;
    padding-left: 15px;
    padding-bottom: 0;
    font-family: 'DB Helvethaica X Reg';
    cursor: pointer
}

.matelist-body .product-listmenu .navbar-nav a.active {
    color: #f08a2d
}

.matelist-body .product-listmenu .navbar-nav li a:hover {
    color: #f08a2d
}

.matelist-body .product-listmenu .nav-item {
    padding-left: 15px;
    padding-right: 15px
}

.matelist-body .product-listmenu .ima-search {
    width: 10%;
    position: relative;
    left: 5px;
    bottom: 3px
}

.matelist-body .product-listmenu .hnamebar {
    font-size: 25px;
    color: #fff;
    margin-bottom: 0;
    padding-top: 5px;
    padding-bottom: 5px
}

.matelist-body .product-listmenu .animated-icon4 {
    width: 30px;
    height: 20px;
    position: relative;
    margin: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    float: left;
    position: relative;
    top: -3px;
    right: 0;
    padding: 20px
}

.matelist-body .product-listmenu .animated-icon4 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}

.matelist-body .product-listmenu .animated-icon4 span {
    background: #f3e5f5
}

.matelist-body .product-listmenu .animated-icon1.open span:nth-child(3) {
    top: 11px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}

.matelist-body .product-listmenu .animated-icon4 span:nth-child(1) {
    top: 10px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matelist-body .product-listmenu .animated-icon4 span:nth-child(2) {
    top: 18px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matelist-body .product-listmenu .animated-icon4 span:nth-child(3) {
    top: 26px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
    background: #fff;
    height: 4px;
    width: 65%;
    left: 5px
}

.matelist-body .product-listmenu .animated-icon4.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 10px;
    left: 6px
}

.matelist-body .product-listmenu .animated-icon4.open span:nth-child(2) {
    width: 0%;
    opacity: 0
}

.matelist-body .product-listmenu .animated-icon4.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 29px;
    left: 6px
}

.matelist-body .product-listmenu .navbar-drown {
    padding-bottom: 20px;
    border-bottom: 1px solid #e1d8d0
}

.matelist-body .product-listmenu .navbar-drown .nav-item {
    padding-left: 0;
    padding-right: 0
}

.matelist-body .product-listmenu .navbar-drown li a {
    font-size: 22px;
    border: none
}

.matelist-body .product-listmenu .dropdown-menu .show {
    padding: 0
}

.matelist-body .product-listmenu .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0;
    content: "";
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    background: url(../images/icon_dropdown.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 6px;
    width: 10px;
    position: absolute;
    right: 20px;
    top: 20px
}

.matelist-body .hname-prode .hnam-prodetail {
    background: url(../images/img-bgprolistnew.png);
    background-size: cover;
    background-repeat: no-repeat
}

.matelist-body .hname-prode .hnam-prodetail P {
    font-size: 25px;
    color: #fff;
    padding-left: 10px;
    margin-bottom: 0
}

.matelist-body .hname-prode .supname-prodetail P {
    font-size: 40px;
    color: #f08a2d;
    padding-left: 10px;
    margin-top: 10px;
    line-height: 1em
}

.matelist-body .container .padrow-style {
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 20px
}

.matelist-body .container .padrow-style .padcol-style {
    padding-right: 5px;
    padding-left: 5px
}

.matelist-body .container .img-zoom {
    background: url(../images/img_backprolist2.png);
    text-align: center;
    margin-bottom: 20px
}

.matelist-body .container .img-zoom .img-product .uk-inline {
    z-index: 1
}

.matelist-body .container .img-zoom .img-product img {
    width: 100%;
    margin: 5px;
    float: unset;
    margin-left: 0;
    height: 250px;
    padding: 30px;
    object-fit: contain;
    cursor: grab
}

.matelist-body .container .img-zoom .img-zoompic {
    background: url(../images/search.png);
    background-repeat: no-repeat;
    background-position-x: right;
    height: 25px;
    position: relative;
    top: -25px;
    right: 10px;
    margin-bottom: -15px
}

.matelist-body .container .image-swap {
    padding: 0;
    padding-top: 0
}

.matelist-body .container .image-swap img {
    height: 100px;
    float: left;
    object-fit: contain;
    width: 90%;
    margin: 10px;
    margin-left: 0;
    background: url(../images/img_backprolist2.png);
    text-align: center;
    padding: 10px
}

.matelist-body .container .image-swap img:hover {
    border: #380303 2px solid
}

.matelist-body .container .depro .hname-prode .hnam-prodetail {
    background: url(../images/img-bgprolistnew.png);
    background-size: cover;
    background-repeat: no-repeat
}

.matelist-body .container .depro .hname-prode .hnam-prodetail P {
    font-size: 25px;
    color: #fff;
    padding-left: 10px;
    margin-bottom: 0
}

.matelist-body .container .depro .hname-prode .supname-prodetail P {
    font-size: 50px;
    color: #f08a2d;
    margin-bottom: 0;
    padding-left: 10px
}

.matelist-body .container .depro .proper-name {
    background: url(../images/img-lineleft.png);
    background-repeat: no-repeat
}

.matelist-body .container .depro .proper-name P {
    color: #5f4738;
    font-size: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #e1d8d0
}

.matelist-body .container .depro .proper-txt {
    font-family: 'DB Helvethaica X Reg';
    color: #5f4738;
    font-size: 22px;
    line-height: 1.2em;
    margin-bottom: 0
}

.matelist-body .container .depro .proper-txt img {
    width: 100%
}

.matelist-body .container .depro .proper-ul {
    list-style: none;
    padding-left: 25px
}

.matelist-body .container .depro .proper-ul li {
    font-family: 'DB Helvethaica X Reg';
    color: #5f4738;
    font-size: 22px;
    line-height: 1.2em
}

.matelist-body .container .depro .proper-ul li::before {
    content: "\2022";
    color: #f08a2d;
    font-weight: 700;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}

.matelist-body .container .contact-feil {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.matelist-body .container .contact-feil .btn-contactedi {
    background-color: #f08a2d;
    border-radius: 50px;
    display: inline-block;
    cursor: pointer;
    font-family: 'DB Helvethaica X Med';
    font-size: 22px;
    padding: 8px 15px;
    color: #fff;
    text-decoration: none;
    border: 1px solid #fff;
    width: auto;
    min-width: 290px;
    margin-bottom: 10px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    -o-border-radius: 50px;
}

.matelist-body .container .contact-feil .btn-contactedi img {
    width: 20%;
    margin-right: 5px
}

.matelist-body .container .contact-feil .btn-contactedi a:hover {
    color: unset;
    text-decoration: none
}

.matelist-body .container .contact-feil .btn-contactedi:hover {
    background-color: #673b15
}

.matelist-body .container .contact-feil .btn-contactedi:active {
    position: relative;
    top: 1px
}

.matelist-body .demate-pro {
    background-color: #f5f6f5;
    padding-top: 20px
}

.matelist-body .demate-pro .container .proper-name {
    background: url(../images/img-lineleft.png);
    background-repeat: no-repeat
}

.matelist-body .demate-pro .container .proper-name P {
    font-family: 'DB Helvethaica X Med';
    color: #5f4738;
    font-size: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #e1d8d0
}

.matelist-body .demate-pro .container .img-demate {
    padding-bottom: 5%
}

.matelist-body .demate-pro .container .img-demate img {
    width: 100%
}

.matelist-body .demate-pro .container .img-demate P {
    font-size: 25px;
    line-height: 1em;
    font-family: DB Helvethaica X Reg
}

.matelist-body .spec-pro {
    background-color: #fff;
    padding-top: 20px
}

.matelist-body .spec-pro .container .proper-name {
    background: url(../images/img-lineleft.png);
    background-repeat: no-repeat
}

.matelist-body .spec-pro .container .proper-name P {
    font-family: 'DB Helvethaica X Med';
    color: #5f4738;
    font-size: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #e1d8d0
}

.matelist-body .spec-pro .container .spec-detail {
    overflow-x: scroll;
    padding-bottom: 20px
}

.modal_set {
    font-family: 'DB Helvethaica X Reg';
    font-size: 22px;
    color: black;

    .modal-content {
        background: url(../images/img_backfooterwood.png);
        padding: 20px;
    }

    .modal_border {
        background-color: #E0D3B8;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
            rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .modal_close_edit {
        position: absolute;
        right: 0;
        top: -60px;
        opacity: 1;
        background-color: #f58733;
        border-radius: 50px;
        padding: 5px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px,
            rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .modal_close_edit:hover {
        opacity: 1;
    }

    .modal_close_edit img {
        width: 30px;
        height: 30px;
    }

    .title_name {
        text-align: center;
    }

    .title_name .hnam-prodetail p {
        font-family: 'DB Helvethaica X Med';
        color: #5F4738;
        font-size: 45px;
        opacity: 0.9;
        line-height: 1em;
        margin-bottom: 0;
    }

    .title_name .supname-prodetail p {
        font-family: 'DB Helvethaica X Med';
        color: #f08a2d;
        font-size: 30px;
        opacity: 0.9;
        line-height: 1em;
    }

    /* table  */
    .product_size_title {
        display: flex;
        justify-content: center;
        padding: 0;
    }

    .product_size_title .product_size_set {
        color: white;
        width: 50%;
        height: 50px;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
    }

    .product_size_title .text_product {
        background-color: #F68E20;
    }

    .product_size_title .text_size {
        background-color: #83603F;
    }

    .product_size {
        padding: 0px;
        border: 1px solid white !important;
        border-top: 0px !important;
    }

    .product_size p {
        margin-bottom: 0;
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        background-color: #83603F;
        height: 50px;
    }

    .product_subname {
        border: 0px;
        padding: 0;
    }



    .product_subname p {
        background-color: #F68E20;
        color: white;
        font-size: 30px;
        margin-bottom: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_price_mm {
        padding: 0px;
        border: 1px solid white !important;
        border-top: 0px !important;
    }

    .product_price_mm p {
        background-color: #83603F;
        color: white;
        font-size: 25px;
        margin-bottom: 0;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_price_mm span {
        font-size: 35px;
        margin-right: 5px;
        font-family: 'DB Helvethaica X Med';
    }



}

.table-responsive .table thead th {
    border: 0px;
}

.table-responsive tr {
    border-left: 1px solid white;
    border-top: 1px solid white;
}

.product_subname:first-child,
.product_price_mm:first-child {
    border: 1px solid white !important;
}

@media screen and (max-width: 700px) {
    .prolist-body .container {
        max-width: 100%
    }
}

@media screen and (min-width: 768px) {
    .matepro-body {
        margin-top: 15px
    }

    .matepro-body .container {
        padding-right: 15px;
        padding-left: 15px
    }

    .matepro-body .container .product-listmenu {
        margin-top: 51px
    }

    .matepro-body .container .product-listmenu .navbar .nav-item .icon-line {
        display: none;
        float: right;
        position: relative;
        top: -85%;
        left: 20px
    }

    .matepro-body .container .product-listmenu .navbar-collapse {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .matepro-body .container .product-listmenu .navbar-nav {
        flex-direction: column;
        width: 100%
    }

    .matepro-body .container .product-listmenu .navbar-nav li a {
        width: 100%;
        text-align: left;
        font-size: 25px;
        padding-left: 15px;
        padding-bottom: 0
    }

    .matepro-body .container .product-listmenu .navbar-nav a.active {
        color: #fff;
        background: url(../images/img_bglistpro.png)
    }

    .matepro-body .container .product-listmenu .navbar-nav a.hover {
        color: #fff
    }

    .matepro-body .container .product-listmenu .nav-item {
        padding-left: 0;
        padding-right: 0
    }

    .matepro-body .container .product-listmenu .ima-search {
        width: 10%;
        position: relative;
        left: 5px;
        bottom: 3px
    }

    .matepro-body .container .product-listmenu .hnamebar {
        font-size: 25px;
        margin-bottom: 0;
        padding-top: 5px;
        padding-bottom: 5px
    }

    .matepro-body .container .product-listmenu .navbar-drown {
        margin-left: 0
    }

    .matepro-body .container .product-listmenu .navbar-drown .nav-item {
        padding-left: 0;
        padding-right: 0
    }

    .matepro-body .container .product-listmenu .navbar-drown li a {
        font-size: 22px;
        border: none
    }

    .matepro-body .container .product-listmenu .dropdown-menu .show {
        padding: 0
    }

    .matepro-body .container .product-listmenu .dropdown-toggle::after {
        height: 6px;
        width: 10px;
        right: 20px;
        top: 20px
    }

    .matepro-body .container .hnam-prolist P {
        font-size: 30px;
        margin: 0;
        margin-left: -10px;
        margin-bottom: 5px
    }

    .matepro-body .container .padrow-style {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 20px
    }

    .matepro-body .container .padrow-style .padcol-style {
        padding-right: 5px;
        padding-left: 5px
    }

    .matepro-body .container .headproduct-list {
        margin-bottom: 10px
    }

    .matepro-body .container .headproduct-list .bodyproduct-list {
        padding: 10px;
        height: 210px
    }

    .matepro-body .container .headproduct-list .bodyproduct-list img {
        width: 100%;
        height: auto
    }

    .matepro-body .container .headproduct-list .bodyproduct-list .txt-namelist {
        font-size: 22px;
        margin-top: 10px;
        line-height: 1em
    }

    .matepro-body .container .headproduct-list .btn-style1 a P {
        font-size: 40px;
        margin-bottom: 0;
        bottom: 10px;
        margin-left: 4px
    }

    .matepro-body .container .headproduct-list .btn-style1:hover a P {
        font-size: 40px;
        margin-bottom: 0;
        bottom: 10px;
        margin-left: 4px
    }

    .matelist-body {
        margin-top: 30px
    }

    .matelist-body .hname-prode .hnam-prodetail {
        background: url(../images/img-bgprolistnew.png);
        background-size: contain !important;
        background-repeat: no-repeat
    }

    .matelist-body .hname-prode .hnam-prodetail P {
        font-size: 25px;
        color: #fff;
        padding-left: 10px;
        margin-bottom: 0
    }

    .matelist-body .hname-prode .supname-prodetail P {
        font-family: 'DB Helvethaica X Med';
        font-size: 50px;
        color: #f08a2d;
        margin-bottom: 0;
        padding-left: 10px
    }

    .matelist-body .container .padrow-style {
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 20px
    }

    .matelist-body .container .padrow-style .padcol-style {
        padding-right: 5px;
        padding-left: 5px
    }

    .matelist-body .container .img-zoom {
        text-align: center
    }

    .matelist-body .container .img-zoom .img-product img {
        width: 100%;
        margin: 5px;
        float: unset;
        margin-left: 0;
        height: 250px;
        padding: 10px;
        object-fit: contain;
        cursor: grab
    }

    .matelist-body .container .img-zoom .owl-dots {
        display: none
    }

    .matelist-body .container .image-swap {
        padding: 0;
        padding-top: 0
    }

    .matelist-body .container .image-swap img {
        height: 100px;
        float: left;
        object-fit: contain;
        width: 90%;
        margin: 10px;
        margin-left: 5px;
        text-align: center;
        padding: 10px
    }

    .matelist-body .container .depro .hname-prode .hnam-prodetail P {
        font-size: 25px;
        padding-left: 10px;
        margin-bottom: 0
    }

    .matelist-body .container .depro .hname-prode .supname-prodetail P {
        font-size: 35px;
        margin-bottom: 20px;
        padding-left: 0
    }

    .matelist-body .container .depro .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .container .depro .proper-txt {
        font-size: 22px;
        line-height: 1.2em;
        margin-bottom: 0
    }

    .matelist-body .container .depro .proper-ul {
        list-style: none;
        padding-left: 25px
    }

    .matelist-body .container .depro .proper-ul li {
        font-size: 22px;
        line-height: 1.2em
    }

    .matelist-body .container .contact-feil {
        margin: 10px;
    }

    .matelist-body .container .contact-feil .btn-contactedi {
        font-size: 25px;
        text-align: center;
        padding: 4px 20px
    }

    .matelist-body .container .contact-feil .btn-contactedi img {
        width: 40px;
    }

    .matelist-body .demate-pro {
        padding-top: 20px
    }

    .matelist-body .demate-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .demate-pro .container .img-demate img {
        width: 100%
    }

    .matelist-body .spec-pro {
        padding-top: 20px
    }

    .matelist-body .spec-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .spec-pro .container .spec-detail {
        overflow-x: scroll;
        padding-bottom: 20px
    }

    .modal_close_edit {
        right: -20px !important;
        top: -20px !important;
    }
}

@media screen and (min-width: 992px) {
    .matelist-body .demate-pro {
        padding-top: 20px
    }

    .matelist-body .demate-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .demate-pro .container .img-demate img {
        width: 100%
    }

    .matelist-body .spec-pro {
        padding-top: 20px
    }

    .matelist-body .spec-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .spec-pro .container .spec-detail {
        overflow-x: scroll;
        padding-bottom: 20px
    }
}

@media screen and (min-width: 1200px) {
    .matepro-body .container {
        padding-right: 15px;
        padding-left: 15px
    }

    .matepro-body .container .product-listmenu {
        margin-top: 51px
    }

    .matepro-body .container .product-listmenu .navbar .nav-item .icon-line {
        display: none;
        float: right;
        position: relative;
        top: -85%;
        left: 20px
    }

    .matepro-body .container .product-listmenu .navbar-collapse {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none
    }

    .matepro-body .container .product-listmenu .navbar-nav li a {
        width: 100%;
        text-align: left;
        font-size: 25px;
        padding-left: 15px;
        padding-bottom: 0
    }

    .matepro-body .container .product-listmenu .nav-item {
        padding-left: 0;
        padding-right: 0
    }

    .matepro-body .container .product-listmenu .ima-search {
        width: 10%;
        position: relative;
        left: 5px;
        bottom: 3px
    }

    .matepro-body .container .product-listmenu .hnamebar {
        font-size: 25px;
        margin-bottom: 0;
        padding-top: 5px;
        padding-bottom: 5px
    }

    .matepro-body .container .product-listmenu .navbar-drown {
        margin-left: 0
    }

    .matepro-body .container .product-listmenu .navbar-drown .nav-item {
        padding-left: 0;
        padding-right: 0
    }

    .matepro-body .container .product-listmenu .navbar-drown li a {
        font-size: 22px;
        border: none
    }

    .matepro-body .container .product-listmenu .dropdown-menu .show {
        padding: 0
    }

    .matepro-body .container .product-listmenu .dropdown-toggle::after {
        height: 6px;
        width: 10px;
        right: 20px;
        top: 20px
    }

    .matepro-body .container .hnam-prolist P {
        font-size: 30px;
        margin: 0;
        margin-left: -10px;
        margin-bottom: 5px
    }

    .matepro-body .container .padrow-style {
        padding-right: 0;
        padding-left: 0;
        padding-bottom: 20px
    }

    .matepro-body .container .padrow-style .padcol-style {
        padding-right: 5px;
        padding-left: 5px
    }

    .matepro-body .container .headproduct-list {
        margin-bottom: 10px
    }

    .matepro-body .container .headproduct-list .bodyproduct-list {
        text-align: center;
        padding: 10px;
        height: 330px;
        overflow: hidden
    }

    .matepro-body .container .headproduct-list .bodyproduct-list .txt-namelist {
        font-size: 30px
    }

    .matepro-body .container .headproduct-list .btn-style1 {
        width: 50px;
        height: 50px
    }

    .matepro-body .container .headproduct-list .btn-style1 a P {
        font-size: 50px;
        margin-bottom: 0;
        bottom: 6px;
        margin-left: 7px
    }

    .matepro-body .container .headproduct-list .btn-style1:hover {
        width: 50px;
        height: 50px
    }

    .matepro-body .container .headproduct-list .btn-style1:hover a P {
        font-size: 50px;
        margin-bottom: 0;
        bottom: 6px;
        margin-left: 7px
    }

    .matelist-body .hname-prode .hnam-prodetail P {
        font-size: 25px;
        padding-left: 10px;
        margin-bottom: 0
    }

    .matelist-body .hname-prode .supname-prodetail P {
        font-size: 50px;
        margin-bottom: 0;
        padding-left: 10px
    }

    .matelist-body .container .padrow-style {
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 20px
    }

    .matelist-body .container .padrow-style .padcol-style {
        padding-right: 5px;
        padding-left: 5px
    }

    .matelist-body .container .img-zoom {
        height: 400px;
        object-fit: contain
    }

    .matelist-body .container .img-zoom .img-product img {
        height: 390px;
        padding: 40px;
        margin: 0
    }

    .matelist-body .container .image-swap {
        padding: 0;
        padding-top: 0
    }

    .matelist-body .container .image-swap img {
        height: 100px;
        float: left;
        object-fit: contain;
        width: 90%;
        margin: 10px;
        margin-left: 5px;
        text-align: center
    }

    .matelist-body .container .depro .hname-prode .hnam-prodetail P {
        font-size: 30px;
        padding-left: 10px;
        margin-bottom: 0
    }

    .matelist-body .container .depro .hname-prode .supname-prodetail P {
        font-size: 40px;
        margin-bottom: 20px;
        padding-left: 0
    }

    .matelist-body .container .depro .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .container .depro .proper-txt {
        font-size: 25px;
        line-height: 1.2em;
        margin-bottom: 0
    }

    .matelist-body .container .depro .proper-ul {
        list-style: none;
        padding-left: 25px
    }

    .matelist-body .container .depro .proper-ul li {
        font-size: 25px;
        line-height: 1.2em
    }

    .matelist-body .container .contact-feil {
        gap: 10px;
        flex-direction: row;
    }

    .matelist-body .container .contact-feil .btn-contactedi {
        font-size: 25px;
        padding: 8px 30px;
        min-width: 220px;
    }

    .matelist-body .container .contact-feil .btn-contactedi img {
        width: auto;
        margin-right: 5px
    }

    .matelist-body .demate-pro {
        padding-top: 20px
    }

    .matelist-body .demate-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .demate-pro .container .img-demate img {
        width: auto;
        min-width: 600px
    }

    .matelist-body .spec-pro {
        padding-top: 20px;
        margin-bottom: 20px
    }

    .matelist-body .spec-pro .container .proper-name P {
        font-size: 30px;
        padding-left: 10px
    }

    .matelist-body .spec-pro .container .spec-detail {
        overflow-x: unset
    }
}