/*
WCS custom styles:
use classes with the prefix: .wcs-
*/

@font-face {
    font-family: 'TeleNeoWeb-Medium';
    src: url('../fonts/TeleNeoWeb-Medium.eot');
    src: url('../fonts/TeleNeoWeb-Medium.woff2') format('woff2'),
         url('../fonts/TeleNeoWeb-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeleNeoWeb-Bold';
    src: url('../fonts/TeleNeoWeb-Bold.eot');
    src: url('../fonts/TeleNeoWeb-Bold.woff2') format('woff2'),
         url('../fonts/TeleNeoWeb-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TeleNeoWeb-ExtraBold';
    src: url('../fonts/TeleNeoWeb-ExtraBold.eot');
    src: url('../fonts/TeleNeoWeb-ExtraBold.woff2') format('woff2'),
         url('../fonts/TeleNeoWeb-ExtraBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



body.wcs-locked{
	overflow:hidden;
}

html,body{
	padding: 0px;
	margin: 0px;
}


.wcs-custom-page{
	position:relative;
	font-size:17px;
	color:#727276;
	font-family: 'TeleNeoWeb-Medium';
	text-align: center;
	padding: 0px 0 0 0;
	overflow: hidden;
}

.wcs-custom-page *{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
    box-sizing: border-box;
	letter-spacing: -0.48px;
}

.wcs-custom-page strong{
	font-weight: normal;
	font-family: 'TeleNeoWeb-Bold';
}


.wcs-clear{
	clear:both;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */


.wcs-custom-page{
	background: url("../img/bg.webp") no-repeat center center;
	min-height: 100vh;
	position: relative;
	max-height: 2000px;

}


.wcs-header{
	height: 79px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 0px;
	margin: 0 auto;
	background: #fff;
	gap: 35px;
}

.wcs-header img{
	height: 80px;
	display: block;
}

.wcs-vcard{
	min-height: calc(100vh - 80px - 56px);

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 180px;

}

.wcs-custom-page .wcs-title{
	font-size: 87px;
	line-height: 105%;
	letter-spacing: -0.48px;
	color: #fff;
	font-family: 'TeleNeoWeb-ExtraBold';
	letter-spacing: -0.87px;
	text-align: left;
}

.wcs-card-hold{
	border-radius: 20px;
	background: #F1F1F1;
	width: 752px;
	margin: 0;
	padding: 44px;
}

.wcs-card-hold .wcs-top{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 24px;
	padding: 0 0 20px 0;
	border-bottom: 1.5px solid #FFF;
}


.wcs-card-hold .wcs-top .wcs-profile-picture img{
	display: block;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	object-fit: cover;
}

.wcs-card-hold .wcs-top .wcs-full-name{
	color: #000;
	font-family: 'TeleNeoWeb-ExtraBold';
	font-size: 32px;
	line-height: 130%;
	letter-spacing: -0.32px;
}





.wcs-card-hold .wcs-items{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 24px 64px;
	flex-wrap: wrap;
	padding: 28px 0 0 0;
}

.wcs-card-hold .wcs-items .wcs-item{
	width: 300px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 17px;

	text-align: left;
	font-family: 'TeleNeoWeb-Bold';
	color: #000;
	font-size: 24px;
	line-height: 140%; 
	letter-spacing: -0.24px;
}

.wcs-card-hold .wcs-items .wcs-item .wcs-item-icon{
	width: 55px;
	flex: 0 0 55px;
}

.wcs-card-hold .wcs-items .wcs-item .wcs-item-title{
	flex: 1 1 auto;
}

.wcs-card-hold .wcs-items .wcs-item .wcs-item-icon img{
	display: block;
	width: 100%;
}

.wcs-card-hold .wcs-items .wcs-item a{
	font-size: inherit;
	color: inherit;
	text-decoration: none;
}

.wcs-card-hold .wcs-actions{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 32px 0 0 0;
}

.wcs-card-hold .wcs-actions .wcs-save{
	
	background: #E20074;
	position: relative;
	color: #FFF;
	font-size: 16px;
	line-height: 20px;
	transition: all 200ms;
	text-decoration: none;
	font-family: 'TeleNeoWeb-Medium';
	padding: 10px 28.5px;
	border-radius: 20px;
 	z-index: 2;

}

.wcs-card-hold .wcs-actions .wcs-save::before{
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #E20074;
	border-radius: 20px;
	transition: all 200ms;
}

.wcs-card-hold .wcs-actions .wcs-save:hover::before{
	transform: scale(1.05);
}

@media screen and (min-width: 960px) and (max-width: 1439px)  {
	.wcs-custom-page{
	  max-height: 138.89vw;
	}

	.wcs-header{
	  height: 5.49vw;
	  gap: 2.44vw;
	}
	.wcs-header img{
	  height: 5.56vw;
	}

	.wcs-vcard{
	  min-height: calc(100vh - 5.56vw - 3.89vw);
	  gap: 12.50vw;
	}

	.wcs-custom-page .wcs-title{
	  font-size: 6.05vw;
	  letter-spacing: -0.03vw;
	  letter-spacing: -0.06vw;
	}

	.wcs-card-hold{
	  border-radius: 1.39vw;
	  width: 52.23vw;
	  padding: 3.06vw;
	}

	.wcs-card-hold .wcs-top{
	  gap: 1.67vw;
	  padding: 0 0 1.39vw 0;
	  border-bottom: 0.11vw solid #FFF;
	}

	.wcs-card-hold .wcs-top .wcs-profile-picture img{
	  width: 4.17vw;
	  height: 4.17vw;
	}

	.wcs-card-hold .wcs-top .wcs-full-name{
	  font-size: 2.23vw;
	  letter-spacing: -0.02vw;
	}

	.wcs-card-hold .wcs-items{
	  gap: 1.67vw 4.45vw;
	  padding: 1.95vw 0 0 0;
	}

	.wcs-card-hold .wcs-items .wcs-item{
	  width: 20.83vw;
	  gap: 1.19vw;
	  font-size: 1.67vw;
	  letter-spacing: -0.01vw;
	}

	.wcs-card-hold .wcs-items .wcs-item .wcs-item-icon{
	  width: 3.82vw;
	  flex: 0 0 3.82vw;
	}

	.wcs-card-hold .wcs-actions{
	  padding: 2.23vw 0 0 0;
	}

	.wcs-card-hold .wcs-actions .wcs-save{
	  font-size: 1.12vw;
	  line-height: 1.39vw;
	  padding: 0.70vw 1.98vw;
	  border-radius: 1.39vw;
	}

	.wcs-card-hold .wcs-actions .wcs-save::before{
	  border-radius: 1.39vw;
	}
}

@media screen and (max-width: 959px) {
  
	.wcs-custom-page{
		background-position: center -240px;
	}

	.wcs-vcard{
		flex-direction: column;
		justify-content: flex-start;
		align-items: start;
		gap: 40px;
		padding: 47px 23px;
	}

	.wcs-card-hold{
		width: 100%;
	}

}

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

	.wcs-custom-page {
	    background-position: calc(50% + 103px) -78px;
	    background-size: auto 505px;
	}

	.wcs-header{
		padding: 0 0px;
		height: 60px;
	}

	.wcs-header img{
		height: 60px;
		display: block;
	}

	.wcs-custom-page .wcs-title{
		font-size: 50px;
	}

	.wcs-card-hold{
		padding: 32px;
	}

	.wcs-card-hold .wcs-items{
		gap: 16px;
		flex-direction: column;
		justify-content: flex-start;
		align-items: start;
	}

	.wcs-card-hold .wcs-items .wcs-item{
		font-size: 20px;
	}


	.wcs-card-hold .wcs-items .wcs-item:nth-child(1){ order: 1; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(2){ order: 5; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(3){ order: 2; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(4){ order: 6; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(5){ order: 4; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(6){ order: 8; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(7){ order: 6; }
	.wcs-card-hold .wcs-items .wcs-item:nth-child(8){ order: 8; }


    
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */