body {
  background: url("../../img/lh/web_politics1.png");
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
}
::-webkit-input-placeholder { 
	color: black;
	font-weight: 700; 
}
.imgLogo {
    position: relative;
    width: 38vw;
    top: 79%;
    left: 10%;
}
.Letrero{
	text-transform: uppercase;
    text-align: right;
    color: white;
    font-size: 1.6rem;
    position: absolute;
    right: 20.5%;
    margin-top: 5%;
    letter-spacing: 1rem;
}
.cajaDatos {
    background-color: rgba(255,255,255,.05);
    box-shadow: 5px 5px 20px #2d353f;
    border-radius: 1rem;
    position: relative;
    top: 64%;
    padding: 2rem;
    width: 26vw;
    height: 45vh;
    left: 14%;
}
.logoUser {
    border-radius: 10rem;
    position: absolute;
    width: 5vw;
    left: 40%;
    margin-bottom: 5vh;
    top: -4rem;
}
.txtUsu{
	text-align: right;
	margin-bottom: 5vh;
}
#userId{
    width: 88%;
    height: 5vh;
    border-radius: .3rem;
    border-style: solid;
    border-color: transparent;
    margin-top: 7vh;
    text-indent: .5rem;
    font-size: 1.3rem;
}
#userId:focus{
	outline: 1px none transparent !important;
}
.cajaTxtUsu {
    padding: 1.5rem .15rem 0.8rem .5rem;
    background-color: white;
    border-radius: .5rem;
    border: #DEDEEC solid 4px;
}
.cajaTxtUsu i {
 font-size: 1.5rem;
 color: #53BD92;
}
.txtContra{
	text-align:  right;
}
#PassId{
	width: 88%;
    height: 5vh;
    border-radius: .3rem;
    border-style: solid;
    border-color: transparent;
    text-indent: .5rem;
    font-size: 1.3rem;
	/*border: none;*/
}
#PassId:focus{
	outline: none !important;
}

