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

body {
/*
background-repeat: no-repeat;   
background-image: url('../media/imgs_02/flor_blanca.PNG');
   z-index: -3;

font: normal 11px/14px Arial, Verdana, sans-serif;
color: #222;


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_musica_cuerpo {
/*
background-color: #212121;
background-color: #585858;
background-color: #424242;
max-width: 80em;   
border-radius: 1.0em;
border: solid 0.5em #F4A9EA;
max-width: 878px;   
max-width: 100%;   
margin: 0.01em auto;
*/

/*
    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');

box-shadow: .25em .25em .25em rgba(53,72,110,.5);
margin: 0px 0px 0px -8px;

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

display:block;
margin: 0px 0px 0px -8px;
width: 102%;   
min-height: 110px;
/*
opacity: 0.4;
opacity: 0.7;
z-index: -3;
*/
}

#nombre_pagina_con {
    /*
    CONTACTO   actual con animacion. cambio de color.
    padding: 30px 0px 0px 90px;
    padding: 30px 0px 0px 80px;
    padding: 30px 0px 0px 105px;
    */
    padding: 200px 0px 0px 105px;
}

article#cuerpo_part_1, article#cuerpo_part_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');
*/
    border-radius: 8px;
    display: inline-block;
    max-width: 97%;  
    vertical-align: top;
}

article#cuerpo_part_1 {
/*
    background-color: #212121;
    width: 69%; 
    margin: 0px 5px 10px 5px;
*/
    margin: 0px 5px 80px 5px;
    width: 63%; 
}

article#cuerpo_part_2 {
/*
    background-color: #585858;
    width: 27%; 
*/
    width: 35%; 
    margin: 150px 0px 0px 0px;
}

.winicio {
/*
    CONTACTO
    font-family: Georgia, "Times New Roman", Times, serif;
*/
    color: #9E158C;
    font-size: 17px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 16px;
    margin: 16px 24px 16px 16px;
}

.wbienvenidos {
/*
    Musica Maestro (subrayado)
*/
/*
    margin: 16px 10px 16px 64px;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 21px 10px 16px 126px;
*/
    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 10px 16px 131px;
    z-index: 3;
}

/*
  Empieza el cuerpo, lado izquierdo
*/


#imagen_nos_01 {               /*   imagen de la operadora   */
/*  
    border-color:#F4A9EA;
    margin: 1.0em 2.0em 0.1em 0.1em;    
    padding: 0.2em 0.2em 0.2em 0.2em;

    border-color:#991313;   borde rojo
*/  
    border: 3px solid;
    border-color:#F4A9EA;
    border-radius: 8px;
}

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

#imagen, #imagen_02, #imagen_03, #imagen_04, #imagen_05 {
/*
  border-color: #F4A9EA;
*/
  border: 1px solid;
  border-color: #666666;
  padding: 5px 5px 5px 5px;
  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) {   /* Negro */
    section#fondo_musica_cuerpo {
    /*
    margin: 130px 0px 0px 0px;
    margin: 70px 0px 0px 0px;
    */
    display:block;
    margin: -40px 0px 0px 0px;
    width: 102%;   
    min-height: 110px;
    }

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

    article#cuerpo_part_1 {
    /*
        background-color: #212121;
        width: 63%; 
        margin: 0px 5px 10px 5px;
        margin: 0px 1px 10px 5px;
    margin: 0px 5px 80px 5px;
    */
        margin: 0px 1px 60px 5px;
        width: 63%; 
    }

    article#cuerpo_part_2 {
    /*
        background-color: #585858;
        width: 35%; 
    */
        width: 35%; 
    }

    /*
       Imagen del lado derecho
    */
    #imagen_first_page {
    /*
      margin: 48px 16px 16px 0px;
      margin: 48px 16px 16px 20px;
    */
      margin: 48px 16px 6px 20px;
    }
}


/*   se trabajo hasta aqui por ahora (2014-11-05).   */

    /*
@media screen and (max-width: 680px) {
@media screen and (max-width: 768px) {
    */
@media screen and (max-width: 768px) {   /* Rojo */
    /*
       Empieza el cuerpo
    */
    section#fondo_musica_cuerpo {
    /*
    */
    display:block;
    margin: 130px 0px 0px 0px;
    width: 102%;   
    min-height: 110px;
    }

    #nombre_pagina_con {
        /*
        CONTACTO   actual con animacion. cambio de color.
        padding: 30px 0px 0px 105px;
        */
        padding: 30px 0px 0px 90px;
    }

    .wbienvenidos {
    /*
        Musica Maestro (subrayado)
        margin: 21px 10px 16px 131px;
    */
        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 10px 16px 116px;
        z-index: 3;
    }

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

    article#cuerpo_part_1 {
        /*
        background-color: #ffffff;   
        width: 80%; 
        */
        margin: 0px 1px 60px 5px;
        width: 90%; 
    }

    article#cuerpo_part_2 {
        /*
        background-color: #212121;   
        width: 19%; 
        margin: 10px 10px 10px 150px;
        */
        width: 19%; 
        display: none;
    }
  
