* {
	margin:0;
	padding:0;
}
@font-face{
	font-family: FutureEarth;
	src: url(../fuentes/FutureEarth.ttf);
}
#principio{
}


#fondo1{
	width: 100%;
	margin-top: -38%;
}
#tec{
	font-size: 2vw;
  	font-family: FutureEarth;
  	margin-top: 4%;
  	width: 100%;


}
#tec div{
	float: left;
}
#t1{
	margin-left: 12%;
}
#t2{
	margin-left: 14%;
}
#t3{
	margin-left: 13%;
}
#t4{
	margin-left: 16%;
}

#imgTec div{
	float: left;
	margin-top: 5%;
}

#cit1{
	margin-left: 10%;
	width: 9vw;
	display: flex;
	align-items: center;
	justify-content: center;

}
#cit2{
	margin-left: 15%;
	width: 9vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
#cit3{
	margin-left: 14%;
	width: 9vw;
	display: flex;
	align-items: center;
	justify-content: center;
}
#cit4{
	margin-left: 13%;
	width: 9vw;
	display: flex;
	align-items: center;
	justify-content: center;
}




#txtIn{
	z-index: 1;
	position: relative;
}

#inicio{
	  height:auto;
	  width: 100%;
	  background-size: contain;
	  text-align: center;
	  color: white;
	  margin-top: 5%;
	}


.logos{
	width: 88%;
	height: auto;
	text-align: center;
	position: relative;
	top: -50px;
	z-index: 1;
}
#inicio h1{
	text-align: center;
	font-size: 2.6vw;
	font-family: arial;
	height: 5vw;
	padding-top: 35px;

}
#inicio pre{
	text-align: center;
	font-size: 2vw;
	font-family: arial;
	color: #A9ABAE;

}
#txt1{
	background-color: #D1D1D1;
	position: relative;
  	top: -100px;
  	height:50%;
	width: 100%;
}

#txt1 pre{
	text-align: center;
	font-size: 2vw;
	font-family: arial;
	padding-top:5%;
	padding-bottom: 3%;
}



#servicios{
	margin-top: -30px;
}

#servicios1 p{
	text-align: center;
	font-size: 3.2vw;
	font-family: arial;
	color:#018C96;
    margin-bottom: 5vw;

}

#ts{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	height: 100%;
	
}
#icono{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
}
#ts p{
	margin: 20px auto;
	width: 100%;
	font-size: 2.5vw;
	font-family: arial;
	text-align: center;
}

#ts p a{
		text-decoration: none;
		color: #898989;
}
#ts1{
	width: 23%;
	height: 100%;
	float: left;
}

#ts2{
	width: 23%;
	height: 100%;
	float: left;
	margin-left: 10%;
}
#ts3{
	width: 23%;
	height: 100%;
	float: left;
	margin-left: 10%;
}
#ts1 #txtTS p{
	padding-top:5%; 
	padding-bottom:5%;
}
#ts2 #txtTS p{
	padding-top:37%; 
	padding-bottom:37%;
}
#ts3 #txtTS p{
	padding-top:1%; 
	padding-bottom:1%;
}

#txtTS p{
	color: white;
	text-align:center; 
	font-family: arial;
	font-size: 1.2vw;
}

#txtTS{
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #018C96;	
	width: 85%;
	height: 70%;
	border: 1px solid black;
	border-radius: 30px;
	padding-right: 15px;
	padding-left: 15px;
	margin-left: auto;
	margin-right:auto;
}



#aplicaciones{
	width: 100%;
	margin-top: 4vw;
	background-color: #EFB52B;
	height: 100%;
}
#titulo_ap{
	width: 100%;
	background-color: white;
	margin-top: 2vw;
	padding-top: 2vw;
	padding-bottom: 2vw;

}
#titulo_ap p{
	text-align: center;
	font-family: arial;
	color: #EFB52B;
	font-size: 3.2vw;
	width: 100%;

}
#apli{
	width: 100%;
	height: 20vw;
}

#txt_ap pre{
	font-family: Arial;
	font-size: 1.5vw;
	color: white;
	text-align: left;
	padding-top: 5%;
	padding-bottom: 3.5%;
	padding-left: 5%;
		width: 37.5vw;
}

#img_ap{
	float: right;
	width: 37.8vw;
	height: 100%;
	text-align: right;
	vertical-align: middle;
}


#esymo{
	width: 100%;
	margin-top: 7vw;
	background-color: #0B8C96;
}

#titulo_esymo{
	width: 100%;
	background-color: white;
	padding-bottom: 20px;
}
#titulo_esymo p{
	text-align: center;
	font-family: arial;
	color: #0B8C96;
	font-size: 3.2vw;
	width: 100%;
}




