/*------------------------------------------------------------
# ROOT
------------------------------------------------------------*/

:root {

	/*----- fonts -----*/

	--ff-main: sans-serif;
	--ff-header: sans-serif;

	font-size: 16px;
	font-family: var(--ff-main);
	line-height: 1.25;

	--fz-h1: calc(var(--gap) * 2);
	--fz-h2: calc(var(--gap) * 2);
	--fz-h3: calc(var(--gap) * 1.5);
	--fz-h4: calc(var(--gap) * 1.25);
	--fz-h5: calc(var(--gap) * 1.125);
	--fz-h6: calc(var(--gap) * 1);


	/*----- indents -----*/

	--gap: 1rem;
	--gap-small: calc(var(--gap) / 2);
	--gap-big: calc(var(--gap) * 2);

	--spacer: calc(var(--gap) * 4);
	--spacer-small: calc(var(--spacer) / 2);
	--spacer-big: calc(var(--spacer) * 2);

	--limiter: calc(var(--gap) * 75);
	--limiter-padding: var(--gap);


	/*----- colors -----*/

	--c-white: 255 255 255;
	--c-black: 0 0 0;

	--c-text: var(--c-black);
	--c-text-i: var(--c-white);

	--c-header: var(--c-text);
	--c-header-i: var(--c-text-i);

	--c-primary: 2 132 199;
	--c-primary-i: 255 255 255;

/*	--c-secondary: 251 191 36;*/
/*	--c-secondary-i: 0 0 0;*/
	--c-secondary: 225 29 72;
	--c-secondary-i: 255 255 255;


	/*----- inputs -----*/

	--input-padding-v: .75em;
	--input-padding-h: 1.5em;
	--input-border-width: 1px;
	--input-font-size: 1rem;
	--button-bg-color: var(--c-primary);
	--button-color: var(--c-primary-i);
}


/*------------------------------------------------------------
# ALL
------------------------------------------------------------*/

* {
	outline: unset;
}
*, *::before, *::after {
	box-sizing: border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
*:first-child {
	margin-top: unset;
}
*:last-child {
	margin-bottom: unset;
}


/*------------------------------------------------------------
# DOCUMENT
------------------------------------------------------------*/

body {
	margin: unset;
}


/*------------------------------------------------------------
# CLEARFIX
------------------------------------------------------------*/

section::before, section::after,
aside::before, aside::after,
.clearfix::before, .clearfix::after {
    content: "";
    display: table;
    clear: both;
}


/*------------------------------------------------------------
# TAG'S
------------------------------------------------------------*/

figure, picture, img, video {
	vertical-align: middle;
}

iframe {
	vertical-align: middle;
}

img {
    max-width: 100%;
}

a {
	color: rgb(var(--c-primary));
	cursor: pointer;
}
a:hover {
}
a:active {
}


h1, h2, h3, h4, h5, h6 {
	margin-top: var(--gap);
	margin-bottom: var(--gap);
}
p {
	margin-top: var(--gap-small);
	margin-bottom: var(--gap-small);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-header);
}

h1 { font-size: var(--fz-h1); }
h2 { font-size: var(--fz-h2); }
h3 { font-size: var(--fz-h3); }
h4 { font-size: var(--fz-h4); }
h5 { font-size: var(--fz-h5); }
h6 { font-size: var(--fz-h6); }


/*------------------------------------------------------------
# INPUT'S
------------------------------------------------------------*/

input:not([type="image"], [type="file"], [type="range"], [type="checkbox"], [type="radio"]), button, .button, .btn {
	font-size: var(--input-font-size);
	line-height: var(--input-font-size);
	padding: calc(var(--input-padding-v) - var(--input-border-width)) calc(var(--input-padding-h) - var(--input-border-width));
	height: calc(var(--input-padding-v) * 2 + var(--input-font-size));
	border: unset;
	border-style: solid;
	border-width: var(--input-border-width);
    display: inline-block;
	vertical-align: middle;
	position: relative;
}
input:not([type="image"], [type="file"], [type="range"], [type="checkbox"], [type="radio"]) {
	border-color: rgb(var(--c-black) / .25);
}
button, input[type=submit], .button, .btn {
	border-color: rgb(var(--button-bg-color));
	background-color: rgb(var(--button-bg-color));
	color: rgb(var(--button-color));
	cursor: pointer;
	text-decoration: unset;
}


/*------------------------------------------------------------
# Spasers
------------------------------------------------------------*/

.limiter {
	max-width: var(--limiter);
	margin-inline: auto;
	padding-inline: var(--limiter-padding);
}
.spacer {
	margin-top: var(--spacer);
	margin-bottom: var(--spacer);
}
.spacer_small {
	margin-top: var(--spacer-small);
	margin-bottom: var(--spacer-small);
}
.spacer_big {
	margin-top: var(--spacer-big);
	margin-bottom: var(--spacer-big);
}