@font-face {
	font-family: Lato;
	src: url("./Lato-Regular.ttf");
}
:root {
	--scrollbar-width: 17px;
	--full-width: 100%;
	--menu-height: 100px;
	--menu-item-margin: 15px;
	--focus-gain-height: 150px;
	--menu-bottom-padding: 150px;
	--bottom-menu-item-margin: 5px;
	--menu-item-margin: 15px;
}
body {
	margin: 0;
	font-family: Lato; 
}
#menu, #menu-part {
	height: var(--menu-height);
	width: var(--full-width);
	display: flex;
	position: fixed;
	flex-direction: row;
	align-items: center;
	justify-content: right;
	background: gray;
	color: white;
	z-index: 1;
}
#left {
	margin-right: auto;
	margin-left: var(--menu-item-margin);
}
ul {
	list-style-type: none;
	display: flex;
	flex-direction: row;
}
li {
	margin: var(--bottom-menu-item-margin);
}
#menu ul {
	margin-right: 17.5px;
}
#menu ul li {
	margin: var(--menu-item-margin);
}
#main, #focus-gain, #text-one, #text-two, #join, #mb-content {
	display: flex;
	overflow: hidden;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: var(--full-width);
}
#main {
	min-height: calc(100dvh - var(--menu-height) - var(--focus-gain-height));
	background: url("./img/background.png");
	background-size: cover !important;
	background-position: center !important;
}
#focus-gain {
	height: var(--focus-gain-height);
}
#text-one, #text-two, #mb-content {
	max-width: var(--full-width);
	justify-content: unset;
	flex-direction: row;
	background: url("./img/background2.png");
	background-size: cover !important;
	background-position: center !important;
}
.text-section {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ts-right {
	margin-right: 100px;
	margin-left: initial;
	align-items: end;
	text-align: right;
	color: white;
}
#text-two {
	background: url("./img/background7.png");
}
#join {
	height: 80dvh;
	text-align: center;
}
#btn {
	background: green;
	padding: 15px;
	color: white;
}
#join h1, #btn p, .news h3 {
	margin: 0;
}
#menu-bottom {
	padding: 0 var(--menu-bottom-padding) 0 var(--menu-bottom-padding);
	background: #5B5B5B;
}
#mb-content {
	width: 100%;
	height: 300px;
	background: #5B5B5B;
	color: white;
}
.mb-column {
	width: calc((100% - (2 * var(--menu-bottom-padding))) / 4);
	padding: 50px;
}
.mb-column ul {
	flex-direction: column;
	margin: 0;
}
#mb-content {
	align-items: flex-start;
}
.mb-img {
	margin: 5px;
}
h2 {
	margin: 0;
	margin-bottom: 10px;
}
.news {
	min-height: calc(100dvh - var(--menu-height)) !important;
	background: url("./img/background4.png") !important;
}
#news {
	width: 1150px;
	min-height: 600px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	background: rgba(0, 0, 0, 50%);
	margin-bottom: 21.44px;
}
#last-post {
	width: 40%;
	padding: 50px;
}
#author {
	margin-top: 10px;
}
#author, #next-post {
	display: flex;
	width: 100%;
	flex-direction: row;
	align-items: center;
}
#next-posts {
	width: 60%;
	padding: 50px;
}
#post {
	min-height: calc(100dvh - var(--menu-height) - 1em);
	padding: 0 25px;
}
#avatar {
	width: 25px;
	height: 25px;
	margin-right: 5px;
}
#post-picture {
	width: 100%;
	border-radius: 15px;
}
.contact h1 {
	margin-top: 0;
	text-align: center;
	max-width: calc(var(--full-width) * 0.8);
}
#divide {
	width: 2px;
	height: 500px;
	background: rgba(255, 255, 255, 50%);
}
.news {
	color: white;
}
.news a, #menu a, #menu-bottom a {
	color: aqua;
	text-decoration: none;
	-webkit-text-decoration-line: none;
}
.logo {
	width: 250px;
}
.logo_fix {
	margin: 0 -10px 0 -10px;
}
#menu a, #menu-bottom a, #link-fix {
	color: white;
}
#menu-fill {
	height: var(--menu-height);
}
#contact {
	display: flex;
	max-width: calc(var(--full-width) * 0.8);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 30px;
	background: rgba(0, 0, 0, 50%);
	padding: 100px 75px;
	text-align: center;
}
#contact p {
	margin-bottom: 0;
}
.clickable {
	color: aqua !important;
}
.next-post-picture {
	width: 200px;
	margin: 25px 20px 0 0;
	border-radius: 15px;
}
.next-post-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
#text-visibility {
	margin-top: 50px;
}
.all-posts, .all-products {
	align-items: unset !important;
}
.news h3 {
	margin-top: 35px;
	color: white;
}
.product {
	background: rgba(0, 0, 0, 50%);
	width: 100%;
	padding: 10px 20px 10px 20px;
	border-radius: 15px;
	margin-bottom: 10px;
}
.product h3 {
	margin-top: 15px;
}
.product-fix {
	justify-content: left !important;
}
#product-box {
	margin-left: 30px;
	margin-top: 10px;
	max-width: 80%;
}
a {
	color: white;
	text-decoration: none;
}
::-webkit-scrollbar {
	width: var(--scrollbar-width);
	background: #414141;
}
::-webkit-scrollbar-thumb {
	background: #656565;
}
::-webkit-scrollbar-thumb:hover {
	background: #939393;
}
@media only screen and (max-width: 1455px) {
	.text-break {
		display: none;
	}
}
@media only screen and (max-width: 1200px) {
	#text-one, #text-two {
		flex-direction: column;
		justify-content: center;
	}
	.text-section {
		text-align: center;
		width: 600px;
	}
	.to-right {
		margin-left: unset;
	}
	.text-section, .graphic-section {
		margin: 25px 0 25px 0 !important;
		max-width: calc(var(--full-width) * 0.8);
	}
	.ts-right {
		align-items: unset;
	}
	#news {
		width: 90vw;
		min-height: 70dvh;
		flex-direction: column;
	}
	#divide {
		width: 80%;
		height: 2px;
	}
	#last-post {
		text-align: center;
		display: flex;
		justify-content: center;
	}
	p {
		word-wrap: break-word;
		max-width: 80vw;
	}
	#post-picture {
		width: 80vw;
	}
	#next-posts {
		padding: 50px 0 50px 0;
	}
	.news {
		background: url("./img/backgroundm.png") !important;
	}
}
.text-section, .graphic-section {
	margin: 0 150px 0 150px;
}
.to-right {
	display: flex;
	justify-content: center;
	margin-left: auto;
}
ul {
	padding-inline-start: 0;
}
@media only screen and (max-width: 900px) {
	.next-post-picture {
		width: 80vw;
		margin: 25px 0 0 0;
	}
	#next-post {
		flex-direction: column;
	}
	#next-posts {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		width: unset;
	}
	.mb-img p {
		text-align: center;
	}
}
.text-section h1 {
	margin: 0;
}
#join h1 {
	max-width: calc(var(--full-width) * 0.8);
}
@media only screen and (max-width: 1250px) {
	#menu-bottom {
		padding: unset;
	}
	#menu-bottom {
		min-height: calc(100dvh - var(--menu-height));
	}
	#mb-content {
		height: unset;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		min-height: calc(100dvh - var(--menu-height));
	}
	.mb-column ul {
		text-align: center;
	}
	.mb-column {
		width: unset;
		padding: 50px 0 50px 0;
	}
	.mb-column p {
		margin: 5px;
	}
	.mb-img {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.logo_fix {
		margin-bottom: 15px;
	}
}
.products {
	padding: 50px !important;
}
#menu-part {
	display: none;
	height: unset;
	margin-top: var(--menu-height);
	justify-content: unset;
	background: #5B5B5B;
}
#menu-part ul {
	display: unset;
}
#menu-part ul li a {
	color: white;
}
#menu-part ul li {
	margin: 25px;
}
@media only screen and (max-width: 700px) {
	.menu-full {
		display: none;
	}
	#menu-icon {
		display: unset !important;
	}
	#contact {
		margin: 0 15px;
	}
}
#menu-icon {
	display: none;
	margin-right: 22.5px;
}
#menu-icon:hover {
	cursor: pointer;
}
@media only screen and (min-width: 700px) {
	#menu-part {
		display: none !important;
	}
}
@media only screen and (max-width: 375px) {
	.logo {
		width: 200px;
	}
	#menu-icon {
		width: 45px;
		margin-right: 20px;
	}
}
@media only screen and (max-width: 320px) {
	.logo {
		width: 150px;
	}
	#main-text {
		font-size: 25px !important;
	}
	#main-subtext {
		margin-top: 2.5px !important;
	}
	#menu-icon {
		width: 40px;
	}
}
#text-one, #text-two {
	min-height: calc(100dvh - var(--menu-height));
}
#main-subtext {
	font-size: 27.5px;
	opacity: 0;
	margin: 20px 0 0 0;
	animation: 1s main-subtext-fade forwards 2.5s;
}
#main-text {
	font-size: 75px;
	margin: 0;
	color: white;
	filter: blur(10px);
	transform: translate(100vw, -100vh);
	animation: 2.5s main-text-slide forwards;
}
@keyframes main-text-slide {
	from {
		filter: blur(20px);
		transform: translate(100vw, -27.5vh);
	}
	to {
		filter: blur(0px);
		transform: translate(0, 0);
	}
}
@keyframes main-subtext-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@media only screen and (max-width: 800px) {
	#main-text {
		font-size: 60px;
	}
	#main-subtext {
		margin-top: 15px;
	}
}
@media only screen and (max-width: 650px) {
	#main-text {
		font-size: 50px;
	}
	#main-subtext {
		margin-top: 10px;
	}
}
@media only screen and (max-width: 550px) {
	#main-text {
		font-size: 40px;
	}
	#main-subtext {
		margin-top: 7.5px;
		font-size: 25px;
	}
}
@media only screen and (max-width: 450px) {
	#main-text {
		font-size: 30px;
	}
	#main-subtext {
		margin-top: 5px;
		font-size: 20px;
	}
}
@media only screen and (max-width: 275px) {
	#main-text {
		font-size: 20px !important;
	}
	#main-subtext {
		margin-top: 0px !important;
		font-size: 15px;
	}
	.logo {
		width: 112.5px;
	}
	#menu-icon {
		width: 30px;
		margin-right: 17.5px;
	}
	:root {
		--menu-height: 87.5px;
	}
}
#main-text, #main-subtext {
	text-align: center;
}
@media only screen and (max-width: 220px) {
	#main-text {
		font-size: 15px !important;
	}
	#main-subtext {
		font-size: 10px;
	}
	#menu-icon {
		margin-right: 9.5px;
	}
	:root {
		--menu-height: 75px;
		--menu-item-margin: 10px;
	}
}
@media only screen and (max-width: 175px) {
	#main-text {
		font-size: 12.5px !important;
	}
	#main-subtext {
		font-size: 7.5px;
	}
}
@media only screen and (max-width: 190px) {
	.logo {
		width: 85px;
	}
	#menu-icon {
		width: 17.5px;
	}
}
@media only screen and (max-width: 160px) {
	.logo {
		width: 82.5px;
	}
	#menu-icon {
		width: 15px;
	}
}
.center {
	text-align: center;
}
.product-page {
	background: url("./img/background3.png") !important;
}
.contact {
	background: url("./img/background5.png") !important;
	min-height: calc(100vh - var(--menu-height)) !important;
}
#main h1, #news h2, #news p, #news h3, .contact h2, .contact p {
	text-shadow: 0 0 10px black;
}
#next-post img, #last-post img {
	box-shadow: 0 0 7.5px black;
}
p, h1, h2, h3, a {
	opacity: 0;
}
html {
	scrollbar-width: var(--scrollbar-width);
	scrollbar-color: #656565 #414141;
}
.clickable-blue, #post a {
	color: blue !important;
}
