@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');


* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
	scroll-behavior: smooth;
}

input, textarea, select, button  { margin:0; padding:0; outline:0; border:0;                                
                                    box-sizing: border-box;}

body {
	width: 100%;
	font-family: 'Roboto', sans-serif;
	color: #4C4C4C;
	font-weight: 300;
}

.animado {
	opacity:0;
	transition: all 0.5s; 
}

.mostrarArriba {
	animation: mostrarArriba 1s;
}

@keyframes mostrarArriba {
	0% { 
		transform: translateY(60px); 
	}
	100% { 
		transform: translateY(0); 
	}
}

/*Mobile*/
    a#BtnMobile { display:none; padding-top: 5%; }
		#Barritas{ font-size:40px; color: #fff;}				
		#Equis { display:none; font-size:30px; color: #fff;}	
    /*......*/



/* HEADER */

header {
	
}

#fijo { display:none; position: fixed; top:0; width: 100%; height: 60px; background-color: #0C0E34; z-index: 999999; }
#fijo img { width: 30%; padding: 0.5% 0 0 10%; }

#header_index { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #0C0E34;  }
#header_internas { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #0C0E34;  }
#top{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

#logo { width: 25%; text-align: center; margin: 5px 0; }
#logo img { max-width:60%;  }
#logo_footer { width: 25%; text-align: center; margin: 5px 0; }
#logo_footer img { max-width:60%;  }
#whatsapp { display:none; width: 100%; text-align: center; }
#whatsapp a { display: flex; justify-content: center; align-items: center; width: 100%; text-align: center; padding: 0.5% 0 2% 0;  }
#whatsapp a p { font-weight: 700; font-size: 33px; color: #ffffff;  }
#whatsapp a img { margin-right: 2%;   }



#social {  width:15%; display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#social nav { width:100%; display: block;  }
#social ul { width: 100%;  display: flex; }
#social li { display: block; width: 30px; height: 30px; border-radius: 50%; border: solid 1px #ffffff; text-align: center; margin: 5px; }
#social li a { display: block; width: 100%; color: #ffffff; padding-top: 5px;  }
#social li a span { display: block; width: 100%; text-align: center; }



/* MENU */

#menu_principal_index { width: 100%; background-color: #4C4C4C; height: 75px; }

#principal{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

#principal ul li:first-child { background-color: #1D246F; }
#principal ul li:nth-child(2n) { background-color: #FF0000; }
#principal ul li:nth-child(3n) { background-color: #FF6600; }
#principal ul li:nth-child(4n) { background-color: #278A2A; }

#principal ul li:first-child:hover { background-color: #0D1033; }
#principal ul li:nth-child(2n):hover { background-color: #7D0706; }
#principal ul li:nth-child(3n):hover { background-color: #7C3208; }
#principal ul li:nth-child(4n):hover { background-color: #114217; }

#principal ul { width:100%; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; list-style: none;}

#principal li { width:25%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; 
	font-size: 0.9em; text-align: left; cursor: pointer;  height: 75px; position: relative; }
#principal li a { width: 80%; margin: 0 auto; color: #ffffff; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: center; font-weight: 700; }
#principal li img { width: 60px; margin-right: 10px; }


/* MENU INTERNAS */

#seguridad ul li:first-child { background-color: #1D246F; }
#seguridad ul li:nth-child(2n) { background-color: #4C4C4C; }
#seguridad ul li:nth-child(3n) { background-color: #4C4C4C; }
#seguridad ul li:nth-child(4n) { background-color: #4C4C4C; }

#seguridad ul li:nth-child(2n):hover { background-color: #FF0000; }
#seguridad ul li:nth-child(3n):hover { background-color: #FF6600; }
#seguridad ul li:nth-child(4n):hover { background-color: #278A2A; }


#transporte ul li:first-child { background-color: #4C4C4C; }
#transporte ul li:nth-child(2n) { background-color: #FF0000; }
#transporte ul li:nth-child(3n) { background-color: #4C4C4C; }
#transporte ul li:nth-child(4n) { background-color: #4C4C4C; }

