/*

/* DESPLEGABLE MENU */


*{
/*  background-image: url("objetos/cartel nuevo1-1.jpg");*/
	background-position:back;
  background-attachment:fixed;
	background-repeat:no-repeat;
}

#div table {
background:none;
color:#000000;
     display:block;
		 shadow: none;
} 

* {
list-style:none;
text-decoration:none;
margin:0;
padding:0;  /* Evitar que los menus se desplacen a derecha */
}
  
#contenedor {
text-align: center;
margin: 20px auto;  /* para centrar el div */

}

 .desplegable {
     display: inline-block;   /* para centrar el menú en la pantalla  */
}

.desplegable li {
     float:left;  /*  para que el menu sea horizontal */
}

 .desplegable li ul li {
     float: none;  /* para que el menu se despliegue en vertical */
}

 .desplegable li ul {
     display:none;  /* el desplegable no es visible por defecto */
}

 .desplegable li:hover ul {
     display:block;  /* al pasar sobre el menu se hace visible  */
		}

.desplegable li a {
     font-size:20px;
		 background:white;
     color:#000000;
     display:block;
     border:black;
     padding:10px 30px;
     margin:2px;
}
.desplegable li a li{
     font-size:20px;
		 background:white;
     color:#ff0000;
     display:block;
     border:black;
     padding:10px 30px;
     margin:2px;
		 font-face:arial;
}

.desplegable li a:hover {
    		 background: white; 
}
. desplegable td
{
     font-size:20px;
		 background:white;
     color:#000000;
     display:block;
     border:black;
     padding:10px 30px;
     margin:2px;
}

 /*FIN DESPLEGANLE*/
----------------
/*ESTRUCTURA PAG*/

        * {
            margin: 0;
            padding: 0;
        }
        html,body,global {
            width: 100%;
						height:60px;
						text-align:center;
        }
    
			 		 
		 /* Div que engloba el contenido de la página menos el footer */

		 cabecera {
            position:absolute;
						width: 100%;
						height:5px;
						display:block;
            background-color:#ccc;
						text-align:center;
      /*      padding:0px 0px;*/
						border: black;
		 
		      /* Altura total del footer en px con valor negativo */

            margin-top:0px;
            /* Altura del footer en px. Se han restado los 5px del margen

               superior mas los 5px del margen inferior

            */
						}
	
		 
    #wrapper {

            min-height:100%;
        }   
        cabecera {
				    width: 100%;
				    height: 5px;
            position:absolute;
						display:block;
            background:#ccc ;
						text-align:center;
            			
				
				}
        section {
            overflow: auto;
            /* Definimos el padding inferior:

               50px del pie de pagina mas 10px de separacion

            */

            padding-bottom: 5px;
            /* Definimos un padding superior */

            padding-top:10px;
        }
        
				
			  footer {				  		
				
            position:relative;
            /* Altura total del footer en px con valor negativo */

            margin-top:0px;
            /* Altura del footer en px. Se han restado los 5px del margen

               superior mas los 5px del margen inferior

            */
						
						width: 100%;
            height:0px;
						left:0px;
						bottom:0px;
            padding:0px 0px;
            clear: both;
            background: #cccccc;
					  text-align: relative;
            color: #666699;
            font-size:20px;
						font-face:arial;
						font-color:#666699;
 
  }
	
	/* Tabla pie*/
    table{
		width: 100%;
		position: center;
		font-text:arial;
		font-color:black;
     color: #666699;
        }
 			table td ul a{
				font-text:arial;
		font-color:black;
		color: #666699;
		}
 table td li a{
				font-text:arial;
		font-color:black;
		color: #666699;
		}
 
 table td li a ul li{
				font-text:arial;
		font-color:black;
		color: #666699;
		padding:0px 0px 0px 0px;
		}
/* Fin tabla pie*/
 
 
 
 
 
 
 
 
 
 
 
        /* Esta clase define la anchura del contenido y la posicion centrada 

           El contenido queda centrado y limitado, pero la cabecera y el pie

           llegan hasta los limites del navegador.

        */

        .define {
            width:960px;
						margin:0 auto;
        }
 #define {
            width:960px;
            margin:0 auto;
        }
    </style>
</head>
 
-------------------------/* GIRO imagen */
#contenedor{
 width: 280px;
 margin: 40 auto;
 padding-top:150px;
}

#contenedor-imagen img {
 border:none;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 color:#990000;
}

#contenedor-imagen img:hover {
 -webkit-transform: rotate(-360deg);
 -moz-transform: rotate(-360deg);
 -ms-transform: rotate(-360deg);
 transform: rotate(-360deg);
 color:#990000;
}




/* Service Box */
h2{			font-size:18px;
             text-align: center;
             text-transform:none;
						 color: #ff0000;
         }

h4{			font-size:12px;
             text-align: center;
             text-transform:none;
						 color: black;
         }


h1{
             font-size:25px;
             text-align: left;
             text-transform:capitalize;
         }
        .service-box{
            position: relative;
            overflow: hidden;
            margin-bottom:10px;
						margin-left:10px;
            perspective:1000px;
            -webkit-perspective:1000px;
        }
        .service-icon{
            width: 100%;
            height: 100px;
            padding:40px;
            text-align: center;
            transition: all .5s ease;
        }

        .service-content{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            width: 100%;
            height: 100px;
            padding: 20px;
            text-align: center;
            transition: all .5s ease;
            background-color:#ffffff;/*#474747*/
			      backface-visibility:hidden;
            transform-style: preserve-3d;
            -webkit-transform: translateY(110px) rotateX(-90deg);
            -moz-transform: translateY(110px) rotateX(-90deg);
            -ms-transform: translateY(110px) rotateX(-90deg);
            -o-transform: translateY(110px) rotateX(-90deg);
            transform: translateY(110px) rotateX(-90deg);
        }
        .service-box .service-icon .front-content{
            position: center;
            top:80px;
						margin-left:20px;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
						
        }

        .service-box .service-icon .front-content i {
            font-size: 28px;
            color:#000000 ; /* #fff  */
            font-weight: normal;
						border:black;
        }

        .service-box .service-icon .front-content h3 {
            font-size: 15px;
            color:#000000 ; /* #fff  */
            text-align: center;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .service-box .service-content h3 {
            font-size: 15px;
            font-weight: 700;
            color:#000000 ; /* #fff  */
            margin-bottom:10px;
            text-transform: uppercase;
        }
        .service-box .service-content p {
            font-size: 13px;
            color: white;
            margin:0;
        }
				.white {background-color: #ffffff;}
        .yellow{background-color: #ffc000;}
        .orange{background-color: #fc7f0c;}
        .red{background-color: #e84b3a;}
        .grey{background-color: #474747;}
        .service-box:hover .service-icon{
            opacity: 0;
            -webkit-transform: translateY(-110px) rotateX(90deg);
            -moz-transform: translateY(-110px) rotateX(90deg);
            -ms-transform: translateY(-110px) rotateX(90deg);
            -o-transform: translateY(-110px) rotateX(90deg);
            transform: translateY(-110px) rotateX(90deg);
        }
        .service-box:hover .service-content {
            opacity: 1;
            -webkit-transform: rotateX(0);
            -moz-transform: rotateX(0);
            -ms-transform: rotateX(0);
            -o-transform: rotateX(0);
            transform: rotateX(0);
        }
				
				/* Fin Service Box*/