/*trabajossssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss webbbbbbbbbbbbbbbbbbbbb*/
#diseñoweb{ width: 100%;
            background: #fff;
            position: relative;
            padding: 30px 20px 50px 20px}

/*nubeeeeeeeeeeeeeee*/
.diseñoweb-nube{ width: 100%;
                 background: url(../img/planes/nubes.png);
                 background-position: center center;
                 position: absolute;
                 top: -100px;
                 left: 0;
                 height: 100px;}


/*diseño webbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb*/

/*tituloooooooo*/
.diseñoweb-titulo{ width: 100%;
				   margin: 0px 0px 30px 0px;
				   text-align: center;}

.diseñoweb-titulo h1{ font-family: Raleway;
					  font-weight: 500;
					  font-size: 30px;
					  color:#222;
					  margin: 0px 0px 20px 0px;
					  }

.diseñoweb-titulo h1 span{ background: #247dff;
						   position: relative;
						   font-weight: 700;
						   color: #fff;
						   border-radius: 50px;
						   padding: 5px 20px 5px 20px;
						   display: inline-block;}
/*mascota en titulooo*/
.diseñoweb-titulo h1 span img{ position: absolute;
						       top:-115px;
						       left: 50%;
						       transform: translateX(-50%);
						       width: 100%;
						       max-width: 120px;}


.diseñoweb-titulo p{  width: 60%;
					  font-family: Raleway;
					  font-weight: 300;
					  font-size: 14px;
					  color:#222;
					  margin: 0 auto;
					  text-align: justify;}

/* trabajosssssss */
.diseñoweb-trabajos{ display: grid;
					 grid-gap: 20px;
					 grid-template-columns: repeat(3,1fr);
					 margin: 0px 0px 0px 0px}

.diseñoweb-trabajos-item{ text-align: center;
                          margin: 0px 0px 30px 0px;
                          position: relative;}

.diseñoweb-trabajos-item img{ width: 100%;
							  max-width: 300px;
							  border-radius: 7px;
							  box-shadow: 2px 2px 2px 0px #ddd;
							  transition: 0.2s}

.diseñoweb-trabajos-item h1{ font-family: Raleway;
							 font-size: 17px;
							 color: #247dff;
							 margin: 10px 0px 0px 0px; }

.diseñoweb-trabajos-item:hover img{ transform: scale(1.05); }

/*iconooo*/
.diseñoweb-trabajos-icono{ width: 0px;
						   height: 0px;
						   text-decoration: none;
						   background-color: #247dff;
						   position: absolute;
						   top: 50%;
						   left: 50%;
						   transform: translateX(-50%)
						   translateY(-50%);
						   opacity:0;
						   border-radius: 50%;
						   transition: 0.2s}

.diseñoweb-trabajos-item:hover .diseñoweb-trabajos-icono{ width: 50px;
													      height: 50px;
													      opacity: 1}

.diseñoweb-trabajos-icono span{ color: #fff;
								position: absolute;
								top: 50%;
								left: 505;
								transform: translateX(-50%)
								translateY(-50%);}