/*
* Custom
*/
@import "partials/_variable";
@import "partials/_mixins";
@import "partials/fonts";
@import "partials/reset";

/* =Layout
*******************************************************************************/
html,
body { height: 100%; }
body{
	background: $bg-main;
	color: $color-main;
	font: $font-main;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	min-width: 320px;
	@include media(tablet) {
		font-size: 16px;
		line-height: 1.2;
	}
}
a {
	color: $color-link;
	text-decoration: underline;
	transition: color .3s ease-out, background-color .3s ease-out;
	&:hover { text-decoration: none; }
}
strong,
th{
	font-weight: normal;
	font-family: $font-bold;
}
em {
	font-style: normal;
	font-family: $font-italic;
}
strong em,
em strong {
	font-weight: normal;
	font-style: normal;
	font-family: $font-bold-italic;
}
h1 {
	font-size: $f-size-h1;
	font-family: $title-light;
	font-weight: normal;
	color: $color-title-pink;
	margin: 0 0 29px;
	@include media(tablet) {
		font-size: 36px;
	}
	@include media(mobile-small) {
		font-size: 26px;
	}
}
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	margin: 0;
	color: $color-main;
	font-size: $f-size-h2;
	font-family: $title-medium;
	@include media(mobile-small) {
		font-size: 18px;
	}
}
h3 {
	font-size: $f-size-h3;
	@include media(mobile-small) {
		font-size: 16px;
	}
}
h4 {
	font-size: $f-size-h4;
	@include media(mobile-small) {
		font-size: 14px;
	}
}
h5 {
	font-size: $f-size-h5;
	@include media(mobile-small) {
		font-size: 13px;
	}
}
h6 {
	font-size: $f-size-h6;
	@include media(mobile-small) {
		font-size: 12px;
	}
}
p {
	margin: 0 0 20px;
}
#wrapper {
	display: table;
	width: 100%;
	height: 100%;
	table-layout: fixed;
}
.container {
	max-width: 1244px;
	margin: 0 auto;
	padding: 0 10px;
}
mark.required,
mark.pink {
	background: none;
	color: $color-pink;
}

/* header */
#header {
	background: $bg-black;
	padding: 20px 25px 22px;
	color: $color-white;
	font-size: $f-size-xxs;
	font-family: $text-light;
	position: relative;
	@include media(mobile) {
		padding: 50px 0 12px;
	}
	a {
		color: $color-white;
		text-decoration: none;
	}
	p {
		margin: 0;
	}
}
.header-holder {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	@include media(tablet) {
		display: block;
	}
}
.logo {
	max-width: 302px;
	@include media(tablet) {
		max-width: 222px;
		float: left;
	}
	@include media(mobile-small) {
		float: none;
		display: block;
		margin: 0 auto 10px;
	}

	a {
		display: block;
	}
	img {
		display: block;
		width: 100%;
		height: auto;
	}
}

/* navigation */
#nav {
	flex: 1 0 auto;
	text-align: center;
	text-transform: uppercase;
	line-height: 1.33;
	@include media(tablet) {
		width: 100%;
		display: block;
		clear: both;
		padding: 22px 0 2px;
	}
	ul {
		list-style: none;
		margin: 0;
		font-size: 0;
	}
	li {
		display: inline-block;
		vertical-align: top;
		padding: 0 17px 0 18px;
		position: relative;
		font-size: $f-size-xxs;
		@include media(tablet) {
			padding: 0 8px 0 9px;
		}
		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			width: 1px;
			height: 12px;
			margin: -5px 0 0;
			background: $border-footer-menu;
			@include media(tablet) {
				margin-top: -6px;
			}
		}
		&:first-child{
			&:before {
				display: none;
			}
		}
	}
	a {
		&:hover {
			color: $color-link;
		}
	}
	.current-menu-item {
		a {
			color: $color-link;
		}
	}
}

/* buttons */
.buttons {
	font-size: 0;
}
.button,
.actions li a {
	margin: 0 6px;
	display: inline-block;
	vertical-align: top;
	font-size: 26px;
	line-height: 65px;
	height: 64px;
	font-family: $text-light;
	text-transform: uppercase;
	color: $color-white;
	background: $btn-green;
	border-radius: 8px;
	padding: 0 12px;
	min-width: 234px;
	text-align: center;
	text-decoration: none;
	@include media(mobile) {
		min-width: 0;
		padding: 0 30px;
		font-size: 17px;
		height: 40px;
		line-height: 41px;
	}
	&:hover {
		background: $btn-green-hover;
	}
	&.gray {
		background: $btn-gray;
		&:hover {
			background:$btn-gray-hover;
			color: #30302f;
		}
	}
	&.dark-gray {
		background: $btn-dark;
		&:hover {
			background:$btn-gray-hover;
			color: #30302f;
		}
	}
}
#header {
	.buttons {
		order: 1;
		margin: 0 0 2px;
		@include media(tablet) {
			float: right;
			padding: 8px 0 0;
			margin-bottom: 0;
		}
		@include media(mobile-small) {
			float: none;
			text-align: center;
			padding: 0;
		}
	}
	.button {
		font-size: 17px;
		line-height: 41px;
		height: 40px;
		border-radius: 4px;
		min-width: 126px;
		&.gray {
			&:hover {
				color: #30302f;
			}
		}
	}
}
.banner {
	.buttons {
		text-align: center;
	}
	.button {
		min-width: 230px;
		font-size: 20px;
		line-height: 63px;
		height: 62px;
		margin: 0 12px;
		@include media(mobile-small) {
			font-size: 17px;
			line-height: 41px;
			height: 40px;
			margin-bottom: 10px;
		}
		&.big {
			height: 92px;
			line-height: 92px;
			border-radius: 11px;
			font-size: 36px;
			padding: 0 20px;
			min-width: 422px;
			@include media(mobile) {
				min-width: 0;
				padding: 0 30px;
				font-size: 17px;
				height: 40px;
				line-height: 41px;
			}
		}
	}
	.btn-holder {
		margin: 0 0 30px;
		@include media(mobile) {
			display: none;
		}
	}
}
button.button {
	border: 0;
	font-size: 17px;
	line-height: 41px;
	height: 40px;
	border-radius: 4px;
	min-width: 126px;
}

