/******************************************/
/*  GENERAL */
    body{
        overflow: hidden;
        backface-visibility: visible;
        background-image: url("../images/fondoPrincipal.webp");
        background-repeat: no-repeat;
        transition-duration: 0.5s;
        background-position-y: 0px;

        background-position-x: 50%;
        background-size: 1980px 940px;

    }

    .FullPage{
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: hidden;
    }

    .indexLogo {
        position: absolute;
        left: 5px;
        top: 0px;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 200px;
        /*background-color: rgba(250,250,250,1);*/
        background-color: rgba(250,250,250,1);
        border-bottom-right-radius: 10px;
        transition-duration: 0.5s;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
    }
    

/******************************************/
/*  GRANDE */

/*    
    body{
        background-position-x: -800px;
        background-size: 2200px 950px;
    }
*/
    /*
    .FullPage{
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        overflow: hidden;
    }

    .indexLogo {
        position: absolute;
        left: 10px;
        top: 10px;
        width: 120px;
        background-color: rgba(250,250,250,0.0);
        border-radius: 10px;
        transition-duration: 0.5s;
    }
*/
    .indexbannerinferior {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: 0px;
        height: 20px;
        width: 100%;
        background-color: transparent;
        backface-visibility: visible;
    }
    .indexFranjaRoja {
        position: absolute;
        left: 75%;
        width: 25%;
        height: inherit;
        background-color: rgb(173,51,53);
        backface-visibility: visible;
        border: none;
    }
    .indexFranjaVerde {
        position: absolute;
        left: 50%;
        width: 25%;
        height: inherit;
        background-color: rgb(6,138,79);
        backface-visibility: visible;
        border: none;
    }
    .indexFranjaGris {
        position: absolute;
        left: 25%;
        width: 25%;
        height: inherit;
        background-color: rgb(96,96,98);
        backface-visibility: visible;
        border: none;
    }
    .indexFranjaNegra {
        position: absolute;
        left: 0%;
        width: 25%;
        height: inherit;
        background-color: rgb(55,52,53);
        backface-visibility: visible;
        border: none;
    }
    /******************************************/
    /*  MENU  */
    .indexMenu{
        position: absolute;
        right: 5px;
        top: -15px;
        width: auto;
        z-index: 1;
        transition-duration: 0.5s;
        
    }
    .indexEtiquetaMostrarOcultar{
        display: block;
        visibility: hidden;
        transition-duration: 0.5s;
    }
    .indexListaMenu{
        display: inline-block;
        background-color: rgba(0,0,0,0.1);
        backface-visibility: visible;
        float: right;
        margin: 0px;
        padding: 0px;
        list-style: none;
        box-shadow: 1px 1px 50px rgba(255,255,255,0.1);
        
    }
    .indexItemMenu{
        display: inline-block;
        width: auto;
        min-width: 120px;
        /*width: 145px;*/
        /*height: 40px;*/
        /*border: 0px solid rgba(0,0,0,0.1);*/
        /*background-color: rgba(0,0,0,0.1);*/

        height: auto;
        padding: 0px;
        margin: 0px;
    }
    .indexItemMenu a{
        display: block;
        width: auto;
        /*min-width: 120px;*/
        /*height: 30px;*/
        height: 100%;
        color: white;

        text-align:  center;
        /*font-size: 18px;*/
        /*padding-top: 0px;*/
        padding-top: 3px;
        padding-bottom: 3px;
        padding-left: 3px;
        padding-right: 3px;
        margin: 0px;
        
        font-weight: bolder;            
        border: 1px solid transparent;
        background-color: rgba(0,0,0,0.0);
        backface-visibility: hidden;

        text-decoration: none;
    }
    .indexItemMenu a:hover{
        font-weight: bolder;            
        border: 1px solid white;
        background-color: rgba(0,0,0,0.6);
        color: white;
    }


/******************************************/
/*  RESPONSIVE MEDIANO - GRANDE */
@media screen and (min-width:1000px) and (max-width:1400px){

    body{
        /*background-size: 1400px 950px;*/
        /*background-position-x: -400px;/**/
    }

/*
    .indexLogo {
        left: 5px;
        top: 0px;
        width: 250px;
        background-color: rgba(250,250,250,1);
        border-bottom-right-radius: 10px;
        border-radius: 10px;
    }
*/  
/*
    .indexMenu{
        display: inline-block;
        margin-top: 0px;
        margin-right: 0px;
        padding-right: 5px;
        float: right;
        width: 100%;
        height: auto;
        transition-duration: 0.5s;
        z-index: 200;
    }
*/
    .indexListaMenu{
        display: inline-block;
        backface-visibility: hidden;
        float: right;
    }
    
}

/******************************************/
/*  RESPONSIVE MEDIANO  */
@media screen and (min-width:640px) and (max-width:1000px){
    
    body{
        /*background-size: 1000px 950px;*/
        /*background-position-x: -600px;/**/
    }

    .indexLogo {
        width: 120px;
    }
    
    .indexMenu{
        display: inline-block;
        margin: 0px;
        padding: 0px;
        width: 100%;
        height: auto;
        float: right;
        z-index: 200;
    }
    .indexListaMenu{
        display: inline-block;
        backface-visibility: hidden;
        float: right;
    }
    
}

/******************************************/
/*  RESPONSIVE PEQUEÑO  */
@media screen and (max-width:640px) {

    body{
        /*background-size: 1000px 950px;*/
        /*background-position-x: -780px;/**/
    }
    .indexLogo {
        width: 120px;
    }
    .indexMenu{
        position: absolute;
        right: 5px;
        top: 10px;
        width: 55px;
        z-index: 1;
        transition-duration: 0.5s;
    }


    .indexMenu:hover{
        width: 200px;
        height: auto;
    }
    .indexMenu:hover>ul{
        display: block;
    }
    .indexMenu:hover>a{
        width: 200px;
        font-weight: bolder;            
        border: 1px solid white;
        background-color: rgba(0,0,0,0.5);
        color: white;
    }
    .indexListaMenu{
        display: none;
        padding: 0;
        margin: 0;
        list-style: none;
        backface-visibility: hidden;
        box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
    }
    .indexEtiquetaMostrarOcultar{
        display: block;
        visibility: visible;
        width: 55px;

        /*height: 35px;*/
        height: auto;
        padding-top: 0px;
        padding-bottom: 5px;

        text-align:  center;
        font-size: 20px;

        font-weight: bold;
        border: 1px solid transparent;
        background-color: rgba(0,0,0,0.3);
        
        /*transition-duration: 0.5s;*/
    }
    .indexItemMenu{
        display: block;
        width: 200px;
        /*height: 40px;*/
        height: auto;
        padding: 0;
        margin: 0px;
        
    }
    .indexItemMenu a{
        display: block;
        width: 100%;
        /*height: 30px;*/
        height: 100%;
        color: white;
        
        text-align:  center;
        /*font-size: 18px;*/
        /*padding-top: 0px;*/
        /*padding-top: 10px;*/
        padding-top: 3px;
        padding-bottom: 3px;
        
        font-weight: bold;
        border: 1px solid transparent;
        background-color: rgba(6,138,79,1);

        text-decoration: none;
    }
    .indexItemMenu a:hover{
        font-weight: bolder;            
        border: 1px solid white;
        background-color: rgba(0,0,0,0.9);
        color: white;
    }
        

}