#PANTALLA_DETAIL {
    display: none;
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: black;
}

#PANTALLA_DETAIL .fondo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /*filter: blur(8px);
    -webkit-filter: blur(8px);*/
    opacity: 0;

    will-change: opacity;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#PANTALLA_DETAIL .fondo.loaded {
    opacity: 1;
}

#PANTALLA_DETAIL .alfa {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: black;
    opacity: 0.8;
}

#PANTALLA_DETAIL .back-button {
    position: fixed;
    left: 6.3%;
    top: 5.4%;
    width: 2.5%;
    height: 4%;
    background-image: url(../img/icons/ios-back.png);
    background-size: 100% 100%;
}

#PANTALLA_DETAIL .back-text {
    position: fixed;
    left: 9%; top: 6.4%;
    width: 5%; height: 4%;
    color: white;
    font-family: Arial;
    font-size: 0.5em;
}

#PANTALLA_DETAIL .background-layer {
    position: fixed;
    left: 0%; top: 26.85%; 
    width: 100%; height: 73.15%;
    background-color: black;
}

/*#PANTALLA_DETAIL .button-row {
    position: absolute;
    left: 25.5%;
    top: 44.7%;
    width: 73%;
    height: 11%;
    display: none;
}

#PANTALLA_DETAIL .button-row-item {
    width: 10.3%;
    height: 98%;
}

#PANTALLA_DETAIL .button-row-item .icon {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-repeat: no-repeat;
    background-size: 100%;
}

#PANTALLA_DETAIL .button-row-item .label {
    color: white;
    font-family: Arial;
    font-size: 0.48em;
    position: absolute;
    top: 81%;
    left: 0%;
    width: 100%;
    text-align: center;
}

#PANTALLA_DETAIL .button-row-item.watch {
    position: absolute;
    left: 0%;
}

#PANTALLA_DETAIL .button-row-item.favorite {
    position: absolute;
    left: 12.4%;
}

#PANTALLA_DETAIL .button-row-item.trailer {
    position: absolute;
    left: 24.7%;
}

#PANTALLA_DETAIL .button-row-item.watch .icon {
    background-image: url(../img/icons/btn_play.png);
}

#PANTALLA_DETAIL .button-row-item.watch.selected .icon {
    background-image: url(../img/icons/btn_play_focus.png);
}

#PANTALLA_DETAIL .button-row-item.trailer .icon {
    background-image: url(../img/icons/btn_trailer_01.png);
}

#PANTALLA_DETAIL .button-row-item.trailer.selected .icon {
    background-image: url(../img/icons/btn_trailer_02.png);
}

#PANTALLA_DETAIL .button-row-item.favorite.yes-favorite .icon {
    background-image: url(../img/icons/btn_like_03.png);
}

#PANTALLA_DETAIL .button-row-item.favorite .icon,
#PANTALLA_DETAIL .button-row-item.favorite.no-favorite .icon {
    background-image: url(../img/icons/btn_like_01.png);
}

#PANTALLA_DETAIL .button-row-item.favorite.selected .icon {
    background-image: url(../img/icons/btn_like_02.png);
}*/

#PANTALLA_DETAIL .button-row {
    position: absolute;
    left: 25.5%;
    top: 44.7%;
    width: 73%;
    height: 11%;
    display: none;
}

#PANTALLA_DETAIL .button-row-item {
    width: 10.5%;
    height: 64%;
    border-radius: 4px;
    border: solid 2px white;
    float: left;
    margin-right: 2%;
}

#PANTALLA_DETAIL .button-row-item.selected,
#PANTALLA_DETAIL .button-row-item:hover {
    border: solid 2px #cc3f3f;
    background-color: #cc3f3f;
}

#PANTALLA_DETAIL .button-row-item .icon {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 35% 68%;
    background-position: center;
}

#PANTALLA_DETAIL .button-row-item .label {
    color: white;
    font-family: Arial;
    font-size: 0.48em;
    width: 100%;
    text-align: center;
    margin-top: 13%;
}