.LhEntrar {
	position: relative;
	left: 24%;
    color: #fff;
    /*background-color: #53BA93;*/
    background: linear-gradient(to right, #53BA93,#5FCBA6);
    border-color: #53BA93;
    border-radius: .5rem;
    font-size: 2rem;
    font-weight: 700;
    width: 13vw;
}
/*-----------------------------Tamaño desktop de alta resolución 4k---------------------------------------------*/
@media only screen and (max-width: 2560px) and (max-height: 1284px) {
    #userId, #PassId {
        height: 3vh;
    }
    .Letrero {
        right: 22.5%;
    }       
}
/*------------------------------Tamaño desktop de alta resolución------------------------------------------------*/
@media only screen and (max-width: 1920px) and (max-height: 1080px){
    #userId, #PassId {
        height: 5vh;
    }
    .Letrero{
        right: 20.5%;
    }
}
/*------------------------------Tamaño desktop de alta resolución------------------------------------------------*/
@media only screen and (max-width: 1920px) and (max-height: 937px){

}
/*---------------------------Tamaño ordenador portatil o desktop de alta resolución-----------------------------*/ 
@media only screen and (max-width: 1537px) and (max-height: 723px) {
    #userId, #PassId {
        width: 86%;
    }
    .Letrero {
        right: 17.5%;
    }    
}
/*--------------------------------------------Laptop L------------------------------------------*/
@media screen and (max-width: 1440px) and (max-height: 1284px) {
.Letrero {
    right: 17.5%;
    margin-top: 17%;
}
.logoUser {
    top: -2rem;
}
    #userId, #PassId {
        width: 85%;
    } 
}
/*-------------------------------- Laptop with HiDPI screen -------------------------------*/
@media only screen and (max-width: 1440px) and (max-height: 900px) {
    .Letrero {
        right: 17.5%;
        margin-top: 9%;
    }
    .logoUser {
        top: -2rem;
    }
    .LhEntrar {
        left: 20%;
    }
    #userId {
        width: 84%;
    }
    #PassId {
        width: 84%;
    }           
}
/*-------------------------------------------Tamaño ordenador portátil--------------------------------------------*/
@media only screen and (max-width: 1366px) and (max-height: 768px) {
                
}
/*-------------------------------------------Tamaño ordenador portátil x 625--------------------------------------------*/
@media only screen and (max-width: 1366px) and (max-height: 625px) {
    .cajaDatos {
        height: 54vh;
        top: 36%;
    }
    .imgLogo {
        top: 60%;
    }
    .Letrero {
        right: 16.5%;
        margin-top: 2%;
    }
    #userId {
        margin-bottom: 1rem;
    }    
}
/*-------------------------------- Laptop with touch -------------------------------*/
@media only screen and (max-width: 1280px) and (max-height: 950px) {
    .Letrero {
        right: 15.5%;
        margin-top: 11%;
    }
    .logoUser {
        top: -2rem;
    }   
    .LhEntrar {
        left: 20%;
    }
    #userId {
        width: 82%;
    }
    #PassId {
        width: 82%;
    }           
}
/*-------------------------------- Laptop with MDPI screen -------------------------------*/
@media only screen and (max-width: 1280px) and (max-height: 800px) {
    .Letrero {
        right: 15.5%;
        margin-top: 10%;
    }
    .logoUser {
        top: -2rem;
    }   
    .LhEntrar {
        left: 20%;
    }
    #userId {
        width: 82%;
    }
    #PassId {
        width: 82%;
    }
}
/*-------------------------------- iPad Pro -------------------------------*/
@media only screen and (max-width: 1024px) and (max-height: 1366px) {
    body{
        background-size: 200vw 100vh;
    }
    .Letrero {
        right: 10.5%;
        margin-top: 26%;
    }
    .imgLogo {
        top: 120%;
        left: 10%;
    }
    .cajaDatos {
        top: 80%;
        width: 44vw;
        height: 36vh;
        left: -4%;
    }
    .logoUser {
        width: 8vw;
        left: 44%;
        top: -2rem;
    }
    #userId {
        width: 87%;
        height: 3vh;
    }
    #PassId {
        width: 87%;
        height: 3vh;
    }
    .LhEntrar {
        left: 38%;
    }   
}
/*----------------------------iPad todos los modelos, así como iPad Mini----------------------------------------*/
@media only screen and (max-width: 1024px) and (max-height: 768px) {
    .imgLogo {
        top: 85%;
    }
    .Letrero {
        margin-top: 10%;
    }
    .cajaDatos {
        top: 62%;
        height: 46vh;
    }                            
    .logoUser {
        top: -3rem;
    }
    .txtUsu {
        margin-bottom: 8vh;
    }
}
/*-------------------------------------------Tamaño a mitad de pantalla -----------------------------------------*/
@media screen and (max-width: 958px) {
    body {
        background-size: 100vw 100vh;
    }
    .Letrero {
        right: 10.5%;
        margin-top: 14%;
    }
    #userId {
        width: 86%;
        height: 5vh;
    }
    #PassId {
        width: 86%;
        height: 5vh;
    }
    .cajaDatos {
        top: 64%;
        width: 42vw;
        height: 45vh;
        left: -1%;
    }
    .imgLogo {
        top: 90%;
        left: 10%;
    }
    .LhEntrar {
        width: 14vw;
        left: 36%;
    }
    .logoUser {
        left: 42%;
    }       
}
/*------------------------------------- Kindle Fire HDX -------------------------------------*/
@media only screen and (max-width: 800px) and (max-height: 1280px) {
    body {
        background-size: 200vw 100vh;
    }
    .Letrero {
        right: 6%;
        margin-top: 32%;
    }
    .imgLogo {
        top: 117%;
        left: 10%;
    }
    .logoUser {
        left: 41%;
    }
    #userId {
        width: 82%;
        height: 4vh;
        margin-top: 5vh;
    }
    #PassId {
        width: 82%;
        height: 4vh;
    }
    .LhEntrar {
        width: 18vw;
        left: 24%;
    }
    .cajaDatos {
        top: 87%;
        width: 42vw;
        height: 34vh;
        left: -2%;
    }       
}
/*-----------------------------------------------Microsoft Surface W8 RT----------------------------------------*/
@media screen and (max-width: 768px) and (max-height: 1366px) {
    .Letrero {
        right: 4.5%;
        margin-top: 26%;
    }
    .cajaDatos {
        height: 36vh;
    }   
    #userId, #PassId {
        width: 81%;
        height: 3vh;
    }      
    .LhEntrar {
        width: 18vw;
        left: 24%;
    }
    body {
        background-size: 200vw 100vh;
    }    
    .imgLogo {
        top: 96%;
    }
}
/*------------------------------------- iPad Mini -------------------------------------*/
@media only screen and (max-width: 768px) and (max-height: 1024px) {    
    .imgLogo {
        top: 112%;
    }
    .Letrero {
        right: 5.5%;
        margin-top: 26%;
    }
    .cajaDatos {
        height: 36vh;
    }   
    #userId {
        width: 81%;
    }
    #PassId {
        width: 81%;
    }
}
/*------------------------------------------Microsoft Surface W8 Pro-------------------------------------------*/
@media screen and (max-width: 720px) and (max-height: 1280px) {
    .Letrero {
        right: 25.5%;
        margin-top: 35%;
    }
    .cajaDatos {
        top: 70%;
        width: 75vw;
        height: 34vh;
        left: 10%;
    }
    .logoUser {
        width: 14vw;
        left: 42%;
        top: -3rem;
    }
    #userId {
        width: 87%;
        margin-top: 7vh;
    }
    #PassId {
        width: 87%;
    }
    .LhEntrar {
        width: 35vw;
    }            
}
/*------------------------------------- Microsoft Lumia 550 -------------------------------------*/
@media only screen and (max-width: 640px) and (max-height: 360px) {
    body {
        background-size: 100vw 100vh;
    }
    .imgLogo {
        top: 174%;
        left: 3%;
    }
    .logoUser {
        width: 9vw;
        left: 42%;
        top: -2rem;
    }    
    .Letrero {
        right: 2.5%;
        margin-top: -6%;
    }
    .cajaDatos {
        top: -11%;
        width: 46vw;
        height: 75vh;
        left: 47%;
    }
    #userId {
        width: 79%;
        height: 13vh;
        margin-top: 5vh;
        margin-bottom: -1rem;
    }
    #PassId {
        width: 79%;
        height: 13vh;
        margin-top: 5vh;
    }
    .LhEntrar {
        width: 22vw;
        left: 20%;
        top: -13vh;
    }           
}
/*-----------------------------------------Galaxy Tab 2 y 3 (7.0 pulgadas)-------------------------------------*/
@media screen and (max-width: 600px) and (max-height: 1024px) {
    .Letrero {
        right: 20.5%;
        margin-top: 32%;
    }
    .cajaDatos {
        height: 36vh;
    }     
}
/*------------------------------------- Nexus 7 -------------------------------------*/
@media only screen and (max-width: 600px) and (max-height: 960px) {
    .Letrero {
        right: 20.5%;
        margin-top: 35%;
    }
    .cajaDatos {
        top: 64%;
        width: 75vw;
        height: 42vh;
        left: 10%;
    }
    .logoUser {
        width: 14vw;
        left: 42%;
        top: -3rem;
    }
    #userId {
        width: 87%;
        margin-top: 7vh;
    }
    #PassId {
        width: 87%;
    }
    .LhEntrar {
        width: 35vw;
    }       
}
/*------------------------------------- Surface Duo -------------------------------------*/
@media only screen and (max-width: 540px) and (max-height: 720px) {
    .imgLogo {
        top: 36%;
    }
    .Letrero {
        right: 18.5%;
        margin-top: 23%;
    }
    .cajaDatos {
        top: 47%;
        height: 54vh;
    }
    #userId {
        width: 86%;
        margin-bottom: 4vh;
        margin-top: 8vh;
    }
    #PassId {
        width: 86%;
    }
    .LhEntrar {
        left: 23%;
    }   
}
/*------------------------------------- Nokia N9 -------------------------------------*/
@media only screen and (max-width: 480px) and (max-height: 854px) {
    .Letrero {
        right: 12.5%;
    }
    #userId {
        width: 84%;
    }
    #PassId {
        width: 84%;
    }   
}
/*------------------------------------- iPhone 6/7/8 Plus -------------------------------------*/
@media only screen and (max-width: 414px) and (max-height: 736px) {
    .imgLogo {
        top: -4%;
    }
    .Letrero {
        right: 7%;
        margin-top: 23%;
    }
    .cajaDatos {
        top: 47%;
        height: 54vh;
    }
    .logoUser {
        width: 18vw;
        left: 40%;
        top: -3rem;
    }
    #userId {
        width: 80%;
        margin-top: 8vh;
        margin-bottom: 4vh;
    }
    #PassId {
        width: 80%;
    }
    .LhEntrar {
        left: 20%;
        width: 38vw;
    }       
}
/*------------------------------------- Pixel 2 XL -------------------------------------*/
@media only screen and (max-width: 411px) and (max-height: 823px) {
    .imgLogo {
        top: -4%;
    }
    .Letrero {
        right: 7%;
        margin-top: 23%;
    }
    .cajaDatos {
        top: 47%;
        height: 54vh;
    }
    .logoUser {
        width: 18vw;
        left: 40%;
        top: -3rem;
    }
    #userId {
        width: 82%;
        margin-top: 8vh;
        margin-bottom: 4vh;
    }
    #PassId {
        width: 82%;
    }
    .LhEntrar {
        left: 20%;
        width: 38vw;
    }       
}
/*------------------------------------- LG Optimus L70 -------------------------------------*/
@media only screen and (max-width: 384px) and (max-height: 640px) {
    .Letrero {
        right: 4%;
    }
    #userId {
        width: 78%;
    }
    #PassId {
        width: 78%;
    }   
}
/*------------------------------------- iPhone X -------------------------------------*/
@media only screen and (max-width: 375px) and (max-height: 812px) {
.imgLogo {
    top: 138%;
}
.Letrero {
    right: 4.5%;
}
.logoUser {
    width: 18vw;
    left: 38%;
    top: -2rem;
}
.cajaDatos {
    width: 73vw;
    height: 46vh;
    top: 58%;
}
#userId {
    width: 77%;
    margin-top: 8vh;
    margin-bottom: 2vh;
}
#PassId {
    width: 77%;
}
.LhEntrar {
    width: 40vw;
    left: 15%;
}   
}
/*------------------------------------- iPhone 6/7/8 -------------------------------------*/
@media only screen and (max-width: 375px) and (max-height: 667px) {
    .Letrero {
        margin-top: 27%;
    }
    .imgLogo {
        top: 112%;
    }
    .cajaDatos {
        height: 52vh;
        top: 45%;
    }
    #userId {
        margin-bottom: 4vh;
    }
}
/*------------------------------------- Moto G4 -------------------------------------*/
@media only screen and (max-width: 360px) and (max-height: 640px) {
.imgLogo {
    top: -14%;
}
.Letrero {
    right: 2%;
    margin-top: 20%;
}
.cajaDatos {
    height: 54vh;
    top: 41%;
}
#userId {
    width: 76%;
}
#PassId {
    width: 76%;
}   
}

