@ptcwebops/ptcw-design 1.0.5 → 1.0.7

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css

@@ -0,0 +1,947 @@
+.ptc-container {
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media only screen and (min-width: 1200px) {
+  .ptc-container {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 1136px;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .ptc-container {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 1200px;
+  }
+}
+.ptc-container-lg {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media only screen and (min-width: 480px) {
+  .ptc-container-lg {
+    padding-left: var(--ptc-layout-spacing-03);
+    padding-right: var(--ptc-layout-spacing-03);
+  }
+}
+@media only screen and (min-width: 768px) {
+  .ptc-container-lg {
+    padding-left: var(--ptc-layout-spacing-04);
+    padding-right: var(--ptc-layout-spacing-04);
+  }
+}
+@media only screen and (min-width: 992px) {
+  .ptc-container-lg {
+    padding-left: var(--ptc-element-spacing-08);
+    padding-right: var(--ptc-element-spacing-08);
+  }
+}
+@media only screen and (min-width: 1980px) {
+  .ptc-container-lg {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: 1900px;
+  }
+}
+.ptc-container-fluid {
+  width: 100%;
+}
+
+.u-para-sm {
+  font-size: var(--ptc-font-size-small) !important;
+}
+
+.u-para-md {
+  font-size: var(--ptc-font-size-medium) !important;
+}
+
+.u-para-lg {
+  font-size: var(--ptc-font-size-large) !important;
+}
+
+.u-para-xl {
+  font-size: var(--ptc-font-size-x-large) !important;
+}
+
+.u-para-xxl {
+  font-size: var(--ptc-font-size-xx-large) !important;
+}
+
+.u-para-xxxl {
+  font-size: var(--ptc-font-size-xxx-large) !important;
+}
+
+@media only screen and (min-width: 768px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.05vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.05vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.05vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.05vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.05vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.05vw) !important;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.1vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.1vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.1vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.1vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.1vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.1vw) !important;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.15vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.15vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.15vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.15vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.15vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.15vw) !important;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.2vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.2vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.2vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.2vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.2vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.2vw) !important;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.25vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.25vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.25vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.25vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.25vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.25vw) !important;
+  }
+}
+@media only screen and (min-width: 1980px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.3vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.3vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.3vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.3vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.3vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.3vw) !important;
+  }
+}
+@media only screen and (min-width: 2600px) {
+  .u-para-sm {
+    font-size: calc(var(--ptc-font-size-small) + 0.35vw) !important;
+  }
+
+  .u-para-md {
+    font-size: calc(var(--ptc-font-size-medium) + 0.35vw) !important;
+  }
+
+  .u-para-lg {
+    font-size: calc(var(--ptc-font-size-large) + 0.35vw) !important;
+  }
+
+  .u-para-xl {
+    font-size: calc(var(--ptc-font-size-x-large) + 0.35vw) !important;
+  }
+
+  .u-para-xxl {
+    font-size: calc(var(--ptc-font-size-xx-large) + 0.35vw) !important;
+  }
+
+  .u-para-xxxl {
+    font-size: calc(var(--ptc-font-size-xxx-large) + 0.35vw) !important;
+  }
+}
+.u-para-body {
+  font-size: var(--ptc-font-size-medium) !important;
+}
+
+.u-color-white {
+  color: var(--color-white) !important;
+}
+
+.u-uppercase {
+  text-transform: uppercase !important;
+}
+
+.u-margin-flush {
+  margin: 0 !important;
+}
+
+.u-marginTop-flush {
+  margin-top: 0 !important;
+}
+
+.u-marginLeft-flush {
+  margin-left: 0 !important;
+}
+
+.u-marginRight-flush {
+  margin-right: 0 !important;
+}
+
+.u-marginBottom-flush {
+  margin-bottom: 0 !important;
+}
+
+.u-padding-flush {
+  padding: 0 !important;
+}
+
+.u-paddingTop-flush {
+  padding-top: 0 !important;
+}
+
+.u-paddingLeft-flush {
+  padding-left: 0 !important;
+}
+
+.u-paddingRight-flush {
+  padding-right: 0 !important;
+}
+
+.u-paddingBottom-flush {
+  padding-bottom: 0 !important;
+}
+
+.u-margin-xs {
+  margin: var(--ptc-element-spacing-01) !important;
+}
+
+.u-marginTop-xs {
+  margin-top: var(--ptc-element-spacing-01) !important;
+}
+
+.u-marginLeft-xs {
+  margin-left: var(--ptc-element-spacing-01) !important;
+}
+
+.u-marginRight-xs {
+  margin-right: var(--ptc-element-spacing-01) !important;
+}
+
+.u-marginBottom-xs {
+  margin-bottom: var(--ptc-element-spacing-01) !important;
+}
+
+.u-margin-sm {
+  margin: var(--ptc-element-spacing-02) !important;
+}
+
+.u-marginTop-sm {
+  margin-top: var(--ptc-element-spacing-02) !important;
+}
+
+.u-marginLeft-sm {
+  margin-left: var(--ptc-element-spacing-02) !important;
+}
+
+.u-marginRight-sm {
+  margin-right: var(--ptc-element-spacing-02) !important;
+}
+
+.u-marginBottom-sm {
+  margin-bottom: var(--ptc-element-spacing-02) !important;
+}
+
+.u-margin-md {
+  margin: var(--ptc-element-spacing-03) !important;
+}
+
+.u-marginTop-md {
+  margin-top: var(--ptc-element-spacing-03) !important;
+}
+
+.u-marginLeft-md {
+  margin-left: var(--ptc-element-spacing-03) !important;
+}
+
+.u-marginRight-md {
+  margin-right: var(--ptc-element-spacing-03) !important;
+}
+
+.u-marginBottom-md {
+  margin-bottom: var(--ptc-element-spacing-03) !important;
+}
+
+.u-margin-lg {
+  margin: var(--ptc-element-spacing-04) !important;
+}
+
+.u-marginTop-lg {
+  margin-top: var(--ptc-element-spacing-04) !important;
+}
+
+.u-marginLeft-lg {
+  margin-left: var(--ptc-element-spacing-04) !important;
+}
+
+.u-marginRight-lg {
+  margin-right: var(--ptc-element-spacing-04) !important;
+}
+
+.u-marginBottom-lg {
+  margin-bottom: var(--ptc-element-spacing-04) !important;
+}
+
+.u-margin-xl {
+  margin: var(--ptc-element-spacing-05) !important;
+}
+
+.u-marginTop-xl {
+  margin-top: var(--ptc-element-spacing-05) !important;
+}
+
+.u-marginLeft-xl {
+  margin-left: var(--ptc-element-spacing-05) !important;
+}
+
+.u-marginRight-xl {
+  margin-right: var(--ptc-element-spacing-05) !important;
+}
+
+.u-marginBottom-xl {
+  margin-bottom: var(--ptc-element-spacing-05) !important;
+}
+
+.u-margin-xxl {
+  margin: var(--ptc-element-spacing-06) !important;
+}
+
+.u-marginTop-xxl {
+  margin-top: var(--ptc-element-spacing-06) !important;
+}
+
+.u-marginLeft-xxl {
+  margin-left: var(--ptc-element-spacing-06) !important;
+}
+
+.u-marginRight-xxl {
+  margin-right: var(--ptc-element-spacing-06) !important;
+}
+
+.u-marginBottom-xxl {
+  margin-bottom: var(--ptc-element-spacing-06) !important;
+}
+
+.u-textAlign-ctr {
+  text-align: center !important;
+}
+
+.u-textAlign-right {
+  text-align: right !important;
+}
+
+.u-textAlign-left {
+  text-align: left !important;
+}
+
+.u-textWhite {
+  color: var(--color-white) !important;
+}
+
+.u-textGreen1 {
+  color: var(--color-green-07) !important;
+}
+
+.u-textGreen2 {
+  color: var(--color-green-06) !important;
+}
+
+.u-text-nowrap {
+  white-space: nowrap;
+}
+
+.u-text-bold {
+  font-weight: var(--ptc-font-weight-bold);
+}
+
+.u-text-thin {
+  font-weight: var(--ptc-font-weight-thin);
+}
+
+.u-textStyle-normal {
+  font-style: normal !important;
+}
+
+.u-no-scroll {
+  overflow: hidden;
+}
+
+.u-background-reset {
+  background-color: transparent !important;
+}
+
+.u-white-overylay {
+  background: rgba(242, 242, 242, 0.9);
+}
+
+.u-cursor-pointer {
+  cursor: pointer;
+}
+
+.u-clear {
+  clear: both;
+}
+
+@media only screen and (min-width: 768px) {
+  .u-hero-width {
+    width: 525px;
+  }
+
+  .u-margin-center {
+    margin: 0 auto;
+  }
+
+  .u-justify-self-end {
+    justify-self: flex-end;
+  }
+}
+.u-hero-pushup {
+  transform: translateY(-120px);
+}
+@media only screen and (min-width: 768px) {
+  .u-hero-pushup {
+    transform: translateY(-144px);
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .grid-order-1-md {
+    order: 1;
+  }
+
+  .grid-order-2-md {
+    order: 2;
+  }
+
+  .grid-order-3-md {
+    order: 3;
+  }
+}
+.standard-list {
+  list-style: none;
+  margin-left: 0;
+  margin-bottom: 20px;
+  padding: 0;
+}
+
+.is-spaced-between {
+  justify-content: space-between;
+}
+
+.grid-large-col-gap-md {
+  column-gap: 0;
+}
+@media only screen and (min-width: 992px) {
+  .grid-large-col-gap-md {
+    column-gap: 3rem;
+  }
+}
+
+.grid-large-col-gap-sm {
+  column-gap: 0;
+}
+@media only screen and (min-width: 768px) {
+  .grid-large-col-gap-sm {
+    column-gap: 3rem;
+  }
+}
+
+.grid-x-large-col-gap-md {
+  column-gap: 0;
+}
+@media only screen and (min-width: 992px) {
+  .grid-x-large-col-gap-md {
+    column-gap: 4rem;
+  }
+}
+
+.grid-x-large-col-gap-sm {
+  column-gap: 0;
+}
+@media only screen and (min-width: 768px) {
+  .grid-x-large-col-gap-sm {
+    column-gap: 4rem;
+  }
+}
+
+.grid-medium-col-gap-md {
+  column-gap: 0;
+}
+@media only screen and (min-width: 992px) {
+  .grid-medium-col-gap-md {
+    column-gap: 2rem;
+  }
+}
+
+.grid-medium-col-gap-sm {
+  column-gap: 0;
+}
+@media only screen and (min-width: 768px) {
+  .grid-medium-col-gap-sm {
+    column-gap: 2rem;
+  }
+}
+
+/* Floating Content */
+.is-float-left {
+  float: left;
+}
+
+.is-float-right {
+  float: right;
+}
+
+/* Hiding Content by Breakpoint */
+.is-mobile {
+  display: block;
+}
+
+.is-desktop {
+  display: none;
+}
+
+@media only screen and (min-width: 992px) {
+  .is-mobile {
+    display: none;
+  }
+
+  .is-desktop {
+    display: block;
+  }
+}
+.ptc-section {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+@media only screen and (min-width: 992px) {
+  .ptc-section {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+  }
+}
+
+.ptc-section-standard {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.ptc-section-half {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
+.u-flex {
+  display: flex;
+}
+
+@media only screen and (min-width: 480px) {
+  .u-flex-xs {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 768px) {
+  .u-flex-sm {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .u-flex-md {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .u-flex-lg {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .u-flex-xl {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 1600px) {
+  .u-flex-xxl {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 1980px) {
+  .u-flex-2k {
+    display: flex;
+  }
+}
+@media only screen and (min-width: 2600px) {
+  .u-flex-4k {
+    display: flex;
+  }
+}
+.u-align-center {
+  margin: auto;
+  align-self: center;
+}
+
+.u-align-left {
+  margin-right: auto;
+  align-self: center;
+}
+
+.u-align-right {
+  margin-left: auto;
+  align-self: center;
+}
+
+.u-align-x-center {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.u-align-x-left {
+  margin-right: auto;
+}
+
+.u-align-x-right {
+  margin-left: auto;
+}
+
+.u-align-y-center {
+  align-self: center;
+}
+
+.u-align-y-top {
+  align-self: flex-start;
+}
+
+.u-align-y-bottom {
+  align-self: flex-end;
+}
+
+.is-flex-column {
+  flex-direction: column;
+}
+
+.flex-align-items {
+  align-items: flex-end;
+}
+
+.u-flex-nowrap {
+  flex-wrap: nowrap;
+}
+
+.u-flex-wrap {
+  flex-wrap: wrap;
+}
+
+.embed-responsive {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0;
+  overflow: hidden;
+}
+
+.embed-responsive-16by9 {
+  padding-bottom: 56.25%;
+}
+
+.embed-responsive .embed-responsive-item,
+.embed-responsive embed,
+.embed-responsive iframe,
+.embed-responsive object,
+.embed-responsive video {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.fef-two-column-two-media .has-col-gap-lg {
+  grid-column-gap: var(--spacing-md);
+}
+@media only screen and (min-width: 992px) {
+  .fef-two-column-two-media .has-col-gap-lg {
+    grid-column-gap: var(--spacing-lg);
+  }
+}
+.fef-two-column-two-media .is-col-6-md {
+  padding-bottom: 3rem;
+}
+.fef-two-column-two-media .is-col-6-md:last-child {
+  padding-bottom: 0rem;
+}
+@media only screen and (min-width: 768px) {
+  .fef-two-column-two-media .is-col-6-md {
+    padding-bottom: 0rem;
+  }
+}
+
+ptc-icon-list.icon-top-align-list a {
+  text-decoration: none;
+  transition: color 0.3s ease;
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-font-size-x-large);
+  border-bottom: 0.094rem solid var(--color-green-06);
+  color: var(--color-gray-10);
+}
+ptc-icon-list.icon-top-align-list a:hover {
+  color: var(--color-green-06);
+}
+
+@media only screen and (min-width: 768px) {
+  .is-grid.grid-large-col-gap-xs-0 {
+    row-gap: 0;
+  }
+}
+:host {
+  display: block;
+}
+
+.parent {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto 1fr;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  position: unset;
+}
+
+.div1 {
+  grid-area: 1/1/2/2;
+  min-height: 300px;
+}
+.div1.hidden {
+  display: none;
+}
+
+.mobile-media-image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@media only screen and (min-width: 992px) {
+  .mobile-media-image {
+    display: none;
+  }
+}
+
+.gif-bg {
+  background-color: #F3F3F3;
+}
+
+.video-ratio {
+  position: relative;
+  overflow: hidden;
+  height: 0;
+  padding-bottom: 100%;
+}
+@media only screen and (min-width: 768px) {
+  .video-ratio {
+    padding-bottom: 75%;
+  }
+}
+@media only screen and (min-width: 992px) {
+  .video-ratio {
+    padding-bottom: 59.37%;
+    max-height: 500px;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  .video-ratio {
+    padding-bottom: 39.67%;
+  }
+}
+@media only screen and (min-width: 1440px) {
+  .video-ratio {
+    padding-bottom: 33%;
+  }
+}
+
+.div2 {
+  grid-area: 2/1/3/2;
+  position: relative;
+}
+
+.bg-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.content-layout {
+  display: flex;
+  flex-direction: column;
+}
+@media only screen and (min-width: 992px) {
+  .content-layout {
+    flex-direction: row;
+  }
+}
+
+.gap-adjustment {
+  gap: var(--ptc-element-spacing-05);
+}
+
+.text-adjustment {
+  justify-content: flex-start;
+}
+@media only screen and (min-width: 992px) {
+  .text-adjustment {
+    justify-content: center;
+  }
+}
+
+.desktop-media-image {
+  width: 40%;
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  .desktop-media-image {
+    display: block;
+  }
+}
+
+.desk-gif-adjustment {
+  z-index: 3;
+}
+
+@media only screen and (min-width: 992px) {
+  .parent {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    min-height: 500px;
+    position: relative;
+  }
+
+  .div1 {
+    grid-area: 1/1/2/2;
+    min-height: unset;
+  }
+
+  .div2 {
+    grid-area: 1/1/2/2;
+    align-self: center;
+    position: unset;
+  }
+}
+ptc-svg-btn {
+  position: absolute;
+  left: 50%;
+  bottom: 150%;
+  transform: translate(-50%, 50%);
+}
+@media only screen and (min-width: 992px) {
+  ptc-svg-btn {
+    left: 70%;
+    bottom: 50%;
+    transform: translate(0%, 50%);
+  }
+}