/* dev depend */
/*! normalize.css v8.0.0 | 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;
}
/**
 * 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 */
  -webkit-text-decoration: underline dotted;
          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;
}
/* dev depend */
body {
    position: relative;
    font-family: 'Avenir', sans-serif;
    overflow-x:hidden;   
    margin:0; 
    padding:0;
}
body.no-scroll {
  overflow: hidden;
}
* { 
    box-sizing: border-box; 
}
.container {
    max-width: 1024px; 
    /* background:url('./images/background_grid.png'); */
    display: block;
    margin: 0 auto;
    position: relative;
    padding: 0 8pt;  
}
.container--gallery {
        max-width:1366px;
    }
.container--arch {
        max-width:100vw;
        padding:0;
    }
@media(min-width:1536px) {
.container {
        padding:0  
}
    }
.container::after {
    content:"";
    display: block;
    clear: both;
}
.icon {
    display:block;
}
.site-header {
    width:100%;
    height: auto;
    background-color:#23252C;  
    /* background:transparent; */
    display: block;
    position: relative; 
    top:0;
    left:0;
    z-index: 1;
    padding: 0 0;
  
}
@media(min-width:1024px) {
.site-header { 
        position: relative
  
}
    }
/* height:100px; */
.site-header__main-logo {
        display:block; 
        float:left;
        color:#fff;
        text-indent: -9999px;
        position: relative;
        z-index:2;
        margin-top:16pt;
        margin-bottom:12pt; 
        margin-left:12pt; 
        width:110px;
        height:32px;
      

    }
@media(min-width:1024px) {
.site-header__main-logo {
           margin-left:0pt
      

    }
    }
.site-header__menu-content {
    position: fixed;
    background-color:#23252C; 
    width:250px;
    height:100%;
    border-right:1px solid #454957;
    left:0;
    z-index:1;
    display:block; 
    transition:.2s all ease;
    transform:translateX(-100%);
  }
@media(min-width:1024px) {
.site-header__menu-content {
        position: relative;  
        float:right;
        border:none;
        transform:none;
        width:522px;
        background-color:transparent
  }
    }
.site-header__menu-content--visible {
      transform:translateX(0);
       transition:.2s all ease;
       z-index:1;
    }
.site-header::after {
    content:"";
    display: block;
    clear: both;
}
.main-head__menu {
    list-style: none;
    display:none;
    margin:0; 
    padding:0;
    }
@media(min-width:1024px) {
.main-head__menu {
        display:block
    }
    }
.main-head__menu .sub-menu {
        opacity:0;
        transform:translateY(10%);
        overflow: hidden;
        transition:.3s all ease;
        position: absolute;
        visibility:hidden;
        background-color:#fff;
        z-index: 999;
        }
.main-head__menu::after {
         content:"";
        display: block;
        clear: both;
    }
.main-head__menu li {
        display: block;
      
        transition: .2s all ease;
        position: relative;
   
    }
@media(min-width:1024px) {
.main-head__menu li {
            float:left
   
    }
          
           
        }
.main-head__menu li::before {
        content:'';
        display:block;
        transition: .3s all ease;
        background-color:#0FB8FC;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        width:100%;
        height:8px;
        transform:scaleY(0.5);
        z-index:-1;
        transition:.1s all ease;
        position: absolute;
        top:-2px;
        left:0;
        opacity:0;
    }
.main-head__menu li.current-menu-item::before  {
       opacity:1;
       transform:scaleY(0.5);
      
    }
.main-head__menu li.has-children::after {
        content: '';
        display:block;
        position: absolute;
        float:right;
        vertical-align: middle;
        background-color:red;
        width:12px;
        height:12px;
        right:-5px;
        top:50%;
        transform:translateY(-50%);
        background:url('./images/arrow.svg') center no-repeat;
       
    }
/* &__menu li.current_page_item a {
        
        color:#999;
        
    } */
.main-head__menu li a {
        color:#fff;
        text-decoration: none;
        display: block;
        font-size:14pt;
        padding: 32px 20px;
        padding-bottom:20px;
        font-weight:500;
       
       
    }
.main-head__menu li:hover::before {
    opacity:1;
   transform:scaleY(0.5);
   }
.main-head__menu li:hover a {
       color:#0FB8FC;
   }
.main-head__menu li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform:scaleY(0.5);
      
    }
.sub-menu li a {
font-size: 12pt;
color:#333;
}
.sub-menu li a:hover {
    background-color:#f0f5f5;
}
.sub-menu  {
    width:200%;
    border-radius: 3px;
    padding:10px;
}
.sub-menu li {
    width:100%;
}
.main-head__menu:hover li:not(:hover)  {
      
        opacity:0.6; 
     }
.main-head__menu:hover li:not(:hover)::before  {
        transition:.2s all ease;
        opacity: 0;
     }
.site-footer {
   
    position: relative;
    width:100%;
    background-color:#18191C;
    padding-bottom:24pt;
}
/* background:url('./images/micro_carbon.png') repeat;  */
.site-footer__flex-layout {
        display:flex;
        padding-top:24pt;
    }
.site-footer__flex-layout > div:nth-child(3)::before {
         display:none;
     }
.site-footer__flex-layout > div:nth-child(3) {
          border:none;
      }
