@import url('font-awesome/css/font-awesome.min.css');

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
:root {
  /* "none"  - скрыть кнопки || "block"  - показать кнопки*/
  --display-Layout-button-add:block;
  --vh:1vh;
  --sbv-min-width: 592;
  --sbv-min-height: 333;

  --pr-color: #272d4d;
  --pr-color-rgb: 39, 45, 77;

  --pr-copyright-a: #d2dcff;
  --pr-copyright-a-rgb: 210, 220, 255;

  --sbv-light: #f8f9fa;
  --sbv-light-rgb: 248, 249, 250;
  --sbv-white: #ffffff;
  --sbv-white-rgb: 255, 255, 255;
  --sbv-black: #000000;
  --sbv-black-rgb: 0, 0, 0;
  --sbv-dark: #3c3f41;
  --sbv-dark-rgb: 60, 63, 65;
  --sbv-red: #B22222;
  --sbv-red-rgb: 178, 34, 34;

  --sbv-app-head-hieght: 2em;
  --sbv-app-head-btn-width: 2em;

  --sbv-app-head-btn-bgcolor-rgb: 39, 45, 77;
  --sbv-app-head-btn-bgcolor-transp: 0.75;

  --sbv-app-contacts-btn-bgcolor-rgb: 39, 45, 77;
  --sbv-app-contacts-btn-bgcolor-transp: 0.75;


  --sbv-app-title-bgcolor-rgb: 255, 255, 255;
  --sbv-app-title-bgcolor-transp: 0.25;

  --sbv-app-border-color: #000000;


  --sbv-app-border-width: 0.25em;

  --scrollbar-foreground: rgba(255,0,0,0.5);
  --scrollbar-background: rgba(255,0,0,0.5);
  --scrollbar-background-hover: rgba(var(--sbv-dark-rgb),0.9);
  --scrollbar-border: rgba(var(--sbv-black-rgb),0.5);
  --scrollbar-border-hover: rgba(var(--sbv-black-rgb),0.5);
  --scrollbar-size: 6px;
  --scrollbar-border-radius: 2px;

  --app_ch_ar :1;
  --app_ch_direct : column;
  --app_ch1_direct : row;
  --app_width : 100%;
  --app_height : 100%;
  --app_ch1_width : 30%;
  --app_ch1_height : 100%;
  --app_ch1_model_width : 100%;
  --app_ch1_model_height : 50%;
  --app_ch1_text_width : 100%;
  --app_ch1_text_height : 50%;
  --app_ch2_text_width : 100%;
  --app_ch2_text_height : 25%;
  --app_ch2_width : 70%;
  --app_ch2_height : 100%;
  --model-ofset-sixe: 10px;
  --model-ofset-right: var(--model-ofset-sixe);
  --model-ofset-bottom: var(--model-ofset-sixe);
}

html {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
  overflow: hidden;
}
body {
  width: 100%;
  height: 100%;

  background-color: rgba(0,0,0,1);


  min-width: 300px;
  min-height: 300px;
  font-family: "SBV-font","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.scroller {
  scrollbar-width: thin;
  scrollbar-color:  rgba(255,255,255,0.5)  rgba(36,36,42,1);
}

/* Chrome, Edge and Safari */
.scroller::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.scroller::-webkit-scrollbar-track {
  background-color: rgba(36,36,42,1);
}

.scroller::-webkit-scrollbar-track:hover {
  background-color: rgba(36,36,42,1);
}

.scroller::-webkit-scrollbar-track:active {
  background-color: rgba(36,36,42,1);
}

.scroller::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,0.5);
}

.scroller::-webkit-scrollbar-thumb:hover {
  background-color:  rgba(255,255,255,0.75);
  cursor: ns-resize;
}

.scroller::-webkit-scrollbar-thumb:active {
  background-color:  rgba(255,255,255,0.75);
  cursor: ns-resize;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* ==========================================================================
Protes style start
   ========================================================================== */

p,
h1,
h2,
h3 {
  padding: 0;
  margin: 0;
}
iframe{
  border: none;
  border-width: 0;
}
.WaitingLoad{
  width: min(8em , 10vw);
  height: min(8em , 10vh);
  display: block;
  position: absolute;
  top: calc(50% - min(8em , 10vh) / 2);
  left: calc(50% - min(8em , 10vw) / 2);
  background-color:transparent;
  background-image: url('/img/pr-loader.gif');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 2000;
}
.helper{
  width: 18em;
  height: 6em;
  display: block;
  position: absolute;
  bottom: 0.5em;
  left: calc(50% - 9em);
  background-color:transparent;
  background-image: url('/img/helper.png');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0.5em 0.5em 0.75em rgba(0,0,0,0.75));
  z-index: 21;
}
.helper.mobile{
  background-image: url('/img/helper_m.png');
}
.helper:hover{
cursor: pointer;
}
.madel-container-fullscreen{
  display: block;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  box-sizing: unset;
  overflow: hidden;
  z-index: 2;

}
.madel-container-fullscreen.columns{
  width: 50vw;
}
.madel-container-fullscreen.rows{
  height: 50vh;
}
.C1 {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border-radius: 0;
  box-sizing: unset;
}

