@import url('../rtve.play.basics.desktp.css');
@import url('../rtve.mod_header.desktp.css');
@import url('../rtve.mod_footer.desktp.css');

.hddn_desktp {display: none !important;}
.hidden {display:none}

/* menu */
.pfsupport li[role='treeitem'] .openR .rtve-icons, .pfsupport li[role='treeitem'] .blindBox {position:absolute;}
.pfsupport li[role='treeitem'] .openR .rtve-icons {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_next_000000.svg');}
.pfsupport li[role='treeitem'] .active .rtve-icons {background-image:url('https://img2.rtve.es/css/rtve.2021/i/rtve-icons.svg/rtve-icon_prev_000000.svg');}

/*cabecera */
.pfsupport .menu-cross span {background: #000;}
.pfsupport .navBox nav.blindBox {
    background: rgba(255,255,255,0.85);
    background: -moz-linear-gradient(left,rgba(255,255,255,1) 25%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to right,rgba(255,255,255,1) 25%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff00',GradientType=1 );
}

/*backgrounds*/
.pfsupport{background: transparent url('/css/rtveplay.2021/rtveplay.estaticos/i/img-fondo.png') 0% 0% no-repeat padding-box;}
.pfsupport .grid.size100 {display: inline-block;width: 100%;}
.pfsupport .secBox {width:100%;padding: 2.4rem 0 0 4.8rem;}

.pfsupport footer {background:#111;}
.bodier > .container {padding-bottom:20rem;}

/*margenes*/
.bodier .grid > div > div {display:block;overflow:hidden;max-width: 28vw;}
.bodier .grid > div .blindBox p, .bodier .grid > div .blindBox ul {padding:0.5rem 0}
.bodier h2 + div, .bodier h3.blind + .blindBox {padding-left:3rem}
.bodier h3.blind.be_on {margin: 1.25rem 0 .25rem 3rem;}
.bodier h3.blind:first-of-type {margin-top: 0;}
.bodier h3.blind + .blindBox p, .bodier h3.blind + .blindBox ul li, .bodier h3.blind + .blindBox .boton {margin-left: 2rem;}
.bodier .grid > div > ul li {padding:0.4rem 0}
.bodier .grid > div p:last-child{margin-bottom: 1.25rem;}

.bodier h2.be_off{display:block;}
.bodier h2, .bodier h3.blind{cursor: pointer;}
.bodier h3.blind.be_off, .bodier .blindBox.be_off{height:0;opacity:0;overflow:hidden;
  transition: all 0.5s ease-in-out;
  -webkit-transform: translateY(-15%);-moz-transform: translateY(-15%);
  transform: translateY(-15%);
  -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; }
.bodier .be_on,
.bodier h2.blind.be_on + .blindBox{height:auto;opacity:1; animation: fade_in_show 0.5s;
  transform: translateY(0px);
  -webkit-transform: translateY(0px);-moz-transform: translateY(0px);
  transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; }

/*css transform animaciones*/
@keyframes fade_in_show {
    0% {opacity: 0;transform: display 4s;}
    100% {opacity: 1;transition: display 4s;}
}

/*flechas*/
.bodier h2:before,
.bodier h3:before {/*flecha derecha*/content: ' \25BA';font-size: 1.4rem;}
.bodier h2.be_on::before,
.bodier h3.be_on.active::before {/*flecha abajo*/content: ' \25BC';font-size: 1.4rem;}
.bodier h2:before,
.bodier h2.be_on::before {margin-right: 1.75rem;}
.bodier h3.be_on::before,
.bodier h3.be_on.active::before{margin-right: 0.5rem;}


/*estilos de texto*/
.bodier .grid > div * {color: #111111;}
.bodier .secBox h1{font-size: 4.2rem;line-height: 5rem;font-weight: 300;}

.bodier .grid > div h2{font-size: 1.4rem;line-height: 4rem;font-weight: 900;text-transform:uppercase}
.bodier .grid > div h3{font-size: 1.7rem;line-height: 2.5rem;font-weight: 900;}

.bodier .grid > div p,
.bodier .grid > div ul li{font-size: 1.7rem;line-height: 2.5rem;font-weight: 400;}
.bodier .grid > div a {border-bottom: .2rem solid;}

.bodier .grid > div a:hover {opacity:0.7;}
.bodier .grid > div a.boton {letter-spacing: 1pt;}
.bodier .grid > div a.boton:hover {background-color:#000;color:#fff;}
.bodier .grid > div a.boton:hover {transition: all 0.85s ease-in-out;}

/* iconos */
.bodier .grid > div .icon {width: 2.6rem;height: 2.6rem;filter: invert(1);vertical-align: middle;margin: 0 1rem;}

/* botones */
.bodier .boton {display: inline-block;margin: 2rem 0;padding:0.6rem 1.5rem;border: 0.1rem solid #707070;border-radius: 0.4rem;}
.bodier .grid > div .boton {font-size:1.4rem;line-height: 1.6rem;font-weight:bold;text-transform: uppercase;}
.bodier .grid > div .boton:hover {border: 0.1rem solid #ccc;}
.bodier .grid > div .app-store, .bodier .grid > div .play-store  {width: 10.4rem;height: 3.6rem;text-indent: -1000%;color:transparent;overflow:hidden;border:0;margin-right:1rem;}
.bodier .grid > div .app-store {background: url("/css/rtveplay.2021/rtveplay.estaticos/i/app_store.png") no-repeat top left ;}
.bodier .grid > div .play-store {background: url("/css/rtveplay.2021/rtveplay.estaticos/i/google_play.png") no-repeat top left ;}

.bodier .descargas {display: flex;justify-content: space-evenly;}
.bodier .descargas .button {margin: 1.6rem;}
.bodier .descargas .button a {display: block;color:transparent;position:relative;height: 5.8rem;}
.bodier .descargas .button img {display:block;width: auto;height: 100%;}

@media only screen and (max-width:1400px){
  .bodier .grid > div > div {max-width:40vw}
}

@media only screen and (max-width:1000px){
  .bodier .grid > div > div {max-width:60vw}
}

@media only screen and (max-width:700px){
  .bodier .grid > div > div {max-width:85vw}
}