/*Empieza secciones generales*/
body{
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	background-color: #e0e0e0;
}
div.Sello{
	float: right;
	text-align: center;
	color: yellow;
	font-size: 1vw;
	padding: 6vh 6vh 0vh 0vh;
}

@media only screen and (max-width: 414px){
	div.Sello{
		font-size: 3vw;
	}
}

div.Sello img{
	width: 6vw;
}

@media only screen and (max-width: 414px){
	div.Sello img{
		width: 10vw;
	}
}

div.Redes{
	padding: 0vh 1vh 2.4vh 6vh;
	text-align: right;
	position: sticky;
}
@media only screen and (max-width: 414px){
	div.Redes{
		padding: 4vh 0vh 10.1vh 2vh;
	}
}

div.Redes img{
	width: 6vh;
	padding-right: 2vh;
}

@media only screen and (max-width: 414px){
	div.Redes img{
		width: 4vh;
		padding-right: 1vh;
	}
}

div#RedesIzquierdo{
	text-align: left;
}

ol, ul {
	list-style: none;
	padding-left: 0;
}
div#ContenedorTitulo{
	width: 100%;
}

div.ContenedorTitulo div.Titulo{
    text-align: center;
    width: 80vw;
    padding: 15vh 0vh 0vh 10vw;
}
div.ContenedorTitulo div.Titulo{
    text-align: center;
    width: 80vw;
    padding: 15vh 0vh 0vh 10vw;
}
div.Titulo img{
	width: 30vw;
	padding-left: 2vw;
}

@media only screen and (max-width: 414px){
	div.Titulo img{
		width: 75vw;
		padding-top: 4vh;
	}
}
/*Termina secciones generales*/

/*Empieza sección inicial*/
section#Inicial{
	width: 100%;
	height: 100vh;
	background-image: url(../img/mindset.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}

section#Inicial div#Logo{
	text-align: right;
	padding: 4vh 5vh 0vh 0vh;
}

section#Inicial div#Logo img{
	width: 18vw;
}

@media only screen and (max-width: 414px){
	section#Inicial div#Logo img{
		width: 30vw;
	}
}

section#Inicial div#typewriter{
	margin: 0;
	padding: 0;
	color: white;
	font-size: 5vw;
	padding: 18vh 0vh 0vh 5vh;
	text-align: center;
}

@media only screen and (max-width: 414px){
	section#Inicial div#typewriter{
		font-size: 10vw;
		padding: 30vh 0vh 0vh 0vh;
	}
}

section#Inicial div#Scroll{
	text-align: center;
	color: white;
	padding: 34vh 18vh 0vh 130vh;
	font-size: 2vh;
	margin: 0;
}

@media only screen and (max-width: 1024px){
	section#Inicial div#Scroll{
		padding: 0;
	}
}

@media only screen and (max-width: 414px){
	section#Inicial div#Scroll{
		padding: 20vh 0vw 10vh 37vw;
	}
}

section#Inicial div#Scroll i.fa-angle-double-down{
	font-size: 4vh;
	padding-top: 1vh;
}
/*Termina sección inicial*/

/*Empieza sección nativos digitales*/
section#NativosDigitales{
	background-color: black;
	color: white;
	width: 100%;
	height: 100vh;
}

section#NativosDigitales div#TextoNativos{
	width: 50vw;
	text-align: center;
	margin-left: 50vh;
	font-size: 1.2vw;
	padding-top: 6vh;
}

@media only screen and (max-width: 1024px){
	section#NativosDigitales div#TextoNativos{
		margin-left: 6vw;
		width: 87vw;
		font-size: 4vw;
	}
}

section#NativosDigitales div#TextoNativos p{
	border: 0;
	margin: 0;
}

section#NativosDigitales div#Fotos{
	width: 80%;
	height: 41.3vh;
	margin-top: 4vh;
}

@media only screen and (max-width: 414px){
	section#NativosDigitales div#Fotos{
		height: 32.7vh;
	}
}

section#NativosDigitales div#Fotos img.Gadgets{
	width: 20vw;
	padding: 0;
	margin: 0;
}

section#NativosDigitales div#Fotos div.Move{
	position: absolute;
}

@media only screen and (max-width: 1024px){
	section#NativosDigitales div#Fotos div.Move{
		display: none;
	}
}

