/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}


/* USH styles */

/* 

1. General styles
2. Main slides
3. Rest

*/

@font-face {
  font-family: segoe;
  src: url(/assets/fonts/segoe/SegoeUI.ttf);
}

html { font-family: segoe; font-size:10px; }
@media only screen and (max-width: 359px) { html {font-size: 8px;} }
@media(min-width:1500px){ html { font-size: 14px; } } /*12*/
@media(min-width:1980px){ html { font-size: 18px; } } /*16*/

/* 1. General styles */

#topfix { width:420px; height: 30px; position: absolute; top:10px; right:70px; z-index: 2; }
#langs { cursor:pointer; overflow:hidden;  list-style: none; position: relative; padding: 0; margin:0; margin-right:20px; height: 28px; border:1px solid #c4c4c4; border-radius: 15px;  width:31px; padding-left:0px; float:right; transition: 0.2s; }
#langs:hover {  width:180px; padding-left:5px; transition: 0.4s;   }
#langs li { float: left; display: none; text-align: center; height:28px; line-height: 28px; width:28px; margin:0 1px;  }
#langs:hover li { display: inline-block; transition-delay:0.4s; transition: 0.2s; }
#langs li a { color:#c4c4c4; text-decoration: none; transition: 0.3s; }
#langs li:hover a { color:#414141; transition: 0.3s; }
#langs li.act a { color:#414141; font-weight: bold; }
#langs li#ico { display: inline-block; position: absolute; top:0px; right:1px; }
#langs li#ico svg { width:25px; height:25px; margin:1.5px; fill:none; stroke: #414141; }
#topfix #ffp { width:200px; color:#414141; text-decoration: none; display: inline-block; height:30px; line-height: 30px; float:right; }

/*#topfix.inv #langs { border-color: #fff; }
#topfix.inv #langs li a, #topfix.inv #langs li:hover a, #topfix.inv #langs li.act a, #topfix.inv #ffp { color:#fff; }
#topfix.inv #langs li svg { stroke:#fff; }*/


#rightfix { width:80px; height:100%; z-index: 999; background: #fff; border-left:1px solid #ddd; min-height: 100%; max-height: 100%; position: fixed; right:0; top:0;  }
#rightfix #hamb {display: none;}
#menu { list-style: none; width:100%; padding:0; margin:0; background: #fff; text-transform: uppercase; }
#menu li { width:80px; height:12vh; display: block; position: relative; }
#menu li a { transition:0.4s; font-weight: bold; background: #fff; height:100px; line-height: 100px; text-align: right; padding-right: 20px; text-decoration: none; color:#414141; width: 550px; display: inline-block; position: absolute; right:-560px; top:10px; font-size:4.7rem; }
#menu li span { transform: rotate(-90deg); font-size: 1rem; /*font-size: 1.2rem;*/ transition-delay:0.2s; transition: 0.2s; color:#C4C4C4; display: block; text-align: center; position: absolute; width:120px; height:40px; line-height: 40px;  top:40px; left:-20px; }
#menu li:hover span { opacity: 0; transition:0.2s; }
#menu li:hover a { right:0; transition-delay:0.2s; transition-property: left; transition: 0.3s; }
#menu:hover { box-shadow: -2080px 0px 0px 2000px rgba(255,255,255,1); transition: 0.3s; }

#scrl { width:1px; opacity:0;  height:calc(100% - 100px); background:#c4c4c4; z-index: 999; position: fixed; top:50px; left:30px; }
#scrl #inf { display: block; font-size:14px;  width:30px; height:20px; line-height: 20px; color:#c4c4c4; position: absolute; left:-11px; top:-30px; }
#scrl #progress { width:3px; background:#c4c4c4; position: absolute; top:0px; left:-1px; transition: 0.2s; }
#scrl.act { opacity: 1; transition: 0.3s; }
#scrl.sl1 { opacity: 0 !important; }
#scrl.sl2 #progress { height:17%; }
#scrl.sl3 #progress { height:34%; }
#scrl.sl4 #progress { height:51%; }
#scrl.sl5 #progress { height:67%; }
#scrl.sl6 #progress { height:83%; }
#scrl.sl7 #progress { height:100%; }

/*#scrl.inv {background: #fff;}
#scrl.inv #inf {color: #fff;}
#scrl.inv #progress {background: #fff;}*/


/* Main slides */

#sl { position: relative; height:100vh; width: calc(100% - 80px); margin-right: 80px; overscroll-behavior: none; overflow: hidden; }
#sl .sl {  position: absolute; width:100%; height:100%; left:0; top:0; }
#sl .sl:nth-child(n+2) { top:100%; opacity: 1; }
#sl .sl:last-child { top:-100%; }
#sl .sl.movet { top: -100%; transition: 0.3s; }
#sl .sl.moveb { top: 100%; transition: 0.3s; }
#sl .sl.next { top: 0; transition: 0.3s; }

#sl .ld { display: none; position: absolute; visibility: hidden; opacity: 0; transition: .2s; top:0; left:0; background: #fff; z-index: 9; width:100%; height:100vh; display: block; }
#sl .ldhide { visibility: hidden; opacity: 0; transition: 0.3s; }
#sl .ld span { width:90%; height:80vh; color:rgba(135,135,135,0.3); text-align: center; font-size: 60vh; left:5%; top:10vh; position: absolute; display: inline-block; }

