@media only screen and (max-width:1560px) {

	header nav,
	section:not(#banner, #reviews),section#specialist,#banner > div {
		padding: 0 30px;
	}

	main #lastNews {
		padding: 100px 30px;
	}

	main .paged {
		margin-bottom: 100px;
	}

	main #banner > div h1,
	main #banner > div figure {
		width: 65%;
	}

	main #banner > div h1 {
		font-size: 60px;
		line-height: 1;
	}

	.form-header h2 {
		width: 100%;
	}

}

@media only screen and (max-width:1280px) {

	header nav a[role=logo] img {
		width: 180px;
	}

	header nav > div:first-child .menu {
		margin: 15px 25px 0;
	}

	main #banner div > p {
		width: 80%;
		font-size: 20px;
	}

}

@media only screen and (max-width:1235px) {

	.form-header {
		width: 50%;
	}

	main #whyUs article,
	main #smile > article:first-child {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 40px;
	}

	main #whyUs article .experience {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	main #whyUs article .experience p {
		margin: 0
	}

	main #specialist > article ul {
		grid-template-columns: repeat(2, 1fr);
	}

	main #smile article div:first-child {
		padding-top: 0;
	}

	main #smile article div:first-child p {
		line-height: 24px;
	}

	main #values > article:nth-child(2),main #ourTeam article {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
	}

	main #lastNews > div,
	main #collaboration article,
	main #booking article,
	main #specialist > article > div {
		grid-template-columns: 1fr;
		width: 100%;
		gap: 40px;
	}

	main #lastNews div article h3 {
		margin-bottom: 5px;
	}

	main #lastNews div article:first-child {
		gap: 0;
	}

	footer > div {
		width: 100%;
		grid-template-columns: 360px 1fr;
		padding: 40px 30px 80px;
	}

	footer .social {
		padding: 20px 30px
	}

	footer .social::before {
		width: calc(100% - 60px);
	}

}

@media only screen and (max-width:1150px) {

	main #values > article:first-child p,
	main #whyUs article .experience > p,
	main #reviews .owl-item > div p,
	main #smile article div:first-child p,
	main #collaboration p,
	main #booking article p,
	main #banner div > p,
	main #lastNews div article p {
		font-size: 22px;
		line-height: 1.1;
	}

	main #banner > div h1,
	main #banner > div figure {
		width: 75%;
	}

	main #banner > div h1 {
		font-size: 54px;
	}

	header nav .askDate div:nth-child(2) {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#header button {
		width: 30px;
		height: 30px;
		padding: 0;
		border: 0;
		background-color: transparent;
		display: flex;
		gap: 10px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	#header button span,
	#header button::before,
	#header button::after {
		content: '';
		width: 100%;
		height: 2px;
		background-color: #000;
		transition: all 280ms ease;
		position: absolute;
		left: 0;
	}

	#header.scrolled button span,
	#header.scrolled button::before,
	#header.scrolled button::after {
		background-color: black;
	}

	.post #header button span,
	.post #header button::before,
	.post #header button::after {
		background-color: black;
	}

	#header button span,
	#header button::before,
	#header button::after {
		background-color: #fff;
	}

	#header button span {
		margin-top: -1px;
		top: 50%;
	}

	#header button::before {
		top: 5px;
	}

	#header button::after {
		bottom: 5px;
	}

	.noscroll #header button span,
	.noscroll #header button::before,
	.noscroll #header button::after {
		background-color: black;
	}

	.noscroll #header button span {
		opacity: 0;
	}

	.noscroll #header button::before {
		transform: rotate(45deg);
		top: 50%;
	}

	.noscroll #header button::after {
		transform: rotate(-45deg);
		top: 50%;
	}

	header nav #menu-main {
		opacity: 0;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: calc(100% - 100px);
		background-color: white;
		transition: opacity .3s ease-in, top .3s ease;
		position: fixed;
		top: 70px;
		left: 0px;
		margin: 0;
		z-index: 5;
	}

	header nav #menu-main.active {
		opacity: 1;
		top: 100px;
		pointer-events: all;
	}

	header nav > div:first-child .menu li a {
		font-size: 25px;
	}

	header nav > div:first-child .menu li {
		width: 100%;
		padding: 0 30px;
	}

	header nav > div:first-child .menu li:last-child::before {
		content: "";
		width: 100%;
		height: 1px;
		background-color: var(--grey);
		display: block;
		margin-bottom: 30px;
	}

	header nav > div:first-child .menu {
		gap: 30px;
		padding: 30px;
	}

	header nav > div:first-child .menu > li:last-child a {
		font-size: 20px;
	}

	header nav > div:first-child .menu > li:last-child a:last-child svg {
		width: 17px;
		height: 17px;
		transform: rotate(115deg);
		margin-right: 5px;
	}

	header nav > div:first-child .menu > li:last-child a:first-child svg {
		width: 19px;
		height: 19px;
	}

	main #values,
	main #whyUs,
	main #smile,
	main #specialist,
	main #reviews,
	main #lastNews,
	main #collaboration,
	main #booking,
	main #ourTeam,
	main #infoContact,
	main #gallery,
	main #works,
	main #content,
	.post #related,
	footer {
		margin-top: 90px;
	}

	main #values,
	main #lastNews > div,
	main #lastNews div article:nth-child(2) {
		gap: 60px;
	}

	main #values > article:nth-child(2),main #ourTeam article {
		gap: 50px;
	}

	main #lastNews,
	main #booking article {
		padding: 60px;
	}

	main #lastNews div article > p {
		width: 50%;
	}

	main #lastNews div article:first-child {
		padding-left: 0;
	}

	main #specialist > article ul {
		padding: 0 60px;
	}

	main #news {
		grid-template-columns: 1fr 300px;
	}

	.post #hero > div h1 {
		font-size: 40px;
	}

	footer > div > div:nth-child(2) ul {
		grid-template-rows: repeat(3, auto);
	}

}

