/* This CSS resource incorporates links to font software which is the valuable copyrighted property of Monotype and/or its suppliers.
            You may not attempt to copy, install, redistribute, convert, modify or reverse engineer this font software.
            Please contact Monotype with any questions regarding Web Fonts: https://www.linotype.com */

            @import url("https://fast.fonts.net/lt/1.css?apiType=css&c=19c67d86-39b2-4623-946f-bf412a6d0877&fontids=1122953");
            @font-face{
                font-family:"ITC Conduit W04 Light";
                src:url("fonts/1122953/1557360a-d5fd-4b26-b496-c4184b406ce3.eot?#iefix");
                src:url("fonts/1122953/1557360a-d5fd-4b26-b496-c4184b406ce3.eot?#iefix") format("eot"),
                    url("fonts/1122953/1dbcb3c5-6152-4d01-beff-e7fd9a2d45f8.woff2") format("woff2"),
                    url("fonts/1122953/37486069-9485-4d12-bd65-7e85340c3b7f.woff") format("woff"),
                    url("fonts/1122953/64a51bb9-4dd3-4f30-8718-546eded4f484.ttf") format("truetype");
            }

            body {
                font-family: "ITC Conduit W04 Light";
                color: #bbbcbc;
                font-size: 1vw;
                overflow: hidden;
            }

            a {
                color: #bbbcbc;
                text-decoration: underline;
            }

            .footer a {
                text-decoration: none !important;
            }

            .number {
                font-size: 0.9vw;
            }

            .noscroll {
                height: 100vw;
                overflow: hidden !important;
            }

            #load {
                width: 100vw;
                height: 100vh;
                background-color: #fff;
                position: fixed;
                top: 0;
                left: 0;
                transition: opacity .5s ease-in-out;
                -o-transition: opacity .5s ease-in-out;
                -moz-transition: opacity .5s ease-in-out;
                -webkit-transition: opacity .5s ease-in-out;
            }

            h1, h2 {
                font-family: "ITC Conduit W04 Light";
                font-size: 1.5vw;
                line-height: 1.5vw;
                letter-spacing: 0.06vw;
                margin-top: 0;
                margin-bottom: 5px;
            }
            h1>.number, h2>.number {
                font-size: 1.3vw;
            }
            .logo {
                width: 70vw;
                height: auto;
                transform: translate(-50%);
                position: fixed;
                top: 15px;
                left: 50vw;
                transition: opacity .5s ease-in-out;
                -o-transition: opacity .5s ease-in-out;
                -moz-transition: opacity .5s ease-in-out;
                -webkit-transition: opacity .5s ease-in-out;
            }

            .logo-sm {
                display: none;
            }

            svg path {
                transition: fill .5s ease-in-out;
                -o-transition: fill .5s ease-in-out;
                -moz-transition: fill .5s ease-in-out;
                -webkit-transition: fill .5s ease-in-out;
            }

            svg .tab {
                cursor: pointer;
                transition: fill 0s;
                -o-transition: fill 0s;
                -moz-transition: fill 0s;
                -webkit-transition: fill 0s;
            }

            .container-fluid {
                padding: 0;
                margin: 0;
            }


            .category {
                width: 100vw;
                height: 100vh;
                overflow-x: hidden;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                -webkit-transition: opacity 1s ease-in;
                -o-transition: opacity 1s ease-in;
                -moz-transition: opacity 1s ease-in;
                transition: opacity 1s ease-in;
            }

            .gradient {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background-image: url('gradient.png');
                background-size: 100vw 100vh;
                mix-blend-mode: multiply;
                z-index: 100;
                -webkit-transition: opacity 1s ease-in;
                -moz-transition: opacity 1s ease-in;
                -o-transition: opacity 1s ease-in;
                transition: opacity 1s ease-in;
                pointer-events: none;
            }

            .img-wrapper {
                height: 100vh;
                background-size: cover;
                background-repeat: no-repeat;
                position: relative;
                overflow: hidden;
            }

            .img-now {
                opacity: 1;
                z-index: 99;
                -webkit-transition: opacity 1s ease-out;
                -o-transition: opacity 1s ease-out;
                -moz-transition: opacity 1s ease-out;
                transition: opacity 1s ease-out;
            }

            .img-old {
                opacity: 0;
                z-index: 98;
                mix-blend-mode: multiply;
            }

            .description {
                position: absolute;
                font-family:"ITC Conduit W04 Light";
                font-size: 1.1vw;
                line-height: 1.45vw;
                letter-spacing: 0.03vw;
                opacity: 1;
                -webkit-transition: opacity .3s ease-in;
                -o-transition: opacity .3s ease-in;
                -moz-transition: opacity .3s ease-in;
                transition: opacity .3s ease-in;
            }

            .description-hidden {
                opacity: 0;
            }

            .blog {
                position: absolute;
                width: 100vw;
                padding-bottom: 50px;
                background-color: #fff;
                overflow-y: scroll;
            }

            .blog .blog-content {
                width: 70vw;
                margin-left: 50vw;
                transform: translate(-50%);
            }

            .blog .blog-content .post {
                padding-top: 50px;
            }

            .post-image {
                width: 53% !important;
                margin-right: 5.8%;
                display: inline-block;
                vertical-align: top;
                cursor: pointer;
            }

            .post-image img {
                width: 75%;
            }

            .post-text {
                width: 40%;
                display: inline-block;
                vertical-align: top;
            }

            .post-text a {
                        text-decoration: none;
                        color: #888b8d;
            }

            .blog-gallery {
                margin-top: 50vh;
                margin-left: 50vw;
                max-width: 70vw;
                max-height: 70vh;
                background-size: contain;
                background-repeat: no-repeat;
            }

            .blog-gallery-wrapper {
                position: fixed;
                width: 100vw;
                height: 100vh;
                background-color: #fff;
                cursor: pointer;
                opacity: 0;
                z-index: -1;
                -webkit-transition: opacity 1s ease-in;
                -o-transition: opacity 1s ease-in;
                -moz-transition: opacity 1s ease-in;
                transition: opacity 1s ease-in;
            }

            .blog-gallery-wrapper-pre {
                z-index: 997 !important;
                opacity: 0 !important;
            }

            .blog-gallery-wrapper-show {
                z-index: 997 !important;
                opacity: 1 !important;
            }

            .footer {
                font-size: 15px !important;
                line-height: 20px !important;
                letter-spacing: 1px !important;
                z-index: 9999;
                position: fixed;
                padding-bottom: 5px;
                text-align: center;
                bottom: 0;
                width: 100vw;
            }

            iframe {
                overflow: hidden;
            }

            .overlay {
                position: absolute;
                width: 100vw;
                height: 100vh;
                z-index: 996;
                -webkit-transition: opacity .3s ease-in;
                -moz-transition: opacity .3s ease-in;
                -o-transition: opacity .3s ease-in;
                transition: opacity .3s ease-in;
            }
            .o-top {
                position: absolute;
                top: 0;
                left: 0;
                height: 40vh;
                width: 100vw;
            }
            .o-bottom {
                position: absolute;
                top: 60vh;
                left: 0;
                height: 30vh;
                width: 100vw;
            }
            .o-left {
                position: absolute;
                top: 40vh;
                left: 0;
                height: 20vh;
                width: 40vw;
            }
            .o-right {
                position: absolute;
                top: 40vh;
                right: 0;
                height: 20vh;
                width: 40vw;
            }
            .o-center {
                position: absolute;
                top: 40vh;
                left: 40vw;
                height: 20vh;
                width: 20vw;
                background: #000;
            }
            /*.vidctrl {
                visibility: hidden;
            }*/
            .bar-wrapper {
                height: 35px;
                width: calc(70vw - 80px);
                position: absolute;
                bottom: 20px;
                left: calc(15vw + 40px);
                z-index: 999;
                cursor: pointer;
            }
            .bar {
                height: 5px;
                background-color: #bbbcbc;
                position: absolute;
                bottom: 35px;
                left: calc(15vw + 40px);
                cursor: pointer;
            }
            .progbar {
                width: calc(70vw - 80px);
                opacity: 0.25;
                z-index: 997;
            }
            .load {
                width: 0;
                opacity: 0.25;
                z-index: 998;
            }
            .prog {
                width: 0;
                z-index: 999;
                -webkit-transition: width .2s;
                -moz-transition: width .2s;
                -o-transition: width .2s;
                transition: width .2s;
            }
            .play {
                position: absolute;
                font-size: 20px;
                left: 15vw;
                bottom: 37.5px;
                transform: translate(0, 50%);
                z-index: 99999;
                cursor: pointer;
                color: #bbbcbc;
                opacity: 0.5;
            }
            .vol {
                position: absolute;
                font-size: 20px;
                left: calc(85vw - 20px);
                bottom: 37.5px;
                transform: translate(0, 50%);
                z-index: 999;
                cursor: pointer;
                color: #bbbcbc;
                opacity: 0.5;
            }
            .play:hover, .vol:hover {
                opacity: 1;
            }

            @media screen and (max-aspect-ratio: 4/3) {
                body {
                    font-size: 1.8vw;
                    line-height: 1.8vw;
                }

                .number {
                    font-size: 1.57vw;
                }

                h1, h2 {
                    font-size: 2.9vw !important;
                    line-height: 2.9vw !important;
                    letter-spacing: 0.1vw !important;
                }

                h1>.number, h2>.number {
                    font-size: 2.6vw;
                    line-height: 2.6vw;
                }

                .logo-lg {
                    display: none;
                }
                .logo-sm {
                    display: initial;
                }

                .blog .blog-content {
                    padding-top: 0 !important;
                }

                .logo-background {
                    height: calc(0.7 * 100vw / 3.2 + 30px);
                }

                .post-image img {
                    width: 100%;
                }

                .post-image, .post-text {
                    width: 100% !important;
                    display: block !important;
                }

                .post-text {
                    padding-top: 25px !important;
                }
            }