/* begin Page */
/* Created by Carlos Vassallo Donayre */

body {
/*
background-image: url('../media/imgs_02/flor_blanca.PNG');
background-repeat: repeat-x;
background-attachment: fixed;
background-position: top left;
*/
}

/*
   Empieza el cuerpo
*/
section#fondo-nosotros_cuerpo {
/*
    background-color: #000;

    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left bottom, left top, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left bottom, left top, from(#CCCCCC), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    width: 102%;
*/
    width: 100%;
    min-height: 110px;
    margin: -5px 0px 0px -8px;
/*
opacity: 0.4;
opacity: 0.7;
z-index: -3;
*/
}

#nombre_pagina_nos {
    /*
    QUIENES SOMOS   actual con animacion. cambio de color.
    padding: 30px 0px 0px 90px;
    padding: 30px 0px 0px 150px;
    margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
    */
    font-size: 12pt;
    margin: 25px 0px 10px 80px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
}

.wbienvenidos {
/*
    Quienes somos (subrayado)
    margin: 16px 24px 16px 64px;
*/
    border-bottom-style: solid;
    border-bottom-width: 1px;
    color: #3994AE;
    font-size: 18px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 21px 40px 16px 130px;
    z-index: 3;
}

article#cuerpo_part_1, article#cuerpo_part_2 {
/*
*/
    border-radius: 8px;
    display: inline-block;
    max-width: 97%;  
    vertical-align: top;
}

/*
    background: -webkit-gradient(linear, left bottom, left top, from(#34466D), to(#ffffff));
    background: -moz-linear-gradient(top,  #34466D,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#ffffff));
    background: -moz-linear-gradient(top,  #CCCCCC,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background-color: #212121;   
    background: #212121;   
    background-color: #ffffff;   
    background: #f900b0;   
*/
article#cuerpo_part_1 {
/*
    width: 80%; 
    max-width: 80%;  
    margin: 30px 10px 20px 140px;
*/

    margin: 10px 10px 20px 90px;
    width: 60%;  
}

article#cuerpo_part_2 {
/*
    width: 19%; 
*/
    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    margin: 30px 0px 0px 30px;
    max-width: 19%;  
}

/*
  Empieza el cuerpo, lado izquierdo
*/
section#animacion_principal_nosotros {
/*
background-color: #F4A9EA;
border: solid 0.5em #F4A9EA;
background-color: #F4A9EA;         fondo color rosado

    max-width: 54.2em;   
    max-width: 867px;

    background: -webkit-gradient(linear, left top, left bottom, from(#CCCCCC), to(#ffffff));
    background: -moz-linear-gradient(top,  #CCCCCC,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: #CCCCCC;   
    margin: 0.01em 1.5em 0.1em 8.4em;
    margin: 0.16px 24px 1.6em 134.4px;
    max-width: 855px;   
    max-width: 100%;   
*/
    border-radius: 8px;
    width: 90%;   
    margin: 0.16px 24px 25px 60px;
    min-height: 200px;  
}



.ca-menu{
    /*
    width: 500px;
    width: 610px;
    */
    padding: 0;
    margin: 20px auto;
    max-width: 610px;   
}

