/**
 * Сбросить оформление с details и скрыть контент
 */
%button, %button_white
{

	position: relative;
	
	display: inline-block;
	
	box-sizing: border-box;
	height: 56px;
	padding: 0 50px;
	margin: 0;
	
	font-size: 16px;
	font-weight: 700;
	line-height: 56px;
	white-space: nowrap;
	text-align: center;
	
	-webkit-appearance: none;
	
	   -moz-appearance: none;
	
	        appearance: none;
	
	color: white;
	background: #c3beba;
	
	border: none;
	border-radius: 28px;
	box-shadow: 16px 0 20px rgba( 86, 63, 0, 0.08 );
}
%button:not([disabled]), %button_white:not([disabled])
	{
		cursor: pointer;
	}
%button:not([disabled]):focus, %button:not([disabled]):hover, %button_white:not([disabled]):focus, %button_white:not([disabled]):hover
		{
			background: #5a9bb7;
		}
html > body > main
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	padding: 0 0 0 70px;
}

/**
 * Сбросить всё оформление со стандартной кнопки
 */
%button_stroke:not([disabled]):hover, %button_stroke:not([disabled]):focus
	{
		color: #5a9bb7;
		background: white;
	}
html > body > main > section.e-format-advantages > ul > li > div.info > h2
{
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
}
@supports (display: grid)
	{
	}

@supports (display: grid)
	{
		
		@media (max-width: 1099px)
		{
		}
	}

html > body > main > section.e-format-advantages
{
	max-width: 1618px;
	padding: 60px calc(6.25vw - 4px) 280px;
	margin: 0 auto;
}

html > body > main > section.e-format-advantages > h1
{
	margin: 0 0 80px;
	
	font-size: 44px;
	font-weight: 400;
	line-height: 1.05;
}

html > body > main > section.e-format-advantages > h1 > strong
{
	font-weight: 400;

	color: #5a9bb7;
}

html > body > main > section.e-format-advantages > ul
{
	padding: 0;
	margin: 0;

	list-style: none;
}

html > body > main > section.e-format-advantages > ul > li
{
	position: relative;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;

	height: 252px;
}

html > body > main > section.e-format-advantages > ul > li:not(:last-child)
	{
		margin-bottom: 115px;
	}

html > body > main > section.e-format-advantages > ul > li:nth-child( 2n )
	{
		padding-left: 285px;
	}

html > body > main > section.e-format-advantages > ul > li:nth-child( 2n ) > svg
		{
			bottom: 110px;

			-webkit-transform: translateY( 100% ) scale( 1, -1 );

			        transform: translateY( 100% ) scale( 1, -1 );
		}

html > body > main > section.e-format-advantages > ul > li:last-child > svg
		{
			display: none;
		}

html > body > main > section.e-format-advantages > ul > li.show > figure::before
			{
				width: 100%;
				height: 100%;
			}

html > body > main > section.e-format-advantages > ul > li.show > figure > img
			{
				opacity: 1;
	
				-webkit-transform: translateX( 0 );
	
				        transform: translateX( 0 );
			}

html > body > main > section.e-format-advantages > ul > li.show > div.info
		{
			opacity: 1;

			-webkit-transform: translateY( 0 );

			        transform: translateY( 0 );
		}

html > body > main > section.e-format-advantages > ul > li.show > svg > path
			{
				stroke-dashoffset: 0;
			}

html > body > main > section.e-format-advantages > ul > li > svg
{
	position: absolute;
	bottom: 100px;
	left: 40px;
	z-index: -1;

	-webkit-transform: translateY( 100% ) scale( -1, -1 );

	        transform: translateY( 100% ) scale( -1, -1 );
}

html > body > main > section.e-format-advantages > ul > li > svg > path
	{
		stroke-dasharray: 711 711;
		stroke-dashoffset: 711;

		transition: stroke-dashoffset 1s 1s;
	}

