html > body > main > div.sections > section.calculation > details > summary
{
	
	display: inline-block;
	
	box-sizing: border-box;
	height: 56px;
	padding: 0 47px;
	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: url( 'images/bg-lines-btn.svg' ) center center no-repeat #171a39;
	
	border: none;
	border-radius: 28px;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2);
	
	transition: background-color 0.3s;
}
	
	html > body > main > div.sections > section.calculation > details > summary:not([disabled])
	{
		cursor: pointer;
	}
	
	html > body > main > div.sections > section.calculation > details > summary:not([disabled]):focus, html > body > main > div.sections > section.calculation > details > summary:not([disabled]):hover
		{
			color: #0e112c;
			background-color: #d8b327;
		}

/**
 * Сбросить всё оформление со стандартной кнопки
 */
/**
 * Сбросить оформление с details и скрыть контент
 */
html > body > main > div.sections > section:not(.calculation) > details
{
	
	font-size: 14px;
	
	color: #0e112c;
}
html > body > main > div.sections > section:not(.calculation) > details > summary
	{
		display: block;
		
		-webkit-appearance: none;
		
		   -moz-appearance: none;
		
		        appearance: none;
	}
html > body > main > div.sections > section:not(.calculation) > details > summary::-webkit-details-marker
		{
			display: none;
		}
html > body > main > div.sections > section:not(.calculation) > details > summary ~ *
		{
			display: none;
		}
html > body > main > div.sections > section:not(.calculation) > details > summary
	{
		opacity: 0;
		
		transition: opacity 0.3s;
	}
html > body > main > div.sections > section:not(.calculation) > details > summary:focus
		{
			opacity: 1;
			
			outline: none;
		}
html > body > main > div.sections > section:not(.calculation) > details > summary::after
		{
			display: inline-block;
			
			width: 40px;
			height: 40px;
			margin: -2px 0 0 0.5em;
			
			vertical-align: middle;
			
			content: "";
			
			background: url("images/button-go.svg") 17px 13px no-repeat white;
			
			border-radius: 50%;
			box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
		}

html > body > main > div.sections > section:not(.calculation):hover > details > summary
	{
		opacity: 1;
	}
html > body > main > div.content > h1, html > body > main > div.content > h2, html > body > main > div.sections > section > h3
{
	margin: 0 0 24px;
	
	font-family: "Circe",sans-serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.09;
}
html > body > main > div.content > p
{
	margin: 0 0 24px;
	
	line-height: 1.5;
}
html > body > main
{
	position: relative;
	z-index: 1;
	
	overflow: hidden;
	
	box-sizing: border-box;
	height: auto;
	min-height: 100vh;
	padding: 0 0 0 70px;
}
html > body > main
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
%button_stroke:not([disabled]):hover, %button_stroke:not([disabled]):focus
	{
		color: white;
		background-color: #171a39;
	}
html > body > main > div.sections > section.calculation > details > summary
{

	color: #0e112c;
	background-color: white;

	transition:
		color 0.3s,
		background 0.3s;
}
html > body > main > div.sections > section.calculation > details > summary:hover
	{
		color: white;
	}
%button_white_stroke:not([disabled]):focus, %button_white_stroke:not([disabled]):hover
		{
			text-shadow: none;
			
			color: #0e112c;
			background-color: white;
		}
html > body > main > div.content > h2, html > body > main > div.sections > section > h3
{
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}
html > body > main > div.content
{
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	
	box-sizing: border-box;
	-webkit-flex-shrink: 0;
	    -ms-flex-negative: 0;
	        flex-shrink: 0;
	width: calc(31.25vw - 22px);
	padding: 50px calc(3.13vw - 2px) 100px calc(6.25vw - 4px);
	
	color: white;
	background-color: #171a39;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

html > body > main > div.sections
{
	position: fixed;
	top: 0;
	right: 0;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	        flex-wrap: wrap;
	-webkit-align-content: stretch;
	    -ms-flex-line-pack: stretch;
	        align-content: stretch;
	
	width: calc(68.75vw - 48px);
	height: 100vh;
	padding: 0;
	/* Для скрытия крайних рамок */
	margin: 0 -1px -1px 0;
	
	list-style: none;
	
	background: white;
	
	box-shadow: -2px 0 6px rgba(0, 0, 0, 0.2);
}

@supports (display: grid)
	{

html > body > main > div.sections
{
		display: grid;
		grid-template-columns: 1fr 1fr
}
		
		@media (max-width: 1099px)
		{

html > body > main > div.sections
{
			grid-template-columns: 1fr
}
		}
	}
html > body > main > div.sections > section
{
	position: relative;
	
	display: -webkit-flex;
	
	display: -ms-flexbox;
	
	display: flex;
	-webkit-flex-direction: column;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	
	box-sizing: border-box;
	width: 50%;
	padding: 40px calc(3.13vw - 2px) 40px calc(3.13vw - 2px);
	
	cursor: pointer;
	
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	
	transition: box-shadow 0.3s;
}
@supports (display: grid)
	{
html > body > main > div.sections > section
{
		width: 100%
}
	}

html > body > main > div.content
{
	-webkit-justify-content: flex-start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
}
html > body > main > div.content
{
	color: #0e112c;
	background-color: white;
}

html > body > main > div.sections > section:hover
{
	z-index: 1;
	
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.3);
}

