/*====================================================================*/
/* MEDIA QUERIES */
/*====================================================================*/


/*====================================================================*/
/* Smaller than standard 1040 (devices and browsers) */
/*====================================================================*/
@media only screen and (max-width: 1040px) {

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	#page-wrap.boxed {
		width: 100%;
		margin: 0;
	}
	
	.block-title {
background: rgba(0, 0, 0, 0) url('../images/block_title_arrow.png') no-repeat scroll 100% 2px;
position: relative;
margin-bottom: 5px;
line-height: 24px;
font-size: 14px;
font-weight: 600;
color: #F6F6F6;
text-transform: uppercase;
}

.graficosla{margin-left: 40px;
}

}

/*====================================================================*/
/* Tablet Portrait (devices and browsers) */
/*====================================================================*/
@media only screen and (max-width: 959px) and (min-width: 768px) {

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	#page-wrap.boxed {
		width: 100%;
		margin: 0;
	}

	.container { width: 748px; }

		/* Sidebars
		---------------------------------------------------------- */
		.right-sidebar #main-content,
		.left-sidebar #main-content { width: 480px; }

		/* Content
		---------------------------------------------------------- */
			/* Content Slider Section */
			.content-slider .slides_container { width: 748px; }

			.content-slider .intro {
				margin: 0;
				padding: 0;
				width: 100%;
			}

			.content-slider .slide > ul { width: 776px; }

			.content-slider .slide > ul > li {
				margin: 0 28px 0 0;
				width: 166px;
			}

			/* Clients Section */
			.clients-wrap .clients-list a { margin: 0 10px 20px; }

			.section-wrap .clients-wrap .clients-list a {
				margin: 5px 6px;
				width: 110px;
				height: 110px;
			}

			/* Contact Form */
			.contact-form .text-input { width: 85%; }
				
			.contact-form .textarea {
				width: 95%;
				height: 150px;
			}
			
			
			.sector {
background: #FFF;
border-bottom: 2px solid #809CED;
text-align: left;
padding: 10px;
line-height: 20px;
min-height: 162px;
}

	/*----------------------------------------------*/
	/* PORTFOLIO STYLES */
	/*----------------------------------------------*/
		/* Portfolio Two Columns
		---------------------------------------------------------- */
		.portfolio-two-columns .portfolio-item { width: 359px; }

		/* Portfolio Three Columns
		---------------------------------------------------------- */
		.portfolio-three-columns .portfolio-item { width: 225px; }

		/* Portfolio Four Columns
		---------------------------------------------------------- */
		.portfolio-four-columns .portfolio-item { width: 164px; }

		/* Portfolio Single
		---------------------------------------------------------- */
		#portfolio-single .post-content {
			float: left;
			width: 480px;
		}

		#portfolio-single .post-details {
			float: right;
			margin: 0 0 20px 0 ;
			width: 220px;
		}

	/*----------------------------------------------*/
	/* WIDGET STYLES */
	/*----------------------------------------------*/
		/* Flickr Widget
		---------------------------------------------------------- */
		.flickr-wrap li a {
			width: 46px;
			height: 46px;
		}

		/* Google Map Widget
		---------------------------------------------------------- */
		.google-map { height: 340px; }

	/*----------------------------------------------*/
	/* BLOG STYLES */
	/*----------------------------------------------*/
	.blog-post .post-content {
		float: right;
		padding: 0 10px 0 0;
		width: 320px;
	}

	.blog-post .post-meta {
		float: left;
		margin: 0 20px 20px 0;
		padding: 0 0 0 10px;
		width: 120px;
	}

		/* Comments Form
		---------------------------------------------------------- */
		.respond-note {float: left; }

		#respond p {margin-bottom: 20px; }

		#respond input {width: 83%; }

		#respond label {margin-bottom: 3px; }

		#respond textarea {
			margin: 0;
			width: 93%;
			height: 144px;
		}

	/*----------------------------------------------*/
	/* EXTENDED TYPOGRAPHY & SHORTCODES */
	/*----------------------------------------------*/
		/* Icon Boxes
		---------------------------------------------------------- */
		.icon-box.framed-box { padding: 20px 15px; }
		
		.texto-trabaja{width: 66%!important;}
		
		a.btn-trabaja {
			width: 135%;
			}
			
			.block-title {
background: none!important;
position: relative;
margin-bottom: 5px;
line-height: 24px;
font-size: 14px;
font-weight: 600;
color: #F6F6F6;
text-transform: uppercase;
}

