/* * {
  border: 1px solid red
}    */

.project {
  border: 0;
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Actay-Bold";
  position: relative;
  overflow: hidden;
  color: #fff;
  /* background-image: url("../img/object.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40%; */
}

@font-face {
  font-family: 'persh';
  src: url('Pershotravneva55.ttf') format('truetype');
}
@font-face {
  font-family: 'goth';
  src: url('DelaGothicOne-Regular.ttf') format('truetype');
}
.msi__logo {
  margin-left: 200px;  
  position: relative;
}

.menu {
	width: 42vw !important;
    height: auto;
    top: 0%;
    right: 0%;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	position: absolute;
}
.knopkamenu{
    background: url(../img/button003.png) center center no-repeat;
    background-size: contain;
    padding: 2em 2em 2.5em 2em;
    margin: 1em 0em 1em 0em;
    text-align: center;
    font-family: troubleside;
    color: #000;
    width: 100px;
	text-decoration: none;
}
.knopkamenu:hover {
	background: url(../img/button003.png) center center no-repeat;
	background-size: contain;
	color: #fff;
	transform: scale(1.01);
}

.menu2 {
	display: none;
	width: 42vw !important;
    height: auto;
    top: 0%;
    right: 0%;
    z-index: 2000;
   
    flex-wrap: wrap;
    justify-content: center;
	position: absolute;
}
.knopkamenu2{
    background: url(../img/button003.png) center center no-repeat;
    background-size: contain;
    padding: 2em 2em 2.5em 2em;
    margin: 1em 0em 1em 0em;
    text-align: center;
    font-family: troubleside;
    color: #000;
    width: 100px;
	text-decoration: none;
}
.knopkamenu2:hover {
	background: url(../img/button003.png) center center no-repeat;
	    background-size: contain;
		color: #c49e1b;
}



.title {
  color: #fe2d6f;
  font-size: 4em;
  animation: vlevo 1s ease-in-out;
  position: relative;
  bottom: 10px;
  width: 100%;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.069em;
  margin: 0;
  line-height: 1;
  /* text-shadow:  0px -1px #ffffff; */
}

.bg_img_1 {

  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.bg_img_2 {
  /*background-image: url("../img/bg_img_2.jpg");*/
  background-position: center;
  background-size: cover;
}

.selectarea__filter {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}



@keyframes spin {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 10px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes spin2 {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 20px, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}



.ball1 {
  position: absolute;
  left: 85%;
  top: 50%;
  width: 100px;
  animation: spin2 6s infinite ease-in-out;

}

.ball2 {
    position: absolute;
    left: 67%;
    top: 48.35%;
    width: 21.5%;
    z-index: 2;
}
.ball2:hover {
	
}

.ball3 {
    position: absolute;
    left: 16.35%;
    top: 1.9%;
    width: 15.5%;
    z-index: 2;
    border-radius: 50%;
    animation: glow-pulse 1.5s infinite;
}
.ball3:hover {
	filter: brightness(0.9);
}

.ball4 {
    position: absolute;
    left: 47.2%;
    top: 29.7%;
    width: 1.5%;
    z-index: 2;
	border-radius: 50%;
	animation: glow-pulse 1.5s infinite;
  /*animation: spin 5s infinite ease-in-out;*/
}

.ball4:hover {
	filter: brightness(0.9);
}
.ball4:hover + .minila {
	display: block;
	z-index: 2;
}
.ball3:hover + .minila {
	display: block;
	z-index: 2;
}
.ball2:hover + .minila {
	display: block;
	z-index: 2;
}
.minila {
    position: absolute;
    left: 47.4%;
    top: 19.7%;
    width: 9.4%;
    z-index: -1;
}

@keyframes glow-pulse {
    0% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Слабое свечение */
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* Яркое свечение */
    }
    100% {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); /* Возвращение к слабому свечению */
    }
}




.filter-buttons {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 1em 0.2em;
  flex-direction: column;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ff2971;
}

.filter-label {
  font-weight: bold;
}

.filter-btn {
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  padding: 19px 12px 8px 12px;
  background: #ff2971;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
  width: 9em;
  margin: 0 1em;
}