.Content_box{
  display: block;
  position: absolute;
  left: 0.25em;
  top: 2.25em;
  width: calc(100% - 0.5em);
  height: calc(100% - 2.5em);
  max-width: calc(100vw - 0.5em);
  max-height: calc(100vh - 2.5em);
  background-color:transparent;
  border: 1px solid var(--pr-color);
  border-radius: 0.25em;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
}

.Content_box_max{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;
  background-color: rgba(255,255,255,0.8);

  z-index: 19;
  overflow: hidden;
}
.Content_box_max.columns{
  width: 50%;
  left: 50%
}
.Content_box_max.rows{
  height: 50%;
  top: 50%
}
.Content_box_max.rows >.Content_box{
  left: 0.25em;
  top: 0.25em;
  width: calc(100% - 0.5em);
  height: calc(100% - 0.5em);
  max-width: calc(100vw - 0.5em);
  max-height: calc(100vh - 0.5em);
}

.Content_box_max.blur{
  filter: blur(0.25em) opacity(75%);
}
.content-body{
  width: calc(100% - 0.6em);
  height: auto;
  background-color: transparent;
  border-radius: 0.25em;
  display: block;
  padding: 0.25em;
  overflow: hidden;
  box-sizing: unset;
}
.PrLogo{
  width: 7em;
  height: 1.75em;
  display: flex;
  position: absolute;
  left: 0.25em;
  top: 0.25em;
  padding: 0;
  margin: 0;
  background-image: url('/img/pr-logo-2.svg') ;
  background-size: cover;
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.75));
  box-sizing: unset;
  z-index: 30;
}
.PrLogo.in_app{
  left: calc(50% - 3.5em);
}
.main-button {
  width: 2em;
  height: 2em;
  display: flex;
  position: absolute;
  right: 0;
  top: 0;
  padding: 0;
  margin: 0;
  background-color:var(--pr-color);
  background-image: url('/img/menu-button.svg') ;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 0 0.5em;
  z-index: 2000;
  box-sizing: unset;
}
.main-button.fill {
  background-image: url('/img/menu-button-fill.svg') ;
}
.main-button:hover {
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);

}
.main-menu{
  width: max(calc(17ch + 17ex + 2em), 300px);
  height: auto;
  min-height: 2em;
  max-height: calc(100% - 3.5em);
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  margin: 0;
  padding: 0;
  top: 3em;
  background-color: transparent;
  z-index: 200;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: unset;
}
.main-menu-item{
  width: calc(100% - 2em);
  height: auto;
  min-height: 1em;
  margin: 0.25em;
  padding: 0.75em;
  font-size: 100%;
  background-color:  rgba(var(--pr-color-rgb),1);
  color: rgba(var(--sbv-white-rgb),0.98);
  border-radius: 0.5em;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  overflow: hidden;
  box-sizing: unset;
  font-weight: normal;
}
.main-menu-item >p{
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
  overflow: hidden;
  box-sizing: unset;
  font-weight: normal;
}
.main-menu-item:hover{
  cursor: pointer;
  box-shadow: 5px 5px 5px 0 rgba(var(--pr-color-rgb),0.5);
}
.main-menu-item:hover >p{
  text-decoration-line: underline;
  text-decoration-skip-ink: auto;
  text-decoration-color: rgba(var(--sbv-white-rgb),1);
  text-decoration-thickness: 1px;
  text-underline-position: under;
}
.content-btn {
  width: 2em;
  height: 2em;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  border-radius: 0 0 0.5em 0;
  background-color: var(--pr-color);
  background-image: url('/img/close.svg') ;
  background-size: 80%;
  background-position: left 0.15em top 0.15em;
  background-repeat: no-repeat;
  box-sizing: unset;
  z-index: 2000;

}
.content-btn:hover {
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);
}
#Layout-button-add{
  display : var(--display-Layout-button-add);
}
.layout-button1 {
  width: 2em;
  height: 2em;
  display: flex;
  position: absolute;
  left: 2.5em;
  top: 0;
  padding: 0;
  margin: 0;
  background-color:var(--pr-color);
  background-image: url('/img/layout-box.svg') ;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 0.5em 0.5em;
  z-index: 2000;
  box-sizing: unset;
}
.layout-button1:hover {
  left: 2.25em;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);
}
.layout-button2 {
  width: 2em;
  height: 2em;
  display: flex;
  position: absolute;
  left: 5em;
  top: 0;
  padding: 0;
  margin: 0;
  background-color:var(--pr-color);
  background-image: url('/img/layout-box.svg') ;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0 0 0.5em 0.5em;
  z-index: 2000;
  box-sizing: unset;
}
@media only screen and (max-width: 699px){
  #layout-button2 {
    left: 2.5em;
  }
  #layout-button1 {
    display: none;
  }
}
@media only screen and (min-width: 700px){
  #layout-button2 {
    left: 5em;
  }
  #layout-button1 {
    display: flex;
  }
}
@media only screen and  (max-height: 699px) {
  #layout-button2 {
    display: none;
  }
}
@media only screen and (min-height: 700px)  {
  #layout-button2 {
    display: flex;
  }
}


