@charset "utf-8";
@import url("style_reset.css");
@import url("style_texts.css");
@import url("style_global.css");
@import url("style_header.css");
@import url("style_home.css");
@import url("style_work.css");
@import url("style_about.css");
@import url("style_slider.css");
@import url("style_project.css");

/* Vars
==================================== */
:root{

	/* Colors */
	--cbg: white;
	--ctext: black;

	/* Easing */
	--speed: 300ms;
	--ease: cubic-bezier(0.83, 0, 0.17, 1);

	/* Heights */
	--h-viewport: 100vh;
	--h-viewport--small: calc(var(--h-viewport) - var(--headerH));

	/* Margins */
	--colsmall: 15px;
	--cols: 20px;
	--rows: var(--cols);
	--sides: var(--cols);
	--gap: 4px;
	--mTop: 70px;
	--mSides: calc(var(--mTop)*2);
	--mBottom: 200px;

	/*Elements*/
	--headerH: 50px;
	--thumbH: 114px;
}
@media (min-width: 1680px){
	:root{
		--gap: 6px;
		--headerH: 55px;
		--thumbH: 140px;
	}
}
@media (min-width: 1921px){
	:root{
		--sides: 40px;
		--headerH: 80px;
	}
}
@media (max-width: 834px){
	:root{
		--mSides: var(--sides);
		--thumbH: 90px;
	}
}
/*!!!*/
@media (max-width: 320px){
	:root{
		--cols: 18px;
		--mSides: 0;
		--mBottom: 160px;
		--headerH: 42px;
		--thumbH: 82px;
	}
}