#transporte ul li:nth-child(3n):hover { background-color: #FF6600; }
#transporte ul li:nth-child(4n):hover { background-color: #278A2A; }


#auto ul li:first-child { background-color: #4C4C4C; }
#auto ul li:nth-child(2n) { background-color: #4C4C4C; }
#auto ul li:nth-child(3n) { background-color: #FF6600; }
#auto ul li:nth-child(4n) { background-color: #4C4C4C; }

#auto ul li:first-child:hover { background-color: #1D246F; }
#auto ul li:nth-child(2n):hover { background-color: #FF0000; }
#auto ul li:nth-child(4n):hover { background-color: #278A2A; }


#comunicaciones ul li:first-child { background-color: #4C4C4C; }
#comunicaciones ul li:nth-child(2n) { background-color: #4C4C4C; }
#comunicaciones ul li:nth-child(3n) { background-color: #4C4C4C; }
#comunicaciones ul li:nth-child(4n) { background-color: #278A2A; }

#comunicaciones ul li:first-child:hover { background-color: #1D246F; }
#comunicaciones ul li:nth-child(2n):hover { background-color: #FF0000; }
#comunicaciones ul li:nth-child(3n):hover { background-color: #FF6600; }
#comunicaciones ul li:nth-child(4n):hover { background-color: #278A2A; }


.principal_internas { width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

.principal_internas ul { width:100%; margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; list-style: none;}

.principal_internas li { width:25%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; 
	font-size: 0.9em; text-align: left; cursor: pointer;  height: 75px; position: relative; }
.principal_internas li a { width: 100%; margin: 0 auto; color: #ffffff; display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; align-items: center; font-weight: 700; }
.principal_internas li img { width: 60px; margin-right: 10px; }

#btn-menu {
	display: none;
}

.menu label {
	display: none;
}


#menu_secundario { width: 100%; background-color: rgba(76,76,76,0.7); height: 40px; font-weight: 500; }

#secundario{ width: 90%; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}

#secundario ul { width:100%;  margin: 0; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; list-style: none;}

#secundario li { width:25%; text-align: center; cursor: pointer; height: 40px; }
#secundario li a { display: block; width: 100%; height: 40px; color: #ffffff; padding-top:3%; }
#secundario li a:hover { background-color: rgba(76,76,76,0.9); }




#imagen_principal_index { display: block; width: 100%; height: 500px; position: relative; }


/* MENU DESPLEGABLE ***************/

.dropbtn { cursor: pointer; position: relative;    }
.dropbtn span { color:#ffffff; margin-left: 5%; }



.dropdown-content {
  display: none;
  position: absolute;
  top:75px;
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  z-index: 99999;
}

.dropdown-content a {
  color: #ffffff;
  padding: 5% 5% 5% 20%;
  text-decoration: none;
  display: block!important;
  width: 100%!important;
  text-align: left!important;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover { background-color: rgba(0,0,0,0.9);}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show { display:block; }
.hidden { display: none; } 



/* QUICK FORM HEADER ***********************************************************************/

#container_quick_form { position: absolute; top: 10%; right: 5%; display: block; width: 25%; }

#header_quick_form { display: block; padding: 2% 0; width: 100%; background-color: rgba(0,0,0,0.9); color: #ffffff; text-align: left; }
#header_quick_form h2 { width: 90%; margin: 0 auto; display: block; font-weight: 300; font-size: 22px; }
#header_quick_form a { display: flex; align-items: center; width: 90%; margin: 0 auto; }
#header_quick_form a p { font-weight: 700; font-size: 33px; color: #ffffff;  }
#header_quick_form a img { margin-right: 2%; }

#quick_form { display:block; width: 100%; background-color: rgba(0,0,0,0.7);  }
#quick_form h2 { display:block;  margin: 0 auto; width: 90%; padding: 2% 0; color: #ffffff; font-weight: 500; font-size: 21px; }

#formulario_header { width: 90%; margin: 0 auto; }
#contacto_nombre, #contacto_telefono, #contacto_mail, #contacto_mensaje { display: block; width: 100%; height: 45px; background-color: #ffffff; 
	color:#666666; margin: 10px 0;  text-align: left; padding: 5%; border:none; font-size: 0.8em; }
#formulario_header textarea { height: 75px; font-family: 'Roboto', sans-serif; }

#formulario_header #contacto_boton { display: block; width: 50%;  text-align: center; color: #ffffff; margin: 0 auto; padding-bottom:3%;  }
#formulario_header #contacto_boton input { display: block; width: 100%; background-color: #FF0000; color: #ffffff; cursor: pointer; border:none; font-size:1em; font-weight: 700; border-radius: 5px; height: 45px; }




/* UP ARROW *******************************************************************/

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #0C0E34; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  width: 30px;
  height: 30px;
  padding-bottom: 3px;
  border-radius: 50%; /* Rounded corners */
  font-size: 12px; /* Increase font size */
}

#myBtn:hover {
  background-color: #030411; /* Add a dark-grey background on hover */
}

/* GENERALES *********************************************************/

#titulo h1 {
	font-size: 48px;
	padding-bottom: 30px;
	font-weight: 300;
}