@media only screen and (max-width:1000px) {

	header nav > div:first-child .menu {
		display: none;
	}

	main #infoContact article:first-child {
		grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	}

	main #infoContact article:first-child > div {
		grid-template-columns: 1fr;
	}

	main #values article h4 {
		font-size: 25px;
	}

	.form-header .wpcf7-form {
		grid-template-columns: 1fr;
	}

}

@media only screen and (max-width:920px) {

	main #values > article:first-child p,
	main #whyUs article .experience > p,
	main #reviews .owl-item > div p,
	main #smile article div:first-child p,
	main #collaboration p,
	main #booking article p,
	main #banner div > p,
	main #lastNews div article p {
		font-size: 20px;
		line-height: 1.1;
	}

	header {
		height: 65px;
	}

	header nav #menu-main {
		height: calc(100% - 64px);
		padding-top: 30px;
		gap: 30px;
	}

	header nav #menu-main.active {
		opacity: 1;
		top: 65px;
	}

	header nav > div:nth-child(2) {
		flex-direction: row;
	}

	header nav .askDate div:first-child a:first-child,
	header nav .askDate div:first-child a span {
		display: none;
	}

	header nav .askDate div:first-child a:nth-child(2) {
		margin-left: 0;
		margin-right: 20px;
	}

	header nav .askDate div:first-child a:nth-child(2) svg {
		height: 25px;
		width: 25px;
		transform: rotate(110deg);
	}

	header nav > div:nth-child(2) {
		align-items: center;
	}

	header .form-header h2 {
		font-size: 45px;
		margin-bottom: 30px;
	}

	header .form-header p {
		margin-bottom:;
	}

	header nav > div:first-child .menu > li:last-child {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	header nav .askDate div:first-child a:nth-child(2) {
		position: fixed;
		bottom: 10px;
		left: 10px;
		color: var(--white);
		background-color: var(--black);
		border-radius: 50%;
		padding: 20px;
		box-shadow: 2px 2px 3px #282828;
		transform: rotate(-8deg);
	}

	header.scrolled nav .askDate div a {
		color: white;
	}

	main #ourTeam article {
		grid-template-columns: repeat(2, 1fr);
	}

	.post header nav .askDate div:first-child a {
		color: white;
	}

	main #news > div:nth-child(2) {
		top: 86px;
	}

	.post #hero .info {
		flex-wrap: wrap;
	}

	.post #hero > div h1 {
		font-size: 30px
	}

	footer > div > div:nth-child(2) ul {
		grid-template-rows: repeat(5, auto);
	}

}

@media only screen and (max-width:860px) {

	main #values > article:first-child p,
	main #whyUs article .experience > p,
	ain #reviews .owl-item > div p,
	in #smile article div:first-child p,
	main #collaboration p,
	main #booking article p,
	main #banner div > p,
	main #lastNews div article p {
		font-size: 19px;
		line-height: 1.2;
	}

	main #banner > div h1 {
		font-size: 50px;
	}

	main #values,
	main #whyUs,
	main #smile,
	main #specialist,
	main #collaboration,
	main #booking,
	ain #ourTeam,
	main #infoContact,
	main #gallery,
	main #works,
	main #content,
	.post #related {
		margin-top: 100px;
	}

	main #infoContact article:first-child > div {
		grid-template-columns: auto 1fr;
	}

	.form-header {
		width: 100%;
	}

	main #banner > div h1,
	main #banner > div figure {
		width: 90%;
	}

	main #values article h4 {
		font-size: 22px;
		padding: 30px;
	}

	.wpcf7-form input,
	.wpcf7-form select,
	.wpcf7-form textarea {
		font-size: 19px;
	}

}

