/* DISEÑADO / MAQUETADO / PROGRAMADO POR: POR OBJETIVO VIRTUAL :) */

/*=====================================================================
RESET:
======================================================================*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,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,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; list-style: none;}body{line-height:1}ol,ul{list-style:none}q{quotes:none}q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}.clearfix{clear:both;}a {text-decoration:none;color:#000;}h1, h2, h3, h4, h5, h6 {font-weight:normal;}a:hover, a:focus {text-decoration:none;}

/*=====================================================================
ESTILOS GENERALES:
======================================================================*/

/* COLORES GENERALES DEL SITIO */

@c00: #000000;  /* NEGRO */
@c0:  #ffffff;  /* BLANCO */	
@c1:  #0094ce;  
@c2:  #0094ce;  
@c3:  #008cff;  
@cg1: #636363;
@cg2: #CACACA;
@cg3: #838383;
@cg4: #A3A3A3;
@cg5: #D3D3D3;
@cg6: #D3D3D3;

/**************** FUENTES ****************/

.font1 {font-family: 'Abel', sans-serif;}
.font2 {font-family: 'Open Sans', sans-serif;}
.font3 {font-family: 'Roboto Condensed', sans-serif;}
.font4 {font-family: 'Open Sans Condensed', sans-serif;}

body, aside, section, article, hgroup, textarea, input, p, h1, h2, h3, h4, h5, div, li, span{.font2}

/*=====================================================================
BASE:
======================================================================*/

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

html {overflow-x: hidden;}
body {overflow: hidden;}

.none {display:none;}
.over {overflow:hidden;}
.f-left {float:left;}
.f-right {float:right;}

/**************** TIPOGRAFICOS ****************/

h1 {font-size:15px;margin:0px;}
.strong {font-weight: 700;}
.italic {font-style: italic;}

/**************** OPACIDAD ****************/

.op00 {opacity: 0.0;filter: alpha(opacity=00);}
.op10 {opacity: 0.1;filter: alpha(opacity=10);}
.op20 {opacity: 0.2;filter: alpha(opacity=20);}
.op30 {opacity: 0.3;filter: alpha(opacity=30);}
.op40 {opacity: 0.4;filter: alpha(opacity=40);}
.op50 {opacity: 0.5;filter: alpha(opacity=50);}
.op60 {opacity: 0.6;filter: alpha(opacity=60);}
.op70 {opacity: 0.7;filter: alpha(opacity=70);}
.op80 {opacity: 0.8;filter: alpha(opacity=80);}
.op90 {opacity: 0.9;filter: alpha(opacity=90);}
.op100 {opacity: 1.0;filter: alpha(opacity=100);}

/**************** EFECTOS ****************/

.eff (@eff:0) {-webkit-transition: all ~"@{eff}s" ease;-moz-transition: all ~"@{eff}s" ease;-o-transition: all ~"@{eff}s" ease;transition: all ~"@{eff}s" ease infinite;}
.eff-rotate (@rotate:0){-moz-transform: rotate(~"@{rotate}deg");-webkit-transform: rotate(~"@{rotate}deg");-o-transform: rotate(~"@{rotate}deg");-ms-transform: rotate(~"@{rotate}deg");transform: rotate(~"@{rotate}deg");}


/**************** ESCALA DE GRISES ****************/

.grayy (@grayy:0%) {-webkit-filter: grayscale(@grayy);-moz-filter: grayscale(@grayy);-ms-filter: grayscale(@grayy);-o-filter: grayscale(@grayy);filter: grayscale(@grayy); filter: Gray();}

/**************** BORDES ****************/

/* BORDES INTELIGENTES */

.border-left {-webkit-box-shadow: -1px 0px 0px 0px @cg5;-moz-box-shadow:-1px 0px 0px 0px @cg5;box-shadow: -1px 0px 0px 0px @cg5;}
.border-right {-webkit-box-shadow: 1px 0px 0px 0px @cg5;-moz-box-shadow:1px 0px 0px 0px @cg5;box-shadow: 1px 0px 0px 0px @cg5;}
.border-bottom {-webkit-box-shadow: 0px 1px 0px 0px @cg5;-moz-box-shadow:0px 1px 0px 0px @cg5;box-shadow: 0px 1px 0px 0px @cg5;}
.border-top {-webkit-box-shadow: 0px -1px 0px 0px @cg5;-moz-box-shadow:0px -1px 0px 0px @cg5;box-shadow: 0px -1px 0px 0px @cg5;}

/* BORDES CIRCULARES */

.radd (@radd:0px) {-webkit-border-radius: @radd;-moz-border-radius: @radd;border-radius: @radd;}
.rad5bot {-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;-moz-border-radius-bottomright: 5px;-moz-border-radius-bottomleft: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;}
.rad10bot {-webkit-border-bottom-right-radius: 10px;-webkit-border-bottom-left-radius: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}
.rad5top {-webkit-border-top-right-radius: 5px;-webkit-border-top-left-radius: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-topleft: 5px;border-top-right-radius: 5px;border-top-left-radius: 5px;} 
.rad10top {-webkit-border-top-right-radius: 10px;-webkit-border-top-left-radius: 10px;-moz-border-radius-topright: 10px;-moz-border-radius-topleft: 10px;border-top-right-radius: 10px;border-top-left-radius: 10px;} 

/**************** SOMBRAS ****************/

.sombra {background: url(../img/sombra.png) no-repeat top; background-size: 100% 20px; }	
.sombra-on {background: url(../img/sombra.png) no-repeat top; background-size: 100% 20px; height: 20px;   float: left;  width: 100%;}

/**************** FONDOS ****************/

.backk (@backk:100% 100%) {  -webkit-background-size: @backk;  -moz-background-size: @backk;  -o-background-size: @backk;  background-size: @backk;}


/**************** FONDOS DEGRADE ****************/