#titulo:after {
	content: "";
	display: block;
	background-color: #FF0000;
	width: 50px;
	height: 4px;
	margin-bottom: 50px;
}

.viewport { width:80%; margin: 0 auto; }
.general { padding: 8% 0; }
p { line-height: 1.5em; }
.columnas { display: flex; flex-wrap: wrap; justify-content: space-between; }
#elegirnos_section #columna_izq { width: 40%; padding-left: 10%; }
.columnas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;   }
.columnas article { width: 50%; margin: 0;  }
.columnas article li { padding: 0.2em 0; display: flex; flex-wrap: nowrap; }
.columnas article li p { display: block; margin-left: 1em; }
.columnas article li span { display: block; color:#FF0000; font-size: 14px; padding-top: 3px;}
.columnas #columna_izq { padding: 0 5% 0 10%; }
.columnas #columna_der { padding: 0 10% 0 5%; }
.imagen { display: block; width:100%;  }
.small { height:550px; }
.medium { height:600px; }
.large { height:650px; }
.xl { height:700px; }
.xxl { height:700px; }
.consulta { display:block; margin-top:2em; font-size: 1em; color:#FF0000; cursor:pointer; }
.consulta:hover { color:#4C4C4C; }
.gris_section { background: #EDECEB; }



/*INDEX***********************************************************************/
/*****************************************************************************/

/*SOMOS*******************************/

#cultura_section { background-color: #0C0E34; color: #ffffff;  }
#valores { padding-top: 8%; }
#valores ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#valores ul li { display: block; width: 20%; text-align: center; font-weight: 700; }
#valores ul li img { display: block; margin: 0 auto; padding-bottom: 5%; }



/*POR QUE ELEGIRNOS*******************************/

#elegirnos_section #titulo h1 { padding-bottom: 5%; }


/*SERVICIO TECNICO*******************************/

#servicio_tecnico { background: #CCCCCC; }
#servicio_tecnico #texto li { display: flex; justify-content: ; align-items: top;  }
#servicio_tecnico #texto p { width: 80%; }
#servicio_tecnico #texto li p { display: block; margin-left: 0.5em; }
#servicio_tecnico #texto li span { display: block; color:#FF0000; font-size: 0.8em; margin-top: 0.2em;}


/*ASESORAMIENTO*******************************/

#asesoramiento { text-align: center; } 
#asesoramiento h2 { font-weight: 300; }
#asesoramiento a { color: #4C4C4C; display: block; }
#asesoramiento a img { display: inline-block; }
#asesoramiento a:after { content: ""; display: block; background-color: #FF0000; width: 50px; height: 4px; margin: 0 auto; margin-top: 1.5em; }
#asesoramiento a h1 { display: inline-block; font-size: 3em; margin-left: 0.2em; }


/*CONTACTO*******************************/


.container-formulario { background-color: #666666; color: #ffffff; }
.container-formulario h1 { text-align: center; font-size: 2em; padding-top: 8%; }
.container-formulario h1:after { content: ""; display: block; background-color: #FF0000; width: 50px; height: 4px; margin: 0 auto; margin-top: 0.8em; }
.container-formulario h2 { text-align: center; font-size: 1em; margin-top: 1.5em; }
#formulario { width: 70%; margin: 0 auto; padding:5% 0;  }
#formulario form { display: flex; flex-wrap: wrap; justify-content: space-between; }
#formulario .col { display: block; width: 48%; }


#formulario #contacto_nombre, #contacto_telefono, #contacto_mail, #contacto_mensaje { display: block; width: 100%; height: 45px; background-color: #ffffff; 
	color:#666666; text-align: left; padding: 5%; border:none; font-size: 0.8em; }
#formulario textarea { height: 155px; font-family: 'Roboto', sans-serif; }

#formulario #contacto_boton { display: block; width: 20%;  text-align: center; color: #ffffff; margin: 0 auto; padding:3% 0;  }
#formulario #contacto_boton input { display: block; width: 100%; background-color: #FF0000; color: #ffffff; cursor: pointer; border:none; font-size:1em; font-weight: 700; border-radius: 5px; height: 45px; }



/*FOOTER*******************************/


#footer_info { width:100%; display: flex; flex-wrap: wrap; justify-content: space-between; background-color: #0C0E34; padding:5% 0; }
#footer_info #datos { width: 20%;  }
#footer_info #datos li { color: #ffffff; display: flex; flex-direction: row; flex-wrap: wrap; padding-top:2%; }
#footer_info #datos li a { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; color: #ffffff;  }
#footer_info #datos li span { color: #ffffff; }
#footer_info #datos li p { color: #ffffff; margin-left: 5%; }
#footer_info #menu_footer { width: 35%; margin-right: 10%; }
#footer_info #menu_footer ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#footer_info #menu_footer ul li { width: 45%; color:#ffffff; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding:2% 0; }
#footer_info #menu_footer ul li a { display: flex; flex-wrap: wrap; align-items: center; width: 100%; color: #ffffff; text-align: left; font-size: 0.8em;}
#footer_info #menu_footer ul li a img { max-width: 25%; margin-right: 4%; }

#pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 90%; margin: 0 auto; }
#legales { font-size: 0.8em; }

#social_footer { width:15%;  display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#social_footer nav { width:100%; display: block;  }
#social_footer ul { width: 100%; display: flex; }
#social_footer li { display: block; width: 30px; height: 30px; border-radius: 50%; border: solid 2px #4C4C4C; text-align: center; margin: 5px; }
#social_footer li a { display: block; width: 100%; color: #4C4C4C; padding-top: 5px;  }
#social_footer li a span { display: block; width: 100%; text-align: center; }







/******* TECNO SEGURIDAD ********************************************/
/********************************************************************/



/*ALARMAS*******************************/

#alarmas_section { padding: 8% 0 5% 0; }


/*CAMARAS*******************************/

#camaras_section #texto p { width: 45%; }


/*SISTEMA*******************************/

#sistema_section { padding: 8% 0 5% 0; }
#sistema_section img { display: block; max-width: 100%; padding: 8% 0 5% 0; }
#imagen_sistema { width:100%; height: 1000px;}





/******* TECNO TRANSPORTE VERTICAL ********************************************/
/********************************************************************/



/*SERVICIOS*******************************/

.nuestro_servicio { padding-bottom: 8%; }
.nuestro_servicio #titulo_nuestro_servicio h1 { font-size:36px; font-weight: 300!important; padding-bottom: 5%; }
#columnas_3 { display: flex; flex-wrap: wrap; justify-content: space-between; }
#columnas_3 article { display: block; width: 30%; }
#columnas_3 article li { padding: 1% 0; }
#columnas_3 #numero { font-size: 2.5em; font-weight: 700; color:#CCCCCC; padding: 5% 0; }
#columnas_3 h3 { padding: 5% 0; }


/*ASCENSORES*******************************/

.titulo_ascensores { width: 80%; margin: 0 auto; }


/*SISTEMA*******************************/

#sistema_section { padding: 8% 0 5% 0; }
#sistema_section img { display: block; max-width: 100%; padding: 8% 0 5% 0; }



/******* AUTOMATIZACION ********************************************/
/********************************************************************/


#auto_section { padding: 8% 0 3% 0; }
.portones { padding: 0 0 8% 0; }
.icono_portones p { width:80%; }
#icono_auto { text-align: center; padding-bottom: 3%; width:80%; }











/* BREAKPOINTS INDEX **********************************************************/



/* Extra Large devices */
@media only screen and (min-width: 1900px) {

	body {
		font-size:1.2em;
	}

	#fijo img { width: 25%; }
	#imagen_principal_index { height: 520px; }


	/* MENU */

	#menu_principal_index { height: 90px; }
	#principal li { height: 90px; }
	#menu_secundario { height: 50px; }
	#secundario li { height: 50px; }
	#secundario li a { height: 50px; color: #ffffff; }


	/* MENU DESPLEGABLE ***************/

	.dropdown-content { top:90px; }


	#formulario textarea { height: 213px;  }

	/* MENU INTERNAS */

	.principal_internas li { height: 90px; }


	/* QUICK FORM HEADER ***********************************************************************/

	#container_quick_form { top: 12%; width: 20%; }

	/* INTERNAS *******************************************************/

	#imagen_sistema { height: 1300px;}


		
	}




/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1024px) {

	#fijo img { width: 40%; padding: 0.5% 0 0 10%; }
	#menu_principal_index { height: 130px; }
	#principal { width: 100%; height: 130px; }
	#principal li { align-items: baseline; text-align: center; height: 130px;  }
	#principal li a { flex-direction: column; }
	#principal li img { width: 60px; margin: 0; padding-top:10%; }
	.principal_internas { width: 100%; height: 130px; }
	.principal_internas li { align-items: baseline; text-align: center; height: 130px;  }
	.principal_internas li a { flex-direction: column; }
	.principal_internas li img { width: 60px; margin: 0; padding-top:5%; }
	#secundario { width: 100%; }
	.dropdown-content { top:130px; }
	#container_quick_form { width: 35%; }
	.viewport { width: 90%; }
	.columnas #columna_izq { padding: 0 5% 0 5%; }
	.columnas #columna_der { padding: 0 5% 0 5%; }
	#principal{ width: 100%; }
	#principal li a { width: 100%; }
	#principal li img { width: 40px;  }
	#titulo h1 { font-size: 36px; padding-bottom: 15px; }
	#titulo:after { margin-bottom: 20px; }
	.general { padding: 5% 0; }
	p { line-height: 1.3em; }
	#logo { width: 30%;  }
	#logo img { max-width:75%;  }

	.medium { height:550px; }
	.xl { height:650px; }
	.xxl { height:400px; }


	#formulario #contacto_boton { width: 40%; }

	

	/*ASCENSORES*******************************/

	.titulo_ascensores { width: 90%; }
}

	


/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 990px) {

	
}

/* Large devices (laptops/desktops, 850px and up) */

@media only screen and (max-width: 900px) { 


	#fijo img { width: 40%; padding: 0.5% 0 0 10%; }
	#menu_principal_index { height: 130px; }
	#principal { width: 100%; height: 130px; }
	#principal li { align-items: baseline; text-align: center; height: 130px;  }
	#principal li a { flex-direction: column; }
	#principal li img { width: 60px; margin: 0; padding-top:10%; }
	.principal_internas { width: 100%; height: 130px; }
	.principal_internas li { align-items: baseline; text-align: center; height: 130px;  }
	.principal_internas li a { flex-direction: column; }
	.principal_internas li img { width: 60px; margin: 0; padding-top:5%; }
	#secundario { width: 100%; }
	.dropdown-content { top:130px; }

	#formulario #contacto_boton { width: 30%; }
	

	#footer_info #datos { width: 30%;  }
	#footer_info #menu_footer { width: 35%; margin-right: 5%; font-size: 0.7em;  }

	


	
}



/* Large devices (laptops/desktops, 850px and up) */

@media only screen and (max-width: 800px) { 

	.xxl { height:400px; }


}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {

	#top{ width: 90%; }
	#menu_principal_index { height: 130px; }
	#principal { width: 100%; height: 130px; }
	#principal li { align-items: baseline; text-align: center; height: 130px;  }
	#principal li a { flex-direction: column; }
	#principal li img { width: 60px; margin: 0; padding-top:10%; }
	.principal_internas { width: 100%; height: 130px; }
	.principal_internas li { align-items: baseline; text-align: center; height: 130px;  }
	.principal_internas li a { flex-direction: column; }
	.principal_internas li img { width: 60px; margin: 0; padding-top:5%; }
	#secundario { width: 100%; }
	.dropdown-content { top:130px; }
	.columnas article { width: 100%; }
	.columnas article li { padding: 0.2em 0; display: flex; flex-wrap: nowrap; }
	.columnas #columna_izq { padding: 7% 5%; }
	.columnas #columna_der { padding: 7% 5%; }
	.inverse { flex-direction: column-reverse; }



	/*SISTEMA*******************************/

	#imagen_sistema { height: 700px; }



	/* QUICK FORM HEADER ***********************************************************************/

	#container_quick_form { width: 40%; }


	/*CONTACTO*******************************/

	#formulario { width: 90%;   }
	#formulario #contacto_boton { width: 40%;  }
	#formulario #contacto_boton input { font-size:1.2em; border-radius: 11px; height: 60px; }


	/*FOOTER*******************************/


	#footer_info { flex-direction: column; }
	#logo_footer { width: 100%; }
	#logo_footer img { max-width:40%;  }
	#footer_info #datos { display: block; width: 100%; margin: 0 auto;  }
	#footer_info #datos li { width: 100%; display: block; padding-top:3%; text-align: center; }
	#footer_info #datos li a { flex-direction: column;   }
	#footer_info #datos li span { color: #ffffff; }
	#footer_info #datos li p { margin-left: 0%; padding-top:2%; }
	#footer_info #menu_footer { width: 100%; margin: 0 auto }
	#footer_info #menu_footer ul { padding-top:3%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	#footer_info #menu_footer ul li { width: 40%; display: flex; flex-wrap: wrap; justify-content: center; align-items: top;  }
	#footer_info #menu_footer ul li a { align-items: top; flex-direction: column; text-align: center; font-size: 0.9em;}
	#footer_info #menu_footer ul li a img { max-width: 40%; margin-right: 0%; padding:3% 0; }

	#pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 90%; margin: 0 auto; }
	#legales { font-size: 0.8em; }

	#social_footer { width:10%;  display: flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
	#social_footer ul { width: 100%; margin-right: 0; display: flex; }
	#social_footer li { width: 30px; height: 30px; border-radius: 50%; border: solid 2px #4C4C4C; text-align: center; margin: 5px; }
	#social_footer li a { display: block; width: 100%; color: #4C4C4C; padding-top: 5px;  }
	#social_footer li a span { display: block; width: 100%; text-align: center; }


	

	}

 


/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 600px) {

/*INDEX************************************************************/


#header_index { height: 100vh;  }
#header_internas { height: 100vh;  }
#top { width: 100%; flex-direction:column; height: 25%; }
#logo { width: 100%; text-align: center; margin: 5px 0; }
#logo img { max-width:60%;  }
#whatsapp { display:block; width:100%; }
#social { display: none; }
.general { padding: 10% 0; }



/* MENU */

#menu_principal_index { height: 45%; }
#principal{ width: 100%; flex-direction:column; height: 100%;}
#principal ul { flex-direction: column; height: 100%;}
#principal li { width:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: left; align-items: center; 
	font-size: 1em; text-align: left; cursor: pointer;  position: relative; height: 95px; }
#principal li a { width:70%; margin: 0 auto; color: #ffffff; display: flex; flex-direction: row; justify-content: left; flex-wrap: wrap; align-items: center; font-weight: 700; }
#principal li img { padding: 0; width: 70px; margin-right: 10px; }

.principal_internas { width: 100%; flex-direction:column; height: 100%;}
.principal_internas ul { flex-direction: column; height: 100%;}
.principal_internas li { width:100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: left; align-items: center; 
	font-size: 1em; text-align: left; cursor: pointer;  position: relative; height: 100%; height: 95px; }
.principal_internas li a { width:70%; margin: 0 auto; color: #ffffff; display: flex; flex-direction: row; justify-content: left; flex-wrap: wrap; align-items: center; font-weight: 700; }
.principal_internas li img { padding: 0; width: 70px; margin-right: 10px; }

.dropbtn span { margin-left: auto; margin-right: 0; }
.dropdown-content { top:94px; }

#imagen_principal_index { height: 30%;  }
#menu_secundario { height:100%;  }
#secundario{ width: 100%; flex-direction: column; }
#secundario ul { width:100%; flex-direction: column; height:100%; }
#secundario li { width:100%; height:50px; }
#secundario li a { display: block; width: 100%; height: 100%; color: #ffffff; padding-top:3%; }
#secundario li a:hover { background-color: rgba(76,76,76,0.9); }
#container_quick_form { display: none; }


.small { height:250px; }
.medium { height:300px; }
.large { height:350px; }
.xl { height:400px; }
.xxl { height:250px; }

#valores #titulo { text-align: center; }
#valores #titulo:after { margin: 0 auto; }
#valores ul { justify-content: center; padding-top: 3%; }
#valores ul li { width: 30%; padding: 3% 0; font-size: 0.8em;  }


/*SERVICIO TECNICO*******************************/

#servicio_tecnico #texto li { width: 100%; }
#servicio_tecnico #texto li p { width: 90%; }
#servicio_tecnico #texto li span { margin-top: 0; }




/*CONTACTO*******************************/


.container-formulario h1 { font-size: 1.2em; padding: 8% 5% 0 5%; }
.container-formulario h2 { font-size: 0.9em; }
#formulario { width: 90%; margin: 0 auto; padding:5% 0;  }
#formulario form { flex-direction: column; }
#formulario .col { display: block; width: 100%; }


#formulario #contacto_nombre, #contacto_telefono, #contacto_mail, #contacto_mensaje { display: block; width: 100%; height: 45px; background-color: #ffffff; 
	color:#666666; text-align: left; padding: 5%; border:none; font-size: 0.8em; }
#formulario textarea { margin-top:0; }

#formulario #contacto_boton { display: block; width: 60%;  }


/*SISTEMA*******************************/

#imagen_sistema { height: 400px; }


/*CAMARAS*******************************/

#camaras_section #texto p { width: 90%; }


/******* TECNO TRANSPORTE VERTICAL ********************************************/
	/********************************************************************/



	/*SERVICIOS*******************************/

	.nuestro_servicio { padding-bottom: 8%; }
	.nuestro_servicio #titulo_nuestro_servicio h1 { font-size:36px; font-weight: 300!important; padding-bottom: 5%; }
	#columnas_3 { flex-direction: column;  }
	#columnas_3 article { width: 100%; }


/******* AUTOMATIZACION ********************************************/
/********************************************************************/

.portones { padding: 0% !important; }
#auto_section { padding: 8% 0 3% 0; }
.portones { padding: 0 0 8% 0; }
.icono_portones p { width:100%; text-align:center; }
#icono_auto { width:100%; }

	
}


/* Small devices (portrait tablets and large phones, 550px and up) */
@media only screen and (max-width: 550px) {

	
	
}

/* Small devices (portrait tablets and large phones, 500px and up) */
@media only screen and (max-width: 520px) {

	
}

/* Small devices (portrait tablets and large phones, 480px and up) */
@media only screen and (max-width: 500px) {

	
}


/* Extra small devices (phones, 340px and down) */
@media only screen and (max-width: 480px) {

	
} 

/* Extra small devices (phones, 340px and down) */
@media only screen and (max-width: 420px) {

	
} 

/* Extra small devices (phones, 340px and down) */
@media only screen and (max-width: 380px) {

	
}



/* Extra small devices (phones, 340px and down) */
@media only screen and (max-width: 360px) {


} 



/* BREAKPOINTS INDEX END **********************************************************/