.layout-button2:hover {
  left: 4.75em;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
  box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.3);
  @media only screen and  (max-width: 799px){
    left: 2.25em;
  }

}
.layout-button1.columns {
  background-image: url('/img/layout-columns.svg') ;
}
.layout-button1.rows {
  background-image: url('/img/layout-rows.svg') ;
}
.layout-button1.box {
  background-image: url('/img/layout-box.svg') ;
}
.layout-button2.columns {
  background-image: url('/img/layout-columns.svg') ;
}
.layout-button2.rows {
  background-image: url('/img/layout-rows.svg') ;
}
.layout-button2.box {
  background-image: url('/img/layout-box.svg') ;
}
.Copyright {
  width: auto;
  max-width: calc(100% - 0.8em);
  height: auto;
  display: block;
  position: absolute;
  right: 0.25em;
  bottom: 0.25em;
  font-size: 0.75em;
  font-weight: normal;
  padding: 0.15em;
  margin: 0;
  background-color: rgba(255,255,255, 0.75);
  border-radius:0.25em;
  color: var(--pr-color);
  z-index: 10;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.Copyright > a:link { text-decoration: none;   font-weight: normal; color: var(--pr-color);}
.Copyright > a:visited { text-decoration: none;  font-weight: normal; color: var(--pr-color);}
.Copyright > a:active { text-decoration: none;  font-weight: normal; color: var(--pr-color);}
.Copyright > a:hover { text-decoration: none;  font-weight: normal; color: var(--sbv-black);}
.Copyright:hover {color: var(--sbv-black);}
.fps{
  display: block;
  width: 6em;
  height: 2em;
  background-color: black;
  color: white;
  border: 2px solid red;
  z-index: 2000;
  position: absolute;
  left: calc(50% - 3em - 1px);
  bottom: 0.5em;
}
/* ==========================================================================
Protes style end
   ========================================================================== */

.Cont_FS{
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-width: 300px;
  min-height: 300px;
  /*
  border: 1px solid greenyellow;
   */
  background-color: transparent;
  background-image: url("../img/bg/bg1.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.Page_FS {
  display: inline-flex;
  box-sizing: border-box;
  z-index: 2;
  width: 100%;
  height: calc(100% - 3rem);
  position: absolute;
  top: 3rem;
  left: 0;
  /*
  max-width: 100vw;
  max-height: calc(100vh - 2.75rem);
  */
  min-width: 300px;
  min-height: calc(300px - 3rem);
  overflow-y: auto;
  overflow-x: auto;
  /*
  border: 1px solid red;
   */
  /*
    background-color: rgba(255,0,0,1);
  */

  /*
  background-color: rgba(36,36,42,.875);
  background-color: rgba(0,0,0,.875);
   */
  background-color: rgba(26,26,32,.9);
  color: rgba(255,255,255,1);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding:0;
  margin: 0;
}
.ip-head{
  display: flex block;
  position: absolute;
  width: 100%;
  height: 3rem;
  top: 0;
  left: 0;
  /*
  border: 1px solid red;
   */
  /*
  background-color: rgba(255,0,0,.2);
   */
  padding: 0;
  margin: 0;
background-color: rgba(0,0,0,.95);
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent) 1;
  border-bottom: 2px solid;
  /*
  box-shadow: 0 0 10px 0 rgba(255,255,255,0.5);
   */

  z-index: 30;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content:center;
  align-items: center;
}
.ip_logo{
  display: flex block;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: 10rem;
  height: 2rem;
  /*
  top:0.25rem;
  left: 0.25rem;
  border: 1px solid red;
  background-color: rgba(255,0,0,.2);
   */
  padding: 0;
  margin: 0 0.5rem 0 0.5rem;
  background-image: url('/img/I/ip-logo-head.svg') ;
  background-size: cover;
  /*
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.75));
   */
  box-sizing: unset;
  z-index: 30;
}
.ip_logo>a{
  display:flex;
  width: 100%;
  height: 100%;
}
.ip_up_link{
  display: flex;
  width: auto;
  height: auto;
  min-width: 1rem;
  padding: 0;
  margin: 0;
  flex-direction: row;
  flex-wrap: nowrap;
}
.ip_up_link>.ip_up_link_item{
  display: flex;
  position: relative;
  margin: 0 0.25rem 0 0.25rem;
  padding: 0 0.25rem 0 0.25rem;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,0), transparent) 1;
  border-bottom: 2px solid;
  font-weight: 500;
  font-size: 1rem;
  color: rgba(255,255,255,1);
  z-index: 35;
}
.ip_up_link>.ip_up_link_item>.sub_menu{
  display: flex;
  visibility: hidden;
  position: absolute;
  top: 1em;
  left: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  pointer-events: auto;
  z-index: -1;
}
.ip_up_link>.ip_up_link_item>.sub_menu_s{
  display: flex;
  visibility: hidden;
  position: absolute;
  top: 1em;
  right: 0;
  width: auto;
  height: auto;
  background-color: transparent;
  pointer-events: auto;
  z-index: -1;
}
.sub_menu_cont{
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  background-color: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.75);
  width: 10rem;
  height: auto;
}
.sub_menu_cont_s{
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  background-color: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.75);
  width: 16rem;
  height: auto;
}

