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

	#header nav {
		padding-left: 30px;
	}

	main #banner,
	main #showcase,
	main #exposition,
	main #sector,
	main #intro,
	main #articles,
	.company #description .place,
	.regular section article {
		padding-inline: 30px;
	}

	.blog #intro,
	.blog #articles{
		padding-inline: 30px;
	}

	#cta >div,
	#footer > div,
	section #cta,
	main #description .place,
	.company #values,
	#subscribe article,
	.products #items,
	#cdti > div {
		padding-left: 30px;
		padding-right: 30px;
	}

	.medio #environment {
		padding: 0 30px 90px;
	}

	.products #categories article {
		grid-template-rows: 350px;
	}

	.products main #items div > article > .specs {
		grid-template-columns: 1fr;
	}

	.regular section {
		padding: 0 30px;
	}

	.products main #items div > article.active .specs{
		height: calc(100% - 105px);
	}

}

@media screen and (max-width:1210px) {
	#post, #product {
		grid-template-columns: 100%;
	}

	.regular section article {
		width: 100%;
		max-width: 100%;
	}
}

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

	#header nav #mobile {
		width: 50px;
		height: 50px;
		font-size: 30px;
		color: var(--black);
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: relative;
		z-index: 10;
	}
	
	#header nav #mobile i {
		position: absolute;
		transition: all 280ms ease;
	}
	
	#header nav #mobile i:last-child,
	#header nav #mobile.active i:first-child {
		opacity: 0;
		transform: scale(0);
	}

	#header nav #mobile.active i:last-child {
		opacity: 1;
		transform: scale(1);	
	}

	#header nav #menu-main {
		width: 100%;
		height: calc(100% - 80px);
		padding-bottom: 30%;
		opacity: 0;
		pointer-events: none;
		display: flex;
		flex-direction: column;
		background-color: rgb(0 0 0 / 70%);
		backdrop-filter: blur(5px) grayscale(1);
		-moz-backdrop-filter: blur(5px) grayscale(1);
		overflow: hidden;
		transition: top .3s ease-in-out, opacity .3s ease-in;
		position: fixed;
		top: 85px;
		left: 0px;
	}

	#header nav > ul > li {
		width: 100%;
		text-align: center;
		background-color: white;
	}

	#header nav > ul > li.current::before {
		top: 10px;
	}

	#header nav #menu-main li:last-child {
		width: 100% !important;
		margin-left: 0;
	}

	#header nav > ul > li:last-child > form {
		transition: all 280ms ease;
		transform: translateY(-50%) rotateX(90deg);
		opacity: 0;
		pointer-events: none;
	}

	#header nav > ul > li:last-child > form.active {
		transform: translateY(-100%) rotateX(0deg);
		opacity: 1;
		pointer-events: all;
		top: -1px;
	}

	#header nav > ul > li:last-child > form ul li:first-child {
		padding-top: 10px;
	}

	#header nav {
		padding: 0 20px 0 30px;
	}

	#header nav > ul {
		display: none;
	}

	#header nav > ul > li:last-child > form ul li textarea{
		height: 100px;
	}

	main #banner {
		padding: 60px 30px;
	}

	main #banner .info {
		width: 100%;
	}

	main #showcase > article .showcaseinfo {
		width: 65%;
	}

	main #showcase > article {
		grid-template-columns: .7fr 1fr;
	}

	main #gallery {
		grid-template-columns: 1fr 1fr;
		gap: 1px;
	}

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

	main #gallery figure:nth-child(6n+4) {
		grid-column: span 2;
	}

	main #products .our_items {
		grid-template-columns: repeat(2,1fr);
	} 

	.contact #contact {
		padding: 90px 20px 0px;
	}

	.contact #contact article:first-child {
		width: 100%;
		margin-top: 0;
		grid-row-start: 1;
	}

	.contact #contact article:nth-child(2) {
		grid-row-start: 2;
		padding-left: initial;
		width: 75%;
		transform: translate(25%, -90px);
	}

	.contact #contact .info {
		width: 100%;
	}

	.contact #contact .info a br {
		display: none;
	}

	.contact #contact article:nth-child(2) > div {
		width: 80%;
	}

	.products #categories article {
		grid-template-rows: 350px;
	}

	.medio #environment article figure:nth-child(4) {
		order: 1;
	}

	#post{
		grid-template-columns: 100%;
	}

	#sidebar #related {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
	}
	#sidebar #related p {
		width: 100%
	}

	#sidebar #related article {
		width: calc(50% - 20px);
	}

	#sidebar #related article{
		border-bottom: none;
	}

	.blog #articles{
		grid-template-columns: 1fr 1fr;
	}

	#post{
		padding-block: 50px;
	}

	#cdti .feder {
		width: 50%;
		flex-direction: column;
	}

	#cdti .kit-digital {
		width: 50%;
	}

}

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

	h1 {
		font-size: 40px;
	}

	.company h1 {
		font-size: 34px;
	}

	.regular h1 {
		font-size: 30px;
	}

	.regular h2 {
		font-size: 24px;
		margin-bottom: 20px;
	}

	.regular h3 {
		font-size: 22px;
		margin-bottom: 20px;
	}

	.regular h4 {
		font-size: 20px;
		margin-bottom: 20px;
	}

	.post section article .content>*:not(last-child){
		margin-bottom: 20px
	}

	h2,
	h3,
	main #showcase .showcaseinfo h2,
	main #exposition .expoinfo h2,
	.products #categories article h3 {
		font-size: 26px;
	}

	p,
	main #showcase .showcaseinfo p,
	main #exposition .expoinfo p,
	.regular section article ul li, 
	.regular section article ol li {
		font-size: 16px;
	}

	main #subscribe > article,
	#cta > div {
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	main #subscribe .subButton,
	#cta .subButton {
		justify-content: center;
	}

	main #subscribe > article div:first-child,
	#cta > div div:first-child {
		margin-bottom: 25px;
	}

	main #sector article:first-child .sectorList {
		width: 95%;
	}

	main #exposition > article{
		align-items: flex-end;
	}

	#footer > div .info > div {
		width: 100%;
	}

	.company #values article > div {
		display: grid;
		grid-template-columns: 1fr;
	}

	.company #values article > div:nth-child(2n-1) figure {
		order: initial;
	}

	.company #values> div:first-child {
		width: 100%;
	}

	.products #categories article > div {
		padding: 30px !important;
	}

	.products #categories article {
		grid-template-rows: 250px;
	}

	.products #categories a{
		font-size: 25px;
	}

	.products #categories a img{
		width: 65px;
		height: 65px;
	}

}

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

	main #banner > article {
		width: 100%;
		grid-template-columns: 1fr;
		justify-content: center;
		align-items: center;
	}

	main #exposition > article{
		flex-wrap: wrap;
	}

	main #exposition > article{
		gap: 50px;
	}

	main #exposition article .expoinfo {
		width: 100%;
		padding-bottom: 0;
	}

	.regular > #content > article a{
		word-break: break-all;
	}


} 

