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

Name: 		Quarty
Version:  1.0
Author:		Nazar Miller (millerDigitalDesign)
Portfolio:  https://themeforest.net/user/millerdigitaldesign/portfolio?ref=MillerDigitalDesign

p.s. I am available for Freelance hire (UI design, web development). mail: miller.themes@gmail.com

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

0. color variable
1. common
      - fonts
      - variables
      - text defaults
      - title defaults
      - quote
      - divider
      - buttons
      - space
2. frame
      - preloader
      - top bar
      - symbol
      - logo
      - menu
      - top bar buttons
      - search
      - info bar
      - left bar
      - curtain
      - content
      - cursor
      - frame (after 992px)
      - frame (after 768px)
3. banners
      - half banner
      - half banner (after 992px)
      - half banner (after 768px)
4. transitions
      - menu in animation
      - menu out animation
      - content in animation
      - content out animation
5. content
      - about cover
      - counter up
      - team
      - prices
      - testimonials
      - brands
      - call to action
      - icon box
      - contact
      - blog card
      - table
      - instagram
      - social links
      - subscribe
      - copyright
6. portfolio
      - portfolio item
      - portfolio item (after 768px)
      - portfolio grid sizes
      - masonry grid
      - filter
      - portfolio (after 1200px)
7. plugins customization
      - smooth scrollbar
      - swiper
      - fancybox
      - mapbox
--------------------------------------------*/
/* ------------------------------

common

------------------------------ */
/* ----- fonts ----- */
@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");
/* ----- variables ----- */
/* ----- text defaults ----- */
*,
*:after,
*:before {
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	font-family: "Josefin Sans", sans-serif;
	font-weight: 400;
	letter-spacing: 0.5px;
	color: #52555a;
}

a,
a:hover {
	text-decoration: none;
	color: #52555a;
}

.qrt-text {
	line-height: 18px;
}

.qrt-white {
	color: white !important;
}
.qrt-white * {
	color: white !important;
}

.qrt-text-right {
	text-align: right;
}
.row {
	width: 100%;
}
@media (max-width: 768px) {
	.qrt-sm-text-left {
		text-align: left;
	}
}
/* ----- title defaults ----- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 800;
	color: #28292c;
	margin: 0;
	font-family: "Commissioner", sans-serif;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: #28292c;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
	color: #28292c;
}

h1 {
	font-size: 72px;
	font-weight: 800;
	text-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
}

@media (max-width: 768px) {
	h1 {
		font-size: 48px;
	}
}
@media (max-width: 400px) {
	h1 {
		font-size: 36px;
	}
}
h2 {
	font-size: 42px;
	font-weight: 800;
}

h3 {
	font-size: 20px;
	font-weight: 800;
}

h4 {
	font-size: 16px;
}

h5 {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 10px;
	font-family: "Josefin Sans", sans-serif;
}

.qrt-just-text {
	padding: 40px 0;
}
.qrt-just-text p {
	margin-bottom: 20px;
}
.qrt-just-text p:last-child {
	margin-bottom: 0;
}
.qrt-just-text h3 {
	margin-bottom: 20px;
}

.qrt-just-img {
	width: 100%;
}

/* ----- quote ----- */
blockquote {
	color: #28292c;
	font-size: 1rem;
	background: #ff7043;
	padding: 30px 30px 30px 35px;
	font-weight: 600;
	font-style: italic;
	position: relative;
}
blockquote:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f10d";
	font-size: 16px;
	opacity: 0.5;
	color: #fff;
	top: 13px;
	left: 13px;
}
blockquote:after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f10d";
	font-size: 16px;
	opacity: 0.5;
	color: #fff;
	bottom: 13px;
	right: 13px;
	transform: rotate(180deg);
}

/* ----- divider ----- */
.qrt-divider {
	background: #52555a;
	width: 100%;
	margin: 40px 0;
	height: 1px;
	opacity: 0.3;
}
.qrt-divider.qrt-space-fix {
	margin: 0 0 40px;
}
.qrt-divider.qrt-space-fix-2 {
	margin: 20px 0 40px;
}

.qrt-divider-2 {
	background: #ff7043;
	width: 90px;
	margin: 0 0 20px;
	height: 2px;
	border-radius: 1px;
}

/* ----- buttons ----- */
.qrt-btn {
	cursor: pointer;
	font-family: "Josefin Sans", sans-serif;
	margin-right: 5px;
	border-radius: 2px;
	text-transform: uppercase;
	background-color: #28292c;
	color: #fff;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 800;
	display: inline-flex;
	justify-content: center;
	align-content: center;
	border: solid 2px transparent;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
}
.qrt-btn span {
	white-space: nowrap;
	margin: 0 5px;
	align-self: center;
	transition: 0.4s ease-in-out;
}
.qrt-btn i {
	display: block;
	font-size: 8px;
	margin: 0 5px 3px;
	align-self: center;
	transition: 0.4s ease-in-out;
}
.qrt-send-request i {
	display: inline-block;
	font-size: inherit;
	transform: rotate(90deg);
	background: #fff;
	padding: 6px 5px;
	border-radius: 50%;
}
.qrt-btn.qrt-btn-md {
	height: 45px;
	font-size: 10px;
	padding: 2px 35px 0;
}
.qrt-btn.qrt-btn-sm {
	height: 40px;
	font-size: 10px;
	padding: 1px 30px 0;
}
.qrt-btn:hover {
	color: #fff;
}
.qrt-btn:focus {
	outline: inherit;
	color: inherit;
}
.qrt-btn.qrt-btn-color {
	background-color: #ff7043;
	color: #28292c;
}
.qrt-btn.qrt-btn-color:hover {
	color: #28292c;
}
.qrt-btn.qrt-btn-color:focus {
	outline: inherit;
	color: #28292c;
}
.qrt-btn.qrt-btn-border {
	background-color: transparent;
	border-color: #fff;
}
.qrt-btn.qrt-btn-border:focus {
	outline: inherit;
	color: white;
}
.qrt-btn:not(.qrt-send-request):hover i {
	transform: translateX(4px);
}

.qrt-link {
	position: relative;
	text-transform: uppercase;
	font-size: 10px;
	display: inline-block;
	letter-spacing: 2px;
	font-weight: 800;
	margin-right: 15px;
	margin-bottom: 10px;
	color: #28292c;
	transition: 0.4s ease-in-out;
}
.qrt-link:hover {
	color: #28292c;
}
.qrt-link.qrt-white-link {
	color: white;
}
.qrt-link.qrt-white-link:hover {
	color: white;
	transform: translateX(5px);
}
.qrt-link.qrt-color-link {
	color: #ff7043;
}
.qrt-link.qrt-color-link:hover {
	color: #ff7043;
	transform: translateX(5px);
}
.qrt-link.qrt-w-chevron {
	padding-right: 10px;
}
.qrt-link.qrt-w-chevron:after {
	position: absolute;
	font-family: "Font Awesome 5 free";
	content: "\f061";
	font-weight: 900;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-size: 8px;
	line-height: 13px;
	top: 0;
	transform: translateX(5px);
	transition: 0.4s ease-in-out;
}
.qrt-link.qrt-w-chevron:hover {
	transform: translateX(0);
}
.qrt-link.qrt-w-chevron:hover:after {
	transform: translateX(10px);
}
.qrt-link:last-child {
	margin-bottom: 0;
	margin-right: 0;
}
.qrt-link i {
	font-size: 9px;
	margin-left: 3px;
}
.qrt-link.qrt-left-link {
	padding-left: 10px;
	padding-right: 0;
}
.qrt-link.qrt-left-link.qrt-w-chevron:after {
	content: "\f053";
	left: 0;
	transform: translateX(0);
}
.qrt-link.qrt-left-link.qrt-w-chevron:hover:after {
	transform: translateX(-4px);
}

/* ----- space ----- */
.qrt-mr-20 {
	margin-right: 20px !important;
}

.qrt-mb-80 {
	margin-bottom: 80px !important;
}

.qrt-mb-40 {
	margin-bottom: 40px !important;
}

.qrt-mb-30 {
	margin-bottom: 30px !important;
}

.qrt-mb-20 {
	margin-bottom: 20px !important;
}

.qrt-mb-25 {
	margin-bottom: 25px !important;
}

.qrt-mb-10 {
	margin-bottom: 10px !important;
}

.qrt-mb-5 {
	margin-bottom: 5px !important;
}

.qrt-p-40-40 {
	padding-top: 40px;
	padding-bottom: 40px;
}

.qrt-p-0-40 {
	padding-bottom: 40px;
}

.qrt-p-40-0 {
	padding-top: 40px;
}

.qrt-d-none {
	display: none;
}

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

frame

------------------------------ */
body {
	background-color: #1e1f22;
}