/* responsive menu */
a.meanmenu-reveal {
	display: none;
}
.mean-container .mean-bar {
	z-index: 9997;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background: $bg-pink;
	font-family: $text-light;
}
.mean-container a.meanmenu-reveal {
	width: 20px;
	height: 16px;
	padding: 13px 11px 11px;
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
	text-indent: -9999em;
	line-height: 16px;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	display: block;
	margin: 0 0 0 auto;
	font-weight: 700;
	&.meanclose {
		font-size: 16px;
	}
}
.mean-container a.meanmenu-reveal span {
	display: block;
	background: #fff;
	height: 2px;
	margin-bottom: 4px;
	transform-origin: left center;
}
.mean-container .mean-nav {
	background: #80807f;
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	top:100%;
}

.mean-container .mean-nav ul {
	padding: 0;
	margin: 0;
	width: 100%;
	list-style-type: none;
	line-height: 1.25;
}
.mean-container .mean-nav > ul {
	border-bottom: 1px solid #fff;
}
.mean-container .mean-nav ul li {
	position: relative;
	width: 100%;
}

.mean-container .mean-nav ul li a {
	display: block;
	box-sizing: border-box;
	padding: 13px 50px 13px 3%;
	margin: 0;
	text-align: left;
	color: #fff;
	text-decoration: none;
	text-transform: none;
	font-size: $f-size-xxs;
	text-transform: uppercase;
	line-height: 1.25;
	border: 1px solid #fff;
	border-width: 1px 0 0;
}

.mean-container .mean-nav ul li li a {
	padding-left: 6%;
	border-top: 1px solid #fff;
	border-top: 1px solid rgba(255,255,255,.5);
	text-shadow: none !important;
	visibility: visible;
}

.mean-container .mean-nav ul li.mean-last a {
	border-bottom: none;
	margin-bottom: 0;
}

.mean-container .mean-nav ul li li li a {
	padding-left: 9%;
}

.mean-container .mean-nav ul li li li li a {
	padding-left: 12%;
}

.mean-container .mean-nav ul li li li li li a {
	padding-left: 15%;
}

.mean-container .mean-nav ul li a:hover {
	background: $bg-black;
}

.mean-container .mean-nav ul li a.mean-expand {
	width: 41px;
	height: 41px;
	font: bold 14px/42px Arial, Helvetica, sans-serif;
	text-align: center;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	background: rgba(255,255,255,0.1);
	border: none !important;
	border-left: 1px solid rgba(255,255,255,0.4);
	padding: 0;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
	background: rgba(255,255,255,0.3);
}

.mean-container .mean-push {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	clear: both;
}
.mean-nav .wrapper {
	width: 100%;
	padding: 0;
	margin: 0;
}
.mean-container .mean-bar, .mean-container .mean-bar * {
	box-sizing: content-box;
}
.mean-remove {
	display: none !important;
}

/* main */