.ca-menu li{
    /*
    margin-bottom: 26px;

    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    */

    /*
    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    */

    border-radius: 8px;
    max-width: 625px;   
    height: 160px;
    overflow: hidden;
    display: block;
    margin: 28px auto;

    /*
       Liston negro del lado izquierdo.
    border-left: 10px solid #000;
    */
    border-left: 10px solid #424242;
    text-decoration: none;

    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

.ca-menu li:last-child{
    margin-bottom: 0px;
}


    /*  no va.  estaba de demas. (lo uso abajo)
.ca-menu li a {
    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');

    border-radius: 0.5em;
    color: #212121;
    display: block;
    margin: 10px 10px 10px 30px;

    height: 160px;
    max-width: 625px;   
}
    */

.ca-menu li a {
  text-decoration: none;
}

.ca-icon {
    /*
    width: 90px;
    height: 50px;   no tenia
    position: absolute;
    font-family: 'WebSymbolsRegular', cursive;
    */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-shadow: 0px 0px 1px #333;
    line-height: 90px;
    position: absolute;
    margin: -3px 10px 10px 15px;
    max-width: 90px;
    /*
    left: 20px;
    */
    text-align: center;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-icon img {
    /*
    text-align: center;
    display: none;
    */

    width: 140px;
    height: 100px;

    border: 1px solid;
    border-color: #666666;
    margin: 26px auto;
    padding: 5px 5px 5px 5px;

   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}

.ca-menu li:hover img {
    /*
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);

    -webkit-transition: 3s;
    -webkit-transform: rotate3d(100,0,0, 360deg);

    -webkit-transition: 3s;
    -webkit-transform: rotate3d(50,0,0, 90deg);
    display: block;
    */
    -webkit-transition: 3s;
    -webkit-transform: rotate3d(100,0,0, 360deg);
}

.ca-content {
    /*
    top: 20px;

    width: 400px;
    height: 90px;
    left: 210px;
    */

    /*
    position: absolute;
    left: 200px;
    margin: 40px auto;
    */

    margin: 40px 40px 40px 200px;
    max-width: 360px;
    min-height: 70px;
    padding: 1px 10px 10px 10px;
}

.ca-main{
    /*
    font-size: 30px;
    margin: 10px 40px -10px 1px;

    border-radius: 0.5em;
    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    max-width: 360px;
    */
    color: #666;
    font-size: 12px;
    margin: 10px 10px 10px 10px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.ca-sub{
    /*
    font-size: 14px;

    border-radius: 0.5em;
    background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
    background: -moz-linear-gradient(top,  #424242,  #ffffff);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    max-width: 360px;
    */
    color: #666;
    font-size: 12px;
    margin: 5px 10px 10px 10px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}

/*
.ca-menu li:hover{
    /*
    border-color: #fff004;      /*   vertical izquierdo color amarillo   
    */

    /*
    border-color: #f900b0;      /*   vertical izquierdo color rosado   
    background: #000;
}
*/

.ca-menu li:hover {
    /*
       cinta vertical izquierdo color rosado
    border-color: #f900b0;    
    border-color: #F4A9EA;
    border-color: #b52d6e;
    */
    border-color: #b20808;
}



.ca-menu li:hover .ca-icon {
    /*
    width: 0px;    no tenia
    height: 0px;   no tenia

    width: 90px;
    height: 90px;
    */
    color: #fff004;
    text-shadow: 0px 0px 1px #fff004;
    font-size: 50px;
}

/*
      Mio
*/
.ca-menu li:hover .ca-content {
    /*
   width: 360px;
   height: 90px;
   border-radius: 10px;
   background: #000;
   margin: 40px auto;
    */
   background: #424242;
   border-radius: 1.0em;
    margin: 40px 40px 40px 200px;
   max-width: 360px;
   min-height: 70px;
   padding: 1px 10px 10px 10px;
}

.ca-menu li:hover .ca-main{
    /*
    color: #fff004;
    opacity: 0.8;
    font-size: 14px;
    color: #f900b0;
    color: #F4A9EA;
    color: #b52d6e;
    */
    color: #b20808;
    font-size: 16px;
    opacity: 0.9;
}

.ca-menu li:hover .ca-sub{
    /*
    font-size: 30px;
    color: #fff;
    */
    color: #fff;
    font-size: 12px;
}



/*
   Imagen del lado derecho
*/
#imagen_first_page {
/*
  margin: 3.0em 1.0em 1.0em 3.0em;
*/
  margin: 5px 5px 5px 5px;
}

#imagen_nos_01 {
    /*
    border-color: #F4A9EA;
    padding: 5px 5px 5px 5px;
    width: 95%;
    width: 100%;
    */
    border: 1px solid;
    border-color: #666666;
    height: 150px;
    width: 100%;
    z-index: 3;
}


/*  manejo de Responsive Web Design (media cuery 1)   */
/*
@media screen and (min-width: 921px) and (max-width: 1080px) {
*/
@media screen and (max-width: 1024px) {
    #nombre_pagina_nos {
        /*
        QUIENES SOMOS   actual con animacion. cambio de color.
        padding: 30px 0px 0px 90px;
        padding: 30px 0px 0px 150px;
        margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        */
        font-size: 12pt;
        margin: 25px 0px 10px 40px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
    }

    .wbienvenidos {
    /*
        Quienes somos (subrayado)
        margin: 16px 24px 16px 64px;
    */
        border-bottom-style: solid;
        border-bottom-width: 1px;
        color: #3994AE;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 21px 40px 16px 90px;
        z-index: 3;
    }

    article#cuerpo_part_1 {
    /*
        margin: 30px 10px 20px 130px;
    */
        margin: 10px 5px 20px 50px;
        width: 69%;  
    }

    article#cuerpo_part_2 {
    /*
        max-width: 19%;  
        margin: 30px 0px 0px 30px;
    */
        height: 200px;  
        margin: 30px 0px 0px -5px;
        max-width: 24%;  
    }

    /*
    section#animacion_principal_nosotros {
        border-radius: 8px;
        max-width: 100%;   
        margin: 0.16px 24px 1.6px 40px;
        min-height: 200px;  
    }
    */
}

