/**
 * @author Novruz Rahimov
 * @email novruzrehimov@gmail.com
 * @create date 2023-10-10 00:02:58
 * @modify date 2023-10-10 00:02:58
 */

 
 :root {
	 --main-color: #193C96;
	 --secondary-color: #D72626;
	 --tertiary-color: #F0F1F1;
	 --body-bg: #FFFFFF;
	 --border-color: #F0F1F1;
	 --border-secondary-color: rgba(23, 23, 23, .3);
	 --color: #000000;
	 --link-color: #000000;
	 --link-hover-color: var(--main-color);
	 --selection-color: rgba(25, 60, 150, 0.75);
	 --fade-gradient: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
	 --swiper-theme-color: var(--main-color);
	 --swiper-pagination-bullet-size: .5625rem;
	 --scroll-margin: 4rem;

	 --max-width: 1440px;
	 --container-width: calc(100% - 12vw);
	 --max-container: auto;
	 
	 --font: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	 --font: 'Roboto';
	 --font-size: 16px;
}

@media screen and (max-width: 480px) {
	:root {
		--font-size: 14px;
		--scroll-margin: 6rem;
	}	
}

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	outline-color: var(--main-color);
}

*:focus-visible {
	outline-style: dashed;
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb {
  width: 14px;
  border-radius: 8px;
  background-clip: padding-box;
  border: 4px solid transparent;
}

*::-webkit-scrollbar-thumb {        
  box-shadow: inset 0 0 0 10px var(--border-secondary-color);
}

.icon {
	width: 2rem;
	height: 2rem;
}

svg.icon {
	fill: currentColor;
}

img[fallback] {
	background: #ccc linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%) no-repeat -200% 0 / 200% 100%;
	animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
	0% { background-position: 200%; }
	100% { background-position: -200%; }
}

html {
	font-size: var(--font-size);
	font-size: clamp(14px, 10vw - 100px, 16px);
	scrollbar-gutter: stable;
}

html, body {
	scroll-behavior: smooth;
	background-color: var(--body-bg);
}

body {
	font-family: var(--font);
	color: var(--color);
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	transition: 250ms ease;
}

main {
	flex: 1;
}

a {
	text-decoration: none;
	color: var(--link-color);
	transition: 200ms ease;
}

a:hover {
	color: var(--link-hover-color);
}

container, .container {
	display: block;
	/* width: 100%;
	padding: 0 4rem 0 4rem; */
	/* width: calc(100% - 8rem); */
	width: var(--container-width);
	max-width: var(--max-container);
	/* max-width: var(--max-width); */
	margin: 0 auto;
	/* width: 100%; */
}

@media (min-width: 576px) {
	:root {
		--max-container: 540px;
	}
}


@media (min-width: 768px) {
	:root {
		--max-container: 720px;
	}
}

@media (min-width: 992px) {
	:root {
		--max-container: 960px;
	}
}

@media (min-width: 1200px) {
	:root {
		--max-container: 1280px;
	}
}

section {
	margin: 2rem auto;
	scroll-margin: var(--scroll-margin);
}

/* HEADER */

header {
	/* position: sticky; */
	top: 0;
	z-index: 99;
	background-color: var(--body-bg);
	transition: 250ms ease;
	/* margin-bottom: 1.5rem; */
	/* padding: 1.5rem 0; */
}

header > * {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

header > container {
	padding: 1.5rem 0;
}

.header-right {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.header-right-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: .3125rem;
	border: 1px solid var(--border-color);
	width: 2.75rem;
	height: 2.125rem;
	color: var(--main-color);
	margin-left: .5rem;
}

.header-right-icon:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
}

.header-right-icon > svg {
	width: .8125rem;
}

.header-lang-selector-label {
	line-height: 1;
	cursor: pointer;
	text-transform: uppercase;
	position: relative;
	width: 3.5rem;
	background: var(--main-color) url('/img/lang-select-caret.svg') calc(100% - .5rem) center / .625rem no-repeat;
	color: #FFFFFF;
	justify-content: initial;
	padding: 0 .5rem;
	transition: 250ms ease;
}

.header-lang-selector-label:hover {
	background: var(--body-bg) url('/img/lang-select-caret-active.svg') calc(100% - .5rem) center / .625rem no-repeat;
	color: var(--main-color);
}

.header-lang-selector-list {
	position: absolute;
	z-index: 99;
	top: calc(100% + .25rem);
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	opacity: 0;
	visibility: hidden;
	display: grid;
	/* gap: .125rem; */
	background-color: var(--body-bg);
	/* background-color: red; */
	box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
	transition: 250ms ease-in;
}

.header-lang-selector-label:hover .header-lang-selector-list {
	opacity: 1;
	visibility: visible;
}

.header-lang-selector-list > li > a {
	display: flex;
	padding: .5rem;
	color: var(--main-color);
}

.header-lang-selector-list > li > a:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
}

.header-mob-burger-icon {
	display: none;
	margin-left: auto;
	cursor: pointer;
}

.header-mob-burger-icon > svg {
	grid-area: stack;
	transition: 250ms ease;
}


.header-mob-burger-icon > svg:nth-child(1),
header.active .header-mob-burger-icon > svg:nth-child(2) {
	opacity: 1;
	visibility: visible;
}

