/*--------------------------------------------------
	Custom CSS
---------------------------------------------------*/


@font-face {
	font-family: 'Philosopher';
	src: url('../font/Philosopher-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Philosopher-Regular-Italic';
	src: url('../font/Philosopher-Italic.ttf') format('truetype');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Philosopher-Bold-Normal';
	src: url('../font/Philosopher-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Philosopher-Bold-Italic';
	src: url('../font/Philosopher-BoldItalic.ttf') format('truetype');
	font-weight: bold;
	font-style: italic;
}




/*-----------------------------------------------------------------------------------------------------

	SECTIONS 1 (Variables --vx)

-----------------------------------------------------------------------------------------------------*/


:root {
	/* */

	--vr-base-html-link-shade: 88,88,188;
	--vr-base-html-sharp-shade: 88,88,188; /* 18, 102, 227 */
	--vr-base-html-hover-shade: 34,186,204;
	--vr-theme-html-body-title-fontFamily: 'Philosopher';
	/*	--vr-base-html-body-normal-backgroundColor:rgb(242,246,247);*/
}

/*-----------------------------------------------------------------------------------------------------

	SECTIONS 2 (Functions .fx)

-----------------------------------------------------------------------------------------------------*/

.fx-show-on-page {
}

.fx-show-on-index {
}

/*-----------------------------------------------------------------------------------------------------

	SECTIONS 3 (Grid .gx)

-----------------------------------------------------------------------------------------------------*/







/*-----------------------------------------------------------------------------------------------------

	SECTIONS 4 (Html .hx)

-----------------------------------------------------------------------------------------------------*/

body.hi-body {
	background-color: rgb(242,246,247);
}


.hi-footer .hi-navigation .hi-nav .hi-company .hi-logo {
	height: 100px;
}


@-webkit-keyframes bannerDotRotate {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}






.hi-article.hx-banner {
	background: var(--vr-base-html-body-alter-backgroundColor);
	/*color: var(--vr-base-html-body-normal-color);*/
	color: #ffffff;
}

	.hi-article.hx-banner .hi-content {
		height: auto;
		padding: 2em 2em;
	}

	.hi-article.hx-banner .hi-block {
		display: block;
		height: auto;
	}

		.hi-article.hx-banner .hi-block .hi-list {
			flex-direction: row;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
		}

			.hi-article.hx-banner .hi-block .hi-list .hi-item {
				font-size: 24px;
				font-weight: 600;
				line-height: 48px;
			}
				/*
				.hi-article.hx-banner .hi-block .hi-list .hi-item > .hi-h {
					font-weight: 600;
					line-height: 200%;
				}*/

				.hi-article.hx-banner .hi-block .hi-list .hi-item > .hi-i {
					padding: 0 2em;
					font-size: 50%;
					-webkit-animation-name: bannerDotRotate;
					-webkit-animation-iteration-count: infinite;
					-webkit-animation-timing-function: linear;
					-webkit-animation-duration: 4s;
				}









.hi-article.hx-title {
	background-color: var(--vr-base-html-body-normal-backgroundColor);
	color: var(--vr-base-html-body-normal-color);
}

	.hi-article.hx-title .hi-block > a > .hi-image {
		border-radius: 50%;
		border: 10px solid rgb(255 111 0 / 50%);
		/*max-width: calc(100% - 60px);*/
		overflow: hidden;
	}







/*
.hi-article.hx-whyus {
	background: #f4f4f4;
	color: var(--vr-base-html-body-normal-color);
}*/


/*.hi-article.hx-about {
	background-color: rgb(242,246,247);
}

.hi-article.hx-practices {
	background-color: rgb(242,246,247);
}
*/

.hi-article.hx-items .gi-row {
	justify-content: center;
}

	.hi-article.hx-items .gi-row .gi-col {
		margin: 0;
		width: auto;
	}

		.hi-article.hx-items .gi-row .gi-col {
			
		}

.hi-article.hx-items .hi-content.fn-group.fn-group-03 .hi-block {
	font-family: var(--vr-theme-html-body-header-fontFamily);
	max-width:calc(360px + 4em);
}









.hi-article.hx-calltoaction {
	background: var(--vr-contrast-html-body-normal-backgroundColor);
	color: var(--vr-contrast-html-body-normal-color);
}



.hi-article.hx-query {
	background-color: var(--vr-base-html-body-normal-backgroundColor);
}

	.hi-article.hx-query .hi-block {
		flex-direction: row;
		padding: 1em;
	}


.hi-article.hx-feedback {
	background-color: var(--vr-base-html-body-normal-backgroundColor);
}

	.hi-article.hx-feedback .hi-block {
		flex-direction: row;
		padding: 1em;
	}


.hi-article.hx-contactinfo {
	/*background-color: var(--vr-base-html-body-normal-backgroundColor);*/
}

	.hi-article.hx-contactinfo .hi-content {
		padding: 2em;
	}

	.hi-article.hx-contactinfo .hi-block {
		flex-direction: row;
		padding: 1em;
	}






/*-----------------------------------------------------------------------------------------------------

	SECTIONS 5 (Combo .cx)

-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------

	SECTIONS 6 (Single Property Single Class .ux)

-----------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------

	SECTIONS 7 (Multiple Properties Single Class .mx)

-----------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------
		Responsive Definitions 
---------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {

	.hi-article.hx-banner .hi-block .hi-list {
		flex-direction: column;
	}

	.hi-article.hx-items .hi-content.fn-group.fn-group-03 .hi-block {
		max-width: 100%;
	}


	.hi-article.hx-contactinfo .gi-col {
		width: 340px;
	}

	/*
		
			.hi-article.hx-contactinfo .gi-col .hi-content .hi-block {
			}*/
}