.nav-img{ display: inline-flex; margin:20px 10px 0px 0px;  padding: 0px; width:80px; height: 80px;}
.nav-txt{ display: inline-flex; width:calc(100% - 100px);  padding-top: 20px; padding-left:20px;font-size: 2.5rem; font-weight:700!important; color:#fff  }
.cms-product-item { width:100%; max-width: 1160px; margin:30px auto;  padding:0px; }
.cms-product-item li { width: 100%; margin:50px 0px;padding:50px 0px; position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; border-bottom: solid 1px #dff2ff;transition: all 0.5s ease 0s; }
.cms-product-item li:hover {  } 
.cms-product-item li figure{  width:30%; height: auto; margin-bottom:0px; overflow: hidden; background-color:transparent;   position: relative;z-index: 1;   }
.cms-product-item li figure img {  width: 100%; max-width: 100%; height: auto;transition: all 0.5s ease 0s; clip-path: polygon(0 9%, 100% 0, 100% 90%, 0% 100%); }
.cms-product-item li figure:hover img { transform: scale(1.1);  opacity: .85; }
.cms-product-item li .cms-product-inner{width:50%; margin: 0px; padding:5px 30px;  display: flex; flex-wrap: wrap; justify-content: flex-start; align-content:center; align-items: center;  } 
#cms-main .cms-product-item li h3{flex: 0 0 100%; padding:0px; margin:0px 0px 20px 0px;width: 100%; font-weight:700; font-size:2rem;  line-height:2rem; color:#0070bd;  word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
#cms-main .cms-product-item li p{ flex: 0 0 100%;   margin:5px 0px; padding: 0px;  font-size:1rem; line-height: 1.5rem;  font-weight: 400; /*overflow: hidden; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;*/} 
.more-icon{width: 20%; }
.more-icon a{ display: flex; flex-wrap: wrap; align-items: center; color:#eb9924; }
.more-icon i{width:36px; height: 36px; display: inline-block; margin-right: 5px; }
.nav-item { text-align: center; width:100px;height: auto; padding-bottom: 34px; position: absolute;left: 0px;bottom :0px;  z-index: 9;}
.nav-item:hover .nav-img {background-color: #0070bd}
.nav-item:hover .nav-img img {  filter: invert(1);  opacity: 1}
.nav-item:hover .nav-img:before { border: dashed 1px #fff; filter: grayscale(1) brightness(1) opacity(1);}
.nav-item:hover p { color: #0070bd}
.nav-img {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:10px;width: 88px;height: 88px;border-radius: 50%;background-color: #eeeeee;position: relative;}
.nav-img:before { content: ""; width: calc(100% - 16px);  height: calc(100% - 16px); display: block;  border: dashed 1px #000; border-radius:99rem; position: absolute; filter: grayscale(1) brightness(0) opacity(0.3); animation: rotateIt 20s infinite linear; transform-origin: 50% 50%;}
.nav-img img {  margin: auto;display: block;  width: 52px; height: 52px; opacity: 0.7;  }
.nav-item p{ font-size:0.875rem; color: #000; font-weight: 700; line-height: 1rem; }

 @media (max-width: 767.98px) {
.cms-product-item li {   margin:20px 0px;padding:20px 0px; }
.cms-product-item li figure{  width:100%; }   
.cms-product-item li .cms-product-inner{width:100%; margin: 0px; padding:5px 0px; }
.nav-item { position: absolute;left: 0px;bottom :auto; top:26%;  }
.more-icon{width: 100%; }    
}
@keyframes rotate {
  0% { transform: rotate(0deg) }
  to { transform: rotate(360deg)  }
}
@keyframes rotate2 {
  0% { transform: rotate(0deg) scale(1) }
  to { transform: rotate(-359deg) scale(1)  }
}
@keyframes rotateIt {
  to { transform: rotate(-360deg); }
} 
/* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}
 /* Sweep To Right */
.hvr-sweep-to-right { cursor: pointer; display: inline-block; position: relative; vertical-align: middle;  -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #000!important; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%;  -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { color: #fff!important;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

.text-button { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.125rem; cursor: pointer; display: inline-block; color: currentColor;margin-top: 2.1875rem;  padding-left: 2.1875rem; position: relative; transition: padding 0.3s ease}
.text-button::before { content: ''; display: inline-block; position: absolute; left: 0; top: 50%; width: 1.5625rem; height: 0.0625rem; background: currentColor; vertical-align: middle; margin-right: 0.625rem; transition: padding 0.3s ease}
@media (hover: hover) {
.text-button:hover { /*color: currentColor;*/ padding-left: 2.8125rem  }
/*.text-button:hover:before { width: 2.1875rem; color: currentColor  }*/
}