* {
  text-decoration: none;
  -webkit-overflow-scrolling: touch;
  font-family: 'Scada', sans-serif;
  user-select: none;

}

















body {
  position: absolute;
  margin: 0;
  padding: 0;

  
  width: 100%;
  height: 100%;
}


header {
  position: absolute;
  z-index: 2;
  width: 70%;


  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  top: 0;
}

header ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  margin: 10px auto;
  padding: 0;
}

header li a {
  text-decoration: none;
  font-size: 18px;
  color: #ff7a1c;
  display: block;
  margin: 15px 20px 0 20px;
  transition: 0.3s;
}

header li a:hover {
  color: #e9975d;
  border-bottom: 1px solid #ff7a1c;
}




.navi {
  font-size: 2em;
  color: #5e5e5e;
  margin: 10px auto;
}



main {
  display: flex;
  flex-direction: column;
  margin: 30px 0 0 0;
  height: 100vh;
  background: #ffffff;
}

/* .header-foot-inf {         
  height: 25px;
  width: 100%;
  background: #ffffff;
  display: flex;
  flex-direction: row;
} */

/* .header-foot-inf p {
  margin: 5px 0 5px 10px;
  position: relative;
  color: #8a8a8a;
  font-size: 0.7em;
} */


#php-form {
  display: none;
}


#otprav-style {
  border: none;
  margin: 10px 0;
  border-bottom: 1px solid #ff7a1c;
  width: 300px;
  color: #ff7a1c;
  font-size: 1.2em;
}

.plus-minus {
  position: absolute;
  display: flex;
  width: 35px;
  height: 35px;
  right: 110px;
  top: 60px;

}

.dimBt {
  position: absolute;
  right: 35px;
}

.logo {
  
  position: absolute;

}

.logo1 {
  position: relative;

}



.text-plus-min div {
  font-size: 0.7em;
  text-align: center;
  position: absolute;
  width: 75px;
  color: #404040;
  margin-left: -15px;
}

.text-plus-min1 {
  position: absolute;
  width: 45px;
  height: 45px;
  right: 10px;
  top: 110px;
 background: url(../img/box_gray.png) center no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.text-plus-min1 span{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.text-plus-min2 span{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
}

.text-plus-min1:hover{
  background: url(../img/box_grayGr.png) center no-repeat;
  background-size: contain;
}



.text-plus-min2 {
  position: absolute;
  width: 45px;
  height: 45px;
  right: 10px;
  top: 200px;
  background: url(../img/pad_gray.png) center no-repeat;
  background-size: contain;
  cursor: pointer;
  transition: 0.2s;
}

.text-plus-min2:hover{
  background: url(../img/pad_grayGr.png) center no-repeat;
  background-size: contain;
}





.text-plus-min1 div {
  font-size: 0.8em;
  text-align: center;
  position: absolute;
  width: 75px;
  color: #404040;
  margin-left: -15px;
  top: 50px;
}

.text-plus-min2 div {
  font-size: 0.8em;
  text-align: center;
  position: absolute;
  width: 75px;
  color: #404040;
  margin-left: -15px;
  top: 50px;
}

.plus-minus img {
  
  height: 35px;
  margin: 0 5px;

  cursor: pointer;
}

#chose-model {
  border: 2px solid #ff7a1c;

}

.button-modul {
  position: absolute;

  display: flex;
  flex-direction: row;
  top: 10px;
  right: 220px;

}

.bt-modul {
  text-align: center;
  width: 150px;
  height: 50px;
  line-height: 50px;
  margin: 0 10px;
  background: #ff7a1c;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.bt-modul15,
.bt-modul30 {
  text-align: center;
  width: 75px;
  height: 50px;
  line-height: 50px;
  margin: 0 10px;
  background: #ff7a1c;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}


.bt-modul:hover {
  background-color: #f89956;
}

.bt-modul15:hover,
.bt-modul30:hover {
  background-color: #f89956;
}

/* .bt-modul:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.329);
  height: 100%;
  width: 2em;
  display: block;
  position: absolute;
  top: 0;
  left: -150px;
  -webkit-transform: skewX(-45deg) translateX(0);
  transform: skewX(-45deg) translateX(0);
  -webkit-transition: none;
  transition: none;
}


.bt-modul:hover:before {
  -webkit-transform: skewX(-45deg) translateX(18em);
  transform: skewX(-45deg) translateX(18em);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
} */


.textures-content {

  display: flex;
  flex-wrap: wrap;
  transition: 0.5s;
}

.textures {
  margin: 5px;
  width: 50px;
  height: 50px;
  transition: 0.2s;
  border-radius: 25px;
  overflow: hidden;


}

/* .textures-content:hover .textures{
  margin: 10px;
} */

.textures:hover {
  transform: scale(1.1, 1.1);
  opacity: 1;

}

.textures img {
  width: 100%;
  height: 50px;
}







/* свойства модального окна по умолчанию */
.modal {
  position: fixed;
  /* фиксированное положение */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  /* цвет фона */
  z-index: 1050;
  opacity: 0;
  /* по умолчанию модальное окно прозрачно */
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
  /* анимация перехода */
  pointer-events: none;
  /* элемент невидим для событий мыши */
  margin: 0;
  padding: 0;
}

/* при отображении модального окно */
.modal:target {
  opacity: 1;
  /* делаем окно видимым */
  pointer-events: auto;
  /* элемент видим для событий мыши */
  overflow-y: auto;
  /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}

/* ширина модального окна и его отступы от экрана */
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;
}

/* свойства для блока, содержащего контент модального окна */
.modal-content {
  position: relative;
  width: 300px;
  height: 75px;
  margin: 100px auto;
  display: flex;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  background-clip: padding-box;

  outline: 0;
}

/* свойства для заголовка модального окна */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;

  background: #414141;
  border-bottom: 1px solid #ffffff;
}

.modal-title {
  margin-top: 0;
  margin-bottom: 0;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
  font-size: 20px;
  color: #ffffff;
  font-weight: 500;
}

/* свойства для кнопки "Закрыть" */
.close {
  float: right;
  font-family: sans-serif;
  margin: 0 10px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: #5e5e5e;
  text-decoration: none;
}

/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus,
.close:hover {
  color: rgb(255, 255, 255);
  text-decoration: none;
  cursor: pointer;

}

/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 15px;
  color: #7a7a7a;
}

