.services {
background: #ffffff;
margin-top: .5em;
margin-bottom: 8em;
width: 100%;
height: 100%; }
@media screen and (min-width: 768px) {
.services {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-top: 3em; } }
@media screen and (min-width: 1201px) {
.services {
margin-left: -1em; } }
@media screen and (min-width: 1300px) {
.services {
margin: auto; } }
.service-imagenes {
top: 1em;
border-radius: 50%;
position: relative;
height: 280px;
width: 311px;
margin: auto;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
color: #ffffff;
margin-bottom: 1em;
font-size: .8em;
cursor: pointer; }
.service-imagenes__title {
margin-top: -9em; }
@media screen and (min-width: 933px) {
.service-imagenes {
margin-left: 7em; } }
@media screen and (min-width: 1201px) {
.service-imagenes {
margin-left: 14em; } }
@media screen and (min-width: 1300px) {
.service-imagenes {
margin: auto; } }
.service-imagenes:nth-of-type(1):after {
background: url("img-seg.png") center center no-repeat; }
.service-imagenes:nth-of-type(2):after {
background: url("img-diseño.png") center center no-repeat; }
.service-imagenes:nth-of-type(3):after {
background: url("img-compu.png") center center no-repeat; }
.service-imagenes:nth-of-type(4):after {
background: url("img-tel.png") center center no-repeat; }
.seguridad {
background: url("sistemaseg.png") no-repeat center steelblue; }
.paginas {
background: url("diseñoweb.png") no-repeat center #E42D40;
color: #ffffff; }
.computacion {
background: url("tecnicopc.png") no-repeat center steelblue; }
.telefonico {
background: url("tecnicotel.png") no-repeat center #E42D40;
color: #ffffff; }
.service-imagenes:hover:after {
opacity: 1;
transform: scale(1);
border: 1px solid black; }
.service-imagenes:after {
content: "";
position: absolute;
overflow: hidden;
border-radius: 50%;
width: 100%;
height: 100%;
transition: all 1s;
transform: scale(0);
opacity: 0; }