@primary-light-100:#E7DEFE;
@primary-light-200:#CEBEFE;
@primary-light-300:#B49DFE;
@primary-light-400:#9F84FD;
@primary-default-500:#7C5CFC;
@primary-hover-600:#5E43D8;
@primary-dark-700:#432EB5;
@primary-dark-800:#2D1D92;
@secondary-light-100:#F5FCD2;
@secondary-light-200:#E8FAA6;
@secondary-light-300:#D3F178;
@secondary-light-400:#BCE455;
@secondary-default-500:#9CD323;
@secondary-hover-600:#7FB519;
@secondary-dark-700:#659711;
@secondary-dark-800:#4C7A0B;
@info-default:#209CEE;
@info-hover:#0E75B9;
@info-light:#ECF7FE;
@success-default:#48C774;
@success-hover:#257942;
@success-light:#EFFAF3;
@warning-default:#FFDD57;
@warning-hover:#947600;
@warning-light:#FFFBEB;
@danger-default:#FF3860;
@danger-hover:#DB002C;
@white-100:#F5F5F5;
@white-200:#FAFAFA;
@white-300:#FFFFFF;
@gray-secondary:#8080A4;
@gray-tertiary:#BEBED0;
@black-100:#0A0A0A;
@black-200:#121212;
@black-300:#242424;
@black-400:#363636;
@black-500:#4A4A4A;
@black-600:#7A7A7A;
@black-700:#B5B5B5;
@black-800:#DBDBDB;
@body-background-primary:#FBF9FF;


