@media screen and (max-width: 1770px) {
	.header-holder {
		width: 1600px;
		}
	}

@media screen and (max-width: 1690px) {
	.header-holder {
		width: 1500px;
		}

	h1 {
		font-size: 90px;
		letter-spacing: -5px;
		}

	.card {
		width: 390px;
		}

	.card p {
		font-size: 78px;
		}

	.card span {
		font-size: 21px;
		}

	.tab h2 {
		font-size: 62px;
		}
	}

@media screen and (max-width: 1570px) {
	.header-holder {
		width: 1400px;
		}

	.banner:before {
		top: -28px;
		}

	#arrow-down {
		width: 80px;
		height: 80px;
		margin-left: -40px;
		top: -40px;
		}
	}

@media screen and (max-width: 1530px) {
	.holder {
		width: 1140px;
		}

	#cover .holder.align {
		margin-left: -570px;
		}
	}

@media screen and (max-width: 1470px) {
	.header-holder {
		width: 1300px;
		}

	.holder {
		width: 1050px;
		}

	#cover .holder.align {
		margin-left: -525px;
		}

	h1 {
		width: 640px;
		font-size: 82px;
		}

	#cover {
		height: 650px;
		}

	#cover .holder {
		top: 190px;
		}

	#cover p {
		width: 490px;
		font-size: 18px;
		line-height: 175%;
		letter-spacing: -0.2px;
		}

	.squares {
		height: 680px;
		}

	.card {
		width: 370px;
		height: 390px;
		}

	.card p {
		font-size: 74px;
		}

	.calling {
		display: none;
		}

/*	.calling {
		width: 360px;
		}

	.calling-logo {
		margin-bottom: 14px;
		}

	.calling span {
		width: 100%;
		font-size: 17px;
		}*/

	.form.top {
		margin-top: -400px;
		}

	.form.top #contact-form {
		width: 460px;
		}

	#contact-form {
		padding: 30px 30px 10px 30px;
		}

	#notification {
		padding-bottom: 20px;
		}
	}

@media screen and (max-width: 1390px) {
	.header-holder {
		width: 1200px;
		}

	.banner:before {
		top: -27px;
		}
	}

@media screen and (max-width: 1340px) {
	.holder {
		width: 1000px;
		}

	#cover .holder.align {
		margin-left: -500px;
		}

	h1 {
		width: 600px;
		font-size: 78px;
		}

	#cover p {
		font-size: 17px;
		}

	.card {
		width: 360px;
		height: 360px;
		top: -320px;
		}

	.card-holder {
		margin: 50px auto;
		}

	.card p {
		font-size: 74px;
		margin-bottom: 10px;
		}
	}

@media screen and (max-width: 1270px) {
	.banner:before {
		top: -26px;
		}

	}

@media screen and (max-width: 1260px) {
	.header-holder {
		width: 1100px;
		}

	#menu li {
		margin-right: 36px;
		}

	#menu li a {
		font-size: 18px;
		}

	#cover {
		height: 600px;
		}

	#cover .holder {
		top: 180px;
		}

	.holder {
		width: 900px;
		}

	#cover .holder.align {
		margin-left: -450px;
		}

	.sub-title {
		font-size: 19px;
		margin-top: -30px;
		}

	h1 {
		width: 540px;
		font-size: 70px;
		}

	#cover p {
		width: 440px;
		margin-top: 20px;
		}

	.squares {
		height: 660px;
		}

	.square {
		width: 620px;
		height: 620px;
		margin-right: -380px;
		}

	#arrow-down {
		width: 74px;
		height: 74px;
		margin-left: -37px;
		top: -37px;
		}

	.tab span {
		font-size: 19px;
		letter-spacing: -0.6px;
		}

	.tab h2 {
		font-size: 54px;
		}

	.form.top #contact-form {
		width: 410px;
		}

	.contact-holder span {
		font-size: 19px;
		}

	.contact-holder input, .contact-holder textarea {
		padding: 10px 14px;
		}

	#submit {
		padding: 19px 28px;
		}
	}

@media screen and (max-width: 1160px) {
	.header-holder {
		width: 1000px;
		top: 50px;
		}

	#menu li {
		margin-right: 25px;
		}

	.holder {
		width: 860px;
		}

	#cover .holder.align {
		margin-left: -430px;
		}

	#cover p {
		width: 420px;
		}

	.banner:before {
		top: -25px;
		}

	.form.top {
		margin-top: -360px;
		}

	.form.top #contact-form {
		width: 370px;
		}
	}

