/*
Grid framework using grids
Version: 0.021
Use this to link it to your project:
<link rel="stylesheet" href="https://digomes87.github.io/Design-your-own-Grid-based-Framework/css/grid.css">
*/

/* #region globals */

@import url("https://necolas.github.io/normalize.css/8.0.1/normalize.css");

*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.btn-test {
	padding: 10px 20px;
	font-size: 20px;
}

body,
header,
nav,
main,
article,
title,
section,
footer,
div,
span,
form,
a {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

.container {
	width: 100%;
}

.row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: minmax(10px, auto);
	gap: 10px;
	justify-content: space-between;
	align-content: flex-start;
	padding-left: 15px;
	padding-right: 15px;
	clear: both;
	margin-bottom: 5px;
}

.no-pad {
	padding-left: 0;
	padding-right: 0;
}

/* #endregion */

/* #region fonts */

.ft-s-1 {
	font-size: 0.8rem;
}

.ft-s-2 {
	font-size: 1rem;
}

.ft-s-3 {
	font-size: 1.3rem;
}

.ft-s-4 {
	font-size: 1.7rem;
}

.ft-s-5 {
	font-size: 2rem;
}

.ft-w-1 {
	font-weight: 300;
}

.ft-w-2 {
	font-weight: 500;
}

.ft-w-3 {
	font-weight: 600;
}

.ft-w-4 {
	font-weight: 700;
}

.ft-w-5 {
	font-weight: 900;
}

/* #endregion */

/* #region color */

.f-c-red {
	color: rgb(216, 25, 25);
}

.f-c-blue {
	color: rgb(51, 51, 170);
}

.f-c-green {
	color: rgb(52, 153, 52);
}

.f-c-yellow {
	color: rgb(184, 184, 43);
}

.f-c-black {
	color: rgb(0, 0, 0);
}

.f-c-white {
	color: rgb(255, 255, 255);
}

.f-c-purple {
	color: rgb(143, 65, 206);
}

.f-c-gray {
	color: rgb(129, 129, 129);
}

.f-c-aqua {
	color: rgb(37, 204, 226);
}

.f-c-blood {
	color: rgb(131, 33, 33);
}

.f-c-pink {
	color: rgb(219, 70, 169);
}

/* #endregion */

/* #region background */

.b-c-red {
	background-color: rgb(216, 25, 25);
}

.b-c-blue {
	background-color: rgb(51, 51, 170);
}

.b-c-green {
	background-color: rgb(52, 153, 52);
}

.b-c-yellow {
	background-color: rgb(184, 184, 43);
}

.b-c-black {
	background-color: rgb(0, 0, 0);
}

.b-c-white {
	background-color: rgb(255, 255, 255);
}

.b-c-purple {
	background-color: rgb(143, 65, 206);
}

.b-c-gray {
	background-color: rgb(129, 129, 129);
}

.b-c-aqua {
	background-color: rgb(37, 204, 226);
}

.b-c-blood {
	background-color: rgb(131, 33, 33);
}

.b-c-pink {
	background-color: rgb(219, 70, 169);
}

/* #endregion */

/* #region margin */

.m-0 {
	margin: 0;
}

.m-1 {
	margin: 0.2rem;
}

.m-2 {
	margin: 0.4rem;
}

.m-3 {
	margin: 0.6rem;
}

.m-4 {
	margin: 0.8rem;
}

.m-5 {
	margin: 1rem;
}

.m-t-0 {
	margin-top: 0;
}

.m-t-1 {
	margin-top: 0.2rem;
}

.m-t-2 {
	margin-top: 0.4rem;
}

.m-t-3 {
	margin-top: 0.6rem;
}

.m-t-4 {
	margin-top: 0.8rem;
}

.m-t-5 {
	margin-top: 1rem;
}

.m-r-0 {
	margin-right: 0;
}

.m-r-1 {
	margin-right: 0.2rem;
}

.m-r-2 {
	margin-right: 0.4rem;
}

.m-r-3 {
	margin-right: 0.6rem;
}

.m-r-4 {
	margin-right: 0.8rem;
}

.m-r-5 {
	margin-right: 1rem;
}

.m-b-0 {
	margin-bottom: 0;
}

