@import url(font-awesome.min.css);

/*
Theme Name: Spectral
Description: Built off of Twenty Twenty-Two, this is a conversion of HTML5 Up's Spectral to Wordpress.
Requires at least: 5.9
Tested up to: 6.3
Requires PHP: 5.6
Version: 1.1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spectral
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, style-variations, wide-blocks, block-styles, accessibility-ready, portfolio, news

Spectral WordPress Theme, (C) 2023 Peter Kiernan.
Spectral is distributed under the terms of the GNU GPL.
*/

/*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
  	overscroll-behavior-y: none;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

.wp-block-search__button,
.wp-block-file .wp-block-file__button,
.wp-block-button__link {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/*
 * Alignment styles.
 * These rules are temporary, and should not be relied on or
 * modified too heavily by themes or plugins that build on
 * Twenty Twenty-Two. These are meant to be a precursor to
 * a global solution provided by the Block Editor.
 *
 * Relevant issues:
 * https://github.com/WordPress/gutenberg/issues/35607
 * https://github.com/WordPress/gutenberg/issues/35884
 */

/* .page-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div = alignfull
 * but if we do that with jquery the site gets super slow so we just
 * make it synonymous in the CSS
 */

/*

.wp-site-blocks,
body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.page-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div.wp-block-group,
.post-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div.wp-block-group,
.wp-block-group.has-background,
.wp-block-cover.alignfull,
.page-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div.wp-block-cover,
.post-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div.wp-block-cover,
.is-root-container .wp-block[data-align="full"] > .wp-block-group,
.is-root-container .wp-block[data-align="full"] > .wp-block-cover {
	padding-left: var(--wp--custom--spacing--outer);
	padding-right: var(--wp--custom--spacing--outer);
}

.wp-site-blocks .alignfull,
.page-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div,
.post-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div,
.wp-site-blocks > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
.wp-site-blocks > .wp-block-template-part > .wp-block-cover,
body > .is-root-container > .wp-block-cover,
body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
body > .is-root-container > .wp-block-template-part > .wp-block-cover,
.is-root-container .wp-block[data-align="full"] {
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	width: unset;
}
*/

/* Blocks inside columns don't have negative margins. */
.wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
.is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
/* We also want to avoid stacking negative margins. */
.wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
.page-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div:not(.wp-block-group) .alignfull,
.post-template-stfullwidth > .wp-site-blocks > .wp-block-group > .wp-block-post-content > div:not(.wp-block-group) .alignfull,
.is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
	margin-left: auto !important;
	margin-right: auto !important;
	width: inherit;
}

/*
 * Responsive menu container padding.
 * This ensures the responsive container inherits the same
 * spacing defined above. This behavior may be built into
 * the Block Editor in the future.
 */

.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var(--wp--custom--spacing--outer);
	padding-bottom: var(--wp--custom--spacing--large);
	padding-right: var(--wp--custom--spacing--outer);
	padding-left: var(--wp--custom--spacing--outer);
}

/*
 * Improves spacing for the legacy Post Comments block.
 * https://core.trac.wordpress.org/ticket/57560
 */

.wp-block-post-comments ol.commentlist ul.children {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.wp-block-post-comments ol.commentlist li.comment:not(:last-child) {
	margin-bottom: 1rem;
}

/* Adjusting for preferences */
.wp-site-blocks > * {
    margin-block-start: 0rem!important;
}

.wp-block-image.size-full,
.wp-block-image.size-full img{
	width: 100%
}

.wp-block-image figcaption {
	color: inherit;
}

html {
  scroll-behavior: smooth;
}

/* Make the flipbox images go all the way to the sides */

.cfb-block-img {
	width: 100% !important;
}

/* Make the flipbox containers expand with contents */

.wp-block-cp-cool-flipbox-block {
	height: auto;
}

/*
    Spectral by HTML5 UP
    html5up.net | @ajlkn
    Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/* Box Model */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/* Basic */

body.is-loading *, body.is-loading *:before, body.is-loading *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}

    a {
        -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
        transition: color 0.2s ease, border-bottom-color 0.2s ease;
    }

        a:hover {
            border-bottom-color: transparent;
        }

/* Page Wrapper + Menu */

    .wp-site-blocks {
        -moz-transition: opacity 0.5s ease;
        -webkit-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
        opacity: 1;
    }
	
	/*
	body:not(.home) .wp-site-blocks {
		padding-top: 3em;
	}
	*/

        .wp-site-blocks:before {
            background: transparent;
            content: '';
            display: block;
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 10001;
        }