.solucion-index {
height: 200px;
width: 200px;
}

		.ddsmoothmenu ul li a span {
display: block;
padding: 0 15px;
height: 25px;
line-height: 25px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
border-radius: 15px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}

.graficosla{margin-left: 40px;
}

.test-index{display:none;}

}

/*====================================================================*/
/* All Mobile Sizes (devices and browser) */
/*====================================================================*/
@media only screen and (max-width: 767px) {

	/*----------------------------------------------*/
	/* GENERAL TYPOGRAPHY */
	/*----------------------------------------------*/
		/* Columns Styles
		---------------------------------------------------------- */
		.one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth {
			float: none;
			margin-right: 0;
			width: 100%;
		}

		/* Pricing Tables
		---------------------------------------------------------- */
		.column-6 .column, .column-5 .column, .column-4 .column, .column-3 .column, .column-2 .column {
			float: none;
			border-left: 1px solid #e5e5e5;
			border-right: 1px solid #e5e5e5;
			margin-bottom: 20px;
			width: 100%;
		}

		.column.features { display: none; }

		.features-list li .label { display: block; }

		.pricing-table .featured { margin-top: 12px; }

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	#page-wrap.boxed {
		width: 100%;
		margin: 0;
	}

	.container { width: 300px; }

		/* Header
		---------------------------------------------------------- */
			/* Logo */
			#logo {
				display: block;
				float: none;
				margin: 10px auto;
				text-align: center;
			}

			#logo a img { display: inline-block; }

		/* Navigation
		---------------------------------------------------------- */
		#navigation { float: none; }

		#main-menu {
			visibility: hidden;
			display: none;
		}

		/* Tiny Navigation
		---------------------------------------------------------- */
		.tinynav { display: block; }

		/* Intro
		---------------------------------------------------------- */
			/* Page Title */
			#page-title {
				float: none;
				display: inline-block;
			}

		/* FlexSlider
		---------------------------------------------------------- */
			/* Direction Navigation */	
			.flex-direction-nav .flex-next { right: 20px; }
			.flex-direction-nav .flex-prev { left: 20px; }

			/* Control Navigation */
			.flex-control-nav { bottom: 10px; }

			/* Slider Caption */
			.slider-caption { display: none; }

		/* Content
		---------------------------------------------------------- */
			/* Section General */
			.section-wrap .container > .one-half, .section-wrap .container > .one-third, .section-wrap .container > .two-third, .section-wrap .container > .one-fourth, .section-wrap .container > .three-fourth, .section-wrap .container > .one-fifth, .section-wrap .container > .two-fifth-fifth, .section-wrap .container > .three-fifth, .section-wrap .container > .four-fifth { margin-bottom: 55px; }

			.section-wrap .container > .one-half.last, .section-wrap .container > .one-third.last, .section-wrap .container > .one-fourth.last, .section-wrap .container > .three-fourth.last, .section-wrap .container > .one-fifth.last, .section-wrap .container > .two-fifth-fifth.last, .section-wrap .container > .three-fifth.last, .section-wrap .container > .four-fifth.last, .section-wrap .container > .one-half:last-child, .section-wrap .container > .one-third:last-child, .section-wrap .container > .one-fourth:last-child, .section-wrap .container > .three-fourth:last-child, .section-wrap .container > .one-fifth:last-child, .section-wrap .container > .two-fifth-fifth:last-child, .section-wrap .container > .three-fifth:last-child, .section-wrap .container > .four-fifth:last-child { margin-bottom: 0; }

			.section-wrap .icon-box { margin: 0 0 20px; }

			.section-wrap .ib-container .icon-box { margin: 0 0 30px; }

			/* Custom Blocks Section */
			.custom-blocks { background: none; }

			.custom-blocks .block { float: none; }

			.block-col-4 .block, .block-col-3 .block {
				width: 100%;
				margin-bottom: 1px;
			}

			.custom-blocks .block a { margin: 0; }

			/* Content Slider Section */
				/* Content Slider Navigation */
				#content-slider-nav { margin-bottom: 10px; }

				.tab-slider-wrapper, .tab-slider-inner-wrapper { height: auto; }

				#content-slider-nav .pagination {
					background: none;
					border: none;
					height: auto;
					box-shadow: none;
				}

				#content-slider-nav .pagination li {
					float: left;
					display: inline-block;
					border: none;
					padding: 0 3px 5px;
					width: auto;
					height: auto;
				}

				#content-slider-nav .pagination a {
					background: none;
					display: inline-block;
					padding: 2px 5px;
					text-shadow: none;
				}

				#content-slider-nav .pagination a:hover {
					background: none;
					color: #1fb4dd;
				}

				#content-slider-nav .pagination li.current a {
					background-color: #101010;
					background-image: none;
				}

				#content-slider-nav .pagination li.current a::before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					bottom: -8px;
					left: 50%;
					margin-left: -4px;
					border: 4px solid #101010;
					border-width: 4px;
					border-bottom: 4px solid #101010;
					border-left-color: transparent;
					border-right-color: transparent;
					border-bottom-color: transparent;
				}

				#content-slider-nav .pagination li strong {
					font-size: 13px;
					font-weight: 700;
				}

				#content-slider-nav .pagination li.current a strong { color: #fff; }

				#content-slider-nav .pagination a small { display: none; }

				#active-indicator { display: none; }

				/* Content Slides Container */
				.content-slider .slides_container {
					width: 100%;
					margin: 0;
					padding: 0;
				}

				.content-slider .slide > ul {
					display: inline-block;
					float: none;
					margin: 0;
					width: 300px;
					height: auto;
					text-align: left;
				}

				.content-slider .slide > ul > li {
					float: none;
					display: inline-block;
					width: 300px;
					margin: 5px 0 25px;
				}

				.content-slider .slide > ul > li:last-child { margin-bottom: 5px; }

				.content-slider .blog-item {
					border-bottom: 1px dotted #e5e5e5;
					padding-bottom: 25px;
				}

				.content-slider .blog-item:last-child {
					border-bottom: 0;
					padding-bottom: 0px;
				}

			/* Call To Action */
			.call-to-action h1, .call-to-action h2, .call-to-action h3, .call-to-action h4, .call-to-action h5, .call-to-action p { text-align: center; }

			/* Clients Section */
			.clients-wrap .clients-list { margin: 0 0 20px; }
			.clients-wrap .clients-list a { margin: 5px; }

			/* Related Works Section */
			.related-work-wrap .portfolio-item { margin-bottom: 30px; }
			.related-work-wrap .portfolio-item:last-child { margin-bottom: 0; }

			/* 404 Error page */
			.error-404 span.text-404 { font-size: 150px; }

			/* Contact Form */
			.contact-form p { display: block; }

			.contact-form .text-input { width: 92%; }
				
			.contact-form .textarea {
				width: 92%;
				height: 150px;
			}

		/* Sidebars
		---------------------------------------------------------- */
		.right-sidebar #main-content, .left-sidebar #main-content {
			float: none;
			border-bottom: 1px solid #e5e5e5;
			padding-bottom: 20px;
			width: 100%;
		}

		.right-sidebar #sidebar, .left-sidebar #sidebar {
			float: none;
			margin-top: 40px;
			width: 100%;
		}

		/* Footer Bottom
		---------------------------------------------------------- */
		#footer-bottom { text-align: center; }

			/* Copyright */
			.copyright {
				float: none;
				display: block;
				margin: 0 0 10px 0;
			}

			/* Footer Menu */
			.footer-menu {
				float: none;
				display: block;
				margin: 0 0 10px;
				text-align: center;
			}

			.footer-menu ul { display: inline-block; }

			.footer-menu li:first-child {
				margin-left: 0;
				border-left: 0;
			}

	/*----------------------------------------------*/
	/* PORTFOLIO STYLES */
	/*----------------------------------------------*/
	.portfolio-container { margin: 0; }

		/* Portfolio Two, Three, Four Columns
		---------------------------------------------------------- */
		.portfolio-two-columns .portfolio-item, .portfolio-three-columns .portfolio-item, .portfolio-four-columns .portfolio-item {
			width: 300px;
			margin-right: 0;
		}

		/* Portfolio Single
		---------------------------------------------------------- */
		#portfolio-single .post-content {
			float: none;
			border-bottom: 1px solid #e5e5e5;
			margin-bottom: 40px;
			padding-bottom: 20px;
			width: 100%;
		}

		#portfolio-single .post-details {
			float: none;
			margin: 0 0 20px 0 ;
			width: 100%;
		}

	/*----------------------------------------------*/
	/* WIDGET STYLES */
	/*----------------------------------------------*/
		/* Search Form Widget
		---------------------------------------------------------- */
		input.search-input { width: 86%; }

		/* Twitter Widget
		---------------------------------------------------------- */
		#content .section-wrap .twitter-wrap .tweet_list {
			padding: 60px 0 0 0;
			background: transparent url('../images/icons/twitter.png') no-repeat scroll 50% 5px;
		}

		/* Flickr Widget
		---------------------------------------------------------- */
		.flickr-wrap li a, #sidebar .flickr-wrap li a {
			width: 42px;
			height: 42px;
		}

		/* Social Media Widget
		---------------------------------------------------------- */
		#footer-bottom .social {
			float: none;
			display: block;
			margin: 0;
			border-top: 1px dashed #313131;
			padding: 15px 0 0 0;
		}

		/* Google Map Widget
		---------------------------------------------------------- */
		.google-map { height: 150px; }

	/*----------------------------------------------*/
	/* BLOG STYLES */
	/*----------------------------------------------*/
	.blog-post { padding-bottom: 10px; }
		
	.blog-post .post-content {
		float: none;
		margin: 0;
		padding: 0 10px;
		width: auto;
	}

	.blog-post .post-meta {
		float: none;
		margin: 0;
		padding: 0 10px;
		width: auto;
	}

	.meta-list {
		background: #f3f3f3;
		float: none;
	}

	.meta-list li { padding: 0 0 0 10px; }

		/* Blog Slider */
		.blog-slider .flex-next { right: 0px; }

		.blog-slider .flex-prev { left: 0px; }

		/* Post Navigation
		---------------------------------------------------------- */
		.post-nav .nav {
			float: right;
			display: inline-block;
			margin: 10px 20px 0 0;
		}

		/* Comments List
		---------------------------------------------------------- */
		.comment-list .framed-box { margin: 0 0 20px 50px }

		.gravatar {
			width: 40px;
			height: 40px;
		}

		.comment-info {
			background: none;
			padding-left: 0;
			overflow: hidden;
		}

		.children {
			list-style-type: none;
			margin: 0 0 0 20px;
		}

		/* Comments Form
		---------------------------------------------------------- */
		.respond-note { float: left; }

		#respond p { margin-bottom: 20px; }

		#respond input { width: 93%; }

		#respond label { margin-bottom: 3px; }

		#respond textarea {
			margin: 0;
			width: 93%;
			height: 150px;
		}

	/*----------------------------------------------*/
	/* EXTENDED TYPOGRAPHY & SHORTCODES */
	/*----------------------------------------------*/
		/* Icon Boxes
		---------------------------------------------------------- */
		.one-half:last-child .icon-box, .one-third:last-child .icon-box, .one-fourth:last-child .icon-box, .one-fifth:last-child .icon-box { margin-bottom: 5px; }
		
		.texto-trabaja{width: 101%!important;}
		
		a.btn-trabaja {
			width: 100%;
			}
			
			#logo a img {