.m-b-1 {
	margin-bottom: 0.2rem;
}

.m-b-2 {
	margin-bottom: 0.4rem;
}

.m-b-3 {
	margin-bottom: 0.6rem;
}

.m-b-4 {
	margin-bottom: 0.8rem;
}

.m-b-5 {
	margin-bottom: 1rem;
}

.m-l-0 {
	margin-left: 0;
}

.m-l-1 {
	margin-left: 0.2rem;
}

.m-l-2 {
	margin-left: 0.4rem;
}

.m-l-3 {
	margin-left: 0.6rem;
}

.m-l-4 {
	margin-left: 0.8rem;
}

.m-l-5 {
	margin-left: 1rem;
}

@media only screen and (max-width: 1366px) {
	.m-lg-0 {
		margin: 0;
	}

	.m-lg-1 {
		margin: 0.2rem;
	}

	.m-lg-2 {
		margin: 0.4rem;
	}

	.m-lg-3 {
		margin: 0.6rem;
	}

	.m-lg-4 {
		margin: 0.8rem;
	}

	.m-lg-5 {
		margin: 1rem;
	}

	.m-lg-t-0 {
		margin-top: 0;
	}

	.m-lg-t-1 {
		margin-top: 0.2rem;
	}

	.m-lg-t-2 {
		margin-top: 0.4rem;
	}

	.m-lg-t-3 {
		margin-top: 0.6rem;
	}

	.m-lg-t-4 {
		margin-top: 0.8rem;
	}

	.m-lg-t-5 {
		margin-top: 1rem;
	}

	.m-lg-r-0 {
		margin-right: 0;
	}

	.m-lg-r-1 {
		margin-right: 0.2rem;
	}

	.m-lg-r-2 {
		margin-right: 0.4rem;
	}

	.m-lg-r-3 {
		margin-right: 0.6rem;
	}

	.m-lg-r-4 {
		margin-right: 0.8rem;
	}

	.m-lg-r-5 {
		margin-right: 1rem;
	}

	.m-lg-b-0 {
		margin-bottom: 0;
	}

	.m-lg-b-1 {
		margin-bottom: 0.2rem;
	}

	.m-lg-b-2 {
		margin-bottom: 0.4rem;
	}

	.m-lg-b-3 {
		margin-bottom: 0.6rem;
	}

	.m-lg-b-4 {
		margin-bottom: 0.8rem;
	}

	.m-lg-b-5 {
		margin-bottom: 1rem;
	}

	.m-lg-l-0 {
		margin-left: 0;
	}

	.m-lg-l-1 {
		margin-left: 0.2rem;
	}

	.m-lg-l-2 {
		margin-left: 0.4rem;
	}

	.m-lg-l-3 {
		margin-left: 0.6rem;
	}

	.m-lg-l-4 {
		margin-left: 0.8rem;
	}

	.m-lg-l-5 {
		margin-left: 1rem;
	}
}

@media only screen and (max-width: 1024px) {
	.m-md-0 {
		margin: 0;
	}

	.m-md-1 {
		margin: 0.2rem;
	}

	.m-md-2 {
		margin: 0.4rem;
	}

	.m-md-3 {
		margin: 0.6rem;
	}

	.m-md-4 {
		margin: 0.8rem;
	}

	.m-md-5 {
		margin: 1rem;
	}

	.m-md-t-0 {
		margin-top: 0;
	}

	.m-md-t-1 {
		margin-top: 0.2rem;
	}

	.m-md-t-2 {
		margin-top: 0.4rem;
	}

	.m-md-t-3 {
		margin-top: 0.6rem;
	}

	.m-md-t-4 {
		margin-top: 0.8rem;
	}

	.m-md-t-5 {
		margin-top: 1rem;
	}

	.m-md-r-0 {
		margin-right: 0;
	}

	.m-md-r-1 {
		margin-right: 0.2rem;
	}

	.m-md-r-2 {
		margin-right: 0.4rem;
	}

	.m-md-r-3 {
		margin-right: 0.6rem;
	}

	.m-md-r-4 {
		margin-right: 0.8rem;
	}

	.m-md-r-5 {
		margin-right: 1rem;
	}

	.m-md-b-0 {
		margin-bottom: 0;
	}

	.m-md-b-1 {
		margin-bottom: 0.2rem;
	}

	.m-md-b-2 {
		margin-bottom: 0.4rem;
	}

	.m-md-b-3 {
		margin-bottom: 0.6rem;
	}

	.m-md-b-4 {
		margin-bottom: 0.8rem;
	}

	.m-md-b-5 {
		margin-bottom: 1rem;
	}

	.m-md-l-0 {
		margin-left: 0;
	}

	.m-md-l-1 {
		margin-left: 0.2rem;
	}

	.m-md-l-2 {
		margin-left: 0.4rem;
	}

	.m-md-l-3 {
		margin-left: 0.6rem;
	}

	.m-md-l-4 {
		margin-left: 0.8rem;
	}

	.m-md-l-5 {
		margin-left: 1rem;
	}
}