.modal-body button {

  padding: 0px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  width: 200px;

}


.modul {
  position: relative;
  width: 70%;
  background: rgb(255, 255, 255);
  overflow: hidden;
}

.imgmod {
  width: 90%;
  justify-content: center;
}

.uprov {
  position: relative;
  top: 50px;
  width: 30%;
  min-width: 350px;
 overflow: hidden;
 overflow-y: scroll;
  height: 93vh;
  transition: 0.3s;

}


.uprov-2{

  
 
 overflow: hidden;
  width: 100%;
}
#panel {
  margin: 0;
}

.main_1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.menu-mob {
  display: none;
}

.menu-mob-cont {
  display: none;
}

.toggle-button {
  display: none;
}

/*----modul*/
#bt-1 {
  position: absolute;
  width: 30px;
  height: 35px;
  left: 10px;
  top: 10px;
}

#bt-2 {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 35%;
  top: 85%;
}

#bt-3 {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 45%;
  top: 85%;
}

#bt-4 {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 55%;
  top: 85%;
}

#bt-5 {
  position: absolute;
  width: 35px;
  height: 35px;
  left: 65%;
  top: 85%;
}

#bt-6 {
  position: absolute;
  width: 200px;
  height: 35px;
  left: 80%;
  top: 10px;
}

/*--------------------------------------------------------*/
/*---------------------------------------------------------------------
------------------------------------------------------------------------
-------------------------------------------------------------------*/

.svg1 {
  position: absolute;
  left: 10px;
  top: 10px;

  width: 20px;
  height: 20px;
}

.svg3 {
  position: absolute;
  left: 10px;
  top: 2px;

  width: 20px;
  height: 20px;
}

.svg2 {
  position: absolute;
  left: 35px;
  top: 8px;

  width: 25px;
  height: 25px;
}






.hide {
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
}

.accordion {
  margin: 10px auto;
  padding: 0;
  background: #fff;
  width: 90%;

  list-style: none;

}

.accordion-item {
  position: relative;
  width: 100%;
  border: 1px solid #c5c5c5;
  margin: 10px 0;
  transition: 0.3s;
}

.accordion-item-pod {
  position: relative;
  width: 95%;
  color: #666666;
  background-color: #d3d3d3;
  border: 1px solid #c5c5c5;
  margin: 5px auto;
  transition: 0.3s;
}

.accordion-item-new {
  position: relative;
  width: 100%;
  border: 1px solid #e0e0e0;
  margin: 0 0 60px 0;
  transition: 0.3s;
}

.accordion-item-new:last-child {
  border-bottom: none;
}


