/*--------------------------------------------------------------
# Icons
--------------------------------------------------------------*/

@font-face {
	font-family: flextension;
	font-style: normal;
	font-weight: 400;
	src: url(../fonts/flextension.woff) format("woff");
}

[class^="flext-ico-"]::before,
[class*=" flext-ico-"]::before {
	display: inline-block;
	font-family: flextension, sans-serif;
	font-style: normal;
	font-weight: 400;

	/* fix buttons height, for twitter bootstrap */
	text-align: center;
	text-decoration: inherit;

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 1em;
}

.flext-ico-patreon::before {
	content: "\e530";
}

.flext-ico-500px::before {
	content: "\e507";
}

.flext-ico-android::before {
	content: "\e506";
}

.flext-ico-apple::before {
	content: "\e502";
}

.flext-ico-behance::before {
	content: "\e80d";
}

.flext-ico-bitbucket::before {
	content: "\e505";
}

.flext-ico-codepen::before {
	content: "\e504";
}

.flext-ico-deviantart::before {
	content: "\e811";
}

.flext-ico-digg::before {
	content: "\e812";
}

.flext-ico-discord::before {
	content: "\e503";
}

.flext-ico-dribbble::before {
	content: "\e84d";
}

.flext-ico-dropbox::before {
	content: "\e813";
}

.flext-ico-facebook::before {
	content: "\e814";
}

.flext-ico-flickr::before {
	content: "\e815";
}

.flext-ico-foursquare::before {
	content: "\e508";
}

.flext-ico-github::before {
	content: "\e816";
}

.flext-ico-gitlab::before {
	content: "\e509";
}

.flext-ico-globe::before {
	content: "\e921";
}

.flext-ico-houzz::before {
	content: "\e500";
}

.flext-ico-instagram::before {
	content: "\e818";
}

.flext-ico-jsfiddle::before {
	content: "\e510";
}

.flext-ico-line::before {
	content: "\e909";
}

.flext-ico-linkedin::before {
	content: "\e819";
}

.flext-ico-mail::before {
	content: "\e101";
}

.flext-ico-medium::before {
	content: "\e511";
}

.flext-ico-meetup::before {
	content: "\e512";
}

.flext-ico-odnoklassniki::before {
	content: "\e513";
}

.flext-ico-pinterest::before {
	content: "\e81a";
}

.flext-ico-reddit::before {
	content: "\e81b";
}

.flext-ico-rss::before {
	content: "\e81c";
}

.flext-ico-skype::before {
	content: "\e81d";
}

.flext-ico-snapchat::before {
	content: "\e514";
}

.flext-ico-soundcloud::before {
	content: "\e81e";
}

.flext-ico-spotify::before {
	content: "\e515";
}

.flext-ico-steam::before {
	content: "\e516";
}

.flext-ico-strava::before {
	content: "\e517";
}

.flext-ico-telegram::before {
	content: "\e518";
}

.flext-ico-threads::before {
	content: "\e527";
}

.flext-ico-thumbtack::before {
	content: "\e519";
}

.flext-ico-tiktok::before {
	content: "\e521";
}

.flext-ico-tripadvisor::before {
	content: "\e520";
}

.flext-ico-tumblr::before {
	content: "\e941";
}

.flext-ico-twitch::before {
	content: "\e522";
}

.flext-ico-twitter::before {
	content: "\e820";
}

.flext-ico-viber::before {
	content: "\e523";
}

.flext-ico-vimeo::before {
	content: "\e821";
}

.flext-ico-vkontakte::before {
	content: "\e822";
}

.flext-ico-wechat::before {
	content: "\e525";
}

.flext-ico-weibo::before {
	content: "\e526";
}

.flext-ico-whatsapp::before {
	content: "\e524";
}

.flext-ico-xing::before {
	content: "\e528";
}

.flext-ico-yahoo::before {
	content: "\e823";
}

.flext-ico-yelp::before {
	content: "\e529";
}

.flext-ico-youtube::before {
	content: "\e810";
}

.flext-ico-phone::before {
	content: "\e83c";
}

.flext-ico-chat::before {
	content: "\e903";
}

.flext-ico-view::before {
	content: "\e91a";
}

