::-webkit-scrollbar {
			    
    width: 9px;
    /*right: 10px;*/
}
			 
::-webkit-scrollbar-track {
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background: rgb(255, 255, 255);
}
			 
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 9px;
    border-radius: 9px;
    background: rgb(200, 200, 200);  
}

::-webkit-scrollbar-thumb:window-inactive {
	background: rgb(200, 200, 200); 
}

:root {
  --bg-color: rgb(255,255,255);
  --dark-gray: rgb(60,60,60);
}




body{

	background-color: var(--bg-color);
	margin: 0 auto;
	font-family: "Inter", sans-serif;
	font-size: 1.5vw;
	font-weight: 250;
	/* The second value here is a fallback. */
/*	cursor: url(../img/cursor.svg) 15 15, move;*/



  /* You may need coordinates to adjust the pointer
     for example, the custom cursor is circular and you want
     the middle to be where you click */
/* 	cursor: url(target.svg) 15 15, move;*/
}

@media only screen and (max-width: 1024px) {
  body{
  	font-size: 3vw;
  }
}

.ctn_gradient_bar{
	position: fixed;
	width: 100%;
	height: 4vw;
	z-index: 97;
}

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

	.ctn_gradient_bar{

		height: 12.5vw;
	}
  
}

.img_gradient_bar{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.logo_icon_gray{

	position: fixed;
	width: 12vw;
	height: auto;
	z-index: 98;
	left: 1vw;
	top: 1vw;
}

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

	.logo_icon_gray{

		width: 40vw;
		top: 3vw;
		left: 2vw;
	}

}

.menu_icon_gray2{

	position: fixed;
	z-index: 99;
	right: 1.2vw;
	top: 1vw;
	cursor: pointer;
	color: #787878;
	text-align: right;
	font-size: 1.3vw;
	font-weight: 350;
	transition: all 0.2s ease-in-out;
}

.menu_icon_gray2:hover{

	color: #f72323;
}

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

	.menu_icon_gray2{

		font-size: 4.33vw;
		top: 3vw;
		right: 2vw;
	}

}


.lang_ctn{

	position: fixed;
	width: 3vw;
	height: auto;
	left: 0vw;
	bottom: 3vh;
	z-index: 99;
/*	background-color: hotpink;*/
}

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

	.lang_ctn{

		width: 15vw;
		bottom: 1.5vh;
	}

}



.lang_text{

	width: 100%;
	text-align: center;
	font-weight: 350;
	text-decoration: none;
	color: rgb(50, 50, 50);
	font-size: 1.0vw;
	float: left;
/*	background-color: blue;*/
	margin: 0.5vh 0vw;
	cursor: pointer;
}

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

	.lang_text{

		font-size: 4vw;
	}

}

.lang_text:hover{

	color: #f72323;
}

.text_red{

	color: #f72323;
}

.to_be_fixed_after{

	position: fixed;
	width: 100%;
	height: 100%;
/*	background-color: blue;*/

}

.spacer1{
	position: relative;
	width: 100%;
	height: 4.2vw;
}

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

	.spacer1{

		height: 13vw;
	}  

}


.ctn_project{
	
	position: relative;
	width: 100%;
	height: auto;
/*	background-color: grey;*/
	border-width: 0px 0px 0.7px 0px;
	border-color: #787878;
	border-style: solid;


}

#ctn_project_top{

	border-width: 0.7px 0px 0.7px 0px;

}

.ctn_project_title{

	position: relative;
	width: 100%;
	height: 3vw;
	cursor: pointer;
	color: rgb(50, 50, 50);
/*	background-color: yellow;*/
	transition: 0.3s;
	font-weight: 400;
	opacity: 0.5;
}

.ctn_project_title:hover{
/*	background-color: rgb(240, 240, 240);*/
opacity: 1;
}

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

	.ctn_project_title{

		height: 12vw;
		font-size: 6vw;
	}

	.ctn_project_title:hover{
		background-color: rgb(255, 255, 255);
	}
  
}

.project_title{

	position: absolute;
	width: auto;
	height: auto;
/*	background-color: blueviolet;*/
	text-align: left;
	top: 50%;
	left: 6vw;
	transform: translate(0%,-50%);
	-webkit-transform: translate(0%,-50%);
	-ms-transform: translate(0%,-50%);
	
}



