/* Базовые стили */

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  list-style: none;
}
html {
	scroll-behavior: smooth;
}
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f9f9f5;
  color: #58585a;
  position: relative;
}
img {
  vertical-align: middle;
}
h1 {
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 7px;
    border-bottom: 2px solid;
    margin-bottom: 10px;
}
h2 {
  font-size: 28px;
  color: #ff5400;
  text-transform: uppercase;
  margin-bottom: 40px;
    margin-top: 20px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 20px;
  transition: ease .5s;
}
p {
  padding: 10px 0;
}
a {
  color: #00ab6f;
  transition: ease .5s;
}
a:hover {
  color: #d75553;
  transition: ease .5s;
}

.otherProdItem:hover h4 {
    color: #f75452;
    transition: ease .5s;
}

header#top {
    display: grid;
    grid-template-columns: 2fr 4fr 1fr;
    padding: 20px;
	align-items: center;
	background-color: #00AB6F;
}

.menu ul {
    display: grid;
    grid-template-columns: repeat(6, auto);
}

.menu ul li a {
	color: #fff;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

article {
    background-color: #00AB6F;
    padding: 30px;
	height: calc(100vh - 97px);
	margin-bottom: 30px;
}

main {
	width: 1200px;
	margin: 0 auto;
	margin-bottom: 30px;
}

div#block_1 {
    display: grid;
    grid-template-areas:
        'img title'
        'img txt'
		'img btn';
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
    /* margin: 30px 0; */
}
div#block_5 {
	display: grid;
    grid-template-areas:
        'title img'
        'txt img';
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
	width: 1200px;
    margin: 0 auto;
	    gap: 0 50px;
}
.slide img {
    grid-area: img;
}

.safe iframe {
	grid-area: img;
}

.slide .bTitle, .safe .bTitle {
    grid-area: title;
}
.slide p, .safe .safeTxt {
    grid-area: txt;
	font-size: 20px;
    color: #fff;
    line-height: 1.5;
}
.btnBlock {
	grid-area: btn;
	font-size: 36px;
}
.btnBlock a {
	color: #fff;
}

.safe h2 {
	color: #fff;
	font-size: 50px;
}

.safeTxt p:last-child {
	font-weight: 600;
}

.imtroImg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
	margin: 30px 0;
	gap: 50px;
}

.imtroImg img {
    grid-row: 1 / 3;
}

.imtroImg p {
    font-size: 24px;
}

.imtroImg p:last-child {
    font-weight: bold;
}

.prodItem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 50px;
    padding-bottom: 20px;
	align-items: center;
	    justify-items: center;
}

.prodItem:not(:last-child) {
    border-bottom: 1px solid #e9e9e9;
}
.prodItem img {
    filter: drop-shadow(2px 8px 9px #00000042);
}
.sertImg {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.sertImg img {
    width: 100%;
}

.otherProdItems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 20px;
}

.otherProdItem img {
    margin-bottom: 20px;
	filter: drop-shadow(2px 8px 9px #00000042);
	width: 100%;
}

h2 i {
    border-right: 2px solid;
    padding: 6px;
}

div[id*="block_"] {
	padding-top: 30px;
	margin-bottom: 20px;
}

.btnUp {
    position: fixed;
    bottom: 100px;
    right: 70px;
	font-size: 20px;
}

footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 30px;
    background-color: #00AB6F;
    color: #fff;
}
.mapMobile {
	display: none;
}
.contBlockMobile {
    display: none;
}

.contBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contItems a, .contItems p {
    font-size: 30px;
	padding: 20px;
}

.contItems {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
}

.copyright a {
    color: #fff;
}

.copyright a:hover {
    color: #ff5400;
}

.otherProdItem {
    position: relative;
}

p.popup {
    position: absolute;
    top: 0;
    display: none;
    background-color: #000000bf;
    padding: 15px;
    color: #fff;
    right: 0;
    width: 1200px;
    line-height: 1.5;
    border-radius: 10px;
    transition: ease .5s;
}

.otherProdItem:hover .popup {
    display: block;
    transition: ease .5s;
}

.otherProdItem:hover img {
    transform: scale(1.1);
    transition: ease 10s;
}

.otherProdItem img {
    
    transition: ease 10s;
}

/* Модальные окна */


.mWind {
    position: fixed;
    top: 0;
    bottom: 0;
    background-color: #000000b5;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    transition: ease .5s;
    
}

.mWind:target {
    visibility: visible;
    opacity: 1;
}

.wrapper {
    position: relative;
}


.infModWind {
    position: fixed;
    top: calc(50% - 100px);
    left: calc(50% - 250px);
    width: 500px;
    height: 200px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px
}

.infModWind {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-items: center;
}

.mBtn {
    position: fixed;
    right: -50px;
    top: 50%;
    background-color: #00ab6f;
    color: #fff;
    padding: 20px;
    font-weight: 900;
    transform: rotate(270deg);
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}

.infModWind h2 {
    text-align: center;
    grid-column: 1 / 3;
}

.closeBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    font-weight: bold;
    transform: rotate(45deg);
}