.members {width: calc(100% - 774px);
	   height: auto;
	   float: left;
	   margin-left: 339px;
	   margin-top: 0px;
	   font-family: 'Inter';
	   .container {width: 100%;
	   			   height: auto;
	   			   float: left;
	   			   padding: 0;
	   			   max-width: 100%;
	   			   .top {width: 100%;
	   			   		 height: 114px;
	   			   		 float: left;
	   			   		 background-image:url(../images/content-top-background.png);
	   			   		 background-size:86%;
	   			   		 background-repeat:no-repeat;
	   			   		 background-position:center;
	   			   		 background-color:#6B4EE7;
	   			   		 border:1px solid #F5F5F5;
	   			   		 border-radius:10px;
	   			   		 .title {width: 100%;
	   			   		 		 height: 114px;
	   			   		 		 float: left;
	   			   		 		 display:flex;
	   			   		 		 align-items:center;
	   			   		 		 justify-content: center;
	   			   		 		 .title-container {width: auto;
	   			   		 		 				   height: auto;
	   			   		 		 				   float: left;
	   			   		 		 				   padding: 6px 20px;
	   			   		 		 				   background-repeat:no-repeat;
	   			   		 		 				   background-image:url(../images/content-top-title-background.png);
	   			   		 		 				   span {font-size: 32px;
	   			   		 		 				   		 font-weight: 700;
	   			   		 		 				   		 color:whitE;
	   			   		 		 				   }
	   			   		 		 }
	   			   		 }
	   			   		 .members-search {width: 100%;
	   			   		 			   height: 50px;
	   			   		 			   float: left;
	   			   		 			   display:flex;
	   			   		 			   justify-content: center;
	   			   		 			   margin-top: -25px;
	   			   		 			   .search-box {width: 90%;
	   			   		 			   				height: 50px;
	   			   		 			   				float: left;
	   			   		 			   				max-width: 500px;
	   			   		 			   				background-color:white;
	   			   		 			   				border-radius:8px;
	   			   		 			   				.icon {width: 36px;
	   			   		 			   					   height: 50px;
	   			   		 			   					   float: left;
	   			   		 			   					   display:flex;
	   			   		 			   					   align-items: center;
	   			   		 			   					   justify-content: right;
	   			   		 			   					   span {color:@primary-default-500;
	   			   		 			   					   		 font-size: 20px;
	   			   		 			   					   }
	   			   		 			   				}
	   			   		 			   				.input {width: calc(100% - 36px);
	   			   		 			   						height: 50px;
	   			   		 			   						float: left;
	   			   		 			   						input {width: 100%;
	   			   		 			   							   height: 50px;
	   			   		 			   							   background-color:transparent;
	   			   		 			   							   outline: 0px;
	   			   		 			   							   border:0px;
	   			   		 			   							   padding-left: 8px;
	   			   		 			   							   padding-right: 8px;
	   			   		 			   							   font-size: 14px;
	   			   		 			   							   color:@black-600;
	   			   		 			   						}
	   			   		 			   				}
	   			   		 			   }
	   			   		 }
	   			   }
	   			   .content {width: 100%;
	   			   			 height: auto;
	   			   			 float: left;
	   			   			 margin-top: 10px;
	   			   			 .list {width: 100%;
	   			   			 		height: auto;
	   			   			 		float: left;
	   			   			 		margin-top: 24px;
	   			   			 		.item {width: calc(25% - 20px);
	   			   			 			   height: 361px;
	   			   			 			   float: left;
	   			   			 			   border-radius:10px;
	   			   			 			   border: 1px solid #F5F5F5;
	   			   			 			   border-top:10px solid @primary-default-500;																	
	   			   			 			   background: #FFFFFF;
	   			   			 			   margin-left: 24px;
	   			   			 			   margin-top: 24px;
	   			   			 			   .item-container {width: 100%;
	   			   			 			   					height: 100%;
	   			   			 			   					float: left;
	   			   			 			   					padding: 18px;
	   			   			 			   					.photo {width: 100%;
	   			   			 			   							height: 130px;
	   			   			 			   							float: left;
	   			   			 			   							display:flex;
	   			   			 			   							align-items: center;
	   			   			 			   							justify-content: center;
	   			   			 			   							img {width: 130px;
	   			   			 			   								 height: 130px;
	   			   			 			   								 object-fit: cover;
	   			   			 			   								 text-align: center;
	   			   			 			   								 border-radius:8px;
	   			   			 			   							}
	   			   			 			   					}
	   			   			 			   					.information {width: 100%;
	   			   			 			   								  height: 110px;
	   			   			 			   								  float: left;
	   			   			 			   								  margin-top: 24px;
	   			   			 			   								  .i-item {width: 100%;
	   			   			 			   								  		   height: 21px;
	   			   			 			   								  		   float: left;
	   			   			 			   								  		   padding-left: 12px;
	   			   			 			   								  		   margin-top: 10px;
	   			   			 			   								  		   .icon {width: 21px;
	   			   			 			   								  		   		  height: 21px;
	   			   			 			   								  		   		  float: left;
	   			   			 			   								  		   		  display: flex;
	   			   			 			   								  		   		  align-items:center;
	   			   			 			   								  		   		  justify-content: center;
	   			   			 			   								  		   		  span {color:@primary-default-500;
	   			   			 			   								  		   		  		font-size: 15px;
	   			   			 			   								  		   		  }
	   			   			 			   								  		   }
	   			   			 			   								  		   .value {width: calc(100% - 21px);
	   			   			 			   								  		   		   height: 21px;
	   			   			 			   								  		   		   float: left;
	   			   			 			   								  		   		   display:flex;
	   			   			 			   								  		   		   align-items:center;
	   			   			 			   								  		   		   padding-left: 8px;
	   			   			 			   								  		   		   span {font-size: 14px;
	   			   			 			   								  		   		   		 color:black;
	   			   			 			   								  		   		   }
	   			   			 			   								  		   }
	   			   			 			   								  		   .value.bold {span {font-weight: 600;}}
	   			   			 			   								  }
	   			   			 			   								  .i-item:nth-child(3) {.value {span {
	   			   			 			   								  		   		   		 word-break: break-all;}}}
	   			   			 			   					}
	   			   			 			   					.socials {width: 100%;
	   			   			 			   							  height: 34px;
	   			   			 			   							  float: left;
	   			   			 			   							  margin-top: 21px;
	   			   			 			   							  .inner {float: right;
	   			   			 			   							  		  height: 34px;
	   			   			 			   							  		  background-color:#F5F5F5;
	   			   			 			   							  		  border-radius: 5px;
	   			   			 			   							  		  width: 121px;
	   			   			 			   							  		  display:flex;
	   			   			 			   							  		  justify-content: center;
	   			   			 			   							  		  .i-item {width: 30%;
	   			   			 			   							  		  		   height: 34px;
	   			   			 			   							  		  		   float: left;
	   			   			 			   							  		  		   display: flex;
	   			   			 			   							  		  		   align-items: center;
	   			   			 			   							  		  		   justify-content: center;
	   			   			 			   							  		  		   a {font-size: 20px;
	   			   			 			   							  		  		   	  color:@gray-secondary;
	   			   			 			   							  		  		   }
	   			   			 			   							  		  }
	   			   			 			   							  }
	   			   			 			   					}
	   			   			 			   					.contact-mobile {width: 100%;
	   			   			 			   									 height: 40px;
	   			   			 			   									 float: left;
	   			   			 			   									 display:flex !important;
	   			   			 			   									 align-items: center;
	   			   			 			   									 justify-content: center;
	   			   			 			   									 margin-top: 16px;
	   			   			 			   									 .i-item {width: 40px;
	   			   			 			   									 		  height: 40px;
	   			   			 			   									 		  float: left;
	   			   			 			   									 		  border-radius:3px;
	   			   			 			   									 		  display:flex;
	   			   			 			   									 		  align-items: center;
	   			   			 			   									 		  justify-content: center;
	   			   			 			   									 		  a {font-size: 20px;
	   			   			 			   									 		  	 color:white;
	   			   			 			   									 		  }
	   			   			 			   									 }
	   			   			 			   									 .i-item:nth-child(1) {background-color: @secondary-light-100;}
	   			   			 			   									 .i-item:nth-child(2) {background-color: @primary-default-500; margin-left: 8px;}
	   			   			 			   					}
	   			   			 			   }
	   			   			 			   .hovered {width: 100%;
	   			   			 			   			 height: 321px;
	   			   			 			   			 float: left;
	   			   			 			   			 margin-top: -321px;
	   			   			 			   			 background: rgba(0, 0, 0, 0.6);
	   			   			 			   			 backdrop-filter: blur(1.5px);
	   			   			 			   			 display:none;
	   			   			 			   			 align-items: center;
	   			   			 			   			 border-radius:10px;
	   			   			 			   			 .inner {width: 100%;
	   			   			 			   			 		 height: auto;
	   			   			 			   			 		 float: left;
	   			   			 			   			 		 .call {width: 100%;
			   			   			 			   			 		height: 40px;
			   			   			 			   			 		float: left;
			   			   			 			   			 		display:flex;
			   			   			 			   			 		align-items: center;
			   			   			 			   			 		justify-content: center;
			   			   			 			   			 		a {background-color: @secondary-default-500;
			   			   			 			   			 		   padding: 8px 32px;
			   			   			 			   			 		   font-size: 16px;
			   			   			 			   			 		   font-weight: 600;
			   			   			 			   			 		   color:white;
			   			   			 			   			 		   border-radius: 3px;
			   			   			 			   			 		}
			   			   			 			   			 }
	   			   			 			   			 		 .message {width: 100%;
			   			   			 			   			 		   height: 40px;
			   			   			 			   			 		   float: left;
			   			   			 			   			 		   display:flex;
			   			   			 			   			 		   align-items: center;
			   			   			 			   			 		   justify-content: center;
			   			   			 			   			 		   margin-top: 12px;
			   			   			 			   			 		   a {background-color: white;
			   			   			 			   			 		   	  border:1px solid @secondary-hover-600;
			   			   			 			   			 		      padding: 8px 21px;
			   			   			 			   			 		      color:@secondary-default-500;
			   			   			 			   			 		      font-size: 16px;
			   			   			 			   			 		      font-weight: 600;
			   			   			 			   			 		      border-radius: 3px;
			   			   			 			   			 		   }
			   			   			 			   			 }
	   			   			 			   			 }
	   			   			 			   			 
	   			   			 			   }
	   			   			 		}
	   			   			 		.item.hover {.hovered {display:flex;}}
	   			   			 		.item:nth-child(1) {margin-left: 0;}
	   			   			 		.item:nth-child(5) {margin-left: 0;}
	   			   			 }
	   			   }
	   			   .pagination-m {width: 100%;
								  height: 32px;
								  float: left;
								  display:block;
								  margin-bottom: 40px;
								  margin-top: 24px;
								  .pagination-m-container {width: 90%;
								  				  height: 32px;
								  				  float: right;
								  				  max-width: 346px;
								  				  .arrow {width: 32px;
								  				  		    height: 32px;
								  				  		    float: left;
								  				  		    display:flex;
								  				  		    align-items: center;
								  				  		    span {width: 100%;
								  				  		    		 display:block;
								  				  		    		 text-align: center;
								  				  		    		 font-size: 14px;
								  				  		    		 color:#0A0A0A;
								  				  		    }
								  				  }
								  				  .p-list {width: calc(100% - 76px);
								  				  		   height: 32px;
								  				  		   float: left;
								  				  		   margin-left: 6px;
								  				  		   overflow-y: hidden;
								  				  		   .item {width: 32px;
								  				  		   		 height: 32px;
								  				  		   		 float: left;
								  				  		   		 margin-left: 6px;
								  				  		   		 display:flex;
								  				  		   		 align-items: center;
								  				  		   		 border-radius: 8px;
								  				  		   		 a {width: 100%;
								  				  		   		 	 display:block;
								  				  		   		 	 text-align: center;
								  				  		   		 	 text-decoration: none;
								  				  		   		 	 line-height: 32px;
								  				  		   		 	 font-weight: 500;
								  				  		   		 	 font-size: 14pX;
								  				  		   		 	 color:#0A0A0A;
								  				  		   		 }
								  				  		   }
								  				  		   .active {background-color: #7C5CFC;
								  				  		   			a {color:white;}
								  				  		   }
								  				  		   .seperator {width: 32px;
								  				  		   			   height: 32px;
								  				  		   			   float: left;
								  				  		   			   margin-left: 6px;
								  				  		   			   display:flex;
								  				  		   			   align-items: center;
								  				  		   			   a {width: 100%;
								  				  		   			      display:block;
								  				  		   			      text-align: center;
								  				  		   			      color:#0A0A0A;
								  				  		   			      fontsize:14px;
								  				  		   			      text-decoration: none;
								  				  		   			      font-weight: 500;
								  				  		   			   }
								  				  		   }
								  				  }
								  }
					}
	   }
}



