@import url("rtveplay.users.basics.css");

/** REDEFINICION LANDING USERS ******************/
/************************************************/
/*body*/
.landingBody {background:#000 url('https://css2.rtve.es/css/rtveplay.2021/rtveplay.users/img/fondo-landing-registro.jpg') no-repeat 50%;
background-size:cover;}

/*logo*/
.landing .logo {height:4rem;}
.landing .logo img {height:100%;width:auto;}
.landing .desc-logo, .landing h1 .logo {display: inline-block;height: auto;}
.landing .desc-logo img {height: 2rem;vertical-align: middle;}
.landing h1 .logo img {height: 3.5rem;vertical-align: middle;}

/*cerrar*/
.cerrar-landing {position:absolute;top:4.8rem;right:4.8rem;width:4.8rem;height:4.8rem;z-index:2;}
.cerrar-landing img {width:2.8rem;height:2.8rem;}
.cerrar-landing a {display:flex;height:100%;justify-content:center;align-items:center;opacity:0.67;}
.cerrar-landing a:hover {opacity:1;}

/*contenedor general*/
.landing-container {height:100vh;max-height: inherit; max-width: 132rem;margin: 0 auto;}
.landing-container .landing {display:flex;flex-direction:column;justify-content:flex-start;width:100%;padding:4.8rem 9.6rem 4.8rem 9.6rem;}

/*botones*/
.landing .cuenta .botones-landing {margin: 2rem;}
.landing .cuenta .botones-landing button.black {margin-bottom:2rem;}
.landing .cuenta {display: grid;border-bottom: 0.1rem solid #979797;position: relative;}

/*trozos verticales*/
.iniciar-sesion {padding:2.4rem 4.8rem;min-width:calc(40rem + (4.8rem * 2));}
.iniciar-sesion #formContainer {width:auto;min-width:40rem;height:100%;background-color:#f1f0ef;border: solid 0.1rem #979797;border-radius:0.3rem;box-shadow:0 0.2rem 1.8rem 0 rgba(0,0,0,0.5);}

/*imagen*/
.content-ima {position:relative;}
.content-ima img {position: absolute;bottom: 0;}

/** REDEFINICION LANDING USERS ******************/
/** END *****************************************/ 

@media all and (min-width:750px) and (max-width:1024px){
  .landing-container {height:80vh;}
  .content-ima {top:auto;}
  .content-ima img {height:70vh;}
  .landing .cuenta ul li p {max-width:45rem;}
  .landing .cuenta h1 {max-width:36rem;}
  .landing .cuenta .botones-landing {position:relative;display:flex;justify-content:space-evenly;width:100%;margin-left:-10rem;margin-top:0;bottom:auto;}
}

@media all and (max-width:749px){
  .landing-container .landing {flex-direction:column;padding:2rem;}
  .content-ima {position:relative;display:flex;justify-content:center;right:0;bottom:-2.2rem;}
  .content-ima img {height:50vh;}
  .landing .cuenta .txtBox {text-align:center;}
  .landing .cuenta ul li p {width:80%;}
  .landing .cuenta .botones-landing {display:flex;flex-direction:column;align-items:center;margin-left:0;}
}

@media all and (min-width:749px) and (max-width:1240px) {
  .landing .cuenta {max-width:75%;border: none;}
  .landing .cuenta .content-ima img {position: relative; max-height: 45rem;}
}

@media all and (min-width:1200px) {
  .landing .cuenta{grid-template-columns: 0.85fr 1.15fr;grid-template-rows: repeat(2, auto);}
  .landing .cuenta .txtBox {grid-area: 1 / 1 / 2 / 2;}
  .landing .cuenta .botones-landing {grid-area: 2 / 1 / 3 / 2;}
  .landing .cuenta .content-ima {grid-area: 1 / 2 / 3 / 3;bottom: 0;height: calc(100% + 0.2rem);}
  .landing .cuenta .content-ima img {right: -9.6rem;height: 100%;width: auto;max-height: 40rem;}
}

@media all and (min-width:1400px) {
  .landing-container .landing {height:100%;}
  .landing .cuenta .txtBox {max-width:50rem;}
  .landing .cuenta .content-ima img {right: -9.6rem;height: 100%;width: auto;max-height: 45rem;}
}