.app-title {color: #000;}
.app-subtitle {color: #b3b3b3;}

.osx#toolbox-for-keynote .mas-button.osx, .ios#toolbox-for-keynote .mas-button.ios, #toolbox-for-keynote .mas-button.osx {
	color: #fff;
	border: solid 1px #0095FF;
	background: #33AAFF;
}
.osx#toolbox-for-keynote .mas-button.osx:hover, .ios#toolbox-for-keynote .mas-button.ios:hover {
	background: #0095FF;
}
.osx#toolbox-for-keynote .mas-button.ios, .ios#toolbox-for-keynote .mas-button.osx, #toolbox-for-keynote .mas-button.ios {
	color: #2E99E6;
	border: solid 1px #CEE3F2;
	background: none;
}
.osx#toolbox-for-keynote .mas-button.ios:hover, .ios#toolbox-for-keynote .mas-button.osx:hover {
	background-color: rgba(0, 149, 255, 0.03);
	color: #0095FF;
	border-color: #B6D9F2;
}

.osx#toolbox-for-pages .mas-button.osx, .ios#toolbox-for-pages .mas-button.ios, #toolbox-for-pages .mas-button.osx {
	color: #fff;
	border: solid 1px #ff8c1a;
	background: #ffa64d;
}
.osx#toolbox-for-pages .mas-button.osx:hover, .ios#toolbox-for-pages .mas-button.ios:hover {
	background: #ff8c1a;
}
.osx#toolbox-for-pages .mas-button.ios, .ios#toolbox-for-pages .mas-button.osx, #toolbox-for-pages .mas-button.ios {
	color: #e59545;
	border: solid 1px #f2e0ce;
	background: none;
}
.osx#toolbox-for-pages .mas-button.ios:hover, .ios#toolbox-for-pages .mas-button.osx:hover {
	background-color: rgba(255, 140, 26, 0.03);
	color: #ff8c1a;
	border-color: #f2d4b6;
}

#mail-stationery .mas-button.osx {
	color: #fff;
	border: solid 1px #5ad941;
	background: #86e573;
}
#mail-stationery .mas-button.osx:hover {
	background: #5ad941;
}

#toolbox-for-ms-office .mas-button.osx {
	color: #fff;
	border: solid 1px #ff5533;
	background: #ff8066;
}
#toolbox-for-ms-office .mas-button.osx:hover {
	background: #ff5533;
}

#set-for-numbers .mas-button.osx {
	color: #fff;
	border: solid 1px #00D0FA;
	background: #4BDDFA;
}
#set-for-numbers .mas-button.osx:hover {
	background: #00D0FA;
}

.mas-button.osx {
	transition: background 0.2s ease;
}
.mas-button.osx:hover {
	transition: background 0.2s ease;
}
.mas-button.ios {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.mas-button.ios:hover {
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.call-to-action {
	text-align: center;
}
.mas-button {
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 5rem;
	letter-spacing: 0.13rem;
	border-radius: 0.4rem;
	text-align: center;
	text-decoration: none;
	margin: 0 auto;
	padding: 0;
	display: inline-block;
	width: 20rem;
	box-sizing:border-box;
	transition: color 0.2s ease, border-color 0.2s ease;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	#promo-header {
		padding: 4.4rem 2rem 6rem 2rem;
	}
	#toolbox-for-keynote #promo-header {
		background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, #f0f3f5 100%);
		background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, #f0f3f5 100%);
		background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, #f0f3f5 100%);
		background-image: linear-gradient(-180deg, #FFFFFF 0%, #f0f3f5 100%);
	}
	#toolbox-for-pages #promo-header {
		background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, #fcf8f5 100%);
		background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, #fcf8f5 100%);
		background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, #fcf8f5 100%);
		background-image: linear-gradient(-180deg, #FFFFFF 0%, #fcf8f5 100%);
	}
	#mail-stationery #promo-header {
		background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, #f6faf5 100%);
		background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, #f6faf5 100%);
		background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, #f6faf5 100%);
		background-image: linear-gradient(-180deg, #FFFFFF 0%, #f6faf5 100%);
	}
	#toolbox-for-ms-office #promo-header {
		background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, #faf6f5 100%);
		background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, #faf6f5 100%);
		background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, #faf6f5 100%);
		background-image: linear-gradient(-180deg, #FFFFFF 0%, #faf6f5 100%);
	}
	#set-for-numbers #promo-header {
		background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, #F0F4F5 100%);
		background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, #F0F4F5 100%);
		background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, #F0F4F5 100%);
		background-image: linear-gradient(-180deg, #FFFFFF 0%, #F0F4F5 100%);
	}
	h1.app-title {
		font-weight: 300;
		font-size: 3rem;
		line-height: 4.5rem;
		padding: 0;
		margin: 3.7rem auto 2.9rem auto;
		text-align: center;
	}
	.hero-image-small, .hero-image-small img {
		width: 100%;
		height: auto;
	}
	.hero-image{
		display: none;
	}
	p.app-subtitle {
		font-size: 1.2rem;
		line-height: 3rem;
		padding: 0;
		margin: 2.5rem auto 0 auto;
		text-align: center;
	}
	.mas-button.osx {
		margin: 2.9rem 0.9rem 0 0.9rem;
	}
	.mas-button.ios {
		margin: 2rem 0.9rem 0 0.9rem;
	}
}

@media all and (min-width: 620px) {
	.hero-image-small {
		display: none;
	}
	.hero-image-wrapper {
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		background-color: #fff;
	}
	.ios#toolbox-for-keynote .hero-image-wrapper, .ios#toolbox-for-pages .hero-image-wrapper {
		display: none;
	}
	.hero-image{
		background-repeat: no-repeat;
		position: absolute;
		top: -5rem;
		left: -5rem;
		padding: 5rem;
		background-clip: padding-box;
		-webkit-animation: cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s 0.5s both;
				animation: cubic-bezier(0.165, 0.84, 0.44, 1) 1.5s 0.5s both;
	}
	.osx#toolbox-for-keynote .hero-image{
		background-image: url(../images/toolbox-for-keynote-hero-image.jpg);
	}
	.osx#toolbox-for-pages .hero-image{
		background-image: url(../images/toolbox-for-pages-hero-image.jpg);
	}
	#mail-stationery .hero-image{
		background-image: url(../images/mail-stationery-hero-image.jpg);
	}
	#toolbox-for-ms-office .hero-image{
		background-image: url(../images/toolbox-for-ms-office-hero-image.jpg);
	}
	#set-for-numbers .hero-image{
		background-image: url(../images/set-for-numbers-hero-image.jpg);
	}
	.hero-image-blur {
		position: absolute;
		background: inherit;
		overflow: hidden;
	}
	.hero-image-blur::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		/*
		fix for app scroll trigger on active window
		paleidzia tik tada kai vysta fone dar kita animacija, neveikia butent su bg animavimu
		*/
		-webkit-animation: Fix 1s both ease;
				animation: Fix 1s both ease;
	}
	.hero-image-blur::after {
		content: '';
		position: absolute;
		-webkit-filter: blur(10px) saturate(200%);
				filter: blur(10px) saturate(200%);
		background: inherit;
		padding: 5rem;
		top: -5rem;
		left: -5rem;
		background-clip: padding-box;
	}
	.app-bar {
		position: absolute;
	}
}

