@charset "utf-8";
/* CSS Document */

<style type="text/css">



*

{

border: 0;

margin: 0;

}




img

{

border: 0px;

}
body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	color: #666666;
	background: url(images/bg.jpg) top left no-repeat #373737;
	line-height: 16px;

}


ul, ol, dl { 
}


.container {
	width: 100%;
	max-width: 1010px;
	overflow: hidden;
	margin: 0 auto;
}

.main {

	width: 100%;
	margin: 0px auto;
	background:url(images/main.jpg) right top no-repeat;
	overflow: hidden; 
	max-width: 1010px;
}


header {
	height: 156px;
	width: 100%;
}


.logo {	
		padding: 24px 0px 0px 10px;
		height: 82px;
		background: 0 0 no-repeat;
		width: 100%;
		max-width: 1010px;
		
		
}

.logo2 {	
		height: auto;
		background: 0 0 no-repeat;
		width: 100%;
		max-width: 800px;
		
		
}

/*

scroll styles here

*/



.item { width: 994px; height:272px;}

.item img {float:left;}


/*.item h2 { border:none; margin-bottom:15px;}*/


.scrollable { position:relative; overflow:hidden; width: 994px; height: 272px;} 

.scrollable .items { width:20000em; position:absolute;}

.scrollable .items div { float:left;} 

.scrollable .items .item { overflow:hidden;}

.scrollable .items .item p { line-height:16px;}

.navi { width:auto; height:20px; float:right; margin:5px 0; padding-right: 20px;} 

.navi a { width: 13px; cursor:pointer; height: 14px; float:left; margin:0 0 0 3px; background:url(images/circl.gif) no-repeat scroll right top; display:block; font-size:1px;} 

.navi a:hover, .navi a.active { background-position:left top; margin:0 0 0 3px;  background:url(images/circl_hov.gif) no-repeat scroll right top}

.header1

{

width: 994px; height: 272px;

background: url(images/instalacion-teatros-en-casa-bogota.jpg) no-repeat;

}

.header2

{

width: 994px; height: 272px;

background: url(images/instalacion-camaras-seguridad.jpg) no-repeat;

}

.header3

{

width: 994px; height: 272px;

background: url(images/instalacion-puntos-red-datos.jpg) no-repeat;

}

.header4

{

width: 994px; height: 272px;

background: url(images/reparacion-computadores-bogota.jpg) no-repeat;

}

.header5

{

width: 994px; height: 272px;

background: url(images/instalacion-plantas-telefonicas.jpg) no-repeat;

}

/*Fin - scrollable*/



.sidebar1 {
	margin: auto;
	float: left;
	width: 20%;
	background-color: #E4E2FE;
	overflow: visible;
	position: relative;
	box-sizing: border-box;
	padding: 8px;
}
.content {
	background-color: #FFFFFF;
	width: 60%;
	float: left;
	padding: 10px;
	box-sizing: border-box
}

#content{

	background: #FFFFFF;

	padding: 8px 8px 8px 8px;
}


.content_razd{

	background: url(images/content_razd.gif) 235px repeat-y;
	padding: 0px 0px 0px 0px;
	clear:both;
}

.home_box {
	float: left;
	width: 45%;
	padding: 0px;
}



.img_l {	float:left;

		margin: 0px 15px 0px 0px;

}

.img_3 {	float:center;

		margin: 0px 0px 0px 0px;
		padding: 20px;
		box-sizing:border-box;
		max-width: 100%;



}


.razd_col {
	background: url(images/razd_col.jpg) 30px top no-repeat;
	height: 180px;
	float: left;
	width: 10%;
}

.sidebar2 {
	margin: auto;
	float: left;
	width: 20%;
	background-color: #E4E2FE;
	overflow: visible;
	position: relative;
	box-sizing: border-box;
	padding: 8px;
}

/*-----LETRAS-------*/