.flext-ico-ordered-list::before {
	content: "\e92e";
}

.flext-ico-location::before {
	content: "\e907";
}

.flext-ico-left::before {
	content: "\e90e";
}

.flext-ico-right::before {
	content: "\e90d";
}

.flext-ico-follow::before {
	content: "\e90b";
}

.flext-ico-unfollow::before {
	content: "\e90a";
}

.flext-ico-zoom-in::before {
	content: "\e902";
}

.flext-ico-share::before {
	content: "\e906";
}

.flext-ico-like::before {
	content: "\e825";
}

.flext-ico-arrow-left::before {
	content: "\e912";
}

.flext-ico-arrow-right::before {
	content: "\e913";
}

.flext-ico-pause::before {
	content: "\e905";
}

.flext-ico-date::before {
	content: "\e915";
}

.flext-ico-resize-full::before {
	content: "\e836";
}

.flext-ico-external-link::before {
	content: "\e901";
}

.flext-ico-link::before {
	content: "\e904";
}

.flext-ico-spinner::before {
	content: "\e91f";
}

.flext-ico-article::before {
	content: "\e80b";
}

.flext-ico-back::before {
	content: "\e803";
}

.flext-ico-cancel::before {
	content: "\e829";
}

.flext-ico-copy::before {
	content: "\e90c";
}

.flext-ico-music::before {
	content: "\e91e";
}

.flext-ico-volume::before {
	content: "\e919";
}

.flext-ico-mute::before {
	content: "\e918";
}

.flext-ico-check::before {
	content: "\e831";
}

.flext-ico-play::before {
	content: "\e91b";
}

/*--------------------------------------------------------------
# Button
--------------------------------------------------------------*/

.flext-button {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-block;
	outline: none;
	overflow: hidden;
	margin: 0.5rem 0;
	padding: 0;
	position: relative;
	text-align: center;
	z-index: 1;
}

