* {
            /* box-sizing: border-box; */
            outline: 0;
            text-decoration: none
        }

        .preloader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000000;
            overflow: hidden;
            z-index: 999;
        }

        .preloader .pre-container {
            position: absolute;
            left: 50%;
            top: 50%;
            bottom: auto;
            right: auto;
            -webkit-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
            -o-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
            text-align: center
        }

        .preloader .logo-circle {
            position: relative;
            width: 60px;
            height: 60px;
            text-align: center;
            margin: 0 auto;
            padding: 10px;
            background: #000;
            border-radius: 30px;
            margin-bottom: 2.2em;
            -webkit-animation: white-shadow 1s infinite;
            -moz-animation: white-shadow 1s infinite;
            -ms-animation: white-shadow 1s infinite;
            animation: white-shadow 1s infinite;
            line-height: 36px
        }

        .preloader .logo-circle img {
            padding-top: 6px;
            width: 30px
        }

        .preloader .loading-text {
            font-size: 18px;
            color: rgba(255, 255, 255, .6);
            text-shadow: 1px 1px 0 0 #000;
            margin-left: 10px
        }

        @-webkit-keyframes white-shadow {
            0% {
                box-shadow: 0 0 0 0 rgba(148, 193, 30, .5);
                -webkit-transition: box-shadow .3s ease-in-out
            }

            100% {
                box-shadow: 0 0 0 30px transparent;
                -webkit-transform: translate3d(0, 0, 0);
                -webkit-transition: box-shadow .4s ease-in-out
            }
        }

        @-moz-keyframes white-shadow {
            0% {
                box-shadow: 0 0 0 0 rgba(148, 193, 30, 0);
                -moz-transition: box-shadow .3s ease-in-out
            }

            100% {
                box-shadow: 0 0 0 30px transparent;
                -moz-transform: translate3d(0, 0, 0);
                -moz-transition: box-shadow .4s ease-in-out
            }
        }

        @keyframes white-shadow {
            0% {
                box-shadow: 0 0 0 0 rgba(148, 193, 30, .3);
                -webkit-transition: box-shadow .3s ease-in-out;
                -moz-transition: box-shadow .3s ease-in-out;
                transition: box-shadow .3s ease-in-out
            }

            100% {
                box-shadow: 0 0 0 30px transparent;
                -webkit-transform: translate3d(0, 0, 0);
                -moz-transform: translate3d(0, 0, 0);
                -ms-transform: translate3d(0, 0, 0);
                -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition: box-shadow .4s ease-in-out;
                -moz-transition: box-shadow .4s ease-in-out;
                transition: box-shadow .4s ease-in-out
            }
        }

        a,
        active {
            text-decoration: none;
            color: #000000;
            outline: none
        }

        button:focus {
            outline: none;
            outline: none;
        }

        a:hover {
            text-decoration: none;
            color: #3cd857 ;
        }

        body {
            font-family: 'Noto Sans JP', Courier, monospace;
            color: #fff;
            overflow: hidden;
            background-color: #000000;
            height: 100%;
            width: 100%
        }

        header {
            position: relative;
            z-index: 99;
            top: 10%
        }

        body.open:after {
            opacity: 1;
            visibility: visible
        }

        .logo {
            width: 50%;
            z-index: 6
        }

        h4 {
            font-weight: 400
        }

        h5 {
            color: #ffffff;
            font-weight: 400
        }

        .b-mainMenu {
            position: relative
        }

        ul.sectMenu {
            position: relative;
            top: 130px;
            margin-left: 30px
        }

        .sectMenu li i {
            position: absolute;
            right: 32px;
            top: 6px;
        }

        .b-nav {
            position: absolute;
            z-index: 5;
            height: 100vh;
            background-color: #fff;
            right: 0;
            width: 400px;
            /* right: -400px; */
        }

        .b-nav:not(.open) {
            visibility: hidden;
            /* right: -400px; */
            opacity: 0;
        }

        .b-nav li {
            color: #000;
            list-style-type: none;
            padding: 0 10px;
            text-align: left;
            /* -webkit-transform: translateX(500px);
            transform: translateX(500px) */
        }

        .b-nav li:not(.open) {
            -webkit-animation-duration: .4s;
            animation-duration: .4s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            /* -webkit-animation-name: slideOutRight;
            animation-name: slideOutRight; */
        }

        .b-nav.open li {
            -webkit-animation-duration: .4s;
            animation-duration: .4s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            /* -webkit-animation-name: slideInRight;
            animation-name: slideInRight; */
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            z-index: 100;
        }

        .b-link,
        .sectMenu li {
            background: transparent;
            border-left: #fff solid 4px;
            color: #000;
            font-size: 22px;
            font-weight: 600;
            margin: 8px 0;
            margin-left: 0;
            letter-spacing: -.5;
            text-decoration: none;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            width: auto;
            line-height: normal;
        }

        .sectMenu li:hover {
            border-left: #3cd857 solid 4px;
            padding-left: 30px
        }

        .b-menu {
            background: 0 0;
            border: transparent solid 1px;
            border-radius: 0;
            cursor: pointer;
            display: inline-table;
            height: 60px;
            padding-left: 14.5px;
            padding-top: 15.5px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 60px;
            z-index: 9;
            position: relative;
            vertical-align: middle
        }

        .b-menu.sectMenu {
            z-index: 100;
        }

        .b-menu-item {
            font-size: 2rem;
            background: 0 0;
            border: transparent solid 1px;
            cursor: pointer;
            height: 60px;
            padding-left: 12.5px;
            padding-top: 10.5px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 60px;
            vertical-align: middle;
            margin-right: 80px
        }

        .b-menu-item i {
            color: #fff;
        }

        .b-menu:hover {
            border: #ffffff solid 1px
        }

        .b-bun {
            background: #fff;
            position: relative;
            -webkit-transition: all .4s ease;
            transition: all .4s ease
        }

        .b-bun--top {
            height: 3px;
            top: 0;
            width: 30px
        }

        .b-bun--mid {
            height: 3px;
            top: 8px;
            width: 30px
        }

        .b-bun--bottom {
            height: 3px;
            top: 16px;
            width: 30px
        }

        .b-brand {
            color: #fff;
            font-size: 24px;
            font-weight: 300;
            margin-left: 30px;
            position: relative;
            text-decoration: none;
            top: -21.4285714286px;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
            z-index: 13
        }

        .b-container {
            height: 60px;
            right: 30px;
            position: absolute;
            top: 30px
        }

        .b-container:hover:not(.open) .bun-bottom,
        .b-container:hover:not(.open) .bun-mid,
        .b-container:hover:not(.open) .bun-top {
            background: #000
        }

        .b-container.open .b-main {
            border: #000 solid 1px
        }

        .b-container.open .b-bun--top {
            background: #000;
            top: 9px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

        .b-container.open .b-bun--mid {
            opacity: 0
        }

        .b-container.open .b-bun--bottom {
            background: #000;
            top: 3px;
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg)
        }

        .b-container.open .b-brand {
            color: #000
        }

        .search-toggle {
            position: relative;
            top: 28px;
            z-index: 99;
        }

        .search-icon {
            /* font-size: 36px;
    color: #000;
    background-color: transparent;
    border: 0;
    outline: 0;
    right: 160px;
    position: absolute;
    top: 10px */
            font-size: 36px;
            color: #000;
            background-color: transparent;
            border: 0;
            outline: none;
            left: 34px;
            position: absolute;
            top: 42px;
            z-index: 9999;
        }

        .search-toggle .search-icon.icon-close {
            display: none
        }

        .search-toggle.opened .search-icon.icon-search {
            display: none
        }

        .search-toggle.opened .search-icon.icon-close {
            display: block
        }

        .search-container {
            position: relative;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            -webkit-transition: all .3s;
            transition: all .3s;
            max-height: 0;
            overflow: hidden;
            background-color: transparent
        }

        .search-container.opened {
            max-height: 80px
        }

        .search-container input[type=text] {
            outline: 0;
            font-size: 1.6rem;
            margin: 18px;
            margin-left: 40px;
            width: 318px;
            background-color: inherit;
            border: 0;
            border-bottom: 2px solid #000
        }

        .search-container .search-icon {
            vertical-align: middle
        }

        .search-container {
            position: relative;
            top: 100px;
            z-index: 2
        }

        .main-Wrapper {
            width: 100%;
            z-index: 0;
            background-color: transparent;
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: top center;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            padding-top: 160px;
        }


        .layer-diagram {
            margin-top: 0;
        }

        .digram-circle {
            /* position: relative;
            top: -70%; */
            /* position: absolute;
            top: 36%;

            left: 50%;
            width: 300px;
            margin-left: -100px; */
            z-index: 3;
            margin-top: -118px;
            position: relative;
        }

        .layer-diagram li {
            position: absolute;
            cursor: pointer;
            -webkit-transition: all .5s ease;
            transition: all .5s ease
        }

        .layer-diagram li img {
            opacity: 1;
            width: 50%
        }

        .layer-diagram li:hover img {
            opacity: .95;
            -webkit-transition: all .5s ease;
            transition: all .5s ease
        }

        .layer-diagram li:hover {
            -webkit-transition: all .5s ease;
            transition: all .5s ease;
            margin-top: -10px
        }

        .layer-diagram li:nth-child(1) {
            z-index: 14
        }

        .layer-diagram li:nth-child(2) {
            top: 60px;
            z-index: 12
        }

        .layer-diagram li:nth-child(3) {
            top: 120px;
            z-index: 11
        }

        .layer-diagram li:nth-child(4) {
            top: 180px;
            z-index: 10
        }

        .wrapper .item {
            visibility: hidden;
            display: none;
            opacity: 0;
        }

        .wrapper>div {
            min-height: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: flex-end;
            font-weight: 700;
            color: orange
        }

        .wrapper>div:after {
            content: "";
            width: 10px;
            height: 4px;
            display: block;
            background: #000;
            color: orange;
            margin-bottom: 4px;
            margin-left: 2px;
            animation-duration: 350ms;
            animation-name: fade;
            animation-direction: alternate;
            animation-iteration-count: infinite
        }

        .layer-diagram li {}

        /* Right section */

        .layer-diagram li:nth-child(1) .popOver,
        .layer-diagram li:nth-child(3) .popOver,
        .layer-diagram li:nth-child(2) .popOver,
        .layer-diagram li:nth-child(4) .popOver  {
            position: absolute;
            right: -40px; 
            text-align: left;
            display: none;
            width: 320px;
            top: 20px;
            z-index: -1;
        }

        /* .layer-diagram li:nth-child(2) .popOver,
        .layer-diagram li:nth-child(4) .popOver {
            position: absolute;
            right: 111%;
            text-align: right;
            display: none;
            width: 320px;
            top: 24px;
            z-index: -1;
        } */

        .layer-diagram li:hover .popOver {
            display: block;
            -webkit-animation-duration: .4s;
            animation-duration: .4s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-transition: all .4s ease;
            transition: all .4s ease;
        }

        .layer-diagram li:nth-child(1) .popOver .buble,
        .layer-diagram li:nth-child(3) .popOver .buble, .layer-diagram li:nth-child(2) .popOver .buble,
        .layer-diagram li:nth-child(4) .popOver .buble  {
            background: #3cd857;
            background-image: linear-gradient(to right top, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857);
            padding: 12px;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            text-align: center;
            line-height: normal;
            position: absolute;
        }

        .layer-diagram li .popOver .buble:after {
            height: 2px;
            background-color: #3cd857;
            content: "";
            width: 46px;
            position: absolute;
            top: 50%;
            right: 100%;
        }

        /* .layer-diagram li:nth-child(2) .popOver .buble,
        .layer-diagram li:nth-child(4) .popOver .buble {
            background: #060707;
            background-image: linear-gradient(to right top, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857, #3cd857);
            padding: 12px;
            border-radius: 50%;
            width: 70px;
            height: 70px;
            text-align: center;
            line-height: normal;
            position: absolute;
        } */

        .layer-diagram li .popOver .buble i {
            font-size: 36px;
            vertical-align: baseline;
            margin-top: 4px;
            color: #000;
        }

        .layer-diagram li .popOver h4 {
            font-size: 1.3rem;
            font-weight: 600;
            margin: 0;
            color: #3cd857;
        }

        .layer-diagram li .popOver p {
            font-size: 15px;
            line-height: 16px;
            margin: 0;
            color: #FFF;
        }

        .layer-diagram li:nth-child(1) .popOver h4,
        .layer-diagram li:nth-child(3) .popOver h4,
        .layer-diagram li:nth-child(1) .popOver p,
        .layer-diagram li:nth-child(3) .popOver p,
        .layer-diagram li:nth-child(2) .popOver h4,
        .layer-diagram li:nth-child(4) .popOver h4,
        .layer-diagram li:nth-child(2) .popOver p,
        .layer-diagram li:nth-child(4) .popOver p {
            padding-left: 80px;
        }

        /* .layer-diagram li:nth-child(2) .popOver h4,
        .layer-diagram li:nth-child(4) .popOver h4,
        .layer-diagram li:nth-child(2) .popOver p,
        .layer-diagram li:nth-child(4) .popOver p {
            padding-right: 80px;
        } */

        /* .layer-diagram li:nth-child(2) .popOver .buble,
        .layer-diagram li:nth-child(4) .popOver .buble {
            right: 0;
        } */

        .layer-diagram li:nth-child(2) .popOver,
        .layer-diagram li:nth-child(4) .popOver {
            margin-top: -18px
        }

        /* Left section */

        /* .layer-diagram li:nth-child(2) .popOver .buble:after,
        .layer-diagram li:nth-child(4) .popOver .buble:after {
            height: 2px;
            background-color: #3cd857;
            content: "";
            width: 46px;
            position: absolute;
            top: 50%;
            left: 100%;
        } */

        /* 
.b-container.open li.user,
.b-container.open li.search {}
.b-nav.open {
    display: inline-block;
}
.b-nav.open li.sec-menu {
    display: inline-block;
}
header {
    z-index: 4;
}
body.open header .b-nav li.sec-menu {
    z-index: 12;
} 
.b-container.open .b-menu {
    z-index: 99;
} */
        /* body.open header {
            display: inline-block;
        } */

        @keyframes fade {
            from {
                opacity: 1
            }

            to {
                opacity: 0
            }
        }

        footer {
            position: fixed
        }

        footer li a,
        footer p {
            font-size: 14px
        }

        /* @-webkit-keyframes slideInRight {
            0% {
                -webkit-transform: translate3d(500px, 0, 0);
                transform: translate3d(500px, 0, 0);
                visibility: visible
            }
            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        } */
        /*         
        @keyframes slideInRight {
            0% {
                -webkit-transform: translate3d(500px, 0, 0);
                transform: translate3d(500px, 0, 0);
                visibility: visible
            }
            100% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
        } */
        /*         
        @-webkit-keyframes slideOutRight {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(500px, 0, 0);
                transform: translate3d(500px, 0, 0);
                visibility: hidden;
            }
        }
        
        @keyframes slideOutRight {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0)
            }
            100% {
                -webkit-transform: translate3d(500px, 0, 0);
                transform: translate3d(500px, 0, 0);
                visibility: hidden;
            }
        } */

        ul.r-menu {
            background: transparent;
            list-style: none;
            margin: 0;
            padding-left: 0;
            z-index: 99;
        }

        .r-menu li {
            color: #fff;
            background: transparent;
            display: block;
            padding: 0.8rem;
            position: relative;
            text-decoration: none;
            transition-duration: 0.5s;
        }

        .r-menu li a {
            color: #fff;
        }

        .r-menu li:hover {
            background: transparent;
            cursor: pointer;
        }

        ul.r-menu li ul {
            background-color: #000;
            visibility: hidden;
            opacity: 0;
            min-width: 300px;
            position: absolute;
            transition: all 0.5s ease;
            margin: 0;
            top: 100%;
            margin-right: -1px;
            margin-top: 0px;
            right: 0;
            display: none;
            border: 1px solid #fff;
        }

        ul.r-menu li ul li:hover {
            border: none;
        }

        ul.r-menu li:hover>ul,
        ul.r-menu li ul:hover {
            visibility: visible;
            opacity: 01;
            display: block;
        }

        ul.r-menu li ul li {
            clear: both;
            width: 100%;
            display: block;
            font-size: 14px;
            padding-left: 30px;
            position: relative;
        }

        ul.r-menu li ul li::after {
            content: "";
            height: 0;
            width: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid #fff;
            position: absolute;
            top: -10px;
            right: 20px;
            margin: 0 0 0 -3px;
            z-index: 100;
        }

        .language-liist {
            position: absolute;
            text-align: center;
        }

        .language-liist li {
            margin: 0 !important;
            padding: 0;
        }

        .language-liist li a {
            border: 1px solid #000;
            padding: 10px;
            margin: 0;
            color: #000000;
        }

        .language-liist li a:hover {
            border: 1px solid #3cd857;
            color: #ffffff;
            background-color: #3cd857;
        }

        .language-liist li.active a {
            border: 1px solid #3cd857;
            color: #ffffff;
            background-color: #3cd857;
        }

        /* Sub pages css only */
        /* .main-Wrapper.pg-sub {
            background-image: none;
        } */

        .pg-sub h2 {
            font-weight: bold;
        }

        .bg-overly {
            position: fixed;
            width: 80%;
            height: 80%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 100;
            -webkit-transform: scale(1.8);
            -moz-transform: scale(1.8);
            -o-transform: scale(1.8);
            transform: scale(1.8);
        }

        .fullscreen-bg {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            overflow: hidden;
            z-index: -100;
        }

        .fullscreen-bg-video {
            position: absolute;
            top: 50%;
            left: 50%;
            width: auto;
            height: auto;
            min-width: 100%;
            min-height: 100%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

        header.sub-pg-header {
            background: rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        /* .main-Wrapper.pg-sub.pg-cyber-sec {
            background: none;
        } */

        .list-title li {
            font-size: 22px;
            color: #3cd857;
            line-height: normal;
            margin-top: 40px;
            font-weight: 600;
            font-family: 'Montserrat', Courier, monospace;
            text-decoration: underline;
        }

        .list-title li:after {}

        .main-Wrapper.pg-sub.pg-about {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-cyber-security.jpg);
        }

        .main-Wrapper.pg-sub.pg-cyber-sec {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-Data-Cyber-Security.jpg);
        }

        .main-Wrapper.pg-sub.pg-phys-sec {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-data-in-physical-security.jpg);
        }

        /* .main-Wrapper.pg-sub.pg-contact {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-cyber-security.jpg);
        }
        
        .main-Wrapper.pg-sub.pg-press {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-cyber-security.jpg);
        }
        
        .main-Wrapper.pg-sub.pg-why-sfinx {
            background-image: url(https://sfinx.io/demo-v03/assets/img/Bg-cyber-security.jpg);
        } */