@media screen and (max-width: 1070px) {
	.header-holder {
		width: 960px;
		}

	.contact {
		padding: 12px 22px;
		}

	.holder {
		width: 800px;
		}

	#cover {
		height: 570px;
		}

	#cover .holder.align {
		margin-left: -400px;
		}

	#cover .holder {
		top: 160px;
		}

	.squares {
		height: 640px;
		}

	.card {
		width: 270px;
		height: 270px;
		top: -200px;
		}

	.card:before {
		width: 50px;
		height: 50px;
		margin-left: -25px;
		top: -25px;
		}

	.card p {
		font-size: 44px;
		}

	.card span {
		font-size: 17px;
		}

	.button {
		font-size: 16px;
		margin-top: 20px;
		}

	.tab span {
		font-size: 17px;
		letter-spacing: -0.2px;
		}

	.tab h2 {
		font-size: 46px;
		}

	.tab p {
		font-size: 16px;
		letter-spacing: 0;
		}

	#contact-form {
		padding: 24px;
		}
	}

@media screen and (max-width: 1000px) {
	.header-holder {
		width: 900px;
		}

	#logo {
		width: 190px;
		height: 46px;
		}

	#menu li a {
		font-size: 16px;
		}

	#cover {
		height: 540px;
		}

	#cover .holder {
		top: 150px;
		}

	.sub-title {
		font-size: 18px;
		margin-top: -20px;
		margin-bottom: 7px;
		}

	h1 {
		font-size: 64px;
		}

	#cover p {
		font-size: 16px;
		}

	.squares {
		height: 630px;
		}

	.banner:before {
		top: -24px;
		}

	#contact-form {
		padding: 30px;
		}

	.form.top {
		width: 100%;
		float: left;
		margin-top: 100px;
		}

	.form.top #contact-form {
		width: 80%;
		position: relative;
		left: 10%;
		}
	}

@media screen and (max-width: 920px) {
	.header-holder {
		width: 800px;
		}

	#menu li {
		margin-right: 20px;
		}

	.holder {
		width: 690px;
		}

	#cover .holder.align {
		margin-left: -345px;
		}

	h1 {
		width: 480px;
		}

	#cover p {
		width: 380px;
		font-size: 15px;
		}

	.button {
		font-size: 16px;
		padding: 16px 24px;
		}
	}

@media screen and (max-width: 880px) {
	.banner:before {
		top: -23px;
		}
	}

@media screen and (max-width: 840px) {
	#header {
		height: 80px;
		}

	.header-holder {
		width: 88%;
		}

	#logo {
		width: 170px;
		height: 41px;
		}

	#logo.black {
		background: url(../img/sonoinspec-logo.svg);
		}

	#header.fixed #logo {
		margin-top: -5px;
		}

	#menu {
		width: 90%;
		display: none;
		margin-top: 100px;
		}

	#menu.visible {
		display: inline-block;
		}

	#menu li {
		display: block;
		overflow: hidden;
		margin-bottom: 30px;
		}

	#menu li a {
		position: relative;
		font-size: 24px;
		color: #000;
		letter-spacing: -0.8px;
		top: 35px;

		transition: top .8s ease;
		}

	#menu li.show a {
		top: 35px;
		}

	#menu li.mobile-show a {
		top: 0;
		}

	.contact {
		background: none;
		padding: 0;
		}

	#header.fixed #menu li a.contact {
		color: #000;
		}

	.contact:hover {
		background: none;
		}

	#mobile-menu {
		width: 52px;
		height: 52px;
		position: fixed;
		border-radius: 99px;
		top: 30px; right: 5%;

		transition: transform .4s ease;
		}

	#header.fixed #mobile-menu {
		top: 14px;
		}

	#mobile-menu.show-1 {
		transform: scale(1.05);
		}

	#mobile-menu.show-2 {
		transform: scale(0.98);
		}

	#mobile-menu.show {
		transform: scale(1);
		}

	#mobile-menu-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(15px);
		box-sizing: border-box;
		border-radius: 99px;
		top: 0; left: 0;
		}

	#header.fixed #mobile-menu-bg {
		border: 1px solid transparent;
		}

	#mobile-menu.black #mobile-menu-bg {
		border: 1px solid rgba(0, 0, 0, 0.9);
		}

	#header.fixed #mobile-menu.black #mobile-menu-bg {
		border: 1px solid transparent;
		}

	#mobile-lines {
		width: 22px;
		position: absolute;
		z-index: 2;
		margin-top: -17px;
		margin-left: -11px;
		top: 50%; left: 50%;
		}

	#mobile-menu .line {
		width: 22px;
		height: 2px;
		position: absolute;
		background: #fff;
		border-radius: 99px;
		margin-top: 7px;

		transform: rotate(0deg);
		transition: width .3s ease, top .3s ease, transform .3s ease;
		}

	#header.fixed #mobile-menu .line {
		width: 29px;
		background: #000;
		}

	#mobile-menu.black .line {
		background: #000;
		}

	#mobile-menu .line.two {
		top: 8px;
		}

	#mobile-menu .line.three {
		top: 16px;
		}

	#mobile-menu.open .line.one {
		top: 9px;
		transform: rotate(-45deg);
		}

	#mobile-menu.open .line.two, #header.fixed #mobile-menu.open .line.two {
		width: 0;
		}

	#mobile-menu.open .line.three {
		top: 9px;
		transform: rotate(45deg);
		}

	#menu-bg {
		width: 100%;
		height: 100%;
		position: fixed;
		background: #fff;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(6px);
		display: none;
		opacity: 0;
		z-index: 2;
		top: 0; left: 0;

		transition: opacity .4s ease;
		}

	#menu-bg.visible {
		display: block;
		}

	#menu-bg.show {
		opacity: 1;
		}
	}

