@charset "utf-8";
/* CSS Document */
body
   {
	 height: 80%; 
	 background:#F2F2F2;/*EEEEEE#FFCC99;#F8E8CC;*/
	 color:#0B04CE;
	 font-family: arial;
	 border-radius: 10px;
			  -ms-border-radius: 10px;
			  -moz-border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -khtml-border-radius: 10px; 
			 
}
	 
		#centro{
		      /*border: 1px solid #A7A9AA;*/
			  width: 80%; 
			  height: 100%;
			  margin: 10px auto 0px auto;
			  background: #FFFFFF; 
			  border-radius: 10px;
			  -ms-border-radius: 10px;
			  -moz-border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -khtml-border-radius: 10px; 
			  /*border: 1px silver solid;*/ 
			
		}
			
		#header{
		  
		    width: 80%; 
			padding: 10px 10px 10px 30px; 
			background: #FFFFFF; 
			color: #1A1C1E;
			border-radius: 10px;
			-ms-border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			-khtml-border-radius: 10px;
		}
			
	    #menu{
		    
		      width: 100%; 
			  height: 60px;
			  float: center; 
			  /*padding: 0px 0px -10px 0px;*/
			  background: #FF9933;
			  /*color:#0B04CE;/*#FF9933*/
			  /*text-transform: uppercase; 
			  border-radius: 10px;
			  -ms-border-radius: 10px;
			  -moz-border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -khtml-border-radius: 10px;*/
			  
		}
		#menu ul {
               padding: 2% 3% 0% 5%;
			   text-align:center;
        }
		#menu ul li {
		    display: inline;
		}
		#menu li a {
             font-family: arial,Helvetica,sans-serif;
             font-size:18px/*110%*/;
             text-decoration: none;
             float:center;
             padding: 0px 10px 0px 10px;
             /*background-color: #FF9933;*/
             color: #FFFFFF;
			 text-transform: uppercase; 
			 
        }

		#menu li a:hover {
		
              color:#0B04CE;
		}	 
		
		/*#menu li a:link {
		
		color:#0B04CE;
		}*/
		
		/*#menu li a:visited { 
		color:#0B04CE;
		}*/
		
		#slider{
		      float: center;
			  text-align: center; 
			  width:100%;
			  /*padding: 5px 10px 5px 5px;*/
			  /*margin: 10px 20px 15px 9px;*/
			 
		}
						
		#contenido{
		      			    
				background: #FFFFFF; 
			
		}
				 
		#sidebar {
		 
		      color: #A7A9AA;
              font-family: 'Trebuchet MS', Helvetica, sans-serif;
			  width: 30%;
			  float:left;
			  text-align: left; 
			  background: #FFFFFF; 
			  padding: 20px 5px 5px 30px;
			  margin: 10px 0px 15px 9px; 
			
		}
		
		#sidebar ul {
		 
		      text-decoration: none;
		      display: block;
			  padding: 0px 0px 0px 0px;
			  margin-left: -10px;
		}
			  
		
		#sidebar ul li {
		 
		      font-size: 18px;
		      text-decoration: none;
		      display: block;
		      padding-bottom: 10px;
		      padding-top: 0px;
		      
		}