.flext-button > * {
	display: inline-block;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.flext-button > i {
	margin: 0 0.5rem;
}

/*--------------------------------------------------------------
# Icon Button
--------------------------------------------------------------*/

.flext-icon-button {
	align-items: center;
	cursor: pointer;
	border: none;
	border-radius: 50%;
	box-sizing: border-box;
	display: inline-flex;
	flex-wrap: wrap;
	height: 5rem;
	justify-content: center;
	outline: none;
	padding: 1rem;
	position: relative;
	transition: color 0.3s linear;
	text-decoration: none;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	width: 5rem;
}

.flext-icon-button:active {
	text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.flext-icon-button i {
	position: relative;
	z-index: 5;
}

/*--------------------------------------------------------------
# Loader
--------------------------------------------------------------*/

.flext-loader {
	align-items: center;
	display: flex;
	border-radius: 0.8rem;
	height: 3.5rem;
	justify-content: center;
	margin: auto;
	position: relative;
	width: 3.5rem;
}

.flext-loader.flext-loader-xs {
	height: 2rem;
	width: 2rem;
}

.flext-loader.flext-loader-md {
	height: 5rem;
	width: 5rem;
}

.flext-loader.flext-loader-lg {
	height: 8rem;
	width: 8rem;
}

.flext-loader::before {
	animation: flext-spin 0.9s infinite linear;
	border: 2px solid rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	border-top-color: rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	content: "";
	display: inline-block;
	height: 100%;
	position: relative;
	width: 100%;
	vertical-align: middle;
}

.flext-loader.flext-loader-xs::before {
	border-width: 1px;
}

.flext-loader.flext-loader-light::before {
	border-color: rgba(255, 255, 255, 1);
	border-top-color: rgb(255, 255, 255, 0.5);
}

@keyframes flext-spin {

	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}

}

/*--------------------------------------------------------------
# List
--------------------------------------------------------------*/

.flext-list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.flext-list > li {
	align-items: center;
	display: flex;
	list-style: none;
	margin: 0;
	min-height: 1.5rem;
	overflow: hidden;
	padding: 0;
	position: relative;
	transition: background-color 0.3s ease-out;
}

.flext-list > li:hover {
	background: rgba(0, 0, 0, 0.05);
}

.flext-list > li.selected,
.flext-list > li:active {
	background: rgba(0, 0, 0, 0.1);
}

.flext-list > li > * {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	overflow: hidden;
	padding: 1rem 1.5rem;
	position: relative;
	width: 100%;
	z-index: 1;
}

.flext-list > li a {
	outline: none;
}

.flext-list a > i {
	display: inline-block;
	margin-right: 1.4rem;
}

.flext-list a > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

.flext-list > li .item-thumbnail {
	display: none;
}

.flext-avatar-list > li .item-thumbnail {
	align-items: center;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	flex-grow: 0;
	flex-shrink: 0;
	height: 3.5rem;
	justify-content: center;
	margin-right: 1.5rem;
	overflow: hidden;
	width: 3.5rem;
}

.flext-avatar-list > li .item-thumbnail i {
	text-align: center;
}

.flext-avatar-list > li .item-title {
	display: block;
	font-weight: 400;
	max-height: 3rem;
	overflow: hidden;
}

.flext-list.flext-list-two-line > li .item-title {
	height: 2.8rem;
	text-overflow: ellipsis;
}

.flext-list-group h4 {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	font-size: 1.8rem;
	margin: 0;
	padding: 1rem 1.5rem;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# Grid
--------------------------------------------------------------*/

:root {
	--flext-grid-gap: 0;
	--flext-grid-columns: 1;
}

.flext-has-gutters {
	--flext-grid-gap: 0.5rem;
}

.flext-has-medium-gutters {
	--flext-grid-gap: 1rem;
}

.flext-has-large-gutters {
	--flext-grid-gap: 1.5rem;
}

.flext-grid {
	align-items: flex-start;
	display: grid;
	gap: var(--flext-grid-gap);
	grid-template-columns: repeat(var(--flext-grid-columns), minmax(1rem, 1fr));
	list-style: none;
	margin: 0;
	margin-bottom: var(--flext-grid-gap);
	padding: 0;
	position: relative;
}

.flext-grid .flext-grid-item {
	align-items: center;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	position: relative;
}

/* Gallery */

.flext-gallery {
	--flext-grid-columns: 2;
}

.flext-gallery > li a {
	align-items: flex-start;
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	height: 100%;
	margin: 0;
	position: relative;
	width: 100%;
}

.flext-gallery > li img {
	display: block;
	flex: 1;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.flext-grid.flext-columns-1 {
	--flext-grid-columns: 1;
}

/*--------------------------------------------------------------
## Responsive Layout
--------------------------------------------------------------*/

@media (min-width: 576px) {

	/* Grid */
	.flext-grid,
	.flext-grid.flext-columns-2,
	.flext-grid.flext-columns-3 {
		--flext-grid-columns: 2;
	}
}

@media (min-width: 768px) {

	/* Grid */
	.flext-grid,
	.flext-grid.flext-columns-3 {
		--flext-grid-columns: 3;
	}

	/* Gutters */
	.flext-grid.flext-has-gutters {
		--flext-grid-gap: 1rem;
	}

	.flext-grid.flext-has-medium-gutters {
		--flext-grid-gap: 1.5rem;
	}

	.flext-grid.flext-has-large-gutters {
		--flext-grid-gap: 3rem;
	}
}

@media (min-width: 1024px) {

	/* Grid */
	.flext-grid,
	.flext-grid.flext-columns-4 {
		--flext-grid-columns: 4;
	}
}

@media (min-width: 1200px) {

	/* Grid */
	.flext-grid,
	.flext-grid.flext-columns-5 {
		--flext-grid-columns: 5;
	}

	.flext-grid.flext-columns-6 {
		--flext-grid-columns: 6;
	}

	.flext-grid.flext-columns-7 {
		--flext-grid-columns: 7;
	}

	.flext-grid.flext-columns-8 {
		--flext-grid-columns: 8;
	}

	.flext-grid.flext-columns-9 {
		--flext-grid-columns: 9;
	}

	.flext-grid.flext-columns-10 {
		--flext-grid-columns: 10;
	}

	.flext-grid.flext-columns-11 {
		--flext-grid-columns: 11;
	}

	.flext-grid.flext-columns-12 {
		--flext-grid-columns: 12;
	}
}