@media screen and (max-width: 765px) {
	#call {
		display: none;
		}

	.holder {
		width: 88%;
		}

	.sub-title {
		font-size: 17px;
		margin-top: 0;
		}

	h1 {
		width: 100%;
		font-size: 58px;
		}

	#cover {
		height: auto;
		}

	#cover .holder {
		padding: 140px 0 90px 0;
		top: 0;
		}

	#cover .holder.align {
		position: relative;
		margin: 0 auto;
		top: 0; left: 0;

		transform: none;
		}

	#cover p {
		width: 100%;
		font-size: 17px;
		max-width: 380px;
		}

	.squares {
		width: 300px;
		opacity: 0.7;
		margin-top: -280px;
		}

	.square {
		width: 540px;
		height: 540px;
		margin-right: -500px;
		}

	.square.two {
		margin-right: -550px;
		}

	.banner:before {
		top: -22px;
		}

	#arrow-down.left {
		top: -45px;
		}

	.block {
		margin-bottom: 0;
		}

	.card {
		width: 90%;
		height: auto;
		position: relative;
		border: 1px solid #72c448;
		display: inline-block;
		padding-bottom: 40px;
		margin-top: 70px;
		margin-bottom: -90px;
		top: 0; left: 5%;
		}

	.card:before {
		position: relative;
		}

	.card-holder {
		margin: 0 auto;
		}

	.card p {
		font-size: 54px;
		}

	.card span {
		font-size: 18px;
		display: block;
		}

	.button {
		font-size: 18px;
		}

	.form.top {
		margin-top: 20px;
		}

	.form.top #contact-form {
		width: 100%;
		left: 0;
		}

	#notification {
		padding-bottom: 0;
		}

	.table {
		display: block;
		margin-top: 35px;
		}

	.tab {
		width: 100%;
		padding: 15px 0;
		}

	.tab span, .tab p {
		font-size: 18px;
		}

	.tab h2 {
		font-size: 52px;
		}
	}

@media screen and (max-width: 625px) {
	.banner:before {
		top: -21px;
		}

	#arrow-down {
		width: 66px;
		height: 66px;
		margin-left: -33px;
		top: -33px;
		}

	#arrow-down.left {
		top: -38px;
		}
	}

@media screen and (max-width: 500px) {
	.banner:before {
		top: -20px;
		}
	}

@media screen and (max-width: 430px) {
	h1 {
		font-size: 52px;
		}

	#cover p {
		font-size: 16px;
		}
	}

@media screen and (max-width: 370px) {
	.banner:before {
		top: -19px;
		}
	}

@media screen and (max-width: 250px) {
	.banner:before {
		top: -18px;
		}
	}