@media only screen and (max-width:777px) {
	.products #items article{
		max-width: 100%;
		height: auto !important;
	}
}

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

	#header nav > ul > li.current::before {
		top: 20px;
	}

	h1{
		font-size: 34px;
	}

	h2, h3, main #showcase .showcaseinfo h2, main #exposition .expoinfo h2, .products #categories article h3{
		font-size: 25px;
	}

	#header nav {
		padding-left: 20px;
	}

	main #banner,
	.products #items,
	.regular section article {
		padding: 50px 20px;
	}

	main #banner > article{
		grid-template-columns:  100%;
	}

	main #exposition > article {
		padding: 0;
	}

	main #banner > article figure{
		width: 100%;
		height: auto;
	}

	main #showcase,
	main #exposition,
	main #sector {
		padding: 50px 20px;
		padding-left: 20px;
		padding-right: 20px;
	}

	main #exposition{
		padding-bottom: 0
	}

	.company #description .place {
		padding: 50px 20px 0;
	}

	main #gallery,
	#cta >div,
	#footer > div,
	section #cta,
	main #description .place,
	#subscribe article {
		padding-left: 20px;
		padding-right: 20px;
	}

	main #banner .info p,
	.regular section article ul li {
		width: 100%;
		font-size: 16px;
	}

	.regular section article ul li{
		margin-bottom: 10px
	}

	main #exposition .expoinfo {
		margin-bottom: 40px;
	}

	main #subscribe article p {
		margin-bottom: 15px;
	}

	main #showcase > article {
		flex-wrap: wrap;
	}

	main #showcase > article > figure {
		position: relative;
		width: 100%;
		top: 0;
	}

	main #showcase > article .showcaseinfo {
		width: 100%;
		transform: none;
		padding: 20px;
	}

	.products #categories a {
		font-size: 28px;
	}

	main #exposition article .expoinfo {
		width: 100%;
		padding-bottom: 0;
	}

	main #exposition > article,
	.company #description >article,
	main #sector .sectorList {
		flex-wrap: wrap;
	}

	main #exposition .expoinfo {
		width: 80%;
	}

	main #sector .buySector {
		grid-template-columns: 1fr;
		gap: 0;
	}

	main #sector br {
		display: none;
	}

	main #sector article:first-child .sectorList {
		width: 100%;
	}

	main #showcase > article {
		justify-content: flex-start;
	}

	main #sector .buySector figure {
		order: 1;
	}

	main #sector article:first-child .sectorList {
		flex-direction: column;
		justify-content: center;
		gap: 30px;
		transform: translateY(-50px);
	}

	main #sector article:first-child .buySector div {
		padding: 0 0 25px 0;
	}

	main #sector article:nth-child(2),.company #values article {
		padding: 0;
	}

	main #sector article:nth-child(2) > *,.company #description .place > * {
		grid-column-start: inherit;
		grid-row-start: inherit;
	}

	main #sector article:last-child {
		grid-template-columns: 1fr;
		grid-template-rows: 350px;
		gap: 20px;
	}

	main #sector article:last-child figure {
		height: 350px;
	}

	main #sector article:nth-child(2) > div,.company #description .place > div {
		width: 95%;
		padding: 35px;
	}

	main #sector article:nth-child(2) figure,.company #description .place figure {
		padding-left: 30px;
		transform: translateY(-50px);
	}

	main section article div a.button,
	.contact #contact .forminator-button,
	p.button a {
		width: 190px;
		font-size: 16px;
	}

	main section article div a.button::after,
	.contact #contact .forminator-button::after {
		left: -24%;
	}

	#about article {
		grid-template-columns: 1fr;
	}

	.company #values> div:first-child {
		padding: 0 20px 30px;
	}

	.company #description article:first-child figure i {
		font-size: 90px;
	}

	.company #values {
		padding: 0 20px 90px;
	}

	.company #values article {
		gap: 20px;
	}

	#about > article {
		padding: 50px 20px;
		gap: 20px;
	}

	.company #values article > div > div,
	.products #categories a {
		padding: 30px;
		grid-template-columns: 1fr;
	}

	.contact #contact {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}

	.contact #contact article:nth-child(2) {
		width: 100%;
		grid-row-start: inherit;
		padding-left: initial;
		transform: none;
		margin-top: 20px;
	}

	.contact #contact article:nth-child(2) > div {
		width: 100%;
		transform: translateX(0);
	}

	.contact #contact {
		margin-bottom: 0;
		padding: 50px 20px;
	}

	.blog #intro {
		padding-block: 50px 0;
	}

	.contact #contact .info,
	.contact #contact article:nth-child(2) > div,
	.medio #environment article div,
	main #sector article:first-child .sectorList,
	main #sector article:last-child div,
	#post article .content,
	#post article header {
		padding: 35px;
	}

	.products #categories {
		grid-template-columns: 1fr;
		grid-template-rows: repeat(2, 100px);
	}

	.products #items div:nth-child(2) h4 {
		font-size: 22px;
	}

	.products #items > div:nth-child(2) {
		margin-top: 25px;
	}

	.products #items > div:first-child{
		flex-wrap: wrap;
		justify-content: flex-end;
	}


	.products #items > div .materials{
		margin-top: 40px;
		width: 230px !important;
	}

	.medio #environment {
		padding: 0 20px 50px;
	}

	.medio #environment article {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		grid-template-rows: repeat(2, 250px);
		grid-auto-rows: 250px;
	}

	.medio #environment article figure:nth-child(4) {
		order: 1;
	}

	.regular section {
		padding: 0 20px;
	}

	.regular >section:first-child article {
		padding: 35px;
		margin: 50px 0;
	}

	.regular > #content {
		margin: 50px 0;
		max-width: 100%;
		width: 100%;
	}

	.regular section article > div{
		width: 100%;
	}

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

	#footer > div .info > div {
		flex-wrap: wrap;
	}

	#footer > div .info > div > div {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	#footer > div .info div:nth-child(2) {
		padding: 15px 0;
	}

	#footer > div .bottombar div:nth-child(2) {
		width: 100%;
		display: flex;
		justify-content: center;
		padding-top: 15px;
	}

	#footer > div .bottombar div a:not(:last-child)::after {
		display: none;
	}

	#footer > div .bottombar > div {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	#footer > div .bottombar div span::after{
		display: none;
	}

	#footer > div .bottombar > div{
		gap: 15px;
	}

	#footer > div .bottombar::before{
		width: 320px;
	}

	#cdti {
		padding-block: 50px;
	}

	#cdti .feder {
		width: 100%;
		gap: 0;
	}

	#cdti .kit-digital {
		width: 100%;
	}

	#cdti > div {
		flex-direction: column;
	}

	#sidebar #related article {
		width: 100%;
	}

	.blog #articles{
		grid-template-columns: 100%;
	}

	.blog #intro{
		flex-direction: column;
		align-items: flex-end;
		gap: 30px;
	}

	.blog .categories{
		width: calc(100% - 50px) !important;
	}

	.blog #intro h1{
		width: 100%;
		text-align: left;
	}


	.blog #intro,
	.blog #articles{
		padding-inline: 20px;
	}

	.blog #articles .pagination{
		padding-bottom: 50px
	}

	main #products .our_items {
		grid-template-columns: 1fr;
	}

}

