#cycler {
    height: 100%;
}

#cycler {
    position: absolute;
    width: 100%;
}

.a { background-color: #00bcd4; } /* cyan */
.b { background-color: #f44336; } /* red */
.c { background-color: #ff9800; } /* orange */
.d { background-color: #aa6644; } /* brown */
.e { background-color: #bb5555; } /* dark salmon */
.f { background-color: #3366cc; } /* blue */
.g { background-color: #dc3912; } /* dark red */
.h { background-color: #ff9900; } /* amber */
.i { background-color: #109618; } /* green */
.j { background-color: #990099; } /* purple */
.k { background-color: #ff1e00; } /* bright red */
.l { background-color: #800000; } /* maroon */

/* continue more colors */
.m { background-color: #008080; } /* teal */
.n { background-color: #ffd700; } /* gold */
.o { background-color: #228b22; } /* forest green */
.p { background-color: #4169e1; } /* royal blue */
.q { background-color: #ff69b4; } /* hot pink */
.r { background-color: #8b4513; } /* saddle brown */
.s { background-color: #2e8b57; } /* sea green */
.t { background-color: #00ced1; } /* dark turquoise */
.u { background-color: #ff4500; } /* orange red */
.v { background-color: #6a5acd; } /* slate blue */
.w { background-color: #b22222; } /* firebrick */
.x { background-color: #20b2aa; } /* light sea green */
.y { background-color: #708090; } /* slate gray */
.z { background-color: #daa520; } /* goldenrod */


#cycler{position:absolute; display:none;width:100%;}
#cycler img{position:absolute;z-index:1; width:100% }
#cycler img.active{z-index:3; }
body{
    overflow:hidden;
}

.login-page  {z-index: 9999 !important; }





/*
 Start
    1025px
 to
    3840px
*/

@media screen and (min-width: 1920px) and (max-width: 5120px)  {
    #cycler {height:100%;}

    .wrapper-full-page {height: auto;z-index: 1030;position: relative; !important;background: transparent !important;width: 100%}
}

@media screen and (min-width: 1281px) and (max-width: 1920px)  {
    #cycler {height:100%;}

    .wrapper-full-page {height: auto;z-index: 1030;position: relative; !important;background: transparent !important;width: 100%}
}

@media screen and (min-width: 1025px) and (max-width: 1280px)  {
    body{ overflow: scroll !important; }
    #cycler {height:100%;}

    .wrapper-full-page {height: auto;z-index: 1030;position: relative; !important;background: transparent !important;width: 100%}
}


/*
 Start
    768px
 to
    1024px
*/

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : landscape) {
    body{ overflow: scroll !important; }
    #cycler {height:100% !important;}

    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    .footer .copyright {margin-bottom: 0 !important}

}


@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation : portrait) {
    body{ overflow: scroll !important; }
    #cycler {height:100% !important;}
    #cycler img{height:100%  !important;}
    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    .footer .copyright {margin-bottom: 0 !important}

}


/*
 End
    768px
 to
    1024px
*/

/*
 Starts
    601px
 to
    767px
*/

@media screen and (min-width: 601px)and (max-width: 767px) {
    body{ overflow: scroll !important; }
    .login-page > .content, .lock-page > .content {padding-top: 4vh !important; }
    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    #cycler img{height:100% !important;}
    .footer {display:none;}
    .card-content div span {font-size:12px !important; }
    .lock-page .card-lock {margin-top: 0px !important;}
    .login-cycler {height:100% !important;}

}

@media screen and (min-width: 601px)and (max-width: 767px) and (orientation : landscape) {
    body{ overflow: scroll !important; }
    .login-page > .content, .lock-page > .content {padding-top: 4vh !important; }
    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    #cycler img{height:100% !important;}

    .footer {display:none;}
    .card-content div span {font-size:12px !important; }
    .lock-page .card-lock {margin-top: 0px !important;}
    .login-cycler {height:100% !important;}

    .login-page .container {padding-top:0 !important;}

}

/*
 End
    601px
 to
    767px
*/



/*
 Start
    481px
 to
    600px
*/
@media screen and (min-width: 481px)and (max-width: 600px) {
    body{ overflow: scroll !important; }
    .login-page > .content, .lock-page > .content {padding-top: 4vh !important; }
    .AbsoluteResponsive {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    #cycler img{height:100% !important;}
    .lock-cycler {height:100% !important;}
    .footer {display:none;}
    .card-content div span {font-size:12px !important; }
    .lock-page .card-lock {margin-top: 0px !important;}
    .login-cycler {height:100% !important;}
    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
}
@media screen and (min-width: 481px)and (max-width: 600px) and (orientation : landscape) {
    .login-page > .content, .lock-page > .content {padding-top: 4vh !important; }
    .AbsoluteResponsive {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    #cycler img{height:100% !important;}
    .lock-cycler {height:100% !important;}
    .footer {display:none;}
    .card-content div span {font-size:12px !important; }
    .lock-page .card-lock {margin-top: 0px !important;}
    .login-cycler {height:100% !important;}
    .wrapper-full-page {height: auto;z-index: 1030;position: relative !important;background: transparent !important;}
    .login-page .container {padding-top:0 !important;}
}
@media screen and (min-width: 320px) and (max-width: 480px) {
    body{ overflow: scroll !important; }
    .login-page .content {padding-top: 2vh !important; }
    .AbsoluteResponsive {height: auto;min-height: 105vh !important;z-index: 1030;position: absolute !important;background: transparent !important;}
    .navbar-brand { margin-bottom:0px !important;}
    .full-page > .content {min-height: calc(100vh - 70px);overflow: scroll !important;}
    #cycler {height:100% !important;} #cycler img{height:100% !important;}
    .lock-page > .content {padding-top: 10vh !important; }
    .VerifyImg {max-width: 50% !important;margin-top: 45px !important;}
    .wrapper-full-page {height: auto;min-height: 100vh !important;z-index: 1030;position: relative !important;background: transparent !important;}
    .login-page .container {padding-top:0 !important;}
}

@media screen and (min-width: 320px) and (max-width: 480px) and (orientation : landscape) {
    .lock-page > .content {padding-top: 4vh !important; }
    .AbsoluteResponsive {height: auto;min-height: 100vh !important;z-index: 1030;position: absolute !important;background: transparent !important;}
    .VerifyImg {max-width: 30% !important;  margin-top: 0px !important;}
    .wrapper-full-page {height: auto;min-height: 100vh !important;z-index: 1030;position: relative !important;background: transparent !important;}
    .login-cycler {height:100% !important;}
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
}