#PANTALLA_DETAIL .button-row-item.continue .icon {
    background-image: url(../img/screens/detail/continue.png);
}

#PANTALLA_DETAIL .button-row-item.watch .icon {
    background-image: url(../img/screens/detail/play.png);
}

#PANTALLA_DETAIL .button-row-item.mp4 .icon {
    background-image: url(../img/screens/detail/play.png);
}

#PANTALLA_DETAIL .button-row-item.trailer .icon {
    background-image: url(../img/screens/detail/trailer.png);
}

#PANTALLA_DETAIL .button-row-item.download .icon {
    background-image: url(../img/screens/detail/download.png);
}

#PANTALLA_DETAIL .button-row-item.share .icon {
    background-image: url(../img/screens/detail/share.png);
}

#PANTALLA_DETAIL .button-row-item.yes-favorite .icon {
    background-image: url(../img/screens/detail/favorites-yes.png);
}

#PANTALLA_DETAIL .button-row-item.no-favorite .icon {
    background-image: url(../img/screens/detail/favorites-no.png);
}

#PANTALLA_DETAIL .main-title {
    position: absolute;
    left: 25.6%; top: 13.5%;
    width: 70%; height: 6%;
    
    color: white;
    font-family: roboto_regular;
    font-size: 1.18em;
    overflow: hidden;
    line-height: 103%;
}

#PANTALLA_DETAIL .main-data {
    position: absolute;
    left: 25.5%;
    top: 20%;
    font-size: 0.63em;
    font-family: Arial;
    color: white;
}

#PANTALLA_DETAIL .rating-label {
    display: none;
    position: fixed;
    left: 27.9%;
    top: 34%;
    font-size: 0.6em;
    font-family: roboto_regular;
    color: white;
}

#PANTALLA_DETAIL .rating {
    display: none;
    position: fixed;
    left: 36%;
    top: 33%;
    font-size: 0.6em;
    font-family: roboto_regular;
    color: white;
}

#PANTALLA_DETAIL .rating img {
    width: 15%;
}

#PANTALLA_DETAIL .tagline {
    position: fixed;
    left: 25.5%;
    top: 25%;
    font-size: 0.62em;
    font-family: Arial;
    color: white;
    width: 72%;
    display: none;
}

#PANTALLA_DETAIL .main-plot {
    position: absolute;
    left: 25.5%;
    top: 24.5%;
    font-size: 0.62em;
    font-family: Arial;
    color: #cccccc;
    width: 72%;
    height: 18.5%;
    line-height: 134%;
    overflow: hidden;
}

#PANTALLA_DETAIL .main-plot .bold {
    font-weight: bold;
    font-size: 1em;
    color: white;
}

#PANTALLA_DETAIL .languages {
    position: absolute;
    left: 7%;
    top: 50%;
    font-size: 0.42em;
    font-family: Arial;
    color: white;
    width: 14%;
}

#PANTALLA_DETAIL .bigposter {
    position: absolute;
    left: 6.8%; top: 14.3%;
    width: 13.5%; height: 34%;

    overflow: hidden;
    opacity: 0;

    will-change: opacity;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#PANTALLA_DETAIL .bigposter.loaded {
    opacity: 1;
}

#PANTALLA_DETAIL .rows {
    position: absolute;
    left: 0%; top: 58.9%;
    width: 100%; height: 83%;
    overflow: hidden;
}

#PANTALLA_DETAIL .rows .rows-layer {
    position: absolute;
    left: 0; top: 0%;
    width: 100%; height: 100%;

    will-change: transform;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#PANTALLA_DETAIL .rows .row.items {
    position: absolute;
    left: 0;
    width: 100%; height: 35%;

    will-change: transform;

    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#PANTALLA_DETAIL .rows .row.items.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

#PANTALLA_DETAIL .rows .row.text {
    position: absolute;
    left: 0%;
    width: 100%; height: 3%;
    color: white;
    font-family: roboto_regular;
    font-size: 0.67em;

    padding-left: 7%;
    margin-top: 2%;
}

