@font-face {
	font-family: 'Social';
	src:url('../fonts/Social.eot?-4ngxqs');
	src:url('../fonts/Social.eot?#iefix-4ngxqs') format('embedded-opentype'),
	url('../fonts/Social.woff?-4ngxqs') format('woff'),
	url('../fonts/Social.ttf?-4ngxqs') format('truetype'),
	url('../fonts/Social.svg?-4ngxqs#Social') format('svg');
	font-weight: normal;
	font-style: normal;
}

/*animation*/

@-webkit-keyframes NavIn {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40px, 0);
				transform: translate3d(0, -40px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	}
}

@keyframes NavIn {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40px, 0);
				transform: translate3d(0, -40px, 0);
	}
	100% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes NavOut {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40px, 0);
				transform: translate3d(0, -40px, 0);
	}
}

@keyframes NavOut {
	0% {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -40px, 0);
				transform: translate3d(0, -40px, 0);
	}
}

@-webkit-keyframes FadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes FadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes FadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes FadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes BunTopOut {
	0% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
	100% {
		-webkit-transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
				transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
	}
}
@keyframes BunTopOut {
	0% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
	100% {
		-webkit-transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
				transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
	}
}

@-webkit-keyframes BunTopIn {
	0% {
		-webkit-transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
				transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
	}
	100% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
}
@keyframes BunTopIn {
	0% {
		-webkit-transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
				transform: rotate(45deg) translateX(0.5rem) translateY(0.5rem);
	}
	100% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
}

@-webkit-keyframes BunBottomOut {
	0% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
	100% {
		-webkit-transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
				transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
	}
}
@keyframes BunBottomOut {
	0% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
	100% {
		-webkit-transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
				transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
	}
}

@-webkit-keyframes BunBottomIn {
	0% {
		-webkit-transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
				transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
	}
	100% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
}
@keyframes BunBottomIn {
	0% {
		-webkit-transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
				transform: rotate(-45deg) translateX(0.5rem) translateY(-0.5rem);
	}
	100% {
		-webkit-transform: rotate(0deg) translateX(0rem) translateY(0rem);
				transform: rotate(0deg) translateX(0rem) translateY(0rem);
	}
}

@-webkit-keyframes PassSubscribeIn {
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(60px);
				transform: translateY(60px);
	}
}
@keyframes PassSubscribeIn {
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(60px);
				transform: translateY(60px);
	}
}

@-webkit-keyframes PassSubscribeOut {
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(60px);
				transform: translateY(60px);
	}
}
@keyframes PassSubscribeOut {
	0% {
		-webkit-transform: translateY(0);
				transform: translateY(0);
	}
	100% {
		-webkit-transform: translateY(60px);
				transform: translateY(60px);
	}
}

/*header css*/