@media all and (min-width: 620px) and (max-width: 1099px), all and (min-width: 1100px) and (max-height: 1008px) {
	#promo-header {
		padding: 5.8rem 4rem 4.5rem 4rem;
	}
	.osx#toolbox-for-keynote #promo-header, .osx#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-osx.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.ios#toolbox-for-keynote #promo-header, .ios#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-ios.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.osx#toolbox-for-pages #promo-header, .osx#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-osx.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.ios#toolbox-for-pages #promo-header, .ios#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-ios.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#toolbox-for-ms-office #promo-header, #toolbox-for-ms-office header {
		background: url(../images/toolbox-for-ms-office-bg-osx.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#mail-stationery #promo-header, #mail-stationery header {
		background: url(../images/mail-stationery-bg-osx.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#set-for-numbers #promo-header, #set-for-numbers header {
		background: url(../images/set-for-numbers-bg-osx.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	h1.app-title {
		font-weight: 300;
		font-size: 4rem;
		line-height: 5.5rem;
		padding: 0;
		margin: 5.1rem auto 0 auto;
		text-align: center;
	}
	p.app-subtitle {
		font-size: 1.2rem;
		line-height: 3rem;
		padding: 0;
		margin: 1.6rem auto 0 auto;
		text-align: center;
	}
	.mas-button{
		margin: 2.9rem 0.9rem 0 0.9rem;
	}
	.hero-device {
		width: 54.2rem;
		height: 41.6rem;
		margin: 2.9rem auto 0 auto;
	}
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp.png) center center no-repeat;
		background-size: 54rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios.png) center center no-repeat;
		background-size: 54.1rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios.png) center center no-repeat;
		background-size: 49.7rem;
	}
	.hero-image-wrapper {
		width: 41.6rem;
		height: 26rem;
		top: 4.9rem;
	}
	.hero-image{
		width: 41.6rem;
		height: 26rem;
		background-size: 41.6rem auto;
		-webkit-animation-name: AppScrollSmall;
				animation-name: AppScrollSmall;
	}
	.hero-image-blur {
		width: 41.6rem;
		height: 2.3rem;
	}
	.hero-image-blur::after {
		width: 41.6rem;
		height: 26rem;
	}
	.app-bar {
		width: 41.6rem;
	}
	.app-bar img {
		width: 41.6rem;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 1.25) and (min-width: 620px) and (max-width: 1099px), all and ( min--moz-device-pixel-ratio: 1.25) and (min-width: 620px) and (max-width: 1099px), all and ( -o-min-device-pixel-ratio: 1.25/1) and (min-width: 620px) and (max-width: 1099px), all and ( min-device-pixel-ratio: 1.25) and (min-width: 620px) and (max-width: 1099px), all and ( min-resolution: 1.25dppx) and (min-width: 620px) and (max-width: 1099px), all and (-webkit-min-device-pixel-ratio: 1.25) and (min-width: 1100px) and (max-height: 1008px), all and ( min--moz-device-pixel-ratio: 1.25) and (min-width: 1100px) and (max-height: 1008px), all and ( -o-min-device-pixel-ratio: 1.25/1) and (min-width: 1100px) and (max-height: 1008px), all and ( min-device-pixel-ratio: 1.25) and (min-width: 1100px) and (max-height: 1008px), all and ( min-resolution: 1.25dppx) and (min-width: 1100px) and (max-height: 1008px) {
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp@2x.png) center center no-repeat;
		background-size: 54rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios@2x.png) center center no-repeat;
		background-size: 54.1rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios@2x.png) center center no-repeat;
		background-size: 49.7rem;
	}
	.osx#toolbox-for-keynote .hero-image{
		background-image: url(../images/toolbox-for-keynote-hero-image@2x.jpg);
	}
	.osx#toolbox-for-pages .hero-image{
		background-image: url(../images/toolbox-for-pages-hero-image@2x.jpg);
	}
	#toolbox-for-ms-office .hero-image{
		background-image: url(../images/toolbox-for-ms-office-hero-image@2x.jpg);
	}
	#mail-stationery .hero-image{
		background-image: url(../images/mail-stationery-hero-image@2x.jpg);
	}
	#set-for-numbers .hero-image{
		background-image: url(../images/set-for-numbers-hero-image@2x.jpg);
	}


	.osx#toolbox-for-keynote #promo-header, .osx#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-osx@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.ios#toolbox-for-keynote #promo-header, .ios#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-ios@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.osx#toolbox-for-pages #promo-header, .osx#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-osx@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	.ios#toolbox-for-pages #promo-header, .ios#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-ios@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#toolbox-for-ms-office #promo-header, #toolbox-for-ms-office header {
		background: url(../images/toolbox-for-ms-office-bg-osx@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#mail-stationery #promo-header, #mail-stationery header {
		background: url(../images/mail-stationery-bg-osx@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
	#set-for-numbers #promo-header, #set-for-numbers header {
		background: url(../images/set-for-numbers-bg-osx@2x.jpg) center -20px no-repeat;
		background-size: 177rem;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 2.25) and (min-width: 620px) and (max-width: 1099px), all and ( min--moz-device-pixel-ratio: 2.25) and (min-width: 620px) and (max-width: 1099px), all and ( -o-min-device-pixel-ratio: 2.25/1) and (min-width: 620px) and (max-width: 1099px), all and ( min-device-pixel-ratio: 2.25) and (min-width: 620px) and (max-width: 1099px), all and ( min-resolution: 2.25dppx) and (min-width: 620px) and (max-width: 1099px), all and (-webkit-min-device-pixel-ratio: 2.25) and (min-width: 1100px) and (max-height: 1008px), all and ( min--moz-device-pixel-ratio: 2.25) and (min-width: 1100px) and (max-height: 1008px), all and ( -o-min-device-pixel-ratio: 2.25/1) and (min-width: 1100px) and (max-height: 1008px), all and ( min-device-pixel-ratio: 2.25) and (min-width: 1100px) and (max-height: 1008px), all and ( min-resolution: 2.25dppx) and (min-width: 1100px) and (max-height: 1008px) {
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp@3x.png) center center no-repeat;
		background-size: 54rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios@3x.png) center center no-repeat;
		background-size: 54.1rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios@3x.png) center center no-repeat;
		background-size: 49.7rem;
	}

	.osx#toolbox-for-keynote .hero-image{
		background-image: url(../images/toolbox-for-keynote-hero-image@3x.jpg);
	}
	.osx#toolbox-for-pages .hero-image{
		background-image: url(../images/toolbox-for-pages-hero-image@3x.jpg);
	}
	#toolbox-for-ms-office .hero-image{
		background-image: url(../images/toolbox-for-ms-office-hero-image@3x.jpg);
	}
	#mail-stationery .hero-image{
		background-image: url(../images/mail-stationery-hero-image@3x.jpg);
	}
	#set-for-numbers .hero-image{
		background-image: url(../images/set-for-numbers-hero-image@3x.jpg);
	}
}

