.loader .wrapper {
    animation         : fadein 2s;
    -webkit-animation : fadein 2s;
    -moz-animation    : fadein 2s;
    -o-animation      : fadein 2s;
    display           : none;
    height            : 120px;
    left              : 50%;
    position          : fixed;
    top               : 50%;
    transform         : translate(-50%, -50%);
    width             : 120px;
}

.loader .wrapper .outer {
    align-items           : center;
    -webkit-align-items   : center;
    animation             : rotation 1s linear infinite;
    -webkit-animation     : rotation 1s linear infinite;
    -moz-animation        : rotation 1s linear infinite;
    -o-animation          : rotation 1s linear infinite;
    background            : linear-gradient(180deg, #FD7401 0%, white 50%);
    border-radius         : 50%;
    -webkit-border-radius : 50%;
    -moz-border-radius    : 50%;
    display               : flex;
    height                : 100%;
    justify-content       : center;
    width                 : 100%;
}

.loader .wrapper .outer .inner {
    align-items         : center;
    -webkit-align-items : center;
    background          : radial-gradient(50% 96% at bottom, #1E1E1E 99%, transparent) top no-repeat,
                          radial-gradient(50% 100% at top, #1E1E1E 99%, transparent) bottom no-repeat;
    background-size     : 100% 50%;
    display             : flex;
    height              : 99%;
    justify-content     : center;
    width               : 99%;
}

.loader .wrapper .logo {
    align-items         : center;
    -webkit-align-items : center;
    display             : flex;
    height              : 70px;
    justify-content     : center;
    left                : 15px;
    position            : absolute;
    top                 : 25px;
    width               : 70px;
}

.loader .wrapper .logo img {
    height : 100%;
    width  : 100%;
}

/* Remove dotted line on Firefox*/
.loader .wrapper .outer,
.loader .wrapper .outer:focus,
.loader .wrapper .outer::-moz-focus-inner,
.loader .wrapper .outer .inner,
.loader .wrapper .outer .inner:focus,
.loader .wrapper .outer .inner::-moz-focus-inner {
    border             : none;
    outline            : 0;
    outline-width      : 0;
    outline-style      : none;
    -moz-outline-style : none;
}

.loader .wrapper .outer .inner.samsungbrowser {
    background-size : 100% 50.2%;
}

/* IE doesnt Support supports() function */
@supports (transform : translate(-50%)) {
    .loader {
        background-image : none;
    }

    .loader .wrapper {
        display : block;
    }
}

@supports (-moz-appearance : none) {
    .loader .wrapper .outer .inner {
        background-size: 100% 50.4%;
    }
}

/* ROTATION */
@keyframes rotation {
    from { transform : rotate(0deg); }
    to { transform : rotate(360deg); }
}

@-webkit-keyframes rotation {
    from { transform : rotate(0deg); }
    to { transform : rotate(360deg); }
}

@-moz-keyframes rotation {
    from { transform : rotate(0deg); }
    to { transform : rotate(360deg); }
}

@-o-keyframes rotation {
    from { transform : rotate(0deg); }
    to { transform : rotate(360deg); }
}

/* FADE IN */
@keyframes fadein {
    from { opacity : 0; }
    to { opacity : 1; }
}

@-webkit-keyframes fadein { /* Safari and Chrome */
    from { opacity : 0; }
    to { opacity : 1; }
}

@-moz-keyframes fadein { /* Firefox */
    from { opacity : 0; }
    to { opacity : 1; }
}

@-o-keyframes fadein { /* Opera */
    from { opacity : 0; }
    to { opacity : 1; }
}