/*  --------------------------------------------------------    
    PANTALLAS GRANDES                          */   
@media( min-width:870px ){

    BODY, .feedContainer{
        display: flex;  flex-basis: 100%;   flex-wrap: wrap;
        align-content:flex-start;
        justify-content: center;
        
    }

    .editPromo_button{ 
        grid-column: 1;     grid-row: 2;
        width: 3em;     height: 3em;    
        
        background-image: url("../../img/edit.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: opacity(0.3);
        cursor: pointer;
        transition: all 0.5s ease-out;
        }.editPromo_button:hover{   filter:opacity(1); }
    .editPromo_button::before{
        display: flex;
        content: "Editar Seccion";
        width: 8em; height: 100%; margin-left: -8em;
        align-items: center;
        color:black;
        }    
    .itemNavigator{
        width:14em; height: 2em;  
        display: flex;  flex-basis: 10em;   flex-wrap: wrap;
        justify-content: center;
        background-color: rgba(190,190,190,0.2);
        border-radius: 2em;
        cursor: pointer;
        transition: all 0.5s ease-out;
        }   
        .itemNavigator:hover{
            background-color: rgba(90,90,90,1);
            color: rgba(190,190,190,1);
            font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            }
    
        .nav_first{
            width: 3em;     height: 100%;
            display: flex;    align-items: center;    justify-content: center;
            font-size: 0.6em;  margin-right: 0.5em;
            }.nav_first::before{    content: "primero";   }

        .nav_n{
            width: 1em;      height: 1em;       border-radius: 1em;
            margin: 0.5em 0.25em 0px 0.25em;
            background-color: rgba(150,150,150,0.6);
             }
             .nav_n:hover{ background-color: rgba(50,190,150,1); }
             
        .nav_last{
            width: 3em;     height: 100%;
            display: flex;    align-items: center;    justify-content: center;
            font-size: 0.6em;
            }.nav_last::before{    content: "ultimo";   }

        .itemNavigator div:hover{
            color: rgba(50,255,150,1);;
            }

    #topPromo_slider{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 20% 60% 20%;
        width: 95%;     height: 20em;
        margin-bottom: 3em;
        background-color: rgb(190 190 190);
        overflow: hidden;
        }
        #topPromo_slider .itemNavigator{
            grid-column: 1;     grid-row: 3;
            margin: 0em auto 0em auto;  }

        #topPromo_slider .editPromo_button{ 
            grid-column: 1;     grid-row: 1;
            margin: 1em 93%;    }

        #topPromo_slider .postBkg{
            display: none;
            width: 100%;
            height: min-content; 
            cursor: pointer;  }
        
        #topPromo_slider .postBrochure{
            display: none;
            background-color: blueviolet;
            width: 100%;
            height: 20em;
        }

        #topPromo_slider .postLink{
            display: none;
            width: 100%;
            height: 20em;
        }

    
    .subPromo_slider{
        width: 45%;     height: 10em;
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 30% 40% 30%;
        background-color: lightgray;
        margin: 1em 2.5% 3em 2.5%; 
        overflow: hidden;
        }
        .subPromo_slider .itemNavigator{ 
            grid-column: 1;     grid-row: 3;
            margin: 0em auto 0em auto;   }

        .subPromo_slider .editPromo_button{ 
            grid-column: 1;     grid-row: 1;
            margin: 1em 85%;    }

        .subPromo_slider .postBkg{
            display: none;
            width: 100%;
            height: min-content; 
            cursor: pointer;
            animation-duration: 1s;
            animation-name: postBkg_slide;
            animation-iteration-count: 1;
              }

        @keyframes postBkg_slide{
            from{ 
                filter:opacity(0) saturate(0); 
                }
            to{ 
                filter:opacity(1) saturate(1); 
                }
        }


        .subPromo_slider .postBrochure{
            display: none;
            width: 100%;
            height: 20em;
        }

        .subPromo_slider .postLink{
            display: none;
            width: 100%;
            height: 2em; 
            background-image: url('../../img/purpleBkg.jpg');
            background-position: center;
            background-repeat: no-repeat;
            background-size:cover;
            color:white;   cursor: pointer;   text-align: center; 
            margin: 0px;   justify-content: center;    align-items: center; 
            padding: 20% 0% ;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            font-weight: bold;
            font-size: 2em;
             
        }
    #catalogs_4C_cont{
        width:95% ;        height: 30em;
        margin: 4em 0em 2em 0em;
        display: grid;
        grid-template-columns:100%;
        grid-template-rows: 4em auto;
        }
    #catalogs_4C_cont .editPromo_button{
        grid-column: 1;     grid-row: 1;
        margin: 1em 90%;
    }
    #catalogs_4C{
        grid-column: 1;     grid-row: 2;
        width:95% ;        height: 30em;
        margin: 0em 0em 2em 0em;
        display: grid;
        grid-template-columns: repeat(4,21.5%);
        grid-gap: 2em;
        grid-auto-rows: 12em;
        background-color:transparent;
        }
        #catalogs_4C .itemNavigator{ margin-top: 27em; }
        #catalogs_4C .editPromo_button{ display: none;   }

    .catalog4C_item{
        width: 100%; height: 100%;
        margin: 2em;    padding: 1em;
        display: flex;  flex-wrap: wrap;    flex-basis: 25%;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 0.8em;
        filter:saturate(0.2);
        cursor: pointer;
        transition: 0.5s all ease-out;
        mix-blend-mode: multiply;
        }
    .catalog4C_item:hover{
        filter:saturate(1);
        background-color:rgba(150,150,150,0.6);
        overflow: hidden;
        color: thistle;
        }
    .catalog4C_item H2{ /*PRECIO*/
        width:100%; text-align: right;
        font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
        font-size: 1.5em;     color: rgb(157, 0, 255);
        margin-top: -0.75em;
        }
    .catalog4C_item H3{ /*DESCRIPCION*/
        width:100%; margin-top: -1em;
        text-align: center;
        color:darkviolet;
        }
    .catalog4C_item IMG{
        top:0px;    left: 0px;
        width: auto; height: 70%;
        max-height: 65%;    max-width: 95%;
        margin: auto;
        }
    /*  CONTROLES DE EDICION DEL POST   */
    .catalog4C_item INPUT[type=button]{
        /*grid-row: 2;    grid-column: 1;*/
        width: 9em;     height: 3em; 
        border-radius: 2em; cursor: pointer;
        margin-top: -5em;    padding: 0px;
        }

    .catalog4C_item IMG[action=removePost]{
        /*grid-row: 2;    grid-column: 3;*/
        width: 3em; height: 3em;    align-items: left; 
        margin: 0em 1em;
        padding: 0px;
        cursor: pointer;
        filter: saturate(0.3);
        transition: 0.2s all ease-out;}
        .catalog4C_item IMG[action=removePost]:hover{
            filter: saturate(1);
            }
    /* - - - - - - - - - - - - - - - - - - - - */
    /*BOTONES DEL MENU DE OPCIONES DE LA SECCION FEED*/
    .feedMnuitm{
        height: 3em;   margin-top: 1em;     cursor: pointer; border-radius: 1em;  
        }

    .feedMnuitm[value=Cerrar]{   background-color:red;   width:10vw ;    
        }
    
    
    /*EDITOR DE LA SECCION*/
    .sextionEditor{
        width: 80vw;     height: 45vh; 
        /*display: flex;  flex-wrap: no-wrap; flex-direction: row;*/
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: repeat(15, 15em );
        grid-template-rows: 10em;
        grid-gap:1em;
        grid-auto-columns: 15em;
        grid-auto-rows: 10em;
        padding: 2em;   margin: 2em 0px 0px 0px;
        
        align-items: center;
        overflow-x:scroll;
        overflow-y: hidden;
        border: solid 1px white;
        }

    .sextion_item{
        display: grid;
        grid-template-columns: 8em 5em 2em;
        grid-template-rows: 10em 5em;  
        width: 15em; height: 14em;
        padding: 0.3em;
        color: white;   background-color: rgb(40 40 40);
        align-items:center; 
        transition: 0.5s all ease-out;
        }
        .sextion_item:hover{
            filter:brightness(1.4);
        }
    

    .sextion_item IMG[action=removePost]{ 
        grid-row: 2;    grid-column: 3;
        width: 2em; height: 3em;    align-items: center; margin: 0px;
        cursor: pointer;
        filter: saturate(0.3);
        transition: 0.2s all ease-out;}
        .sextion_item IMG[action=removePost]:hover{
            filter: saturate(1);
            }

    .sextion_item INPUT[action=brochureEdit], .sextion_item INPUT[action=linkEdit]{  
        grid-row: 2;    grid-column: 1;
        width: 8em;     height: 3em;    margin-left: 0.5em;
        border-radius: 2em; cursor: pointer;
        }

    .sextion_item INPUT[action=hidePost]{  
        grid-row: 2;    grid-column: 2;
        width: 4.5em; height: 3em; 
        border-radius: 2em;     cursor: pointer;
        }

    .sextion_item INPUT[action=imgEdit]{  
        grid-row: 2;    grid-column: 1;
        width: 8em; height: 3em; 
        border-radius: 2em;
        margin-left: 0.5em; cursor: pointer;
        }

    .sextionEditor .postBkg{
        grid-column: 1/3;   grid-row: 1;
        width: 15em; height:min-content;
        padding: 0em;   margin-top: 0px;
        display: block;
        }

    .sextionEditor .postBrochure{
        width: 13em; height:10em;
        padding: 0em;   /*border: 1px solid thistle;*/
        display: flex;  flex-basis: 15em;   overflow: scroll;
        
        margin-left: 1em;
        }

    .sextionEditor .postLink{
        width: 13em; height:10em;
        padding: 0em;   
        display: flex;   color:white;   cursor: pointer;
        margin-left: 1em;   justify-content: center;    align-items: center; 
        text-align: center;     font-size: 1em;
        }

    .sextionEditor .catalog4C_item{
        width: 15em; height:12em;
        background-color: white;
        filter: saturate(1) ;
        mix-blend-mode: normal;
        margin-left: 1em;
    }

    .sexion_item_Menu{
        grid-column: 1;   grid-row: 1;
        display: flex;       flex-basis: 100%;    flex-wrap: wrap;   align-items: last baseline;
        width: 14em;        height: 14em;       z-index: 999;
        background: linear-gradient(50deg, black 0%, rgb(30 30 30) 100%);
        padding:  1em;  margin: 3em -1em 0px 0px;
        overflow: hidden;
        color: white;
        animation-duration: 0.5s;
        animation-name: sexion_item_Menu_fade;
        animation-iteration-count: 1;
            }

        @keyframes sexion_item_Menu_fade{
            from{ 
                filter:opacity(0) saturate(0); 
                }
            to{ 
                filter:opacity(1) saturate(1); 
                }
        }
    .sextionEditor DIV P{   
        color: white;   font-size: 0.75em;  margin: 0px; }       
    .sextionEditor DIV TEXTAREA{   /*TEXTAREA del url de la imagen desde internet*/
        color: black;   font-size: 0.75em;  margin: 0px; width: 80%; }

    .sextionEditor DIV TEXTAREA[att=innerHTML]{   /*TEXTAREA del innerHTML del POST tipo brochure*/
        color: black;   font-size: 0.75em;  
        margin: 0px; width: 100%;    height: 60%; }

    .sextionEditor DIV INPUT[action=save_siimage],
    .sextionEditor DIV INPUT[action=save_sibrochure],
    .sextionEditor DIV INPUT[action=save_silink],
    .sextionEditor DIV INPUT[action=save_siitem]{  /*boton de menu de edicion del post: guardar*/
        background-color: green;    color: white;
        width: 40%; margin: 0.5em 0px;    cursor: pointer;
        }
    .sextionEditor DIV INPUT[action=close_siimage],
    .sextionEditor DIV INPUT[action=close_sibrochure],
    .sextionEditor DIV INPUT[action=close_silink],
    .sextionEditor DIV INPUT[action=close_siitem]{ /*boton de menu de edicion del post: cancelar*/
        background-color: red;   color: white;
        width: 40%; margin: 0.5em 1em;    cursor: pointer;
        }
    .sextionEditor .sexion_item_imageMenu{

        }
    .catalog4C_item .sexion_item_Menu{
        margin: -1em -1em;    padding: 0px;     z-index: 9999;
        width: 120%;    justify-content: left;
        }
    .catalog4C_item .sexion_item_Menu .inputText{
        width: 20em; margin-left: 0px;
    }
}
/*  --------------------------------------------------------
    PANTALLAS CHICAS                          */
@media( max-width:600px){   @import url('estore_ch.css');   }

/*  --------------------------------------------------------
                PANTALLAS MUY GRANDES                          */
@media( min-width:1280px){
	.subPromo_slider{  
		height: 15em;	
	}
	.subPromo_slider .postBkg{
		height: 15em; 
	}
	
 #topPromo_slider{
		height: 25em;
	}
 #topPromo_slider .postBkg{
		height: 25em; 
	}
}