.grad-black {background: rgb(85,85,85);background: -moz-linear-gradient(top,  rgba(85,85,85,1) 0%, rgba(37,37,37,1) 100%);background: -webkit-linear-gradient(top,  rgba(85,85,85,1) 0%,rgba(37,37,37,1) 100%);background: linear-gradient(to bottom,  rgba(85,85,85,1) 0%,rgba(37,37,37,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#252525',GradientType=0 );}


/**************** OBJETIVO VIRTUAL ****************/

#footer_ov {float:right;}
#footer_ov p {opacity: 0.7;filter: alpha(opacity=20); color:@c0;  font-size:18px; float:left; margin:0px 5px 0px 0px;.font1; line-height: 25px}
#footer_ov:hover p {opacity: 1;filter: alpha(opacity=50);}
#footer_ov img {float:left}
#footer_ov:hover img {opacity: 1;filter: alpha(opacity=100);}

/**************** PAGINADOR ****************/

#paginador {
	.paginador_bottom {width: 100%;float: right; margin:30px 0px;}
	.contenedor_paginador {float: right;margin-bottom: 15px;margin-top: 12px;}
	.text {float: left;color: @cg3;	font-weight: 400;	margin-top: 5px;}
	.contenedor_paginador a {.font1; background-color: #ffffff;	font-size: 15px;margin-left: 5px;width: 30px;	height: 30px;	border: 1px solid @cg2;	float: left;	text-align: center;	padding:7px;	color: @cg3;}
	.contenedor_paginador .activado, {width: 30px; height: 30px;	background-color: @c3;	float: left;	text-align: center;	color: #ffffff;	padding:7px;	border: none;}
	.contenedor_paginador a:hover {width: 30px; height: 30px;	background-color: @cg3;	float: left;	text-align: center;	padding:7px;	border: none; color:@c0;}
}


/**************** SCROLL UP ****************/

#scrollUp {bottom: 20px;right: 20px;height: 38px;width: 38px;background: url(../img/top.png) no-repeat;}

/*=====================================================================
ESTRUCTURA:
======================================================================*/

/**************** HEADER ****************/

	/* width */
	::-webkit-scrollbar { width: 8px;}
	/* Track */
	::-webkit-scrollbar-track { background: #f5f5f5; }
	 /* Handle */
	::-webkit-scrollbar-thumb {background: rgb(66,66,66);
	background: linear-gradient(0deg, rgba(66,66,66,1) 0%, rgba(130,130,130,1) 100%); .radd (@radd:0px); }
	/* Handle on hover */
	::-webkit-scrollbar-thumb:hover { background: #999; }


	.header-background {position:relative;width:100%;height: 175px;background:url(../img/header-center.png) 40% bottom no-repeat;z-index: 1000;}

	header {position:relative;width:100%;height: 175px;}
	header {
		#logo {margin: 0 auto; position:relative;display: inline-block;float:left;margin-top: 38px;}
		#logo .img-logo-sm {display: none;}
		nav {float:right;margin-top:40px;}
		nav .nav-principal a, nav .nav-principal button {.font3; font-weight: 300; font-size:21px;border:none; background:none;float:left;padding:0px 20px; border-left:1px solid @cg2; color:@cg1;}
		nav .nav-principal a:hover, nav .nav-principal button:hover, nav .nav-principal .seleccionado {color:@c1;}
		nav .nav-principal .btn-group:first-child a{border-left: none;}
		nav .nav-principal .btn-group:last-child a{padding-right: 0px;}
		.nav-principal {padding:0px;float:right;}
		.btn-group {float:left;}
		.caret {}
		.navbar-toggle {background:url(../img/menu.png) bottom no-repeat; height: 40px; width: 40px;}
		.box-contacto {float:right; clear: right;margin-top:63px;}
		.box-contacto {
			span, a {.font1; color:@c0; font-size:24px; font-weight: 300; border: none; padding:0px;    line-height: 30px;}
			.telefono {float:right;}
			.telefono .ico-tel {background:url(../img/ico-tel.png) bottom no-repeat; width: 30px; height: 30px; float:left;margin-right:5px;}
			.contacto {float:right; margin-left:20px; padding-left:20px;}
			.contacto .ico-email {background:url(../img/ico-email.png) bottom no-repeat; width: 30px; height: 30px; float:left;margin-right:10px;}
		}
		.dropdown {position: initial;}
		.dropdown-menu {box-shadow: none;padding:0px;}
		.dropdown-menu li a{border:none; background:none;float:left; width: 100%;padding: 8px 20px; border-top:1px solid @cg5;}	
		.dropdown-menu li:first-child a{border:none; border-right: 1px solid #d3d3d3;}
		.dropdown-menu .divider{width: 100%;display: inherit;}
		.dropdown-menu {.radd (@radd:0px;); width: 315%; margin-top:24px;left: -1%;}
		.dropdown-menu li {float:left; width: 50%;}
		.dropdown-menu li:nth-child(2) a {border:none;}
		.dropdown-menu li:nth-child(8) a {height: 1px; padding:0px;}
		.dropdown-menu li:nth-child(1n+2) a {border-right: 1px solid #d3d3d3;}
		.dropdown-menu li a strong {.font1;color:@cg1; font-weight: 300; vertical-align: middle;    display: inline-block;     z-index: 10000;font-size:16px;}
		.dropdown-menu li a{display:table-cell; vertical-align:middle; }
		.dropdown-menu li a span {width: 18px; height: 18px; margin-right: 10px;vertical-align: middle;    display: inline-block;.eff (@eff:2.5) }
		.dropdown-menu li a:hover span{.eff (@eff:5); .eff-rotate (@rotate:90;)}
		.dropdown-menu li .web span {background:url(../img/icons.png) 0px 0px no-repeat;}
		.dropdown-menu li .catalogo span {background:url(../img/icons.png) 0px -30px no-repeat;}
		.dropdown-menu li .email span {background:url(../img/icons.png) 0px -57px no-repeat;}
		.dropdown-menu li .social span {background:url(../img/icons.png) 0px -83px no-repeat;}
		.dropdown-menu li .grafico span {background:url(../img/icons.png) 0px -112px no-repeat;}
		.dropdown-menu li .multimedia span {background:url(../img/icons.png) 0px -139px no-repeat;}
		.dropdown-menu li .hosting span {background:url(../img/icons.png) 0px -166px no-repeat;}
		.dropdown-menu li .posicionamiento span {background:url(../img/icons.png) 0px -194px no-repeat;}
		.dropdown-menu li .fotografia span {background:url(../img/icons.png) 0px -220px no-repeat;}
		.pestana {border-top:1px solid @cg2; border-left:1px solid @cg2;     width: 28px;    height: 28px;    position: absolute;  top: -15px; background-color: @c0;left: 52px;z-index: -1;.eff-rotate(@rotate:45;)}
		.dropdown-menu li:hover .pestana {background-color: #f5f5f5;}
		.dropdown-menu li .pestana:hover {background-color: @c0;}
		}

	/**************** RESPONSIVO ****************/

	/* 1199PX */

	@media only screen and (max-width: 1199px) { 
		.header-background {background-position: 50% bottom;height: 155px; -webkit-background-size: auto 100%;  -moz-background-size: auto 100%;  -o-background-size: auto 100%;  background-size: auto 100%;}
		header {height: 155px;}
		header {				
			#logo img {width: 85%}
			nav a, nav button {font-size:20px;}
			.box-contacto {margin-top:50px;}
			.box-contacto span, .box-contacto a {font-size:20px;}
		}
	}

	/* 991PX */

	@media only screen and (max-width: 991px) { 
		.header-background {background-position: 61% bottom;height: 175px; -webkit-background-size: auto 90%;  -moz-background-size: auto 90%;  -o-background-size: auto 90%;  background-size: auto 90%;}
		header {text-align: center;height: 175px;}
		header {				
			.box-header {width: 100%; text-align: center;}
			#logo {    display: inline-block;    float: inherit; margin-top:25px;}
			#logo img {display: inline-block; width: 100%}
			nav {float: inherit;   display: inline-block; margin-top:15px;}
			.box-contacto {margin-top:36px;}
		}
	}

	/* 767PX */

	@media only screen and (max-width: 767px) { 
		.header-background {background-position: 88% bottom;height: 150px; -webkit-background-size: auto 110%;  -moz-background-size: auto 110%;  -o-background-size: auto 110%;  background-size: auto 110%;}
		header {text-align: center;height: 150px;}
		header {	
			.navbar-toggle { width: 110px;   font-size: 20px;    text-align: left;   padding: 0px;   background-position: center right;   color: @cg3; margin:8px 0px 0px 0px}
			.box-header {width: 100%; text-align: center;}
			#logo {float: left; margin-top:30px;}
		    	.navbar-header {position: absolute;right: -7px;top: 17px;}
			.header-outer {position: relative;}
			nav {margin-top:20px;float:right; width: 100%}
			.nav-principal {margin: 60px 0px 0px 0px; width: 100%;}
			nav .nav-principal a, nav .nav-principal button, .btn-group {width: 100%; float:left; text-align: center;border:none; }
			nav .nav-principal a, nav .nav-principal button {border:none; border-bottom:1px solid @cg5;padding:10px 0;}
			.dropdown-menu {float: left;width: 100%;position: inherit;background-color:#f2f2f2;}
			 .box-contacto {margin-top:18px; position: absolute; right: 0px;}
			 .pestana {display: none;}
			.navbar-nav .dropdown-menu {width: 100%;border:none!important; float:left;padding:0px!important;left: 0%;background-color:#f2f2f2;padding-bottom:10px;}
			.navbar-nav .dropdown-menu li {width: 100%;border:none!important;float:left;padding:0px!important;}
			.navbar-nav .dropdown-menu > li > a, {border-bottom:1px solid @cg5; background-color:#f2f2f2;padding: 10px 0!important;font-size:17px; line-height: initial;}
			.navbar-nav .dropdown-menu > li > a strong {color:@cg1; font-size:17px;}
			.dropdown-menu li:first-child a{border:none;border-bottom:1px solid @cg5;}
			.dropdown-menu li:nth-child(1n+2) a {border-right: none!important;}
			.nav-principal .btn-group:nth-child(6) a {margin-bottom:52px;}							
			.espacio {display: none;}

		}
	}

	/* 500PX */

	@media only screen and (max-width: 500px) { 
		.header-background {background-position: 80% bottom;height: 150px; -webkit-background-size: auto 105%;  -moz-background-size: auto 105%;  -o-background-size: auto 105%;  background-size: auto 105%;}
		header {text-align: center;height: 150px;}
		header {
			#logo {margin-top:18px;}
			#logo .img-logo {display: none}
			#logo .img-logo-sm {display: block}
			.box-contacto {margin-top:8px;}
			.box-contacto span {font-size:17px;}
			.navbar-toggle {margin-top:10px;}
			.navbar-toggle span {}
			.box-contacto {   }
			.box-contacto .contacto {margin-left: 20px;    padding-left: 18px;}
		}
	}
		
	/* 400PX */

	@media only screen and (max-width: 400px) { 
		header {
			/*.box-contacto .contacto {display: none;}
			.box-contacto .telefono {margin-right:10px;}
			.box-contacto .telefono span {font-size:21px;}*/
		}
	}

/*=====================================================================
INICIO:
======================================================================*/

/**************** SLIDER ****************/

#slider {float:left; width: 100%;}
#slider {
	.carousel {top: -52px;}
	.carousel-caption {top: 16%; right: 0%; left: 0%;overflow: hidden;}
	.carousel-control.left, {background-image: none;}
	.carousel-control.right {background-image: none;}
	.carousel-inner {overflow: inherit;}
	.carousel-inner .img-slider {width: 100%; height: 550px; background-position: center center;}
	.carousel-inner {
		h1, h2, .titulo-n {.font1; font-size:60px; color:@c0; float:right; clear:right; text-align: right;text-shadow: 0 4px 6px rgba(0,0,0,.6); border-top:2px solid #159cbc; border-bottom:2px solid #159cbc; -webkit-background-clip: padding-box;  background-clip: padding-box; padding:20px 0;}
		h3 {.font2; font-size:25px; color:@c0; float:right; clear:right; text-align: right;text-shadow: 0 2px 3px rgba(0,0,0,.6); -webkit-background-clip: padding-box;  background-clip: padding-box; padding:20px 0;}
		.accion {float:right; clear:right;margin-top:45px;}
		.accion {
			.box-prim {width: 340px;background-color: @c0; float:left;}
			.box-prim .mod-box-1 {width: 80%;height: 80px; float:left;padding:15px 20px;}
			.box-prim .mod-box-1 p {font-size:20px; color:@cg1; .font4; font-weight: 300; text-shadow: none; text-align:right; line-height: 23px;}
			.box-prim .mod-box-1 p strong {font-size:23px; .font4; color:@c2; font-weight: 700; text-shadow: none;.eff (@eff:0.5)}
			.box-prim .mod-box-2 {width: 20%;height: 80px; float:left;padding:20px; background-color: @c2; color:@c0; font-size:45px;font-weight: 700; line-height: 35px;.font3;text-shadow: none;.eff (@eff:0.5)}
			.box-prim:hover .mod-box-2 {background-color: #00acec;.eff (@eff:0.5)}
			.box-prim:hover .mod-box-1 p strong {color: #00acec; .eff (@eff:0.5)}
		}
	}
	
	.slider-bottom {position:absolute;width:100%;height: 65px;background:url(../img/slider-bottom.png) 49% bottom no-repeat;z-index: 1000; bottom: -15px;}

	/**************** SLIDER 1 ****************/
	
	.carousel-inner .slider-1{
		.img-slider {background-image:url(../slider/1/slider1.jpg);	}
		.logos-web {float:right;margin-top:25px;clear:right;}
	}

	.slider-effects-1 {background-image:url(../slider/1/estrellas.png); background-repeat: repeat; width:82%; height: 200%; position: absolute; right: 0px;bottom: 0px; .op40;
		-webkit-animation: eff-uno 90s ease infinite;
	    	-moz-animation: eff-uno 90s ease infinite;
	   	 animation: eff-uno 90s ease infinite;}
		@-webkit-keyframes eff-uno {
		  0% { 
		    -webkit-transform: rotate(0deg) translate(0px);            
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -webkit-transform: rotate(360deg) translate(0px);
		    transform: rotate(360deg) translate(0px);

		  }	  
		}

		@-moz-keyframes eff-uno {
		  0% { 
		    -moz-transform: rotate(0deg) translate(0px);
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -moz-transform: rotate(360deg) translate(0px);
		    transform: rotate(360deg) translate(0px);
		  }
		}

		@keyframes eff-uno {
		  0% { 
		    -moz-transform: rotate(0deg) translate(0px);
		    -webkit-transform: rotate(0deg) translate(0px);
		    -o-transform: rotate(0deg) translate(0px);
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -moz-transform: rotate(360deg) translate(0px);
		    -webkit-transform: rotate(360deg) translate(0px);
		    -o-transform: rotate(360deg) translate(0px);
		    transform: rotate(360deg) translate(0px);
		  }
		}

	/**************** SLIDER 2 ****************/
	
	.carousel-inner .slider-2{
		.img-slider {background-image:url(../slider/2/slider2.jpg);	}
		.logos-web {float:right;margin-top:25px;clear:right;}
		h2 {    border-top: 2px solid rgba(185,21,188,0.50);   border-bottom: 2px solid rgba(185,21,188,0.50);}
		.accion-mobile {display: none;}
		.accion {
			.box-prim .mod-box-1 p strong { color:#ad00a5;}
			.box-prim .mod-box-2 {background-color: #ad00a5;}
			.box-prim:hover .mod-box-2 {background-color: #f70ff7;.eff (@eff:0.5)}
			.box-prim:hover .mod-box-1 p strong {color: #f70ff7; .eff (@eff:0.5)}
		}
		.dispositivos-pop-up {margin-top:25px; float:right; clear: right;}
		.dispositivos-pop-up {
			.accion {clear:none;margin-top:44px;margin-right:10px;	}
			.accion {
				.box-prim {background-color: transparent; width: 240px;}
				.sombra-on {width: 90%;}
				.box-prim .mod-box-1 {width: 90%; background-color: @c0;padding: 10px 20px 10px 0;height: 70px;}
				.box-prim .mod-box-2 {width: 10%;background:url(../slider/2/bottom-right.png) no-repeat;.backk; height: 70px; float:left; padding:0px;}	
				.box-prim:hover .mod-box-1 p strong {color: #ad00a5; .eff (@eff:0.5)}			
			}
			.dispositivos {float:right;clear:right;}
			.dispositivos {
				.tooltip-inner {background-color: #ad00a5}
				.tooltip-arrow {border-top-color: #ad00a5}
				a {    background: none;    display: inline-block;    border: none;    padding: 0px;    margin: 0px;margin-left:15px;}
				a button {vertical-align: bottom; display: inline-block;.op50; .eff (@eff:0.3); border: none;}
				a button:hover {.op100; .eff (@eff:0.2)}
				a .chico {background:url(../slider/2/ico-responsive-1.png) no-repeat; width: 28px; height: 59px;}
				a .mediano {background:url(../slider/2/ico-responsive-2.png) no-repeat; width: 64px; height: 94px;}
				a .grande {background:url(../slider/2/ico-responsive-3.png) no-repeat; width: 89px; height: 114px;}
			}
		}
	}

	.slider-effects-2 {background-image:url(../slider/2/velocidad.png); background-repeat: repeat; width:300%; height: 200%; position: absolute; left: 0px;
		-webkit-animation: eff-dos 30s linear infinite;
	    -moz-animation: eff-dos 30s linear infinite;
	    animation: eff-dos 30s linear infinite;}
		@-webkit-keyframes eff-dos {
		  0% { 
		    -webkit-transform: translate(0,0);          
		    transform: translate(0,0);
		  }
		  100% { 
		    -webkit-transform:  translate(-100%,0);
		    transform: translate(-100%,0);
		  }	  
		}

		@-moz-keyframes eff-dos {
		  0% { 
		    -moz-transform: translate(0,0);
		    transform: translate(0,0);
		  }
		  100% { 
		    -moz-transform: translate(-100%,0);
		    transform: translate(-100%,0);
		  }
		}

		@keyframes eff-dos {
		  0% { 
		    -moz-transform: translate(0,0);
		    -webkit-transform: translate(0,0);
		    -o-transform: translate(0,0);
		    transform: translate(0,0);
		  }
		  100% { 
		    -moz-transform: translate(-100%,0);
		    -webkit-transform: translate(-100%,0);
		    -o-transform: translate(-100%,0);
		    transform: translate(-100%,0);
		  }
		}

	
	.modal {
		.modal-dialog {width: 340px;}
		.modal-content {width: 335px; margin: 0 auto; .grad-black}
		.modal-header {border-bottom:none;}
		.modal-header .close {color:#fff;.op70;.font1; width:25px; height:25px; font-size:18px; font-weight: 300; .radd (@radd:255px); background-color: #000;display: block; .eff (@eff:0.3)}
		.modal-header .close:hover {background-color: red;.op100; .eff (@eff:0.3)}
		.modal-body {overflow: hidden; width: 318px;}
		.modal-body iframe{background-color: @c0;}
		.modal-footer {border:none;}
	}

	#mymodalmediano {
		.modal-dialog {width: 610px;}
		.modal-content {width: 617px;}
		.modal-body {width: 597px;}
	}

	#mymodalgrande {
		.modal-dialog {width: 910px;}
		.modal-content {width: 917px;}
		.modal-body {width: 897px;}
	}

	/**************** SLIDER 3 ****************/
	
	.carousel-inner .slider-3{
		.img-slider {background-image:url(../slider/3/slider3.jpg);	}
		.carousel-caption h2 {border-top: 2px solid rgba(148, 218, 118, 0.31);   border-bottom: 2px solid rgba(148, 218, 118, 0.31);}

		.accion {
			.box-prim .mod-box-1 p strong { color:#169A00;}
			.box-prim .mod-box-2 {background-color: #169A00;}
			.box-prim:hover .mod-box-2 {background-color: #25BF0B; .eff (@eff:0.5)}
			.box-prim:hover .mod-box-1 p strong {color: #25BF0B; .eff (@eff:0.5)}
		}
	}
	.slider-effects-3 {background-image:url(../slider/3/circulos.png); background-repeat: repeat; width:150%; height: 300%; position: absolute; bottom: 0px; right: 0px;.op40;
		-webkit-animation: eff-tres 60s linear infinite;
	  	-moz-animation: eff-tres 60s linear infinite;
	    	animation: eff-tres 60s linear infinite;}
		
		@-webkit-keyframes eff-tres {
		  0% { 
		    -webkit-transform: rotate(0deg) translate(0%);            
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -webkit-transform: rotate(100deg) translate(150%);
		    transform: rotate(100deg) translate(150%);

		  }	  
		}

		@-moz-keyframes eff-tres {
		  0% { 
		    -moz-transform: rotate(0deg) translate(0px);
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -moz-transform: rotate(100deg) translate(150%);
		    transform: rotate(100deg) translate(150%);
		  }
		}

		@keyframes eff-tres {
		  0% { 
		    -moz-transform: rotate(0deg) translate(0px);
		    -webkit-transform: rotate(0deg) translate(0px);
		    -o-transform: rotate(0deg) translate(0px);
		    transform: rotate(0deg) translate(0px);
		  }
		  100% { 
		    -moz-transform: rotate(100deg) translate(150%);
		    -webkit-transform: rotate(100deg) translate(150%);
		    -o-transform: rotate(100deg) translate(150%);
		    transform: rotate(100deg) translate(150%);
		  }
		}

}


	/**************** RESPONSIVO ****************/

	@media only screen and (max-width: 1650px) {
		#slider .carousel-control {width: 7%;}
		#slider .slider-effects-1 {width:90%;}
	}

	@media only screen and (max-width: 1450px) {
		#slider .carousel-control {width: 7%;}
		#slider .slider-effects-1 {width:92.5%;}
	}
	@media only screen and (max-width: 1299px) {
		#home #slider .carousel-caption {left: -10%; right: 0%;}
		#slider .slider-effects-1 {width:90%;}
		#slider .carousel-inner .slider-3 .img-slider {background-position: 60% 0}
	}
	@media only screen and (max-height: 768px) and (max-width: 1366px) and (min-width: 992px) {
		#home {
			#slider .carousel-inner .slider-1 .img-slider {height: 500px;}
			#slider .carousel-inner .slider-2 .img-slider {height: 500px;}
			#slider .carousel-inner .slider-3 .img-slider {height: 500px;}
			#slider .carousel-inner .slider-1 .img-slider {background-position: 30% 0; .backk (@backk:auto 100%) }
			#slider .carousel-inner .slider-2 .img-slider {background-position: 30% 0; .backk (@backk:auto 100%) }
			#slider .carousel-inner .slider-3 .img-slider {background-position: 80% 0; .backk (@backk:auto 100%) }
			#slider .carousel-inner h1, #slider .carousel-inner h2, #slider .carousel-inner .titulo-n {font-size:62px;}
			#slider .carousel-inner .slider-1 .carousel-caption {top:13%;}
			#slider .carousel-inner h3 {font-size:20px;}
		}
	}

	/* 1199PX */

	@media only screen and (max-width: 1199px) { 
		#home #slider .carousel-caption {left: -5%; right: 0%;}
		#slider .carousel-inner .img-slider {background-position: 40% 0px;}
	}

	/* 991PX */

	@media only screen and (max-width: 991px) { 
		#slider .carousel-caption {left: 0%; right: 0%;}
		#slider .carousel-inner {
			h1, h2, .titulo-n {.font1; font-size:60px;}
			h3 {font-size:23px;}
			.accion {float:right; clear:right;margin-top:45px;}
			.img-slider {background-position: 70% 0px;}
			.carousel {top: -10px;}
			.img-slider { background-position: center right!important;}
			.carousel-caption h2, .carousel-caption h3, .carousel-caption .logos-web,{text-align: center;width: 100%;}
			.carousel-caption .accion {float: inherit;    display: inline-block;}
			.slider-effects-1 {width:100%;}
			.slider-2 {
				h1, h2, .titulo-n {margin-top:25px;}
				.dispositivos-pop-up {display: inline-block; float: inherit;}
				.accion-mobile {display: none;}
				.dispositivos-pop-up .dispositivos .disp-grande {display: none;}
				.dispositivos-pop-up .dispositivos {margin-top: 18px;}
			}
		}
	}
	

	/* 767PX */

	@media only screen and (max-width: 767px) { 
		#slider .carousel-caption {right: 0%;left: 0%;}
		#slider .carousel-inner {
			.carousel {top: -10px;}
			.img-slider { background-position: center right!important;}
			.carousel-caption .accion {float: inherit;    display: inline-block;}
			.slider-2 {
				h1, h2, .titulo-n {margin-top:25px;}
				.dispositivos-pop-up {display: none;}
				.accion-mobile {display: inline-block;}
			}
		}
	}
	
	/* 620PX */

	@media only screen and (max-width: 620px) { 
		#slider .carousel-inner {
			h1, h2, .titulo-n {.font1; font-size:50px;}
			.logos-web {}
			.logos-web img {width: 75%;}
		}
	}
		
	/* 500PX */

	@media only screen and (max-width: 500px) { 
		#slider .carousel-inner {
			.img-slider {height: 550px;}
			h1, h2, .titulo-n {.font1; font-size:35px;}
			h3 {font-size:17px; line-height: 25px}						
			.logos-web img {width: 90%;}
			.accion .box-prim {width: 250px;}
			.accion .box-prim .mod-box-1 {width: 100%; height: 75px;}
			.accion .box-prim .mod-box-2 {display: none;}
			.accion .box-prim .mod-box-1 p {text-align: center;font-size:18px; }
			.accion .box-prim .mod-box-1 p strong{font-size:21px;}
			.slider-effects-1, .slider-effects-2, .slider-effects-3 {display: none;}
			.carousel-control.right, .carousel-control.left {margin-top:75px;}
			.carousel-control {width: 10%;}
		}
	}

/**************** WRAPPER ****************/

#marcas {margin-bottom:45px; padding-bottom:45px;border-bottom:1px solid #D3D3D3;}
#marcas .titulo {font-size:28px;.font1; color:@c1;margin-bottom:35px; display: inline-block; }
#marcas .owl-carousel {
	.owl-prev, .owl-next {position: absolute;    top: 50%;   margin-top: -34px;    font-size: 28px;    background: rgba(255, 255, 255, 0.85);       color: #999; }
	.owl-next {right: -28px;padding: 20px 0px 20px 0px; }
	.owl-prev {left: -28px;padding: 20px 0px 20px 0px;}
}


#wrapper {float:left;width: 100%;}
#wrapper {
	.principal-box {padding-top:3%; padding-bottom:7%; border-bottom:1px solid @cg5;}
	.principal-box .server {border-right:1px solid @cg5;}
	.principal-box .server {
		img {float:left; width: 100%}
		span {float:left;font-size:30px; .font4; font-weight: 700; color:@c1;padding-right: 5%; line-height: 36px;}
		p {font-size:24px; .font1; color:@cg1; font-weight: 300; line-height: 0px;margin-top:12%;line-height: 28px; }
		b {color:#35c615;}
	}
	.principal-box .nosotros {
		article {padding-left:5%;margin-top:6%;}
		article p {.font2; font-size:14px; color:@cg1; line-height: 22px;}
		article a {color:@c1;}
		article a:hover {color:@c2;}
	}

	.servicios-box  {padding-bottom:7%;padding-top:7%;border-bottom:1px solid @cg5;}
	.servicios-box {
		a {display: inline-block;}
		article {}
		article h1 {.font1; color:@cg1; font-size:32px;float:left; width: 80%;margin-top:20px;}
		article .icono {background:url(../img/band.png) no-repeat; width: 62px; height: 87px; float:right; text-align: center;}
		article .icono span {color:@c0; font-size:30px; margin-top:15px;.eff (@eff:0.3)}
		a:hover article .icono {background:url(../img/band2.png) no-repeat;}
		a:hover article .icono span {.eff (@eff:0.3); .eff-rotate (@rotate:25)}
		a:hover h1 {color:@c1;}
		a:hover .conoce-mas span{background-color:@c1;}
		a .conoce-mas {float:left; width: 85%; margin-top:30px;margin-bottom:10px;}
		a .conoce-mas span {background-color: @cg4; padding:3px 20px; text-align: center; .font1; color:@c0;font-size:17px;}
		article p {.font1; font-size:17px; color:@cg1; line-height: 22px; width: 85%; float:left; }
		.diseno-web {margin-right:8%;}
		.e-commerce {margin: 0 4%;}
		.e-mail {margin-left:8%;}
	}	
	.trabajos-box {padding-bottom:5%;padding-top:7%;}
	.trabajos-box {
		a {display: inline-block; position: relative;overflow: hidden;}
		a:hover article {bottom:0px;.eff (@eff:0.3)}
		img {float:left;width: 100%;}
		.titulo {.font1; color:@c1; font-size:32px;margin-bottom:3%;}
		article {position: absolute; bottom:-160px; padding:15px 20px; background:url(../img/texture.png) repeat; .eff (@eff:0.3); border-top:2px solid #333; width: 100%;}
		article h1 {color:@c0; .font1; font-size:22px;}
		article p {font-size:13px; .font2; color:@c0;margin-top:5px; line-height: 18px}
	}

	/**************** RESPONSIVO ****************/

	/* 1199PX */

	@media only screen and (max-width: 1199px) { 
		.principal-box {
			.server p {font-size:22px;}
			.server span {font-size:26px;}
		}
		.servicios-box {
			a {margin-top:25px;}
			article h1 {font-size:26px; width: 70%;}
		}
	}

	/* 991PX */

	@media only screen and (max-width: 991px) { 
		.principal-box {border:none; padding-bottom:0%;}
		.principal-box {
			.server {padding-bottom: 20px;}
			.server img {margin-top:10px; width: 170px;}
			.server p {line-height: 18px; margin-top:40px;font-size:18px;}
			.server span {font-size:24px; line-height: 28px;}
			.nosotros article p {font-size:13px;}
			.mod-img-oc {overflow: hidden;}

		}
		.servicios-box {padding-top:4%; border:none; padding-bottom:0%;}
		.servicios-box {
			article {padding-bottom:20px; border-bottom:1px dotted @cg5; float:left;}
			div:first-child article {border-top:1px dotted @cg5;padding-top:25px;}
			article h1 {color:@c1; margin-top:0px; width: 50%; margin-bottom:5px;}
			.diseno-web {margin-right: 0%;}
			.e-commerce {margin: 0%;}
			.e-mail {margin-left: 0%;}
			a .conoce-mas {margin-top:15px;}			
		}
		.trabajos-box {border:none;}
		.trabajos-box {
			.titulo {color:@cg1; font-size:26px;}
		}
	}
	

	/* 767PX */

	@media only screen and (max-width: 767px) { 
		.principal-box {border:none; padding-bottom:0%;}
		.principal-box {
			.server {border:none;}
			.server img {float:right; width: auto; max-width: 170px;}
			.server p {margin-top:14%;}
			.server span {font-size:26px; line-height: 30px;}
			.nosotros {background-color: @c1;margin-top:45px;}
			.nosotros article { text-align:center; padding: 10% 10%; margin-top:0px;}
			.nosotros article p {font-size:15px; color:@c0;}			
			.nosotros article p a {color:#92FEFF;}
			.nosotros article p a:hover {color:#92FEFF;}
			.mod-img-oc {}

		}
		.servicios-box {padding-top:4%; border:none; padding-bottom:0%;}
		.servicios-box {
			div:first-child article {border-top:1px dotted @cg5;padding-top:25px;}
			article {padding:0% 5%; padding-bottom:20px;}
			article h1 {color:@c1; margin-top:0px;}
			.diseno-web {margin-right: 0%;}
			.e-commerce {margin: 0%;}
			.e-mail {margin-left: 0%;}			
		}
		.trabajos-box {border:none;}
		.trabajos-box {
			div {text-align: center;}
			.titulo {text-align: center; font-size:28px;}
			a {margin-top:25px;}
		}
	}
	
	/* 620PX */

	@media only screen and (max-width: 620px) { 
		.principal-box {
			.server img {float:right; width: 100%;margin-top:15%;}

		}
		.servicios-box {
			article p {width: 80%}
		}
		.trabajos-box {
			.titulo {margin-top:10px;}
		}		
	}
		
	/* 500PX */

	@media only screen and (max-width: 500px) { 
		.principal-box {
			.server .mod-img-oc {display: none;}
			.server .col-xs-8 {width: 100%;}
			.server p {text-align: center; margin-top:5%;}
			.nosotros article { text-align:center; padding: 15% 5%; margin-top:0px;}
			.nosotros article p {font-size:14px;}
		}
		.servicios-box {
			article {}
			article h1 {width: 100%;}
			article p {width: 100%}
			article .icono {display: none;}
		
		}
	}

}

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

footer {background:url(../img/footer.jpg) no-repeat center 0;width: 100%; float:left;padding-top:85px;padding-bottom:40px;position: relative;}
footer {
	.servicios .titulo {width: 100%; float:left; color:#bcebff; font-size:32px; .font1; font-weight: 300;margin-bottom:15px;margin-top:30px;}
	.servicios ul li a {.font4; font-size:19px; color:@c0; line-height: 32px;padding-left: 25px;}
	.servicios ul li a:hover {color:#bcebff;}
	.servicios ul .col-md-4:first-child li a {padding-left: 0px;}
	.servicios ul .col-md-4 {border-right:1px solid #bcebff;}
	.servicios ul .col-md-4.box-serv-3 {border:none;}
	.redes-box {width: 100%; position: relative;}
	.redes {float:right; position: absolute; top:-22px;right:15px; z-index: 100000;}
	.redes a {background:url(../img/redes.png) no-repeat; width: 47px; height: 72px; float:right; text-align: center;margin-left:15px;}
	.redes a span {color:@c0; font-size:30px; margin-top:15px;.eff (@eff:0.3); display: inline-block;}
	.redes a:hover span {.eff (@eff:0.3); .eff-rotate (@rotate:25)}
	.redes .facebook span {background:url(../img/redes-facebook.png) no-repeat; width: 14px; height: 29px;}
	.redes .twitter span {background:url(../img/redes-twitter.png) no-repeat; width: 30px; height: 25px;}
	.redes .instagram span {background:url(../img/instagram.png) no-repeat; width: 25px; height: 25px;}
	.box-info {margin-top:30px; float:left;width: 100%}
	.box-info {
		.contacto {float:left;margin-top:15px; }
		.contacto div {.font1; font-size:23px; font-weight: 300; color:@c0; margin-bottom:5px; text-align: right; padding-right: 15px;float:left;margin-right: 12px;}
		.contacto div span {width: 30px; height: 30px; display: inline-block;vertical-align: middle; margin-right:10px;}
		.contacto .tel span{background:url(../img/ico-tel.png) no-repeat;}
		.contacto .email span{background:url(../img/ico-email.png) no-repeat; width: 30px; height: 30px;float:left;}
		.afip {float:left; background:url(../img/afip.png) no-repeat; width: 52px; height: 72px;background-size: 80% 80%; margin-right: 15px;}
	}

	/**************** RESPONSIVO ****************/

	/* 1199PX */

	@media only screen and (max-width: 1199px) { 
		.servicios ul li a {padding-left: 18px;}
		.box-info .contacto div {font-size:20px;}
		.box-info .contacto div span { }
	}

	/* 991PX */

	@media only screen and (max-width: 991px) { 
		.servicios .titulo {margin-top:25px;}
		.servicios ul .col-md-4 {border-left:1px solid #bcebff; border-right: none;}
		.servicios ul .col-md-4:first-child {border-left: none;}
		.servicios ul .col-md-4.box-serv-3 {border-left:1px solid #bcebff;}
		.servicios .box-serv-3 li {text-align: right;}
		.servicios .box-serv-2 li {text-align: center;}
		.servicios .box-serv-2 li a {padding:0px;}
	}

	/* 500PX */

	@media only screen and (max-width: 500px) {
		.servicios .titulo{display: none;}
		.servicios .servicios-box {display: none;}
		.box-info {margin-top:60px;}
		.box-info .contacto div span {display: none;}
		.box-info .afip {width:35px; height:47px;  .backk (@backk:100% 100%) }
		.box-info .contacto div {font-size:18px;}
	}	
}

/* 991PX */

@media only screen and (max-width: 991px) { 
	footer {padding-bottom:18px;}
}


.back-to-top {background-color:@c1; cursor: pointer;position: fixed;bottom: 0;right: 15px;display:none; .radd (@radd:0px); .rad5top}
.back-to-top:hover {border:1px dotted @c2;}

iframe[name='google_conversion_frame'] {font-size: 0 !important;height: 0 !important;line-height: 0 !important;margin-top: -13px;width: 0 !important;}

	/**************** NEWSLETTER ****************/	

	.newsletter {background-color: rgba(0, 0, 0, 0.18);float: left;width: 100%; overflow: hidden;margin-top:75px;}
	.newsletter {
		form {float:left; width: 100%; padding:25px; margin-bottom:0px!important;}
		form b {font-size:; .font1; font-size:25px; color:@c0;border-bottom:1px solid @c0; padding-bottom:2px; margin-bottom:15px; float:left; width: 100%; font-weight: 300;}
		form p {font-size:13px; color:@c0; .font2;float:left; width: 100%;margin-bottom:15px;float:left; width: 100%; line-height: 18px;}
		form .email-input {width: 70%; float:left; .font2; font-size:14px; padding:0px 10px; height: 40px;background: #eaeaea; border:1px solid @cg6;}
		form .enviar-news {width: 25%; float:right; height: 40px;.font2; font-size:14px; background-color: @c1; color:@c0; border:none;}
		form .enviar-news:hover {background-color: @c2;}
	}

		/* 1199PX */

		@media only screen and (max-width: 1199px) {
			.newsletter form {width: 100%}	
			.newsletter .mod-responsive {width: 40%; height: 172px;}	
			.newsletter .mod-responsive img {height: 172px;}
		}
		/* 991PX */

		@media only screen and (max-width: 991px) { 
			.newsletter {margin-top:20px;}
			.newsletter form {width: 100%}	
			.newsletter .mod-responsive {width: 30%; height: 172px;}	
			.newsletter .mod-responsive img {height: 172px;}
		}
		/* 500PX */

		@media only screen and (max-width: 500px) { 
			.newsletter form {width: 100%}	
			.newsletter .mod-responsive {display: none;}	
		}



/**************** SLIDER / SECCIONES ****************/

#slider.secciones-slider {
	.carousel-inner .img-slider {width: 100%; height: 165px; background-position: center center;}
	.carousel-inner {
		h1, h2, .titulo-n {float:inherit; clear:right; text-align: center;border-top:0px solid #159cbc; border-bottom:0px solid #159cbc; padding:0px 0;}
	        .slider-effects-1 {.op100;}
	}
	@media only screen and (max-width: 991px) { 
		.carousel-caption {top: 32%;}
	}
	@media only screen and (max-width: 620px) {
		.carousel-caption {top: 34%;}
		.carousel-inner .img-slider {width: 100%; height: 135px;}
	}
	@media only screen and (max-width: 499px) {
		.carousel-inner h2, .titulo-n, h1 {margin-top:5px;}
	}

}

/*=====================================================================
PORTFOLIO:
======================================================================*/

#portfolio {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/portfolio.jpg);}
	#wrapper {
		.row .col-md-12 {
			.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {    padding-right: 8px;    padding-left: 8px;}
		}
		.trabajos-box {padding-top: 0%; }
		.trabajos-box a {width: 100%;}
		.trabajos-box .small a:first-child {margin-bottom:7px;}
		.trabajos-box .small, .trabajos-box .medium, .trabajos-box .large {margin-bottom:10px;}
		.trabajos-box .small .row .col-md-12 .row .col-md-12 {padding:0px;}
	}
	@media only screen and (max-width: 991px) { 
		#wrapper .trabajos-box {padding-top: 2%; }
	}
	@media only screen and (max-width: 620px) {
		#wrapper .trabajos-box a {margin-top:0px;}
		#wrapper .trabajos-box {padding-top: 0%; }
	}
}


/*=====================================================================
CLIENTES:
======================================================================*/

#clientes {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/clientes.jpg);}
	#wrapper {margin: 35px 0;}
	#wrapper .clientes-box .col-md-2 {width: 20.0%; margin-bottom:30px; border-right:1px solid #eeeeee;}
	#wrapper .clientes-box .col-md-2:nth-child(5n+5) {border-right:none;}
	#wrapper .clientes-box .box-img {width: 100%; display: table-cell;vertical-align: middle; text-align: center; max-height: 175px;}
	#wrapper .clientes-box img {display: inline-block; vertical-align: middle; width: 80%;}
	#wrapper .box-destacados {margin-bottom:50px;}
	#wrapper .box-destacados img {margin-bottom:25px;width: 100%;}
	#wrapper .box-destacados .col-md-2 {width: 25%;}
	#wrapper .box-destacados .col-md-2:nth-child(4n+4) {border-right:none;}
	#wrapper .box-destacados .col-md-2:nth-child(5n+5) {border-right:1px solid #eeeeee;}

	@media only screen and (max-width: 1199px) { 
		#wrapper .clientes-box .col-md-2 {width: 25.0%;}
		#wrapper .clientes-box .col-md-2:nth-child(5n+5) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(4n+4) {border-right:none;}
	}

	@media only screen and (max-width: 991px) { 
		#wrapper .clientes-box {padding-top: 2%;}
		#wrapper .clientes-box .col-md-2 {width: 33.33%;}
		#wrapper .clientes-box .col-md-2:nth-child(5n+5) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(4n+4) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(3n+3) {border-right:none;}
	}

	@media only screen and (max-width: 620px) {
		#wrapper .clientes-box .col-md-2 {width: 50%;}
		#wrapper .clientes-box .col-md-2:nth-child(5n+5) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(4n+4) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(3n+3) {border-right:1px solid #eeeeee;}
		#wrapper .clientes-box .col-md-2:nth-child(2n+2) {border-right:none;}
	}
	@media only screen and (max-width: 360px) {
		#wrapper .clientes-box .col-md-2:first-child {border:none;}
		#wrapper .clientes-box .col-md-2 {border-right:none!important; width: 100%;border-top:1px solid #eeeeee; padding:15px 0; margin:0px;}
		#wrapper .clientes-box .box-img {margin:0px; display: inline-block; height: auto;}
		#wrapper .clientes-box img {width: 80%;}
	}
}

/*=====================================================================
BLOG:
======================================================================*/

#blog {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/blog.jpg);}
	#wrapper {
		.grid-item {padding-top:15px; padding-bottom:15px;}
		.articulo {width: 100%; overflow: hidden; position: relative; float:left; }	
		.articulo a:hover .hover {bottom:0%;.eff (@eff:0.3)}
		.articulo a .hover {position: absolute; bottom:100%; height:100%; padding:30px 40px; display: inline-block; background:url(../img/texture.png) repeat; .eff (@eff:0.3); width: 100%;.op100; text-align: center;}
		.articulo a .hover div {.font1; color:@c0; font-size:24px; text-align: center; vertical-align: middle; display: inline-block;margin: auto;position: absolute;top:0;left:0;right:0;bottom:0;    height: 80px;    width: 225px;}
		.articulo a .hover div span {width: 100%; font-size:36px; .op40;margin-bottom:15px;}
		.articulo a {border:1px solid @cg2;  float:left; width: 100%; height: 100%; }
		.articulo a img {width: 100%;}
		.articulo a .box-sp {padding:30px 20px; float:left;  }
		.articulo a .box-sp i {font-size:18px; .font1; color:@cg1;margin-top:15px; width: 100%; .font4; font-style: inherit;display: none;}
		.articulo a .box-sp h1 {font-size:30px; color:@c1; .font1;margin-top:5px; width: 100%}
		.articulo a .box-sp h2 {font-size:16px; .font1; color:@cg3;margin-top:15px; line-height: 22px; width: 100%}
	}

	.nota-detalle {max-width: 750px; padding-top: 20px; padding-bottom:30px; margin:0 auto;border:none;}
	.nota-detalle {
		.box-datos {width: 100%; display: inline-block;}
		.categoria {background-color: #a6a6a6; padding:5px 20px; float:left; color:@c0; .font1; font-size:17px; }
		.fecha {float:right;  color:@cg3; .font2; font-size:16px;margin-top:8px;}
		h1 {border-top:1px solid @cg2; border-bottom:1px solid @cg2; .font1; color:@c1; font-size:60px; text-align: left; padding:25px 0%;margin:10px 0 35px 0; }
		h2 {.font1; font-size:21px;line-height: 28px; color:@cg1;margin-bottom:30px;}
		img {width: 100%; margin-bottom:30px;}
		p {.font1; font-size:18px; line-height: 26px; color:@cg1;}
	}


	@media only screen and (max-width: 620px) {
		.nota-detalle .categoria {text-align: center; width: 100%; background-color: transparent; color:@cg1;}
		.nota-detalle .fecha {text-align: center; width: 100%; font-size:14px; display: none;}
		.nota-detalle h1 {font-size:40px; text-align: center;}
		.nota-detalle h2 {font-size:19px; }
		.nota-detalle p {font-size:17px; }
	}

	@media only screen and (max-width: 499px) {
		#wrapper .col-xs-6 {width: 100%;}
	}

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

}
/*=====================================================================
NOSOTROS:
======================================================================*/

#nosotros {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/clientes.jpg);}

	@media only screen and (max-width: 1199px) { 
	#wrapper .clientes-box .col-md-2 {width: 25.0%;}
	}

	@media only screen and (max-width: 991px) { 
		#wrapper .clientes-box {padding-top: 2%;}
		#wrapper .clientes-box .col-md-2 {width: 33.33%;}
	}

	@media only screen and (max-width: 620px) {
		#wrapper .clientes-box .col-md-2 {width: 50%;}
	}
	@media only screen and (max-width: 360px) {
		#wrapper .clientes-box .col-md-2 {width: 100%;}
	}
}

/*=====================================================================
SERVICIOS:
======================================================================*/

#servicios {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/clientes.jpg);}
	#wrapper {margin:20px 0;}
	#wrapper ul li {margin-bottom:50px;}
	#wrapper .bajada {font-size:28px; color:@c1; .font1; text-align: center; font-weight: 700;float:left;width: 100%; margin-bottom:40px; border-bottom:1px solid @cg2; padding-bottom:65px; padding-top:20px;}
	#wrapper ul h2 {.font1; font-size:23px; padding-bottom:10px; font-weight: 700; color:@c1;}
	#wrapper ul li p {font-size:16px; line-height: 24px; color:@cg1;}
	#wrapper ul li strong {color:@c1;}
	#wrapper .img-servicios {width: 100%;display: inline-block;}
	#wrapper .box-servicios {width: 100%; background-color: #F5F5F5; border:1px solid #D5D5D5; display: inline-block; text-align: center; padding:10px; margin-top:15px;}
	#wrapper .box-servicios b {font-size:23px; .font1; color:@cg1; vertical-align: middle; display: inline-block;}
	#wrapper .box-servicios span {font-size:23px; color:@cg1; vertical-align: middle; display: inline-block;margin-left:10px;}
	#wrapper .box-servicios:hover {background-color: @c1; border:1px solid @c1;}
	#wrapper .box-servicios:hover span, #wrapper .box-servicios:hover b {color:@c0;}

	
	#wrapper aside {text-align: center;}
	#wrapper aside .principal-box {padding: 30px 20px;    margin: 0px 0px 0px 15px; border: 1px dotted #d9d9d9;}
	#wrapper aside .principal-box .server {border:none;}
	#wrapper aside .principal-box .server .mod-img-oc {text-align: center;}
	#wrapper aside .principal-box .server img {max-width: 200px; float: initial; margin-bottom:15px;}
	#wrapper aside .principal-box .server p {margin-top:0px; font-size:22px; line-height: 28px;}
	#wrapper aside .principal-box .server span {font-size:26px; line-height: 32px}
	#wrapper aside .general {width: 100%; float:left;}
	#wrapper aside .general img {max-width: 500px; width: 100%; }
	#wrapper aside .box-proceso {padding: 30px 20px;    margin: 0px 0px 0px 15px; border: 1px dotted #d9d9d9; margin-top:25px;}
	#wrapper aside .box-proceso .titulo {.font1; font-size:28px; margin-bottom:25px; color:@cg1;}
	#wrapper aside .box-proceso .circulo {.radd (@radd:250px;); height: 120px; width: 120px; display: table; text-align: center; vertical-align: middle; margin:0 auto;border:2px dotted transparent;cursor: pointer}
	#wrapper aside .box-proceso .circulo strong {display: table-cell; text-align: center; vertical-align: middle; font-weight: 300;.font1; font-size:18px;color:@c0}
	#wrapper aside .box-proceso .circulo.analisis {background-color: #B2B2B2}
	#wrapper aside .box-proceso .circulo.analisis:hover, #wrapper aside .box-proceso .circulo.analisis:hover strong {border-color: #B2B2B2; color:#B2B2B2; background-color: transparent}
	#wrapper aside .box-proceso .circulo.diseno {background-color: #00BD1E}
	#wrapper aside .box-proceso .circulo.diseno:hover, #wrapper aside .box-proceso .circulo.diseno:hover strong {border-color: #00BD1E; color:#00BD1E;background-color: transparent}
	#wrapper aside .box-proceso .circulo.maquetacion{background-color: #FF9600}
	#wrapper aside .box-proceso .circulo.maquetacion:hover, #wrapper aside .box-proceso .circulo.maquetacion:hover strong {border-color: #FF9600; color:#FF9600;background-color: transparent}
	#wrapper aside .box-proceso .circulo.programacion{background-color: @c2}		
	#wrapper aside .box-proceso .circulo.programacion:hover, #wrapper aside .box-proceso .circulo.programacion:hover strong  {border-color: @c2; color:@c2;background-color: transparent}
	#wrapper aside .box-proceso .circulo.puesta{background-color: #FFD205}
	#wrapper aside .box-proceso .circulo.puesta:hover, #wrapper aside .box-proceso .circulo.puesta:hover strong  {border-color: #FFD205; color:#FFD205;background-color: transparent}
	#wrapper aside .box-proceso .linea {text-align: center; height: 35px; margin: 0 auto; border-left:2px dotted @cg2; width: 0px;}

	@media only screen and (max-width: 991px) { 
		#wrapper article p {font-size:14px;}
		#wrapper aside .principal-box {padding: 15px 20px;}
		#wrapper aside .principal-box {
			.server {padding-bottom: 0px;}
			.server img {width: 100%;}
			.server p {line-height: 24px; font-size:18px;}
			.server span {font-size:20px; line-height: 24px;    float: initial;}
			.general img {width: 100%;}
			.nosotros article p {font-size:13px;}
			.mod-img-oc {overflow: hidden;}

		}		
	}
	@media only screen and (max-width: 767px) { 
		#wrapper aside .principal-box {margin:0px;margin-bottom:15px;}
		#wrapper aside .box-proceso {margin:0px;margin-bottom:15px;}
	}
	@media only screen and (max-width: 620px) {

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

	}
}

/*=====================================================================
NOSOTROS:
======================================================================*/

#nosotros {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/clientes.jpg);}
	#wrapper {margin:20px 0;}
	#wrapper article {margin-bottom:50px;}
	#wrapper h1 {font-size:28px; color:@c1; .font1; text-align: center; font-weight: 700; margin-bottom:40px; border-bottom:1px solid @cg2; padding-bottom:65px; padding-top:20px;}
	#wrapper article h2 {.font1; font-size:23px; padding-bottom:10px; font-weight: 700; color:@c1;}
	#wrapper article p {font-size:16px; line-height: 24px; color:@cg1;}
	#wrapper article strong {color:@c1;}
	#wrapper .img-servicios {width: 100%;display: inline-block;}
	#wrapper .box-servicios {width: 100%; background-color: #F5F5F5; border:1px solid #D5D5D5; display: inline-block; text-align: center; padding:10px; margin-top:15px;}
	#wrapper .box-servicios b {font-size:23px; .font1; color:@cg1; vertical-align: middle; display: inline-block;}
	#wrapper .box-servicios span {font-size:23px; color:@cg1; vertical-align: middle; display: inline-block;margin-left:10px;}
	#wrapper .box-servicios:hover {background-color: @c1; border:1px solid @c1;}
	#wrapper .box-servicios:hover span, #wrapper .box-servicios:hover b {color:@c0;}
	#wrapper .logos-web-negro {margin-top:35px; width: 100%; max-width: 540px; .op50;}
	#wrapper aside {text-align: center;}
	#wrapper aside img {width: 100%}
	@media only screen and (max-width: 991px) { 
		#wrapper article p {font-size:14px;}
	}

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

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

	}
}


/*=====================================================================
CONTACTO:
======================================================================*/

#contacto {
	#slider .carousel-inner .slider-1 .img-slider {background-image:url(../img/blog.jpg);}
	#wrapper {margin-top:20px;}
	h1 {.font1; font-size:36px; color:@cg1; text-align: left; float:left; font-weight: 300; margin-bottom:25px;}
	.box-texto {background-color: @c1; padding: 30px 0 80px 0;}
	.box-texto p {.font2; font-size:16px; color:@c0; text-align: center; line-height: 28px;}	
	#foto-principal iframe{width: 100%}
	.datos div {float:left; width:100%; font-size:21px; .font1; color:@cg1; border-bottom:1px solid @cg5; padding-bottom:15px; margin-bottom:15px;text-align: center;}
	.datos div span {font-size:25px; padding:10px; color:@cg3;}
	#formID {background-color: #f5f5f5; border:1px solid #c6c6c6; float:left;padding:20px;margin-bottom:35px; float:left; width: 100%}
	#formID .subtitulo {.font4; font-size:21px; font-weight: 300; color:@cg3; margin-bottom:10px;}
	#formID label {.font2; font-size:14px; color:@cg1; font-weight: 400; padding:5px 0;margin-bottom:5px;line-height: 19px;}
	#formID textarea {height: 150px;}
	#formID button {margin-top:30px; width: 25%; float:right;}
	#formID button:hover {background-color: @c1; color:@c0;}
	#formID button.enviar {width: 300px; background: @c1; color:#fff;}
	#formID button.enviar:hover {background: @c3;}
	#formID .form-control {height: 35px;    margin-bottom: 15px;}

	@media (max-width: 992px) {

	#formID button {margin-top:30px; width: 60%; float:right;}
	
	}
}

/*=====================================================================
OCULTAR GOOGLE:
======================================================================*/

iframe[name='google_conversion_frame'] {
	font-size: 0 !important;
	height: 0 !important;
	line-height: 0 !important;
	margin-top: -35px;
	width: 0 !important;
	display: none!important;
}

.carousel-inner>.item {overflow:hidden;}


/*=====================================================================
CAMBIOS TEMPORALES:
======================================================================*/

header #logo .ov-navidad {position:absolute; top: -19px;    left: 12px; width:auto;}
@media only screen and (max-width: 1199px) { header #logo .ov-navidad {top: -16px; left: 8px; } }
@media only screen and (max-width: 991px) { header #logo .ov-navidad {top: -16px; left: 13px; } }


/*=====================================================================
CAMBIOS 25/1/2021:
======================================================================*/

#nosotros {


	.texto-intro {text-align: center;}
	#wrapper .texto-intro p {font-size:17px; line-height: 30px;}
	.texto-intro p, .texto-intro img {display: inline-block;max-width: 900px; }

	.el-equipo .tit {font-size: 28px; color:@c1; margin-bottom:35px; .font1; text-align: center;width: 100%; display: inline-block;}

	.el-equipo {margin-top:25px;}
	.equipo {position: relative;width: 100%; margin-bottom:30px;}
	.equipo .linea-dis { height: 100%; position: absolute;top:0px;}
	.equipo .linea-dis .sup {border-top:2px solid @cg2;width: 50px;position: absolute; top:0px;}
	.equipo .linea-dis .inf {border-bottom:2px solid @cg2;width: 50px; position: absolute; bottom:0px;}
	.equipo .izquierda {left:0px;border-left:2px solid @cg2;}
	.equipo .derecha {right:0px;border-right:2px solid @cg2;}
	.equipo .izquierda .sup,.equipo .izquierda .inf {left:-1px;}
	.equipo .derecha .sup,.equipo .derecha .inf {right:-1px;}


	.equipo .box {text-align: center; display: inline-block; padding:50px 25px;width: 100%; background: #f5f5f5}
	.equipo .box img {max-width: 70px; .op30;margin-bottom:10px;}
	.equipo .box h2 {font-size:22px;color:@c1; font-weight: 700; margin-bottom:5px;.font1}
	.equipo .box i {font-size:16px; color:@cg1; font-weight: 300; .font3}
}



/* 14-3-2022 */

.accesos-directos {position:fixed; right:0px; bottom:0%; z-index:1001;.eff (@eff:0.3)}
.accesos-directos .box-tool {float: right;clear:right; }
.accesos-directos a, .accesos-directos #gotoTop {background:#555; width: 100%;float:left;padding: 9px 13px; color: #fff; font-size: 22px;    margin-bottom: 5px;border-radius: 5px 0px 0px 5px;	-moz-border-radius: 5px 0px 0px 5px;	-webkit-border-radius: 5px 0px 0px 5px;	border: 0px solid #000000; height:46px;.eff (@eff:0.3); width:50px;}
.accesos-directos #gotoTop {position:initial;    font-size: 32px;    line-height: 31px;}
.accesos-directos a:hover {background:@c1;.eff (@eff:0.3); width:60px!important;.eff (@eff:0.3)!important;}
.accesos-directos .whatsapp a {background:#0dc143;}
.accesos-directos .whatsapp a:hover {background:#01962e}

.accesos-directos img {vertical-align: middle;width:24px;}
.accesos-directos .glyphicon-chevron-up {    font-size: 19px;    float: left;    margin: 4px;}