.site-footer__flex-layout > div::before {
        content: "";
        position: absolute;
        width: 1px;
        height: 100%;
        border-right: 2px solid #141414;
        right: 0px;
        top: 0;
    }
.site-footer__flex-layout > div {
        position: relative;
        flex-basis:16%;
        margin-right:1rem;
        /* padding-left:1rem; */
        border-right:1px solid #252525;
    }
.site-footer__menu {
        margin: 0;
        padding:0;
        list-style:none;
        padding-top:20pt;
    }
.site-footer__menu li a {
          
            color:#fff;
            text-decoration:none;
            display:block;
            padding:5px 0px;
            font-size:12pt;
          
        }
.site-footer__menu li ul {
            margin:0;
            padding:0;
            list-style:none;
        }
.site-footer__title {
        
        color:#abbcc2;
        font-weight:500;
      
        font-size:24pt;
    }
.site-footer__logotip {
        width:48px;
        height:48px;
        display:block;
        background:url('./images/monogram2.svg') center no-repeat; 
        position: absolute;
        left:18vw;
        bottom:10px;
    }
.site-footer__arrow-to-top {
        position: absolute;
        right:48px;
        bottom:24px;
        cursor: pointer;
        display:block;
        z-index: 3;
    }
.site-footer__monogram {
      float:left;
       cursor: pointer;
    }
.site-footer p {
      padding:0;
      margin:0;
      color:#fefefe;
      text-align:center;
     padding-top:8pt;
      position: relative;
    
      
  }
.site-footer__about {
      padding:24pt 0;
      position: relative;
     
  }
.page-id-120 .site-footer {
    display: none;
}
.page-id-120 .site-header {
    display: none;
}
.interior-flex {
    position: relative;
    display:flex;
    justify-content:space-between;  
    overflow: hidden;
    padding-top:1rem;
    padding-bottom:1rem;
    width:100%;

}
.interior__links  {
        background-color:#999;
        padding:8pt;
        display:block;
        max-width:100%;
        
    }
.interior__links a {
            color:#111;
            font-weight:600;
            text-decoration:none;
        }
.interior__side-menu {
        
        
        width:204px;
       
    }
.interior__content-wrapper {
        flex-basis: 78%;
        margin: auto;
    }
.interior__menu {
        list-style:none;
        margin:0;
        padding:0;
        padding-top:.5rem; 
        padding-bottom:.5rem;
        border:1px solid #e0e0e0;
        border-radius: 3px;
        width:204px;
    }
.interior__menu li a {
            display:block;
            padding:7px 14px;
            text-decoration:none;
            color:#111;
        }
.interior__menu li a:hover {
                background-color:lightgray;
            }
.interior__menu.fixed {
        position: fixed;
        top:20px;
        
        
    }
.post { 
    border:1px solid #e0e0e0;
    margin-bottom:1rem;
    
    background-color:#fff;
    border-radius: 3px;
    overflow: hidden;
    box-shadow:0 1px 0 lightgray;
}
.post__content {
       padding:0 1rem;
        font-size: 1.2rem;
      

    }
.post__content a {
        /* color:#3661A2; */
    }
.post__info {
        
        border-bottom:1px solid lightgray;
    }
.post__info::after {
        content:"";
        display:block;
        clear: both;
    }
.post__author-info {
        background-color:#F4F4F4;
        padding:.5rem 1rem;
        font-size:1.2rem;
        border-top:1px solid lightgray;
    }
.post__title {
        margin:0;
        padding:0;
        display:block;
        width:100%;
        padding:.5rem 1rem;
        font-size:1.94rem;
    }
.post__title a {
        
       color:#222;
        text-decoration:none;

    }
.post__excerpt {
        padding:1rem 1rem;
        line-height:1.2;
        font-size:1.1rem;
    }
.post__excerpt::after {
        content:'';
        display: block;
        clear: both;
    }
.post__excerpt p {
        padding:0;
        margin:0;
    }
.post__excerpt a {
         /* color:#3661A2; */
    }
.post img {
        width:100%;
        height:auto;
        margin-bottom:.5rem;
    }
.post__author-info-no-b {
        border-top:none;
        border-bottom:1px solid #e0e0e0;
    }