html > body > main > div.content > h1
{
	
	margin-bottom: 40px;
}

html > body > main > div.content > h2
{
	
	margin: 0 0 8px;
}

html > body > main > div.content > p
{
	
	margin-bottom: 1em;
}

html > body > main > div.content > ul
{
	padding: 0;
	margin: 0 0 24px 16px;

	list-style: none;
}

html > body > main > div.content > ul > li
	{
		position: relative;
		
		padding-left: 24px;
	}

html > body > main > div.content > ul > li:not(:last-child)
		{
			margin-bottom: 4px;
		}

html > body > main > div.content > ul > li::before
		{
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;

			width: 16px;
			height: 2px;
			margin: auto 0;
			
			content: '';

			background: #d8b327;
		}

html > body > main > div.sections
{
	
	position: relative;
	
	height: auto;
	min-height: 100vh;

	grid-template-rows: auto auto auto auto 1fr;
}

html > body > main > div.sections > section.empty
{
	pointer-events: none;
}

html > body > main > div.sections > section
{

	width: 100%;
}

html > body > main > div.sections > section > h3
{
	
	max-width: 11em;
	margin-bottom: 40px;
}

html > body > main > div.sections > section > h3 > img
	{
		max-width: 100%;
		max-height: 50px;

		object-fit: contain;
	}

html > body > main > div.sections > section > p
{
	margin: 0;
	
	font-size: 14px;
	line-height: 1.5;
}

html > body > main > div.sections > section > p > span.percentage
	{
		float: left;
		
		margin-right: 10px;
		
		font-size: 44px;
		font-weight: 300;
		line-height: 1;
	}

html > body > main > div.sections > section.calculation
{
	background: url("images/bg-lines.svg") center center no-repeat;
	background-size: cover;
}

html > body > main > div.sections > section.calculation:not(:nth-child(2n))
	{
		width: 200%;
	}

html > body > main > div.sections > section.calculation > details
{
	
	-webkit-align-self: flex-start;
	
	    -ms-flex-item-align: start;
	
	        align-self: flex-start;
}

html > body > main > div.sections > section.calculation > details > summary
	{
		display: block;
		
		-webkit-appearance: none;
		
		   -moz-appearance: none;
		
		        appearance: none;
	}

html > body > main > div.sections > section.calculation > details > summary::-webkit-details-marker
		{
			display: none;
		}

html > body > main > div.sections > section.calculation > details > summary ~ *
		{
			display: none;
		}

html > body > main > div.sections > section.calculation > h3
{
	color: white;
}

html > body > main > div.sections > section:not(.calculation)
{
	pointer-events: none;
}

html > body > main > div.sections > section:not(.calculation) > details
{
	
	position: absolute;
	right: calc(3.13vw - 2px);
	bottom: 40px;
}

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

@media (min-width: 1100px) and (max-width: 1399px)
	{
html > body > main > div.content > p
{
		font-size: 14px
}
html > body > main > div.content
{
		padding-left: calc(3.13vw - 2px)
}
	}

@media (max-width: 1399px)
	{
html > body > main > div.content > h1, html > body > main > div.content > h2, html > body > main > div.sections > section > h3
{
		font-size: 36px
}
html > body > main > div.content > h2, html > body > main > div.sections > section > h3
{
		font-size: 18px
}
		html > body > main > div.sections > section:not(.calculation) > details > summary
		{
			position: relative;
			
			display: none;
			overflow: hidden;
			
			width: 40px;
			height: 40px;
			
			text-indent: 40px;
			white-space: nowrap;
		}
			
			html > body > main > div.sections > section:not(.calculation) > details > summary::after
			{
				position: absolute;
				top: 0;
				left: 0;
				
				margin-left: 0;
			}
	}

@media (max-width: 1099px)
	{
html > body > main
{
		min-height: 0;
		padding-left: 0
}
html > body > main
{
		-webkit-flex-direction: column;
		    -ms-flex-direction: column;
		        flex-direction: column
}
html > body > main > div.content
{
		width: 100%;
		padding-right: calc(6.25vw - 4px)
}

html > body > main > div.sections
{
		position: static;
		
		width: 100%;
		height: auto;
		
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2)
}
html > body > main > div.sections > section
{
		height: 250px;
		padding-left: 20px;
		padding-right: 20px
}

html > body > main > div.content
{
		padding-bottom: 40px
}

html > body > main > div.sections > section:not(.calculation) > details
{
		right: 20px
}
		
		html > body > main > div.sections > section:not(.calculation) > details > summary
{
			opacity: 1;
	}
	}

@media (max-width: 699px)
	{
html > body > main > div.content
{
		padding-right: 5vw;
		padding-left: 5vw
}
html > body > main > div.sections > section
{
		width: 100%
}

html > body > main > div.sections > section.empty
{
		display: none
}
	}