@media all and (min-width: 1100px) and (min-height: 1009px) {
	#promo-header {
		padding: 5.8rem 4rem 9.5rem 4rem;
	}
	.osx#toolbox-for-keynote #promo-header, .osx#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-osx.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.ios#toolbox-for-keynote #promo-header, .ios#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-ios.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.osx#toolbox-for-pages #promo-header, .osx#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-osx.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.ios#toolbox-for-pages #promo-header, .ios#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-ios.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#toolbox-for-ms-office #promo-header, #toolbox-for-ms-office header {
		background: url(../images/toolbox-for-ms-office-bg-osx.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#mail-stationery #promo-header, #mail-stationery header {
		background: url(../images/mail-stationery-bg-osx.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#set-for-numbers #promo-header, #set-for-numbers header {
		background: url(../images/set-for-numbers-bg-osx.jpg) top center no-repeat;
		background-size: 200rem;
	}
	h1.app-title {
		font-weight: 300;
		font-size: 6rem;
		letter-spacing: -0.1rem;
		line-height: 9rem;
		text-align: center;
		padding: 0;
		margin: 5.6rem auto 0 auto;
	}
	p.app-subtitle {
		font-size: 1.6rem;
		font-weight: 300;
		line-height: 3rem;
		padding: 0;
		margin: 1.6rem auto 0 auto;
		text-align: center;
	}
	.mas-button {
		margin: 4.1rem 0.9rem 0 0.9rem;
	}
	.hero-device {
		width: 63rem;
		height: 48.2rem;
		margin: 0 auto;
	}
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp.png) center bottom no-repeat;
		background-size: 62.7rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios.png) center bottom no-repeat;
		background-size: 62.8rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios.png) center bottom no-repeat;
		background-size: 57.8rem;
	}
	.ios .hero-image-wrapper {
		display: none;
	}
	.hero-image-wrapper {
		width: 48.3rem;
		height: 30.2rem;
		top: 9.2rem;
	}
	.hero-image{
		width: 48.3rem;
		height: 30.2rem;
		background-size: 48.3rem auto;
		-webkit-animation-name: AppScrollLarge;
				animation-name: AppScrollLarge;
	}
	.hero-image-blur {
		width: 48.3rem;
		height: 2.7rem;
	}
	.hero-image-blur::after {
		width: 48.3rem;
		height: 30.2rem;
	}
	.app-bar {
		width: 48.3rem;
		height: 2.7rem;
	}
	.app-bar img {
		width: 48.3rem;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 1.25) and (min-width: 1100px) and (min-height: 1009px), all and ( min--moz-device-pixel-ratio: 1.25) and (min-width: 1100px) and (min-height: 1009px), all and ( -o-min-device-pixel-ratio: 1.25/1) and (min-width: 1100px) and (min-height: 1009px), all and ( min-device-pixel-ratio: 1.25) and (min-width: 1100px) and (min-height: 1009px), all and ( min-resolution: 1.25dppx) and (min-width: 1100px) and (min-height: 1009px) {
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp@2x.png) center bottom no-repeat;
		background-size: 62.7rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios@2x.png) center bottom no-repeat;
		background-size: 62.8rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios@2x.png) center bottom no-repeat;
		background-size: 57.8rem;
	}

	.osx#toolbox-for-keynote .hero-image{
		background-image: url(../images/toolbox-for-keynote-hero-image@2x.jpg);
	}
	.osx#toolbox-for-pages .hero-image{
		background-image: url(../images/toolbox-for-pages-hero-image@2x.jpg);
	}
	#toolbox-for-ms-office .hero-image{
		background-image: url(../images/toolbox-for-ms-office-hero-image@2x.jpg);
	}
	#mail-stationery .hero-image{
		background-image: url(../images/mail-stationery-hero-image@2x.jpg);
	}
	#set-for-numbers .hero-image{
		background-image: url(../images/set-for-numbers-hero-image@2x.jpg);
	}

	.osx#toolbox-for-keynote #promo-header, .osx#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-osx@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.ios#toolbox-for-keynote #promo-header, .ios#toolbox-for-keynote header {
		background: url(../images/toolbox-for-keynote-bg-ios@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.osx#toolbox-for-pages #promo-header, .osx#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-osx@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	.ios#toolbox-for-pages #promo-header, .ios#toolbox-for-pages header {
		background: url(../images/toolbox-for-pages-bg-ios@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#toolbox-for-ms-office #promo-header, #toolbox-for-ms-office header {
		background: url(../images/toolbox-for-ms-office-bg-osx@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#mail-stationery #promo-header, #mail-stationery header {
		background: url(../images/mail-stationery-bg-osx@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
	#set-for-numbers #promo-header, #set-for-numbers header {
		background: url(../images/set-for-numbers-bg-osx@2x.jpg) top center no-repeat;
		background-size: 200rem;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 2.25) and (min-width: 1100px) and (min-height: 1009px), all and ( min--moz-device-pixel-ratio: 2.25) and (min-width: 1100px) and (min-height: 1009px), all and ( -o-min-device-pixel-ratio: 2.25/1) and (min-width: 1100px) and (min-height: 1009px), all and ( min-device-pixel-ratio: 2.25) and (min-width: 1100px) and (min-height: 1009px), all and ( min-resolution: 2.25dppx) and (min-width: 1100px) and (min-height: 1009px) {
	.osx .hero-device, .ios#toolbox-for-ms-office .hero-device, .ios#mail-stationery .hero-device, .ios#set-for-numbers .hero-device {
		background: url(../images/mbp@3x.png) center bottom no-repeat;
		background-size: 62.7rem;
	}
	.ios#toolbox-for-keynote .hero-device {
		background: url(../images/toolbox-for-keynote-hero-image-ios@3x.png) center bottom no-repeat;
		background-size: 62.8rem;
	}
	.ios#toolbox-for-pages .hero-device {
		background: url(../images/toolbox-for-pages-hero-image-ios@3x.png) center bottom no-repeat;
		background-size: 57.8rem;
	}

	.osx#toolbox-for-keynote .hero-image{
		background-image: url(../images/toolbox-for-keynote-hero-image@3x.jpg);
	}
	.osx#toolbox-for-pages .hero-image{
		background-image: url(../images/toolbox-for-pages-hero-image@3x.jpg);
	}
	#toolbox-for-ms-office .hero-image{
		background-image: url(../images/toolbox-for-ms-office-hero-image@3x.jpg);
	}
	#mail-stationery .hero-image{
		background-image: url(../images/mail-stationery-hero-image@3x.jpg);
	}
	#set-for-numbers .hero-image{
		background-image: url(../images/set-for-numbers-hero-image@3x.jpg);
	}
}