.arrowAcord{
  position: absolute;
  top: 8px;
  left: 10px;
  width: 23px;
  height: 23px;
  background: url(../img/arrow.png) center no-repeat;
  background-size: contain;
  filter: contrast(0);
  -webkit-filter: contrast(0);
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.ar{
  top: 10px;
  width: 20px;
  height: 20px;
}

.ar2{
  top: 4px;
  width: 18px;
  height: 18px;
  transition: 0.3s;
}

.accordion-label:hover .arrowAcord{
  background: url(../img/arrowOr.png) center no-repeat;
  background-size: contain;
  filter: contrast(1);
  -webkit-filter: contrast(1);
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.uprov input:checked + .accordion-label .arrowAcord {
  transition: 0.3s;
  transform: rotate(180deg);
  filter: contrast(1);
  -webkit-filter: contrast(1);
  background: url(../img/arrowOr.png) center no-repeat;
  background-size: contain;


}

.uprov input:hover + .accordion-label .arrowAcord {
  transition: 0.3s;
  background: url(../img/arrowOr.png) center no-repeat;
  background-size: contain;
  /* filter: brightness(2); */


}


.uprov input:checked + .accordion-label_2 .ar2 {
  transition: 0.3s;
  transform: rotate(180deg);
  filter: contrast(1);
  -webkit-filter: contrast(1);
  filter: brightness(2); 

}

.uprov input:hover +  .accordion-label_2 .ar2 {
  transition: 0.3s;
  filter: brightness(2); 
}

input:checked+.accordion-label {
  background: #333;
  color: white;
  transition: 0.3s;
}

/* .accordion-label:hover {
  background: #ff7a1c;
  color: white;
  transition: 0.3s;
} */

.accordion-label {
  height: 40px;
  line-height: 40px;
  width: 100%;
  display: block;
  font-size: 0.9em;
  color: #666666;
  background-color: #d3d3d3;
  transition: all 0.3s ease;
  transition: 0.3s;
}

.accordion-label a {
  color: #666666;
}



.accordion-label p {

  font-family: 'Scada', sans-serif;
  margin: 0 0 0 70px;
}

.accordion-label:hover {
  cursor: pointer;
}

.accordion-box {
  display: flex;
  flex-direction: row;

  text-align: center;
  width: 100px;

}

.foto-child {

  width: 100px;
  height: 100px;
  margin: auto;


}




.accordion-child {
  display: flex;

  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 1s ease;
  opacity: 0;
  height: 0;
  list-style: none;

}



.accordion-child-pod {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 1s ease;
  opacity: 0;
  height: 0;
  list-style: none;

}

.accordion-child-new {
  padding: 0;
  margin: 0;
  overflow: hidden;
  transition: all 1s ease;
  opacity: 0;
  height: 0;
  list-style: none;

}

.acc-child {
  display: flex;
  width: 100%;
}

.accordion-label_1 {
  padding: 10px 0 10px 0px;
  width: 100%;
  display: block;
  font-size: 18px;
  transition: all 0.3s ease;
  text-align: center;
  font-size: 1em;

  cursor: pointer;
}

.accordion-label_2 {

  padding: 5px 0 5px 0px;
  width: 100%;
  height: 15px;
  display: block;
  font-size: 15px;
  transition: all 0.3s ease;

  background-color: #353535;
  color: white;
  cursor: pointer;
  line-height: 15px;

}

.accordion-label_1 p {
  margin: 0;
}

.accordion-label_2 p {
  text-transform: uppercase;
  margin: 0;
  padding: 0 0 0 50px;
  font-size: 12px;
}

input:checked+.accordion-label_1 {
  background: #353535;
  color: #ffffff;
}

input:checked+.accordion-label_2 {
  background: #ff7a1c;
  color: #ffffff;
}

.accordion-label_1:hover {
  background: #353535;
  color: white;
}

.accordion-label_1:hover .arrowAcord{
  filter: contrast(1);
  -webkit-filter: contrast(1);
  background: url(../img/arrowOr.png) center no-repeat;
  background-size: contain;
  
}

input:checked+.accordion-label_1 .arrowAcord{
  transform: rotate(180deg);
  filter: contrast(1);
  -webkit-filter: contrast(1);
  background: url(../img/arrowOr.png) center no-repeat;
  background-size: contain;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}



input[type=checkbox]:checked~.accordion-child-new {
  border: 1px solid #e0e0e0;
  margin: 0 0px 0px 0px;
  background: rgb(255, 255, 255);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.274);
  padding: 0px;
  height: auto;
  opacity: 1;
  color: #5e5e5e;
}



input[type=checkbox]:checked~.accordion-child {
  border: 1px solid #e0e0e0;
  margin: 0 0px 0px 0px;
  background: rgb(255, 255, 255);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.16);
  padding: 0px;
  height: auto;
  opacity: 1;
  color: #5e5e5e;
}


.child-style {
  cursor: pointer;
}

input[type="radio"][value="divan"]:checked {
  background-color: crimson;
}


.slidecontainer {
  margin: 0 auto;
  width: 200px;
  text-align: center;
}




.slider {
  position: relative;
  overflow: hidden;
}

.slider__wrapper {
  display: flex;
  transition: transform 0.6s ease;
}

.slider__item {
  flex: 0 0 33.333333%;


}

.slider__control {
  position: absolute;
  top: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;

  text-align: center;

  height: 40px;
  transform: translateY(-50%);

  border-radius: 50%;
}

.slider__control_show {
  display: flex;
}

.slider__control:hover,
.slider__control:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: .9;
}

.slider__control_left {
  left: 0;
}

.slider__control_right {
  right: 0;
}

.slider__control::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: transparent no-repeat center center;
  background-size: 100% 100%;
}

.slider__control_left::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255, 122, 28)' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.slider__control_right::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(255, 122, 28)' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

.slider__item>div {
  font-size: 0.8em;
  text-align: center;
}




/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

main.ta {
  min-width: 320px;
  max-width: 800px;
  padding-left: 0px;
  padding-top: 10px;
  margin: 0 auto;
  background: #F5F5F5;
}

section.ta {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input.ta {
  display: none;
}

label.ta {
  display: inline-block;
  margin: 0;
  padding: 15px 30px;
  text-align: center;
  color: #ff7a1c;
  border: 1px solid transparent;
  /*color: #ff7a1c;*/
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
  border-bottom: 1px solid #404040;


}

label.ta-2 {
  display: inline-block;
  margin-bottom: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 47px;
  padding-right: 47px;
  font-weight: 600;
  text-align: center;
  color: #ff7a1c;
  border: 1px solid transparent;
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
  border-bottom: 1px solid #404040;
}

label:before.ta,
label:before.ta-2 {
  background-color: #F5F5F5;
  font-family: fontawesome;
  font-weight: normal;
  /*margin-right: 10px;
	-webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;*/
  -webkit-transition: background-color 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out;
  border-bottom: 1px solid #404040;
}

label.ta [for*='1']:before {
  content: '\f1cb';
}

label.ta [for*='2']:before {
  content: '\f17d';
}



label:hover.ta,
label:hover.ta-2 {
  color: #fff;
  cursor: pointer;
  background-color: #ff7a1c;
  /* -webkit-transition: max-height 1s;
  transition: max-height 1s;*/

  /* transition: transform 0.3s ease-in-out;*/
}

input:checked.ta+label.ta,
input:checked.ta+label.ta-2 {
  color: #ff7a1c;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
  background-color: #D8D8D8;
}

#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
  display: block;
}






/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
=++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */



