/* begin Page */
/* Created by Carlos Vassallo Donayre */
body {
/*
*/
    background-color: #000;
}

section#titulo {
/*
border-radius: 1px 1px 16px 16px;
box-shadow: 5px 5px 10px rgba(0,0,0,.5);
background-color: #F4A9EA;
background-color: #F4A9EA;
   background-color: #ac965d;   
*/
   background-color: #424242;   
display:block;
width: 101%;
margin: -6px 0px 0px -8px;
padding: 4px;
/*
z-index: -3;
*/
}

section#titulo_part_trespartes {
  /*
    background-color: #fff;
    margin: -12px 0px 0px 0px;
    height: 38px;
  */
    border-radius: 5px;
    display:block;
    margin: 1px 0px 0px 0px;
    text-align: left;
    width: 100%;   /*    ancho del header (titulo)   */
}

article#titulo_part_1, article#titulo_part_2, article#titulo_part_3 {
    /*
    min-height: 110px;
    */
    border-radius: 8px;
    display: inline-block;
    max-width: 97%;  
    height: 140px;
    vertical-align: top;
}

article#titulo_part_1 {
/*
  background-color: #424242;   
  width: 60%; 
  width: 22%; 
  background-color: #ac965d;   
 */
  min-height: 110px;
  width: 22%; 
}

article#titulo_part_2 {
/*
  background-color: #424242;   
  background-color: #ac965d;   
  width: 39%; 
  width: 70%; 
  background-color: #CCCCCC;
*/
  min-height: 110px;
  width: 36%; 
}

article#titulo_part_3 {
/*
  background-color: #ac965d;   
  width: 39%; 
  width: 70%; 
  background-color: #424242;   
*/
  min-height: 110px;
  width: 39%; 
}




#marque_derecha {   /*   cinta superior izquierda   */
/*
  color: #3994AE;
  background-color: #fff;
  -webkit-box-shadow: 2px 2px 20px #888;
  -webkit-transform: rotate(-25deg);
  -moz-box-shadow: 2px 2px 20px #888;
  -moz-transform: rotate(-45deg);
  position: absolute;
  padding: 0px 150px;
  top: 50px;
  left: -120px;
  text-align:left;

  color: #99FF99;
  color: #A6BEFF;
  color: #FFCCCC;
  color: #F4A9EA;
  color: #B3D1FF;
  color: #FFFF99;
  color: #99FF99;
*/

/*   esto sirve para la pantalla 2 (ploma)

  color: #fff;
  background-color: #B07F40;
*/
  color: #ac965d;
  background-color: #424242;
  font-size: 12px;
  -webkit-box-shadow: 2px 2px 20px #888;
/*
  -webkit-transform: rotate(-45deg);
*/
  -webkit-transform: rotate(45deg);
  position: absolute;
/*
  padding: 0px 220px;
  padding: 5px 130px;
*/
  padding: 5px 160px;
  top: 50px;
/*
  left: -120px;
*/
  right: -240px;
  text-align:center;
}

.fade3 {
    /*
    height: 90px;
    width: 96px;   
    margin: 16px 0px 0px 16px;
    height: 90px;
    width: 96px;   
    */
    border-radius: 8px;
    opacity: 1;
    filter: alpha(opacity=10);
    -ms-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    
    margin: 8px 0px 0px 8px;
    height: 58px;
    width: 176px;   
}