/* .btn {
    display:block;
    text-decoration:none;
   
    
    position: relative;
    padding:.3rem .6rem;
    border-radius: 3px;
    margin-top:1rem;
    &--readmore {
    position: relative;
    font-weight:600;
    }
    &--webgl {
        position: relative;
        background-color:transparent;
        font-size:14pt;
        color:#23252C; 
       
        margin-top:0;
        border-radius: 15px;
        font-weight:500;
        margin-bottom:5px; 
        padding:6pt 36pt;
        border:3px solid #454957;
        border-radius: 20px;
        margin-top:10pt;
        margin-left:auto;
        margin-right:auto;
        z-index:2;
        overflow: hidden;
        display:block;
        width:100%;
        text-align:center;

        &::before {
            content:'→';
            display:block;
            position: absolute;
            left:5%;
            top:20%;
            transform:translateX(-200%);
            transform-origin:left;
            transition:.2s all ease;
            z-index:1;
        }
        &:hover::before {
                 transform:translateX(0);
        }
        &:active {
            transform:translateY(2px);
             box-shadow:1px 0px 0px #000;
        }
    }

    &--main {
        background-color:#f20444;
        font-size:15pt;
        color:#fff; 
        text-shadow:1px 1px 1px #222;
        font-weight:700;
        margin-top:0; 
        border-radius: 15px;
        box-shadow:1px 2px 2px #000;
        margin-bottom:5px; 
        padding:6pt 36pt;
        letter-spacing:1px;
        display:inline;
        @mixin atMedium {
            float:left;
            display:block;
        }
        &:hover {
            background-color:#fc4677;
        }
        &:active {
            transform:translateY(2px);
             box-shadow:1px 0px 0px #000;
        }
    }
    
    &--readmore::before {
        content:"";
        display:block;
        width:6px;
        height:6px;
        background-color:transparent;
        border:1px solid #555;
        position: absolute;
        left:-5px;
        top:50%;
        opacity:0;
        transition:.3s all ease;
        transform:translateY(-50%) rotate(45deg);

    }
     &--readmore::after {
        content:"";
        display:block;
        width:6px;
        height:6px;
        background-color:transparent;
        border:1px solid #555;
        position: absolute;
        right:-5px;
        top:50%;
        opacity:0;
        transition:.3s all ease;
        transform:translateY(-50%) rotate(45deg);

    }
    &--readmore:hover::before {
        opacity: 1;
        left:-3px;
    }
    &--readmore:hover::after {
        opacity: 1;
        right:-3px;
    }
  
} */
.btn--main {
        height:48px;
        text-decoration:none;
        display:flex;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
        /* transition: box-shadow, transform; */
        transition-duration: 0.15s, 0.15s;
        transition-timing-function: ease, ease;
        transition-delay: 0s, 0s;
        background:linear-gradient(#aeb7ff,#5468ff) no-repeat;
        box-shadow:0 7px 13px -3px rgba(45,35,66,0.3), 0 2px 4px 0 rgba(45,35,66,0.4), inset 0 -2px 0 0 #4b58ba;
        min-width:200px;
        /* padding-left:24px;
        padding-right:24px; */
        border-radius: 9999px;
        justify-content:center;
        max-width:220px;
        text-shadow:0 1px 0 #4b5ef0;
        color:#fff;
        letter-spacing:1px;
        margin-top:18pt;
        margin-bottom:12pt;
    }
.btn--main:hover {
            box-shadow:0 8px 8px -3px rgba(45,35,66,0.6), 0 2px 4px 0 rgba(45,35,66,0.4), inset 0 -2px 0 0 #4b58ba;
            transform:translateY(-1pt);
        }
.btn--main:active {
            box-shadow: inset 0 2px 4px 0 rgba(45,35,66,0.4), inset 0 -2px 0 0 #4b58ba;

        }
.btn span {
        font-size:12pt;
        color:#fff;
        margin:auto;
        text-transform:uppercase;
        font-weight:500;
    }
.burger-icon {
    width:30px;
    height:30px;
    position: absolute;
    right:26px;
    top:5px;
    background-color:transparent;
    cursor: pointer;
    transition:.3s all ease;
    transform:rotate(0deg);
   
   
}
@media(min-width:1024px) {
.burger-icon {
        display:none
   
   
}
    }
.burger-icon::before {
        transform-origin:0 0;
        transition:.3s all ease;
        content:'';
        position: absolute;
        display:block;
        width:100%;
        height:3px;
        top:0;
        background-color:#fff; 
    }
.burger-icon__mid {
    display:block;
    position: absolute;
    top:13px;
    width:30px;
    transform-origin:0 0;
    height:3px;
    background-color:#fff; 
     transition:.3s all ease;
    }
.burger-icon::after {
        transition:.3s all ease;
        transform-origin:0 100%;
        content:'';
        position: absolute;
        display:block;
        width:30px;
        bottom:0;
        height:3px;
        background-color:#fff; 
    }
.burger-icon--close-x {
        transition:.3s all ease;
        transform:rotate(90deg);

    }
.burger-icon--close-x::before {
            transform:rotate(45deg) scaleX(1.3);
        }
.burger-icon--close-x::after {
            transform:rotate(-45deg) scaleX(1.3)
        }
.burger-icon--close-x .burger-icon__mid {
            opacity: 0;
            transform-origin:50% 50%;
            transform:rotateY(90deg);
            transition:.3s all ease;
        }
.mobile_header_menu {
    margin:0;
    padding:0;
    list-style:none;
}
@media(min-width:1024px) {
.mobile_header_menu {
        display:none
}
    }
.mobile_header_menu a {
        color:#fff;
        text-decoration:none;
    }
.mobile_header_menu .sub-menu {
        list-style:none;
        margin:0;
        padding:2px;
    }
.mobile_header_menu .sub-menu a {
        color:#fff;
    }
.icon {  
    background-image:  url('./images/sprite/svg/sprite.css-2f1469ea.svg');                    
}
.icon--ai { 
    width: 72px;  
    height: 70.4px;
    
    background-position: 0 66.46117166212534%;    
}
.icon--arrow-left { 
    width: 46.7px;  
    height: 73.86px;
    
    background-position: 51.7445097432725% 25.308471772247884%;    
}
.icon--arrow_to_top_white { 
    width: 39.52px;  
    height: 26.51px;
    
    background-position: 76.90329218106994% 43.64277460072891%;    
}
.icon--close-icon { 
    width: 35.04px;  
    height: 35.04px;
    
    background-position: 29.502030093145454% 80.71802042801556%;    
}
.icon--full { 
    width: 56px;  
    height: 56px;
    
    background-position: 0 86.21103896103895%;    
}
.icon--github { 
    width: 44px;  
    height: 43.04px;
    
    background-position: 91.4079754601227% 66.01757228315056%;    
}
.icon--github_white { 
    width: 42.82px;  
    height: 41.89px;
    
    background-position: 17.115960633290545% 82.43457204060724%;    
}
.icon--html5 { 
    width: 63.22px;  
    height: 69.61px;
    
    background-position: 46.4339265923463% 66.28282210672917%;    
}
.icon--js { 
    width: 72px;  
    height: 72px;
    
    background-position: 99.99664429530202% 0;    
}
.icon--main_log { 
    width: 130.7px;  
    height: 36.71px;
    
    background-position: 69.9080651901379% 11.219407864584923%;    
}
.icon--main_log_black { 
    width: 130.7px;  
    height: 36.72px;
    
    background-position: 69.9080651901379% 0;    
}
.icon--maya { 
    width: 70.45px;  
    height: 70.35px;
    
    background-position: 24.03605408112168% 66.44985526987911%;    
}
.icon--monogram2 { 
    width: 43.13px;  
    height: 31.22px;
    
    background-position: 64.5577752623367% 44.26047238415771%;    
}
.icon--ng { 
    width: 67.62px;  
    height: 70.93px;
    
    background-position: 98.5481844037304% 48.097724093220044%;    
}
.icon--phone { 
    width: 27.91px;  
    height: 41.7px;
    
    background-position: 99.97076792656904% 65.74309649394974%;    
}
.icon--play { 
    width: 167.29px;  
    height: 195.13px;
    
    background-position: 0 0;    
}
.icon--postcss { 
    width: 69.32px;  
    height: 69.3px;
    
    background-position: 68.4016229878941% 66.21309806582966%;    
}
.icon--ps { 
    width: 72px;  
    height: 72px;
    
    background-position: 71.80872483221476% 25.147260273972606%;    
}
.icon--sp { 
    width: 71.32px;  
    height: 68.96px;
    
    background-position: 99.76898352752109% 24.40347071583514%;    
}
.icon--telega { 
    width: 43.73px;  
    height: 38.24px;
    
    background-position: 51.27348515033562% 45.21426817288802%;    
}
.icon--www { 
    width: 42px;  
    height: 42.01px;
    
    background-position: 0 99.85713842044782%;    
}
#model-main-wrapper {
  display:block;
  margin:auto; 
  width:100%;
  height:900px;
  overflow: hidden;
  position: relative;
  border-top:1px solid lightgray;
 
  cursor: -webkit-grabbing;
 
  cursor: grabbing;
 

}
#model-main-wrapper::after {
    content:'';
    display:block;
    clear: both;
  }