input[type="range"] {
  -webkit-appearance: none;
  width: 160px;
  height: 5px;
  margin: 10px 0px;
  background: linear-gradient(to right, rgb(126, 126, 126) 0%, rgb(61, 61, 61) 100%);
  background-size: 150px 10px;
  background-position: center;
  background-repeat: no-repeat;
  outline: none;
}

/* input[type="radio"][value="divan"]{
  visibility:hidden;
} */
.new-menu {
  margin: 2% 0 0 2%;
  width: 25%;
  
  position: absolute;

}

.new-menu img {
 
  width: 100%;
  
}

.new-menu-down {
  display: none;
  box-shadow: 0 0 5px 0 rgb(180, 180, 180);
}

#menus {
  background-color: #ff7a1c;
  color: white;
}


.new-menu a {
  width: 150px;
  height: 50px;
  text-align: center;
  color: #ff7a1c;
  display: inline-block;
  line-height: 50px;

  font-size: 1em;
  border-bottom: 1px solid rgb(212, 212, 212);


  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  background-color: white;
}

.new-menu-new a {
  width: 150px;
  height: 50px;
  text-align: center;
  color: #ff7a1c;
  display: block;
  line-height: 50px;

  font-size: 1em;
  border-bottom: 1px solid rgb(212, 212, 212);


  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  background-color: white;
}


.new-menu a:before {
  content: "";
  background-color: rgba(255, 255, 255, 0.329);
  height: 100%;
  width: 3em;
  display: block;
  position: absolute;
  top: 0;
  left: -4.5em;
  -webkit-transform: skewX(-45deg) translateX(0);
  transform: skewX(-45deg) translateX(0);
  -webkit-transition: none;
  transition: none;
}

.new-menu a:hover {
  background-color: #fcaf79;
  color: #fff;
  border-bottom: 1px solid #fcaf79;
  /*border-bottom: 4px solid #b8b7b7;*/
}

.new-menu a:hover:before {
  -webkit-transform: skewX(-45deg) translateX(18em);
  transform: skewX(-45deg) translateX(18em);
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.img-txt-block {
  text-align: center;
  display: block;
  width: 60px;
  margin: 10px 0px;
  font-size: 0.7em;
}

.img-txt-block img {
  width: 50%;

}



.form {
  width: 100%;
  height: 315px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.form form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.form-pod {
  display: flex;
  flex-direction: column;




}

.form-pod span {
  height: 31px;
  width: 40%;
  line-height: 31px;
  /* padding: 0 0 0 15px; */
  margin: 10px 0 0 0;
  font-size: 18px;
  text-align: end;
}

.form-pod input {
  width: 90%;
  height: 25px;
  margin: 5px auto;
  font-size: 15px;
  padding: 0 0 0 5px;
  align-self: flex-start;
  border: none;
  background: rgb(231, 231, 231);
}


.form-pod label {
  margin: 0 auto;
}

.form-pod select {
  padding: 0 0 0 5px;
  margin: 5px 10px;
  color: rgb(245, 245, 245);
}


.form-pod select:focus {
  background-color: #ff7a1c;
}

.form-pod p {
  text-align: center;

}

.form-pod-p {
  display: flex;
  flex-wrap: wrap;

  line-height: 25px;
  width: 100%;
}

.form-pod-p p {
  margin: 5px 0px 0 20px;
  text-align: left;

  line-height: 25px;
  font-size: 0.8em;

}

.form-pod-p input {
  margin: 5px 0 0 15px;
  width: 15px;



}

.form-bt {
  padding: 15px 0 0 0;
}

.form-bt button {
  display: block;
  width: 50%;
  height: 20px;
  margin: 10px auto;
}

.pod1 {
  background: rgb(231, 231, 231);
  border: none;
  margin: 5px 10px;
  border: 1px solid #c5c5c5;
}

.pod2 {
  background: rgb(48, 48, 48);

  border: none;
}

.pod-bt {
  background-color: #ff7a1c;
  border: none;
  color: white;
}

.form-bt input {
  display: block;
  background: #ff7a1c;
  width: 50%;
  height: 20px;
  border: none;
  color: white;
  font-size: 0.8em;
}

.bag {
  display: flex;


}

.bag label {
  margin: 6px 5px 0 5px;

  flex-wrap: wrap;
  font-size: 13px;
}

.bag label a {
  color: #ff7a1c;
  transition: 0.2s;

}

.bag label a:hover {
  color: #404040;
  border-bottom: 1px solid #404040;
  transition: 0.2s;
}

.textarea {
  width: 94%;
  margin: 5px 10px;
  font-size: 0.8em;
}


.form-pod-ac input {
  display: none;
  margin: 7px 0 0 7px;
  width: 15px;
  height: 15px;
}

.boxcover {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  font-size: 75%;
  padding: 5px 0;
}

.boxcovercent {
  width: 40%;
}

.boxcover1 {
  width: 50%;
  display: flex;


}

.boxcover2 {
  width: 100px;
  display: flex;

}

.boxcover2 label {
  display: flex;
  padding: 5px 0 0 5px;

  cursor: pointer;

}

.boxcenter {
  justify-content: space-evenly;
}

.boxcenter label {
  padding: 5px 0;
}

.boxcover1 label {
  padding: 5px 10px;
  cursor: pointer;

}

.boxcover input {
  display: block;

}

.avtm {
  color: black;
  font-size: 0.7em;
}

.avtm1 {
  font-size: 0.8em;
  color: #494949;
  margin: 15px 0 5px 0;
}

.avtm3 {
  font-size: 0.7em;
  color: #494949;
  margin: 0px 0 10px 0;
}

.avtm2 {
  color: black;
  font-size: 0.7em;
  margin: 0;
}

.phone-info {
  padding: 20px 0;
}








.goldBox,
.silverBox,
.whiteBox,
.blackBox,
.blueBox,
.redBox,
.greenBox,
.pinkBox {
  margin: 0 5px;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  border-radius: 5px;
}

.boxcover input:checked+label .goldBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: gold;
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .silverBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: silver;
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .whiteBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: white;
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .blackBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: rgb(0, 0, 0);
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .blueBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: blue;
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .redBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: red;
  border: 1px solid rgb(202, 202, 202);
}


.boxcover input:checked+label .greenBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: green;
  border: 1px solid rgb(202, 202, 202);
}

