/*Plantilla CSS del MODULO EMBED PRODUCTS */
/*

@Archivo: embed_modules.css
@Proyecto: Reality Check
Fecha: 13/11/2023


*/
:root { 

    /*Body*/
    font-size: 16px;

    --pitagoras-blue80 : #1C3A54;     
    --pitagoras-blue50 : #2872E8; 
    --pitagoras-blue30 : #14AEE4; 
    --pitagoras-blue20 : #4FD4CF; 
    --darkblueoverlay : #0C223A; 
    
 

}



/*************************************************/
/*************************************************/
/* DISEÑO FLEXBOX */
/*************************************************/
/*************************************************/

/*DISEÑO RESPONSIVE DE LOS PANELES RIGHT & LEFT*/

/* Containers Layout general*/
.flexboxLeft {
    /* flex: 0 0 15%;    */
    text-align: left;
    width: 300px; 
    margin: 0;
    background: var(--pitagoras-blue80);
    padding: 15px;
    color: #fff;
}



.flexboxRight {
    /*flex: 0 0 85%;    */
    text-align: left;
    width: calc(100% - 300px); 
    margin: 0;    
    padding: 15px;
}


.flexboxFull {
    flex: 0 0 100%;    
    text-align: left;
    width: 100%; 
    margin: 0;    
    padding: 0px;
}


/*Container principal */
.flexbox, .flexbox100 {
    flex: 0 0 100%;        
    width: 100%; 
    text-align: left;     
    display: flex !important;  
    display: -webkit-flex !important; /* Safari */     
    flex-flow: row wrap !important;
    -webkit-flex-flow: row wrap !important; /* Safari */    
    -moz-flex-flow: row wrap !important; 
    -o-flex-flow: row wrap !important; /* Safari */    
    max-width: 100%;
    padding: 0;    
    margin: 0 auto;    
}

