html, body {
    color:#000;
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    display: flex;
    /*When use `justify-content: center` and `margin: 0 auto` in the meantime, it will have problem in IE*/
    /*justify-content: center;*/
    align-items: center;
    /*background: linear-gradient(to left, #FFC0C2, #f9d0d1, #FFFFFF) fixed*/
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
/*https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-ie11-even-with-prefixes*/
/* CSS Grid in IE11 doens't support grid item auto placement, so we should specifically define the placement of grid items using -ms-grid-row and -ms-grid-column */
#ragic-logo_container {
    display: flex;
    align-items: flex-end;
    /* IE */
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}
#loginMain{
    margin: 0 auto;
    /* IE */
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}
#openid {
    width: 280px;
    margin: 0 auto;
    padding-bottom: 40px;
    color: #707070;
    font-size: 14px;
    /* IE */
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}

.openid-btn {
    width: 100%;
    border:1px solid #aaa;
    border-radius:6px;
    line-height:15px;
    cursor:pointer;
    height: 35px;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 15px;
    font-weight: 700;
}
.openid-btn:hover {
    opacity:0.7;
}
.slider {
    position: absolute;
    height:5px;
    overflow-x: hidden;
    bottom: 0;
    border-bottom-left-radius: 200px;
    visibility: hidden;
    /* IE */
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
}
.line {
    position:absolute;
    opacity: 0.4;
    background: #f84a4a;
    width:100%;
    height:5px;
}
.subline {
    position:absolute;
    background: #fd7474;
    height:5px;
}
.inc-animation {
    animation: increase 2s ease-in infinite;
}

@keyframes increase {
    0% { left: -5%; width: 5%; }
    50% { left: 20%; width: 100%;}
    100% { left: 100%; width: 5%;}
}

#loginIframe {
    height: 100%;
}
.greeting {
    text-shadow: 3px 3px 5px #6b6b6b;
}



/******   RWD   ******/
@media screen and (max-width: 964px) {
    html,body{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100% !important;
        height: 100% !important;
    }
    div#ragic-logo_container{
        padding: 36px 0 22px 0;
    }
    #ragic-logo {
        max-width: 110px !important;
    }
    #featureMain{
        width: 100% !important;
    }
    div#loginContainer{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    div#loginMessageDiv{
        width: 100vw;
        height: 83.333vw;
        border-radius: 0;
    }
    #regDiv{
        height: 100% !important;
    }
    .greeting{
        display: none;
    }
    .slider{
        width: 100%;
    }
}

@media screen and (max-width: 964px)  and (max-height: 800px) {
    div#loginMessageDiv{
        display: none;
    }
    div#regDiv{
        box-shadow: none;
    }
}

/* iPad */
@media screen and (max-width: 964px) and (min-height: 801px) {
    div#loginMessageDiv{
        width: 280px;
        height: 233px;
        margin: 0 auto;
        box-shadow: none;
    }
    div#regDiv{
        box-shadow: none;
    }

}

/**
    Galaxy Fold: 280 x 653
    iPhone 5/SE: 320 x 568
**/
@media screen and (max-width: 320px) {
    #featureMain {
        width: 270px !important;
        box-sizing: border-box;
    }
    #loginIframe{
        width: 260px !important;
    }
    div#loginMessageDiv{
        display: none;
    }
    #openid{
        width: 260px;
    }
    #openid > div:first-child{
        padding-bottom: 20px !important;
    }
    .openid-btn{
        font-size: 13px;
    }
    .slider{
        width: 100%;
    }
}