/*
Theme Name: Matchplay Builder
Theme URI: https://builder.matchplaygolfmarketing.com
Author: Justin Benner
Author URI: https://justinbenner.com
Description: Matchplay Builder v2.0 is the latest evolution of our builder theme. It features advanced new features, such as inner blocks, automatic field sync, and more.
Version: 2.0
Text Domain: builderv2

Matchplay Builder v2.0 © Justin Benner
Distribution or use of any kind without expressed contractual or written permission of Matchplay Golf Marketing or Justin Benner is strictly prohibited.
*/

/*RESET*/

    * {
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;
    } 

	/*MAKE ALL ANCHORS AND BUTTONS HAVE A POINTER CURSOR BY DEFAULT*/

		a, button {
			cursor: revert;
		}

	/*REMOVE DEFAULT UNDERLINE FROM TEXT LINKS*/

		a {
			text-decoration: none;
		}

	button, input[type="submit"] {
		cursor: pointer;
	}

/*FIX VARIOUS ACF PROBLEMS*/

	.acf-fc-popup a {
		display: block !important;
	}

/*SCROLLBAR*/

	body::-webkit-scrollbar {
		width: var(--scroll-bar-width);
	}

	body::-webkit-scrollbar-track {
		background-color: var(--scroll-bar-track-bg);
		border-radius: 0px
	}

	body::-webkit-scrollbar-thumb {
		background-color: var(--scroll-bar-thumb-bg);
	}

/*BODY*/

	body {
		background-color: var(--body-bg);
	}

	/*PREVENT OVERFLOW ON BODY OF WOOCOMMERCE ACCOUNT PAGE*/

		body.woocommerce-account {
			overflow-x: hidden;
		}

