@charset "UTF-8";

:root {

  --color-blue: #1461b3;
  --color-yellow: #c59822;
  --color-red: #e30202;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-gray: #727e8f;
  --color-light-gray: #f4f4f4;
  --color-dark-gray: #333;

  --link-color: white;
  --text-color: white;
  --background-color: white;
  --heading-color: white;

  --span: 2rem;
  --span-small: 1rem;
  --span-large: 4rem;
  --span-x-large: 8rem;

	--swiper-theme-color: var(--color-blue);

  --container-gap: var(--span);
  --path-corner: polygon(3rem 0, 100% 0, 100% 100%, 0 100%, 0 2rem);
  --path-corner-inner: polygon(2.8rem 0, 100% 0, 100% 100%, 0 100%, 0 1.8rem);


  --block-padding: var(--span-x-large);
  --block-inner-padding: var(--span-x-large);

	--item-width: 35rem;
  --page-width: 1300px;

  --input-height: 5rem;
  --input-color: #f3f3f3;
  --input-border-color: var(--color-blue);
  --input-border: 2px solid var(--input-border-color);
  --input-active-border: 2px solid var(--color-red);
  --input-padding: var(--span-small) var(--span);

  --filter-shadow: drop-shadow(0 0 1rem #fec84447);

  --button-height: 5rem;
  --button-color: var(--color-blue);
  --button-text-color: white;
  --button-icon-color: white;
  --button-hover-color: black;
  --button-hover-text-color: white;
  --button-hover-icon-color: white;

  --border-radius: 0;
  --shadow: 0 0 1rem 0 rgb(from var(--color-blue) r g b / 0.3);

  --font: "Montserrat", sans-serif;
  --root-font-size: 10px;

}

@media screen and (max-width: 768px) {
	:root {
		--block-padding: var(--span-large);
		--container-gap: 2rem;
	}
}

@media screen and (max-width: 640px) {
	:root {
		--button-height: 4rem;
	  --input-height: 4rem;
	}
}

@media screen and (min-width: 2000px) {
	:root {
		--page-width: 1800px;
	  --root-font-size: 14px;
	}
}

@media screen and (min-width: 3000px) {
	:root {
		--page-width: 2400px;
	  --root-font-size: 16px;
	}
}