#servicios {
		 
		      color: #A7A9AA;
              font-family: 'Trebuchet MS', Helvetica, sans-serif;
			  width: 55%;
			  float:left;
			  text-align: left; 
			  background: #FFFFFF; 
			  padding: 0px 5px 5px 30px;
			  margin: 0px 0px 0px 20%; 
			
		}
			  
		#servicios ul{
		    text-decoration: none;
		      display: block;
			  padding: 0px 0px 0px 0px;
			  margin-left: -10px;
		}

		#servicios ul li{
		     font-size: 18px;
		      text-decoration: none;
		      display: block;
		      padding-bottom: 10px;
		      padding-top: 0px;
		}		
		
			  
		#personal {
		    color: #A7A9AA;
            font-family: 'Trebuchet MS', Helvetica, sans-serif;
			width: 60%;
			float:right;
			text-align: center; 
			background: #FFFFFF; 
			padding: 5px 30px 5px 10px;
			margin: 20px 0px 0px 0px; 
		}

		#personale {
		    color: #A7A9AA;
            font-family: 'Trebuchet MS', Helvetica, sans-serif;
			width: 60%;
			float:right;
			text-align: center; 
			background: #FFFFFF; 
			padding: 5px 30px 5px 10px;
			margin: 20px 0px 0px 0px; 
		}

		#personale ul {
		 
		      text-decoration: none;
		      display: block;
			  padding: 0px 0px 0px 0px;
			  margin-left: -150px;
			  margin-top: -5px;			  
		}
			  
		
		#personale ul li {
		 
		      font-size: 18px;
		      text-decoration: none;
		      display: block;
		      padding-bottom: 10px;
		      padding-top: 0px;
		      
		}        	
				
		#img.imagen1
		   { 
		      margin: 10px 50px 20px 10px; 
			  float: right; 
		}
			  
		#gallery {
		   
		      /*border: 10px solid #1D0C16;*/
			  width: 100%;
			  float: left;
			  /*margin-top: 20px;
			  margin-left: auto;
			  margin-right: 20px; */
			  overflow: visible; 
			  /*background: #CCCCCC;*/
			  border-radius: 10px;
			  -ms-border-radius: 10px;
			  -moz-border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -khtml-border-radius: 10px;
		   /*box shadow effect in Safari and Chrome*/
           /*-webkit-box-shadow: #272229 10px 10px 20px;
           /*box shadow effect in Firefox*/
           /*-moz-box-shadow: #272229 10px 10px 20px;
           /*box shadow effect in IE*/
          /*filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10);     
          /*box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/
          /*box-shadow: #272229 10px 10px 20px;*/
	   }
	 
	 #gallery ul{
    /* This position the ul content in the middle of the gallery*/
    /*margin-left:-3px;*/ padding: 5px 5px 5px 5px;
	 }
	
	#gallery ul li {
    /* In order to create the proper effect with hover we should use display inline-table
        This will display the big picture right next to its thumbnail*/
    
    list-style:none; 
    display:inline-table; 
    padding:10px;
	clear: both;
	}
	/* This is the pic to display when the hover action occur over the li that contains the thumbnail  */

	#gallery ul li .pic{
    /* Animation with transition in Safari and Chrome */
    -webkit-transition: all 0.6s ease-in-out;
    /* Animation with transition in Firefox (No supported Yet) */
    -moz-transition: all 0.6s ease-in-out;
    /* Animation with transition in Opera (No supported Yet)*/
    -o-transition: all 0.6s ease-in-out;
    /* The the opacity to 0 to create the fadeOut effect*/
   opacity:0;
   visibility:hidden; 
   position:absolute; 
   margin-top:0px; 
   margin-left:-120px; 
   border:1px solid black;
   /*shadow box effect in Safari and Chrome*/
   -webkit-box-shadow:#272229 2px 2px 10px;
   /*shadow box effect in Firefox*/
   -moz-box-shadow:#272229 2px 2px 10px;
   /*shadow box effect in IE*/
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5);
   /*shadow box effect in Browsers that support it, Opera 10.5 pre-alpha release*/
   box-shadow:#272229 2px 2px 10px;
   }
   
   #gallery ul li .mini:hover{
    cursor:pointer;
   }
	 
	 #gallery ul li .mini{
	 border-radius: 10px;
	 -ms-border-radius: 10px;
	 -moz-border-radius: 10px;
	 -webkit-border-radius: 10px;
	 -khtml-border-radius: 10px;
	 }
	/* This create the desired effect of showing the image when we mouseover the thumbnail*/

	#gallery ul li .pic {
	border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;
	}

#gallery ul li:hover .pic {
    /* width and height is how much the picture is going to growth with the effect */
   width:300px; 
   height:300px;
   opacity:1; 
   visibility:visible; 
   float:right;
}
   