@media only screen and (max-width: 720px) {
	.m-sm-0 {
		margin: 0;
	}

	.m-sm-1 {
		margin: 0.2rem;
	}

	.m-sm-2 {
		margin: 0.4rem;
	}

	.m-sm-3 {
		margin: 0.6rem;
	}

	.m-sm-4 {
		margin: 0.8rem;
	}

	.m-sm-5 {
		margin: 1rem;
	}

	.m-sm-t-0 {
		margin-top: 0;
	}

	.m-sm-t-1 {
		margin-top: 0.2rem;
	}

	.m-sm-t-2 {
		margin-top: 0.4rem;
	}

	.m-sm-t-3 {
		margin-top: 0.6rem;
	}

	.m-sm-t-4 {
		margin-top: 0.8rem;
	}

	.m-sm-t-5 {
		margin-top: 1rem;
	}

	.m-sm-r-0 {
		margin-right: 0;
	}

	.m-sm-r-1 {
		margin-right: 0.2rem;
	}

	.m-sm-r-2 {
		margin-right: 0.4rem;
	}

	.m-sm-r-3 {
		margin-right: 0.6rem;
	}

	.m-sm-r-4 {
		margin-right: 0.8rem;
	}

	.m-sm-r-5 {
		margin-right: 1rem;
	}

	.m-sm-b-0 {
		margin-bottom: 0;
	}

	.m-sm-b-1 {
		margin-bottom: 0.2rem;
	}

	.m-sm-b-2 {
		margin-bottom: 0.4rem;
	}

	.m-sm-b-3 {
		margin-bottom: 0.6rem;
	}

	.m-sm-b-4 {
		margin-bottom: 0.8rem;
	}

	.m-sm-b-5 {
		margin-bottom: 1rem;
	}

	.m-sm-l-0 {
		margin-left: 0;
	}

	.m-sm-l-1 {
		margin-left: 0.2rem;
	}

	.m-sm-l-2 {
		margin-left: 0.4rem;
	}

	.m-sm-l-3 {
		margin-left: 0.6rem;
	}

	.m-sm-l-4 {
		margin-left: 0.8rem;
	}

	.m-sm-l-5 {
		margin-left: 1rem;
	}
}

/* #endregion */

/* #region padding */

.p-0 {
	padding: 0;
}

.p-1 {
	padding: 0.2rem;
}

.p-2 {
	padding: 0.4rem;
}

.p-3 {
	padding: 0.6rem;
}

.p-4 {
	padding: 0.8rem;
}

.p-5 {
	padding: 1rem;
}

.p-t-0 {
	padding-top: 0;
}

.p-t-1 {
	padding-top: 0.2rem;
}

.p-t-2 {
	padding-top: 0.4rem;
}

.p-t-3 {
	padding-top: 0.6rem;
}

.p-t-4 {
	padding-top: 0.8rem;
}

.p-t-5 {
	padding-top: 1rem;
}

.p-r-0 {
	padding-right: 0;
}

.p-r-1 {
	padding-right: 0.2rem;
}

.p-r-2 {
	padding-right: 0.4rem;
}

.p-r-3 {
	padding-right: 0.6rem;
}

.p-r-4 {
	padding-right: 0.8rem;
}

.p-r-5 {
	padding-right: 1rem;
}

.p-b-0 {
	padding-bottom: 0;
}

.p-b-1 {
	padding-bottom: 0.2rem;
}

