/*
Theme Name: Nifty 2023
Template: twentytwentyone
Author: Nifty Development
Author URI: https://niftymarketing.com/
Description: A lightweight theme for use of our clients.
Version: 2.0
*/


/* =========================================
   THEME VARIABLES
========================================= */

:root{

	/* site colors */

	--color-1: #348081;
	--color-2: #0a2e4c;
	--color-3: #ebaa3f;

	--gray: rgba(0,0,0,0.5);

	--white: white;
	--black: #000000;

	--subtle-white: rgba(255,255,255,0.25);
	--subtle-black: rgba(0,0,0,0.25);

	--accent-bg: #222;
	--accent-hover: #ebaa3f;

	--transluscent: rgba(30,30,30,0.9);

	--red: #d4172b;

	--light-gray: #e3e3e3;

	--border-color: rgba(52, 52, 52, 0.55);


	/* font sizes */

	--fsize-xl: 55px;
	--fsize-lg: 40px;
	--fsize-md: 30px;
	--fsize-sm: 20px;

	--fsize-default: 18px;


	/* font families */

	--heading-font: 'Oswald', sans-serif;
	--text-font: "Poppins", sans-serif;
	--secondary-font: "Anton", sans-serif;
}


@media(max-width: 1000px){

	:root{

		--fsize-xl: 40px;
		--fsize-lg: 30px;
		--fsize-md: 20px;
		--fsize-sm: 18px;

	}

}


@media(max-width: 750px){

	:root{

		--fsize-xl: 35px;
		--fsize-lg: 25px;
		--fsize-md: 20px;
		--fsize-sm: 18px;

	}

}



/* =========================================
   DEFAULT OVERALL STYLES
========================================= */

html,
body{
	scroll-behavior: smooth;
	font-size: var(--fsize-default);
	font-variant-ligatures: none;
	overflow-anchor: none;
}


body{
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-family: var(--text-font);
	line-height: 1.5em;
}


*{
	box-sizing: border-box;
	-webkit-appearance: none;
	font-family: inherit;
}


/* lazy loading flow fixes */

img{
	object-fit: contain;
	min-width: 1px;
}


img[src=""]{
	visibility: hidden;
}


img[data-url]:before{
	content: '';
	display: block;
	padding-top: 56.25%;
}


a{
	text-decoration: none;
	transition: ease all .25s;
}


nav a:hover{
	color: var(--accent-hover);
}


nav a{
	padding: .25em .5em;
}


article a{
	text-decoration: underline;
	text-underline-position: under;
	text-decoration-thickness: 2px;
}


code,
pre,
kbd,
samp{
	font-family: monospace;
}



/* =========================================
   FONT DEFAULTS
========================================= */

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: var(--heading-font);
	line-height: 1.25em;
	margin-bottom: 0.5em;
}


body,
p,
ul,
ol,
li{
	font-family: var(--text-font);
	line-height: 1.5em;
}


h1{
	font-size: var(--fsize-xl);
}


h2{
	font-size: var(--fsize-lg);
}


h3{
	font-size: var(--fsize-md);
}


h4{
	font-size: var(--fsize-sm);
}



/* =========================================
   LAYOUT
========================================= */

.section-padding{
	padding: 5% 0;
}


.content-width{
	width: 1130px;
	max-width: 100%;
	padding: 0 15px;
	margin: 0 auto;
}


.container{
	width: 1155px;
	max-width: 100%;
	padding: 0 15px;
	margin: 0 auto;
}


.flex{
	display: flex;
	flex-wrap: wrap;
}



/* =========================================
   HEADER
========================================= */

.masthead{
	padding: 22px 15px;
}


.masthead ul{
	list-style: none;
}


.skip-bar{
	position: absolute;
	display: block;
	width: 100%;
	text-align: center;
	height: 0;
	overflow: hidden;
	background: var(--accent-bg);
	top: 0;
	left: 0;
	z-index: 10;
}


