/* body { */
/*     margin: 0px; */
/*     background-color: #000000; */
/*     overflow: hidden; */
/* } */

.ext-sidenav-42x54 {
    height: 42px;
    width:  54px;
}
.ext-sidenav-50x54 {
    height: 50px;
    width:  54px;
}
.ext-sidenav-210x54 {
    height: 210px;
    width:  54px;
}
.ext-sidenav-376x54 {
    height: 376px;
    width:  54px;
}
.ext-rotate45 {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}
.ext-rotate90 {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}
.ext-rotate135 {
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
    transform: rotate(135deg);
}
.ext-rotate180 {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
.ext-rotate225 {
    -ms-transform: rotate(225deg); /* IE 9 */
    -webkit-transform: rotate(225deg); /* Chrome, Safari, Opera */
    transform: rotate(225deg);
}
.ext-rotate270 {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}
.ext-rotate315 {
    -ms-transform: rotate(315deg); /* IE 9 */
    -webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
    transform: rotate(315deg);
}
.ext-rotate360 {
    -ms-transform: rotate(360deg); /* IE 9 */
    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
    transform: rotate(360deg);
}

/* --------------- overlay --------------- */
/* protects all content before user input  */
/* --------------- overlay --------------- */
.overlay {
    position: absolute;
    z-index: 900;

    /* NOT supported from IE8 and earlier */
    background-color: rgba(97,97,97,0.5);

    width: 100%;
    height: 100%;

    top: 0;
    bottom: 0%;

    left: 0;
    right: 0%;
}

/* -------------- loader1 -------------- */
.loader1 {
    position: absolute;
    z-index: 990;

    width: 200px;
    height: 28px;

    top: 45%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);

    left: 25%;
    left: -webkit-calc(50% - 75px);
    left: calc(50% - 75px);
}
.loader1:after {
    position: absolute;
    z-index: 1;

    content: "LOADING ...";
    color: #fff;
    font-family: Lato,"Helvetica Neue" ;
    font-weight: 200;
    font-size: 22px;
    text-align: center;

    background-color: rgba(97,97,97,0.4);

    width: 100%;
    height: 28px;
    line-height: 28px;

    top: 0;
    left: 0;
}
.loader1:before {
    position: absolute;
    z-index: 0;

    content: "";

    background-color: rgba(255,255,255,1.0);

    width: 0px;
    height: 38px; /* correlates with top: -5px and height: 28px above */

    top: -5px;
    left: 0px;

    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0% ;
    -webkit-animation: loader1 1s ease-in-out infinite;
            animation: loader1 1s ease-in-out infinite;
}
@-webkit-keyframes loader1 {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}
@keyframes loader1 {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

/* -------------- loader2 -------------- */
.loader2 {
    position: absolute;
    z-index: 990;

    background-color: rgba(97,97,97,0.4);

    width: 200px;
    height: 28px;

    top: 45%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);

    left: 25%;
    left: -webkit-calc(50% - 75px);
    left: calc(50% - 75px);
}
.loader2:before {
    position: absolute;
    z-index: 0;

    content: "";

    background-color: rgba(255,255,255,1.0);

    width: 0px;
    height: 28px;

    top: 0px;
    left: 0px;

    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0% ;
    -webkit-animation: loader2 1s ease-in-out infinite;
            animation: loader2 1s ease-in-out infinite;
}
.loader2:after {
    position: absolute;

    content: "LOADING ...";
    color: #fff;
    font-family: Lato,"Helvetica Neue";
    font-weight: 200;
    font-size: 22px;
    text-align: center;

    width: 100%;
    height: 28px;
    line-height: 28px;

    left: 0;
    top: 0;
}
@-webkit-keyframes loader2 {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}
@keyframes loader2 {
    0%{width: 0px;}
    70%{width: 100%; opacity: 1;}
    90%{opacity: 0; width: 100%;}
    100%{opacity: 0;width: 0px;}
}

/* -------------- loader3 -------------- */
.loader3 {
    position: absolute;
    z-index: 990;

    background-color: rgba(97,97,97,0.4);

    width: 200px;
    height: 28px;

    top: 45%;
    top: -webkit-calc(50% - 10px);
    top: calc(50% - 10px);

    left: 25%;
    left: -webkit-calc(50% - 75px);
    left: calc(50% - 75px);
}
.loader3:after {
    position: absolute;

    content: "LOADING ...";
    color: #fff;
    font-family: Lato,"Helvetica Neue" ;
    font-weight: 200;
    font-size: 22px;
    text-align: center;

    width: 100%;
    height: 28px;
    line-height: 28px;

    left: 0;
    top: 0;
}
.loader3:before {
    position: absolute;
    z-index: 0;

    content: "";

    background-color: rgba(255,255,255,1.0);

    width: 0px;
    height: 28px;

    top: 0px;

    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0% ;
    -webkit-animation: loader3 1s ease-in-out infinite;
            animation: loader3 1s ease-in-out infinite;
}
@-webkit-keyframes loader3 {
    0%{width: 0px; left: 0px}
    48%{width: 100%; left: 0px}
    50%{width: 100%; right: 0px}
    52%{width: 100%; right: 0px}
    100%{width: 0px; right: 0px}
}
@keyframes loader3 {
    0%{width: 0px; left: 0px}
    48%{width: 100%; left: 0px}
    50%{width: 100%; right: 0px}
    52%{width: 100%; right: 0px}
    100%{width: 0px; right: 0px}
}