.p-b-2 {
	padding-bottom: 0.4rem;
}

.p-b-3 {
	padding-bottom: 0.6rem;
}

.p-b-4 {
	padding-bottom: 0.8rem;
}

.p-b-5 {
	padding-bottom: 1rem;
}

.p-l-0 {
	padding-left: 0;
}

.p-l-1 {
	padding-left: 0.2rem;
}

.p-l-2 {
	padding-left: 0.4rem;
}

.p-l-3 {
	padding-left: 0.6rem;
}

.p-l-4 {
	padding-left: 0.8rem;
}

.p-l-5 {
	padding-left: 1rem;
}

@media only screen and (max-width: 1366px) {
	.p-lg-0 {
		padding: 0;
	}

	.p-lg-1 {
		padding: 0.2rem;
	}

	.p-lg-2 {
		padding: 0.4rem;
	}

	.p-lg-3 {
		padding: 0.6rem;
	}

	.p-lg-4 {
		padding: 0.8rem;
	}

	.p-lg-5 {
		padding: 1rem;
	}

	.p-lg-t-0 {
		padding-top: 0;
	}

	.p-lg-t-1 {
		padding-top: 0.2rem;
	}

	.p-lg-t-2 {
		padding-top: 0.4rem;
	}

	.p-lg-t-3 {
		padding-top: 0.6rem;
	}

	.p-lg-t-4 {
		padding-top: 0.8rem;
	}

	.p-lg-t-5 {
		padding-top: 1rem;
	}

	.p-lg-r-0 {
		padding-right: 0;
	}

	.p-lg-r-1 {
		padding-right: 0.2rem;
	}

	.p-lg-r-2 {
		padding-right: 0.4rem;
	}

	.p-lg-r-3 {
		padding-right: 0.6rem;
	}

	.p-lg-r-4 {
		padding-right: 0.8rem;
	}

	.p-lg-r-5 {
		padding-right: 1rem;
	}

	.p-lg-b-0 {
		padding-bottom: 0;
	}

	.p-lg-b-1 {
		padding-bottom: 0.2rem;
	}

	.p-lg-b-2 {
		padding-bottom: 0.4rem;
	}

	.p-lg-b-3 {
		padding-bottom: 0.6rem;
	}

	.p-lg-b-4 {
		padding-bottom: 0.8rem;
	}

	.p-lg-b-5 {
		padding-bottom: 1rem;
	}

	.p-lg-l-0 {
		padding-left: 0;
	}

	.p-lg-l-1 {
		padding-left: 0.2rem;
	}

	.p-lg-l-2 {
		padding-left: 0.4rem;
	}

	.p-lg-l-3 {
		padding-left: 0.6rem;
	}

	.p-lg-l-4 {
		padding-left: 0.8rem;
	}

	.p-lg-l-5 {
		padding-left: 1rem;
	}
}

@media only screen and (max-width: 1024px) {
	.p-md-0 {
		padding: 0;
	}

	.p-md-1 {
		padding: 0.2rem;
	}

	.p-md-2 {
		padding: 0.4rem;
	}

	.p-md-3 {
		padding: 0.6rem;
	}

	.p-md-4 {
		padding: 0.8rem;
	}

	.p-md-5 {
		padding: 1rem;
	}

	.p-md-t-0 {
		padding-top: 0;
	}

	.p-md-t-1 {
		padding-top: 0.2rem;
	}

	.p-md-t-2 {
		padding-top: 0.4rem;
	}

	.p-md-t-3 {
		padding-top: 0.6rem;
	}

	.p-md-t-4 {
		padding-top: 0.8rem;
	}

	.p-md-t-5 {
		padding-top: 1rem;
	}

	.p-md-r-0 {
		padding-right: 0;
	}

	.p-md-r-1 {
		padding-right: 0.2rem;
	}

	.p-md-r-2 {
		padding-right: 0.4rem;
	}

	.p-md-r-3 {
		padding-right: 0.6rem;
	}

	.p-md-r-4 {
		padding-right: 0.8rem;
	}

	.p-md-r-5 {
		padding-right: 1rem;
	}

	.p-md-b-0 {
		padding-bottom: 0;
	}

	.p-md-b-1 {
		padding-bottom: 0.2rem;
	}

	.p-md-b-2 {
		padding-bottom: 0.4rem;
	}

	.p-md-b-3 {
		padding-bottom: 0.6rem;
	}

	.p-md-b-4 {
		padding-bottom: 0.8rem;
	}

	.p-md-b-5 {
		padding-bottom: 1rem;
	}

	.p-md-l-0 {
		padding-left: 0;
	}

	.p-md-l-1 {
		padding-left: 0.2rem;
	}

	.p-md-l-2 {
		padding-left: 0.4rem;
	}

	.p-md-l-3 {
		padding-left: 0.6rem;
	}

	.p-md-l-4 {
		padding-left: 0.8rem;
	}

	.p-md-l-5 {
		padding-left: 1rem;
	}
}