H1{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: bold;
	color: #B95C12;
	text-align: center;
	padding: 0px 0px 0px 0px;
	line-height: 30px;

}


h2{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	font-size: 24px;
	text-align: center;
	line-height: 20px;
	padding: 0px 0px 0px 0px;
	color: #B95C12;
}


h3 {

	color: #BB4214;
	font-weight:  100;
	font-size: 18px;
	text-align: left;
	padding: 8px 0px 8px 0px;

}


.Tit1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-style: oblique;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #5C5CF3;
	height: 16px;
	color: #FFF;
	text-align: center;
	width: 100%;
	padding-bottom: 15px;
	padding-top: 15px;
}

/*-----------Fin-Letras-----------------*/


.otrosservicios {
	background:#CCC;
	
		width: 100%;
		
		box-sizing:border-box;

}

/*

.home_box1 {
	float: left;
	width: 18%;
	padding: 0px;

}

.home_box2 {
	float: left;
	width: 18%;
	padding: 0px;

}

.home_box3 {
	float: left;
	width: 18%;
	padding: 0px;

}

.home_box4 {
	float: left;
	width: 18%;
	padding: 0px;

}

*/

.row_ind {}


#enlaces {


}

#footer{

	height: 67px;

	font-size: 12px;

	color: #ffffff;

	text-align: center;

	padding: 25px 0px 0px 0px;

	background: url(images/footer.jpg) 0px 15px no-repeat;

	font-weight: 100;

}

.lineasdeatencion{
	width: 100%;
    padding-bottom: 20px;
    padding-left: 25px;
    padding-top: 10px;
	box-sizing: border-box;
}
	
	
}	


.content ul, .content ol {
	padding: 0 0px 0px 0px; 
}


ul.nav {
	list-style: none; 
	border-top: 1px solid #666;
	margin-bottom: 15px;
}
ul.nav li {
	border-bottom: 1px solid #666; 
}
ul.nav a, ul.nav a:visited {
	padding: 0px 0px 0px 0px;
	display: block; 
	width: 160px; 
	text-decoration: none;
	background-color: #C6D580;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background-color: #ADB96E;
	color: #FFF;
}

/* ~~ El pie de página ~~ */
footer {
	padding: 0 0;
	background-color: #E9E7FE;
	position: relative;
	clear: both; 
}

.fltrt {  /* esta clase puede utilizarse para que un elemento flote en la parte derecha de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: right;
	margin-left: 0px;
}
.fltlft { /* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* esta clase puede situarse en elemento <br /> o en un bloque vacío como elemento final tras el último bloque flotante (dentro de .container) si el pie se elimina o se saca fuera de .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/*Compatibilidad con HTML 5: define nuevas etiquetas HTML 5 como display:block para que los navegadores sepan cómo procesar las etiquetas correctamente. */
header, section, footer, aside, article, figure {
	display: block;
}

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

	header{
	height: auto;
}	
	
#logo{
		display:none;
}	
	
	
	.scrollable{
		display:none;
}

		.navi{
		display:none;
}

	#MenuBar2{
		display:none;
}


	#MenuBar1{
		display:none;
}

	#otrosservicios{
		display:none;
		
}
	
	.sidebar1{
		display:none;
		
}

	.sidebar2{
		display:none;
		
}	

	.content{
		width:100%;
		
}	

	.razd_col{
		display:none;
		
}	

	.home_box{
		width:100%;
		
}	
		
}

@media screen and (min-width:800px){
	
	#logo2{
		display:none;
}	

	#MenuBar4{
		display:none;
}
	
}




.fab {
    position:fixed;
    width: 70px;
    text-align:center;
    text-decoration: none;
    border-radius:50px;
    height:70px;
    line-height: 20px;
    bottom:30px;
    right:30px;
    color:#fff;
    font-size:30px;
    z-index:20;
    


}

.fab:hover {
opacity: 0.7;
}

.fa-whatsapp {
background: #45bbff;
color: white;
}