.filter-btn.active {
  color: #16003d;
  background: #fff;
}

.filter-btn:hover {
  color: #16003d;
  background: #fff;
  transform: scale(1.1);
}

.btn-liquid {
  display: inline-block;
  position: relative;
  width: 240px;
  height: 60px;

  border-radius: 27px;

  color: #fff;
  font: 700 14px/60px "Droid Sans", sans-serif;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 4.5em;
}

.btn-liquid .inner {
  position: relative;

  z-index: 2;
}

.btn-liquid canvas {
  position: absolute;
  top: -50px;
  right: -50px;
  bottom: -50px;
  left: -50px;

  z-index: 1;
}


@keyframes run {
  to {
    transform: none;
  }
}

.main {
  /*max-width: 1920px;*/
  /*min-width: 768px;*/
  /*margin: 0 auto;*/
}

.content_grid {
  display: grid;
  grid-template-columns: 0 auto 0;
  /*grid-template-rows: 40px 600px 40px;*/
}

.content_grid2 {
  display: grid;
  grid-template-columns: 0 auto 0;
  /*grid-template-rows: 40px 40px;*/
}

.content_grid3 {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 40px auto 40px;
}

.content_grid4 {
  display: grid;
  grid-template-columns: 40px auto 40px;
  grid-template-rows: 0px auto 0px;
}

.sec3 {
  margin-top: 2.7% !important;
  margin-bottom: 1% !important;
}

.wtb-widget-footer {
  display: none !important;
}

.wtb-widget .wtb-retailer-item {
  border-bottom: none !important;
}


.textblock1 {
    position: absolute;
    left: 29.5%;
    top: 12%;
    width: 19%;
    transform: skew(1deg, 9deg);
    text-align: center;
}
.textblock1 p {
    font-size: calc(1.2vw + -1vh + 1vmin);
    text-align: center;
    color: #000;
    font-family: troubleside;
}
.textblock1 b {
	font-size: calc(1.5vw + -1vh + 1vmin);
	text-align: center;
	color: #000;
	font-family: troubleside;
}
.textblock2 {
	position: absolute;
    left: 52%;
    top: 62%;
    width: 17%;
    text-align: center;
	transform: skew(-3deg, -2deg);
}
.textblock2 p {
	font-size: calc(1vw + -0.5vh + 0.5vmin);
	text-align: center;
	color: #000;
    font-family: troubleside;
}
.textblock2 b {
	font-size: 2em;
	text-align: center;
}


.textblock3 {
    position: absolute;
    left: 26.2%;
    top: 7%;
    width: 24%;
}
.textblock3 p {
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}

.textblock4 {
	position: absolute;
    left: 28%;
    top: 22%;
    width: 20%;
}
.textblock4 p {
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}

.textblock44 {
    position: absolute;
    left: 63%;
    top: 23%;
    width: 23%;
}
.textblock44 p {
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}

.textblock5 {
    position: absolute;
    left: 64.5%;
    top: 35.5%;
    width: 17%;
}
.textblock5 p {
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}

.textblock6 {
	position: absolute;
    left: 46%;
    top: 62%;
    width: 28%;
}
.textblock6 p {
	float: left;
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}
.myline {
    position: absolute;
    left: 65%;
    top: 57%;
    width: 29%;
}
.myline1 {
    position: absolute;
    left: 18.3%;
    top: 62%;
    width: 5%;
}
.myline2 {
    position: absolute;
    left: 78.3%;
    top: 28%;
    width: 5%;
}
.textblock7 {
    position: absolute;
    left: 40%;
    top: 1%;
    width: 43%;
}
.textblock7 p {
	font-size: calc(3.2vw + -1vh + 1vmin);
	text-align: left;
	color: #fff;
    font-family: persh;
	margin-bottom: 0;
}
.textblock7 ul li {
	font-size: calc(1.5vw + -1vh + 1vmin) !important;
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}
.textblock7 a {
	font-size: calc(1.5vw + -1vh + 1vmin) !important;
	text-align: left;
	color: #fff;
    font-family: sans-serif;
}