#main {
	display: table-row;
	height: 100%;
}
.banner {
	padding: 111px 0 45px;
	text-align: center;
	color: $color-white;
	position: relative;
	@include media(tablet) {
		padding: 30px 0;
		background-position: 30% 0 !important;
	}
	@include media(mobile) {
		padding: 15px 0 10px;
	}
	h1 {
		font-size: $f-size-xxl;
		font-family: $text-light;
		margin: 0 0 85px;
		color: $color-white;
		text-shadow: 0 2px 6px rgba(0,0,0,.65);
		@include media(tablet) {
			font-size: 42px;
			margin: 0 0 20px;
		}
		@include media(mobile) {
			font-size: 26px;
			margin-bottom: 15px;
		}
	}
	h2 {
		text-transform: none;
		color: $color-white;
		font-size: $f-size-xl;
		font-family: $title-light;
		font-weight: normal;
		margin: 0 0 5px;
		@include media(tablet) {
			font-size: 26px;
			margin: 0 0 10px;
		}
		@include media(mobile) {
			font-size: 20px;
		}
	}
	&:before,
	&:after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top:0;
		bottom: 0;
		background: rgba(48,48,47,.36);
	}
	&:after {
		background: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(255,255,255,.04) 9px, rgba(255,255,255,.04) 12px);
	}
	.container {
		position: relative;
		z-index: 2;
	}
	.items-list {
		margin: 0;
		text-align: left;
		display: inline-block;
		vertical-align: top;
		list-style: none;
		font-size: 29px;
		font-family: $font-regular;
		@include media(tablet) {
			font-size: 24px;
		}
		@include media(mobile) {
			font-size: 18px;
		}
		li {
			padding: 0 0 18px 57px;
			position: relative;
			@include media(tablet) {
				padding-top: 2px;
			}
			@include media(mobile) {
				padding-top: 5px;
				padding-bottom: 12px;
			}
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 2px;
				background: url(../images/sprite.png) no-repeat 0 -143px;
				width: 30px;
				height: 30px;
			}
		}
	}
}
.choose-area {
	max-width: 1024px;
	margin: 0 auto 80px;
	padding: 0 158px 0 0;
	@include media(tablet) {
		padding-right: 94px;
		margin-bottom: 40px;
	}
	@include media(mobile) {
		padding-right: 0;
		margin-bottom: 20px;
	}
	.form-holder {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin: 0 0 8px;
		@include media(mobile) {
			display: block;
			margin-bottom: 10px;
		}
	}
	.price-holder {
		width: 140px;
		height: 140px;
		display: table;
		background: $bg-pink;
		text-align: center;
		border-radius: 50%;
		color: $color-white;
		margin: 0 -158px 0 18px;
		font-size: 49px;
		font-family: $text-bold;
		@include media(tablet) {
			width: 90px;
			height: 90px;
			margin: 0 -94px 0 4px;
			font-size: 30px;
		}
		@include media(mobile) {
			margin: 0 auto;
		}
		.price {
			display: table-cell;
			vertical-align: middle;
		}
	}
}
.choose-panel {
	flex: 1 0 auto;
	padding: 26px 12px 27px 11px;
	margin: 0 37px 0 0;
	position: relative;
	background: rgba(255,255,255,.5);
	font-size: 0;
	@include media(mobile) {
		margin: 0 0 10px;
		padding-bottom: 17px;
	}
	&:before {
		content: '';
		position: absolute;
		right: -37px;
		top: 0;
		@include triangle-right(37px, 106px, #fff);
		@include media(mobile) {
			display: none;
		}
	}
}
.choose-field {
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	padding: 0 8px;
	font-family: $text-light;
	width: 32%;
	@include media(mobile) {
		width: 100%;
		margin: 0 0 10px;
	}
	&.medium-size {
		width: 20%;
		@include media(mobile) {
			width: 50%;
		}
	}
	&.small-size {
		width: 16%;
		@include media(mobile) {
			width: 50%;
		}
	}
	select {
		width: 100%;
		height: 53px;
		display: block;
	}
}
.line-on-sides {
	text-align: center;
	overflow: hidden;
	margin: 0 auto 30px;
	&:before,
	&:after {
		content: '';
		background: #fff;
		display: inline-block;
		height: 1px;
		position: relative;
		vertical-align: middle;
		width: 50%;
		max-width: 159px;
	}
	&:before {
		right: 0.5em;
		margin-left: -50%;
	}
	&:after {
		left: 0.5em;
		margin-right: -50%;
	}
	.text-holder {
		font-family: $text-light;
		display: inline-block;
		vertical-align: middle;
		max-width: 80%;
		font-size: 24px;
	}
}
.content-row {
	padding: 40px 0;
	text-align: center;
	@include media(mobile-small) {
		padding: 15px 0;
	}
	&.green {
		background: $bg-green;
		h1 {
			margin: 0 0 56px;
			@include media(tablet) {
				margin-bottom: 29px;
			}
		}
	}
	&.gray {
		background: $bg-gray;
	}
}
.text-area {
	max-width: 968px;
	margin: 0 auto;
}
.green {
	h1 {
		color: $color-white;
	}
}
/* slider */
.bx-wrapper {
	position: relative;
	padding: 0 55px;
	@include media(mobile-small) {
		padding: 0;
	}
}
.bx-viewport {
	z-index: 2;
}
.slider {
	padding: 57px 0 29px;
	font-size: $f-size;
	line-height: 1.09;
	@include media(tablet) {
		font-size: 16px;
		line-height: 1.2;
		padding: 15px 0 0;
	}
	.switchers {
		font-family: $text-light;
		font-size: 0;
		list-style: none;
		color: $color-main;
		margin: 0 0 62px;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		@include media(tablet) {
			margin-bottom: 32px;
		}
		li {
			font-size: 36px;
			line-height: 39px;
			padding: 0 33px 0 34px;
			position: relative;
			max-width: 33%;
			@include media(tablet) {
				padding: 0 7px 0 8px;
				font-size: 18px;
				line-height: 22px;
			}
			@include media(mobile) {
				font-size: 0;
				line-height: 0;
				padding: 0 5px;
			}
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 2px;
				height: 36px;
				margin: -17px 0 0;
				background: $border-black;
				@include media(tablet) {
					height: 22px;
					margin-top: -11px;
					width: 1px;
				}
				@include media(mobile) {
					display: none;
				}
			}
			&:first-child{
				&:before {
					display: none;
				}
			}
		}
		a {
			text-decoration: none;
			color: $color-main;
			height: 100%;
			display: flex;
			padding: 0 0 24px;
			position: relative;
			overflow: hidden;
			text-indent: -9999px;
			@include media(mobile) {
				width: 14px;
				height: 14px;
				background: $bg-black;
				border-radius: 50%;
				display: inline-block;
				vertical-align: top;
				padding: 0;
			}
			&:before {
				content: '';
				position: absolute;
				left: -100%;
				bottom: 0;
				height: 8px;
				background: $bg-pink;
				width: 0;
				transition: all .4s ease-out;
				@include media(mobile) {
					display: none;
				}
			}
			&:hover,
			&.active {
				color: $color-pink;
				@include media(mobile) {
					background: $bg-pink;
				}
				&:before {
					left: 0;
					width: 100%;
				}
			}
		}
	}
	.bx-prev,
	.bx-next {
		position: absolute;
		top: 50%;
		font-size: 0;
		line-height: 0;
		height: 53px;
		width: 53px;
		border-top: 2px solid #d6d7d8;
		padding-top: 11px;
		margin-top: -54px;
		transition: border-color .3s;
		@include media(mobile) {
			display: none;
		}
		&:hover {
			border-color: $border-pink;
		}
	}
	.bx-prev {
		left: 0;
		border-left: 2px solid #d6d7d8;
		transform: rotate(-45deg);
		margin-left: 11px;
	}
	.bx-next {
		right: 0;
		border-right: 2px solid #d6d7d8;
		transform: rotate(45deg);
		margin-right: 11px;
	}
	.slideshow {
		list-style: none;
		margin: 0;
		text-align: left;
		li {
			float: left;
		}
	}
	.slide {
		display: table;
		border-collapse: collapse;
		width: 100%;
		table-layout: fixed;
		@include media(mobile-small) {
			display: block;
		}
	}
	.image {
		width: 50%;
		padding: 57px 6% 0 0;
		display: table-cell;
		vertical-align: top;
		@include media(mobile-small) {
			display: block;
			margin: 0 auto;
			width: 80%;
			padding: 0;
		}
		img {
			display: inline-block;
			vertical-align: top;
			width: 100%;
			height: auto;
		}
	}
	.slide-desc {
		display: table-cell;
		padding: 0 0 150px;
		position: relative;
		vertical-align: top;
		line-height: 1.2;
		@include media(tablet) {
			padding-bottom: 65px;
		}
		@include media(mobile) {
			padding-bottom: 41px;
		}
		@include media(mobile-small) {
			display: block;
			text-align: center;
		}
		p {
			margin: 0 0 26px;
			@include media(mobile-small) {
				margin-bottom: 10px;
			}
		}
	}
	.logo-box {
		text-align: center;
		font-family: $title-light;
		font-size: 28px;
		padding: 0 0 3px;
		@include media(tablet) {
			font-size: 18px;
		}
		@include media(mobile) {
			font-size: 15px;
		}
		a {
			display: inline-block;
			vertical-align: top;
			max-width: 100%;
		}
		img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
			height: auto;
		}
	}
	.btn-holder {
		position: absolute;
		bottom: 67px;
		left: 0;
		width: 100%;
		text-align: center;
		@include media(tablet) {
			bottom: 0;
		}
	}
}
.prices {
	list-style: none;
	margin: 0 0 20px;
	position: relative;
	font-family: $text-bold;
	font-size: 0;
	color: $color-main;
	@include media(mobile-small) {
		margin: 0;
	}
	&:before {
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 1px;
		background: #fff;
	}
	li {
		padding: 0 6%;
		display: inline-block;
		vertical-align: top;
		font-size: 56px;
		line-height: 59px;
		@include media(desktop) {
			font-size: 28px;
			line-height: 30px;
		}
		@include media(mobile-small) {
			padding: 0 12px;
			font-size: 17px;
			line-height: 20px;
		}
	}
	.circle {
		width: 448px;
		height: 448px;
		background: #fff;
		text-align: center;
		display: table-cell;
		vertical-align: middle;
		border-radius: 50%;
		@include media(desktop) {
			width: 224px;
			height: 224px;
		}
		@include media(mobile-small) {
			width: 126px;
			height: 126px;
		}
		p {
			margin: 0;
		}
	}
	.price {
		display: block;
		text-align: center;
		font-size: 176px;
		line-height: 179px;
		margin: -20px 0 -8px;
		@include media(desktop) {
			font-size: 88px;
			line-height: 90px;
			margin: 0;
		}
		@include media(mobile-small) {
			font-size: 44px;
			line-height: 47px;
		}
	}
	.currency {
		font-size: 96px;
		line-height: 99px;
		@include media(desktop) {
			font-size: 48px;
			line-height: 50px;
		}
		@include media(mobile-small) {
			font-size: 24px;
			line-height: 27px;
		}
	}
}
.list-columns {
	list-style: none;
	margin: 0 0 -13px;
	font-family: $text-ultralight;
	font-size: $f-size-l;
	line-height: 1.2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	@include media(mobile-small) {
		margin-bottom: 0;
	}
	li {
		position: relative;
		width: 29.25%;
		padding: 33px 1.4% 5px;
		@include media(tablet) {
			padding: 15px 10px 5px;
			font-size: 20px;
		}
		@include media(mobile-small) {
			display: block;
			width: 100%;
			font-size: 16px;
			padding: 5px 0;
		}

		&:before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 80px;
			width: 1px;
			background: $border-light-gray;
			@include media(mobile-small) {
				display: none;
			}
		}
		&:first-child{
			&:before {
				display: none;
			}
		}
	}
	img {
		max-width: 100%;
		height: auto;
		display: inline-block;
		vertical-align: top;
		margin: 0 0 38px;
	}
	.text-big {
		display: block;
		text-align: center;
		color: $color-pink;
		font-family: $text-bold;
		font-size: 44px;
		margin: -11px 0 -5px;
		@include media(tablet) {
			font-size: 32px;
		}
	}
}
.payments {
	h1 {
		color: $color-title-black;
	}
}
.payments-list {
	list-style: none;
	margin: 0 0 -5px;
	padding: 30px 0 0;
	font-size: 0;
	font-family: $text-ultralight;
	@include media(mobile-small) {
		padding-top: 0;
	}
	li {
		display: inline-block;
		vertical-align: top;
		padding: 0 47px 5px;
		width: 33.3%;
		font-size: $f-size-l;
		line-height: 1.2;
		@include media(desktop) {
			padding: 0 20px 5px;
		}
		@include media(tablet) {
			padding: 0 10px 5px;
			font-size: 20px;
		}
		@include media(mobile-small) {
			padding: 0 2px 5px;
			font-size: 12px;
		}
	}
	.logo-holder{
		border: 1px solid $border-dark-gray;
		width: 100%;
		max-width: 313px;
		margin: 0 auto 33px;
		@include media(tablet) {
			margin-bottom: 15px;
		}
		a {
			display: block;
		}
		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}
.white-box {
	padding: 21px;
	background: #fff;
	border: 1px solid $border-gray;
	max-width: 704px;
	margin: 0 auto 39px;
	font-family: $text-ultralight;
	@include media(mobile-small) {
		margin-bottom: 0;
	}
	.note-box {
		font-size: 14px;
		line-height: 1.2;
		padding: 0 0 15px;
		p {
			margin: 0;
		}
	}
	.note {
		font-size: $f-size-xxs;
		line-height: 1.2;
		display: block;
		text-align: left;
		margin: 0 0 7px;
		@include media(mobile-small) {
			margin: 5px 0 0;
		}
	}
}
form {
	text-align: left;
	font-size: $f-size-form;
	line-height: 1.286;
	font-family: $text-ultralight;
	margin: 0 0 3px;
	input{
		&[type="text"],
		&[type="email"],
		&[type="password"],
		&[type="url"],
		&[type="tel"] {
			display: block;
			width: 100%;
			font-size: $f-size-form;
			line-height: 20px;
			padding: 9px 8px 8px;
			border: 1px solid $border-dark-gray;
			color: $color-placeholder;
			&:focus {
				outline: none;
			}
			&[type="checkbox"] {
				display: inline-block;
				vertical-align: top;
				width: 16px;
				height: 16px;
			}
		}
	}
	select {
		display: block;
		width: 100%;
		height: 39px;
		border: 1px solid $border-dark-gray;
		color: $color-placeholder;
	}
	&.signup-form {
		min-height: 106px;
		input{
			&[type="text"],
			&[type="email"],
			&[type="password"],
			&[type="url"],
			&[type="tel"]{
				border: 1px solid $border-pink;
			}
		}
		select {
			border: 1px solid $border-pink;
		}
	}
	label {
		padding: 0 0 2px;
		display: inline-block;
		vertical-align: top;
	}
	.check-area {
		padding: 20px 0 14px 26px;
		font-size: $f-size-xxs;
		line-height: 1.2;
		width: 100%;
		clear: both;
		@include media(mobile-small) {
			padding: 0 0 0 26px;
		}
		p {
			margin: 0;
		}
		input {
			&[type="checkbox"] {
				margin: 0 0 0 -26px;
				float: left;
				display: none;
				&:checked {
					~ label {
						&:after {
							content: '';
							position: absolute;
							left: 3px;
							top:2px;
							width: 11px;
							height: 11px;
							background: url(../images/sprite.png) no-repeat -87px -33px;
						}
					}
				}
			}
		}
		label {
			vertical-align: top;
			padding: 0 0 10px 26px;
			margin: 0 0 0 -26px;
			position: relative;
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 13px;
				height: 13px;
				border: 1px solid $border-pink;
			}
			&.error {
				margin: 0;
				&:before {
					display: none;
				}
			}
		}
	}
	.required {
		font-family: $text-bold;
	}
}
.form-row {
	font-size: 0;
}
.form-column {
	font-size: $f-size-form;
	display: inline-block;
	vertical-align: bottom;
	width: 50%;
	padding: 0 0 0 15px;
	@include media(mobile-small) {
		display: block;
		width: 100%;
		padding: 0;
		font-size: 12px;
		line-height: 15px;
	}
	&:first-child {
		padding-left: 0;
	}
	.sub-columns {
		font-size: 0;
	}
	.sub-column {
		width: 50%;
		padding: 0 0 0 17px;
		display: inline-block;
		vertical-align: bottom;
		font-size: $f-size-form;
		@include media(mobile-small) {
			font-size: 12px;
			line-height: 15px;
		}
		&:first-child {
			padding-left: 0;
		}
	}
}
.form-field {
	padding: 0 0 19px;
	position: relative;
	label.error {
		position: absolute;
		padding: 0;
		left: 0;
		font-size: 10px;
		line-height: 14px;
		bottom: 0;
		color: $color-pink;
	}
}
.signup-form {
	.steps .current-info,
	.content .title {
		position: absolute;
		left: -9999em;
	}
	.content {
		display: block;
		.body {
			float: left;
			width: 100%;
		}
	}
	.actions {
		text-align: center;
		> ul {
			list-style: none;
			padding: 0;
			margin: 0;
			> li:first-child {
				display: none;
			}
		}
	}
}
.steps {
	margin: 0 -22px 18px;
	text-transform: uppercase;
	font-size: 13px;
	line-height: 17px;
	font-family: $text-medium;
	border: 1px solid #d6d7d8;
	ul {
		list-style: none;
		margin: 0;
		display: flex;
		background: #f0f0f0;
	}
	li {
		flex: 1 1 auto;
		margin: 0 0 0 -25px;
		position: relative;
		z-index: 2;
		overflow: hidden;
		max-width: 250px;
		@include media(mobile) {
			font-size: 0;
			line-height: 0;
			text-align: center;
		}
		&.disabled {
			pointer-events: none;
		}
		&:last-child {
			padding-right: 0;
			a {
				margin-right: 0;
				&:after,
				&:before {
					display: none;
				}
			}
		}
		&:first-child {
			margin-left: 0;
			a {
				margin-left: 0;
				padding-left: 25px;
			}
		}
		a {
			display: block;
			color: $color-main;
			text-decoration: none;
			padding: 15px 0 12px 37px;
			margin: 0 27px 0 0;
			position: relative;
			&:before,
			&:after {
				content: '';
				position: absolute;
				top:0;
				left: 100%;
				border: solid transparent;
				height: 0;
				width: 0;
			}
			&:before {
				border-color: rgba(218, 219, 219, 0);
				border-left-color: #dadbdb;
				border-width: 27px;
				margin-top: -2px;
			}
			&:after {
				border-color: rgba(240, 240, 240, 0);
				border-left-color: #f0f0f0;
				border-width: 25px;
				transition: border-color .3s ease-out;
			}
			&:hover {
				background: $bg-pink;
				color: $color-white;
				&:after {
					border-left-color: $bg-pink;
				}
				.number {
					background: #fff;
					color: $color-pink;
				}
			}
		}
		&.done a,
		&.current a {
			background: $bg-pink;
			color: $color-white;
			&:after {
				border-left-color: $bg-pink;
			}
			.number {
				background: #fff;
				color: $color-pink;
			}
		}
		.number {
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			width: 23px;
			height: 23px;
			font-size: 16px;
			line-height: 22px;
			background: $bg-pink;
			border-radius: 12px;
			color: $color-white;
			margin: -1px 2px 0 0;
			transition: background .3s ease-out, color .3s ease-out;
			@include media(mobile) {
				font-size: 16px;
				line-height: 24px;
			}
		}
	}
}