section#NativosDigitales div#Fotos div#DivMovimiento1{
	left: 20vw;
}
section#NativosDigitales div#Fotos div#DivMovimiento2{
	left: 32vw;
}
section#NativosDigitales div#Fotos div#DivMovimiento3{
	left: 49vw;
}
section#NativosDigitales div#Fotos div#DivMovimiento4{
	left: 61vw;
}
/*Termina sección nativos digitales*/

/*Empieza sección nosotros*/
section#Nosotros{
	background-color: white;
	width: 100%;
	height: 100vh;
	background-image: url(../img/Iphone2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
}
@media only screen and (max-width: 414px){
	section#Nosotros div.ContenedorTitulo div#TituloNosotros img{
		padding-top: 0;
		margin-top: -5vh;
	}
}
section#Nosotros div#TextoNosotros{
	width: 55vw;
    text-align: center;
    margin-left: 6vh;
    font-size: 1.2vw;
    padding-top: 6vh;
    color: greenyellow;
}

@media only screen and (max-width: 414px){
	section#Nosotros div#TextoNosotros{
		margin-left: 6vw;
		width: 87vw;
		font-size: 4vw;
	}
}

section#Nosotros div#TextoNosotros p{
	border: 0;
	margin: 0;
}

section#Nosotros div#Porcentajes{
	width: 30%;
	height: 36.1vh;
	padding-left: 14vw;
}

@media only screen and (max-width: 414px){
	section#Nosotros div#Porcentajes{
		width: 82%;
		padding-left: 5vw;
		height: 25.6vh;
	}
}

section#Nosotros div#Porcentajes div#PrimerPorcentaje{
	padding-top: 7vh;
}

@media only screen and (max-width: 414px){
	section#Nosotros div#Porcentajes div#PrimerPorcentaje{
		padding-top: 1vh;
	}
}

section#Nosotros div#Porcentajes div.PorcentajeSeparado{
	padding-top: 1vh;
}
/*Termina sección nosotros*/

/*Empieza sección cómo trabajamos*/
section#ComoTrabajamos{
	background-image: url(../img/Trabajamos.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
}

@media only screen and (max-width: 1024px){
	section#ComoTrabajamos{
		background-color: lightblue;
		background-image: none;
	}
}

section#ComoTrabajamos div#TextoTrabajamos{
	width: 87%;
    height: 64vh;
	padding: 27vh 0 0 0;
	text-align: right;
	float: right;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos{
		padding: 0;
		width: 100%;
		float: none;
		padding-bottom: 18vh;
	}
}

section#ComoTrabajamos div.ContenedorTitulo div#SelloGrande{
	padding-right: 5vh
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1{
	padding: 0;
	text-align: right;
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 img{
	width: 30vw;
	padding-bottom: 5vh;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 img{
		width: 76vw;
		padding-top: 8vh;
		padding-right: 11vw;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div#TextosEspeciales{
	height: 12vh;
	padding-left: 8vw;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div#TextosEspeciales{
		padding-left: 0;
	}
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div.TextosEspecialesMovil{
		padding-top: 24vh;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#uno{
	color: grey;
	font-size: 3vw;
	border: 0;
	padding: 0;
	width: 53vw;
	float: left;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#uno{
		font-size: 8vw;
		width: 48vw;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dos{
	font-size: 2.5vw;
	color: blue;
	border: 0;
	padding: 2vh 0 0 0vw;
	font-weight: bold;
	width: 23vw;
	float: right;
	text-align: left;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dos{
		font-size: 6vw;
		width: 48vw;
		padding: 0;
		padding-top: 1.5vh;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dosdos{
	font-size: 2.227vw;
	color: blue;
	border: 0;
	padding: 3vh 0 0 0vw;
	font-weight: bold;
	width: 23vw;
	float: right;
	text-align: left;
	height: 7vh;
}
@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dosdos{
		font-size: 6vw;
		padding: 0;
		width: 50vw;
	}
}
section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div#TextoTexto{
	text-align: justify;
	float: right;
	width: 34vw;
}
@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div#TextoTexto{
		float: none;
		width: 90vw;
		padding-left: 5vw;
		padding-top: 3vh;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dosdosdos{
	font-size: 2.227vw;
	color: blue;
	border: 0;
	padding: 3vh 0 0 0vw;
	font-weight: bold;
	width: 23vw;
	float: right;
	text-align: left;
	height: 7vh;
}

@media only screen and (max-width: 414px){
	section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 p#dosdosdos{
		font-size: 5vw;
		padding: 0;
		width: 50vw;
		padding-top: 1vh;
	}
}

section#ComoTrabajamos div#TextoTrabajamos div.TextoTrabajamos1 div#TextoTexto p#tres{
	color: yellow;
}
/*Termina sección cómo trabajamos*/

/*Empieza sección monitoreo*/
section#Monitoreo{
	width: 100%;
	height: 100vh;
	background-image: url(../img/Ipad.png);
	background-size: cover;
	background-repeat: no-repeat;
}
section#Monitoreo div.ContenedorTitulo div#SelloGrandePlus{
	padding-right: 3vh;
}
section#Monitoreo div.ContenedorTitulo div.Titulo img{
	width: 35vw;
}
section#Monitoreo div.ContenedorTitulo div#TituloMonitoreo{
	padding: 40vh 0vw 0vh 0vw;
	width: 45vw;
}
section#Monitoreo div#TextoMonitoreo{
	width: 35vw;
	padding: 3vh 0vw 22vh 6vw;
}
section#Monitoreo div#TextoMonitoreo span{
	padding: 0;
	margin: 0;
	width: 2vw;
}
/*Termina sección monitoreo*/