@media only screen and (max-width: 999px) {
  #sl .ld span { font-size:30vw; line-height: 80vh; }
}

#sl .ld span { animation: glow 2.5s infinite alternate; }

#sl .ld span::before {
    box-sizing: border-box;
    position: absolute;
    z-index: -1;
    bottom: 0;
    overflow: hidden;
    transition: all 400ms ease-in-out;
    content: attr(data-hover);
    background: #fff;
    color: #ccc;
    height: 100%;
    /*animation: glow 2.5s infinite alternate;*/
}

@keyframes glow {
    to {
        height: 0vh;
    }
}

/* mobile features */
@media only screen and (max-width: 999px) {
  #rightfix {display:block; transition: 0.2s; width:50px; height:50px; min-height: 50px; max-height: 50px; border-left:0;}
  #rightfix.act {display:block; transition: 0.4s; width:100%; height:100%; min-height: 100%; max-height: 100%; border-left:0; background-color: #fff; overflow: hidden;}
  #rightfix #hamb {display: block; width:40px; height:40px; margin:5px 5px 0 0; float:right;}
  #rightfix #hamb svg {width:30px; height:30px; margin:5px; fill:#444;}
  /*#rightfix #hamb.inv svg {fill:#fff;}*/
  #rightfix #hamb #closesvg svg{fill:#000 !important;}
  #rightfix #hamb #closesvg {display: none;}
  #rightfix.act #hamb #closesvg {display: block;}
  #rightfix.act #hamb #hamburgersvg {display: none;}

  #menu {visibility: hidden; opacity: 0;}
  #rightfix.act #menu {visibility: visible; opacity: 1; transition: 0s; transition-delay: 0.4s; margin-top:50px;}
  #menu li{ height:40px; width:100%; }
  #menu li span{display: none; }
  #menu li a {display:block;position:relative;top:0;right:0;height:40px;width:100%;line-height: 40px; font-size: 1.6rem; text-align: center; }

  #topfix {width:calc(100% - 50px); height:40px; top:10px; left:10px;}
  #topfix #langs { width:152px; float:left; }
  #topfix #langs li { display: inline-block; }
  #topfix #langs li:nth-child(6) { display: none; }
  #topfix #ffp {width:120px; float:left; padding:0 0 0 20px;}
  #scrl { top:45px; left:12px; height:calc(100% - 70px); }
  #scrl #inf { left:0px; }
  #sl {width:100%; margin-right: 0px;}
}

@media only screen and (max-width: 359px) { 
  #topfix #ffp {display: none;}
  #scrl #inf {
    left: -7px;
    font-size: 10px;
  }
}

#logo { display: flex; align-items: center; justify-content: center; }
#logo a { display: flex; align-items: center; justify-content: center; width: 100%; }
#logo a img { max-width: 100%; height: auto; object-fit: contain; }

#sl1 {  }
#sl1 #logo { height:15vh; width: 300px; }
#sl1 #logo svg { width:120px; height:11vh; fill:#414141; margin:2vh 90px; }
#sl1 img { width:50%; float:left; max-height: calc(100vh - 300px); }
#sl1 h1 { width:calc(50% - 85px); margin:0; margin-top: -20px; float:right; padding:0 20px; font-size: 5rem; }
#sl1 b { display: block; width:calc(50% - 70px); padding:0 0 0 60px; margin-top:1%; font-weight: normal; font-size:1.6rem; height:60px; line-height: 60px; float:right; }
#sl1 #sl1-contacts { width:calc(50% - 170px); height:12.5vh; position: absolute; bottom:calc(100vh - 85vh); right:0px; padding:0 100px 0 60px; float:right; }
#sl1 #sl1-contacts span { border-bottom: 1px solid #c4c4c4; display: block; height:30%; line-height: 30%; margin-bottom:10px; font-size: 1.4rem; color:#414141; }
#sl1 #sl1-contacts a { text-decoration: none; transition: 0.4s; display: inline-block; width:50px; height: 50px; border-radius: 50%; }
#sl1 #sl1-contacts a:nth-child(2):hover { background: #444; }
#sl1 #sl1-contacts a:nth-child(3):hover { background: #675ca8; }
#sl1 #sl1-contacts a:nth-child(4):hover { background: #3b5998; }
#sl1 #sl1-contacts a:nth-child(5):hover { background: #d6249f; background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF); }
#sl1 #sl1-contacts a:nth-child(6):hover { /*background: #25D366;*/ background: radial-gradient(circle at top left, #fe2c55, transparent), radial-gradient(circle at bottom right, #25f4ee, transparent), #000; }
#sl1 #sl1-contacts a:nth-child(7):hover { background: #c4302b;  }
#sl1 #sl1-contacts a:nth-child(8):hover { background: #1E90FF; }
#sl1 #sl1-contacts a:hover { transition:0.2s; }
#sl1 #sl1-contacts a svg { fill:none; stroke: #414141; transition: .4s; width:30px; height:30px; margin: 10px; }
#sl1 #sl1-contacts a:hover svg { fill:none; stroke:#fff; transition: 0.2s; }
#sl1 #scroll { width:1.5%; height:6.5%; position: absolute; left:calc(50% - 15px); bottom:3%; }
#sl1 #scroll svg { width:100%; height:100%; }