.header-mob-burger-icon > svg:nth-child(2),
header.active .header-mob-burger-icon > svg:nth-child(1) {
	opacity: 0;
	visibility: hidden;
}

.logo {
	display: inline-flex;
	align-items: center;
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--main-color);
	transition: 250ms ease;
}

.logo-symbol {
	width: 4.375rem;
	margin-right: 1rem;
	transition: 250ms ease;
}

#lang {
	display: inline-flex;
	width: 3.5rem;
	height: 2.125rem;
	margin-left: .5rem;
	border: none;
	color: #FFFFFF;
	font-weight: 500;
	padding: .25rem .625rem;
	border-radius: .3125rem;
	font-size: calc(1em - 1px);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	background: var(--main-color) url('/img/lang-select-caret.svg') calc(100% - .5rem) center / .625rem no-repeat;
	transition: 250ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

#lang > option{
	background-color: var(--body-bg);
	color: var(--color);
	font-size: calc(1em - 1px);
}

@media screen and (max-width: 768px) {
	header {
		position: sticky;
	}

	header.active {
		background-color: var(--main-color);
	}

	header.active .logo {
		color: #FFFFFF;
	}

	header.active .logo-symbol {
		filter: brightness(0) invert(1);
	}

	header.active .header-mob-burger-icon {
		color: #FFFFFF;
	}

	.header-right > .header-right-icon {
		display: none;
	}

	.header-mob-burger-icon {
		display: inline-grid;
		grid-template-areas: 'stack';
	}
}

/* HEADER ENDS */

/* NAVIGATION */

nav {
	width: 100%;
}

.nav-row {
	background-color: var(--tertiary-color);
	flex: 1 1 100%;
}

.nav-top-row.nav-row {
	background-color: var(--main-color);
	--color: #ffffff
}

.nav-row > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	padding: 0;
}

.nav-row > ul > li > a{
	display: inline-flex;
	align-items: center;
	font-size: 1.125rem;
	color: var(--color);
	padding: .5rem .5rem;
	white-space: nowrap;
	transition: 250ms ease-out;
}

.nav-row > ul > li > a:hover{
	background-color: var(--secondary-color);
	color: #ffffff
}

.nav-mob {
	display: none;
	padding: 1rem 0;
}

.nav-mob > .nav-mob-lang {
	margin-right: auto;
}

.nav-mob > .header-right-icon {
	color: #FFFFFF;
}

.nav-mob-lang {
	display: flex;
	align-items: center;
	font-size: 1.25rem;
}

.nav-mob-lang > a {
	margin-right: .5rem;
	opacity: .5;
}

.nav-mob-lang > a.active {
	opacity: 1;
}

.nav-mob-lang > a {
	color: #FFFFFF;
}

.nav-mob-row-seperator {
	display: none;
}

@media screen and (max-width: 768px) {
	nav {
		position: fixed;
		z-index: 99;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		top: 88.2px;
		background-color: var(--main-color);
		height: -webkit-fill-available;
		align-items: initial;
		flex-wrap: initial;
		flex-direction: column;
		overflow-y: scroll;
		overflow-y: overlay;
		transform: translateX(-100%) scaleX(0);
		transform-origin: left;
		transition: 400ms ease;
		transition: 250ms cubic-bezier(0.215, 0.610, 0.355, 1.000);
	}

	header.active nav {
		transform: translateX(0) scaleX(1);
	}

	nav::-webkit-scrollbar {
		width: 0;
	}

	.nav-row > ul {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.nav-row > ul > li > a {
		padding: .625rem 0;
		/* font-size: 1.5rem; */
	}

	.nav-row {
		background: 0;
		--color: #FFFFFF;
		/* overflow-y: scroll; */
		/* overflow-y: overlay; */
		position: relative;
	}
	
	.nav-mob {
		display: flex;
	}
	
	.nav-mob-row-seperator {
		display: initial;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .3);
		width: 100%;
		margin: .5rem 0;
	}
}

/* NAVIGATION ENDS */

/* LAYOUT */

.layout-grid {
	/* display: grid;
	gap: 2rem;
	grid-template-columns: 2fr 1fr; */
	--gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-left: calc(var(--gap) * -1);
	/* margin-bottom: calc(var(--gap) * -1); */
}

.layout-grid > * {
	margin: 0 0 var(--gap) var(--gap);
}

.layout-grid-main {
	flex: 1 1 calc(100% / 3 * 2 - var(--gap));
}

.layout-grid-sidebar {
	flex: 1 1 calc(100% / 3 - var(--gap));
	display: grid;
	min-width: 12rem;
	position: sticky;
	top: 1rem;
	/* margin-bottom: 4rem; */
}

@media screen and (max-width: 768px) {
	.index-main-sidebar-item.index-main-sidebar-ads {
		display: none;
	}

	.swiper-button-next:after, .swiper-button-prev:after {
		--swiper-navigation-size: 2rem;
	}
}

/* LAYOUT ENDS */

.index-hero {
	position: relative;
	/* display: grid; */
	/* grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); */
	--gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	margin-left: calc(var(--gap) * -1);
	margin-bottom: calc(var(--gap) * -1);
	/* gap: 2rem; */
}

.index-hero > * {
	margin: 0 0 var(--gap) var(--gap);
}