.page-id-79 .site-header {
  display:none;
}
.page-id-79 .site-footer {
  display:none;
}
.page-id-154 .site-header {
  display:none;
}
.page-id-154 .site-footer {
  display:none;
}
.page-id-11 .site-header {
  /* display:none; */ 
}
.icon {
  display:block;

}
.fullscreen {
  width:30px;
  height:30px;
  display:block;
  background-color:#222;
  cursor: pointer;
}
#unityContainer {
  position: fixed;
  left:0;
  top:0;
  width:100vw;
  height:100vh;
}
canvas#main {
   position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}
.frame-wrapper {
  overflow: hidden;
  width:100vw;
  height:100vh;
  display:block;
  position: relative;
  z-index: 0;
}
.frame-wrapper.full {
    position: fixed;
    width:100vw;
    height:100vh;
    left:0;
    top:0;
  }
.frame-full-screen-toggler {
  display:block;
  width:48px;
  height:48px;
  position: absolute;
  bottom:10px;
  cursor: pointer;
  right:10px; 
  background:url('./images/icons/full.svg') center no-repeat; 
  transform:scale(0.6);
  transition:.1s transform ease;

}
.frame-full-screen-toggler:hover {
      transform:scale(0.7);
  }
.splash-screen {
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  transition: 1s all ease;
  background-color:#fff;
}
.splash-screen.dissolving {
    opacity:0;
  }
code {
     font-size:1.3rem;
     color: #1e1e1e; 
     position: relative;     
     border-radius: 4px;     
     background: #e1e1e1  
  }
#webglFrame {
   z-index:1;
   width:100vw;
   height:100vh;
 }
.iframe-overlay {
   position: absolute;
   width:100vw;
   height:100vh;
   left:0;
   top:0;
   cursor: pointer;
   /* border-radius: 8px; */
   overflow: hidden;  
   background:url('./images/topview_vert.png') center no-repeat;
   background-attachment: fixed; 
   /* background-size:cover;
   background-position: center; */
   /* background-repeat:no-repeat; */
   display:flex;
 }
@media(min-width:768px) {
.iframe-overlay {
      background:url('./images/topview_stylized_2.png') center no-repeat;
      background-size:cover;
        background-attachment: fixed
 }
    }
.nom {
   margin:0;
 }
.s-down {
   transform:scale(0.7);

   
 }