.ozonBtn {
    background-color: #005bff;
    padding: 10px;
    border-radius: 10px;
    display: inline-block;
}

.saleBlock {
    background-color: #ff5400;
    padding: 40px;
    text-align: center;
    border-radius: 20px;
}

.saleBtn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
}

.saleTxt h2 {
    font-size: 40px;
    color: #fff;
}

a.wildBtn:hover, a.ozonBtn:hover {
    filter: blur(0px);
    transition: ease .5s;
}

a.wildBtn, a.ozonBtn {
    filter: blur(1px);
    transition: ease .5s;
}

.footSale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
}

.footSale h3 {
    grid-column: 1 / 3;
    text-transform: uppercase;
}




/* Мобильные стили */

@media screen and (min-width: 992px){

}

@media screen and (min-width: 768px){

}

@media screen and (max-width: 480px) {
  main {
    width: 480px;
	padding: 0 15px;
	display: block;
  }
  article {
    height: auto;
}
header#top {
    display: block;
}
.bTitle h1 {
    margin-bottom: 30px;
}
  div#block_5 {
	width: auto;
	padding: 0 15px;
	display: block;
  }
  div#block_1 {
      grid-template-columns: 1fr;
	  grid-template-areas:
        'title'
		'img'
        'txt'
        'btn';
		gap: 20px;
  }
  img {
	  width: 100%;
  }
  nav.menu {
    display: none;
}
.otherProdItems {
    display: block;
}
.prodItem {
    display: block;
}
.prodItem img {
    margin-bottom: 20px;
}
.otherProdItem {
    margin-bottom: 30px;
    position: relative;
}
.imtroImg {
    display: block;
}
.imtroImg img {
    margin-bottom: 30px;
}
.sertImg {
    display: block;
}
.safe h2 {
	text-align: center;
    font-size: 38px;
}
  .mapMobile {
	display: block;
}
.map {
	display: none;
}
.contBlock {
    display: none;
}
.contBlockMobile {
    display: flex;
    flex-direction: column;
    padding: 15px;
}
.contBlockMobile a {
    padding: 10px;
    border-radius: 20px;
    border: 2px solid #2eb4ff;
	margin: 10px;
}
footer {
    display: block;
}
.btnUp {
    display: none;
}

.otherProdItem:nth-child(1):before, .otherProdItem:nth-child(2):before, .otherProdItem:nth-child(3):before, .otherProdItem:nth-child(4):before {
    background-color: #ff5400;
    content: 'жми на картинку';
    color: #fff;
    padding: 5px;
    font-size: 20px;
    border-radius: 10px 0;
    position: absolute;
    z-index: 100;
    top: 40px;
}

p.popup {
    width: 363px;
}

.otherProdItem:hover .popup {
    display: none;
    
}

.mBtn {
    bottom: -1px;
    top: auto;
    right: calc(50% - 80px);
    transform: none;
}
.infModWind {
    width: 100%;
    left: 0;
}

footer {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

}
@media screen and (max-width: 415px) {
  main {
    width: 414px;
	padding: 0 15px;
  }
  .bTitle h1 {
    font-size: 44px;
}
.safe h2 {
    
    font-size: 35px;
}
  
}
@media screen and (max-width: 411px) {
  main {
    width: 411px;
	padding: 0 15px;
  }
 
}
@media screen and (max-width: 394px) {
  main {
    width: 393px;
	padding: 0 15px;
  }
  .safe h2 {
    font-size: 31px;
}
}
@media screen and (max-width: 376px) {
  main {
    width: 375px;
	padding: 0 15px;
  }
.bTitle h1 {
    font-size: 41px;
}
}
@media screen and (max-width: 360px) {
  main {
    width: 360px;
	padding: 0 15px;
  }
.bTitle h1 {
    font-size: 39px;
}
}