@media screen and (max-width: 1800px) { 
	
	.members .container .content .list .item {width: calc(33.3333% - 16px);}
	.members .container .content .list .item:nth-child(4) {margin-left: 0;}
	.members .container .content .list .item:nth-child(5) {margin-left: 24px;}
}

@media screen and (max-width: 1768px) { 
	.members {width: calc(100% - 394px); margin-left: 349px;}
}
@media screen and (max-width: 1550px) { 
	.members {width: calc(100% - 334px); margin-left: 324px;}
}
@media screen and (max-width: 1420px) { 
	.members {width: calc(100% - 253px); margin-left: 243px;}
}
@media screen and (max-width: 1330px) { 
	.members {width: 90%; margin-left: 5%; margin-top: 74px;}
}


@media screen and (max-width: 900px) { 
	.members .container .content .list .item {width: calc(50% - 14px);}
	.members .container .content .list .item:nth-child(3) {margin-left: 0;}
	.members .container .content .list .item:nth-child(4) {margin-left: 24px;}
	.members .container .content .list .item:nth-child(5) {margin-left: 0;}
	.members .container .content .list .item:nth-child(7) {margin-left: 0;}
	
}


@media screen and (max-width: 768px) { 
	.members {width: calc(100% - 32px);
		   			  margin-left: 16px;
	}
	.members .container .content .list {margin-top: 0;}
	.members .container .pagination-m .pagination-m-container {width: 100%;}
	.members .container .pagination-m {display:flex; justify-content: center; margin-bottom: 92px;}
	.members .container .content .list .item .item-container .photo img {width: 86px; height: 86px;}
	.members .container .content .list .item {margin-top: 14px;
											  width: calc(50% - 7px);
											  margin-left: 10px;
											  border-top:0px;
											  height: 274px;
											  .hovered {display:none !important;}
	}
	.members .container .content .list .item .item-container .information .i-item .value span {font-size: 12px; text-align: center; color:#8080A4;}
	.members .container .content .list .item .item-container .information .i-item .value span:nth-child(1) {font-size: 12px; text-align: center; color:#363636;}
	.members .container .content .list .item .item-container .information .i-item .icon {display:none;}
	.members .container .content .list .item .item-container .information .i-item .value {width: 100%; justify-content: center; padding-left: 0;}
	.members .container .content .list .item .item-container .information {height: 62px; margin-top: 10px;}
	.members .container .content .list .item .item-container .information .i-item {height: 22px; margin-top: 0; padding-left: 0;}
	.members .container .content .list .item .item-container .photo {height: 110px; border-bottom: 1px solid #F5F5F5; margin-top: 0;}
	.members .container .content .list .item:nth-child(3) {margin-left: 0;}
	.members .container .content .list .item:nth-child(4) {margin-left: 10px;}
	.members .container .content .list .item:nth-child(7) {margin-left: 0;}
	.members {margin-top: 64px;}
	.members .container .top .members-search {margin-top: 0;}
	.members .container .top .title {display:none;}
	.members .container .top {background-image: none; background-color: transparent; border:0px; height: 46px;}
	.members .container .top .members-search .search-box {width: 100%; max-width: 100%;}
	
}