/* Header */

	/* Prevent double adjusting for admin bar*/

	.admin-bar .wp-block-navigation .wp-block-navigation {
		top: 0;
	}

    header.wp-block-template-part {
        height: 3em;
        left: 0;
        line-height: 3em;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }

	.wp-block-navigation {
        -moz-transition: background-color 0.2s ease, -moz-transform 0.75s ease, opacity 0.75s ease;
        -webkit-transition: background-color 0.2s ease, -webkit-transform 0.75s ease, opacity 0.75s ease;
        -ms-transition: background-color 0.2s ease, -ms-transform 0.75s ease, opacity 0.75s ease;
        transition: background-color 0.2s ease, transform 0.75s ease, opacity 0.75s ease;
        /*background: var(--wp--preset--color--tertiary);*/
        /*background-color: black;*/
		-moz-transition-delay: 3s;
		-webkit-transition-delay: 3s;
		-ms-transition-delay: 3s;
		transition-delay: 3s;
	}

	/* Make collapsed mobile version transparent and on the right */

	@media (min-width: 600px) {
		.wp-block-navigation {
			background-color: var(--wp--preset--color--background);
		}
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open {
		position: absolute;
		right: 0;
		padding: 0 1em;
	}

    .admin-bar .wp-block-navigation {
        top: var(--wp-admin--admin-bar--height)
    }

    .home .wp-block-navigation.is-loading {
        -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
        -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
        -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
        transition: transform 0.75s ease, opacity 0.75s ease;
        -moz-transition-delay: 3.5s;
        -webkit-transition-delay: 3.5s;
        -ms-transition-delay: 3.5s;
        transition-delay: 3.5s;
        opacity:0;
    }

        .wp-block-navigation h1 {
            -moz-transition: opacity 0.2s ease;
            -webkit-transition: opacity 0.2s ease;
            -ms-transition: opacity 0.2s ease;
            transition: opacity 0.2s ease;
			-moz-pointer-events: none;
			-webkit-pointer-events: none;
			-ms-pointer-events: none;
			pointer-events: none;
			opacity: 1; /*used to be 0*/
			background-color:black;
            height: inherit;
            left: 1.25em;
            line-height: inherit;
            position: absolute;
            top: 0;
        }

            .wp-block-navigation h1 a {
                border: 0;
                display: block;
                height: inherit;
                line-height: inherit;
            }

                @media screen and (max-width: 736px) {

                    .wp-block-navigation h1 a {
                        font-size: 0.8em;
                    }

                }


        .wp-block-navigation {
            height: inherit;
            line-height: inherit;
            /*position: absolute;*/
            right: 0;
            top: 0;
            /*margin: 0 auto;*/
            display: table;
            text-align: center;
        }

            .wp-block-navigation .wp-block-page-list {
                list-style: none;
                padding: 0;
                white-space: nowrap;
            }

                .wp-block-navigation .wp-block-navigation-item {
                    margin-block-start: 0rem!important;
                    display: inline-block;
                    padding: 0;
                }
				
				
				.wp-block-navigation .wp-block-navigation-item a {
					-moz-transition: color 0.2s ease-in-out;
					-webkit-transition: color 0.2s ease-in-out;
					-ms-transition: color 0.2s ease-in-out;
					transition: color 0.2s ease-in-out;
					color: #ffffff;
					border: 0;
					color: var(--wp--preset--color--foreground);
					/*display: block;*/
					font-size: 0.8em;
					letter-spacing: 0.225em;
					padding: 0 1.5em;
					text-transform: uppercase;
				}
					.wp-block-navigation .wp-block-navigation-item a:hover {
						-moz-transition: color 0.2s ease-in-out;
						-webkit-transition: color 0.2s ease-in-out;
						-ms-transition: color 0.2s ease-in-out;
						transition: color 0.2s ease-in-out;
						color: #a32130;
						cursor: pointer;
					}

                        .wp-block-navigation .wp-block-navigation__responsive-container-close {
                            outline: 0;
                            position: relative;
                        }

/* Banner */

#banner {
    height: calc(100vh);
    min-height: 360px;
}

    #banner .wp-block-cover__inner-container {
        -moz-flex-direction: column;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -moz-justify-content: center;
        -webkit-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        cursor: default;
        margin: auto;
        text-align: center;
    }

        #banner .wp-block-cover__inner-container > * {
            height: 100%;
        }

        #banner h2 {
            -moz-transform: scale(1);
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
            -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
            -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
            -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
            transition: transform 0.5s ease, opacity 0.5s ease;
            display: inline-block;
            font-size: 1.75em;
            opacity: 1;
            padding: 0.35em 1em;
            position: relative;
            z-index: 1;
        }

            #banner h2:before, #banner h2:after {
                -moz-transition: width 0.85s ease;
                -webkit-transition: width 0.85s ease;
                -ms-transition: width 0.85s ease;
                transition: width 0.85s ease;
                -moz-transition-delay: 0.25s;
                -webkit-transition-delay: 0.25s;
                -ms-transition-delay: 0.25s;
                transition-delay: 0.25s;
                background: var(--wp--preset--color--foreground);
                content: '';
                display: block;
                height: 2px;
                position: absolute;
                width: 100%;
            }

            #banner h2:before {
                top: 0;
                left: 0;
            }

            #banner h2:after {
                bottom: 0;
                right: 0;
            }

        #banner p {
            letter-spacing: 0.225em;
            text-transform: uppercase;
        }

            #banner p a {
                color: inherit;
            }

        #banner .more {
            -moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
            -webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
            -ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
            transition: transform 0.75s ease, opacity 0.75s ease;
            -moz-transition-delay: 3.5s;
            -webkit-transition-delay: 3.5s;
            -ms-transition-delay: 3.5s;
            transition-delay: 3.5s;
            -moz-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            -ms-transform: translate(-50%,0);
            transform: translate(-50%,0);
            border: none;
            bottom: 0;
            height: 8.5em;
            left: 50%;
            letter-spacing: 0.225em;
            opacity: 1;
            outline: 0;
            position: absolute;
            text-transform: uppercase;
            z-index: 1;
        }

            #banner .more:after {
                background-image: url("assets/images/arrow.svg");
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                bottom: 4em;
                content: '';
                display: block;
                height: 1.5em;
                left: 50%;
                margin: 0 0 0 -0.75em;
                position: absolute;
                width: 1.5em;
            }

        #banner .wp-block-cover__inner-container:after {
            -moz-pointer-events: none;
            -webkit-pointer-events: none;
            -ms-pointer-events: none;
            pointer-events: none;
            -moz-transition: opacity 3s ease-in-out;
            -webkit-transition: opacity 3s ease-in-out;
            -ms-transition: opacity 3s ease-in-out;
            transition: opacity 3s ease-in-out;
            -moz-transition-delay: 1.25s;
            -webkit-transition-delay: 1.25s;
            -ms-transition-delay: 1.25s;
            transition-delay: 1.25s;
            content: '';
            background: var(--wp--preset--color--background);
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        @media screen and (max-width: 736px) {

            #banner {
                padding: 7em 3em 5em 3em ;
                /*height: auto;*/
                min-height: 0;
            }

                #banner h2 {
                    font-size: 1.25em;
                }

                #banner .more {
                    display: none;
                }

        }

    body.is-loading #banner h2 {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
        opacity: 0;
    }

        body.is-loading #banner h2:before, body.is-loading #banner h2:after {
            width: 0;
        }

    body.is-loading #banner .more {
        -moz-transform: translate(-50%,8.5em);
        -webkit-transform: translate(-50%,8.5em);
        -ms-transform: translate(-50%,8.5em);
        transform: translate(-50%,8.5em);
        opacity: 0;
    }

    body.is-loading #banner .wp-block-cover__inner-container:after {
        opacity: 1;
    }