.textblock8 {
    position: absolute;
    left: 57%;
    top: 61%;
    width: 21%;
    transform: skew(-11deg, 4deg);
    text-align: center;
}
.textblock8 p {
	font-size: calc(1.3vw + -1vh + 1vmin);
	text-align: center;
	color: #000;
    font-family: troubleside;
}

.textblock9 {
    position: absolute;
    left: 37.5%;
    top: 72%;
    width: 27%;
    text-align: center;
}
.textblock9 p {
	font-size: calc(0.9vw + -0.5vh + 0.5vmin);
    text-align: center;
    color: #000;
    font-family: troubleside;
}

.textblock10 {
    position: absolute;
    left: 39%;
    bottom: 11%;
    width: 23%;
    text-align: center;
}
.textblock10 p {
	font-size: calc(1.2vw + -1vh + 1vmin);
	text-align: center;
	color: #000;
    font-family: troubleside;
}
.textblock11 {
    position: absolute;
    left: 23%;
    bottom: 34%;
    width: 55%;
    text-align: center;
    text-decoration: none;
}
.textblock11 p {
	font-size: calc(2.4vw + -1vh + 1vmin);
    text-align: center;
    font-family: persh;
    background: linear-gradient(273deg, #fff, #ffd330, #ffd330, #ffd330, #ffd330, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: gradient 3s ease infinite;
    -moz-animation: gradient 3s ease infinite;
    -o-animation: gradient 3s ease infinite;
    animation: gradient 3s ease infinite;
    background-size: 50%;
    color: white;
    
}

@-webkit-keyframes gradient {
        0%{background-position:0% 51%}
        50%{background-position:100% 50%}
        100%{background-position:0% 51%}
    }
    @-moz-keyframes gradient {
        0%{background-position:0% 51%}
        50%{background-position:100% 50%}
        100%{background-position:0% 51%}
    }
    @-o-keyframes gradient {
        0%{background-position:0% 51%}
        50%{background-position:100% 50%}
        100%{background-position:0% 51%}
    }
    @keyframes gradient {
        0%{background-position:0% 51%}
        50%{background-position:100% 50%}
        100%{background-position:0% 51%}
    }


.textblock12 {
    position: relative;
    text-align: center;
}
.textblock12 p {
    font-size: calc(3.2vw + -1vh + 1vmin);
    text-align: center;
    color: #fff;
    font-family: 'persh';
	top: -64%;
}
.textblock13 {
    position: absolute;
    left: 51%;
    top: 26%;
    width: 42%;
    text-align: center;
}
.textblock13 p {
    font-size: calc(1.7vw + -1vh + 1vmin);
    text-align: center;
    color: #000;
    font-family: troubleside;
    line-height: 2em;
}
.textblock14 {
	position: absolute;
    left: 51%;
    top: 41%;
    width: 42%;
    text-align: center;
}
.textblock14 p {
    font-size: calc(2.3vw + -2vh + 2vmin);
    text-align: center;
    color: #000;
    font-family: troubleside;
}
.produ1 {
	position: absolute;
    left: 4.35%;
    top: 60.9%;
    width: 23%;
    z-index: 2;
}
.produ1:hover {
	filter: brightness(1.2);
}
.produ2 {
	position: absolute;
    left: 23.5%;
    top: 62.7%;
    width: 25%;
    z-index: 2;
}
.produ2:hover {
	filter: brightness(1.2);
}
.produ3 {
	position: absolute;
    left: 50.3%;
    top: 61.7%;
    width: 22%;
    z-index: 2;
}
.produ3:hover {
	filter: brightness(1.2);
}
.produ4 {
    position: absolute;
    left: 68.3%;
    top: 59.1%;
    width: 25%;
    z-index: 2;
    rotate: 6deg;
}
.produ4:hover {
	filter: brightness(1.2);
}
.produ5 {
    position: absolute;
    left: 62.35%;
    top: 71.3%;
    width: 19%;
    z-index: 2;
}
.produ5:hover {
	filter: brightness(1.2);
}
.produ6 {
	position: absolute;
    left: 60.35%;
    top: 86.9%;
    width: 22%;
    z-index: 2;
}
.produ6:hover {
	filter: brightness(1.2);
	transform: scale(1.07);
}
.produ62 {
	position: absolute;
    left: 15.35%;
    top: 85.9%;
    width: 22%;
    z-index: 2;
    rotate: 7deg;
}
.produ62:hover {
	filter: brightness(1.2);
	transform: scale(1.07);
}
.greenbtn {
position: absolute;
    left: 2%;
    top: 19.7%;
    width: 94%;
    z-index: 0;
	   
}

.textblock11 {
	 filter: drop-shadow(1px 3px 2px #666);
}

.textblock11:hover {
	
	    filter: drop-shadow(1px 1px 1px #666);
		
}
.mainthird {
	margin-top: -9%;
}

.picblock2mob {
	display: none;
}
.picblock3mob {
	display: none;
}
.picblock4mob {
	display: none;
}
.picblock5mob {
	display: none;
}
@media (min-width: 300px) and (max-width: 900px) {
	
	
	
	
	
}









.textblock {
  position: absolute;
  left: 4%;
  top: 50%;
  width: 50%;
  transform: translateY(-50%);
}

.textblock img {
  width: 110%;
}

.textblockitem {
  color: #fff;
  margin-bottom: 12%;
}

.link__section {
  /* flex-direction: column; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center; */
  /* justify-content: center; */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

  width: 100%;
  max-width: 1920px;
  justify-content: space-around;
}

.btn-track {
  margin: 3px;
  transition: transform 2s;
  /* width: 12em; */
}

.btn-track:hover {
  margin: 3px;
  transform: scale(1.2);
}

.btn-track img {
  width: 12em;
}

/* .ruBts2021__etailer--links {
        width: 100%;
        max-width: 1920px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    } */

/* .ruBts2021__etailer--links a {
        margin: 3px;
        transition: transform 2s;
    } */

/* .ruBts2021__etailer--links a:hover {
        margin: 3px;
        transform: scale(1.2);
    } */

.title__h2 {
  color: #fff;
  margin-bottom: 1em;

}
/* 
    .ruBts2021__etailer--links img {
        width: 12em;
    } */

#canvas1 {
  position: absolute;
  transform: translate(-17%, 158%);
  z-index: 1;
}

@media (min-width: 1444px) and (max-width: 1576px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 16px;
  }
}

@media (min-width: 1180px) and (max-width: 1443px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }
}

