html{
  overflow: scroll;
  background-color: #0088a9;
}






/*MENU NAVEGACION*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 30px 10%;
    background-color: #24252a;
  }
  
  .logo {
    margin-right: auto;
    margin-bottom: -20px;
  }
  
  .nav__links {
    list-style: none;
    display: flex;
  }
  
  .nav__links a,
  .cta,
  .overlay__content a {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    color: #edf0f1;
    text-decoration: none;
  }
  
  .nav__links li {
    padding: 0px 20px;
  }
  
  .nav__links li a {
    transition: all 0.3s ease 0s;
  }
  
  .nav__links li a:hover {
    color: #0088a9;
  }
  
  .cta {
    margin-left: 20px;
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
  }
  
  .cta:hover {
    background-color: rgba(0, 136, 169, 0.8);
  }
  body{
	margin: 0;
	padding: 0;
	background-color: #0e6cc4;
	overflow-x:hidden;
	overflow-y:hidden;
}













/*FONDO*/

.box {
	position: fixed;
	top: 0;
	transform: rotate(80deg);
	left: 0;
}

.wave {
  position: fixed;
  top: 0;
  left: 0;
  opacity: .4;
  position: absolute;
  top: 3%;
  left: 10%;
  background: #0af;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  transform-origin: 50% 48%;
  border-radius: 43%;
  animation: drift 7000ms infinite linear;
  -webkit-animation: drift 7000ms infinite linear;
}

.wave.-three {
  animation: drift 7500ms infinite linear;
	position: fixed;
	background-color: #77daff;
}

.wave.-two {
  animation: drift 3000ms infinite linear;
  opacity: .1;
  background: black;
	position: fixed;
}

.box:after {
  content: '';
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  transform: translate3d(0, 0, 0);
}

/*KEYFRAME ANIMACION OLAS*/
@keyframes drift {
  from { transform: rotate(0deg); }
  from { transform: rotate(360deg); }
}