/*------------------------------------- iPhone 5/SE -------------------------------------*/
@media only screen and (max-width: 320px) and (max-height: 568px) {
    .Letrero {
        right: 0%;
        margin-top: 18%;
    }
    .cajaTxtUsu {
        padding: 0.8rem .15rem 0.8rem .8rem;
    }
    .cajaTxtUsu i {
        font-size: 1.2rem;
    }    
    #userId, #PassId {
        width: 73%;
        height: 5vh;
    }
    .LhEntrar {
        width: 46vw;
        left: 7%;
        top: -5vh;
    }           
}
/*------------------------------------- Nokia Lumia 520 -------------------------------------*/
@media only screen and (max-width: 320px) and (max-height: 533px) {
    .Letrero {
        right: 0%;
        margin-top: 16%;
    }
    .cajaTxtUsu {
        padding: 0.8rem .15rem 0.8rem .8rem;
    }
    .cajaTxtUsu i {
        font-size: 1.2rem;
    }    
    #userId {
        width: 73%;
    }
    #PassId {
        width: 73%;
    }
    .LhEntrar {
        width: 46vw;
        left: 7%;
        top: -5vh;
    }   
}
/*------------------------------------- iPhone 4 -------------------------------------*/
@media only screen and (max-width: 320px) and (max-height: 480px) {
    #userId {
        width: 73%;
        height: 5vh;
    }
    #PassId {
        width: 73%;
    }
    .LhEntrar {
        font-size: 1.5rem;
        top: -6vh;
    }           
}
/*------------------------------------- Galaxy Fold -------------------------------------*/
@media only screen and (max-width: 280px) and (max-height: 653px) {
    .Letrero {
        right: 2.2%;
        margin-top: 31%;
        letter-spacing: .8rem;
    }
    .cajaDatos {
        height: 50vh;
        top: 53%;
    }
    .cajaTxtUsu {
        padding: 0.8rem .1rem 0.8rem .1rem;
    }
    .cajaTxtUsu i {
        font-size: 1.2rem;
    } 
    #userId {
        width: 76%;
        text-indent: .1rem;
        margin-top: 5vh;
        margin-bottom: 2vh;
    }
    #PassId {
        width: 76%;
        text-indent: .1rem;
    }
    ::-webkit-input-placeholder { 
        font-size: 1.2rem; 
    }
    .LhEntrar {
        font-size: 1.5rem;
        top: -3vh;
        left: 11%;
    }
    #userId, #PassId {
        height: 6vh;
    }                   
}
/*------------------------------------- JioPhone 2 -------------------------------------*/
@media only screen and (max-width: 240px) and (max-height: 320px) {
    body {
        background-size: 200vw 100vh;
    }
    .imgLogo {
        display: none;
    }
    .Letrero {
        right: 1.2%;
        margin-top: -18%;
        letter-spacing: .5rem;
    }
    .cajaDatos {
        height: 68vh;
        top: 17%;
    }
    #userId {
        width: 70%;
        height: 7vh;
    }
    #PassId {
        width: 70%;
        height: 7vh;
    }
    ::-webkit-input-placeholder { 
        font-size: .8rem; 
    }   
    .LhEntrar {
        font-size: 1rem;
        top: -10vh;
        left: 15%;
        width: 33vw;
    }
}