/*
  Empieza el cuerpo, lado izquierdo
*/
    /*
       Imagen del lado derecho. No va
      margin: 10px 10px 10px 10px;
      margin: 2px 0px 0px 150px;
    */
    #imagen_first_page {
      margin: 2px 0px 0px 100px;
    }
}

@media screen and (max-width: 640px) {   /* Celeste */
    /*
       Empieza el cuerpo
    */
    section#fondo_musica_cuerpo {
    /*
    margin: 130px 0px 0px 0px;
    */
    display:block;
    margin: 70px 0px 0px 0px;
    width: 102%;   
    min-height: 110px;
    }

    #nombre_pagina_con {
        /*
        CONTACTO   actual con animacion. cambio de color.
        padding: 30px 0px 0px 105px;
        padding: 30px 0px 0px 90px;
        padding: 30px 0px 0px 70px;
        */
        padding: 30px 0px 0px 40px;
    }

    .wbienvenidos {
    /*
        Musica Maestro (subrayado)
        margin: 21px 10px 16px 131px;
        margin: 21px 10px 16px 116px;
        margin: 21px 5px 16px 100px;
    */
        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 5px 16px 70px;
        z-index: 3;
    }

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

    article#cuerpo_part_1 {
        /*
        background-color: #ffffff;   
        width: 80%; 
        margin: 0px 1px 50px 5px;
        */
        margin: 0px 1px 20px 5px;
        width: 90%; 
    }

    article#cuerpo_part_2 {
        /*
        background-color: #212121;   
        width: 19%; 
        margin: 10px 10px 10px 150px;
        */
        width: 0%; 
        display: none;
    }
  
/*
  Empieza el cuerpo, lado izquierdo
*/
    /*
       Imagen del lado derecho. No va
      margin: 10px 10px 10px 10px;
    */
    #imagen_first_page {
      margin: 2px 0px 0px 150px;
    }
}


@media screen and (max-width: 480px) {   /* Plomo */
    section#fondo_musica_cuerpo {
    /*
        margin: -5px 0px 0px 3px;
    */
        display:block;
        margin: 80px 0px 0px 3px;
        width: 126%;   
        min-height: 110px;
    }

    #nombre_pagina_con {
        /*
        CONTACTO   actual con animacion. cambio de color.
        padding: 30px 0px 0px 70px;
        padding: 30px 0px 0px 110px;
        */
        padding: 30px 0px 0px 95px;
    }

    .wbienvenidos {
    /*
        Musica Maestro (subrayado)
        margin: 21px 5px 16px 100px;
        margin: 21px 5px 16px 140px;
    */
        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 5px 16px 120px;
        z-index: 3;
    }

    /*
       Empieza el cuerpo
    */
    article#cuerpo_part_1, article#cuerpo_part_2 {
        /*
        background: #212121;
        margin: 10px 10px 10px 10px;
        margin: 10px 0px -60px 0px;
        max-width: 97%;  
        width: 110%;  
        margin: 10px 0px 1px 0px;
        */
        border-radius: 8px;
        display: inline-block;
        width: 99%;  
        vertical-align: top;
    }

    article#cuerpo_part_1 {
        /*
        background-color: #ffffff;   
        width: 80%; 
        width: 160%; 
        margin: 0px 1px 50px 5px;
        */
        margin: 10px 10px 20px -100px;
        width: 99%; 
    }

    article#cuerpo_part_2 {
        /*
        background-color: #212121;   
        width: 19%; 
        margin: 10px 10px 10px 150px;
        */
        width: 0%; 
        display: none; 
    }
  
/*
  Empieza el cuerpo, lado izquierdo
*/
    /*
       Imagen del lado derecho. No va
      margin: 10px 10px 10px 10px;
    */
    #imagen_first_page {
      margin: 2px 0px 0px 150px;
    }
}

@media screen and (max-width: 320px) {   /* blanco */
    section#fondo_musica_cuerpo {
    /*
    */
        display:block;
        margin: 110px 0px 0px 3px;
        width: 126%;   
        min-height: 110px;
    }


    #nombre_pagina_con {
        /*
        CONTACTO   actual con animacion. cambio de color.
        padding: 30px 0px 0px 70px;
        padding: 30px 0px 0px 110px;
        */
        padding: 30px 0px 0px 95px;
    }

    .wbienvenidos {
    /*
        Musica Maestro (subrayado)
        margin: 21px 5px 16px 100px;
        margin: 21px 5px 16px 140px;
    */
        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 5px 16px 120px;
        z-index: 3;
    }

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

    article#cuerpo_part_1 {
        /*
        margin: 10px 10px 50px -100px;
        */
        margin: 10px 10px 20px -100px;
        width: 99%; 
    }

    article#cuerpo_part_2 {
        /*
        */
        width: 0%;
        display: none; 
    }
  
/*
  Empieza el cuerpo, lado izquierdo
*/
    /*
       Imagen del lado derecho. No va
      margin: 10px 10px 10px 10px;
    */
    #imagen_first_page {
      margin: 2px 0px 0px 150px;
    }
}