/* footer */
#footer {
	background: $bg-black;
	padding: 75px 0 25px;
	text-align: center;
	font-size: $f-size-xxs;
	line-height: 1.33;
	font-family: $font-light;
	color: $color-gray;
	@include media(mobile-small){
		font-size: 11px;
		padding: 15px 0 5px;
	}
	a {
		color: $color-gray;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
	p {
		margin: 0;
	}
	ul {
		margin: 0 0 32px;
		font-size: 0;
		@include media(mobile-small){
			margin: 0 0 10px;
		}
		li {
			display: inline-block;
			vertical-align: top;
			position: relative;
			font-size: $f-size-xxs;
			padding: 0 4px 0 6px;
			@include media(mobile-small){
				font-size: 11px;
				padding: 0 3px 0 4px;
			}
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				width: 1px;
				height: 12px;
				margin: -5px 0 0;
				background: $border-footer-menu;
			}
			&:first-child{
				&:before {
					display: none;
				}
			}
		}
	}
	.footer-menu {
		color: $color-white;
		text-transform: uppercase;
		font-family: $text-light;
		li {
			padding: 0 11px 0 12px;
			&:before {
				background: $border-white;
			}
		}
		a {
			color: $color-white;
		}
	}
	.social-networks {
		li {
			padding: 0 3px;
			&:before {
				display: none;
			}
		}
		a {
			display: block;
			width: 29px;
			height: 28px;
			font-size: 0;
			line-height: 0;
			transition: background .4s ease-out;
			background: #fff;
			border-radius: 50%;
			position: relative;
			svg {
				fill: #30302f;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				transition: all .4s ease-out;
			}
			&:hover {
				background: $bg-pink;
				svg {
					fill: $color-white;
				}
			}
		}
	}
}
/* Fancybox */
.popup-holder {
	display: none;
}
.popup {
	&.popup-login {
		width: 380px;
		@include media(mobile) {
			width: auto;
		}
	}
	min-width: 250px;
	max-width: 900px;
	padding: 14px;
	@include media(mobile) {
		padding: 0;
	}
	h2 {
		font-size: 22px;
		@include media(mobile) {
			font-size: 16px;
		}
	}
	table {
		width: 100%;
		table-layout: fixed;
		box-sizing: border-box;
		@include media(mobile) {
			display: block;
		}
		tr {
			@include media(mobile) {
				display: block;
			}
		}
		tr:nth-child(even) {
			td {
				background: $bg-gray;
			}
		}
	}
	td {
		border: 1px solid #fff;
		padding: 8px;
		box-sizing: border-box;
		vertical-align: middle;
		&:last-child {
			text-align: center;
			@include media(mobile) {
				text-align: left;
			}
		}
		&.price-cell {
			@include media(mobile) {
				font-size: 0;
				line-height: 0;
				padding: 0;
			}
		}
		@include media(mobile) {
			display: block;
			width: 100%;
			padding: 5px 5px 5px 120px;
			font-size: 13px;
			line-height: 16px;
			border: 0;
			word-wrap: break-word;
		}
	}
	tbody {
		@include media(mobile) {
			display: block;
		}
	}
	thead {
		@include media(mobile) {
			display: block;
			background: $bg-green;
			font-size: 0;
			padding: 5px;
			box-sizing: border-box;
		}
		td {
			background: $bg-green;
			border: 0;
			font-size: 16px;
			line-height: 19px;
			font-family: $text-light;
			@include media(mobile) {
				display: inline-block;
				vertical-align: top;
				padding-left: 5px;
			}
			&.medium-size {
				width: 20%;
				@include media(mobile) {
					width: 50%;
				}
			}
			&.small-size {
				width: 16%;
				@include media(mobile) {
					width: 50%;
				}
			}
		}
	}
	.choose-field {
		display: block;
		font-size: 0;
		width: 100%;
		padding: 0;
		margin: 0;
		height: 53px;
	}
	.btn-holder {
		text-align: center;
		.button {
			margin: 0 0 20px;
		}
		p {margin: 0;}
	}
}
.popup-heading {
	text-align: center;
	margin: 0 0 24px;
	@include media(mobile) {
		margin-bottom: 10px;
	}
	.button {
		margin: 0 0 10px;
		&:hover {
			background: $btn-green;
		}
	}
}
.mobile-title {
	display: none;
	font-family: $text-medium;
	@include media(mobile) {
		display: block;
		float: left;
		width: 115px;
		margin: 0 0 0 -115px;
	}
}
table.offers tr {
  @include media(mobile) {
	border-top: 1px grey solid;
  }
}
table.offers tr:first-child {
	@include media(mobile) {
		border-top: none;
	}
}
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
}
.fancybox-skin {
	position: relative;
	background: #fff;
	color: #444;
	text-shadow: none;
}