.boxcover input:checked+label .pinkBox {
  display: block;
  width: 15px;
  height: 15px;
  transition: 0.2s;
  background-color: pink;
  border: 1px solid rgb(202, 202, 202);
}





.slider__item input {
  display: none;
}

.slider__item label p {

  text-align: center;
  font-size: 0.8em;
  width: 100px;
  padding: 5px 0 5px 0;

  margin: 0 auto;
}

.slider__item label {
  cursor: pointer;
}

.slider__item label img {


  width: 83%;
  margin: 0 0 0 8px;
}


.slider__item input:checked+label p {

  border-top: 2px solid #ff7a1c;

}

.uprov input:checked+label img {
  transform: none;
  filter: none;
}


.pod3 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: rgb(231, 231, 231);
  border: none;
  margin: 5px 10px;
  border: 1px solid #c5c5c5;

}

.namePodForm {
  padding: 10px 0;
  border: none;
  background-color: rgb(231, 231, 231);
  color: #666666;

  text-align: center;
  width: 60%;
  border-bottom: 1px solid rgb(212, 212, 212);

}

.textareaDiv {
  width: 40%;
  padding: 10px 5px;
  box-sizing: border-box;
  border-bottom: 1px solid rgb(212, 212, 212);
  border-right: 1px solid rgb(212, 212, 212);

  color: #777777;

  font-size: 14px;
}

.h5-form {

  margin: 0;
  padding: 20px 10px 0px 10px;
  font-size: 15px;
  color: rgb(100, 100, 100);
}

.navigation {
  position: absolute;
  display: flex;
  top: 23%;
  left: 80px;
  width: 100px;
  height: 450px;
  margin: 0;
  text-align: center;
  color: rgb(94, 94, 94);
  background-color: #ffffff00;
  border-radius: 7px 7px 0 0;


}

.navigation span {

  margin: 5px 0;
  padding: 0 10px;
  font-size: 0.9em;
}

.navPod {
  text-align: center;
  color: gray;
}

.navPod p {
  margin: 5px 0;
}

.navPod img {
  width: 30%;
  cursor: pointer;
}

.closex {
  position: absolute;
  cursor: pointer;
  left: 100px;
  top: -25px;
  margin: 5px 10px;
}

.closex img {
  width: 25px;
}

.closex p {
  margin: 0;
  text-align: center;
  color: #858585;
  font-size: 0.8em;
}

.block-label-nav {
  display: flex;
}

.navigation input {
  display: none;
}

.navigation label {
  position: relative;
  display: block;
  cursor: pointer;
  width: 50%;
  height: 40px;
  font-size: 0.8em;
  text-align: center;


}



.logoset2 {
  position: absolute;
  top: 50px;
  width: 100px;
  margin: 60px 0;
  text-align: center;
  color: rgb(94, 94, 94);
  background-color: #9e9e9e36;
  border-radius: 0 0 7px 7px;

}

.logoset1 {
  position: absolute;
  top: 50px;
  width: 100px;
  margin: 60px 0;
  text-align: center;
  color: rgb(94, 94, 94);
  background-color: #9e9e9e36;
  border-radius: 0 0 7px 7px;
}

.labnav1-color {
  background-color: #9e9e9e75;
}

.navigation .labnav2:checked~.logoset1 {
  display: none;
  transition: 0.3s;
}

.navigation .labnav1:checked~.logoset2 {
  display: none;
  transition: 0.3s;
}


.navigation .labnav1:checked~.labnav2-color {
  background-color: #9e9e9e75;
  transition: 0.3s;
}





.navigation .labnav1:checked~.labnav1-color {
  background-color: #9e9e9e36;
  transition: 0.3s;
}

.navigation .labnav2:checked~.labnav2-color {
  background-color: #9e9e9e36;
  transition: 0.3s;
}




.chous {
  width: 150px;
  height: 25px;
  border-radius: 4px;
  line-height: 25px;
  text-align: center;
  margin: 25px;
  cursor: pointer;
  display: block;
  background: #C4C4C4;
  transition: all 0.18s ease-in-out;
  border: 1px solid #a5a5a5;
  color: rgb(97, 97, 97);
}

.form-pod .chous {
  margin: 10px auto;
}

.chous:hover {
  color: white;
  background-position: bottom left;
}

.my {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}



.onBt {
  position: absolute;
  top: 19%;
  left: 80px;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-size: 0.8em;
  text-align: center;
  background-color: rgb(226, 226, 226);
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  user-select: none;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
}

.separator {
  width: 100%;
  height: 2px;
  background-color: rgba(77, 77, 77, 0.445);
  position: absolute;
  top: 65px;
}

.logSet {
  padding: 15px 0;
  background-color: rgba(255, 255, 255, 0);
  font-size: 0.9em;
}


.span-labnav {
  position: absolute;
  text-align: center;
  left: 0;
}







/* Пульт упровления логотипом */