.qrt-app {
	position: relative;
	overflow: hidden;
	margin: 10px;
	width: calc(100vw - 20px);
	height: calc(100vh - 20px);
	border-radius: 5px;
	background-color: #1e1f22;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	display: flex;
	justify-content: space-between;
	/* ----- preloader ----- */
	/* ----- top bar ----- */
	/* ----- left bar ----- */
	/* ----- curtain ----- */
	/* ----- content ----- */
	/* ----- cursor ----- */
}
.qrt-app .qrt-preloader {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 5px;
	background-color: #28292c;
	z-index: 9999999999999;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-preloader .qrt-preloader-content {
	width: 200px;
	text-align: center;
	margin-bottom: 60px;
}
.qrt-app .qrt-preloader .qrt-preloader-content .qrt-preloader-load svg path {
	stroke: rgba(255, 255, 255, 0.1);
}
.qrt-app
	.qrt-preloader
	.qrt-preloader-content
	.qrt-preloader-load
	svg
	path:last-child {
	stroke: #ff7043;
}
.qrt-app .qrt-preloader .qrt-preloader-content .qrt-logo {
	width: 200px;
	margin: 0;
	justify-content: center;
	align-content: center;
	align-items: center;
	display: flex;
	flex-direction: column;
}
.qrt-app .qrt-preloader .qrt-preloader-content .qrt-logo img {
	width: 136px;
	filter: brightness(150%);
}
.qrt-app .qrt-preloader .qrt-preloader-content .progressbar-text {
	top: 30px !important;
	color: #f7f8f8 !important;
}
.qrt-app .qrt-top-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 80px;
	width: 100%;
	border-radius: 5px 5px 0 0;
	background-color: #28292c;
	padding: 0 30px 0 100px;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	z-index: 999;
	transform-style: preserve-3d;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* ----- symbol ----- */
	/* ----- logo ----- */
	/* ----- menu ----- */
	/* ----- top bar buttons ----- */
	/* ----- search ----- */
	/* ----- info bar ----- */
}
.qrt-app .qrt-top-bar .qrt-symbol {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	border-radius: 5px 0 0 0;
	background-color: #ff7043;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	display: flex;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-symbol img {
	width: 42px;
	height: 42px;
	object-fit: cover;
	object-position: center;
	transition: 0.4s ease-in-out;
}
.qrt-app .qrt-top-bar .qrt-logo {
	margin-left: 10px;
	width: 80px;
}
.qrt-app .qrt-top-bar .qrt-logo img {
	width: 170%;
	filter: brightness(150%);
}
.qrt-app .qrt-top-bar .qrt-menu {
	height: 80px;
	font-family: "Josefin Sans", sans-serif;
	transition: 0.4s ease-in-out;
	position: relative;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul {
	padding: 0;
	margin: 0;
	display: flex;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li {
	position: relative;
	height: 80px;
	list-style-type: none;
	margin: 0 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li:first-child {
	margin-left: 0;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li:last-child {
	margin-right: 0;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li a {
	text-transform: uppercase;
	color: #f7f8f8;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li:after {
	content: "";
	height: 3px;
	width: 0;
	position: absolute;
	bottom: 0;
	left: -20%;
	background-color: #ff7043;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li.current-menu-item:after {
	content: "";
	width: 135%;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li.qrt-this-page {
	opacity: 0.2;
	pointer-events: none;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li ul {
	pointer-events: none;
	opacity: 0;
	transform: translateY(5px);
	position: absolute;
	top: 80px;
	left: -25px;
	padding: 0 25px;
	background-color: #ff7043;
	min-width: 160px;
	border-radius: 0 0 5px 5px;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	transition: 0.2s ease-in-out;
	display: flex;
	flex-direction: column;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li {
	white-space: nowrap;
	display: inline-block;
	height: auto;
	padding-top: 0;
	margin: 0 0 25px;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li a {
	color: #28292c;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li:first-child {
	margin-top: 20px;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li:after {
	display: none;
}
.qrt-app .qrt-top-bar .qrt-menu nav ul li:hover ul {
	pointer-events: all;
	opacity: 1;
	transform: translateY(0);
}
.qrt-app .qrt-top-bar .qrt-buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-search-btn {
	margin-left: 5px;
	color: white;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-search-btn i {
	font-size: 15px;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn {
	margin-top: 2px;
	padding: 8px 7px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	text-align: center;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:before {
	content: "";
	display: block;
	width: 15px;
	height: 0.15em;
	border-radius: 1px;
	background: #f7f8f8;
	transition: 0.4s ease-in-out;
	backface-visibility: hidden;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span {
	position: relative;
	margin: 5px 0 0;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:before {
	position: absolute;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:before {
	top: -5px;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn span:after {
	top: 5px;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-active span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-active span {
	transform: rotate(45deg);
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-active span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-active span:before {
	transform: translate(0px, 5px) rotate(-90deg);
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-active span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-active span:after {
	transform: translate(0px, -5px) rotate(-90deg);
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn:hover span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn:hover span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn:hover span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn:hover span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn:hover span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn:hover span:before {
	background: white;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-info-btn,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-info-btn {
	transition: 0.4s ease-in-out;
	padding-left: 0;
	padding-right: 0;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-info-btn span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-info-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-info-btn span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-info-btn span,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-info-btn span:after,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-info-btn span:before {
	border-radius: 50%;
	width: 3px;
	height: 3px;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-info-btn.qrt-info-btn.qrt-active span,
.qrt-app
	.qrt-top-bar
	.qrt-buttons
	.qrt-info-btn.qrt-info-btn.qrt-active
	span:after,
.qrt-app
	.qrt-top-bar
	.qrt-buttons
	.qrt-info-btn.qrt-info-btn.qrt-active
	span:before,
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn.qrt-info-btn.qrt-active span,
.qrt-app
	.qrt-top-bar
	.qrt-buttons
	.qrt-menu-btn.qrt-info-btn.qrt-active
	span:after,
.qrt-app
	.qrt-top-bar
	.qrt-buttons
	.qrt-menu-btn.qrt-info-btn.qrt-active
	span:before {
	border-radius: 1px;
	width: 15px;
	height: 0.16em;
}
.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn {
	display: none;
}
.qrt-app .qrt-top-bar .qrt-search {
	border-radius: 5px;
	position: absolute;
	top: 80px;
	left: 80px;
	width: calc(100% - 80px);
	height: 80px;
	padding: 0 20px;
	background-color: white;
	z-index: -2;
	transform: translateZ(-1px) translateY(-100%);
	transition: 0.4s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-search form {
	opacity: 0;
	width: 100%;
	transition: 0.4s ease-in-out;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.qrt-app .qrt-top-bar .qrt-search form input {
	width: 100%;
	height: 40px;
	border-radius: 30px;
	background-color: transparent;
	border: none;
	font-size: 14px;
	padding: 0 20px;
	color: #28292c;
	background-color: #cacdd2;
}
.qrt-app .qrt-top-bar .qrt-search form input:focus {
	outline: inherit;
}
.qrt-app .qrt-top-bar .qrt-search form input::placeholder {
	font-size: 14px;
	font-family: "Josefin Sans", sans-serif;
	color: #28292c;
	opacity: 0.3;
}
.qrt-app .qrt-top-bar .qrt-search.qrt-active {
	transform: translateZ(-1px) translateY(0);
	border-radius: 0 0 5px 5px;
}
.qrt-app .qrt-top-bar .qrt-search.qrt-active form {
	opacity: 1;
}
.qrt-app .qrt-top-bar .qrt-info {
	overflow: scroll;
	position: absolute;
	top: 80px;
	right: 0;
	width: 350px;
	height: calc(100vh - 100px);
	background-color: #f7f8f8;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	z-index: -1;
	transform: translateZ(-1px) translateX(100%);
	transition: 0.4s ease-in-out;
}
.qrt-app .qrt-top-bar .qrt-info.qrt-active {
	transform: translateZ(-1px) translateX(0);
}
.qrt-app .qrt-top-bar .qrt-info .qrt-info-frame {
	padding: 40px;
	width: 100%;
	height: 100%;
}
.qrt-app .qrt-left-bar {
	position: relative;
	z-index: 9;
	width: 80px;
	height: 100%;
	border-radius: 5px 0 0 5px;
	background-color: #28292c;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
}
.qrt-app .qrt-left-bar .qrt-current-page-title {
	pointer-events: none;
	text-align: right;
	position: absolute;
	bottom: calc(100vh - 285px);
	left: -111px;
	height: 90px;
	width: 300px;
	font-family: "Josefin Sans", sans-serif;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 800;
	transform: rotate(-90deg);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.qrt-app .qrt-left-bar .qrt-current-page-title a {
	display: none;
	color: #f7f8f8;
	pointer-events: none;
}
.qrt-app .qrt-left-bar .qrt-current-page-title a:first-child {
	display: block;
}
.qrt-app .qrt-left-bar .qrt-change-language {
	position: absolute;
	bottom: 40px;
	width: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.qrt-app .qrt-left-bar .qrt-change-language .qrt-social-icons {
	background: #ff7043;
	color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin: 4px 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	justify-content: center;
}
.qrt-app .qrt-left-bar .qrt-change-language .qrt-leng {
	width: 30px;
	height: 30px;
	margin-bottom: 10px;
	text-transform: uppercase;
	font-size: 10px;
	padding-left: 2px;
	padding-top: 2px;
	font-family: "Josefin Sans", sans-serif;
	letter-spacing: 2px;
	font-weight: 800;
	border-radius: 50%;
	color: #f7f8f8;
	transition: 0.4s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
}
.qrt-app .qrt-left-bar .qrt-change-language .qrt-leng:last-child {
	margin-bottom: 0;
}
.qrt-app .qrt-left-bar .qrt-change-language .qrt-leng.qrt-active {
	background-color: #ff7043;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	color: #28292c;
}
.qrt-app .qrt-curtain {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background-color: rgba(40, 41, 44, 0.3);
	opacity: 0;
	pointer-events: none;
	width: 100vw;
	height: 100vh;
	transition: 0.4s ease-in-out;
}
.qrt-app .qrt-curtain.qrt-active {
	opacity: 1;
	pointer-events: all;
}
.qrt-app .qrt-content {
	position: relative;
	top: 80px;
	width: calc(100vw - 100px);
	height: calc(100vh - 100px);
}
/* .qrt-app .qrt-content .scroll-content {
	height: 100%;
} */
.qrt-app .qrt-content .qrt-content-frame {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	padding: 40px;
	background-color: #f7f8f8;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
}
/* .qrt-app .qrt-content .qrt-content-frame .qrt-left {
	position: relative;
	height: 100%;
} */
.qrt-app .qrt-content .qrt-half-content-frame {
	width: 100%;
	position: relative;
	top: 0;
	background-color: #f7f8f8;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	display: flex;
}
.qrt-app .qrt-content .qrt-half-content-frame .qrt-left {
	width: calc(100% - 480px);
	min-height: calc(100vh - 100px);
	padding: 40px;
	position: relative;
	overflow: hidden;
}
.qrt-app .qrt-content .qrt-half-content-frame .qrt-right {
	margin-left: auto;
	position: fixed;
	right: 0;
	width: 480px;
	height: calc(100vh - 100px);
}
.qrt-app .qrt-cursor {
	z-index: 999999;
	position: fixed;
	left: 0;
	top: 0;
	pointer-events: none;
	will-change: transform;
	width: 30px;
	height: 30px;
}
.qrt-app .qrt-cursor .qrt-follower {
	margin-top: 3px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	opacity: 0.2;
}
.qrt-app .qrt-cursor .qrt-follower i {
	opacity: 0;
}

/* ----- frame (after 1200px) ----- */
@media (max-width: 1200px) {
	.qrt-app .qrt-content .qrt-half-content-frame {
		flex-direction: column-reverse;
	}
	.qrt-app .qrt-content .qrt-half-content-frame .qrt-left {
		width: 100%;
	}
	.qrt-app .qrt-content .qrt-half-content-frame .qrt-right {
		position: relative;
		height: 300px;
		width: 100%;
	}
}
/* ----- frame (after 992px) ----- */
@media (max-width: 992px) {
	.qrt-app .qrt-top-bar .qrt-buttons .qrt-send-request {
		display: none;
	}
}
/* ----- frame (after 768px) ----- */
@media (max-width: 768px) {
	.qrt-app {
		margin: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}
	.qrt-app .qrt-preloader {
		border-radius: 0;
	}
	.qrt-app .qrt-top-bar {
		border-radius: 0;
		padding-right: 20px;
	}
	.qrt-app .qrt-top-bar .qrt-symbol {
		border-radius: 0;
	}
	.qrt-app .qrt-top-bar .qrt-logo {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
	}
	.qrt-app .qrt-top-bar .qrt-menu {
		position: absolute;
		top: 80px;
		left: 0;
		height: auto;
		width: 100%;
		background-color: #28292c;
		padding: 40px 20px;
		transform: translateZ(-1px) translateY(-100%);
	}
	.qrt-app .qrt-top-bar .qrt-menu nav {
		width: 100%;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul {
		opacity: 0;
		transition: 0.4s ease-in-out;
		flex-direction: column;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li {
		height: auto;
		margin: 0 0 20px;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li:last-child {
		margin-bottom: 0;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li a {
		color: white;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li ul {
		border-radius: 5px;
		position: static;
		min-width: 100%;
		max-width: 100%;
		max-height: 0;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li {
		display: flex;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li a {
		color: #28292c;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li ul li:last-child {
		margin-bottom: 20px;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li.current-menu-item:after {
		display: none;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li.current-menu-item a {
		color: #ff7043;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li.current-menu-item ul li a {
		color: #28292c;
	}
	.qrt-app .qrt-top-bar .qrt-menu nav ul li:hover ul {
		margin-top: 20px;
		max-height: 500px;
		transform: translateY(0);
	}
	.qrt-app .qrt-top-bar .qrt-menu.qrt-active {
		transform: translateZ(-1px) translateY(0);
	}
	.qrt-app .qrt-top-bar .qrt-menu.qrt-active ul {
		opacity: 1;
		transition: 0.4s ease-in-out;
	}
	.qrt-app .qrt-top-bar .qrt-menu.qrt-active ul li ul {
		opacity: 0;
		transition: 0.4s ease-in-out;
	}
	.qrt-app .qrt-top-bar .qrt-buttons .qrt-menu-btn {
		display: flex;
	}
	.qrt-app .qrt-top-bar .qrt-info {
		height: calc(100vh - 80px);
		width: calc(100vw - 80px);
	}
	.qrt-app .qrt-top-bar .qrt-info .qrt-info-frame {
		padding: 40px 20px;
	}
	.qrt-app .qrt-top-bar .qrt-search {
		width: 100%;
		left: 0;
	}
	.qrt-app .qrt-top-bar .qrt-search.qrt-active {
		border-radius: 0;
	}
	.qrt-app .qrt-content {
		position: relative;
		width: 100vw;
		height: calc(100vh - 80px);
	}
	.qrt-app .qrt-content .qrt-content-frame {
		padding: 20px;
	}
	.qrt-app .qrt-content .qrt-half-content-frame .qrt-left {
		padding: 40px 20px 20px;
	}
	.qrt-app .qrt-left-bar {
		display: none;
	}
	.qrt-app .qrt-cursor {
		display: none;
	}
}
/* ----- frame (after 430px) ----- */
@media (max-width: 430px) {
	.qrt-app .qrt-top-bar .qrt-info {
		width: 100vw;
	}
}
/* ----- half banner ----- */
.qrt-half-banner {
	width: 100%;
	height: 100%;
	top: 0;
	position: relative;
	overflow: hidden;
	background-color: #28292c;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
}
.qrt-half-banner .qrt-image-frame {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.qrt-half-banner .qrt-video-background {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-half-banner.qrt-animated-zoom .qrt-image-frame {
	animation: zoom 20s linear infinite;
}
.qrt-half-banner.qrt-animated-show .qrt-image-frame img {
	animation: show 60s linear infinite;
}
.qrt-half-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-half-banner .qrt-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40px;
	background-color: rgba(20, 21, 24, 0.5);
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
}
.qrt-half-banner .qrt-overlay .qrt-banner-title {
	text-align: right;
}
.qrt-half-banner .qrt-overlay .qrt-banner-title .qrt-divider-2 {
	margin-left: auto;
}
.qrt-half-banner.qrt-left-align .qrt-overlay .qrt-scroll-hint {
	left: 40px;
}
.qrt-half-banner.qrt-left-align .qrt-banner-title {
	text-align: left;
}
.qrt-half-banner.qrt-left-align .qrt-banner-title .qrt-divider-2 {
	margin-right: auto;
	margin-left: 0;
}

.qrt-scroll-hint {
	position: absolute;
	top: 40px;
	right: 40px;
}
.qrt-scroll-hint span {
	display: block;
	position: relative;
	width: 25px;
	height: 40px;
	border-radius: 15px;
	border: solid 2px #ff7043;
}
.qrt-scroll-hint span:before {
	content: "Scroll Down";
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 10px;
	width: 100px;
	text-align: right;
	position: absolute;
	bottom: -75px;
	right: -38px;
	color: #fff;
	transform: rotate(90deg);
}
.qrt-scroll-hint span:after {
	content: "";
	width: 3px;
	height: 3px;
	background-color: #ff7043;
	border-radius: 50%;
	position: absolute;
	top: 10px;
	left: 45%;
	animation: mouse 1s ease-in-out infinite;
}

.qrt-hint-frame {
	bottom: 0;
	right: 0;
	position: absolute;
	background-color: #28292c;
	height: 240px;
	width: 90px;
}
.qrt-hint-frame.qrt-left {
	left: 0;
	right: auto;
}
.qrt-hint-frame .qrt-scroll-hint {
	position: absolute;
	top: 40px;
	right: 33px;
}
.qrt-hint-frame .qrt-scroll-hint span {
	display: block;
	position: relative;
	width: 25px;
	height: 40px;
	border-radius: 15px;
	border: solid 2px #ff7043;
}

/* ----- half banner (after 1200px) ----- */
@media (max-width: 1200px) {
	.qrt-half-banner .qrt-overlay {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}
	.qrt-half-banner .qrt-overlay .qrt-banner-title {
		position: relative;
		width: 100%;
		text-align: center;
	}
	.qrt-half-banner .qrt-overlay .qrt-banner-title .qrt-divider-2 {
		margin: 0 auto 20px;
	}
}
/* ----- half banner (after 768px) ----- */
@media (max-width: 768px) {
	.qrt-half-banner .qrt-overlay .qrt-scroll-hint {
		display: none;
	}
}
/* ----- main banner ----- */
.qrt-banner {
	background-color: #28292c;
	overflow: hidden;
	width: 100%;
	position: relative;
	height: calc(100vh - 100px);
}
.qrt-banner .qrt-image-frame {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.qrt-banner.qrt-animated-zoom .qrt-image-frame {
	animation: zoom 20s linear infinite;
}
.qrt-banner.qrt-animated-show .qrt-image-frame {
	animation: show 60s linear infinite;
}
.qrt-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-banner .qrt-video-background {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	z-index: 0;
}
.qrt-banner .qrt-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40px;
	background-color: rgba(40, 41, 44, 0.6);
	display: flex;
	align-items: center;
}
.qrt-banner .qrt-overlay .qrt-banner-title {
	width: 80%;
	margin: 0 auto;
	position: relative;
}
.qrt-banner .qrt-overlay .qrt-banner-title .qrt-text {
	max-width: 500px;
}

/* ----- main banner (after 768px) ----- */
@media (max-width: 768px) {
	.qrt-banner {
		height: calc(100vh - 80px);
	}
	.qrt-banner .qrt-overlay {
		padding: 20px;
	}
	.qrt-banner .qrt-overlay .qrt-banner-title {
		text-align: center;
		margin: 0;
		width: 100%;
	}
	.qrt-banner .qrt-overlay .qrt-banner-title .qrt-divider-2 {
		margin: 0 auto 20px;
	}
	.qrt-banner .qrt-overlay .qrt-banner-title .qrt-text {
		margin: 0 auto;
		display: block;
	}
}
/* ----- main slider ----- */
.qrt-main-slider,
.qrt-main-slider-onepage {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: calc(100vh - 100px);
	background-color: #28292c;
}
.qrt-main-slider .qrt-project-cover,
.qrt-main-slider-onepage .qrt-project-cover {
	position: relative;
	overflow: hidden;
	height: 100%;
	width: calc(100vw - 100px);
}
.qrt-main-slider .qrt-project-cover .qrt-image-frame,
.qrt-main-slider-onepage .qrt-project-cover .qrt-image-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.qrt-main-slider .qrt-project-cover .qrt-video-background,
.qrt-main-slider-onepage .qrt-project-cover .qrt-video-background {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	object-fit: cover;
	z-index: 0;
}
.qrt-main-slider .qrt-project-cover img,
.qrt-main-slider-onepage .qrt-project-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.qrt-main-slider .qrt-project-cover .qrt-overlay,
.qrt-main-slider-onepage .qrt-project-cover .qrt-overlay {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 40px;
	background-color: rgba(40, 41, 44, 0.6);
	display: flex;
	align-items: center;
}
.qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-parallax-fix,
.qrt-main-slider-onepage .qrt-project-cover .qrt-overlay .qrt-parallax-fix {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}
.qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-banner-title,
.qrt-main-slider-onepage .qrt-project-cover .qrt-overlay .qrt-banner-title {
	width: 80%;
	margin: 0 auto;
	position: relative;
}
.qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-banner-title .qrt-text,
.qrt-main-slider-onepage
	.qrt-project-cover
	.qrt-overlay
	.qrt-banner-title
	.qrt-text {
	max-width: 400px;
}

.qrt-slider-navigation {
	width: 350px;
	display: flex;
}
.qrt-slider-navigation.qrt-absolute {
	position: absolute;
	z-index: 999;
	right: 0;
	bottom: 0;
}
.qrt-slider-navigation .qrt-slider-nav-btn {
	position: relative;
	overflow: hidden;
	background-color: #28292c;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	height: 70px;
	cursor: pointer;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 600;
	color: #f7f8f8;
	transition: 0.4s ease-in-out;
}
.qrt-slider-navigation .qrt-slider-nav-btn span {
	transition: 0.4s ease-in-out;
	opacity: 1;
}
.qrt-slider-navigation .qrt-slider-nav-btn:focus {
	outline: inherit;
}
.qrt-slider-navigation .qrt-slider-nav-btn:after {
	color: #f7f8f8;
	transition: 0.4s ease-in-out;
	content: "";
	transform: translateY(1px);
}
.qrt-slider-navigation .qrt-slider-nav-btn:before {
	color: #f7f8f8;
	transition: 0.4s ease-in-out;
	content: "";
	transform: translateY(1px);
}
.qrt-slider-navigation .qrt-slider-nav-btn.qrt-main-prev:hover i {
	transform: translateX(-5px);
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-prev.swiper-button-disabled {
	pointer-events: none;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-prev.swiper-button-disabled:after {
	content: "first";
	margin-right: 10px;
	opacity: 0.3;
	transition: 0.4s ease-in-out;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-prev.swiper-button-disabled
	span {
	opacity: 0;
	width: 0;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-prev.swiper-button-disabled
	i {
	transform: translateX(-40px);
	opacity: 0;
}
.qrt-slider-navigation .qrt-slider-nav-btn.qrt-main-next:hover i {
	transform: translateX(5px);
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-next.swiper-button-disabled {
	pointer-events: none;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-next.swiper-button-disabled:before {
	content: "last";
	margin-left: 10px;
	opacity: 0.3;
	transition: 0.4s ease-in-out;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-next.swiper-button-disabled
	span {
	display: none;
}
.qrt-slider-navigation
	.qrt-slider-nav-btn.qrt-main-next.swiper-button-disabled
	i {
	transform: translateX(40px);
	opacity: 0;
}
.qrt-slider-navigation .qrt-slider-nav-btn span {
	transform: translateY(1px);
	margin: 0 5px;
	position: relative;
	overflow: hidden;
	transition: 0.4s ease-in-out;
}
.qrt-slider-navigation .qrt-slider-nav-btn i {
	margin: 0 5px;
	font-size: 8px;
	transition: 0.4s ease-in-out;
}

.qrt-slider-pagination {
	position: absolute;
	z-index: 9999;
	width: 100%;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
}
.qrt-slider-pagination .swiper-main-pagination {
	height: 3px;
	position: relative;
	width: 100%;
	background-color: rgba(255, 255, 255, 0.3);
}
.qrt-slider-pagination
	.swiper-main-pagination
	.swiper-pagination-progressbar-fill {
	height: 100%;
	background-color: #ff7043;
}

/* ----- main slider (after 768px) ----- */
@media (max-width: 768px) {
	.qrt-main-slider,
	.qrt-main-slider-onepage {
		height: calc(100vh - 80px);
	}
	.qrt-main-slider .qrt-project-cover,
	.qrt-main-slider-onepage .qrt-project-cover {
		width: 100vw;
	}
	.qrt-main-slider .qrt-project-cover .qrt-overlay,
	.qrt-main-slider-onepage .qrt-project-cover .qrt-overlay {
		padding: 20px;
	}
	.qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-banner-title,
	.qrt-main-slider-onepage .qrt-project-cover .qrt-overlay .qrt-banner-title {
		margin-bottom: 70px;
		width: 100%;
		text-align: center;
	}
	.qrt-main-slider
		.qrt-project-cover
		.qrt-overlay
		.qrt-banner-title
		.qrt-divider-2,
	.qrt-main-slider-onepage
		.qrt-project-cover
		.qrt-overlay
		.qrt-banner-title
		.qrt-divider-2 {
		margin: 0 auto 20px;
	}
	.qrt-main-slider .qrt-project-cover .qrt-overlay .qrt-banner-title .qrt-text,
	.qrt-main-slider-onepage
		.qrt-project-cover
		.qrt-overlay
		.qrt-banner-title
		.qrt-text {
		margin: 0 auto;
		display: block;
	}

	.qrt-slider-navigation {
		width: 100%;
	}
}
/* ----- animations ----- */
@keyframes zoom {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes show {
	0% {
		object-position: center;
	}
	50% {
		object-position: left;
	}
	100% {
		object-position: right;
	}
}
@keyframes mouse {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(0);
	}
}
/* ----- menu in animation ----- */
.qrt-app .qrt-top-bar .qrt-menu .qrt-dynamic-menu {
	pointer-events: all;
	opacity: 1;
	transition: 0.4s ease-in-out;
}
.qrt-app
	.qrt-top-bar
	.qrt-menu
	.qrt-dynamic-menu
	nav
	ul
	li.current-menu-item:after {
	content: "";
	width: 135%;
	transition: 0.4s ease-in-out;
}

/* ----- menu out animation ----- */
html.is-animating .qrt-app .qrt-top-bar .qrt-menu .qrt-dynamic-menu {
	pointer-events: none;
	opacity: 0.999;
	transition: 0.4s ease-in-out;
}
html.is-animating
	.qrt-app
	.qrt-top-bar
	.qrt-menu
	.qrt-dynamic-menu
	nav
	ul
	li.current-menu-item:after {
	content: "";
	width: 0;
}
html.is-animating
	.qrt-app
	.qrt-top-bar
	.qrt-menu
	.qrt-dynamic-menu
	nav
	ul
	li
	ul {
	opacity: 0;
	transform: translateY(10px);
	transition: 0.4s ease-in-out;
}

/* ----- content in animation ----- */
.qrt-dynamic-content {
	pointer-events: all;
	position: relative;
	opacity: 1;
	transition: 0.4s ease-in-out;
}
.qrt-dynamic-content .qrt-banner,
.qrt-dynamic-content .qrt-half-banner {
	transform: translateY(0);
	transition: 0.4s ease-in-out;
}
.qrt-dynamic-content .qrt-banner .qrt-video-background,
.qrt-dynamic-content .qrt-banner img,
.qrt-dynamic-content .qrt-half-banner .qrt-video-background,
.qrt-dynamic-content .qrt-half-banner img {
	transform: translateX(0);
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
.qrt-dynamic-content .qrt-banner .qrt-overlay .qrt-scroll-hint,
.qrt-dynamic-content .qrt-half-banner .qrt-overlay .qrt-scroll-hint {
	opacity: 1;
	transition: 0.4s ease-in-out;
	transition-delay: 0.8s;
}
.qrt-dynamic-content .qrt-banner .qrt-overlay .qrt-banner-title,
.qrt-dynamic-content .qrt-half-banner .qrt-overlay .qrt-banner-title {
	opacity: 1;
	transition: 0.4s ease-in-out;
	transition-delay: 0.8s;
}
.qrt-dynamic-content .qrt-slider-navigation {
	transform: translateY(0);
	transition: 0.4s ease-in-out;
	transition-delay: 0.8s;
}
.qrt-dynamic-content .qrt-main-slider,
.qrt-dynamic-content .qrt-main-slider-onepage {
	transform: translateY(0);
	transition: 0.4s ease-in-out;
}
.qrt-dynamic-content .qrt-main-slider .qrt-project-cover .video-background,
.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.video-background {
	transform: translateX(0);
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
.qrt-dynamic-content .qrt-main-slider .qrt-project-cover .qrt-image-frame,
.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.qrt-image-frame {
	transform: translateX(0);
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
.qrt-dynamic-content
	.qrt-main-slider
	.qrt-project-cover
	.qrt-overlay
	.qrt-banner-title,
.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.qrt-overlay
	.qrt-banner-title {
	opacity: 1;
	transition: 0.4s ease-in-out;
	transition-delay: 0.8s;
}
.qrt-dynamic-content .qrt-map-frame {
	transform: translateY(0);
	transition: 0.4s ease-in-out;
}
.qrt-dynamic-content .qrt-map-frame .qrt-map {
	opacity: 1;
	transform: scale(1);
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
.qrt-dynamic-content .qrt-about-me-cover,
.qrt-dynamic-content .qrt-page-cover {
	width: 100%;
	transition: 0.4s ease-in-out;
}
.qrt-dynamic-content .qrt-about-me-cover img,
.qrt-dynamic-content .qrt-page-cover img {
	opacity: 1;
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}
.qrt-dynamic-content .qrt-about-me-cover .qrt-about-info,
.qrt-dynamic-content .qrt-about-me-cover .qrt-hint-frame,
.qrt-dynamic-content .qrt-page-cover .qrt-about-info,
.qrt-dynamic-content .qrt-page-cover .qrt-hint-frame {
	transform: translateY(0);
	transition: 0.4s ease-in-out;
	transition-delay: 0.6s;
}

.qrt-app .qrt-left-bar .qrt-current-page-title {
	padding-right: 40px;
	opacity: 1;
	letter-spacing: 2px;
	transition: 0.4s ease-in-out;
}
.qrt-member-name {
	color: darkgray;
}
/* ----- content out animation ----- */
html.is-animating .qrt-dynamic-content {
	opacity: 0;
	transition: 0.4s ease-in-out;
	transition-delay: 1s;
}
html.is-animating .qrt-dynamic-content .qrt-banner,
html.is-animating .qrt-dynamic-content .qrt-half-banner {
	transform: translateY(-100%);
	transition-delay: 0.8s;
}
html.is-animating .qrt-dynamic-content .qrt-banner .qrt-video-background,
html.is-animating .qrt-dynamic-content .qrt-banner img,
html.is-animating .qrt-dynamic-content .qrt-half-banner .qrt-video-background,
html.is-animating .qrt-dynamic-content .qrt-half-banner img {
	transform: translateX(-100%);
	transition-delay: 0.4s;
}
html.is-animating
	.qrt-dynamic-content
	.qrt-banner
	.qrt-overlay
	.qrt-scroll-hint,
html.is-animating
	.qrt-dynamic-content
	.qrt-half-banner
	.qrt-overlay
	.qrt-scroll-hint {
	opacity: 0;
	transition-delay: 0s;
}
html.is-animating
	.qrt-dynamic-content
	.qrt-banner
	.qrt-overlay
	.qrt-banner-title,
html.is-animating
	.qrt-dynamic-content
	.qrt-half-banner
	.qrt-overlay
	.qrt-banner-title {
	opacity: 0;
	transition-delay: 0s;
}
html.is-animating .qrt-dynamic-content .qrt-slider-navigation {
	transform: translateY(100%);
	transition-delay: 0s;
}
html.is-animating .qrt-dynamic-content .qrt-main-slider,
html.is-animating .qrt-dynamic-content .qrt-main-slider-onepage {
	transform: translateY(-100%);
	transition-delay: 0.8s;
}
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider
	.qrt-project-cover
	.video-background,
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.video-background {
	transform: translateX(-100%);
	transition-delay: 0.4s;
}
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider
	.qrt-project-cover
	.qrt-image-frame,
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.qrt-image-frame {
	transform: translateX(-100%);
	transition-delay: 0.4s;
}
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider
	.qrt-project-cover
	.qrt-overlay
	.qrt-banner-title,
html.is-animating
	.qrt-dynamic-content
	.qrt-main-slider-onepage
	.qrt-project-cover
	.qrt-overlay
	.qrt-banner-title {
	opacity: 0;
	transition-delay: 0s;
}
html.is-animating .qrt-dynamic-content .qrt-map-frame {
	transform: translateY(-100%);
	transition-delay: 0.8s;
}
html.is-animating .qrt-dynamic-content .qrt-map-frame .qrt-map {
	opacity: 0;
	transform: scale(0.5);
	transition-delay: 0s;
}
html.is-animating .qrt-dynamic-content .qrt-about-me-cover,
html.is-animating .qrt-dynamic-content .qrt-page-cover {
	width: 0;
	transition-delay: 0.8s;
}
html.is-animating .qrt-dynamic-content .qrt-about-me-cover img,
html.is-animating .qrt-dynamic-content .qrt-page-cover img {
	opacity: 0;
}
html.is-animating .qrt-dynamic-content .qrt-about-me-cover .qrt-about-info,
html.is-animating .qrt-dynamic-content .qrt-about-me-cover .qrt-hint-frame,
html.is-animating .qrt-dynamic-content .qrt-page-cover .qrt-about-info,
html.is-animating .qrt-dynamic-content .qrt-page-cover .qrt-hint-frame {
	transform: translateY(100%);
	transition-delay: 0s;
}

html.is-animating .qrt-app .qrt-left-bar .qrt-current-page-title {
	padding-right: 50px;
	opacity: 0;
	letter-spacing: 6px;
	transition: 0.4s ease-in-out;
	transition-delay: 0.4s;
}

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

content

------------------------------ */
/* ----- cover ----- */
.qrt-page-cover {
	overflow: hidden;
	background-color: #dee1e6;
	position: relative;
	/* padding-bottom: 55%;  */
}
.qrt-page-cover img {
	/* position: absolute;
    top: 0;
    left: 0; */
	object-fit: cover;
	object-position: bottom;
	width: 100%;
	max-height: 600px;
	/* height: 100%;  */
}
.qrt-page-cover .title {
	position: absolute;
	bottom: 0;
	left: 40px;
	color: white;
}
.qrt-page-cover .shadow {
	position: absolute;
	bottom: 0;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0);
	background: linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.7763480392156863) 0%,
		rgba(255, 255, 255, 0) 40%
	);
}
.qrt-page-cover.qrt-cover-center img {
	object-position: center;
}
.qrt-page-cover .qrt-about-info {
	padding: 20px;
	width: 300px;
	background-color: #28292c;
	position: absolute;
	left: 0;
	bottom: 0;
}
.qrt-page-cover .qrt-about-info.qrt-info-lg {
	width: 450px;
	left: auto;
	right: 0;
}
.qrt-page-cover .qrt-about-info.qrt-right-position {
	right: 0;
	left: auto;
}
.qrt-page-cover .qrt-about-info .qrt-table li span {
	transform: translateY(-1px);
	color: white;
	opacity: 0.6;
}

.qrt-about-me-cover {
	overflow: hidden;
	position: relative;
	background-color: #dee1e6;
	padding-bottom: 105%;
	margin-bottom: 40px;
}
.qrt-about-me-cover img {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	object-position: center;
	top: 0;
	left: 0;
}

.qrt-member-about {
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.qrt-page-cover {
		padding-bottom: 135px;
	}
	.qrt-page-cover img {
		height: calc(100% - 80px);
	}
	.qrt-page-cover .qrt-hint-frame {
		display: none;
	}
	.qrt-page-cover .qrt-about-info,
	.qrt-page-cover .qrt-about-info.qrt-info-lg {
		width: 100%;
	}

	.qrt-member-about .qrt-hint-frame {
		display: none;
	}
}
/* ----- counter up ----- */
.qrt-counter-frame {
	margin-bottom: 40px;
}
.qrt-counter-frame .qrt-counter-box .qrt-counter {
	display: block;
	font-size: 22px;
	font-weight: 800;
	margin-bottom: 10px;
	color: #28292c;
}

/* ----- team ----- */
.qrt-team-member {
	position: relative;
	overflow: hidden;
	margin-bottom: 40px;
}
.qrt-team-member .qrt-team-item {
	width: 100%;
	display: block;
	position: relative;
	padding-bottom: 105%;
	filter: brightness(95%);
	transition: 0.4s ease-in-out;
}
.qrt-team-member .qrt-team-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-team-member .qrt-team-item:hover {
	filter: brightness(105%);
}
.qrt-team-member .qrt-team-member-description {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #28292c;
	padding: 15px 20px;
}
.qrt-team-member .qrt-team-member-description .qrt-member-more {
	background-color: #ff7043;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #28292c;
}

/* ----- prices ----- */
.qrt-price {
	overflow: hidden;
	position: relative;
	background-size: cover;
	background: white;
	text-align: center;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	margin-bottom: 40px;
	transition: 0.4s ease-in-out;
}
.qrt-price.qrt-popular-price {
	transform: scale(1.03);
}
.qrt-price.qrt-popular-price:before {
	font-size: 9px;
	position: absolute;
	transform: rotate(45deg);
	z-index: 99;
	top: 15px;
	font-weight: 600;
	color: #28292c;
	right: -78px;
	content: "POPULAR";
	padding: 2px 0 1px;
	width: 200px;
	text-align: center;
	background: #ff7043;
}
.qrt-price .qrt-price-body {
	position: relative;
	padding: 20px;
}
.qrt-price .qrt-price-body .qrt-asterisk {
	position: absolute;
	width: 100%;
	bottom: 4px;
	left: 0;
	text-align: center;
	font-size: 8px;
	opacity: 0.4;
}
.qrt-price .qrt-price-body .qrt-price-cost {
	position: relative;
	display: inline-flex;
	justify-content: center;
	margin-bottom: 20px;
	padding: 0 10px;
}
.qrt-price .qrt-price-body .qrt-price-cost .qrt-number {
	font-size: 36px;
	color: #28292c;
	font-weight: 800;
	margin-bottom: 0;
}
.qrt-price .qrt-price-body .qrt-price-cost .qrt-number span {
	color: #28292c;
	font-size: 12px;
	padding: 0 5px;
	opacity: 0.6;
}
.qrt-price .qrt-price-body .qrt-price-cost .qrt-number sup {
	font-size: 18px;
	position: absolute;
	top: 10px;
	right: 0;
}
.qrt-price .qrt-price-body .qrt-price-list {
	padding: 0;
	margin: 0 0 30px;
}
.qrt-price .qrt-price-body .qrt-price-list li {
	list-style-type: none;
	margin-bottom: 15px;
}
.qrt-price .qrt-price-body .qrt-price-list li:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	margin-right: 5px;
	font-size: 9px;
	color: #ff7043;
}
.qrt-price .qrt-price-body .qrt-price-list li.qrt-empty-item {
	opacity: 0.3;
}
.qrt-price .qrt-price-body .qrt-price-list li.qrt-empty-item:before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00d";
	margin-right: 5px;
	font-size: 9px;
	color: #ff7043;
}

/* ----- timeline ----- */
.qrt-timeline {
	position: relative;
}
.qrt-timeline::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 0;
	height: calc(100% - 5px);
	width: 1px;
	background: #dee1e6;
}
.qrt-timeline .qrt-timeline-item {
	position: relative;
}
.qrt-timeline .qrt-timeline-item .qrt-timeline-mark {
	position: absolute;
	top: 6px;
	left: -6px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: solid 3px #ff7043;
	background: white;
}
.qrt-timeline .qrt-timeline-item:hover .qrt-timeline-mark-light {
	animation: puls 1s infinite;
}
.qrt-timeline .qrt-timeline-item .qrt-timeline-content {
	position: relative;
	margin-left: 30px;
	margin-bottom: 40px;
}
.qrt-timeline .qrt-timeline-item .qrt-timeline-content .qrt-card-header {
	width: 100%;
}
.qrt-timeline
	.qrt-timeline-item
	.qrt-timeline-content
	.qrt-card-header
	.qrt-date {
	border-radius: 2px;
	position: relative;
	display: inline-block;
	color: #dee1e6;
	margin-left: auto;
	background: #28292c;
	padding: 4px 15px;
	font-size: 10px;
}
.qrt-timeline
	.qrt-timeline-item
	.qrt-timeline-content
	.qrt-card-header
	.qrt-date::before {
	content: "";
	position: absolute;
	top: 7px;
	left: -4px;
	height: 8px;
	width: 8px;
	background: #28292c;
	transform: rotate(45deg);
}
.qrt-timeline
	.qrt-timeline-item
	.qrt-timeline-content
	.qrt-card-header
	.qrt-el-suptitle {
	font-style: italic;
	font-size: 12px;
	margin-bottom: 20px;
}
.qrt-timeline .qrt-timeline-item:last-child .qrt-timeline-content {
	margin-bottom: 0;
}

/* ----- testimonials ----- */
.qrt-testimonial {
	position: relative;
	margin-bottom: 20px;
}
.qrt-testimonial:after {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f10d";
	font-size: 16px;
	opacity: 0.6;
	color: #eee;
	top: 15px;
	right: 20px;
	transform: rotate(180deg);
}
.qrt-testimonial .qrt-testimonial-header {
	display: flex;
	margin-bottom: 20px;
	align-items: center;
}
.qrt-testimonial .qrt-testimonial-header img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}
.qrt-testimonial .qrt-testimonial-header .qrt-testimonial-name {
	padding-left: 15px;
}
.qrt-testimonial .qrt-stars {
	background-color: #28292c;
	border-radius: 10px;
	padding: 0;
	margin: 0;
	padding: 3px 10px;
	display: inline-flex;
	margin-top: 20px;
}
.qrt-testimonial .qrt-stars li {
	padding: 0 2px;
	list-style-type: none;
}
.qrt-testimonial .qrt-stars li i {
	font-size: 10px;
	color: #ff7043;
}
.qrt-testimonial .qrt-stars li.qrt-empty i {
	color: white;
	opacity: 0.3;
}

/* ----- brands ----- */
.qrt-brands-slider {
	margin-bottom: 40px;
	pointer-events: none;
}
.qrt-brands-slider .swiper-slide img {
	width: 90px;
	margin-left: auto;
	margin-right: auto;
}

/* ----- call to action ----- */
.qrt-call-to-action {
	padding: 20px 40px;
	background-color: #28292c;
	display: flex;
	height: 80px;
	align-items: center;
	justify-content: space-between;
}
.qrt-call-to-action h4 {
	color: white;
	margin-right: 80px;
}
.qrt-call-to-action.qrt-call-to-action-white {
	background-color: white;
}
.qrt-call-to-action.qrt-call-to-action-white h4 {
	color: #28292c;
}

@media (max-width: 768px) {
	.qrt-call-to-action {
		flex-direction: column;
		height: auto;
		padding: 40px;
	}
	.qrt-call-to-action h4 {
		margin-right: 0;
		margin-bottom: 40px;
		font-size: 22px;
	}
	.qrt-call-to-action.qrt-call-to-action-white {
		background-color: white;
	}
	.qrt-call-to-action.qrt-call-to-action-white h4 {
		color: #28292c;
	}
}
/* ----- icon box ----- */
.qrt-icon-box {
	margin-bottom: 40px;
}
.qrt-icon-box img {
	width: 50px;
	margin-bottom: 20px;
}
.qrt-icon-box h4 {
	margin-bottom: 20px;
}

/* ----- contact ----- */
.qrt-form-field input,
.qrt-form-field textarea {
	height: 50px;
	width: 100%;
	background: white;
	border: none;
	color: #28292c;
	font-size: 14px;
	padding-left: 65px;
	padding-right: 15px;
	box-shadow: 0 1px 2px 0 rgba(45, 45, 60, 0.1);
	margin-bottom: 0;
	transition: 0.4s ease-in-out;
}

::placeholder {
	font-size: 14px;
	color: #28292c;
	letter-spacing: 2px;
}

.qrt-form-field textarea {
	padding-left: 15px;
	padding-top: 15px;
	height: 150px;
	border-left: solid 50px white;
}
.qrt-form-field textarea.qrt-active {
	border-color: #ff7043;
}
.qrt-form-field textarea:focus {
	border-color: #ff7043;
}

.qrt-contact-form .qrt-input:focus {
	outline: none;
}

.qrt-contact-form .qrt-input.qrt-active + label,
.qrt-contact-form .qrt-input:focus + label {
	background: #ff7043;
	color: #28292c;
}

.qrt-form-field {
	position: relative;
	margin-bottom: 20px;
}

.qrt-contact-form label {
	text-align: center;
	color: #28292c;
	position: absolute;
	height: 50px;
	width: 50px;
	background: white;
	top: 0;
	left: 0;
	padding: 0 15px;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 53px;
	letter-spacing: 1px;
	font-weight: 500;
	transition: 0.4s ease-in-out;
	cursor: text;
}

.qrt-submit-frame {
	position: relative;
	height: 45px;
}

.qrt-submit-button span {
	opacity: 1;
}

.qrt-submit-button.qrt-active {
	position: relative;
	overflow: hidden;
}

.qrt-submit-button.qrt-active span {
	transform: translateY(-200%);
	opacity: 0;
}

.qrt-submit-button:after {
	content: "Success!";
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 100%;
	transform: translateY(300%);
}

.qrt-submit-button.qrt-active:after {
	transform: translateY(15px);
}

/* ----- blog card ----- */
.qrt-post-date {
	background-color: #28292c;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 10px 10px 8px;
	color: white;
	font-size: 10px;
}
.qrt-post-date span {
	margin-right: 10px;
}
.qrt-post-date span i {
	margin-right: 7px;
}

.qrt-post-frame {
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}
.qrt-post-frame.qrt-popular:before {
	font-size: 10px;
	position: absolute;
	z-index: 9;
	transform: rotate(45deg);
	z-index: 99;
	top: 15px;
	font-weight: 600;
	color: #28292c;
	right: -78px;
	content: "POPULAR";
	padding: 2px;
	width: 200px;
	text-align: center;
	background: #ff7043;
}
.qrt-post-frame .qrt-post-thumb {
	background-color: #28292c;
	margin-bottom: 15px;
	width: 100%;
	padding-bottom: 60%;
	position: relative;
	filter: brightness(90%);
	transition: 0.4s ease-in-out;
}
.qrt-post-frame .qrt-post-thumb img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	object-fit: cover;
	object-position: center;
}
.qrt-post-frame .qrt-post-thumb:hover {
	filter: brightness(110%);
}
.qrt-post-frame .qrt-post-thumb .qrt-post-date {
	background-color: #f7f8f8;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 0 5px 10px;
	color: #28292c;
	font-size: 9px;
	position: absolute;
	top: 0;
	left: 0;
}
.qrt-post-frame .qrt-post-thumb .qrt-post-date span {
	margin-right: 10px;
}
.qrt-post-frame .qrt-post-thumb .qrt-post-date span i {
	margin-right: 7px;
}
.qrt-post-frame .qrt-post-descr {
	width: 100%;
	padding-left: 0;
}
.qrt-post-frame .qrt-post-descr .qrt-post-title {
	font-size: 16px;
	margin-bottom: 10px;
	text-transform: none;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -moz-box;
	-moz-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	box-orient: vertical;
}
.qrt-post-frame .qrt-post-descr .qrt-port-short-text {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -moz-box;
	-moz-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	box-orient: vertical;
}
.qrt-post-frame .qrt-post-descr a {
	color: #28292c;
}
.qrt-post-frame .qrt-post-descr a:hover {
	color: #28292c;
}
.qrt-post-frame.qrt-sm-post {
	flex-direction: row;
	margin-bottom: 10px;
}
.qrt-post-frame.qrt-sm-post .qrt-post-thumb {
	margin-bottom: 0;
	width: 40%;
	padding-bottom: 27%;
}
.qrt-post-frame.qrt-sm-post .qrt-post-descr {
	width: 60%;
	padding-left: 10px;
}
.qrt-post-frame.qrt-sm-post .qrt-post-descr .qrt-post-title {
	font-size: 14px;
	margin-bottom: 5px;
	text-overflow: ellipsis;
	display: -moz-box;
	-moz-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	line-clamp: 1;
	box-orient: vertical;
}
.qrt-post-frame.qrt-sm-post .qrt-post-descr .qrt-port-short-text {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -moz-box;
	-moz-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	box-orient: vertical;
}
.qrt-post-frame.qrt-lg-post .qrt-post-thumb {
	margin-bottom: 0;
	padding-bottom: 50%;
}
.qrt-post-frame.qrt-lg-post .qrt-post-descr {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #28292c;
	padding: 20px 30px;
}
.qrt-post-frame.qrt-lg-post .qrt-post-descr .qrt-post-title {
	font-size: 20px;
	margin-bottom: 10px;
	text-transform: none;
}
.qrt-post-frame.qrt-lg-post .qrt-post-descr .qrt-post-title a {
	color: white;
}
.qrt-post-frame.qrt-lg-post .qrt-post-descr .qrt-port-short-text {
	max-width: 500px;
	-webkit-line-clamp: 1;
	line-clamp: 1;
}
.qrt-post-frame.qrt-lg-post .qrt-post-descr .qrt-work-more {
	margin-left: 40px;
	background-color: #ff7043;
	width: 35px;
	min-width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #28292c;
}

.qrt-blog-pagination {
	margin-top: 20px;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 2px;
	font-weight: 800;
	line-height: 55px;
	padding: 0 10px;
}
.qrt-blog-pagination li {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 45px;
}
.qrt-blog-pagination li a {
	height: 45px;
	line-height: 32px;
	min-width: 45px;
	text-align: center;
	border: none;
	color: #28292c;
	background: white;
	transition: 0.4s ease-in-out;
}
.qrt-blog-pagination li a.qrt-active {
	color: #28292c;
	background: #ff7043;
}
.qrt-blog-pagination li a.qrt-active:hover {
	background: #ff7043;
}
.qrt-blog-pagination li a:hover {
	background: white;
	color: #28292c;
}

/* ----- table ----- */
.qrt-table {
	color: #28292c;
	padding: 0;
	margin: 0;
}
.qrt-table li {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}
.qrt-table li:last-child {
	margin-bottom: 0;
}
.qrt-table li span {
	transform: translateY(-1px);
	text-align: end;
	color: #52555a;
}
.qrt-table li a {
	color: #52555a;
	transition: 0.4s ease-in-out;
}
.qrt-table li a:hover {
	color: #28292c;
}

/* ----- instagram ----- */
.qrt-instagram .qrt-instagram-frame {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
	position: relative;
	overflow: hidden;
}
.qrt-instagram .qrt-instagram-frame .qrt-instagram-item {
	position: relative;
	width: 33.333333%;
	padding: 0 5px;
	margin-bottom: 10px;
	transition: 0.4s ease-in-out;
}
.qrt-instagram
	.qrt-instagram-frame
	.qrt-instagram-item
	.qrt-instagram-image-frame {
	position: relative;
	padding-bottom: 100%;
	filter: brightness(90%);
	transition: 0.4s ease-in-out;
}
.qrt-instagram
	.qrt-instagram-frame
	.qrt-instagram-item
	.qrt-instagram-image-frame
	img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-instagram
	.qrt-instagram-frame
	.qrt-instagram-item
	.qrt-instagram-image-frame:hover {
	filter: brightness(120%);
}

/* ----- social links ----- */
.qrt-social-list {
	padding: 0;
	margin: 0 0;
	display: flex;
}
.qrt-social-list li {
	list-style-type: none;
	margin-right: 10px;
	margin-bottom: 0;
}
.qrt-social-list li:last-child {
	margin-right: 0;
}
.qrt-social-list li a {
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #28292c;
	font-size: 12px;
	height: 35px;
	width: 35px;
	border: solid 1px #28292c;
	transition: 0.4s ease-in-out;
}
.qrt-social-list li a i {
	line-height: 35px;
}
.qrt-social-list li a:hover {
	transform: scale(0.9);
}
.qrt-social-list li a.qrt-white {
	color: white;
	border-color: white;
}

/* ----- subscribe ----- */
.qrt-subscribe form {
	display: flex;
}
.qrt-subscribe form input {
	position: relative;
	padding-top: 2px;
	width: 80%;
	height: 40px;
	border-radius: 5px 0 0 5px;
	border: solid 1px #28292c;
	border-right: none;
	padding-left: 15px;
	font-family: "Josefin Sans", sans-serif;
}
.qrt-subscribe form input::placeholder {
	font-family: "Josefin Sans", sans-serif;
}
.qrt-subscribe form input:focus {
	outline: inherit;
}
.qrt-subscribe form button {
	width: 20%;
	border-radius: 0 5px 5px 0;
}
.qrt-subscribe form button:hover i {
	transform: none;
}

/* ----- copyright ----- */
.qrt-copy {
	font-size: 12px;
}
.qrt-copy a {
	transition: 0.2s ease-in-out;
}
.qrt-copy a:hover {
	color: #28292c;
}

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

portfolio

------------------------------ */
/* ----- portfolio item ----- */
.qrt-work-item {
	width: 100%;
	background-color: #28292c;
	position: relative;
	overflow: hidden;
}
.qrt-work-item .qrt-work-descr {
	transform: translateY(100%);
	background-color: #28292c;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 15px 20px;
	z-index: 9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: 0.4s ease-in-out;
}
.qrt-work-item .qrt-work-descr .qrt-work-more {
	background-color: #ff7043;
	width: 35px;
	min-width: 35px;
	height: 35px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #28292c;
}
.qrt-work-item .qrt-work-cover-frame {
	display: block;
	position: relative;
	padding-bottom: 63%;
	filter: brightness(90%);
	transition: 0.4s ease-in-out;
}
.qrt-work-item .qrt-work-cover-frame img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.qrt-work-item .qrt-item-zoom {
	transform: translateY(-100%);
	width: 50px;
	height: 50px;
	position: absolute;
	top: 0;
	right: 0;
	background: #28292c;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.4s ease-in-out 0.05s;
}
.qrt-work-item .qrt-item-zoom i {
	text-align: center;
	width: 60px;
	font-size: 12px;
	color: white;
	line-height: 60px;
	transition: 0.2s ease-in-out;
}
.qrt-work-item .qrt-item-zoom:hover {
	background-color: #28292c;
}
.qrt-work-item .qrt-item-zoom:hover i {
	transform: scale(1.1);
}
.qrt-work-item .qrt-work-cover-frame .qrt-work-category {
	background-color: #f7f8f8;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 5px 0 5px 10px;
	color: #28292c;
	position: absolute;
	top: 0;
	left: 0;
	font-size: 9px;
	display: inline-block;
	transition: 0.4s ease-in-out;
}
.qrt-work-item .qrt-work-cover-frame .qrt-work-category span {
	margin-right: 10px;
}
.qrt-work-item .qrt-work-cover-frame:hover {
	filter: brightness(110%);
}
.qrt-work-item .qrt-work-cover-frame:hover .qrt-item-zoom {
	opacity: 1;
}
.qrt-work-item:hover .qrt-work-descr {
	transform: translateY(0);
}
.qrt-work-item:hover .qrt-item-zoom {
	transform: translateY(0);
}
.qrt-work-item.qrt-work-open .qrt-work-descr {
	transform: translateY(0);
	position: relative;
}

/* ----- portfolio item (after 768px) ----- */
@media (max-width: 768px) {
	.qrt-work-item .qrt-work-descr {
		transform: none;
	}
}
/* ----- portfolio grid sizes ----- */
.qrt-masonry-grid-item-h-x-2 .qrt-work-item .qrt-work-cover-frame {
	padding-bottom: calc(126% + 20px);
}

.qrt-masonry-grid-item-50 .qrt-work-item .qrt-work-cover-frame {
	padding-bottom: calc(63% + 8px);
}
.qrt-masonry-grid-item-50.qrt-masonry-grid-item-h-x-2
	.qrt-work-item
	.qrt-work-cover-frame {
	padding-bottom: calc(126% + 36px);
}

/* ----- masonry grid ----- */
.qrt-masonry-grid {
	margin: -10px;
	min-height: 100vh !important;
}
/* .qrt-masonry-grid{
  height: auto !important;
} */

/* .qrt-masonry-grid,.qrt-just-text
{
  display: block !important;
} */
.qrt-masonry-grid:after {
	content: "";
	display: block;
	clear: both;
}

.qrt-grid-sizer,
.qrt-masonry-grid-item {
	width: 25%;
}

.qrt-3-col .qrt-grid-sizer,
.qrt-3-col .qrt-masonry-grid-item {
	width: 33.333%;
}

.qrt-4-col .qrt-grid-sizer,
.qrt-4-col .qrt-masonry-grid-item {
	width: 25%;
}

.qrt-masonry-grid-item {
	float: left;
	padding: 10px;
	overflow: hidden;
}

.qrt-masonry-grid-item-33 {
	width: 33%;
}

.qrt-masonry-grid-item-50 {
	width: 50%;
}

.qrt-masonry-grid-item-100 {
	width: 100%;
}

/* ----- filter ----- */
.qrt-filter-frame {
	padding: 20px;
}

.qrt-filter {
	display: flex;
	align-items: center;
}
.qrt-filter.qrt-justify-end {
	justify-content: flex-end;
}
.qrt-filter .qrt-work-category {
	position: relative;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 10px;
	display: block;
	letter-spacing: 1px;
	background-color: white;
	color: #28292c;
	height: 40px;
	margin-right: 10px;
	letter-spacing: 2px;
	line-height: 40px;
	padding: 2px 20px 0;
	margin-bottom: 0;
	transition: 0.4s ease-in-out;
}
.qrt-filter .qrt-work-category.qrt-filter-icon {
	padding-left: 60px;
}
.qrt-filter .qrt-work-category.qrt-filter-icon i {
	text-align: center;
	line-height: 40px;
	position: absolute;
	top: 0;
	left: 0;
	background-color: #ff7043;
	margin-right: 0;
	height: 100%;
	width: 40px;
}
.qrt-filter .qrt-work-category.qrt-current {
	color: white;
	background-color: #28292c;
}
.qrt-filter .qrt-work-category.qrt-current.qrt-filter-icon i {
	color: #28292c;
}

@media (max-width: 992px) {
	.qrt-grid-sizer,
	.qrt-masonry-grid-item {
		width: 50%;
	}

	.qrt-masonry-grid-item-33 {
		width: 50%;
	}

	.qrt-masonry-grid-item-50 {
		width: 50%;
	}

	.qrt-masonry-grid-item-100 {
		width: 100%;
	}

	.qrt-filter {
		/* flex-direction: column; */
		flex-wrap: wrap;
	}
	.qrt-filter .qrt-work-category {
		margin-bottom: 10px;
	}
	.qrt-filter .qrt-work-category:last-child {
		margin-bottom: 0;
	}
}
@media (max-width: 500px) {
	.qrt-grid-sizer,
	.qrt-masonry-grid-item {
		width: 100%;
	}

	.qrt-masonry-grid-item-33 {
		width: 100%;
	}

	.qrt-masonry-grid-item-50 {
		width: 100%;
	}

	.qrt-masonry-grid-item-100 {
		width: 100%;
	}
}
/* ------------------------------

plugins customization

------------------------------ */
/* ----- smooth scrollbar ----- */
.scrollbar-track {
	width: 3px !important;
	background-color: rgba(255, 255, 255, 0);
}
.scrollbar-track .scrollbar-thumb {
	width: 3px;
	background-color: #28292c;
	opacity: 0.3;
	margin-bottom: 50px !important;
}

/* ----- swiper ----- */
.qrt-latest-works-slider .swiper-slide,
.qrt-pop-post-slider .swiper-slide,
.qrt-testimonials-slider .swiper-slide {
	pointer-events: none;
	opacity: 0;
	transition: 0.4s ease-in-out;
}
.qrt-latest-works-slider .swiper-slide.swiper-slide-active,
.qrt-pop-post-slider .swiper-slide.swiper-slide-active,
.qrt-testimonials-slider .swiper-slide.swiper-slide-active {
	opacity: 1;
	pointer-events: all;
}
.qrt-latest-works-slider .swiper-slide.swiper-slide-next,
.qrt-pop-post-slider .swiper-slide.swiper-slide-next,
.qrt-testimonials-slider .swiper-slide.swiper-slide-next {
	opacity: 1;
	pointer-events: all;
}

.qrt-slider-navigation {
	z-index: 999;
}

.qrt-brands-slider .swiper-wrapper {
	-webkit-transition-timing-function: linear;
	transition-timing-function: linear;
}

.qrt-slider-nav {
	display: flex;
	justify-content: flex-end;
}
.qrt-slider-nav .qrt-slider-next,
.qrt-slider-nav .qrt-slider-prev {
	margin-left: 20px;
	font-size: 12px;
	cursor: pointer;
	color: #28292c;
	transition: 0.4s ease-in-out;
}
.qrt-slider-nav .qrt-slider-next.swiper-button-disabled,
.qrt-slider-nav .qrt-slider-prev.swiper-button-disabled {
	color: #28292c;
	opacity: 0.3;
	cursor: not-allowed;
}
.qrt-slider-nav .qrt-slider-next:focus,
.qrt-slider-nav .qrt-slider-prev:focus {
	outline: inherit;
}

.swiper-pagination-bullets span.swiper-pagination-bullet {
	margin-right: 4px;
	background-color: #28292c;
	opacity: 0.3;
	border-radius: 50%;
	height: 6px;
	width: 6px;
	transition: 0.4s ease-in-out;
}
.swiper-pagination-bullets span.swiper-pagination-bullet:focus {
	outline: inherit;
}
.swiper-pagination-bullets
	span.swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color: #28292c;
	opacity: 1;
	transform: scale(1.3);
}

/* ----- fancybox ----- */
.fancybox-container {
	margin: 10px;
	width: calc(100vw - 20px);
	height: calc(100vh - 20px);
}
.fancybox-container .fancybox-bg {
	background: rgba(25, 29, 36, 0.95);
}

.fancybox-is-open .fancybox-bg {
	opacity: 1;
}

.fancybox-toolbar {
	background: #28292c;
	display: flex;
	width: calc(100vw - 20px);
	justify-content: flex-end;
	align-items: center;
	height: 80px;
	z-index: 999999;
	padding: 0 17px;
	transition: 0.4s ease-in-out;
}
.fancybox-toolbar .fancybox-button {
	background: transparent;
	color: #f7f8f8;
}
.fancybox-toolbar .fancybox-button:hover {
	color: #f7f8f8;
}
.fancybox-toolbar .fancybox-button svg {
	width: 22px;
}

.fancybox-slide--image {
	padding: 130px 0 60px;
}

.fancybox-navigation .fancybox-button {
	background-color: transparent;
	margin: 0 15px;
}

.fancybox-infobar {
	top: 5px;
	left: 0;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
	margin-left: 5px;
	z-index: 9999999999999;
	height: 70px;
	width: 70px;
	display: flex;
	opacity: 1;
	justify-content: center;
	align-items: center;
}

.fancybox-progress {
	background: #ff7043;
	z-index: 999999999999999999;
}

.fancybox-thumbs {
	background-color: white;
}

.fancybox-thumbs__list a:before {
	border-color: #ff7043;
	transition: 0.4s ease-in-out;
}

.fancybox-button[disabled] {
	transform: scale(0);
	pointer-events: none;
	transition: 0.4s ease-in-out;
}

.qrt-rec-popup {
	background-color: transparent;
	max-width: 50%;
	padding: 40px;
}
.qrt-rec-popup .qrt-testimonial {
	border-radius: 2px;
	background-color: white;
	padding: 40px;
}
.qrt-rec-popup .fancybox-button {
	background-color: transparent;
	color: #fff;
}

@media (max-width: 768px) {
	.fancybox-container {
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.fancybox-toolbar {
		width: 100%;
	}

	.fancybox-navigation .fancybox-button {
		bottom: -10px;
		top: auto;
	}

	.qrt-rec-popup {
		max-width: 100%;
	}
}
/* ----- mapbox ----- */
.qrt-map-frame {
	background-color: #28292c;
	position: relative;
	overflow: hidden;
	height: 100%;
	width: 100%;
}
.qrt-map-frame .qrt-lock {
	opacity: 0;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 35px;
	height: 35px;
	color: #28292c;
	background-color: rgba(255, 255, 255, 0.4);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 50%;
	transition: 0.4s ease-in-out;
}
.qrt-map-frame .qrt-lock.qrt-active {
	opacity: 1;
	background-color: #ff7043;
}
.qrt-map-frame .qrt-lock i {
	font-size: 12px;
}
.qrt-map-frame:hover .qrt-lock {
	opacity: 1;
}
.qrt-map-frame .qrt-map {
	margin-top: -20%;
	height: 120%;
	width: 100%;
	transition: 0.4s ease-in-out;
	pointer-events: none;
}
.qrt-map-frame .qrt-map.qrt-active {
	pointer-events: all;
}
.qrt-map-frame.qrt-map-frame-2 {
	height: 400px;
	width: 100%;
}
.qrt-map-frame.qrt-map-frame-2 .qrt-map {
	margin-top: -3%;
	height: 120%;
	width: 100%;
	transition: 0.4s ease-in-out;
}

@media (max-width: 1200px) {
	.qrt-map-frame {
		background-color: #28292c;
	}
	.qrt-map-frame .qrt-map {
		margin-top: 0;
		height: 110%;
	}
}
.mapboxgl-marker:after {
	position: absolute;
	content: "Astra Towers";
	transform: translateX(-40%) translateY(10px);
	display: block;
	color: white;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 10px;
	padding: 1px 10px;
	white-space: nowrap;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 10px;
}
.mapboxgl-marker svg {
	transform: scale(1.2);
	animation: marker 1s infinite ease-in-out;
}
.mapboxgl-marker svg g {
	fill: #ff7043;
}
.mapboxgl-marker svg circle {
	fill: #28292c;
}
.mapboxgl-marker svg ellipse {
	fill: #000;
}
.modal .qrt-form-field label {
	position: absolute !important;
	left: 10px;
	top: 15px;
}
@keyframes marker {
	0% {
		transform: scale(1.2) translateY(0);
	}
	50% {
		transform: scale(1.2) translateY(-10px);
	}
	0% {
		transform: scale(1.2) translateY(0);
	}
}

/* HTML: <div class="loader"></div> */
.loader-wraper {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
}
.loader {
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(farthest-side, #ffa516 94%, #0000) top/8px 8px
			no-repeat,
		conic-gradient(#0000 30%, #ffa516);
	-webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
	animation: l13 1s infinite linear;
}
@keyframes l13 {
	100% {
		transform: rotate(1turn);
	}
}
.flex {
	display: flex;
	flex-direction: row;
}
.flex.flex-col {
	flex-direction: column;
}
.flex.items-center {
	align-items: center;
}
.flex.items-start {
	align-items: flex-start;
}
.flex.items-end {
	align-items: flex-end;
}
.flex.justify-center {
	justify-content: center;
}
.flex.justify-between {
	justify-content: space-between;
}
.flex.justify-around {
	justify-content: space-around;
}
.flex.justify-end {
	justify-content: flex-end;
}
.flex.flex-wrap {
	flex-wrap: wrap;
}
.external-link {
	background: #fff;
	padding: 0px 20px;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	gap: 20px;
}
.external-link .external-link-inner {
	flex-grow: 0;
	max-width: calc(100% - 100px);
}
.external-link .external-link-inner .link-text {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	max-width: 100%;
}
.external-link .link-media {
	width: 80px;
	height: 80px;
	object-fit: cover;
	margin: 10px 0;
	border-radius: 4px;
}
.qrt-list ol.ordered {
	counter-reset: item;
}

.qrt-list ol.ordered > li {
	counter-increment: item;
}

.qrt-list ol.ordered > li:before {
	content: counters(item, ".") ". ";
}

.qrt-list li ol.ordered {
	counter-reset: item;
}

.qrt-list li ol.ordered > li:before {
	content: counters(item, ".") ". ";
}
.qrt-attaches {
	position: relative;
	width: max-content;
	background: #fff;
	padding: 5px 40px 5px 60px;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.qrt-attaches i {
	position: absolute;
	left: 20px;
	top: calc(50% - 10px);
	font-size: 20px;
	color: #28292c;
}
a h6 {
	font-weight: 500;
}
.image-gallery {
	padding: 20px 0;
}
.gg-container {
	--main-color: #000;
	--secondary-color: #111;
	--txt-color: #fff;
	--img-bg-color: rgba(240, 240, 240, 0.9);
	--backdrop-color: rgba(240, 240, 240, 0.9);
	--gap-length: 2px;
	--row-height: 200px;
	--column-width: 220px;
}

.gg-container *[data-theme="dark"] {
	--main-color: #ddd;
	--secondary-color: #eee;
	--txt-color: #111;
	--img-bg-color: rgba(20, 20, 20, 0.9);
	--backdrop-color: rgba(30, 30, 30, 0.9);
}

.gg-box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
	grid-auto-rows: var(--row-height);
	grid-gap: var(--gap-length);
	margin: 20px 0;
}

.gg-box img {
	object-fit: cover;
	cursor: pointer;
	width: 100%;
	height: 100%;
	background: var(--img-bg-color);
}

#gg-screen {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: var(--backdrop-color);
	z-index: 9999;
	text-align: center;
}

#gg-screen .gg-image {
	height: 100%;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

#gg-screen .gg-image img {
	max-width: 96%;
	max-height: 96%;
	margin: 0 auto;
}

.gg-btn {
	width: 35px;
	height: 35px;
	background: var(--main-color);
	color: var(--txt-color);
	text-align: center;
	line-height: 35px;
	cursor: pointer;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	font-size: 20px;
	box-sizing: border-box;
	padding-left: 2px;
	position: fixed;
	bottom: 10px;
}

.gg-btn:hover {
	background: var(--secondary-color);
}

.gg-close {
	top: 10px;
}

.gg-close,
.gg-next {
	right: 10px;
}

.gg-prev {
	right: 50px;
}

.gg-prev,
.gg-next {
	bottom: 10px;
}

@media (min-width: 478px) {
	.gg-box img:nth-child(2n):not(:last-of-type) {
		grid-row-end: span 2;
	}

	[data-layout="horizontal"] img:nth-child(2n):not(:last-of-type) {
		grid-column-end: span 2;
		grid-row-end: span 1;
	}

	[data-layout="square"] img:nth-child(2n):not(:last-of-type) {
		grid-row-end: span 1;
		grid-column-end: span 1;
	}
}

@media (max-width: 768px) {
	.gg-box {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		grid-auto-rows: calc(var(--row-height) - 15vh);
		margin: 10px 0;
	}
}

@media (max-width: 450px) {
	.gg-box {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	}
}
#waveform {
	cursor: pointer;
	position: relative;
}
#hover {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	pointer-events: none;
	height: 100%;
	width: 0;
	mix-blend-mode: overlay;
	background: rgba(255, 255, 255, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease;
}
#waveform:hover #hover {
	opacity: 1;
}
#time,
#duration {
	position: absolute;
	z-index: 11;
	top: 50%;
	margin-top: -1px;
	transform: translateY(-50%);
	font-size: 11px;
	background: rgba(0, 0, 0, 0.75);
	padding: 2px;
	color: #ddd;
}
#time {
	left: 0;
}
#duration {
	right: 0;
}
.qrt-table.border,
.qrt-table.border td {
	border: 1px solid rgba(82, 85, 90, 0.3);
}
.qrt-table.border td {
	padding: 5px;
}