@media (max-width:540px) {
	/*----------------------------------------------------*/

	body {
		width: 100%;
		overflow-x: hidden;
		padding-top: 88px;
	}

	.grid {
		display: inline-grid;
		grid-template-columns: repeat(6, 1fr);
		grid-column-gap: 24px;
		width: 100%;
		position: relative;
	}
	
	.grid > * {
		grid-column: 1/-1;
	}

	.section {
		padding: 0 24px;
	}

	button.big {
		height: 48px;
	}

	/*----------------------------------------------------*/

	h1 {
		font-size: 32px;
	}
	
	h2 {
		font-size: 18px;
	}

	h4 {
		font-size: 16px;
	}

	/*----------------------------------------------------*/
		
	#header {
		text-align: left;
	}

	#header .grid {
		height: 88px;
	}
	
	.logo img {
		width: 129px;
	}
	
	/*----------------------------------------------------*/

	#menu-button {
		grid-column: 10/12;
		width: 26px;
		position: relative;
		justify-self: end;
		z-index: 9999;
		cursor: pointer;
	}
	
	.menu-line {
		position: absolute;
		box-sizing: border-box;
		height: 0px;
		right: 0;
		border: 1px solid #2962ff;
		background: #2962ff;
		transform: translateY(-50%);
		transform-origin: center center;
		transition: top .3s .3s, transform .3s .0s, border-color .3s, background .3s, width .3s, opacity .3s;
		opacity: 1;
	}
	
	body.open-menu .menu-line,
	body[section-theme="dark"] .menu-line {
		/* border-color: #fbfbfd;
		background: #fbfbfd; */
	}
	
	#menu-button .top-line,
	#menu-button .middle-line,
	#menu-button .bottom-line {
		transform: translateX(50%) translateY(-50%) rotateZ(0);
		right: 50%;
		width: 26px;
	}

	#menu-button .top-line {
		top: -7px;
	}

	#menu-button .bottom-line {
		top: 7px;
	}
	
	body.open-menu .menu-line {
		transition: top .3s 0s, transform .3s .3s, border-color .3s, width .3s, opacity .3s 0s;
	}
	
	body.open-menu #menu-button .middle-line {
		opacity: 0;
	}

	body.open-menu #menu-button .top-line,
	body.open-menu #menu-button .bottom-line {
		top: 0;
		width: 18px;
	}

	body.open-menu #menu-button .top-line {
		transform: translateX(50%) translateY(-50%) rotateZ(45deg);
	}

	body.open-menu #menu-button .bottom-line {
		transform: translateX(50%) translateY(-50%) rotateZ(-45deg);
	}
	
	/*----------------------------------------------------*/

	.main-menu {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: #2962ff;
		transform: translateX(100%);
		transition: transform .3s;
		z-index: 9998;
		font-size: 24px;
		font-weight: bold;
		line-height: 3;
		color: #f6f6f6;
		text-align: left;
		padding-left: 40px;  
	}

	body.open-menu .main-menu {
		transform: translateX(0);
	}

	.main-menu .logo {
		background: #fbfbfd;
		width: 100%;
		position: absolute;
		left: 0;
		padding: 33px 24px;
	}

	.main-menu > li:first-of-type {
		margin-top: 120px;
	}

	.main-menu .footer {
		font-family: Poppins;
		font-weight: 400;
		font-size: 14px;
		line-height: 1.71;
		color: #f6f6f6;
	}

	.main-menu .footer {
		line-height: 1.71;
		position: absolute;
		bottom: 42px;
	}

	.main-menu .footer li {
		display: block;
	}
	
	.main-menu .footer img {
		width: 16px;
		margin-right: 16px;
	}

	/*----------------------------------------------------*/

	#hero {
		padding-top: 43px;
		padding-bottom: 64px;
	}

	#hero .decoration {
		top: 24px;
		width: 78px;
	}

	#hero .decoration.left {
		right: calc(100% - 40px);
	}

	#hero .decoration.right {
		left: calc(100% - 40px);
	}

	#hero h1, #hero h2, #hero h4 {
		grid-column: 1/-1;
	}
	
	#hero h1 {
		padding: 0 10px;
	}

	#hero h2 {
		margin-top: 29px;
	}

	#hero h4 {
		margin-top: 26px;
		margin-bottom: 47px;
	}

	#hero .button {
		grid-column-start: 1;
		grid-column-end: span 3;
	}
	
	#hero .button.secondary {
		grid-column-start: 4;
	}

	/*----------------------------------------------------*/

	#features {
		padding-top: 97px;
		padding-bottom: 84px;
	}

	#features h1 {
		margin-bottom: 55px;
	}

	#features .feature {
		margin-bottom: 40px;
		grid-column-end: span 5;
		background: #f7f7f7;
		padding: 13px 25px 19px 25px;
		text-align: left;
		position: relative;
	}

	#features .feature:nth-of-type(odd) {
		margin-right: calc((100%*6/5 - 24px*5) / 12);
	}

	#features .feature:nth-of-type(even) {
		grid-column-start: 2;
		margin-left: calc((100%*6/5 - 24px*5) / 12);
	}
	
	#features .feature img {
		transform: scale(0.9);
	}

	#features .feature-text .decoration {
		left: calc(100% - 35px);
		bottom: calc(100% - 35px);
	}
	
	#features .feature-setup .decoration {	
		left: -55px;
		top: -32px;
	}
	
	#features .feature-templates .decoration {	
		right: calc(100% - 20px);
		top: -32px;
		transform: scale(0.9) rotateZ(-20deg) scaleY(-1);
	}
	
	#features .feature-settings .decoration {	
		top: -35px;
		right: -50px;
	}
	
	#features .feature-multilingual .decoration {
		top: -31px; 
		right: calc(100% - 55px);
	}

	/*----------------------------------------------------*/

	#platforms {
		padding-bottom: 72px;
		text-align: center;
	}
	
	#platforms h1 {
		margin-top: 32px;
	}

	#platforms h4 {
		margin-top: 15px;
		margin-bottom: 45px;
	}

	#platforms .grid {
		justify-items: left;
	}

	#platforms .platform {
		grid-column: span 3;
		background: white;
		padding: 8px 8px 24px 8px;
		margin-bottom: 24px;
	}	

	#platforms .platform img.logo {
		height: 50px;
		max-width: 100px;
		margin-bottom: 11px;
		margin-top: 5px;
	}	
	
	#platforms .platform .button {
		margin-top: 17px;
	}

	#platforms button {
		width: 120px;
	}	
	
	#platforms button.link {
		height: auto;
	}
	
	#platforms button.secondary {
		font-size: 14px;
	}

	#platforms .platform .text {
		min-height: 3em;
	}	

	#platforms .platform.big {
		grid-column: 1/-1;
		grid-row: 5;
		margin-bottom: 0;
		padding-top: 26px;
		padding-left: 40px;
		padding-right: 40px;
	}

	#platforms .platform.big .button {
		margin-top: 14px;
	}

	#platforms .platform.big .decoration {
		height: 86px;
		bottom: 13px;
	}

	#platforms .platform.big .decoration.left {
		left: 14px;
	}
	
	#platforms .platform.big .decoration.right {
		right: 14px;
	}

	/*----------------------------------------------------*/

	#integration {
		padding-top: 40px;
		padding-bottom: 40px;
		background: none;
		background: #fbfbfd;
	}
	
	#integration h1 {
		grid-column: 2/-2;
	}

	#integration h4 {
		margin-top: 20px;
		margin-bottom: 26px;
	}

	#integration .platforms-cloud img {
		width: 100%;
	}
	
	#integration .button {
		justify-self: center;
	}
	
	#integration .button button {
		padding: 0 24px;
	}

	#integration .decoration.bottom {
		top: calc(100%);
	}

	/*----------------------------------------------------*/

	#templates {
		padding-top: 110px;
		padding-bottom: 73px;
	}

	#templates a {
		margin-top: 40px;
	}

	#templates h4 {
		margin-top: 22px;
		margin-bottom: 50px;
	}

	#templates .button {
		justify-self: center;
		grid-row: 4;
	}
	
	#templates button {
		padding: 0 16px;
	}

	#templates .slider .arrow.go-prev {
		left: 0;
	}

	#templates .slider .arrow.go-next {
		right: 0;
	}

	#templates .slide img {
		margin-left: 50%;
		transform: translateX(-50%);
	}

	/*----------------------------------------------------*/

	#testimonials {
		padding-bottom: 112px;
	}

	#testimonials h1 {
		margin-bottom: 70px;
	}

	#testimonials .testimonial {
		padding: 26px 16px 28px 16px;
		text-align: left;
	}

	#testimonials h3 {
		margin-top: 16px;
		margin-bottom: 12px;
	}
	
	#testimonials .decoration {
		height: 98px;
		top: -55px;
	}

	#testimonials .decoration.right {
		left: calc(100% - 120px);
	}

	#testimonials .decoration.left {
		right: calc(100% - 110px);
	}
	
	/*----------------------------------------------------*/

	#pricing {
		padding-top: 41px;
		padding-bottom: 55px;
	}

	#pricing .decoration {
		position: relative;
		grid-row: 3/6;
		margin-top: 85px;
		margin-left: -15px;
		width: 113%;
	}

	#pricing h1 {
		grid-row: 1;
	}
	
	#pricing h4 {
		margin-top: 23px;
		grid-row: 2;
	}
	
	#pricing .plans {
		grid-row: 3;
		margin-top: 52px;
		text-align: left;
		z-index: 1;
	}

	#pricing .plan {
		padding-top: 19px;
		width: calc(100% - 70px);
	}

	#pricing .plan .Pricing {
		font-size: 40px;
	}
	
	#pricing .plan.monthly {
		padding-bottom: 40px;
	}

	#pricing .plan.yearly {
		margin-top: -30px;
		margin-left: 70px;
		padding-bottom: 36px;
	}

	#pricing button {
		margin-top: 56px;
		justify-self: center;
		padding: 0 26px;
		grid-row: 4;
	}

	/*----------------------------------------------------*/

	#cta {
		padding-top: 70px;
		padding-bottom: 48px;
	}

	#cta .CTA-Healine {
		font-size: 18px;
		line-height: 1.44;
		padding: 0 70px;
	}
	
	#cta h3 {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
		margin-top: 20px;
		margin-bottom: 32px;
	}

	#cta .decoration {
		top: -35px;
		height: 112px;
	}

	#cta .decoration.left {
		width: 132px;
		left: -15px;
	}

	#cta .decoration.right {
		right: 8px;
		width: 92px;
	}

	#cta button {
		padding: 0 44px;
	}

	/*----------------------------------------------------*/

	#footer {
		padding: 36px 45px;
	}

	#footer .column {
		margin-top: 29px;
	}

	#footer .social li {
		display: inline-block;
		margin-right: 24px;
	}

	/*----------------------------------------------------*/
	
	body#faq-page h1 {
		margin-top: 30px;
		margin-bottom: 60px;
	}
	
	body#faq-page:before {
		height: 428px;
	}
	
	.faq {
		padding: 0 16px;
	}

	.faq-contact {
		padding: 80px 35px 72px 35px;
	}

	.faq-contact .content {
		padding: 26px 30px 30px 30px;
	}
	
	.faq-contact .text {
		margin-top: 10px;
		margin-bottom: 26px;
		text-align: left;
	}

	.faq-contact .decoration.left {
		right: calc(100% - 117px);
	}

	.faq-contact .decoration.right {
		left: calc(100% - 32px);
	}

	/*----------------------------------------------------*/

	body#templates-page:before {
		height: 428px;
	}
	
	body#templates-page h1 {
		margin-top: 30px;
		margin-bottom: 28px;
	}
	
	body#templates-page .subtitle {
		margin-bottom: 107px;
	}

	body#templates-page .templates {
		padding-bottom: 137px;
	}

	body#templates-page .templates .grid:before {
		content: url(/img/templates_top_left_mobile.svg);
		position: absolute;
		left: 0;
		top: -200px;
		z-index: -1;
	}
	
	body#templates-page .templates .grid:after {
		content: url(/img/templates_top_right_mobile.svg);
		position: absolute;
		right: -0px;
		top: -208px;
		z-index: -1;
	}
	
	body#templates-page .templates .grid {
		justify-items: center;
	}

	body#templates-page .templates .template {
		grid-column: 1/-1;
	}

	body#templates-page .templates .template+.template {
		margin-top: 32px;
	}

	body#templates-page .template .footer {
		display: none;
	}

	body#templates-page .section .decoration {
		top: calc(100% - 57px);
	}

	/*----------------------------------------------------*/

	body#contact-page.gray-header:before {
		height: 428px;
	}
	
	body#contact-page .intro {
		margin-top: 29px;
	}

	body#contact-page h3 {
		margin-top: 32px;
		font-size: 16px;
		font-weight: 500;
		line-height: 1.5;
		padding: 0 20px;
	}
	
	body#contact-page form {
		margin-top: 66px;
	}

	/*----------------------------------------------------*/

	form {
		padding: 25px 32px 72px 32px;
	}

	form .thank-you {
		left: 32px;
		right: 32px;
		transform: none;
		padding: 32px 24px 43px 24px;
	}

	form .thank-you .decoration {
		top: -41px;
	}

	/*----------------------------------------------------*/
	
	body[id^=waitlist].gray-header:before {
		height: 428px;
	}
	
	body[id^=waitlist] h1 {
		margin-top: 30px;
	}

	body[id^=waitlist] h3 {
		font-size: 16px;
		font-weight: 500;
		margin-top: 26px;
	}

	body[id^=waitlist] form {
		margin-top: 65px;
	}

	/*----------------------------------------------------*/

	form > .decoration {
		height: 250px;
	}
	form .decoration.bottom.left {
		left: -40px;
	}
	
	form .decoration.top {
		top: -50px;
	}

	form .decoration.top.left {
		left: -120px;
	}
	
	form .decoration.bottom.right {
		right: -90px;
	}

	form .decoration.top.right {
		right: -60px;
	}

	form .decoration.bottom {
		bottom: -80px;
	}
	
	body.form-page #footer {
		margin-top: 224px;
	}
}