#video-bg {
    position: absolute;
    /*top: 0;
    right: 0;
    bottom: 0;
    left: 0;*/
    overflow: hidden;
    z-index: 1;
    background: url(/assets/img/sl1img-pool2.jpg) no-repeat;
    background-position: center center;
    background-size: contain;
    cursor: pointer; width:50%; height:50vh; top:5%; left:25%; position: absolute; display: block; z-index: 3;
}

#video-bg img { display: none; }

#video-bg > video {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
    width: auto;
    height: auto; 
}

 @supports (object-fit: cover) {
     #video-bg > video {
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: cover;
     }
 }

@media(min-width:1500px){
  #sl1 #sl1-contacts a { width:65px; height:65px; }
  #sl1 #sl1-contacts a svg { width:35px; height:35px; margin:15px; }
}
@media(min-width:1980px){
  #sl1 #sl1-contacts a { width:80px; height:80px; }
  #sl1 #sl1-contacts a svg { width:45px; height:45px; margin:17.5px; }
}

@media only screen and (max-width: 999px) {
  #sl1 #logo {         
    height: 15vh;
    width: 150px;
    margin: 10px auto 10px auto;
  }

  #sl1 img {width:100%; float:none; max-height: 40vh; object-fit: cover;}
  #sl1 h1 {width:calc(100% - 30px);margin: 0;margin-top:0px;float: none;padding: 10px 15px 10px 15px;font-size: 2rem;}
  #sl1 b {display: block;width:calc(100% - 30px);padding: 5px 15px;margin-top: 0px;font-weight: normal;font-size: 1.6rem;height: 60px;line-height: 20px;float: none;}
  #sl1 #scroll {display:none;}

  #sl1 #sl1-contacts {
    width: calc(100% - 30px);
    height: 60px;
    position: absolute;
    bottom: 60px;
    right: 0px;
    padding: 0 15px;
    float: right;
    text-align: left;
  }

  #sl1 #sl1-contacts span { height:30px; line-height: 30px; text-align: left; padding:0 0px; }
  #sl1 #sl1-contacts a { width:45px; height:45px; }
  #sl1 #sl1-contacts a svg { width:25px; height:25px; margin:10px; }
}

@media only screen and (max-width: 359px) {
  #sl1 #sl1-contacts a { width:36px; height:36px; }
  #sl1 #sl1-contacts a svg { width:20px; height:20px; margin:8px; }
  #sl1 #logo svg {height:9vh;}
  #sl1 img {width:80%; margin:0 auto; display: block;}

}

#sl2 { background: #626262; }
#sl2 > img#storage { cursor: pointer; width:40%; top:11%; left:30%; position: absolute; display: block; z-index: 3; }
#sl2 > img#tap { cursor: pointer; position: absolute; top:14%; left:40%; width:20%; display: block; z-index: 4; opacity: 0.5; }
#sl2 #layer { width:100%; height: 100vh; z-index: 10; visibility: hidden; opacity:0; transition:.2s; background: #626262; position: absolute; top:0; left:0; }
#sl2 #layer.act { visibility: visible; opacity: 1; transition:.4s;  }
#sl2 #layer h2{ font-size: 4rem; color:#fff; margin:0 auto; margin-top: 2%; width:80%;}
#sl2 #layer a{ font-size: 2rem; text-decoration: none; color:#fff; display: block; position: absolute; bottom:15vh; left:8vw; width:60%; }
#sl2 #sl2wrap { visibility: hidden; opacity: 0; width:80%; height:50vh; top:25vh; left:calc(15% - 40px); position: absolute; z-index: 99999; }
#sl2 #sl2wrap iframe{ width:100%; height:50vh; overflow: hidden; border:0; }
#sl2 #sl2wrap.act { visibility: visible; opacity: 1; transition-property: opacity; transition: 0.9s; }
#sl2 #aboutus { height:50vh; width:40%; background: #efefef; position: absolute; bottom:0; left:0; }
#sl2 #aboutus span { display: block; width:80%; heigh:10vh; line-height: 5vh; font-size: 1.6rem; border-bottom:1px solid #c4c4c4; margin:30% auto 0 auto;  }
#sl2 #aboutus ul { list-style: none; padding: 0; margin: 0; width:80%; margin:0 auto; margin-top:20px; }
#sl2 #aboutus ul li { width: 33.333333333%; float:left; text-align: center; }
#sl2 #aboutus ul li i { width:50px; height:50px; background: #ddd; display: inline-block; border-radius: 50%; }
#sl2 #aboutus ul li b { display: block; height: 40px; line-height: 20px; text-align: center; font-weight: normal; font-size: 1.2rem; }
#sl2 #aboutus ul li:nth-child(3) i { background: #4b7e56; }
#sl2 #aboutus ul li:last-of-type {color: #4b7e56;}
#sl2 #aboutus ul li svg { fill:none; stroke:#414141; width:30px; height:30px; margin:10px; }
#sl2 #aboutus ul li:last-of-type svg { fill:#fff; stroke:none; }
#sl2 #production { height:50vh; width:60%; background: #e3e3e3; position: absolute; bottom:0; right:0; }
#sl2 #production h2{ font-size: 4rem; margin-top: 9%; width: 90%; margin-left: auto; margin-right: auto; }
/*#sl2 #production h2::first-letter { font-size: 8rem; }*/
#sl2 #production .sl2inf{ font-size: 1.4rem; width: 90%; margin-left: auto; margin-right: auto; }