.index-hero-slider {
	--swiper-navigation-color: #FFFFFF;
	flex: 1 1 calc(100% / 3 * 2 - var(--gap));
	/* display: grid; */
	/* overflow: hidden; */
	width: 0;
	max-width: 100%;
	position: relative;
	grid-column: span 2;
	height: 34rem;
	height: clamp(18rem, 44vw,34rem);
	/* aspect-ratio: 10 / 6; */
}

.index-hero-slider .swiper{
	width: 100%;
	max-width: 100%;
	height: 100%;
}

.index-hero-slider > .swiper-pagination {
	bottom: -1.5rem;
}

.index-hero-slider .swiper-slide > a {
	display: flex;
	height: 100%;
}

.index-hero-slider .swiper-slide > a:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	background: var(--fade-gradient);
	opacity: .8;
	transition: 250ms ease-in-out;
}

.index-hero-slider .swiper-slide:hover > a:after {
	opacity: .9;
}
	
.index-hero-slider-item-content {
	position: absolute;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	color: #FFFFFF;
	padding: 2rem;
}

.index-hero-slider-item-title {
	display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
	font-size: 1.5rem;
	margin: .75rem 0;
	font-weight: 700;
	color: #FFFFFF;
}

.index-hero-slider-item-title:hover {
	color: #FFFFFF
}

.index-hero-slider-item-badge {
	display: inline-flex;
	background-color: var(--secondary-color);
	color: #FFFFFF;
	padding: .25rem .75rem;
}

.index-hero-slider-item-badge:hover {
	color: #FFFFFF;
}

.index-hero-slider-item-date {
	display: flex;
	align-items: center;
	font-size: .75rem;
}

.index-hero-slider-item-date > svg{
	/* width: .75rem; */
	width: .875rem;
	height: .875rem;
	margin-right: .25rem;
}

.index-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.index-hero-news {
	flex: 1 1 calc(100% / 3 - var(--gap));
	/* display: flex;
	flex-direction: column; */
	display: grid;
	grid-template-rows: max-content;
	height: inherit;
	height: 34rem;
	box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
}

.index-hero-news-head {
	display: flex;
	position: relative;
}

.index-hero-news-head #calendar {
	position: absolute;
	right: 0;
	top: 4rem;
}

[data-calendar-theme="light"] .vanilla-calendar-week {
	background-color: var(--border-color);
	padding: .125rem 0;
}

[data-calendar-theme="light"] .vanilla-calendar-week__day {
	color: initial;
}

[data-calendar-theme=light] .vanilla-calendar-week__day_weekend {
	color: var(--secondary-color)
}

[data-calendar-theme=light] .vanilla-calendar-day:not(.vanilla-calendar-day_selected) .vanilla-calendar-day__btn_today,
[data-calendar-theme=light] .vanilla-calendar-day__btn_today:hover,
[data-calendar-theme=light] .vanilla-calendar-day__btn:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
	border-radius: 0;
}

[data-calendar-theme=light] .vanilla-calendar-day__btn_selected, [data-calendar-theme=light] .vanilla-calendar-day__btn_selected:hover {
	background-color: var(--secondary-color);
	color: #FFFFFF;
	border-radius: 0;
}

[data-calendar-theme=light] .vanilla-calendar-day__btn_disabled {
	cursor: not-allowed;
}

.vanilla-calendar-arrow {
	width: 1.125rem;
	height: 1.125rem;
}

.vanilla-calendar {
	border: 1px solid var(--border-secondary-color);
}

.index-hero-news-head-title {
	flex: 1;
	background-color: var(--secondary-color);
	color: #FFFFFF;
	padding: 1rem;
}

.index-hero-news-head-title > h3 {
	font-weight: 700;
	margin: 0;
	white-space: nowrap;
}

.index-hero-news-head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--tertiary-color);
	padding: 0 2rem;
	color: var(--main-color);
	cursor: pointer;
}

.index-hero-news-head-icon > svg {
	width: 1.5rem;
	height: 1.5rem;
}

.index-hero-news-body {
	/* padding: .5rem 1.5rem; */
	padding: .5rem 0;
	overflow: hidden;
	overflow: overlay;
}

.index-hero-news-body-content {
	max-height: 100%;
	overflow-y: scroll;
	overflow-y: overlay;
}

.index-hero-news-body-empty {
	padding: 4rem;
	display: grid;
	justify-content: center;
	text-align: center;
	font-weight: 600;
	font-size: 1.125rem;
}

.index-hero-news-body-item {
	display: flex;
	flex-direction: column;
	/* padding: .75rem 0; */
	padding: .75rem 1.5rem;
	border-bottom: 1px solid var(--border-color);
	transition: 250ms ease;
}

.index-hero-news-body-item:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
}

.index-hero-news-body-item:hover .index-hero-news-body-item-title,
.index-hero-news-body-item:hover .index-hero-news-body-item-date{
	color: #FFFFFF;
}

.index-hero-news-body-item-date {
	display: flex;
	align-items: center;
	color: var(--main-color);
	font-size: .75rem;
	font-weight: 500;
	transition: 250ms ease;
}

.index-hero-news-body-item-date > svg{
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

.index-hero-news-body-item-title {
	margin-top: .5rem;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.125rem;
}

@media screen and (max-width: 768px) {
	.index-hero-slider-item-title {
		font-size: 1.125rem;
	}
	
}

/* CATEGORY BLOCK */

.category-block-head {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-secondary-color);
}

