.bg-red{
/*	background: #363e4f;*/
	background: linear-gradient(90deg, #363e4f 0%, #363e4f 62%);
}

@media screen and (max-width: 376px) {
  .card {
    width: 390px;
  }

  footer {
  	width: 420px;
  }
}

.card-img-top{
	background-size: contain;
	position: relative;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	/*height: 600px;
	width: 300px;*/
	z-index: 1;
}

html,body{
	min-height: 100vh;
	min-width: 100vw;
}
.parent{
	height: 100vh;
}
.parent>.row{
	display: flex;
	align-items: center;
	height: 100%;
}
.col img{
	height:100px;
	width: 100%;
	cursor: pointer;
	transition: transform 1s;
	object-fit: contain;
}
.col label{
	overflow: hidden;
	position: relative;
}
.imgbgchk:checked + label>.tick_container{
	opacity: 1;
}
/*         aNIMATION */
.imgbgchk:checked + label>img{
	transform: scale(1.25);
	opacity: 0.3;
}

.tick_container {
	transition: .5s ease;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	cursor: pointer;
	text-align: center;
}

.tick {
	background-color: #363e4f;
	color: white;
	font-size: 16px;
	padding: 6px 12px;
	height: 40px;
	width: 40px;
	border-radius: 100%;
}

.hide{
	display: none!important;
}

.ava-container-a{
	position: absolute;
	width: 230px;
	height: 285px;
	border-radius: 15px;
	background-color: #dacfcf;
	z-index: 10;
	bottom: 92px;
	left: 60px;
/*	object-fit: cover;*/
/*	overflow: hidden;*/
}

.ava-container-b{
	position: absolute;
	width: 216px;
	height: 285px;
	border-radius: 10px;
	background-color: #dacfcf;
	z-index: 10;
	bottom: 130px;
	left: 67px;
/*	object-fit: cover;*/
	overflow: hidden;
}

.avatar-a{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	z-index: 9;
}

.avatar-b{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px;
/*	object-fit: cover;*/
	z-index: 9;
}