@media only screen and (max-width:767px) {

	#header {
		height: 75px;
	}

	#header nav > div > a {
		width: auto;
		height: auto;
		position: relative;
	}

	#header nav>div>a .logo-white {
		opacity: 1;
		display: block;

	}

	#header nav>div>a .logo-black {
		opacity: 0;
	}

	#header nav > div > a .logo-white,
	#header nav > div > a .logo-black  {
		width: 200px;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		transition: all 280ms ease;
		transform: translateY(-50%);
	}

	#header nav > div > a .logo-white {
		opacity: 1;
		width: 200px;
		height: auto;
		filter: none;
	}

	.post #header  nav > div > a .logo-black,
	#header.scrolled  nav > div > a .logo-black {
		opacity: 1;
	}

	.post #header  nav > div > a .logo-white,
	#header.scrolled  nav > div > a .logo-white {
		opacity: 0;
	}

	.noscroll #header nav > div > a img {
		filter: brightness(0);
	}

	main #banner {
		flex-wrap: wrap;
		min-height: auto;
		padding-top: 0;
	}

	main #banner > div {
		width: 100%;
	}

	main #banner > div h1 {
		width: 100%;
		font-size: 60px;
		padding: 50px 0 0 50px;
	}

	main #banner > div figure {
		width: 100%
	}

	main #banner > figure {
		height: 65vh;
		overflow: hidden;
		order: -1;
		width: 100%;
		position: relative;
		display: flex;
		align-items: flex-start;
	}

	main #banner > figure img {
		height: auto;
	}

	main #banner div > p {
		width: 100%;
		line-height: 1.3
	}

	main #banner br {
		display: none;
	}

	main .paged {
		margin-bottom: 0;
	}

	header nav a[role=logo] img {
		width: 180px;
		filter: invert(1);
	}

	header.scrolled nav a[role=logo] img,
	.archive header nav a[role=logo] img {
		filter: brightness(0);
	}

	header nav > div.askDate a.date {
		display: none;
	}

	h1,
	main #banner > div h1 {
		font-size: 40px;
		line-height: 1;
		margin-bottom: 0;
	}

	h2,
	h3,
	main #smile > article:first-child h3 {
		padding-bottom: 20px;
		font-size: 33px;
		line-height: 1.1;
	}

	main #news div:first-child article {
		margin-bottom: 80px;
	}

	main #news div:first-child article > div > h3 a {
		font-size: 33px;
	}

	p,
	main #reviews .owl-item > div span {
		font-size: 16px;
		line-height: 1.2;
	}

	header nav,
	section:not(#banner, #reviews),section #specialist,#banner > div {
		padding: 0 20px;
	}

	header nav > div:first-child .menu li a {
		font-size: 18px;
	}

	header nav > div:first-child .menu {
		gap: 20px;
		padding: 20px;
	}

	header nav > div:first-child .menu > li:last-child a {
		font-size: 17px;
	}

	header nav > div:first-child .menu > li:last-child a:last-child svg {
		width: 17px;
		height: 17px;
		transform: rotate(110deg);
		margin-right: 5px;
	}

	header nav > div:first-child .menu > li:last-child a:first-child svg {
		width: 19px;
		height: 19px;
	}

	header nav > div:first-child .menu li {
		padding: 0;
		gap: 30px;
	}

	header nav > div:first-child .menu li:last-child::before {
		margin-bottom: 0;
	}

	header nav > div:first-child .menu > li:last-child a {
		font-size: 15px;
	}

	.form-header .wpcf7-form .fields,
	main #values > article:first-child,
	main #values > article:nth-child(2),
	main #ourTeam article,
	main #whyUs article .experience,
	main #specialist > article ul,
	main #lastNews div article:nth-child(2),
	main #booking form,
	footer > div,
	main #gallery article:nth-child(2) {
		grid-template-columns: revert;
		grid-auto-flow: dense;
	}

	main #values,
	main #whyUs,
	main #smile,
	main #specialist,
	main #collaboration,
	main #booking,
	main #ourTeam,
	main #infoContact,
	main #gallery,
	main #works,
	main #lastNews,
	footer,
	main #news,
	main #reviews,
	.post #related {
		margin-top: 50px;
		gap: 30px;
	}

	.archive main #news {
		margin-top: 0;
	}

	main #values > article:nth-child(2),
	main #ourTeam article,
	main #whyUs article,
	main #smile > article:first-child,
	main #lastNews > div,
	main #lastNews div article:nth-child(2),main #collaboration article,main #booking article {
		gap: 30px;
	}

	main #banner > div h1,
	main #banner > div figure,
	main #specialist > article > div,
	main #lastNews div article:first-child,
	main #collaboration article >div:first-child {
		width: 100%;
		padding: 0;
	}

	main #banner > div {
		width: 100%;
		margin-top: 50px;
		gap: 20px;
	}

	main #banner > figure img {
		height: 100%;
	}

	main #values > article:first-child {
		gap: 0;
	}

	main #values > article:nth-child(2) {
		grid-template-rows: 500px;
		grid-auto-rows: 500px;
		width: 100%;
	}

	main #values > article:nth-child(2)>div:last-child,main #ourTeam article div:last-child {
		grid-column: span 1;
	}

	main #values > article:first-child div:first-child,
	main #whyUs article div:first-child,
	main #smile article div:first-child {
		padding-left: 0;
	}

	main #values article h4 {
		font-size: 30px;
	}

	main #gallery article:nth-child(2) figure:nth-child(3) {
		grid-column: span 2;
	}

	main #specialist ul li:nth-child(3n+1):nth-last-child(-n+3),
	main #specialist ul li:nth-child(3n+1):nth-last-child(-n+3) ~ li {
		border-bottom: 1px solid var(--grey);
	}

	main #specialist ul li:nth-child(3n+1):last-child {
		border-bottom: none;
	}

	main #specialist > article ul,
	main #booking article {
		padding: 30px;
	}

	main #specialist > article ul li {
		padding: 20px 0;
	}

	main #specialist > article > div {
		padding-bottom: 10px;
	}

	main #specialist > article ul li:last-child {
		border-bottom: 0 none !important;
	}

	main #booking article p {
		width: 100%
	}

	main #infoContact article:nth-child(3) {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	main #infoContact article:nth-child(3) a.button {
		justify-self: center;
	}

	main #lastNews {
		padding: 50px 20px;
	}

	main #lastNews div article > p {
		width: 100%;
	}

	main #lastNews div article h3 {
		padding: 0
	}

	main #lastNews div article p {
		line-height: 28px;
	}

	main #lastNews div article p:last-child,
	main #lastNews div article:nth-child(2) .news p:last-child {
		margin-bottom: 0;
	}

	main #news,
	main #specs .experience {
		gap: 20px;
		grid-template-columns: 1fr;
	}

	main #news article > div > div a {
		padding: 10px 15px;
	}

	main #news div:first-child article > div i,
	main #news div:first-child article > div span {
		font-size: 16px;
	}

	main #news div:first-child article > div p,
	main #content {
		margin-top: 0;
	}

	main #reviews .owl-item > div {
		padding: 0 20px;
	}

	main #reviews div.carrusel_reviews {
		width: 90%;
	}

	main #reviews div.carrusel_reviews .review {
		padding: 50px 0;
		grid-template-columns: 1fr;
	}

	main #reviews .owl-stage-outer {
		overflow: hidden;
	}

	main #collaboration article div:nth-child(2) {
		grid-template-columns: repeat(2, 1fr);
	}

	.post header nav a[role=logo] img {
		filter: brightness(0);
	}

	.post #hero > div {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.post #hero > div > div:first-child {
		position: static;
	}

	.post #hero .info a {
		padding: 8px 15px;
		font-size: 15px;
	}

	.post #hero .info span {
		font-size: 16px;
	}

	footer {
		gap: 0;
		padding-bottom: 100px;
	}

	footer .social {
		flex-wrap: wrap;
	}

	footer .social > div:last-child {
		width: 100%;
	}

	footer .social > div:first-child p {
		display: flex;
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}

	footer .social > div:first-child p a::before {
		display: none;
	}

	footer > div {
		gap: 40px;
		grid-template-columns: repeat(2, 1fr);
		padding: 40px 20px 40px;
	}

	footer .social {
		justify-content: center;
	}

	footer > div > div:not(:first-child) {
		padding-top: 0;
	}

	footer > div > div:first-child,
	footer > div > div:nth-child(2) {
		grid-column: span 2;
	}

	h6 {
		margin: 0 0 5px 0;
	}

	.post #hero > div h1 {
		font-size: 38px
	}

	.post #related > div {
		grid-template-columns: 1fr;
	}

}

@media only screen and (max-width:500px) {

	main #infoContact article:first-child > div {
		grid-template-columns: 1fr;
	}

	header nav > div.askDate a.date {
		display: none;
	}

	.post #related > div {
		grid-template-columns: 1fr;
	}

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

	.wpcf7-form .wpcf7-submit {
		margin: auto;
	}

	main #specialist > article ul li a {
		font-size: 19px;
		line-height: 1.2;
	}

}

@media only screen and (max-width:400px) {

	main #collaboration article div:nth-child(2) {
		grid-template-columns: 1fr;
	}

}