body{
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.428571429;
    color: #333;
		margin: 0px;
	border: 0px;
	overflow-x: hidden;
}
html {
    font-size: 10px;
    -webkit-tap-highlight-color: transparent;
        font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
	margin: 0px;
	border: 0px;
	overflow-x: hidden;
}
input[type="text"] {
    font-size: 12px;
    margin-bottom:9px;
    background: #F1F1F1;
    font-weight: 700;
    box-shadow: none;
	border: none;
    resize: none;
	padding: 5px; 
		width: 300px;
}
input[type="email"] {
    font-size: 12px;
    margin-bottom:9px;
    background: #F1F1F1;
    font-weight: 700;
    box-shadow: none;
border: none;
    resize: none;
	padding: 5px; 
		width: 300px;
}
select{
    font-size: 12px;color:#757575; margin-bottom:9px;
    background: #F1F1F1;font-weight: 700;
    box-shadow: none;border: none;
   resize: none;padding: 5px;  width: 310px;
}
textarea{
    font-size: 12px;margin-bottom:5px;background: #F1F1F1;
    font-weight: 700;box-shadow: none; resize: none;
  padding: 5px;  width: 300px;font: 400 13.3333px Arial;
}
/* GRID */
.row{ width:100%; float:left;}
.BtnINICIO{border-radius:300px;z-index:9999; right:0; bottom:0;opacity:85%;  }
.BtnINICIO:hover{background:green;opacity:100%;  }
.verde{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#002400+7,005700+23,008a00+67,00db00+100 */
background-color: #086c0d; text-align: center;margin: auto;text-align: center;}
.rowNav{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#949699+1,eaeaea+15,eaeaea+21,eaeaea+21,ffffff+34,ffffff+61,bcbcbc+92,bcbcbc+92,d8d0d5+100 */
background: #949699; /* Old browsers */
background: -moz-linear-gradient(top, #949699 1%, #eaeaea 15%, #eaeaea 21%, #eaeaea 21%, #ffffff 34%, #ffffff 61%, #bcbcbc 92%, #bcbcbc 92%, #d8d0d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949699', endColorstr='#d8d0d5',GradientType=0 ); /* IE6-9 */text-align: center;margin: auto); /* IE6-9 */}

#colIZQ{ background-image: url('../img/lineas-Izquierda.png'); background-position:right center; background-repeat:no-repeat ; }
.negrita{ font-weight:bold};
#colDER{ background-image: url('../img/lineas-Derecha.png'); background-position:left center; background-repeat:no-repeat ; }
#ColCentro1{ background-image: url('../img/lineas-Centro.png'); background-position:left center; background-repeat:no-repeat ;}
#ColCentro2{ background-image: url('../img/lineas-Centro.png'); background-position:right center; background-repeat:no-repeat ; }
.centro{ margin: auto;text-align: center;}
.justificar{ text-align: justify;text-align-last: left;}
.lema{ color:white; padding: 10px; font-size:20px; line-height: 12px;margin-bottom: 10px; }
.formulario{ background:white;  margin:auto; float: left; text-align: center; margin-bottom: 15px; padding-bottom:30px;    width: 90%;
    padding-left: 5%;
    padding-right: 5%; }
.big-title {font-size: 24px!important;color: white;padding: 10px;}
.lineaNaranja{ background-color: white; background-image:url('../img/BarraSuperior.png');background-repeat: none; background-position: right top; background-size:cover; }
.row{ width:100%; float:left; }
.topnav { overflow: hidden;text-align: center;margin:
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#032100+0,006e2e+96,004f12+100 */
background: #032100; /* Old browsers */
background: -moz-linear-gradient(left, #032100 0%, #006e2e 96%, #004f12 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #032100 0%,#006e2e 96%,#004f12 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #032100 0%,#006e2e 96%,#004f12 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#032100', endColorstr='#004f12',GradientType=1 ); /* IE6-9 */
  text-align: center;margin: auto;text-align: center;}
.rowNav{text-align: center;margin: auto;}
.topnav ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;}
.topnav li { float: left;width:12%;text-align: center}
.topnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px;
    text-decoration: none;
	box-sizing: border-box;
}
.topnav li a:hover {background-color: #111111;}
.footer a{ color: white;text-decoration: none;
}
.btn-green {
    background-color: #42bb3a!important;
    border: none!important;
    border-bottom: 6px solid #0e9412!important;
    border-radius: 0!important;
    cursor:pointer;	
}
 .btn-green {
    color: #fff!important;
    font-size: 16px!important;
    padding: 16px 36px!important;
    text-transform: uppercase;
}
.logo{ width: 100%;  }
.logoIMG{
  width: 300px;
  height: auto;
}
.logoIMG img{
width: 300px;
  height: auto;
}
.u-mr img{ height: 15px; width: auto;}
.item33{ width:33.3%; float:left;box-sizing:border-box;}
.item67{ width:66%; float:left;box-sizing: border-box;}
.serviceBLOCK{ padding: 25px;}
.serviceBLOCK img{ height:120px; width: auto; text-align: center;}
.IMGBLOCK{ width:90%; height: auto; text-align: center;}
.cl-primary{ color: #f92135;}
.cl-suplement-4 {color: #f47a08;}
.cl-suplement-5 {color: #6a2488;}
.cl-suplement-1 { color: #c9115d;}
.footer{ width: 100%;background:black;color:white; font-size: 12px;margin: auto;padding: 15px 0 15px 0;}

.Mobilnav { background-color: #086c0d;overflow: hidden;text-align: center;margin: auto}
.Mobilnav ul { list-style-type: none;
    margin: 0; padding: 0;overflow: hidden; background-color: #086c0d;}

.Mobilnav li {float: left;width:100%;text-align: center}
.Mobilnav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 20px;
    text-decoration: none;
  box-sizing: border-box;
}
.menu{background:black;padding:35px;text-align:center;color:white;cursor:pointer; }
.Mobilnav li a:hover { background-color: #111111;}
.Servicio{ font-size:25px; padding: 10px; font-weight: bold; width: 100%; }
.TEXTOLEFT67{ font-size:25px; padding: 10px; font-weight: bold; text-align:right;width: 95%; background-image:url(../img/linea-ROJA-Bola.jpg);background-position: right bottom; background-repeat: no-repeat; }
.TEXTORight67{ font-size:15px; padding: 10px; font-weight: bold; text-align:left;width: 95%; background-image:url(../img/linea-ROJA-Bola-B.jpg);background-position: left bottom; background-repeat: no-repeat; }
.Productos{ font-weight:bold; line-height:10px; text-align:center;color:grey;}
#LineaRoja1{ background-image:url(../img/linea-ROJA-Bola.jpg);background-position: right bottom; background-repeat: no-repeat; }
.ulmenu{ display:none ;}
#TEL {
  font-size: 24px;
  font-weight: bolder;
color: #FFFFFF;
background: none;
text-shadow: #474747 2px 2px 2px;
color: #FFFFFF;

}
#btnInicio{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: red; }	
#btnInicio:hover{background: red;color:white; }    			
#btnTiempoAsistencia{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: #E44B49; border-color:brown;}				
#btnTiempoAsistencia:hover{background:#E44B49;color:white;} 
#btnBiometrico{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:#D31D1B; }				
#btnBiometrico:hover{background: #D31D1B;color:white; } 
#btnAccesos{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: #B50912 }	
#btnAccesos:hover{background:#B50912;color:white; }  			
#btnCCTV{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:#6D0B03; }	
#btnCCTV:hover{background: #6D0B03;color:white; }    			
#btnComputoRedes{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:  #6D0B03; }	
#btnComputoRedes:hover{background: #6D0B03;color:white; }      			
#btnContacto{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:black; }						
#btnContacto:hover{background: black;color:white; }
#btMInicio{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: red; } 
#btMInicio:hover{background: red;color:white; }         
#btMTiempoAsistencia{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: #E44B49; border-color:brown;}        
#btMTiempoAsistencia:hover{background:#E44B49;color:white;} 
#btMBiometrico{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:#D31D1B; }        
#btMBiometrico:hover{background: #D31D1B;color:white; } 
#btMAccesos{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color: #B50912 } 
#btMAccesos:hover{background:#B50912;color:white; }       
#btMCCTV{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:#6D0B03; }  
#btMCCTV:hover{background: #6D0B03;color:white; }         
#btMComputoRedes{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:  #6D0B03; }  
#btMComputoRedes:hover{background: #6D0B03;color:white; }           
#btMContacto{border-bottom-style: solid;border-bottom-width: 3px; border-bottom-color:black; }            
#btn¿MContacto:hover{background: black;color:white; }
#Intro{ padding: 25px 0 25px 0; }
#Servicios{ padding: 25px 0 25px 0; }
#Parner{ padding: 25px 0 25px 0; }
#Main{ padding: 25px 0 25px 0; }
#Sliders{ padding: 25px 0 ; }
#NOver{ display:none !important;visibility:hidden; height:0px;}
#VentaCPUS{
  padding: 15px;
 background-image: url(../img/linea-an.png);
 background-position:left bottom;
 background-repeat: no-repeat;
 font-weight: bolder;
}

#listaendos ul{
 width: 75%;

}
@media  only screen  (min-width: 350px) and (max-width: 500px){
  .TEXTOLEFT67{ font-size:10px; padding: 10px; font-weight: bold; text-align:right;width: 95%; background-image:url(../img/linea-ROJA-Bola.jpg);background-position: right bottom; background-repeat: no-repeat; }
.TEXTORight67{ font-size:15px; padding: 10px; font-weight: bold; text-align:left;width: 95%; background-image:url(../img/linea-ROJA-Bola-B.jpg);background-position: left bottom; background-repeat: no-repeat; }
.blockTEXT{width:100% text-align:center;font-size:12px;}
#ContactoMensaje{ font-size:16px; }
#Mobil{ display:block;visibility:visible;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#949699+1,eaeaea+15,eaeaea+21,eaeaea+21,ffffff+34,ffffff+61,bcbcbc+92,bcbcbc+92,d8d0d5+100 */
background: #949699; /* Old browsers */
background: -moz-linear-gradient(top, #949699 1%, #eaeaea 15%, #eaeaea 21%, #eaeaea 21%, #ffffff 34%, #ffffff 61%, #bcbcbc 92%, #bcbcbc 92%, #d8d0d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949699', endColorstr='#d8d0d5',GradientType=0 ); /* IE6-9 */text-align: center;margin: auto}   
.lineaNaranja{ background-color: white; background-image:url('../img/BarraSuperior.png');}
#Desktop{display:none !important;visibility:hidden; height:0px;}
.topnav{ display:none !important;visibility:hidden; height:0px;}
.ulmenu{
background: #949699; /* Old browsers */
background: -moz-linear-gradient(top, #949699 1%, #eaeaea 15%, #eaeaea 21%, #eaeaea 21%, #ffffff 34%, #ffffff 61%, #bcbcbc 92%, #bcbcbc 92%, #d8d0d5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #949699 1%,#eaeaea 15%,#eaeaea 21%,#eaeaea 21%,#ffffff 34%,#ffffff 61%,#bcbcbc 92%,#bcbcbc 92%,#d8d0d5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949699', endColorstr='#d8d0d5',GradientType=0 ); 
    
}
.container {
    width: 90%;
  padding: 0 5% 0 5%;
  }



.listaendos ul li{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-right:10%;
  padding-bottom:5px;
  list-style-type: square;
}

.col1{ width:30%; float:left;box-sizing: border-box;}
.col2{ width:30%; float:left;box-sizing: border-box;}
.col3{ width:50%; float:left;box-sizing: border-box;}
.col4{ width:50%; float:left;box-sizing: border-box;}
.col5{ width:100%; float:left;box-sizing: border-box;}
.col6{ width:100%; float:left;box-sizing: border-box;}
.col7{ width:100%; float:left;box-sizing: border-box;}
.col8{ width:100%; float:left;box-sizing: border-box;}
.col9{ width:100%; float:left;box-sizing: border-box;}
.col10{ width:100%; float:left;box-sizing: border-box;}
.col11{ width:100%; float:left;box-sizing: border-box;}
  .col33{ width:100%; float:left;box-sizing: border-box;}
  .col67{ width:100%; float:left;box-sizing: border-box;}

  .formulario{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
    
}
}
@media  only screen and (min-width:769px)and  (max-width: 993px) {
.TEL{color:white;padding:10px;font-size:18px;float:left;}
.blockTEXT{color:white;width:auto;float:none;}
 .TEXTOLEFT67{ font-size:15px; padding: 10px; font-weight: bold; text-align:right;width: 95%; background-image:url(../img/linea-ROJA-Bola.jpg);background-position: right bottom; background-repeat: no-repeat; }
 .TEXTORight67{ font-size:15px; padding: 10px; font-weight: bold; text-align:left;width: 95%; background-image:url(../img/linea-ROJA-Bola-B.jpg);background-position: left bottom; background-repeat: no-repeat; }

#IMGlogo{ padding:10px;float:left;}
#Mobil{ display:block;visibility:visible; }
#Desktop{ display:none;visibility:hidden; height:0px;}
.container { width: 90%;padding: 0 5% 0 5%;}
.listaendos ul li{ width: 100%; float: left;
  box-sizing: border-box;padding-right:10%;
  padding-bottom:5px;list-style-type: square;
}
.topnav { display:none !important; visibility:hidden; }
.col1{ width:30%; float:left;box-sizing: border-box;}
.col2{ width:30%; float:left;box-sizing: border-box;}
.col3{ width:50%; float:left;box-sizing: border-box;}
.col4{ width:50%; float:left;box-sizing: border-box;}
.col5{ width:100%; float:left;box-sizing: border-box;}
.col6{ width:100%; float:left;box-sizing: border-box;}
.col7{ width:100%; float:left;box-sizing: border-box;}
.col8{ width:100%; float:left;box-sizing: border-box;}
.col9{ width:100%; float:left;box-sizing: border-box;}
.col10{ width:100%; float:left;box-sizing: border-box;}
.col11{ width:100%; float:left;box-sizing: border-box;}
.col33{ width:100%; float:left;box-sizing: border-box;}
.col67{ width:100%; float:left;box-sizing: border-box;}
.TEL{color:white;padding:10px;font-size:18px;float:left;}
.blockTEXT{color:white;width:auto;float:none;}
 #IMGlogo{padding:10px;float:left;}
#Mobil {display:none;visibility:hidden; height:0px;}
.container { width: 970px;}
}



  @media  only screen  (min-width: 500px) and (max-width: 768px)  and (orientation: landscape){
    #Mobil{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#949699+1,eaeaea+15,eaeaea+21,eaeaea+21,ffffff+34,ffffff+61,bcbcbc+92,bcbcbc+92,d8d0d5+100 */
background: #949699; /* Old browsers */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949699', endColorstr='#d8d0d5',GradientType=0 ); /* IE6-9 */ display:none !important;visibility:hidden; height:0px;}
#ROWlogo{text-align:center;}
     .TEL{color:white;padding:5px;font-size:18px;float:left;background:green;}
     .blockTEXT{color:white;width:100%;float:left;text-align:center; background:green;}
    #IMGlogo{ float:left;width:50%; margin:auto;text-align:center; padding-top:5px;}
.formulario{
    width: 90%;
    padding-left: 5%;
    padding-right: 5%;
}
#SVG{ display:none;visibility:hidden;  }
    #ContactoMensaje{ font-size:16px; }
#Mobil{ display:block;visibility:visible; }
#Desktop{ display:none !important;visibility:hidden; height:0px;}
.topnav{ display:none !important;visibility:hidden; height:0px;}

.listaendos ul li{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-right:10%;
  padding-bottom:5px;
  list-style-type: square;
}

.container {
    width: 90%;
  padding: 0 5% 0 5%;
  }
.listaendos ul li{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-right:10%;
  padding-bottom:5px;
  list-style-type: square;
}
.menu{
    
}

     .blockTEXT{color:white;width:auto;float:none;}
    #IMGlogo{ padding:10px;float:left;}
    #SVG{ display:none;visibility:visible;  }
          #ContactoMensaje{ font-size:16px; }
    .container {
    width: 90%;
  padding: 0 5% 0 5%;
  }
.listaendos ul li{
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-right:10%;
  padding-bottom:5px;
  list-style-type: square;
}
#Mobil { display:none !important; visibility:hidden; }
.col1{ width:30%; float:left;box-sizing: border-box;}
.col2{ width:30%; float:left;box-sizing: border-box;}
.col3{ width:50%; float:left;box-sizing: border-box;}
.col4{ width:50%; float:left;box-sizing: border-box;}
.col5{ width:100%; float:left;box-sizing: border-box;}
.col6{ width:100%; float:left;box-sizing: border-box;}
.col7{ width:100%; float:left;box-sizing: border-box;}
.col8{ width:100%; float:left;box-sizing: border-box;}
.col9{ width:100%; float:left;box-sizing: border-box;}
.col10{ width:100%; float:left;box-sizing: border-box;}
.col11{ width:100%; float:left;box-sizing: border-box;}
}

}

@media  only screen and (min-width: 994px) and (max-width:1200px ){
         .TEL{color:white;padding:10px;font-size:18px;float:left;}
  .blockTEXT{color:white;width:auto;float:none;}
        #IMGlogo{ padding:10px;float:left;}
   #Mobil { display:none;visibility:hidden; height:0px;}
.container {
    width: 1170px;
	margin: auto;
	}
	.col1{ width:10%; float:left;box-sizing: border-box;}
.col2{ width:20%; float:left;box-sizing: border-box;}
.col3{ width:25%; float:left;box-sizing: border-box;}
.col4{ width:30%; float:left;box-sizing: border-box;}
.col5{ width:40%; float:left;box-sizing: border-box;}
.col6{ width:50%; float:left;box-sizing: border-box;}
.col7{ width:60%; float:left;box-sizing: border-box;}
.col8{ width:70%; float:left;box-sizing: border-box;}
.col9{ width:75%; float:left;box-sizing: border-box;}
.col10{ width:80%; float:left;box-sizing: border-box;}
.col11{ width:90%; float:left;box-sizing: border-box;}
.col12{ width:100%; float:left;box-sizing: border-box;}
.col33{ width:33%; float:left;box-sizing: border-box;}
.col67{ width:67%; float:left;box-sizing: border-box;background-size:cover }
	.topnav li {
    float: left;
 width:12%;text-align: center}
 #SVG {
    display: show;
    visibility: visible;}

}
@media  only screen and (min-width:1201px ){
         .TEL{color:white;padding:10px;font-size:18px;float:left;}
  .blockTEXT{color:white;width:auto;float:none;}
        #IMGlogo{ padding:10px;float:left;}
   #Mobil { display:none;visibility:hidden; height:0px;}
.container {
    width: 1170px;
  margin: auto;
  }
  .col1{ width:10%; float:left;box-sizing: border-box;}
.col2{ width:20%; float:left;box-sizing: border-box;}
.col3{ width:25%; float:left;box-sizing: border-box;}
.col4{ width:30%; float:left;box-sizing: border-box;}
.col5{ width:40%; float:left;box-sizing: border-box;}
.col6{ width:50%; float:left;box-sizing: border-box;}
.col7{ width:60%; float:left;box-sizing: border-box;}
.col8{ width:70%; float:left;box-sizing: border-box;}
.col9{ width:75%; float:left;box-sizing: border-box;}
.col10{ width:80%; float:left;box-sizing: border-box;}
.col11{ width:90%; float:left;box-sizing: border-box;}
.col12{ width:100%; float:left;box-sizing: border-box;}
.col33{ width:33%; float:left;box-sizing: border-box;}
.col67{ width:67%; float:left;box-sizing: border-box;background-size:cover }
  .topnav li {
    float: left;
 width:12%;text-align: center}
 #SVG {
    display: show;
    visibility: visible;}

}