@media only screen and (max-width: 720px) {
	.p-sm-0 {
		padding: 0;
	}

	.p-sm-1 {
		padding: 0.2rem;
	}

	.p-sm-2 {
		padding: 0.4rem;
	}

	.p-sm-3 {
		padding: 0.6rem;
	}

	.p-sm-4 {
		padding: 0.8rem;
	}

	.p-sm-5 {
		padding: 1rem;
	}

	.p-sm-t-0 {
		padding-top: 0;
	}

	.p-sm-t-1 {
		padding-top: 0.2rem;
	}

	.p-sm-t-2 {
		padding-top: 0.4rem;
	}

	.p-sm-t-3 {
		padding-top: 0.6rem;
	}

	.p-sm-t-4 {
		padding-top: 0.8rem;
	}

	.p-sm-t-5 {
		padding-top: 1rem;
	}

	.p-sm-r-0 {
		padding-right: 0;
	}

	.p-sm-r-1 {
		padding-right: 0.2rem;
	}

	.p-sm-r-2 {
		padding-right: 0.4rem;
	}

	.p-sm-r-3 {
		padding-right: 0.6rem;
	}

	.p-sm-r-4 {
		padding-right: 0.8rem;
	}

	.p-sm-r-5 {
		padding-right: 1rem;
	}

	.p-sm-b-0 {
		padding-bottom: 0;
	}

	.p-sm-b-1 {
		padding-bottom: 0.2rem;
	}

	.p-sm-b-2 {
		padding-bottom: 0.4rem;
	}

	.p-sm-b-3 {
		padding-bottom: 0.6rem;
	}

	.p-sm-b-4 {
		padding-bottom: 0.8rem;
	}

	.p-sm-b-5 {
		padding-bottom: 1rem;
	}

	.p-sm-l-0 {
		padding-left: 0;
	}

	.p-sm-l-1 {
		padding-left: 0.2rem;
	}

	.p-sm-l-2 {
		padding-left: 0.4rem;
	}

	.p-sm-l-3 {
		padding-left: 0.6rem;
	}

	.p-sm-l-4 {
		padding-left: 0.8rem;
	}

	.p-sm-l-5 {
		padding-left: 1rem;
	}
}

/* #endregion */

/* #region borders */

.b-0 {
	border-style: solid;
	border-width: 0;
}

.b-1 {
	border-style: solid;
	border-width: 0.2rem;
}

.b-2 {
	border-style: solid;
	border-width: 0.4rem;
}

.b-3 {
	border-style: solid;
	border-width: 0.6rem;
}

.b-4 {
	border-style: solid;
	border-width: 0.8rem;
}

.b-5 {
	border-style: solid;
	border-width: 1rem;
}

.b-t-0 {
	border-top-style: solid;
	border-width: 0;
}

.b-t-1 {
	border-top-style: solid;
	border-width: 0.2rem;
}

.b-t-2 {
	border-top-style: solid;
	border-width: 0.4rem;
}

.b-t-3 {
	border-top-style: solid;
	border-width: 0.6rem;
}

.b-t-4 {
	border-top-style: solid;
	border-width: 0.8rem;
}

.b-t-5 {
	border-top-style: solid;
	border-width: 1rem;
}

.b-r-0 {
	border-right-style: solid;
	border-width: 0;
}

.b-r-1 {
	border-right-style: solid;
	border-width: 0.2rem;
}

.b-r-2 {
	border-right-style: solid;
	border-width: 0.4rem;
}

