tools.css in appscms-tools-theme-3.4.4

- old
+ new
@@ -1592,5 +1592,91 @@
   -webkit-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   transition: all 0.3s ease;
   border-radius: 5px;
 }
+/* infographics csss */
+.infographics_section {
+  width: 100%;
+  padding: 50px 0px 50px 0px;
+  border-top: 1px solid rgb(224, 224, 224);
+}
+
+.infographics_section .infographics-desc {
+  position: absolute;
+  color: #fff;
+  bottom: 30px;
+}
+
+.infographics_section .slider {
+  position: relative;
+  max-width: 40rem;
+  height: 26.625rem;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.infographics_section  .slide {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 26.625rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 1s;
+}
+
+.infographics_section  .slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.infographics_section button {
+  background: none;
+  border: none;
+}
+
+.infographics_section button .fas {
+  color:#fff;
+}
+
+.infographics_section .btn-slide {
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+
+  height: 5.5rem;
+  width: 5.5rem;
+  cursor: pointer;
+}
+
+.infographics_section .prev {
+  left: 3rem;
+  transform: translate(-50%, -50%);
+}
+
+.infographics_section  .next {
+  right: 3rem;
+  transform: translate(50%, -50%);
+}
+
+.infographics_section .dots-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.infographics_section  .dot {
+  width: 25px;
+  height: 5px;
+  margin: 15px 5px;
+  border-radius: .5rem;
+  background: rgba(39, 39, 39, .5);
+  cursor: pointer;
+}
+
+.infographics_section  .dot.active {
+  background: #272727;
+}