#contacto
		   {
		      width: 60%;
			  float:right;
			  text-align: center; 
			  border:solid 1px #E0E0E0;
			  /*background: #E0E0E0; */
			  padding: 10px 10px 10px 10px;
			  margin: 10px 30px 15px 20px; 
			  border-radius: 10px;
			  -ms-border-radius: 10px;
			  -moz-border-radius: 10px;
			  -webkit-border-radius: 10px;
			  -khtml-border-radius: 10px; 
} 
 
/*#contacto ul li
{
    margin:10px 0;
    /*box-shadow: 1px 1px 0 0 #949494;
    -moz-box-shadow: 1px 1px 0 0 #949494;
    -webkit-box-shadow: 1px 1px 0 0 #949494;
        border-radius: 18px 18px;
    -moz-border-radius: 18px 18px;
    -webkit-border-radius: 18px 18px;*/ 
 
    /*float:center;
    clear:both
}*/


#contacto input, #contacto textarea{

    margin:0;
    width:80%;
    padding: 8px 5px;
    font-size:16px;
    color:#A7A9AA;
    border:solid 1px #909293;
    /*text-shadow: 1px 1px 0 #4b4b4b;*/ 
 
    border-radius: 18px 18px;<br>
    -moz-border-radius: 18px 18px;<br>
    -webkit-border-radius: 18px 18px;       
 
    /*box-shadow: inset 1px 1px 3px 0 #000;
    -moz-box-shadow: inset 1px 1px 3px 0 #000;
    -webkit-box-shadow: inset 1px 1px 3px 0 #000;*/
 
    background:#FFFFFF;/*-moz-linear-gradient(0% 100% 90deg,#7e7e7e, #5e5e5e);*/
    background:#FFFFFF;/*-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5e5e5e), to(#7e7e7e));*/
 
}


#contacto .button{

    width:150px;
    border:solid 1px #bababa;
    color:#FFFFFF/*#A7A9AA*/;
    font-weight:bold;
    font-size:18px;
    border-bottom-color:#363636;
    background:-moz-linear-gradient(0% 100% 90deg,#5f5f5f, #9e9e9e);
    background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#9e9e9e), to(#5f5f5f));    
 
   /* box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
 
    text-shadow: 1px 1px 0 #9d9d9d; */
}
#footer{
		   
	width: 100%;
	/*height: 100%;*/
	float: center;
	text-align: center; 
	/*background: #E0E0E0;*/
	background-image:url('../imagenes/grey.jpg');
	/*border-radius: 10px;
	-ms-border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-khtml-border-radius: 10px;*/
	clear: both;
}
		
@charset "utf-8";
/* CSS Document */
@import url(reset.html);
		
.box1 p, .box2 p, .box3 p, .box4 p, .box5 p, .box6 p, .box7 p, .box9 p, .box10 p, .box11 p, .box12 p, .box13 p, .box14 p, .box15 p, .box16 p{
	margin: 20px ;
	color: #909293;
	outline: none;
	font-size: 15px;
}

.box9{
    display:inline-table;
	margin: 30px 50px;
	width: 30%;
	min-height: 15%;
	position:inherit;
	/*border: 1px solid rgba(0,0,0,0.1);*/
	border-radius:20px;
	background: white;
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}

/*.box9:before{
	content: '';
	width: 110%;
	left: 0; 
	height: 111%;
	z-index:-1;
	position:static;
	border-radius:20px;
	border: 1px solid rgba(0,0,0, 0.1);
	background: rgba(0, 0, 0, 0.0);
	-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
	-webkit-transform: 	translate(-5%,-5%);
}

.box9:after{
	content: '';
	position:inherit;
	top:-25px; left: 30%;
	width: 130px;
	height: 40px;
	background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
	border-left: 1px dashed rgba(0, 0, 0, 0.1);
	border-right: 1px dashed rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
}
*/