.category-block-head-title {
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--secondary-color);
	font-size: 1.5rem;
	margin: 1rem 0;
}

.category-block-head-title:before{
	content: '';
	display: inline-block;
	width: .75rem;
	height: .75rem;
	background-color: var(--secondary-color);
	border-radius: 50%;
	margin-right: .5rem;
}

.category-block-head-more {
	margin-left: auto;
	text-decoration: underline;
	font-weight: 600;
}

.category-block-news {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2rem;
	/* margin-right: -1.5rem; */
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	grid-gap: 2rem;
	gap: 2rem
}

.category-block-news .index-main-sidebar-ads-item {
	display: none;
}

@media screen and (max-width: 768px) {
	.category-block-news .index-main-sidebar-ads-item {
		display: flex;
	}	
}

.category-block-news-item {
	--items: 3;
	flex: 0 1 calc(100% / var(--items) - 1.5rem);
	/* margin-right: 1.5rem; */
}

/* .category-block-news[items="2"] .category-block-news-item{
	--items: 2;
}

.category-block-news[items="3"] .category-block-news-item{
	--items: 3;
} */

.category-block-news-item-image {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	object-fit: cover;
	overflow: hidden;
	/* padding-bottom: .75rem;
	margin-bottom: .75rem; */
	/* border-bottom: 1px solid var(--border-color); */
}

.category-block-news-item-image:hover img {
	transform: scale(1.1);
}

.category-block-news-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: 250ms ease;
}

.category-block-seperator {
	display: flex;
	align-items: center;
	margin: 1rem 0;
	border: 0;
	border-bottom: 1px solid var(--border-color);
}

.category-block-news-item-details {
	display: flex;
	margin-bottom: .5rem;
}

.category-block-news-item-details-date {
	display: flex;
	align-items: center;
	color: var(--main-color);
	font-size: .75rem;
	font-weight: 500;
}

.category-block-news-item-details-date > svg{
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

.category-block-news-item-details-views {
	display: flex;
	align-items: center;
	margin-left: auto;
	font-size: .75rem;
}

.category-block-news-item-details-views > svg{
	width: .875rem;
	height: .875rem;
	margin-right: .25rem;
}

.category-block-news-item-title {
	display: inline-flex;
	margin: .75rem 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.75rem;
}

/* CATEGORY BLOCK ENDS */

/* INDEX MAIN SIDEBAR */

.index-main-sidebar-item {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
}

.index-main-sidebar-item img {
	max-width: 100%;
}

.index-main-sidebar-item-head {
	background-color: var(--main-color);
	color: #FFFFFF;
	margin-bottom: 1rem;
	padding: 1.125rem 1rem;
}

.index-main-sidebar-item-head > * {
	display: flex;
	align-items: center;
	line-height: 1;
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
}

.index-main-sidebar-item-body {
	display: flex;
	flex-direction: column;
}

.index-main-sidebar-item-head > *:before{
	content: '';
	display: inline-block;
	width: .5rem;
	height: .5rem;
	background-color: #FFFFFF;
	border-radius: 50%;
	margin-right: .5rem;
}

/* INDEX MAIN SIDEBAR ENDS */

.index-main-sidebar-ads > .index-main-sidebar-item-body {
	/* padding: 2rem; */
}

.index-main-sidebar-ads-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1rem;
	text-align: center;
	border: 1px solid var(--main-color);
}

.index-main-sidebar-ads-item > span {
	display: inline-flex;
	margin: .5rem 0;
}

.index-main-sidebar-ads-item img,
.index-main-sidebar-ads img {
	object-fit: contain;
	max-width: 100%;
}

.index-main-sidebar-subscription #subscription-form {
	display: flex;
	flex-direction: column;
}

.index-main-sidebar-subscription #subscription-form > input {
	display: block;
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--main-color);
	margin: 1rem 0;
}

.index-main-sidebar-subscription #subscription-form > button {
	background-color: var(--secondary-color);
	padding: .75rem 1rem;
	border: 0;
	color: #FFFFFF;
	font-size: 1.125rem;
	font-weight: 700;
	cursor: pointer;
}

.index-main-sidebar-news-item {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-bottom: 1.5rem;
	margin-right: -.5rem;
}

.index-main-sidebar-news-item > * {
	flex: 1 1 calc(100% / 2 - 1rem);
	margin-right: .5rem;
}

.index-main-sidebar-news-item-image {
	width: 50%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	margin-right: .5rem;
}

.index-main-sidebar-news-item-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.index-main-sidebar-news-item-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 1rem 0;
}

.index-main-sidebar-news-item-date {
	display: flex;
	align-items: center;
	color: var(--main-color);
	font-size: .75rem;
	font-weight: 500;
}

.index-main-sidebar-news-item-date > svg{
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

/* INDEX PHOTOS */

.index-photos-head {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-secondary-color);
}

.index-photos-head-title {
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--secondary-color);
	font-size: 1.5rem;
	margin: 1rem 0;
}

.index-photos-head-title:before{
	content: '';
	display: inline-block;
	width: .75rem;
	height: .75rem;
	background-color: var(--secondary-color);
	border-radius: 50%;
	margin-right: .5rem;
}

.index-photos-head-more {
	margin-left: auto;
	/* text-decoration: underline; */
	font-weight: 600;
}

