@charset "utf-8";

/************
1440px
************/

@media only screen and (max-width: 1440px) {
	
	.general_info {
		width: 400px;
	}

	.general_info_fixed {
		width:400px;
		left:12px;
	}

}

/************
1280px
************/

@media only screen and (max-width: 1280px) {
	
	.exp_item {
		margin-left:18px;
	}

}

/************
1199px
************/

@media only screen and (max-width: 1199px) {
	
	.super_container {
		width: 100%;
		height: auto;
	}

	.general_info {
		width: 100%;
	}

	.main_content_outer {
		height: auto;
	}

	.main_content {
		width: 100%;
	}

	.general_info_title {
		font-size: 24px;
	}

	.general_info_fixed {
		position: relative;
		width: 100%;
	}

	#myBtn {
		/* display: none !important;  */
		max-width: 60px;
		max-height: 60px;
	}

	.grid__description {
		margin: -18px;
	}

	.exp_text {
		margin:0px;
	}

}

/************
1024px
************/

@media only screen and (max-width: 1024px) {

	.project-description-column {
		width: 100%;
	}

	.add-top-margin-responsive {
		margin-top: calc(300px + 2.5%);
	}

	.general_info_image {
		width:300px;
	}
	
	.exp_image, .edu_image {
		max-width:75px;
		margin-left:18px;
	}

	/* .main_title_small {
		padding-left: 24px;
	} */

	.p {
		padding-left: 24px;
	}

}

/************
959px
************/

@media only screen and (max-width: 930px) {

	.menu {
		width: 15%;
	}

}

/************
880px
************/

@media only screen and (max-width: 880px) {

	.grid-container {
		display: grid;
		grid-template-columns: calc((100% - 243px) / 2.8) calc((100% - 243px) / 2.8) calc((100% - 243px) / 2.8) calc((100% - 243px) / 2.8);
		grid-auto-rows: auto;
		grid-gap: 10px;
	}

}

/************
767px
************/

@media only screen and (max-width: 767px) {

	.general_info_content {
		padding-bottom: 40px;
	}

	.main_subtitle {
		font-size: 24px;
	}
	
	.grid-container {
		display: grid;
		grid-template-columns: calc((100% - 190px) / 2.25) calc((100% - 190px) / 2.25) calc((100% - 190px) / 2.25);
		grid-auto-rows: auto;
		grid-gap: 10px;
	}
	
	.exp_image, .edu_image {
		display: none;
	}

}

/************
575px
************/

@media only screen and (max-width: 575px) {

	.portfolio_item_title {
		font-size: 14px;
		line-height: 1.1;
		width: 90%;
	}

	.portfolio_item_link {
		font-size: 12px;
		line-height: 1.1;
	}

	.super_container
	{
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 60px;
	}
	
	.main_content {
		padding-left: 30px;
		padding-right: 30px;
	}

	.main_content_scroll {
		padding-right: 0;
	}

	.main_subtitle {
		font-size: 18px;
	}

	.about_title {
		font-size: 24px;
	}

	.portfolio_category {
		font-size: 16px;
	}

	.portfolio_category:not(:last-child) {
		margin-right: 21px;
	}

	.portfolio_item {
		width: 85%;
	}

	.exp_time {
		text-align: left;
	}

	.edu_title {
		line-height: 1.2;
		margin-top:12px;
	}

	.grid-container {
		display: grid;
		grid-template-columns: calc((100% - 220px) / 1.75) calc((100% - 220px) / 1.75) calc((100% - 220px) / 1.75);
		grid-auto-rows: auto;
		grid-gap: 10px;
	}
	
}

/************
480px
************/

@media only screen and (max-width: 480px) {
	
	.general_info_content {
		padding-left: 18px;
	}

	.general_info_text {
		font-size: 16px;
	}

	.portfolio_item_title {
		font-size: 12px;
		line-height: 1;
		width: 100%;
	}

	.portfolio_item_link {
		width: 100%;
		font-size: 11px;
		line-height: 1;
	}

	.exp_title {
		line-height: 1;
	}

	.achievement_img {
		max-width: 45px;
		max-height: 45px;
	}

	.achievement_text {
		font-size: 12px;
		font-weight: 500;
		color: #000000;
	}

	.achievement_counter {
		font-size: 24px;
		font-weight: 700;
		color: #000000;
		margin-top: 6px;
	}

	.achievement_subtitle_text {
		font-size: 12px;
		font-weight: 400;
		color: #000000;
		padding-bottom: 6px;
	}

	.skill_title {
		font-size: 14px;
		font-weight: 600;
		color: #000000;
		line-height: 1;
		padding-top: 6px;
	}

	.skill_year {
		font-size: 12px;
		font-weight: 500;
		color: #000000;
		line-height: 1;
		padding-top: 6px;
	}

	.grid-container {
		display: grid;
		grid-template-columns: calc((100% - 195px) / 1.6) calc((100% - 195px) / 1.6) calc((100% - 195px) / 1.6);
		grid-auto-rows: auto;
		grid-gap: 8px;
	}
}