body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav nav nav"
    "article article article"
    "footer footer footer";
  grid-template-rows: 184px 80px 1fr 70px;  
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  margin: 0;
  font-family: "Segoe UI", Calibri, Arial, serif;
  }  
/* Stack the layout on small devices/viewports. */
@media all and (max-width: 575px) {
  body { 
    grid-template-areas: 
      "header"
      "nav"
      "article"
      "footer";
    grid-template-rows: 240px 80px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 320px) {
  body { 
    grid-template-areas: 
      "header"
      "nav"
      "article"
      "footer";
    grid-template-rows: 210px 80px 1fr 70px;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 1110px) {
  img { 
    width: 60%;  
 }
}
@media all and (max-width: 575px) {
  img { 
    width: 60%;  
 }
}
h2{
  font-size: 3em;
}
h3{
  font-size: 2em;
}
@media all and (max-width: 575px) {
  h2, h3 { 
    font-size: 1.4em;  
 }
}
@media all and (max-width: 575px) {
  h2, h3 { 
    font-size: 1.2em;  
 }
}
header, footer, article, nav, div {
  padding: 10px;
}
#pageHeader {
  grid-area: header;
  height:auto;
  background: #eef5ef;
}
#pageFooter {
  grid-area: footer;
}
#mainArticle { 
  grid-area: article;
  height:auto;
  background: #eef5ef;
}
#mainNav { 
  grid-area: nav; 
  }
#siteAds { 
  grid-area: ads; 
  }

#info {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  text-align: justify;
  font-size: 20px;
}
@media all and (max-width: 575px) {
  #info { 
    font-size: 14px;  
 }
}