.b-r-3 {
	border-right-style: solid;
	border-width: 0.6rem;
}

.b-r-4 {
	border-right-style: solid;
	border-width: 0.8rem;
}

.b-r-5 {
	border-right-style: solid;
	border-width: 1rem;
}

.b-b-0 {
	border-bottom-style: solid;
	border-width: 0;
}

.b-b-1 {
	border-bottom-style: solid;
	border-width: 0.2rem;
}

.b-b-2 {
	border-bottom-style: solid;
	border-width: 0.4rem;
}

.b-b-3 {
	border-bottom-style: solid;
	border-width: 0.6rem;
}

.b-b-4 {
	border-bottom-style: solid;
	border-width: 0.8rem;
}

.b-b-5 {
	border-bottom-style: solid;
	border-width: 1rem;
}

.b-l-0 {
	border-left-style: solid;
	border-width: 0;
}

.b-l-1 {
	border-left-style: solid;
	border-width: 0.2rem;
}

.b-l-2 {
	border-left-style: solid;
	border-width: 0.4rem;
}

.b-l-3 {
	border-left-style: solid;
	border-width: 0.6rem;
}

.b-l-4 {
	border-left-style: solid;
	border-width: 0.8rem;
}

.b-l-5 {
	border-left-style: solid;
	border-width: 1rem;
}

.b-round {
	border-radius: 25%;
}

.b-circle {
	border-radius: 50%;
}

/* #endregion */

/* #region positions */

.padding-center {
	padding: 25px 50px;
}