html > body > main > section.e-format-advantages > ul > li > div.info
{
	-webkit-flex-grow: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	max-width: 627px;

	opacity: 0;

	-webkit-transform: translateY( 100px );

	        transform: translateY( 100px );

	transition:
		opacity 0.75s,
		-webkit-transform 0.75s;

	transition:
		opacity 0.75s,
		transform 0.75s;

	transition:
		opacity 0.75s,
		transform 0.75s,
		-webkit-transform 0.75s;
}

html > body > main > section.e-format-advantages > ul > li > div.info > h2
{
	
	width: 75%;
	margin: 0 0 16px;

	display: -webkit-flex;

	display: -ms-flexbox;

	display: flex;
}

html > body > main > section.e-format-advantages > ul > li > figure
{
	position: relative;
	z-index: 1;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	
	-webkit-flex-shrink: 0;
	
	    -ms-flex-negative: 0;
	
	        flex-shrink: 0;
	width: 252px;
	height: 100%;
	margin: 0 75px 0 0;
}

html > body > main > section.e-format-advantages > ul > li > figure::before
	{
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: -1;

		width: 0;
		height: 0;

		content: '';

		background: #E3EBF2;

		border-radius: 50%;

		-webkit-transform: translate( -50%, -50% );

		        transform: translate( -50%, -50% );

		transition:
			width 0.5s 0.5s,
			height 0.5s 0.5s;
	}

html > body > main > section.e-format-advantages > ul > li > figure > img
{
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;

	margin-left: 55px;

	opacity: 0;

	font-size: 0;

	-webkit-transform: translateX( -100px );

	        transform: translateX( -100px );

	transition:
		opacity 1s,
		-webkit-transform 1s;

	transition:
		opacity 1s,
		transform 1s;

	transition:
		opacity 1s,
		transform 1s,
		-webkit-transform 1s;
}

html > body > main > section.e-format-advantages > ul > li > div.info > p
{
	margin: 0;
	
	font-size: 20px;
	line-height: 1.4;
}

html > body > main > section.e-format-advantages > ul > li > div.info > p > strong
{
	display: block;

	margin-bottom: 16px;
}

@media (min-width: 700px) and (max-width: 1099px)
	{
	}

@media (min-width: 1100px) and (max-width: 1399px)
	{
	}

@media (max-width: 1399px)
	{
%button, %button_white
{
		padding: 0 27px
}
html > body > main > section.e-format-advantages > ul > li > div.info > h2
{
		font-size: 24px
}
	}

@media (max-width: 1099px)
	{
html > body > main
{
		min-height: 0;
		padding-left: 0
}

html > body > main > section.e-format-advantages
{
		padding-bottom: 120px
}

html > body > main > section.e-format-advantages > ul > li
{
		height: auto
}

html > body > main > section.e-format-advantages > ul > li:not(:last-child)
	{
			margin-bottom: 75px
	}

html > body > main > section.e-format-advantages > ul > li:nth-child( 2n )
	{
			-webkit-flex-direction: row-reverse;
			    -ms-flex-direction: row-reverse;
			        flex-direction: row-reverse;
			-webkit-justify-content: flex-end;
			    -ms-flex-pack: end;
			        justify-content: flex-end;
			
			padding-left: 0
	}

html > body > main > section.e-format-advantages > ul > li:nth-child( 2n ) > figure
		{
				margin: 0 0 0 75px
		}

html > body > main > section.e-format-advantages > ul > li > svg
{
		display: none
}

html > body > main > section.e-format-advantages > ul > li > div.info > h2
{
		width: 100%
}

html > body > main > section.e-format-advantages > ul > li > figure
{
		z-index: 0;
		
		height: 252px
}
	}

@media (max-width: 699px)
	{

html > body > main > section.e-format-advantages > h1
{
		margin-bottom: 20px
}

html > body > main > section.e-format-advantages > ul > li
{
		display: block
}

html > body > main > section.e-format-advantages > ul > li:not(:last-child)
	{
			margin-bottom: 20px
	}

html > body > main > section.e-format-advantages > ul > li:nth-child( 2n ) > figure
		{
				margin: 0 0 16px
		}

html > body > main > section.e-format-advantages > ul > li > figure
{
		margin: 0 0 16px
}
	}