/* Footer & Copyright */
.copyright {
	font-size: 0.8em;
	letter-spacing: 0.225em;
	list-style: none;
	padding: 0;
	text-transform: uppercase;
}

	.copyright li {
		border-left: solid 1px rgba(255, 255, 255, 0.5);
		display: inline-block;
		line-height: 1em;
		margin-left: 1em;
		padding-left: 1em;
	}

		.copyright li:first-child {
			border-left: 0;
			margin-left: 0;
			padding-left: 0;
		}

		.copyright li a {
			color: inherit;
		}

			.copyright li a:hover {
				color: #fff;
			}

		@media screen and (max-width: 650px) {

			.copyright li {
				border: 0;
				display: block;
				line-height: 1.65em;
				margin: 0;
				padding: 0.5em 0;
			}

		}

	.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor:hover {
		color: #fff;
	}

/* Forms */
	form {
		margin: 0 0 2em 0;
	}

	label {
		/*color: #fff;*/
		display: block;
		font-size: 0.9em;
		font-weight: 600;
		margin: 1em 0 0 0!important;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: rgba(144, 144, 144, 0.25);
		border-radius: 3px;
		border: none;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
    	font-family: 'Open Sans';
    	font-size: medium;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			box-shadow: 0 0 0 2px #21b2a6;
		}

input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: #fff;
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 400;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: rgba(144, 144, 144, 0.25);
				border-radius: 3px;
				content: '';
				display: inline-block;
				height: 1.65em;
				left: 0;
				line-height: 1.58125em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 1.65em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #2e3842;
			color: #fff;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			box-shadow: 0 0 0 2px #21b2a6;
		}

	input[type="checkbox"] + label:before {
		border-radius: 3px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	.formerize-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 3px;
		border: 0;
		box-shadow: inset 0 0 0 2px #fff;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.225em;
		line-height: 3.125em;
		padding: 0 2.75em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		input[type="reset"]:hover,
		input[type="button"]:hover {
			background-color: rgba(144, 144, 144, 0.25);
		}

		input[type="reset"]:active,
		input[type="button"]:active {
			background-color: rgba(144, 144, 144, 0.5);
		}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"] {
			background-color: var(--wp--preset--color--secondary);
			box-shadow: none !important;
			color: #ffffff !important;
		}

			input[type="submit"]:hover {
				background-color: var(--wp--custom--color--secondary-hover) !important;
			}

/* Table settings */

table {
	margin: 0 0 2em 0;
	width: 100%;
}

table td {
	padding: 0.75em 0.75em;
}

table th {
	font-size: 0.9em;
	font-weight: 600;
	padding: 0 0.75em 0.75em 0.75em;
	text-align: left;
}