.fade3:hover {
    /*
    */
    border-radius: 16px 16px 16px 16px;
    opacity: 0.7;
    filter: alpha(opacity=7);
    -ms-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.arti-titulo {
/*
    text-align:center;
    margin: 40px 10px 10px -30px;
    font-size: 10px;
*/
    color: #FFFFFF;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 26px 10px 10px -100px;
}

.art-titulo {
/*
    Salon de Belleza Leticia Prado
    color: #212121;
    color: #000;
    margin: 40px 24px 18px 8px;
    font-size: 32px;
    margin: 40px 10px 10px 1px;
*/
    color: #FFFFFF;
    font-size: 24px;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 32px 10px 10px 1px;
    text-align:center;
}

.art {
/*
   Autoridad en Belleza
   color: #212121;
   background-color: #F4A9EA;
   margin: 10px 10px 10px 16px;
*/
   color: #FFFFFF;
   font-size: 18px;
   font-family: Georgia, "Times New Roman", Times, serif;
   margin: 2px 10px 10px 16px;
   text-align:center;

/*  trabajar el reflejo del sub-titulo.
   text-shadow: rgba(0, 0, 0, 0.5) 0 8px 8px; 
   background: -webkit-gradient(linear, left top, left bottom, 
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0)));

   -webkit-box-reflect: below 5px
   -webkit-gradient(linear, left top, left bottom, 
                   from(transparent), to(rgba(255, 255, 255, 0.71)));
*/
}

.art_21 {
/*
   Telefonos
   margin: 3.4em 1.0em -2.0em 3.0em;
   margin: 54px 16px -32px 48px;
*/
   color: #ac965d;
   font-size: 12px;
   font-family: Georgia, "Times New Roman", Times, serif;
   margin: 54px 16px 0px 48px;
}

/*
   Fin del Titulo
*/
/*  manejo de Responsive Web Design (media cuery)   */
/*
@media screen and (min-width: 921px) and (max-width: 1080px) {
@media screen and (min-width: 620px) and (max-width: 920px) {   
@media screen and (min-width: 469px) and (max-width: 619px) {   
@media screen and (min-width: 318px) and (max-width: 468px) {   
@media screen and (min-width: 17px) and (max-width: 317px) {   
*/

/*
@media screen and (max-width: 880px) {
@media screen and (max-width: 768px) {
*/
@media screen and (max-width: 1024px) {
    section#titulo {
      /*
      max-width: 77em;   no se usa em com max-width
      Solo sirvio para cambiar el color al lote y cuadrar.
      max-width: 77em;   no se usa em com max-width
      background-color: #F4A9EA;
      background-color: #3994AE;
      */
      }

.arti-titulo {
/*
    text-align:center;
    margin: 40px 10px 10px -30px;
    font-size: 10px;
*/
    color: #FFFFFF;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 26px 10px 10px -100px;
}

    .art-titulo {
      /*
          Salon de Belleza Leticia Prado
      font-size: 24px;
     */
      font-family: arial;
      font-size: 24px;
      }

    .art {
      /*
          Autoridad en Belleza
      */
      font-size: 16px;
      font-family: arial;
      margin: 5px auto;
      }

    .art_21 {
      /*
          Telefonos
      */
      font-size: 12px;
      font-family: arial;
      margin: 30px 30px 5px 5px;
      }
}

/*
@media screen and (max-width: 680px) {
@media screen and (max-width: 480px) {
*/
@media screen and (max-width: 768px) {
   section#titulo {
      /*
      max-width: 77em;   no se usa em com max-width
      background-color: #fff;
      background-color: #F4A9EA;
      */
      background-color: #424242;
      }

.arti-titulo {
/*
    text-align:center;
    margin: 40px 10px 10px -30px;
    font-size: 10px;
*/
    color: #FFFFFF;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 26px 10px 10px -100px;
}

    .art-titulo {
      /*
          Salon de Belleza Leticia Prado
      font-size: 16px;
      */
      font-family: arial;
      font-size: 24px;
      }

    .art {
      /*
          Autoridad en Belleza
      */
      font-size: 14px;
      font-family: arial;
      margin: 5px auto;
      }

    .art_21 {
      /*
          Telefonos
      */
      font-size: 12px;
      font-family: arial;
      margin: 5px auto;
      }
}

/*
@media screen and (max-width: 480px) {
@media screen and (max-width: 320px) {
*/
@media screen and (max-width: 480px) {
    section#titulo {
      /*
      Solo sirvio para cambiar el color al lote
      max-width: 77em;   no se usa em com max-width
      background-color: #F4A9EA;
      background-color: #3994AE;
      background-color: #424242;
      max-width: 855px;
      */
      }

.arti-titulo {
/*
    text-align:center;
    margin: 40px 10px 10px -30px;
    font-size: 10px;
*/
    color: #FFFFFF;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 26px 10px 10px -100px;
}

    .art-titulo {
      /*
          Salon de Belleza Leticia Prado
      */
      font-family: arial;
      font-size: 10px;
      }

    .art {
      /*
          Autoridad en Belleza
      */
      font-size: 14px;
      font-family: arial;
      margin: 5px auto;
      }

    .art_21 {
      /*
          Telefonos
      */
      font-size: 12px;
      font-family: arial;
      margin: 5px auto;
      }
}

/*
@media screen and (max-width: 248px) {
@media screen and (max-width: 280px) {
*/
@media screen and (max-width: 320px) {
    section#titulo {
      /*
      max-width: 77em;   no se usa em com max-width
      background-color: #F4A9EA;
      background-color: #424242;
      */
      }

.arti-titulo {
/*
    text-align:center;
    margin: 40px 10px 10px -30px;
    font-size: 10px;
*/
    color: #FFFFFF;
    font-size: 18px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin: 26px 10px 10px -100px;
}

    .art-titulo {
      /*
          Salon de Belleza Leticia Prado
      */
      font-family: arial;
      font-size: 10px;
      }

    .art {
      /*
          Autoridad en Belleza
      */
      font-size: 14px;
      font-family: arial;
      margin: 5px auto;
      }

    .art_21 {
      /*
          Telefonos
      */
      font-size: 12px;
      font-family: arial;
      margin: 5px auto;
      }

}