/*Empieza sección áreas de la empresa con fun facts*/
section#Areas{
	width: 100%;
	height: 100vh;
	background-image: url(../img/Ipad.png);
	background-repeat: no-repeat;
	background-size: cover;
}
section#Areas div.ContenedorTitulo div#TituloAreas{
	color: yellow;
	font-size: 3vw;
	padding: 6vh 0vw 0vh 7vw;
}
@media only screen and (max-width: 414px){
	section#Areas div.ContenedorTitulo div#TituloAreas{
		padding: 9vh 0vw 0vh 7vw;
		font-size: 4vw;
		margin-left: -6vw;
	}
}
section#Areas div#AreasMitad{
	width: 74%;
    height: 27vh;
    margin-left: 11vw;
    margin-top: 8vh;
}
@media only screen and (max-width: 414px){
	section#Areas div#AreasMitad{
		width: 100%;
		margin-left: 0vw;
		padding-bottom: 2vh;
		margin-top: 10vh;
	}
}
section#Areas div#AreasMitad div#RowAreas{
	height: 100%;
}
section#Areas div#AreasMitad div#RowAreas div.ColumnAreas{
	width: 19.94651%;
	height: 63%;
	float: left;
	text-align: center;
	font-size: 1vw;
	padding-top: 10vh;
}
@media only screen and (max-width: 414px){
	section#Areas div#AreasMitad div#RowAreas div.ColumnAreas{
		padding-top: 0vh;
		width: 50%;
		font-size: 4vw;
		height: 40%;
	}
}
section#Areas div#AreasMitad div#RowAreas div.ColumnAreas i{
	color: orange;
	font-size: 3vw;
}
@media only screen and (max-width: 414px){
	section#Areas div#AreasMitad div#RowAreas div.ColumnAreas i{
		font-size: 8vw;
	}
}
@media only screen and (max-width: 414px){
	section#Areas div.container{
		height: 31.7vh;
	}
}
section#Areas div.container div#Contadores{
	width: 100%;
	padding-top: 10vh;
}
@media only screen and (max-width: 414px){
	section#Areas div.container div#Contadores{
		padding-top: 7vh;
	}
}
section#Areas div.container div#Contadores div#RowContadores{
	height: 100%;
}
section#Areas div.container div#Contadores div#RowContadores div#ColumnContador{
	width: 25%;
	float: left;
	text-align: center;
	height: 100%;
}
@media only screen and (max-width: 414px){
	section#Areas div.container div#Contadores div#RowContadores div#ColumnContador{
		width: 50%;
	}
}
section#Areas div.container div#Contadores div#RowContadores div#ColumnContador div.Contador{
	font-size: 4vw;
	padding-bottom: 3vh;
	font-weight: bold;
	padding-top: 8vh;
}
@media only screen and (max-width: 414px){
	section#Areas div.container div#Contadores div#RowContadores div#ColumnContador div.Contador{
		padding-bottom: 0.5vh;
		padding-top: 0vh;
		font-size: 8vw;
	}
}
section#Areas div.container div#Contadores div#RowContadores div#ColumnContador div.TituloContador{
	font-size: 1vw;
	padding-bottom: 10.4vh;
}
@media only screen and (max-width: 414px){
	section#Areas div.container div#Contadores div#RowContadores div#ColumnContador div.TituloContador{
		font-size: 4vw;
		padding-bottom: 3vh;
	}
}
/*Termina sección áreas de la empresa con fun facts*/

