@import _colores

.principal
    background-color: $colorGrisClaro
    min-height: 800px
    border-bottom: 2px solid $colorCelesteClaro
    border-top: 2px solid $colorCelesteClaro
    
.contenido    
    background-color: $colorGrisClaro
    //background-color: red
    border-radius: 5px
    padding: 16px
    margin-left: auto
    margin-right: auto
    width: 70%   
    height: 100%
    .contenido-flexible
        background-color: $colorGrisClaro
        margin-bottom: 10px
        display: flex
        flex-direction: row
        justify-content: center
        flex-wrap: wrap
        flex-grow: 0
        flex-shrink: 0
        .video, .canal, .lista
            display: flex
            padding: 0px
            a
                color: $tituloItem
                text-decoration: none
            //background-color: $amarillo
        //Estilos del contenedor para las imagenes
        .caja-imagen
            display: flex
        //Texto de los items
        .caja-texto
            font-size: 0.8rem
            padding: 15px 10px 10px 10px
            //background-color: orange
            display: flex
            flex-grow: 1
        //Estilos generales para el texto de los items    
        .caja-texto p
            //background-color: $colorCelesteClaro
            overflow: auto
            overflow-wrap: break-word
            padding-right: 10px
        .caja-texto h5 
            //background-color: green
            overflow: auto
            overflow-wrap: break-word
        
// Para un maximo de 340px ================================================================================  
@media (max-width: 340px) 
    .container-fluid
        padding-left: 0px
        padding-right: 0px
    
    //estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: column
                justify-content: flex-start
                align-content: center
                width: 100%
                height: 260px  
                //background-color: $violeta
            .caja-imagen
                justify-content: center
                align-items: center
                min-width: 246px
                min-height: 150px 
                //background-color: $grisVCodeBarra           
            //Imagen del video
            .video img
                width: 100%
                //height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                min-width: 246px
                min-height: 110px
                //Estilos para los textos de los items
                .caja-texto p
                    min-height: 20px
                    max-height: 55px
                    overflow: auto                              
                .caja-texto h5 
                    min-height: 20px
                    overflow: auto
                a 
                    font-size: 0.95rem
        .h3
            width: 90%
                    

// Para dispositivos mayores a 340 y menores a 388 ==============================================================
@media (min-width: 341px) and (max-width: 387px)
    .container-fluid
        padding-left: 0px
        padding-right: 0px
    
    //estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: column
                justify-content: flex-start
                align-content: center
                width: 100%
                height: 260px  
                //background-color: $violeta
            .caja-imagen
                justify-content: center
                align-items: center
                min-width: 246px
                min-height: 150px 
                //background-color: $grisVCodeBarra           
            //Imagen del video
            .video img
                //width: 200px
                height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                width: 100%
                min-height: 110px
                //Estilos para los textos de los items
                .caja-texto p
                    min-height: 20px
                    max-height: 55px
                    overflow: auto                              
                .caja-texto h5 
                    min-height: 20px
                    overflow: auto
                a 
                    font-size: 0.95rem
        .h3
            width: 90%
                    
// Para dispositivos mayores a 387 y menores a 500 ================================================================
@media (min-width: 388px) and (max-width: 500px)
    .container-fluid
        padding-left: 0px
        padding-right: 0px
    
    //estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: column
                justify-content: flex-start
                align-content: center
                width: 100%
                height: 260px  
                //background-color: $violeta
            .caja-imagen
                justify-content: center
                align-items: center
                min-width: 246px
                min-height: 150px 
                //background-color: $grisVCodeBarra           
            //Imagen del video
            .video img
                //width: 200px
                height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                width: 100%
                min-height: 110px
                //Estilos para los textos de los items
                .caja-texto p
                    min-height: 20px
                    max-height: 55px
                    overflow: auto                              
                .caja-texto h5 
                    min-height: 20px
                    overflow: auto
                a 
                    font-size: 0.95rem
        .h3
            width: 90%
        
// Extra small devices (portrait phones, less than 576px) =======================================================
@media (min-width: 501px) and (max-width: 575.98px)
    .container-fluid
        padding-left: 0px
        padding-right: 0px
    
    //Estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            align-items: flex-start
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: row
                justify-content: space-between
                align-content: center
                width: 100%
                height: 150px                  
            .caja-imagen
                justify-content: center
                align-items: center
                min-width: 246px
                height: 150px                         
            //Imagen del video
            .video img
                height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                width: 100%
                height: 150px
                //Estilos para los textos de los items
                .caja-texto p
                    max-height: 75px
                    min-height: 20px
                    overflow: auto            
                .caja-texto h5 
                    min-height: 20px
                    max-height: 75px
                    overflow: auto

// Small devices (landscape phones, 576px and up) ================================================================
@media (min-width: 576px) and (max-width: 767.98px)
    .container-fluid
        padding-left: 0px
        padding-right: 0px
    
    //Estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: row
                justify-content: space-between
                align-content: center
                width: 100%
                height: 150px  
                //background-color: $violeta
            .caja-imagen
                justify-content: center
                align-items: center
                width: 100%
                height: 150px 
                //background-color: $grisVCodeBarra           
            //Imagen del video
            .video img
                height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                width: 100%
                height: 150px
                //Estilos para los textos de los items
                .caja-texto p
                    min-height: 50px
                    max-height: 75px
                    overflow: auto            
                .caja-texto h5
                    min-height: 20px
                    max-height: 75px
                    overflow: auto

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px)
    .container-fluid
        padding-left: 0px
        padding-right: 0px

    //Estilos del contenido principal
    .contenido
        width: 100%
        .contenido-flexible
            width: 100%
            justify-content: center
            //Estilos para los items
            .video, .canal, .lista                
                flex-direction: row
                justify-content: space-between
                align-content: stretch
                width: 100%
                height: 150px  
                //background-color: $violeta
            .caja-imagen
                justify-content: center
                align-items: center
                width: 200px
                min-width: 200px
                max-width: 200px
                height: 150px 
                //background-color: $grisVCodeBarra           
            //Imagen del video
            .video img
                //width: 200px
                height: 150px
            //Imagen del canal
            .canal img
                width: 138px
                height: 138px
            //Texto de los items
            .caja-texto
                padding: 5px
                overflow: auto
                flex-direction: column
                justify-content: flex-start
                align-items: stretch
                width: 100%
                height: 150px
                //Estilos para los textos de los items
                .caja-texto p
                    min-height: 60px
                    max-height: 100px
                    overflow: auto            
                .caja-texto h5
                    max-height: 50px 
                    min-height: 20px
                    overflow: auto

// Large devices (desktops, 992px and up) =======================================================================
@media (min-width: 992px)
    
    .filtos
        display: flex
        flex-direction: row
    .contenido
        width: 70%
        .video, .canal, .lista
            justify-content: space-between
            align-items: stretch
            width: 862px
            height: 152px  
        .caja-imagen
            justify-content: center
            align-items: center
            width: 246px
            height: 152px            
        //Imagen del video
        .video img
            width: 246px
        //Imagen del canal
        .canal img
            width: 138px
            height: 138px
        //Texto de los items
        .caja-texto
            //overflow: hidden
            flex-direction: column
            justify-content: flex-start
            align-items: stretch
            width: 600px
            height: 152px
        //Estilos para los textos de los items
        .caja-texto p
            min-height: 50px
            max-height: 90px
            //min-width: 550px
            //max-width: 550px
            overflow: auto            
        .caja-texto h5 
            min-height: 20px
            max-height: 60px
            overflow: auto