/*-----------------------MERCADO DE PÁGINAS-2017-RESPONSIVE DESIGN 100%--------------------------------------
-------------------------------------------LIMA-PERÚ-------------------------------------------------------
------------------------------------------VERSIÓN-1.0-----------------------------------------------------*/


/*------------------------------------PROPIEDADES PARA EL MENÚ DE NAVEGACIÓN---------------------------------------*/

/* AQUI PODRA EDITAR LAS PROPIEDADES DE CADA ELEMENTO DEL MENU DE NAVEGACION, PARA PERSONALIZARLO A SUS NECESIDADES.
LAS AREAS DONDE ENCUENTRE ESTE MENSAJE: "ESTOS VALORES SOLO DEBE CAMBIARLOS SI TIENE LOS CONOCIMIENTOS NECESARIOS",
SON VALORES QUE MANTIENEN LA ESTRUCTURA DE LAS PAGINAS, SI SON CAMBIADOS ERRONEAMENTE, PODRIA CAUSAR ERRORES EN LA
ESTRUCTURA DE TODAS LAS PAGINAS DEL SITIO WEB.*/


/*********************************************INICIO***************************************************/
/*-----------------------ESTE ES EL CONTENEDOR DE TODO EL MENU----------------------------------------*/
#contenedor{
	/*COLOR DE FONDO DEL CONTENEDOR (SI LO DEJA VACIO, EL FONDO SERA TRANSPARENTE)*/
border: 0px ;
	/*ALINEAR EL MENU AL CENTRO DE LA PANTALLA*/
	text-align:center;

	/*ESTOS VALORES SOLO DEBE CAMBIARLOS SI TIENE LOS CONOCIMIENTOS NECESARIOS*/
	margin-top:30px;
/*	max-width:1000px;*/
width:100%;
	padding:0px;
}
nav ul{
	padding:0;
}
/**************************************************************************************************/
	

/*--------------------EDITAR LAS PROPIEDADES DE LOS ELEMENTOS DEL MENU--------------------------------*/
nav ul a{
	/*COLOR DEL TEXTO DE LOS ELEMENTOS DEL MENU*/
/*	color:#FFFFFF;
	font-family:arial;*/
}

nav ul li{

/*border: 3px rgba(255,93,177,1);*/
	/*COLOR DE FONDO DE CADA CUADRO DEL MENU*/
/*	background: #006AFF;*/
	
	/*TAMAÑO DE LETRA Y OTROS FORMATOS DEL TEXTO*/
/*	font-size:16px;*/
/*	font-weight:bold;*/

	
	/*ALTURA DE LOS CUADROS DEL MENU*/
/*	height:40px;*/
	
	/*ANCHO DE LOS CUADROS DEL MENU, SE COLOCA EN PORCENTAJE PARA QUE SE DITRIBUYA DE MANERA UNIFORME
	SEGUN EL ANCHO DE LA PANTALLA DONDE SE VEA LA PAGINA*/
/*	width:12%;*/
	
	/*ALINEACION DEL TEXTO DENTRO DE LOS CUADROS DEL MENU*/
/*	vertical-align: top;*/
/*	text-align:center;*/
	
	/*ESTOS VALORES SOLO DEBE CAMBIARLOS SI TIENE LOS CONOCIMIENTOS NECESARIOS*/	
/*	box-sizing:border-box;*/
	display:inline-block;
/*	padding:8px;*/
	opacity: 0.8;
	/*imagen de fondo*/
	/*background-image:url(../v1001/001002/fl.png);
	background-size:cover;
	background-repeat: no-repeat;*/
}
/*propiedad de las imagenes del menu de navegacion*/
nav ul li img{
	/*width:80%;*/
}

/******************************************************************************************************/
.TransformDemoDiv {
    margin: 5px 25px;
    padding:1px;
    width: 75%;
    height: 70px;
    font-family:arial;
    text-align: center;
    /*vertical-align: middle;*/
    float: left;
    font-size:16px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
 
    margin-right:auto;
}

.TransformSkewY25 {
        transition: 1s ease;
    -ms-transform: skewY(25deg);
    -webkit-transform: skewY(25deg);
    -moz-transform: skewY(25deg);
    -o-transform: skewY(25deg);
    transform: skewY(25deg);
 /*codigo para el reflejo de imagen inferior*/
     -webkit-box-reflect: below -25px
     -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));
}