/*products css*/

#toolbox-for-keynote .product-wrapper:nth-child(odd) {
	background: #333;
}
#toolbox-for-pages .product-wrapper:nth-child(odd) {
	background: #333;
}
#mail-stationery .product-wrapper:nth-child(odd) {
	background: #333;
}
#toolbox-for-ms-office .product-wrapper:nth-child(odd) {
	background: #333;
}
#set-for-numbers .product-wrapper:nth-child(odd) {
	background: #333;
}
.product-wrapper:nth-child(even) {
	background: #fff;
}

.product-wrapper:nth-child(odd) .entry-title {
	color: #fff;
}
.product-wrapper:nth-child(odd) .entry-body {
	color: #b3b3b3;
}

.product-wrapper:nth-child(even) .entry-title {
	color: #323232;
}
.product-wrapper:nth-child(even) .entry-body {
	color: #828282;
}

.product-container-image{
	overflow: hidden;
	position: relative;
}

.product-container-left .sample-wrapper {
	right: 0;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	.product-container-image {
		width: 100%;
		height: 38rem;
	}
	.product-container-article {
		width: 100%;
	}
	.entry-title {
		font-weight: 300;
		font-size: 2.2rem;
		line-height: 3rem;
		text-align: center;
		padding: 4.8rem 2rem 2.2rem 2rem;
		margin: 0 auto;
	}
	.entry-body {
		font-size: 1.2rem;
		/*letter-spacing: 0.02rem;*/
		line-height: 3rem;
		text-align: center;
		padding: 0 2rem 4.9rem 2rem;
		margin: 0 auto;
	}

	.layouts-for-keynote .sample-wrapper {
		top: -32.2rem;
		left: 50%;
		margin-left: -31.4rem;
	}
	.themes-for-keynote .sample-wrapper {
		top: -48.3rem;
		right: 50%;
		margin-right: -31.4rem;
	}
	.infographics .sample-wrapper {
		top: 0;
		left: 50%;
		margin-left: -95.3rem;
	}
	.graphic-styles-for-keynote .sample-wrapper {
		top: 0;
		right: 50%;
		margin-right: -31.4rem;
	}
	.elements-for-keynote .sample-wrapper {
		top: -32.2rem;
		left: 50%;
		margin-left: -31.4rem;
	}
	.clipart-prime .sample-wrapper {
		top: 0;
		right: 50%;
		margin-right: -35rem;
	}

	.business-mix-set .sample-wrapper {
		top: 0;
		left: 50%;
		margin-left: -74.1rem;
	}
	.inspiration-set .sample-wrapper {
		top: -30.4rem;
		right: 50%;
		margin-right: -31.5rem;
	}
	.stationery-set .sample-wrapper {
		top: -29.7rem;
		left: 50%;
		margin-left: -31.4rem;
	}
	.graphic-styles-for-pages .sample-wrapper {
		top: 0;
		right: 50%;
		margin-right: -31.4rem;
	}
	.elements-for-pages .sample-wrapper {
		top: -32.2rem;
		left: 50%;
		margin-left: -31.4rem;
	}
	.jumsoft-clipart .sample-wrapper {
		top: 0;
		right: 50%;
		margin-right: -36rem;
	}
	.corporate-style-packs .sample-wrapper {
		top: 0;
		left: 50%;
		margin-left: -74.1rem;
	}
	.set-for-numbers .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}
	.mail-stationery .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}

	.templates-for-excel .sample-wrapper {
		top: 0;
		left: 50%;
		margin-left: -74.1rem;
	}
}

@media all and (min-width: 620px) and (max-width: 1099px) {
	.product-container-left{
		width: 50%;
		height: 390px;
		float: left;
	}
	.product-container-right{
		width: 50%;
		height: 390px;
		float: right;
	}
	.entry-title{
		font-weight: 300;
		font-size: 2.2rem;
		line-height: 3rem;
		max-width: 31rem;
		padding: 10.8rem 4rem 2.2rem 4rem;
		margin: 0;
	}
	.entry-body{
		font-size: 1.2rem;
		/*letter-spacing: 0.02rem;*/
		line-height: 3rem;
		max-width: 31rem;
		padding: 0 4rem 0 4rem;
		margin: 0;
	}
	.entry-left{
		text-align: right;
		margin: 0 auto;
	}
	.entry-right{
		text-align: left;
		margin: 0 auto;
	}

	.layouts-for-keynote .sample-wrapper {
		top: -36.3rem;
	}
	.themes-for-keynote .sample-wrapper {
		top: -36.3rem;
	}
	.infographics .sample-wrapper {
		top: -10rem;
	}
	.graphic-styles-for-keynote .sample-wrapper {
		top: -10rem;
	}
	.elements-for-keynote .sample-wrapper {
		top: -36.3rem;
	}
	.clipart-prime .sample-wrapper {
		top: -16.5rem;
	}

	.business-mix-set .sample-wrapper {
		top: -14.4rem;
	}
	.inspiration-set .sample-wrapper {
		top: -8.5rem;
	}
	.stationery-set .sample-wrapper {
		top: -10rem;
	}
	.graphic-styles-for-pages .sample-wrapper {
		top: -10rem;
	}
	.elements-for-pages .sample-wrapper {
		top: -36.3rem;
	}
	.jumsoft-clipart .sample-wrapper {
		top: -16.5rem;
	}
	.corporate-style-packs .sample-wrapper {
		top: -5.5rem;
		left: -85.2rem;
	}
	.set-for-numbers .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}
	.mail-stationery .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}
	.templates-for-excel .sample-wrapper {
		top: -14.4rem;
	}
}