.index-photos-grid {
	display: grid;
	/* grid-template-columns: repeat(auto-fit, minmax(clamp(1rem, 20rem, 100%), 1fr)); */
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	grid-auto-rows: 16rem;
	gap: 1rem 2rem;
	/* --gap: 2rem;
	display: flex;
	flex-wrap: wrap;
	margin-right: calc(var(--gap) * -1);
	margin-bottom: calc(var(--gap) * -1); */
}

.index-photos-grid > * {
	margin: 0 var(--gap) var(--gap) 0;
}

.index-photos-grid-main {
	flex: 1 1 calc(100% - (100% / 3) - var(--gap) * 2);
	display: flex;
}

.index-photos-grid-sub {
	flex: 1 1 calc(100% / 3);
	min-width: 12rem;
}

.index-photos-item {
	position: relative;
}

@media screen and (max-width: 768px) {
	/* .index-photos-item:first-child img {
		height: 30rem;
	} */

	/* .index-photos-grid {
		grid-auto-rows: 16rem;
		grid-template-rows: 30rem;
	} */
}

@media screen and (min-width: 768px) {
	.index-photos-item:first-child .index-photos-item-title {
		font-size: 1.5rem;
	}
	
	.index-photos-item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	
	.index-photos-item:first-child .index-photos-item-content {
		padding: 2rem;
	}
	
	.index-photos-item:first-child .index-photos-item-badge {
		display: inline-flex;
	}
}


/* .index-photos-grid-sub > .index-photos-item {
	font-size: calc(1em - 6px);
}

.index-photos-grid-sub > .index-photos-item:first-child {
	margin-bottom: calc(var(--gap) / 1)
} */

.index-photos-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

.index-photos-item-content {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: #FFFFFF;
    padding: 2rem;
}

.index-photos-item-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: .75rem 0;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
}

.index-photos-item-title:hover {
	color: #FFFFFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.index-photos-item-badge {
	display: none;
	background-color: var(--secondary-color);
	color: #FFFFFF;
	padding: .25rem .75rem;
}

.index-photos-item-badge:hover {
	color: #FFFFFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.index-photos-item-date {
	display: flex;
	align-items: center;
	font-size: .75rem;
}

.index-photos-item-date > svg{
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

.index-photos-item > a {
	display: flex;
	width: 100%;
    height: 100%;
}

.index-photos-item > a:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
	background: var(--fade-gradient);
	opacity: .8;
	transition: 250ms ease-in-out;
}

.index-photos-item:hover > a:after {
	opacity: .9;
}

/* INDEX PHOTOS ENDS */

/* INDEX VIDEOS */

.index-videos {
	box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.1);
	margin: 4rem 0;
	padding: 1rem 0;
}

.index-videos-head {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	/* border-bottom: 1px solid var(--border-secondary-color); */
}

.index-videos-head-title {
	display: flex;
	align-items: center;
	line-height: 1;
	color: var(--main-color);
	font-size: 1.5rem;
	margin: 1rem 0;
}

.index-videos-head-more {
	margin-left: auto;
	/* text-decoration: underline; */
	font-weight: 600;
}

.index-videos-grid {
	/* display: grid;
	gap: 2rem;
	grid-template-columns: 2fr 1fr; */
	--gap: 2rem;
	display: flex;
	flex-wrap: wrap-reverse;
	margin-left: calc(var(--gap) * -1);
	/* margin-bottom: calc(var(--gap) * -1); */
}

.index-videos-grid > * {
	margin: 0 0 var(--gap) var(--gap);
}

.index-videos-grid-main {
	flex: 1 1 calc(100% - (100% / 3) - var(--gap));
	align-self: end;
}

.index-videos-grid-list {
	flex: 1 1 calc(100% / 3 - var(--gap));
	min-width: 12rem;
	margin-bottom: calc(var(--gap) / 2 * 1);
}

.index-videos-grid-list-item  {
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	margin-right: calc(var(--gap) * -1);
	/* margin-bottom: calc(var(--gap) / 2  * 1); */
}

.index-videos-grid-list-item  > * {
	flex: 1 1 calc(100% / 2 - var(--gap));
	margin: 0 var(--gap) var(--gap) 0
}

.index-videos-grid-list-item-image {
	min-width: 6rem;
	width: 50%;
	aspect-ratio: 16 / 9;
	position: relative;
}

.index-videos-grid-list-item-image > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.index-videos-grid-list-item-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 700;
	/* margin: 0 0 1rem 0; */
}

.index-videos-grid img{
	max-width: 100%;
}

.index-videos-item {
	position: relative;
	height: 100%;
}

.index-videos-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	max-width: 100%;
}

.index-videos-item-content {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: #FFFFFF;
    padding: 2rem;
}

.index-videos-item-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: .75rem 0;
	font-size: 1rem;
	font-weight: 700;
	color: #FFFFFF;
}

.index-videos-item-title:hover {
	color: #FFFFFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.index-videos-item-badge {
	display: none;
	background-color: var(--secondary-color);
	color: #FFFFFF;
	padding: .25rem .75rem;
}