* {
	font-family: 'Open Sans', sans-serif;
}
html {
	font-size: 62.5%;
	min-width: 320px;
	background: #fff;
}
body {
	min-height: 100vh;
	background: #f7f7f7 url(../images/bg-infographics-for-pages-promo.svg) 1270px 700px no-repeat;
	background-position: center center;
}
.jumsoft-logo-wrapper {
	display: inline-block;
}
.jumsoft-logo-wrapper svg {
	display: block;
}
#jumsoft-logo {
	fill: #ccc;
}
nav.main ul li.facebook a, nav.main ul li.twitter a {
	font-family: "Social" !important;
	content: attr(data-icon);
	font-style: normal !important;
	font-weight: normal !important;
	font-variant: normal !important;
	text-transform: none !important;
	speak: none;
	font-size: 1.3rem;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	header {
		padding: 2rem;
		background-color: #fff;
	}
	button.burger{
		margin: 0.1rem 0 0 0;
		padding: 0;
		float: right;
		border: none;
		width: 2.2rem;
		height: 1.7rem;
		outline: none;
		position: relative;
		background-color: transparent;
		z-index: 200;
	}
	#bun-bottom, #patty, #bun-top {
		background-color: #ccc;
		width: 2.2rem;
		height: 0.3rem;
		margin: 0 0 0.4rem 0;
	}
	button #patty.active {
		-webkit-animation: FadeOut 0.4s forwards;
				animation: FadeOut 0.4s forwards;
	}
	button #patty.inactive {
		-webkit-animation: FadeIn 0.4s forwards;
				animation: FadeIn 0.4s forwards;
	}
	button #bun-top.active {
		-webkit-animation: BunTopOut 0.4s forwards;
				animation: BunTopOut 0.4s forwards;
	}
	button #bun-top.inactive {
		-webkit-animation: BunTopIn 0.4s forwards;
				animation: BunTopIn 0.4s forwards;
	}
	button #bun-bottom.active {
		-webkit-animation: BunBottomOut 0.4s forwards;
				animation: BunBottomOut 0.4s forwards;
	}
	button #bun-bottom.inactive {
		-webkit-animation: BunBottomIn 0.4s forwards;
				animation: BunBottomIn 0.4s forwards;
	}
	nav.main{
		position: absolute;
		width: 100%;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		display: none;
		background: #000;
		z-index: 100;
	}
	nav.main ul {
		padding: 0.9rem 2rem 0.9rem 2rem;
		margin: 0;
	}
	nav.main ul li {
		display: block;
		margin: 0;
	}
	nav.main ul li a {
		font-size: 1.6rem;
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		line-height: 4.2rem;
		text-transform: uppercase;
		transition: color 0.2s ease;
	}
	nav.main ul li a:hover {
		color: #0095FF;
	}
	nav.main ul li.designs a[rel~="rellink"]:hover{
		color: #fff;
	}
	nav.main.active {
		display: block;
		-webkit-animation: NavIn 0.4s;
				animation: NavIn 0.4s;
	}
	nav.main.inactive {
		display: block;
		-webkit-animation: NavOut 0.4s;
				animation: NavOut 0.4s;
	}
	nav.main ul li.facebook, nav.main ul li.twitter {
		float: left;
		/*margin: 1.5rem 2rem 2.9rem 0;*/
		margin: 0 0 0.3rem 0;
	}
	nav.main ul .designs svg {
		display: none;
	}
	nav.main ul li .nested-menu {
		margin: 0;
		padding: 0;
		display: block;
	}
	nav.main ul li ul {
		margin: 0 0 1.6rem 0;
		padding: 0.3rem 0 2.2rem 2rem;
		border-bottom: solid 1px #333;
	}
	nav.main ul li ul li {
		height: 2.7rem;
		line-height: 2.7rem;
	}	
	nav.main ul li ul li a {
		font-size: 1.2rem;
		text-transform: initial;
		font-weight: 400;
		line-height: 2.7rem;
	}
}

@media all and (min-width: 620px) {
	header {
		padding: 3.2rem 4rem;
	}	
	.jumsoft-logo-wrapper {
		margin: 0.2rem 0 0 0;
	}
	button.burger {
		display: none;
	}
	nav.main {
		display: inline-block;
		float: right;
	}
	nav.main ul {
		margin: 0;
		padding: 0;
	}
	nav.main ul li {
		display: inline-block;
		margin: 0 0 0 1.55rem;
	}
	nav.main ul li:first-child {
		margin: 0;
	}
	nav.main ul li a {
		font-size: 1.2rem;
		color: #b3b3b3;
		font-weight: 400;
		line-height: 2.2rem;
		text-decoration: none;
		transition: color 0.2s ease;
	}
	nav.main ul li.facebook a, nav.main ul li.twitter a {
		color: #ccc;
		line-height: 2.2rem;
	}
	nav.main ul li.facebook a:hover, nav.main ul li.twitter a:hover {
		color: #333;
	}
	nav.main ul li.active a{
		color: #333;
	}
	nav.main ul li.menu-item-type-post_type a:hover{
		color: #333;
	}
	nav.main ul .designs {
		cursor: pointer;
	}
	nav.main ul .designs #menu-arrow {
		fill: #b3b3b3;
		transition: fill 0.2s ease;
	}
	nav.main ul .designs.active #menu-arrow {
		fill: #333;
	}
	nav.main svg {
		margin-left: 0.3rem;
	}
	nav.main ul .designs ul{
		display: none;
		position: absolute;
		z-index: 500;
		padding: 1.3rem 0 0 0;
		margin: 0 0 0 -1.3rem;
	}
	/*nav.main ul .designs:hover ul,*/
	nav.main ul .designs.active ul {
		display: block;
	}
	nav.main ul .designs ul:before {
		content: "";
		height: 0px;
		display: block;
		width: 10.2rem;
		height: 14.5rem;
		position: absolute;
		background: #fff;
		box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
		z-index: -1;
		border-radius: 0.4rem;
	}
	nav.main ul .designs ul {
		border-radius: 0.4rem;
	}
	/*nav.main ul li:hover, */
	nav.main ul li.active {
		color: #333;
	}
	nav.main ul li.active {
		color: #333;
	}
	nav.main ul .designs  li {
		display: block;
        margin: 0;
		padding: 0.5rem 1.2rem 0 1.2rem;
	}
	nav.main ul .designs  li:first-child {
		padding: 0.7rem 1.2rem 0 1.2rem;
	}
	nav.main ul .designs  li:last-child {
		padding: 0.5rem 1.2rem 0.8rem 1.2rem;
	}
	nav.main ul .designs li a {
		color: #b3b3b3;
	}
	.menu-menu1-container {
		margin-right: 1.75rem;
	}

}