.fancybox-opened {
	z-index: 9999;
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading {
	div {
		width: 44px;
		height: 44px;
		background: url('../images/fancybox_loading.gif') center center no-repeat;
	}
}

.fancybox-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	z-index: 8040;
	overflow: hidden;
	&:hover {
		&:before, &:after {
			background: $bg-pink;
		}
	}
	&:before,
	&:after {
		content: '';
		position: absolute;
		height: 2px;
		width: 100%;
		top: 50%;
		left: 0;
		margin-top: -1px;
		background: $bg-black;
	}
	&:before {
		transform: rotate(45deg);
	}
	&:after {
		transform: rotate(-45deg);
	}
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	/*overflow: hidden !important;*/
	width: auto;
}

.fancybox-lock {
	body {
		overflow: hidden !important;
	}
}

.fancybox-lock-test {
	overflow-y: hidden !important;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 9998;
	background: rgba(0,0,0,.6);
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* custom select */
.zs {
	width: 100% !important;
	display: inline-block;
	position: relative;
	color: $color-placeholder;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	select {
		position: absolute;
		z-index: -1;
		opacity: 0.00000001;
		cursor: pointer;
		&[style="display: none;"] {
			+ .zs-text {
				display: none;
			}
		}
	}
	&.zs-open {
		.zs-drop {
			display: block;
			z-index: 9999;
		}
	}
	&.zs-open-top {
		.zs-drop {
			top: auto;
			bottom: 100%;
		}
	}
	&.zs-placeholder-active {
		.zs-text {
			color: fadeout(#fff, 50%);
		}
	}
}
.form-column .zs {
	display: block;
}
.zs-text {
	display: block;
	padding: 9px 34px 9px 9px;
	position: relative;
	font-size: 16px;
	line-height: 19px;
	font-family: $title-ultralight;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	-webkit-transition: color .3s;
	-ms-transition: color .3s;
	transition: color .3s;
	background: #fff;
	border: 1px solid $border-pink;
	&:after {
		display: none;
	}
}
.zs-btn {
	height: 39px;
	position: absolute;
	right: 0;
	width: 34px;
	top: 0;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
	&:before {
		content: '';
		position: absolute;
		right: 15px;
		top: 50%;
		margin-top: -2px;
		@include triangle-bottom(8px, 6px, $bg-black);
		box-sizing: border-box;
	}
}
.zs-drop {
	display: none;
	min-width: 100%;
	max-height: 324px;
	position: absolute;
	top: 100%;
	left: 0;
	overflow: auto;
	background: #fff;
	border: 1px solid $border-pink;
	border-top: 0;
	z-index: 9999;
}
.zs-drop-item {
	padding: 8px 11px 8px;
	font-size: 16px;
	line-height: 19px;
	color: $color-placeholder;
	cursor: pointer;
	-webkit-transition: all .3s;
	-ms-transition: all .3s;
	transition: all .3s;
	&:hover {
		color: $color-white;
		background: $bg-black;
	}
	&:last-child {
		border-bottom: none;
		box-shadow: none;
	}
	&.zs-active:not(.zs-drop-disabled) {
		color: $color-white;
		background: $bg-black;
		position: relative;
	}
	&.zs-item-focus:not(.zs-drop-disabled) {
		background: fadeout($bg-black, 50%);
		color: $color-white;
	}
}
.choose-field {
	.zs {
		color: $color-main;
		&.zs-open-top {
			.zs-drop {
				top: auto;
				bottom: 8px;
				left: -26px;
			}
		}
		&.zs-placeholder-active {
			.zs-text {
				color: fadeout(#fff, 50%);
			}
		}
	}
	.zs-text {
		padding: 18px 26px 16px 19px;
		font-family: $text-light;
		pointer-events: none;
		border: 0;
		height: 53px;
	}
	.country-select-zs {
		.zs-text {
			padding: 16px 26px 12px 19px;
			img {
				display: inline-block;
				vertical-align: middle;
				margin: -1px 8px 0 0;
				&[src=""] {
					display: none;
				}
			}
		}
		.zs-drop-item {
			img {
				display: inline-block;
				vertical-align: middle;
				margin: -1px 8px 0 0;
			}
		}
	}
	.type-select-zs {
		.ico-web,
		.ico-mobile {
			width: 31px;
			height: 27px;
			margin: 0 8px 0 0;
			display: inline-block;
			vertical-align: middle;
			position: relative;
			font-size: 0;
			line-height: 0;
			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				background: url(../images/sprite.png) no-repeat;
			}
		}
		.ico-web {
			&:before {
				background-position: 0 0;
				height: 23px;
				width: 31px;
			}
		}
		.ico-mobile {
			&:before {
				background-position: -82px 0;
				width: 17px;
				height: 27px;
			}
		}
		.zs-text {
			padding: 14px 26px 12px 17px;
			height: 53px;
		}
		.zs-drop-item {
			&:hover,
			&.zs-active:not(.zs-drop-disabled),
			&.zs-item-focus:not(.zs-drop-disabled) {
				.ico-web {
					&:before {
						background-position: 0 -33px;
					}
				}
				.ico-mobile {
					&:before {
						background-position: -49px 0;
					}
				}
			}
			&.zs-active:not(.zs-drop-disabled) {
				&:before {
					top: 11px;
				}
			}
		}
	}
	.zs-btn {
		height: 53px;
		width: 26px;
		&:before {
			margin-top: -1px;
			@include triangle-bottom(8px, 6px, #4f4f4f);
		}
	}
	.zs-drop {
		top: 8px;
		left: -26px;
		box-shadow: 0 0 6px rgba(0,0,0,.47);
		border: 0;
	}
	.zs-drop-item {
		padding: 9px 10px 9px 28px;
		color: $color-main;
		margin: 0;
		&:hover {
			color: $color-white;
			background: $bg-black;
		}
		&.zs-active:not(.zs-drop-disabled) {
			&:before {
				content: '';
				position: absolute;
				left: 5px;
				top: 10px;
				background: url(../images/sprite.png) no-repeat -64px -33px;
				width: 17px;
				height: 17px;
			}
		}
	}
}
#faq {
	position: fixed;
	z-index: 100;
	top: 151px;
	right: 0;
	background-color: #fff;
	height: 100%;
	width: 400px;
	top: 0;
	padding: 80px 5px 15px 15px;
	overflow: scroll;
}
h2.section-title{
	font-size: 40px;
	font-family: $text-light;
	font-weight: bold;
	color: #d91082;
	margin: 0 0 29px;
}
#accordion{
	font-size: 20px;
	font-family: $text-light;
	font-weight: normal;
	color: #30302f;
	margin: 0 0 29px;
}
.faq-item h4{
	font-size: 20px;
	font-family: $text-light;
	font-weight: normal;
	color: #d91082;
	margin: 0 0 29px;
	cursor: pointer;
}
.answer{
	font-family: $text-light;
	font-weight: normal;
	border-left: 3px solid;
	border-color: #d91082;
	padding-left: 20px;
	padding-right: 20px;
	font-size: 16px;
}

.device {
	list-style: none;
	margin: 0 0 20px;
	position: relative;
	font-family: $text-bold;
	font-size: 0;
	color: #30302f;
}
.device li {
	padding: 0 2% 10px;
	display: inline-block;
	vertical-align: top;
	font-size: 56px;
	line-height: 59px;
}

.price_circle {
	display: inline-block;
	vertical-align: middle;
	font-size: 49px;
	font-family: $text-bold;
}
div.white {
	text-align: center;
	position: relative;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	font-size: 70px;
	line-height: 1;
	font-family: $text-bold;
	@include media(mobile) {
		font-size: 28px;
	}
}
div.white.little{
	font-size: 32px;
	@include media(mobile) {
		font-size: 22px;
	}
}
.white p{
	font-size: 20px;
	margin: 0 0 10px;
	@include media(mobile) {
		margin: 0;
	}
}
.circles {
	margin: 0 0 30px;
	@include media(mobile) {
		font-size: 0;
		margin: 0 0 5px;
	}
}
div.inline_service{ 
	color: #30302f;
	font-family: $font-bold;
	display: inline-block;
	vertical-align: top;
	padding: 0 19px 15px;
	@include media(tablet) {
		margin: 0 auto;
	}
	@include media(mobile) {
		font-size: 15px;
		line-height: 1.2;
		padding: 0 5px 5px;
		width: 120px;
	}
	@include media(mobile-small) {
		margin: 0 auto;
	}
}
div.circle {
	width: 235px;
	height: 235px;
	background: #d91082;
	background: rgba(217,16,130,.77);
	border-radius: 50%;
	color: #fff;
	margin-bottom: 18px;
	padding: 30px;
	@include media(mobile) {
		width: 110px;
		height: 110px;
		margin: 0 0 5px;
		padding: 0;
	}
}
a.close{
	position: absolute;
	top: 5px;
	right: 5px;
}
/*fe styles*/
.sale-section {
	font-size: 20px;
	line-height: 1.2;
	@include media(tablet) {
		font-size: 16px;
	}
	h1 {
		color: #1a1a1a;
	}
	.holder {
		text-align: left;
		padding: 25px 0 0;
		@include media(mobile) {
			padding-top: 0;
		}
	}
	.table-holder {
		float: right;
		margin: 0 0 0 11%;
		width: 550px;
		@include media(desktop) {
			margin-left: 3%;
		}
		@include media(tablet) {
			width: 400px;
		}
		@include media(mobile) {
			float: none;
			width: 100%;
			margin: 0 0 10px;
		}
		p {
			margin: 0;
		}
		.note-text {
			font-size: 14px;
			@include media(tablet) {
				font-size: 12px;
			}
			@include media(mobile) {
				text-align: center;
			}
		}
	}
	.description {
		overflow: hidden;
		padding: 5px 0 0;
	}
	.btn-holder {
		text-align: center;
		padding: 134px 0 0;
		@include media(tablet) {
			padding-top: 114px;
		}
		@include media(mobile) {
			padding-top: 15px;
		}
		@include media(mobile-small) {
			padding-top: 0;
			padding-bottom: 5px;
		}
	}
}
.table {
	width: 100%;
	margin: 0 0 15px;
	text-align: center;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 4px 1px;
	font-family: $text-light;
	thead {
		th {
			background: #4d4d4d;
			color: $color-white;
			padding: 22px 35px 21px;
			font-size: 14px;
			line-height: 1.2;
			text-transform: uppercase;
			.content-row.gray & {
				border-bottom: 3px solid $bg-gray;
			}
			@include media(tablet) {
				padding-left: 10px;
				padding-right: 10px;
			}
			@include media(mobile) {
				font-size: 12px;
				padding-left: 5px;
				padding-right: 5px;
			}
		}
	}
	tbody {
		td {
			background: #e0e0e0;
			padding: 17px 5px 18px;
			font-size: 24px;
			line-height: 1.2;
			@include media(tablet) {
				font-size: 18px;
			}
		}
	}
	tr {
		td,
		th {
			&:first-child,
			&:last-child {
				width: 74px;
				@include media(tablet) {
					width: 100px;
				}
				@include media(mobile) {
					width: 64px;
				}
			}
		}
		&:nth-child(odd) {
			td {
				background: #d0d0d0;
			}
		}
	}
}