@import "variables";
.v2-infopage {
	h1, .h1 {
		margin-bottom: 16px;
		font-size: 32px;
		@media(max-width: 767px){
			font-size: 24px;
		}
	}
	h3, .h3 {
		margin-bottom: 16px;
		font-size: 24px;
		@media(max-width: 767px){
			font-size: 20px;
		}
	}
	.v2-infopage-container {
		@media(min-width: 991px){
			margin-left: 72px;
			margin-right: 72px;
		}
	}
	.v2-infopage-headline {
		margin: 0 0 16px 0;
		@media(min-width: 768px){
			display: flex;
			align-items: flex-end;
		}
		.headline {
			margin: 0 16px 0 0;
			font-size: 34px;
			line-height: 1.25;
			font-weight: bold;
			img {
				display: inline-block;
				vertical-align: top;
				width: 50px;
				height: 32px;
				margin-top: 8px;
				margin-left: 4px;
				@include border-radius(4px);
				@include box-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
			}
			@media(max-width: 767px){
				font-size: 24px;
				img {
					width: 36px;
					height: 24px;
					margin-top: 4px;
					margin-left: 4px;
					@include border-radius(3px);
				}
			}
		}
		.change {
			//margin-top: -4px;
			font-size: 16px;
			@media(min-width: 768px){}
			a {
				border: 0;
				color: #7E93B2;
			}
		}
	}
	.v2-infopage-track {
		margin-top: 24px;
		@media (min-width: 576px) {
			padding-left: 166px;
		}
		.v2-infopage-track__body {
			background: #F3F7FB;
			display: inline-block;
			padding: 8px 16px;
		}
	}
	.v2-infopage-other {
		max-width: 640px;
		font-size: 16px;
		.v2-infopage-other__form {
			min-height: 32px;
			margin-bottom: 32px;
			@media(max-width: 449px){
				min-height: 38px;
			}
			.other-form {
				background: $white;
				position: relative;
				display: flex;
				flex-grow: 1;
			}
			&.fix {
				.other-form {
					position: fixed; top: 0;
					z-index: 999;
					width: 1120px;
					padding: 8px 0 8px 12px;
					margin-left: -12px;
					@media(max-width: 1199px){
						width: 920px;
					}
					@media(max-width: 991px){
						width: 96%;
					}
					@media(max-width: 539px){
						left: 0; right: 0;
						width: auto;
						margin: 0;
						padding: 8px 12px;
					}
				}
			}
			.form-group {
				&:first-child{
					width: 400px;
				}
				&:not(:first-child){
					margin-left: 12px;
				}
				.field {
					/*.closer {
						right: 8px;
						width: 12px;
						height: 12px;
					}*/
					.closer {
						background: $color_gray_60;
						top: 50%; right: 8px;
						width: 18px; height: 18px;
						@include border-radius(50%);
						&:before, &:after {
							background: $color_white;
							width: 60%;
						}
					}
				}
				button {
					white-space: nowrap;
					padding-left: 12px;
					padding-right: 12px;
					.fa {}
					span {
						&:not(:first-child){
							margin-left: 4px;
						}
						@media(max-width: 767px){
							display: none;
						}
					}
				}
			}
		}
		.v2-infopage-other__list {
			.separate {
				background: #DDE4EC;
				height: 1px;
				margin-bottom: 16px;
			}
			.other-list__row {
				/*display: flex;
				@media(max-width: 575px){
					flex-direction: column;
				}*/
			}
			.other-list {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 0;
				@media(min-width: 576px){
					-webkit-column-count: 2;
					-moz-column-count: 2;
					column-count: 2;
					-webkit-column-width: 320px;
					-moz-column-width: 320px;
					column-width: 320px;
				}
				& > li {
					@media(min-width: 576px) {
						display: inline-block;
						min-width: 320px;
					}
					padding-top: 16px;
					font-size: 14px;
				}
			}
			.item {
				border: 0;
				position: relative;
				display: inline-flex;
				align-items: center;
				font-size: 16px;
				img {
					align-self: flex-start;
					display: block;
					width: 20px;
					height: 14px;
					margin-top: 5px;
					@include box-shadow(1px 1px 4px rgba(0,0,0,.4));
					&:not(:last-child){
						margin-right: 12px;
					}
				}
				i {
					font-style: normal;
				}
			}
			a.item:hover {
				i {
					text-decoration: underline;
				}
			}
		}
	}
}

.v2-infopage-tiles {
	position: relative;
	@media (min-width: 576px) {
		overflow: hidden;
	}
	.v2-infopage-tiles__list {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -16px;
		padding: 0;
		list-style: none;
		& > li {
			width: 33.3333%;
			min-width: 33.3333%;
			padding: 16px;
			&.active {
				.item {
					border-color: #0d61ab;
				}
			}
		}
		@media (max-width: 1199px) {
			margin: 0 -12px;
			& > li {
				width: 50%;
				min-width: 50%;
				padding: 12px;
			}
		}
		@media (max-width: 575px) {
			margin: 0 -12px;
			& > li {
				background: #F9FAFC;
				width: 100%;
				min-width: 100%;
				padding: 0;
				&:nth-child(2n){
					background: #E9EBEE;
				}
			}
		}
	}
	.item {
		border: 3px solid transparent;
		display: flex;
		align-items: center;
		min-height: 160px;
		padding: 20px;
		font-size: 22px;
		line-height: 1.15;
		color: $color_dark;
		@media(min-width: 576px){
			@include border-radius(6px);
		}
		.icon {
			display: block;
			width: 72px;
			margin-right: 24px;
			img {
				display: block;
				max-width: 72px;
				max-height: 72px;
			}
		}
		@media (max-width: 575px) {
			flex-direction: column;
			min-height: auto;
			padding: 40px 20px;
			.icon {
				margin: 0 0 12px 0;
			}
		}
		&.style-a {
			@media (min-width: 576px) {
				background: #f2f4f7;
				border-color: #f2f4f7;
				&:hover {
					background: darken(#f2f4f7, 5%);
					border-color: darken(#f2f4f7, 5%);
					color: $blue;
				}
			}
		}
		&.style-b {
			background: #fff;
			border-top-color: #dde4ec;
			border-bottom-color: #dde4ec;
			@media (min-width: 576px) {
				border-color: #dde4ec;
				color: $blue;
				&:hover {
					background: darken(#f2f4f7, 5%);
					border-color: darken(#f2f4f7, 5%);
				}
			}
		}
	}
}