#logo-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px;
  text-align: center;
}
@media all and (max-width: 575px) {
  #logo-grid { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 110px 110px;  
    grid-template-columns: 1fr;
	text-align: center;
 }
}
@media all and (max-width: 320px) {
  #logo-grid { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 85px 85px;  
    grid-template-columns: 1fr;
	text-align: center;
 }
}
#logo-grid > div {
  font-size: 2em;
  padding: 8px;
}
@media all and (max-width: 575px) {
  #logo-grid > div { 
    font-size: 1.4em;
 }
}
#logo-grid a{
  color: black;
}
.mail{
  font-size: 1em;
  text-decoration: none;
}
@media all and (max-width: 575px) {
  .mail { 
    font-size: 0.9em;
 }
}
nav {
  background: #eef5e4;
  border-bottom: 1px solid #058019;
  border-top: 1px solid #058019;
  font-size: 2em;
}
@media all and (max-width: 575px) {
  nav {
    font-size: 1em;
 }
}
@media all and (max-width: 320px) {
  nav {
    font-size: 1em;
 }
}
nav a {
  text-decoration: none;
  text-align:center;
}
nav a:hover, nav a:active {
  text-decoration: underline;
  color: #058019;
}
nav ul{
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем верхнее и нижнее поле, равное 1em*/
  padding-left: 0; /*убираем левый отступ, равный 40px*/
}
nav li{
  display: inline-grid;
  width: 24%;
  height: auto;
}
.bull li {
    list-style-image: url(../images/bull.png);
    padding: 5px 0px 5px 10px;
    font-style: italic;
    font-size: 20px;
}
#tablo-head {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 100%;
	text-align: justify;
	font-size: 20px;
	background:#6c7ae0;
}
#tablo {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 50% 50%;
	text-align: justify;
	font-size: 20px;
  	text-indent: 0px;
}
#tablo > div {
	background:#dedede;	
}
@media all and (max-width: 575px) {
  #tablo { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 250px 250px;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 400px) {
  #tablo { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 150px 200px;  
    grid-template-columns: 1fr;
	font-size: 14px;
	text-align: left;
 }
}
@media all and (max-width: 320px) {
  #tablo { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 150px 200px;  
    grid-template-columns: 1fr;
	font-size: 14px;
	text-align: left;
 }
}
#contact {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 50% 50%;
  text-align: left;
  text-indent: 50px;
  font-size: 20px;
  background: url(../images/body.jpg)
}
@media all and (max-width: 940px) {
  #contact { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 1fr;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 575px) {
  #contact { 
    grid-template-areas: 
      "div";
    grid-template-rows: 1fr 1fr;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 320px) {
  #contact { 
    font-size: 18px;
 }
}
/*Таблицы*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#kovshi table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#kovshi thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #kovshi tr {
      margin: 0 0 1rem 0;
    }
       
    #kovshi tr:nth-child(odd) {
      background: #ccc;
    }
    
		#kovshi td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#kovshi td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#kovshi td:nth-of-type(1):before { content: "Наименование"; }
		#kovshi td:nth-of-type(2):before { content: "Фото"; }
		#kovshi td:nth-of-type(3):before { content: "Ширина, мм"; }
		#kovshi td:nth-of-type(4):before { content: "Вылет, мм"; }
		#kovshi td:nth-of-type(5):before { content: "Глубина, мм"; }
		#kovshi td:nth-of-type(6):before { content: "Объем, литр"; }
		#kovshi td:nth-of-type(7):before { content: "Масса, кг"; }
	}

/*Таблицы*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#metiz table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#metiz thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #metiz tr {
      margin: 0 0 1rem 0;
    }
      
    #metiz tr:nth-child(odd) {
      background: #ccc;
    }
    
		#metiz td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#metiz td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#metiz td:nth-of-type(1):before { content: "Наименование"; }
		#metiz td:nth-of-type(2):before { content: "Фото"; }
		#metiz td:nth-of-type(3):before { content: "Размер резьбы"; }
		#metiz td:nth-of-type(4):before { content: "Длина, мм"; }
		#metiz td:nth-of-type(5):before { content: "Диаметр шляпки, мм"; }
		#metiz td:nth-of-type(6):before { content: "Штук в 1кг"; }
	}
	

/*Таблицы*/
	@media
	  only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

		/* Force table to not be like tables anymore */
		#tth-zm table, thead, tbody, th, td, tr {
			display: block;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		#tth-zm thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}

    #tth-zm tr {
      margin: 0 0 1rem 0;
    }
      
    #tth-zm tr:nth-child(odd) {
      background: #ccc;
    }
    
		#tth-zm td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
		}

		#tth-zm td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		#tth-zm td:nth-of-type(1):before { content: "Наименование"; }
		#tth-zm td:nth-of-type(2):before { content: "Производительность до"; }
		#tth-zm td:nth-of-type(3):before { content: "Высота погрузки в т/с"; }
		#tth-zm td:nth-of-type(4):before { content: "Дальность бросания"; }
		#tth-zm td:nth-of-type(5):before { content: "Ширина захвата"; }
		#tth-zm td:nth-of-type(6):before { content: "Мощность"; }
		#tth-zm td:nth-of-type(7):before { content: "Механизм передвижения"; }
	}

