*, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }

        .inner, .nav-panel ul .nav-btn:after { content: ""; position: absolute; top: 50%; left: 50%; }

        html, body { width: 100%; height: 100%; overflow: hidden; }

        @media (max-width: 767px) {
            body { font-size: 70%; }
        }

        .wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 1.5s; transition: transform 1.5s; -webkit-perspective: 3000; perspective: 3000; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
            .wrapper .page { position: relative; width: 100%; height: 100%; -webkit-transform: rotateX(180deg) scale(0.3); transform: rotateX(180deg) scale(0.3); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 1s ease-in-out; transition: transform 1s ease-in-out; will-change: transform; }
                .wrapper .page h2 { color: #fff; position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); text-transform: uppercase; font-size: 3em; }
                .wrapper .page.page1 {background-image: url('../images/home2.png');background-position:center; }
                .wrapper .page.page2 {background-image: url('../images/home3.png');background-position:center;}
                .wrapper .page.page3 {   background-image: url('../images/home5.png');background-position:center;}
                .wrapper .page.page4 {  background-image: url('../images/home5.png');background-position:center;}
            .wrapper.active-page1 { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
                .wrapper.active-page1 .page.page1 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page2 { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
                .wrapper.active-page2 .page.page2 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page3 { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); }
                .wrapper.active-page3 .page.page3 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page4 { -webkit-transform: translateY(-300%); -ms-transform: translateY(-300%); transform: translateY(-300%); }
                .wrapper.active-page4 .page.page4 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page5 { -webkit-transform: translateY(-400%); -ms-transform: translateY(-400%); transform: translateY(-400%); }
                .wrapper.active-page5 .page.page5 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page6 { -webkit-transform: translateY(-500%); -ms-transform: translateY(-500%); transform: translateY(-500%); }
                .wrapper.active-page6 .page.page6 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page7 { -webkit-transform: translateY(-600%); -ms-transform: translateY(-600%); transform: translateY(-600%); }
                .wrapper.active-page7 .page.page7 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page8 { -webkit-transform: translateY(-700%); -ms-transform: translateY(-700%); transform: translateY(-700%); }
                .wrapper.active-page8 .page.page8 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page9 { -webkit-transform: translateY(-800%); -ms-transform: translateY(-800%); transform: translateY(-800%); }
                .wrapper.active-page9 .page.page9 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
            .wrapper.active-page10 { -webkit-transform: translateY(-900%); -ms-transform: translateY(-900%); transform: translateY(-900%); }
                .wrapper.active-page10 .page.page10 { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

        .nav-panel { position: fixed; top: 50%; right: 1em; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1000; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.57, 1.2, 0.68, 2.6); will-change: transform, opacity; }
            .nav-panel.invisible { opacity: 0; -webkit-transform: translateY(-50%) scale(0.5); -ms-transform: translateY(-50%) scale(0.5); transform: translateY(-50%) scale(0.5); }
            .nav-panel ul { list-style-type: none; }
                .nav-panel ul .nav-btn { position: relative; overflow: hidden; width: 1em; height: 1em; margin-bottom: 0.5em; border: 0.12em solid #fff; border-radius: 50%; cursor: pointer; -webkit-transition: border-color, -webkit-transform 0.3s; transition: border-color, transform 0.3s; will-change: border-color, transform; }
                    .nav-panel ul .nav-btn:after { width: 100%; height: 100%; border-radius: 50%; -webkit-transform: translateX(-50%) translateY(-50%) scale(0.3); -ms-transform: translateX(-50%) translateY(-50%) scale(0.3); transform: translateX(-50%) translateY(-50%) scale(0.3); background-color: #fff; opacity: 0; -webkit-transition: -webkit-transform, opacity 0.3s; transition: transform, opacity 0.3s; will-change: transform, opacity; }
                    .nav-panel ul .nav-btn.active:after, .nav-panel ul .nav-btn:hover:after { -webkit-transform: translateX(-50%) translateY(-50%) scale(0.7); -ms-transform: translateX(-50%) translateY(-50%) scale(0.7); transform: translateX(-50%) translateY(-50%) scale(0.7); opacity: 1; }
                    .nav-panel ul .nav-btn:hover { border-color: yellow; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
                        .nav-panel ul .nav-btn:hover:after { background-color: yellow; }
            .nav-panel .scroll-btn { position: absolute; left: 0; width: 1em; height: 1em; border: 0.2em solid #fff; border-left: none; border-bottom: none; cursor: pointer; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; }
                .nav-panel .scroll-btn.up { top: -1.6em; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
                .nav-panel .scroll-btn.down { bottom: -1.2em; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
                .nav-panel .scroll-btn:hover { border-color: yellow; }