.overlay-icon {
   top:0;
   left:0;
   z-index: 2;
   margin:auto;
 }
h2.fp {
    font-size:28pt;
    color:#454957;
    text-align:center;
  }
@media(min-width:1024px) {
h2.fp {
      text-align:left
  }
    }
h2.h-center {
    text-align:center;
  }
h2.h-white {
    color:#fefefe;
  }
h2.h-dark {
    background-color:#2B2E36;
    margin:0;
    padding:24pt 0;
    color:#fefefe;
   
    z-index: 1;
  }
.wpcf7-form input[type=text], .wpcf7-form input[type=email]  {
      box-sizing: border-box;
      width:100%;
      padding:6pt 6pt;
      border-radius: 6px; 
      border: none; /* <-- This thing here */
      border:solid 1px lightgray;
      margin-bottom:14pt;
      overflow: hidden;
      transition:.3s all ease;
      /* box-shadow:1px 1px 1px lightgray inset; */
      background-color:#f0f0f5;
      position: relative;
     
    }
.wpcf7-form input[type=text]:focus, .wpcf7-form input[type=email]:focus {
        outline:none;
      }
.wpcf7-form input[type=text]::before, .wpcf7-form input[type=email]::before {
        content:'';
        display:block;
        position: absolute;
        width:10px;
        height:10px;
        background-color:red;
      }
.wpcf7-form input[type=text]:focus {
      background-color:#f0f0f5;
        outline:none;
    }
.wpcf7-form textarea {
       width:100%;
        border-radius: 6px;
        padding:6pt 4pt;
        outline:none;
        margin-bottom:6pt;
        overflow: hidden;
        background-color:#f0f0f5;
        border:solid 1px lightgray;
       
    }
.wpcf7-form label {
      padding-bottom:5pt;
    }
.wpcf7-form input[type=submit] {
       height:48px;
        text-decoration:none;
        display:flex;
        transition: box-shadow 0.15s ease, transform 0.15s ease;
        /* transition: box-shadow, transform; */
        transition-duration: 0.15s, 0.15s;
        transition-timing-function: ease, ease;
        transition-delay: 0s, 0s;
        background:linear-gradient(#aeb7ff,#5468ff) no-repeat;
        box-shadow:0 7px 13px -3px rgba(45,35,66,0.3), 0 2px 4px 0 rgba(45,35,66,0.4), inset 0 -2px 0 0 #4b58ba;
        min-width:200px;
        /* padding-left:24px;
        padding-right:24px; */
        border-radius: 9999px;
        justify-content:center;
        max-width:220px;
        text-shadow:0 1px 0 #4b5ef0;
        color:#fff;
        letter-spacing:1px;
        margin-top:18pt;
        font-weight:600;
        font-size:16pt;
        padding:0;
        margin-left:14px;
        outline:none;
        cursor: pointer;
        border:none;
        margin-left:auto;
        margin-right:auto;
    }
.wpcf7-form input[type=submit]:hover {
            box-shadow:0 8px 8px -3px rgba(45,35,66,0.6), 0 2px 4px 0 rgba(45,35,66,0.4), inset 0 -2px 0 0 #4b58ba;
            transform:translateY(-1pt);
        }
@media(min-width:768px) {
.wpcf7-form input[type=submit] {
          float:left
    }
    }
.wpcf7-form p::after {
        content:'';
        display:block;
        clear: both;
      }
.wpcf7-validation-errors {
    background-color:#ff6666;
    border-radius: 5px;
    border:none !important;
    padding:4pt 12pt !important;
    font-size:16pt;
    font-weight:500;
  }
ul::after {
    content:'';
    display:block;
    clear: both;
  }
.wpcf7-mail-sent-ok {
     background-color:lightgreen;
    border-radius: 5px;
    border:none !important;
    padding:4pt 12pt !important;
    font-size:16pt;
    font-weight:500;
  }
.floating {
    display:inline-block;
    vertical-align:-3px;
    margin-left:8pt;
  }
.sl {
    transform:scale(0.8);
  }
#webgl {
    overflow: hidden;
    width:100vw;
    height:100vh;
    position: relative;
   
  }
.ancer::after {
      content:'';
      display:block;
      clear: both;

    }
.webGl_start {
 
   position: absolute;
   left:50%;
   top:50%;
   transform:translateX(-50%) translateY(-50%);
   z-index: 1;
   cursor: pointer;
  }
#webGlOverlay {
    width:100%;
    height:100%;
    background:url('./images/bd_render-3.jpg');
    background-size:cover;
  
    
  }
.front-page-grid {
 
  
  border-radius: 5px;
  display:grid;  
  padding-top: 18pt;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 12pt;
  padding:12pt;
}
@media(min-width:768px) {
.front-page-grid {
      grid-template-columns: repeat(2, 1fr);
       padding:12pt
}
    }
@media(min-width:1024px) {
.front-page-grid {
      grid-template-columns: repeat(3, 1fr);
       padding:12pt
}
    }
@media(min-width:1366px) {
.front-page-grid {
      grid-template-columns: repeat(3, 1fr);
       padding:12pt 0;
       padding-top:0
}
    }
.front-page-grid__item--text  {
      position: relative;
      background-color:#fff;
     
    }
.front-page-grid__item--text h2 {
      text-align:center; 
      font-size:24pt;

     
     
    }
