.item-head h1 {
    padding: 10px 20px;
    background: #19919f;
    color: #fff;
    display: flex;
    position: relative;
    height: 60px;
    box-sizing: border-box;
    margin: auto;
    z-index: 2;
    align-items: center;
    align-self: center
}

.item-head h1:after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 50px;
    border-bottom: 0;
    border-top: solid transparent 60px;
    border-left: solid 30px #19919f;
    border-right: 0
}

.item-head-shadow {
    position: absolute;
    width: 100%;
    transform: translate(22px, 14px);
    height: 100%;
    background: #2c3e50;
    top: 0
}

.item-head-shadow:after {
    content: '';
    position: absolute;
    left: 100%;
    bottom: 0;
    width: 50px;
    border-bottom: 0;
    border-top: solid transparent 60px;
    border-left: solid 30px #2c3e50;
    border-right: 0
}

.item-head {
    margin: 60px 0 82px;
    display: flex;
    flex-direction: column;
    position: relative
}

.items {
    display: flex;
    padding: 0 30px;
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.item {
    width: 25%;
    padding: 0 15px 30px;
    box-sizing: border-box
}

.item-top h2 {
    font-size: 17px;
    margin: auto auto 2px
}

.item-top {
    background: #19919f;
    color: #fff;
    text-align: center;
    height: 50px;
    align-items: center;
    display: flex;
    flex-direction: column
}

.item-top p {
    margin: 0 auto auto;
    font-weight: 500;
    font-size: 13px
}

.item-mid {
    height: 180px;
    width: 100%;
    background-position: center;
    background-size: cover
}

.item-bot .header-bg {
    margin: auto;
    color: #fff;
    height: 40px;
    text-align: center;
    align-items: center;
    display: flex;
    right: 0;
    left: auto;
    width: auto;
    padding: 0 20px;
    transform: translateY(-50%);
    background: #19919f;
    z-index: 2;
    font-size: 17px
}

.itemsin {
    display: flex;
    width: calc(100% + 30px);
    left: -15px;
    position: relative
}

.items-top {
    display: flex
}

.itemsout {
    width: 100%;
    position: relative;
    z-index: 2
}

.item-bot {
    align-items: center;
    display: flex;
    width: 100%;
    text-align: center;
    background: #2c3e50;
    position: relative;
    height: 40px
}

.item-bot p:before {
    border-bottom: solid #19919f 40px;
    transform: none;
    border-left: solid 20px transparent;
    left: -1.6rem
}

.item-bot font {
    position: relative;
    font-weight: 600
}

.items2 .item-head h1 {
    background: #2c3e50
}

.items2 .item-head h1:after {
    border-left: solid 30px #2c3e50
}

.items2 .item-head-shadow {
    background: #19919f
}

.items2 .item-head-shadow:after {
    border-left: solid 30px #19919f
}

.items3 .item-top {
    background: #2c3e50
}

.sticker {
    position: absolute;
    top: 0;
    left: -20px
}

.sticker:before {
    font-size: 110px;
    position: absolute;
    left: -5px;
    top: -5px;
    transition: .3s
}

.is p {
    width: auto;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    transform: translateY(-50%) rotate(-10deg);
    top: 50%;
    position: absolute;
    margin: auto;
    font-family: Oswald
}

.isin {
    position: absolute;
    background: #fff;
    width: 95px;
    height: 95px;
    border-radius: 50%;
    left: 2px;
    top: 2px;
    z-index: 2;
    overflow: hidden
}

.is {
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border: solid 2px #2c3e50;
    border-radius: 50%;
    position: relative;
    top: 2.5px;
    left: 2.5px;
    display: flex;
    align-items: center;
    z-index: 2
}

.isin:after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    background: #f5f5f5;
    width: 70%;
    height: calc(100% + 10px);
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    transform: rotate(-10deg)
}

.sticker:hover:before {
    transform: rotate(180deg)
}

.products {
    display: flex;
    max-width: 1600px;
    margin: auto;
    margin-top: 30px;
    width: 100%;
    box-sizing: border-box
}

.products-in {
    display: flex;
    width: 100%;
    box-sizing: border-box
}

.products-right {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.itemsin {
    flex-wrap: wrap
}

.products-left {
    min-width: 350px;
    background: #19919f;
    color: #fff;
    position: relative;
    height: 100%
}

.product-head {
    font-size: 1.5rem;
    font-weight: 700
}

.products-left h1 {
    font-size: 1.5rem;
    background: #2c3e50;
    padding: 15px 30px;
    margin: 0 30px 15px 0;
    position: relative;
    width: 100%;
    box-sizing: border-box
}

.products-left ul li a {
    padding: 12.5px 30px;
    transition: .3s
}

.products-left ul {
    display: flex;
    flex-direction: column
}

.products-left ul li {
    display: flex;
    flex-direction: column
}

.products-leftin {
    position: sticky;
    top: 0
}

.product-sub[data-state=open] {
    background: #2c3e50
}

.products-left dl li a {
    font-weight: 500
}

.product-sub:hover {
    background: #2c3e50
}

.products-left span {
    display: none
}

#showmore {
    border: 0;
    background: #19919f;
    color: #fff;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    display: table;
    margin: auto auto 60px;
    cursor: pointer;
    transition: .3s
}

