#servicios{
    width:auto;
height:auto;
    border: 0px solid #222222;
    border-radius: 16px;

    background:#808080;

}

#servicios header{
    width: 100%;
    font-family: arial;
    color: #FFFFFF;
    font-size: 18;
    text-align: center;
padding:10px;
}

h1{
	color:#fff;
	text-align:center;
}

.portafolio {
width:90%;
margin:auto;
list-style:none;
padding:20px;
box-sizing:border-box;
display:flex;
flex-wrap:wrap;
justify-content:space-around;
}

.portafolio li{
margin:5px;
}

.portafolio img {
width:300px;
height:200px;
    border-radius: 16px;
}


/*efectos al pasar el mouse sobre la imagen de los articulos */
.portafolio img:hover{
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
}

/*estilos del modal*/

.modalp{
display:none;
}

.modalp:target{
display:block;
position:fixed;
background:rgba(0,0,0,0.8);
top:0;
left:0;
width:100%;
height:100%;
}

.modalp h3{
color:#fff;
font-size:30px;
text-align:center;
margin:15px 0;
}

.imagenp{
width:100%;
display:flex;
justify-content:center;
align-items:center;
}

.imagenp a{
color:#fff;
font-size:40px;
text-decoration:none;
margin:0 10px;
}

.modalp p{
color:#fff;
font-size:24px;
margin:0 10px;
}

.imagenp p{
color:#fff;
font-size:20px;
margin:0 10px;
}

.imagenp a:nth-child(2){
margin:0;
height:80%;
flex-shrink:2;
}

.imagenp img{
width:25%;
height:auto;
max-width:25%;
border:1px solid #fff;
box-sizing:border-box;
}

.cerrarp{
/*display:block;*/
float:right;
background:#fff;
width:25px;
height:25px;
margin:auto;
text-align:center;
text-decoration: none;
font-size:25px;
color:#000;
padding:5px;
border-radius:50%;
line-height:25px;
margin-right: 20px;
}

.outer {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 999;
}

.inner {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
background:rgba(0,0,0,0.8);
/*    background: #ffffff;*/
    border: 2px solid #222222;
    border-radius: 16px;
    padding: 16px;
}

#botoncotizador{
width:auto;
height:auto;
    border: 2px solid #222222;
    border-radius: 16px;
padding: 1em 3em;
 margin: 1em 25%;

background: rgba(150,204,0,1);
background: -moz-linear-gradient(-45deg, rgba(150,204,0,1) 0%, rgba(87,159,20,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(150,204,0,1)), color-stop(100%, rgba(87,159,20,1)));
background: -webkit-linear-gradient(-45deg, rgba(150,204,0,1) 0%, rgba(87,159,20,1) 100%);
background: -o-linear-gradient(-45deg, rgba(150,204,0,1) 0%, rgba(87,159,20,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(150,204,0,1) 0%, rgba(87,159,20,1) 100%);
background: linear-gradient(135deg, rgba(150,204,0,1) 0%, rgba(87,159,20,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96cc00', endColorstr='#579f14', GradientType=1 );
}

#botoncotizador:hover{

	/*----COLOR DEL BOTON AL PASAR EL MOUSE----*/	
	background:#fff;

	/*----CURSOR DEL BOTON AL PASAR EL MOUSE----*/	
	cursor:pointer;
	
	/*----COLOR DEL TEXTO AL PASAR EL MOUSE----*/
	color:#00CC66;
}