* {
    box-sizing: border-box;
}

/*
**************************
***999altitude.pro 2023***
**************************
*/

body {
    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    background-color: #fefefe;
    background-image: url("/images/back.webp");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment: fixed;
}

.navigation {
    background: rgba(255, 255, 255, 0.92);
    position: fixed;
  height: 70px;
  top: 0px;
  left: 0px;
  z-index: 15;
  width: 100%;
  transition: background 200ms ease 0s;
  display: flex;
  justify-content: center;
}

.safespace {
  height: 150px;
  width: 100%;
}

.navigation a {
    margin: auto 20px;
    font-size: 16px;
    color: #63725b;
    text-decoration: none;
    transition: all 200ms ease 0s;
}

.navigation:hover  {
    background: rgba(255, 255, 255, 1.0);
}

.navigation:hover a {
    color: gray;
}

.navigation a:hover {
    color: #63725b;
}

.navigation a:active {
  color:rgb(182, 255, 0);
}

.mobilenav {
    background: rgba(255, 255, 255, 0.92);
    position: fixed;
  height: 70px;
  top: 0px;
  left: 0px;
  z-index: 15;
  width: 100%;
  transition: background 200ms ease 0s;
  display: none;

}

#logo {
    height: 26px;
    width: auto;
    animation-name: sabas;
    animation-duration: 5s;
    animation-iteration-count: 1;
    margin: 22px;
    cursor: pointer;
        }

.sklieplogos {
  cursor: pointer;
  margin: auto 0px;
  width: 35px;
  height: auto;
}

.menubutton {
  display: inline-block;
  cursor: pointer;
  margin:auto 0%;
}

.menuspace {
    width: 35px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  transition: 5s;
  background-color: #63725b;
}

.change .bar1 {
  transform:rotate(-45deg);
   width: 15px;
}

.change .bar3 {
  transform:rotate(45deg);
  width: 15px;
}

.change .menubutton {
  animation-name: menu;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.change .mobilemenu {
  left: 0px;
}

.mobilemenu {
  color: white;
  position: fixed;
  top: 70px;
  left: -100%;
  display: none;
  height: 100%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.92);
  transition: 1s;
  z-index: 15;
}

.mobilemenu a {
  text-decoration: none;
  transition: all 200ms ease 0s;
  font-size: 48px;
  color: #63725b;
  margin: 20px auto;
}

.mobilemenu a:hover {
  color:white;
}

.skliep {
  width: 100%;
  max-width: 1250px;
  margin: auto;
  display:flex;
  height: 80px;
  color: white;
  background-color: #63725b;
  justify-content: space-around;
}

.promo {
  max-width: 1260px;
  background-color: #63725b;
  border-radius: 32px;
  display: flex;
  margin: auto;
}

.promo > div {
  color: white;
  text-align: center;
  width: 100%;
  margin: 20px 0px;
}

.zmiest {
  max-width: 1260px;
  margin: 5px auto;
}

.zmiest > div {
  display: flex;
}

.skrynka {
  border-radius: 32px;
  color: white;
  background-color: #63725b;
  text-align: center;
  width: 50%;
  margin: 5px;
}

.slideshow {
  display: flex;
  justify-content: left;
  overflow-x: hidden;
}

.slideshow > img {
width: 100%;
border-radius: 32px;
flex-shrink: 0;
animation-duration: 150s;
animation-iteration-count: infinite;
animation-timing-function: linear;
margin-left: 5px;
}

.knopka {
  outline: none;
  text-decoration: none;
  font-size: 30px;
  background-color: white;
  color: #63725b;
  padding: 5px 20px;
  border: 2px solid white;
  animation-name: none;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: all 200ms ease 0s;
}

.knopka:hover {
  outline: none;
  text-decoration: none;
  font-size: 30px;
  background-color: #63725b;
  color: white;
  padding: 5px 20px;
  border: 2px solid white;
}

.knopka2 {
  outline: none;
	text-decoration: none;
  font-size: 30px;
  background-color: rgb(0, 0, 0);
  color: rgb(182, 255, 0);
  padding: 5px 20px;
  border: 2px solid rgb(182, 255, 0);
  border-radius: 25px;
  transition: all 200ms ease 0s;
}

.knopka2:hover {
  outline: none;
  text-decoration: none;
  font-size: 30px;
  background-color: rgb(182, 255, 0);
  color: rgb(0, 0, 0);
  padding: 5px 20px;
  border: 2px solid rgb(182, 255, 0);
  border-radius: 25px;
}


.catalog {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.catalog > img {
margin: 10px;
width: 25%;
height: auto;
border-radius: 15px;
transition: all 500ms ease 0s;
cursor: pointer;
}

.catalog > img:hover {
transition: all 500ms ease 0s;
box-shadow: 0px 0px 20px white;
}

.products {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.products > div {
margin: 10px;
width: 25%;
height: auto;
transition: all 500ms ease 0s;
cursor: pointer;
}

.products > div:hover {
transition: all 500ms ease 0s;
box-shadow: 0px 0px 20px white;
}

.product {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.product > div {
margin: 10px;
width: 38%;
height: auto;
}

#knopki {
  margin-top: 50px;
}

@keyframes sabas {
   0% {opacity: 0.0;}
   100% {opacity: 1.0;}
   }

@keyframes menu {
    0%   {transform: rotateY(360deg);}
   50%  {transform: rotateY(180deg);}
   100%  {transform: rotateY(360deg);}
 }

@keyframes knopka {
  0% {box-shadow: 0px 0px 0px white;}
  50% {box-shadow: 0px 0px 25px white;}
  100% {box-shadow: 0px 0px 0px white;}
}

@keyframes slidepower {
  0% {transform: translateX(0);}
  50% {transform: translateX(-1300%);}
  100% {transform: translateX(0);}
}

@font-face {
  font-family: Inter;
  src: url(/fonts/Inter-SemiBold.ttf);
}

@media only screen and (orientation: portrait) {
     body {background-attachment: scroll;}
    .mobilenav {display:flex; justify-content: space-around;}
    .navigation {display:none;}
    .mobilemenu {display: flex; flex-direction: column;}
    .promo {flex-direction: column;}
    .promo > div {width: 100%; padding: 10px;}
    #knopki {display: flex; flex-direction: column; margin-top: 0px;}
    .knopka , .knopka2 {margin: 10px auto;}
    .zmiest > div {flex-direction: column;}
    .skrynka {width: 100%; margin: 5px 0px;}
    .slideshow {overflow-x: scroll;}
    .catalog > img {width: 44%;}
    .products > div {width: 44%;}
    .product > div {width: 100%;}
}

@media only screen and (max-width: 900px) {
   body {background-attachment: scroll;}
  .mobilenav {display:flex; justify-content: space-around;}
  .navigation {display:none;}
  .mobilemenu {display: flex; flex-direction: column;}
  .promo {flex-direction: column;}
  .promo > div {width: 100%; padding: 10px;}
  #knopki {display: flex; flex-direction: column; margin-top: 0px;}
  .knopka , .knopka2 {margin: 10px auto;}
  .zmiest > div {flex-direction: column;}
  .skrynka {width: 100%; margin: 5px 0px;}
  .slideshow {overflow-x: scroll;}
  .catalog > img {width: 44%;}
  .products > div {width: 44%;}
  .product > div {width: 100%;}
}