.skip-bar:focus{
	height: auto;
	padding: 20px;
}


.inner-masthead{
	justify-content: space-between;
	max-width: 1374px;
	margin: 0 auto;
	width: 100%;
	align-items: flex-start;
}


.logo-container{
	width: 9.7%;
	display: flex;
}


.logo-container img{
	display: block;
	width: 100%;
	height: auto;
}


.menus{
	width: 90%;
	justify-content: flex-end;
}


.mobile-nav-input{
	display: none;
}


.main-nav{
	width: 100%;
	display: flex;
	justify-content: flex-end;
	gap: 1.7%;
}


.main-menu{
	padding: 0 3px 0 0;
	font-weight: 800;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	width: 100%;
}


.masthead .menu-main-container{
	flex-grow: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}


.masthead .main-menu a{
	color: var(--black);
	font-family: var(--heading-font);
	padding: 0.5em 0;
	font-size: 16px;
	line-height: 1;
	letter-spacing: 0.025em;
	display: block;
}


.masthead .main-menu a:hover{
	color: var(--red);
}


.masthead .menu-phone{
	line-height: 1.35;
	color: var(--black);
	font-family: var(--heading-font);
	padding: 0 0 0.1em;
	font-size: 25px;
	display: block;
	flex-shrink: 0;
	font-weight: 700;
	letter-spacing: 0.02em;
}


.masthead .menu-phone:hover{
	color: var(--red);
}



/* =========================================
   DESKTOP HEADER
========================================= */

