/*
 * Mobile styles (<= 699px; tablets from 700px get the desktop layout, see css/responsive-tablet.css) — split out of style.css.
 * Loaded right after style.css with media="(max-width: 699px)" (see sytech_enqueue_styles() in functions.php)
 * so desktop/tablet rendering does not wait for it. Keep this file last in the cascade.
 */
/* ============================================= */  
/*   MOBILE STYLES (merged from mobile.css)     */  
/* ============================================= */  
@media (max-width: 699px) {
	  section.hero > .content{
    display:flex;
    flex-direction:column; /* keep stacking */
  }

  section.hero .col3:first-child{
    order:2; /* text goes below */
  }

  section.hero .col3:last-child{
    order:1; /* video goes top */
  }
	header div.logo img {
		width: 86px;
	}

	#clear-search {
		margin-left: 1rem;
	}

	.page-template-simplepage .content {
		padding: 0 1rem;
	}

	.page-template-simplepage section.content p,
	.page-template-simplepage section.content li {
		font-size: 1rem;
		line-height: 2rem;
	}

	header div.logo {
		margin-top: 0.4rem;
	}

	.content {
		width: 100%;
	}

	.home section.slider .content>div.flex:last-child {
		transform: translateY(0);
	}

	.modalvideo>div {
		position: absolute;
		width: 90vw;
		height: auto;
		top: -100%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		transition: all 0.3s ease;
	}

	header {
		line-height: initial;
	}

	button.play_video {
		padding: 0rem 1.5rem 0rem 3rem;
		top: -1px;
		line-height: 2.5rem;
		font-size: 0.8rem;
	}

	.page .content_description figure .animation_container,
	.page .content_description figure canvas {
		width: 80% !important;
	}

	section.why_choose_us>div>ul li p {
		font-size: 0.8rem;
		line-height: 1.2rem;
	}

	.home_main_canvas {
		overflow: hidden;
	}

	.home_main_canvas video {
		transform: scale(1.1) translateX(3%);
	}

	button.play_video:hover:before {
		transform: scale(1);
	}

	section.hero .actions > * + * {
		margin-left: 0.5rem;
	}

	.hero div.search {
		width: 91%;
		padding: 0.8rem;
		border-radius: 2px;
	}

	.hero div.search form input[type="search"] {
		padding: 0 0 0 1.8rem;
		width: 75%;
		font-size: 12px;
	}

	.hero div.search form input[type="submit"] {
		font-size: 12px;
	}

	.hero div.search form input {
		border-radius: 2px;
		height: 2.4rem;
		line-height: 2.4rem;
		font-size: 12px;
	}

	.hero div.search form:before {
		width: 1rem;
		height: 1rem;
		left: 0.5rem;
		top: 0.7rem;
	}

	.onlymobile {
		display: block;
	}

	section.howitworks {
		max-width: 100%;
		overflow: hidden;
		padding: 0 1rem 0 1rem;
	}

	.home section.slider .swiper {
		width: 100%;
		height: 20.8rem;
		text-align: center;
	}

	header#navbar nav.active {
		visibility: visible;
	}

	header#navbar nav {
		visibility: hidden;
		position: fixed;
		top: 0;
		max-width: 100%;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 100;
		transition: background 0.3s ease;
	}

	header#navbar nav ul {
		padding-left: 0;
	}

	header#navbar nav ul li a {
		padding-left: 1.7rem;
	}

	header#navbar nav ul.sub-menu li a {
		padding: 10px;
	}

	header#navbar nav>div {
		background: #191f2b;
		position: absolute;
		width: 80%;
		padding-right: 20%;
		right: -100%;
		left: 100%;
		top: 0;
		bottom: 0;
		transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	header#navbar nav.active>div {
		right: -20%;
		left: 40%;
	}

	header#navbar nav>div>div {
		height: 3.6rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	header#navbar nav>div>div span.close {
		display: block;
		width: 0.7rem;
		height: 0.7rem;
		background: url('./img/close.svg') no-repeat center;
		background-size: contain;
		float: right;
		margin-top: 1.5rem;
		margin-right: 1rem;
	}

	header nav > div > ul > li:last-child {
		margin-left: 1.7rem;
	}

	header button {
		width: 75%;
		line-height: 1.5rem;
		border: 1px solid #fff;
		margin-top: 2rem;
	}

	header nav ul li.phone {
		margin-left: 3.2rem;
	}

	header nav ul li.phone:before {
		width: 1rem;
		height: 1rem;
		top: 1.3rem;
	}

	header nav ul li {
		display: block;
		width: 100%;
		line-height: 3.3rem;
		font-size: 0.9rem;
		font-weight: 100;
	}

	header {
		padding: 0.5rem 1rem;
		position: initial;
	}

	section.hero div.col3 {
		float: none;
	}
	section.hero div.col3:last-child,
	section.hero div.col3:first-child,
	.home section.hero div.col3:last-child {
		width: 100%!important;
		height: auto;
		text-align: center;
	}

	section.hero div.col3:first-child {
    width: calc(100% - 2rem) !important;
    margin: 0 1rem 4rem 1rem;
		text-align: center;
    background: rgba(55, 68, 86, 0.24);
    padding: 0.5rem 0.5rem 1.5rem 0.5rem;
	}
	.home section.hero div.col3:first-child {
    margin: 0 1rem 5rem 1rem;
	}
	.blog section.hero div.col3:first-child, .search-results section.hero div.col3:first-child {
    margin: 0 1rem 3rem 1rem;
	}
	body:not(.home) section.hero div.col3:last-child {
		padding: 0 2rem;
	}
	body:not(.home) section.hero div.col3.largeimg {
		padding: 0 3rem;
	}
	.page-template-template-pricing section.hero div.col3:first-child {
    margin: 0 1rem 3rem 1rem;
	}

	section.hero {
		height: auto!important;
		margin-bottom: 2rem!important;
	}

	section.hero h1,
	.home section.hero h1,
	.page section.hero h1,
	.blog section.hero h1,
	.search section.hero h1,
	.archive section.hero h1 {
		padding: 0;
		font-size: 1.6rem;
		margin-bottom: 0.4rem;
	}

	section.hero h1 span {
		font-size: 0.9rem;
		padding-top: 0.5rem;
	}

	section.hero p,
	.home section.hero p,
	.page section.hero p,
	.search section.hero p,
	.blog section.hero p,
	.archive section.hero p {
		max-width: 100%;
		letter-spacing: initial;
		font-size: 12px;
		line-height: 1.2rem;
	}

	section.hero .actions button,
	section.hero .actions a {
		font-size: 0.8rem;
		line-height: 2.4rem;
		padding: 0 2rem;
	}

	/* Secondary CTA: same padding as the primary one on phones (its desktop
	   rules in style.css are more specific than the rule above) */
	section.hero .actions .headbutton,
	section.hero.standard_page .actions a {
		padding: 0 2rem;
	}

	section.hero .actions .headbutton:hover {
		background: transparent;
		border-color: white;
	}

	section.hero p.actions {
		margin-top: 1.5rem;
	}

	section.hero .actions button::before,
	section.hero .actions a::before {
		display: none;
	}

	section.why_choose_us {
		clear: both;
	}

	section.why_choose_us>div {
		box-shadow: none;
		padding: 0 1rem;
	}

	section.why_choose_us>div ul li {
		width: 100%;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: none;
		margin-bottom: 0.7rem;
		padding: 1rem 1rem 1rem 4rem;
	}

	section.why_choose_us>div>ul li strong {
		font-size: 1rem;
		margin-bottom: 0.2rem;
	}

	.home p,
	.assets-details-content p {
		font-size: 12px;
		line-height: 1.2rem;
	}

	section.why_choose_us>div>ul li:before {
		width: 2.5rem;
		height: 2.5rem;
		left: 0.75rem;
		top: 1.2rem;
	}

	section.avantages ul li {
		width: 10rem;
		padding: 3.5rem 0.8rem 0.8rem;
		margin-right: 0.8rem;
		border-radius: 0;
	}

	section.avantages {
		width: 100%;
		overflow: auto;
	}

	.home section.avantages {
		margin: 1rem 0 3rem 0;
	}

	section.avantages ul {
		width: 66rem;
		overflow: scroll;
		padding: 1.5rem 1rem 0 1rem;
	}

	section.avantages ul li h3 {
		font-size: 0.8rem;
		margin-bottom: 0.2rem;
	}

	section.avantages ul li p {
		font-size: 12px;
		line-height: 1rem;
		letter-spacing: -1px;
	}

	section.avantages ul li:before {
		width: 2rem;
		height: 2rem;
		top: 1rem;
	}

	section.avantages ul li:nth-child(3) {
		margin-right: 0.8rem;
	}

	section.avantages ul li:last-child {
		margin-right: 0;
	}

	section.slider h3 {
		font-size: 1rem;
		padding: 1.8rem 0 1rem 0;
	}

	.home .swiper-button-next,
	.home .swiper-button-prev {
		width: 25px;
		height: 35px;
		top: 56%;
	}

	#pricelist .assets-details-content {
		transform: translate(-50%, -100%) !important;
		left: 50% !important;
		width: 92%;
	}

	#pricelist .assets-details-content:after {
		left: 39%;
		transform: translateX(0);
	}

	#pricelist .assets-details-content.right-question:after {
		opacity: 1;
		left: 90%;
	}

	section.assets .swiper-button-next,
	section.assets .swiper-button-prev {
		width: 45px;
		height: 60px;
	}

	section.assets .swiper-button-next {
		right: -4rem;
	}

	section.assets .swiper-button-prev,
	.home section.assets .swiper-button-next {
		top: 1.3rem;
	}

	.home section.slider .flex {
		display: block;
	}

	.home section.slider {
		padding: 3.5rem 1rem;
	}

	.home .skybackground p {
		line-height: 1.2rem;
	}

	.home section.slider .flexbox {
		width: 100%;
	}

	.home .slider h2 {
		font-size: 1.3rem;
	}

	.home section.slider .flexbox:first-child,
	.home section.slider .minihero {
		display: none;
	}

	.home section.slider .miniflexbox {
		padding: 0;
	}

	.home section.slider .miniflexbox p {
		font-size: 12px;
		line-height: 1.2rem;
	}

	section.slider a.btn {
		bottom: 4.5rem;
		width: 7rem;
		margin-left: -3.5rem;
		padding: 0.4rem 1.8rem 0.4rem 1rem;
		font-size: 0.7rem;
	}

	section.slider a.btn:before {
		width: 0.6rem;
		height: 0.6rem;
		right: 1.5rem;
		top: 0.65rem;
	}

	.home .swiper-horizontal>.swiper-pagination-bullets {
		bottom: 3.2rem;
	}

	section.inner {
		margin-top: 0;
		padding: 0 1rem;
	}

	section.pricing h2,
	.avantages_title h2,
	.page-template-template-services h2 {
		font-size: 1.3rem;
	}

	body section.pricing>p,
	.home p.subtitle,
	.page .pricing p.subtitle,
	.home section p.subtitle,
	.avantages_title p,
	.page-template-template-services p.subtitle {
		font-size: 0.8rem;
		max-width: 100%;
		line-height: 1.5rem;
		margin: 0.4rem auto 1rem auto;
	}

	section.pricing>div {
		width: 100%;
		border-radius: 0;
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	h3 span {
		top: 3px;
		transform: scale(0.7);
		right: -1.2rem;
	}

	section.howitworks div.collaboration_steps {
		background-image: url('./img/steps_mobile.svg');
		margin: 0rem 0 5rem 0;
		height: 27rem;
	}

	section.howitworks div.collaboration_steps p.icon {
		display: none;
	}

	section.howitworks div.collaboration_steps div:nth-child(1) {
		top: 0;
		left: 0;
		bottom: initial;
		right: initial;
	}

	section.howitworks div.collaboration_steps div:nth-child(2) {
		left: initial;
		right: 0;
		top: 7rem;
		bottom: initial;
	}

	section.howitworks div.collaboration_steps div:nth-child(3) {
		left: 0;
		right: initial;
		bottom: 7rem;
		top: initial;
	}

	section.howitworks div.collaboration_steps div:nth-child(4) {
		left: initial;
		right: 0;
		top: initial;
		bottom: 0;
	}

	section.howitworks div.collaboration_steps div {}

	section.howitworks h2,
	section.video_ab h2,
	section.article h2,
	.page div.lastarticle h2 {
		font-size: 1.3rem;
	}

	section.howitworks div.collaboration_steps div span {
		font-size: 2.5rem;
		color: #109dcb;
	}

	section.howitworks div.collaboration_steps div h3 {
		font-size: 0.9rem;
	}

	section.howitworks div.collaboration_steps div p {
		font-size: 0.65rem;
		letter-spacing: -1px;
	}

	section.howitworks div.collaboration_steps div p {
		line-height: 1.2rem;
	}

	section.hero.standard_page .col3 img {
		width: 100% !important;
		height: auto !important;
		margin: 0;
	}

	.page-id-407 section.hero.standard_page .col3 img {
		padding: 0 3rem;
	}

	.page-id-6971 section.hero.standard_page .col3 img {
		margin-left: 0.5rem;
		margin-top: 1.5rem;
		padding: 0 0.8rem;
	}

	.page-id-480 section.hero.standard_page .col3 img {
		margin-left: 1rem;
		padding: 0 3rem;
	}

	.page-id-463 section.hero.standard_page .col3 img {
		margin-left: 0rem;
		padding: 0 3.5rem;
		margin-top: 2rem;
	}

	.page-template-template-about section.hero.standard_page .col3 img {
		margin-left: -0.5rem;
		margin-bottom: -1rem;
		padding: 0 4rem;
	}

	/* same frame on every page (see style.css) */
	.page section.hero.standard_page .col3 img {
		margin: 0;
		padding: 4%;
	}

	section.aboutus .sunweb {
		width: 9rem;
		height: 5rem;
		top: 0;
		left: 0.5rem;
	}

	section.aboutus .skybackground {
		height: 38rem;
	}

	body section.price>p {
		margin-bottom: 2rem;
	}

	section.aboutus div.planetweb {
		width: 10rem;
		height: 10rem;
	}

	section.aboutus div.starsbottom {
		width: 100%;
		right: 0;
		left: 0;
		bottom: 0;
		height: 10rem;
	}

	section.aboutus div.starstop {
		height: 10rem;
	}

	section.aboutus div.skybackground h2 {
		font-size: 1.2rem;
		margin-top: 2.5rem;
	}

	section.aboutus div.textcontainer ul li img {
		width: 70px;
	}

	section.aboutus div.textcontainer {
		margin: 3rem auto;
		padding: 0 1rem;
	}

	section.aboutus div.textcontainer ul li {
		padding: 0.5rem 0 0.5rem 0.5rem;
		background: transparent;
	}

	section.aboutus div.textcontainer ul li strong,
	section.about_avantages ul li strong {
		font-size: 1.5rem;
	}

	section.aboutus div.textcontainer ul li strong span,
	section.about_avantages ul li strong span {
		font-size: 0.7rem;
	}

	section.about_avantages ul li:before {
		width: 3rem;
		height: 3rem;
		margin-left: -1.5rem;
	}

	section.about_avantages ul li {
		padding-top: 3.5rem;
	}

	section.aboutus div.textcontainer div.text {
		padding-top: 2rem;
		width: 100%;
		line-height: 1.3rem;
	}

	section.aboutus div.textcontainer div.text p {
		font-weight: 100;
	}

	section.aboutus #superatro {
		bottom: 5rem;
		right: 1rem;
		width: 7rem;
		height: 7rem;
	}

	section.aboutus div.textcontainer div.text a.btn {
		margin-top: 1rem;
		padding: 0.4rem 2.5rem 0.4rem 1.8rem;
		font-size: 0.8rem;
		line-height: 1.5rem;
	}

	section.aboutus div.textcontainer div.text a.btn:before,
	section.slider a.btn:before {
		top: 0.65rem;
		width: 0.8rem;
		height: 0.8rem;
		right: 1.3rem;
	}

	section.aboutus {
		margin-bottom: 2.5rem;
	}

	section.article section.content {
		padding: 1rem;
	}

	section.article article.post {
		width: 100%;
		display: flex;
		height: 8rem;
		border-radius: 3px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	}

	section.article article.post:hover div.featureimg {
		height: 100%;
	}

	section.article article.post div.featureimg,
	.home section.article article.post div.featureimg,
	.page-template-default section.article article.post div.featureimg,
	.page-template-template-about section.article article.post div.featureimg,
	.page-template-template-services section.article article.post div.featureimg {
		width: 40%;
		height: 100%;
	}

	section.article article.post div.excerpt {
		flex: 1;
		padding: 0.5rem 1rem;
	}

	section.article article.post p.category {
		font-size: 0.7rem;
	}

	article.post h3,
	article.post h2 {
		font-size: 0.9rem;
		margin-bottom: 0.2rem;
		text-overflow: ellipsis;
		overflow: hidden;
		max-height: 2.9rem;
		line-height: initial;
		min-height: unset;
		text-align: left;
	}

	section.article article p {
		font-size: 12px;
		line-height: 1.3rem;
	}

	section.article article.post:hover div.excerpt,
	section.article article.post div.excerpt {
		height: 9rem;
	}

	section.article article.post div.excerpt p.excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	section.article article a,
	section.article article:hover a {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 0;
		border: none;
		height: 100%;
		margin: 0;
		text-indent: -99999px;
	}

	body:not(.single-post) section.article,
	section.load_article {
		margin-bottom: 2rem;
		padding: 0 1rem;
	}

	.single-post section.article {
		margin-bottom: 3rem;
	}

	section.load_article {
		padding-top: 1rem;
	}

	button#load_more_post_home,
	button.load_more_post_ajax {
		padding: 0.5rem 2rem 0.5rem 2rem;
		font-size: 0.8rem;
		font-weight: 700;
		border-radius: 3px;
		position: relative;
		z-index: 10;
	}

	section.contactban {
		padding: 1rem 0;
		background-position-y: 2rem;
	}

	section.contactban p {
		font-size: 1rem;
		margin-bottom: 0.5rem;
		letter-spacing: -1px;
	}

	section.contactban div.joinus {
		background: url('./img/footer_cta_mobile.svg') no-repeat bottom center;
	}

	section.contactban button {
		margin-top: 0.5rem;
		color: white;
		font-size: 12px;
		line-height: 2rem;
	}

	footer {
		padding-top: 1rem;
	}

	footer div.content>div.head p {
		font-size: 0.9rem;
	}

	footer div.content>div.head img {
		width: 90px;
		left: 50%;
		margin-left: -45px;
	}

	footer div.content>div.head p {
		padding-top: 2.5rem;
	}

	footer div.content>div.head {
		border-bottom: none;
		padding-bottom: 0;
	}

	footer div.content>div {
		padding: 0;
	}

	footer div.content>div>ul>li,
	footer div.content>div>ul>li:last-child {
		width: 100%;
	}

	footer div.content>div p.footerTitle {
		background: rgba(53, 70, 90, 0.18);
		padding: 0.5rem 1rem;
		font-size: 1rem;
		font-weight: 400;
		position: relative;
		margin: 1rem 0;
		line-height: 2.4rem;
	}

	footer div.content>div p.footerTitle:before {
		content: "";
		position: absolute;
		width: 0.6rem;
		height: 0.6rem;
		background: url('./img/arrow_modern.svg') no-repeat center;
		background-size: contain;
		right: 1rem;
		top: 1.3rem;
		transition: all 0.3s ease;
	}

	footer div.content>div li.active p.footerTitle:before {
		transform: rotate(90deg);
	}

	footer a {
		font-size: 0.9rem;
	}

	footer ul li {
		line-height: 2rem;
	}

	footer ul li a {
		display: block;
		padding-left: 1rem;
	}

	footer div ul li:last-child p.footerTitle {
		background: transparent;
		padding: 0 1rem;
	}

	footer div ul li:last-child p.footerTitle:before {
		display: none;
	}

	footer div ul li:last-child ul {
		width: 60%;
		margin-left: 1rem;
	}

	footer div ul li:last-child ul li {
		font-size: 0.9rem;
	}

	footer ul ul li.icon:before {
		width: 1.1rem;
		height: 2.1rem;
	}

	footer li div {
		overflow: hidden;
	}

	footer li div ul {
		max-height: 0;
		margin: 0;
		transition: all 0.3s ease;
	}

	footer li.active div ul {
		max-height: 30rem;
	}

	footer div.content>div>ul>li:last-child img {
		bottom: 2rem;
		width: 8rem;
	}

	footer p.copyright {
		padding: 2.5rem 2rem 2rem;
		font-size: 0.7rem;
		opacity: 0.7;
		font-weight: 100;
	}

	footer p.copyright a {
		font-size: 0.7rem;
		opacity: 0.7;
		font-weight: 100;
	}

	nav.navbar.sticky {
		position: sticky;
		bottom: 0;
		height: 4.2rem;
		background: white;
		z-index: 99;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	}

	nav.navbar.sticky ul {
		list-style: none;
		height: 100%;
	}

	nav.navbar.sticky ul li {
		width: 20%;
		float: left;
		text-align: center;
		height: 100%;
		display: block;
	}

	nav.navbar.sticky ul li a,
	nav.navbar.sticky ul li span {
		display: block;
		height: 100%;
		width: 100%;
		font-size: 0.7rem;
		color: black;
		text-decoration: none;
		padding: 2.4rem 0 0;
		position: relative;
		text-align: center;
	}

	nav.navbar.sticky ul li a:before,
	nav.navbar.sticky ul li span:before {
		content: "";
		position: absolute;
		width: 1.8rem;
		height: 1.8rem;
		background: url('./img/sticky/home.svg') no-repeat center;
		background-size: contain;
		top: 0.6rem;
		left: 50%;
		margin-left: -0.9rem;
	}

	nav.navbar.sticky ul li.home.active a:before {
		background: url('./img/sticky/home_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.service a:before {
		background: url('./img/sticky/category.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.pricing a:before {
		background: url('./img/sticky/pricing.svg') no-repeat center;
		background-size: contain;
	}
	nav.navbar.sticky ul li.pricing.active a:before {
		background: url('./img/sticky/pricing_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.service.active a:before {
		background: url('./img/sticky/category_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.blog a:before {
		background: url('./img/sticky/blog.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.blog.active a:before {
		background: url('./img/sticky/blog_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.contact span:before {
		background: url('./img/sticky/phone.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.contact.active span:before {
		background: url('./img/sticky/contact_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.wechat span:before {
		background: url('./img/sticky/customer_service.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.wechat.active a:before {
		background: url('./img/sticky/home_active.svg') no-repeat center;
		background-size: contain;
	}

	nav.navbar.sticky ul li.launcher-btn span:before {
		background: url('./img/sticky/ai.svg') no-repeat center;
		background-size: contain;
	}

	div.avantages_title {
		text-align: center;
	}

	.home section.slider {
		margin: 1rem 0 3rem 0;
	}

	header button.hamburger {
		background: url('./img/menu.svg') no-repeat center;
		background-size: 65%;
		border: none;
		border-radius: 0;
		float: right;
		height: 2rem;
		width: 2rem;
		margin-top: 0.4rem;
		padding: 0.5rem;
		overflow: hidden;
		text-indent: -9999px;
	}

	section.topservice {
		padding: 1rem;
		width: 100%;
	}

	section.topservice>div {
		top: -4rem;
	}

	section.topservice ul li {
		width: 46%;
		padding-top: 4rem;
		margin-right: 8%;
	}

	section.topservice ul li:nth-child(2n) {
		margin-right: 0;
	}

	section.topservice ul li p {
		line-height: 1.3rem;
		font-size: 12px;
		padding: 0;
		color: #666666;
	}

	.archive section.article,
	.blog section.article,
	.search section.article {
		padding: 1rem;
	}

	.page-template-default div.description h2,
	div.head h2,
	div.heading h2 {
		font-size: 1.5rem;
	}

	.description div.heading {
		margin: 2.5rem 0;
	}

	.page .content_description {
		display: block;
		padding: 0 0 2rem 0;
	}

	.page .content_description figure {
		margin-bottom: 2rem;
	}

	.page .content_description.content2 {
		flex-direction: row;
	}

	section.description.about div.content_about {
		padding: 0 1rem;
	}

	div.main_services_about {
		padding: 0 0.5rem 2rem 0.5rem;
	}

	section.about {
		padding-top: 0;
	}

	section.description.about div.content_about>div {
		width: 100%;
		clear: both;
		margin: 1rem 0;
	}

	section.description.about div.content_about>div:nth-child(2) {
		text-align: center;
	}

	section.description.about div.content_about>div:nth-child(2) img {
		max-width: 320px;
		margin: 1rem auto;
	}

	.page-template-default div.description p.subtitle,
	div.heading p.subtitle {
		font-size: 0.8rem;
	}

	p.subtitle {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	section.about_avantages ul {
		margin: 0 1rem 1rem;
		padding: 1rem;
	}

	.about_avantages h2 {
		font-size: 1.1rem;
		padding-top: 2rem;
	}

	section.about_avantages {
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	.page-template-default div.description p,
	.page-template-template-services div.description p,
	.page-template-default div.description li,
	.page-template-template-services div.description li,
	div.head p,
	section.description.about div.content_about ul li,
	div.heading p.subtitle {
		font-size: 0.8rem;
		line-height: 1.5rem;
	}

	div.wp-block-spacer {
		display: none;
	}

	.page-template-template-about .article p.subtitle {
		margin-bottom: 2rem;
		font-size: 0.8rem;
		margin-top: 0.3rem;
	}

	div.description ul {
		padding-left: 2rem;
	}

	div.tabs div.tabs__bar div {
		margin-right: 2rem;
		padding-bottom: 1rem;
	}

	div.tabs div.tabs__bar div:nth-child(2) {
		margin-right: 0;
	}

	.page-template-default div.description ul li {
		margin-bottom: 1rem;
	}

	.bluedote li:before,
	.yellow_star li:before {
		width: 0.5rem;
		height: 0.5rem;
		left: -1.2rem;
	}

	.about .yellow_star li:before {
		left: -0.2rem;
	}

	div.tabs__controls {
		font-size: 0.9rem;
	}

	section.tabscontainer {
		background: linear-gradient(to left, #191f2b, #191f2b) no-repeat 0 2.4rem;
		margin-bottom: 3rem;
	}

	div.tabs section.tabactive {
		padding: 2rem 0;
		width: 100%;
	}

	div.tabs {
		width: 100%;
	}

	section.tabactive div.tabs__section {
		padding: 0 1rem;
	}

	div.tab_ovni {
		width: 6rem;
		height: 3rem;
		top: 4.5rem;
		right: 1rem;
		z-index: 10;
	}

	div.tabs__section div h2 {
		margin: 0 0 0.5rem 0;
		font-size: 1.1rem;
	}

	div.tabs__section div p {
		font-size: 12px;
		line-height: 1.3rem;
		margin-bottom: 0.5rem;
	}

	section.tabactive div.tabs__section section.tabs {
		padding: 1.3rem 1rem;
		min-height: 20rem;
	}

	div.tabs__section div.mascot {
		width: 8rem;
		height: 8rem;
		right: 1rem;
		bottom: -2rem;
	}

	section.topservice ul li span {
		width: 2.6rem;
		height: 2.6rem;
		margin-left: -1.3rem;
		top: 0.6rem;
	}

	div.tabs section.tabactive {
		height: 26.8rem;
	}

	div.tab_stars {
		width: 5rem;
		height: 2rem;
	}

	div.description p.subtitle {
		margin-bottom: 2rem;
	}

	.bluedote li:before,
	.yellow_star li:before {
		width: 0.7rem;
		height: 0.7rem;
	}

	.single article#main,
	.single section.sidebar {
		width: 100%;
		padding: 0 1rem;
	}

	.single article#main h1 {
		font-size: 1.5rem;
	}

	.single div.breadcrumb {
		margin-bottom: 0.9rem;
	}

	.single div.breadcrumb span {
		font-size: 12px;
	}

	.single header#navbar {
		margin-bottom: 1rem;
	}

	section.article article figure,
	.meta_article figure {
		width: 2.2rem;
		height: 2.2rem;
		line-height: 2.2rem;
	}

	div.meta_article div.author p {
		font-size: 0.8rem;
		line-height: 2.2rem;
	}

	.single div.meta_article {
		margin: 1rem 0;
	}

	.single div.meta_article div.date {
		line-height: 2.2rem;
		font-size: 0.8rem;
		flex: 1;
	}

	.single div.meta_article div.author {
		flex: 2;
	}

	section.article div.author,
	.meta_article div.author {
		line-height: 2.2rem;
		margin-top: 3rem;
	}

	.single article img {
		border-radius: 5px;
		margin-bottom: 1rem;
	}

	#main div.description p,
	#main div.description li {
		font-size: 0.85rem;
		line-height: 1.6rem;
		text-indent: initial;
	}

	#main div.description h2,
	.single #main div.description .syindex_block p.syindex_title {
		font-size: 1.4rem;
	}

	#main div.description h3 {
		font-size: 1.15rem;
	}

	#main div.description h4 {
		font-size: 0.95rem;
	}

	#main div.description ul {
		margin-left: 0;
		padding-left: 1.2rem;
	}

	.bluedote li:before,
	.yellow_star li:before,
	#main div.description ul li:before {
		left: -1rem;
	}

	body #main div.description ul li:before {
		top: 0.5rem;
	}

	section.article div.lastarticle article.post {
		width: 100%;
	}

	section.article div.lastarticle article.post:first-child {
		margin-right: 0;
	}

	#main div.description p,
	#main div.description li {
		font-size: 0.8rem;
	}

	#main div.article-copyright p:before {
		left: -1rem;
		top: -1.5rem;
		height: 4rem;
		width: 3rem;
	}

	#main div.article-copyright {
		margin: 3rem 0 2rem 0;
		line-height: 3rem;
	}

	div.author_box div p.bio {
		font-size: 0.8rem;
		line-height: 1.5rem;
	}

	section.popcontact.active div.contact-content {
		top: auto;
		bottom: -5rem;
		margin-top: initial;
	}

	section.popcontact div.contact-content {
		margin-left: 0;
		left: 0;
		width: 100%;
		top: auto;
		height: 27rem;
		bottom: -100%;
	}

	div.contact-content div.contactwechat,
	div.contact-content div.contactphone {
		padding: 2rem 1rem;
	}

	div.contact-content div.contactwechat div.contact img:first-child {
		width: 130px;
		height: 130px;
	}

	div.contact-content div.contactwechat div.contact img.astrocomput {
		width: 100px;
		height: auto;
	}

	section.popcontact div.contact-content button {
		bottom: 5rem;
	}

	div.contact-content div.contactwechat p strong,
	div.contact-content div.contactphone p strong {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}

	section.popcontact div.contact-content div.contactphone div.contact span.address {
		font-size: 1rem;
	}

	header li a {
		display: block;
	}

	section.topservice ul li h3,
	section.topservice ul li strong {
		font-size: 0.95rem;
	}

	.archive .terms .terms-content,
	.blog .terms .terms-content {
		overflow: auto;
		margin-top: 30px;
		padding-bottom: 1rem;
	}

	.archive .terms .terms-content ul li,
	.blog .terms .terms-content ul li {
		margin: 0;
		font-size: 14px;
		padding: 8px 15px;
	}

	.archive .terms .terms-content::-webkit-scrollbar,
	.blog .terms .terms-content::-webkit-scrollbar {
		width: 0;
		background: transparent;
	}

	.archive .terms .terms-content ul,
	.blog .terms .terms-content ul {
		width: 650px;
		justify-content: space-between;
		padding: 0 1.2rem;
	}

	.archive section.terms,
	.blog section.terms {
		padding-top: 0;
	}

	.search .results ul li {
		display: flex;
		vertical-align: middle;
		align-items: center;
		font-size: 14px;
	}

	.search .results ul li a {
		line-height: 20px;
		vertical-align: middle;
	}

	button#load_more_post_home:hover {
		color: white;
		background: #23262b;
	}

	.home section.assets .swiper-button-prev,
	.home section.assets .swiper-button-next {
		display: none;
	}

	section.assets.content {
		padding: 0;
	}

	section.assets div.swiper-slide span.icon {
		width: 1.5rem;
		height: 1.5rem;
		top: 0.5rem;
		left: 0rem;
		top: 50%;
		transform: translateY(-50%);
	}

	section.assets div.swiper-slide {
		height: auto;
		border: 0;
		padding: 0.7rem 1rem 0.7rem 2rem;
	}

	section.assets div.swiper-slide p.title {
		font-size: 0.85rem;
	}

	section.assets div.info {
		top: 0.6rem;
		right: 0.5rem;
		top: 50%;
		transform: translateY(-50%);
		width: 1.2rem;
		height: 1.2rem;
	}

	section.assets {
		height: 5rem;
		margin-bottom: 0;
	}

	section.assets .swiper-wrapper {
		align-items: flex-start;
	}

	body.single div.blockquote div.quoteimage {
		margin-left: 1.5rem;
	}

	body.single div.blockquote {
		padding: 1rem;
		margin-top: 3rem;
	}

	#main div.blockquote h2,
	#main div.blockquote h3,
	#main div.blockquote h4 {
		font-size: 1rem;
		margin-bottom: 0.2rem;
	}

	section.services {
		transform: translateY(-5rem);
	}

	section.services ul {
		padding: 1rem 1rem 0 1rem;
		height: 26rem;
	}

	section.services ul li {
		flex: 33.33%;
		height: 33.33%;
	}

	section.services ul li div {
		padding: 1rem 0.1rem;
	}

	section.services a strong {
		font-size: 0.8rem;
		margin-bottom: 0.2rem;
	}

	section.services ul li img {
		width: 36%;
		margin-left: 0.5rem;
	}

	section.services ul li:nth-child(8) {
		width: auto;
		flex: 66.6%;
	}

	section.services ul li a.mg div:first-child:before {
		bottom: -1.4rem;
		transform: translateX(-50%);
	}

	section.services ul li:nth-child(8) p {
		text-align: center;
		letter-spacing: -1px;
	}

	section.services ul li:nth-child(8) a>div {
		padding: 1rem 0.4rem;
	}

	section.services ul li div:first-child:before {
		width: 5rem;
		height: 4rem;
		bottom: -0.5rem;
	}

	section.services ul li:nth-child(9) a>div {
		padding: 1.6rem;
	}

	section.services ul li:nth-child(5) {
		border-right: none;
	}

	section.services ul li:nth-child(3),
	section.services ul li:nth-child(6),
	section.services ul li:nth-child(8) {
		border-right: 1px solid #f1f1f1;
	}

	section.services ul li:nth-child(6) {
		border-bottom: none;
		flex: 33.33%;
		width: auto;
	}

	section.services ul li a {
		overflow: hidden;
		display: block;
		height: 100%;
	}

	section.services ul li div div {
		padding: 0;
	}

	section.services ul li div div:first-child {
		width: 100%;
	}

	section.services ul li div div:nth-child(2) {
		display: none;
	}

	section.services ul li:nth-child(7),
	section.services ul li:nth-child(8) {
		border-bottom: 1px solid #f1f1f1;
	}

	section.services ul li:nth-child(9) {
		border-top: 0;
	}

	ul.pricelist>li {
		width: 100%;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	}

	.mcpricing ul.pricelist>li:last-of-type {
		margin-bottom: 2.5rem;
	}

	ul.pricelist>li ul {
		width: 100%;
	}

	#main div.article-copyright p {
		padding-left: 3rem;
		padding-right: 2rem;
		padding-top: 0.5rem;
	}

	ul.pricelist>li ul li {
		font-size: 0.9rem;
		padding: 0 1.5rem 0 2.5rem;
	}

	ul.pricelist>li ul li span {
		font-size: 12px;
		line-height: 22px;
		padding: 0 10px;
		margin-left: 8px;
		border-radius: 4px;
	}

	ul.pricelist>li ul li:before {
		width: 1.8rem;
		height: 1.8rem;
		top: 1.1rem;
	}

	ul.pricelist>li.active:before {
		opacity: 0;
	}

	ul.pricelist>li.active button {
		background: #252d3d;
		border-color: #252d3d;
	}

	ul.pricelist button {
		font-size: 0.9rem;
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 0.6rem 3rem 0.6rem 3rem;
	}

	ul.pricelist>li .animation_container,
	ul.pricelist>li .animation_container canvas {
		width: 100% !important;
		border-top-right-radius: 10px;
		border-top-left-radius: 10px;
		height: auto !important;
	}

	.mcpricing ul.pricelist>li .animation_container,
	.mcpricing ul.pricelist>li .animation_container canvas {
		width: 134% !important;
		height: unset !important;
	}

	.mcpricing ul.pricelist>li .animation_container {
		width: 100% !important;
	}

	.mcpricing ul.pricelist>li.fighting .animation_container canvas {
		width: 100% !important;
		border-top-right-radius: 8px;
	}

	ul.pricelist h3 {
		margin-top: 0rem;
	}

	ul.pricelist>li .animation_container {
		margin-bottom: 0rem !important;
	}

	ul.pricelist>li img {
		/* display: none!important; */
		display: block;
	}

	ul.pricelist>li.active img {
		display: block !important;

	}

	ul.pricelist>li.active .animation_container {
		display: none !important;
	}

	ul.pricelist>li:before {
		display: none;
	}

	.mc-btns span {
		font-size: 0.9rem;
		min-width: unset;
		padding: 0.5rem 1rem;
		line-height: 25px;
		margin: 2rem 0.5rem;
		margin-top: 0;
	}

	div.description ul.pricelist {
		padding-left: 0;
	}

	.mcpricing {
		padding: 0 1rem;
	}

	.pricelist>li {
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		margin-bottom: 2.5rem;
	}

	.description .mcpricing .pricelist>li.fighting {
		margin-top: 3rem;
	}

	.pricelist ul {
		padding: 0 1rem;
	}

	.bluedote li:before,
	.yellow_star li:before,
	#main div.description ul li:before {
		top: 0.4rem;
	}

	.page-template-template-about .animation_container,
	.page-template-template-about .animation_container .canvas {
		width: 100% !important;
		height: auto !important;
		position: relative;
		overflow: hidden !important;
	}

	.p3 {
		padding: 1.5rem;
	}

	.page-id-407 section.hero.standard_page .col3 img {
		margin-left: 1rem;
		margin-top: -1rem;
		padding: 0.8rem;
	}

	.archive.category-4 .animation_container .canvas {
		margin-left: 0.5rem;
	}

	.blog .animation_container,
	.blog .animation_container canvas,
	.archive .animation_container,
	.archive .animation_container canvas,
	.search .animation_container,
	.search .animation_container canvas {
		width: 100% !important;
		height: auto !important;
		padding: 0;
		overflow: hidden;
	}

	section.services ul li.hover:hover a>div:first-child,
	section.services ul li.hover:hover a>div:last-child {
		top: 0;
	}


	.page-template-default div.description p.price {
		font-size: 2rem;
	}

	.blog .animation_container .canvas,
	.archive .animation_container .canvas,
	.search .animation_container .canvas {
		margin-left: 2rem;
	}

	.home section.article article.post,
	.page-template-default section.article article.post,
	.page-template-template-about section.article article.post,
	.page-template-template-services section.article article.post {
		height: 8rem;
	}

	/* One side gutter only (the wrapper's), as on the blog list: on the home and
	   service pages section.inner and section.article each added 1rem */
	body .content>section.article,
	body section.inner>section.article {
		padding-left: 0;
		padding-right: 0;
	}

	.services .image_svg svg {
		transform: scale(.7);
		margin-top: -1.2rem;
		margin-left: -11px;
	}

	.services .mg .image_svg svg {
		margin-left: 0;
	}

	.services .facebook .image_svg svg {
		margin-left: 2px;
	}

	.services .google .image_svg svg {
		margin-left: 0;
		margin-top: -2rem;
	}

	section.services ul li:nth-child(8) svg {
		transform: scale(0.6);
		min-width: unset !important;
		position: absolute;
		right: -21px;
		top: -5px;
	}

	section.services ul li div.google_customer {
		width: 58% !important;
	}

	.popform .formcontent {
		width: 100%;
		padding: 4rem 1.4rem;
		padding-bottom: 1rem;
		top: 100%;
		height: 90%;
		left: 0;
		right: 0;
		transform: initial;
		transition: top visibility 0.2s ease;
		max-width: unset;
		box-sizing: border-box;
	}

	body .popform.active .formcontent {
		top: 10%;
		border-radius: 0;
		overflow: auto;
	}

	.popform .formcontent .step {
		padding-bottom: 2rem;
		height: auto;
	}

	.formcontent ul li {
		font-size: 1rem;
		padding: 0.9rem;
		padding-left: 2.8rem;
		transition: none;
	}

	.formcontent ul li:before {
		width: 1.2rem;
		height: 1.2rem;
		left: 1rem;
		top: 1rem;

	}

	.formcontent ul li:after {
		width: 1.5rem;
		height: 1.5rem;
		left: 1.1rem;
		top: 0.8rem;
		transition: none;
	}

	.formcontent div.input {
		padding: 0.6rem 0.9rem;
	}

	.formcontent div.input label {
		font-size: 1rem;
	}

	div.input input::placeholder {
		font-size: 0.9rem;
	}

	div.input input {
		font-size: 0.9rem;
	}

	.formcontent div.input input {
		line-height: 2rem;
		height: 2rem;
	}

	.formcontent button {
		font-size: 1rem;
		padding: 0.9rem;
	}

	.formcontent .actions {
		margin-top: 1rem;
		display: flex;
		justify-content: space-between;
	}

	.formcontent div.input {
		border: 2px solid #f6f6f6;
	}

	.formcontent ul li.active {
		border: 2px solid #32bee9;
	}

	.formcontent ul li {
		border: 2px solid #f6f6f6;
	}

	.formcontent h2 {
		font-size: 1.5rem;
	}

	.formcontent p,
	.formcontent .step2 p,
	.formcontent .step3 p {
		font-size: 1rem !important;
		line-height: 1.6rem;
		padding: 0 1rem;
	}

	.popform .astromobile {
		position: initial;
		width: 10rem;
		transform: translateX(1.2rem);
	}

	.formcontent .contact button {
		padding: 0.8rem 2.5rem;
	}

	.close-form-pop {
		position: absolute;
		top: 1rem;
		right: 1rem;
		display: inline-block;
		width: 1.5rem;
		height: 1.5rem;
		background: url('./img/close.svg') no-repeat center/50%;
		background-color: #ccc;
		border-radius: 50%;
		z-index: 99999;
	}

	.popform {
		transition: none;
	}

	.popform .astromobile {
		left: 0;
		bottom: 0;
		transform: translate(0, 0);
		width: 10rem;
	}

	.step.step3 {
		padding: 0;
	}

	figure figcaption {
		font-size: 0.8rem;
	}

	#main div.description .syindex_block ul li {
		line-height: 1.6rem;
	}

	div.syindex_block {
		padding: 0.9rem;
	}

	div.syindex_block ul {
		margin-bottom: 0.4rem;
	}

	section.video_ab {
		padding: 0 1rem 2rem 1rem;
	}


	.page .content_description figure img,
	.page .content_description figure video {
		max-width: 320px;
		display: block;
		margin: 0 auto;
	}

	.casesgallery {
		margin: 80px 0;
		padding: 60px 0;
	}

	.casesgallery h2 {
		font-size: 1.3rem;
	}

	.home .casesgallery p.subtitle {
		margin-top: .4rem;
		padding: 0;
		width: 90%;
	}

	.casesgallery .swipercontent {
		padding: 0 16px;
	}

	.casesgallery .svg1 {
		top: 60px;
		right: 10px;
	}

	.casesgallery .svg2 {
		left: 0;
		bottom: -70px;
	}

	.casesswiper {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

	.casesswiper .caseitem .casesbtn {
		font-size: 15px;
		width: 80px;
		height: 80px;
		gap: 6px;
		right: 15px;
		bottom: 30px;
	}

	.casesswiper .caseitem .casesbtn::after {
		width: 1rem;
		height: 1rem;
	}

	.casesswiper .caseitem .casename {
		font-size: 16px;
		margin-top: 20px;
	}

	.casesgallery .controls {
		margin-top: 50px;
		padding: 0 15px;
	}

	.casesgallery a.btn {
		padding: 0.4rem 2.5rem 0.4rem 1.8rem;
		font-size: 0.8rem;
		line-height: 1.5rem;
	}

	.casesgallery a.btn::before {
		top: 0.7rem;
		width: 0.8rem;
		height: 0.8rem;
		right: 1.3rem;
	}

	.content .head {
		padding: 0 1rem;
	}

	.service_pricing.web ul.pricelist {
		padding: 0 1rem;
	}

	.service_faq {
		margin-bottom: 3rem;
	}

	.head2 {
		margin: 2rem auto;
	}

	.page-template-template-services section p.subtitle {
		margin-bottom: 2rem;
	}

	.page section.pricing {
		margin-bottom: 2rem !important;
	}

	nav .icon {
		display: none;
	}

	nav .sub-menu {
		transition: none;
		display: none;
		width: 100%;
		padding: 0;
		margin-bottom: 8px;
		border-radius: 6px;
		background-color: rgba(0, 0, 0, 0.15);
	}

	#navbar nav .sub-menu {
		padding-left: 0;
	}

	nav .sub-menu a {
		font-size: 12px;
		line-height: normal;
		border-radius: 5px;
	}

	nav .sub-menu li + li {
		margin-top: 2px;
	}

	nav .menu-item-has-children {
		padding-right: 40px;
		position: relative;
		padding-left: 1.7rem;
	}

	nav .menu-item-has-children::after {
		content: '';
		display: block;
		width: 0.8rem;
		height: 0.8rem;
		transition: all .3s;
		background: url(./img/select.svg) no-repeat center/contain;
		position: absolute;
		right: 14px;
		top: 20px;
		transform: scale(0.8);
		filter: contrast(0) brightness(2);
	}

	nav .menu-item-has-children.active::after {
		transform: scale(0.8) rotate(180deg);
	}

	nav .menu-item-has-children li {
		margin: 0;
		float: none;
	}
}

@media screen and (min-width: 640px) and (max-width: 699px) {
	.page section.hero .actions {
		justify-content: center;
	}

	section.services ul li:nth-child(8) a>div svg {
		zoom: 1;
	}

	section.assets div.swiper-slide p.title {
		transform: translate(0);
	}

	footer div.content>div>ul>li {
		padding-right: 0;
	}

	.casesgallery {
		padding: 80px 0;
	}

	.casesswiper {
		width: 100%;
	}

	.casesgallery .svg1 {
		top: -20px;
	}

	.casesgallery .svg2 {
		bottom: -100px;
	}
}