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

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

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

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


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


body.wcs-locked{
	overflow:hidden;
}

body{
	padding: 0px !important;
}


.wcs-custom-page{
	position:relative;
	font-size:17px;
	color:#727276;
	font-family: 'PeridotPE-Regular';
	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: 'PeridotPE-Bold';
}


.wcs-clear{
	clear:both;
}


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


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


.wcs-header{
	height: 80px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 0 40px;
	margin: 0 auto;
	border-bottom: 2px solid #E20074;
	gap: 35px;
}

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

.wcs-custom-page .wcs-title {
	font-size: 48px;
	line-height: 100%;
	letter-spacing: -0.48px;
	color: #fff;
	font-family: 'PeridotPE-Bold';
	letter-spacing: -0.48px;
	padding: 87px 0 80px 0;
	text-align: center;
}

.wcs-card-hold{
	border-radius: 16px;
	background: rgba(242, 242, 243, 0.94);
	backdrop-filter: blur(30px);
	width: 874px;
	margin: 0 auto 30px auto;
	padding: 40px 64px;
}

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


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

.wcs-card-hold .wcs-top .wcs-full-name{
	color: #000;
	font-family: 'BTCosmo-Bold';
	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;
}

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

	color: #212121;
	font-size: 18px;
	line-height: 140%; 
	letter-spacing: -0.18px;
}

.wcs-card-hold .wcs-items .wcs-item .wcs-item-icon{
	width: 48px;
}

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

.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{
	padding: 15px 18px;
	border-radius: 8px;
	background: #E20074;
	font-family: 'BTCosmo-Bold';
	color: #FFF;
	font-size: 15px;
	line-height: 100%;
	transition: all 200ms;
	text-decoration: none;
}

.wcs-card-hold .wcs-actions .wcs-save:hover{
	background-color: #006D29;
}

.wcs-card-hold .wcs-actions .wcs-save::after{
	content: url("../img/icon-save.svg");
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 0 4px;
}

.wcs-footer{
	overflow: hidden;
}

.wcs-footer .wcs-footer-links{
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 390px 0 20px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	background:#fff url("../img/bg-footer.svg") no-repeat right bottom;
	position: relative;
}

.wcs-footer .wcs-footer-links::after{
	content: "";
	position: absolute;
	left: 100%;
	bottom: 0px;
	width: 2000px;
	height: 48px;
	background: #E20074;
}

.wcs-footer .wcs-footer-links a{
	font-size: 14px;
	color: #000;
	font-size: 14px;
	font-style: normal;
	line-height: 130%;
	letter-spacing: -0.28px;
}

.wcs-footer .wcs-footer-links a:hover{
	text-decoration: underline;
	color: #848484;
}

@media screen and (max-width: 959px) {
  
	.wcs-card-hold{
		width: 650px;
	}

}

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

	.wcs-custom-page{
		background: url("../img/bg-mob.png") no-repeat center 0px;
	}

	.wcs-header{
		padding: 0 16px;
		background: #fff;
	}

	.wcs-custom-page .wcs-title{
		font-size: 31px;
		color: #000;
		padding: 49px 0 66px 0;
	}

	.wcs-card-hold{
		width: 328px;
		padding: 33px 16px;
	}

	.wcs-card-hold .wcs-top{
		flex-direction: column;
		gap: 16px;
		padding: 0 0 32px 0;
	}

	.wcs-card-hold .wcs-top .wcs-profile-picture img{
		width: 64px;
		height: 64px;
	}

	.wcs-card-hold .wcs-top .wcs-full-name{
		font-size: 24px;
	}

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

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


	.wcs-footer .wcs-footer-links{
		padding: 32px 80px 80px 80px;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

    
}

@media screen and (max-width: 374px) {
	.wcs-card-hold{
		width: 300px;
	}
}