@media all and (min-width: 620px) {
	.product-wrapper:after {
		content: "";
		clear: both;
		display: table;
	}
}

@media all and (min-width: 1100px) {
	.product-container-left{
		width: 50%;
		height: 590px;
		float: left;
	}
	.product-container-right{
		width: 50%;
		height: 590px;
		float: right;
	}
	.entry-title {
		font-weight: 300;
		font-size: 3rem;
		line-height: 4.5rem;
		max-width: 50rem;
		padding: 18.2rem 12rem 2.7rem 12rem;
		margin: 0;
	}
	.entry-body {
		font-size: 1.2rem;
		/*letter-spacing: 0.02rem;*/
		line-height: 3rem;
		max-width: 50rem;
		padding: 0 12rem;
		margin: 0;
	}
	.entry-left{
		text-align: right;
		float: right;
		clear: both;
	}
	.entry-right{
		text-align: left;
		float: left;
		clear:both;
	}

	.layouts-for-keynote .sample-wrapper {
		top: -26.3rem;
	}
	.themes-for-keynote .sample-wrapper {
		top: -26.3rem;
	}
	.infographics .sample-wrapper {
		top: -10.5rem;
	}
	.graphic-styles-for-keynote .sample-wrapper {
		top: -10.5rem;
	}
	.elements-for-keynote .sample-wrapper {
		top: -26.3rem;
	}
	.clipart-prime .sample-wrapper {
		top: -6.5rem;
	}

	.business-mix-set .sample-wrapper {
		top: 0;
	}
	.inspiration-set .sample-wrapper {
		top: -13rem;
	}
	.stationery-set .sample-wrapper {
		top: -10.5rem;
	}
	.graphic-styles-for-pages .sample-wrapper {
		top: -10.5rem;
	}
	.elements-for-pages .sample-wrapper {
		top: -26.3rem;
	}
	.jumsoft-clipart .sample-wrapper {
		top: -6.5rem;
	}
	.corporate-style-packs .sample-wrapper {
		top: 0;
	}
	.set-for-numbers .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}
	.mail-stationery .sample-wrapper {
		left: 50%;
		margin-left: -148.6rem;
	}

	.templates-for-excel .sample-wrapper {
		top: 0;
	}
}

/*horizontal product sample css*/

.horizontal-product-sample .entry-body {
	max-width: 40rem;
}

@media all and (min-width: 620px) and (max-width: 1099px) {
	.horizontal-product-sample .product-container-article {
		width: 100%;
		height: auto;
		float: initial;
	}
	.horizontal-product-sample .product-container-image {
		width: 100%;
		height: 390px;
		float: initial;
	}
	.horizontal-product-sample .entry-title {
		text-align: center;
		max-width: 40rem;
		padding: 10.8rem 4rem 2.2rem 4rem;
		float: initial;
	}
	.horizontal-product-sample .entry-body {
		text-align: center;
		max-width: 40rem;
		padding: 0 4rem 9.8rem 4rem;
	}
}

@media all and (min-width: 1100px) {
	.horizontal-product-sample .product-container-article {
		width: 100%;
		height: auto;
		float: initial;
	}
	.horizontal-product-sample .product-container-image {
		width: 100%;
		height: 590px;
		float: initial;
	}
	.horizontal-product-sample .entry-title {
		text-align: center;
		max-width: 40rem;
		padding: 10.2rem 0 2.7rem 0;
		margin: 0 auto;
		float: initial;
	}
	.horizontal-product-sample .entry-body {
		text-align: center;
		max-width: 40rem;
		padding: 0 4rem 10.9rem 4rem;
		margin: 0 auto;
		float: initial;
	}
}

/*Sample grid 1*/

.grid-1 {
	height: 111.7rem;
	width: 148.1rem;
	position: absolute;
}
.theme-large, .theme-small {
	position: absolute;
	padding: 0;
	margin: 0;
}
.theme-large img {
	width: 41.6rem;
}
.theme-small img {
	width: 20.3rem;
}

.product-container-right .grid-1 .x-0 {left: 0;}
.product-container-right .grid-1 .x-1 {left: 21.3rem;}
.product-container-right .grid-1 .x-2 {left: 42.6rem;}
.product-container-right .grid-1 .x-3 {left: 63.9rem;}
.product-container-right .grid-1 .x-4 {left: 85.2rem;}
.product-container-right .grid-1 .x-5 {left: 106.5rem;}
.product-container-right .grid-1 .x-6 {left: 127.8rem;}
.product-container-right .grid-1 .x-7 {left: 149.1rem;}
.product-container-right .grid-1 .x-8 {left: 170.4rem;}
.product-container-right .grid-1 .x-9 {left: 191.7rem;}
.product-container-right .grid-1 .x-10 {left: 213rem;}
.product-container-right .grid-1 .x-11 {left: 234.3rem;}
.product-container-right .grid-1 .x-12 {left: 255.6rem;}
.product-container-right .grid-1 .x-13 {left: 276.9rem;}

.product-container-left .grid-1 .x-0 {right: 0;}
.product-container-left .grid-1 .x-1 {right: 21.3rem;}
.product-container-left .grid-1 .x-2 {right: 42.6rem;}
.product-container-left .grid-1 .x-3 {right: 63.9rem;}
.product-container-left .grid-1 .x-4 {right: 85.2rem;}
.product-container-left .grid-1 .x-5 {right: 106.5rem;}
.product-container-left .grid-1 .x-6 {right: 127.8rem;}
.product-container-left .grid-1 .x-7 {left: 149.1rem;}
.product-container-left .grid-1 .x-8 {left: 170.4rem;}
.product-container-left .grid-1 .x-9 {left: 191.7rem;}
.product-container-left .grid-1 .x-10 {left: 213rem;}
.product-container-left .grid-1 .x-11 {left: 234.3rem;}
.product-container-left .grid-1 .x-12 {left: 255.6rem;}
.product-container-left .grid-1 .x-13 {left: 276.9rem;}

.grid-1 .y-0 {top: 0;}
.grid-1 .y-1 {top: 16.1rem;}
.grid-1 .y-2 {top: 32.2rem;}
.grid-1 .y-3 {top: 48.3rem;}
.grid-1 .y-4 {top: 64.4rem;}
.grid-1 .y-5 {top: 80.5rem;}
.grid-1 .y-6 {top: 96.6rem;}

/*Sample grid 2*/