/*UTILITY CLASSES*/

    /*WIDTHS*/

        .full {
            width: 100%;
        }

        .center {
            width: 75%;
            margin: 0 auto;
        }

		.center-alt {
			width: 60%;
			margin: 0 auto;
		}

    /*FLEX*/

        /*ROWS*/

            .flex-row-start-start {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .flex-row-center-center {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
            }

            .flex-row-center-start {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                align-items: flex-start;
            }

			.flex-row-start-center {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
            }

			.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-rowreverse-between-center {
                display: flex;
                flex-direction: row-reverse;
                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-nowrap-between-stretch {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: space-between;
                align-items: stretch;
			}

        /*COLUMNS*/

			.flex-col-between-center {
				display: flex;
				flex-direction: column;
				flex-wrap: wrap;
				justify-content: space-between;
				align-items: center;
			}

            .flex-col-start-start {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }

            .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-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-center-end {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                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-start-center {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
            }


/*FONTS*/

	/*TITLE*/

		.title, h1 {
			font-family: var(--title-family);
			font-size: var(--title-size);
			font-weight: var(--title-weight);
			line-height: var(--title-leading);
		}

	/*SUBTITLE*/

		.subtitle, h2, .comment-reply-title, .google-map-text {
			font-family: var(--subtitle-family);
			font-size: var(--subtitle-size);
			font-weight: var(--subtitle-weight);
			line-height: var(--subtitle-leading);
		}

	/*SUBHEAD*/

		.subhead, summary.subhead, h3, h4 {
			font-family: var(--subhead-family);
			font-size: var(--subhead-size);
			font-weight: var(--subhead-weight);
			line-height: var(--subhead-leading);
		}

	/*COPY*/

		.copy, h5 {
			font-family: var(--copy-family);
			font-size: var(--copy-size);
			font-weight: var(--copy-weight);
			line-height: var(--copy-leading);
		}

	/*FONT EFFECTS*/

		/*FADES*/

			/*UP*/

				.fade-up {
					opacity: 0;
					transform: translateY(25px);
					transition: .25s ease-out;
				}

				.fade-up.fade-up-enabled {
					opacity: 1;
					transform: translateY(0px);
					transition: .25s ease-in;
				}

			/*DOWN*/

				.fade-down {
					opacity: 0;
					transform: translateY(-25px);
					transition: .25s ease-out;
				}

				.fade-down.fade-down-enabled {
					opacity: 1;
					transform: translateY(0px);
					transition: .25s ease-in;
				}

			/*LEFT*/

				.fade-left {
					opacity: 0;
					transform: translateX(25px);
					transition: .25s ease-out;
				}

				.fade-left.fade-left-enabled {
					opacity: 1;
					transform: translateX(0px);
					transition: .25s ease-in;
				}

			/*RIGHT*/

				.fade-right {
					opacity: 0;
					transform: translateX(-25px);
					transition: .25s ease-out;
				}

				.fade-right.fade-right-enabled {
					opacity: 1;
					transform: translateX(0px);
					transition: .25s ease-in;
				}

		/*SKEWS*/

			/*LEFT*/

				.skew-left {
					transform: rotate(-5deg);
				}

			/*RIGHT*/

				.skew-right {
					transform: rotate(4deg);
				}

		/*FILL TEXT*/



/*BUTTONS*/

	/*COOKIE NOTICE*/

		.branda-cn-column a {
			font-family: var(--copy-family);
			font-size: var(--copy-size);
			font-weight: var(--copy-weight);
		}

	/*WOOCOMMERCE AND PRIMARY BUTTONS*/

		.theme-primary-button, .woocommerce button, .woocommerce a.button, input[type="submit"] {
			display: inline-block;
			font-family: var(--copy-family);
			font-size: var(--copy-size);
			font-weight: var(--copy-weight);
			background-color: var(--button-bg);
			color: var(--button-text-colour);
			border: none;
			border-radius: var(--button-radius);
			padding: var(--button-padding);
			text-transform: uppercase;
			text-decoration: none;
			transition: .25s ease-out;
		}

		/*HOVER*/

			.theme-primary-button:hover, .woocommerce button:hover, .woocommerce a.button:hover, input[type="submit"]:hover {
				color: var(--button-text-hover-colour);
				background-color: var(--button-bg-hover);
				transition: .25s ease-in;
			}

/*404 PAGE*/

	.fourohfour-page {
		padding-top: 100px;
		padding-bottom: 100px;
	}

	/*ADD MARGIN TO TITLE*/

		.fourohfour-page .title {
			margin-bottom: 25px;
		}

/*HEADER*/



/*MAIN*/

	main {
		overflow-x: hidden;
	}

/*FLEXIBLE CONTENT*/

	/*TEXT WITH LINE*/

		/*SETUP THE LINEHOLDER*/

			.text-with-line .line-holder {
				width: 200px;
			}

			/*STYLE THE LINE*/

				.text-with-line .line-holder .line {
					height: 1px;
				}

		/*SETUP THE TEXT HOLDERS*/

			.text-with-line .text {
				width: calc(50% - 150px);
			}

	/*SIDE IMAGE WITH LINE*/

		/*SETUP THE TEXT HOLDER*/

			.side-image-with-line .text {
				width: calc(50% - 50px);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				text-align: left;
			}

			/*STYLE THE SUBTITLE*/

				.side-image-with-line .text .subtitle {
					margin-bottom: 50px;
					padding-left: 50px;
				}

			/*STYLE THE LINEHOLDER AND LINE*/

				.side-image-with-line .text .line-holder {
					margin-bottom: 50px;
				}

				.side-image-with-line .text .line-holder .line {
					width: 25%;
					height: 1px;
				}

			/*STYLE THE COPY*/

				.side-image-with-line .text p.copy {
					padding-left: 50px;
					margin-bottom: 50px;
				}


			/*STYLE THE BUTTON HOLDER*/

				.side-image-with-line .text .button-holder {
					padding-left: 50px;
				}

				.side-image-with-line .text .button-holder img {
					width: 40px;
				}

				.side-image-with-line .text .button-holder span {
					margin-left: 25px;
					color: #E3B448;
				}

				.side-image-with-line .text .button-holder span:hover {
					text-decoration: underline;
					text-underline-offset: 5px;
				}

		/*SETUP THE SIDE IMAGE*/

			.side-image-with-line .side-image {
				width: 50%;
			}

/*PROJECTS*/

	/*ARCHIVE TEMPLATE*/

		.archive-template {
			padding-top: 100px;
			padding-bottom: 100px;
		}

	/*STYLE THE FILTER*/

		.project-filter {
			margin-bottom: 50px;
		}

		/*STYLE THE LABEL, OPTION AND SELECT*/

			.project-filter label, .project-filter option, .project-filter select {
				font-family: "CopyFont", sans-serif;
			}

    /*SETUP THE GRID - BLOCK*/

		.project-grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: repeat(8, 1fr);
			grid-column-gap: 0px;
			grid-row-gap: 0px;
		}

		/*DEFINE THE GRID AREAS AND IMAGE HEIGHTS*/

			.project:nth-of-type(1) {
				grid-area: 1 / 1 / 5 / 3;
			}

			.project:nth-of-type(1) .project-image {
				height: 450px;
			}

			.project:nth-of-type(2) {
				grid-area: 6 / 1 / 9 / 4;
			}

			.project:nth-of-type(2) .project-image {
				height: 300px;
			}

			.project:nth-of-type(3) {
				grid-area: 5 / 5 / 9 / 7;;
			}

			.project:nth-of-type(3) .project-image {
				height: 500px;
			}

			.project:nth-of-type(4) {
				grid-area: 1 / 4 / 4 / 7;
			}

			.project:nth-of-type(4) .project-image {
				height: 300px;
			}

		/*STYLE THE IMAGE*/

			.project-image {
				border-radius: 15px;
				margin-bottom: 25px;
				padding: 25px;
			}

		/*STYLE THE TITLE*/

			.project-title {
				color: #FFFFFF;
			}

			.project-title:hover {
				text-decoration: underline;
				text-underline-offset: 10px;
			}

		/*STYLE THE TAGS*/

			.tags {
				white-space: nowrap;
			}

			.project-tag {
				border: 1px solid #FFFFFF;
				border-radius: 5px;
				padding: 5px;
				margin-right: 10px;
				margin-bottom: 10px;
				color: #FFFFFF;
			}

			/*.project-tag:hover {
				background-color: #FFFFFF;
				color: #222222;
			}*/

			.project-tag:last-of-type {
				margin-right: 0px;
			}

	/*SETUP THE GRID - ARCHIVE*/

		.archive-template .project-grid {
			display: grid;
			grid-gap: 50px;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			grid-template-rows: auto;
			justify-content: start;
			align-items: start;
			vertical-align: top;
		}

		.archive-template .project-grid .project {
			grid-area: auto;
		}

		.archive-template .project-grid .project .project-image {
			height: 400px !important;
		}


/*MEDIA QUERIES*/


	@media(max-width: 1500px) {

		.project-block .center {
			width: 90%;
		}

	}

    @media (max-width: 1400px) {


    }

    @media (max-width: 1200px) {

		.title {
			font-size: 32pt;
		}

        .center, .fourohfour-page .center {
            width: 85%;
        }

		.center-alt {
			width: 85%;
		}

		.text-with-line .line-holder {
			width: 100%;
			margin-bottom: 50px;
		}

		.text-with-line .text {
			width: 100%;
			margin-bottom: 25px;
		}

		.text-with-line .text:last-of-type {
			margin-bottom: 0px;
		}

		.side-image-with-line {
			margin-bottom: 50px !important;
		}

		.side-image-with-line .text {
			width: 100%;
			order: 2;
		}

		.side-image-with-line .text .subtitle {
			margin-top: 25px;
			margin-bottom: 25px;
			padding-left: 0px;
		}

		.side-image-with-line .text .line-holder {
			margin-bottom: 25px;
		}

		.side-image-with-line .text .line-holder .line {
			width: 25%;
			height: 1px;
		}

		.side-image-with-line .text p.copy {
			padding-left: 0px;
			margin-bottom: 25px;
		}

		.side-image-with-line .text .button-holder {
			padding-left: 0px;
		}

		.side-image-with-line .side-image {
			width: 100%;
			height: 50vh;
			order: 1;
			margin-bottom: 25px;
		}

		.project-grid {
            display: block;
        }

        .project {
            margin-bottom: 50px;
        }

        .project:last-of-type {
            margin-bottom: 0px;
        }

    }

    @media (max-width: 800px) {

		.title {
			font-size: 26pt;
		}

        .center, .fourohfour-page .center {
            width: calc(100% - 50px)
        }

		.center-alt {
			width: calc(100% - 50px);
		}

    }