@media (min-width: 1034px) and (max-width: 1179px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }
}

@media (min-width: 838px) and (max-width: 1033px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }

  .filter-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .project .tab {
    display: none;
  }
}

@media (min-width: 687px) and (max-width: 837px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }

  .filter-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .project .tab {
    display: none;
  }

  .project .hatch__slider .hatch__box {
    position: relative;
    width: calc(33% - 20px);
  }

  /* .main {
            min-width: unset;
        } */

  #canvas1 {
    transform: translate(-17%, 220%);
  }
}

@media (min-width: 400px) and (max-width: 686px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }

  .filter-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .project .tab {
    display: none;
  }

  .project .hatch__slider .hatch__box {
    position: relative;
    width: calc(52% - 20px);
  }

  /* .main {
            min-width: unset;
        } */

  #canvas1 {
    transform: translate(-17%, 220%);
  }

  .content_grid,
  .content_grid2,
  .content_grid3,
  .content_grid4 {
    grid-template-columns: 0px auto 0px;
  }
}

@media (min-width: 320px) and (max-width: 399px) {
  .project .hatch__flexBoxTxt-title {
    font-size: 12px;
  }

  .filter-group {
    flex-wrap: wrap;
    justify-content: center;
  }

  .project .tab {
    display: none;
  }

  .project .hatch__slider .hatch__box {
    position: relative;
    width: calc(105% - 20px);
  }


  #canvas1 {
    transform: translate(-17%, 220%);
  }

  .content_grid,
  .content_grid2,
  .content_grid3,
  .content_grid4 {
    grid-template-columns: 0px auto 0px;
  }
}