/* screens: desktops + laptops */
:root {
  --white: #FFFFFF;
  --white-transparent: #FFFFFF3B;
  --black: #000000;
  --black-transparent: #000000E6;
  
  --red: #FF0000;
  --red-dark: #D50000;

  --gray-e: #EEE;
  --gray-d: #DDD;
  --gray-c: #CCC;
  --gray-b: #BBB;
  --gray-a: #AAA;
  --gray-9: #999;
  --gray-8: #888;
  --gray-7: #777;
  --gray-6: #666;
  --gray-5: #555;
  --gray-4: #444;
  --gray-3: #333;
  --gray-2: #222;
  --gray-1: #111;

  --border: var(--gray-d);

  /* head */
	--head-bg: var(--white);

	--head-logo: var(--red);
	--head-logo-hover: var(--red);
	
  --head-link: var(--black);
  --head-link-hover: var(--red-dark);
  --head-link-menu: var(--white);
  
  --hero-bg: transparent;
  --hero-title: var(--black);
  --hero-tag: var(--black);
  --hero-text: var(--gray-4);

  --content-bg: var(--white);
	--content-title-light: var(--white);
	--content-title-dark: var(--black);

  --foot-bg: var(--gray-e);
  --foot-text: var(--black);
  --foot-link: var(--black);
  --foot-link-hover: var(--red);

	--text-subscribe-light: #E4E4E4;
	--text-title: #121212;
  --text-content: #ababab;
  --text-secure: #008CBA;
  --text-success: #66BC69;
  --text-error: var(--red-dark);

  --form-label: var(--gray-2);
  --form-hint: var(--gray-a);
  --form-text: var(--gray-5);
  --form-link: var(--gray-4);
  --form-link-hover: var(--red);
  --form-input: var(--gray-e);
  --form-input-text: var(--gray-a);

  --button-one-font: var(--white);
  --button-one-font-hover: var(--white);
  --button-one-bg: var(--red);
  --button-one-bg-hover: #C40000;
  
  --button-two: var(--white);
  --button-two-hover: var(--white);
  --button-two-bg: var(--red);
  --button-two-bg-hover: #C40000;

  --radius: 1rem;
}

* {
	margin: 0;
	padding: 0;
	font-family: 'Readex Pro', 'Segoe UI', sans-serif;
	font-weight: 300;
  line-height: 2;
	letter-spacing: 0.02rem;
}

body {
	background: var(--white);
}

ul {
  list-style: none;
}

a {
	color: var(--black);
  outline: none;
	text-decoration: none;
	transition: all 0.2s;
}

@font-face {
  font-family: 'caviar-dreams';
  font-weight: 400;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Regular";
  src: url("/fonts/caviar-dreams.woff") format("woff");
}

@font-face {
  font-family: 'caviar-dreams-bold';
  font-weight: bold;
  font-display: swap;
  font-style: normal;
  font-named-instance: "Bold";
  src: url("/fonts/caviar-dreams-bold.woff") format("woff");
}

input:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
	border: 0;
	outline: none;
	transition: all 0.2s;
}

.full_shadow {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.one_edge_shadow {
	-webkit-box-shadow: 0 0.5rem 0.375rem -0.375rem var(--black-transparent);
	   -moz-box-shadow: 0 0.5rem 0.375rem -0.375rem var(--black-transparent);
	        box-shadow: 0 0.5rem 0.375rem -0.375rem var(--black-transparent);
}

.active {
  color: var(--red) !important;
}