body {
	background:#9d9d9d url(Images/fpg.png) repeat top left;

        font-family:'Yanone Kaffeesatz', sans-serif;
 font-size:62.5%;

        margin:0;
 padding:0
}


/*centrar el contenido en la página*/

#container {
position:relative;
 width:960px;
 margin:auto
}


#cabecera {
position:relative;
 text-align:center
}


h1 {
font-size:4em;
 font-weight:200;
 text-transform:uppercase
}


p {
font-size:2em;
 font-weight:200;
 text-transform:uppercase
}



#contenido {
position:relative
}


#pie {width:960px;
 float: left; margin-top: 5px;
}

#pie {
position:relative;
 text-align:center
}

p {
font-size:2em;
 font-weight:200;
 text-transform:uppercase
}


/*nuestra unordered list*/


ul.efectos {
position:relative;
 margin:0;
 padding:0
}


/*elementos de la lista con sombra y un marco blanco*/


ul.efectos li {
background:#d1d694 url(Images/GRACIASO.jpg) no-repeat center center;

               position:relative;
 list-style:none;
 width:200px;
 height:183px;

               overflow:hidden;
 border:8px solid #FFF;
 float:left;
 
               -webkit-box-shadow:0 0 10px #333;

               -moz-box-shadow:0 0 10px #333;

               -ms-box-shadow:0 0 10px #333;

               -o-box-shadow:0 0 10px #333;

               box-shadow:0 0 10px #333;

               margin:0 10px 20px;

               padding:0;
               
}



ul.efectos li img {
z-index:30;
 position:absolute;
 top:0;
 left:0;

                   -webkit-transition:all .7s ease-out;

                   -moz-transition:all .7s ease-out;

                   -ms-transition:all .7s ease-out;

                   -o-transition:all .7s ease-out;

                   }



ul.efectos li:hover img {
-webkit-transform:scale(6);

                         -moz-transform:scale(6);

                         -ms-transform:scale(6);

                         -o-transform:scale(6);
	
                         opacity:0;

                         }



ul.efectos li h2 {
font-size:2em;
 color:black;
 line-height:1.5em;
 letter-spacing:.1em;

                  text-align:center;
 text-transform:uppercase;

                  -webkit-transition:all .5s ease-in;

                  -webkit-transform:scale(0.1);
	
                  -moz-transition:all .5s ease-in;

                  -moz-transform:scale(0.1);

                  -ms-transition:all .5s ease-in;

                  -ms-transform:scale(0.1);

                  -o-transition:all .5s ease-in;

                  -o-transform:scale(0.1);

                  opacity:0;

                  margin:0;

                  padding:0;

                  }



ul.efectos li:hover h2 {
padding-top:30px;
 
                        -webkit-transform:scale(1);

                        -moz-transform:scale(1);

                        -ms-transform:scale(1);
	
                        -o-transform:scale(1);
	
                        opacity:1;

                        }



ul.efectos li hr {
width:0;
 color:BLACK;
 background-color:RED;
 border:none;
 height:2px;

                  -webkit-transition:all .6s linear;

                  -moz-transition:all .6s linear;
	
                  -ms-transition:all .6s linear;

                  -o-transition:all .6s linear;
	
                  margin:auto;

                  }



ul.efectos li:hover hr {
width:200px
}



ul.efectos li p {
color: #000080;
 font-family:helvetica, arial, sans-serif;
 text-transform:uppercase;
 
                 font-size:1.4em;
 text-align:center;
 text-tranform:uppercase;

                 -webkit-transition:all .6s ease-in;

                 -webkit-transform:scale(0.1);
	
                 -moz-transition:all .6s ease-in;

                 -moz-transform:scale(0.1);

                 -ms-transition:all .6s ease-in;

                 -ms-transform:scale(0.1);

                 -o-transition:all .6s ease-in;

                 -o-transform:scale(0.1);

                 opacity:0;

                 margin:0;

                 padding:20px;

                 }



ul.efectos li:hover p {
-webkit-transform:scale(1);

                       -moz-transform:scale(1);
	
                       -ms-transform:scale(1);
	
                       -o-transform:scale(1);

                       opacity:1;

                       }



ul.efectos li a.boton {
display:block;
 text-align:center;
 font-family:helvetica, arial, sans-serif;

                       position:relative;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-decoration:none;

                       font-size:1.6em;
	background:#333;
 color:#FFF;
 width:150px;
 margin-left:22px;
 border:none;

                       -webkit-transition:all .6s ease-in;
 
                       -webkit-transform:translateY(230px) scale(5);

                       -moz-transition:all .6s ease-in;
	
                       -moz-transform:translateY(230px) scale(5);

                       -ms-transition:all .6s ease-in;

                       -ms-transform:translateY(230px) scale(5);

                       -o-transition:all .6s ease-in;

                       -o-transform:translateY(230px) scale(5);
	opacity:0;

                       cursor:pointer;
	z-index:50;

                       padding:4px;

                       }



ul.efectos li:hover a.boton {
-webkit-transform:translateY(0) scale(1);
	
                             -moz-transform:translateY(0) scale(1);

                             -ms-transform:translateY(0) scale(1);
 
                             -o-transform:translateY(0) scale(1);

                             opacity:1;

                              }