.project_year{

	position: absolute;
	text-align: right;
/*	background-color: blueviolet;*/
	top: 50%;
	right: 6vw;
	transform: translate(0%,-50%);
	-webkit-transform: translate(0%,-50%);
	-ms-transform: translate(0%,-50%);
	
}

.ctn_project_content{

	position: relative;
	width: 100%;
	/*	height: 30vw;*/
	height: 0vw;
/*	background-color: deeppink;*/
/*	transition: 0.5s;*/
}

.ctn_project_content_open{
	height: 36vw;
/*	background-color: yellowgreen;*/
}

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

	.ctn_project_content_open{

		height: auto;
	}
  
}

.project_text{

	position: absolute;
	opacity: 0;
	width: 25vw;
/*	height: auto;*/
	height: 0vw;
/*	background-color: blue;*/
	top: 2vw;
	left: 10vw;
/*	font-size: 1vw;*/
	font-size: 0vw;
	color: rgb(80, 80, 80);
	font-weight: 350;
/*	transition: 0.5s;*/

}

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

	.project_text{

		position: relative;
		width: 90%;
		left: 5%;
	}
  
}

.project_text_open{
	height: auto;
	font-size: 0.9vw;
	opacity: 1;
}

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

		font-size: 5vw;
		top: 0vw;
		padding-top: 5vw;
	}

}

.ctn_project_cover{

	position: absolute;
	opacity: 0;
	background-color: rgb(240, 240, 240);
	width: 30vw;
	height: 0vw;
/*	background-color: limegreen;*/
	right: 20vw;
	top: 2vw;
	overflow: hidden;
	cursor: pointer;
	opacity: 0;
/*	transition: 0.5s;*/
	cursor: url(../../img/cursor_plus_red.svg) 15 15, move;
}

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

	.ctn_project_cover{

		position: relative;
		width: 90vw;
		left: 5vw;
		background-color: rgba(255, 255, 255, 0.0);
	}
  
}

.ctn_project_cover_open{

	height: 30vw;
	opacity: 1;
	
}

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

		height: 100vw;
		margin-top: 5vw;
		top: 0vw;
	}


}

.img_project_cover{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transition: 0.5s;

}

.img_project_cover:hover{

	width: 105%;
	height: 105%;
	opacity: 0.5;
}

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

	.img_project_cover{
		width: 90vw;
		height: 90vw;
}

.img_project_cover:hover{
		width: 90vw;
		height: 90vw;
		opacity: 1;
}
  
}

.ctn_more_img_fixed{

	position: fixed;
	top: 0px;
	left: 50%;
	width: 0px;
	height: 0px;
	opacity: 0;
	background-color: rgba(255, 255, 255, 0.9);
	z-index: 100;
/*	transition: 0.5s;*/
	transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
/*	background-color: red;*/

}

.ctn_more_img_fixed_after{
	width: 100%;
	height: 100%;
	opacity: 1;
}

.ctn_more_img_absolute{

	position: absolute;
	width: 100%;
	height: 100%;
/*	background-color: blue;*/
	overflow: auto;
}

.ctn_images{

	position: absolute;
	width: 40%;
	height: auto;
	left: 50%;
	padding-top: 0vw;
	padding-bottom: 0vw;
	transform: translate(-50%,0%);
	-webkit-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
/*	background-color: limegreen;*/
}

@media only screen and (max-width: 1024px) {
  
	.ctn_images{
		width: 95%;
	}

}

.ctn_images_after{
	
	padding-top: 2vw;
	padding-bottom: 10vw;

}

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

	.ctn_images_after{

		padding-top: 1vw;
		padding-bottom: 1vw;
	}
  
}

.img_project{

	position: relative;
	width: 100%;
	height: auto;
}

.btn_more{
	cursor: pointer;
}

.close_projects{

	position: fixed;
	z-index: 100;
	right: 1.2vw;
	top: 1vw;
	cursor: pointer;
	color: #787878;
	text-align: right;
	font-size: 1.3vw;
	font-weight: 350;
	transition: all 0.2s ease-in-out;
}

.close_projects:hover{

	color: #f72323;
}

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

	.close_projects{

		position: fixed;
		font-size: 4.33vw;
		top: 3vw;
		right: 2vw;
	}

}

.opacity0{

	opacity: 0;
}

.opacity1{

	opacity: 1;
}