.index-videos-item-badge:hover {
	color: #FFFFFF;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

.index-videos-item-date {
	display: flex;
	align-items: center;
	font-size: .75rem;
}

.index-videos-item-date > svg{
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

.index-videos-item > a {
	display: flex;
	width: 100%;
    height: 100%;
	aspect-ratio: 16 / 9;
}

.index-videos-item > a:after {
	content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
	background: var(--fade-gradient);
	opacity: .8;
	transition: 250ms ease-in-out;
}

.index-videos-item:hover > a:after {
	opacity: .9;
}

.index-videos-grid-list-item-image:after,
.index-videos-item:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: url('/img/play.svg') center center / 1rem no-repeat;
	width: 41px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: .25rem;
	padding: .5rem;
	opacity: .5;
	cursor: pointer;
	transition: 250ms ease;
}

.index-videos-grid-list-item:hover .index-videos-grid-list-item-image:after,
.index-videos-item:hover:after {
	opacity: 1;
}

@media screen and (min-width: 768px) {
	.index-videos-item:first-child .index-videos-item-title {
		font-size: 1.5rem;
	}
	
	.index-videos-item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	
	.index-videos-item:first-child .index-videos-item-content {
		padding: 2rem;
	}
	
	.index-videos-item:first-child .index-videos-item-badge {
		display: inline-flex;
	}
}

/* FIXED SOCIALS */

.fixed-socials {
    /* left: 2vw; */
    /* bottom: calc(50% + 4rem); */
    display: inline-flex;
    flex-direction: column;
    list-style: none;
    z-index: 100;
    /* position: sticky; */
	padding: 0;
	width: 0;
    height: 0;
	
	position: fixed;
	margin-left: -4rem;
	top: calc(50% - 6rem);
}

.fixed-socials > li > a {
	background-color: var(--body-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 34px;
	border-radius: .25rem;
	color: var(--main-color);
	border: 1px solid var(--border-color);
	margin-bottom: .5rem;
	padding: .25rem .5rem;
}

.fixed-socials > li > a:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
}

/* @media screen and (min-width: 1440px) {
	.fixed-socials {
		left: 11vw;
	}
} */

@media screen and (max-width: 900px) {
	.fixed-socials {
		display: none;
	}
}

/* FIXED SOCIALS ENDS */

/* FOOTER */

footer {
	display: flex;
	flex-direction: column;
	background-color: var(--main-color);
	font-size: .875rem;
	color: #FFFFFF;
	/* margin-top: 4rem; */
	padding: 2rem 0;
}

footer * {
	outline-color: #FFFFFF;
}

footer .logo {
	filter: brightness(0) invert(1);
}

footer a {
	color: #FFFFFF;
}

footer a:hover {
	color: #ffffff;
	text-decoration: underline;
}

footer > container > div {
	--gap: 2rem;
	/* display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: calc(var(--gap) * -1);
	margin-bottom: calc(var(--gap) * -1);
}

.footer-top-item {
	display: inline-flex;
	flex-direction: column;
	/* flex: 0 0 calc(100% / 3 - var(--gap)); */
	margin: 0 auto var(--gap) var(--gap);
}

.footer-seperator {
	border-color: rgba(255, 255, 255, .2);
	height: 1px;
	width: 100%;
	margin: 1rem 0;
}

.footer-top {
	padding-bottom: 2rem;
}

.footer-top-contacts-item {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

.footer-top-contacts-item > span:first-child {
	color: rgba(255, 255, 255, .5);
	font-size: .75rem;
	margin-bottom: .125rem;
}

.footer-top-socials {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
}

.footer-top-socials-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 34px;
	border-radius: .25rem;
	border: 1px solid rgba(255, 255, 255, .1);
	margin-right: .25rem;
	padding: .25rem .5rem;
}

.footer-top-socials-item > svg {
	width: 1rem;
	height: 1rem;
}

.footer-top-socials-item:hover {
	background-color: #FFFFFF;
	color: var(--main-color);
}

.footer-links > li > a {
	display: inline-flex;
	padding: .125rem 0;
	margin-bottom: .25rem;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-bottom-copyright {
	display: flex;
	align-items: center;
	font-size: .75rem;
	color: #ddd;
}

.footer-bottom-copyright img {
	width: 6.5rem;
	margin-left: .5rem;
}

/* FOOTER ENDS */

/* BREADCRUMBS */

.breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

.breadcrumbs > li {
	/* margin-right: .25rem; */
	display: inline-flex;
	align-items: center;
	color: #7f7f7f
}

.breadcrumbs > li > a {
	color: inherit;
}

.breadcrumbs > li > a:hover {
	color: var(--main-color)
}

.breadcrumbs-seperator {
	width: .5rem;
	height: .5rem;
	display: inline-flex;
	align-items: center;
	margin: 0 .375rem;
}

.breadcrumbs > li > a.active,
.breadcrumbs > li:last-child > * {
	color: var(--main-color);
	font-weight: 600;
}

/* BREADCRUMBS END */


/* NEWS PAGE */

.news-page-body {
	display: grid;
	position: relative;
}

.news-page-body * {
	font-family: var(--font) !important;
	word-break: break-word;
}

/* .news-page-body p:not(:has(*)):first-child {
	display:none
} */

.news-page-body iframe,
.news-page-body img {
	max-width: 100%;
	max-height: 100%;
}

.news-page-body > div > img:first-of-type, .news-page-body .frog-image:first-of-type {
	width: 100%;
}

.news-page-body-cover {
	/* width: 100%; */
	margin: 1rem 0;
}

.news-page-gallery {
	--swiper-navigation-color: var(--border-color);
	/* display: grid; */
	position: relative;
	margin-bottom: 1.5rem;
	overflow: hidden;
}

.news-page-gallery > .swiper {
	width: 100%;
}

.news-page-gallery > .swiper-pagination {
	position: initial;
	margin-top: .25rem;
}

.news-page-gallery > .swiper img{
	width: 100%;
}

.news-page-rate {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.news-page-rate-stars {
	display: flex;
	flex-flow: row-reverse;
	align-items: center;
	margin: 1rem 0;
}

.news-page-rate-stars > svg {
	width: 1.25rem;
	height: 1.25rem;
	fill: transparent;
	stroke: #fab940;
	margin-right: .25rem;
	transition: 250ms ease;
	cursor: pointer;
	fill: #fab940;
}

.news-page-rate-stars > svg:hover ~ svg, .news-page-rate-stars > svg:hover {
	fill: #fab940
}

.news-page-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 1rem 0;
}

.news-page-share > * {
	/* flex: 1 1 50%; */
}

.news-page-share-head {
	display: flex;
	flex-direction: column;
	min-width: min(18rme, 100%);
	flex: 1 1;
}

.news-page-share-head-title {
	font-size: 1rem;
	margin: 0;
	white-space: nowrap;
}

.news-page-share-head-desc {
	font-size: .875rem;
	opacity: .5;
	margin: .5rem 0;
}

.news-page-share-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* flex-wrap: wrap; */
	flex: 2 1;
}

.news-page-share-icons > a {
	width: 66px;
	height: 54px;
	padding: .25rem .5rem;
	border-radius: .5rem;
	border: 1.6px solid rgba(0, 0, 0, .1);
	/* margin-left: .75rem; */
	color: var(--main-color);
}

.news-page-share-icons > a:hover {
	background-color: var(--main-color);
	color: #FFFFFF;
}

.fb-comments iframe {
	width: 100% !important;
	max-width: 100%;
}

/* NEWS PAGE ENDS */

/* SINGLE PAGE */

.page-title {
	margin-top: 0;
	font-size: 1.5rem;
}

.page img {
	max-width: 100%;
}

.page-cover {
	width: 100%;
	height: 20rem;
	object-fit: cover;
	max-width: 100%;
}

.page-content {
	white-space: pre-line;
}

.page-content * {
	font-family: var(--font) !important;
}

.page-content img {
	max-width: 100%;
}

/* SINGLE PAGE ENDS */

/* SEARCH PAGE */

.search-page-empty {
	display: grid;
	place-items: center;
	margin: 4rem 0;
}

.search-page-empty > p {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 2rem 0 0 0;
	color: var(--main-color);
}

.search-page-empty > img {
	width: 22rem;
}

.search-form {
	--gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-left: calc(var(--gap) * -1);
	margin-bottom: calc(var(--gap) * -1);
}

.search-form > * {
	margin: 0 0 var(--gap) var(--gap);
	min-width: min-content;
	max-width: 100%;
}

.search-form > input[type="text"], .search-form > input[type="date"] {
	background-color: var(--body-bg);
	font-family: inherit;
	flex: 1;
	display: inline-flex;
	height: 2.5rem;
	padding: .5rem 1rem;
	border: 1px solid var(--main-color);
	border-radius: .375rem;
	caret-color: var(--main-color);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
    background: url('/img/calendar.svg') center center / 1rem no-repeat;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	width: 1rem;
	height: 1rem;
	filter: brightness(0) saturate(100%) invert(16%) sepia(47%) saturate(4705%) hue-rotate(220deg) brightness(87%) contrast(91%);
}

.search-form > input[type="text"] {
	flex: 4;
}

.search-form > button {
	font-family: inherit;
	font-size: .875rem;
	flex: 1;
	background-color: var(--main-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	border: 0;
	height: 2.5rem;
	padding: .5rem 2rem;
	border-radius: .375rem;
	cursor: pointer;
	transition: 250ms ease;
	outline: 1px solid transparent;
    outline-offset: 2px;
}

.search-form > button:hover, 
.search-form > button:focus {
	outline-color: var(--main-color);
}

.search-form > button > svg {
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

/* SEARCH PAGE ENDS */

/* CONTACT PAGE */

.contact-items {
	display: grid;
	gap: 2rem
}

.contact-item {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
}

.contact-item-icon {
	width: 77px;
	height: 64px;
	border: 1.6px solid var(--border-color);
	border-radius: .5rem;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: var(--main-color);
	margin-right: 1rem;
	transition: 250ms ease;
}

.contact-item:hover > .contact-item-icon {
	background-color: var(--main-color);
	color: #FFFFFF;
}

.contact-item-icon > svg {
	width: 1.75rem;
	height: 1.75rem;
}

.contact-item-details {
	display: flex;
	flex-direction: column;
	font-size: .875rem;
}

.contact-item-details > span {
	opacity: .5;
	font-size: .875rem;
	white-space: nowrap;
}

.contact-items-details-content {
	margin: .25rem 0 0 0;
	font-size: 1rem;
	font-weight: 500;
}

/* COMMON MEDIA QUERIES */

@media screen and (max-width: 768px) {
	.m-visible {
		display: initial;
	}

	.m-hidden {
		display: none;
	}
}

/* COMMON MEDIA QUERIES ENDS */

/* COMMON SUPPORTS QUERIES */

@supports not (aspect-ratio: 1 / 1) {
	.category-block-news-item-image {
		height: 14rem;
	}

	.index-main-sidebar-news-item-image {
		height: 7rem;
	}

	.index-videos-grid-list-item-image {
		height: 7rem;
	}

	.index-videos-item > a {
		height: 30rem;
		max-height: 50vw;
	}
}

/* COMMON SUPPORTS QUERIES ENDS */

/* UNSUBSCRIBE PAGE */

.unsubscribe-form {
	--gap: 1rem;
	display: flex;
	align-items: center;
	margin-right: calc(var(--gap) * -1);
	margin-bottom: calc(var(--gap) * -1);
}

.unsubscribe-form > * {
	margin-right: var(--gap);
	margin-bottom: var(--gap);
}

.unsubscribe-form-input {
	background-color: var(--body-bg);
	font-family: inherit;
	flex: 10;
	display: inline-flex;
	height: 2.5rem;
	padding: .5rem 1rem;
	border: 1px solid var(--main-color);
	border-radius: .375rem;
	caret-color: var(--main-color);
}

.unsubscribe-form-button {
	flex: 2;
	font-family: inherit;
	font-size: .875rem;
	background-color: var(--main-color);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	border: 0;
	height: 2.5rem;
	padding: .5rem 2rem;
	border-radius: .375rem;
	cursor: pointer;
	transition: 250ms ease;
	outline: 1px solid transparent;
    outline-offset: 2px;
}

.unsubscribe-form-button:hover {
	outline-color: var(--main-color);
}

.unsubscribe-form-button > svg {
	width: .75rem;
	height: .75rem;
	margin-right: .25rem;
}

/* UNSUBSCRIBE PAGE ENDS */

/* NOTIFICATION BARS */

.notification-bar {
	display: flex;
	border: 1px solid var(--border-color);
	padding: .625rem;
	margin: 1rem 0;
	border-radius: .375rem;
	background-color: #00d1b2;
	color: #FFFFFF;
}

.notification-bar[type="success"] {
	background-color: #48c78e;
}

.notification-bar[type="error"] {
	background-color: #f14668;
}

/* NOTIFICATION BARS ENDS */


/* PAGINATION */

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

.pagination > li > a {
	min-width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .25rem .5rem;
}

.pagination > li > a.active,
.pagination > li > a:hover {
	background-color: var(--main-color);
	color: #ffffff
}

.pagination > li > a.disabled, .pagination > li > a.disabled:hover {
	background-color: var(--border-color);
	color: inherit;
	cursor: not-allowed;
}

.pagination > li > a > svg {
	width: .75rem;
	height: .75rem;
}

custom-scrollbar {
	display: none;
}

.prevent-scroll {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.grecaptcha-badge {
	visibility: hidden;
}

.looptech-banner {
    /* width: 720px; */
	height: 90px;
    aspect-ratio: 720 / 90;
	max-width: 100%;
    background: url('/img/looptech-banner-bg.jpg');
    background-size: cover;
	margin: 0 auto;
    animation: bg 2000ms forwards;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    font-weight: bold;
    /* font-size: 2rem; */
	fill: white;
    line-height: 1.1;
}

@keyframes bg {
    0% {
        background-position: bottom center;
    }
    100% {
        background-position: top center
    }
}

.looptech-banner-logo {
    width: 22%;
	flex: 22%;
    margin-left: 1rem;
    transform: translate(calc(-100% - 1rem));
    animation: logo 1000ms ease-out 1s forwards;
}

@keyframes logo {
    0% {
        transform: translateX(calc(-100% - 1rem));
    }
    100% {
        transform: translateX(0);
    }
}

.looptech-banner-text-holder {
    align-self: flex-start;
    display: flex;
	flex-direction: column;
    text-align: center;
    text-transform: uppercase;
	margin: 0 2rem;
    transform: translateY(50%);
    animation: text 8000ms linear 2s infinite;
	flex: calc(100% - 22% - 8rem - 2rem - 1rem);
    width: calc(100% - 22% - 8rem - 2rem - 1rem);
}

.looptech-banner-text {
    height: 90px;
}

@keyframes text {
	0% {
        transform: translateY(50%);
    }
    6.25% {
		transform: translateY(0);
    }
	43.75% {
		transform: translateY(0);
	}
    50% {
		transform: translateY(-50%);
    }
	56.25% {
		transform: translateY(-50%);
	}
	93.75% {
		transform: translateY(-50%);
	}
	100% {
		transform: translateY(-100%);
    }
}

.looptech-banner-item-holder {
    margin-right: 1rem;
	position: relative;
	width: 8rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 8rem;
}

.looptech-banner-item-holder > img {
	height: 100%;
	position: absolute;
	left: calc(100% + 1rem);
	top: 0;
	animation: item-1 8000ms ease-out 2s infinite;
}

img.looptech-banner-item-2 {
	animation-delay: 6s;
}

@keyframes item-1{
	0% {
        left: calc(100% + 1rem);
		top: 0;
    }
    6.25% {
		left: 0;
		top: 0;
    }
	43.75% {
		left: 0;
		top: 0;
	}
    50%, 100% {
		left: 0;
		top: 100%;
    }
}