body { 

}
body.flash{
    background-color:#f4523f;
    background-image:
        url(../images/login/main-bg-flash.png),
        url(../images/login/bg-bottom-flash.png),
        linear-gradient(170deg, rgb(250,153,72) 10%,rgb(244,98,54) 40%,rgb(244,82,63) 60%,rgb(244,82,63) 70%); 
       background-repeat: no-repeat,no-repeat; 
       background-position: top center,bottom center,top center; 
       background-size: cover,contain,contain;
}

.flash, .normal, .flash-content, .normal-content { -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; -o-transition: all 1.5s ease; transition: all 1.5s ease; }

body.normal{
    background-color: #30ade3; background-image: url(../images/login/bg-bottom.jpg),url(../images/login/main-bg.jpg); 
       background-repeat: no-repeat,no-repeat; 
       background-position: bottom center,top center; 
       background-size: cover,cover;
}
.title-topic-img { max-width: 280px; }
.title-topic-img.small-img { max-width: 220px; }
.flash .normal-content{display:none}
.flash .title-img { padding-top: 12%; }
.normal .flash-content{display:none}
.normal .title-img { padding-top: 25%; }
.text-gold { color: #ffe5a2 }
.btn-goOn { font-size: 1.6rem; border-width: 2px; border-color: rgba(255,229,162,.8); border-radius: 1rem; background-color: #f4533f }
.desc-info{font-size:0.8rem;line-height:200%}
.support-org { text-align: left; background-image: linear-gradient(rgba(136,0,0,.15) 0%,rgba(136,0,0,.15) 40%); bottom: 0; left: 0;border-radius:1.5rem;/*margin-left:-15px;margin-right:-15px;*/ }
.normal-content.support-org { background-image: linear-gradient(rgba(136,0,0,.3) 0%, rgba(0,60,136,.3) 40%); margin-top: 10vh !important; }
.org-info { font-size: 1rem; line-height: 1em; color: #fff8e7; text-shadow: 0 0 3px #7b0d00 }
    .org-info strong{font-size:1.2rem;}
    .org-info span { margin-right: .25rem }
        .org-info span.indent{padding-left:6rem;}

.absolute-center{
  display: flex;/*make us of Flexbox*/
  align-items: center; /*does vertically center the desired content*/
  justify-content: center; /*horizontally centers single line items*/
  text-align: center; /*optional, but helps horizontally center text that breaks into multiple lines*/
}
.absolute-center-trans { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) }
.center-parent { position: relative; }
.center-child { position: absolute; left: 50%; transform: translate(-50%, -50%); }

        .login-title { text-indent: -9999em; background: url(../images/login/login-title.png) no-repeat 50% 50%; background-size: contain; width: 70%; }
.btn-login { background: #fff; background-size: contain; line-height: 1.6em; color: #34B5E3; font-size: 1.4rem; font-weight: 700;border-radius:0.8rem;min-width:160px }
    .btn-login:hover, .btn-login:active { color: #00759e !important; background: #dbf9ff !important }

.progress{height:3px;background-color:#ffe5a2}
.progress .progress-bar{background-color:rgb(244,82,63)}


html#login_page, #login_page body, #login_page .page-container { height: 100vh; margin: 0; }
#login_page_body {  }
#login_page .page-container { min-height: 100vh; padding-bottom: 4em; margin-bottom: -4em; }
#login_page .main { }
#login_page footer { line-height: 4em; height: 4em; color: #fff; text-align: center; font-size: 1rem; }

@media(min-width:600px) {
    body.normal { background-size: contain,contain; }
    body.flash { background-size: 0,60%,contain; }

    .title-topic-img { max-width: 500px; }
        .title-topic-img.small-img { max-width: 400px; }

    .flash .title-img { padding-top: 10%; }
}
@media(min-width:800px) {
    body.flash { background-size: cover,40%,contain; }
}
@media(min-width:1200px) {
    body.flash { background-size: cover,30%,contain; }
}
@media(max-height:600px){
    body.flash { background-size: cover,0,contain; }
}