/*
	Theme Name: The Vitals
	Author: Fruitbowl Media
	Author URI: http://fruitbowlmedia.com/
	Description: Made by your favourite Design & Development duo.
	Version: 1.1
	Text Domain: The Vitals 
*/

@font-face {
	font-family: "GT-Super-Text-Black";
	font-weight: bolder;
	font-weight: 900;
	font-style: normal;
	src: 	url(assets/fonts/GT-Super-Text-Black.woff2) format('woff2'),
			url(assets/fonts/GT-Super-Text-Black.woff) format('woff'),
			url(assets/fonts/GT-Super-Text-Black.ttf) format('truetype');
}

:root {
	--white: #FFFFFF;
	--black: #000000;
	
	--custard: #f0e9df;
	--rubharb: #ffc8be;
	
	--section-xxs: 	15px;
	--section-xs: 	30px;
	--section-sm: 	45px;
	--section: 		100px;
	--section-lg: 	230px;
	
	--radius-sm: 3px;
	
	--head-family: "GT-Super-Text-Black", serif;
	--body-family: "Georgia", Georgia, serif;
	--foot-family: "Georgia", Georgia, serif;
/* 	--foot-family: "Arial", Arial, sans-serif; */
}

html, body {
	scroll-behavior: smooth;

	font-family: var(--body-family);
	font-size: 22px;
	font-weight: normal;
	font-style: normal;
	color: var(--black);
	background: var(--custard);
	position: relative;
}

@media(max-width: 991px) {
	html, body {
		font-size: 18px;
	}
}
@media(max-width: 767px) {
	:root {
		--section-xs: 	30px;
		--section-sm: 	30px;
		--section: 		60px;
		--section-lg: 	60px;
	}
	html, body {
		font-size: 16px;
	}
}
@media(max-width: 300px) {
	:root {
		--section-xs: 	20px;
		--section-sm: 	20px;
		--section: 		40px;
		--section-lg: 	40px;
	}
	html, body {
		font-size: 12px;
	}
}
/**

	ALIGNMENT
	
**/
.align-container {
	position: relative;
	height: inherit;
}
.align {
	display: table;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left:0;
}
.align > div {
	display: table-cell;
	width: inherit;
	width: 100% !important;
	max-width: 100% !important;
}
.align > .top 		{ vertical-align: top; }
.align > .middle 	{ vertical-align: middle; }
.align > .bottom 	{ vertical-align: bottom; }
.align-left, .align-left *, .alignleft, .alignleft * 				{ text-align: left; }
.align-center, .align-center *, .aligncenter, .aligncenter * 		{ text-align: center; }
.align-right, .align-right *, .alignright, .alignright *			{ text-align: right; }
.align-justify, .align-justify *, .alignjustify, .alignjustify * 	{ text-align: justify; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }




/**

	CHARACTER STYLES

**/
.text-uppercase,
.text-uppercase * {
	text-transform: uppercase !important;
}
h1, .h1 {
	margin: 0;
	padding: 0;
	line-height: 1.1em;
}
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
p, li {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}
h1 *, .h1 *,
h2 *, .h2 *,
h3 *, .h3 *,
h4 *, .h4 *,
h5 *, .h5 *,
h6 *, .h6 * {
	line-height: inherit !important;
}

ul > li:not(:last-child),
ol > li:not(:last-child) {
	margin-bottom: .5em;
}


h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
blockquote q,
blockquote p {
	font-family: var(--head-family) !important;
	font-weight: 900;
	font-style: normal;
	font-family: inherit;
}
h1, .h1 {
	font-size: 2.5rem;
}
h2, .h2 {
	font-size: 2.3rem;
}
h3, .h3,
blockquote q, blockquote p {
	font-size: 2rem !important;
}
h4, .h4, h4 * {
	font-size: 1.4rem !important;
}
p, li {
	font-size: 1.1rem;
}
body:not(.front-page) p,
body:not(.front-page) li {
	font-size: 1rem;
}

@media(max-width: 560px) {
	h1, .h1 {
		font-size: 1.8rem !important;
	}
	h2, .h2 {
		font-size: 1.6rem !important;
	}
	h3, .h3,
	blockquote q, blockquote p {
		font-size: 1.5rem !important;
	}
	p, li {
		font-size: 1.1rem !important;
	}
	h4, .h4, h4 * {
		font-size: 1.4rem !important;
	}
	body:not(.front-page) p,
	body:not(.front-page) li {
		font-size: 1rem !important;
	}
	.align-center-mobile {
		text-align: center;
	}
}