.disappear {
    opacity: 0;
    visibility: hidden
}

.prs {
    display: flex;
    margin: auto;
    padding: 0 30px 30px 30px
}

.squared {
    min-width: 300px;
    width: 300px;
    min-height: 200px;
    height: 200px;
    position: relative;
    margin: 15px;
    box-sizing: border-box
}

.prs p {
    font-size: 1.3rem;
    margin: auto;
    line-height: 1.7;
    padding-right: 30px;
    font-weight: 600;
    color: #19919f
}

.squaredimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    z-index: 1
}

.squared:before {
    border-top: solid 230px #19919f;
    border-bottom: 0;
    border-right: solid 330px #2b3e50;
    content: '';
    position: absolute;
    top: -15px;
    left: -15px
}

p.prslog {
    width: 100%;
    text-align: center;
    line-height: 1.7;
    color: #fff;
    background: #2c3e50;
    padding: 15px 0;
    box-sizing: border-box;
    font-weight: 600;
    margin: auto auto 0;
    font-size: 1.3rem
}

.prslog font {
    max-width: 40rem;
    display: table;
    margin: auto
}

.squared:after {
    position: absolute;
    top: -15px;
    left: -15px
}

.products-rightin {
    display: flex;
    flex-direction: column
}

.prn {
    height: 100%
}

.prnimgs .squared {
    margin-bottom: auto
}

.prnimgs {
    display: flex;
    flex-direction: column
}

.prb {
    flex-direction: column;
    height: 100%;
    box-sizing: border-box
}

.prbimgs {
    flex-direction: row;
    display: flex;
    margin: auto 0
}

.prbimgs .squared {
    margin: auto
}

.prsf {
    margin: auto
}

.prsfimgs {
    display: flex;
    flex-direction: column;
    height: 100%
}

.prsfimgs .squared {
    margin: auto
}

.prs.prsf {
    height: 100%
}

.products-left a[data-state=open] {
    background: #2c3e50
}

.cat1 .item {
    width: 50%
}

.cat1 .item-mid {
    height: 250px
}

@media(max-width:1366px) {
    .squared {
        min-width: 220px;
        width: 220px;
        min-height: 150px;
        height: 150px
    }
    .squared:before {
        border-top: solid 180px #19919f;
        border-right: solid 250px #2b3e50
    }
}

@media(max-width:1900px) {
    .item-mid {
        height: 180px
    }
}

@media(max-width:1600px) {
    .item-mid {
        height: 160px
    }
    .mid {
        width: calc(25% - 100px)
    }
    .mid0:after {
        border-left: solid calc((var(--dwidth)/ 4) - 100px) #fff
    }
    .mid1:after {
        border-right: solid calc((var(--dwidth)/ 4) - 100px) #fff
    }
    .mid-top {
        padding: 6px
    }
}

@media(max-width:1366px) {
    .products-left {
        min-width: 260px
    }
    .mid span {
        font-size: 40px;
        width: 80px;
        height: 80px;
        border-radius: 50%
    }
    span.icon-hn3 {
        font-size: 32px
    }
    .mid-top {
        padding: 4px
    }
    .mid h3 {
        margin: 3.16vh auto
    }
    .mid-mid {
        padding: 40px 20px 12vh
    }
    .item-mid {
        height: 190px
    }
    .is p {
        font-size: 13px;
        font-weight: 500
    }
    .isin {
        width: 80px;
        height: 80px;
        left: 5px;
        top: 5px
    }
    .sticker:before {
        font-size: 90px;
        left: 0;
        top: 0
    }
    .is {
        left: 3px;
        top: 3px
    }
    .item {
        width: 33.33%
    }
}

@media(max-width:1276px) {
    .topin-sticker {
        right: 30px
    }
    .items,
    .reviewsin,
    .topinin {
        padding-left: 30px;
        padding-right: 30px
    }
    .item,
    .mid-mid {
        padding-left: 15px;
        padding-right: 15px
    }
    .item-mid {
        height: 180px
    }
    .item-bot .header-bg {
        font-size: 15px;
        height: 35px;
        padding: 0 15px
    }
    .item-bot p:before {
        border-bottom: solid #19919f 35px
    }
    .item-top h2 {
        font-size: 16px
    }
    .item-top p {
        font-size: 13px
    }
    .item-top {
        height: 50px
    }
    .item-bot {
        height: 34px
    }
    .mid {
        width: calc(25% - 60px)
    }
    .mid0:after {
        border-left: solid calc((var(--dwidth)/ 4) - 60px) #fff
    }
    .mid1:after {
        border-right: solid calc((var(--dwidth)/ 4) - 60px) #fff
    }
    .contac-two,
    .contact-three {
        padding: 0 15px
    }
    .home-contact h1:last-child {
        margin-left: 30px
    }
    .home-contact .item-head h1:first-child {
        padding: 0 49px
    }
    textarea.ginputs {
        width: calc(100% - 60px)
    }
}