#esymoCon{
	width: 85%;
	height: auto;
	display: flex;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
}

#esymoCon2{
	width: 85%;
	height: auto;
	display: flex;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: -27%;

}


#img_esymo1{
	width: 40%;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 3.6vw;
	text-align: center;
	padding-bottom: 2vw;
}

#txt_esymo1{	
	width: 50%;
	margin-top: 3.6vw;
	font-family: arial;
	font-size: 1.5vw;
	color: white;
	text-align: center;
	padding-top: 10vw
}

#txt_esymo1 pre{
	text-align: center;
	padding-bottom: 2vw;
	font-family: arial;
}
#txt_esymo1 p{
	text-align: center;
	font-size: 2vw;
	padding-bottom: 1.5vw;
}


#img_esymo2{
	width: 40%;
	padding-left: 5%;
	padding-right: 5%;
	margin-top: 3.6vw;
	text-align: center;
	padding-bottom: 2vw;
	position: relative;
	padding-top: 10vw;
}
#txt_esymo2{
	padding-top: 32%;
	width: 50%;
	font-family: arial;
	font-size: 1.5vw;
	color: white;
	text-align: center;
	height: 30%;

}
#txt_esymo2 pre{
	text-align: center;
	padding-bottom: 0vw;
	font-family: arial;

}
#txt_esymo2 p{
	text-align: center;
	font-size: 2vw;
	padding-bottom: 1.5vw;
}

#img_esymo3{
	width: 40%;
	padding-left: 5%;
	padding-right: 5%;
	text-align: center;
	padding-bottom: 5vw;
	margin-top: -13%;

}
#txt_esymo3{
	
	width: 50%;
	font-family: arial;
	font-size: 1.5vw;
	color: white;
	text-align: center;
}

#txt_esymo3 pre{
	text-align: center;
	padding-bottom: 2vw;
	font-family: arial;
}
#txt_esymo3 p{
	text-align: center;
	font-size: 2vw;
	padding-bottom: 1.5vw;
	padding-top: 5vw;
}




.floatchat{
	position:fixed;
	width:50px;
	height:50px;
	bottom:53px;
	right:60px;
    margin-bottom: 110px;
  z-index:100;
  font-family: arial;
  font-size: 15px;
}
.float:hover {
	text-decoration: none;
  
}

.float{
	position:fixed;
	padding-top: 10px;
	width:65px;
	height:55px;
	bottom:40px;
	right:40px;
    margin-bottom: 70px;
	border-radius:50px;
	text-align:center;
  	font-size:43px;
	text-decoration: none;
  z-index:100;
}
.float:hover { 
	text-decoration: none;
	background: rgba(0,0,0,0.9);
}


.floatmessenger{
	position:fixed;
	padding-top: 10px;
    float: left;
	width:65px;
	height:55px;
	bottom:40px;
	right:40px;
text-decoration: none;
	border-radius:50px;
	text-align:center;
  	font-size:43px;
  z-index:100;
}
.floatmessenger:hover {
	text-decoration: none;
    background: rgba(0,0,0,0.9);
}




































@media screen and (max-width:800px ) {
	.logos{
		width: 88%;
  		height: auto;
  		text-align: center;
  		position: relative;
  		top: -20px;
	}

	#txt1{
		background-color: #D1D1D1;
		position: relative;
	  	top: -40px;
	  	height:80px;
		width: 100%;
	}

	#txt1 pre{
		text-align: center;
		font-size: 3vw;
		font-family: arial;
		padding-top:15px;

	}
	#servicios{
		margin-top:-20px;
	}



	#ts{
		display: inline-block;
		width: 100%;
	}
	#ts p{
		font-size: 3.2vw;
	}

	#ts1{
		width: 90%;
		margin-left: 5%;
	}
	
	#ts2{
		width: 90%;
		margin-left: 5%;
	}
	#ts3{
		width: 90%;
		margin-left: 5%;
	}
	#ts1 #txtTS p{
		padding-top:5%; 
		padding-bottom:5%;
	}
	#ts2 #txtTS p{
		padding-top:5%; 
		padding-bottom:5%;
	}
	#ts3 #txtTS p{
		padding-top:5%; 
		padding-bottom:5%;
	}
	#txtTS p{
		font-size: 2.5vw;
	}
	






.floatchat{
	right: 50px;
	bottom:50px;
}

.float{
	width:50px;
	height:40px;
  	font-size:30px;
}

.floatmessenger{
	width:50px;
	height:40px;
  	font-size:30px;
}

}