/*Empieza sección casos de éxito*/
section#Exito{
	width: 100%;
	height: 100vh;
	background-color: black;
}
section#Exito div.ContenedorTitulo div#TituloExito{
	padding: 10vh 0vw 0vh 10vw;
	color: yellow;
	font-weight: bold;
	font-size: 4vw;
}
section#Exito div.ContenedorTitulo div.Subtitulo{
	padding: 2vh 0vw 0vh 37vw;
	font-size: 2vw;
	color: white;
}
@media only screen and (max-width: 414px){
	section#Exito div.ContenedorTitulo div.Subtitulo{
		padding: 7vh 0vw 0vh 15vw;
		font-size: 5vw
	}
}
section#Exito div#Casos{
	width: 100%;
	height: 64vh;
}
@media only screen and (max-width: 414px){
	section#Exito div#Casos{
		height: 60vh;
	}
}
section#Exito div#Casos div#RowCasos{
	width: 90%;
	height: 50vh;
	padding: 9vh 0vw 0vh 5vw;
}
@media only screen and (max-width: 414px){
	section#Exito div#Casos div#RowCasos{
		width: 78%;
		padding: 4vh 0vw 0vh 11vw;	
	}
}
section#Exito div#Casos div#RowCasos div.column{
	width: 33%;
	height: 50vh;
	float: left;
}
@media only screen and (max-width: 414px){
	section#Exito div#Casos div#RowCasos div.column{
		width: 100%;
		height: 19vh;
		float: none;
	}
}
section#Exito div#Casos div#RowCasos div.ColumnCasos img.ImgCasos{
	display: block;
	width: 100%;
	height: 100%;
	cursor: progress;
}
section#Exito div#Casos div#RowCasos div.ColumnCasos div.overlay{
	position: absolute;
	opacity: 0;
	transition: .5s ease;
  	background-color: black;
  	width: 29.4vw;
  	height: 50vh;
  	text-align: center;
  	float: left;
  	transform: translate(0 ,-50vh);
}
@media only screen and (max-width: 414px){
	section#Exito div#Casos div#RowCasos div.ColumnCasos div.overlay{
		width: 78%;
		height: 19.1vh;
		transform: translate(0 ,-19.1vh);
	}	
}
section#Exito div#Casos div#RowCasos div.ColumnCasos div.overlay div.text{
	color: white;
	padding-top: 20vh;
}
@media only screen and (max-width: 414px){
	section#Exito div#Casos div#RowCasos div.ColumnCasos div.overlay div.text{
		padding-top: 6vh;
	}
}
section#Exito div#Casos div#RowCasos div.ColumnCasos:hover .overlay{
	opacity: 0.7;
	cursor: url("http://wpdemos.themezaa.com/h-code/wp-content/themes/h-code/assets/images/icon-zoom-white2.png"), pointer;
}
/*Termina sección casos de éxito*/

/*Empieza sección clientes*/
section#Clientes{
	width: 100%;
	height: 100vh;
	background-color: white;
}
section#Clientes div.ContenedorTitulo div#TituloClientes{
	padding: 10vh 0vw 0vh 10vw;
	color: white;
	font-weight: bold;
	font-size: 4vw;
}
@media only screen and (max-width: 414px){
	section#Clientes div.ContenedorTitulo div#TituloClientes{
		padding: 17vh 0vw 0vh 3vw;
		width: 97vw;
	}
}
section#Clientes div.ContenedorTitulo div#TituloClientes div#TituloEspecial{
	background-color: black;
	margin-right: 3vw;
}
section#Clientes div#Logos{
	width: 65%;
	margin-left: 17vw;
	margin-top: 14vh;
	margin-bottom: 8vh;
}
@media only screen and (max-width: 414px){
	section#Clientes div#Logos{
		margin-top: 0vh;
		width: 85%;
		margin-left: 8vw;
	}
}
section#Clientes div#Logos div.RowLogos{
	width: 100%;
	height: 25vh;
}
@media only screen and (max-width: 414px){
	section#Clientes div#Logos div.RowLogos{
		height: 22.3vh;
	}
}
section#Clientes div#Logos div.RowLogos div.ColumnLogos{
	height: 100%;
	width: 33.3333%;
	float: left;
}
@media only screen and (max-width: 414px){
	section#Clientes div#Logos div.RowLogos div.ColumnLogos{
		width: 50%;
	}
}
section#Clientes div#Logos div.RowLogos div.ColumnLogos img{
	width: 76%;
	padding-top: 9vh;
	padding-left: 3vw;
	opacity: 0.7;
}
@media only screen and (max-width: 414px){
	section#Clientes div#Logos div.RowLogos div.ColumnLogos img{
		padding-left: 6vw;
	}	
}
/*Termina sección clientes*/