@media (min-width: 1001px){

	/* -----------------------------------------
	   HEADER CONTAINER
	----------------------------------------- */

	.masthead{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;

		width: 100% !important;
		height: 80px !important;

		padding: 0 15px !important;

		z-index: 10000 !important;

		background-color: var(--white) !important;
		color: var(--black) !important;
	}


	/* Header remains identical after scrolling */

	.masthead.is-scrolled{
		background-color: var(--white) !important;
		color: var(--black) !important;
	}


	/* Remove the old scrolling background layer */

	.masthead.is-scrolled:before{
		display: none !important;
		content: none !important;
	}


	/* WordPress admin bar */

	body.admin-bar .masthead{
		top: 32px !important;
	}


	/* -----------------------------------------
	   INNER HEADER
	----------------------------------------- */

	.masthead .inner-masthead{

		display: flex !important;

		flex-wrap: nowrap !important;

		align-items: center !important;

		justify-content: space-between !important;

		width: 100% !important;

		max-width: 1374px !important;

		height: 80px !important;

		margin: 0 auto !important;
	}


	/* -----------------------------------------
	   LOGO
	----------------------------------------- */

	.masthead .logo-container{

		flex: 0 0 100px !important;

		width: 100px !important;

		max-width: 100px !important;

		height: 80px !important;

		display: flex !important;

		align-items: center !important;
	}


	.masthead .logo-container img{

		display: block !important;

		width: 100px !important;

		height: 100px !important;

		max-width: none !important;

		object-fit: contain !important;
	}


	/* -----------------------------------------
	   MENU AREA
	----------------------------------------- */

	.masthead .menus{

		flex: 1 1 auto !important;

		width: auto !important;

		min-width: 0 !important;

		height: 80px !important;

		display: flex !important;

		flex-wrap: nowrap !important;

		align-items: center !important;

		justify-content: flex-end !important;
	}


	/* Hide mobile menu button */

	.masthead .mobile-nav{
		display: none !important;
	}


	.masthead .mobile-nav-input{
		display: none !important;
	}



	/* =========================================
	   MAIN NAVIGATION
	========================================= */

	.masthead .main-nav{

		position: static !important;

		width: auto !important;

		max-width: none !important;

		height: auto !important;

		margin: 0 !important;

		padding: 0 !important;

		border: 0 !important;

		box-shadow: none !important;

		display: flex !important;

		flex-wrap: nowrap !important;

		align-items: center !important;

		justify-content: flex-end !important;

		gap: 25px !important;

		overflow: visible !important;

		background-color: transparent !important;
	}



	/* =========================================
	   WORDPRESS MENU WRAPPER
	========================================= */

	.masthead .menu-main-container{

		flex: 0 1 auto !important;

		width: auto !important;

		min-width: 0 !important;

		display: flex !important;

		align-items: center !important;

		justify-content: flex-end !important;
	}



	/* =========================================
	   MAIN MENU
	========================================= */

	.masthead .main-menu{

		display: flex !important;

		flex-wrap: nowrap !important;

		align-items: center !important;

		justify-content: flex-end !important;

		width: auto !important;

		margin: 0 !important;

		padding: 0 !important;

		gap: 22px !important;

		list-style: none !important;

		white-space: nowrap !important;
	}


	/* Menu items */

	.masthead .main-menu > li{

		position: relative !important;

		flex: 0 0 auto !important;

		margin: 0 !important;

		padding: 0 !important;
	}


	/* Menu links */

	.masthead .main-menu a{

		display: block !important;

		padding: 0.5em 0 !important;

		color: var(--black) !important;

		font-family: var(--heading-font) !important;

		font-size: 16px !important;

		font-weight: 800 !important;

		line-height: 1 !important;

		letter-spacing: 0.025em !important;

		white-space: nowrap !important;
	}


	/* Menu hover */

	.masthead .main-menu a:hover{

		color: var(--red) !important;
	}



	/* =========================================
	   PHONE
	========================================= */

	.masthead .menu-phone{

		display: block !important;

		flex: 0 0 auto !important;

		white-space: nowrap !important;

		padding: 0 !important;

		margin: 0 !important;

		color: var(--black) !important;

		font-family: var(--heading-font) !important;

		font-size: 25px !important;

		font-weight: 700 !important;

		line-height: 1 !important;

		letter-spacing: 0.02em !important;
	}


	.masthead .menu-phone:hover{

		color: var(--red) !important;
	}



	/* =========================================
	   DROPDOWN MENUS
	========================================= */

	.masthead .sub-menu{

		position: absolute !important;

		top: 100% !important;

		left: 0 !important;

		background-color: var(--white) !important;

		border: 3px solid var(--black) !important;

		overflow: hidden;

		z-index: 1000;

		display: none;

		flex-direction: column;
	}


	.masthead .sub-menu a{

		padding: 0.3em 0 !important;
	}


	.masthead .sub-menu .sub-menu{

		left: 99% !important;

		top: 0 !important;
	}


	.masthead .main-menu > li:hover > .sub-menu,
	.masthead .main-menu > li > a:focus + .sub-menu,
	.masthead .main-menu > li:focus-within > .sub-menu{

		height: auto !important;

		padding: 10px 0 10px 10px !important;

		min-width: max-content !important;

		overflow: initial !important;

		display: flex !important;
	}


	.masthead .sub-menu > li{

		position: relative !important;

		padding-right: 15px !important;
	}


	.masthead .sub-menu > li:hover > .sub-menu,
	.masthead .sub-menu > li > a:focus + .sub-menu,
	.masthead .sub-menu > li:focus-within > .sub-menu{

		padding: 15px !important;

		width: auto !important;

		display: flex !important;

		min-width: max-content !important;
	}

}



/* =========================================
   MOBILE HEADER
========================================= */