@media(min-width:1420px){ .sl2inf{ font-size: 2rem; } }

@media only screen and (max-width: 999px) {
  #sl2 #video-bg { width:calc(100% - 0px); height:50vh; top:0px; left:0px; background-size: cover; }
  #sl2 > img#storage { width:80%; top:13%; left:10%; }
  #sl2 > img#tap { position: absolute; top:15%; left:30%; width:40%; }
  #sl2 #layer h2{ font-size: 2rem; color:#fff; margin:0 auto; margin-top:70px; width:80%;}

  #sl2 #sl2wrap { visibility: hidden; opacity: 0; width:80%; height:60vh; top:100px; left:10%; position: absolute; z-index: 99999; }
  #sl2 #sl2wrap iframe{ width:100%; height:60vh; overflow: hidden; border:0; }
  #sl2 #aboutus { height:18vh; margin-top:50vh; width:100%; position: relative; }
  #sl2 #aboutus span{ width:85%; height:30px; line-height:40px; padding:0 0px; border-bottom: 0; }
  #sl2 #aboutus ul{ margin-top:10px; width:100%; }
  #sl2 #aboutus ul li i { width:30px; height:30px; }
  #sl2 #aboutus ul li svg { fill:none; stroke:#414141; width:20px; height:20px; margin:5px; }
  #sl2 #production { height:calc(34vh - 28px); width:100%; position: relative; padding-top:10px; }
  #sl2 #production h2{ font-size: 2rem; margin-top:0px; width: 90%; margin-left: auto; margin-right: auto; }
  /*#sl2 #production h2::first-letter { font-size: 4rem; }*/
  #sl2 #production .sl2inf{ font-size: 1.4rem;}
}

@media only screen and (max-width: 359px) {
#sl2 #aboutus {
    height: 21vh;
    margin-top: 45vh;
}
}

#sl7 { background: #e5e5e5; }
#sl7 h2 { width:80%; margin:0 auto; text-align: left; font-size: 4rem; color:#414141; margin-top:2%; }
#sl7 h2 span { font-size: 8rem; }
#sl7 h3 { font-size: 1.4rem; font-weight:normal; width:80%; margin:0 auto; margin-top:15px; text-align: left; text-transform: uppercase; }
#sl7 #sl4wrap { width:100%; height:calc(100vh - 150px); margin:0 auto; position: absolute; left:0; bottom:20px; }
#sl7 #sl4wrap iframe{ width:100%; height:calc(100vh - 150px); overflow: hidden; border:0; }

#sl7 #sl4layer { width:100%; height: 100vh; z-index: 10; visibility: hidden; opacity:0; transition:.2s; background: #e5e5e5; position: absolute; top:0; left:0; }
#sl7 #sl4layer.act { visibility: visible; opacity: 1; transition:.4s;  }
#sl7 #sl4layer h2{ font-size: 4rem; color:#414141; margin:0 auto; margin-top: 2%; width:80%;}
#sl7 #sl4layer h3{ font-size: 1.4rem; color:#414141; margin:0 auto; margin-top: 1%; margin-bottom: 1%; width:80%;}
#sl7 #sl4layerwrap { width:80%; height:70vh; margin:0 auto; position: relative; }
#sl7 #sl4layer div.type{ float:left; position: relative; cursor: pointer; width:calc(50% - 60px); height:calc(35vh - 20px); margin:10px 30px; background: #fff; display: inline-block; background-position: center; background-size:cover; }
#sl7 #sl4layer div.type b{ display: block; background: rgba(255,255,255,0.8); color:#444; padding:10px; font-size: 1.4rem; width: calc(100% - 20px); position: absolute; bottom: 0; left: 0; text-align: center;  }
#sl7 #sl4back { font-size: 1.4rem; text-decoration: none; color:#444; display: block; width:60%; }

@media only screen and (max-width: 999px) {
  #sl7 #sl4layer h2{ font-size: 2rem; color:#444; margin:0 auto; margin-top:50px; width:80%;}
  #sl7 #sl4layerwrap { width:90%;}
  #sl7 #sl4layer div.type {width:calc(50% - 20px); margin:10px 10px;}
  #sl7 #sl4layer div.type b{ overflow: hidden; }

  #sl7 h2 { font-size: 2rem; margin-top: 60px; margin-bottom: 30px;}
  #sl7 h2 span { font-size: 4rem; }
  #sl7 h3 { }
  #sl7 #sl4wrap { width:100%; height:calc(100vh - 150px); bottom:0px; }
  #sl7 #sl4wrap iframe{ width:100%; height:calc(100vh - 150px); overflow: hidden; border:0; }
}

@media only screen and (max-width: 359px){
#sl7 h2 {
    margin-top: 70px;
    margin-bottom: 15px;
}
}


@media only screen and (max-width: 359px){
#sl7 h2 {
    margin-top: 70px;
    margin-bottom: 15px;
}
}