.padding-top {
	padding-top: 18px;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.pos-relative {
	position: relative;
}

.pos-absolute {
	position: absolute;
}

.pos-fixed {
	position: fixed;
}

.f-left {
	float: left;
}

.f-right {
	float: right;
}

.f-clear {
	clear: both;
}

/* #endregion */

/* #region display */

.d-hidden {
	visibility: hidden;
}

.d-none {
	display: none;
}

@media only screen and (max-width: 1366px) {
	.d-lg-hidden {
		visibility: hidden;
	}

	.d-lg-none {
		display: none;
	}
}

@media only screen and (max-width: 1024px) {
	.d-md-hidden {
		visibility: hidden;
	}

	.d-md-none {
		display: none;
	}
}

@media only screen and (max-width: 720px) {
	.d-sm-hidden {
		visibility: hidden;
	}

	.d-sm-none {
		display: none;
	}
}

/* #endregion */

/* #region flex */

.d-flex {
	display: flex;
}

.f-wrap {
	flex-wrap: wrap;
}

.f-nowrap {
	flex-wrap: nowrap;
}

.f-j-left {
	justify-content: flex-start;
}

.f-j-center {
	justify-content: center;
}

.f-j-right {
	justify-content: flex-end;
}

.f-a-top {
	align-items: flex-start;
}

.f-a-center {
	align-items: center;
}

.f-a-bottom {
	align-items: flex-end;
}

.f-a-self-top {
	align-self: flex-start;
}

.f-a-self-center {
	align-self: center;
}

.f-a-self-bottom {
	align-self: flex-end;
}

/* #endregion */

/* #region pictures */

.pic-cover,
.pic-contain {
	background-position: center;
	background-repeat: no-repeat;
}

.pic-cover {
	background-size: cover;
}

.pic-contain {
	background-size: contain;
}

.pic-photo {
	padding: 48px;
}

.pic-card {
	height: 250px;
}

.big-picture {
	width: 100%;
	height: 500px;
}

/* #endregion */

/* #region  forms */

.button {
	padding: 10px 20px;
	border-radius: 10px;
	border-style: solid;
	background: #696969;
	border-color: #696969;
	box-shadow: 0 0 10px #00000067;
	color: white;
	font-size: 1.1rem;
}

.button:hover {
	background: #7e7e7e;
	border-color: #7e7e7e;
}

.button-blue {
	background: #6abfc3;
	border-color: #6abfc3;
}

.button-blue:hover {
	background: #87cbce;
	border-color: #87cbce;
}

.button-yellow {
	border-color: #cc9543;
	background: #cc9543;
}

.button-yellow:hover {
	background: #d4a866;
	border-color: #d4a866;
}

/* #endregion */

/* #region spacing */

.spacing-1 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.spacing-2 {
	margin-top: 40px;
	margin-bottom: 40px;
}

.spacing-3 {
	margin-top: 60px;
	margin-bottom: 60px;
}

.spacing-4 {
	margin-top: 80px;
	margin-bottom: 80px;
}

.spacing-5 {
	margin-top: 100px;
	margin-bottom: 100px;
}

/* #endregion */

/* #region navbar */

.navbar {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.nav-row {
	flex-direction: row;
}

.nav-col {
	flex-direction: column;
}

.nav-item {
	text-align: center;
	margin-left: 10px;
	margin-right: 10px;
}

/* #endregion */

/* #region grids */

.grid-start-1 {
	grid-column-start: 1;
}

.grid-start-2 {
	grid-column-start: 2;
}

.grid-start-3 {
	grid-column-start: 3;
}

.grid-start-4 {
	grid-column-start: 4;
}

.grid-start-5 {
	grid-column-start: 5;
}

.grid-start-6 {
	grid-column-start: 6;
}

.grid-start-7 {
	grid-column-start: 7;
}

.grid-start-8 {
	grid-column-start: 8;
}

.grid-start-9 {
	grid-column-start: 9;
}

.grid-start-10 {
	grid-column-start: 10;
}

.grid-start-11 {
	grid-column-start: 11;
}

.grid-start-12 {
	grid-column-start: 12;
}

.grid-1,
.grid-lg-1,
.grid-md-1,
.grid-sm-1 {
	grid-column-end: span 1;
}

.grid-2,
.grid-lg-2,
.grid-md-2,
.grid-sm-2 {
	grid-column-end: span 2;
}

.grid-3,
.grid-lg-3,
.grid-md-3,
.grid-sm-3 {
	grid-column-end: span 3;
}

.grid-4,
.grid-lg-4,
.grid-md-4,
.grid-sm-4 {
	grid-column-end: span 4;
}

.grid-5,
.grid-lg-5,
.grid-md-5,
.grid-sm-5 {
	grid-column-end: span 5;
}

.grid-6,
.grid-lg-6,
.grid-md-6,
.grid-sm-6 {
	grid-column-end: span 6;
}

.grid-7,
.grid-lg-7,
.grid-md-7,
.grid-sm-7 {
	grid-column-end: span 7;
}

.grid-8,
.grid-lg-8,
.grid-md-8,
.grid-sm-8 {
	grid-column-end: span 8;
}

.grid-9,
.grid-lg-9,
.grid-md-9,
.grid-sm-9 {
	grid-column-end: span 9;
}

.grid-10,
.grid-lg-10,
.grid-md-10,
.grid-sm-10 {
	grid-column-end: span 10;
}

.grid-11,
.grid-lg-11,
.grid-md-11,
.grid-sm-11 {
	grid-column-end: span 11;
}

.grid-12,
.grid-lg-12,
.grid-md-12,
.grid-sm-12 {
	grid-column: span 12;
}

@media only screen and (max-width: 1366px) {
	.grid-lg-1,
	.grid-lg-2,
	.grid-lg-3,
	.grid-lg-4,
	.grid-lg-5,
	.grid-lg-6,
	.grid-lg-7,
	.grid-lg-8,
	.grid-lg-9,
	.grid-lg-10,
	.grid-lg-11,
	.grid-lg-12 {
		grid-column: span 12;
	}
}

@media only screen and (max-width: 1024px) {
	.grid-md-1,
	.grid-md-2,
	.grid-md-3,
	.grid-md-4,
	.grid-md-5,
	.grid-md-6,
	.grid-md-7,
	.grid-md-8,
	.grid-md-9,
	.grid-md-10,
	.grid-md-11,
	.grid-md-12 {
		grid-column: span 12;
	}
}

@media only screen and (max-width: 720px) {
	.grid-sm-1,
	.grid-sm-2,
	.grid-sm-3,
	.grid-sm-4,
	.grid-sm-5,
	.grid-sm-6,
	.grid-sm-7,
	.grid-sm-8,
	.grid-sm-9,
	.grid-sm-10,
	.grid-sm-11,
	.grid-sm-12 {
		grid-column: span 12;
	}
}

/* #endregion */