/* 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: 65%; margin: 0 auto; } .center-alt { width: 85%; 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-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-start { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; } .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: 25px; 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% - 25px); } .centered-list .grid-centered-list.list-items-3 .centered-list-item { width: calc(33.333% - 25px); } .centered-list .grid-centered-list.list-items-4 .centered-list-item { width: calc(25% - 25px); } /*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: 100%; min-height: 400px; } /*BACKGROUND IMAGE*/ .course-slider .slide .background-image { position: absolute; top: 0px; left: 0px; z-index: 5; object-fit: cover; overflow: hidden; padding: 25px; } /*SETUP THE NAVIGATION*/ .course-slider .swiper-controls { margin-top: 25px; margin-bottom: 25px; } /*ADD SOME MARGIN*/ .course-slider .swiper-controls .arrow-left { font-size: 32pt; margin-right: 25px; cursor: pointer; } /*GIVE STANDARD WIDTH*/ .course-slider .swiper-controls .arrow-right { font-size: 32pt; 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); } /*STAGGERED TEXT WITH IMAGE*/ /*ALIGN THE STAGGERED TEXT*/ .staggered-text-with-image .staggered-text-left { text-align: left; } .staggered-text-with-image .staggered-text-right { text-align: right; } /*ADD SOME MARGIN BETWEEN THEM*/ .staggered-text-with-image .staggered-text-left { margin-bottom: 50px; } /*ADD SOME MARGIN TO THE TOP OF THE CONTENT*/ .staggered-text-with-image .staggered-content { margin-top: 50px; } /*ADD SOME WIDTH TO THE IMAGE AND PULL IT UP WITH NEGATIVE MARGIN*/ .staggered-text-with-image .staggered-content .staggered-image { width: 35%; margin-top: -50px; } /*ADD THE WIDTH TO THE TEXT AND GIVE IT PADDING BOTTOM*/ .staggered-text-with-image .staggered-content .staggered-text { width: calc(65% - 50px); padding-bottom: 50px; } /*VERTICAL SLIDER*/ .vertical-slider { position: relative; width: 100%; height: 100vh; overflow: hidden; } .vertical-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; display: flex; overflow: hidden; } .vertical-slide-content { position: relative; width: 50%; padding: 100px; background: #fff; display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box; z-index: 2; } .vertical-slide-image { width: 50%; height: 75%; margin-bottom: 100px; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1; } .vertical-slider-progress-vertical { position: absolute; left: 100px; top: calc(25vh); bottom: 400px; width: 6px; background: rgba(0,0,0,0.1); border-radius: 3px; z-index: 10; overflow: hidden; pointer-events: none; } .vertical-slider-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: #FCE203; box-shadow: 0 0 10px rgba(0,0,0,0.4); transform-origin: bottom center; } /*IMAGES WITH MODALS*/ .images-with-modals { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(11, 1fr); min-height: 100vh; } .images-with-modals .image { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; cursor: pointer; } .images-with-modals .image img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } .images-with-modals .image figcaption { position: relative; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); font-family: var(--subtitle-font-family); font-size: 24pt; color: #FFF; padding: 25px; } .images-with-modals .image figcaption::after { content: '+'; font-size: 1.5em; line-height: 1; border: 1px solid white; border-radius: 50%; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; margin-left: 10px; } .images-with-modals .image:nth-of-type(1) { grid-column: 1 / span 5; grid-row: 1 / span 3; z-index: 10; } .images-with-modals .image:nth-of-type(2) { grid-column: 7 / span 4; grid-row: 1 / span 3; z-index: 10; } .images-with-modals .image:nth-of-type(3) { grid-column: 3 / span 6; grid-row: 3 / span 6; z-index: 5; } .images-with-modals .image:nth-of-type(4) { grid-column: 1 / span 4; grid-row: 8 / span 3; z-index: 4; } .images-with-modals .image:nth-of-type(5) { grid-column: 6 / span 5; grid-row: 8 / span 4; z-index: 4; } .images-with-modals dialog { width: 40%; opacity: 1; padding: 0px; transition: .25s ease-in; } .images-with-modals dialog:not([open]) { display: none; opacity: 0; transition: .25s ease-in; } .images-with-modals dialog::backdrop { background-color: rgba(0, 0, 0, 0.65); } .images-with-modals dialog .modal-image { width: 40%; height: 500px; } .images-with-modals dialog .modal-content { width: 60%; background-color: #455A53; padding: 50px; padding-top: 100px; padding-bottom: 100px; } .images-with-modals dialog .modal-close { position: absolute; right: 25px; bottom: 25px; border: 1px solid #FFF; padding-left: 25px; padding-right: 25px; padding-top: 15px; padding-bottom: 15px; font-family: var(--copy-font-family); color: #FFF; cursor: pointer; } .images-with-modals dialog .modal-close:hover { border: 1px solid #2f2f2f; } .images-with-modals article { display: none; } /*COMPONENTS*/ /*VIDEO*/ /*MAKE POSTER COVER THE VIDEO*/ .vjs-poster img { object-fit: cover !important; } /*MAKE THE TECH COVER THE CONTAINER*/ .video-js .vjs-tech { object-fit: cover; } /*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; } /*COMPONENT SLIDER*/ .component-swiper-controls { padding-right: 25px; font-size: 24pt; } .component-swiper-controls .arrow-left { margin-right: 25px; } .component-swiper-controls .arrow-left, .component-swiper-controls .arrow-right { cursor: pointer; } /*LISTING CATEGORY*/ .listing-category { display: block; padding: 25px; } .listing-category .listing-details { padding-top: 250px; color: #FFF; } .listing-category .listing-details .subheading { border-bottom: 1px solid #FFF; } .listing-category .listing-details .listing-amenities { margin-top: 10px; } .listing-category .listing-details .listing-amenity { margin-right: 25px; } .listing-category .listing-details .listing-amenity:last-of-type { margin-right: 0px; } .listing-category .listing-details .listing-amenity img { width: 15px; margin-right: 5px; } /*LISTINGS HOLDER*/ .listing-holder { padding-top: 25px; padding-bottom: 100px; } .listing-holder .listing-item { margin-bottom: 50px; } .listing-holder .listing-item:last-of-type { margin-bottom: 0px; } .listing-holder .listing-item:nth-of-type(odd) { display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; } .listing-holder .listing-item:nth-of-type(even) { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; } .listing-holder .listing-photos { width: 50%; } .listing-holder .listing-photo-slider { position: relative; } .listing-holder .listing-photo { height: 60vh; } .listing-holder .listing-photo-slider .swiper-controls { position: absolute; top: 50%; left: 0px; transform: translateY(-50%); z-index: 10; } .listing-holder .listing-photo-slider .swiper-controls .arrow-left, .listing-holder .listing-photo-slider .swiper-controls .arrow-right { background-color: rgba(252,194,14,0.5); cursor: pointer; padding: 25px; } .listing-holder .listing-photo-slider .swiper-controls div img { filter: invert(100%); } .listing-holder .listing-details { width: 50%; background-color: #FFF; padding: 50px; } .listing-holder .listing-stats { border-top: 1px solid rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); padding-top: 15px; padding-bottom: 15px; margin-top: 15px; margin-bottom: 15px; } .listing-holder .listing-stat { margin-right: 15px; } .listing-holder .listing-links { margin-top: 25px; } .listing-holder .listing-links a { border-bottom: 1px solid #f3a144; text-transform: uppercase; margin-right: 15px; } .listing-holder .listing-links a:last-of-type { margin-right: 0px; } .listing-holder .listing-links a:hover { color: #f3a144; } /*LISTINGS*/ .breadcrumbs { font-family: var(--copy-font-family); font-size: var(--copy-font-size); text-transform: uppercase; } .breadcrumbs a:hover { color: #F3A144; } .listing .center { padding-top: 250px; padding-bottom: 100px; } .listing .listing-title { margin-bottom: 25px; } .listing .listing-photos { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; margin-bottom: 50px; } .listing-photo-1 { grid-area: 1 / 1 / 3 / 4; height: 400px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .listing-photo-2 { grid-area: 1 / 4 / 2 / 5; border-left: 5px solid #FFF; border-bottom: 5px solid #FFF; border-right: 5px solid #FFF; } .listing-photo-3 { grid-area: 1 / 5 / 2 / 6; border-bottom: 5px solid #FFF; border-top-right-radius: 5px; } .listing-photo-4 { grid-area: 2 / 4 / 3 / 5; border-left: 5px solid #FFF; border-right: 5px solid #FFF; } .listing-photo-5 { grid-area: 2 / 5 / 3 / 6; border-bottom-right-radius: 5px; } .listing-info { width: 50%; } .listing-availability { width: calc(50% - 100px); } .availability-calendar-container { max-width: 700px; } .availability-calendar-wrapper { display: flex; flex-wrap: wrap; gap: 50px; } .calendar-month-container { max-width: 300px; } .calendar-title { font-family: var(--copy-font-family); font-size: 18px; font-weight: 600; margin-bottom: 20px; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; text-align: center; } .weekday-label { font-family: var(--copy-font-family); font-size: 12px; color: #a0a0a0; font-weight: 600; } .date-cell { font-family: var(--copy-font-family); font-size: 14px; width: 35px; height: 35px; line-height: 35px; position: relative; } .is-available { background-color: #000; color: #fff; border-radius: 50%; } .is-booked { color: #d1d1d1; } .is-booked::after { content: ""; position: absolute; top: 50%; left: 15%; width: 70%; height: 1px; background-color: #d1d1d1; } .empty { visibility: hidden; } .calendar-legend { display: flex; gap: 20px; margin-top: 30px; padding-top: 20px; } .legend-item { display: flex; align-items: center; font-family: var(--copy-font-family); font-size: 14px; color: #666; } .legend-circle { width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; } .legend-circle.available { background-color: #000; } .legend-circle.booked { background-color: #fff; border: 1px solid #d1d1d1; position: relative; overflow: hidden; } .legend-circle.booked::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-color: #d1d1d1; } .calendar-holder { margin-bottom: 50px; max-width: 300px; } .book-now-button { max-width: 300px; text-transform: uppercase; text-align: center; padding-top: 25px; padding-bottom: 25px; border-top: 1px solid rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); } .book-now-button .subheading { font-size: 22pt; margin-bottom: 10px; } .book-now-button .copy { color: #F3A144; } .book-now-button .copy:hover { color: #000; } /*BLOCK SPECIFIC STYLING*/ /*SITE SPECIFIC STYLING*/ /*FONTS*/ /*HEADER*/ header { position: fixed; top: 0px; left: 0px; padding-top: 50px; padding-left: 50px; padding-right: 50px; z-index: 999; } /*STYLE THE MENU TRIGGER*/ .menu-trigger { cursor: pointer; } .menu-trigger:hover { color: #F3A144; } .header-menu-trigger { cursor: pointer; transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; } .header-menu-trigger.is-hidden { opacity: 0; visibility: hidden; } /*STYLE THE LOGO*/ header .header-logo { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); } header .header-logo img { width: 100px; } /*STYLE THE LIST*/ header ul { display: flex; } /*STYLE THE LIST ITEMS*/ header ul li { margin-right: 25px; } header ul li:last-of-type { margin-right: 0px; } /*STYLE THE LINKS*/ header ul li a { font-family: var(--copy-font-family); font-size: var(--copy-font-size); text-transform: uppercase; } header ul li a:hover { color: #F3A144; } /*NAVIGATION*/ #primary-navigation { position: fixed; top: 0px; left: 0px; width: 25%; height: 100vh; background-color: #FEFBF5; z-index: 1000; opacity: 0; } #primary-navigation.nav-active { opacity: 1; } #primary-navigation .menu-trigger { position: absolute; top: 57px; left: 50px; font-family: var(--copy-font-family); font-size: 14pt; } #primary-navigation .menu-holder { padding: 50px; margin-bottom: 25px; border-bottom: 1px solid #ACACAC; } #primary-navigation .menu-holder .menu-title { margin-bottom: 25px; } #primary-navigation ul li { margin-bottom: 15px; } #primary-navigation ul li a { font-family: var(--subtitle-font-family); font-size: var(--subtitle-font-size); } #primary-navigation .submenu-holder { padding-top: 25px; padding-bottom: 25px; padding-left: 50px; padding-right: 50px; } #primary-navigation .submenu-holder div:first-of-type { margin-right: 50px; } #primary-navigation .submenu-holder a { margin-bottom: 20px; } #primary-navigation a:hover { color: #F3A144; } #nav-imagery { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 998; overflow: hidden; pointer-events: none; } .nav-image { position: absolute; top: 0; left: 25%; width: 450px; height: 100%; opacity: 0; } .nav-image img { width: 100%; height: 100%; object-fit: cover; } .form-trigger { position: fixed; bottom: 0; right: 0; z-index: 9998; cursor: pointer; background-color: #101010; padding-left: 25px; padding-right: 25px; padding-top: 15px; padding-bottom: 15px; font-family: var(--copy-font-family); font-size: var(--copy-font-size); color: #FFF; } #side-form { position: fixed; top: 0; right: 2.25px; width: 25%; height: 100vh; background: #101010; z-index: 100; overflow-y: auto; visibility: hidden; opacity: 0; } #side-form input, #side-form .frm_primary_label { font-family: var(--copy-font-family) !important; font-size: var(--copy-font-size) !important; } #side-form .subheading { color: #FFF; margin-bottom: 25px; } #side-form select { background-color: #000; color: #FFF !important; } /*BODY*/ body { background-color: #FEFBF5 !important; } /*MAIN*/ main { position: relative; background-color: #FEFBF5 !important; z-index: 1; transition: filter 0.5s ease-in-out; } /*FOOTER*/ footer { background-color: #211D19; } /*TOP*/ footer .footer-top { padding-top: 25px; padding-bottom: 25px; } footer .footer-top ul { display: flex; } footer .footer-top ul li { margin-right: 25px; } footer .footer-top ul li a { font-family: var(--subheading-font-family); font-size: 18pt; color: #FFF; } footer .footer-top ul li a:hover { color: #F3A203; } /*MIDDLE*/ footer .footer-middle { border-top: 1px solid #FFF; border-bottom: 1px solid #FFF; } footer .footer-middle .footer-holder { width: 50%; padding-top: 50px; padding-bottom: 50px; } footer .footer-middle .footer-holder:first-of-type { border-right: 1px solid #FFF; padding-left: 50px; padding-right: 50px; } footer .footer-middle .footer-holder:nth-of-type(2) { padding-left: 50px; padding-right: 50px; } footer .footer-middle .footer-logo { display: inline-block; margin-bottom: 25px; } footer .footer-middle .footer-logo img { width: 150px; } footer .footer-middle p, footer .footer-middle a { display: block; color: #FFF; } footer .footer-middle a:hover { color: #F3A144; } footer .footer-bottom { color: #FFF; } footer .footer-bottom a:hover { color: #F3A144; } /*BOTTOM*/ footer .footer-bottom { padding-top: 25px; padding-bottom: 25px; } /*OTHER*/ /*COOKIE CONSENT*/ #wpconsent-root { font-family: var(--copy-font-family); } /*PULL HERO VIDEOS UP*/ /*HOME*/ #home-02 { margin-top: -75px !important; } /*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: 1650px) { /*STAGGERED TEXT WITH IMAGE*/ .staggered-text-with-image .staggered-content { margin-top: 75px; } } @media (max-width: 1600px) { /*PRIMARY NAVIGATION*/ #primary-navigation { width: 35%; } .nav-image { left: 35%; } } @media (max-width: 1400px) { .center, .center-alt { width: 85%; } /*VERTICAL SLIDER*/ .vertical-slider { position: relative; height: auto; overflow: visible; } .vertical-slide { position: relative; display: block; height: auto; overflow: visible; } .vertical-slide-content { width: 100%; padding: 40px 20px; transform: none !important; opacity: 1 !important; } .vertical-slide-image { position: relative; width: 100%; height: 300px; margin-top: 20px; transform: none !important; } .vertical-slider-progress-vertical { display: none; } } @media (max-width: 1200px) { .center, .center-alt { width: 95%; } /*PRIMARY NAVIGATION*/ #primary-navigation { width: 45%; } .nav-image { left: 45%; } /*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%; } /*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%; } /*STAGGERED TEXT WITH IMAGE*/ .staggered-text-with-image .staggered-content { margin-top: 50px; } .staggered-text-with-image .staggered-content .staggered-image { width: 100%; height: 400px; margin-top: 0px; margin-bottom: 50px; } .staggered-text-with-image .staggered-content .staggered-text { width: 100%; } /*IMAGES WITH MODALS*/ .images-with-modals { display: flex; flex-direction: column; grid-template-columns: initial; grid-template-rows: initial; min-height: auto; } .images-with-modals .image { grid-column: initial !important; grid-row: initial !important; width: 100%; height: 350px; box-shadow: none; cursor: default; } .images-with-modals dialog { display: none !important; } .images-with-modals article { display: block; order: 1; margin-bottom: 25px; } .images-with-modals article p { color: #000 !important; } .images-with-modals .image figcaption::after { content: none; } .images-with-modals .image:nth-of-type(1) { order: 1; } .images-with-modals .image:nth-of-type(2) { order: 3; } .images-with-modals .image:nth-of-type(3) { order: 5; } .images-with-modals .image:nth-of-type(4) { order: 7; } .images-with-modals .image:nth-of-type(5) { order: 9; } .images-with-modals article:nth-of-type(1) { order: 2; } .images-with-modals article:nth-of-type(2) { order: 4; } .images-with-modals article:nth-of-type(3) { order: 6; } .images-with-modals article:nth-of-type(4) { order: 8; } .images-with-modals article:nth-of-type(5) { order: 10; } /*SINGLE LISTING*/ .listing-description .listing-info { width: 100%; } .listing-description .listing-availability { width: 100%; } .listing-description .listing-availability .availability-calendar-container { max-width: none; } .listing-description .listing-availability .availability-calendar-wrapper { display: flex; flex-direction: row; flex-wrap: nowrap; } } @media (max-width: 1000px) { /*HEADER*/ .desktop-navigation { display: none; } /*PRIMARY NAVIGATION*/ #primary-navigation { width: 55%; } #primary-navigation .menu-trigger, #primary-navigation .menu-title { display: none; } .nav-image { left: 55%; } /*LISTING HOLDER*/ .listing-holder .listing-item:nth-of-type(odd) { flex-direction: column; } .listing-holder .listing-item:nth-of-type(even) { flex-direction: column; } .listing-holder .listing-photos { width: 100%; } .listing-holder .listing-details { width: 100%; } } @media (max-width: 800px) { .center, .center-alt { width: calc(100% - 50px); } /*HEADER*/ header { z-index: 9999; } /*PRIMARY NAVIGATION*/ #primary-navigation { width: 100%; } #nav-imagery { display: none; } .nav-image { display: none; } #primary-navigation .menu-trigger { display: block; } /*FOOTER*/ footer .footer-middle .footer-holder { width: 100%; } footer .footer-middle .footer-holder:first-of-type { justify-content: center !important; align-items: center !important; text-align: center; padding-bottom: 0px; } /*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; } }