/* Theme Name: Builder v3.0 Author: Matchplay Golf Marketing Description: The third iteration of Matchplay Golf Marketing's Wordpress theme Text Domain: builderv3 */ /*RESET*/ /*REMOVE ALL BROWSER STYLES FROM BODY, EXCLUDING THE WORDPRESS ADMIN*/ body:not(.wp-admin) { all: unset; display: revert; } /*SETUP SMOOTH SCROLLING*/ html { overflow-x: hidden; } /*SETUP A DEFAULT BOX-SIZING VALUE*/ *, *::before, *::after { box-sizing: border-box; } /*MAKE ALL ANCHORS AND BUTTONS HAVE A POINTER CURSOR BY DEFAULT*/ a, button { cursor: revert; } /*REMOVE DEFAULT UNDERLINE FROM TEXT LINKS AND MAKE IT USE THE COLOUR OF SURROUNDING TEXT*/ a { color: inherit; text-decoration: none; } /*MAKE LINKS WITHIN A PARAGRAPH TAG FOLLOW CUSTOMIZER SETTINGS, AND REMOVE DEFAULT MARGINS*/ p { margin: 0px; transition: .15s ease-out; } /*MAKE ALL FONTS AND LINKS DISPLAY SWAP*/ p, a { font-display: swap; } /*REMOVE ALL LIST STYLES*/ ol, ul, menu { all: unset; list-style: none; } /*MAKE IMAGES AND VIDEOS NEVER EXCEED THEIR CONTAINER*/ img, video { max-width: 100%; max-inline-size: 100%; max-block-size: 100%; } /*LAYOUT CLASSES*/ /*FULL WIDTH*/ .full { width: 100%; } /*CENTER WIDTHS*/ .center { width: 75%; margin: 0 auto; } .center-alt { width: 65%; margin: 0 auto; } /*FLEXBOX*/ /*ROW CLASSES*/ .flex-row-start-start { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .flex-row-start-stretch { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; } .flex-row-start-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .flex-row-center-start { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; } .flex-row-center-stretch { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: stretch; } .flex-row-end-end { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; } .flex-row-between-start { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .flex-rowreverse-between-start { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; } .flex-row-between-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .flex-row-between-stretch { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .flex-rowreverse-between-stretch { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .flex-row-between-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .flex-row-center-center { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; } .flex-row-between-end { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; } /*COLUMN CLASSES*/ .flex-col-start-start { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .flex-col-center-center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; } .flex-col-center-start { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: flex-start; } .flex-col-between-center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: center; } .flex-col-end-end { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; } .flex-col-end-center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .flex-col-end-end { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; } /*LIST*/ /*GRID LIST*/ .grid-basic-list { display: grid; grid-gap: 50px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); justify-content: start; align-items: start; vertical-align: top; } /*CENTERED GRID LIST*/ .grid-centered-list { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; } /*ITEM*/ .centered-list .grid-centered-list.list-items-2 .centered-list-item { width: calc(50% - 50px); } .centered-list .grid-centered-list.list-items-3 .centered-list-item { width: calc(33.333% - 50px); } .centered-list .grid-centered-list.list-items-4 .centered-list-item { width: calc(25% - 50px); } /*FONTS*/ /*TITLE*/ .title { font-family: var(--title-font-family); font-size: var(--title-font-size); font-weight: var(--title-font-weight); letter-spacing: var(--title-font-letterspacing); line-height: var(--title-font-lineheight); } /*SUBTITLE*/ .subtitle { font-family: var(--subtitle-font-family); font-size: var(--subtitle-font-size); font-weight: var(--subtitle-font-weight); letter-spacing: var(--subtitle-font-letterspacing); line-height: var(--subtitle-font-lineheight); } /*HEADING*/ .heading { font-family: var(--heading-font-family); font-size: var(--heading-font-size); font-weight: var(--heading-font-weight); letter-spacing: var(--heading-font-letterspacing); line-height: var(--heading-font-lineheight); } /*SUBHEADING*/ .subheading { font-family: var(--subheading-font-family); font-size: var(--subheading-font-size); font-weight: var(--subheading-font-weight); letter-spacing: var(--subheading-font-letterspacing); line-height: var(--subheading-font-lineheight); } /*COPY*/ .copy, p { font-family: var(--copy-font-family); font-size: var(--copy-font-size); font-weight: var(--copy-font-weight); letter-spacing: var(--copy-font-letterspacing); line-height: var(--copy-font-lineheight); } /*WEBKIT SCROLLBARS*/ /*SET TRACK WIDTH*/ body::-webkit-scrollbar { width: var(--scrollbar-width); } /*SET TRACK COLOUR*/ body::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); } /*SET THUMB COLOUR*/ body::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-bg); } /*PARTIALS*/ /*LAYOUTS*/ /*SIMPLE LAYOUT*/ /*SETUP ALIGNMENTS*/ .simple-layout.left-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; text-align: left; } .simple-layout.center-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; } .simple-layout.right-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; text-align: right; } /*SETUP BUTTON ALIGNMENT*/ .simple-layout.center-align .buttons { justify-content: center !important; align-items: center !important; } .simple-layout.right-align .buttons { justify-content: flex-end !important; align-items: flex-end !important; } /*AUTOPLAY LOGOS*/ /*CONTAINER - HIDE ANY OVERFLOW*/ .autoplay-logos { overflow: hidden; } /*ROW - ELIMINATE WHITESPACE AND MAKE EACH ROW FLEX*/ .autoplay-logos .autoplay-logo-row { display: flex; white-space: nowrap; will-change: transform; width: calc(100% - 50px); margin-left: 25px; margin-right: 25px; margin-bottom: 25px; --marquee-offset: 40px; transform: translateX(var(--marquee-offset)); } /*NOW GET RID OF THE MARGIN BOTTOM FOR THE LAST ROW*/ .autoplay-logos .autoplay-logo-row:last-of-type { margin-bottom: 0px; } /*LOGO - MAKE THEM FLEX AND ADD SOME PADDING, MARGIN AND BORDER-RADIUS*/ .autoplay-logos .logo { flex: 0 0 auto; padding: 25px; border-radius: 15px; margin-right: 25px; } /*RESTRICT THE WIDTH OF THE IMAGES*/ .autoplay-logos .logo img { display: block; width: 150px; height: auto; } /*PANELS*/ /*MAKE ALL PANELS 100VH*/ .panels .panel { position: relative; height: 100vh; } /*SETUP THE VARIOUS BACKGROUNDS*/ .panels .panel .background-colour { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; } .panels .panel .background-image { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 10; } .panels .panel .background-video { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 15; } /*SETUP THE CENTERING DIV TO MAKE IT SIT OVERTOP OF EVERYTHING*/ .panels .panel .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; } /*NOW SETUP THE ALIGNMENTS*/ .panels.left-align .panel .center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .panels.center-align .panel .center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; } .panels.right-align .panel .center { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; } /*EXPANDING IMAGES*/ /*HIDE ANY OVERFLOW AND SETUP THE GRID*/ .expanding-images { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; gap: 25px 25px; grid-auto-flow: row; height: 100vh !important; overflow: hidden; } /*MAKE EACH IMAGE POSITION RELATIVE*/ .expanding-images .expanding-image { position: relative; } /*POSITION EACH IMAGE/VIDEO BY NTH OF TYPE*/ .expanding-images .expanding-image:nth-of-type(1) { grid-column-start: 2; grid-column-end: 8; height: 33.333vh; } .expanding-images .expanding-image:nth-of-type(2) { grid-column-start: 1; grid-column-end: 3; height: 25vh; } .expanding-images .expanding-image:nth-of-type(3) { grid-column-start: 3; grid-column-end: 6; height: 30vh; } .expanding-images .expanding-image:nth-of-type(4) { grid-column-start: 6; grid-column-end: 8; height: 25vh; } .expanding-images .expanding-image:nth-of-type(5) { grid-column-start: 2; grid-column-end: 5; height: 33.333vh; } .expanding-images .expanding-image:nth-of-type(6) { grid-column-start: 5; grid-column-end: 7; height: 25vh; } /*MAKE SURE ANY BACKGROUND VIDEO FITS AND POSITION IT ABSOLUTELY*/ .expanding-images .expanding-image .background-video { position: absolute; top: 0px; left: 0px; height: 100%; object-fit: cover; } /*EXPANDING VIDEO*/ /*GIVE THE HOLDER A HEIGHT*/ .expanding-video-holder { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .expanding-video { object-fit: cover; } /*SETUP THE BUFFER*/ .expanding-video-buffer { height: 1px; width: 100%; opacity: 0; pointer-events: none; } /*SIDE SCROLL*/ .side-scroll { height: 100vh; position: relative; overflow: hidden; } /*SET UP THE SIDE SCROLL HOLDER, MAKE IT FLEX AND NOWRAP SO THE ITEMS DON'T BREAK*/ .side-scroll-holder { display: flex; flex-wrap: nowrap; position: relative; width: 100%; height: 100%; } /*NOW MAKE SURE THE ARTICLES DON'T SHRINK*/ .side-scroll-holder article { position: relative; flex: 0 0 100vw; min-height: 100vh; } /*NOW MAKE SURE THE BACKGROUND IMAGE FITS*/ .side-scroll-holder article .background-image { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; } /*NOW MAKE SURE ANY BACKGROUND VIDEO HAS OBJECT-FIT COVER AND FITS 100%*/ .side-scroll-holder article .background-video { position: absolute; top: 0px; left: 0px; height: 100%; object-fit: cover; z-index: 10; } /*MAKE SURE WE'VE GOT Z-INDEXING ON THE CONTENT, AND CENTER IT VERTICALLY IN THE ARTICLE*/ .side-scroll-holder article .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 15; } /*SETUP THE ALIGNMENT*/ .side-scroll-holder article .center.left-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .side-scroll-holder article .center.center-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; } .side-scroll-holder article .center.right-align { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; } /*SIDE SCROLL*/ .side-scroll-with-slider { height: 100vh; position: relative; overflow: hidden; } /*SET UP THE SIDE SCROLL HOLDER, MAKE IT FLEX AND NOWRAP SO THE ITEMS DON'T BREAK*/ .side-scroll-with-slider-holder { display: flex; flex-direction: row; flex-wrap: nowrap; position: relative; width: 100%; height: 100%; } /*NOW MAKE SURE THE ARTICLES DON'T SHRINK*/ .side-scroll-with-slider-holder article { position: relative; flex: 0 0 100vw; height: 100vh; } /*SETUP A TAB*/ .side-scroll-with-slider-holder article .article-title { position: absolute; top: 0px; left: 0px; width: 75px; height: 100%; writing-mode: vertical-lr; padding: 15px; padding-bottom: 25px; } /*HIDE IN THE FIRST ARTICLE*/ .side-scroll-with-slider-holder article:first-of-type .article-title { display: none; } /*ROTATE THE TEXT*/ .side-scroll-with-slider-holder article .article-title .subheading { transform: rotate(180deg); } /*NOW MAKE SURE THE BACKGROUND IMAGE FITS*/ .side-scroll-with-slider-holder article .background-image { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; } /*NOW MAKE SURE ANY BACKGROUND VIDEO HAS OBJECT-FIT COVER AND FITS 100%*/ .side-scroll-with-slider-holder article .background-video { position: absolute; top: 0px; left: 0px; height: 100%; object-fit: cover; z-index: 10; } /*MAKE SURE WE'VE GOT Z-INDEXING ON THE CONTENT, AND CENTER IT VERTICALLY IN THE ARTICLE*/ .side-scroll-with-slider-holder article .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 15; } /*SETUP THE ALIGNMENT*/ .side-scroll-with-slider-holder article .center.left-align { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } .side-scroll-with-slider-holder article .center.right-align { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; } /*SETUP THE SLIDER*/ .side-scroll-with-slider-holder article .center .side-scroll-slider { position: relative; width: calc(60% - 50px); height: 400px; overflow: hidden; } /*MAKE THE IMAGES FILL THE SLIDER CONTAINER*/ .side-scroll-with-slider-holder article .center .side-scroll-slider .side-scroll-slider-image { position: absolute; top: 0px; left: 0px; height: 100%; object-fit: cover; will-change: transform; } /*SETUP THE CONTENT*/ .side-scroll-with-slider-holder article .center .side-scroll-content { width: 40%; } /*STAGGERED IMAGES*/ /*SETUP THE GRID*/ .staggered-images { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(5, 1fr); grid-column-gap: 25px; grid-row-gap: 25px; } /*ASSIGN ITEMS TO GRID BASED ON NTH OF TYPE*/ .staggered-images .staggered-image:nth-of-type(1) { grid-area: 1 / 1 / 4 / 3; } .staggered-images .staggered-image:nth-of-type(2) { grid-area: 2 / 3 / 5 / 5; } .staggered-images .staggered-image:nth-of-type(3) { grid-area: 3 / 5 / 6 / 7; } /*STICKY IMAGE*/ /*MAKE THE IMAGES STICKY AND GIVE THEM SOME HEIGHT AND WIDTH*/ .sticky-images .images { position: sticky; top: 0px; width: 50%; height: 100vh; } /*ABSOLUTELY POSITION THE IMAGES SO THEY SIT ON TOP OF ONE ANOTHER*/ .sticky-images .images aside { position: absolute; top: 0px; left: 0px; height: 100%; } /*GIVE THE ARTICLES SOME WIDTH AND PADDING*/ .sticky-images .articles { width: 50%; padding: 100px; } /*MAKE EACH INDIVIDUAL ARTICLE 100VH HIGH*/ .sticky-images .articles article { height: 100vh; } /*NOW LIMIT THE CHARACTER LENGTH OF COPY*/ .sticky-images .articles article .copy { max-width: 60ch; } /*SLIDER*/ /*MAKE THE ITEMS ALIGN IN THE CENTER*/ .slider-with-content .swiper-wrapper { align-items: center; } /*GIVE EACH IMAGE SOME HEIGHT AND MAKE IT A BIT LESS OPAQUE*/ .slider-with-content .slide-image { height: 50vh; opacity: 0.75; margin-bottom: 25px; } /*FADE THE IMAGE IN WHEN SLIDE IS ACTIVE*/ .slider-with-content .swiper-slide-active .slide-image { opacity: 1; height: 65vh; } /*NOW SET THE PADDING AND MAKE OPACITY 0 ON THE CONTENT*/ .slider-with-content .slide-content { opacity: 0; padding-left: 25px; padding-right: 25px; } /*FADE THE CONTENT IN WHEN THE SLIDE IS ACTIVE*/ .slider-with-content .swiper-slide-active .slide-content { opacity: 1; } /*SETUP THE WIDTHS FOR THE META AND DESCRIPTION*/ .slider-with-content .slide-meta { width: 25%; } .slider-with-content .slide-description { width: calc(75% - 50px); } /*ADD SOME MARGIN TO THE CONTROLS*/ .slider-with-content .swiper-controls { margin-top: 25px; } /*NOW STYLE THE ARROWS*/ .slider-with-content .swiper-controls .arrow-left, .slider-with-content .swiper-controls .arrow-right { font-size: 18pt; font-weight: bold; cursor: pointer; } /*COLUMNS*/ /*DEFINE THE COLUMNS BASED ON CLASS*/ .columns.column-count-one { display: grid; grid-template-columns: repeat(1, 1fr); grid-template-rows: 1fr; grid-column-gap: 100px; grid-row-gap: 0px; } .columns.column-count-two { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; grid-column-gap: 100px; grid-row-gap: 0px; } .columns.column-count-three { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; grid-column-gap: 100px; grid-row-gap: 0px; } /*SIDE BY SIDES*/ .side-by-side { overflow-x: hidden; } /*SETUP IMAGE WIDTH*/ .side-by-side aside { width: 50%; } /*SETUP ARTICLE WIDTH*/ .side-by-side article { width: 50%; padding: 100px; } /*PARALLAX IMAGES AND COPY*/ /*GIVE THE LAYOUT SOME LEFT AND RIGHT BREATHING ROOM*/ .parallax-images-and-copy { padding-left: 25px; padding-right: 25px; } /*SETUP THE GRID*/ /*LEFT ALIGN*/ .parallax-images-and-copy.left-align { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); grid-column-gap: 100px; } /*PLACE THE IMAGES IN THE GRID*/ .parallax-images-and-copy.left-align .parallax-image:nth-of-type(1) { grid-area: 1 / 1 / 5 / 4; height: 350px; } .parallax-images-and-copy.left-align .parallax-image:nth-of-type(2) { grid-area: 2 / 4 / 6 / 7; height: 500px; } /*PLACE THE COPY IN THE GRID*/ .parallax-images-and-copy.left-align .parallax-copy { grid-area: 3 / 1 / 8 / 4; } /*RIGHT ALIGN*/ .parallax-images-and-copy.right-align { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(4, 1fr); grid-column-gap: 100px; } /*PLACE THE IMAGES IN THE GRID*/ .parallax-images-and-copy.right-align .parallax-image:nth-of-type(1) { grid-area: 1 / 3 / 6 / 7; height: 400px; } .parallax-images-and-copy.right-align .parallax-image:nth-of-type(2) { grid-area: 2 / 1 / 4 / 3; height: 500px; } /*PLACE THE COPY IN THE GRID*/ .parallax-images-and-copy.right-align .parallax-copy { grid-area: 3 / 3 / 8 / 6; } /*HALF AND HALF*/ /*SETUP THE WIDTH AND GIVE IT POSITION RELATIVE FOR BACKGROUNDS*/ .half-and-half .half { position: relative; width: 50%; } /*SETUP THE BACKGROUND TYPES*/ /*COLOUR*/ .half-and-half .half .background-colour { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; } /*IMAGE*/ .half-and-half .half .background-image { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; } /*VIDEO*/ .half-and-half .half .background-video { position: absolute; top: 0px; left: 0px; height: 100%; object-fit: cover; z-index: 10; } /*PUT THE CONTENT OVERTOP*/ .half-and-half .half .half-content { position: relative; z-index: 15; } /*PARALLAX QUADS*/ /*SETUP THE WIDTH AND HEIGHT OF EACH HOLDER*/ .parallax-quad .quad-holder { position: relative; width: 25%; height: 100vh; } /*SET THE Z-INDEX SO THE SLIDE EFFECT WORKS*/ .quad-holder:nth-child(1) { z-index: 4; } .quad-holder:nth-child(2) { z-index: 3; } .quad-holder:nth-child(3) { z-index: 2; } .quad-holder:nth-child(4) { z-index: 1; } /*MAKE THE BACKGROUND COLOUR ABSOLUTE AND SET THE Z-INDEX*/ .parallax-quad .quad-holder .quad-background-colour { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 5; transition: .5s ease-out; } /*MAKE THE BACKGROUND IMAGE ABSOLUTE AND SET THE Z-INDEX*/ .parallax-quad .quad-holder .quad-background-image { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 10; transition: .5s ease-out; } /*MAKE THE BACKGROUND IMAGE ABSOLUTE AND SET THE Z-INDEX*/ .parallax-quad .quad-holder .quad-background-video { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 15; object-fit: cover; transition: .5s ease-out; } /*MAKE THE OPTIONAL GRADIENT SIT ABOVE THE BACKGROUND IMAGE OR VIDEO AND BELOW THE LINK*/ .parallax-quad .quad-holder .quad-background-gradient { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 20; transition: .5s ease-out; } /*NOW SETUP A FILTER SO ANY BACKGROUND IS MADE DARKER ON HOVER*/ .parallax-quad .quad-holder:hover .quad-background-colour, .parallax-quad .quad-holder:hover .quad-background-image, .parallax-quad .quad-holder:hover .quad-background-video { filter: brightness(0.85); transition: .15s ease-in; } /*MAKE THE CONTENT SIT ABOVE THE BACKGROUND STUFF*/ .parallax-quad .quad-holder .quad-content { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 25; transition: .15s; } /*ADD A HOVER EFFECT*/ .parallax-quad .quad-holder:hover .quad-content { transform: translateY(-50px); transition: transform 0.3s ease; } /*MAKE THE LINK ABSOLUTE AND SET THE Z-INDEX SO THAT IT SITS ABOVE EVERYTHING ELSE*/ .parallax-quad .quad-holder .quad-link { position: absolute; top: 0px; left: 0px; height: 100%; z-index: 30; } /*BLOG GRID*/ /*SETUP THE TAGS*/ /*ADD SOME PADDING*/ .blog-tags { padding-top: 25px; padding-bottom: 10px; } /*NOW STYLE THE INDIVIDUAL TAGS*/ .blog-tags .post-tag { font-family: var(--copy-font-family); font-size: var(--copy-font-size); border: 1px solid rgba(0,0,0,0.5); border-radius: 5px; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; margin-right: 15px; margin-bottom: 15px; cursor: pointer; } /*REMOVE THE MARGIN FROM THE LAST POST TAG*/ .blog-tags .post-tag:last-of-type { margin-right: 0px; } /*SETUP THE GRID*/ .blog-grid-holder { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 25px; } /*DEFINE WHERE EACH BLOG POST SITS*/ .blog-grid article.post:nth-of-type(1) { grid-column: span 3 / span 3; grid-row: span 2 / span 2; } .blog-grid article.post:nth-of-type(2) { grid-column: span 2 / span 2; grid-row: span 3 / span 3; grid-column-start: 4; } .blog-grid article.post:nth-of-type(3) { grid-column: span 2 / span 2; grid-row: span 3 / span 3; grid-row-start: 3; } .blog-grid article.post:nth-of-type(4) { grid-row: span 3 / span 3; grid-column-start: 3; grid-row-start: 3; } .blog-grid article.post:nth-of-type(5) { grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 4; grid-row-start: 1; } /*STYLE THE POSTS*/ /*GIVE THE POST IMAGE A HEIGHT AND ADD SOME PADDING*/ .blog-grid article .post-image { padding: 25px; height: 300px; } /*GIVE THE POST TITLE SOME STYLES*/ .blog-grid article .post-title { padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; transition: .25s; } /*ADD A HOVER STATE*/ .blog-grid article .post-title:hover { transition: .25s; } /*PARALLAX LIST*/ .parallax-list { padding-top: 250px; padding-bottom: 250px; } /*GIVE THE DESCRIPTION SOME WIDTH*/ .parallax-list .parallax-list-description { width: 55%; } /*GIVE THE LIST ITEM HOLDER SOME WIDTH*/ .parallax-list .parallax-list-holder { position: relative; width: calc(45% - 100px); } /*SETUP THE LIST ITEM STYLES*/ .parallax-list .parallax-list-holder .parallax-list-item { width: calc(100% - 60px); box-shadow: 20px 20px 40px #bebebe, -20px -20px 40px #ffffff; border-radius: 25px; padding-top: 50px; padding-bottom: 50px; padding-left: 25px; padding-right: 25px; } /*COURSE SLIDER*/ /*STYLE THE SLIDES*/ .course-slider .slide { width: 85%; border-radius: 25px; } /*SETUP THE SLIDE MEDIA*/ .course-slider .slide .slide-media { position: relative; width: 45%; min-height: 500px; } /*BACKGROUND IMAGE*/ .course-slider .slide .background-image { position: absolute; top: 0px; left: 0px; z-index: 5; object-fit: cover; border-top-left-radius: 25px; border-bottom-left-radius: 25px; overflow: hidden; } /*BACKGROUND VIDEO*/ .course-slider .slide .background-video { position: absolute; top: 0px; left: 0px; z-index: 10; object-fit: cover; border-top-left-radius: 25px; border-bottom-left-radius: 25px; overflow: hidden; } /*NOW GIVE THE MEDIA ICON SOME WIDTH AND MAKE IT SIT ABOVE EVERYTHING*/ .course-slider .slide .media-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 50px; z-index: 15; } /*SETUP THE SLIDE CONTENT*/ .course-slider .slide .slide-content { width: 55%; padding: 50px; } /*SETUP THE NAVIGATION*/ .course-slider .swiper-controls { margin-top: 50px; } /*ADD SOME MARGIN*/ .course-slider .swiper-controls .arrow-left { margin-right: 25px; } /*GIVE STANDARD WIDTH*/ .course-slider .swiper-controls .nav-arrow { width: 25px; cursor: pointer; } /*SIMPLE LIST*/ /*STYLE THE LIST ITEMS*/ .simple-list .simple-list-item { border-left: 1px solid rgba(0,0,0,0.1); padding-left: 25px; } /*BEFORE AND AFTER*/ /*SETUP THE PRIMARY HOLDER AND MAKE SURE IT MAINTAINS 16-9 ASPECT RATIO*/ .before-and-after { position: relative; aspect-ratio: 16 / 9; overflow: hidden; user-select: none; } /*STYLE EACH IMAGE BY DEFAULT*/ .before-and-after img { height: 100%; object-fit: cover; display: block; } /*NOW STYLE THE BEFORE AND AFTER HOLDERS*/ .before-and-after .before-holder, .before-and-after .after-holder { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .before-and-after .after-holder { z-index: 2; clip-path: inset(0 50% 0 0); } /*STYLE THE HANDLE*/ .before-and-after .handle { position: absolute; top: 0; bottom: 0; width: 1px; z-index: 3; cursor: ew-resize; } .before-and-after .handle::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 48px; width: 48px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); } /*COMPONENTS*/ /*VIDEO*/ /*MAKE POSTER COVER THE VIDEO*/ .vjs-poster img { object-fit: cover !important; } /*MATCHPLAY BRAND KIT THEME*/ /*CENTER THE BIG PLAY BUTTON AND GIVE IT A CUSTOM ICON*/ .matchplay-video-player-theme { position: relative; } .matchplay-video-player-theme .vjs-big-play-button { transform: translate(-50%, -50%); margin-top: 0px; margin-left: 0px; width: 64px; height: 64px; background-image: url(/wp-content/uploads/2025/02/play-button.png); background-size: cover; background-position: center; background-repeat: no-repeat; border: none; background-color: transparent; } .matchplay-video-player-theme .vjs-big-play-button:focus, .matchplay-video-player-theme:hover .vjs-big-play-button { background-color: transparent; background-image: url(/wp-content/uploads/2025/02/play-button-white.png); background-size: cover; background-position: center; background-repeat: no-repeat; } /*HIDE THE DEFAULT ICON*/ .matchplay-video-player-theme .vjs-big-play-button .vjs-icon-placeholder { display: none; } /*COLOUR AND STYLE THE CONTROL BAR*/ .matchplay-video-player-theme .vjs-control-bar { background: rgba(252,194,14,0.5); margin-bottom: 0px; padding-left: 1em; padding-right: 1em; } /*COLOUR AND STYLE THE PROGRESS BAR AND LOAD PROGRESS BAR*/ .matchplay-video-player-theme .vjs-slider { background-color: #2F2F2F; } .matchplay-video-player-theme .vjs-load-progress { background: #474747; } .matchplay-video-player-theme .vjs-play-progress:before { display: none; } /*BUTTONS*/ /*ADD MARGIN LEFT TO ANY BUTTON THAT ISN'T THE FIRST*/ .buttons .primary-button:not(:first-of-type), .buttons .fancy-button-holder:not(:first-of-type) { margin-left: 25px; } /*SET DEFAULT PADDING FOR DEFAULT, ARROW AND FANCY BUTTONS IF PADDING IS ENABLED*/ .buttons.padding-enabled .primary-button { padding-top: 15px; padding-bottom: 15px; padding-left: 30px; padding-right: 30px; } /*SIZE THE ICON FOR THE FANCY BUTTON, AND GIVE IT SOME MARGIN*/ .buttons .primary-button .button-icon { margin-right: 15px; } /*MAP*/ /*GIVE IT A STANDARD HEIGHT*/ .map { position: relative; object-fit: cover; min-height: 450px; height: 100%; z-index: 25; } /*ACCORDION*/ /*ADD SOME PADDING TO THE SUBHEADING AND THE COPY*/ .accordion summary, .accordion .copy { padding: 15px; } /*MAKE THE SUMMARY FLEX AND GIVE IT THE POINTER CURSOR*/ .accordion summary { display: flex; cursor: pointer; } /*UNORDERED LIST*/ /*MAKE IT A DISC, INSIDE AND THEN ALLOW FOR THE SECOND LINE TO WRAP IN LINE*/ .unordered-list ul { margin-left: 24px; list-style-position: inside; list-style-type: disc; } /*MAKE LIST ITEMS USE THE COPY FONT AND GIVE THEM A BIT OF A MARGIN*/ .unordered-list ul li { margin-bottom: 10px; font-family: var(--copy-font-family); font-size: var(--copy-font-size); } /*IMAGE WITH HOVER CONTENT*/ /*PREVENT ANYTHING FROM OVERFLOWING*/ .image-with-hover-content-holder { position: relative; overflow: hidden; } /*SETUP THE BACKGROUND SO IT IS INITIALLY INVISIBLE*/ .image-with-hover-content-holder .bg-fade { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; z-index: 0; } /*MAKE IT VISIBLE ON HOVER*/ .image-with-hover-content:hover .bg-fade { opacity: 1; } /*SETUP THE CLIP WRAPPER*/ .image-with-hover-content .clip-wrapper { position: relative; overflow: hidden; height: auto; } /*SETUP THE INNER CONTENT*/ .image-with-hover-content .inner-content { position: relative; transition: transform 1s ease; will-change: transform; z-index: 1; display: flex; flex-direction: column; } /*ADD SOME MARGIN TO THE SUBHEADING*/ .image-with-hover-content .inner-content .subheading { margin-bottom: 15px; } /*TABLE*/ .table { overflow-x: auto; } /*MAKE EACH TABLE ROW SCROLLABLE AND MAKE IT NO WRAP*/ .table-row { display: flex; flex-wrap: nowrap; width: max-content; min-width: 100%; padding: 15px; margin: 1px; } /*SET A WIDTH FOR EACH TABLE COLUMN*/ .table.regular-table .table-column { min-width: 200px; flex: 1 0 200px; } /*FLOATING MEDIA*/ /*MAKE THE MEDIA TRANSPARENT AND SETUP THE GRID*/ .floating-media-media-holder { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(6, 1fr); grid-column-gap: 0px; grid-row-gap: 50px; } /*PUT THE MEDIA ITEMS IN THEIR PLACE*/ .floating-media-holder:nth-of-type(1) { grid-area: 1 / 1 / 3 / 2; } .floating-media-holder:nth-of-type(2) { grid-area: 2 / 5 / 4 / 6; } .floating-media-holder:nth-of-type(3) { grid-area: 4 / 1 / 7 / 3; } .floating-media-holder:nth-of-type(4) { grid-area: 5 / 4 / 8 / 6; } /*MAKE THE MEDIA ITEMS SIT BELOW THE CONTENT*/ .floating-media-holder { position: relative; z-index: 10; } /*SIZE THE IMAGES*/ .floating-media-image:nth-of-type(odd) { width: 300px; height: 400px; } .floating-media-image:nth-of-type(even) { width: 600px; height: 300px; } /*SIZE THE VIDEOS*/ .floating-media video { width: 100%; height: 600px; object-fit: cover; } /*MAKE THE CONTENT CENTERED AND SIT ABOVE THE MEDIA ITEMS*/ .floating-media-content-holder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 15; text-align: center; } /*CENTER THE BUTTONS*/ .floating-media .buttons { align-items: center; justify-content: center; } /*READY THE MEDIA ITEMS FOR TRANSFORMATION*/ .floating-media-image, .floating-media-video { will-change: transform; transform-style: preserve-3d; } /*BLOCK SPECIFIC STYLING*/ /*SITE SPECIFIC STYLING*/ /*FONTS*/ /*HEADER*/ /*FIX THE HEADER AND BASIC STYLES*/ header { position: fixed; top: 0px; left: 0px; background-color: #222222; color: #FFF; padding: 15px; padding-left: 50px; padding-right: 50px; z-index: 9999; backdrop-filter: blur(1px); filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.05)); } /*SIZE THE LOGO*/ header .header-logo { width: 75px; } /*STYLE THE BUTTON*/ .header-button { font-family: var(--copy-font-family); font-size: var(--copy-font-size); margin-right: 15px; } .header-button:hover { color: rgb(144, 33, 52); } /*STYLE THE HAMBURGER*/ .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color: #FFF !important; } /*NAVIGATION*/ nav { position: fixed; opacity: 0; visibility: hidden; height: 0px; background-image: url(/wp-content/uploads/2025/07/header-background-1.jpg); background-size: cover; background-repeat: no-repeat; z-index: 9998; } nav.show-menu { opacity: 1; visibility: visible; height: 100vh; } nav ul li a { font-family: var(--subtitle-font-family); font-size: 32pt; color: #FFFFFF; } nav ul li a:hover { color: #d5a10e; } /*HIDE THE TEE TIME LINK INITIALLY*/ header .mobile-teetime { display: none; } /*MAIN*/ /*FOOTER*/ footer { background-image: url(/wp-content/uploads/2025/07/footer-image.jpg); background-size: cover; background-repeat: no-repeat; padding-top: 50px; padding-bottom: 450px; } .footer-holder { border-left: 1px solid rgb(144, 33, 52); padding: 25px; font-family: var(--copy-font-family); font-size: var(--copy-font-size); text-align: center; } .footer-holder:first-of-type { padding-left: 0px; border-left: none; } .footer-holder:nth-of-type(2) { border-left: none; } .footer-holder:last-of-type { padding-right: 0px; } .footer-holder .heading { color: rgb(144, 33, 52); font-size: 24pt; margin-bottom: 15px; } .footer-holder a { display: block; color: #242424; } .footer-holder a:hover { color: rgb(144, 33, 52); } .footer-holder .footer-logo { width: 100px; } /*OTHER*/ /*FANCYBOX*/ .fancybox-infobar { display: none; } /*INDEX.PHP*/ /*STYLE THE TITLE*/ #blog-archive .blog-title { text-align: center; } /*STYLE THE SEARCH AND TAG FILTER HOLDER*/ /*GIVE SOME PADDING TO THE HOLDER*/ .search-filter-holder { padding-top: 25px; padding-bottom: 25px; } /*HIDE THE SEARCH BY DEFAULT*/ #post-search { display: none; } /*STYLE THE SEARCH INPUT*/ .search-filter-holder input[type="search"] { width: 500px; max-width: 100%; font-family: var(--copy-font-family); font-size: var(--copy-font-size); background-color: #FFFFFF; padding: 10px; border-radius: 5px; margin-bottom: 25px; } /*STYLE THE TAG FILTER*/ #tag-filter { white-space: nowrap; overflow-x: scroll; margin-bottom: 10px; } /*STYLE THE SCROLLBAR*/ #tag-filter::-webkit-scrollbar { height: 10px; } #tag-filter::-webkit-scrollbar-thumb { border-radius: 5px; } /*NOW STYLE THE BUTTONS THAT HOLD THE TAGS*/ .tag-button { font-family: var(--copy-font-family); font-size: var(--copy-font-size); padding: 10px; margin-right: 15px; margin-bottom: 15px; border: none; border-radius: 5px; cursor: pointer; } .tag-button:last-of-type { margin-right: 0px; } /*SETUP THE POST CONTAINER TO MAKE SURE ALL ITEMS ARE THE SAME HEIGHT*/ #post-container { align-items: stretch !important; } /*STYLE EACH INDIVIDUAL ARTICLE*/ /*GIVE THE FEATURED IMAGE SOME HEIGHT AND ROUND THE CORNERS*/ .post-thumb { width: 100%; } /*ADD PADDING TO THE DESCRIPTION*/ .post-description { position: relative; padding: 15px; } /*MAKE THE TAGS USE THE COPY FONT*/ .post-description .tag-link { display: block; font-family: var(--copy-font-family); font-size: var(--copy-font-size); } /*MAKE THE LAST TAG NOT HAVE A MARGIN*/ .post-description .tag-link:last-of-type { margin-bottom: 15px; } /*STYLE THE TITLE*/ .post-description .subheading:hover { margin-bottom: 15px; } /*ADD MARGIN TO THE EXCERPT*/ .post-description .excerpt { margin-top: 15px; } /*STYLE THE READ MORE AND GIVE IT A HOVER STATE*/ .post-description .read-more { margin-top: 25px; padding-top: 15px; } /*ADD SOME MARGIN TO THE LOAD MORE... BIT*/ #loader { margin-top: 50px; } /*MEDIA QUERIES*/ @media (max-width: 1600px) { } @media (max-width: 1400px) { .center, .center-alt { width: 85%; } } @media (max-width: 1200px) { /*LAYOUTS*/ /*EXPANDING VIDEO*/ .expanding-video-holder { height: auto; } .expanding-video { width: 100vw !important; } /*SIDE SCROLL*/ .side-scroll { height: auto; } .side-scroll-holder { flex-wrap: wrap; } /*SIDE SCROLL WITH SLIDER*/ .side-scroll-with-slider { height: auto; } .side-scroll-with-slider-holder { flex-wrap: wrap; } /*TAKE AWAY THE FLEX ON THE ARTICLE*/ .side-scroll-with-slider-holder article { padding-top: 50px; padding-bottom: 50px; width: 100%; flex: unset; height: auto; min-height: unset; } /*MAKE THE CENTER RELATIVE*/ .side-scroll-with-slider-holder article .center { position: relative; top: auto; left: auto; transform: none; } /*ADJUST THE WRAPS*/ .side-scroll-with-slider-holder article .center.left-align { flex-wrap: wrap; } .side-scroll-with-slider-holder article .center.right-align { flex-wrap: wrap; } /*ADJUST THE CONTENT*/ .side-scroll-with-slider .side-scroll-with-slider-holder article .center .side-scroll-slider { width: 100%; margin-bottom: 25px; } .side-scroll-with-slider .side-scroll-with-slider-holder article .side-scroll-content { width: 100%; } /*STICKY IMAGE*/ .sticky-images { flex-direction: column; } .sticky-images .images { position: relative; top: auto; width: 100%; height: auto; order: 1; } .sticky-images .images aside { position: relative; top: auto; left: auto; height: 75vh; opacity: 1; transition: none; } .sticky-images .images aside:not(:first-of-type) { display: none; } .sticky-images .articles { width: 100%; padding-top: 50px; padding-bottom: 50px; padding-left: 25px; padding-right: 25px; order: 2; } .sticky-images .articles article { height: auto; margin-bottom: 50px; } .sticky-images .articles article:last-of-type { margin-bottom: 0px; } /*SLIDER WITH CONTENT*/ .slider-with-content .swiper-slide-active .slide-image { height: 50vh; } .slider-with-content .slide-content { align-items: center; justify-content: center; } .slider-with-content .slide-content { text-align: center; } .slider-with-content .slide-meta { width: 100%; } .slider-with-content .slide-description { width: 100%; margin-top: 15px; } .slider-with-content .slide-description p { max-width: 60ch; margin: 0 auto; } /*COLUMNS*/ .columns.column-count-three { grid-template-columns: repeat(1, 1fr); grid-column-gap: 0px; } /*SIDE BY SIDES*/ .side-by-side aside { width: 100%; height: 50vh; order: 1; margin-bottom: 25px; } .side-by-side article { width: 100%; padding: 50px; order: 2; } /*PARALLAX IMAGES AND COPY*/ .parallax-images-and-copy.left-align { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px; } .parallax-images-and-copy.left-align .parallax-image:nth-of-type(1) { grid-area: auto; margin-bottom: 25px; } .parallax-images-and-copy.left-align .parallax-image:nth-of-type(2) { grid-area: auto; margin-bottom: 25px; } .parallax-images-and-copy.left-align .parallax-copy { padding-left: 0px; grid-area: auto; } .parallax-images-and-copy.right-align { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-column-gap: 0px; grid-row-gap: 0px } .parallax-images-and-copy.right-align .parallax-image:nth-of-type(1) { grid-area: auto; margin-bottom: 25px; } .parallax-images-and-copy.right-align .parallax-image:nth-of-type(2) { grid-area: auto; margin-bottom: 25px; } .parallax-images-and-copy.right-align .parallax-copy { padding-left: 0px; grid-area: auto; } /*HALF AND HALF*/ .half-and-half .half { width: 100%; padding: 0px !important; } .half-and-half .half.padding-control-enabled { padding: 50px !important; } /*GIVE MINIMUM HEIGHT TO BACKGROUND IMAGES*/ .half-and-half .half .background-image { position: relative; min-height: 400px; } /*PARALLAX QUADS*/ .parallax-quad .quad-holder { width: 50%; height: 50vh; } /*PARALLAX LIST*/ .parallax-list { padding-top: 100px; padding-bottom: 100px; } .parallax-list .parallax-list-description { width: 100%; } .parallax-list .parallax-list-holder { margin-top: 50px; width: 100%; } .parallax-list .parallax-list-holder .parallax-list-item { width: 100%; margin-bottom: 25px; } .parallax-list .parallax-list-holder .parallax-list-item:last-of-type { margin-bottom: 0px; } /*BLOG GRID*/ .blog-grid article.post:nth-of-type(1), .blog-grid article.post:nth-of-type(2), .blog-grid article.post:nth-of-type(3), .blog-grid article.post:nth-of-type(4), .blog-grid article.post:nth-of-type(5) { grid-column: 1 / -1; grid-row: auto; } /*COURSE SLIDER*/ .course-slider { padding-left: 25px; padding-right: 25px; } .course-slider .slide .slide-media, .course-slider .slide .slide-content { width: 100%; } .course-slider .slide .background-image { border-top-left-radius: 25px; border-bottom-left-radius: 0px; border-top-right-radius: 25px; } .course-slider .slide .background-video { border-top-left-radius: 25px; border-bottom-left-radius: 0px; border-top-right-radius: 25px; } /*CENTERED GRID LIST*/ .grid-centered-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } /*ITEM*/ .centered-list-item { width: 100%; margin-bottom: 25px; } /*REMOVE FROM THE LAST*/ .centered-list-item:last-of-type { margin-bottom: 0px; } /*MAKE FULL WIDTH*/ .centered-list .grid-centered-list.list-items-2 .centered-list-item { width: 100%; } .centered-list .grid-centered-list.list-items-3 .centered-list-item { width: 100%; } .centered-list .grid-centered-list.list-items-4 .centered-list-item { width: 100%; } /*FLOATING MEDIA*/ .floating-media-media-holder { display: flex; flex-direction: column; } .floating-media-holder:nth-of-type(1) { width: 100%; height: 400px; margin-bottom: 50px; } .floating-media-holder:nth-of-type(2) { display: none; } .floating-media-holder:nth-of-type(3) { display: none; } .floating-media-holder:nth-of-type(4) { display: none; } .floating-media-content-holder { position: relative; top: auto; left: auto; transform: none; } } @media (max-width: 1000px) { /*FOOTER*/ footer { background-image: url(/wp-content/uploads/2025/07/footer-image-alt.jpg); padding-top: 100px; padding-bottom: 100px; } footer .footer-holder { width: 100%; justify-content: center; align-items: center; text-align: center; border-left: none; padding: 25px !important; } } @media (max-width: 800px) { .center, .center-alt { width: calc(100% - 50px); } /*FONTS*/ .title { font-size: 42pt; } /*HEADER*/ header { padding-left: 25px; padding-right: 25px; } header .header-button { display: none; } header .mobile-teetime { display: block; } /*BLOCK*/ .standard-block .background-image { background-attachment: scroll !important; } /*LAYOUTS*/ /*STAGGERED IMAGES*/ .staggered-images { grid-template-columns: auto; grid-template-rows: auto; } .staggered-images .staggered-image:nth-of-type(1), .staggered-images .staggered-image:nth-of-type(2), .staggered-images .staggered-image:nth-of-type(3) { grid-area: auto; } /*COLUMNS*/ .columns.column-count-two { grid-template-columns: repeat(1, 1fr); grid-column-gap: 0px; } /*SIDE BY SIDES*/ .side-by-side article { padding: 25px; } /*HALF AND HALF*/ .half-and-half .half.padding-control-enabled { padding: 25px !important; } /*PARALLAX QUADS*/ .parallax-quad .quad-holder { width: 100%; } /*COMPONENTS*/ /*TEXT*/ /*SET MAX-WIDTH OF ALL TEXT TO NONE*/ .title, .subtitle, .heading, .subheading, .copy { max-width: none !important; } }