@ptcwebops/ptcw-design 6.2.16-beta → 6.2.16

package/dist/collection/components/ptc-preloader-section/ptc-preloader-section.css

@@ -1950,7 +1950,7 @@ ptc-link, ptc-square-card,
   margin-bottom: 38px;
   margin-top: 22px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-1 {
     margin-bottom: 40px;
   }
@@ -1960,25 +1960,35 @@ ptc-link, ptc-square-card,
   margin-bottom: 24px;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-2 {
     margin-bottom: 25px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
-  width: 335px;
+  width: 70%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
+    width: 335px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-3 {
     width: 445px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
-  width: 397px;
+  width: 85%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
+    width: 397px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-4 {
     width: 525px;
   }
@@ -1988,54 +1998,79 @@ ptc-link, ptc-square-card,
   align-self: center;
   margin-bottom: 20px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-5 {
     width: 769px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
-  width: 411px;
+  width: 95%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
+    width: 411px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-6 {
     width: 621px;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
-  width: 383px;
+  width: 85%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
+    width: 383px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-7 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
-  width: 435px;
+  width: 98%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
+    width: 435px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-8 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
-  width: 199px;
+  width: 60%;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
+    width: 199px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-9 {
     display: none;
   }
 }
 .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
-  width: 411px;
+  width: 70%;
   margin-top: 32px;
   margin-bottom: 65px;
   align-self: center;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
+    width: 411px;
+  }
+}
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .jumbotron .jumbotron-bg .short-10 {
     width: 232px;
     margin-top: 35px;
@@ -2060,7 +2095,7 @@ ptc-link, ptc-square-card,
   width: 65%;
   margin-bottom: 20px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .short-16 {
     width: 275px;
   }
@@ -2068,7 +2103,7 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .short-11 {
   width: 95%;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .short-11 {
     width: 60%;
   }
@@ -2076,14 +2111,25 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .short-12 {
   width: 89%;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .short-12 {
     display: none;
   }
 }
 .preloader-events-listing .short-15 {
-  width: 290px;
+  width: 70%;
   align-self: center;
+  margin-bottom: 100px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-events-listing .short-15 {
+    width: 290px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-events-listing .short-15 {
+    display: none;
+  }
 }
 .preloader-events-listing .grid-cards {
   display: flex;
@@ -2091,7 +2137,7 @@ ptc-link, ptc-square-card,
   column-gap: 24px;
   overflow-x: hidden;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-cards {
     margin: 0 120px;
   }
@@ -2104,7 +2150,7 @@ ptc-link, ptc-square-card,
   flex-grow: 1;
   min-width: 250px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-cards .short-17 {
     width: 270px;
     min-width: 270px;
@@ -2114,12 +2160,13 @@ ptc-link, ptc-square-card,
 .preloader-events-listing .grid-cards-desktop {
   display: none;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-cards-desktop {
     display: flex;
     flex-direction: row;
     column-gap: 24px;
     overflow-x: hidden;
+    justify-content: center;
   }
 }
 .preloader-events-listing .grid-cards-desktop .short-17 {
@@ -2130,11 +2177,20 @@ ptc-link, ptc-square-card,
   flex-grow: 1;
   min-width: 250px;
 }
+@media only screen and (min-width: 992px) {
+  .preloader-events-listing .grid-cards-desktop .short-17 {
+    width: 22%;
+    min-width: 22%;
+    height: 530px;
+    flex-grow: initial;
+  }
+}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-cards-desktop .short-17 {
-    width: 270px;
-    min-width: 270px;
+    width: 275px;
+    min-width: 275px;
     height: 530px;
+    flex-grow: initial;
   }
 }
 .preloader-events-listing .grid-long-cards-mobile {
@@ -2149,17 +2205,18 @@ ptc-link, ptc-square-card,
   width: 100%;
   height: 391px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-long-cards-mobile .short-13 {
     width: 996px;
     height: 391px;
     min-width: 996px;
+    display: none;
   }
 }
 .preloader-events-listing .grid-long-cards-mobile .short-14 {
   display: none;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-long-cards-mobile .short-14 {
     display: block;
     width: 996px;
@@ -2176,6 +2233,12 @@ ptc-link, ptc-square-card,
   margin-bottom: 30px;
   display: none;
 }
+@media only screen and (min-width: 992px) {
+  .preloader-events-listing .grid-long-cards {
+    margin-left: 24px;
+    display: flex;
+  }
+}
 @media only screen and (min-width: 1440px) {
   .preloader-events-listing .grid-long-cards {
     margin-left: 120px;
@@ -2186,17 +2249,17 @@ ptc-link, ptc-square-card,
   width: 100%;
   height: 391px;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-long-cards .short-13 {
-    width: 996px;
+    width: 80%;
     height: 391px;
-    min-width: 996px;
+    min-width: 80%;
   }
 }
 .preloader-events-listing .grid-long-cards .short-14 {
   display: none;
 }
-@media only screen and (min-width: 1440px) {
+@media only screen and (min-width: 992px) {
   .preloader-events-listing .grid-long-cards .short-14 {
     display: block;
     width: 996px;
@@ -2205,6 +2268,372 @@ ptc-link, ptc-square-card,
   }
 }
 
+.preloader-blogs-listing-page .block-heading {
+  width: 188px;
+  height: 43px;
+  margin-top: 64px;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 196px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 254px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 195.11px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 235.207px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-blogs-listing-page .block-heading {
+    width: 248px;
+  }
+}
+.preloader-blogs-listing-page .block-para {
+  width: 256px;
+  height: 20px;
+  margin-bottom: 45px;
+  align-self: center;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 264px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 340px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 280px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 337.296px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .preloader-blogs-listing-page .block-para {
+    width: 356px;
+  }
+}
+.preloader-blogs-listing-page .topsection-block {
+  height: 754px;
+  margin-bottom: 28px;
+  align-self: center;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .topsection-block {
+    height: 547px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .topsection-block {
+    margin-bottom: 69px;
+  }
+}
+.preloader-blogs-listing-page .card-block {
+  height: 309px;
+}
+@media only screen and (min-width: 480px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 465px;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 397px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 364px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .card-block {
+    height: 366px;
+  }
+}
+.preloader-blogs-listing-page .filter-block {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .filter-block {
+    height: 853px;
+    display: block;
+  }
+}
+.preloader-blogs-listing-page .mobile-block {
+  display: grid;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .mobile-block {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .mobile-cards {
+  display: grid;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .mobile-cards {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .ipad-cards {
+  display: none;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .ipad-cards {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .ipad-cards {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .filter-div {
+  display: none;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-blogs-listing-page .filter-div {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .filter-div {
+    display: none;
+  }
+}
+.preloader-blogs-listing-page .filter-top {
+  margin-bottom: 24px;
+}
+.preloader-blogs-listing-page .desktop-cards {
+  display: none;
+  padding-bottom: 48px;
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-blogs-listing-page .desktop-cards {
+    display: grid;
+  }
+}
+.preloader-blogs-listing-page .pagination-block {
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-blogs-listing-page .pagination-block {
+    margin-top: 28px;
+  }
+}
+.preloader-blogs-listing-page .page-block {
+  width: 40px;
+  height: 40px;
+  margin: 0 5px;
+}
+
+.preloader-cs-listing-page .jumbotron-img {
+  height: 300px;
+  background: #fff;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron-img {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .jumbotron {
+  background-color: var(--color-gray-02);
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron {
+    background: #fff;
+  }
+}
+.preloader-cs-listing-page .jumbotron .jumbotron-content {
+  background-color: var(--color-gray-02);
+  padding-top: 18px;
+  padding-bottom: 20px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron .jumbotron-content {
+    padding-top: 106px;
+    padding-bottom: 106px;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .jumbotron .jumbotron-content {
+    background: #fff;
+  }
+}
+.preloader-cs-listing-page .skeleton-jumbotron {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .skeleton-jumbotron {
+    padding-left: 24px;
+    padding-bottom: 24px;
+  }
+}
+.preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
+  display: flex;
+  width: 50%;
+  column-gap: 14px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .skeleton-jumbotron .cta-wrap {
+    column-gap: 24px;
+  }
+}
+.preloader-cs-listing-page .bold-1 {
+  width: 97%;
+  margin-bottom: 24px;
+}
+.preloader-cs-listing-page .narrow-1 {
+  margin-bottom: 20px;
+}
+.preloader-cs-listing-page .bold-2 {
+  margin-bottom: 18px;
+}
+.preloader-cs-listing-page .card-block {
+  height: 347px;
+}
+.preloader-cs-listing-page .filter-block {
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .filter-block {
+    height: 853px;
+    display: block;
+  }
+}
+.preloader-cs-listing-page .mobile-block {
+  display: grid;
+  margin-bottom: 28px;
+  margin-top: 48px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .mobile-block {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .mobile-cards {
+  display: grid;
+  padding-bottom: 28px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .mobile-cards {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .ipad-cards {
+  display: none;
+  padding-bottom: 28px;
+  margin-top: 64px;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .ipad-cards {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .ipad-cards {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .filter-div {
+  display: none;
+  margin-bottom: 28px;
+}
+@media only screen and (min-width: 992px) {
+  .preloader-cs-listing-page .filter-div {
+    display: grid;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .filter-div {
+    display: none;
+  }
+}
+.preloader-cs-listing-page .filter-top {
+  margin-bottom: 24px;
+}
+.preloader-cs-listing-page .desktop-cards {
+  display: none;
+  padding-bottom: 48px;
+  margin-top: 64px;
+}
+@media only screen and (min-width: 1200px) {
+  .preloader-cs-listing-page .desktop-cards {
+    display: grid;
+  }
+}
+.preloader-cs-listing-page .pagination-block {
+  padding-bottom: 48px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+@media only screen and (min-width: 768px) {
+  .preloader-cs-listing-page .pagination-block {
+    margin-top: 28px;
+  }
+}
+.preloader-cs-listing-page .page-block {
+  width: 40px;
+  height: 40px;
+  margin: 0 5px;
+}
+
+.ppc-skeleton-preloader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background: #F3F3F3;
+}
+.ppc-skeleton-preloader .dots-loader {
+  color: var(--Green-6, #33A13C);
+  width: 4px;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
+  transform: translateX(-38px);
+  animation: dotsAnimation 0.5s infinite alternate linear;
+}
+@keyframes dotsAnimation {
+  50% {
+    box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px;
+  }
+  100% {
+    box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px;
+  }
+}
+
 @keyframes pulse {
   0% {
     opacity: 0.5;