.contain {
	animation-delay: 4s;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  background: #25a7d7;
  background: -webkit-linear-gradient(#25a7d7, #2962FF);
  background: linear-gradient(#25a7d7, #25a7d7);
}

.icon {
  width: 100px;
  height: 100px;
  margin: 0 5px;
}

/*Animacion*/
.icon:nth-child(2) img {-webkit-animation-delay: 0.2s;animation-delay: 0.2s}
.icon:nth-child(3) img {-webkit-animation-delay: 0.3s;animation-delay: 0.3s}
.icon:nth-child(4) img {-webkit-animation-delay: 0.4s;animation-delay: 0.4s}

.icon img {
  -webkit-animation: anim 2s ease infinite;
  animation: anim 2s ease infinite;
  -webkit-transform: scale(0,0) rotateZ(180deg);
  transform: scale(0,0) rotateZ(180deg);
}



.caja{
  display: flex;
  justify-content: right;
  flex-direction: row;
}









/*BREVE DESCRIPCION*/
.sobrenosotros{
  margin-top: 5%;
  margin-left: 0%;
  margin-right: 20%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  width: 350px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}

.sobrenosotros:hover{
  color: white;
}
.sobrenosotros p{
  margin: 0;
}

.sobrenosotros::before{
  content: "";
  position: absolute;
  top: -75px;
  left: -45px;
  z-index: -1;
  background: linear-gradient(
    to right, #3bd9d9, #36a6bf
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
  transition: 0.6s;
}
.sobrenosotros:hover::before{
  transform: scale(4.5);
}








/*ARTICULOS*/
.ofertas{
  position: relative;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: transparent;
  border-radius: 6px;
  color: black;
  padding: 20px;
  width: 800px;
  height:670px;
  overflow: hidden;
  margin-left: 0%;
  margin-top: 5%;
  font-family: "Montserrat", sans-serif;
}










/*CARTAS*/
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
  margin-top: 5%;
  
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 16px;
}
.flip-card-front {
  background-image: linear-gradient(45deg, #0af, #0af);
}
.flip-card-front img {
  width: 220px;
  margin-top: 1rem;
}
.flip-card-back {
  background-image: linear-gradient(315deg, #0af, #0af);
  color: #ffffff;
  transform: rotateY(180deg);
}
.flip-card-back img {
  width: 140px;
  margin-top: 1rem;
}
.flip-card-back h3 {
  margin-bottom: 0.3rem;
}
.flip-card-back h1 {
  margin: 0;
}

















/*INFORMACIÓN*/
.caja2{
  position: relative;
	width: 100%;
	height: 100%;
  margin-left: 0%;
  margin-bottom: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 100px;
  font-family: "Montserrat", sans-serif;
}
.general{
  margin-top: 5%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 36%;
  width: 400px;
  height: 300px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  
}
.general:hover{
  color: white;
}
.general p{
  margin: 0;
}

.general::before{
  content: "";
  position: absolute;
  top: -75px;
  left: -45px;
  z-index: -1;
  background: linear-gradient(
    to right, #3bd9d9, #36a6bf
  );
  border-radius: 50%;
  width: 200px;
  height: 200px;
  transition: 0.6s;
}
.general:hover::before{
  transform: scale(4.5);
}

.mine{
  margin-top: 5%;
  margin-left: 0%;
  margin-right: 13%;
  border-radius: 6px;
  color: black;
  padding: 20px;
  width: 600px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}
.server{
  background-color: white;
  border-radius: 6px;
  padding: 20px;
}

.services{
  background-color: white;
  border-radius: 6px;
  padding: 20px;
  margin-top: 2%;
}



.button{
  background: transparent;
  color: #3bd9d9;
  font-weight: 200;
  font-size: 14px;
  text-transform: uppercase;
  margin-top: 20px;
  padding: 16px 16px;
  border: 2px solid #3bd9d9;
  border-radius: 32px;
  transform: translate(0);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
.button a{
  text-decoration: none;
  color: #3bd9d9;
}





.noticia1{
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 36%;
  width: 400px;
  height: 300px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  
}
.noticia2{
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 36%;
  width: 400px;
  height: 300px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  
}
.noticia3{
  margin-top: 5%;
  margin-left: 10%;
  margin-right: 10%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 36%;
  width: 400px;
  height: 300px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
  
}





/*COMPRAS*/
.buy{
  display: flex;
	justify-content: center;
	align-items: center;
  flex-direction: row;
}
.buy1{
  margin-top: 5%;
  margin-left: 5%;
  margin-right: 5%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 13%;
  width: 600px;
  height: 0px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}
.buy2{
  margin-top: 5%;
  margin-left: 0%;
  margin-right: 5%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 13%;
  width: 600px;
  height: 0px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}
.buy3{
  margin-top: 5%;
  margin-left: 0%;
  margin-right: 5%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 13%;
  width: 600px;
  height: 0px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}
.buyserver{
  padding-left: 40px;
}

.caja3{
  margin-top: 5%;
  margin-left: 43%;
  margin-bottom: 30px;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  padding-bottom: 10%;
  width: 300px;
  height: 275px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}
.configserver{
  display: flex;
  flex-direction: column;  
}
select{
  flex: 1;
  padding: 0 2px;
  cursor: pointer;
  background-color: white;
  border-color:#0088a9;
  border-width: 4px;
}

#cpu{
  margin-bottom: 8%;
}
#ram{
  margin-bottom: 8%;
}
#capacidad{
  margin-bottom: 8%;
}






/*FOTOS*/
.photo1{
  display: flex;
  padding: 10px;
  margin-left: 10%;
  height: 300px;
  background-color: white;
  font-family: "Montserrat", sans-serif;
}
.photo2{
  display: flex;
  padding: 5px;
  margin-left: 8%;
  margin-right: 10%;
  height: 300px;
  background-color: white;
  font-family: "Montserrat", sans-serif;
}
.photos{
  margin-top: 10%;
  display: flex;
  margin-bottom: 381px;
}
.descriptionphoto{
  padding-left: 20px;
}















/*politica*/
.politica{
  margin-top: 5%;
  margin-left: 0%;
  margin-right: 22%;
  background-color: white;
  border-radius: 6px;
  color: black;
  padding: 20px;
  width: 1050px;
  overflow: hidden;
  transition: 0.6s;
  transform: translate(0);
  font-weight: 400;
  font-family: "Montserrat", sans-serif;
}





/*CONTACTO FORMULARIO*/
.container{
	position: relative;
	width: 100%;
	height: 100%;
  margin-left: 0%;
  margin-bottom: 161px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 100px;
  font-family: "Montserrat", sans-serif;
}

.container:after{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-size: cover;
	filter: blur(50px);
	z-index: -1;
}
.contact-box{
	max-width: 850px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #fff;
	box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
}

.left{
	background: url("img/contacto2.png") no-repeat center;
	background-size: cover;
	height: 100%;
}

.right{
	padding: 25px 40px;
}

h2{
	position: relative;
	padding: 0 0 10px;
	margin-bottom: 10px;
}

h2:after{
	content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 4px;
    width: 50px;
    border-radius: 2px;
    background-color: #0af;
}

.field{
	width: 100%;
	border: 2px solid rgba(0, 0, 0, 0);
	outline: none;
	background-color: rgba(230, 230, 230, 0.6);
	padding: 0.5rem 1rem;
	font-size: 1.1rem;
	margin-bottom: 22px;
	transition: .3s;
}

.field:hover{
	background-color: rgba(0, 0, 0, 0.1);
}

textarea{
	min-height: 150px;
}

.btn{
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: #0af;
	color: #fff;
	font-size: 1.1rem;
	border: none;
	outline: none;
	cursor: pointer;
	transition: .3s;
}

.btn:hover{
    background-color: #394fc9;
}

.field:focus{
    border: 2px solid rgba(30,85,250,0.47);
    background-color: #fff;
}




/*footer*/
footer{
  background-color: #25a7d7;
  height: auto;
  width: 100vm;
  font-family: "Montserrat", sans-serif;
  margin-top: 30px;
  color: white;
}
.footer-content{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.footer-content h3{
  font-size: 1.8rem;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 3rem;
}
.footer-content p{
  max-width: 500px;
  margin: 10px auto;
  line-height: 28px;
  font-size: 14px;
}
.socials{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 3rem 0;
}
.socials li{
  margin: 0 10px;
}
.socials a{
  text-decoration: none;
  color: #edf0f1;
}
.socials a i{
  font-size: 1.1rem;
  transition: color .4s ease;
}
.socials a:hover i{
  color: #0af;
}
.footer-bottom{
  background: #24252A;
  width: 100vw;
  padding: 20px 0;
  text-align: center;
  margin-top: -40px;
}
.footer-bottom p{
  font-size: 14px;
  word-spacing: 2px;
  text-transform: capitalize;
}