#tth-zm,#metiz,#kovshi {
	border: 1px solid #000000;
	text-align: center;
}
@media all and (max-width: 400px) {
  #tth-zm,#metiz,#kovshi { 
	font-size: 13px;
 }
}
#tth-zm tr:hover  {
	background: green;
}
#metiz tr:hover  {
	background: green;
}
#kovshi tr:hover  {
	background: green;
}
#banner {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 60% 40%;
  text-align: left;
  font-size: 20px;
  border: 1px solid #377b1d;
  text-indent: 0px;
  border-radius: 20px;
}
@media all and (max-width: 575px) {
  #banner { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 230px 1fr;  
    grid-template-columns: 1fr;
 }
}
@media all and (max-width: 320px) {
  #banner { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 150px 1fr;  
    grid-template-columns: 1fr;
 }
}
#banner-text {
	border-radius: 20px;
	border: 1px solid #377b1d;
}
.banner-veiw {
	font-style: italic;
	font-size: 35px;
	letter-spacing: 0em;
	line-height: 1.5;
}
.banner-ancor {
	font-style: italic;
	font-size: 22px;
	line-height: 1;
	font-weight: bold;
}
.banner-ancor:link, .banner-ancor:visited {
	color: #377b1d;
	text-decoration: none;
}
.banner-ancor:hover {
  color: #377b1d;
	text-decoration: underline;
}
.banner-ancor:active {
	text-decoration: none;
	color: #377b00;
}
#banner-2 {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 40% 60%;
  text-align: left;
  font-size: 20px;
  border: 1px solid #377b1d;
  text-indent: 0px;
  border-radius: 20px;
}
@media all and (max-width: 575px) {
  #banner-2 { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 1fr 1fr;  
    grid-template-columns: 1fr;
	font-size: 18px;
 }
}
@media all and (max-width: 400px) {
  #banner-2 { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 210px 1fr;  
    grid-template-columns: 1fr;
	font-size: 16px;
 }
}
@media all and (max-width: 320px) {
  #banner-2 { 
    grid-template-areas: 
      "div"
      "div";
    grid-template-rows: 160px 1fr;  
    grid-template-columns: 1fr;
	font-size: 16px;
 }
}
.box {
	background: linear-gradient(to bottom, #7AB942, #579e2f);
	display: inline-block;
	color: #fff;
	text-decoration: none;
	font-family: inherit;
	font-size: 18px;
	font-weight: 500;
	border-radius: 15px;
	min-width: 78px;
	padding-left: 52px;
	padding-right: 52px;
	padding: 12px 26px;
	text-indent: 3px;
}
.box:hover {
	text-decoration: underline;
}
.prew {
  display: grid;
  max-width: 100%;
  min-width: 100%;
}
#blocked{
	display: grid;
}
@media screen and (max-width: 575px) {
    #blocked {
        display: none;
    }
}
#spisok {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 2% 98%;
  text-align: left;
  font-size: 20px;
  font-style: italic;
  font-weight: bolder;
}
#outer-grid {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 33.3%);
  grid-gap: 1px;
}
@media all and (max-width: 410px) {
  #outer-grid { 
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 50%);
  grid-gap: 4px;
 }
}
@media all and (max-width: 320px) {
  #outer-grid { 
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 50%);
  grid-gap: 4px;
 }
}
#outer-grid > div {
  background-color: limegreen;
  padding: 0px;
  text-align: center;
}
#outer-grid-ads {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 33.3%);
  grid-gap: 1px;
  background: #6c7ae0;
}
#outer-grid-ads > div {
  background-color: limegreen;
  padding: 0px;
  text-align: center;
}
/*cookies*/
#cookie_notification{
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  position: fixed;
  bottom: 15px;
  left: 50%;
  width: 900px;
  max-width: 90%;
  transform: translateX(-50%);
  padding: 25px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}

#cookie_notification p{
  margin: 0;
  font-size: 0.7rem;
  text-align: left;
  color: $color_text;
}


@media (min-width: 576px){
  #cookie_notification.show{
    display: flex;
  }
  .cookie_accept{
    margin: 0 0 0 25px;
  }
}

@media (max-width: 575px){
  #cookie_notification.show{
    display: block;
    text-align: left;
  }
  .cookie_accept{
    margin: 10px 0 0 0;
  }
}
/*хз*/
.breadcrumbs {
  list-style: none;
  margin: 0;
  padding: .5em;
  font-size: 1.2em;
}
.breadcrumbs__item {
  display: inline;
}
.breadcrumbs__item::after {
  content: ">";
  font-size: 1.5em;
  margin: 0 .5em;
  position: relative;
}
.breadcrumbs__item--last::after {
  display: none;
}


@media only screen and (max-width: 20em) {
  .breadcrumbs__item::after {
    display: none;
  }
  .breadcrumbs__item a,
  .breadcrumbs--with-here .breadcrumbs__item--here {
    position: absolute;
    left: -999em;
  }
  .breadcrumbs__item--last a,
  .breadcrumbs--with-here .breadcrumbs__item--penultimate a {
    display: block;
    position: relative;
    left: 0;
    text-indent: -999em;
  }
  .breadcrumbs__item--last a::before,
  .breadcrumbs--with-here .breadcrumbs__item--penultimate a::before{
    content: "< Back";
    display: block;
    text-indent: 0;
    position: absolute;
    left: 0;
  } 
}

.nound {
	text-decoration: none;
	color: #000;
}
#gallery {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 20% 20% 20% 20% 20%;
  border: 1px solid #377b1d;
  border-radius: 20px;
}
#mistake {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 100%;
  border: 1px solid #377b1d;
  border-radius: 20px;
}
.mistake {
  font-size:18px;
  font-weight:bold;
}