.grid-2 {
	height: 111.7rem;
	width: 148.1rem;
	position: absolute;
}
.grid-2 figure {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 20.3rem;
}
.grid-2 figure picture img {
	width: 20.3rem;
	margin-bottom: 7px;
}

.product-container-right .grid-2 .x-0 {left: 0;}
.product-container-right .grid-2 .x-1 {left: 21.3rem;}
.product-container-right .grid-2 .x-2 {left: 42.6rem;}
.product-container-right .grid-2 .x-3 {left: 63.9rem;}
.product-container-right .grid-2 .x-4 {left: 85.2rem;}
.product-container-right .grid-2 .x-5 {left: 106.5rem;}
.product-container-right .grid-2 .x-6 {left: 127.8rem;}

.product-container-left .grid-2 .x-0 {right: 0;}
.product-container-left .grid-2 .x-1 {right: 21.3rem;}
.product-container-left .grid-2 .x-2 {right: 42.6rem;}
.product-container-left .grid-2 .x-3 {right: 63.9rem;}
.product-container-left .grid-2 .x-4 {right: 85.2rem;}
.product-container-left .grid-2 .x-5 {right: 106.5rem;}
.product-container-left .grid-2 .x-6 {right: 127.8rem;}

/*Sample grid 2 exceptions*/

.stationery-set figure picture img {
	height: 28.7rem;
}

@media all and (min-width: 620px) {
	#toolbox-for-keynote .infographics .x-1, #toolbox-for-keynote .infographics .x-2, #toolbox-for-keynote .infographics .x-5 {top: 5rem;}
	#toolbox-for-pages .infographics .x-1, #toolbox-for-pages .infographics .x-3, #toolbox-for-pages .infographics .x-5 {top: 10rem;}
	#toolbox-for-pages .infographics .x-0, #toolbox-for-pages .infographics .x-2, #toolbox-for-pages .infographics .x-4, #toolbox-for-pages .infographics .x-6 {top: 4rem;}
	.stationery-set .x-1, .stationery-set .x-3, .stationery-set .x-5 {top: 5rem;}
}

/*Sample grid 3*/

.grid-3 {
	height: 72rem;
	width: 147rem;
	position: absolute;
}
.grid-3 picture {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 12rem;
	height: auto;
}
.grid-3 picture img {
	width: 12rem;
	height: auto;
}

.product-container-right .grid-3 .x-0 {left: 0;}
.product-container-right .grid-3 .x-1 {left: 15rem;}
.product-container-right .grid-3 .x-2 {left: 30rem;}
.product-container-right .grid-3 .x-3 {left: 45rem;}
.product-container-right .grid-3 .x-4 {left: 60rem;}
.product-container-right .grid-3 .x-5 {left: 75rem;}
.product-container-right .grid-3 .x-6 {left: 90rem;}
.product-container-right .grid-3 .x-7 {left: 105rem;}
.product-container-right .grid-3 .x-8 {left: 120rem;}
.product-container-right .grid-3 .x-9 {left: 135rem;}

.product-container-left .grid-3 .x-0 {right: 0;}
.product-container-left .grid-3 .x-1 {right: 15rem;}
.product-container-left .grid-3 .x-2 {right: 30rem;}
.product-container-left .grid-3 .x-3 {right: 45rem;}
.product-container-left .grid-3 .x-4 {right: 60rem;}
.product-container-left .grid-3 .x-5 {right: 75rem;}
.product-container-left .grid-3 .x-6 {right: 90rem;}
.product-container-left .grid-3 .x-7 {right: 105rem;}
.product-container-left .grid-3 .x-8 {right: 120rem;}
.product-container-left .grid-3 .x-9 {right: 135rem;}

.grid-3 .y-0 {top: 0;}
.grid-3 .y-1 {top: 15rem;}
.grid-3 .y-2 {top: 30rem;}
.grid-3 .y-3 {top: 45rem;}
.grid-3 .y-4 {top: 60rem;}

/*Sample grid 4*/

.grid-4 {
	height: 111.7rem;
	width: 169.4rem;
	position: absolute;
}
.grid-4 figure {
	position: absolute;
	padding: 0;
	margin: 0;
	width: 42.3rem;
}
.grid-4 .small-samples img {
	width: 20.3rem;
	height: 28.7rem;
}
.grid-4 .large-samples img {
	width: 41.6rem;
	height: 29.4rem;
}
.grid-4 .large-samples.auto-height img {
	width: 41.6rem;
	height: auto;
}
.grid-4 figure picture img {
	margin-bottom: 7px;
}
.product-container-right .grid-4 figure picture img {
	margin-right: 7px;
}
.product-container-left .grid-4 figure picture img {
	margin-left: 7px;
}

.product-container-right .grid-4 .x-0 {left: 0;}
.product-container-right .grid-4 .x-1 {left: 42.6rem;}
.product-container-right .grid-4 .x-2 {left: 85.2rem;}
.product-container-right .grid-4 .x-3 {left: 127.8rem;}
.product-container-right .grid-4 .x-4 {left: 170.4rem;}
.product-container-right .grid-4 .x-5 {left: 213rem;}
.product-container-right .grid-4 .x-6 {left: 255.6rem;}

.product-container-left .grid-4 .x-0 {right: 0;}
.product-container-left .grid-4 .x-1 {right: 42.6rem;}
.product-container-left .grid-4 .x-2 {right: 85.2rem;}
.product-container-left .grid-4 .x-3 {right: 127.8rem;}
.product-container-left .grid-4 .x-4 {left: 170.4rem;}
.product-container-left .grid-4 .x-5 {left: 213rem;}
.product-container-left .grid-4 .x-6 {left: 255.6rem;}

/*Sample grid 4 exceptions*/

@media all and (min-width: 620px) {
	.corporate-style-packs .x-0 {top: -14rem;}
	.corporate-style-packs .x-1 {top: -4.5rem;}
	.corporate-style-packs .x-2 {top: -11rem;}
	.corporate-style-packs .x-3 {top: -10.5rem;}

	.inspiration-set .x-0 {top: -7rem;}
	.inspiration-set .x-2 {top: -4rem;}

	.business-mix-set .x-0 {top: -23.5rem;}
	.business-mix-set .x-1 {top: -5.7rem;}
	.business-mix-set .x-2 {top: -15rem;}
	.business-mix-set .x-3 {top: -16rem;}

	.templates-for-excel .x-0 {top: -23.5rem;}
	.templates-for-excel .x-1 {top: -5.7rem;}
	.templates-for-excel .x-2 {top: -15rem;}
	.templates-for-excel .x-3 {top: -16rem;}
}