@media(max-width:1200px) {
    html {
        font-size: 10px
    }
}

@media(max-width:1100px) {
    .item-mid {
        height: 150px
    }
}

@media(max-width:1024px) {
    .item {
        width: 50%
    }
    .prs.prsf {
        flex-direction: column
    }
    .prsfimgs {
        flex-direction: row
    }
    .prsf {
        padding-bottom: 30px
    }
    .cat1 .item-mid {
        height: 200px
    }
}

@media(max-width:900px) {
    .squared {
        margin: 15px auto 30px!important
    }
    .prs {
        flex-direction: column
    }
    .prs p {
        padding-right: 0;
        padding-bottom: 30px
    }
    .cat1 .item {
        width: 100%
    }
    .cat1 .item-mid {
        height: 300px
    }
}

@media(max-width:768px) {
    .item {
        width: 100%
    }
    .cat1 .item-mid {
        height: 240px
    }
    .prsfimgs {
        flex-direction: column
    }
    .prs,
    .prs.prsf {
        padding: 0 15px
    }
    .prsf {
        padding-bottom: 0
    }
    .prs p {
        padding-bottom: 15px
    }
    .topbot {
        padding-bottom: 0
    }
    .products {
        margin-top: 15px
    }
}

@media(max-width:650px) {
    .products .products-left a {
        font-size: 13px
    }
    .products .products-left h1 {
        margin-bottom: 0;
        padding-left: 15px
    }
    .products .products-left a {
        padding: 8px 15px
    }
    .products-left {
        min-width: 228px
    }
    .item {
        padding-bottom: 15px
    }
    .items {
        padding: 0 15px
    }
    .item-top h2 {
        font-size: 14px
    }
    .item-bot .header-bg {
        font-size: 14px
    }
    .cat1 .item-mid {
        height: 200px
    }
}

@media(max-height:680px) {
    .products-left ul li a {
        padding: 10px 30px
    }
}

@media(max-width:500px) {
    .products-left a font {
        display: none
    }
    .products-left {
        min-width: 178px
    }
}

@media(max-width:450px) {
    .item-mid {
        height: 130px
    }
    .cat1 .item-mid {
        height: 140px
    }
}

@media(max-width:420px) {
    .products-right {
        padding-top: 30px
    }
    .item-top p {
        display: none
    }
    .item-top h2 {
        margin: auto
    }
    .item-top {
        height: 34px
    }
    .item-bot .header-bg {
        height: 34px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        white-space: nowrap;
        padding: 0;
        font-size: 13px
    }
    .item-bot p:after {
        content: '';
        position: absolute;
        right: -10px;
        top: 0;
        width: 0;
        transform: translateX(50%);
        height: auto;
        border: solid transparent 34px;
        border-bottom: 0;
        border-right: 0;
        border-left: solid 20px #19919f
    }
    .item-bot p:before {
        right: 100%;
        left: auto;
        width: 0;
        border-bottom: solid #19919f 34px
    }
    .item-mid {
        height: 110px
    }
    .item-bot font {
        font-weight: 700
    }
    .cat1 .item-mid {
        height: 150px
    }
}

@media(max-width:420px) {
    .item-mid {
        height: 180px
    }
    .plbg {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0;
        visibility: hidden;
        transition: .3s;
        z-index: 3
    }
    .products {
        position: relative
    }
    .products-leftin {
        width: 0;
        white-space: nowrap;
        overflow: hidden;
        transition: .3s
    }
    #productsin[data-state=open] .plbg {
        opacity: .2;
        visibility: visible;
        position: fixed;
        top: 0;
        z-index: 4
    }
    #productsin[data-state=open] div#productsLeft {
        background: #19919f
    }
    #productsin[data-state=open] .products-leftin {
        width: 180px;
        background: #19919f
    }
    #productsin[data-state=open] .products-left span {
        margin-left: auto;
        transform: translateX(100%) rotate(180deg)
    }
    div#productsLeft {
        min-width: auto;
        position: absolute;
        top: 0;
        z-index: 5;
        background: 0 0
    }
    .products-left span {
        position: sticky;
        top: 90px;
        left: 0;
        width: 30px;
        height: 30px;
        background: #2c3e50;
        display: block;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        place-content: center
    }
}