/* Containers hijos*/
.flexbox5 {
    flex: 0 0 5%;        
    width: 5%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox10 {
    flex: 0 0 10%;        
    width: 10%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox15 {
    flex: 0 0 15%;        
    width: 15%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox20 {
    flex: 0 0 20%;        
    width: 20%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox20M {
    flex: 0 0 18%;        
    width: 18%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox25 {
    flex: 0 0 25%;        
    width: 25%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox30 {
    flex: 0 0 30%;        
    width: 30%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox33 {
    flex: 0 0 33%;        
    width: 33%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox35 {
    flex: 0 0 35%;        
    width: 35%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox40 {
    flex: 0 0 40%;        
    width: 40%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox45 {
    flex: 0 0 45%;        
    width: 45%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox50 {
    flex: 0 0 50%;        
    width: 50%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox60 {
    flex: 0 0 60%;        
    width: 60%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox65 {
    flex: 0 0 65%;        
    width: 65%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox70 {
    flex: 0 0 70%;        
    width: 70%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox75 {
    flex: 0 0 75%;        
    width: 75%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox80 {
    flex: 0 0 80%;        
    width: 80%; 
    text-align: left;
    margin: 0; padding: 0px;
}
.flexbox85 {
    flex: 0 0 85%;        
    width: 85%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox90 {
    flex: 0 0 90%;        
    width: 90%; 
    text-align: left;
    margin: 0; padding: 0px;
}

.flexbox95 {
    flex: 0 0 95%;        
    width: 95%; 
    text-align: left;
    margin: 0; padding: 0px;
}


/*Background RC*/
.background_realitycheck {
    width: 100%;
    margin: 0px auto !important;
    background-image: url("/images/_branding_realitycheck/realiticheck-channels.jpg");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;      
}

/*Color de los links de los distintos tableros de embed*/
#display_headline_items a, #display_headline_items a:visited {
    color: var(--darkblue) !important;
}
#display_headline_items a:hover {
    color: var(--lightblue) !important;
}


.filterflex {
  width: auto;
  padding: 0 !important;
  display: inline-flex;
  margin-bottom: 7px;
  margin-right: -5px;
}

.flexcomponent_embed {
  padding: 0 0px 15px 0px !important;  
}
.flexcomponent_embed_video {
  padding: 0px !important;  
}

.explorer_main_embed {
    padding:15px 10px !important;
    font-family: "Helvetica";
    font-weight: 400;    
    font-size: 0.8rem;
    line-height: 1.5;
    background-color: var(--darkblueoverlay) !important;    
    border-radius:4px !important;

}

h2.whiteTitle {
    color: var(--white) !important;
    font-size: 1.3rem !important;
    margin: 15px auto 30px !important;
    font-weight: 700    
}

.item_embedmodule_flex {    
    display: flex;  
    display: -webkit-flex; /* Safari */     
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap; /* Safari */    
    -moz-flex-flow: row wrap; 
    -o-flex-flow: row wrap; /* Safari */
    margin: 0px auto 40px !important;
    padding: 0px;       
    background-color: var(--white);
    width: 48%;
}

/*Ajuste especial para los Iframes de Telegram*/
.item_embedmodule_flex iframe {
    min-width: 180px !important;
}



.item_embedmodule_collection {  
    color: var(--officialred);
    font-weight: 600;
    padding: 0;
    width: 100% !important;     
    font-size: 0.74rem;
    
}

h2.item_embedmodule_title  {
    font-family: "Archivo";
    font-size: 1.3rem;
    font-weight: 700;       
    line-height: 1;
    color: var(--darkblue);
    letter-spacing: -0.01em;
    transform: scaleY(1.1);         
    margin: 10px 0 !important;
}

h2.item_embedvideo_title  {
    font-family: "Archivo";
    font-size: 1rem;
    font-weight: 500;       
    line-height: 1.3;
    color: var(--darkblue);
    letter-spacing: -0.01em;
    transform: scaleY(1.1);         
    margin: 10px 0 0 !important;
    width: 100%;
}
h2.item_embedvideo_description  {
    font-family: "Lora";
    font-size: 0.8rem;
    font-weight: 300;       
    line-height: 1.3;
    color: var(--darkblue);
    letter-spacing: -0.01em;    
    margin: 10px 0 0 !important;
    width: 100%;
}

h4.item_embedmodule_price  {    
    width: 100%;
    font-family: "Lora";
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0px 0 10px;
    line-height: 1.2;   
    letter-spacing: 0.01em;         
    font-weight: 700;   
    color: var(--officialred);  
}

/*Tabla del Panel De Búsqueda*/
.grid table {
    min-width: 400px;
    margin: 10px auto !important;
}

#searchbox_container {
    text-align: center !important;
}   

/*Whie Gap del Panel de Busqueda*/
.whitegap {
    height: 250px;
}
.nogap {
    height: 0px;
    display: none;
}


/*Clases especiales para elementos el formulario  */
.focus_red {
    background: #b9795330 !important;
}

.focus_red:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(208, 26, 26, 0.97) !important;
}



/*Especial Tabla de Titulares */
.maxwidth300 {
    width: 31%;
    margin: 0 auto !important;

}
table.maxwidth300 {
    width: 100% !important;    

}
table.maxwidth300 th, table.maxwidth300 td{
    padding:5px 0px !important;

}


/*Caption de las tarjetas publicadas por la función PitagorasRenderMedia*/
 .caption {
    color: var(--pitagoras-blue80);
 }


/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
 


/* VIDEO RESPONSIVE*/
.video-responsive {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 53.25%;
    padding-top: 30px;  
    margin: 10px auto;
    max-width: 700px; 
    width: 100%; 
}

.video-responsive iframe, .video-responsive object, .video-responsive embed {
    position: absolute;  
    top: 0;
    left: 0; 
    height: 100%;
    width: 100%;
}
.rumble, .bitchute, {
    width: 100% !important;
    max-width: 700px !important;
    margin: 10px auto !important;
}



/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>BLOQUE RESPONSIVE **/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/
/*>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>**/

.item_embedmodule_flex iframe {
    width: 100% !important;
}    



@media (min-width:992px) and (max-width:1099px) {

    h2.item_embedvideo_title  {
        font-size: 0.8rem !important;
    }
    .maxwidth300 {
        width: 47%;
    }

    .item_embedmodule_flex {    
        width: 48%;
    }

    .tiktokgrid .item_embedmodule_flex {    
        width: 80%;
    }
    

}




/* Regresa a los Tamaños Originales,  columna contenedor de item cambia al 50% */
@media (min-width:900px) and (max-width:991px) {

    /*Plantilla de 2 columnas */
    
    
    h2.item_embedvideo_title  {
        font-size: 1rem !important;
    }
    .item_embedmodule_flex {    
        width: 48%;
    }

    
}

@media (min-width:800px) and (max-width:899px) {
    
    
    h2.item_embedvideo_title  {
        font-size: 0.94rem !important;
    }
    .item_embedmodule_flex {    
        width: 48%;
    }
    .item_embedmodule_flex iframe{    
        width: 100% !important;
    }
    
}


@media (min-width:700px) and (max-width:799px) {
    
    h2.item_embedvideo_title  {
        font-size: 0.9rem;
    }
    .maxwidth300 {
        width: 48%;
    }
    .item_embedmodule_flex iframe{    
        width: 100% !important;
    }

    .item_embedmodule_flex {    
        width: 48%;
    }

    .tiktokgrid .item_embedmodule_flex {    
        width: 80%;
    }
    
}

@media (min-width:600px) and (max-width:699px) {
    .item_embedmodule_flex {    
        width: 48%;
    }

    .tiktokgrid .item_embedmodule_flex {    
        width: 80%;
    }
    
    .item_embedmodule_flex iframe{    
        width: 100% !important;
    }
    h2.item_embedvideo_title  {
        font-size: 0.84rem;
    }
    .responsive50 {
        flex: 0 0 100% !important;        
        width: 100% !important;   
        margin-bottom: 30px !important;      
    }
    .maxwidth300 {
        width: 45%;
    }




    
}


@media (max-width:599px) {  

    .item_embedmodule_flex {    
        width: 85%;
    }
    h2.item_embedvideo_title  {
        font-size: 1rem;
    }

    .responsive50 {
        flex: 0 0 100% !important;        
        width: 100% !important; 
        margin-bottom: 30px !important;              
    }
    .maxwidth300 {
        width: 90%;
        margin: 0 auto !important;
    }

    .grid table th,  .grid table td {
        display: block;
        width: 100%;
        vertical-align: top;
        
    }
    .grid input {
        max-width: 200px !important;
    }


    

}

@media (max-width:499px) {      
    table.maxwidth300 {
        max-width: 300px !important;

    }
    .grid table th,  .grid table td {
        display: block;
        width: 100%;
        vertical-align: top;
        
    } 
    .grid input {
        max-width: 120px !important;
    }   

}