/* Estilos del login */
h2   {color:white}
p    {color:white}

body, html {
    height: 100%;
    background-repeat: no-repeat;
    /*background-image: url('../Images/prueba2.1.gif');*/
    background-size: 100%;
}

@media only screen and (min-width: 320px) {
    body, html {
        height: 100%;
        background-repeat: no-repeat;
        /*background-image: url('../Images/prueba2.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 200px);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:65%;
        margin:20px auto;
        margin-left: 14%;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:15px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }
        .box button {
            background: #23a095;
            border: 0;
            color: #fff;
            padding: 10px;
            font-size: 20px;
            width: 65%;
            margin: 20px auto;
            margin-left: 14%;
            display: block;
            cursor: pointer;
            border-radius: 20px;
        }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        margin-left: 33%;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 360px) {
    body, html {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 200px);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:70%;
        margin:20px auto;
        margin-left: 12%;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:15px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:17px;
        width:70%;
        margin:20px auto;
        margin-left: 12%;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        margin-left: 33%;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 411px) {
    body, html {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 200px);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:15px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:17px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        margin-left: 33%;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 480px) {
    body, html {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 200px);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:15px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:17px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        margin-left: 33%;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 768px) {
    body, html {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 28%);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:20px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 980px) {
    body, html , responsive {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.1.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 48%);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:20px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 1024px) {
    body, html, responsive {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url('../Images/prueba2.1.gif');*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 200px);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:20px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 1200px) {
    body, html , responsive{
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url("../Images/prueba2.1.gif");*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 28%);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:20px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }
    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:20px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}

@media only screen and (min-width: 1920px) {
    body, html , responsive {
        height: 100%;
        /*background-repeat: no-repeat;
        background-image: url("../Images/prueba2.1.gif");*/
        background-size: 100%;
    }

    .vid-container{
        position:relative;
        height:100vh;
        overflow:hidden;
    }

    .inner-container{
        width:400px;
        height:400px;
        position:absolute;
        top:calc(50vh - 200px);
        left:calc(50vw - 50%);
        overflow:hidden;
    }

    .box{
        position:absolute;
        height:100%;
        width:100%;
        font-family:Helvetica;
        color:#fff;
        background:rgba(0,0,0,0.60);
        padding:30px 0px;
    }

    .box h1{
        text-align:center;
        margin:30px 0;
        font-size:30px;
    }

    .box input{
        display:block;
        width:300px;
        margin:20px auto;
        padding:15px;
        background:rgba(0,0,0,0.83);
        color:#fff;
        border:0;
        font-size:20px;
    }

    .box input:focus,.box input:active,.box button:focus,.box button:active{
        outline:none;
    }

    .box button{
        background:#448B9F;
        border:0;
        color:#fff;
        padding:10px;
        font-size:17px;
        width:300px;
        margin:20px auto;
        display:block;
        cursor:pointer;
    }

    .box button:active{
        background:#448B9F;
    }

    .box p{
        font-size:14px;
        text-align:center;
    }

    .box p span{
        cursor:pointer;
        color:#666;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
        display: block;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 100%;
    }

    .profile-name-card {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0 0;
        min-height: 1em;
    }

    .reauth-email {
        display: block;
        color: #404040;
        line-height: 2;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
}