.sl8 { background: #fff; }
.sl8 .rinf { width:37%; margin-left:55%; height: 50vh; margin-top:10%; }
.sl8 .rinf h2 { text-align: left; font-size: 4rem; color:#414141; }
.sl8 .rinf h2 span { font-size: 8rem; }
/*#sl7 .linf > div { width:70%; margin:0 auto; }*/
.sl8 .rinf > div p{ font-size: 1.4rem; text-align: justify; }
.sl8 .rinf > a{ font-size: 1.8rem; font-weight: bold; margin-top: 2%; color:#414141; text-decoration: none; text-transform: uppercase; text-align: right; display: block; height:6vh; line-height: 6vh; }
.sl8 div.anim { 
  display: block;
    filter: grayscale(80%) blur(0px);
  -webkit-filter: grayscale(80%) blur(0px); /* Safari support */
  background-repeat: no-repeat; background-size:contain; background-position: center center;  width:45%; height:100vh; position: absolute; top:0; left:5%; }
.sl8 #features { height:34vh; width:50%; position: absolute; bottom:0; right:0; }
.sl8 #features span { display: block; width:80%; heigh:10vh; line-height: 5vh; font-size: 1.6rem; border-bottom:1px solid #c4c4c4; margin:0 auto 0 auto; }
.sl8 #features ul { list-style: none; padding: 0; margin: 0; width:80%; margin:0 auto; margin-top:20px; }
.sl8 #features ul li { width: 25%; float:left; text-align: center; }
.sl8 #features ul li i { width:70px; height:70px; background: #fff; display: inline-block; border-radius: 50%; }
.sl8 #features ul li b { display: block; height: 20px; line-height: 20px; text-align: center; font-weight: normal; font-size: 1.2rem; }
.sl8 #features ul li:last-of-type i { background: #4b7e56; }
.sl8 #features ul li:last-of-type {color: #4b7e56;}
.sl8 #features ul li svg { fill:none; stroke:#414141; width:40px; height:40px; margin:15px; }
.sl8 #features ul li:last-of-type svg { fill:#fff; stroke:none; }

/*@media(min-width:1420px){ .sl8 .rinf > div p{ font-size: 2rem; } }*/

@media only screen and (max-width: 999px) {
  .sl8 div.anim {
    width: 100%;
    height: calc(100vh - 500px);
    max-height: 100vw;
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top:unset;
    bottom:0px;
    left:0;
    background-size: cover;
}
  .sl8 .rinf { width:80%; margin-left:0%; height: auto; margin:0 auto; margin-top:200px; }
  .sl8 .rinf h2 { font-size: 2rem; }
  .sl8 .rinf h2 span { font-size: 4rem; }
  .sl8 #features { width:100%; position: relative; height: auto; }
  .sl8 #features ul { width:90%; }
  .sl8 #features ul li i { width:50px; height:50px; }
  .sl8 #features ul li svg { width:30px; height:30px; margin:10px; }
  .sl8 #features ul li b { line-height: 15px; }
  .sl8 .rinf { margin-top: 90px; }
}

@media only screen and (max-width:359px){
.sl8 div.anim {
    width: 100%;
    height: calc(100vh - 600px);
    max-height: 100vw;
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    top:unset;
    bottom:0px;
    left:0;
    background-size: cover;
}

.sl8 .rinf { margin-top: 70px; }

}

/* page styles */
#pagelogo { height:12vh; line-height: 12vh; width:15%; text-align: center; margin:0 auto; }
#pagelogo a { display: flex; height: 12vh; align-items: center; justify-content: center; }
#pagelogo a  { display: flex; align-items: center; justify-content: center; width: 100%; }
#pagelogo a img { width:80%; height: auto; display: flex; object-fit: contain; margin:1vh auto; }

#pagecontent { min-height: 90vh; width:calc(86% - 80px); margin:0; margin-left: 7%; }

#pagecontent h1 { font-size: 3rem; }
#pagecontent article h2 { font-size: 2rem; }
#pagecontent article p { padding:2vh 0; text-align: left; font-size: 1.6rem; }
#pagecontent article img { margin-bottom: 2vh; }
#pagecontent article ul { list-style: none; }
#pagecontent article ul li { font-size: 1.6rem; }
#pagecontent article ul li::before {
  content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #000; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
  font-size: 25px;
  transform: translateY(4px);
}

@media only screen and (max-width: 999px) {
  #pagelogo {
      height: 60px;
      width: 100%;
      text-align: center;
      margin: 50px 0 20px 0;
  }
  #pagelogo a {height:60px;}
  #pagelogo a img { height: 105px; }
  #pagecontent { min-height: 70vh; width:90%; overflow-x: hidden; margin-left:0; margin:0 auto; }
}

#study h1 { text-align: center; margin-bottom: 3%; }
#study h2 { font-size: 7.6rem; color:#F6F6F6; margin-bottom: -13vh;}
#study p { padding:7vh 0; text-align: left; font-size: 1.6rem; }
#study p.ctxt { text-align: center; }
#study a { color:#414141; text-decoration: none; }
#study img.img1 { width:40%; float:right; margin:0 0 5% 5%; }
#study img.img2 { width:50%; float:left; margin:0 5% 12% 0; }
#study img.img3 { width:36%; float:right; margin:0 0 5% 5%; }

@media only screen and (max-width: 999px) {
  #study h1 {margin-bottom: 10px;}
  #study h2 {font-size:3rem; margin-bottom: -70px;}
  #study img.img1 { width:100%; }
  #study img.img2 { width:100%; }
  #study img.img3 { width:100%; }
}

#support h1 { text-align: center; margin-bottom: 3%; }
#support p { padding:1vh 0; text-align: left; font-size: 1.6rem; }
#support p.ctxt { text-align: center; }
#support a { color:#414141; text-decoration: none; }
#support #plans {  }
#support #plans .head { display: inline-block; width:16%; margin-left: 2%; margin-bottom: 2%; border-radius: 4px; text-align: center; font-size: 1.8rem; font-weight: bold; color:#fff; float:right; height:9vh; line-height: 9vh; }
#support #plans .head1{ background-color:#4496F5; }
#support #plans .head2{ background-color:#0E67CE; }
#support #plans .head3{ background-color:#0E3EBB; }
#support #plans .line { width:100%; min-height:5vh; clear:both; border-bottom: 1px solid #000;}
#support #plans .line span { color:#000; display: inline-block; width:45%; font-size:1.3rem; padding:0.5vh 0 0 0; }
#support #plans .line div.check { width:16%; min-height:5vh; text-align:center; margin-left: 2%; display: inline-block; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.25); float:right; }
#support #plans .line div.check i svg { height:3vh; margin:1vh auto; }
#support #plans .line div.check:nth-child(4) i svg { fill:#4496F5; }
#support #plans .line div.check:nth-child(3) i svg { fill:#0E67CE; }
#support #plans .line div.check:nth-child(2) i svg { fill:#0E3EBB; }
#support #plans .foot { height:10vh; line-height: 9vh; margin-bottom:5vh; }
#support #plans .foot a { display: inline-block; width:16%; margin-left: 2%; border-radius: 4px; text-decoration: none; text-align: center; font-size: 1.8rem; color:#C4C4C4; float:right; height:9vh; line-height: 9vh; }
#support #plans .foot a:hover { color:#000; font-weight:bold; transition: 0.4s; }

@media only screen and (max-width: 999px) {
#support p { font-size: 1.4rem; }
#support #plans { width:100%; }
#support #plans .head { width:30%; margin-right:1.2%; margin-left: 1.2%; font-size: 1.4rem; }
#support #plans .line { min-height:100px; padding-top:10px; }
#support #plans .line span { width:100%; }
#support #plans .line div.check { width:30%; margin-top:10px; margin-right:1.2%; margin-left: 1.2%; }
#support #plans .foot { height:50px; }
#support #plans .foot a { height:50px; width:30%; margin-right:1.2%; margin-left: 1.2%; }
}

#sale h1 { text-align: left; margin-bottom: 3%; margin-top: 3%; }
#sale p { padding:1vh 0; text-align: left; font-size: 1.6rem; }
#sale p.ctxt { text-align: center; }
#sale a { color:#414141; text-decoration: none; }
#prods {  }
#prods .prod img { float:left; width:40%; margin:0 5% 5% 0; }
#prods .swiper-container { float:left; width:40%; margin:0 5% 5% 0; }
#prods .swiper-container .swiper-slide img{ width:100%; margin-bottom:60px; }
#prods .swiper-container .swiper-slide span{ display: block; line-height: 14px; font-size: 1.3rem; text-align: left; position: absolute; bottom:35px; color:#666; }
.swiper-pagination { bottom:0px !important; }
.swiper-pagination-bullet { margin:4px 4px !important; opacity: 1; color:#444; }
.swiper-pagination-bullet-active { opacity: 1; margin: 2px 4px !important; background: #444; width:12px; height:12px;}
#prods .prod .inf { font-size:1.6rem; }
#prods .prod .inf h2{ font-size:3rem; }
#prods .prod .inf h2 span{ display: inline-block; position: relative; }
#prods .prod .inf h2 span #ic { width:20px; height:20px; line-height: 20px; font-size:15px; margin:0 2%; cursor: pointer; top:22%; right:-20%; position: absolute; display: inline-block; text-align: center; border-radius: 50%; color:#CB4C4E; border:1px solid #CB4C4E; }
#prods .prod a { display: inline-block; height:9vh; line-height: 9vh; float:right; font-size: 1.8rem; color:#C4C4C4; }
#prods .prod a:hover { font-weight:bold; transition: 0.4s; color:#000; }

@media only screen and (max-width: 999px) {
  #prods { margin-top:40px; }
  #prods .prod {margin-top:30px;}
  #prods .prod img { float:none; width:100%; }
  #prods .swiper-container { float:none; width:100%; }
  #prods .prod .inf h2{ font-size:2rem; }
  #sale p { font-size: 1.4rem; }
}

#aboutus { margin-top:5%; }
#aboutus p { padding:1vh 0; text-align: left; font-size: 1.6rem; }
#aboutus p.ctxt { text-align: center; }
#aboutus a { color:#414141; text-decoration: none; }
#aboutus .map {float:left; width:55%; height: auto; min-height: 570px; margin:0 5% 5% 0; }
#aboutus #sl1-contacts { width:calc(50% - 170px); height:12.5vh; position: absolute; bottom:calc(100vh - 82vh); right:0px; padding:0 100px 0 60px; float:right; }
#aboutus #sl1-contacts span { border-bottom: 1px solid #c4c4c4; display: block; height:30%; line-height: 30%; margin-bottom:10px; font-size: 1.4rem; color:#414141; }
#aboutus #sl1-contacts a { text-decoration: none; transition:.4s; display: inline-block; width:50px; height: 50px; border-radius: 50%; }
#aboutus #sl1-contacts a:hover { transition:.2s; }
#aboutus #sl1-contacts a:nth-child(2):hover { background: #444; }
#aboutus #sl1-contacts a:nth-child(3):hover { background: #675ca8; }
#aboutus #sl1-contacts a:nth-child(4):hover { background: #3b5998; }
#aboutus #sl1-contacts a:nth-child(5):hover { background: #d6249f; background: radial-gradient(circle at 33% 100%, #FED373 4%, #F15245 30%, #D92E7F 62%, #9B36B7 85%, #515ECF); }
#aboutus #sl1-contacts a:nth-child(6):hover { background: #25D366; }
#aboutus #sl1-contacts a:nth-child(7):hover { background: #c4302b; }
#aboutus #sl1-contacts a:nth-child(8):hover { background: #1E90FF; }
#aboutus #sl1-contacts a svg { fill:none; stroke: #414141; transition: .4s; width:30px; height:30px; margin: 10px; }
#aboutus #sl1-contacts a:hover svg { transition:.2s; fill:none; stroke: #fff; }
#aboutus .inf { width:40%; float:right; }
#aboutus .inf .row { position: relative; min-height:10vh;  padding-left:50px; font-size: 1.6rem; text-align: left; display: flex; align-items: center; justify-content: flex-start; }
#aboutus .inf .row i { display: inline-block; left:-10px; width:50px; height:50px; position: absolute; }
#aboutus .inf .row i svg { width:5vh; height:5vh; margin: 0 5px; fill:#4b7e56; }

@media(min-width:1500px){
  #aboutus #sl1-contacts a { width:65px; height:65px; }
  #aboutus #sl1-contacts a svg { width:35px; height:35px; margin:15px; }
}
@media(min-width:1980px){
  #aboutus #sl1-contacts a { width:80px; height:80px; }
  #aboutus #sl1-contacts a svg { width:45px; height:45px; margin:17.5px; }
}

@media only screen and (max-width: 999px) {
  #aboutus p { font-size: 1.4rem; }
  #aboutus .map { float:none; width:100%; margin:0 auto; min-height: 400px; }
  #aboutus .inf { width:100%; margin-top:40px; float:none; }
  #aboutus .inf .row i {left:10px;}
  #aboutus .inf .row i svg {width:20px; height:20px;}

  #aboutus .inf .row { height:40px; min-height: 40px; }

  #aboutus #sl1-contacts {
    width: 100%;
    height: 60px;
    position: relative;
    bottom: 0px;
    right: 0px;
    padding: 0;
    float: none;
    text-align: center;
    margin-bottom: 40px;
  }

  #aboutus #sl1-contacts span { height:30px; line-height: 30px; text-align: left; padding:0 15px; }
  #aboutus #sl1-contacts a { width:40px; height:40px; }
  #aboutus #sl1-contacts a svg { width:24px; height:24px; margin:8px; }
}

@media only screen and (max-width: 359px) {
  #aboutus #sl1-contacts a { width:32px; height:32px; }
  #aboutus #sl1-contacts a svg { width:20px; height:20px; margin:6px; }  
}

#foreign { margin-top:5%; }
#foreign h1{ text-align: center; }
#foreign i { display:block; width:80%; margin:0 auto;}
#foreign svg{ width:100%; height:100vh;}
#foreign a.download{ width:80%; display: block; text-align: center; margin:20px auto;}
#foreign p { padding:1vh 0; text-align: left; font-size: 1.6rem; }
#foreign p.ctxt { text-align: center; }
#foreign p a { color:#414141; text-decoration: none; }

#blog { width:90%; margin:5% auto 0 auto; }
.post { width:calc(33.33333% - 60px); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25); cursor: pointer; margin:0 30px 60px 30px; height:54vh; overflow: hidden; position: relative; float:left; }
.post .post-img{ width: 100%; height:30vh; background-size: cover; background-repeat: no-repeat; background-position: center center; }
.post .post-title { height:24vh; padding:2vh; font-size: 1.6rem; font-weight:bold; }
.post .post-title span { display: block; font-size:1.4rem; font-weight:normal; margin: 2vh 0; }
.post .post-info { background-color: rgba(255,255,255,0.95); width:100%; transition: 0.4s; top:50px; left:0; opacity: 0; z-index: 2; height:54vh; padding:0; font-size: 1.6rem; text-align: left; overflow-x: none; overflow-y: auto; position: absolute; }
.post .post-info p { margin:2vh; }
.post .post-info p a{ display: block; max-width: 100%; overflow: hidden; }
.post:hover .post-info { top:0; left:0; opacity: 1; transition: 0.4s; }

@media only screen and (max-width: 999px) {
  #blog {width:100%;}
  .post { width:calc(100% - 60px);}

  #foreign svg{ height:60vh; }
  #foreign p { font-size: 1.4rem; }
}

#form {width:80%; margin:10vh auto;}
#form b { display: inline-block; font-size:1.2rem;  width:calc(30%); margin:0 1.5%; }
#form b span { display: block; margin-bottom: 6%;}
#form input { height:5vh; width:90%; padding:1% 5%; border:1px solid #414141; }
#form button { height:5vh; width:100%; font-size:1.4rem;  padding:1%; background-color: #fff; color:#414141; border:1px solid transparent; }
#form .err{float:right; text-align: right; font-size:1.4rem; color:#CB4C4E; display: none;}


footer { height:70px; line-height: 70px; background: #414141; color:#fff; position: relative; box-shadow: 0px 20px 5px 5px #414141; }
footer .copy { padding:0 4%; font-size: 1.2rem; color:#fff; }
#foot-contacts { width:calc(50% - 170px); height:70px; text-align: right; padding-right:90px; position: absolute; right:0px; bottom:0; }
#foot-contacts a { text-decoration: none; margin:10px 0; transition: 0.2s; display: inline-block; width:50px; height: 50px; border-radius: 50%; }
#foot-contacts a:hover { background: #fff; transition: 0.3s; }
#foot-contacts a svg { fill:none; stroke: #fff; width:30px; height:30px; margin: 10px; }
#foot-contacts a:hover svg { fill:none; stroke: #414141; transition: 0.3s; }

@media only screen and (max-width: 999px) {
  #form { margin:0 auto; }
  #form b { width:100%; margin-bottom: 20px; }
  #form b:nth-child(3) span { display: none; }
  #form b:nth-child(3) { margin-bottom: 10px; }
  #form .err{ float:none; width:100%; text-align: center; }

  footer { margin-top:30px; height:150px; }
  footer .copy { font-size: 1.2rem; text-align: center; display: block; padding:20px; line-height: 15px; }

  #foot-contacts { width:100%; text-align: center; padding:0; margin-top: 10px; position: relative; }
  #foot-contacts a { width:40px; height:40px; }
  #foot-contacts a svg{ width:25px; height:24px; margin:8px; }
}

@media only screen and (max-width:359px){
  #foot-contacts a { width:32px; height:32px; }
  #foot-contacts a svg{ width:20px; height:20px; margin:6px; }
}

.bg-popup { position: absolute; visibility: hidden; opacity: 0; transition: .5s; cursor:pointer; top:0; left:0; z-index: 999; overflow-x: hidden; overflow-y: auto; background-color: rgba(0,0,0,0.8); width:100%; height:100vh; }
.bg-popup-show {visibility: visible; opacity: 1; transition: .5s;} 
.popup { width:500px; top:100px; padding:50px; margin-bottom: 100px; left:calc(50% - 300px); height:auto; min-height: 300px; background-color: #fff; position: absolute; }
.close-popup { cursor:pointer; width:50px; height:50px; position: absolute; top:0; right:0; }
.close-popup i svg{ width:26px; height:26px; margin:12px; fill:none; stroke:#c4c4c4; }
.icon-popup { width:60px; height:60px; background-color: #ddd; border-radius: 50%; position: absolute; left:calc(50% - 30px); top:-30px; }
.icon-popup i svg{ width:40px; height:40px; margin:10px; }

.popup-attent { width:700px; left:calc(50% - 400px); }
.popup-attent img { width:60%; float:left; }
.popup-attent p { font-size: 1.6rem; margin:5% 0; }
.popup-attent .icon-popup { background-color: #CB4C4E; }

.popup-sale .icon-popup { background-color: #CB4C4E; }

.popup-support .icon-popup { background-color: #0E67CE; }
.popup b.inf {font-size:1.4rem; text-align: center; display: block; padding:5% 0;}

.popup form {width:300px; margin:0 auto;}
.popup form .err{float:right; text-align: right; font-size:1.4rem; color:#CB4C4E; display: none;}
.popup form b {font-size: 1.4rem; font-weight: normal; display: block; padding:2% 0;}
.popup button { height:5vh; width:50%; float:right; font-size:1.8rem; font-weight: bold; padding:1%; background-color: #fff; color:#414141; border:1px solid transparent; }
.popup input[type=text] { height:5vh; width:90%; font-size:1.4rem; padding:1% 5%; border:1px solid #414141; margin-bottom: 6%; }
.popup form > div.chck { font-size: 1.6rem; cursor: pointer; padding:2% 0; }
.popup form > div.chck input[type=checkbox] { height:2vh; padding:5%; margin:2%; float:left; }
.popup select { height:6vh; width:100%; font-size:1.4rem; padding:2% 5%; border:1px solid #414141; margin-bottom: 6%; }


@media only screen and (max-width: 999px) {
.popup { width:300px; left:calc(50% - 160px); padding:50px 10px; }
.popup-attent img { width:100%; float:none;  }
.popup-attent p { width:90%; margin:5% auto; }
}

@media only screen and (max-width:359px){
  .popup { width:280px; left:calc(50% - 145px); padding:50px 5px; }
  .popup button { width:80px; display: block; float:none; }
  .popup form .err {float:none; text-align: left;}
  .popup input[type=text] { width:80%; }
}