/* RESPONSIVE DESIGN */

@media only screen and (max-width: 1000px) {
	html {
		font-size: var(--small-font-size);
	}
	.container_main {
		flex-direction: column;
	}
	.container_main > * {
		margin: 20px;
	}
	.aside_left {
		position: relative;
	}
	/*NAVBAR*/
	nav.navbar {
		flex-direction: column;
		height: auto;
	}
	.navbar .nav_left {
		flex-direction: column;
		height: auto;
		width: 100%;
	}
	.navbar .nav_left a#nav_logo {
		display: flex;
		margin-bottom: 0px;
		margin-left: 0px;
		width: auto;
	}
	.navbar .nav_left > a:not(#nav_logo) {
		display: none;
		margin-left: 0px;
		width: 100%;
		height: 50px;
	}
	.navbar .nav_left > a p {
		margin-left: 20px;
	}
	.navbar .nav_right {
		height: auto;
		width: 100%;
		display: none;
		margin-left: 28px;
	}
	.navbar .nav_right > a {
		height: 50px;
		margin: 0px;
	}
	/*burger menu*/
	nav.navbar input#burger {
		display: none;
	}
	nav.navbar .burger {
		position: absolute;
		right: 0px;
		top: 0px;
		height: var(--nav-height);
		width: 50%;
		cursor: pointer;
	}
	nav.navbar .burger::before {
		content: "";
		position: absolute;
		right: 20px;
		top: 10px;
		width: 26px;
		height: 14px;
		border-top: 2px solid var(--color-grey-dark);
		border-bottom: 2px solid var(--color-grey-dark);
	}
	nav.navbar .burger::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 18px;
		width: 26px;
		height: 2px;
		border-top: 2px solid var(--color-grey-dark);
	}
	nav.navbar #burger:checked + .burger {
		cursor: default;
	}
	nav.navbar #burger:checked ~ .nav_right {
		display: flex;
	}
	nav.navbar #burger:checked ~ .nav_left a {
		display: flex;
	}
	nav.navbar #burger:checked ~ .nav_left a:not(#nav_logo) {
	}
	nav.navbar #burger:checked ~ .nav_left a#nav_logo {
		display: flex;
		margin-bottom: 40px;
	}
	nav.navbar #burger:checked + .burger::before {
		transform: rotate(40deg);
		top: 18px;
		right: 21px;
		height: 2px;
		border-bottom: none;
	}
	nav.navbar #burger:checked + .burger::after {
		transform: rotate(-40deg);
	}
	nav.navbar .burger:checked::after {
	}
	/*MAIN*/
	main {
		max-width: 90%;
	}
	main .image {
		flex-wrap: wrap;
	}
	main .image img {
		margin-bottom: 20px;
	}
	.image h1, .image h2, .image h3, .image p {
		margin-left: 0px;
	}
	/*INDEX*/
	.logo_links#index_links {
		flex-direction: column;
	}
	body#body_index {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
	}
	main#index {
		height: auto;
	}
	.logo_links#index_links h3 {
		margin: 10px auto;
	}
	.logo_links#index_links {
		margin-bottom: 20px;
	}
}