/**

	A / HYPERS
	
**/
a {
	color: var(--white);
	text-decoration: none;
	text-underline-offset: 3px;
}
a:hover,
a:focus,
a:active {
	color: var(--rubharb);
	text-decoration: underline;
	text-underline-offset: 3px;
}
p > a {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-color: var(--rubharb) !important;
}
p > a:hover,
p > a:focus,
p > a:active {
	color: var(--rubharb) !important;
	text-decoration-color: var(--rubharb) !important;
}



/**

	BUTTONS
	
**/
.btn {
	border-radius: var(--radius-sm);
	border: none;
	padding: 0.3em 1em;
	font-size: 1.3em;
	
	background: var(--black);
	color: var(--white);
	
	text-decoration: none !important;
	
	font-family: var(--head-family) !important;
	font-weight: 900;
}
.btn:hover,
.btn:focus,
.btn:active {
	background: var(--white);
	color: var(--black);
}
@media(max-width: 991px) {
	.btn {
		padding: 0.5em 1em;
		font-size: 1.5em;
	}
}




/**

	ICONS & SVG

**/
icon {
	display: block;
	width: 1em;
	height: 1em;
	vertical-align: middle;
}
icon > svg {
	display: block;
	width: 100%;
	height: 100%;
}
icon > svg path,
icon > svg polyline,
icon > svg rect,
icon > svg elipse,
icon > svg line {
	fill: none;
	stroke: var(--white);
	stroke-width: 3px;
	
	stroke-linejoin: square;
	stroke-linecap: square;
}





/**

	NAV

**/
nav {
	position: absolute;
	
	width: 100%;
	height: auto;
	top: 0;
	
	display: block;
	padding: var(--section-sm) 0;
	
	z-index: 999;
}
@media(max-width: 991px) {
	nav {
		padding: var(--section-sm) 0 0 0;
		position: static;
	}
}




/**

	MENUS

**/
ul.menu,
ul.menu li {
	padding: 0;
	margin: 0;
	list-style: none;
}
ul.menu {
	display: -webkit-flex;
	display: flex;
}
ul.menu li a {
	display: block;
}







/**

	ROWS & SPACINGS

**/
.container-fluid {
	padding-left: var(--section-sm) !important;
	padding-right: var(--section-sm) !important;
}
@media(min-width:1600px) {
	.container-fluid {
		width: 1600px;
		margin: 0 auto;
	}
}
.row {
	margin-left: -webkit-calc(-1 * var(--section-sm)) !important;
	margin-right: -webkit-calc(-1 * var(--section-sm)) !important;
	margin-left: calc(-1 * var(--section-sm)) !important;
	margin-right: calc(-1 * var(--section-sm)) !important;
}
.row > div {
	padding-left: var(--section-sm) !important;
	padding-right: var(--section-sm) !important;
}
.row.gutter-none {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.row.gutter-none > div {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
section .container-fluid > .row:not(:first-child),
.row .row:not(:first-child) {
	margin-top: var(--section-xs);
}
@media(max-width: 499px) {
	section .container-fluid > .row:not(:first-child),
	.row .row:not(:first-child) {
		margin-top: var(--section-xxs);
	}
}
.row > div > *:not(:first-child) {
	margin-top: 1.5em;
}


@media(min-width: 992px) {
	.row.row-centered {
		display: -webkit-flex;
		display: flex;
		
		align-items: center;
	}
}
@media(max-width: 991px) {
	.row > div > img:last-child,
	.row > div > a:last-child img {
		margin-bottom: var(--section) !important;
	}
	nav .row > div > a:last-child img {
		margin: 0 !important;
	}
	
	
}
@media(max-width: 499px) {
	br {
		display: none !important;
		visibility: hidden !important;
	}
}
/**

	SECTIONS

**/
section {
	overflow: hidden;
	padding: var(--section) 0;
}
section.section-lg {
	padding: var(--section-lg) 0;
}
section.accent {
	background: var(--rubharb);
}
section.black {
	background: var(--black);
	color: var(--white);
}
section.hero {
	background: var(--custard);
	padding: var(--section-lg) 0;
	position: relative;
	height: 100%;
	min-height: 100%;
	height: 100vh;
	min-height: 100vh;
}
section.hero::before {
	content: '';
	position: absolute;
	
	top: 50%;
	left: 50%;
	
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1.25);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1.25);
	-ms-transform: translateX(-50%) translateY(-50%) scale(1.25);
	-o-transform: translateX(-50%) translateY(-50%) scale(1.25);
	transform: translateX(-50%) translateY(-50%) scale(1.25);
	
	border-radius: 100%;
	
	height: 100vh;
	width: 100vh;
	
	background: var(--rubharb);

}
.inner-page section.hero {
	border-bottom: 8px double var(--black);
}
@media(min-width: 992px) {
	.inner-page section.hero {
		height: 70%;
		min-height: 70%;
		height: 70vh;
		min-height: 70vh;
	}
	.inner-page section.hero::before {
		width: 70vh;
		height: 70vh;
	}
}