/*features css*/

#toolbox-for-keynote .features-wrapper {
	background: #fafafa;
}
#toolbox-for-pages .features-wrapper, #toolbox-for-ms-office .features-wrapper {
	background: #fff;
}
#icon-image, #icon-text, #icon-shape, #icon-color {
	fill: #000;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	.features-wrapper {
		text-align: center;
		padding: 4.2rem 0 2.9rem 0;
	}
	.features-wrapper h2 {
		font-weight: 300;
		font-size: 3rem;
		color: #000;
		line-height: 4.5rem;
		width: 28rem;
		padding: 0;
		margin: 0 auto 4rem auto;
	}
	.features-wrapper ul {
		display: inline-block;
		margin: 0;
		padding: 0;
	}
	.features-wrapper ul li {
		list-style: none;
		margin: 0 0 2rem 0;
	}
	.features-wrapper ul li p {
		font-size: 1.2rem;
		color: #808080;
		line-height: 3rem;
		width: 22rem;
		padding: 0;
		margin: 0 0 0 1.7rem;
		text-align: left;
		display: inline-block;
	}
	.editing {
		width: 100%;
		height: 220px;
		background-image: url(../images/template-editing-small.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 220px;
		background-color: #333;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 1.25) and (max-width: 619px), all and ( min--moz-device-pixel-ratio: 1.25) and (max-width: 619px), all and ( -o-min-device-pixel-ratio: 1.25/1) and (max-width: 619px), all and ( min-device-pixel-ratio: 1.25) and (max-width: 619px), all and ( min-resolution: 1.25dppx) and (max-width: 619px) {
	.editing {
		background-image: url(../images/template-editing-small@2x.jpg);
	}
}

@media all and (-webkit-min-device-pixel-ratio: 2.25) and (max-width: 619px), all and ( min--moz-device-pixel-ratio: 2.25) and (max-width: 619px), all and ( -o-min-device-pixel-ratio: 2.25/1) and (max-width: 619px), all and ( min-device-pixel-ratio: 2.25) and (max-width: 619px), all and ( min-resolution: 2.25dppx) and (max-width: 619px) {
	.editing {
		background-image: url(../images/template-editing-small@3x.jpg);
	}
}

@media all and (min-width: 620px) {
	.features-wrapper ul:after {
		content: "";
		clear: both;
		display: table;
	}
	.editing {
		width: 100%;
		height: 440px;
		background-image: url(../images/template-editing.jpg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: auto 440px;
		background-color: #333;
	}
}

@media all and (-webkit-min-device-pixel-ratio: 1.25) and (min-width: 620px), all and ( min--moz-device-pixel-ratio: 1.25) and (min-width: 620px), all and ( -o-min-device-pixel-ratio: 1.25/1) and (min-width: 620px), all and ( min-device-pixel-ratio: 1.25) and (min-width: 620px), all and ( min-resolution: 1.25dppx) and (min-width: 620px) {
	.editing {
		background-image: url(../images/template-editing@2x.jpg);
	}
}

@media all and (-webkit-min-device-pixel-ratio: 2.25) and (min-width: 620px), all and ( min--moz-device-pixel-ratio: 2.25) and (min-width: 620px), all and ( -o-min-device-pixel-ratio: 2.25/1) and (min-width: 620px), all and ( min-device-pixel-ratio: 2.25) and (min-width: 620px), all and ( min-resolution: 2.25dppx) and (min-width: 620px) {
	.editing {
		background-image: url(../images/template-editing@3x.jpg);
	}
}

@media all and (min-width: 620px) and (max-width: 1099px) {
	.features-wrapper {
		padding: 9.9rem 0 8.9rem 0;
	}
	.features-wrapper h2 {
		font-weight: 300;
		font-size: 4rem;
		color: #000;
		line-height: 5.5rem;
		width: 54rem;
		padding: 0;
		margin: 0 auto 4.9rem auto;
		text-align: center;
	}
	.features-wrapper ul {
		width: 54rem;
		margin: 0 auto;
		padding: 0;
	}
	.features-wrapper ul li {
		display: inline-block;
		margin: 0 0 2rem 0;
	}
	.features-wrapper ul li.column-one {
		float: left;
	}
	.features-wrapper ul li.column-two {
		float: right;
	}
	.features-wrapper ul li p {
		font-size: 1.2rem;
		color: #808080;
		line-height: 3rem;
		width: 18.5rem;
		padding: 0;
		margin: 0 0 0 2.2rem;
		text-align: left;
		display: inline-block;
	}
}

@media all and (min-width: 1100px) {
	.features-wrapper {
		text-align: center;
		padding: 9.9rem 0 11rem 0;
	}
	.features-wrapper h2 {
		font-weight: 300;
		font-size: 4rem;
		color: #000;
		line-height: 5.5rem;
		width: 54rem;
		padding: 0;
		margin: 0 auto 5.8rem auto;
	}
	.features-wrapper ul {
		margin: 0 auto;
		padding: 0;
		display: inline-block;
	}
	.features-wrapper ul li {
		display: inline-block;
		text-align: center;
		margin: 0 1.75rem 0 1.75rem;
	}
	.features-wrapper ul li p {
		font-size: 1.2rem;
		color: #808080;
		line-height: 3rem;
		width: 18.5rem;
		padding: 0;
		margin: 1.5rem 0 0 0;
	}
}

/*mobile css*/

#mail-stationery .mobile-wrapper ul li.mac-app-store a figure, #toolbox-for-ms-office .mobile-wrapper ul li.mac-app-store a figure, #set-for-numbers .mobile-wrapper ul li.mac-app-store a figure {
		border-radius: 0.4rem;
		margin: 0;
		padding: 0;
		display: block;
		width: 17.4rem;
		height: 5.2rem;
		background: #000 url(../images/mac-app-store-small.svg)  center center no-repeat;
		opacity: 0.75;
		transition: opacity 0.2s ease;
}
#mail-stationery .mobile-wrapper ul li.mac-app-store a figure:hover, #toolbox-for-ms-office .mobile-wrapper ul li.mac-app-store a figure:hover, #set-for-numbers .mobile-wrapper ul li.mac-app-store a figure:hover {
	opacity: 1;
}
#set-for-numbers .mobile-wrapper {
	background: #fafafa;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	.mobile-wrapper {
		padding: 4.2rem 0 4.9rem 0;
	}
	.mobile-wrapper h2 {
		font-weight: 300;
		font-size: 3rem;
		color: #000;
		line-height: 4.5rem;
		padding: 0;
		margin: 0 auto 1.7rem auto;
		text-align: center;
	}
	#mail-stationery .mobile-wrapper h2, #set-for-numbers .mobile-wrapper h2, #toolbox-for-ms-office .mobile-wrapper h2 {
		margin: 0 auto 0.7rem auto;
	}
	.mobile-wrapper p {
		padding: 0 2rem;
		font-size: 1.2rem;
		color: #808080;
		line-height: 3rem;
		margin: 0 auto;
		text-align: center;
	}
	.mobile-wrapper ul {
		margin: 0;
		padding: 0;
	}
	.mobile-wrapper ul li {
		list-style: none;
	}
	.mobile-wrapper ul li.mac-app-store {
		width: 17.4rem;
		height: 5.2rem;
		margin: 4.9rem auto 0 auto;
	}
	#mail-stationery .mobile-wrapper ul li.mac-app-store, #toolbox-for-ms-office .mobile-wrapper ul li.mac-app-store, #set-for-numbers .mobile-wrapper ul li.mac-app-store {
		margin: 4.9rem auto 1.1rem auto;
	}
	.mobile-wrapper ul li.mac-app-store a figure {
		border-radius: 0.4rem;
		margin: 0;
		padding: 0;
		display: block;
		width: 17.4rem;
		height: 5.2rem;
		background: #000 url(../images/mac-app-store-small.svg)  center center no-repeat;
		opacity: 0.75;
		transition: opacity 0.2s ease;
	}
	.mobile-wrapper ul li.mac-app-store a figure:hover {
		opacity: 1;
	}
	.mobile-wrapper ul li.mas-separator {
		height: 2rem;
	}
	.mobile-wrapper ul li.app-store {
		margin: 0 auto 1.1rem auto;
		width: 14.6rem;
		height: 5.2rem;
	}
	.mobile-wrapper ul li.app-store a figure {
		border-radius: 0.4rem;
		margin: 0;
		padding: 0;
		display: block;
		width: 14.6rem;
		height: 5.2rem;
		background: #000 url(../images/app-store-small.svg) center center no-repeat;
		opacity: 0.75;
		transition: opacity 0.2s ease;
	}
	.mobile-wrapper ul li.app-store a figure:hover {
		opacity: 1;
	}
}

