html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin : 0;
	padding : 0;
	outline : 0;
	font-weight : normal;
	font-style : normal;
	font-size : 100%;
	font-family : inherit;
	vertical-align : baseline;
	border : none;
}
 
body {line-height : 1; 
   overflow-x: hidden;}

table {
	border-collapse : collapse;
	border-spacing : 0;
}

:focus {outline : 0;}
blockquote:before, blockquote:after, q:before, q:after {content : "";}
blockquote, q {quotes : "" "";}
ol,ul {list-style : none;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
strong {font-weight : bold;}
em {font-style : italic;}
acronym {cursor : help;}


.clear{ clear:both; height:5px;}
/* ------------------------------------------------------------
----> #########
------------------------------------------------------------ */

body {
	color : #222; background:#fff;
  
	width: 100%;font-family: 'Raleway', sans-serif; font-size:0.9em;
	
}

a {
	text-decoration : none;  color : #222;
}

a:hover { color:#01acfe}
strong.azul{ color:#01acfe}
#accessibility {
	position : absolute;
	top : -99999em;
}
 
img { width: 100%}


/* -------------------------------------------------------------------------------------------------------
----> header
----------------------------------------------------------------------------------------------------------------- */
header{ background:#fff;  height:100px; clear:both ; width:100%;     }

header .head{ max-width:1200px; margin:0 auto; padding:0;  ;}

header a.logo{  
	float:left;
	width : 25%; padding: 0; margin:5px 0 5px 0;
 
 }
header a.logo img{ ; 
	width : 100%;
	float:left;
 }

/*__________iconos  header_____________*/
header   .iconos {  width:55%; float:right; margin-top:5px; line-height:23px;
}
header .iconos ul {    float:right;  ;text-align:right}
header .iconos ul li { display:inline-block;  ;}
header .iconos ul li  a{  font-size :0.75em; letter-spacing:1px; padding:0 20px 0 20px; line-height:1.4em;	margin-left : 0px;color:#222; text-align:center;}
header .iconos ul li a:hover{ color:#01acfe}
header .iconos ul li  a:before{	content:"\f095";  display:block; padding-bottom:8px; 
    font-family: "Font Awesome 5 Free"; font-weight: 900;   display:block; clear:both; 
	font-size :1.4em;  
}
header .iconos ul li  a.mail:before{	content:"\f0e0"; }
header .iconos ul li  a.chat:before{	content:"\f086"; }
header .iconos ul li  a.soporte:before{	content:"\f0ad"; }
header .iconos ul li  a.clientes:before{	content:"\f007"; }
 

/**--------------------------**/
/*  NAVIGATION */

nav {
	width: 100%; 
	height: 30px;
	margin: 0;
	padding: 10px 0 10px 0; 
	clear: both; 
	background:#01acfe;position:absolute; 
	z-index:999999999999999999999999999999999;
}

#menu {
	max-width: 1000px; 
	margin: 0 auto;
	padding: 0;
}
nav [type="checkbox"],  nav label {
	  display: none;
}
 
nav ul li { margin: 0  ; display: block; float: left; clear: none;  }
nav ul li a { display: block;color:#fff;  text-decoration:none; padding:10px 40px 10px 40px; text-transform:uppercase; font-size:0.9em; letter-spacing:1px; font-weight:600      }
nav ul li a.sel, nav ul li  a:hover ,nav ul li a.sel:hover {color:#222;  ;}

/***********/
/***desplegable ************/
nav li ul {
	display:none;
	position:absolute;
	min-width:140px;
}
 nav li:hover > ul {
	display:block; max-width:400px; padding-top:20px; padding-bottom:20px; 
}
nav li ul li {
	 max-width:400px; float:none ;  padding:0; margin:0;position:relative;
}
 nav li ul li a { border-radius :0; max-width:400px; float:none ; border-bottom:1px solid #111;   padding:20px; margin:0; font-size:0.9em; background:#000; display:block;
				position:relative;
}
nav li ul li a:hover { background:#01acfe}
nav li ul li ul {right:-100px;	top:0px;}

/***/

.fixed {
	height: 25px;
    position:fixed;
    top:0;
}

 nav.fixed  li ul{ padding-top:10px}
nav.fixed  li ul li a { border-radius :0; max-width:400px; float:none ; border-bottom:1px solid #111;   padding:20px; margin:0; font-size:0.9em; background:#000; display:block;
				position:relative;}
		
@media  (max-width: 1200px){ 
 nav ul li a {  padding:0.7em 1.9em 0em 1.9em;     }
nav.fixed ul li a {  padding:0.2em 1.9em 0em 1.9em;      }

 }

@media  (max-width: 978px){ 

 nav ul li a {  padding:0.7em 1em 0em 1.3em; font-size:1em;    }
 nav.fixed ul li a {  padding:0.2em 1.2em 0em 1.3em; font-size:0.9em;      }

}

@media only screen and (max-width: 768px) {    /***MENU RESPONSIVE  ***************/
header{ background:#fff;  clear:both ;     margin:0; padding:0;}
header  a.logo { display:block; width:45% ;position:absolute; top:70px;   max-width:300px;  margin: 0px 0 0 10px; padding:0; }
	
/***/
header   .iconos { position:relative; top:-6px; left:0; z-index:9; text-align:center;
	height : 40px; width:100%; float:none; margin: 0px; padding:0; line-height:23px; font-size:0.9em;
}

header .iconos ul {    float:none;  ;text-align:center}
header .iconos ul li { display:inline-block; }
header .iconos ul li  a{  
	font-size :0.9em; 
	 padding:0 30px 0 30px; line-height:0.9em;
	margin-left : 0px;color:#222; text-align:center;
}
.iconos ul li a:hover{ color:#01acfe}

header .iconos ul li  a i{ clear:both;  display:block; 
	font-size :1.4em;  
}

header .iconos ul li  a span{ clear:both; display:block; }


 
nav{ background:none }	 
	nav ul {
		  display: none;
	}

	label#nav {
  		display: block; 
		  width: 50px;
		  background:#111; 
		  padding:10px;
  		height: 40px;
		margin:0; text-align:center;
		cursor: pointer; 
		  position: absolute; position:fixed; z-index:999999999999999999999999999999999;
		  right: 5px; 
  		top: 60px;  
	} 
	.fixed label#nav {   
		 right: 5px; 
  		top:  5px;  
	} 
	
label#nav:after{
  content:'';
  display: block;
  width: 32px;
  height:2px; 
  background: #fff;
  margin: 7px 5px;
  box-shadow: 0px 10px 0px #fff, 0px 20px 0px #fff
}

	[type="checkbox"]:checked ~ ul { width:100%;  
  		display: block; ; 
  		background: #0ea3eb; 
	}

    
 nav ul li a.sel{   color:#0ea3eb}
nav ul li a:hover,nav ul li a.sel:hover {  color:#0ea3eb}
	
nav ul { border-radius:0;   
  		z-index: 999999999; left:0; width:100%;   position:fixed;top: 100px;z-index:999999999999999999999999999999999;
  		 } 
	nav  ul  li {
		  display: block;
  		float: none; margin:0; padding:0;
  		width: 100%;
  		text-align: center;
		  text-indent:  0px; border-bottom:1px solid #111;
	}
 
 nav ul li  a {  text-align:center;
		  display: block;
  		float: none;
		background: #000;
  		width: 100%;
	padding:12px 0 12px 0;  border-bottom:0; color:#fff; margin:0; font-size:1em;  
}
nav.fixed  ul { top: 50px; } 	 
nav.fixed ul li a {   
	padding:10px 0 10px 0;  
}	
 /*****desplegable***********/			
		nav ul li ul{ border-radius:0;   
  		z-index: 999999999; left:0; width:100%; min-width:100%; display:block;   max-width:100%;background:#111;  position:relative;top: 0px; right:0;
  		 }  
			 nav li ul li { width:100%; float:none ;  padding:0; margin:0;
				position:relative;max-width:100%;  border-bottom:1px solid #222;
			}
			 nav li ul li a { border-radius :0;   max-width:100%; float:none ; color:#777;     padding: 10px; margin:0; font-size:0.8em; background:#111; display:block;
				position:relative; text-transform:capitalize
			} nav li ul li a:hover { color:#01acfe; background:inherit
			}
			 nav li:hover > ul {
				display:block; max-width:100%; padding-top:00px; padding-bottom:00px; 
			}
			nav.fixed   li ul  { top:  0px; max-width:100%;padding-top:00px;  } 	 

			nav.fixed   li ul li a {   
	padding:5px 0 5px 0;  
}	
	 nav.fixed   li ul li a {     max-width:100%;   color:#777;     padding: 10px; margin:0; font-size:0.8em; background:#111; display:block;}


}
@media (max-width: 420px) {   
header  a.logo {  width:50% ;position:absolute; top:65px;   max-width:240px;  margin: 0px 0 0 10px; padding:0; }
header  a.logo img{ width:100%;} 

label#nav {
		  width: 35px;
		  padding:8px;
  		height: 30px;
		color:#fff; 
		  right: 20px; 
  		top: 50px; opacity:0.90;
	} 
		 label#nav.fixed {   
		  right:  10px; 
  		top:  10px;  
	} 
label#nav:after{
  content:'';
  display: block;
  width: 26px;
  height:2px; 
  background: #fff;
  margin: 7px 5px;
  box-shadow: 0px 7px 0px #fff, 0px 14px 0px #fff
}


header   .iconos { top:5px;}
header .iconos ul li { width:17%; display:inline-block; margin:0; padding:0; text-align:center  ;}
 
header .iconos ul li  a{  
	font-size :0.85em; 
	 padding:0 ;line-height:0.9em;	
	margin : 0px;color:#222; text-align:center;
}
.iconos ul li a:hover{ color:#01acfe}

header .iconos ul li  a i{ clear:both;  display:block; 	font-size :1.4em;  }
header .iconos ul li  a span{ clear:both; display:block; }

}

 /* -----------------------------------
----> #end HEADER
---------------------------------------------------------- */

.mail {color:#01acfe; font-size:1.3em;}
h1.center{ text-align:center; font-size:1em;font-size:20px}
h1.center span{ color:#00b7ff; font-size:20px}
a img{ text-align:center;}



  
/* -------------------------------------------------------------------------------------------------------
----> #banner
----------------------------------------------------------------------------------------------------------------- */
.slider {   margin: 0px auto; text-align:center;  padding:0;  padding-top:50px; }
.slider.padding{ padding-bottom:0!important}  
.blueberry { margin: 0 auto; }
.blueberry .slides {
	display: block;
	position: relative;
	overflow: hidden;
}
.blueberry .slides li {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.blueberry .slides li img {
	display: block;
	width: 100%;
	max-width: none;
}

/**botones especiales sobre banner*/

.blueberry .slides li a.boton_facebook {
	display: block;
	width: 100%; position: absolute; z-index: 999999; background: #222; padding:15px; font-size:1.2em; font-weight: 600; color: #fff; top: 75%; right:5%; width: 200px;}
.blueberry .slides li a.boton_instagram {
	display: block;
	width: 100%; position: absolute; z-index: 999999; background: #00adef; padding:15px; font-size:1.2em; font-weight: 600; color: #fff; top: 75%; right: 18%; width: 200px;}
.blueberry .slides li a.boton_facebook:hover { background:#00adef }
.blueberry .slides li a.boton_instagram:hover { background:   #222; }



.blueberry .slides li.active { display: block; position: relative; }
.blueberry .crop li img { width: auto; }

.blueberry .pager { position:relative; z-index:999999;
	height: 40px; bottom: 0px;
	text-align: center;  
}
.blueberry .pager li { display: inline-block; }
.blueberry .pager li a,
.blueberry .pager li a span {
	display: block;
	height: 7px;
	width: 7px;
}
.blueberry .pager li a {
	padding: 18px 8px;
-webkit-border-radius: 26px;
   -moz-border-radius: 26px;
	border-radius: 26px;
}
.blueberry .pager li a span {
	overflow: hidden;
	background: #c0c0c0;
	text-indent: -9999px;
-webkit-border-radius: 26px;
   -moz-border-radius: 26px;
	border-radius: 26px;
}
.blueberry .pager li.active a span { background: #404040; }

/* ------------------------------------------------------------
----> #seccion contenidos
------------------------------------------------------------ */

#contenido{ width:100%;  height:auto; padding:20px 0 0 0; margin:  0px auto;;  }

/*.wrapper{ max-width:1200px; margin:60px auto; padding-bottom: 20px; ;  }*/
  
h2.portfolio{ color:#222; font-size:4em;text-transform:uppercase; font-weight:bold; line-height:2em ; text-align:center; margin-top:40px;  }


 
p{ font-size:1.1em; line-height:1.2em; text-align:justify}


h1{ color:#222; font-weight:800; font-size:2.5em;text-transform:uppercase; text-align:center; line-height:1em    }
 h2{ color:#01acfe;font-size:3em;text-transform:uppercase; font-weight:bold; line-height:1.2em   }
h1.title{ color:#222; font-size:4em;text-transform:uppercase; font-weight:bold; line-height:2em   }

h1.title#web{font-size:3em;padding-top:70px}

h2.title{ color:#222; font-size:4em;text-transform:uppercase; font-weight:bold; line-height:2em ; text-align:center; padding:30px;  }
h1 span, h2 span{ color:#01acfe; font-weight:bold;     }



/* ------------------------------------------------------------
----> #wrapper
------------------------------------------------------------ *

#wrapper .content{ max-width:1200px; margin: 0px auto; height:550px; padding:10px; }
 

 
/* ---> #sbuvencion en index--------------------------------------------------------------------------------- */
#subvencion{  width:100%;    padding: 20px 0 30px 0; text-align:center; background: #222;   margin:0; margin-bottom:30px;  }/*subvencion */ 
#subvencion p { vertical-align:middle;text-align:center; font-size:2em; letter-spacing:1px; margin:0; padding: 0px    ; color:#fff;}
#subvencion p  span{ font-weight:800;}
#subvencion a {  color:#fff   }


#subvencion a span{}
#subvencion img{ max-width: 200px;  margin-bottom: -25px;display: inline-block;}

 
/* ------------------------------------------------------------
/* ----  INDEX---------------------------- */
/* ------------------------------------------------------------*/
.index {  max-width:1200px;width:100%; padding-bottom:100px; padding-top:90px;   text-align:center; margin:0 auto;}
.index  img { float:left; width:47%; margin-right:30px; }
.index  .texto { float:left; width:45%; margin-left:30px; }

.index h2   {  line-height:1.3em; margin-top:50px; font-size:2.5em;}
.index h2 a { color:#111;  font-weight:800;  text-transform:uppercase }
.index h3   { color:#111; font-weight:600; ; padding-top:9px;text-transform:uppercase;   font-size:1.2em;}
.index p{  text-align: center;font-size:1.1em; margin:  40px auto ; max-width:450px; color:#222;  position:relative; line-height:1.8em;     }
.index p.mas {  text-align:center; }
.index  p.mas a{ background:#111; color:#FFFFFF ;  line-height:0.4em; font-size:1em; padding:20px;}
.index  p.mas a:hover {background:#01acfe }

@media  (max-width: 1200px){ 
.index { width:100%; padding-bottom:30px; padding-top:30px; }
}
@media  (max-width: 978px){ 
.index h2   { line-height:1em;  font-size:2.4em;}
 .index  p.mas a{ padding:10px;}
}

@media  (max-width: 768px){ 
.wrapper{ margin:0px auto;   }
.index  img { float:none; width:90%; margin:0 auto ; max-width:500px; text-align:center; display:block;}

.index  .texto {float:none; width:90%; margin:0 auto ;  }
.index p{   margin:  20px auto ; max-width:650px; }




h2.portfolio{  font-size:3em;  }

} 
  
@media  (max-width: 420px){ 
.wrapper{ margin:0px auto; padding:0  }
#contenido{ margin-top:0; padding: 20px 0 0 0 ; }
 

.slider {  padding-top:10px; }
 #subvencion{ padding: 0px;  margin-bottom:10px;  }/*subvencion */ 
#subvencion p { text-align:center; font-size:1em; letter-spacing:1px; margin:0 15px 0 15px; padding: 0px    ;}

.index  { font-size:0.9em;;}

 
h2.portfolio{  font-size:2em;  }
 
 

} 

/* ------------------------------------------------------------
----> #equipo
------------------------------------------------------------ */
.equipo{ padding:  30px; max-width:1200px; margin:0 auto;}

.equipo h2{  color:#222; font-size:4em;text-transform:uppercase; font-weight:bold; line-height:2em ; text-align:center; margin:0; padding:0; padding-bottom:30px;  }

.equipo p{ line-height:1.8em;}
/****/
.partners { width:100%; background:#f6f6f6; padding-bottom:50px; padding-top:50px;}
.partners .partner{ padding:20px; max-width:1200px; margin:0 auto} 
.partner img{ float:left; width:20%; padding:5px; max-width:180px; margin-right:40px;}
.partners p{ float:left; width:70%; line-height:1.6em; padding-top:15px;}


/***/ 
.razon{ padding:50px; max-width:1200px; margin:0 auto}
.razon h2{ text-align:center; font-size:1.8em;}

ul.razones { width:100%; margin:15px;}
ul.razones li{   margin-left:25px; clear:both; padding:20px}

ul.razones li span.numero{ width:30px; float:left; display:block; background:#222; color:#fff; border-radius:100px; padding:20px 20px 20px 30px; font-size:2.5em; font-weight:400; margin-left:30px}
ul.razones li p{ width:80%; float:left;  padding:10px;color:#222; font-size:1.1em; line-height:1.3em; }
ul.razones li span{ font-weight:bold; font-size:2em; }


/***/ 
.marcas { width:100%; background:#f6f6f6; padding-bottom:50px; padding-top:50px;}

.marca{ padding:20px; max-width:1200px; margin:0 auto; text-align:center; }
.marcas h2{ text-align:center; font-size:1.8em; font-weight:600}
 .hostigal, .softigal{ width:40%; margin:10px 30px 10px 30px ; float:left}
.hostigal img, .softigal img{ width:80%;padding:30px;}

.hostigal p, .softigal p{ line-height:1.8em; text-align:center;   }
.hostigal a, .softigal a { font-weight:bold;   text-align:center; padding:10px;  color:#222;   line-height:1em; font-size:1.9em ; text-transform:uppercase}
.hostigal a:hover, .softigal a:hover {    color:#01acfe;  }
@media  (max-width: 978px){ 

.equipo h2{  font-size:2.5em;    }

 .equipo{ padding:10px;  }
.equipo p, .partners p,.hostigal p, .softigal p{ font-size:1.2em;;}
ul.razones li span.numero{ width:30px;  margin-left:10px}
ul.razones li p{ width:75%; float:left;  padding:10px;color:#222; font-size:1.2em; line-height:1.1em; }
.marcas h2{ text-align:center; font-size:2em;}
.hostigal a, .softigal a {  font-size:1.4em  }
.hostigal, .softigal{ width:45%; margin:10px   ; float:left}
}

@media  (max-width: 768px){ 
.equipo h2{  font-size:2.3em; line-height:1.2em;    }

 .partners .partner{ padding:10px; max-width:1200px; margin:0 auto} 
.partner img{ float:none; width:90%; padding:5px; max-width:180px; margin:0; margin:0px auto; text-align:center  ;}
.partners p{ float:none; width:90%; line-height:1.6em; margin:0;  padding:5px;}
/***/

/***/ 
.marcas { width:100%; background:#f6f6f6; padding-bottom:50px; padding-top:50px;}

.marca{ padding:20px 0 20px 0; }
.marcas h2{ text-align:center; font-size:2.5em;}
 .hostigal, .softigal{ width:100%; margin:0px  ; float:none; display:block}
.hostigal img, .softigal img{ max-width:300px; text-align:center; width:80%;padding:10px;}



/**/ 
.razon{ padding:50px 0 50px 0;} 

ul.razones { width:100%; margin:15px;}
ul.razones li{  width:100%; margin:0;   padding: 0px}

ul.razones li span.numero{ width:30px; float:left; ;display:inline-block;  background:#222; color:#fff; border-radius:100px; padding:20px 20px 20px 30px; font-size:2.5em; font-weight:400; margin-left:30px}
ul.razones li p{ clear:both; display:block;  width:90%; float: none;  padding: 0px;color:#222; margin:0;font-size:1.1em; line-height:1.5em; }
ul.razones li span{ font-weight:bold; font-size:2em; padding: 20px; display:inline-block; }


} 
  
@media  (max-width: 420px){
.equipo{ padding: 0  ; margin:0 }

.equipo h2{  font-size:2em; line-height:1em;   }
 .partners { padding-bottom:10px; padding-top:10px;}
.partners .partner{ padding: 0px; } 
.razon{ padding:50px 0 50px 0;} 
ul.razones { width:100%; margin:0px;}
ul.razones li{   margin:0px; clear:both; padding:10px}
 ul.razones li p{ width:90%; float:none;  padding: 0px;color:#222; font-size:1.1em; line-height:1.5em; }
 
.equipo p, .partners p, .hostigal p, .softigal p{ font-size:1em; padding-left:15px; padding-right:15px;;}


} 



/*-----------------------------------------------
----> NOVO DISEÑO    #servicios * 
-----------------------------------------------------------------
 /* ------------------------------------------------------------
*/
h1.web { font-size:2em;  }
p.path{ clear:both; display:block;max-width:1200px; margin:0 auto; text-align:left; position:relative; font-size:1.1em; z-index:999999999999999999999999}

.service{  background:#fff; margin-top:30px;    
   padding:75px; padding-bottom:30px;clear:both;
    }

.service#gris{  background:#f2f2f2;   }
.service .center{ max-width:1200px; margin:0 auto ;  }

.service h1  { color:#222; font-size:2.8em; letter-spacing:1px; font-weight:800 ; line-height:1.3em;text-transform:uppercase; }
 
.service h1 a span,  .service h1   span { color:#222;   }
.service h4  { text-align:center; font-size:1.4em; font-weight:600 ; color:#01acfe; text-decoration:none; text-transform:uppercase}




.service h2  { color:#222; font-size:2.5em;font-weight:300  ;line-height:1.3em; text-align:center; padding-bottom:30px;}
.service h2 span { color:#222; font-weight:800; font-size:1.5em;}

.service .center img{ width:38%; text-align:center; margin:40px 40px 0 0; float:left;}
.service .center img.icons{ width:30%; text-align:center; margin: 0px 40px 40px 0; float:left;}
.service .center img.full{ width:100%; text-align:center; margin:40px 0 40px  0; float:none;}

.service .center .right{ width:57%; margin-top:40px; text-align:left; float:left;}

.service .center .right#serv{ margin-top:70px; }

.service p{ color:#222; text-align: justify; padding:0 20px 0 20px; line-height:2em; font-size:1.1em  }
.service p.center{ text-align:center}
.service p.center strong{ padding:10px; display:block; font-weight:600; font-size:1.6em;   color:#01acfe; text-align:center}
.service a { color:#222;  text-transform:uppercase; font-weight:bold }
.service a.mas{ padding: 9px 15px 9px 15px; border-radius:0; padding-left:15px; float:right; display:block; margin:36px 0; color:#FFFFFF ; background:#01acfe ; font-size:1.4em; font-weight:300}

.service a.mas#soft{ padding:0 6px 0 6px; border-radius:0;float:right; display:block; margin:  10px; margin-right:20px;  color:#FFFFFF ; background:#01acfe ; font-size:1em; font-weight:300}

.service a.mas:hover{background:#222   }
.service h1 span.middle  { font-size:1.4em;  line-height:1em; }

.service  ul li {   line-height:1.8em;  margin-left:40px; margin-bottom:0; font-size:1.2em;}
.service  ul li.title { font-weight:800; margin-left:10px; margin-top:15px;}
 .service a.boton { width: 50%; background:#222; color:#fff; padding:20px; margin:30px; text-align:center; display:block; text-transform:uppercase; font-weight:600 }
 .service a.boton:hover {  background:#01acfe;   }

.service p.precio{ float:left; margin: 20px; font-size:1.2em;}
.service p.precio span{   font-size:3.3em;}
 .service a.boton_softw { float:right; width: 50%; background:#222; color:#fff; padding:20px; margin:30px; text-align:center; display:block; text-transform:uppercase; font-weight:600 }


/*******programas*****/
 .service .icons  img{ float:left; width:9%; margin:30px 10px; }
 
 
 .service .icons#web  { max-width:1024px; margin:0 auto; margin-bottom:30px;}
 .service .icons#web  img{ float:left; width:15%; padding:30px; }
 
 
/*******webs*****/  
.service h3  { color:#222; font-size:2.5em;font-weight:300  ;line-height:1.3em; text-align:center; padding-bottom:30px;}

.service h2.web { font-size:2em; padding-top:30px;}
 .service h2.web  span {font-size:3em;  }
  .service  ul li i{ font-size:1.4em; padding-right:8px;}
 .service h2.web  span strong,  .service  ul li i{ color:#93C03B}
 
 .service h2.web  span strong.pyme, .service  ul li i.pyme{ color:#28B0DD}
 .service h2.web  span strong.pro, .service  ul li i.pro{ color:#E73C46}
 .service h2.web  span strong.shop, .service  ul li i.shop{ color:#F1D724}
  .service h2  { color:#222; font-size:2.5em;font-weight:300  ;line-height:1.3em; text-align:center; padding-bottom:30px;}
  .service h2 span { font-weight:800; font-size:1.5em;}
 .service a.compara { float:right; margin-right:60px;  background:#222; color:#fff; padding:20px; margin:0 30px; text-align:center; display:block; text-transform:uppercase; font-weight:600 }

  .service a.info { float:right; margin-right:60px;  background:#93C03B; color:#fff; padding:20px; margin:30px; text-align:center; display:block; text-transform:uppercase; font-weight:600 }
.service p.precio#web{   padding:60px 0 0 60px;}
  .service a.info#pyme{ background:#28B0DD} 
.service a.info#pro{ background:#E73C46}
.service a.info#shop{ background:#F1D724}
  .service a.info:hover,  .service a.info#pyme:hover,.service a.info#pro:hover,  .service a.info#shop:hover, .service a.compara:hover{ background:#444;}
 



.programas { max-width: 1400px!important}
  
@media  (max-width: 1200px){ 
.service{ padding-left:20px; padding-right:20px; }
.service p{ font-size:1.2em; line-height:1.8em;}

 }

@media  (max-width: 978px){ 
.service .center img{ margin:40px 10px 0 0; }
.service p{ line-height:1.6em; font-size:1.1em  }
  .service  ul li  { font-size:1.2em; padding-right:8px;}
  .service p.precio#web{   padding:30px 0 0 30px;}

.service .center .right{ width:59%; margin-top:40px; }

 .service a.compara { float:left; margin:10px;  }

  .service a.info { float:left;margin:10px;  }

 }

@media  (max-width: 768px){ 


 .service h1 a span,  .service h1   span { color:#222; font-size:1.8em; text-transform:uppercase; font-weight:bold }
  .service h2  {font-size:1.8em;}

.service .center img{ float:none; display:block; margin:15px auto; width:80%; max-width:500px;}
.service .center img.icons{ float:none; display:block; margin:0 auto; width:80%; max-width:400px;}
.service p{ line-height:1.6em; font-size:1.2em  }
.service .center .right{ width:95%;float:none; display:block; margin-top:10px; margin-left:15px; }

  .service  ul li  { margin-left:0}

 .service h2.web   {font-size:1.7em;  }
 
 .service .icons  img{ float:left; width:22%; margin:10px 5px; }


 .service .icons#web  { max-width:800px; margin:0 auto}
 .service .icons#web  img{ float:left; width:22%; margin:0px 6px 10px 0;  }
 

 }
 
 @media  (max-width: 420px){ 
 
.service{ padding:20px 10px 20px 10px; width:auto; }
 .service h1  {  font-size:1.5em;  line-height:1.2em; }
 .service h1 a span,  .service h1   span {   font-size:1.4em;  line-height:1.2em; }
 .service h2 a span,  .service h2   span {   font-size:1.4em;  line-height:1.2em; }

 .service .right { margin:0; padding:0}
 .service p{ line-height:1.6em; font-size:1.1em; margin:0; padding:0  }
.service .center img{  width:100%; margin:15px 0 0 0; padding:0;  }

 .service .center img.full{ width:100%; text-align:center; margin:20px 0 20px  0; float:none;}


 .service h2.web   {font-size:1.4em;  }
 .service h2.web  span { font-weight:600; font-size:2.2em;}
  .service  ul li  { font-size:1.1em;}
  
 
 .service .icons#web  img{ float:left; width:36%; margin:30px 6px 0 30px ; padding:0; }
  .service .icons  img{ float:left; width:28%; margin:10px 5px; }

.service a.mas, .service a.mas#soft{ padding: 9px 15px 9px 15px; border-radius:0; float:none; width:80%; display:block; text-align:center; margin:12px 0; }
 .service a.boton_softw { float:none; display:block; clear:both; line-height:1.3em; width: 80%;  padding: 9px 15px 9px 15px; margin:20px 0; text-align:center;  }

 }


/*portafolio*/ /******efecto hover*********************/
 a.boton{ margin:30px auto; margin-bottom:50px; text-align:center; width:200px; display:block; padding:9px; color:#222; border:1px solid #222 }


.portafolio {float:left; width:25%; margin: 0px; padding: 0px; 
 overflow: hidden;
position: relative;   background: #111;
text-align: center;
cursor: default; 
}
 
 



.portafolio   img{ width:100%; background: #111; opacity:0.6;}


/*.portafolio   p{ text-align:center; color:#FFFFFF; font-size:1.1em; margin:20px 0 00 }*/







.portafolio h3 { color:#fff; font-size:1.1em;  line-height:1.3em ; font-weight:800; text-transform:uppercase ;
text-align: center;
position: absolute; width:57%; right:auto; left:20%; display:block;

padding:20px 10px 20px 10px; border:1px solid #fff;
  top:40%;
}

.portafolio h3 a { color:#fff; font-weight:600; }
.portafolio h3:hover{ background:#111}

.portafolio h3 span{ color:#fff; font-size:0.9em; line-height:1em ; font-weight:300; text-transform:none;
}

 
.portafolio img {
transition: all 0.2s linear;
}

/*
.portafolio .mascara {
opacity: 0; 

 transition: all 0.3s ease-in-out;
}*/

 
.portafolio a.link{
opacity: 0;
transition: all 0.4s ease-in-out;
transform: translateY(100px)/*Desplazamos para abajo*/
}
.portafolio:hover img { opacity: 1;
transform: scale(1.3);/*Damos un ligero zoom a la imagen*/
}
 /*
.portafolio:hover .mascara {
opacity: 1;
}*/
.portafolio:hover h2,
.portafolio:hover p,
.portafolio:hover a.link {
opacity: 1;
transform: translateX(0px);/*Regresamos a las posiciones originales*/
}
.portafolio:hover p {
transition-delay: 0.1s;
}
.portafolio:hover a.link {
transition-delay: 0.2s; /*Aplicamos un pequeño retardo para que se muestre al final*/
transform: translateY(0px);
}



/*EFECTOS NO PORTAFOLIO DE LOGOS*/
/**** en logos*****************/

#portfolio_logotipos { padding-top:30px;  max-width:1600px; width:100%; margin:0 auto}
#portfolio_logotipos h2{ padding-bottom:30px; }

#portfolio_logotipos .portafolio  {float:left; width:33.33%; margin: 0px; padding: 0px; border:0;
 overflow: hidden; background:none;
position: relative;   
text-align: center;
cursor: default; 
}
#portfolio_logotipos .portafolio  img{ text-align:center ; width:100%; background:#fff;box-shadow: none; opacity:1  }
 #portfolio_logotipos .portafolio p.text {
position: absolute; width:100%;
padding: 10px; text-align:left;  ; color:#111; font-size:1em; margin: 0;opacity:0.8; background:#fff; width:auto;
  bottom:0%; }
 #portfolio_logotipos .portafolio p.text.bl {  color:#fff ; background:#222  ; 
  }
  
  
@media  (max-width: 1024px){ 
 .portafolio ,  #portfolio_logotipos .portafolio  { width:33.33%;} 


.portafolio h3 {  width:auto;    
}

 }
 
 @media  (max-width: 768px){ 
 .portafolio , #portfolio_logotipos .portafolio  { width:50%;}
  }

 @media  (max-width: 420px){ 
 .portafolio , #portfolio_logotipos .portafolio  { width:100%;} 
 }

 
/*botons de enlaces a Diseño Web  provincias */
.provincias { clear:both; width:100%; margin:0 auto; max-width:1200px; text-align:center; padding: 0px;}

.provincias a{ margin:10px; padding:10px;width:20%; font-size:1.1em; display:block; float:left; text-align:center; background:#f6f6f6; border:1px solid #eee; }
 @media  (max-width: 768px){ 
.provincias a{ width:40%; font-size:1em;}
  } 
  
  @media  (max-width: 768px){ 
.provincias a{ width:80%;   display:block;  font-size:0.9em;}
  }
 
 
/********COMPARATIVAS WEB **********************/
.comparativa{ width:100%;  margin-bottom:30px; }
 .comparativa p.notas{ margin-top:50px; font-style:oblique}
 
 
 .comparativa h3{  font-size:2em; text-transform:uppercase; padding:20px }

 .comparativa ul{ list-style:none; display:inline-block;width:100%; }
 
 .comparativa ul li{  width:20%; padding: 10px 0 10px 0; margin:0; float:left; color:#000000 ; text-align:center }
  .comparativa ul li img{  width:80%; text-align:center}
 .comparativa ul li strong{ font-size:1.3em; font-size:1.3em;}

  
 .comparativa ul li.eco{ text-align:center; background:#D2E6B3; width:20%; }
 .comparativa ul li.pyme{ text-align:center; background:#B9D8E8;   width:20%;}
 .comparativa ul li.pro{ text-align:center; background:#F2D6D7;    width:20%;}
 .comparativa ul li.shop{ text-align:center; background:#EEE7B6;    width:20%;} 



 .comparativa ul.principal li{ margin:0;   line-height:30px;   font-size:1.1em;  }
 .comparativa ul.principal li.title{ text-transform:uppercase;  font-size:1.2em; font-weight:bold; line-height:1em;     }

 .comparativa ul.contenido,
 .comparativa ul.principal  {width:100%;}
 .comparativa ul.contenido li{      margin:0;      font-size:1.2em; }
 .comparativa ul.contenido li.title{ text-transform:uppercase;  font-size:1.2em; font-weight:bold;   }
 .comparativa ul.contenido li.subtitle{ font-size:1.1em; color:#222; text-indent:1.5em; font-weight:400;  border-left:0;}

 .comparativa ul li.eco#precio{ padding:10px 0 10px 0;;font-size:3em; font-weight:600;  background:#bad146;  }
 .comparativa ul li.pyme#precio{  padding:10px 0 10px 0;;font-size:3em; font-weight:600;  background:#76c5f0;   ;}
 .comparativa ul li.pro#precio{  padding:10px 0 10px 0;;font-size:3em; font-weight:600;  background:#e7747b;    }
 .comparativa ul li.shop#precio{ padding:10px 0 10px 0;font-size:3em; font-weight:600;   background:#f6d700;   } 
 
  .comparativa ul.mantenimiento li.subtitle {   color:#222; font-size:1.2em ; text-indent:1.5em;  font-weight:normal;  border-left:0;}
 .comparativa ul.mantenimiento li div.precio{ font-size:40px; margin-bottom:0;}


/*********servicio HOSTING*************/
.servicios  ul.hosting { list-style-image:url(images/lista.png);float:left; width:30%;   padding:0;    line-height:1.3em; margin-top:20px; margin-left:20px;   text-align:left;font-size:1.2em;}
.servicios  ul.hosting  li{ margin-left:30px; }
.servicios h1.host { float:none;   }
.servicios  ul.hosting li.title { list-style-image:none ;  margin-left: 0px; font-size:1.4em;line-height:1.4em; text-transform:uppercase}
.servicios .buttons a.hosting{ float:left; padding:10px; margin-left:0px; margin-top:17px; background:#01acfe; border-radius:3px; color:#FFFFFF; font-size:1.6em;}
.servicios .buttons a.hosting:hover{  background:#92d6f7; }
.servicios .precio span.medium{font-size: 2.2em; ;}


/*********servicio renting*************/
.servicios  ul.renting { list-style-image:url(images/lista.png);float:left; width:30%;   padding:0;    line-height:1.3em; margin-top:20px; margin-left:20px;   text-align:left;font-size:1.2em;}
.servicios  ul.renting  li{ margin-left:30px; }
 .servicios  ul.renting li.title { list-style-image:none ;  margin-left: 0px; font-size:1.4em;line-height:1.4em; text-transform:uppercase}


/* ------------------------------------------------------------
----> #formulario de renting
------------------------------------------------------------ */
.renting_form{ width:100%;    padding-top:0px;  background:#e9f5f9;  border:1px solid #ccc;  }

.renting_form .simulador h3{ font-size:2em; color:#222; text-align:center;  font-weight: bold }

.renting_form .simulador{  margin:20px auto; margin-bottom:10px; width:95%; text-align:center;  border-radius:10px; }
.renting_form .simulador p{ line-height:12px; text-align:center; margin:0; padding:0; font-weight:bold; margin-top:3px; margin-bottom:5px; }
.renting_form .simulador p.light{ line-height:12px; text-align:center; margin:0; padding:0; font-weight:normal; margin-top:3px; margin-bottom:5px; }


/*importe*/
.renting_form .simulador .left{ float:left; width:20%;margin-top:14px; height:90px; margin-right:30px; background:#b3dae9; padding:10px; border-radius:10px; text-align:center }
.renting_form .simulador .left label{ margin:0; padding:0; width:95%;}
.renting_form .simulador .left input{ margin:0; padding:0; width:90%; margin:5px; padding:6px; text-align:center;}


/*meses*/
.renting_form .simulador .center{ float:left; width:21%;margin-top:14px; height:90px;  background:#b3dae9; padding:10px;border-radius:10px;text-align:center}
.renting_form .simulador label.meses{ width:95%; text-align:right; margin-top:10px; font-size:1.4em; }
.renting_form .simulador .mes {  width:18%; float:left; margin-left:4px; text-align:center; margin-bottom:10px;  }
.renting_form .simulador .mes label{  width:99%; margin:0; padding:0;font-size:1.3em; float:left}
.renting_form .simulador .mes input{border:0; background:none; width:30px; height:25px; margin-top:6px; margin-left:1px; }


/*cuota calculada*/
.renting_form .simulador .right{ float:left; width:30%; margin-left:30px; margin-top:14px; height:90px;  border-radius:5px;  background:#b3dae9; padding:10px; border-radius:10px;text-align:center}
.renting_form .simulador  .right label.rojo{  text-align:center; font-size:1.1em; color:#e50018}
.renting_form .simulador .right label.rojo2{ float:right; width:90px; color:#e50018;text-align:left; margin-right:20px;}
.renting_form .simulador  .right input{ width:120px; font-size:1.3em; text-align:center; font-weight:bold; border:none; color:#e50018; background:none}
 
.renting_form .simulador p.nota{ width:15%; float:right; font-weight:normal; text-align:right; font-size:1em; line-height:18px; margin-top:25px; font-style:oblique; }





.renting_form h5{ text-transform:uppercase; color:#000000; margin:15px 0 9px 0 ; padding:0;}
.renting_form h5.rojo{ color:#e50018; margin-bottom:0;}

/*campos a rellenar**/
.renting_form  legend { margin:20px; color:#01acfe;   font-size:2em; line-height:1.8em;text-align:center;   }

.renting_form .checks{ height:270px; background:url(images/renting-bg.png) right top no-repeat;    }
.renting_form .checks .right{ width:50%; float:left;  margin:0; padding:0;}
.renting_form .checks .right label { display:  block; font-size:1.2em; float: left; height: 20px; padding:0; margin-bottom: PX; line-height: 20px; width:94%; font-weight:300;color:#222 ; }
.renting_form .checks .right input { width:80%;  padding:3px;margin-bottom: PX;  ;}
.renting_form .checks .right input.captchac { width:25%; display:inline-block; margin-left:5px; clear:none}   
 .renting_form .checks   img.captcha {width:90PX; height:30px; padding:0; margin:0; margin-left:20px; float:left;  top:0;   display:inline-block  } 

 


.renting_form .checks .right label.gr { display: inline-block;  float: left; height: 33px; margin-bottom:10PX; padding-left:10px;line-height: 28px; width: 80%; text-align:left;  color:#000 ; }
.renting_form .checks  input#aviso{ border:none; background:none; float:left; margin:18px 0 0 10px; padding:0;   position:relative; width:15px;}


.renting_form .checks  input.submit { float:left; clear:both; margin:0;  margin-top:20px; margin-bottom:12px; cursor: pointer; border: 1px solid #01acfe; background:#01acfe; color:#fff;border-radius:3px; padding:9px 15px 9px 15px;  font-size:20px;  font-weight:bold;  text-transform:uppercase; letter-spacing:1px; }

.renting_form .checks h5{font-weight:bold;text-transform:uppercase; color:#000000; font-size:1.6em;}
.renting_form .checks .left{  width:28%;   float: left;  margin:0;margin-left:25px  ;padding:0; clear:both; }


.renting_form .checks .objeto{ width:100%; height:35px; clear:both;    }
.renting_form .checks .objeto input { border:0; background:none; position:relative;  float:left; width:18px; height:18px; display:block;  margin:0; padding:0;   }
.renting_form .checks .objeto p{ float:left; text-align:left; padding:0; margin:0; font-size:1.2em; margin:auto}


.renting_form .radio{ height:20px; margin-top:5px;  width:100%; text-align:left;  padding:0; margin:0;  }

.renting_form .radio h5 { margin:0;float:left; }
.renting_form .radio input {border:0; background:none;    position:relative;  float:left; width:20px; display:block;  margin:0; padding:0; margin-left:10px;  }
.renting_form .radio p{ width:25px; float:left; position:relative;  text-align:left; padding:0; margin:0; font-size:1em; }



.rentback{ width:99%; margin-bottom:10px; }
.rentback p{   text-align:left; font-size:0.95em; color:#000000; line-height:14px; margin:6px 0 0 0; padding:0; text-align:justify;}
.rentback span{ color:#e50018; font-weight:bold;}
.rentback input { border:0; background:none;float:left; width:20px;   display:block;  margin:0; padding:0; margin-top:9px;   }




input[type="checkbox"] {
   -ms-transform:scale(0.7,0.7); /* IE 9 */
}


























/* ------------------------------------------------------------
----> #contactar
------------------------------------------------------------ */
.mapa{  width:100%; margin:30px 0 50px 0}
.mapa iframe{ width:100%; min-height:380px; }

.service#contact { margin-top:0; padding:20px 0 0 0}
 .service#contact h2{ padding:  0; font-weight:700}



.contactar{float:right; width:40%;margin:50px 0; padding:0;  }

.contactar ul{ list-style:none; margin-left:10px; }
.contactar ul li{  margin:20px 0 25px 0; font-size:1.1em; color:#222;line-height:1.6em;  }

.contactar ul li i{ color:#222; width:50px; float:left;font-size:2em; text-align:center; padding:15px 5px  20px 0;  display:inline-block;}

.contactar ul li i.horario{   padding:  0;  display:inline-block;}
.contactar ul li span{     font-size:1.4em;  font-weight:bold;}

.contactar ul li i#gr{font-size:2em;}

 
.formulario{ float:left;  width:55%;  margin:20px;padding-top:10px;   ; 
border-radius:10px; margin-bottom:30px;   }

.formulario h3 { color:#01acfe; font-weight:bold; text-transform:uppercase; line-height:1em; font-size:1.6em; text-align:left; padding:0; margin:0;   }

  .formulario p{  font-size:1.3em;  padding-top:20px; line-height:1.3em; }

/***********FORM CONTACT***********/

fieldset {display: block; padding:10px; -moz-border-radius: 5px; -webkit-border-radius:5px; margin-top:20px }

  

label { width:100%;  color:#222; text-transform:uppercase; font-weight:bold; font-size:1em; margin-top:15px; }


#aviso{ border:none; background:none; float:left; margin: 0px 10px 0 0; padding:0;   position:relative; width:20px; height:20px}
input, textarea, select { width:100%;  margin: 0; padding: 6px; color: #666; background: #fefefe; border: 1px solid #ccc; margin: 5px 0 8px 0;  }   

.blogform input, .blogform textarea, .blogform select { width:100%;  margin: 0; padding: 6px; color: #666; background: #fefefe; border: 1px solid #ccc; margin: 5px 0 8px 0;  }   

input.check { width:20px; float:left; }   
label.gr {width: auto; text-align:right; margin-left:0; padding-top:20px;  }

textarea{ width:100%;  }   
input:focus, textarea:focus, select:focus { border: 1px solid #999; background-color: #fff; color:#333; }

input.submit { cursor: pointer; border: 1px solid #222; background:#222; color:#fff; font-weight:400; text-transform:uppercase; font-size:1.9em; font-family: 'Raleway', sans-serif;  
padding:5px 25px 5px 25px; width:50% ; display:block; margin:30px auto; }
input.submit:hover { background:#777; }


.verifica { width:100%; position:relative; margin-bottom:60px;   }
.verifica label {width: auto; text-align:left;  float:left;  ; padding:0; margin:0; margin-right:10px; display:inline-block  }
.verifica input {width: auto; text-align:left;  float:left;  ; padding:6px;; margin:0;  }

.verifica  .captcha {width:120PX; height:40px; padding:0; margin:0; float:left; position:absolute ; top:0;   display:inline-block  } 
 .verifica  .captcha img{width:100PX; height:30px; padding:0; margin:0; margin-left:20px; float:left; position:absolute ; top:0;   display:inline-block  } 

 

@media  (max-width: 978px){ 

.contactar{float:right; width:38%;   }
label { width:100%;  color:#222; text-transform:uppercase; font-weight:600; font-size:0.9em; margin-top:15px; }

}



@media  (max-width: 768px){ 
.mapa{  width:100%; margin:30px 0 30px 0}
.mapa iframe{ width:100%; min-height:300px; }
.contactar{float:none; width:100%;margin:20px 0; padding:0;  }

 
.formulario{ float:none; width:90%;  margin:20px 0 0 10px;;padding:10px;   ; 
border-radius:10px; margin-bottom:30px;   }
  .formulario p{  font-size:1.2em;  padding-top:20px; line-height:1.3em; }

input.submit {   font-size:1.4em; font-family: 'Raleway', sans-serif;  
 ; width:90% ; display:block; margin:30px auto; }

}



@media  (max-width: 420px){ 
.mapa{  width:100%; margin:30px 0 30px 0}
.mapa iframe{ width:100%; min-height:200px; }

}





/* ------------------------------------------------------------
----> # politicas - avisos legales
------------------------------------------------------------ */
.politicas { margin:0 auto; max-width:1200px; padding:50px 0 50px 0}
.politicas p { line-height:1.6em;   }

.politicas ul { line-height:1.6em; font-size:1.1em; padding:20px; list-style:disc }

.politicas h4 { margin:20px; margin-left:0; font-size:1.5em; font-weight:900; text-transform:uppercase;}

/* --------------------------------------------------
----> #enlaces
------------------------------------------------------------ */
#sub-footer{
   
	 height:300px;background:#f4f4f4; border-top:1px solid #dededd; padding-bottom:20px; padding-top:13px; margin-top:20px; }
#sub-footer .enlaces{ max-width:1200px; margin:16px auto;   height:100%;}

#sub-footer .enlaces ul{ width:20%;   float:left; margin:15px 0 25px 0; line-height:1.5em;}


#sub-footer .enlaces ul li{ margin:0; padding:5px 0 0 0;line-height:1.3em;color:#999;font-weight:bold;font-size:0.9em;}
#sub-footer .enlaces ul li a{  color:#777;}
#sub-footer .enlaces ul li a:hover{   color:#666; text-decoration:none;}

#sub-footer .enlaces ul li.title1, #sub-footer .enlaces ul li.title2,#sub-footer .enlaces ul li.title3, #sub-footer .enlaces ul li.title4, #sub-footer .enlaces ul li.title5{ text-align: left; text-transform:uppercase; color:#222}

#sub-footer .enlaces ul li.title1:before, #sub-footer .enlaces ul li.title2:before, #sub-footer .enlaces ul li.title3:before, #sub-footer .enlaces ul li.title4:before, #sub-footer .enlaces ul li.title5:before{color:#222;  font-size:2em;
 	content:"\f044";  display:block; padding-bottom:22px; 
	  font-family: "Font Awesome 5 Free"; font-weight: 900;   text-align: left; padding-left:30px;}
	
#sub-footer .enlaces ul li.title2:before{content:"\f0ac"; }
#sub-footer .enlaces ul li.title3:before{content:"\f233";}
#sub-footer .enlaces ul li.title4:before{ content:"\f2d2";}
#sub-footer .enlaces ul li.title5:before{ content:"\f085";}


/***enlaces / estilos para movil**/

#sub-footer .enlaces_mobile{ display:none; width:90%; margin:10px;   height:360px;}

#sub-footer .enlaces_mobile ul{ width:70%; margin-left:50px;}
#sub-footer .enlaces_mobile ul li{  padding-left:20px;line-height:22px;color:#bbb;font-weight:bold;font-size:1.5em;} 
#sub-footer .enlaces_mobile ul li a{color:#222;}#sub-footer .enlaces_mobile ul li a:hover{color:#aaa;}

#sub-footer .enlaces_mobile ul li.title1{color:#222;  font-size:1.4em; text-transform:uppercase;background:url(images/icon1.png) 50px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 100px;}
#sub-footer .enlaces_mobile ul li.title2{ color:#222;  font-size:1.4em;text-transform:uppercase;background:url(images/icon2.png)50px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 100px;}
#sub-footer .enlaces_mobile ul li.title3{ color:#222;  font-size:1.4em; text-transform:uppercase;background:url(images/icon3.png) 50px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 100px;}
#sub-footer .enlaces_mobile ul li.title4{  color:#222;  font-size:1.4em; text-transform:uppercase;background:url(images/icon4.png)50px 0 no-repeat;  background-size:35px 35px;  padding: 10px 0 20px 100px;}
#sub-footer .enlaces_mobile ul li.title5{ color:#222;  font-size:1.4em; text-transform:uppercase;background:url(images/icon5.png)50px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 100px;}

@media  (max-width: 1200px){  
#sub-footer .enlaces ul li{ margin:0; padding:3px 0;}
 }

@media  (max-width: 978px){ 
#sub-footer .enlaces ul{ width:18%;   float:left; margin:15px 0 25px 15px; line-height:1.5em;}
  
#sub-footer .enlaces ul li{ margin:0; padding:5px 0;line-height:1.5em; font-size:0.9em;} 


#sub-footer .enlaces ul li.title1{ text-transform:uppercase;background:url(images/icon1.png)  0px 0 no-repeat;  padding-left:0px;  font-size:1em; }
#sub-footer .enlaces ul li.title2{text-transform:uppercase;background:url(images/icon2.png)  0px 0 no-repeat;  padding-left:0px;  font-size:1em; }
#sub-footer .enlaces ul li.title3{ text-transform:uppercase;background:url(images/icon3.png)   0px 0 no-repeat;  padding-left:0px;  font-size:1em; }
#sub-footer .enlaces ul li.title4{ text-transform:uppercase;background:url(images/icon4.png)  0px 0 no-repeat;  padding-left:0px;  font-size:1em; }
#sub-footer .enlaces ul li.title5{ text-transform:uppercase;background:url(images/icon5.png)  0px 0 no-repeat;  padding-left:0px;  font-size:1em; }

 }

@media  (max-width: 768px){ 

#sub-footer{ height:300px;}
#sub-footer .enlaces{   display:none}
#sub-footer .enlaces_mobile{  display:block}
#sub-footer .enlaces_mobile ul{ width:80%; margin-left:2px; font-size:0.8em; line-height:0.8em;}


 }
 
 @media  (max-width: 420px){  

#sub-footer{ height:280px;}
#sub-footer .enlaces{   display:none}
#sub-footer .enlaces_mobile{  display:block}
#sub-footer .enlaces_mobile ul{ width:99%; margin-left:2px; font-size:0.8em; line-height:0.8em;}
#sub-footer .enlaces_mobile ul li.title1{color:#222;  font-size:1.3em; text-transform:uppercase;background:url(images/icon1.png) 10px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 50px;}
#sub-footer .enlaces_mobile ul li.title2{ color:#222;  font-size:1.3em;text-transform:uppercase;background:url(images/icon2.png) 10px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 50px;}
#sub-footer .enlaces_mobile ul li.title3{ color:#222;  font-size:1.3em; text-transform:uppercase;background:url(images/icon3.png) 10px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 50px;}
#sub-footer .enlaces_mobile ul li.title4{  color:#222;  font-size:1.3em; text-transform:uppercase;background:url(images/icon4.png) 10px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 50px;;}
#sub-footer .enlaces_mobile ul li.title5{ color:#222;  font-size:1.3em; text-transform:uppercase;background:url(images/icon5.png) 10px 0 no-repeat; background-size:35px 35px;  padding: 10px 0 20px 50px;}

 }


/* ------------------------------------------------------------
----> #footer
------------------------------------------------------------ */
footer{ background:#111; padding-top:40px; width:100%; padding-bottom: 0px;   }
 
footer  .box {
	float : left; text-align:center;
	width : 25%; display:inline-block;      }
 	
footer .box h3{ font-size:1.2em; font-weight:600; margin:0; padding-bottom:20px; text-transform:uppercase; color:#fff; }
footer .box  img{ margin:10px auto; padding:0; max-width:150px; display:block; }
footer  .box p{ font-size:0.8em; margin:0 auto; padding-top:5px;  padding-bottom:0; text-align: center; width:80%; line-height:1.4em;  color:#ccc; }
footer   .box   a.link{ color:#fff; font-size:1.2em; text-decoration:underline } 
footer  .box  img.partner{ margin:5px  auto;  padding:0;  max-width:140px;}
footer  .box p.phone{ font-size:1em; margin:10px auto; display:block; }
footer  .box p.phone span{ font-size:2em; font-weight:800;color:#01acfe}

/*soporte y ayuda*/
footer ul.ayuda{ width:80%; margin:0 auto}
footer ul.ayuda li { text-align:left; font-size:0.9em; padding:10px 0 20px 0; line-height:1.3em;  }

footer ul.ayuda li  i{ float:left;font-size:2em; padding-right:10px; color:#01acfe}
footer ul.ayuda li  a{ text-align:left;; color:#fff}

footer ul.ayuda li  a strong{font-size:1.1em; font-weight:800; margin:0; padding:0; padding-bottom:5px;text-transform:uppercase; color:#fff }
footer ul.ayuda li  p { font-size:0.9em; text-align:left; padding:2px; margin-top:0px; }
 
footer  ul.ayuda li  a:hover strong,  ul.ayuda li  a:hover p{ color:#fff}


/*******redes sociales***************/ 
footer ul.redes { width:80%; height:40px;  margin:0px auto; padding:0  ;}
footer ul.redes li{ float:left;  width:18%; height:40px; padding:2px;}

footer ul.redes li a i{ color:#fff;  font-size:1.4em;
 	content:"";  display:block; padding-bottom:22px;   text-align: center; padding-left:30px; }
	
footer ul.redes li a:hover{ color:#01acfe;}

footer ul.redes li a.faceb:before{  content:"\f082"; } 
footer ul.redes li a.twitter:before{  content:"\f099"; } 
footer ul.redes li a.youtube:before{  content:"\f167"; } 
footer ul.redes li a.google:before{  content:"\f0d5"; } 
footer ul.redes li a.blog:before{  content:"\f781"; } 

 

/* ------------------------------------------------------------
----> #PIE
------------------------------------------------------------ */
#pie { width:100%;
	background : #01acfe ;
	min-height : 70px;
	border-top : 1px solid #0465C6;
	  padding-top:5px;
 text-align:center; 
	margin : 0;
	color : #111;}

#pie p {  font-size:0.9em; font-weight:400;
	  text-align:center; padding-top:8px;  text-transform:uppercase
}
#pie p.avisos {  font-size:0.9em; font-weight:400;
	  text-align:center; padding-top:8px;  text-transform: none
}

 #pie p.avisos a{ color:#FFFFFF}

#pie p strong{font-weight:800; }
#pie p a { 
	color : #111; font-weight:600;
}
#pie p a:hover {  
	color : #555;
}

.verif{ display:none}
 
@media  (max-width: 1200px){ 
 
footer  ul.ayuda{ width:100%; margin:0 auto}

  }

@media  (max-width: 978px){  
footer  .box  {width : 45%; height:auto ; margin-left: 0px;   }
footer    ul.redes {  max-width:300px; margin:0 auto;}


 
 }

@media  (max-width: 768px){ 
 
footer { height:auto; width:95%; float:none;  text-align:left; margin:0; padding:20px 0 ; margin-left:5px;}
footer  .box{width : 90%;  margin:0 auto ; text-align:center; height:auto; padding-bottom:20px;    }
  footer   p {  text-align:left;} 
 footer  .box  img.partner{ display:inline;}
  
 /*soporte y ayuda*/
footer ul.ayuda{ margin-left:10%;}
footer ul.ayuda li { width:80%; font-size:1em; padding:10px 0 10px 50px ; text-align:left;}
footer ul.ayuda li  a h5{font-size:1.1em; font-weight:normal; margin:0; padding:0;text-transform:uppercase; color:#999 } 
 
 
 }
 
 @media  (max-width: 420px){   
 
 footer  .box{width : 98%;}

footer ul.ayuda{ margin-left:5px;}
footer  ul.ayuda li { width:90%; font-size:0.8em; padding:10px 0 10px 10px ; text-align:left;}
 footer   p { padding:0;} 

#pie p { font-size:0.9em; height:80px;
}

 }

 

span.required{ font-size: 13px; color: #ff0000; } /* Select the colour of the * if the field is required. */

/* Style for the error message */

.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../imagenes/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 10px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; }

.success_page  { display: block; height: 45px; line-height: 25px; background: #FBE3E4 url('../imagenes/success.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; margin: 10px 0; color:#8a1f11;border: 1px solid #FBC2C4; -moz-border-radius: 5px; -webkit-border-radius:5px; }




#contactform{ margin-top:150px; font-size:2em;
    font: 14px/20px 'Economica', sans-serif; color:#333333; width:100%; padding:20px; text-align:center;}
#contactform img{ width:50%;}

#contactform h2{ 
    font: 14px/20px 'Economica', sans-serif; font-size:4em;}

#contactform p{ 
    font: 14px/20px 'Economica', sans-serif; font-size:2em;}









/**cookies*******************/
#cookies { width:100%; min-height:90px; background:#000;text-align:center; color:#fff ; position:absolute; bottom:0;  z-index:10000; margin:0  ;    filter:alpha(opacity=90);
    -moz-opacity:.90;opacity:.90;  
	
position:fixed; padding:10px 0;
	}
	 
 
#cookies p{ text-align:center;font-size:0.9em; font-weight:400;  margin-bottom:3px; padding-top:2px; padding-top:3px; line-height:1.3em;}

#cookies span.acepto  {  font-size:16px; color:#000; background:#fff ; border-radius:6px; line-height:20px; padding-bottom:5px; margin-top:15px;   padding-right:17px; padding-left:17px; margin-right:30px; }

#cookies img{ float:left; margin-left:15px; margin-right:15px; margin-top:0px; }
#cookies p a{padding-top:25px; color:#FFFFFF; text-decoration:underline }
	
#cookies span{ background:#fff; border-radius:3px; padding:4px; color:#111; margin-right: 6px; padding-left:4px;font-size:0.90em; }	





/****/
#wrapper .politica{ max-width:1200px; margin:50 auto; height:590px; background:#fafafa;  border:1px solid #f5f5f5; 
border-radius:10px; }
#wrapper .politica h1{ color:#01acfe; font-size:1.6em; padding-left:30px; padding-top:30px; }
#wrapper .politica h1 span{ font-weight:bold;}
#wrapper .politica p{ color:#555; font-size:0.9em; padding-left:30px; padding-right:30px; text-align:justify; padding-top:8px; padding-bottom:0; line-height:22px;  }


 @media  (max-width: 1200px){ 
  
/* - #formulario de renting------------------------------- */
.renting_form .simulador .mes {  width:16%;  }
.renting_form .checks .left{  width:28%;   float: left;  margin:0;margin-left:25px  ;padding:0; }

/*soporte y ayuda*/
ul.ayuda{ margin-left:20px;}
ul.ayuda li { width:95%; font-size:1.1em; padding:10px 0 10px 50px;}
ul.ayuda li  a h5{font-size:1.1em; font-weight:normal; margin:0; padding:0;text-transform:uppercase; color:#999 }



}


@media ( (max-width: 978px) {   
.comparativa ul li img{  width:80%; text-align:center;}
.comparativa ul li { font-size:0.9em;}
.comparativa ul.contenido li.subtitle,  .comparativa ul.mantenimiento li.subtitle {  text-indent:0.1em;}
 
 
/* - #formulario de renting------------------------------ */
.renting_form .simulador p.nota{ width:95%; float:none; clear:both ; text-align:center; padding-top:10px;}
.renting_form .simulador .left{  width:28%}
.renting_form .simulador .center{  width:29%;}
.renting_form .simulador .right{  width:25%; }
.renting_form .checks{   background:none;    }
.renting_form .checks .left{    width:35%; font-size:1em; margin-left:15px; }


.renting_form .checks .right{ width:62%;} 



/*contact form*/ 
 label{ display:block}

 label.gr,  label.big {width: auto;display:inline-block  ; text-align:left;}
textarea{ max-width:500px;}
 
#pie {	height : auto;}

#pie p { padding-top:2px;
}


.contactar ul li { font-size:1.2em;}
.contactar ul li i { width:30px; height:35px;font-size:1.5em}

 .contactar ul li i#gr { font-size:1.8em}

}  



@media  (max-width: 767px) {
 
h1.title{ line-height:1em; font-size:3.5em;}

h1{ font-size:2em;}

h2{ line-height:1em;}

  

/*comparativa webs / cambia formato*/

 .comparativa p.notas{ margin-top:50px; font-size:1.2em; font-style:oblique}
.comparativa ul li { width:90%; float:none; margin:0; padding:10px 0 10px 0       }
.comparativa ul.images li.vacia{ display:none}

.comparativa ul.images li{ font-weight:600;   width:24%; margin:0; padding:0; display:inline-block; text-align:center float:left;}
.comparativa ul li.eco,  .comparativa ul li.pyme,  .comparativa ul li.pro,  .comparativa ul li.shop{ float:left;  width:24%; font-size:1em;} 
.comparativa ul.contenido li.subtitle,  .comparativa ul.mantenimiento li.subtitle {  text-indent:0.1em; font-size:0.9em; line-height:1em;}

 .comparativa ul li.eco#precio, 
 .comparativa ul li.pyme#precio, 
 .comparativa ul li.pro#precio, 
 .comparativa ul li.shop#precio{ font-size:2em; }

.comparativa ul.mantenimiento li.subtitle { font-size:1.1em; font-weight:400;}
.comparativa ul.mantenimiento li div.precio{  font-size:1.7em;font-weight:bold;    }
.comparativa ul.principal li.title, .comparativa ul.contenido li.title, .comparativa ul.mantenimiento li.title{font-size:1.2em; line-height:1em; font-weight:bold;  }
 
.servicios  ul.renting {  width:90%;  }

/* - #formulario de renting------------------------------ */
 
.renting_form .simulador p.nota{ width:95%; float:none; clear:both ; text-align:center;  }
.renting_form .simulador .left, .renting_form .simulador .center , .renting_form .simulador .right{ float:none; margin:0; margin-top:6px; padding:5px;  width:90%}

.renting_form legend{ font-size:1.6em; line-height:1em;}
.renting_form .checks{   background:none; clear:both  }
.renting_form .checks .left, .renting_form .checks .right{ width:95%; float:none} 
.renting_form .checks .right{ margin-left:30px;} 
.renting_form .checks .right label { font-size:1.1em;width:95%; float: none; height: auto; margin:0; padding:0; line-height:20px;   }
.renting_form .checks .right input { width:85%;padding:3px; margin:0; clear:both;}

.renting_form .checks .right label.gr { margin-bottom:0; line-height: 2em; width: 75%;   }
.renting_form .checks  input.submit {  text-align:center;  }
  
  
/*botons de enlaces a Diseño Web  provincias */
 .provincias a{ margin:5px; padding:10px;width:48%; font-size:1.1em; display:block; float:left; text-align:center; background:#f6f6f6; border:1px solid #eee; }


h2.portfolio{ color:#222; padding-bottom:3%; padding-top:3%;  font-size:2em; line-height:1em;}

 

 }


@media (max-width: 420px) { 

img{ width:100%}  
 
 
h1.title{ line-height:1em; font-size:3em;}

h1.center{ line-height:1em; font-size:2em; width:90%; }
  

/*comparativa webs*/

/*comparativa webs / cambia formato*/

 .comparativa p.notas{ margin-top:50px; font-size:1.1em; font-style:oblique; line-height:1.3em;}
.comparativa ul li { width:90%; float:none; margin:0; padding:10px 0 10px 0       }
.comparativa ul.images li.vacia{ display:none}

.comparativa ul.images li span{ display:block;}
  .comparativa ul li.eco#precio, 
 .comparativa ul li.pyme#precio, 
 .comparativa ul li.pro#precio, 
 .comparativa ul li.shop#precio{ font-size:1.8em;  font-weight:700;  }
 
 
.servicios  ul.renting {  width:90%;  }
		
 
 
/* - #formulario de renting------------------------------ */
 
.renting_form .simulador p.nota{ width:95%; float:none; clear:both ; text-align:center;  }
.renting_form .simulador .left, .renting_form .simulador .center , .renting_form .simulador .right{ float:none; margin:0; margin-top:6px; padding:5px;  width:90%}
.renting_form legend{ font-size:1.6em; line-height:1em;}
.renting_form .checks{    background:none; clear:both  }
.renting_form .checks .left, .renting_form .checks .right{ width:98%;  margin-left:8px; float:none} 
.renting_form .checks .objeto{ width:90%; height:18px; clear:both;    }
.renting_form .simulador .mes {  margin-left:1px;  }

.renting_form .checks .right label { font-size:1.1em;width:95%; float: none; height: auto; margin:3px 0; padding:0; line-height:20px;   }
.renting_form .checks .right input { width:90%;padding:3px; margin:0; clear:both;}
.renting_form .checks .right label.gr { margin-bottom:0; line-height: 14px; width: 75%;   }
 
	 
 }

 
 
 #404{ padding:   30px; max-width:1200px; margin:0 auto; position:relative;  text-align:center; padding-top:90px; font-size:2em; font-weight:300} 
 
 #404 p,   #404 h2{  text-align:center;   font-weight:300}