.logoUprov {
  position: absolute;
  width: 8%;
  max-width: 80px;
  top: 18%;
  left: 10px;
  z-index: 999;

}

.selectLogo {
  width: 100%;
  font-size: .8em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


.uploadLogo {
  width: 100%;
  height: 20px;
  background-color: rgba(235, 235, 235, 0.600);
  line-height: 20px;
  text-align: center;
  padding: 5px 0;
  border-bottom: 1px solid rgb(190, 190, 190);
  border-radius: 5px 5px 0 0;
  color: rgb(83, 83, 83);
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -ms-border-radius: 5px 5px 0 0;
  -o-border-radius: 5px 5px 0 0;
}

.selectTypeLogo {
  position: relative;
  width: 50%;
  height: 30px;
  text-align: center;
  background-color: rgba(221, 221, 221, 0.600);
  padding: 5px 0;
  cursor: pointer;
  transition: .3s;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  color: rgb(83, 83, 83);
}

.selectTypeLogo div {
  position: absolute;
}

.deleteLogo {
  width: 100%;
  height: 20px;
  background-color: rgba(235, 235, 235, 0.600);
  line-height: 20px;
  text-align: center;
  padding: 5px 0;
  color: rgb(83, 83, 83);
  border-top: 1px solid rgb(190, 190, 190);
  border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -ms-border-radius: 0 0 5px 5px;
  -o-border-radius: 0 0 5px 5px;
  cursor: pointer;
}


.selectTypeLogo:hover {
  background-color: #ff9d57;
  color: rgb(255, 255, 255);
}





.separator_new {
  width: 100%;
  height: 1px;
  background-color: rgb(190, 190, 190);
  margin: 20px 0;
}



.block-uprov {
  width: 100%;
  font-size: .8em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.logoButtone {
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;

  background-color: rgba(235, 235, 235, 0.600);
  padding: 0 0 10px 0;
  border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  -ms-border-radius: 0 0 5px 5px;
  -o-border-radius: 0 0 5px 5px;
}

.logoButtone img {
  background: url(../css/minus.png) no-repeat center;
  background-size: contain;
  width: 30%;
  height: 30%;
  cursor: pointer;
  transition: .2s;
  -webkit-transition: .2s;
  -moz-transition: .2s;
  -ms-transition: .2s;
  -o-transition: .2s;
}

.logoButtone img:active {
 background: url(../css/minusOr.png) no-repeat center;
 background-size: contain;
  transform: scale(1.15, 1.15);
  -webkit-transform: scale(1.15, 1.15);
  -moz-transform: scale(1.15, 1.15);
  -ms-transform: scale(1.15, 1.15);
  -o-transform: scale(1.15, 1.15);

}

.logoButtone p {

  width: 100%;
  text-align: center;
  margin: 5px 0;
  color: rgb(83, 83, 83);
}


.nameLogoSettings {
  font-size: 0.9em;
  text-align: center;
  color: rgb(83, 83, 83);
}


.border-bt-tab {
  background-color: #ff9d57;
  color: rgb(255, 255, 255);

}

.select {
  background-color: #ff9d57;
  color: rgb(255, 255, 255);
}


.close-icon {
  position: absolute;
  cursor: pointer;
  right: -65px;
  top: -20px;

}

.close-icon img {
  width: 45%;
  height: 45%;
  transition: 0.2s;
  -webkit-transition: 0.2s;
  -moz-transition: 0.2s;
  -ms-transition: 0.2s;
  -o-transition: 0.2s;
}

.close-icon img:active {
  transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05);
  -ms-transform: scale(1.05, 1.05);
  -o-transform: scale(1.05, 1.05);
}

.close-icon p {
  position: absolute;
  margin: 0;
  left: -3px;
  color: rgb(80, 80, 80);
  font-size: 0.8em;
}

.borderQ {
  box-shadow: inset 0 0 1px 0 rgb(43, 43, 43);
}



.close-icon::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  width: 120px;
  height: 50px;
  background: url(../img/popup/close_logo.png) center no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  
}


.close-icon:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  position: absolute;
  top: -50px;
  width: 120px;
  height: 50px;
  background: url(../img/popup/close_logo.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.out::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -110px;
  left: 0px;
  width: 270px;
  height: 110px;
  background: url(../img/popup/speech-bubble1.png) center no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  
}