@media(max-width: 1000px){

	.masthead{

		position: relative;

		background-color: var(--white);

		padding: 5px 15px;
	}


	.inner-masthead{

		align-items: center;
	}


	.logo-container{

		width: 80%;

		max-width: 85px;
	}


	.menus{

		width: 20%;
	}


	.mobile-nav{

		font-size: 22px;

		transform: scaleX(1.75);

		outline-color: var(--black);

		color: var(--black);
	}


	.main-nav{

		z-index: 111;

		position: absolute;

		top: 100%;

		width: 100%;

		left: 0;

		border-top: 1px solid var(--gray);

		box-shadow: 0 5px 10px rgba(0,0,0,.3);

		padding: 0 25px;

		height: 0;

		overflow: hidden;

		transition: padding .25s;

		background-color: var(--white);

		flex-direction: column;

		display: flex;
	}


	#mobile-nav-input:checked + * + .main-nav{

		height: auto;

		padding: 10px 25px;
	}


	.main-menu .main-menu-container{

		max-height: 500px;

		overflow: auto;
	}


	.masthead .main-menu li a{

		outline-color: var(--black);

		font-size: 20px;

		color: var(--black);

		letter-spacing: 0.03em;

		padding: 0.5em 0;

		width: fit-content;
	}


	.masthead .main-menu{

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;

		-webkit-box-orient: vertical;

		-webkit-box-direction: normal;

		-ms-flex-direction: column;

		flex-direction: column;

		align-items: stretch;
	}


	.masthead .main-menu li{

		padding: 0;
	}


	.masthead .main-menu li.menu-item-has-children{

		position: relative;
	}


	.masthead .main-menu li.menu-item-has-children .menu-arrow{

		height: 30px;

		width: 45px;

		position: absolute;

		right: 0;

		top: 0;

		display: block;
	}


	.masthead .main-menu li.menu-item-has-children .menu-arrow:after{

		content: '';

		position: absolute;

		top: 30%;

		right: 15px;

		width: 12px;

		height: 12px;

		border-right: 3px solid var(--red);

		border-top: 3px solid var(--red);

		-webkit-transform: rotate(135deg);

		-ms-transform: rotate(135deg);

		transform: rotate(135deg);
	}


	.masthead .main-menu li.menu-item-has-children .is-active.menu-arrow:after{

		position: absolute;

		top: 33%;

		right: 15px;

		width: 12px;

		height: 12px;

		border-right: 3px solid var(--red);

		border-top: 3px solid var(--red);

		-webkit-transform: rotate(-45deg);

		-ms-transform: rotate(-45deg);

		transform: rotate(-45deg);
	}


	.masthead .main-menu .sub-menu{

		display: none;

		width: 100% !important;

		min-width: 100%;

		border-left: 3px solid var(--black);

		margin-left: 10px;

		padding-left: 10px;
	}


	.masthead .main-menu .sub-menu.is-opened{

		display: block;

		width: 100% !important;

		min-width: 100%;

		max-height: 400px;

		overflow: auto;

		padding-top: 0;
	}

}



/* =========================================
   FORMS
========================================= */

textarea{
	width: 100%;
	height: 150px;
}


input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea{

	margin: 0;

	padding: 1em;

	width: 100%;

	border: 1px solid;
}


/*input[type=submit], button {
	border:none;
	background:var(--color-1);
	padding:.5em 1em;
	cursor:pointer;
	font-size:inherit;
}*/


.gfield_label{

	margin-top: 1em;

	margin-bottom: .25em;

	font-weight: 600;

	display: flex;

	gap: 0.25em;
}


.gfield_required{

	font-size: .85em;

	color: #c02b0a;

	display: inline-block;

	text-transform: uppercase;

	font-weight: 400;
}


.gfield_label_before_complex{

	display: none;
}


form input{

	border-radius: 0px !important;
}


fieldset{

	border: none;

	margin: 0;

	padding: 0;
}


.gchoice{

	display: flex;

	gap: 1em;

	align-items: center;

	margin: 1em 0;

	cursor: pointer;

	width: fit-content;
}


.gchoice input[type=checkbox]{

	appearance: none;

	color: var(--color-1);

	width: 1.5em;

	height: 1.5em;

	border: 2px solid;

	border-radius: 3px;

	display: flex;

	align-items: center;

	justify-content: center;

	transition: ease all .25s;

	cursor: inherit;
}


