@media screen and (max-width: 1200px) {
	.navbar {
		display: none;
	}

	.navbar-mobile {
		display: block;
	}

	.project-container {
		/*display: block;*/
		width: 98%;
		margin: 50px auto 50px auto;
		text-align: center;
		flex-wrap: wrap;
	}

	.project-title {
		width: 100%;
	}

	.container-flex {
		flex-wrap: wrap;
		width: 95%;
		padding-left: 2.5%;
		padding-right: 2.5%;
	}

	.experience-dot {
		display: none;
	}

	.experience-year {
		writing-mode: sideways-lr;
		text-orientation: upright;
		width: 20px;
	}

	.experience-content {
		width: 80%;
	}
}

@media screen and (max-width: 400px) {
	.intro-title {
		font-size: 2rem;
	}

	.intro-arrow-text {
		font-size: 0.5rem;
	}

	.progress-container {
		width: 300px;
	}

	.project-container {
		margin: 50px auto 200px auto;
	}

	.container-flex {
		flex-wrap: wrap;
		width: 100%;
		padding-left: 0%;
		padding-right: 0%;
	}

	.experience-content {
		width: 85%;
	}

	.experience-body {
		font-size: 0.8em;
	}

	.information-box-container td {
		font-size: 0.8em;
	}

	.information-box-container h1 {
		font-size: 1em;
	}
}