﻿.info-page{width:100%; float:left; padding-top:50px;}
.info-page .left-info{width:330px; position:relative; float:left;}
.info-page .left-info:before{content:''; width:100%; height:100%; background:rgba(0,0,0,.1); position:absolute; top:0; left:0;  --border-radius: 16px; --size-corner: 44px;  --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat; border-radius:12px ; transition: all .5s ease; mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
.info-page .left-info:after{content:''; width:calc(100% - 2px); height:calc(100% - 2px); background:#fff url(bg-itemProduct.png) no-repeat 80px bottom; background-size: auto 130px; z-index:2; position:absolute; top:1px; left:1px;  --border-radius: 16px; --size-corner: 44px;  --mask: /calc(2*var(--border-radius)) calc(2*var(--border-radius)) radial-gradient(#000 70%,#0000 74%) no-repeat; border-radius:12px ; transition: all .5s ease; mask: right 0 bottom calc(var(--size-corner) + var(--border-radius)) var(--mask), right calc(var(--size-corner) + var(--border-radius)) bottom 0 var(--mask), radial-gradient(var(--size-corner) at 100% 100%, #0000 99%, #000 101%) calc(-1* var(--border-radius)) calc(-1* var(--border-radius)) no-repeat, conic-gradient(from 90deg at calc(100% - var(--size-corner) - 2* var(--border-radius)) calc(100% - var(--size-corner) - 2* var(--border-radius)), #0000 25%, #000 0);}
.info-page .left-info .wrap-catalog{width:100%; border-radius:22px 22px 22px 22px;position:relative; float:left; padding: 25px 30px 15px 30px; z-index:5;}
.info-page .left-info .wrap-catalog:after{content:"\f4a6"; right:0; bottom:0;  width:50px; height:50px; font-size:20px; color:#fff; display:flex; align-items:center; justify-content:center; background:var(--color1); border-radius:50%; position:absolute; z-index:4; font-family: "Font Awesome 5";  font-weight: 300; transition:.3s} 
.info-page .left-info .wrap-catalog .title{display: block;padding-bottom: 5px;position: relative; width:100%; float:left;}
.info-page .left-info .wrap-catalog .title span{font-weight: 600;color:var(--color1); font-size: 24px; font-family: "Signika", sans-serif;  position:relative;}
.info-page .left-info ul{margin:0; padding:0; list-style:none; width:100%;}
.info-page .left-info ul li{width:100%; float:left; position:relative; border-top:1px dashed rgba(0,0,0,.1)}
.info-page .left-info ul li:first-child{border:none;}
.info-page .left-info ul li a{text-decoration:none; color:#000; font-size:16px; position:relative; padding:15px 0px 15px 20px; display:block; transition:.3s; white-space:nowrap }
.info-page .left-info ul li a:before{content:''; background:var(--color1); border-radius:50%; width:8px; height:8px; margin-top:-5px;  display:block; position:absolute; top:50%; left:0;}
.info-page .left-info ul li a:hover,
.info-page .left-info ul li a.current{color:var(--color1)}
.info-page .left-info ul li a.current:before{border-color:var(--color1)}
.info-page .right-info{width:calc(100% - 380px); position:relative; float:right; }
.info-page .right-info .title-page{float:left;font-size:30px; font-weight:600; display:block; color:var(--color1); padding-bottom:15px; font-family: "Signika", sans-serif;}
.info-page .right-info .content-page{width:100%; float:left; position:relative; font-size:16px; line-height:26px; color:#000}
.info-page .right-info .content-page img{max-width:100%; width:initial!important; height:initial!important; display:block; margin: 20px auto;}
.pxl-divider-separator{width:100%; float:left; height:1px; --clr-border: #0D401C26; background-image: repeating-linear-gradient(90deg, var(--clr-border), var(--clr-border) 7px, transparent 7px, transparent 11px); background-repeat: no-repeat; margin-bottom:25px;}

@media (max-width:767px){

    .info-page{padding-bottom:0; padding-top:30px;}
    .info-page .left-info{display:none!important}
    .info-page .right-info{width:100%;}
    .info-page .right-info .title-page,
    .pxl-divider-separator{display:none;}
}

@media (min-width:678px) and (max-width: 991px){
    .info-page .left-info{display:none!important}
    .info-page .right-info{width:100%;}
}