/*subscribe*/

.subscribe-container {
	position: fixed;
	bottom: 0;
	width: 100%;
	border-top: dashed 1px #e6e6e6;
	background: #f7f7f7;
	padding: 0;
}
.subscribe-wrapper {
	text-align: center;
	overflow: hidden;
	padding: 2rem;
	height: 8rem;
	position: relative;
	left: 50%;
	box-sizing: border-box;
	-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
}
.subscribe-wrapper form {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 4rem;
	position: relative;
}
.subscribe-wrapper.pass form {
	-webkit-animation: PassSubscribeOut 0.4s ease forwards;
			animation: PassSubscribeOut 0.4s ease forwards;
}
.subscribe-wrapper form.off {
	visibility: hidden;
}
.email {
	width: 100%;
	padding: 0;
	margin: 0;
	display: block;
	outline: none;
	box-sizing: border-box;
	height: 4rem;
	border: none;
	border-bottom: 1px solid #e6e6e6;
	font-size: 1.2rem;
	font-weight: 400;
	color: #b3b3b3;
	background: none;
	border-radius: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
			appearance: none;
}
.email.error {
	color: #FF5533;
}
#subscribe {
	position: absolute;
	top: 0;
	right: 0;
	height: 4rem;
	background: #333;
	border: none;
	color: #fff;
	font-weight: 400;
	font-size: 1.2rem;
	border-radius: 0.4rem;
	width: 12rem;
	margin: 0;
	padding: 0;
	line-height: 4rem;
	-webkit-transition: background 0.2s ease;
			transition: background 0.2s ease;
}
#subscribe:hover {
	background: #0095FF;
	-webkit-transition: background 0.2s ease;
			transition: background 0.2s ease;
}
.email::-webkit-input-placeholder {color: #b3b3b3;}
.email:-moz-placeholder {color: #b3b3b3;}
.email::-moz-placeholder {color: #b3b3b3;}
.email:-ms-input-placeholder {color: #b3b3b3;}
.email:focus::-webkit-input-placeholder {color: #333;}
.email:focus:-moz-placeholder {color: #333;}
.email:focus::-moz-placeholder {color: #333;}
.email:focus:-ms-input-placeholder {color: #333;}
.email:focus, .email:active {
	outline: 0;
	color: #333;
}
.email.error {
	color: #FF5533;
}
.email.error::-webkit-input-placeholder {color: #FFAA99;}
.email.error:-moz-placeholder {color: #FFAA99;}
.email.error::-moz-placeholder {color: #FFAA99;}
.email.error:-ms-input-placeholder {color: #FFAA99;}
.email.error:focus::-webkit-input-placeholder {color: #FF5533;}
.email.error:focus:-moz-placeholder {color: #FF5533;}
.email.error:focus::-moz-placeholder {color: #FF5533;}
.email.error:focus:-ms-input-placeholder {color: #FF5533;}
.email.error:focus, .email.error:active {
	outline: 0;
	color: #FF5533;
}
.response {
	font-size: 1.2rem;
	color: #b3b3b3;
	font-weight: 400;
	line-height: 4rem;
	text-align: center;
	padding: 0 0 0 3rem;
	margin: 0 auto;
	box-sizing: border-box;
	display: inline-block;
	top: -10rem;
	position: relative;
	background: left center no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Ik0xNi4wMDEsMEgzLjk5OUMxLjc5MiwwLDAsMS43OTEsMCwzLjk5OXYxMi4wMDJDMCwxOC4yMDcsMS43OTEsMjAsMy45OTksMjBoMTIuMDAyQzE4LjIwNywyMCwyMCwxOC4yMDksMjAsMTYuMDAxVjMuOTk5QzIwLDEuNzkzLDE4LjIwOSwwLDE2LjAwMSwweiBNOCwxNS41TDIuNSwxMGwyLTJMOCwxMS41bDcuNS03bDIsMkw4LDE1LjV6Ii8+PC9zdmc+);
}	
.subscribe-wrapper.pass .response {
	-webkit-animation: PassSubscribeIn 0.4s ease forwards;
			animation: PassSubscribeIn 0.4s ease forwards;
}

@media all and (min-width: 320px) and (max-width: 619px) {
	.subscribe-wrapper {
		width: 100%;
	}
	.subscribe-wrapper form {
		padding: 0 12rem 0 0;
	}
	#subscribe {
		width: 10rem;
	}
}

@media all and (min-width: 620px) {
	.subscribe-wrapper {
		width: 54rem;
	}
	.subscribe-wrapper form {
		padding: 0 14rem 0 0;
	}
	#subscribe {
		width: 12rem;
	}
}

@media all and (min-height: 1009px) and (min-width: 620px) {
	.subscribe-container {
		padding: 2rem 0;
	}
}
@media all and (max-height: 300px) {
	.subscribe-container {
		display: none;
	}
}

/*promo*/

#promo {
	text-align: center;
	padding: 0 1rem 14rem 1rem;
	box-sizing: border-box;
	width: 100%;
}
#promo img {
	display: block;
	width: 100%;
	max-width: 20rem;
	margin: 0 auto;
}







#promo h1 {
	text-align: center;
	font-weight: 300;
	color: #333;
	padding: 0;
	width: 100%;
	font-size: 3rem;
	line-height: 3.5rem;
	margin: 2.3rem auto 0.8rem auto;
}
#promo a.link-to-page {
	text-decoration: none;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 300;
	color: #B3B3B3;
	line-height: 2rem;
	padding: 0;
	margin: 0 auto 5.6rem auto;
	display: inline-block;
	transition: color 0.2s ease;
}
#promo a.link-to-page:hover {
	color: #3af;
}





#promo figure.mac-app-store {
	background: #fff url(../images/apple-small-black.svg) 13px 11px no-repeat;
	border-radius: 0.4rem;
	margin: 0 auto;
	padding: 0;
	width: 16.6rem;
	height: 5rem;
	display: block;
	box-shadow: 0 1px 1px 0 #ddd;
	transition: box-shadow 0.2s ease;
}
#promo figure.mac-app-store:hover {
	box-shadow: 0 2px 6px 0 #ddd;
}
#promo figure.mac-app-store a {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
#promo figure.mac-app-store a p.small {
	color: #000;
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
	padding: 0.9rem 0 0 4.2rem;
	display: block;
	text-align: left;
}
#promo figure.mac-app-store a p.big {
	color: #000;
	font-size: 1.6rem;
	font-weight: 600;
	margin: -0.3rem 0 0 0;
	padding: 0 0 0 4.1rem;
	display: block;
	text-align: left;
}


@media all and (min-height: 301px) {
	#promo a.link-to-page {
		margin-bottom: 3.6rem;
	}
}

@media all and (min-height: 580px) and (max-width: 619px) {
	#promo {
		position: absolute;
		padding: 0 2rem 2rem 2rem;
		top: 45%;
		transform: translateY(-50%);
	}
}

@media all and (min-height: 628px) and (min-width: 620px) {
	#promo {
		position: absolute;
		padding: 0 2rem 2rem 2rem;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media all and (min-width: 620px) {
	#promo h1 {
		font-size: 4rem;
		line-height: 5.5rem;
		margin: 3.3rem auto 1.2rem auto;
	}
	#promo a.link-to-page {
		margin: 0 auto 5.6rem auto;
	}
}