/* Theme Name: Builder v3.0 Author: Matchplay Golf Marketing Description: The third iteration of Matchplay Golf Marketing's Wordpress theme Text Domain: builderv3 */ /*RESET*/ /*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, li { 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-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-between-stretch { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; align-items: stretch; } .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-fit, minmax(300px, 1fr)); justify-content: start; align-items: stretch; 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; height: auto; } /*SETUP SOME WIDTH*/ .autoplay-logos .logo:nth-of-type(odd) img { width: 300px; } .autoplay-logos .logo:nth-of-type(even) img { padding-top: 150px; width: 450px; } /*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); } /*VIDEO SWITCHER/SLIDER*/ .scrubber { position: relative; } /*SLIDER RANGE*/ .scrubber .bar { position: absolute; left: 0px; bottom: 0px; -webkit-appearance: none; appearance: none; width: 100%; height: 10px; background: none; cursor: pointer; outline: none; border-radius: 0; /* no rounding */ } /*WEBKIT*/ .scrubber .bar::-webkit-slider-runnable-track { height: 10px; background: rgba(0,0,0,0.5); border-radius: 0; } .scrubber .bar::-webkit-slider-thumb { -webkit-appearance: none; width: 10px; height: 10px; background: #FFF; border: none; border-radius: 0; /* square thumb */ } /*FIREFOX*/ .scrubber .bar::-moz-range-track { height: 10px; background: rgba(0,0,0,0.5); border: none; border-radius: 0; } .scrubber .bar::-moz-range-thumb { width: 10px; height: 10px; background: #FFF; border: none; border-radius: 0; } /*EDGE*/ .scrubber .bar::-ms-track { height: 10px; background: rgba(0,0,0,0.5); border: none; color: transparent; } .scrubber .bar::-ms-fill-lower { background: rgba(0,0,0,0.5); } .scrubber .bar::-ms-fill-upper { background: rgba(0,0,0,0.5); } .scrubber .bar::-ms-thumb { width: 10px; height: 10px; background: #FFF; border: none; border-radius: 0; } /*SKIN SWITCHER*/ .scrubber .skins { position: absolute; top: 50%; left: 25px; transform: translateY(-50%); display: flex; flex-direction: column; } /*BUTTONS*/ .scrubber .skins button { border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); color: #fff; padding: 8px 12px; font: 600 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; cursor: pointer; margin-bottom: 5px; } /*LAST OF TYPE*/ .scrubber .skins button:last-of-type { margin-bottom: 0px; } /*HOVER AND ACTIVE STATE*/ .scrubber .skins button.active, .scrubber .skins button:hover { border: 1px solid red; } /*VIDEO*/ .scrubber video { width: 100%; height: 100vh; object-fit: cover; } /*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; } /*BLOCK SPECIFIC STYLING*/ /*SITE SPECIFIC STYLING*/ /*BODY*/ body:not(.mce-content-body) { overflow-x: hidden; margin: 0px; background-color: #000; } /*FONTS*/ /*HEADER*/ /*FIX THE HEADER AND BASIC STYLES*/ header#primary-header { position: fixed; top: 0px; left: 0px; padding: 15px; z-index: 9999; } /*SIZE THE LOGO*/ .header-logo { width: 200px; } /*STYLE THE HAMBURGER*/ .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { background-color: #FFFFFF !important; border-radius: 0px !important; height: 3px !important; } /*NAV*/ /*MAIN*/ /*FOOTER*/ footer { background-color: #171717; padding-top: 100px; padding-bottom: 100px; } footer .center { width: 85%; } footer .footer-holder { text-align: center; } footer .footer-holder:nth-of-type(1) { width: 25%; border-right: 1px solid #393939; } footer .footer-holder:nth-of-type(2) { width: 50%; padding: 50px; } footer .footer-holder .newsletter-title { color: #FFF; max-width: 30ch; } footer .footer-holder .newsletter-signup { margin-top: 25px; margin-bottom: 25px; } footer .footer-holder .social-icons a { display: block; margin-right: 25px; } footer .footer-holder .social-icons a:last-of-type { margin-right: 0px; } footer .footer-holder .social-icons a i { color: #FFF; } footer .footer-holder .social-icons a i:hover { color: #FFFFFF; } footer .footer-holder:nth-of-type(3) { width: 25%; border-left: 1px solid #393939; } footer .footer-link { color: #FFFFFF; margin-bottom: 15px; text-transform: uppercase; } footer .footer-link:hover { text-decoration: underline; text-underline-offset: 5px; } /*BOTTOM*/ footer .footer-bottom { padding: 100px; } footer .footer-bottom-holder { width: calc(50% - 150px); } footer .footer-bottom-holder:nth-of-type(1) { text-align: left; } footer .footer-bottom-holder:nth-of-type(2) { width: 300px; } footer .footer-bottom-holder .footer-logo { width: calc(100% - 100px); } footer .footer-bottom-holder .line { height: 1px; background-color: #535353; margin-bottom: 15px; } footer .footer-bottom-holder:nth-of-type(3) { text-align: right; } footer .footer-bottom .footer-link { color: #393939; } footer .footer-bottom .footer-link:hover { color: #FFF; } /*SETUP A MAX WIDTH FOR THE FORM*/ footer form { all: unset; width: 100%; } /*MAKE EVERYTHING USE COPY FONT*/ footer label, footer input, footer textarea, footer fieldset, footer button:not([type="submit"]) { width: 100%; background: none; border: none; font-family: "CopyFont", sans-serif; font-size: 14pt; letter-spacing: 1.25px; } /*ADD A BORDER BOTTOM AND MARGIN BOTTOM TO INPUTS AND TEXTAREAS, BUT NOT SUBMIT BUTTONS. REMOVE IT FROM FIELDSETS.*/ footer input:not([type="submit"]), footer textarea { position: relative; background-color: #393939; color: #d1af88; padding: 15px; border-radius: 5px; text-align: left; } footer input[type="email"] { margin-bottom: 25px; } footer fieldset { border: none; } /*ADD SOME PADDING BOTTOM TO LABELS AND INCREASE THE WEIGHT*/ footer label { font-weight: 500; padding-bottom: 15px; } /*MAKE EVERYTHING FULL WIDTH*/ .frm_form_fields, .frm_forms { width: 100%; } /*MAKE ERROR MESSAGES RED*/ .frm_error { font-family: "CopyFont", sans-serif; width: 100%; background-color: red; font-size: 10pt; padding: 15px; border-radius: 5px; margin-bottom: 15px; color: #FFF; } /*ADD SOME MARGIN BENEATH IT WHEN AN ERROR POPS UP*/ .frm_error_style { font-family: "CopyFont", sans-serif; width: 100%; background-color: red; font-size: 10pt; padding: 15px; border-radius: 5px; margin-bottom: 15px; color: #FFF; } /*NOW STYLE THE SUBMIT BUTTON*/ footer .frm_button_submit { padding-top: 15px; background: none; border: none; cursor: pointer; font-family: "CopyFont", sans-serif; font-size: 14pt; color: #FFFFFF; letter-spacing: 1.25px; } footer .frm_button_submit:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 5px; } .frm_message { font-family: "CopyFont", sans-serif !important; font-size: var(--copy-size) !important; } footer .frm_message { color: #FFFFFF; } /*OTHER*/ /*WOOCOMMERCE*/ /*HERO - USED ON VARIOUS PAGES THAT AREN'T GUTENBERG*/ .woocommerce-hero { padding-top: 500px; padding-bottom: 100px; background-image: url("/wp-content/uploads/2025/07/shop-hero.webp"); background-size: cover; background-position: center; background-attachment: fixed; } /*COLOUR THE TITLE*/ .woocommerce-hero .title { color: #FFFFFF; } /*MYACCOUNT/MY-ACCOUNT.PHP*/ .woocommerce-account-content { padding-top: 100px; padding-bottom: 100px; } /*SINGLE-PRODUCT.PHP*/ /*HERO*/ .woocommerce-hero-single-product { padding-top: 500px; padding-bottom: 100px; } /*PAD OUT THE CONTENT*/ .single-product-content { position: relative; padding-top: 100px; padding-bottom: 100px; } /*ARROWS*/ .product-arrows { position: fixed; top: 50%; transform: translateY(-50%); z-index: 999; } .product-arrows .arrow { color: #FFFFFF; } .product-arrows .arrow:hover { color: #1ABC9C; } .product-arrows .arrow-left { position: absolute; left: 25px; font-size: 12pt; text-transform: uppercase; } .product-arrows .arrow-right { position: absolute; right: 25px; font-size: 12pt; text-transform: uppercase; } .product-arrows .arrow span:first-of-type { margin-right: 15px; } /*PRODUCT GALLERY*/ .product-gallery { margin-bottom: 50px; } /*APPLY HEIGHT TO EACH ITEM*/ .gallery-item { height: 500px; background-size: cover; background-position: center; background-repeat: no-repeat; } /*ARCHIVE-PRODUCT.PHP*/ /*PRODUCT LOOP*/ /*PRODUCT*/ .product { background-color: rgba(0,0,0,0.25); box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; border-radius: 25px; } /*CHANGE THE PRODUCT LINK WHEN HOVERING THE WHOLE PRODUCT*/ .product:hover .product-link { background-color: #282828; color: #1ABC9C; } /*PRODUCT META*/ .product-meta { margin-bottom: 0px; } /*PRODUCT IMAGE*/ .product-image { border-top-left-radius: 25px; border-top-right-radius: 25px; } /*PRODUCT DETAILS*/ .product-details { padding: 15px; } /*TITLE*/ .product-title { text-transform: uppercase; color: #FFFFFF; } /*PRICE*/ .product-price { display: inline-block; background-color: #1ABC9C; color: #FFFFFF; border-radius: 15px; padding: 15px; margin-bottom: 25px; } /*DESCRIPTION*/ .product-description { font-family: var(--copy-font-family); font-size: var(--copy-font-size); color: #BCC6CC; margin-top: 15px; } /*LINK*/ .product-link { display: block; background-color: #1ABC9C; font-family: var(--copy-font-family); font-size: var(--copy-font-size); color: #FFFFFF; text-align: center; margin-top: 15px; padding-left: 25px; padding-right: 25px; padding-top: 15px; padding-bottom: 15px; border-radius: 15px; } /*FANCYBOX*/ .fancybox-infobar { display: none; } /*MEDIA QUERIES*/ @media (max-width: 1600px) { } @media (max-width: 1400px) { .center, .center-alt { width: 85%; } } @media (max-width: 1200px) { /*FOOTER*/ footer { padding-top: 50px; padding-bottom: 50px; } footer .footer-holder:nth-of-type(1), footer .footer-holder:nth-of-type(2), footer .footer-holder:nth-of-type(3) { width: 100%; border-left: none; border-right: none; } footer .footer-holder:nth-of-type(1) { padding-top: 50px; order: 2; } footer .footer-holder:nth-of-type(2) { order: 1; padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; } footer .footer-holder:nth-of-type(3) { order: 3; } footer .footer-bottom { padding: 25px; } footer .footer-bottom-holder { width: 100% !important; text-align: center !important; } footer .footer-bottom-holder:nth-of-type(2) { order: 1; } footer .footer-bottom-holder:nth-of-type(1) { margin-top: 50px; order: 2; } footer .footer-bottom-holder:nth-of-type(3) { order: 3; } footer .footer-bottom-holder .line { display: none; } /*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%; } } @media (max-width: 800px) { .center, .center-alt { width: calc(100% - 50px); } /*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; } /*WOOCOMMERCE*/ /*MYACCOUNT/MY-ACCOUNT.PHP*/ .woocommerce-account-content { padding-top: 50px; padding-bottom: 50px; } /*SINGLE-PRODUCT.PHP*/ /*CHANGE PADDING ON CONTENT*/ .single-product-content { padding-top: 100px; padding-bottom: 100px; } /*PRODUCT IMAGE GALLERY*/ .product-gallery .gallery-item { height: 500px !important; background-size: cover; background-position: center; background-repeat: no-repeat; } /*ARCHIVE-PRODUCT.PHP*/ /*PRODUCT LOOP*/ .product-loop { padding-top: 50px; padding-bottom: 50px; } }