.right{
	width: 19%;
	max-width: 375px;
	min-width: 320px;
	background-color: #c5c7cd;
	transition: .5s ease;
	position: relative;
	z-index: 3;
	@media (max-width: 1480px){
		max-width: 230px;
		min-width: 230px;
	}
	@include br1{
		width: 100%;
		max-width: 100%;
	}
	&.rotate{
		transform-origin: 100% 0 0;
		perspective: 1000px;
		height: 71px;
		transform: translate(-7rem, 0) rotate(-90deg);
		position: absolute;
		right: 0;
		top: -5rem;
		@media  (max-width: 1480px){
			top: 5rem;
		}
		@include br1{
			position: relative;
			top: 0;
			left: 0;
			transform: translate(0, 0) rotate(0);
			widht: 100%;
		}
		.content{
			display: none;
			transform: rotateZ(-180deg);
		}
	}
	.head{
		background-color: #52596b;
		padding: 2.8rem 3rem;
		cursor: pointer;
	}
	.content{
		padding: 2rem 2rem 4rem;
		@media (max-width: 1480px){
			padding: 1rem 1rem 4rem;
		}
	}
	.block{
		background: #fff;
		@include align-items(stretch);
		margin-bottom: 2rem;
		@media (max-width: 1480px){
			margin-bottom: 1rem;
		}
		.left-side{
			background-color: #f3f7f9;
			padding: 2rem 1rem;
			width: 32%;
			text-align: center;
			@media  (max-width: 1480px){
				width: 100%;
				padding: 1rem;
			}
			@include br1{
				width: 32%;
			}
			.avatar{
				width: 6.7rem;
				height: 6.7rem;
				border-radius: 50%;
				margin: 0 auto 1rem;
				&.woman{
					background: url($img_dir + 'woman.svg') no-repeat center;
					background-size: cover;
				}
				&.man{
					background: url($img_dir + 'man.svg') no-repeat center;
					background-size: cover;
				}
			}
			.name{
				color: #52596b;
				font-size: 1.4rem;
			}
		}
		.right-side{
			width: 68%;
			padding: 2rem;
			@media screen and (max-width: 1480px){
				width: 100%;
				text-align: center;
				padding: 1rem;
			}
			@include br1{
				width: 68%;
			}
			.headline{
				color: #19172b;
				font: 1.5rem $HB;
				text-transform: uppercase;
			}
			.numbers{
				margin-top: 2rem;
				padding: 0 .5rem;
				.num{
					color: #00b2d2;
					font: 2.4rem $HB;
					margin-bottom: 1rem;
				}
				.text{
					color: #52596b;
					font-size: 1.4rem;
					padding-left: 2.5rem;
					position: relative;
					&:before{
						content: '';
						position: absolute;
						width: 2rem;
						height: 2rem;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
					}
				}
				&-block{
					text-align: center;
					&.to-do{
						.text{
							&:before{
								background: url($img_dir + 'to-do.svg') no-repeat center;
								background-size: 100% auto;
							}
						}
					}
					&.history{
						.text{
							&:before{
								background: url($img_dir + 'calendar.svg') no-repeat center;
								background-size: 100% auto;
							}
						}
					}
				}		
			}
		}
	}
}