.front-page-grid__item--text p {
      font-size:12pt;
      font-weight:700;
      text-align:center;
       color:#454957; 
     
    }
.front-page-grid__title {
      font-size:28pt;
      color:#454957;
      font-weight:700; 
      margin:0;
      padding-top:18pt;
      padding-bottom:18pt;
      padding-left:12pt;
    }
@media(min-width:1366px) {
.front-page-grid__title {
        padding-left:0
    }
    }
.front-page-grid__item--thumb  {
         height:207px;
         display:block;
     
   
    }
.front-page-grid__item--thumb a {
      width:100%; 
      height:100%;
      display:block;
      position: absolute;
      left:0;
      top:0;
      }
.front-page-grid__link {
      width:100%;
      height:100%;
      display:block;
      overflow: hidden;
    }
.front-page-grid__item {
  
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 5px;
    display:flex;
    flex-direction:column;
    background-color:#fff; 
    transition:.2s all ease;
    padding:12pt;
    transform:translateY(0);
    transition:.3s all ease;
  }
.front-page-grid__item a {
      color:#454957; 
      display:block;
      text-decoration:none;
      position: relative;
  
    }
.front-page-grid__item h2 {
       font-size:28pt;
      color:#454957;
      font-weight:700; 
      margin:0;
      padding-top:18pt;
      padding-bottom:18pt;
      padding-left:12pt;
   }
@media(min-width:1366px) {
.front-page-grid__item h2 {
        padding-left:0
   }
    }
.front-page-grid__item:hover {
     transform:translateY(-4px);
     box-shadow:0 1px 5px 3px #3a8af1;
   }
.front-page-grid img {
   width:100%;
   height:auto;
  }
.front-page-grid span a {
    display:block;
    width:100%;
    height:100%;
  }
.front-page-grid span {
    float:left;
  }
.front-page-grid::after {
  content:'';
  display:block;
  clear: both;
}
#inner {
  transition: transform 0.5s;
  -webkit-transition: transform 0.5s;
  box-shadow: 2px 2px 50px rgba(0, 0, 0, 0.2);
}
.page-section {
  width:100%;
  position: relative;
  /* padding-top:44pt;
  padding-bottom:44pt; */
  margin:0;
  overflow-x: hidden;
}
/* min-height:50vh; */
.page-section--first { 
   
    background-color:#fefefe; 
    background-size:4px 4px;
    padding-top:60px;
    padding-bottom:60px;
    background-image: linear-gradient(90deg, transparent, transparent 3px, rgba(0, 0, 0,0.07) 4px), linear-gradient(transparent, transparent 3px, rgba(0, 0, 0, 0.07) 4px);  
  }
