/*

Стандратные бутстраповские брэйкпоинты

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }


!!! У нас используются в обратную сторону, с max-width !!!

// SM
@media (max-width: 575px) { ... }

// MD
@media (max-width: 767px) { ... }

// LG
@media (max-width: 991px) { ... }

// XL
@media (max-width: 1199px) { ... }

// XXL
@media (max-width: 1399px) { ... }

*/


:root {
	--ui-primary: #FCD825;
	--ui-secondary: #141517;
	--ui-background: #EBE9E7;
	--ui-white: white;

	--ui-text-primary: #141517;
	--ui-text-secondary: #7D8185;
	--ui-text-tetriary: #ADB0B5;
	--ui-text-white: #F6F6FA;

	--ui-state-default: var(--ui-primary);
	--ui-state-hover: #F3BE00;
	--ui-state-link: #2068BC;
	--ui-state-error: #F24646;

	--ui-card-label-1: #3D8DEA;
	--ui-card-label-2: #00B1BD;
	--ui-card-label-3: #EB6200;

	--ui-some-gray-text: #828284;

	--page-background: var(--ui-background);

	--text-main: var(--ui-text-primary);
	--text-secondary: var(--ui-text-secondary)/* #99999B */;
	--text-tetriary: var(--ui-text-tetriary)/* #D9D9DA */;
	--text-white: #FFFFFF;

	--brand-yellow: var(--ui-primary);
	--brand-platinum: #D2DBDA;
	--brand-timberwolf: #E0DAD8;
	--brand-night: #141517;
	--brand-white: var(--ui-white);
	--background-inputs: #F6F6FA;
	--neutrals-200: #F6F6FA;
	--neutrals-300: #E5E6F1;
	--neutrals-400: #C8C9D0;
	--neutrals-500: #9FA2A8;

	--color-dark: #292A2E;
	--color-darker: #252729;

	--color-red: #EF1717;
	--color-another-red: #E52929;
	--color-green: #38D048;
	--faded-yellow: var(--ui-state-hover)/* #CCAC0B */;
	--color-blue: #2561FC;

	--border-radius-xs: 8px;
	--border-radius-s: 12px;
	--border-radius-m: 16px;
	--border-radius-l: 24px;

	--ui-section-padding: 56px;
}

.fancybox__container {
	--fancybox-bg: rgba(0, 0, 0, .8);
}

@media (max-width: 991px) {
	:root {
		--ui-section-padding: 40px;
	}
}