#servicios {

  display: flex;

  flex-direction: row;

}

.servicios-menu {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.servicio {

  margin: 7px;

  padding: 7px;

  width: 170px;

  font-size: 1rem;

  font-weight: 600;

  letter-spacing: 1px;

  color: #F5FFFA;

  background-color: #1570b7;

  cursor: pointer;

  border-style: solid;

  border-width: 2px;

  border-radius: 20px;

  transition: .2s ease-in-out 0s;

  box-shadow: 0px 2px 7px #333333;

}

.servicio1 {

  background-color: #C10100;

}

.servicio:hover {

  transform: scale(1.2);

}





.banner {

  padding: 10px 0;

}

.banner img {

  width: 97%;

  border: none;

  box-shadow: 0px 0px 7px #333333;

  opacity: 1;

  transition: opacity 0.7s ease-in-out;

}





#servicios-movil {
  display: none;
}

.logo-maginitud {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-evenly;

}

.logo-maginitud h3 {

  font-size: 1.3rem;

  letter-spacing: 2px;

  color: #1570b7;

}

.logo-maginitud img {

  filter: drop-shadow(0px 0px 7px #333333);

}

.banner-magnitud img {

  width: 100%;

  /* width: 350px;

  height: 200px; */

  box-shadow: 0px 0px 7px #333333;

}





.flip-container-servicios1 {

  perspective: 1000px;

  width: 350px;

  height: 200px;
  
}

.flip-container-servicios {

  perspective: 1000px;

  width: 320px;

  height: 420px;

}

.flip-container-servicios:hover .flipper, .flip-container-servicios1:hover .flipper {

  transform: rotateY(-180deg);

}

.front-servicios, .back-servicios {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  backface-visibility: hidden;

}

.front-servicios {

  z-index: 2;

}

.front-servicios {

  transform: rotateY(0deg);

}

.back-servicios {

  transform: rotateX(180deg);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

}

.back-servicios {

  transform: rotateY(180deg);

}





#ventas {

  padding: 30px 0;

}

#ventas h2 {
  
  font-size: 2rem;

  letter-spacing: 2px;

  color: #333333;

  margin: 30px 0;

}

#equipos-disponibles {

  display: flex;

  align-items: center;

  justify-content: space-around;

  flex-wrap: wrap;

}

.equipo-venta {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}

.equipo-venta h3, .realizar-pedido h3 {

  font-size: 1.3rem;

  letter-spacing: 2px;

  color: #D6A301;

  margin-bottom: 20px;

}

.equipo-venta img {

  width: 270px;

  border: none;

  border-radius: 2px;

  box-shadow: 0px 0px 7px #333333;

}

.realizar-pedido {

  display: flex;

  flex-direction: column;

  align-items: center;

  row-gap: 20px;

}

.realizar-pedido a {

	padding: 10px;

	width: 200px;

	font-size: 1.2rem;

	font-weight: 500;

	color: #F5FFFA;

	text-decoration: none;

	border-radius: 50px;

	border-style: solid;

  border-width: 2px;

	border-color: #F5FFFA;

  background-color: #D6A301;

  cursor: pointer;

	transition: .2s ease-in-out 0s;

	box-shadow: 0px 0px 7px #333333;

}

.realizar-pedido a:hover {

	transform: scale(1.2);

}

#venta-promocion {

  display: flex;

  flex-direction: row;

  align-items: center;

  justify-content: center;

  column-gap: 20px;

  margin-top: 70px;

  padding: 20px 0;

  background-color: #D6A301;

  border: none;

  border-radius: 5px;

}

#venta-promocion img {

  position: absolute;

  right: 70px;

  width: 170px;

	height: 90px;

  filter: drop-shadow(0px 0px 7px #333333);

}

#venta-condiciones p {

  font-size: 1.2rem;

  color: #F5FFFA;

  font-weight: bold;

}









@media (max-width: 1500px) { 

  .servicio {

    margin: 3px;

    width: 150px;

    font-size: .9rem;

  }

}

@media (max-width: 1200px) {
    
  body {
    background-color: #f3fcff;
  }

  .servicios-menu {

    display: none;

  }

  #venta-promocion img {

    display: none;

  }

}

@media (max-width: 800px) {

  #servicios {

    display: none;

  }

  #servicios-movil {

    display: flex;

    align-items: center;

    justify-content: space-around;

    flex-wrap: wrap;

    row-gap: 20px;

    margin-bottom: 70px;

  }

  .flip-container-servicios {

    width: 270px;

    height: 370px;

  }

  #ventas {

    padding: 0px;

  }

  #ventas h2 {

    font-size: 1.3rem;

  }

  .equipo-venta h3, .realizar-pedido h3 {

    font-size: 1rem;
    
  }
  
  .equipo-venta img {

    width: 240px;
  
  }

  .realizar-pedido a {

		font-size: .9rem;

		box-shadow: 0px 0px 7px #333333;

	}

  #venta-condiciones p {

    font-size: .9rem;

  }
}