@media screen and (max-width: 768px) {
    #nombre_pagina_nos {
        /*
        QUIENES SOMOS   actual con animacion. cambio de color.
        padding: 30px 0px 0px 90px;
        padding: 30px 0px 0px 150px;
        margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        */
        font-size: 12pt;
        margin: 25px 0px 10px 30px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
    }

    .wbienvenidos {
    /*
        Quienes somos (subrayado)
        margin: 16px 24px 16px 64px;
    */
        border-bottom-style: solid;
        border-bottom-width: 1px;
        color: #3994AE;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 21px 40px 16px 80px;
        z-index: 3;
    }

    article#cuerpo_part_1 {
    /*
        margin: 30px 5px 20px 50px;
        margin: 20px 5px 20px 80px;
        width: 85%;  
    */
        margin: 5px 5px 0px 40px;
        width: 95%;  
    }

    article#cuerpo_part_2 {
    /*
        height: 160px;
        height: 60px;

        background: #424242;
        height: 60px;
        margin: -30px 0px 0px 30px;
        width: 10%;  
    */
        height: 0px;
        width: 0%;  
    }
}

@media screen and (max-width: 640px) {
    #nombre_pagina_nos {
        /*
        QUIENES SOMOS   actual con animacion. cambio de color.
        padding: 30px 0px 0px 90px;
        padding: 30px 0px 0px 150px;
        margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        */
        font-size: 12pt;
        margin: 25px 0px 10px 30px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
    }

    .wbienvenidos {
    /*
        Quienes somos (subrayado)
        margin: 16px 24px 16px 64px;
    */
        border-bottom-style: solid;
        border-bottom-width: 1px;
        color: #3994AE;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 21px 40px 16px 80px;
        z-index: 3;
    }

    article#cuerpo_part_1 {
    /*
        margin: 20px 5px 20px 80px;
        margin: 5px 5px 0px 40px;
        width: 85%;  
    */
        margin: 0px 5px 0px 40px;
        width: 95%;  
    }

    article#cuerpo_part_2 {
    /*
        height: 160px;
        height: 60px;

        background: #424242;
        height: 60px;
        margin: -30px 0px 0px 30px;
        width: 10%;  
    */
        height: 0px;
        width: 0%;  
    }
}