.prod_itm_em{
  display: flex;
  width: calc(100% - 0.25rem - 4px);
  height: 1.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  margin: 0.125rem;
  padding: 0.125rem;
  color: rgba(255,255,255,1);
}
.prod_itm_em:hover {
cursor: pointer;
  border: 1px solid rgba(255,255,255,0.5);
background-color: rgba(255,255,255,1);
  color: rgba(0,0,0,1); ;
}
.prod_itm_em:hover>a.cont_a:hover, .prod_itm_em:hover>a.cont_a:visited, .prod_itm_em:hover>a.cont_a:link, .prod_itm_em:hover>a.cont_a:active{
  color: #000;
}
.ip_up_link>.ip_up_link_item:hover>.sub_menu{
  visibility: visible;
}
.ip_up_link>.ip_up_link_item:hover>.sub_menu_s{
  visibility: visible;
}

.ip_up_link>.ip_up_link_item:hover{
  cursor: pointer;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) 1;
  border-bottom: 2px solid;
}
.ip_up_btn{
  display: flex;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  width: 2rem;
  height: 2rem;
  background-image: url('/img/menu-btn.svg') ;
  background-size: cover;
  border: 1px solid rgba(255,255,255,0);
  margin: 0 0.25rem 0 0.25rem;
  z-index: 201;
}

@media only screen and (max-width: 799px){
  .ip_up_link>.ip_up_link_item {
    display: none;
  }
  .ip_up_btn{
    visibility: visible;
  }
}
@media only screen and (min-width: 800px){
  .ip_up_link>.ip_up_link_item {
    display: flex;
  }
  .ip_up_btn{
    visibility: hidden;
  }
}
.ip_up_btn:hover{
 /* width: 2.25rem;
  height: 2.25rem;

  */
  background-image: url('/img/menu-btn.svg') ;
  background-size: cover;
  border: 1px solid rgba(255,255,255,1);
  /*
  margin: 0 0 0 0.25rem;
   */
  cursor: pointer;
}
.ip_page{
  width: auto;
  height: auto;
  min-width:  calc(100% - 0.5rem);
  min-height:  calc(100% - 0.5rem);
  margin: 0;
  padding: 0;
}
.start_page{

}
.privacypolicy{
padding: 1rem;
  font-size: 1rem;
}
.privacypolicy>.pp_line1{
  font-size: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
  margin: 0 auto;
  width: 80%;
}
.privacypolicy>h2{
  text-align: center;
  padding: 0.5rem;
  margin: 0.5rem;
}
.page_cont_block{
  display: inline-flex;
  width: 100%;
  max-width: 1900px;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: transparent;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.Sreda-start{
  display: inline-flex;
  width: 95%;
  /*
  max-width: 60rem;
   */
  height: auto;
  flex-direction: column;
  box-sizing: border-box;
}
.Sreda-start>p{
  font-size: 1.25rem;
  font-weight: 400;
  text-indent: 2rem;
  padding: 0.5rem;
}
.Sreda-start>h1{
  text-align: center;
  font-weight: bolder;
  font-size: 1.8rem;
  padding: 2rem 1rem 0.25rem 1rem;
  /*
  -webkit-filter: drop-shadow( 2px 2px 5px rgba(7, 218, 246, 0.75));
  filter: drop-shadow( 2px 2px 5px rgba(7, 218, 246, 0.75));
   */
  -webkit-filter: drop-shadow( 1px 1px 3px rgba(7, 119, 246, 0.75));
  filter: drop-shadow( 1px 1px 3px rgba(7, 119, 246, 0.75));
  text-transform: uppercase;
}
.Sreda-map{
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  background-color: transparent;
  justify-content: center;
  flex-direction: column;
  padding: 1rem;
}
.s_map{
  display: flex block;
  width: 100%;
  height: auto;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: transparent;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  flex-direction: row;
  gap: 0.5rem;
}
.s_map_text{
  display: flex block;
  min-width: 199px;
width: max(25%,199px);
  max-width: 600px;
  text-align: center;
}
.s_map_text>p{
  font-size: 1.25rem;
  font-weight: 400;
  padding: 0.5rem;
}
#S-Map {
  pointer-events: auto;
  display: flex;
  width: max(75%,600px);
  max-width: 600px;
  height: auto;
}

