.box,.box:before{
    border-radius:10px;
    width:100%
}
.box,.overbox{
    padding:60px 50px 40px
}
.box:before,.input:before,.title:before{
    content:""
}
.button button,.input input,.input label,body{
    font-family:Roboto,sans-serif
}
.box{
    position:relative;
    top:0;
    opacity:1;
    float:left;
    background:rgba(13, 71, 161, 0.85);
    transform:scale(1);
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    z-index:5
}
.box.back{
    transform:scale(.95);
    -webkit-transform:scale(.95);
    -ms-transform:scale(.95);
    top:-20px;
    opacity:.8;
    z-index:-1
}
.box:before{
    height:0px;
    position:absolute;
    top:-10px;
    background:rgba(0,159,227,.8);
    left:0;
    transform:scale(.95);
    -webkit-transform:scale(.95);
    -ms-transform:scale(.95);
    z-index:-1
}
.overbox .title:before{
    background:#fff
}
.title{
    width:100%;
    float:left;
    line-height:46px;
    font-size:34px;
    font-weight:700;
    letter-spacing:2px;
    color:tg(0,159,227);
    position:relative
}
.title:before{
    width:5px;
    height:100%;
    position:absolute;
    top:0;
    left:-50px;
    background:tg(0,159,227)
}
.button,.button button .button.login button i.fa,.button.login button,.input,.input .spin,.input input,.input label,.material-button .shape:after,.material-button .shape:before{
    transition:.3s cubic-bezier(.4,0,.2,1);
    -webkit-transition:.3s cubic-bezier(.4,0,.2,1);
    -ms-transition:.3s cubic-bezier(.4,0,.2,1)
}
.alt-2,.alt-2 .shape,.box,.material-button,.material-button .shape{
    transition:.4s cubic-bezier(.4,0,.2,1);
    -webkit-transition:.4s cubic-bezier(.4,0,.2,1);
    -ms-transition:.4s cubic-bezier(.4,0,.2,1)
}
.button,.button button,.input,.input .spin,.input input,.input label{
    width:100%;
    float:left
}
.button,.input{
    margin-top:30px;
    height:70px
}
.button,.button button,.input,.input input{
    position:relative
}
.input input{
    height:60px;
    top:10px;
    border:none;
    background:0 0
}
.button button,.input input,.input label{
    font-size:24px;
    color:rgba(0,0,0,.8);
    font-weight:300
}
.input .spin,.input:before{
    width:100%;
    height:1px;
    position:absolute;
    bottom:0;
    left:0
}
.input:before{
    background:rgb(0,0,0,.1);
    z-index:3
}
.input .spin{
    background:#009fe3;
    z-index:4;
    width:0
}
.overbox .input .spin{
    background:rgb(255,255,255,1)
}
.overbox .input:before{
    background:rgb(255,255,255,.5)
}
.input label{
    position:absolute;
    top:10px;
    left:0;
    z-index:2;
    cursor:pointer;
    line-height:60px
}
.button.login{
    width:60%;
    left:20%;
    margin-top:30px
}
.button button,.button.login button{
    width:100%;
    line-height:64px;
    left:0;
    background-color:transparent;
    border:3px solid;
    font-weight:900;
    font-size:18px;
    color:rgb(0,0,0,.2)
}
.button{
    margin:40px 0;
    overflow:hidden;
    z-index:2
}
.button button{
    background-color:#fff;
    color:#009fe3;
    border:none
}
.button.login button.active{
    border:3px solid transparent;
    color:#fff!important
}
.button.login button.active span{
    opacity:0;
    transform:scale(0);
    -webkit-transform:scale(0);
    -ms-transform:scale(0)
}
.button.login button.active i.fa{
    opacity:1;
    transform:scale(1) rotate(0);
    -webkit-transform:scale(1) rotate(0);
    -ms-transform:scale(1) rotate(0)
}
.button.login button i.fa{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    line-height:60px;
    transform:scale(0) rotate(-45deg);
    -webkit-transform:scale(0) rotate(-45deg);
    -ms-transform:scale(0) rotate(-45deg)
}
.button.login button:hover{
    color:#009fe3;
    border-color:#009fe3
}
.button button{
    cursor:pointer;
    position:relative;
    z-index:2
}
.click-efect,.overbox{
    position:absolute;
    top:0;
    left:0
}
.pass-forgot{
    width:100%;
    float:left;
    text-align:center;
    color:rgb(0,0,0,.4);
    font-size:18px
}
.click-efect{
    background:#009fe3;
    border-radius:50%
}
.overbox{
    width:100%;
    height:100%;
    overflow:inherit;
    border-radius:10px
}
.overbox .button,.overbox .input,.overbox .title{
    z-index:111;
    position:relative;
    color:#fff!important;
    display:none
}
.overbox .title{
    width:80%
}
.overbox .input{
    margin-top:20px
}
.overbox .input input,.overbox .input label{
    color:#fff
}
.overbox .alt-2,.overbox .alt-2 .shape,.overbox .material-button,.overbox .material-button .shape{
    display:block
}
.alt-2,.material-button{
    width:140px;
    height:140px;
    border-radius:50%;
    background:#009fe3;
    position:absolute;
    top:40px;
    right:-70px;
    cursor:pointer;
    z-index:100;
    transform:translate(0,0);
    -webkit-transform:translate(0,0);
    -ms-transform:translate(0,0)
}
.alt-2 .shape,.material-button .shape{
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%
}
.alt-2 .shape:after,.alt-2 .shape:before,.material-button .shape:after,.material-button .shape:before{
    content:"";
    background:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotate(360deg);
    -webkit-transform:translate(-50%,-50%) rotate(360deg);
    -ms-transform:translate(-50%,-50%) rotate(360deg)
}
.alt-2 .shape:before,.material-button .shape:before{
    width:25px;
    height:4px
}
.alt-2 .shape:after,.material-button .shape:after{
    height:25px;
    width:4px
}
.alt-2.active,.material-button.active{
    top:50%;
    right:50%;
    transform:translate(50%,-50%) rotate(0);
    -webkit-transform:translate(50%,-50%) rotate(0);
    -ms-transform:translate(50%,-50%) rotate(0)
}
body{
    background-image:url(../images/Bk_2018.jpg);
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    min-height:100vh
}
body,html{
    overflow:hidden
}
.materialContainer{
    width:100%;
    max-width:600px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%)
}
*,::before,:after{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
    text-decoration:none;
    list-style-type:none;
    outline:0
}

#tituloSIGARes{
    width: 100%;display: none;
}
#tituloSIGA{
    width: 50%;
}

#bienvenida{
    width: 50%;
}

.Botones{
    float: right;margin-top: -43%;
}
@media only screen and (max-width: 558px) {

    #divImag{
        display: none;

    }
    #tituloSIGARes{
        display: block !important;
    }
}