@media screen and (max-width: 480px) {
    #nombre_pagina_nos {
        /*
        QUIENES SOMOS   actual con animacion. cambio de color.
        padding: 30px 0px 0px 90px;
        padding: 30px 0px 0px 150px;
        margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        */
        font-size: 12pt;
        margin: 25px 0px 10px 7px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
    }

    .wbienvenidos {
    /*
        Quienes somos (subrayado)
        margin: 16px 24px 16px 64px;
    */
        border-bottom-style: solid;
        border-bottom-width: 1px;
        color: #3994AE;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 21px 40px 16px 35px;
        z-index: 3;
    }

    article#cuerpo_part_1 {
    /*
        margin: 20px 5px 20px 80px;
        margin: 5px 5px 0px 40px;
        width: 85%;  
    */
        margin: 0px 5px 0px 0px;
        width: 95%;  
    }

    article#cuerpo_part_2 {
    /*
        height: 160px;
        height: 60px;

        background: #424242;
        height: 60px;
        margin: -30px 0px 0px 30px;
        width: 10%;  
    */
        height: 0px;
        width: 0%;  
    }

    /*   no va lo usare solo si es necesario   (2015-1-11)
    section#animacion_principal_nosotros {   
        background-color: #F4A9EA;
        border-radius: 8px;
        width: 90%;   
        margin: 0.16px 24px 25px 120px;
        min-height: 200px;  
    }
    */

    .ca-menu{
        /*
        background-color: #F4A9EA;   /* al final quitar este color (medio rosado)
        margin: 20px auto;
        */
        padding: 0;
        max-width: 610px;   
    }

    .ca-menu li{
        /*
        max-width: 625px;                  /*  (ancho) 
        height: 160px;                     /*  (alto del liston)   
        */
        border-radius: 8px;
        max-width: 625px;                  /*  (ancho) */
        height: 140px;                     /*  (alto del liston)  */
        overflow: hidden;
        display: block;
        margin: 28px auto;

        /*
           Liston negro del lado izquierdo.
            border-left: 10px solid #424242;   (grueso del liston)
        */
        border-left: 10px solid #424242;
        text-decoration: none;

        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .ca-menu li:last-child{
        margin-bottom: 0px;
    }

    .ca-menu li a {
      text-decoration: none;
    }

    .ca-icon {
        /*
        */
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 20px;
        text-shadow: 0px 0px 1px #333;
        line-height: 90px;
        position: absolute;
        margin: -3px 10px 10px 15px;
        max-width: 90px;
        text-align: center;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }

    .ca-icon img {
        /*
        width: 140px;
        height: 100px;

        width: 70px;
        height: 50px;
        margin: 26px auto;
        */
        width: 80px;
        height: 60px;

        border: 1px solid;
        border-color: #666666;
        margin: 26px 26px 26px -4px;
        padding: 5px 5px 5px 5px;

       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }

    .ca-menu li:hover img {
        /*
       -webkit-transform: scale(1.1,1.1);
       -moz-transform: scale(1.1,1.1);
       -o-transform: scale(1.1,1.1);
       -ms-transform: scale(1.1,1.1);
       transform: scale(1.1,1.1);

        -webkit-transition: 3s;
        -webkit-transform: rotate3d(100,0,0, 360deg);

        -webkit-transition: 3s;
        -webkit-transform: rotate3d(50,0,0, 90deg);
        */
        -webkit-transition: 3s;
        -webkit-transform: rotate3d(100,0,0, 360deg);
    }

    .ca-content {
        /* contenido o texto.
        background-color: #fff;   /* al final quitar este color (medio rosado)
        margin: 40px 40px 40px 200px;
        max-width: 360px;
        padding: 1px 10px 10px 10px;
        */
        margin: 20px 40px 40px 110px;
        width: 70%;
        min-height: 70px;
        padding: 1px 1px 10px 1px;
    }

    .ca-main{
        /*
        font-size: 30px;
        margin: 10px 40px -10px 1px;

        border-radius: 0.5em;
        background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
        background: -moz-linear-gradient(top,  #424242,  #ffffff);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
        max-width: 360px;
        */
        color: #666;
        font-size: 12px;
        margin: 10px 10px 10px 10px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }

    .ca-sub{
        /*
        font-size: 14px;

        border-radius: 0.5em;
        background: -webkit-gradient(linear, left top, left bottom, from(#424242), to(#ffffff));
        background: -moz-linear-gradient(top,  #424242,  #ffffff);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
        max-width: 360px;
        */
        color: #666;
        font-size: 12px;
        margin: 5px 10px 10px 10px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear; 
    }

    /*
    .ca-menu li:hover{
        /*
        border-color: #fff004;      /*   vertical izquierdo color amarillo   
        */

        /*
        border-color: #f900b0;      /*   vertical izquierdo color rosado   
        background: #000;
    }
    */

    .ca-menu li:hover {
        /*
           cinta vertical izquierdo color rosado
        border-color: #f900b0;    
        border-color: #F4A9EA;
        border-color: #b52d6e;
        */
        border-color: #b20808;
    }



    .ca-menu li:hover .ca-icon {
        /*
        width: 0px;    no tenia
        height: 0px;   no tenia

        width: 90px;
        height: 90px;
        */
        color: #fff004;
        text-shadow: 0px 0px 1px #fff004;
        font-size: 50px;
    }

    /*
          Mio
    */
    .ca-menu li:hover .ca-content {
        /* contenido o texto, hover
       background: #424242;
       border-radius: 1.0em;
       margin: 40px 40px 40px 200px;
       max-width: 360px;
       min-height: 70px;
       padding: 1px 10px 10px 10px;
        */
       background: #424242;
       border-radius: 16px;
       margin: 20px 40px 40px 110px;
       max-width: 70%;
       min-height: 70px;
       padding: 1px 1px 10px 1px;
    }

    .ca-menu li:hover .ca-main{
        /*
        */
        color: #b20808;
        font-size: 16px;
        opacity: 0.9;
    }

    .ca-menu li:hover .ca-sub{
        /*
        */
        color: #fff;
        font-size: 12px;
    }



    /*
       Imagen del lado derecho
    */
    #imagen_first_page {
    /*
      margin: 3.0em 1.0em 1.0em 3.0em;
    */
      margin: 5px 5px 5px 5px;
    }

    #imagen_nos_01 {
        /*
        border-color: #F4A9EA;
        padding: 5px 5px 5px 5px;
        width: 95%;
        width: 100%;
        */
        border: 1px solid;
        border-color: #666666;
        height: 150px;
        width: 100%;
        z-index: 3;
    }
}