.Sreda-map-text{
  display: flex;
  width: 100%;
  background-color: transparent;
  flex-flow: row wrap;
  justify-content: center;
align-items: stretch;
  gap: 0.5rem;
}
.Sreda-map-text_item{
  display: inline-flex;
  width: calc(50% - 1rem);
  /*
  height: auto;
   */
  flex-direction: column;
  /*
  background-color: rgba(255,255,255,.2);
   */
  background-color: transparent;
  border-radius: 0.25rem;
  border: 1px solid rgba(255,255,255,0);
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0);
  text-align: center;
  justify-content: start;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.5rem;
}
@media only screen and (max-width: 799px){
  .Sreda-map-text{
    flex-flow: column nowrap;
  }
  .Sreda-map-text_item{
    width: 100%;
  }
  .s_map{
    flex-direction: column;
  }
  #S-Map {
    width: 100%;
    max-width: 600px;
  }
  .s_map_text{
    width: 100%;
  }
}
@media only screen and (min-width: 800px){
 .Sreda-map-text{
   flex-flow: row wrap;
  }
  .Sreda-map-text_item{
    width: calc(50% - 1rem);
  }
  .s_map{
    flex-direction: row;
  }
  #S-Map {
    width: max(75%,600px);
    max-width: 600px;
  }
  .s_map_text{
    width: max(25%,199px);
  }
}

.Sreda-map-text_item:hover{
cursor: auto;
  /*
  border: 1px solid rgba(255,255,255,0);
  background-color: rgba(0,0,0,.75);
  box-shadow: 1px 1px 5px 0 rgba(255,255,255,0.75);
   */
  /*
  color:  rgba(255,255,255,1);
   */
}
.Sreda-map-text_item_head>svg:hover{
  cursor: pointer;
}

.Sreda-map-text_item>.Sreda-map-text_item_head>svg{
  -webkit-filter: drop-shadow( 0 0 10px rgba(7, 218, 246, 0.5));
  filter: drop-shadow( 0 0 10px rgba(7, 218, 246, 0.5));
}
.Sreda-map-text_item>.Sreda-map-text_item_head>svg>g>path{
/*
  -webkit-filter: drop-shadow( 0 0 20px rgba(255, 255, 255, .7));
  filter: drop-shadow( 0 0 20px rgba(255, 255, 255, .7));
*/
  stroke: #FFFFFF;
  stroke-width:3;
}
.Sreda-map-text_item:hover>.Sreda-map-text_item_head>svg{
  -webkit-filter: drop-shadow( 0 0 10px rgba(7, 218, 246, 0.85));
  filter: drop-shadow( 0 0 10px rgba(7, 218, 246, 0.85));
}
.Sreda-map-text_item:hover>.Sreda-map-text_item_head>svg>g>path{
  /*
  -webkit-filter: drop-shadow( 5px 5px 10px rgba(7, 218, 246, .75));
  filter: drop-shadow( 5px 5px 10px rgba(7, 218, 246, .75));
  */
  stroke: #FFFFFF;
  stroke-width:5;
}
.Sreda-map-text_item:hover>.Sreda-map-text_item_head{
  border-image: linear-gradient(90deg, transparent, rgba(210,74,68,.95), transparent) 1;
}
.Sreda-map-text_item_head{
  display: flex;
width: 100%;
  height: auto;
  max-height: 3rem;
  padding-bottom: 0.5rem;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) 1;
  border-bottom: 2px solid;
}
.Sreda-map-text_item_head>svg{
  display: inline-flex;
  width: auto;
  max-width: 80%;
  height: auto;
  max-height: 3rem;
  margin: 0 auto;
}
.Sreda-map-text_item_text{
  display: inline-block;
  width: auto;
  height: auto;
  font-weight: 600;
  background-color: transparent;
}
.Sreda-map-text_item >ul{
  display: inline-block;
  width: auto;
  height: auto;
  padding-bottom: 0.5rem;
/*
flex-direction: column;
 */
  list-style: square;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 2rem;
  text-align: left;
}
.Sreda-map-text_item>ul>li{
  font-size: 1rem;
  font-weight: 300;
}

.S_map_obj{
  /*
  transform: translate(-1px,-1px);
   */
  /*
  transition: transform .1s;
   */
  -webkit-filter: drop-shadow( 5px 5px 50px rgba(7, 218, 246, 0.5));
  filter: drop-shadow( 5px 5px 50px rgba(7, 218, 246, 0.5));
  stroke: rgba(255,255,255,0.75);
  stroke-width:1;
}
.S_map_obj:hover{
  /*
  transform: translate(-1px,-1px);
   */
  /*
  transition: transform .1s;
   */
  -webkit-filter: drop-shadow( 5px 5px 50px rgba(7, 218, 246, .5)) drop-shadow( 5px 5px 10px rgba(255, 255, 255, .75));
  filter: drop-shadow( 5px 5px 50px rgba(7, 218, 246, .5)) drop-shadow( 5px 5px 10px rgba(255, 255, 255, .75));
  stroke:rgba(255,255,255,1);
  stroke-width:2;
  cursor: pointer;
}
.txt1{
  display: flex;
}

