/* MISC CLASSES FOR THIS PAGE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

body{
        width           : 100vw;
        height          : 100vh;
        background-color    : #f4f5fa;
        background-image    : url('../img/signup_login_background.jpg');
        /*background-size     : auto calc(100vh - 76px);                      */
        background-repeat   : repeat-x;
        background-position : bottom;         
}

/* QUOTE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

div.quote_container{
        position    : absolute;
        top         : 120px;
        left        : 50%;
        transform   : translateX(-50%);
        white-space : nowrap;
        height      : 100px;
        padding     : 10px 50px 10px 50px;
        font-family : 'Simonetta', serif;
        font-size   : 1.8em;
}

div.quote_container span.quote_highlight{
        color       : #404e67;
        font-weight : bold;
        padding-left: 2px;
        padding-right   : 2px;
}

@media(max-height: 800px){              /* THIS IS MAX-HEIGHT, NOT MAX-WIDTH */

        div.quote_container{
                display : none;
        }
} 

/* IFRAME xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

iframe{
        position    : absolute;
        left        : 50%;
        transform   : translateX(-50%);
        top         : 220px;
        width       : 530px;
        height      : 500px;
        min-height  : 500px;
        overflow    : hidden;
        border      : 0px;
        border-radius: 20px;
        z-index     : 100;
        border-bottom: 20px solid #303548;
        box-shadow  : 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media(max-height: 800px){              /* THIS IS MAX-HEIGHT, NOT MAX-WIDTH */

        iframe{
                transform   : translate(-50%,-50%);
                top         : calc(72px + ((100vh - 72px)/2));
                height      : 380px;
                min-height  : 380px;                
        }
}