/*Empieza sección contacto*/
section#Contacto{
	height: 70vh;
	background-color: #e0e0e0;
}
@media only screen and (max-width: 414px){
	section#Contacto{
		height: 110vh;
	}
}
section#Contacto div#Contacto1{
	width: 40%;
	float: left;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto1{
		width: 100%;
	}
}
section#Contacto div#Contacto1 h1{
	padding-left: 4vw;
	padding-top: 12vh;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto1 h1{
		padding-top: 2vh;
		padding-left: 2vw;
	}
}
section#Contacto div#Contacto1 ul{
	padding-left: 4vw;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto1 ul{
		text-align: center;
	}
}
section#Contacto div#Contacto1 li#FinPais{
	padding-bottom: 5vh;
	padding-top: 4vh;
}
section#Contacto div#Contacto1 li{
	padding-top: 4vh;
}
section#Contacto div#Contacto1 div#RedesContacto{
	padding-left: 4vw;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto1 div#RedesContacto{
		text-align: center;
	}
}
section#Contacto div#RedesContacto img{
	width: 2vw;
	padding-top: 3vh;
}
@media only screen and (max-width: 414px){
	section#Contacto div#RedesContacto img{
		width: 12vw;
	}
}
section#Contacto div#RedesContacto img#ImgRedesContacto1{
	padding-right: 1vw;
}
section#Contacto div#Contacto2{
	width: 60%;
	float: right;
	text-align: right;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2{
		width: 100%;
	}
}
section#Contacto div#Contacto2 h1{
	padding-top: 12vh;
	padding-right: 8vw;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2 h1{
		padding-top: 2vh;
		padding-left: 2vw;
	}
}
section#Contacto div#Contacto2 form{
	padding-top: 5vh;
	padding-left: 10vw;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2 form{
		padding-left: 3vw;
	}
}
section#Contacto div#Contacto2 form div.row{
	float: left;
	width: 50%;
}
section#Contacto div#Contacto2 form div.row input.Btn{
	background-color: #e0e0e0;
	border: solid 1px black;
	width: 8vw;
	height: 8vh;
	margin-right: 10vw;
	margin-top: 6vh;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2 form div.row input.Btn{
		margin-right: 7vw;
		width: 37vw;
	}
}
section#Contacto div#Contacto2 form div.row div.column{
	text-align: left;
}
section#Contacto div#Contacto2 form input.inputs{
	width: 84%;
	height: 6vh;
	background-color: #e0e0e0;
	margin-bottom: 2vh;
	border: 0;
	border-bottom: solid 1px black;
	padding-left: 10px;
	font-size: 13px;
	color: black;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2 form input.inputs{
		width: 90%;
	}
}
section#Contacto div#Contacto2 form textarea{
	width: 84%;
	height: 24vh;
	background-color: #e0e0e0;
	border: 0;
	border-bottom: solid 1px black;
	padding-left: 10px;
	font-size: 13px;
	color: black;
	padding: 5vh 0vw 0vh 0vw;
}
@media only screen and (max-width: 414px){
	section#Contacto div#Contacto2 form textarea{
		width: 95%;
	}
}
section#Mapa{
	width: 100%;
	height: 70vh;
	background-color: red;
}
/*Termina sección contacto*/

/*Empieza estilos para ícono brincando*/
.bounce {
    display: inline-block;
    position: relative;
    -moz-animation: bounce 0.5s infinite linear;
    -o-animation: bounce 0.5s infinite linear;
    -webkit-animation: bounce 0.5s infinite linear;
    animation: bounce 0.5s infinite linear;
}

@-webkit-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-moz-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-o-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@-ms-keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
@keyframes bounce {
    0% { top: 0; }
    50% { top: -0.2em; }
    70% { top: -0.3em; }
    100% { top: 0; }
}
/*Termina estilos para ícono brincando*/