.page-section--first::before { 
      content:'';
      display:block;
      width:100%;
      height:48px;
      top:0; 
      position: absolute;
      background:linear-gradient(-1deg, transparent 49%, #23252C 50%);
      right:0;  
      z-index: 1;
    }
.page-section--first::after { 
      content:'';
      display:block;
      width:100%;
      height:48px; 
      bottom:0;
      left:0;  
      position: absolute;
      background-image: linear-gradient(1deg, #82b4f6 49%, transparent 50%);
      
      
    }
.page-section--second {
    background-color:#82b4f6;
    /* background:url('./images/background_part.png');
    background-size:cover; */
  }
.page-section--webgl {
    background-color:#fefefe;
  }
.page-section--products {
    background-color:#F5F5F5;
   


  }
.page-section--contact {
    background-color:#fefefe;
    padding-bottom:24pt;
       
  }
.intro {
  display:block;
  /* padding:24pt 12pt; */
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
 



}
@media(min-width:1366px) {
.intro {
    /* display:flex; */
    /* justify-content:center;
    align-items:center; */
    /* padding:48pt 12pt; */
 



}
    }
.intro__toolkit {
     display:grid;
     grid-template-columns:repeat(3, 1fr);
     grid-row-gap: 14pt;
      margin:auto;
    padding-bottom:24pt;
  }
@media(min-width:768px) {
.intro__toolkit {
        grid-template-columns:repeat(8, 1fr);
        margin:0
  }
    }
.intro__toolkit span {
     
     
      cursor: pointer;
      margin-right:14pt;
      transition:.1s all ease;
    }
.intro__toolkit span:hover {
        opacity: 0.9;
        transform:scale(1.04);
      }
.intro__toolkit::after {
      content:'';
      display:block;
      clear: both;
    }
.form-overlay {
  width:100%;
  z-index:99999;
  height:100%;
  background-color:#fff;
  position: fixed;
  left:0;
  top:0; 
  display:flex;
  /* opacity: 0; */
  transition:.3s all ease;
  transform:scale(1.2);
  visibility:hidden;
}
.form-overlay.is--visible {
    /* opacity: 1; */
    transform:scale(1);
    visibility:visible;

  }
.form-overlay__close {
    position: absolute;
    right:42pt;
    top:24pt;
    transform:scale(1.5);
    transition:.2s all ease;
    cursor: pointer;
  }
.form-overlay__close:hover {
    transform:scale(1.6);
    opacity:0.9;
    }
.form-overlay__wrapper {
  
    display:flex;
    margin:auto;
    width:100%;
    height:100%;
    overflow: hidden;
   
    padding:10pt;

  }
.main-contact-form form {
   width:100%;
   overflow: hidden;
 }
.main-contact-form textarea {
    resize: none;
    width:100% !important;
   }
.main-contact-form input {
     width:100%;
   }
.main-starter {
  position: relative;
  min-height:200px;
  background-color:#23252C;
  padding-top:80pt;
  padding-bottom:40pt;
}
.main-starter__wrapper {
    display:flex;
  }
.main-starter__wrapper-inner {
    margin:auto;
    display:block;
   
  }
.main-starter__intro h1 {
    color:#FEFEFE;
    font-weight:600;
    font-size: 14pt;
    text-align:center;
    margin-bottom:34pt;
    margin-top:34pt;
  }
@media(min-width:768px) {
.main-starter__intro h1 {
      font-size: 18pt;
       text-align:center
  }
    }
@media(min-width:1024px) {
.main-starter__intro h1 {
      font-size: 26pt;
       text-align:left
  }
    }
.main-starter__intro p {
    color:#FEFEFE;
    font-weight:400;
    font-size: 10pt;
    text-align:center;
    line-height:1.5;
  }
.main-starter__intro p strong {
      font-weight:600;
    }
@media(min-width:768px) {
.main-starter__intro p {
      font-size: 12pt;
       text-align:center
  }
    }
@media(min-width:1024px) {
.main-starter__intro p {
      font-size: 13pt;
       text-align:left
  }
    }
.main-starter__intro a {
     color:#01C9FF;
     font-weight:600;
   }
.front-page-nav {
  position: fixed;
  top:0;
  left:0;
  width:100%;
  background-color:#23252C;
  padding:12pt 0;
  overflow: hidden;
  z-index: 2;
}
@media(min-width:1024px) {
.front-page-nav {
     padding:12pt 0
}
    }
.front-page-nav__icons {
    list-style:none;  
    float:right; 
    margin:0;
    padding:0;
    display:none;
  }
@media(min-width:1024px) {
.front-page-nav__icons {
      display:block
  }
    }
.front-page-nav__icons li {
     float:left;
    overflow: hidden;
    margin-right:4pt;
    display:flex;
  }
.front-page-nav__icons li span {
    float:left;
  }
.front-page-nav__icons li:first-child a span {
    padding-top:15pt;
  
  }
.front-page-nav__icons li span.ph { 
  margin:auto;
  padding-left:2pt;
   color:#fff;
   font-size:10pt;
  
   
  }
.front-page-nav__logo {
    float:left;
    display:block;
  }
.front-page-nav__menu {
  
    float:right;
    margin-right:40pt;
    position: fixed;
    height:100vh;
    width:300px;
    background-color:#222;
    left:0;
    top:0;
    transform:translateX(-100%);
    transition:.3s all ease;
    padding-top:100pt;
  }
.front-page-nav__menu--visible {
      transform:translateX(0);
    }
@media(min-width:1024px) {
.front-page-nav__menu {
      padding-top:0;
      transform:none;
      position: relative;
      height: auto;
      width:auto;
      float:right;
      background-color:transparent
  }
    }
.front-page-nav__menu li {
      display:block; 
      position: relative;
      float:none;
      padding:8pt 18pt;
     
      
    }
@media(min-width:1024px) {
.front-page-nav__menu li {
        float:left
     
      
    }
    }
.front-page-nav__menu li a {
      text-decoration:none;
      color:#fefefe;
      font-size:14pt;
      font-weight:500;
      position: relative;

     
      
    }
@media(min-width:1024px) {
.front-page-nav__menu li a::before {
          content:'\005B';
        display:block;
        position: absolute;
        top:50%;
        left:-8px;
        transform:translateX(-100%) translateY(-50%);
        /* width:1px;
        height:100%; */
         color: #02BFF2;
       
        opacity: 0;
        transition:.3s all ease
      }
    }
@media(min-width:1024px) {
.front-page-nav__menu li a::after {
        content:'\005B';
        display:block;
        position: absolute;
        top:0;
        top:50%;
        right:-8px;
        transform:translatex(100%) translateY(-50%) scaleX(-1);
        /* width:1px;
        height:100%; */
        /* background-color:#02BFF2; */
      color: #02BFF2;
        opacity: 0;
        transition:.3s all ease
      }
    }
.front-page-nav__menu li a:hover::before {
        opacity: 1;
         transition:.3s all ease;
          transform:translatex(0) translateY(-50%);
      }
.front-page-nav__menu li a:hover::after {
        opacity: 1;
         transition:.3s all ease;
          transform:translatex(0) translateY(-50%) scaleX(-1);
      }
.front-page-nav__menu li a:hover {
        color:#02BFF2;
         transition:.3s all ease;
      }
.front-page-nav__menu li a.active-link {
         color:#02BFF2;
      }
.front-page-nav__menu li a.active-link::before {
           opacity: 1;
         transition:.3s all ease;
            transform:translatex(0) translateY(-50%);
      }
.front-page-nav__menu li a.active-link::after {
           opacity: 1;
         transition:.3s all ease;
            transform:translatex(0) translateY(-50%) scaleX(-1);
      }
.webgl-ex {
  
  overflow: hidden;
 
  width:100%;
  position: relative;
}
.webgl-ex__examples {
    width:100%;
    position: relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
  }
.webgl-ex__examples > div {
      flex-basis:50%;
    }
@media(min-width:1024px) {
.webgl-ex__examples {
      flex-direction:row;
     display:flex
  }
    }
.webgl-ex__close {
    color:#fff;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    top:48pt;
    z-index: 0;
    right:48pt;
    font-weight:500;
      background-color:#454957;
   
    padding:4pt 2pt;
    border-radius: 5px;
  }
.webgl-ex__close:hover {
      background-color:#454957;
      color:#fff;
    }
@media(min-width:1024px) {
    }
.webgl-ex__examples--small {

    overflow: hidden;
  }
.webgl-ex__examples--small h3 {
      font-size:18pt;
      color:#454957;
      padding:14pt 0;
    
    }
.webgl-ex__examples--thumbs {
    
    max-width:50%;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    grid-gap:2pt;
   
  }
.webgl-ex__examples--thumbs > img {
      max-width:254px;
    
    }
.webgl-ex__arrow {
    height:100%;
    display:flex;
  }
.webgl-ex__arrow span {
      margin:auto;
    }
.webgl-ex__examples--lm  {
     flex-basis:50%;
     position: relative;
     padding:8pt;
  
  }
.webgl-ex__examples--lm h3 {
      font-size:18pt;
      color:#454957;
      padding:14pt 0;
    
    }
.webgl-ex__examples--lm img {
         max-width:320px;
    }
@media(min-width:768px) {
.webgl-ex__examples--lm img {
           max-width:524px
    }
    }
.webgl-ex__examples > img:nth-child(3) {
   
  }
/* &__examples-img {
    max-width:128px;
  } */
.webgl-ex p { 
    font-size:14pt;
    font-weight:400;
  }
.webgl-ex h2 {
      background-color:#2B2E36;
      margin:0;
      padding:24pt 0;
      color:#fff;
    }
.lightbox {
  position: fixed;
  width:100vw;
  height:100vh;
  background-color:#fff;
  left:0;
  top:0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  display:flex;
}
.lightbox > img {
    margin:auto;
    order:2;
    max-width:80%;
  }
.lightbox.opened {
     opacity: 1;
    visibility: visible;
  }
.lightbox__close {
    position: absolute;
    right:40px;
    top:20px;
    cursor: pointer;
  }
.lightbox-controls {
  margin:auto;
  transform:scaleX(-1);
  
}
.lightbox-controls.right {
  order:3;
  transform:none;
}
.gallery {
  -moz-columns:1;
       columns:1;
  overflow: hidden;
  -moz-column-gap:4px;
       column-gap:4px;
  padding-top:50pt;
  padding-bottom:50pt;
}
@media(min-width:768px) {
.gallery {
    -moz-columns:2;
         columns:2
}
    }
@media(min-width:1024px) {
.gallery {
    -moz-columns:3;
         columns:3
}
    }
.gallery br {
    display:none;
  }
.gallery a {
    max-height:100%;
  }
.gallery dt {
    max-width:100%;
  }
.gallery dt::after {
      content:'';
      display: block;
      clear: both;
      margin-bottom:-3px;
    }
.gallery-item {


  overflow: hidden;
  width:100%; 
  margin: 0 0 4px 0;
  -moz-column-break-inside:avoid;
       break-inside:avoid;
}
.gallery-item img {
    width:100%; 
    height:auto;
   
  }
.gallery-item a {
    display: block;
    width:100%;
    height:100%;
  }
/*  
@font-face {
    font-family: 'Aino';
        src:url('aino/Aino_31_170411-Regular.otf'),
            url('aino/Aino_31_170411-Regular.woff2') format('woff2'),
            url('aino/Aino_31_170411-Regular.woff') format('woff');     
}

@font-face {
    font-family: 'Aino-Headline'; 
        src:url('aino/Aino-Headline.otf'),
            url('aino/Aino-Headline.woff2') format('woff2'),
            url('aino/Aino-Headline.woff') format('woff');    
}
@font-face {
    font-family: 'Aino-Bold';
        src:url('aino/Aino_31_170411-Bold.otf'),
            url('aino/Aino_31_170411-Bold.woff2') format('woff2'),
            url('aino/Aino_31_170411-Bold.woff') format('woff');    
}
@font-face {
    font-family: 'Avenir';
        src:url('fonts/AvenirNextCyr-Regular.ttf');           
}

@font-face { font-family: Aino; font-weight: 400; src: url('aino/Aino_31_170411-Regular.ttf'); }  
@font-face { font-family: AinoBold; font-weight: 600; src: url('aino/Aino_31_170411-Bold.ttf'); }  */
@font-face { font-family: Avenir; font-weight: 300; src: url('./fonts/AvenirNextCyr-Light.ttf'); }
@font-face { font-family: Avenir; font-weight: 400; src: url('./fonts/AvenirNextCyr-Regular.ttf'); }
@font-face { font-family: Avenir; font-weight: 500; src: url('./fonts/AvenirNextCyr-Demi.ttf'); }
@font-face { font-family: Avenir; font-weight: 600; src: url('./fonts/AvenirNextCyr-Bold.ttf'); }
@font-face { font-family: Avenir; font-weight: 800; src: url('./fonts/AvenirNextCyr-Heavy.ttf'); }