html, body { height: 100%; -webkit-font-smoothing: antialiased; text-shadow: 1px 1px 1px rgba(0,0,0,0.004); -webkit-text-stroke: 0px; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; -moz-osx-font-smoothing: grayscale }

/* -- Typography -- */
body, input, textarea, option, select { font: 16px/1.375em "Apercu Pro", Arial, Helvetica, sans-serif; color: #242427 }
a {
	color: #242427; text-decoration: none;
	-webkit-transition: color .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease;
	-moz-transition: color .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease;
	-o-transition: color .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease;
	transition: color .3s ease, opacity .3s ease, border-color .3s ease, background-color .3s ease;
}
a:hover { color: #7d7d7d; text-decoration: none }
/* -- end Typography -- */

/* -- Global -- */
.clearfix:before, .clearfix:after { content: ""; display: table }
.clearfix:after { clear: both }
.oldie .clearfix { zoom: 1 }

.clear { height: 1px; clear: both; font-size: 1px; visibility: hidden }

.state--hidden { display: none !important }
.state--visible {
	display: block !important; visibility: visible !important;
	-moz-opacity: 1 !important;
	opacity: 1 !important;
}

.float--right { float: right }
.float--left { float: left }
/* -- end Global -- */

/* -- Structure -- */
.page-layout { min-width: 1090px; min-height: 100%; height: auto !important; height: 100%; position: relative; overflow: hidden }
/* -- end Structure -- */

/* -- Icon -- */
.icon {
	font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; font-family: "citycycle-icons"; speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon--magnifier:before {
	content: "\e600";
}
.icon--cart:before {
	content: "\e601";
}
.icon--free:before {
	content: "\e602";
}
.icon--bicycle:before {
	content: "\e603";
}
.icon--frame:before {
	content: "\e604";
}
.icon--cash-card:before {
	content: "\e605";
}
.icon--flacon:before {
	content: "\e606";
}
.icon--wheel:before {
	content: "\e607";
}
/* -- end Icon -- */


/*==============================*/
/*            Landing           */
/*==============================*/
.grid-constrain:before, .grid-constrain:after { content: ""; display: table }
.grid-constrain:after { clear: both }
.oldie .grid-constrain { zoom: 1 }
.grid-constrain { width: 900px; margin: 0 auto }

/* -- Grid Table -- */
.grid-table { width: 100%; height: 100%; display: table }
	.grid-table__cell { display: table-cell; vertical-align: middle }
/* -- end Grid Table -- */

/* -- Sections -- */
.bg--dark { background-color: #1a1b1d }
.bg--gray { background-color: #303938 }
	.bg--dark,
	.bg--gray,
	.bg--dark a,
	.bg--gray a { color: #fff; }
/* -- end Sections -- */

/* -- Page Promo -- */
.page--promo { background-color: #1a1b1d }
	.page--promo .page-layout { min-width: 940px }
/* -- end Page Promo -- */

/* -- Promo Section -- */
.promo-section { position: relative; overflow: hidden }
	.promo-section a { border-bottom: 1px solid transparent }
	.promo-section a:hover { border-bottom: 1px solid }
	.promo-section .site-logo,
	.promo-section .home-link,
	.promo-section .scroll-down { position: absolute; z-index: 3 }
	.promo-section .site-logo { margin-left: -97px; top: 136px; left: 50% }
	.promo-section .home-link { margin-left: 348px; top: 0; left: 50% }
	.promo-section .scroll-down { margin-left: -30px; bottom: 46px; left: 50% }
/* -- end Promo Section -- */

/* -- Site Logo -- */
.site-logo { width: 193px; height: 120px; margin-bottom: 52px; display: inline-block; background: url(../img/sprite.png) no-repeat 0 -89px; z-index: 6 }
.ie7 .site-logo { display: inline }
	.site-logo a { border: none !important }
	.site-logo img { width: 100%; height: 100% }
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	.site-logo {
		background-image: url(../img/sprite@2x.png);
		-webkit-background-size: 600px 600px;
		-moz-background-size: 600px 600px;
		background-size: 600px 600px;
	}
}
/* -- end Site Logo -- */

/* -- Home Link -- */
.home-link { width: 66px; padding: 10px 18px 18px; display: inline-block; border: none !important; background-color: #2bcd7f; font-size: 12px; line-height: 15px; text-align: center }
	.home-link .icon { font-size: 54px }
	.home-link:after { content: ""; width: 0; height: 0; position: absolute; top: 100%; left: 0; border-top: 11px solid #2bcd7f; border-left: 102px solid transparent }
/* -- end Home Link -- */

/* -- Scroll Down -- */
.scroll-down {
	width: 60px; height: 32px; display: inline-block; border: none !important; background: url(../img/sprite.png) no-repeat -213px 0;
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
	-webkit-transition: -webkit-transform .3s ease;
	transition: transform .3s ease;
}
.scroll-down:hover {
	-webkit-transform: translate(0, 8px);
	transform: translate(0, 8px);
}
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	.scroll-button {
		background-image: url(../img/sprite@2x.png);
		-webkit-background-size: 600px 600px;
		-moz-background-size: 600px 600px;
		background-size: 600px 600px;
	}
}
/* -- end Scroll Down Button -- */

/* -- Hero -- */
.hero {
	height: 744px; position: relative; background-repeat: no-repeat; background-position: 50% 50%; background-color: #303938; background-attachment: fixed; text-align: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}
/* -- На iphone, ipad не работает background-size: cover, когда background-attachment: fixed -- */
.mobile .hero { background-attachment: scroll }
.hero,
.hero a { color: #fff }
	.hero__table { width: 100%; height: 100%; display: table; position: relative; z-index: 2 }
	.ie7 .hero__table { padding-top: 180px }
		.hero__table-cell { display: table-cell; vertical-align: middle }
	.hero__mask {
		position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #000;
		-moz-opacity: .4;
		filter: alpha(opacity = 40);
		opacity: .4;
	}
	.hero__title { margin: 1.342em 0 .658em; font-size: 76px; line-height: 78px }
	.hero__contacts { font-size: 22px; line-height: 1.273em }
		.hero__contact { margin: 0 16px }
/* -- end Hero -- */

/* -- Features -- */
.features { padding: 42px 0 }
	.features__header { margin-bottom: 52px; text-align: center }
		.features__price { margin-bottom: 10px; font-size: 103px; line-height: 1; color: #2bcd7f }
	.features__content {}
		.feature { width: 300px; padding-bottom: 50px; display: inline-block; vertical-align: top; text-align: center }
		.ie7 .feature { display: inline }
			.feature__inner { padding: 0 40px }
				.feature__number { font-size: 47px; line-height: 1.1; color: #36403f }
/* -- end Features -- */

/* -- Options -- */
.options { padding: 42px 0 }
	.options__content { padding: 0 30px }
		.option { width: 50%; padding-bottom: 30px; display: inline-block; vertical-align: top; padding-bottom: 30px; }
		.ie7 .option { display: inline }
			.option__inner { padding: 0 36px 0 70px }
				.option__badge {
					margin: .5em 0 1.143em; padding: .286em .714em; display: inline-block; background-color: #2bcd7f; font-size: 14px; line-height: 1.429em;
					-webkit-border-radius: 2px;
					-moz-border-radius: 2px;
					border-radius: 2px;
				}
				.option__title {
					margin-bottom: 1.31em; font-weight: normal; font-size: 42px; line-height: .952em;
				}
				.option__param { margin-bottom: 25px }
				.option__price { margin-left: -22px; padding-left: 22px; font-size: 36px; line-height: 1.111em; color: #2bcd7f }
					.option__price-mark { width: 22px; margin-left: -22px; display: inline-block; font-size: 16px; vertical-align: middle }
				.option__details {}
					.option__details-item { margin: 20px 0 20px -22px; padding-left: 22px; position: relative }
					.option__details-item:before { content: ""; width: 10px; height: 0; border-top: 1px solid; position: absolute; top: .75em; left: 0; line-height: 0; }
/* -- end Options -- */

/* -- Discounts -- */
.discounts { padding: 42px 0; text-align: center }
	.discounts__title { margin-bottom: 128px; font-weight: normal; font-size: 36px; line-height: 1.111em }
	.discount { width: 300px; padding-bottom: 60px; display: inline-block; vertical-align: top }
	.ie7 .discount { display: inline }
		.discount__inner { padding: 0 34px }
			.discount__value { margin-bottom: 24px; font-size: 77px; line-height: 1em; color: #2bcd7f }
/* -- end Discounts -- */

/* -- Contacts -- */
.contacts { padding: 42px 0; font-size: 22px; line-height: 1.273em; text-align: center }
	.contacts__item { margin: 0 16px }
/* -- end Contacts -- */