.out:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  position: absolute;

  
  background: url(../img/popup/speech-bubble1.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

/* .out2::before{
  content: '';
  z-index: 999;
  position: absolute;
  width: 280px;
  height: 200px;
  background: url(../img/popup/speech-bubble1.png) center no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
  
}

.out2:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  position: absolute;
  top: -100px;
  width: 230px;
  height: 100px;
  background: url(../img/popup/speech-bubble1.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
} */
.text-logo{
  position: absolute;
  width: 200px;
 
  top: 10px;
}
.text-logo h3{
  font-size: 1em;
  margin: 0;
  color: #333;
}

.text-logo h4{
  font-size: .8em;
  margin: 0;
  color: #333;
}

.modulBtMin{
  position: absolute;
  top: 60px;
  right: 15px;
  width: 40px;
  height: 40px;
  background: url(../css/minus.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
  transition:0.1s ;
  
}

.modulBtMin:hover{
  background: url(../css/minusOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}

.modulBtPlus{
  position: absolute;
  top: 60px;
  right: 60px;
  width: 40px;
  height: 40px;
  background: url(../css/plus.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
  transition:0.1s ;
  
}

.modulBtPlus:hover{
  background: url(../css/plusOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}

.modulBtDim{
  position: absolute;
  top: 60px;
  right: 105px;
  width: 40px;
  height: 40px;
  background: url(../img/dim.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
  transition:0.1s ;
 
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
.modulBtDim span{
  position: absolute;
  width: 100%;
  height: 100%;
  
}

.modulBtDim:hover{
  background: url(../img/dimOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
 
}

.modulBt360{
  position: absolute;
  top: 60px;
  right: 150px;
  width: 40px;
  height: 40px;
  background: url(../img/360.png) no-repeat center;
  background-size: contain;
  cursor: pointer;
  transition:0.1s ;
  
}

.modulBt360:hover{
  background: url(../img/360Or.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}

.arrowBtRot{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/rotate_left.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtRot:hover{
  background: url(../img/arrow/rotate_leftOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}


.arrowBtRotRight{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/rotate_right.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtRotRight:hover{
  background: url(../img/arrow/rotate_rightOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}


.arrowBtScal{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/arrow_left.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtScal:hover{
  background: url(../img/arrow/arrow_leftOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}


.arrowBtScalRight{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/arrow_right.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtScalRight:hover{
  background: url(../img/arrow/arrow_rightOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}

.arrowBtScaleY{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/arrow_down.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtScaleY:hover{
  background: url(../img/arrow/arrow_downOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}


.arrowBtScaleYRight{
  width: 30px;
  height: 30px;
  background: url(../img/arrow/arrow_up.png) center no-repeat;
  background-size: contain;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 auto;
}

.arrowBtScaleYRight:hover{
  background: url(../img/arrow/arrow_upOr.png) no-repeat center;
  background-size: contain;
  transform: scale(1.05,1.05);
  -webkit-transform: scale(1.05,1.05);
  -moz-transform: scale(1.05,1.05);
  -ms-transform: scale(1.05,1.05);
  -o-transform: scale(1.05,1.05);
  
}


iframe{
  overflow: hidden;
}



.popup360::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
 
  width: 115px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.popup360:hover::before{
  content: '';
  visibility: visible;
  
  background: url(../img/popup/rotate_360.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.modulBtDim::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 115px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.modulBtDim:hover::before{
  content: '';
  visibility: visible;
  background: url(../img/popup/disp_box.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
  
}


.modulBtMin::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  width: 115px;
  height: 50px;
  left: -90px;
  opacity: 0;
  visibility: hidden;
  
}


.modulBtMin:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/zoom_down.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}


.modulBtPlus::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: -90px;
  width: 115px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.modulBtPlus:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/zoom_up.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}


.text-plus-min1::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -90px;
  left: -180px;
  width: 220px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
  
}


.text-plus-min1:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/open_lid.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.text-plus-min2::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -90px;
  left: -180px;
  width: 220px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
  
}


.text-plus-min2:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/open_pad.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}

.arrowBtRot::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtRot:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/rotate_left.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}


.arrowBtRotRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtRotRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/rotate_right.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}


.arrowBtScal::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScal:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/en_left.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}

.arrowBtScalRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScalRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/en_right.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}


.arrowBtScaleY::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScaleY:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/en_down.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.arrowBtScaleYRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScaleYRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/en_up.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.arrowBtScal::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScal:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/sc_left.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.arrowBtScalRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScalRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/sc_right.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.arrowBtScaleY::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScaleY:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/sc_down.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}


.arrowBtScaleYRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScaleYRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/sc_up.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}

.arrowBtScaleYRight::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.arrowBtScaleYRight:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/sc_up.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}
















.move::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.move:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/mv_left.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.moveR::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.moveR:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/mv_right.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.moveY::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.moveY:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/mv_down.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}


.moveYR::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -50px;
  left: 10px;
  width: 120px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  
}


.moveYR:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/mv_up.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}





.a_r::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: 16px;
  left: 10px;
  width: 225px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
 
  
}


.a_r:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/tbModel.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.ar2::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -80px;
  left: 10px;
  width: 225px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
 
  
}


.ar2:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/tab2.png) center no-repeat;
  background-size: contain;
  opacity: 1;
  
}

.ar3::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -80px;
  left: 10px;
  width: 225px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
 
  
}


.ar3:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/tab3.png) center no-repeat;
  background-size: contain;
  opacity: 1;

}


.ar4::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -80px;
  left: 10px;
  width: 225px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
 
  
}


.ar4:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/tab4.png) center no-repeat;
  background-size: contain;
  opacity: 1;
 
}


.ar5::before{
  content: '';
  z-index: 999;
  position: absolute;
  top: -80px;
  left: 10px;
  width: 225px;
  height: 100px;
  opacity: 0;
  visibility: hidden;
 
  
}


.ar5:hover::before{
  content: '';
  visibility: visible;
  z-index: 999;
  background: url(../img/popup/tab5.png) center no-repeat;
  background-size: contain;
  opacity: 1;

}

.baner{
  position: absolute;
  width: 42%;
  left: 33%;
  top: 3%;
}




















































/*________________________________________________*/


@media all and (max-width: 1100px){
   .baner{
     display: none;
   }
   body{
    overflow: hidden;
   }
}

