/* CSS Document */

* {

	padding:0;
	margin:0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
	
.overlay-container {
		display: none;
		content: " ";
		height: 100%;
		width: 100%;
		position: fixed;
		top:0;
		left:0;
		background: -moz-radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
		background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9)));
		background: -webkit-radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
		background: -o-radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
		background: -ms-radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
		background: radial-gradient(center, ellipse cover,  rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 );
		z-index:999;
	}
	
	
.window-container {
		display: inline-block;
		background: #fcfcfc;
		top:50%;
		left:50%;
		width:87%;
		max-width:900px;
		height:700px;
		max-height:700px;
		margin-left: -450px;
		margin-top: -350px;
		padding: 10px 10px;
		text-align: left;
		border-radius: 3px;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
		-webkit-transition: 0.4s ease-out;
		-moz-transition: 0.4s ease-out;
		-ms-transition: 0.4s ease-out;
		-o-transition: 0.4s ease-out;
		transition: 0.4s ease-out;
		opacity: 0;
		position:absolute;
		z-index: 1000;		
	}
	
	
.window-container-visible {
		-webkit-transform:  scale(1);
		-moz-transform:  scale(1);
		-ms-transform:  scale(1);
		transform:  scale(1);
		opacity: 1;
		z-index:1030;
	}
	
	
.prod-serv {
	width:100%;
	height:100%;
	padding:0px;
	display:inline-block;
	margin:auto;
	text-align:center;
}

.close {
			display: inline-block;
			width: 40px;
			height:40px;
			background: #999999;
			border-radius:40px;
			-moz-border-radius:40px;
			-webkit-border-radius:40px;
			color:#FFFFFF;
			padding:0px;
			font-family: 'MiNuevaFuente', Arial, Helvetica, sans-serif;
			font-size:40px;
			text-align:center;
			position:absolute;
			top:-15px;
			right:-15px;
			cursor:pointer;
			z-index:1001;
			
		
}
	
.close .icon-circle-cancel :hover {
	opacity:.85;
	cursor:pointer;
}
	


.foto {
	display:inline-block;
	text-decoration:none;
	width:57%;
	height:485px;
	max-height:485px;
	background-color:#ccc;
	padding:0;
	overflow:hidden;
	position:relative;
	float:left;
	
	
}

.foto img{
	width:100%;
}


.modelo {
	width:97%;
	height:50px;
	padding:0px;
	text-align:center;
	display:inline-block;
	font-size:30px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #999999;
	border-bottom:8px solid #28166F;
	overflow:hidden;
	position:relative;
	margin-bottom:2.5%;
}

.descripcion {
	display:inline-block;
	text-decoration:none;
	float:left;
	width:100%;
	height:auto;
	margin-top:15px;
	/*margin-bottom:7.5px;*/
	background-color:#fff;
	padding:0;
	clear:both;
	position:relative;
	text-align:center;
	
}

.listado {
	display:inline-block;
	width:40%;
	max-width:500px;
	height:auto;
	max-height:450px;
	color:#000;
	text-align: left;
	overflow-y:auto;
	position:relative;
	margin:20px 0px;
	margin-left:25px;
	padding-left:2.7%;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:20px;
	font-weight:600;
}


.tabla{
	width:100%;
	height:auto;
	max-height:150px;
	float:left;
}

.tabla img{
	width:100%;
	}

.anterior {
			display: inline-block;
			width: 50px;
			height:100px;
			background: rgba(150, 149, 148, .6);
			color:#FFFFFF;
			padding:30px 0px;
			border-radius: 20px 0px 0px 20px;
			-moz-border-radius: 20px 0px 0px 20px;
			-webkit-border-radius: 20px 0px 0px 20px;
			font-family: 'cabin', Arial, Helvetica, sans-serif;
			font-size:40px;
			text-align:center;
			position:absolute;
			bottom:300px;
			left:-60px;
			cursor:pointer;
			z-index:1001;
			text-decoration:none;
		
}

.anterior:hover {
	background: rgba(150, 149, 148, .9);
}

.siguiente {
			display: inline-block;
			width: 50px;
			height:100px;
			background: rgba(150, 149, 148, .6);
			color: #FFFFFF;
			padding:30px 0px;
			border-radius: 0px 20px 20px 0px;
			-moz-border-radius: 0px 20px 20px 0px;
			-webkit-border-radius: 0px 20px 20px 0px;
			font-family: 'cabin', Arial, Helvetica, sans-serif;
			font-size:40px;
			text-align:center;
			position:absolute;
			bottom:300px;
			right:-60px;
			cursor:pointer;
			z-index:1001;
}

.siguiente:hover {
	background: rgba(150, 149, 148, .9);
}


@media (max-width: 480px) {

.window-container {
		display: inline-block;
		background: #fcfcfc;
		top:25%;
		left:50%;
		width:100%;
		max-width:480px;
		height:auto;
		max-height:700px;
		margin-left: -225px;
		margin-top: -175px;
		padding: 10px 10px;
		text-align: left;
		border-radius: 3px;
		box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
		-webkit-transition: 0.4s ease-out;
		-moz-transition: 0.4s ease-out;
		-ms-transition: 0.4s ease-out;
		-o-transition: 0.4s ease-out;
		transition: 0.4s ease-out;
		opacity: 0;
		position:absolute;
		z-index: 1000;		
	}

.window-container-visible {
		transform:  scale(.7);
		opacity: 1;
		z-index:1030;
		text-align:center;	
	}
	
.modelo {
	
	font-size:1.5rem;
	
}
	
	.foto {
	display:inline-block;
	text-decoration:none;
	width:90%;
	height:auto;
	max-height:300px;
	background-color:#ccc;
	padding:0;
	overflow:hidden;
	position:relative;
	float:left;
	margin:0 auto;
	
	
}

.foto img{
	width:100%;
}

.listado {
	display:inline-block;
	width:100%;
	max-width:450px;
	height:auto;
	max-height:200px;
	color:#000;
	text-align: left;
	overflow-y:auto;
	position:relative;
	margin:20px 0px;
	float:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.2rem;
	font-weight:600;
}

.listado ul li {

}