@media screen and (max-width: 320px) {
    section#fondo-nosotros_cuerpo {
    /*
        margin: -5px 0px 0px -8px;
        width: 102%;

        background: -webkit-gradient(linear, left bottom, left top, from(#CCCCCC), to(#ffffff));
        background: -moz-linear-gradient(top,  #424242,  #ffffff);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
    */

        width: 120%;
        min-height: 110px;
        margin: -5px 0px 10px 0px;
    }



    #nombre_pagina_nos {
        /*
        QUIENES SOMOS   actual con animacion. cambio de color.
        padding: 30px 0px 0px 150px;
        margin: 45px 0px -5px 150px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        margin: 25px 0px 10px 7px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   
        */
        font-size: 12pt;
        margin: 25px 0px 10px 0px;   /*   Ubica el Texto QUIENES SOMOS. con animacion, cambio de color.   */
    }

    .wbienvenidos {
    /*
        Quienes somos (subrayado)
        margin: 21px 40px 16px 35px;
    */
        border-bottom-style: solid;
        border-bottom-width: 1px;
        color: #3994AE;
        font-size: 18px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: bold;
        margin: 21px 40px 16px 20px;
        z-index: 3;
    }


article#cuerpo_part_1, article#cuerpo_part_2 {
    /*
        background-color: #000;  
    */
        border-radius: 8px;
        display: inline-block;
        width: 97%;  
        vertical-align: top;
    }

    article#cuerpo_part_1 {
    /*
        margin: -15px 5px 0px -40px;
        width: 85%;  
        width: 95%;  
    */
        margin: -15px 5px 0px 8px;
        width: 81%;  
    }

    article#cuerpo_part_2 {
    /*
        height: 160px;
        height: 60px;

        background: #424242;
        height: 60px;
        width: 10%;  
    */
        background-color: #212121;  
        height: 0px;
        width: 0%;  
    }

    /*   no va lo usare solo si es necesario   (2015-1-11)
    section#animacion_principal_nosotros {   
        background-color: #F4A9EA;
        border-radius: 8px;
        width: 90%;   
        margin: 0.16px 24px 25px 120px;
        min-height: 200px;  
    }
    */

    .ca-menu{
        /*
        background-color: #F4A9EA;   /* al final quitar este color (medio rosado)
        margin: 20px auto;
        max-width: 610px;   
        */
        padding: 0;
        max-width: 610px;   
    }

    .ca-menu li{
        /*
        max-width: 625px;                  /*  (ancho) 
        height: 160px;                     /*  (alto del liston)   
        max-width: 625px;                  /*  (ancho) 
        margin: 28px auto;
        margin: 28px 28px 28px 28px;
        */
        border-radius: 8px;
        max-width: 725px;                  /*  (ancho) */
        height: 140px;                     /*  (alto del liston)  */
        overflow: hidden;
        display: block;
        margin: 28px 0px 10px -55px;

        /*
           Liston negro del lado izquierdo.
            border-left: 10px solid #424242;   (grueso del liston)
        */
        border-left: 10px solid #424242;
        text-decoration: none;

        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        -ms-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
    }

    .ca-menu li:last-child{
        margin-bottom: 0px;
    }

    .ca-menu li a {
      text-decoration: none;
    }

        /*
    .ca-icon {  intrascendente. (2015-1-11)
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 20px;
        text-shadow: 0px 0px 1px #333;
        line-height: 90px;
        position: absolute;
        margin: -3px 10px 10px 15px;
        max-width: 90px;
        text-align: center;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
        */

    .ca-icon img {
        /*
        width: 140px;
        height: 100px;

        width: 70px;
        height: 50px;
        margin: 26px auto;
        margin: 26px 26px 26px -4px;
        */
        width: 60px;
        height: 40px;

        border: 1px solid;
        border-color: #666666;
        margin: 16px 26px 26px -8px;
        padding: 5px 5px 5px 5px;

       -webkit-transition: all 0.2s linear;
       -moz-transition: all 0.2s linear;
       -o-transition: all 0.2s linear;
       -ms-transition: all 0.2s linear;
       transition: all 0.2s linear;
    }

    .ca-menu li:hover img {
        /*
        */
        -webkit-transition: 3s;
        -webkit-transform: rotate3d(100,0,0, 360deg);
    }

    .ca-content {
        /* contenido o texto.
        background-color: #fff;  
        */
        margin: 0px 0px 40px 85px;
        width: 60%;
        min-height: 70px;
        padding: 1px 1px 10px 1px;
    }

    .ca-main{
        /*    el titulo del texto
        */
        color: #666;
        font-size: 12px;
        margin: 10px 10px 10px 10px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }

    .ca-sub{
        /*   el texto
        font-size: 12px;
        margin: 5px 10px 10px 10px;
        */
        color: #666;
        font-size: 10px;
        margin: 5px 10px 10px 10px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear; 
    }

    /*
    .ca-menu li:hover{
        /*
        border-color: #fff004;      /*   vertical izquierdo color amarillo   
        */

        /*
        border-color: #f900b0;      /*   vertical izquierdo color rosado   
        background: #000;
    }
    */

    .ca-menu li:hover {
        /*
           cinta vertical izquierdo color rosado
        border-color: #f900b0;    
        border-color: #F4A9EA;
        border-color: #b52d6e;
        */
        border-color: #b20808;
    }



        /*
    .ca-menu li:hover .ca-icon {   intrascendente
        color: #fff004;
        text-shadow: 0px 0px 1px #fff004;
        font-size: 50px;
    }
        */

    /*
          Mio
    */
    .ca-menu li:hover .ca-content {
        /* contenido o texto, hover
        */
       background: #424242;
       border-radius: 16px;
       margin: 0px 0px 40px 85px;
       width: 60%;
       min-height: 70px;
       padding: 1px 1px 10px 1px;
    }

    .ca-menu li:hover .ca-main{
        /*
        font-size: 16px;
        */
        color: #b20808;
        font-size: 14px;
        opacity: 0.9;
    }

    .ca-menu li:hover .ca-sub{
        /*
        font-size: 12px;
        */
        color: #fff;
        font-size: 10px;
    }


    /*
       Imagen del lado derecho
    */
    #imagen_first_page {
    /*
      margin: 3.0em 1.0em 1.0em 3.0em;
    */
      margin: 5px 5px 5px 5px;
    }

    #imagen_nos_01 {
        /*
        border-color: #F4A9EA;
        padding: 5px 5px 5px 5px;
        width: 95%;
        width: 100%;
        */
        border: 1px solid;
        border-color: #666666;
        height: 150px;
        width: 100%;
        z-index: 3;
    }
}