@media(max-width: 991px) {
	section.hero {
		height: 125vw;
		min-height: 125vw;
	}
	
	
	section.hero::before {
		height: 100vw;
		width: 100vw;
		
		-webkit-transform: translateX(-50%) translateY(-50%) scale(1.1);
		-moz-transform: translateX(-50%) translateY(-50%) scale(1.1);
		-ms-transform: translateX(-50%) translateY(-50%) scale(1.1);
		-o-transform: translateX(-50%) translateY(-50%) scale(1.1);
		transform: translateX(-50%) translateY(-50%) scale(1.1);
	}
/*
	section.hero .align-center,
	section.hero .align-center * {
		text-align: left !important;
	}
*/
}
@media(min-width: 992px) and (max-width: 1199px) and (orientation: portrait) {
	section.hero::before {
		height: 90vw;
		width: 90vw;
	}
}
@media(min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {
	section.hero::before {
		height: 90vh;
		width: 90vh;
	}
}
@media(max-width: 767px) {
	section.hero {
		height: 135vw;
		min-height: 135vw;
	}
}





/**

	HERO & SVG GRAPHICS

**/
section.hero svg {
	position: absolute;
	display: block;
	overflow: hidden;
	left: 50%;
	width: 80vh;
	height: auto;
	
	-webkit-transform: translateX(-50%) scale(1);
	-moz-transform: translateX(-50%) scale(1);
	-ms-transform: translateX(-50%) scale(1);
	-o-transform: translateX(-50%) scale(1);
	transform: translateX(-50%) scale(1);
}
@media(max-width: 991px) {
	section.hero svg {
		width: 110vw;
	}
}
@media(min-width: 992px) and (max-height: 600px), (max-width: 320px) {
	section.hero svg { display: none; visibility: hidden;}
}
section.hero.front-page svg:nth-of-type(1) {
	top: -0.5%;
	bottom: auto;
}
@media(min-width: 992px) {
	section.hero.front-page svg:nth-of-type(1) {
		margin-left: 8%;
	}
}
@media(max-width: 991px) {
	section.hero.front-page svg:nth-of-type(1) {
		top: 0;
	}
}
section.hero svg:nth-of-type(2),
section.hero:not(.front-page) svg {
	top: auto !important;
	bottom: -3% !important;
}
@media(max-width: 991px) {
	section.hero svg:nth-of-type(2),
	section.hero:not(.front-page) svg {
		top: auto !important;
		bottom: -0.5% !important;
	}
}
section img.floating {
	position: relative;
}




/**

	STATISTICS

**/
section.statistics {
	background: var(--black);
	color: var(--white);
	padding: var(--section) 0;
}
section.statistics h4 {
	padding: .25em 0;
	margin: 0;
}
section.statistics p > br {
	display: none !important;
}
@media(min-width: 992px) {
	section.statistics p > br {
		display: block !important;
	}
	section.statistics .row > div:not(:last-child) {
		border-right: 2px solid var(--rubharb);
	}
}





/**

	PARTNERS & LOGOS
	
**/
.partner {
	position: relative;
	
	width: 100%;
	height: 0%;
	padding-bottom: 100% !important;
}
.partner .logo {
	position: absolute;
	
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.partner .logo > .logo-inner {
	position: relative;
	width: 100%;
	height: 100%;
	
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: contain !important;
}






/**

	BLOCKQUOTE

**/
blockquote {
	padding: var(--section-xs) 0;
	margin: 0;
	border: none;
	color: var(--rubharb);
}
blockquote * {
	text-align: center !important;
}
blockquote q {
	position: relative;
}
blockquote q::before,
blockquote q::after {
	content: none;
}
blockquote q p {
	display: inline-block;
	width: auto;
	margin-bottom: 1em;
}
blockquote q p::before,

blockquote q p::after {
	font-size: 1.1em;
}
blockquote q p:nth-of-type(1)::before {
	content: open-quote;
	margin-right: 0;
}
blockquote q p:nth-last-of-type(1)::after {
	content: close-quote;
	margin-left: 0;
}
blockquote cite {
	display: block;
	float: none !important;
	font-size: 1rem;
	margin-top: 1em;
	
	font-style: normal;
	font-weight: normal;
	color: var(--white);
}
blockquote cite::before {
	content: "— ";
}
section:not(.black) blockquote q, 
section:not(.black) blockquote p{
	color: var(--black);
}
section:not(.black) blockquote cite, 
section:not(.black) blockquote cite {
	color: var(--black);
}



/**

	FIGURES & CAPTIONS

**/
.wp-block-image {
	font-size: 1.5rem !important;
}
.wp-block-image img {
	max-width: 100% !important;
	height: auto !important;
}
figure {

}
figure figcaption {
	font-size: .6rem !important;
	line-height: 1.3em !important;
	padding: .5em 0 1em;
	width: 100% !important;
	opacity: .75;
	text-align: center !important;
}




/**

	TINY SLIDER
	
**/
.tns-outer {
	margin: 0 !important;
}
.tns-nav {
	font-size: 1rem;
}
@media(min-width: 992px) {
	.tns-nav {
		display: none;
		visibility: hidden;
	}
}
.tns-nav button {
	border: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	border-radius: 100%;
	height: 1em;
	width: 1em;
	margin: 0 .5em;
	padding: 0;
	background: transparent;
	border: 3px solid var(--black);
	
	transform: scale(.75);
}
.tns-nav button.tns-nav-active {
	background: var(--black);
	border: 3px solid var(--black);
	
	transform: scale(1);
}
section.black .tns-nav button {
	background: transparent;
	border: 3px solid var(--white);
}
section.black  .tns-nav button.tns-nav-active {
	background: var(--white);
	border: 3px solid var(--white);
}
section:not(.black) .icon-btn icon > svg * {
	stroke: var(--black);
}
.icon-btn:hover icon > svg *,
.icon-btn:focus icon > svg *,
.icon-btn:active icon > svg * {
	stroke: var(--black) !important;
}
section.black .icon-btn:hover icon > svg *,
section.black .icon-btn:focus icon > svg *,
section.black .icon-btn:active icon > svg * {
	stroke: var(--rubharb) !important;
}
.icon-col {
	height: 100% !important;
	min-height: 1px !important;
	
	top: 0;
	bottom: 0;
	
	position: absolute;
	display: block;
	
	float: none !important;
}
.row.relative > .icon-col:nth-of-type(1) { left: 0 !important; right: auto !important; }
.row.relative > .icon-col:nth-last-of-type(1) { right: 0 !important; left: auto !important; }

.icon-btn {
	position: static;
	width: 100% !important;
	height: 100% !important;
	text-align: center !important;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 3rem;
}
.icon-btn[aria-disabled="true"] {
	pointer-events: none !important;
	display: none !important;
	visibility: hidden !important;
}
.icon-btn icon {
	position: absolute;
	top: 50%;
	left: 50%;
	
	-webkit-transform: translateX(-50%) translateY(-50%) scale(1);
	-moz-transform: translateX(-50%) translateY(-50%) scale(1);
	-ms-transform: translateX(-50%) translateY(-50%) scale(1);
	-o-transform: translateX(-50%) translateY(-50%) scale(1);
	transform: translateX(-50%) translateY(-50%) scale(1);
}
@media(max-width: 991px) {
	.icon-col, .icon-btn, .icon-col * {
		display: none !important;
		visibility: hidden !important;
	}
}






/**

	FOOTER

**/
footer {
	font-family: var(--foot-family);	
	padding: var(--section-sm) 0;	
	background: var(--black);
	color: var(--white);	
	font-size: .75em !important;	
	position: relative;
/* 	height: 15em; */
}
body.front-page footer p,
body.front-page footer li,
body:not(.front-page) footer p,
body:not(.front-page) footer li {
	font-size: 0.8em !important;
}
footer .foot-menu-postion {
	position: absolute;
	text-align: right;
	bottom: var(--section-sm);
	right: var(--section-sm);
}
footer .footer-logo {
	position: absolute;
	text-align: left;
	bottom: var(--section-sm);
	left: var(--section-sm);
	height: 4em;
	max-height: 4em!important;

	
}
/*
footer .foot-menu-postion {
	position: absolute;
	text-align: right;
	bottom: var(--section-sm);
	right: var(--section-sm);
}
*/
footer .text {
	text-align: right;
}
footer .text p {
	margin-bottom: 10px;
	line-height: 1.4;
}
footer .text p:last-child {
	margin-bottom: 0;
}
footer .text p a {
	text-decoration: none;
}
footer .text p a:hover {
	text-decoration: underline;
}
footer ul.foot-menu li.divider, footer .text .divider {
	color: var(--white);
	opacity: .85;
	margin: 0 .5em;
}
@media(max-width: 991px) {
	footer .footer-logo {
		margin-bottom: 20px;
	}
	footer .footer-logo, footer .text {
		position: static;
		text-align: left!important;
		float: left!important;
	}
/*
	footer ul.foot-menu {
		position: static;
		text-align: left;
	}
*/
}