﻿
@media screen and (min-width: 980px) {
	.hide-desktop {
		display: none;
	}
}
@media screen and (max-width: 980px) {
	.hide-mobile {
		display: none;
	}
}


/* responsive */

@media screen and (min-width: 1340px) { /* classic laptop */
	.pre-head > div,
	header > div,
	footer > div,
	section > div,
	.emo .slide > div {
		width: 1300px;
	}
}
@media screen and (min-width: 1500px) { /* hd */
	.pre-head > div,
	header > div,
	footer > div,
	section > div,
	.emo .slide > div {
		width: 1460px;
	}
}
@media screen and (max-width: 1500px) { /* classic screen */
	.block .col-3 > div {
		float: none;
		width: auto;
	}
	.explainer-videos .videos {
		margin: 0 0 -30px -30px;
	}
	.explainer-videos .videos > div {
		width: calc(100% / 6 - 30px);
		margin: 0 0 30px 30px;
	}
}
@media screen and (max-width: 1420px) {
	.quick-links {
		margin-left: -40px;
	}
	.quick-links > div {
		float: left;
		width: calc(100% / 3 - 40px);
		margin-left: 40px;
	}
}
@media screen and (max-width: 1200px) { /* classic screen */
	.pre-head > div,
	header > div,
	footer > div,
	section > div,
	.emo .slide > div {
		width: 980px;
	}

	.price-table .included .placeholder-1 {
		height: 67px;
	}
	.price-table .pack > a {
		font-size: 12px;
	}

	.explainer-videos .videos {
		margin: 0 0 -60px -60px;
	}
	.explainer-videos .videos > div {
		width: calc(100% / 3 - 60px);
		margin: 0 0 60px 60px;
	}
	.explainer-videos .videos > div:nth-child(3n+1) {
		clear: left;
	}

	.quick-links {
		margin-left: -20px;
	}
	.quick-links > div {
		width: calc(100% / 3 - 20px);
		margin-left: 20px;
	}
	.quick-links > div .block-content h2 a {
		font-size: 18px;
		line-height: 26px;
	}
}
@media screen and (max-width: 980px) { /* tablet */
	.pre-head > div,
	header > div,
	section {
		padding: 0 20px;
	}
	.pre-head > div,
	header > div,
	footer > div,
	section > div{
		width: 100%;
	}

	header,
	header.sticky,
	.headersticky {
		height: 50px;
	}
	header {
		border-bottom: 4px solid #ffe06b;
	}
	header .logo {
		padding-bottom: 4px;
	}

	header nav,
	section nav {
		display: none;
	}

	.mobilemenu,
	aside {
		display: block;
	}

	.emo {
		height: 600px;
	}
	.emo .slide > div {
		background-position: center bottom;
		background-size: auto 300px;
	}
	.emo .slide > div > div {
		float: none;
		top: 0;
		width: 100%;
		margin: 0;
		padding: 50px 20px 350px;
		text-align: center;
	}
	.emo .slide > div > div p {
		max-width: 100%;
	}

	header nav a {
		padding: 0 15px;
	}

	footer > div {
		padding: 30px 20px;
	}

	.emo .slide > div {
		width: auto;
	}
	.emo .slide > div > div h2 {
		max-width: none;
	}

	.main-solutions > div {
		padding: 20px 0;
	}
	.main-solutions .arrow {
		display: none;
	}
	.main-solutions .content.active {
		margin-top: 0;
	}
	.main-solutions .content {
		float: none;
		width: auto;
		min-height: auto;
		margin: 0;
	}
	.main-solutions .content + .content {
		margin-top: 20px;
	}

	.sub {
		padding: 20px 20px 0 20px;
	}
	.sub .rs {
		display: none;
	}

	.blog-sidebar {
		display: none;
	}
	.blog-sidebar + .cont {
		width: 100%;
		padding-left: 0;
	}

	.explainer-videos .videos {
		margin: 0 0 -40px -40px;
	}
	.explainer-videos .videos > div {
		width: calc(100% / 3 - 40px);
		margin: 0 0 40px 40px;
	}

	.quick-links {
		margin-left: -40px;
	}
	.quick-links > div {
		width: calc(100% / 3 - 40px);
		margin: 0 0 0 40px;
	}

	.references > div > div {
		margin: 0 0 -12px -30px;
	}
	.references > div > div > div {
		margin: 0 0 12px 30px;
	}
	.references > div .left {
		width: calc(100% - 130px);
	}
	.references > div .right {
		width: 130px;
		padding-left: 30px;
	}
	.references > div > div > div img.landscape {
		max-height: 20px;
	}
	.references > div > div > div img.portrait {
		max-height: 30px;
	}

	footer .rs,
	footer .ls {
		float: none;
		text-align: center;
	}
	footer .rs > span,
	footer .rs > a {
		float: none;
		display: inline-block;
	}
	footer .rs > span img,
	footer .rs > a img {
		height: 21px;
	}
	footer .rs {
		margin-bottom: 20px;
	}
	footer .ls {
		font-size: 12px;
	}
	footer .ls span {
		display: block;
		clear: both;
		margin: 0;
		height: 0;
		overflow: hidden;
	}
}
@media screen and (max-width: 768px) { /* landscape phone */

	.pre-head .contact {
		display: none;
	}

	.emo {
		height: 600px;
	}

	.col-3 > div,
	.col-4 > div,
	.col-5 > div,
	.col-x2,
	.col-x3 {
		float: none;
		width: auto !important;
	}

	.price_options > div { width: 33.2%; }

	.cont form > div {
		float: none;
		width: auto;
	}
	.cont form > div:last-of-type {
		width: auto;
	}

	#lz_floating_button {display:none;}

	.price-table .pack {
		width: auto;
		float: none;
	}
	.price-table .included {
		display: none
	}
	.price-table .pack:not(.popular) {
		border: 5px solid #eee;
	}
	.price-table .pack {
		margin-top: 10px;
	}
	.price-table .pack > div {
		height: auto;
		padding: 0 10px;
		text-align: left;
	}
	.price-table .pack > span {
		padding: 0 10px;
	}
	.price-table .pack > div:not(.show-compact) {
		display: none;
	}
	.price-table .pack .th {
		display: inline-block;
		font-size: 13px;
		font-weight: 400;
		margin: 0 10px 0 0;
	}

	.block-icon-left + .block {
		padding-left: 50px;
	}
	.block-icon-left {
		position: relative;
		margin: 0 auto -50px;
		z-index: 1;
		width: 100px;
		height: 100px;
	}

	.block-image-right {
		position: relative;
		float: none;
		margin: -50px auto 30px;
		z-index: 1;
		width: 240px;
		height: 160px;
		border-bottom-left-radius: 100%;
		border-bottom-right-radius: 100%;
	}
	.block-image-right:after {
		display: none;
	}

	.block h2 {
		text-align: center;
	}
	.block h2:after {
		left: calc(50% - 60px);
	}

	.block .col-2, .block .col-3, .block .col-4, .block .col-5 {
		float: none;
		width: auto;
	}

	.blog-post .blog-image {
		float: unset;
		margin: 0 auto;
	}
	.blog-post > div {
		width: 100%;
		padding-left: 0;
		margin-top: 40px;
	}
	.full-blog-post .blog-image {
		width: 300px;
	}

	.explainer {
		padding: 0 40px;
	}
	.explainer .social {
		position: relative;
		bottom: auto;
	}
	.explainer .contenet {
		padding: 10px 0;
	}
	.explainer-videos .videos {
		margin: 0 0 -30px -30px;
	}
	.explainer-videos .videos > div {
		width: calc(100% / 3 - 30px);
		margin: 0 0 30px 30px;
	}

	.quick-links > div {
		width: calc(100% / 1 - 40px);
		margin: 15px 0 0 40px;
		min-height: initial;
	}
}
@media screen and (max-width: 580px) {
	.full-blog-post .blog-image {
		width: 100%;
		max-height: 540px;
		padding: 0;
		margin: 0 auto;
		float: unset;
	}
	.blog-bottom .blog-post-author {
		float: left;
		clear: left;
		margin-top: 20px;
		display: flex;
	}
	.blog-bottom .blog-post-author > img {
		margin-left: 0;
		margin-right: 20px;
	}
	.blog-bottom .blog-post-author > div {
		text-align: left;
	}

	.explainer-videos .videos {
		margin: 0 0 -20px -20px;
	}
	.explainer-videos .videos > div {
		width: calc(100% / 2 - 20px);
		margin: 0 0 20px 20px;
	}
	.explainer-videos .videos > div:nth-child(3n+1) {
		clear: none;
	}
	.explainer-videos .videos > div:nth-child(2n+1) {
		clear: left;
	}

	.references > div {
		flex-flow: column;
		align-items: center;
	}
	.references > div > div {
		justify-content: center;
	}
	.references > div .left {
		width: auto;
	}
	.references > div .right {
		width: auto;
		padding-left: 0;
		margin-top: 40px;
	}
}
@media screen and (max-width: 480px) { /* phone */

	.col-2 > div {
		float: none;
		width: auto;
	}

	.price_options > div > p {
		font-size: 17px;
	}

	.cont form > div label {
		float: none;
		width: auto;
		padding: 0 0 7px 0;
	}
	.cont form input,
	.cont form select,
	.cont form textarea {
		width: 90%;
	}
	.cont form textarea {
		width: 90%;
	}
	.cont form button {
		margin: 0;
	}

	.submini {
		padding: 10px;
	}
}
@media screen and (max-width: 360px) { /* phone */
	.emo .slide > div > div i {
		font-size: 16px;
	}
	.emo .slide > div > div h1 {
		font-size: 32px;
	}

	.explainer-videos .videos > div {
		width: calc(100% / 1 - 20px);
	}
}