/*MEDIA----------------*/
@media all and (max-width: 850px) {

  .baner{
    display: block;
    left: 26%;
  }

  header {
    flex-direction: column;
    position: static;
    -webkit-overflow-scrolling: touch;
    
  }
  body{
    overflow: hidden;
  }

  .knopki{
    position: absolute;
    top: -50px;
    right: 0;
  }


  .slideout-panel {
    margin: 0;
  }

  header li a {
    font-size: 1em;
    margin: 0;
    padding: 5px 40px;
  }

  .menu-des {
    margin: 0 auto;
  }

  main {
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
  }



  .modal-dialog {
    max-width: 500px;
    margin: 100px
      /* для отображения модального окна по центру */
  }

  .modal-content {
    width: 400px;
  }







  .navi {
    position: static;
    font-size: 1.5em;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }




  .main_1 {
    flex-direction: column;

  }

  .modul {
    margin: 0;
    width: 100%;
    height: 70vh;
    overflow: hidden;
  }

  .uprov {
    width: 100%;
    height: 30vh;
    top: 0;
  }
  .text-logo{
    display: none;
  }

  .new-menu img {
    width: 50%;
    margin-left: 20px;
  }

  .imgmod {
    position: static;
    margin: 0 auto;
  }

  #bt-1 {
    display: none;
  }

  #bt-6 {

    position: static;
    margin: 5px auto;
    text-align: center;
  }

  #bt-2 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 30%;
    top: 90%;
  }

  #bt-3 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 40%;
    top: 90%;
  }

  #bt-4 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 90%;
  }

  #bt-5 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 60%;
    top: 90%;
  }




  footer {
    display: flex;
    z-index: 6;
    justify-content: space-around;
    flex-direction: row;
    position: static;
  }

  footer p {
    position: relative;
    margin: 0;
    padding: 0;
    height: 20px;
    left: 5px;
    color: rgb(122, 122, 122);
  }
  .logoUprov {
    width: 10%;
    top: 0;
  }
  .separator_new{
    display: none;
  }

  .new-menu{
    display: none;
  }

  .close-icon{
    top: 10px;
  }
  .nameLogoSettings{
    margin: 0;
  }

  .accordion{
    margin: 0;
    width: 100%;
  }


}

@media all and (max-width: 580px) {
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;

  }

  .baner{
    display: none;
  }

  #panel {
    width: 100%;
  }

  header {
    display: flex;
    flex-direction: row;
    -webkit-overflow-scrolling: touch;
    
    width: 100%;
    background: rgba(128, 255, 0, 0);

  }

  .navi {
    position: static;
    font-size: 1.2em;
    margin: 5px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  .menu-des {
    display: none;
  }





  .main_1 {
    flex-direction: column;
    margin-top: 0px;
  }

  .modul {
    
    margin: 0;
    width: 100%;
    height: 70vh;
    overflow: hidden;
  }

  .uprov {
    width: 100%;
    
    top: 0;

  }

  .imgmod {
    margin: 0;
    width: 100%;
  }

  #bt-1 {
    display: none;
  }

  #bt-6 {

    position: static;
    margin: 5px auto;
    text-align: center;
  }

  #bt-2 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 30%;
    top: 90%;
  }

  #bt-3 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 40%;
    top: 90%;
  }

  #bt-4 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 50%;
    top: 90%;
  }

  #bt-5 {
    position: absolute;
    width: 30px;
    height: 30px;
    left: 60%;
    top: 90%;
  }

  #panel {
    position: absolute;
    z-index: 999;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;

  }




  .modal-content {
    width: 300px;

  }

  .modal-dialog {
    max-width: 500px;
    margin: 0 auto;
  }









  .slideout-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 256px;
    min-height: 100vh;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 0;
    display: none;
    background: white;
  }

  .slideout-menu-left {
    left: 0;
  }

  .slideout-menu-right {
    right: 0;
  }

  .slideout-panel {
    position: relative;
    z-index: 1;
    will-change: transform;
    background-color: #FFF;
    /* A background-color is required */
    min-height: 100vh;
  }

  .slideout-open,
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden;
  }

  .slideout-open .slideout-menu {
    display: block;
  }

  .toggle-button {
    display: inline;
    margin: 0;
    width: 150px;
    background: #ff7a1c;
    border: none;
    color: #ffffff;
    font-size: 1.2em;
    border-left: none;
    -webkit-overflow-scrolling: touch;

  }

  .new-menu {
    margin: 10px 0 0 10px;
    width: 70px;
    height: 70px;
    position: absolute;
  }


  .new-menu-down {
    display: none;
    box-shadow: 0 0 5px 0 rgb(180, 180, 180);
  }

  #menus {
    background-color: #ff7a1c;
    color: white;
  }


  .new-menu a {
    width: 150px;
    height: 50px;
    text-align: center;
    color: #ff7a1c;
    display: block;
    line-height: 50px;

    font-size: 1em;
    border-bottom: 1px solid rgb(212, 212, 212);


    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    position: relative;
    background-color: white;
  }


  .new-menu a:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.329);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
  }

  .new-menu a:hover {
    background-color: #fcaf79;
    color: #fff;
    border-bottom: 1px solid #fcaf79;
    /*border-bottom: 4px solid #b8b7b7;*/
  }

  .new-menu a:hover:before {
    -webkit-transform: skewX(-45deg) translateX(18em);
    transform: skewX(-45deg) translateX(18em);
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
  }

  .accordion-item-new {
    margin: 0;
  }

  .new-menu img {
    display: none;
    width: 80%;
    margin-left: 10px;
  }


  .navigation {
    left: 5px;

  }

  .onBt {
    left: 5px;
    top: 79px;
  }

  .logoset1,
  .logoset2 {
    margin: 0px 0;
    top: 40px;
  }

  .separator {
    display: none;
  }


  .logoUprov {
    width: 20%;
    left: 3%;
    top: 1%;
  }

  .separator_new {
    display: none;
  }

  .nameLogoSettings {
    display: none;
  }

  .knopki{
    position: absolute;
    top: -50px;
    right: 0;
  }

}