.footer_page{
  display: flex;
  margin-top: 0.5rem;
  width: 100%;
  height: auto;
  padding: 0;
  background-color: rgba(0,0,0,.95);
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent) 1;
  border-top: 2px solid;
  /*
  border-top: 2px solid rgba(255,255,255,.2);
   */
  color: rgba(255,255,255,1);
  flex-direction: column;
}
.footer_cont{
  /*
  margin-top: 0.5rem;
   */
  display: flex;
  width: 100%;
  height: auto;
  background-color: transparent;
  flex-direction: row;
  flex-wrap: wrap;
  border-image: linear-gradient(90deg, transparent, rgba(255,255,255,1), transparent) 1;
  border-bottom: 1px solid;
  /*
  border-top: 2px solid;
   */
  justify-content: space-evenly;
}

.F_C_item_text{
  display: flex;
  width: 12rem;
  height: auto;
  min-height: 1.25rem;
  background-color: transparent;
  min-width: 12rem;
  overflow: hidden;
  padding: 0.1rem 0.25rem 0.1rem 0.5rem;
  margin: 10px;
  border-left: 1px solid rgba(255,255,255,0);
  border-right: 1px solid rgba(255,255,255,0);
  border-top: 1px solid rgba(255,255,255,0);
  border-bottom: 1px solid rgba(255,255,255,0);
  border-radius: 0;
  text-wrap: none;
  vertical-align: middle;
align-items: center;

}

.F_C_item_text:hover{
 /* background-color: rgba(0,0,0,.5);
  border-left: 1px solid rgba(255,255,255,.5);
  border-right: 1px solid rgba(255,255,255,.5);
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,1);
  border-radius: 0.25rem;
  box-shadow: 2px 2px 5px 0 rgba(255,255,255,.5);
  */
}
.F_C_item_text>i{
  width: 1rem;
  height: 1rem;
}

.footer_copy{
  display: flex;
  width: 100%;
  height: auto;
  background-color: transparent;
  /*
  justify-content: flex-end;  flex-start
   */
  justify-content: center;
  text-align: center;
  padding-bottom: 0.5rem;
}
.footer_copy >span{
  display: flex;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  text-align: center;
  font-weight: 400;
  font-size: 0.75rem;
}

.footer_pol{
  display: flex;
  width: 100%;
  height: auto;
  background-color: transparent;
  justify-content: center;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  /*
  justify-content: flex-start;
   */
  text-align: center;
}
.footer_pol >span{
  display: flex;
  text-align: center;
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0);
  /*border-radius: 0;
  box-shadow: 2px 2px 5px 0 rgba(255,255,255,0);
  */
}
.footer_pol >span:hover{
  background-color: rgba(0,0,0,.5);
  border-bottom: 1px solid rgba(210,74,68,.8);
  color: rgba(210,74,68,1);
  /*
  border-radius: 0.15rem;
  box-shadow: 2px 2px 5px 0 rgba(255,255,255,.3);
  */
}

@media only screen and (max-width: 499px){
  .footer_cont{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
  }

}
@media only screen and (min-width: 500px){
  .footer_cont{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
  }
}
.pg_nav_itm:hover{
  cursor: pointer;
}