@media only screen and (max-width:650px) {
	#product .related-products>div {
		grid-template-columns: 100% !important; 
	}

	#post article header .info .meta, #product article header .info .meta {
		flex-wrap: wrap;
	}

	.regular p {
		font-size: 16px;
	}

	#product article header .info {
		padding: 30px;
	}

	#post article .content, #product article .content {
		padding: 30px;
	}
}

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

	#header{
		height: 70px;
	}

	#header nav #menu-main.showdown{
		top: 70px;
	}

	#header nav > a{
		width: 120px;
	}

	#header nav #menu-main {
		height: calc(100% - 70px);
	}

	#header nav > ul > li.current::before {
		top: 5px;
	}

	#bannerHeader figure{
		height: 110px;
	}
	
	#bannerHeader figure img{
		object-fit: cover;
	}

	main #subscribe h2{
		font-size: 30px;
		line-height: 38px;
	}

	main #subscribe p{
		font-size: 18px;
	}

	#product article header {
		grid-template-columns: 100%;
		gap: 0;	
		padding: 0;
	}

	#product .related-product > div {
		grid-template-columns: 100%;
	}

	#product article header .info {
		padding: 30px
	}

	#product article header figure {
		width: 100%;
		height: auto;
	}

	.products #items > div .materials{
		width: calc(100% - 50px) !important;
	}

	.products #items > div:nth-child(2){
		grid-template-columns:  1fr;
	}

	.products #categories a img{
		width: 40px;
		height: 40px;
	}
	
	.products #categories a {
		font-size: 22px
	}

	.products main #items div > article .content span.more:hover {
		color: var(--blue);
	}

	#post article header .info .meta{
		flex-direction: column;
	}

	#post article header .info .meta span:not(:last-child)::after{
		display: none
	}

	#post article header.fixed{
		top: 70px;
	}

	.contact #contact h1{
		font-size: 34px;
	}

	.contact .last .acceptance label.active::after {
		top: 4px;
	}

	#footer > div .info > div {
		text-align: center;
	}

	#product article figure#amplified {
		padding: 10px;
	}

}