.gchoice input[type=checkbox]::before{

	content: url("data:image/svg+xml,%3Csvg fill='%23FFF' xmlns='http://www.w3.org/2000/svg' viewBox='25 25 50 50'%3E%3Cpath d='m64 985.393-3.531 3.532-16.719 16.718-4.469-3.937-3.75-3.281-6.593 7.53 3.78 3.282 8 7 3.5 3.094 3.313-3.313 20-20 3.531-3.53L64 985.392z' overflow='visible' transform='translate(0 -952.362)'/%3E%3C/svg%3E");

	width: 100%;

	height: 100%;

	opacity: 0;

	transition: ease opacity .25s;
}


.gchoice input[type=checkbox]:checked{

	background: var(--color-1);
}


.gchoice input[type=checkbox]:checked::before{

	opacity: 1;
}


label{

	user-select: none;

	cursor: inherit;
}



/* =========================================
   BUILT-IN WORDPRESS CLASSES
========================================= */

figure{

	display: inline-block;

	margin: 0;
}


.aligncenter{

	display: block;

	margin: 0 auto;
}


.alignright{

	float: right;

	margin: .5em 0 1em 1em;
}


.alignleft{

	float: left;

	margin: .5em 1em 1em 0;
}


.has-text-align-center{

	text-align: center;
}


.has-text-align-right{

	text-align: right;
}



/* =========================================
   GENERAL SITE STYLES
========================================= */

.main-title{

	text-transform: uppercase;

	font-family: var(--heading-font);

	margin: 0;

	font-size: clamp(35px, 4.521vw, 65px);

	font-weight: 500;

	text-align: center;

	letter-spacing: 0.026em;
}


.main-title .red{

	color: var(--red);
}


a.button{

	text-decoration: none;

	color: var(--white);

	font-family: var(--heading-font);

	text-transform: uppercase;

	letter-spacing: 0.075em;

	font-weight: 500;

	padding: 0.9em 3.4em;

	background-color: var(--red);

	text-align: center;

	border: 2px solid var(--red);

	display: flex;

	flex-direction: column;

	font-size: clamp(16px, 1.170vw, 17px);

	width: fit-content;
}


a.button:hover{

	background-color: var(--white);

	color: var(--red);
}



/* =========================================
   MARQUEE
========================================= */

.marquee{

	--duration: 19s;

	--gap: 0px;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	overflow: hidden;

	-webkit-user-select: none;

	-moz-user-select: none;

	-ms-user-select: none;

	user-select: none;

	gap: var(--gap);
}


.marquee-group{

	-webkit-animation: scroll var(--duration) linear infinite;

	animation: scroll var(--duration) linear infinite;

	-ms-flex-negative: 0;

	flex-shrink: 0;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-align: center;

	-ms-flex-align: center;

	align-items: center;

	-ms-flex-pack: distribute;

	justify-content: space-around;

	gap: var(--gap);
}


.marquee.active-slider .marquee-group{

	-webkit-animation-play-state: paused;

	animation-play-state: paused;
}


.marquee-reverse.start-animation .marquee-group{

	animation-direction: reverse;

	-webkit-animation-delay: calc(var(--duration) / -2);

	animation-delay: calc(var(--duration) / -2);
}


@-webkit-keyframes scroll{

	0%{

		-webkit-transform: translateX(calc(-100% - var(--gap)));

		transform: translateX(calc(-100% - var(--gap)));
	}


	100%{

		-webkit-transform: translateX(0);

		transform: translateX(0);
	}

}


@-webkit-keyframes reverse-scroll{

	0%{

		-webkit-transform: translateX(0);

		transform: translateX(0);
	}


	100%{

		-webkit-transform: translateX(calc(-100% - var(--gap)));

		transform: translateX(calc(-100% - var(--gap)));
	}

}