#PANTALLA_DETAIL .rows .row.text .arrow-left, 
#PANTALLA_DETAIL .rows .row.text .arrow-right {
    position: absolute;
    width: 4%;
    height: 106%;
    background-size: 50% 38%;
    top: -31%;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

#PANTALLA_DETAIL .rows .row.text .arrow-left {
    left: 2%;
    background-image: url(../img/icons/row-left.png);
}

#PANTALLA_DETAIL .rows .row.text .arrow-right {
    left: 89%;
    background-image: url(../img/icons/row-right.png);
}

#PANTALLA_DETAIL .item {
    position: absolute;
    top: 0%;
    width: 10.3%; height: 100%;
}

#PANTALLA_DETAIL .item.episode {
    width: 18%;
}

#PANTALLA_DETAIL .item0 {
    left: 7%;
}

#PANTALLA_DETAIL .item1 {
    left: 18.1%; 
}

#PANTALLA_DETAIL .item2 {
    left: 29.4%; 
}

#PANTALLA_DETAIL .item3 {
    left: 40.7%;
}

#PANTALLA_DETAIL .item4 {
    left: 52%; 
}

#PANTALLA_DETAIL .item5 {
    left: 63.3%; 
}

#PANTALLA_DETAIL .item6 {
    left: 74.6%; 
}

#PANTALLA_DETAIL .item7 {
    left: 85.9%; 
}

#PANTALLA_DETAIL .item8 {
    left: 97.2%; 
}

#PANTALLA_DETAIL .item .card {
    position: absolute;

    top: 0%; left: 0%;
    width: 100%; height: 100%;
    
    overflow: hidden;
}

#PANTALLA_DETAIL .item .poster {
    position: absolute;
    top: 5%; 
    left: 0;
    
    width: 81%;
    height: 68%;

    /* Correction for horizontal posters */
    /*left: -75%;
    width: 250%;*/

    border: 3px solid transparent;
}

#PANTALLA_DETAIL .item .poster.serie {
    left: 0;
    width: 94%;
}

#PANTALLA_DETAIL .item.selected .poster {
    border-radius: 5px;
    border: 3px solid #af2a30;
}

#PANTALLA_DETAIL .item .title {
    position: absolute;
    top: 78%; left: 4.8%;
    width: 80%; height: 16%;
    
    color: white;
    font-family: Arial;
    font-size: 0.48em;
    overflow: hidden;
    text-align: center;
}

#PANTALLA_DETAIL .item.episode .title {
    left: 2.8%;
    text-align: left;
}

#PANTALLA_DETAIL .item .subtitle {
    display: none;
}

#PANTALLA_DETAIL .item .overlay {
    display: none;
    position: absolute;
    top: 29%;
    left: 23%;
    width: 39%;
    height: 23%;
}

#PANTALLA_DETAIL .item.selected .overlay {
    display: none;
}

#PANTALLA_DETAIL .item.episode .watched {
    position: absolute;
    top: 9%;
    left: 71%;
    width: 9%;
    height: 12%;
}

#PANTALLA_DETAIL .item.movie .watched {
    position: absolute;
    top: 9%;
    left: 71%;
    width: 9%;
    height: 12%;
}

#PANTALLA_DETAIL .item.episode .progress {
    position: absolute;
    top: 71.8%;
    left: 1%;
    width: 81.4%;
    height: 3%;
}

#PANTALLA_DETAIL .item.episode .progress-bg {
    background-color: #3e3e3e;
    width: 0%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 98;
    position: absolute;
}

#PANTALLA_DETAIL .item.episode .progress-fg {
    background-color: red;
    width: 0%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    position: absolute;
}

#PANTALLA_DETAIL .item.movie .progress {
    position: absolute;
    top: 71.8%;
    left: 1%;
    width: 81.4%;
    height: 3%;
}

#PANTALLA_DETAIL .item.movie .progress-bg {
    background-color: #3e3e3e;
    width: 0%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 98;
    position: absolute;
}

#PANTALLA_DETAIL .item.movie .progress-fg {
    background-color: red;
    width: 0%;
    height: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
    position: absolute;
}