display: inline-block;
float: left;
}

.mapa iframe{height:270px; }

 .block-title {
			background: none!important;
			position: relative;
			margin-bottom: 5px;
			line-height: 24px;
			font-size: 14px;
			font-weight: 600;
			color: #F6F6F6;
			text-transform: uppercase;
}
.content-slider .slides_container {
	overflow:auto;
width: 100%;
margin: 0;
padding: 0;
}

/******   PUZZLE  *****/

.puzzle {
width: 432px;
height: 309px;
margin-top: 70px;
}

.arriba-izq {
width: 190px;height: 130px;
float: left;
background: url(../images/puzzle/arriba-izq.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.arriba-der {
width: 190px;
height: 130px;
float: right;
background: url(../images/puzzle/arriba-der.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}

.abajo-izq {
width: 190px;height: 130px;
float: left;
background: url(../images/puzzle/abajo-izq.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.abajo-der {
width: 190px;
height: 130px;
float: right;
background: url(../images/puzzle/abajo-der.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}

.puzzle-centro {
position: relative;
z-index: 2;
background: url(../images/puzzle/centro.png) center center no-repeat;
width: 432px;
height: 309px;
margin-top: -314px;
font-size: 33px;
line-height: 170px;
text-align: center;
color: #FFF;
background-size: 55%;
}

.arriba-izq:hover{background: url(../images/puzzle/arriba-izq-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.abajo-izq:hover{background: url(../images/puzzle/abajo-izq-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.arriba-der:hover{background: url(../images/puzzle/arriba-der-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.abajo-der:hover{background: url(../images/puzzle/abajo-der-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}

.cont-puzzle, .cont-aux {
background: #FFF;
padding: 20px;
color: #000;
width: 422px;
height: 350px;
font-size: 13px;
padding-top: 20px;
position: absolute;
margin: -360px 0 0 0;
display: none;
cursor: pointer;}



/*------------------- GRAFICOS TIC ---------------------------*/

.grafico-outsourcing{width:700px;margin-top: 50px;}
.circulo-centro{width:252px;height:252px;margin:0 auto; position:relative;z-index:3;background:url(../images/graficos/circulo-outsourcing.png) 0 0 no-repeat;margin-top: -140px;background-size:100%;
}
.circulos-peq{margin:0 auto;width:405px;position:relative; z-index:9;}
.circulo-gris, .circulo-gris-2{display:block;width:128px;height:128px;background:url(../images/graficos/circulo-outsourcing-2.png) 0 0 no-repeat;color:#000;text-align:center;padding-top: 48px;float:left;transition-property: background;transition-duration:0.3s;background-size:100%;}


.circulo-gris:hover, .circulo-gris-2:hover{background:url(../images/graficos/circulo-outsourcing-3.png) 0 0 no-repeat;}
.arriba-derecha{margin-top:70px;margin-right: 10px;}.arriba-centro{margin-top:0;margin-right: 10px;}.arriba-izquierda{margin-top:70px;}

.abajo-derecha{margin-top:-100px;margin-right: 10px;}.abajo-centro{margin-top:-23px;margin-right: 10px;}.abajo-izquierda{margin-top:-100px;}


.circulo-centro-2{width:252px;height:252px;margin:0 auto; position:relative;z-index:3;background:url(../images/graficos/circulo-bpo.png) 0 0 no-repeat;margin-top: -255px;background-size:100%;
}
.circulos-peq-2{margin:0 auto;width: 450px;}
.circ-arriba{float:none;margin:0 auto;z-index: 10;
position: relative;}
.circ-der{float: right;z-index: 10;
position: relative;}
.circ-izq{z-index: 10;
position: relative;}
.circ-abajo{float:none;margin:0 auto;margin-top:-30px;z-index: 10;
position: relative;}

.cont-grafico{margin: -530px 0 0 0;}

.graficosla{margin-left: 0px;
}

.test-index{display:none;}

}

/*====================================================================*/
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/*====================================================================*/
@media only screen and (max-width: 767px) and (min-width: 480px) {

	/*----------------------------------------------*/
	/* GENERAL TYPOGRAPHY */
	/*----------------------------------------------*/
		/* Pricing Tables
		---------------------------------------------------------- */
		.column-6 .column, .column-5 .column, .column-4 .column, .column-3 .column, .column-2 .column {
			float: left;
			width: 50%;
			border: 0;
		}

		.pricing-table .featured { margin-top: -12px; }

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	#page-wrap.boxed {
		width: 100%;
		margin: 0;
	}

	.container { width: 420px; }

		/* Intro
		---------------------------------------------------------- */
			/* Page Title */
			#page-title {
				float: left;
				display: inline-block;
			}

		/* Content
		---------------------------------------------------------- */
			/* Custom Blocks Section */
			.custom-blocks .block { float: left; }

			.custom-blocks .block a { margin-right: 1px; }

			.block-col-4 .block {
				width: 50%;
				margin-bottom: 1px;
			}

			/* Content Slider Section */
				/* Content Slider Navigation */
				#content-slider-nav .pagination li { padding: 0 5px 5px; }

				#content-slider-nav .pagination a { padding: 2px 8px; }

				/* Content Slides Container */
				.content-slider .slide > ul { width: 420px; }
				.content-slider .slide > ul > li { width: 420px; }

			/* Clients Section */
			.clients-wrap .clients-list a {
				width: 128px;
				height: 128px;
			}

			.section-wrap .clients-wrap .clients-list a:nth-child(3n) { margin-right: 0; }

			/* 404 Error page */
			.error-404 span.text-404 { font-size: 250px; }

	/*----------------------------------------------*/
	/* PORTFOLIO STYLES */
	/*----------------------------------------------*/
		/* Portfolio Two, Three, Four Columns
		---------------------------------------------------------- */
		.portfolio-two-columns .portfolio-item, .portfolio-three-columns .portfolio-item, .portfolio-four-columns .portfolio-item { width: 420px; }

	/*----------------------------------------------*/
	/* WIDGET STYLES */
	/*----------------------------------------------*/
		/* Search Form Widget
		---------------------------------------------------------- */
		input.search-input { width: 90%; }

		/* Flickr Widget
		---------------------------------------------------------- */
		.flickr-wrap li a,
		#sidebar .flickr-wrap li a {
			width: 62px;
			height: 62px;
		}

		/* Google Map Widget
		---------------------------------------------------------- */
		.google-map { height: 200px; }

	/*----------------------------------------------*/
	/* BLOG STYLES */
	/*----------------------------------------------*/
		/* Post Navigation
		---------------------------------------------------------- */
		.post-nav .nav { margin: 0 20px 0 0; }
		
		.mapa iframe{height:270px; }
		
		.block-title {
			background: none!important;
			position: relative;
			margin-bottom: 5px;
			line-height: 24px;
			font-size: 14px;
			font-weight: 600;
			color: #F6F6F6;
			text-transform: uppercase;
}

#logo {
display: block;
float: none;
margin: -5px auto;
text-align: center;
margin-left: -13px;
}

/******   PUZZLE  *****/

.puzzle {
width: 432px;
height: 309px;
margin-top: 70px;
}

.arriba-izq {
width: 190px;height: 130px;
float: left;
background: url(../images/puzzle/arriba-izq.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.arriba-der {
width: 190px;
height: 130px;
float: right;
background: url(../images/puzzle/arriba-der.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}

.abajo-izq {
width: 190px;height: 130px;
float: left;
background: url(../images/puzzle/abajo-izq.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.abajo-der {
width: 190px;
height: 130px;
float: right;
background: url(../images/puzzle/abajo-der.png) 0 0 no-repeat;
color: #333;
font-size: 20px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}

.puzzle-centro {
position: relative;
z-index: 2;
background: url(../images/puzzle/centro.png) center center no-repeat;
width: 432px;
height: 309px;
margin-top: -314px;
font-size: 33px;
line-height: 170px;
text-align: center;
color: #FFF;
background-size: 55%;
}

.arriba-izq:hover{background: url(../images/puzzle/arriba-izq-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.abajo-izq:hover{background: url(../images/puzzle/abajo-izq-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.arriba-der:hover{background: url(../images/puzzle/arriba-der-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}
.abajo-der:hover{background: url(../images/puzzle/abajo-der-2.png) 0 0 no-repeat;color:#fff;width: 190px;height: 130px;background-size: 100%;}

.cont-puzzle, .cont-aux {
background: #FFF;
padding: 20px;
color: #000;
width: 422px;
height: 350px;
font-size: 13px;
padding-top: 20px;
position: absolute;
margin: -360px 0 0 0;
display: none;
cursor: pointer;}



/*------------------- GRAFICOS TIC ---------------------------*/

.grafico-outsourcing{width:450px;margin-top: 50px;}
.circulo-centro{width:252px;height:252px;margin:0 auto; position:relative;z-index:3;background:url(../images/graficos/circulo-outsourcing.png) 0 0 no-repeat;margin-top: -150px;background-size:90%;
}
.circulos-peq{margin:0 auto;width:417px;position:relative; z-index:9;}
.circulo-gris, .circulo-gris-2{display:block;width:125px;height:125px;background:url(../images/graficos/circulo-outsourcing-2.png) 0 0 no-repeat;color:#000;text-align:center;padding-top: 37px;float:left;transition-property: background;transition-duration:0.3s;background-size:100%;}


.circulo-gris:hover, .circulo-gris-2:hover{background:url(../images/graficos/circulo-outsourcing-3.png) 0 0 no-repeat;background-size:100%;width:125px;height:125px;}
.arriba-derecha{margin-top:70px;margin-right: 10px;}.arriba-centro{margin-top:0;margin-right: 10px;}.arriba-izquierda{margin-top:70px;}

.abajo-derecha{margin-top:-130px;margin-right: 10px;}.abajo-centro{margin-top:-60px;margin-right: 10px;}.abajo-izquierda{margin-top:-130px;}


.circulo-centro-2{width:252px;height:252px;margin:0 auto; position:relative;z-index:3;background:url(../images/graficos/circulo-bpo.png) 0 0 no-repeat;margin-top: -228px;background-size:90%;margin-left: 80px;
}
.circulos-peq-2{margin:0 auto;width: 410px;}
.circ-arriba{float:none;margin:0 auto;z-index: 10;
position: relative;margin-right: 150px;}
.circ-der{float: right;z-index: 10;
position: relative;margin-right: 20px;}
.circ-izq{z-index: 10;
position: relative;}
.circ-abajo{float:none;margin:0 auto;margin-top: -60px;;z-index: 10;
position: relative;margin-right: 150px;}

.cont-grafico {
margin: -420px 0 0 0;
}
.graficosla{margin-left: 0px;
}
.test-index{display:none;}


}

/*====================================================================*/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/*====================================================================*/
@media only screen and (max-width: 479px) {

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	#page-wrap.boxed {
		width: 100%;
		margin: 0;
	}
	
	#logo {
display: block;
float: none;
margin: -5px auto;
text-align: center;
margin-left: -13px;
}
.solucion-index {
width: 240px;
}

/******   PUZZLE  *****/

.puzzle {
width: 320px;
height: 309px;
margin-top: 70px;}

.arriba-izq {
width: 135px;
height: 100px;
float: left;
background: url(../images/puzzle/arriba-izq.png) 0 0 no-repeat;
color: #333;
font-size: 17px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.arriba-der {
width: 135px;
height: 100px;
float: right;
background: url(../images/puzzle/arriba-der.png) 0 0 no-repeat;
color: #333;
font-size: 17px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}

.abajo-izq {
width: 135px;
height: 100px;
float: left;
background: url(../images/puzzle/abajo-izq.png) 0 0 no-repeat;
color: #333;
font-size: 17px;
line-height: 90px;
padding: 10px;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;
}

.abajo-der {
width: 135px;
height: 100px;
float: right;
background: url(../images/puzzle/abajo-der.png) 0 0 no-repeat;
color: #333;
font-size: 17px;
line-height: 90px;
padding: 10px;
text-align: right;
transition-property: background;
transition-duration: 0.5s;
background-size: 100%;

}
.puzzle-centro {
position: relative;
z-index: 2;
background: url(../images/puzzle/centro.png) center center no-repeat;
width: 318px;
height: 309px;
margin-top: -287px;
font-size: 33px;
line-height: 170px;
text-align: center;
color: #FFF;
background-size: 54%;
}

.arriba-izq:hover{background: url(../images/puzzle/arriba-izq-2.png) 0 0 no-repeat;color:#fff;width: 135px;
height: 100px;background-size: 100%;}
.abajo-izq:hover{background: url(../images/puzzle/abajo-izq-2.png) 0 0 no-repeat;color:#fff;width: 135px;
height: 100px;background-size: 100%;}
.arriba-der:hover{background: url(../images/puzzle/arriba-der-2.png) 0 0 no-repeat;color:#fff;width: 135px;
height: 100px;background-size: 100%;}
.abajo-der:hover{background: url(../images/puzzle/abajo-der-2.png) 0 0 no-repeat;color:#fff;width: 135px;
height: 100px;background-size: 100%;}

.cont-puzzle, .cont-aux {
background: #FFF;
padding: 20px;
color: #000;
width: 302px;
height: 350px;
font-size: 11px;
padding-top: 20px;
position: absolute;
margin: -360px 0 0 0;
display: none;
cursor: pointer;
margin-bottom: 20px;
}


/*------------------- GRAFICOS TIC ---------------------------*/

.grafico-outsourcing{width:320px;margin-top: 50px;margin-left: -10px;}
.circulo-centro {
width: 192px;
height: 262px;
margin: 0 auto;
position: relative;
z-index: 3;
background: url(../images/graficos/circulo-outsourcing.png) 0 0 no-repeat;
margin-top: -120px;
background-size: 90%;
}
.circulos-peq{margin:0 auto;width:327px;position:relative; z-index:9;}
.circulo-gris, .circulo-gris-2 {
display: block;
width: 95px;
height: 95px;
background: url(../images/graficos/circulo-outsourcing-2.png) 0 0 no-repeat;
color: #000;
text-align: center;
padding-top: 36px;
float: left;
transition-property: background;
transition-duration: 0.3s;
background-size: 100%;
line-height: 14px;
}

.circulos-peq-abajo{margin-top: -30px;}


.circulo-gris:hover, .circulo-gris-2:hover{background:url(../images/graficos/circulo-outsourcing-3.png) 0 0 no-repeat;background-size:100%;width:95px;height:95px;}
.arriba-derecha{margin-top:70px;margin-right: 10px;}.arriba-centro{margin-top:0;margin-right: 10px;}.arriba-izquierda{margin-top:70px;}

.abajo-derecha{margin-top:-130px;margin-right: 10px;}.abajo-centro{margin-top:-76px;margin-right: 10px;}.abajo-izquierda{margin-top:-130px;}



.circulo-centro-2{width: 192px;
height: 262px;margin:0 auto; position:relative;z-index:3;background:url(../images/graficos/circulo-bpo.png) 0 0 no-repeat;margin-top: -168px;background-size:90%;margin-left: 80px;
}
.circulos-peq-2{margin:0 auto;width:327px;}
.circ-arriba{float:none;margin:0 auto;z-index: 10;
position: relative;margin-right: 114px;top: 30px;}
.circ-der{float: right;z-index: 10;
position: relative;margin-right: 6px;}
.circ-izq {
z-index: 10;
position: relative;
margin-top: 0px;
margin-left: 10px;
}
.circ-abajo {
float: none;
margin: 0 auto;
margin-top: -114px;
z-index: 10;
position: relative;
margin-right: 114px;
}
.cont-grafico {
margin: -410px 0 0 0;
margin-left: -20px;
}

.graficosla{margin-left: 0px;
}

.test-index{display:none;}


}

/*====================================================================*/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/*====================================================================*/
@media only screen and (max-width: 320px){

	/*----------------------------------------------*/
	/* SITE STRUCTURE */
	/*----------------------------------------------*/
	.container {
		width: 100%;
		margin: 0;
	}

	/*----------------------------------------------*/
	/* PORTFOLIO STYLES */
	/*----------------------------------------------*/
		/* Portfolio Two, Three, Four Columns
		---------------------------------------------------------- */
		.portfolio-two-columns .portfolio-item, .portfolio-three-columns .portfolio-item, .portfolio-four-columns .portfolio-item { width: 100%; }

	/*----------------------------------------------*/
	/* WIDGET STYLES */
	/*----------------------------------------------*/
		/* Search Form Widget
		---------------------------------------------------------- */
		input.search-input { width: 83%; }

	/*----------------------------------------------*/
	/* BLOG STYLES */
	/*----------------------------------------------*/
		/* Comments Form
		---------------------------------------------------------- */
		#respond input, #respond textarea { width: 90%; }
		
		#logo {
display: block;
float: none;
margin: -5px auto;
text-align: center;
margin-left: -13px;
}

.container{width: 90%;
margin: 0 auto;}


#logo, #logo a {
font-size: 28px;
line-height: 30px;
color: #101010;
font-weight: 800;
width: 80%;
}
.idiomas {
float: left;
width: 100%;
}
.idiomas ul {
margin: 0 auto;
list-style: none;
width: 110px;
overflow: hidden;
}

.solucion-index {
width: 240px;
}


.graficosla{margin-left: 0px;
}

.test-index{display:none;}

}