@-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
                -ms-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        #wait-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000
        }

        #wait,
        #wait:after,
        #wait:before {
            border-radius: 50%;
            border: 3px solid transparent
        }

        #wait {
            display: block;
            width: 150px;
            
            margin: -75px 0 0 -75px;
            z-index: 1001;
            position: relative;
            left: 50%;
            top: 50%;
            border-top-color: #3498db;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite
        }

        #wait:after,
        #wait:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-top-color: #e74c3c;
            -webkit-animation: spin 3s linear infinite;
            animation: spin 3s linear infinite
        }

        #wait:after {
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-top-color: #f9c922;
            -webkit-animation: spin 1.5s linear infinite;
            animation: spin 1.5s linear infinite
        }

        #wait-wrapper .wait-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #222;
            z-index: 1000;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }

        #wait-wrapper .wait-section.section-left {
            left: 0
        }

        #wait-wrapper .wait-section.section-right {
            right: 0
        }

        .loaded #wait-wrapper .wait-section.section-left,
        .loaded #wait-wrapper .wait-section.section-right {
            -webkit-transform: translateX(-100%);
            -ms-transform: translateX(-100%);
            transform: translateX(-100%);
            -webkit-transition: all .7s .3s cubic-bezier(.645, .045, .355, 1);
            transition: all .7s .3s cubic-bezier(.645, .045, .355, 1)
        }

        .loaded #wait-wrapper .wait-section.section-right {
            -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
            transform: translateX(100%)
        }

        .loaded #wait {
            opacity: 0;
            -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out
        }

        .loaded #wait-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
            transform: translateY(-100%);
            -webkit-transition: all .3s 1s ease-out;
            transition: all .3s 1s ease-out
        }

        .no-js #wait-wrapper {
            display: none
        }