.elementor-80428 .elementor-element.elementor-element-455bc5c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--padding-top:150px;--padding-bottom:050px;--padding-left:20px;--padding-right:020px;}.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-80428 .elementor-element.elementor-element-14b5976{width:auto;max-width:auto;text-align:center;}.elementor-80428 .elementor-element.elementor-element-14b5976 .elementor-heading-title{font-family:"Mindset", Sans-serif;font-size:60px;font-weight:normal;color:var( --e-global-color-7b6f9dcb );}.elementor-80428 .elementor-element.elementor-element-eed98cd{width:auto;max-width:auto;}.elementor-80428 .elementor-element.elementor-element-2a51571{--display:flex;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}body.elementor-page-80428:not(.elementor-motion-effects-element-type-background), body.elementor-page-80428 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#315B6B;background-image:url("https://cramjams.com/wp-content/uploads/2018/09/Line-BG-Trans.png");background-position:center center;}@media(min-width:1025px){body.elementor-page-80428:not(.elementor-motion-effects-element-type-background), body.elementor-page-80428 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}@media(max-width:1024px){.elementor-80428 .elementor-element.elementor-element-455bc5c{--padding-top:150px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}body.elementor-page-80428:not(.elementor-motion-effects-element-type-background), body.elementor-page-80428 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-236px 15px;background-size:auto;}}@media(max-width:767px){.elementor-80428 .elementor-element.elementor-element-455bc5c{--padding-top:150px;--padding-bottom:50px;--padding-left:10px;--padding-right:10px;}body.elementor-page-80428:not(.elementor-motion-effects-element-type-background), body.elementor-page-80428 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:-654px 0px;background-repeat:no-repeat;}}/* Start custom CSS *//* ========================= Cram Jams Lesson Resources Icon centered, GC button to the right (top-aligned), label centered below ========================= */ /* ========================= Cram Jams Lesson Resources (GRID) Centers 1 tile, 2 tiles, 3 tiles, etc. ========================= */ /* ========================= Cram Jams Lesson Resources (GRID) NOTE: Your cj-resource shortcodes live INSIDE the Elementor Shortcode widget, so the grid must be applied to .elementor-shortcode (not .cj-resources). ========================= */ /* The Elementor container should NOT be the grid */ .cj-resources{ display: block !important; width: 100%; padding-top: 50px; padding-bottom: 50px; padding-left: 0px; padding-right: 0px; } /* 1) Force the Shortcode widget to span full width (critical) */ .cj-resources > .elementor-widget-shortcode{ width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } .cj-resources > .elementor-widget-shortcode > .elementor-widget-container, .cj-resources > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode{ width: 100% !important; max-width: 100% !important; } /* 2) Use FLEX for the actual tile layout so wrapped rows center */ .cj-resources > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode{ display: flex !important; flex-wrap: wrap; justify-content: center; /* <-- centers each row, including the last */ align-items: flex-start; gap: 60px 0px; } /* Desktop: 4 across */ .cj-resources .cj-resource{ flex: 0 0 25%; max-width: 25%; box-sizing: border-box; padding: 20px; } /* Tablet: 3 across */ @media (max-width: 1024px){ .cj-resources .cj-resource{ flex: 0 0 33%; max-width: 33%; } } /* Mobile: 1 per row */ @media (max-width: 767px){ /* if you want different spacing on mobile, do it on the flex container */ .cj-resources > .elementor-widget-shortcode > .elementor-widget-container > .elementor-shortcode{ gap: 40px 24px; } .cj-resources .cj-resource{ flex: 0 0 100%; max-width: 100%; /* optional: cap card width while still centering */ /* max-width: 320px; */ } } /* Optional: Elementor/WP sometimes wraps shortcodes in

tags */ .cj-resources .elementor-shortcode > p{ margin: 0 !important; } /* ------------------------- TOP AREA ------------------------- */ .cj-resource__top{ /* tweak these in ONE place */ --icon-size: 64px; --gc-size: 25px; --gc-gap: 10px; --gc-y: 0px; position:relative; width:100%; text-align:center; min-height: var(--icon-size); /* keeps label spacing consistent */ } /* Icon link centered */ .cj-resource__main{ display:inline-flex; justify-content:center; align-items:center; text-decoration:none; } /* Icon glyph */ .cj-resource__icon{ font-size: var(--icon-size); line-height:1; color:#ffffff; display:block; transition: color 0.25s ease; margin-bottom: 10px; } /* GC button positioned relative to the centered icon */ .cj-resource__top .g-btn{ position:absolute; left:50%; top:0; transform: translateX(calc((var(--icon-size) / 2) + var(--gc-gap))) translateY(var(--gc-y)); width: var(--gc-size); height: var(--gc-size); display:block; /* safety: override any legacy shortcode CSS */ float:none !important; margin:0 !important; padding:0 !important; opacity:1; transition: opacity 0.2s ease; } .cj-resource:hover .g-btn{ opacity:1; } /* ------------------------- LABEL ------------------------- */ .cj-resource__label{ font-family: Mindset; font-size:24px; line-height:1.1; text-align:center; text-decoration:none; display:block; color:#ffffff !important; transition: color 0.25s ease; } /* Unified hover */ .cj-resource:hover .cj-resource__icon, .cj-resource:hover .cj-resource__label{ color:#ff8800 !important; } /* Can't see video link */ #cannot_See_video{ color:#ffffff; transition: color 0.25s ease; } #cannot_See_video:hover{ color:#ff8800; }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Mindset'; font-style: normal; font-weight: normal; font-display: auto; src: url('https://cramjams.com/wp-content/uploads/2023/03/mindset-webfont.woff2') format('woff2'), url('https://cramjams.com/wp-content/uploads/2023/03/mindset-webfont.woff') format('woff'); } /* End Custom Fonts CSS */