.Scroller_up{
  display: block;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  right: 1.25rem;
  bottom: 2.25rem;
  background-color: rgba(0,0,0,.85);
  background-image: url("../img/scroller_up.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255,255,255,1);
  border-radius: 100%;
  box-shadow: 1px 1px 3px 0 rgba(7, 218, 246, .5);
  z-index: 10;
}
.Scroller_up .tooltiptext {
  visibility: hidden;
  width: 4rem;
  background-color: rgba(0,0,0,0.75);
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 2px;
  font-size: 0.8rem;

  /* Разместите всплывающую подсказку */
  position: absolute;
  z-index: 1;
  top: 102%;
  right: 50%;
}
.Scroller_up:hover .tooltiptext {
  visibility: visible;
}
.Scroller_up:hover{
  right: 1rem;
  bottom: 2rem;
  width: 3rem;
  height: 3rem;
  cursor: pointer;
  background-color: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,1);
  border-radius: 50% 50% 50% 50% / 70% 70% 20% 20%;
  box-shadow: 1px 1px 10px 0 rgba(7, 218, 246, .75);
}
.Modal_Div{
  display: block;
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem - 4px);
  height: calc(100% - 1rem - 4px);
  max-width: calc(100% - 1rem - 4px);
  max-height: calc(100% - 1rem - 4px);
  overflow: auto;
  background-color: rgba(36,36,42,.85);
  border: 2px solid rgba(255,255,255,1);
  box-shadow: 3px 3px 5px 0 rgba(255,255,255,.5);
  color: rgba(255,255,255,1) ;
  z-index: 2001;
}
a.Modal_Div_a:link ,
a.Modal_Div_a:visited,
a.Modal_Div_a:active
{ text-decoration: none;   font-weight: 500; color: #ffffff;}
a.Modal_Div_a:hover { text-decoration: none;   font-weight: 600; color: #d24a44;}


.Modal_Div_bg{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  color: rgba(255,255,255,1) ;
  z-index: 2000;
}
.Modal_Div_Close{
  display: block;
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  background-color: rgba(255,0,0,.5);
  background-image: url("../img/close-x.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(255,255,255,.5);
  box-shadow: 3px 3px 5px 0 rgba(100,100,100,.8);
  color: rgba(255,255,255,1) ;
  z-index: 2002;
}
.Modal_Div_Close:hover{
  cursor: pointer;
  top: 1rem;
  left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(255,0,0,.8);
  border: 2px solid rgba(255,255,255,1);
  box-shadow: 3px 3px 5px 0 rgba(255,255,255,.8);
  color: rgba(255,255,255,1) ;
  z-index: 2002;
}

a.cont_a:hover, a.cont_a:visited, a.cont_a:link, a.cont_a:active{
  color: #FFFFFF;
}
a:hover, a:visited, a:link, a:active{
  text-decoration: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.Company_page{

}
.imap{
  display: flex;
  box-sizing: border-box;
  width: 95%;
  padding: 0.5rem;
  /*
  background-color: rgba(0,0,0,.5);
   */
  background: rgba(255,255,255,0.01);
  height: auto;
  flex-direction: row;
  gap: 0.5rem;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 0.25rem;
  /*
  box-shadow: 3px 3px 5px 0 rgba(255,255,255,.5), 0 0 3px 0 rgba(255,255,255,.85) ;
   */
}
.imap-text{
  display: flex;
  width: max(20%,16rem);
  height: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}
.imap-text>h3{

}
.imap-text>img{
  width: 2rem;
  height: auto;
  margin: 0.5rem;
  -webkit-filter: drop-shadow( 2px 2px 5px rgba(7, 218, 246, 0.75));
  filter: drop-shadow( 2px 2px 5px rgba(7, 218, 246, 0.75));
}
.imap-text>p{
margin-top: 0.5rem;
  text-align: center;

}
.ya_map{
  display: flex;
  width: calc(100% - max(20%,16rem));
  height: 250px;
  background-image: url("../img/I/my-map.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid rgba(255,255,255,1);
  border-radius: 0.25rem;
  /*
  box-shadow: 3px 3px 5px 0 rgba(255,255,255,.5), 0 0 3px 0 rgba(255,255,255,.85) ;
   */
}

@media only screen and (max-width: 799px){
  .imap {
    flex-direction: column-reverse;
  }
  .imap-text{
    width: 100%;
    flex-direction: row;
  }
  .ya_map{
    width: 100%;
  }
}
@media only screen and (min-width: 800px){
  .imap {
    flex-direction: row;
  }
  .imap-text{
    width: max(20%,16rem);
    flex-direction: column;
  }
  .ya_map{
    width: calc(100% - max(20%,16rem));
  }
}

.ip_l_menu{
  display: flex;
  position: absolute;
  right:0;
  top: 0;
  width: 17rem;
  margin-top: calc(2.25rem + 2px);
  height: auto;
  min-height: calc(7 * 2rem + 9px);
  max-height: calc(100 * var(--vh) - 3rem - 9px);
  background-color: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.2);
  z-index: 1000;
  box-shadow: 3px 3px 5px 0 rgba(0,0,0,.5), 0 0 3px 0 rgba(0,0,0,.85) ;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.ip_l_sub_menu{
  display: flex;
  width: calc(100% - 2px);
  height: auto;
  padding-right: 0.5rem;
  flex-direction: column;
}

.ip_l_menu_item{
  display: flex;
  width: calc(100% - 0.25rem - 4px);
  height: 1.5rem;
  border: 1px solid rgba(255,255,255,0.2);
  margin: 0.125rem;
  padding: 0.125rem;
  color: rgba(255,255,255,1);
  text-align: left;
  justify-content: left;
  font-weight: 500;
}
.ip_l_sub_menu>.ip_l_menu_item{
  display: flex;
  width: calc(100% - 1.25rem - 4px);
  margin-left: 0.5rem;
justify-content: right;
  text-align: right;
  font-weight: 300;
  font-style: italic;
}

.ip_l_menu_item:hover{
  background-color: rgba(255,255,255,1);
  color: rgba(0,0,0,1);
  cursor: pointer;
}
.ip_l_menu_item:hover>a.cont_a:hover, .ip_l_menu_item:hover>a.cont_a:visited, .ip_l_menu_item:hover>a.cont_a:link, .ip_l_menu_item:hover>a.cont_a:active{
  color: #000;
}

.Product_long_item_cont{
  display: flex;
  flex-direction: column;
  width: 95%;
  margin-top: 3rem;
  height: auto;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 1rem;
  padding: 1rem 0;
  background: rgba(255,255,255,0.01);
}
.Product_long_item{
  box-sizing: border-box;
  display: flex block;
  flex-direction: column;
  width: 100%;
  height: auto;
  background: transparent;

  /*
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.3);
   */
}
.Product_long_item >h2{
  display: flex;
  width: calc(100% - 2.25rem);
  padding-left: 2rem;
  text-align:left;
  margin-bottom: 0.5rem;
}

@media only screen and (max-width: 599px){
  .Product_long_item >h2 {
font-size: 1.2rem;
  }
}
@media only screen and (min-width: 600px){
  .Product_long_item >h2 {
    font-size: 1.5rem;
  }
}



.Product_long_item >p{
  display: inline-flex;
  width: calc(100% - 3rem);
  text-indent: -1.5em;
  text-align:justify;
  padding-left: 2rem;
  margin: 0.25rem 0.5rem;
}

.Product_long_item >ul{
  list-style-type: square;
  margin-block-start: 0.25em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

.work_url, .demo_url{
  display: inline-block;
  width: max-content;
  font-weight: 500;
  margin-left: 1rem;
}
.work_url::before{
content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background-image: url("../img/url_b.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

}
a.work_url:link ,
a.work_url:visited,
a.work_url:active
{ text-decoration: none;   font-weight: 500; color: rgba(7, 218, 246, 0.75);}
a.work_url:hover { text-decoration: none;   font-weight: 500; color: #d24a44;}
a.work_url:hover::before {   background-image: url("../img/url_red.svg");}

.demo_url::before{
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  background-image: url("../img/url_b.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

}
a.demo_url:link ,
a.demo_url:visited,
a.demo_url:active
{ text-decoration: none;   font-weight: 500; color: rgba(7, 218, 246, 0.75);}
a.demo_url:hover { text-decoration: none;   font-weight: 500; color: #d24a44;}
a.demo_url:hover::before {   background-image: url("../img/url_red.svg");}





.Srv_long_item_cont{
  display: flex;
  flex-direction: column;
  width: 95%;
  margin-top: 3rem;
  height: auto;
  border: 1px solid rgba(255,255,255,0);
  border-radius: 1rem;
  padding: 1rem 0;
  /*
  background: rgba(255,255,255,0.01);
   */
}
.Srv_long_item{
  box-sizing: border-box;
  display: flex block;
  flex-direction: column;
  width: 100%;
  height: auto;
  background: transparent;

  /*
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.3);
   */
}
.Srv_long_item >h2{
  display: flex;
  width: calc(100% - 2.25rem);
  padding-left: 2rem;
  text-align:left;
  margin-bottom: 0.5rem;
}

@media only screen and (max-width: 599px){
  .Srv_long_item >h2 {
    font-size: 1.2rem;
  }
}
@media only screen and (min-width: 600px){
  .Srv_long_item >h2 {
    font-size: 1.5rem;
  }
}



.Srv_long_item >p{
  display: inline-flex;
  width: calc(100% - 3rem);
  text-indent: -1.5em;
  text-align:justify;
  padding-left: 2rem;
  margin: 0.25rem 0.5rem;
}

.Srv_long_item >ul{
  list-style-type: square;
  margin-block-start: 0.25em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 40px;
}

.container {
  width: 95%;
  margin: 1rem auto;
  background-color: transparent;
}

.itc-slider__item {
  flex: 0 0 100%;
  max-width: 100%;
  aspect-ratio: 6 / 4;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  background-image: url("../img/1x1.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.itc-slider__item >.itc-slider__item_img {
  display: flex;
  justify-content: center;
  align-items: end;
  font-size: 1rem;
  background-color: rgba(0,0,0,.8);
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 2px 2px 2px 0 rgba(255,255,255,0.1);
}
.itc-slider__item >.itc-slider__item_img>.itc-slider__item_txt{
  width: calc(100% - 4px);
  height: auto;
  background-color: rgba(36,36,42,.85);
  color: rgba(255,255,255,1);
  display: flex block;
  padding: 2px;
  /*
  position: absolute;
   */
  font-size: 1rem;
  /*bottom: 5px;
  left: 0.5rem;
  border: 1px solid rgba(36,36,42,.85);
  */
  border-radius: 0.2rem;
}
.itc-slider__item >.itc-slider__item_img:hover {
  border: 1px solid rgba(255,255,255,1);
  box-shadow: 2px 2px 5px 0 rgba(255,255,255,0.7);
  cursor: ew-resize;
}


@media only screen and (max-width: 599px){
  .itc-slider__item {
    flex: 0 0 calc(100% / 1);
    max-width: calc(100% / 1);
  }
  .container{
    aspect-ratio: 6 / 4;
  }
}
@media only screen and (min-width: 600px) and (max-width: 999px){
  .itc-slider__item {
    flex: 0 0 calc(100% / 2);
    max-width: calc(100% / 2);
  }
  .container{
    aspect-ratio: 12 / 4;
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1499px){
  .itc-slider__item {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
  }
  .container{
    aspect-ratio: 18 / 4;
  }
}

@media only screen and (min-width: 1500px){
  .itc-slider__item {
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
  }
  .container{
    aspect-ratio: 24 / 4;
  }
}

/*
.itc-slider__item:nth-child(1) >.itc-slider__item_img {
  background-image: url("../img/ref/img1.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.itc-slider__item:nth-child(2) >.itc-slider__item_img{
  background-image: url("../img/ref/img2.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.itc-slider__item:nth-child(3) >.itc-slider__item_img{
  background-image: url("../img/ref/img3.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.itc-slider__item:nth-child(4) >.itc-slider__item_img{
  background-image: url("../img/ref/img4.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.itc-slider__item:nth-child(5) >.itc-slider__item_img{
  background-image: url("../img/ref/img5.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
*/