@import "variables";
.p-partnership {
	font-size: 16px;
	.container {
		max-width: 556px;
		margin: 0 auto;
		padding: 0;
	}
	.p-partnership__head {
		margin-bottom: 32px;
		@media(min-width: 768px){
			text-align: center;
		}
		h1 {
			font-size: 34px;
			@media (max-width: 991px){
				font-size: 28px;
			}
			@media (max-width: 767px){
				font-size: 22px;
			}
		}
	}
	.p-partnership__form {
		max-width: 360px;
		margin: 0 auto;
		padding: 16px 0;
		.partnership-form-title {
			margin-bottom: 24px;
			font-size: 16px;
			font-weight: bold;
			@media(min-width: 768px){
				&:not(.text-left){
					text-align: center;
				}
			}
		}
		.partnership-form-company-type {
			margin: 0;
			padding: 0;
			list-style: none;
			dt {
				margin: 0;
				padding: 0;
				font-weight: normal;
			}
			dd {
				font-size: 16px;
				&:not(:first-child){
					margin-top: 8px;
				}
			}
			.form-check.stylize {
				label {
					font-size: 16px;
				}
				.arr {
					margin-top: .25em;
				}
			}
			.other-type {
				position: relative;
				padding-left: 24px;
				font-size: 16px;
				.arr {
					background: $color_white;
					border: 1px solid $color_gray_50;
					position: absolute; top: 50%; left: 0;
					display: block; width: 16px; height: 16px;
					margin: -8px 0 0 0;
					@include border-radius(2px);
					&:before {
						content: '';
						background: transparent;
						position: absolute; top: 8px; left: 2px;
						display: block; width: 5px; height: 1px;
						@include transform(rotate(45deg));
					}
					&:after {
						content: '';
						background: transparent;
						position: absolute; top: 7px; left: 5px;
						display: block; width: 8px; height: 1px;
						@include transform(rotate(-45deg));
					}
					&:hover {
						cursor: pointer;
					}
					&.active {

						&:before {
							background: $blue;
						}
						&:after {
							background: $blue;
						}
					}
				}

				.other-type__text {
					display: block;
				}
				.other-type__field {
					display: none;
				}

				&.active {
					.other-type__text {
						display: none;
					}
					.other-type__field {
						display: block;
					}
				}
			}
		}
		.partnership-form-result {
			margin: 0;
			padding: 0;
			list-style: none;
			& + .partnership-form-result {
				margin-top: 32px;
			}
			dt {
				margin: 0;
				padding: 0;
				font-size: 14px;
				color: $gray;
				font-weight: normal;
			}
			dd {}
		}
	}
	.p-partnership__advantages {
		.advantages-title {
			margin-bottom: 16px;
			font-size: 22px;
			color: $red;
			@media(max-width: 767px){
				font-size: 18px;
			}
			@media(min-width: 768px){
				text-align: center;
			}
		}
		.advantages-list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				&:not(:first-child){
					margin-top: 2px;
				}
			}
			.advantages-item {
				background: #ededed;
				position: relative;
				padding: 12px 24px 14px 56px;
				@include border-radius(3px);
				.icon {
					position: absolute; top: 50%; left: 16px;
					display: block; width: auto; height: 24px;
					margin-top: -12px;
				}
			}
		}
	}
	.p-partnership__achievements {
		.achievements-title {
			margin-bottom: 24px;
			font-size: 16px;
			@media(min-width: 768px){
				text-align: center;
			}
		}
		.achievements-list {
			margin: 0;
			padding: 0;
			list-style: none;
			& > li {
				position: relative;
				&:not(:first-child){
					margin-top: 8px;
				}
			}
			@media (min-width: 992px){
				margin: 0 -16px;
				text-align: center;
				& > li {
					display: inline-block;
					vertical-align: top;
					width: 50%;
					margin-top: 0 !important;
					margin-bottom: 32px;
					padding: 0 16px;
				}
			}
		}
		.achievements-item {
			background: #ededed;
			padding: 8px 16px;
			font-size: 14px;
			@include border-radius(3px);
			.achievements-item__icon {
				position: relative;
				display: block;
				height: 56px;
				margin: 0 auto;
				img {
					display: block;
					height: 56px;
					margin: 0 auto;
				}
				.achievements-item__years {
					position: absolute; top: 0; right: 0; left: 0;
					font-style: normal;
					font-weight: bold;
					padding-top: 12px;
					color: #FFC20E;
					text-align: center;
					strong {
						display: block;
						font-size: 20px;
						line-height: 16px;
					}
					span {
						display: block;
						font-size: 10px;
						text-transform: uppercase;
					}
				}
			}
			@media (min-width: 992px){
				position: relative;
				padding: 92px 16px 24px;
				.media-body, .media-right {
					display: block;
					width: auto;
					margin: 0;
					padding: 0;
					text-align: center;
				}
				.media-body {
					font-size: 14px;
					line-height: 18px;
					min-height: 54px;
				}
				.media-right {
					position: absolute; top: 24px; left: 0; right: 0;
				}
			}
		}

		&.full {
			max-width: 750px;
			margin: 0 auto;
			.achievements-title {
				font-weight: normal;
			}
			.achievements-list {
				li {
				}
				@media (min-width: 992px){
					margin: 0 -16px;
					text-align: center;
					& > li {
						display: inline-block;
						vertical-align: top;
						width: 33.3333%;
						margin-top: 0 !important;
						margin-bottom: 16px;
						padding: 0 8px;
					}
				}
			}
			.achievements-item {
				@media (min-width: 992px){
					position: relative;
					padding: 92px 16px 24px;
					.media-body, .media-left {
						display: block;
						width: auto;
						margin: 0;
						padding: 0;
						text-align: center;
					}
					.media-body {
						font-size: 14px;
						line-height: 18px;
						min-height: 54px;
					}
					.media-left {
						position: absolute; top: 24px; left: 0; right: 0;
					}
				}
			}
		}
	}

	.p-partnership__type {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: center;
		li {
			display: inline-block;
			vertical-align: middle;
			width: 50%;
			padding: 8px;
			@media (max-width: 767px){
				display: block;
				width: 240px;
				max-width: 100%;
				padding-left: 0;
				padding-right: 0;
				text-align: left;
			}
		}
		a {
			background: #D5E6F6;
			border: none;
			position: relative;
			display: block;
			padding: 20px 16px;
			@include border-radius(3px);
			//line-height: normal;
			@media (max-width: 767px){
				&:before {
					content: '';
					background: url(../images/pages/partnership/link-angle.png) no-repeat 0 0 / auto 100%;
					position: absolute; top: 0; bottom: 0; left: 100%;
					display: block; width: 23px;
					margin-left: -4px;
				}
			}
			strong {
				display: block;
				font-size: 16px;
				line-height: 16px;
			}
			span {
				display: block;
				font-size: 12px;
				line-height: 12px;
			}
			&.double {
				padding: 14px 16px;
			}
			&:hover {
				@media (min-width: 768px) {
					background: darken(#D5E6F6, 5%);
				}
			}
		}
	}
}