@media all and (min-width: 620px) {
	.mobile-wrapper {
		padding: 9.9rem 0 2.9rem 0;
		text-align: center;
	}
	.mobile-wrapper h2 {
		font-weight: 300;
		font-size: 4rem;
		color: #000;
		line-height: 5.5rem;
		width: 54rem;
		padding: 0;
		margin: 0 auto 2.6rem auto;
		text-align: center;
	}
	#mail-stationery .mobile-wrapper h2, #set-for-numbers .mobile-wrapper h2, #toolbox-for-ms-office .mobile-wrapper h2 {
		margin: 0 auto 0.6rem auto;
	}
	.mobile-wrapper p {
		font-size: 1.2rem;
		color: #808080;
		line-height: 3rem;
		width: 50rem;
		padding: 0;
		margin: 0 auto;
	}
	.mobile-wrapper ul {
		margin: 5.9rem 0 3.9rem 0;
		padding: 0;
		display: inline-block;
	}
	#mail-stationery .mobile-wrapper ul, #toolbox-for-ms-office .mobile-wrapper ul, #set-for-numbers .mobile-wrapper ul {
		margin: 4.9rem 0 8.8rem 0;
	}
	.mobile-wrapper ul li {
		display: inline-block;
	}
	.mobile-wrapper ul li.mac-app-store a figure {
		margin: 0 0 4.6rem 0;
		padding: 0;
		width: 18rem;
		height: 20.7rem;
		background: url(../images/mac-app-store-large.svg) center center no-repeat;
		transition: opacity 0.2s ease;
		opacity: 0.75;
	}
	.mobile-wrapper ul li.mac-app-store a figure:hover {
		opacity: 1;
	}
	.mobile-wrapper ul li.mas-separator {
		height: 30.3rem;
		width: 1px;
		background: #f0f0f0;
		margin: 0 7rem;
	}
	.mobile-wrapper ul li.app-store a figure {
		margin: 0 0 4.6rem 0;
		padding: 0;
		width: 18rem;
		height: 20.7rem;
		transition: opacity 0.2s ease;
		background: url(../images/app-store-large.svg) center center no-repeat;
		opacity: 0.75;
	}
	.mobile-wrapper ul li.app-store a figure:hover {
		opacity: 1;
	}
}

/*iwork promo*/

.ios .iwork-promo {
	display: none;
}
#toolbox-for-keynote .iwork-promo {
	background: #292f33;
}
#toolbox-for-pages .iwork-promo {
	background: #333;
}
.iwork-promo picture {
	width: 7rem;
	height: 7rem;
	display: block;
}
.iwork-promo picture img {
	width: 7rem;
	height: 7rem;
}
.iwork-promo p {
	font-size: 1.2rem;
	font-weight: 400;
	line-height: 3rem;
	color: #b3b3b3;

}
.iwork-promo #toolbox-for-iwork {
	color: #fff;
	border: none;
	background: #e52e2e;
	width: 12rem;
	font-size: 1.2rem;
	font-weight: 400;
	/*letter-spacing: 0.02rem;*/
	line-height: 4rem;
	padding: 0;
	transition: background 0.2s ease;
	border-radius: 0.4rem;
	text-align: center;
	text-decoration: none;
	display: block;
}
.iwork-promo #toolbox-for-iwork:hover {
	background: #FF3333;
	border: none;
	transition: background 0.2s ease;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	.iwork-promo {
		padding: 5.7rem 0 6rem 0;
	}
	.iwork-promo-content-wrapper {
		width: 100%;
	}
	.iwork-promo picture {
		margin: 0 auto;
	}
	.iwork-promo p {
		text-align: center;
		margin: 2.4rem auto 2.9rem auto;
		width: 100%;
		padding: 0 2rem;
		box-sizing:border-box;
	}
	.iwork-promo #toolbox-for-iwork {
		margin: 0 auto;
	}
}

@media all and (min-width: 620px) {
	.iwork-promo {
		height: 11rem;
	}
	.iwork-promo-content-wrapper {
		width: 43rem;
		margin: 0 auto;
	}
	.iwork-promo picture {
		float: left;
		margin: 2rem 0;
	}
	.iwork-promo p {
		float: left;
		text-align: left;
		width: 20rem;
		padding: 0;
		margin: 2.4rem 2rem 0 2rem;
	}
	.iwork-promo #toolbox-for-iwork {
		float: left;
		margin: 3.5rem 0;
	}
}
