/* ------------------------------------------------------------ *\
	Wrapper
\* ------------------------------------------------------------ */

.wrapper { position: relative; }

/*  Section Module  */

.section--module { padding: 25px 0 70px; }

.section--module .section__head { margin-bottom: 12px; text-align: center; }

.section--module .section__head h1 { color: #3ab34f; font-size: 42px; font-weight: 500; font-family: 'Roboto Slab',sans-serif; margin-bottom: 8px; }
.section--module .section__head h4 { font-size: 26px; font-weight: 500; }

/* ------------------------------------------------------------ *\
	Diagram
\* ------------------------------------------------------------ */

.diagram { font-size: 16px; line-height: 1.88; font-weight: 300; color: #4a4a4a; text-align: center; }

.diagram .diagram__image { position: relative; display: inline-block; }
.diagram .diagram__image-holder { position: relative; max-width: 480px; margin: 0 auto; }
.diagram .diagram__body { max-width: 500px; padding-top: 20px; margin: 0 auto; }

.diagram .diagram__point .point:hover + .diagram__content { opacity: 1; visibility: visible; }

.diagram .diagram__tooltip,
.diagram .diagram__point { position: absolute; }

.diagram .point { display: inline-block; width: 32px; height: 32px; line-height: 1.1; border: 6px solid #fff; border-radius: 50%; overflow: hidden; background: #3ab34f; font-size: 18px; font-weight: 700; color: #fff; vertical-align: middle; text-align: center; cursor: pointer; text-decoration: none; z-index: 1; }

.diagram .diagram__point .diagram__content { width: auto; padding: 10px 29px 6px; margin-top: 13px; }
.diagram .diagram__point .diagram__content:after { bottom: 100%; top: auto; right: auto; left: 50%; border-width: 0 8px 8px 8px; border-color: transparent transparent rgba(58, 179, 79,.9) transparent; transform: translateX(-50%); }
.diagram .diagram__point .diagram__content h4 { margin-bottom: 0; }

.diagram .diagram__tooltip { padding-right: 47px; }
.diagram .diagram__tooltip .diagram__content { right: 100%; left: auto; transform: translateX(0); }

.diagram .diagram__tooltip .point { position: absolute; top: 20px; right: 0; line-height: 1.5; background: #e0021c; font-size: 14px; }

.diagram .diagram__content { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 394px; padding: 27px 29px 32px 32px; background: rgba(58, 179, 79,.9); color: #fff; text-align: left; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .18); line-height: 1.5;  font-weight: 300; opacity: 0; visibility: hidden; transition: opacity .3s,  visibility .3s; }
.diagram .diagram__content .point { top: 22px; left: 19px; right: auto; display: none; }
.diagram .diagram__content h4 { margin-bottom: 7px; font-weight: 500; }
.diagram .diagram__content:after { content: ''; position: absolute; top: 29px; right: -7px; width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 8px; border-color: transparent transparent transparent rgba(58, 179, 79,.9); }

.diagram .diagram__tooltip .diagram__content { visibility: visible; opacity: 1; }

/*  Diagram Tooltip Right  */
.diagram .diagram__tooltip--right { top: auto; left: auto; padding-left: 15px; padding-right: 0; }
.diagram .diagram__tooltip--right .point { left: -32px; right: auto; }
.diagram .diagram__tooltip--right .diagram__content { left: 100%; padding: 24px 30px 32px; width: 520px; }
.diagram .diagram__tooltip--right .diagram__content .point { top: 28px; left: 19px; }
.diagram .diagram__tooltip--right .diagram__content:after { right: 100%; border-width: 8px 8px 8px 0; border-color: transparent rgba(58, 179, 79,.9) transparent transparent; }

.diagram .diagram__mobile-buttons { display: none; }
.diagram .diagram__mobile-buttons .point { position: absolute; background: #e0021c; font-size: 14px; }

@media (max-width: 1200px) {
	.diagram .diagram__image { transform: scale(.8); }
	.diagram .diagram__body { margin-top: -70px; }

	.diagram .diagram__tooltip .diagram__content { margin-top: 5px; margin-right: 20px; }
	.diagram .diagram__tooltip--right .diagram__content { margin-left: 20px; }

	.diagram .point { width: 46px; height: 46px; font-size: 30px; line-height: 1; }
	.diagram .diagram__tooltip .point { font-size: 24px; line-height: 1.3; }
}

@media (max-width: 991px) {
	.section--module { padding: 25px 0; }

	.diagram .diagram__body { margin-top: -100px; }

	.diagram .diagram__image { transform: scale(.65); }
}

@media (max-width: 767px) {
	.section--module { padding: 6px 0; }

	.section--module .section__head { margin-bottom: 25px; }
	.section--module .section__head h1 { font-size: 36px; line-height: 1.2; margin-bottom: 14px; }
	.section--module .section__head h4 { font-size: 24px; }

	.diagram { margin: 0 -20px; }
	.diagram .diagram__body { padding: 10px 30px 0; margin-top: 0; }

	.diagram .diagram__image { transform: none; }
	.diagram .diagram__image-holder { max-width: 310px; }
	.diagram .diagram__image img { margin-bottom: 32px; }

	.diagram .point { width: 28px; height: 28px; border-width: 4px; line-height: 1.5; }

	.diagram .diagram__point:nth-child(1) { top: 5% !important; left: 31.5% !important; }
	.diagram .diagram__point:nth-child(2) { top: 5% !important; left: 49% !important; }
	.diagram .diagram__point:nth-child(3) { top: 7% !important; left: 73% !important; }

	.diagram .diagram__content h3 { margin: -3px 38px 8px; font-size: 26px; }
	.diagram .diagram__point .point { font-size: 18px; line-height: 1.1; }
	.diagram .diagram__point .diagram__content { padding: 10px 15px; }

	.diagram .diagram__tooltip { position: static; padding: 0 20px; margin-bottom: 20px; }
	.diagram .diagram__tooltip .diagram__content { position: static; width: 100%; margin: 0; }
	.diagram .diagram__tooltip > .point { display: none; }
	.diagram .diagram__tooltip .diagram__content { padding: 21px 21px 31px; opacity: 1; visibility: visible; }
	.diagram .diagram__tooltip .diagram__content:after { display: none; }
	.diagram .diagram__tooltip .diagram__content .point { display: inline-block; width: 32px; height: 32px; font-size: 18px; line-height: 1.3; }
	.diagram .diagram__tooltip .diagram__content h4 { margin-bottom: 5px; padding-left: 40px; }

	.diagram .diagram__tooltip--right .diagram__content { padding: 26px 22px 32px; }
	.diagram .diagram__tooltip--right .diagram__content h4 { padding-left: 35px; }

	.diagram .diagram__mobile-buttons { display: block; }
}