.TransformDemoDivTransformed0 {
background: rgba(122,122,122,1);
background: -moz-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(99,99,99,1) 0%, rgba(105,105,105,1) 86%, rgba(110,110,110,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(122,122,122,1)), color-stop(0%, rgba(99,99,99,1)), color-stop(86%, rgba(105,105,105,1)), color-stop(100%, rgba(110,110,110,1)));
background: -webkit-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(99,99,99,1) 0%, rgba(105,105,105,1) 86%, rgba(110,110,110,1) 100%);
background: -o-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(99,99,99,1) 0%, rgba(105,105,105,1) 86%, rgba(110,110,110,1) 100%);
background: -ms-linear-gradient(top, rgba(122,122,122,1) 0%, rgba(99,99,99,1) 0%, rgba(105,105,105,1) 86%, rgba(110,110,110,1) 100%);
background: linear-gradient(to bottom, rgba(122,122,122,1) 0%, rgba(99,99,99,1) 0%, rgba(105,105,105,1) 86%, rgba(110,110,110,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#6e6e6e', GradientType=0 );
    color: #FFF;
        border: 1px outset rgba(153,153,153,1);;
}

.TransformDemoDivTransformed2 {
    background-color: #006AFF;
    color: #FFF;
        border: 1px outset #006AFF;
}

.TransformDemoDivTransformed4 {
    background-color: #9FD300;
    color: #FFF;
        border: 1px outset #9FD300;
}

.TransformDemoDivTransformed3 {
    background-color: #D7AF00;
    color: #FFF;
        border: 1px outset #D7AF00;
}

.TransformDemoDivTransformed1 {
    background-color: #E32C00;
    color: #FFF;
    border: 1px outset #E32C00;
}

.TransformSkewY25:hover{
    transition: 1s ease;
    width: 80%;
    height: 75px;
      -ms-transform: skewY(0deg);
    -webkit-transform: skewY(0deg);
    -moz-transform: skewY(0deg);
    -o-transform: skewY(0deg);
    transform: skewY(0deg);
 /*codigo para el reflejo de imagen inferior*/
     -webkit-box-reflect: below -25px
     -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.5)));  
}

/*-----------EDITAR LAS PROPIEDADES DE LOS ELEMENTOS DEL MENU AL PASAR EL PUNTERO DEL MOUSE-----------*/
nav ul li:hover{
	
	/*COLOR DE FONDO AL PASAR EL PUNTERO DEL MOUSE*/

	
	/*ESTOS VALORES SOLO DEBE CAMBIARLOS SI TIENE LOS CONOCIMIENTOS NECESARIOS*/
	/*imagen de fondo*/
	/*background-image:url(../v1001/001002/flh.png);
	background-size:cover;
	background-repeat: no-repeat;*/
}
/*****************************************************************************************************/


/*-----------------------------CLASES DE LOS ENLACES DEL MENU DE NAVEGACION-----------------------------*/
/*-----------EDITAR LAS PROPIEDADES DEL ELEMENTO DEL MENU CUYA PAGINA SE ENCUENTRA ACTIVO---------------*/

	/*COLOR DEL TEXTO  DEL ELEMENTO DEL MENU, CUYA PAGINA ESTA ACTIVA*/
a.pagina-activa {
	color:#FFFF00;
	}
	
	/*COLOR DE FONDO DE CADA CUADRO DEL MENU EN SU PAGINA ACTIVA*/
.activado{
    margin: 5px 25px;
    padding:1px;
    width: 220px;
    height: 120px;
    font-family:arial;
    text-align: center;
    /*vertical-align: middle;*/
    float: left;
    font-size:26px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
 
    margin-right:auto;
}

.vidrio {      
    /* margin: 25px 50px;*/
    padding:0px;
  /*  width: 150px;
    height: 150px;*/
    font-family:arial;
    text-align: center;
    /*vertical-align: middle;*/
    float: left;
    font-size:20px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
 
    margin-right:auto;
    
        width:100%;
    height: 100%;
  border-radius: 0px;
  border: solid 0px rgba(255,255,255,.1);
  background: linear-gradient(-45deg, rgba(255,255,255,.2) 60%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.05) 80%, rgba(0,0,0,.1) 80%);
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,.2) 60%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.05) 80%, rgba(0,0,0,.1) 80%);
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,.2) 60%, rgba(255,255,255,.05) 60%, rgba(255,255,255,.05) 80%, rgba(0,0,0,.1) 80%);

            }
/************************************************FIN***************************************************/