/* ----------------- SCREEN ---------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

@media (min-width:1100px) { 

	body {
		font: normal normal 12px 'robotoregular';
	}

	#wrapper {
		width: 1100px;
		margin: 0px auto;
	}

	#wrapp {
		width: 1100px;
		margin: 0px auto;
	}

	#container {
		float: left;
		width: 1100px;
	}

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

	ul {
		list-style: none;
	}

	nav {
		list-style: none;
	}

	h3 {
		font: normal normal 28px 'robotoregular';
	}

	h4 {
		font: normal normal 17px 'robotoregular';
		color: #444;
	}

	/*........................................................................ HEADER */

	header {
		float: left;
		width: 1100px;
		height: 135px;
		margin-top: 5px;
	}

	#top-header {
		float: left;
		width: 1100px;
		height: 65px;
	}

		#logo {
			float: left;
            width: 600px;
            height: 70px;
			background: url('images/logo.png') top left no-repeat;
		}

			#logo h1 {
				display: none;
			}

		#rrss-header {
			float: left;
			width: 500px;
		}

			ul.top-header {
				float: left;
				width: 500px;
				margin-top: 30px;
				margin-left: 20px;
			}

			ul.top-header li {
				float: left;
				margin: 0 20px 0 20px;
			} 

			ul.top-header li a {
				float: right;
				font: normal normal 12px 'robotoregular';
				margin-left: 17px;
				margin-top: -4px;
			}

			li.tw-h {
				background: url('images/twitter.png') top left no-repeat;
			}

			li.fb-h {
				background: url('images/fb.png') top left no-repeat;
			}

			li.rss-h {
				background: url('images/rss.png') top left no-repeat;
			}

			li.mail-h {
				background: url('images/msg.png') top left no-repeat;
				margin: 0px;
			}

	nav {
		float: left;
		width: 800px;
		height: 15px;
		padding: 25px 0px 28px 0px;
	}

	nav li {
		float: left;
		border-right: 1px solid #fff;
		height: 15px;
	}

		nav li:first-child {
			float: left;
			border-right: 0px;
		}

	nav li a {
		float: left;
		padding: 0 20px 23px 17px;
		font: normal normal 11px 'robotomedium';
		color: #fff;
	}

	nav li a:hover {
		border-bottom: 5px solid #fff;
	}

	nav li a.current {
		border-bottom: 5px solid #fff;
	}

		nav li a.home span {
			display: none;
		}

		nav li a.home {
			width: 11px;
			height: 17px;
			padding: 0 25px 21px 15px;
			background-image: url('images/home.png');
			background-position: 18px 0px;
			background-repeat: no-repeat;
		}

	div#claim {
		float: left;
		width: 300px;
		padding: 25px 0 20px 0;
		text-align: right;
	}

		div#claim h2 {
			font: italic normal 14px 'FuturaOblique';
			color: #fff;
		}

	/* .................................................................... CONTENTS */

	/* ....................................................... HOME */

	/* ........................... SLIDER / ACCESO USUARIOS */

	section#slider {
		float: left;
		width: 1100px;
		height: 390px;
		margin-top: 30px;
		margin-bottom: 40px;
	}

	#slide {
		float: left;
		width: 790px;
		height: 390px;
	}

	#zclient {
		float: left;
		width: 240px;
		height: 330px;
		padding: 30px;
		background-color: #373737;
		border-left: 10px solid #f00;
		color: #fff;
		background-image: url('images/panellogin.png');
		background-position: 179px 280px;
		background-repeat: no-repeat;
	}

		#zclient h3 {
			font: normal normal 23px 'robotoregular';
			margin-bottom: 20px;
		}

		#zclient p {
			font: normal normal 12px 'robotoregular';
			margin-bottom: 20px;
			color: #bbb;
		}

	form.access {
		float: left;
		width: 240px;
	}

	form.access input {
		float: left;
		width: 218px;
		padding: 10px;
		margin-bottom: 8px;
		border: 1px solid #f00;
		color: #bbb;
	}

	form.access input[type=submit] {
		float: left;
		width: 75px;
		padding: 7px;
		margin-top: 8px;
		color: #fff;
		background-color: #f00;
	}

	form.access p.form {
		float: left;
		width: 160px;
		font: normal normal 8px Arial, 'robotoregular' !important;
		text-align: right;
		margin: 0px !important;
	}

		form.access p.formm {
			float: left;
			width: 160px;
			font: normal normal 8px Arial, 'robotoregular' !important;
			text-align: right;
			margin-top: 15px !important;
			margin-bottom: 0px !important;
		}

	/* ......................................... SLIDER2 */

	        #demo-wrapper
	        {
	            margin: 0;
	            padding: 0;
	            width: 100%;
	            height: 100%;
	            padding: 40px 20px 0px 20px;
	        }
	        #demo-left
	        {
	            width: 15%;
	            float: left;
	        }
	        #demo-right
	        {
	            width: 85%;
	            float: left;
	        }
	        #hWrapperAuto
	        {
	            margin-top: 20px;
	        }
	        #demo-tabs
	        {
	            width: 100%;
	            height: 50px;
	            color: White;
	            margin: 0;
	            padding: 0;
	        }
	        #demo-tabs div.item
	        {
	            height: 200px;
	            float: left;
	            border-bottom: none;
	            padding: 0;
	            margin: 0;
	            padding: 10px 4px 4px 4px;
	            font-weight: bold;
	        }
	        #demo-tabs div.item.active-tab
	        {
	            background-color: Black;
	        }
	        #demo-tabs div.item.active-tabc
	        {
	            background-color: Black;
	        }
	        #v1, #v2
	        {
	            margin: 20px;
	        }
	        .visible
	        {
	            display: block;
	        }
	        .hidden
	        {
	            display: none;
	        }
	        #oldWrapper
	        {
	            margin-left: 100px;
	        }
	        .heading
	        {
	            font-size: 20pt;
	            font-weight: bold;
	        }

	/*     ...........          */

	section#weare {
		float: left;
		width: 1100px;
	}

	.tittle {
		float: left;
		width: 1038px;
		padding: 15px 30px 15px 30px;
		border: 1px solid #f00;
		margin-bottom: 40px;
	}

		.tittle h3 {
			font: italic normal 17px 'robotoregular' !important;
			text-align: center;
		}

		.tittle span {
			font-weight: bold;
		}


	/* ......................................... SERVICIOS */

	section#serv {
		float: left;
		width: 1100px;
		margin-top: 50px;
		background-color: #373737;
		padding: 50px 0;
		text-align: center;
		margin-bottom: 40px;
	}

	ul.serv {
		float: left;
		width: 1100px;
	}

		ul.serv h4 {
			font: normal normal 23px 'robotoregular';
			color: #fff;
			margin-bottom: 25px;
			margin-top: 120px;
		}

		ul.serv p {
			font: normal normal 13px 'robotoregular';
			color: #777;
		}

	ul.serv li {
		float: left;
		width: 286px;
		padding: 0px 40px;
	}

	li.serv1 {
		background-image: url('images/serv1.png');
		background-position: 110px 18px;
		background-repeat: no-repeat;
	}

	li.serv2 {
		background-image: url('images/serv2.png');
		background-position: 130px 12px;
		background-repeat: no-repeat;
	}

	li.serv3 {
		background-image: url('images/serv3.png');
		background-position: 160px 17px;
		background-repeat: no-repeat;
	}

	/* ......................................... ORDER */

	section#order {
		float: left;
		width: 1100px;
		margin-bottom: 50px;
	}

	section#order h4 {
		font: normal normal 19px 'robotoregular';
		color: #373737;
	}

	section#order label {
		float: left;
		width: 100%;
		color: #777;
		margin-top: 20px;
		margin-bottom: 12px;
	}

	section#order input {
		float: left;
		font: normal normal 11px 'robotoregular';
		padding: 8px;
		border: 1px solid #bbb;
		color: #bbb;
	}

	section#order form select  {
		float: left;
		width: 150px;
		height: 33px;
		font: normal normal 11px 'robotoregular';
		color: #bbb;
		padding: 8px;
		margin: 0 12px 0 0;
		border: 1px solid #bbb;
	}

	section#order p {
		float: left;
		font: normal normal 12px 'robotoregular';
	}

	p.red {
		float:left;
		color: #f00;
	}

	section#order ul {
		float: left;
		width: 1100px;
	}

	section#order ul li {
		float: left;
	}

	li.form1 {
		width: 500px;
	}

	li.form2 {
		width: 280px;
		margin-right: 20px;
	}
		
		li.form2 input {
			width: 260px;
		}

	li.form3 {
		width: 280px;
	}
		
		li.form3 input {
			width: 260px;
		}

		li.form3 a {
			font: normal normal 9px 'robotoregular';
			color: #f00;
			text-decoration: underline;
			text-align: right;
			margin-left: 120px;
		}

	li.form4 {
		width: 160px;
	}

		li.form4 input {
			width: 45px;
			margin-right: 10px !important;
		}

	li.form5 {
		width: 340px;
	}

		li.form5 input {
			width: 300px;
		}

	li.form6 {
		width: 280px;
		margin-right: 20px;
	}

		li.form6 input {
				width: 260px;
			}

	li.form7 {
		width: 280px;
	}
		
		li.form7 input {
			width: 260px;
		}

	li.form8 {
		width: 470px;
		position: absolute;
		left: 400;
		margin-top: 166px;
	}

		li.form8 input {
			width: 460px;
		}

	li.form9 {
		width: 280px;
		margin-right: 20px;
	}

		li.form9 input {
				width: 260px;
			}

	li.form10 input {
				width: 270px;
				margin-top: 50px;
				background-color: #f00;
				color: #fff;
				font: normal normal 11px 'robotoregular';
			}


	/* ................................................... QUIENES SOMOS */

	.underline {
		float: left;
		width: 1100px;
		height: auto;
		margin-top: 40px;
		padding-bottom: 50px;
		background-image: url('images/border.png');
		background-repeat: repeat-x;
		background-position: bottom left;
	}

	.underline h3 {
		font: normal normal 25px 'robotoregular';
	}

	.underline h4 {
		font: normal normal 17px 'robotoregular';
		color: #444;
		margin-bottom: 30px;
	}

	#quienessomos p {
		font: normal normal 14px 'robotoregular';
		color: #444;
	}
		
		#quienessomos p span {
			font: normal normal 14px 'Conv_Roboto-Bold';
		}

	#quienessomos ul {
		margin: 40px 0 40px 20px;
	}

	#quienessomos ul li {
		font: normal normal 14px 'robotoregular';
		line-height: 25px;
		color: #444;
		padding: 0 0 0 30px;
	}

		#quienessomos ul li span {
			font: normal normal 14px 'Conv_Roboto-Bold';
		}

		#quienessomos ul li.tick {
			background-image: url('images/tick.png');
			background-repeat: no-repeat;
			background-position: 0 10px;
		}

	#graph {
		float: left;
		width: 1040px;
		padding: 30px 30px 30px 30px;
		border: 1px solid #f00;
		background-image: url('images/graphic.png');
		background-repeat: no-repeat;
		background-position: 500px 40px;
	}

		#graph p {
			font: normal normal 14px 'robotoregular';
			text-align: center;
			margin: 80px 0 145px 0;
		}

        #graph p.third {
            margin: 80px 0 155px 0;
            padding-top: 10px;
        }
        #graph p.last {
            margin: 80px 0 50px 0;
        }

	#valores {
		float: left;
		width: 1100px;
		margin-bottom: 80px;
	}

	#valores h3 {
		font: normal normal 25px 'robotoregular';
		margin-top: 40px;
	}

	#valores h4 {
		font: normal normal 17px 'robotoregular';
		color: #444;
		margin-bottom: 30px;
	}

	#values {
		float: left;
		width: 1098px;
		border: 1px solid #f00;
	}

	#values ul {
		float: left;
		width: 1100px;
	}

	#values ul li {
		float: left;
		width: 169px;
		padding: 200px 25px 60px 25px;
		font: normal normal 18px 'robotoregular';
		text-align: center;
	}

	li.seguridad {
		background-image: url('images/seguridad.png');
		background-position: 80px 70px;
		background-repeat: no-repeat;
	}

	li.experiencia {
		background-image: url('images/experiencia.png');
		background-position: 80px 90px;
		background-repeat: no-repeat;
	}

	li.innovacion {
		background-image: url('images/innovacion.png');
		background-position: 80px 90px;
		background-repeat: no-repeat;
	}

	li.compatibilidad {
		background-image: url('images/compatibilidad.png');
		background-position: 80px 100px;
		background-repeat: no-repeat;
	}

	li.stock {
		background-image: url('images/stock.png');
		background-position: 65px 120px;
		background-repeat: no-repeat;
	}

	/* ................................................... CONTACTO */

	#formc {
		float: left;
		width: 848px;
	}

	#formc h3 {
		font: normal normal 28px 'robotoregular';
		margin-top: 40px;
	}

	#formc h4 {
		font: normal normal 17px 'robotoregular';
		color: #444;
		margin-bottom: 30px;
	}

	#formc label {
		float: left;
		width: 100%;
		color: #777;
		margin-top: 20px;
		margin-bottom: 12px;
	}

		#formc label span {
			color: #f00;
		}

	#formc input {
		float: left;
		width: 810px;
		height: 30px;
		font: normal normal 11px 'robotoregular';
		padding: 8px;
		border: 1px solid #bbb;
		color: #bbb;
	}

		#formc input[type=submit] {
			float: left;
			width: 200px;
			height: 40px;
			margin: 30px 0 30px 0;
			font: normal normal 13px 'robotoregular';
			padding: 8px;
			background-color: #f00;
			color: #fff;
		}

	#formc textarea {
		float: left;
		width: 810px;
		height: 100px;
		font: normal normal 11px 'robotoregular';
		padding: 8px;
		border: 1px solid #bbb;
		color: #bbb;
		resize: none;
	}

	#formc ul li.nom {
		float: left;
		width: 400px;
		margin-right: 20px;
	}

		#formc ul li.nom input {
		float: left;
		width: 390px;
	}

	#infoc {
		float: left;
		width: 210px;
		padding: 0 20px 10px 20px;
		margin-top: 146px;
		margin-bottom: 100px;
		border: 1px solid #f00;
		background-image: url('images/borderl.png');
		background-position: 20px 85px;
		background-repeat: no-repeat; 
	}

		#infoc #logoc {
			float: left;
			width: 210px;
			height: 69px;
			padding-top: 10px;
			margin-bottom: 20px;
			background-image: url('images/logo.png');
			background-position: 18px 15px;
			background-repeat: no-repeat; 
		}

	#infoc p.parr {
		font: normal normal 12px 'Conv_Roboto-Bold';
		margin-top: 20px;
	}


	/* ................................................... SOLUCIONES */


	.soluciones h3 span {
		font-family: 'Conv_Roboto-Bold';
	}

	.soluciones {
		float: left;
		width: 1098px;
		padding: 40px 0 40px 0;
		text-align: center;
		border: 1px solid #f00;
		margin: 30px 0 50px 0;
	}

	#soluciones {
		float: left;
		margin-top: 30px;
	}

	.soluciones h4 {
		font: normal normal 17px 'robotoregular';
		color: #444;
		margin-bottom: 30px;
	}

		.soluciones ul li h4 {
			font: normal normal 23px 'robotoregular';
			color: #222;
			margin-bottom: 25px;
			margin-top: 120px;
		}

		.soluciones ul li p {
			font: normal normal 14px 'robotoregular';
			color: #777;
		}

			.soluciones ul li p span {
				font: normal normal 14px 'Conv_Roboto-Bold';
			}

	.soluciones ul li {
		float: left;
		width: 286px;
		padding: 0px 40px;
	}

	#soluciones a {
        float: left;
        width: 150px;
        height: 20px;
        margin: 87px 0 0 67px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
	}
    .integ p {
        padding-bottom: 38px;
    }
		li.integ a {
			margin-top: 49px !important;
		}

		li.mant a {
			margin-top: 49px !important;
		}

	li.cons {
		background-image: url('images/cons.png');
		background-repeat: no-repeat;
		background-position: 105px 15px;
	}

	li.integ {
		background-image: url('images/integ.png');
		background-repeat: no-repeat;
		background-position: 125px 15px;
	}

	li.mant {
		background-image: url('images/mant.png');
		background-repeat: no-repeat;
		background-position: 155px 15px;
	}

	#soluciones p {
		font: normal normal 14px 'robotoregular';
		color: #444;
	}
		
		#soluciones p span {
			font: normal normal 14px 'Conv_Roboto-Bold';
		}

	#soluciones ul {
		margin: 15px 0 40px 20px;
	}

	#soluciones ul li {
		font: normal normal 14px 'robotoregular';
		line-height: 25px;
		color: #444;
		padding: 0 0 0 30px;
	}

		#soluciones ul li span {
			font: normal normal 14px 'Conv_Roboto-Bold';
		}

		#soluciones ul li.tick {
			background-image: url('images/tick.png');
			background-repeat: no-repeat;
			background-position: 0 10px;
		}


	/* .................. INTEGRACIÓN ............*/

	#integracion {
		float: left;
		width: 1100px;
		margin-top: 40px;
	}

	#integracion h4 {
		margin-bottom: 30px;
	}

	#integracion .tittle {
		width: 1020px;
		padding: 40px 40px 10px 40px;
		background-image: url('images/integ.png');
		background-position: 40px 30px;
		background-repeat: no-repeat;
	}

	#integracion .tittle p {
		font: normal normal 14px 'robotoregular';
		color: #777;
		margin-left: 150px;
		margin-bottom: 30px;
	}

	#integracion p.slide {
		font: normal normal 14px 'Conv_Roboto-Bold';
	}

	#integracion #slider2 {
		margin-top: -30px;
		margin-bottom: 100px;
	} 

	ul.integracion {
		float: left;
		width: 1100px;
	}

		ul.integracion span {
			color: #f00;
		}

	ul.integracion li {
		float: left;
		width: 275px;
	}

	ul.integracion li label {
		float: left;
		width: 275px;
	}

	ul.integracion li input {
		float: left;
		width: 214px;
		margin-top: 10px;
		padding: 8px;
	}

	ul.integracion li.texta {
		float: left;
		width: 550px;
	}

	ul.integracion li.texta textarea {
		float: left;
		width: 534px;
		height: 120px;
		padding: 8px;
		border: 1px solid #bbb;
		margin-top: 10px;
		resize: none;
	}

	li.left {
		margin-top: -92px;
	}

	ul.integracion li input[type=submit] {
			float: right;
			width: 230px;
			height: 40px;
			margin: 55px 0 30px 0px;
			font: normal normal 13px 'robotoregular';
			padding: 8px;
			background-color: #f00;
			color: #fff !important;
			border: none;
	}


	/* .................. MANTENIMIENTO ............*/

	#mantenimiento {
		float: left;
		width: 1100px;
		margin-top: 40px;
	}

	#mantenimiento h4 {
		margin-bottom: 30px;
	}

	#mantenimiento .tittle {
		width: 1020px;
		padding: 40px 40px 10px 40px;
		background-image: url('images/mant.png');
		background-position: 70px 40px;
		background-repeat: no-repeat;
	}

	#mantenimiento .tittle p {
		font: normal normal 14px 'robotoregular';
		color: #777;
		margin-left: 150px;
		margin-bottom: 30px;
	}

	#mantenimiento p.slide {
		font: normal normal 14px 'Conv_Roboto-Bold';
	}

	#mantenimiento #slider2 {
		margin-top: -30px;
		margin-bottom: 100px;
	} 

	ul.integracion {
		float: left;
		width: 1100px;
	}

		ul.integracion span {
			color: #f00;
		}

	ul.integracion li {
		float: left;
		width: 275px;
	}

	ul.integracion li label {
		float: left;
		width: 275px;
	}

	ul.integracion li input {
		float: left;
		width: 214px;
		margin-top: 10px;
		padding: 8px;
	}

	ul.integracion li.texta {
		float: left;
		width: 550px;
	}

	ul.integracion li.texta textarea {
		float: left;
		width: 534px;
		height: 120px;
		padding: 8px;
		border: 1px solid #bbb;
		margin-top: 10px;
		resize: none;
	}

	li.left {
		margin-top: -92px;
	}

	ul.integracion li input[type=submit] {
			float: right;
			width: 230px;
			height: 40px;
			margin: 55px 0 30px 0px;
			font: normal normal 13px 'robotoregular';
			padding: 8px;
			background-color: #f00;
			color: #fff !important;
			border: none;
	}


	/* .................. ACONSEJAMOS ............*/

	#aconsejamos {
		float: left;
		width: 1100px;
		margin-top: 40px;
	}

	#aconsejamos h4 {
		margin-bottom: 30px;
	}

	#aconsejamos .tittle {
		width: 1020px;
		padding: 60px 40px 10px 40px;
		background-image: url('images/aconsejamos.png');
		background-position: 70px 20px;
		background-repeat: no-repeat;
	}

	#aconsejamos .tittle p {
		font: normal normal 14px 'robotoregular';
		color: #777;
		margin-left: 150px;
		margin-bottom: 60px;
	}

	#aconsejamos #slider2 {
		float: left;
		width: 1100px;
		margin-top: -30px;
		margin-bottom: 40px;
	} 

	ul.integracion {
		float: left;
		width: 1100px;
	}

		ul.integracion span {
			color: #f00;
		}

	ul.integracion li {
		float: left;
		width: 275px;
	}

	ul.integracion li label {
		float: left;
		width: 275px;
	}

	ul.integracion li input {
		float: left;
		width: 214px;
		margin-top: 10px;
		padding: 8px;
	}

	ul.integracion li.texta {
		float: left;
		width: 550px;
	}

	ul.integracion li.texta textarea {
		float: left;
		width: 534px;
		height: 120px;
		padding: 8px;
		border: 1px solid #bbb;
		margin-top: 10px;
		resize: none;
	}

	li.left {
		margin-top: -92px;
	}

	ul.integracion li input[type=submit] {
			float: right;
			width: 230px;
			height: 40px;
			margin: 55px 0 30px 0px;
			font: normal normal 13px 'robotoregular';
			padding: 8px;
			background-color: #f00;
			color: #fff !important;
			border: none;
	}

	#graphics {
		float: left;
		width: 1100px;
		margin-bottom: 60px;
	}

		#graphics p {
			font: normal normal 18px 'Conv_Roboto-Bold';
			text-align: center;
		}

	#graph-left {
		float: left;
		width: 550px;
		height: 600px;
		padding: 30px 0 40px 0;
		background-image: url('images/acons1.png');
		background-repeat: no-repeat;
		background-position: 30px 80px;
	}

	#graph-right {
		float: left;
		width: 550px;
		height: 600px;
		padding: 30px 0 40px 0;
		background-color: #ccc;
		background-image: url('images/acons2.png');
		background-repeat: no-repeat;
		background-position: 90px 80px;
	}

    #graph-left-ca {
        float: left;
        width: 550px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons1_ca.png');
        background-repeat: no-repeat;
        background-position: 30px 80px;
    }

    #graph-right-ca {
        float: left;
        width: 550px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons2_ca.png');
        background-repeat: no-repeat;
        background-position: 90px 80px;
    }




	/*........................................................................ FOOTER */

	footer h4 {
		color: #fff;
	}

	#sup {
		float: left;
		width: 1100px;
		padding: 50px 0;
		color: #fff;
	}

	#sup > ul {
		float: left;
		width: 1100px;
	}

	#sup > ul > li {
		float: left;
		width: 375px;
		height: auto;
	}

	#sup h4 {
		font: normal normal 20px 'robotoregular';
		margin-bottom: 20px;
	}

	#sup p {
		font: normal normal 14px 'robotoregular';
		color: #bbb;
		margin-bottom: 10px;
	}

	ul#news li {
			float: left;
			width: 220px;
			margin-bottom: 30px;
			padding-top: 20px;
			border-top: 1px solid #777;
		}

		ul#news li:first-child {
			float: left;
			margin-bottom: 30px;
			padding-top: 0px;
			border-top: 0px !important;
		}

		.date {
			float: left;
			width: 275px;
			height: 14px;
			background: url('images/clock.png') top left no-repeat;
		}

		#sup .date p {
			color: #777;
			margin-left: 20px;
		}


	ul#links {
		float: left;
		width: 220px;
	}

	ul#links p {
		float: left;
		font: normal normal 14px 'robotoregular';
	}

	ul#links li {
		float: left;
		width: 275px;
		font: normal normal 14px 'robotoregular';
		margin-bottom: 6px;
	}

	ul#links a {
		float: left;
		font: normal normal 14px 'robotoregular';
		margin-bottom: 9px;
		text-decoration: underline;
	}

	ul li#info {
		float: left;
		width: 200px;
		margin-right: 20px;
	}

	ul li#contact {
		float: left;
		width: 275px;
		margin-right: 0px;
	}

	li#contact ul li {
		font: normal normal 14px 'robotoregular';
		color: #bbb;
	}

		li#contact ul li.dir {
			float: left;
			background-image: url('images/direfooter.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
		}

		li#contact ul li.email {
			float: left;
			background-image: url('images/msgfooter.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
		}

		li#contact ul li.phone {
			float: left;
			background-image: url('images/telffooter.png');
			background-position: 0px 0px;
			background-repeat: no-repeat;
		}

		li#contact ul li.dir p {
			float: left;
			margin-left: 40px;
		}

		li#contact ul li.email p {
			float: left;
			margin-left: 40px;
		}

		li#contact ul li.phone p {
			float: left;
			margin-left: 40px;
		}


	#inf {
		float: left;
		width: 1100px;
		padding: 30px 0px;
		color: #fff;
		border-bottom: 7px solid #f00;
	}

	#textf {
		float: left;
		width: 900px;
	}

	#textf p {
		font: normal normal 14px 'robotoregular';
		color: #bbb;
	}

	#rrssf {
		float: left;
		width: 200px;
	}

	#rrssf ul.rrss-footer li {
		float: left;
		width: 50px;
	}

	#rss-f {
		float: left;
		width: 28px;
		height: 28px;
		background-image: url('images/rssf.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
	}

	#fb-f {
		float: left;
		width: 28px;
		height: 28px;
		background-image: url('images/fbf.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
	}

	#tw-f {
		float: left;
		width: 28px;
		height: 28px;
		background-image: url('images/twf.png');
		background-position: 0px 3px;
		background-repeat: no-repeat;
	}

	#lki-f {
		float: left;
		width: 28px;
		height: 28px;
		background-image: url('images/inf.png');
		background-position: 0px 0px;
		background-repeat: no-repeat;
	}


	/*......................................................... BACKGROUND DECORATION */

	#top-decoration {
		width: 100%;
		height: 68px;
		background-color: #f00;
		position: relative;
		top: 70px;
		z-index: -999;
	}

	#med-decoration {
		width: 100%;
		height: 370px;
		background-color: #373737;
		position: relative;
		top: 877px;
		z-index: -999;
	}

	#line-decoration {
		width: 100%;
		border-bottom: 1px solid #bbb;
		position: relative;
		top: 710px;
	}

	#line-decoration2 {
		width: 100%;
		border-bottom: 1px solid #bbb;
		position: relative;
		top: 900px;
	}

	#line-decoration3 {
		width: 100%;
		border-bottom: 1px solid #bbb;
		position: relative;
		top: 1570px;
	}

	#deco-sup {
		float: left;
		width: 100%;
		height: 500px;
		background-color: #373737;
		position: relative;
		margin-top: -530px;
		z-index: -999;
	}

	#deco-inf {
		float:left;
		width: 100%;
		height: 88px;
		background-color: #000;
		position: relative;
		margin-top: -95px;
		z-index: -999;
		border-bottom: 7px solid #f00;
	}



	/* ,,,,,,,,,,,,,,,,,, CSS SLIDER HOME */

		/* =Skitter styles
	----------------------------------------------- */
	.box_skitter {
		position: relative;
		width: 790px;
		height: 390px;
		background: #000;
	}

	.box_skitter img {
		max-width: none;
	} /* Tip for stildv */
	.box_skitter ul {
		display: none;
	}

	.box_skitter .container_skitter {
		overflow: hidden;
		position: relative;
	}

	.box_skitter .image {
		overflow: hidden;
	}

	.box_skitter .image img {
		display: none;
	}

	/* =Box clone
	-------------------------------------------------------------- */
	.box_skitter .box_clone {
		position: absolute;
		top: 0;
		left: 0;
		width: 100px;
		overflow: hidden;
		display: none;
		z-index: 20;
	}

	.box_skitter .box_clone img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
	}

	/* =Navigation
	-------------------------------------------------------------- */
	.box_skitter .prev_button {
		position: absolute;
		top: 50%;
		left: 35px;
		z-index: 152;
		width: 42px;
		height: 42px;
		overflow: hidden;
		text-indent: -9999em;
		margin-top: -25px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .next_button {
		position: absolute;
		top: 50%;
		right: 35px;
		z-index: 152;
		width: 42px;
		height: 42px;
		overflow: hidden;
		text-indent: -9999em;
		margin-top: -25px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .prev_button:hover, .box_skitter .next_button:hover {
		opacity: 0.5 !important;
	}

	/* =Numbers
	-------------------------------------------------------------- */
	.box_skitter .info_slide {
		position: absolute;
		top: 15px;
		left: 15px;
		z-index: 100;
		background: #000;
		color: #fff;
		font: bold 11px arial;
		padding: 5px 0 5px 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		opacity: 0.75;
	}

	.box_skitter .info_slide .image_number {
		background: #333;
		float: left;
		padding: 2px 10px;
		margin: 0 5px 0 0;
		cursor: pointer;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .info_slide .image_number:hover {
		background: #000;
	}

	.box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
		background: #cc3333;
		float: left;
		padding: 2px 10px;
		margin: 0 5px 0 0;
	}

	/* =Thumbs
		Change width and height to customization dimension thumb
	-------------------------------------------------------------- */
	.box_skitter .container_thumbs {
		position: relative;
		overflow: hidden;
		height: 50px;
	}

	.box_skitter .info_slide_thumb {
		height: 50px;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		overflow: hidden;
		top: auto;
		top: 0;
		left: 0;
		padding: 0 !important;
		opacity: 1.0;
	}

	.box_skitter .info_slide_thumb .image_number {
		overflow: hidden;
		width: 100px;
		height: 50px;
		position: relative;
		margin: 0 !important;
		padding: 0 !important;
		-moz-border-radius: 0 !important;
		-webkit-border-radius: 0 !important;
		border-radius: 0 !important;
	}

	.box_skitter .info_slide_thumb .image_number img {
		position: absolute;
		top: -30px;
		left: -30px;
		height: 100px;
	}

	.box_skitter .box_scroll_thumbs {
		padding: 0;
	}

	.box_skitter .box_scroll_thumbs .scroll_thumbs {
		position: absolute;
		bottom: 60px;
		left: 50px;
		background: #ccc;
		background: -moz-linear-gradient(-90deg, #555, #fff);
		background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
		width: 200px;
		height: 10px;
		overflow: hidden;
		text-indent: -9999em;
		z-index: 101;
		cursor: pointer;
		border: 0px solid #333;
	}

	/* =Dots
	-------------------------------------------------------------- */
	.box_skitter .info_slide_dots {
		position: absolute;
		bottom: -40px;
		z-index: 151;
		padding: 5px 0 5px 5px;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
	}

	.box_skitter .info_slide_dots .image_number {
		background: #333;
		float: left;
		margin: 0 5px 0 0;
		cursor: pointer;
		-moz-border-radius: 50px;
		-webkit-border-radius: 50px;
		border-radius: 50px;
		width: 18px;
		height: 18px;
		text-indent: -9999em;
		overflow: hidden;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .info_slide_dots .image_number:hover {
		background: #000;
	}

	.box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
		background: #cc3333;
		float: left;
		margin: 0 5px 0 0;
	}

	/* =Loading
	-------------------------------------------------------------- */
	.loading {
		position: absolute;
		top: 50%;
		right: 50%;
		z-index: 10000;
		margin: -16px -16px;
		color: #fff;
		text-indent: -9999em;
		overflow: hidden;
		background: url(imageslider/ajax-loader.gif) no-repeat left top;
		width: 32px;
		height: 32px;
	}

	/* =Label
	-------------------------------------------------------------- */
	.box_skitter .label_skitter {
		z-index: 150;
		position: absolute;
		bottom: 0px;
		left: 0px;
		display: none;
	}

	.box_skitter .label_skitter {
		z-index: 150;
		position: absolute;
		bottom: 0px;
		left: 0px;
		color: #fff;
		display: none;
		opacity: 0.8;
		background: #000;
	}

	.box_skitter .label_skitter p {
		padding: 10px;
		margin: 0;
		font: normal 22px arial,tahoma;
		letter-spacing: -1px;
	}

	.box_skitter .progressbar {
		background: #000;
		position: absolute;
		top: 5px;
		left: 15px;
		height: 5px;
		width: 200px;
		z-index: 99;
		border-radius: 20px;
	}

	/* =Preview slide
	-------------------------------------------------------------- */
	.box_skitter .preview_slide {
		display: none;
		position: absolute;
		z-index: 152;
		bottom: 30px;
		left: -40px;
		width: 100px;
		height: 100px;
		background: #fff;
		border: 1px solid #222;
		-moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
		-webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
		box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
		overflow: hidden;
	}

	.box_skitter .preview_slide ul {
		height: 100px !important;
		overflow: hidden !important;
		margin: 0 !important;
		list-style: none !important;
		display: block !important;
		position: absolute !important;
		top: 0;
		left: 0;
	}

	.box_skitter .preview_slide ul li {
		width: 100px !important;
		height: 100px !important;
		overflow: hidden !important;
		float: left !important;
		margin: 0 !important;
		padding: 0 !important;
		position: relative !important;
		display: block !important;
	}

	.box_skitter .preview_slide ul li img {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		height: 150px !important;
		width: auto !important;
	}

	/* =Focus
	-------------------------------------------------------------- */
	#overlay_skitter {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9998;
		opacity: 1;
		background: #000;
	}

	.box_skitter .focus_button {
		position: absolute;
		top: 50%;
		z-index: 100;
		width: 42px;
		height: 42px;
		overflow: hidden;
		text-indent: -9999em;
		margin-top: -25px;
		opacity: 0;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .play_pause_button {
		position: absolute;
		top: 50%;
		z-index: 151;
		width: 42px;
		height: 42px;
		overflow: hidden;
		text-indent: -9999em;
		margin-top: -25px;
		opacity: 0;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		transition: all 0.2s;
	}

	.box_skitter .play_pause_button.play_button {
	}


	.box_skitter .play_pause_button:hover {
		opacity: 0.5 !important;
	}

	.box_skitter .focus_button:hover {
		opacity: 0.5 !important;
	}

	/* =Example for dimenions
	-------------------------------------------------------------- */
	.box_skitter_large {
		width: 790px;
		height: 390px;
	}

	.box_skitter_small {
		width: 200px;
		height: 100px;
	}

	/* =Default theme
	-------------------------------------------------------------- */
	.box_skitter .focus_button, 
	.box_skitter .next_button, 
	.box_skitter .prev_button, 
	.box_skitter .play_pause_button 
	{
		display: block;
		background: url('imageslider/sprite-default.png') no-repeat;
	}

	.box_skitter .next_button {
		background-position: -0px -42px;
		width: 42px;
		height: 42px;
	}

	.box_skitter .prev_button {
		background-position: -42px -42px;
		width: 42px;
		height: 42px;
	}

	.box_skitter .play_pause_button {
		background-position: -0px -0px;
		width: 42px;
		height: 42px;
	}

	.box_skitter .play_pause_button.play_button {
		background-position: -0px -84px;
		width: 42px;
		height: 42px;
	}

	.box_skitter .focus_button {
		background-position: -42px -0px;
		width: 42px;
		height: 42px;
	}

	/* =Square theme
	-------------------------------------------------------------- */

	.skitter-square .play_pause_button, 
	.skitter-square .next_button, 
	.skitter-square .focus_button, 
	.skitter-square .prev_button 
	{
		display: block;
		background: url('imageslider/sprite-square.png') no-repeat;
	}

	.skitter-square .play_pause_button {
		background-position: -55px -0px;
		width: 55px;
		height: 55px;
		top: 10px !important;
		left: 10px !important;
		bottom: auto !important;
		right: auto !important;
		margin-top:0;
	}

	.skitter-square .play_pause_button.play_button {
		background-position: -0px -0px;
		width: 55px;
		height: 55px;
	}

	.skitter-square .focus_button {
		background-position: -55px -55px;
		width: 55px;
		height: 55px;
		top: 10px !important;
		left: 65px !important;
		bottom: auto !important;
		right: auto !important;
		margin-top:0;
	}

	.skitter-square .next_button {
		background-position: -0px -55px;
		width: 55px;
		height: 55px;
		top: auto;
		left: auto;
		bottom: 10px;
		right: 10px;
	}

	.skitter-square .prev_button {
		background-position: -0px -110px;
		width: 55px;
		height: 55px;
		top: auto;
		left: auto;
		bottom: 10px;
		right: 65px;
	}

	.skitter-square .info_slide {
		background: transparent;
	}

	.skitter-square .info_slide .image_number {
		background: #fff;
		box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
		font-size: 12px;
		font-weight: normal;
		color:#333;
	}

	.skitter-square .info_slide .image_number:hover {
		background: #ccc;
	}

	.skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
		background: #111;
		color:#fff;
	}

	.skitter-square .info_slide_dots .image_number {
		width: 14px;
		height: 14px;
		box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
		background: #ccc;
	}

	.skitter-square .info_slide_dots .image_number:hover {
		background: #999;
	}

	.skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
		background: #555;
	}

	.skitter-square .progressbar {
		top:0 !important;
		left: 0 !important;
		width: 100%;
		background: #fff;
		border-radius: 0;
		height: 2px;
	}

	/* ,,,,,,,,,,,,,,,,,, CSS CARROUSEL */

	/*Horizontal Orientation CSS*/
	.jscarousal-horizontal
	{
		width: 1100px;
		height: 200px;
		margin-left: -21px;
		position: relative; /*overflow: hidden;*/
	}
	.jscarousal-horizontal-back, .jscarousal-horizontal-forward
	{
		float: left;
		width: 23px;
		height: 200px;
		color: White;
		position: relative;
		top: 6px;
		cursor: pointer;
	}
	.jscarousal-horizontal-back
	{
		background-image: url(images/left_arrow.jpg);
		background-repeat: no-repeat;
		background-position: left 18px;
	}
	.jscarousal-horizontal-forward
	{
		background-image: url(images/right_arrow.jpg);
		background-repeat: no-repeat;
		background-position: right 18px;
	}
	.jscarousal-contents-horizontal
	{
		width: 1050px;
		height: 200px;
		float: left;
		position: relative;
		overflow: hidden;
	}
	.jscarousal-contents-horizontal > div
	{
		position: absolute;
		width: 100%;
		height: 200px;
	}
	.jscarousal-contents-horizontal > div > div
	{
		float: left;
		margin-left: 8px;
		margin-right: 8px;
	}
	.jscarousal-contents-horizontal img
	{
		width: 246px;
		height: 200px;
	}
	/*Horizontal Orientation CSS Ends*/



	/*Common*/
	.hidden
	{
		display: none;
	}
	.visible
	{
		display: block;
	}
	.thumbnail-active
	{
		filter: alpha(opacity=100);
		opacity: 1.0;
		cursor: pointer;
	}
	.thumbnail-inactive
	{
		filter: alpha(opacity=20);
		opacity: 1;
		cursor: pointer;
	}
	.thumbnail-text
	{
		color: #7A7677;
		font-weight: bold;
		text-align: left;
		display: block;
		padding: 10px 2px 2px 0px;
	}

    .secciones1 {
        width: 160px !important;;
    }

    .secciones2 {
        width: 275px;
    }



}


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

    body {
        font: normal normal 12px 'robotoregular';
    }

    #wrapper {
        width: 800px;
        margin: 0px auto;
    }

    #wrapp {
        width: 800px;
        margin: 0px auto;
    }

    #container {
        float: left;
        width: 800px;
    }

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

    ul {
        list-style: none;
    }

    nav {
        list-style: none;
    }

    h3 {
        font: normal normal 28px 'robotoregular';
    }

    h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
    }

    /*........................................................................ HEADER */

    header {
        float: left;
        width: 800px;
        height: 135px;
        margin-top: 5px;
    }

    #top-header {
        float: left;
        width: 800px;
        height: 65px;
    }

    #logo {
        float: left;
        width: 300px;
        height: 70px;
        background: url('images/logo.png') top left no-repeat;
    }

    #logo h1 {
        display: none;
    }

    #rrss-header {
        float: left;
        width: 500px;
    }

    ul.top-header {
        float: left;
        width: 480px;
        margin-top: 30px;
        margin-left: 20px;
    }

    ul.top-header li {
        float: left;
        margin: 0 20px 0 20px;
    }

    ul.top-header li a {
        float: right;
        font: normal normal 12px 'robotoregular';
        margin-left: 17px;
        margin-top: -4px;
    }

    li.tw-h {
        background: url('images/twitter.png') top left no-repeat;
    }

    li.fb-h {
        background: url('images/fb.png') top left no-repeat;
    }

    li.rss-h {
        background: url('images/rss.png') top left no-repeat;
    }

    li.mail-h {
        background: url('images/msg.png') top left no-repeat;
        margin: 0px;
    }

    nav {
        float: left;
        width: 500px;
        height: 15px;
        padding: 25px 0px 28px 0px;
    }

    nav li {
        float: left;
        border-right: 1px solid #fff;
        height: 15px;
    }

    nav li:first-child {
        float: left;
        border-right: 0px;
    }

    nav li a {
        float: left;
        padding: 0 20px 23px 17px;
        font: normal normal 11px 'robotomedium';
        color: #fff;
    }

    nav li a:hover {
        border-bottom: 5px solid #fff;
    }

    nav li a.current {
        border-bottom: 5px solid #fff;
    }

    nav li a.home span {
        display: none;
    }

    nav li a.home {
        width: 11px;
        height: 17px;
        padding: 0 25px 21px 15px;
        background-image: url('images/home.png');
        background-position: 18px 0px;
        background-repeat: no-repeat;
    }

    div#claim {
        float: left;
        width: 300px;
        padding: 25px 0 20px 0;
        text-align: right;
    }

    div#claim h2 {
        font: italic normal 14px 'FuturaOblique';
        color: #fff;
    }

    /* .................................................................... CONTENTS */

    /* ....................................................... HOME */

    /* ........................... SLIDER / ACCESO USUARIOS */

    section#slider {
        float: left;
        width: 800px;
        height: 283px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    #slide {
        float: left;
        width: 574px;
        height: 283px;
    }

    #slide img {
        float: left;
        width: 574px;
        height: 283px;
    }

    #zclient {
        float: left;
        width: 180px;
        height: 243px;
        padding: 20px;
        background-color: #373737;
        border-left: 6px solid #f00;
        color: #fff;
    }

    #zclient h3 {
        font: normal normal 18px 'robotoregular';
        margin-bottom: 10px;
    }

    #zclient p {
        font: normal normal 10px 'robotoregular';
        margin-bottom: 20px;
        color: #bbb;
    }

    form.access {
        float: left;
        width: 180px;
    }

    form.access input {
        float: left;
        width: 160px;
        padding: 10px;
        margin-bottom: 5px;
        border: 1px solid #f00;
        color: #bbb;
    }

    form.access input[type=submit] {
        float: left;
        width: 60px;
        padding: 5px;
        margin-top: 8px;
        color: #fff;
        background-color: #f00;
    }

    form.access p.form {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin: 0px !important;
    }

    form.access p.formm {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin-bottom: 0px !important;
    }

    /* ......................................... SLIDER2 */

    #demo-wrapper
    {
        margin: 0 0 0 20px;
        padding: 0;
        width: 100%;
        height: 100%;
        padding: 40px 20px 0px 20px;
    }
    #demo-left
    {
        width: 15%;
        float: left;
    }
    #demo-right
    {
        width: 85%;
        float: left;
    }
    #hWrapperAuto
    {
        margin-top: 20px;
    }
    #demo-tabs
    {
        width: 100%;
        height: 50px;
        color: White;
        margin: 0;
        padding: 0;
    }
    #demo-tabs div.item
    {
        height: 200px;
        float: left;
        border-bottom: none;
        padding: 0;
        margin: 0;
        padding: 10px 4px 4px 4px;
        font-weight: bold;
    }
    #demo-tabs div.item.active-tab
    {
        background-color: Black;
    }
    #demo-tabs div.item.active-tabc
    {
        background-color: Black;
    }
    #v1, #v2
    {
        margin: 20px;
    }
    .visible
    {
        display: block;
    }
    .hidden
    {
        display: none;
    }
    #oldWrapper
    {
        margin-left: 100px;
    }
    .heading
    {
        font-size: 20pt;
        font-weight: bold;
    }

    /*     ...........          */

    section#weare {
        float: left;
        width: 800px;
    }

    .tittle {
        float: left;
        width: 800px;
        padding: 15px 0;
        border: 1px solid #f00;
        margin-bottom: 40px;
    }

    .tittle h3 {
        font: italic normal 17px 'robotoregular' !important;
        text-align: center;
    }

    .tittle span {
        font-weight: bold;
    }


    /* ......................................... SERVICIOS */

    section#serv {
        float: left;
        width: 800px;
        margin-top: 50px;
        background-color: #373737;
        padding: 50px 0;
        text-align: center;
        margin-bottom: 40px;
    }

    ul.serv {
        float: left;
        width: 800px;
    }

    ul.serv h4 {
        font: normal normal 23px 'robotoregular';
        color: #fff;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    ul.serv p {
        font: normal normal 13px 'robotoregular';
        color: #777;
    }

    ul.serv li {
        float: left;
        width: 180px;
        padding: 0px 40px;
    }

    li.serv1 {
        background-image: url('images/serv1.png');
        background-position: 50px 18px;
        background-repeat: no-repeat;
    }

    li.serv2 {
        background-image: url('images/serv2.png');
        background-position: 80px 12px;
        background-repeat: no-repeat;
    }

    li.serv3 {
        background-image: url('images/serv3.png');
        background-position: 110px 17px;
        background-repeat: no-repeat;
    }

    /* ......................................... ORDER */

    section#order {
        float: left;
        width: 800px;
        margin-bottom: 50px;
    }

    section#order h4 {
        font: normal normal 19px 'robotoregular';
        color: #373737;
    }

    section#order label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    section#order input {
        float: left;
        font: normal normal 11px 'robotoregular';
        padding: 8px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    section#order form select  {
        float: left;
        width: 250px;
        height: 33px;
        font: normal normal 11px 'robotoregular';
        color: #bbb;
        padding: 8px;
        margin: 0 12px 0 0;
        border: 1px solid #bbb;
    }

    section#order p {
        float: left;
        font: normal normal 12px 'robotoregular';
    }

    p.red {
        float:left;
        color: #f00;
    }

    section#order ul {
        float: left;
        width: 800px;
    }

    section#order ul li {
        float: left;
    }

    li.form1 {
        width: 800px;
    }

    li.form2 {
        width: 350px;
        margin-right: 60px;
    }

    li.form2 input {
        width: 350px;
    }

    li.form3 {
        width: 350px;
    }

    li.form3 input {
        width: 350px;
    }

    li.form3 a {
        font: normal normal 9px 'robotoregular';
        color: #f00;
        text-decoration: underline;
        text-align: right;
        margin-left: 190px;
    }

    li.form4 {
        width: 410px;
    }

    li.form4 input {
        width: 160px;
        margin-right: 10px !important;
    }

    li.form5 {
        width: 380px;
    }

    li.form5 input {
        width: 350px;
    }

    li.form6 {
        width: 390px;
        margin-right: 20px;
    }

    li.form6 input {
        width: 350px;
    }

    li.form7 {
        width: 380px;
    }

    li.form7 input {
        width: 350px;
    }

    li.form8 {
        float: left;
        width: 410px;
    }

    li.form8 input {
        width: 350px;
    }

    li.form9 {
        width: 380px;
    }

    li.form9 input {
        width: 350px;
    }

    li.form10 input {
        width: 370px;
        margin-top: 50px;
        margin-bottom: 20px;
        background-color: #f00;
        color: #fff !important;
        border: 0px;
        font: normal normal 11px 'robotoregular';
    }


    /* ................................................... QUIENES SOMOS */

    .underline {
        float: left;
        width: 800px;
        height: auto;
        margin-top: 40px;
        padding-bottom: 50px;
        background-image: url('images/border.png');
        background-repeat: repeat-x;
        background-position: bottom left;
    }

    .underline h3 {
        font: normal normal 28px 'robotoregular';
    }

    .underline h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #quienessomos p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #quienessomos p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul {
        margin: 40px 0 40px 20px;
    }

    #quienessomos ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #quienessomos ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }

    #graph {
        float: left;
        width: 760px;
        padding: 40px 20px 50px 20px;
        border: 1px solid #f00;
        background-image: url('images/graphic.png');
        background-repeat: no-repeat;
        background-position: 370px 40px;
    }

    #graph p {
        font: normal normal 13px 'robotoregular';
        text-align: center;
        margin: 66px 0 125px 0;
    }

    #graph p.last {
        margin: 80px 0 50px 0;
    }

    #valores {
        float: left;
        width: 800px;
        margin-bottom: 80px;
    }

    #valores h3 {
        font: normal normal 24px 'robotoregular';
        margin-top: 40px;
    }

    #valores h4 {
        font: normal normal 14px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #values {
        float: left;
        width: 798px;
        border: 1px solid #f00;
    }

    #values ul {
        float: left;
        width: 800px;
    }

    #values ul li {
        float: left;
        width: 120px;
        padding: 170px 20px 60px 20px;
        font: normal normal 14px 'robotoregular';
        text-align: center;
    }

    li.seguridad {
        background-image: url('images/seguridad.png');
        background-position: 50px 40px;
        background-repeat: no-repeat;
    }

    li.experiencia {
        background-image: url('images/experiencia.png');
        background-position: 50px 50px;
        background-repeat: no-repeat;
    }

    li.innovacion {
        background-image: url('images/innovacion.png');
        background-position: 50px 70px;
        background-repeat: no-repeat;
    }

    li.compatibilidad {
        background-image: url('images/compatibilidad.png');
        background-position: 50px 80px;
        background-repeat: no-repeat;
    }

    li.stock {
        background-image: url('images/stock.png');
        background-position: 40px 90px;
        background-repeat: no-repeat;
    }

    /* ................................................... CONTACTO */

    #formc {
        float: left;
        width: 500px;
        margin-right: 40px;
    }

    #formc h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #formc h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 10px;
    }

    #formc label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    #formc label span {
        color: #f00;
    }

    #formc input {
        float: left;
        width: 500px;
        height: 30px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    #formc input[type=submit] {
        float: left;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
    }

    #formc textarea {
        float: left;
        width: 500px;
        height: 40px;
        font: normal normal 11px 'robotoregular';
        padding: 8px;
        border: 1px solid #bbb;
        color: #bbb;
        resize: none;
    }

    #formc ul li.nom {
        float: left;
        width: 500px;
    }

    #formc ul li.nom input {
        float: left;
        width: 500px;
    }

    #infoc {
        float: left;
        width: 210px;
        padding: 0 20px 47px 20px;
        margin-top: 130px;
        margin-bottom: 100px;
        border: 1px solid #f00;
        background-image: url('images/borderl.png');
        background-position: 20px 85px;
        background-repeat: no-repeat;
    }

    #infoc #logoc {
        float: left;
        width: 210px;
        height: 69px;
        padding-top: 10px;
        margin-bottom: 20px;
        background-image: url('images/logo.png');
        background-position: 18px 15px;
        background-repeat: no-repeat;
    }

    #infoc p.parr {
        font: normal normal 12px 'Conv_Roboto-Bold';
        margin-top: 20px;
    }


    /* ................................................... SOLUCIONES */


    .soluciones h3 span {
        font-family: 'Conv_Roboto-Bold';
    }

    .soluciones {
        float: left;
        width: 798px;
        padding: 40px 0 40px 0;
        text-align: center;
        border: 1px solid #f00;
        margin: 30px 0 50px 0;
    }

    #soluciones {
        float: left;
        margin-top: 30px;
    }

    .soluciones h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    .soluciones ul li h4 {
        font: normal normal 23px 'robotoregular';
        color: #222;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    .soluciones ul li p {
        font: normal normal 14px 'robotoregular';
        color: #777;
    }

    .soluciones ul li p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    .soluciones ul li {
        float: left;
        width: 220px;
        padding: 0px 40px;
    }

    #soluciones a {
        float: left;
        width: 130px;
        height: 40px;
        margin: 30px 0 0 30px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
    }

    li.integ a {
        margin-top: 49px !important;
    }

    li.mant a {
        margin-top: 49px !important;
    }

    li.cons {
        background-image: url('images/cons.png');
        background-repeat: no-repeat;
        background-position: 70px 15px;
    }

    li.integ {
        background-image: url('images/integ.png');
        background-repeat: no-repeat;
        background-position: 90px 15px;
    }

    li.mant {
        background-image: url('images/mant.png');
        background-repeat: no-repeat;
        background-position: 120px 15px;
    }

    #soluciones p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #soluciones p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul {
        margin: 15px 0 40px 20px;
    }

    #soluciones ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #soluciones ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }


    /* .................. INTEGRACIÓN ............*/

    #integracion {
        float: left;
        width: 800px;
        margin-top: 40px;
    }

    #integracion h4 {
        margin-bottom: 30px;
    }

    #integracion .tittle {
        width: 720px;
        padding: 40px 40px 10px 40px;
        background-image: url('images/integ.png');
        background-position: 40px 30px;
        background-repeat: no-repeat;
    }

    #integracion .tittle p {
        font: normal normal 14px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 30px;
    }

    #integracion p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #integracion #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 800px;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. MANTENIMIENTO ............*/

    #mantenimiento {
        float: left;
        width: 800px;
        margin-top: 40px;
    }

    #mantenimiento h4 {
        margin-bottom: 30px;
    }

    #mantenimiento .tittle {
        width: 720px;
        padding: 40px 40px 10px 40px;
        background-image: url('images/mant.png');
        background-position: 70px 40px;
        background-repeat: no-repeat;
    }

    #mantenimiento .tittle p {
        font: normal normal 14px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 30px;
    }

    #mantenimiento p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #mantenimiento #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. ACONSEJAMOS ............*/

    #aconsejamos {
        float: left;
        width: 800px;
        margin-top: 40px;
    }

    #aconsejamos h4 {
        margin-bottom: 30px;
    }

    #aconsejamos .tittle {
        width: 720px;
        padding: 50px 40px 20px 40px;
        background-image: url('images/aconsejamos.png');
        background-position: 70px 40px;
        background-repeat: no-repeat;
    }

    #aconsejamos .tittle p {
        font: normal normal 14px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 60px;
    }

    #aconsejamos #slider2 {
        float: left;
        width: 800px;
        margin-top: -30px;
        margin-bottom: 40px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }

    #graphics {
        float: left;
        width: 800px;
        margin-bottom: 60px;
    }

    #graphics p {
        font: normal normal 18px 'Conv_Roboto-Bold';
        text-align: center;
    }

    #graph-left {
        float: left;
        width: 800px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons1.png');
        background-repeat: no-repeat;
        background-position: 170px 80px;
    }

    #graph-right {
        float: left;
        width: 800px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons2.png');
        background-repeat: no-repeat;
        background-position: 210px 80px;
    }

    #graph-left-ca {
        float: left;
        width: 800px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons1_ca.png');
        background-repeat: no-repeat;
        background-position: 170px 80px;
    }

    #graph-right-ca {
        float: left;
        width: 800px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons2_ca.png');
        background-repeat: no-repeat;
        background-position: 210px 80px;
    }




    /*........................................................................ FOOTER */

    footer h4 {
        color: #fff;
    }

    #sup {
        float: left;
        width: 800px;
        padding: 50px 0;
        color: #fff;
    }

    #sup > ul {
        float: left;
        width: 800px;
    }

    #sup > ul > li {
        float: left;
        width: 200px;
        height: auto;
    }

    #sup h4 {
        font: normal normal 18px 'robotoregular';
        margin-bottom: 20px;
    }

    #sup p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        margin-bottom: 10px;
    }

    ul#news li {
        float: left;
        width: 180px;
        margin-bottom: 30px;
        padding-top: 20px;
        border-top: 1px solid #777;
    }

    ul#news li:first-child {
        float: left;
        margin-bottom: 30px;
        padding-top: 0px;
        border-top: 0px !important;
    }

    .date {
        float: left;
        width: 200px;
        height: 14px;
        background: url('images/clock.png') top left no-repeat;
    }

    #sup .date p {
        color: #777;
        margin-left: 20px;
    }


    ul#links {
        float: left;
        width: 200px;
    }

    ul#links p {
        float: left;
        font: normal normal 10px 'robotoregular';
    }

    ul#links li {
        float: left;
        width: 200px;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
    }

    ul#links a {
        float: left;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
        text-decoration: underline;
    }

    ul li#info {
        float: left;
        width: 180px;
        margin-right: 20px;
    }

    ul li#contact {
        float: left;
        width: 200px;
        margin-right: 0px;
    }

    li#contact ul li {
        font: normal normal 14px 'robotoregular';
        color: #bbb;
    }

    li#contact ul li.dir {
        float: left;
        background-image: url('images/direfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.email {
        float: left;
        background-image: url('images/msgfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.phone {
        float: left;
        background-image: url('images/telffooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.dir p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.email p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.phone p {
        float: left;
        margin-left: 40px;
    }


    #inf {
        float: left;
        width: 800px;
        padding: 20px 0px;
        color: #fff;
        border-bottom: 7px solid #f00;
    }

    #textf {
        float: left;
        width: 600px;
    }

    #textf p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
    }

    #rrssf {
        float: left;
        width: 200px;
    }

    #rrssf ul.rrss-footer li {
        float: left;
        width: 50px;
    }

    #rss-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/rssf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #fb-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/fbf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #tw-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/twf.png');
        background-position: 0px 3px;
        background-repeat: no-repeat;
    }

    #lki-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/inf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }


    /*......................................................... BACKGROUND DECORATION */

    #top-decoration {
        width: 100%;
        height: 68px;
        background-color: #f00;
        position: relative;
        top: 70px;
        z-index: -999;
    }

    #med-decoration {
        width: 100%;
        height: 450px;
        background-color: #373737;
        position: relative;
        top: 700px;
        z-index: -999;
    }

    #line-decoration {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 710px;
    }

    #line-decoration2 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 830px;
    }

    #line-decoration3 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 1497px;
    }

    #deco-sup {
        float: left;
        width: 100%;
        height: 450px;
        background-color: #373737;
        position: relative;
        margin-top: -450px;
        z-index: -999;
    }

    #deco-inf {
        float:left;
        width: 100%;
        height: 70px;
        background-color: #000;
        position: relative;
        margin-top: -77px;
        z-index: -999;
        border-bottom: 7px solid #f00;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS SLIDER HOME */

    /* =Skitter styles
	----------------------------------------------- */
    .box_skitter {
        position: relative;
        width: 574px;
        height: 283px;
        background: #000;
    }

    .box_skitter img {
        max-width: none;
    } /* Tip for stildv */
    .box_skitter ul {
        display: none;
    }

    .box_skitter .container_skitter {
        overflow: hidden;
        position: relative;
    }

    .box_skitter .image {
        overflow: hidden;
    }

    .box_skitter .image img {
        display: none;
    }

    /* =Box clone
	-------------------------------------------------------------- */
    .box_skitter .box_clone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        overflow: hidden;
        display: none;
        z-index: 20;
    }

    .box_skitter .box_clone img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
    }

    /* =Navigation
	-------------------------------------------------------------- */
    .box_skitter .prev_button {
        position: absolute;
        top: 50%;
        left: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .next_button {
        position: absolute;
        top: 50%;
        right: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .prev_button:hover, .box_skitter .next_button:hover {
        opacity: 0.5 !important;
    }

    /* =Numbers
	-------------------------------------------------------------- */
    .box_skitter .info_slide {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 100;
        background: #000;
        color: #fff;
        font: bold 11px arial;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        opacity: 0.75;
    }

    .box_skitter .info_slide .image_number {
        background: #333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
        background: #cc3333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
    }

    /* =Thumbs
		Change width and height to customization dimension thumb
	-------------------------------------------------------------- */
    .box_skitter .container_thumbs {
        position: relative;
        overflow: hidden;
        height: 50px;
    }

    .box_skitter .info_slide_thumb {
        height: 50px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow: hidden;
        top: auto;
        top: 0;
        left: 0;
        padding: 0 !important;
        opacity: 1.0;
    }

    .box_skitter .info_slide_thumb .image_number {
        overflow: hidden;
        width: 100px;
        height: 50px;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    .box_skitter .info_slide_thumb .image_number img {
        position: absolute;
        top: -30px;
        left: -30px;
        height: 100px;
    }

    .box_skitter .box_scroll_thumbs {
        padding: 0;
    }

    .box_skitter .box_scroll_thumbs .scroll_thumbs {
        position: absolute;
        bottom: 60px;
        left: 50px;
        background: #ccc;
        background: -moz-linear-gradient(-90deg, #555, #fff);
        background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
        width: 200px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999em;
        z-index: 101;
        cursor: pointer;
        border: 0px solid #333;
    }

    /* =Dots
	-------------------------------------------------------------- */
    .box_skitter .info_slide_dots {
        position: absolute;
        bottom: -40px;
        z-index: 151;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }

    .box_skitter .info_slide_dots .image_number {
        background: #333;
        float: left;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        width: 18px;
        height: 18px;
        text-indent: -9999em;
        overflow: hidden;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide_dots .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
        background: #cc3333;
        float: left;
        margin: 0 5px 0 0;
    }

    /* =Loading
	-------------------------------------------------------------- */
    .loading {
        position: absolute;
        top: 50%;
        right: 50%;
        z-index: 10000;
        margin: -16px -16px;
        color: #fff;
        text-indent: -9999em;
        overflow: hidden;
        background: url(imageslider/ajax-loader.gif) no-repeat left top;
        width: 32px;
        height: 32px;
    }

    /* =Label
	-------------------------------------------------------------- */
    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: none;
    }

    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        display: none;
        opacity: 0.8;
        background: #000;
    }

    .box_skitter .label_skitter p {
        padding: 10px;
        margin: 0;
        font: normal 22px arial,tahoma;
        letter-spacing: -1px;
    }

    .box_skitter .progressbar {
        background: #000;
        position: absolute;
        top: 5px;
        left: 15px;
        height: 5px;
        width: 200px;
        z-index: 99;
        border-radius: 20px;
    }

    /* =Preview slide
	-------------------------------------------------------------- */
    .box_skitter .preview_slide {
        display: none;
        position: absolute;
        z-index: 152;
        bottom: 30px;
        left: -40px;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #222;
        -moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        -webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        overflow: hidden;
    }

    .box_skitter .preview_slide ul {
        height: 100px !important;
        overflow: hidden !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }

    .box_skitter .preview_slide ul li {
        width: 100px !important;
        height: 100px !important;
        overflow: hidden !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .box_skitter .preview_slide ul li img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 150px !important;
        width: auto !important;
    }

    /* =Focus
	-------------------------------------------------------------- */
    #overlay_skitter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
        opacity: 1;
        background: #000;
    }

    .box_skitter .focus_button {
        position: absolute;
        top: 50%;
        z-index: 100;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button {
        position: absolute;
        top: 50%;
        z-index: 151;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button.play_button {
    }


    .box_skitter .play_pause_button:hover {
        opacity: 0.5 !important;
    }

    .box_skitter .focus_button:hover {
        opacity: 0.5 !important;
    }

    /* =Example for dimenions
	-------------------------------------------------------------- */
    .box_skitter_large {
        width: 574px;
        height: 283px;
    }

    .box_skitter_small {
        width: 200px;
        height: 100px;
    }

    /* =Default theme
	-------------------------------------------------------------- */
    .box_skitter .focus_button,
    .box_skitter .next_button,
    .box_skitter .prev_button,
    .box_skitter .play_pause_button
    {
        display: block;
        background: url('imageslider/sprite-default.png') no-repeat;
    }

    .box_skitter .next_button {
        background-position: -0px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .prev_button {
        background-position: -42px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button {
        background-position: -0px -0px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button.play_button {
        background-position: -0px -84px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .focus_button {
        background-position: -42px -0px;
        width: 42px;
        height: 42px;
    }

    /* =Square theme
	-------------------------------------------------------------- */

    .skitter-square .play_pause_button,
    .skitter-square .next_button,
    .skitter-square .focus_button,
    .skitter-square .prev_button
    {
        display: block;
        background: url('imageslider/sprite-square.png') no-repeat;
    }

    .skitter-square .play_pause_button {
        background-position: -55px -0px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .play_pause_button.play_button {
        background-position: -0px -0px;
        width: 55px;
        height: 55px;
    }

    .skitter-square .focus_button {
        background-position: -55px -55px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 65px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .next_button {
        background-position: -0px -55px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
    }

    .skitter-square .prev_button {
        background-position: -0px -110px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 65px;
    }

    .skitter-square .info_slide {
        background: transparent;
    }

    .skitter-square .info_slide .image_number {
        background: #fff;
        box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
        font-size: 12px;
        font-weight: normal;
        color:#333;
    }

    .skitter-square .info_slide .image_number:hover {
        background: #ccc;
    }

    .skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
        background: #111;
        color:#fff;
    }

    .skitter-square .info_slide_dots .image_number {
        width: 14px;
        height: 14px;
        box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
        background: #ccc;
    }

    .skitter-square .info_slide_dots .image_number:hover {
        background: #999;
    }

    .skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
        background: #555;
    }

    .skitter-square .progressbar {
        top:0 !important;
        left: 0 !important;
        width: 100%;
        background: #fff;
        border-radius: 0;
        height: 2px;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS CARROUSEL */

    /*Horizontal Orientation CSS*/
    .jscarousal-horizontal
    {
        width: 800px;
        height: 145px;
        margin-left: -21px;
        position: relative; /*overflow: hidden;*/
    }
    .jscarousal-horizontal-back, .jscarousal-horizontal-forward
    {
        float: left;
        width: 23px;
        height: 145px;
        color: White;
        position: relative;
        top: 6px;
        cursor: pointer;
    }
    .jscarousal-horizontal-back
    {
        background-image: url(images/left_arrow.jpg);
        background-repeat: no-repeat;
        background-position: left -15px;
    }
    .jscarousal-horizontal-forward
    {
        background-image: url(images/right_arrow.jpg);
        background-repeat: no-repeat;
        background-position: right -15px;
    }
    .jscarousal-contents-horizontal
    {
        width: 700px;
        height: 145px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    .jscarousal-contents-horizontal > div
    {
        position: absolute;
        width: 100%;
        height: 145px;
    }
    .jscarousal-contents-horizontal > div > div
    {
        float: left;
        margin-left: 8px;
        margin-right: 8px;
    }
    .jscarousal-contents-horizontal img
    {
        width: 215px;
        height: 145px;
    }
    /*Horizontal Orientation CSS Ends*/



    /*Common*/
    .hidden
    {
        display: none;
    }
    .visible
    {
        display: block;
    }
    .thumbnail-active
    {
        filter: alpha(opacity=100);
        opacity: 1.0;
        cursor: pointer;
    }
    .thumbnail-inactive
    {
        filter: alpha(opacity=20);
        opacity: 1;
        cursor: pointer;
    }
    .thumbnail-text
    {
        color: #7A7677;
        font-weight: bold;
        text-align: left;
        display: block;
        padding: 10px 2px 2px 0px;
    }

}

/* ----------------- LOW ------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

@media (min-width:641px) and (max-width:799px) {

    body {
        font: normal normal 12px 'robotoregular';
    }

    #wrapper {
        width: 640px;
        margin: 0px auto;
    }

    #wrapp {
        width: 640px;
        margin: 0px auto;
    }

    #container {
        float: left;
        width: 640px;
    }

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

    ul {
        list-style: none;
    }

    nav {
        list-style: none;
    }

    h3 {
        font: normal normal 22px 'robotoregular';
    }

    h4 {
        font: normal normal 15px 'robotoregular';
        color: #444;
    }

    /*........................................................................ HEADER */

    header {
        float: left;
        width: 100%;
        height: 120px;
        margin-top: 5px;
    }

    #top-header {
        float: left;
        width: 100%;
        height: 70px;
    }

    #logo {
        float: left;
        width: 100%;
        height: 70px;
        background: url('images/logo.png');
        background-repeat: no-repeat;
        background-position: 50% 10%;
    }

    #logo h1 {
        display: none;
    }

    #rrss-header {
        display: none;
    }

    ul.top-header {
        float: right;
        width: 100%;
        margin-top: 30px;
        margin-left: 20px;
    }

    ul.top-header li {
        float: left;
        margin: 0 20px 0 20px;
    }

    ul.top-header li a {
        float: right;
        font: normal normal 12px 'robotoregular';
        margin-left: 17px;
        margin-top: -4px;
    }

    li.tw-h {
        background: url('images/twitter.png') top left no-repeat;
    }

    li.fb-h {
        background: url('images/fb.png') top left no-repeat;
    }

    li.rss-h {
        background: url('images/rss.png') top left no-repeat;
    }

    li.mail-h {
        background: url('images/msg.png') top left no-repeat;
        margin: 0px;
    }

    nav {
        float: left;
        background-color: #f00;
        width: 100%;
        height: 15px;
        padding: 25px 0px 28px 0px;
    }

    nav li {
        float: left;
        border-right: 1px solid #fff;
        height: 15px;
    }

    nav li:first-child {
        float: left;
        border-right: 0px;
    }

    nav li a {
        float: left;
        padding: 0 20px 23px 17px;
        font: normal normal 11px 'robotomedium';
        color: #fff;
    }

    nav li a:hover {
        border-bottom: 5px solid #fff;
    }

    nav li a.current {
        border-bottom: 5px solid #fff;
    }

    nav li a.home span {
        display: none;
    }

    nav li a.home {
        width: 11px;
        height: 17px;
        padding: 0 25px 21px 15px;
        background-image: url('images/home.png');
        background-position: 18px 0px;
        background-repeat: no-repeat;
    }

    div#claim {
        float: left;
        width: 300px;
        padding: 25px 0 20px 0;
        text-align: right;
    }

    div#claim h2 {
        font: italic normal 14px 'FuturaOblique';
        color: #fff;
    }

    /* .................................................................... CONTENTS */

    /* ....................................................... HOME */

    /* ........................... SLIDER / ACCESO USUARIOS */

    section#slider {
        float: left;
        width: 640px;
        height: 380px;
        margin-top: 80px;
        margin-bottom: 40px;
    }

    #slide {
        float: left;
        width: 640px;
        height: 250px;
    }

    #slide img {
        float: left;
        width: 640px;
        height: 250px;
    }

    #zclient {
        float: left;
        width: 620px;
        height: 110px;
        padding: 10px;
        background-color: #373737;
        border-top: 6px solid #f00;
        color: #fff;
    }

    #zclient h3 {
        font: normal normal 18px 'robotoregular';
        margin-bottom: 10px;
    }

    #zclient p {
        font: normal normal 10px 'robotoregular';
        margin-bottom: 10px;
        color: #bbb;
    }

    form.access {
        float: left;
        width: 640px;
    }

    form.access input {
        float: left;
        width: 160px;
        padding: 5px;
        margin-right: 10px;
        border: 1px solid #f00;
        color: #bbb;
    }

    form.access input[type=submit] {
        float: left;
        width: 60px;
        padding: 5px;
        color: #fff;
        background-color: #f00;
    }

    form.access p.form {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin: 0px !important;
    }

    form.access p.formm {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin-bottom: 0px !important;
    }

    /* ......................................... SLIDER2 */

    #demo-wrapper
    {
        margin-left: 22px;
        padding: 0;
        width: 600px;
        height: 250px;
        padding: 40px 20px 0px 20px;
    }
    #demo-left
    {
        width: 15%;
        float: left;
    }
    #demo-right
    {
        width: 85%;
        float: left;
    }
    #hWrapperAuto
    {
        margin-top: 20px;
    }
    #demo-tabs
    {
        width: 600px;
        height: 50px;
        color: White;
        margin: 0;
        padding: 0;
    }
    #demo-tabs div.item
    {
        height: 250px;
        float: left;
        border-bottom: none;
        padding: 0;
        margin: 0;
        padding: 10px 4px 4px 4px;
        font-weight: bold;
    }
    #demo-tabs div.item.active-tab
    {
        background-color: Black;
    }
    #demo-tabs div.item.active-tabc
    {
        background-color: Black;
    }
    #v1, #v2
    {
        margin: 20px;
    }
    .visible
    {
        display: block;
    }
    .hidden
    {
        display: none;
    }
    #oldWrapper
    {
        margin-left: 100px;
    }
    .heading
    {
        font-size: 20pt;
        font-weight: bold;
    }

    /*     ...........          */

    section#weare {
        float: left;
        width: 640px;
    }

    .tittle {
        float: left;
        width: 598px;
        padding: 15px 20px 15px 20px;
        border: 1px solid #f00;
        margin-bottom: 40px;
    }

    .tittle h3 {
        font: italic normal 17px 'robotoregular' !important;
        text-align: center;
    }

    .tittle span {
        font-weight: bold;
    }


    /* ......................................... SERVICIOS */

    section#serv {
        float: left;
        width: 640px;
        margin-top: 50px;
        padding: 50px 0;
        text-align: center;
        margin-bottom: 40px;
    }

    ul.serv {
        float: left;
        width: 640px;
    }

    ul.serv h4 {
        font: normal normal 17px 'robotoregular';
        color: #fff;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    ul.serv p {
        font: normal normal 13px 'robotoregular';
        color: #777;
    }

    ul.serv li {
        float: left;
        width: 130px;
        padding: 0px 40px;
    }

    li.serv1 {
        background-image: url('images/serv1.png');
        background-position: 30px 18px;
        background-repeat: no-repeat;
    }

    li.serv2 {
        background-image: url('images/serv2.png');
        background-position: 50px 12px;
        background-repeat: no-repeat;
    }

    li.serv3 {
        background-image: url('images/serv3.png');
        background-position: 80px 17px;
        background-repeat: no-repeat;
    }

    /* ......................................... ORDER */

    section#order {
        float: left;
        width: 640px;
        margin-bottom: 50px;
    }

    section#order h4 {
        font: normal normal 19px 'robotoregular';
        color: #373737;
    }

    section#order label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    section#order input {
        float: left;
        font: normal normal 11px 'robotoregular';
        padding: 8px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    section#order form select  {
        float: left;
        width: 30%;
        height: 33px;
        font: normal normal 11px 'robotoregular';
        color: #bbb;
        padding: 8px;
        margin: 0 12px 0 0;
        border: 1px solid #bbb;
    }

    section#order p {
        float: left;
        font: normal normal 12px 'robotoregular';
    }

    p.red {
        float:left;
        color: #f00;
    }

    section#order ul {
        float: left;
        width: 640px;
    }

    section#order ul li {
        float: left;
        width: 100%;
    }

    li.form1 {
        width: 100%;
    }

    li.form2 {
        width: 100%;
    }

    li.form2 input {
        width: 100%;
    }

    li.form3 {
        width: 100%;
    }

    li.form3 input {
        width: 100%;
    }

    li.form3 a {
        font: normal normal 9px 'robotoregular';
        color: #f00;
        text-decoration: underline;
        text-align: right;
        margin-left: 580px;
    }

    li.form4 {
        width: 100%;
    }

    li.form4 input {
        width: 30%;
        margin-right: 5% !important;
    }

    li.form5 {
        width: 100%;
    }

    li.form5 input {
        width: 100%;
    }

    li.form6 {
        width: 100%;
    }

    li.form6 input {
        width: 100%;
    }

    li.form7 {
        width: 100%;
    }

    li.form7 input {
        width: 100%;
    }

    li.form8 {
        float: left;
        width: 100%;
    }

    li.form8 input {
        width: 100%;
    }

    li.form9 {
        width: 100%;
    }

    li.form9 input {
        width: 100%;
    }

    li.form10 input {
        width: 50%;
        margin-top: 50px;
        margin-bottom: 40px;
        background-color: #f00;
        color: #fff;
        font: normal normal 11px 'robotoregular';
    }


    /* ................................................... QUIENES SOMOS */

    .underline {
        float: left;
        width: 100%;
        height: auto;
        margin-top: 40px;
        padding-bottom: 50px;
        background-image: url('images/border.png');
        background-repeat: repeat-x;
        background-position: bottom left;
    }

    .underline h3 {
        font: normal normal 25px 'robotoregular';
    }

    .underline h4 {
        font: normal normal 15px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #quienessomos p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #quienessomos p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul {
        margin: 40px 0 40px 20px;
    }

    #quienessomos ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #quienessomos ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }

    #graph {
        float: left;
        width: 90%;
        padding: 40px 0 50px 0;
        border: 2% solid #f00;
        background-image: url('images/graphic.png');
        background-repeat: no-repeat;
        background-position: 50% 20px;
    }

    #graph p {
        font: normal normal 12px 'robotoregular';
        text-align: center;
        margin: 45px 0 140px 0;
    }

    #graph p.last {
        margin: 130px 0 50px 0;
    }

    #valores {
        float: left;
        width: 640;
        margin-bottom: 80px;
    }

    #valores h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #valores h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #values {
        float: left;
        width: 638px;
        border: 1px solid #f00;
    }

    #values ul {
        float: left;
        width: 638px;
    }

    #values ul li {
        float: left;
        width: 107px;
        padding: 150px 10px 60px 10px;
        font: normal normal 13px 'robotoregular';
        text-align: center;
    }

    li.seguridad {
        background-image: url('images/seguridad.png');
        background-position: 30px 30px;
        background-repeat: no-repeat;
    }

    li.experiencia {
        background-image: url('images/experiencia.png');
        background-position: 30px 50px;
        background-repeat: no-repeat;
    }

    li.innovacion {
        background-image: url('images/innovacion.png');
        background-position: 25px 55px;
        background-repeat: no-repeat;
    }

    li.compatibilidad {
        background-image: url('images/compatibilidad.png');
        background-position: 35px 70px;
        background-repeat: no-repeat;
    }

    li.stock {
        background-image: url('images/stock.png');
        background-position: 25px 80px;
        background-repeat: no-repeat;
    }

    /* ................................................... CONTACTO */

    #formc {
        float: left;
        width: 400px;
        margin-right: 10px;
    }

    #formc h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #formc h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 10px;
    }

    #formc label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    #formc label span {
        color: #f00;
    }

    #formc input {
        float: left;
        width: 388px;
        height: 30px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    #formc input[type=submit] {
        float: left;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0;
        font: normal normal 13px 'robotoregular';
        padding: 5px;
        background-color: #f00;
        color: #fff;
    }

    #formc textarea {
        float: left;
        width: 388px;
        height: 40px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
        resize: none;
    }

    #formc ul li.nom {
        float: left;
        width: 388px;
    }

    #formc ul li.nom input {
        float: left;
        width: 388px;
    }

    #infoc {
        float: left;
        width: 180px;
        padding: 0 20px 10px 20px;
        margin-top: 130px;
        margin-bottom: 100px;
        border: 1px solid #f00;
        background-image: url('images/borderl.png');
        background-position: 20px 85px;
        background-repeat: no-repeat;
    }

    #infoc #logoc {
        float: left;
        width: 180px;
        height: 69px;
        padding-top: 10px;
        margin-bottom: 20px;
        background-image: url('images/logo.png');
        background-position: 18px 15px;
        background-repeat: no-repeat;
    }

    #infoc p.parr {
        font: normal normal 12px 'Conv_Roboto-Bold';
        margin-top: 20px;
    }


    /* ................................................... SOLUCIONES */


    .soluciones h3 span {
        font-family: 'Conv_Roboto-Bold';
    }

    .soluciones {
        float: left;
        width: 640px;
        padding: 40px 0 40px 0;
        text-align: center;
        border: 1px solid #f00;
        margin: 30px 0 50px 0;
    }

    #soluciones {
        float: left;
        margin-top: 30px;
    }

    .soluciones h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    .soluciones ul li h4 {
        font: normal normal 17px 'robotoregular';
        color: #222;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    .soluciones ul li p {
        font: normal normal 12px 'robotoregular';
        color: #777;
    }

    .soluciones ul li p span {
        font: normal normal 12px 'Conv_Roboto-Bold';
    }

    .soluciones ul li {
        float: left;
        width: 150px;
        padding: 0px 40px;
    }

    #soluciones a {
        float: left;
        width: 130px;
        height: 40px;
        margin: 100px 0 0 5px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
    }

    li.integ a {
        margin-top: 80px !important;
    }

    li.mant a {
        margin-top: 30px !important;
    }

    li.cons {
        background-image: url('images/cons.png');
        background-repeat: no-repeat;
        background-position: 20px 15px;
    }

    li.integ {
        background-image: url('images/integ.png');
        background-repeat: no-repeat;
        background-position: 60px 15px;
    }

    li.mant {
        background-image: url('images/mant.png');
        background-repeat: no-repeat;
        background-position: 75px 15px;
    }

    #soluciones p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #soluciones p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul {
        margin: 15px 0 40px 20px;
    }

    #soluciones ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #soluciones ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }


    /* .................. INTEGRACIÓN ............*/

    #integracion {
        float: left;
        width: 640px;
        margin-top: 40px;
    }

    #integracion h4 {
        margin-bottom: 30px;
    }

    #integracion .tittle {
        width: 600px;
        padding: 40px 20px 10px 20px;
        background-image: url('images/integ.png');
        background-position: 30px 30px;
        background-repeat: no-repeat;
    }

    #integracion .tittle p {
        font: normal normal 14px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 30px;
    }

    #integracion p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #integracion #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 600px;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 96%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. MANTENIMIENTO ............*/

    #mantenimiento {
        float: left;
        width: 640px;
        margin-top: 40px;
    }

    #mantenimiento h4 {
        margin-bottom: 30px;
    }

    #mantenimiento .tittle {
        width: 600px;
        padding: 40px 20px 10px 20px;
        background-image: url('images/mant.png');
        background-position: 70px 70px;
        background-repeat: no-repeat;
    }

    #mantenimiento .tittle p {
        font: normal normal 14px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 30px;
    }

    #mantenimiento p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #mantenimiento #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 96%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. ACONSEJAMOS ............*/

    #aconsejamos {
        float: left;
        width: 640px;
        margin-top: 40px;
    }

    #aconsejamos h4 {
        margin-bottom: 30px;
    }

    #aconsejamos .tittle {
        width: 600px;
        padding: 40px 20px 0px 20px;
        background-image: url('images/aconsejamos.png');
        background-position: 55px 20px;
        background-repeat: no-repeat;
    }

    #aconsejamos .tittle p {
        font: normal normal 12px 'robotoregular';
        color: #777;
        margin-left: 150px;
        margin-bottom: 60px;
    }

    #aconsejamos #slider2 {
        float: left;
        width: 640px;
        margin-top: -30px;
        margin-bottom: 40px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 96%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 96%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }

    #graphics {
        float: left;
        width: 640px;
        margin-bottom: 60px;
    }

    #graphics p {
        font: normal normal 18px 'Conv_Roboto-Bold';
        text-align: center;
    }

    #graph-left {
        float: left;
        width: 640px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons1.png');
        background-repeat: no-repeat;
        background-position: 80px 80px;
    }

    #graph-right {
        float: left;
        width: 640px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons2.png');
        background-repeat: no-repeat;
        background-position: 120px 80px;
    }

    #graph-left-ca{
        float: left;
        width: 640px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons1_ca.png');
        background-repeat: no-repeat;
        background-position: 80px 80px;
    }

    #graph-right-ca {
        float: left;
        width: 640px;
        height: 600px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons2_ca.png');
        background-repeat: no-repeat;
        background-position: 120px 80px;
    }




    /*........................................................................ FOOTER */

    footer h4 {
        color: #fff;
    }

    #sup {
        float: left;
        width: 640px;
        padding: 50px 0;
        color: #fff;
    }

    #sup > ul {
        float: left;
        width: 640px;
    }

    #sup > ul > li {
        float: left;
        width: 150px;
        height: auto;
    }

    #sup h4 {
        font: normal normal 15px 'robotoregular';
        margin-bottom: 20px;
    }

    #sup p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        margin-bottom: 10px;
    }

    ul#news li {
        float: left;
        width: 130px;
        margin-bottom: 30px;
        padding-top: 20px;
        border-top: 1px solid #777;
    }

    ul#news li:first-child {
        float: left;
        margin-bottom: 30px;
        padding-top: 0px;
        border-top: 0px !important;
    }

    .date {
        float: left;
        width: 140px;
        height: 14px;
        background: url('images/clock.png') top left no-repeat;
    }

    #sup .date p {
        color: #777;
        margin-left: 20px;
    }


    ul#links {
        float: left;
        width: 150px;
    }

    ul#links p {
        float: left;
        font: normal normal 10px 'robotoregular';
    }

    ul#links li {
        float: left;
        width: 150px;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
    }

    ul#links a {
        float: left;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
        text-decoration: underline;
    }

    ul li#info {
        float: left;
        width: 150px;
        margin-right: 20px;
    }

    ul li#contact {
        float: left;
        width: 150px;
        margin-right: 0px;
    }

    li#contact ul li {
        font: normal normal 14px 'robotoregular';
        color: #bbb;
    }

    li#contact ul li.dir {
        float: left;
        background-image: url('images/direfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.email {
        float: left;
        background-image: url('images/msgfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.phone {
        float: left;
        background-image: url('images/telffooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.dir p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.email p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.phone p {
        float: left;
        margin-left: 40px;
    }


    #inf {
        float: left;
        width: 640px;
        padding: 20px 0px;
        color: #fff;
        border-bottom: 7px solid #f00;
    }

    #textf {
        float: left;
        width: 400px;
    }

    #textf p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
    }

    #rrssf {
        float: left;
        width: 200px;
    }

    #rrssf ul.rrss-footer li {
        float: left;
        width: 50px;
    }

    #rss-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/rssf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #fb-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/fbf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #tw-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/twf.png');
        background-position: 0px 3px;
        background-repeat: no-repeat;
    }

    #lki-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/inf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }


    /*......................................................... BACKGROUND DECORATION */

    #top-decoration {
        width: 100%;
        height: 68px;
        position: relative;
        background-color: #f00;
        top: 75px;
        z-index: -999;
    }

    #med-decoration {
        width: 100%;
        height: 450px;
        background-color: #373737;
        position: relative;
        top: 980px;
        z-index: -999;
    }

    #line-decoration {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 710px;
    }

    #line-decoration2 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 780px;
    }

    #line-decoration3 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 1458px;
    }

    #deco-sup {
        float: left;
        width: 100%;
        height: 460px;
        background-color: #373737;
        position: relative;
        margin-top: -460px;
        z-index: -999;
    }

    #deco-inf {
        float:left;
        width: 100%;
        height: 70px;
        background-color: #000;
        position: relative;
        margin-top: -77px;
        z-index: -999;
        border-bottom: 7px solid #f00;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS SLIDER HOME */

    /* =Skitter styles
	----------------------------------------------- */
    .box_skitter {
        position: relative;
        width: 640px;
        height: 250px;
        background: #000;
    }

    .box_skitter img {
        max-width: none;
    } /* Tip for stildv */
    .box_skitter ul {
        display: none;
    }

    .box_skitter .container_skitter {
        overflow: hidden;
        position: relative;
    }

    .box_skitter .image {
        overflow: hidden;
    }

    .box_skitter .image img {
        display: none;
    }

    /* =Box clone
	-------------------------------------------------------------- */
    .box_skitter .box_clone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        overflow: hidden;
        display: none;
        z-index: 20;
    }

    .box_skitter .box_clone img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
    }

    /* =Navigation
	-------------------------------------------------------------- */
    .box_skitter .prev_button {
        position: absolute;
        top: 50%;
        left: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .next_button {
        position: absolute;
        top: 50%;
        right: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .prev_button:hover, .box_skitter .next_button:hover {
        opacity: 0.5 !important;
    }

    /* =Numbers
	-------------------------------------------------------------- */
    .box_skitter .info_slide {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 100;
        background: #000;
        color: #fff;
        font: bold 11px arial;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        opacity: 0.75;
    }

    .box_skitter .info_slide .image_number {
        background: #333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
        background: #cc3333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
    }

    /* =Thumbs
		Change width and height to customization dimension thumb
	-------------------------------------------------------------- */
    .box_skitter .container_thumbs {
        position: relative;
        overflow: hidden;
        height: 50px;
    }

    .box_skitter .info_slide_thumb {
        height: 50px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow: hidden;
        top: auto;
        top: 0;
        left: 0;
        padding: 0 !important;
        opacity: 1.0;
    }

    .box_skitter .info_slide_thumb .image_number {
        overflow: hidden;
        width: 100px;
        height: 50px;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    .box_skitter .info_slide_thumb .image_number img {
        position: absolute;
        top: -30px;
        left: -30px;
        height: 100px;
    }

    .box_skitter .box_scroll_thumbs {
        padding: 0;
    }

    .box_skitter .box_scroll_thumbs .scroll_thumbs {
        position: absolute;
        bottom: 60px;
        left: 50px;
        background: #ccc;
        background: -moz-linear-gradient(-90deg, #555, #fff);
        background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
        width: 200px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999em;
        z-index: 101;
        cursor: pointer;
        border: 0px solid #333;
    }

    /* =Dots
	-------------------------------------------------------------- */
    .box_skitter .info_slide_dots {
        position: absolute;
        bottom: -40px;
        z-index: 151;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }

    .box_skitter .info_slide_dots .image_number {
        background: #333;
        float: left;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        width: 18px;
        height: 18px;
        text-indent: -9999em;
        overflow: hidden;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide_dots .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
        background: #cc3333;
        float: left;
        margin: 0 5px 0 0;
    }

    /* =Loading
	-------------------------------------------------------------- */
    .loading {
        position: absolute;
        top: 50%;
        right: 50%;
        z-index: 10000;
        margin: -16px -16px;
        color: #fff;
        text-indent: -9999em;
        overflow: hidden;
        background: url(imageslider/ajax-loader.gif) no-repeat left top;
        width: 32px;
        height: 32px;
    }

    /* =Label
	-------------------------------------------------------------- */
    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: none;
    }

    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        display: none;
        opacity: 0.8;
        background: #000;
    }

    .box_skitter .label_skitter p {
        padding: 10px;
        margin: 0;
        font: normal 22px arial,tahoma;
        letter-spacing: -1px;
    }

    .box_skitter .progressbar {
        background: #000;
        position: absolute;
        top: 5px;
        left: 15px;
        height: 5px;
        width: 200px;
        z-index: 99;
        border-radius: 20px;
    }

    /* =Preview slide
	-------------------------------------------------------------- */
    .box_skitter .preview_slide {
        display: none;
        position: absolute;
        z-index: 152;
        bottom: 30px;
        left: -40px;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #222;
        -moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        -webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        overflow: hidden;
    }

    .box_skitter .preview_slide ul {
        height: 100px !important;
        overflow: hidden !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }

    .box_skitter .preview_slide ul li {
        width: 100px !important;
        height: 100px !important;
        overflow: hidden !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .box_skitter .preview_slide ul li img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 150px !important;
        width: auto !important;
    }

    /* =Focus
	-------------------------------------------------------------- */
    #overlay_skitter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
        opacity: 1;
        background: #000;
    }

    .box_skitter .focus_button {
        position: absolute;
        top: 50%;
        z-index: 100;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button {
        position: absolute;
        top: 50%;
        z-index: 151;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button.play_button {
    }


    .box_skitter .play_pause_button:hover {
        opacity: 0.5 !important;
    }

    .box_skitter .focus_button:hover {
        opacity: 0.5 !important;
    }

    /* =Example for dimenions
	-------------------------------------------------------------- */
    .box_skitter_large {
        width: 640px;
        height: 250px;
    }

    .box_skitter_small {
        width: 200px;
        height: 100px;
    }

    /* =Default theme
	-------------------------------------------------------------- */
    .box_skitter .focus_button,
    .box_skitter .next_button,
    .box_skitter .prev_button,
    .box_skitter .play_pause_button
    {
        display: block;
        background: url('imageslider/sprite-default.png') no-repeat;
    }

    .box_skitter .next_button {
        background-position: -0px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .prev_button {
        background-position: -42px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button {
        background-position: -0px -0px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button.play_button {
        background-position: -0px -84px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .focus_button {
        background-position: -42px -0px;
        width: 42px;
        height: 42px;
    }

    /* =Square theme
	-------------------------------------------------------------- */

    .skitter-square .play_pause_button,
    .skitter-square .next_button,
    .skitter-square .focus_button,
    .skitter-square .prev_button
    {
        display: block;
        background: url('imageslider/sprite-square.png') no-repeat;
    }

    .skitter-square .play_pause_button {
        background-position: -55px -0px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .play_pause_button.play_button {
        background-position: -0px -0px;
        width: 55px;
        height: 55px;
    }

    .skitter-square .focus_button {
        background-position: -55px -55px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 65px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .next_button {
        background-position: -0px -55px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
    }

    .skitter-square .prev_button {
        background-position: -0px -110px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 65px;
    }

    .skitter-square .info_slide {
        background: transparent;
    }

    .skitter-square .info_slide .image_number {
        background: #fff;
        box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
        font-size: 12px;
        font-weight: normal;
        color:#333;
    }

    .skitter-square .info_slide .image_number:hover {
        background: #ccc;
    }

    .skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
        background: #111;
        color:#fff;
    }

    .skitter-square .info_slide_dots .image_number {
        width: 14px;
        height: 14px;
        box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
        background: #ccc;
    }

    .skitter-square .info_slide_dots .image_number:hover {
        background: #999;
    }

    .skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
        background: #555;
    }

    .skitter-square .progressbar {
        top:0 !important;
        left: 0 !important;
        width: 100%;
        background: #fff;
        border-radius: 0;
        height: 2px;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS CARROUSEL */

    /*Horizontal Orientation CSS*/
    .jscarousal-horizontal
    {
        width: 600px;
        height: 250px;
        margin-left: -21px;
        position: relative; /*overflow: hidden;*/
    }
    .jscarousal-horizontal-back, .jscarousal-horizontal-forward
    {
        float: left;
        width: 23px;
        height: 145px;
        color: White;
        position: relative;
        top: 6px;
        cursor: pointer;
    }
    .jscarousal-horizontal-back
    {
        background-image: url(images/left_arrow.jpg);
        background-repeat: no-repeat;
        background-position: left 40px;
    }
    .jscarousal-horizontal-forward
    {
        background-image: url(images/right_arrow.jpg);
        background-repeat: no-repeat;
        background-position: right 40px;
    }
    .jscarousal-contents-horizontal
    {
        width: 550px;
        height: 250px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    .jscarousal-contents-horizontal > div
    {
        position: absolute;
        width: 100%;
        height: 250px;
    }
    .jscarousal-contents-horizontal > div > div
    {
        float: left;
        margin-left: 8px;
        margin-right: 8px;
    }
    .jscarousal-contents-horizontal img
    {
        width: 250px;
        height: 250px;
    }
    /*Horizontal Orientation CSS Ends*/



    /*Common*/
    .hidden
    {
        display: none;
    }
    .visible
    {
        display: block;
    }
    .thumbnail-active
    {
        filter: alpha(opacity=100);
        opacity: 1.0;
        cursor: pointer;
    }
    .thumbnail-inactive
    {
        filter: alpha(opacity=20);
        opacity: 1;
        cursor: pointer;
    }
    .thumbnail-text
    {
        color: #7A7677;
        font-weight: bold;
        text-align: left;
        display: block;
        padding: 10px 2px 2px 0px;
    }

}

/* ----------------- TABLET ---------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

@media (min-width:300px) and (max-width:640px) {

    body {
        font: normal normal 12px 'robotoregular';
    }

    #wrapper {
        width: 300px;
        margin: 0px auto;
    }

    #wrapp {
        width: 300px;
        margin: 0px auto;
    }

    #container {
        float: left;
        width: 300px;
        overflow: hidden;
    }

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

    ul {
        list-style: none;
    }

    nav {
        list-style: none;
    }

    h3 {
        font: normal normal 22px 'robotoregular';
    }

    h4 {
        font: normal normal 15px 'robotoregular';
        color: #444;
    }

    /*........................................................................ HEADER */

    header {
        float: left;
        width: 300px;
        height: 120px;
        margin-top: 5px;
        margin-bottom: 80px;
    }

    #top-header {
        float: left;
        width: 100%;
        height: 70px;
    }

    #logo {
        float: left;
        width: 100%;
        height: 70px;
        background: url('images/logo.png');
        background-repeat: no-repeat;
        background-position: 50% 10%;
    }

    #logo h1 {
        display: none;
    }

    #rrss-header {
        display: none;
    }

    ul.top-header {
        float: right;
        width: 100%;
        margin-top: 30px;
        margin-left: 20px;
    }

    ul.top-header li {
        float: left;
        margin: 0 20px 0 20px;
    }

    ul.top-header li a {
        float: right;
        font: normal normal 10px 'robotoregular';
        margin-left: 17px;
        margin-top: -4px;
    }

    li.tw-h {
        background: url('images/twitter.png') top left no-repeat;
    }

    li.fb-h {
        background: url('images/fb.png') top left no-repeat;
    }

    li.rss-h {
        background: url('images/rss.png') top left no-repeat;
    }

    li.mail-h {
        background: url('images/msg.png') top left no-repeat;
        margin: 0px;
    }

    nav {
        float: left;
        background-color: #f00;
        width: 300px;
        height: 13px;
        padding: 25px 0px 28px 0px;
    }

    nav li {
        float: left;
        border-right: 1px solid #fff;
        height: 15px;
    }

    nav li:first-child {
        float: left;
        border-right: 0px;
    }

    nav li a {
        float: left;
        padding: 0 4px 23px 12px;
        font: normal normal 10px 'robotomedium';
        color: #fff;
    }

    nav li a:hover {
        border-bottom: 5px solid #fff;
    }

    nav li a.current {
        border-bottom: 5px solid #fff;
    }

    nav li a.home span {
        display: none;
    }

    nav li a.home {
        width: 10px;
        height: 16px;
        padding: 0 12px 21px 8px;
        background-image: url('images/home.png');
        background-position: 8px 0px;
        background-repeat: no-repeat;
    }

    div#claim {
        display: none;
    }

    /* .................................................................... CONTENTS */

    /* ....................................................... HOME */

    /* ........................... SLIDER / ACCESO USUARIOS */

    section#slider {
        float: left;
        width: 300px;
        height: 400px;
        margin-bottom: 40px;
    }

    #slide {
        float: left;
        width: 300px;
        height: 200px;
    }

    #slide img {
        float: left;
        width: 300px;
        height: 200px;
    }

    #zclient {
        float: left;
        width: 280px;
        height: 174px;
        padding: 10px;
        background-color: #373737;
        border-top: 6px solid #f00;
        color: #fff;
    }

    #zclient h3 {
        font: normal normal 18px 'robotoregular';
        margin-bottom: 10px;
    }

    #zclient p {
        font: normal normal 10px 'robotoregular';
        margin-bottom: 10px;
        color: #bbb;
    }

    form.access {
        float: left;
        width: 300px;
    }

    form.access input {
        float: left;
        width: 160px;
        padding: 5px;
        margin-right: 10px;
        border: 1px solid #f00;
        color: #bbb;
    }

    form.access input[type=submit] {
        float: left;
        width: 60px;
        padding: 5px;
        color: #fff;
        background-color: #f00;
    }

    form.access p.form {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin: 0px !important;
    }

    form.access p.formm {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin-bottom: 0px !important;
    }

    /* ......................................... SLIDER2 */

    #demo-wrapper
    {
        margin: 0;
        padding: 0;
        width: 600px;
        height: 100px;
        padding: 40px 20px 0px 20px;
    }
    #demo-left
    {
        width: 15%;
        float: left;
    }
    #demo-right
    {
        width: 85%;
        float: left;
    }
    #hWrapperAuto
    {
        margin-top: 20px;
    }
    #demo-tabs
    {
        width: 600px;
        height: 50px;
        color: White;
        margin: 0;
        padding: 0;
    }
    #demo-tabs div.item
    {
        height: 100px;
        float: left;
        border-bottom: none;
        padding: 0;
        margin: 0;
        padding: 10px 4px 4px 4px;
        font-weight: bold;
    }
    #demo-tabs div.item.active-tab
    {
        background-color: Black;
    }
    #demo-tabs div.item.active-tabc
    {
        background-color: Black;
    }
    #v1, #v2
    {
        margin: 20px;
    }
    .visible
    {
        display: block;
    }
    .hidden
    {
        display: none;
    }
    #oldWrapper
    {
        margin-left: 100px;
    }
    .heading
    {
        font-size: 20pt;
        font-weight: bold;
    }

    /*     ...........          */

    section#weare {
        float: left;
        width: 300px;
    }

    .tittle {
        float: left;
        width: 278px;
        padding: 15px 10px 15px 10px;
        border: 1px solid #f00;
        margin-bottom: 40px;
    }

    .tittle h3 {
        font: italic normal 14px 'robotoregular' !important;
        text-align: center;
    }

    .tittle span {
        font-weight: bold;
    }


    /* ......................................... SERVICIOS */

    section#serv {
        float: left;
        width: 300px;
        margin-top: 50px;
        padding: 50px 0;
        text-align: center;
        margin-bottom: 40px;
    }

    ul.serv {
        float: left;
        width: 300px;
    }

    ul.serv h4 {
        font: normal normal 18px 'robotoregular';
        color: #fff;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    ul.serv p {
        font: normal normal 13px 'robotoregular';
        color: #777;
        margin-bottom: 40px;
    }

    ul.serv li {
        float: left;
        width: 300px;
    }

    li.serv1 {
        background-image: url('images/serv1.png');
        background-position: 70px 18px;
        background-repeat: no-repeat;
    }

    li.serv2 {
        background-image: url('images/serv2.png');
        background-position: 90px 12px;
        background-repeat: no-repeat;
    }

    li.serv3 {
        background-image: url('images/serv3.png');
        background-position: 125px 17px;
        background-repeat: no-repeat;
    }

    /* ......................................... ORDER */

    section#order {
        float: left;
        width: 300px;
        margin-bottom: 50px;
    }

    section#order h4 {
        font: normal normal 19px 'robotoregular';
        color: #373737;
    }

    section#order label {
        float: left;
        width: 300px;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    section#order input {
        float: left;
        font: normal normal 11px 'robotoregular';
        padding: 8px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    section#order form select  {
        float: left;
        width: 100%;
        height: 33px;
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid #bbb;
    }

    section#order p {
        float: left;
        font: normal normal 12px 'robotoregular';
    }

    p.red {
        float:left;
        color: #f00;
    }

    section#order ul {
        float: left;
        width: 100%;
    }

    section#order ul li {
        float: left;
        width: 100%;
    }

    li.form1 {
        width: 100%;
    }

    li.form2 {
        width: 100%;
    }

    li.form2 input {
        width: 93%;
    }

    li.form3 {
        width: 93%;
    }

    li.form3 input {
        width: 93%;
    }

    li.form3 a {
        font: normal normal 9px 'robotoregular';
        color: #f00;
        width: 100%;
        text-decoration: underline;
        text-align: right;
    }

    li.form4 {
        width: 93%;
    }

    li.form4 input {
        width: 93%;
        margin-bottom: 10px;
    }

    li.form5 {
        width: 93%;
    }

    li.form5 input {
        width: 93%;
    }

    li.form6 {
        width: 100%;
    }

    li.form6 input {
        width: 93%;
    }

    li.form7 {
        width: 100%;
    }

    li.form7 input {
        width: 93%;
    }

    li.form8 {
        float: left;
        width: 100%;
    }

    li.form8 input {
        width: 93%;
    }

    li.form9 {
        width: 100%;
    }

    li.form9 input {
        width: 93%;
    }

    li.form10 input {
        width: 50%;
        margin-top: 40px;
        margin-bottom: 20px;
        background-color: #f00;
        color: #fff !important;
        font: normal normal 11px 'robotoregular';
    }


    /* ................................................... QUIENES SOMOS */

    .underline {
        float: left;
        width: 100%;
        height: auto;
        margin-top: 20px;
        padding-bottom: 50px;
        background-image: url('images/border.png');
        background-repeat: repeat-x;
        background-position: bottom left;
    }

    .underline h3 {
        font: normal normal 28px 'robotoregular';
    }

    .underline h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #quienessomos p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #quienessomos p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul {
        margin: 40px 0 40px 20px;
    }

    #quienessomos ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #quienessomos ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }

    #graph {
        float: left;
        width: 90%;
        padding: 20px 0 0 0;
        border: 2% solid #f00;
        background-image: url('images/graphic.png');
        background-repeat: no-repeat;
        background-position: 50% 10px;
    }

    #graph p {
        font: normal normal 9px 'robotoregular';
        line-height: 11px;
        text-align: center;
        margin: 53px 0 140px 0;
    }

    #graph p.last {
        margin: 80px 0 50px 0;
    }

    #valores {
        float: left;
        width: 300px;
        margin-bottom: 80px;
    }

    #valores h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #valores h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #values {
        float: left;
        width: 298px;
        border: 1px solid #f00;
    }

    #values ul {
        float: left;
        width: 100%;
    }

    #values ul li {
        float: left;
        width: 100%;
        padding: 150px 0 40px 0;
        font: normal normal 15px 'robotoregular';
        text-align: center;
    }

    li.seguridad {
        background-image: url('images/seguridad.png');
        background-position: 120px 30px;
        background-repeat: no-repeat;
    }

    li.experiencia {
        background-image: url('images/experiencia.png');
        background-position: 120px 50px;
        background-repeat: no-repeat;
    }

    li.innovacion {
        background-image: url('images/innovacion.png');
        background-position: 110px 55px;
        background-repeat: no-repeat;
    }

    li.compatibilidad {
        background-image: url('images/compatibilidad.png');
        background-position: 120px 70px;
        background-repeat: no-repeat;
    }

    li.stock {
        background-image: url('images/stock.png');
        background-position: 100px 80px;
        background-repeat: no-repeat;
    }

    /* ................................................... CONTACTO */

    #formc {
        float: left;
        width: 300px;
    }

    #formc h3 {
        font: normal normal 28px 'robotoregular';
    }

    #formc h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 10px;
    }

    #formc label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    #formc label span {
        color: #f00;
    }

    #formc input {
        float: left;
        width: 288px;
        height: 20px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    #formc input[type=submit] {
        float: left;
        width: 200px;
        height: 40px;
        margin: 30px 0 10px 0;
        font: normal normal 13px 'robotoregular';
        padding: 5px;
        background-color: #f00;
        color: #fff;
    }

    #formc textarea {
        float: left;
        width: 288px;
        height: 40px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
        resize: none;
    }

    #formc ul li.nom {
        float: left;
        width: 288px;
    }

    #formc ul li.nom input {
        float: left;
        width: 288px;
    }

    #infoc {
        float: left;
        width: 278px;
        padding: 0 0px 10px 20px;
        margin-top: 50px;
        margin-bottom: 100px;
        border: 1px solid #f00;
        background-image: url('images/borderl.png');
        background-position: 20px 85px;
        background-repeat: repeat-x;
    }

    #infoc #logoc {
        float: left;
        width: 300px;
        height: 69px;
        padding-top: 10px;
        margin-bottom: 20px;
        background-image: url('images/logo.png');
        background-position: 18px 15px;
        background-repeat: no-repeat;
    }

    #infoc p.parr {
        font: normal normal 12px 'Conv_Roboto-Bold';
        margin-top: 20px;
    }


    /* ................................................... SOLUCIONES */


    .soluciones h3 span {
        font-family: 'Conv_Roboto-Bold';
    }

    .soluciones {
        float: left;
        width: 298px;
        padding: 40px 0 40px 0;
        text-align: center;
        border: 1px solid #f00;
        margin: 30px 0 50px 0;
    }

    #soluciones {
        float: left;
    }

    .soluciones h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    .soluciones ul li h4 {
        float: left;
        width: 200px;
        font: normal normal 23px 'robotoregular';
        color: #222;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    .soluciones ul li p {
        float: left;
        width: 200px;
        font: normal normal 14px 'robotoregular';
        color: #777;
    }

    .soluciones ul li p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    .soluciones ul li {
        float: left;
        width: 298px;
    }

    #soluciones a {
        float: left;
        width: 150px;
        height: 20px;
        margin: 10px 0 30px 5px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
    }

    li.cons {
        background-image: url('images/cons.png');
        background-repeat: no-repeat;
        background-position: 45px 15px;
    }

    li.integ {
        background-image: url('images/integ.png');
        background-repeat: no-repeat;
        background-position: 70px 15px;
    }

    li.mant {
        background-image: url('images/mant.png');
        background-repeat: no-repeat;
        background-position: 105px 15px;
    }

    #soluciones p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #soluciones p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul {
        margin: 15px 0 40px 20px;
    }

    #soluciones ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #soluciones ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }


    /* .................. INTEGRACIÓN ............*/

    #integracion {
        float: left;
        width: 300px;
    }

    #integracion h4 {
        margin-bottom: 30px;
    }

    #integracion .tittle {
        width: 278px;
        padding: 140px 10px 10px 10px;
        background-image: url('images/integ.png');
        background-position: 90px 30px;
        background-repeat: no-repeat;
    }

    #integracion .tittle p {
        float: left;
        width: 100%;
        font: normal normal 14px 'robotoregular';
        text-align: center;
        color: #777;
        margin-bottom: 30px;
    }

    #integracion p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #integracion #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 300px;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 94%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: left;
        width: 50%;
        height: 40px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. MANTENIMIENTO ............*/

    #mantenimiento {
        float: left;
        width: 300px;
    }

    #mantenimiento h4 {
        margin-bottom: 30px;
    }

    #mantenimiento .tittle {
        width: 278px;
        padding: 150px 10px 10px 10px;
        background-image: url('images/mant.png');
        background-position: 120px 40px;
        background-repeat: no-repeat;
    }

    #mantenimiento .tittle p {
        font: normal normal 14px 'robotoregular';
        text-align: center;
        color: #777;
        margin-bottom: 30px;
    }

    #mantenimiento p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #mantenimiento #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 94%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. ACONSEJAMOS ............*/

    #aconsejamos {
        float: left;
        width: 300px;
    }

    #aconsejamos h4 {
        margin-bottom: 30px;
    }

    #aconsejamos .tittle {
        width: 278px;
        padding: 40px 10px 30px 10px;
        background-image: url('images/aconsejamos.png');
        background-position: 20px 40px;
        background-repeat: no-repeat;
    }

    #aconsejamos .tittle p {
        font: normal normal 12px 'robotoregular';
        color: #777;
        margin-left: 100px;
        margin-bottom: 30px;
    }

    #aconsejamos #slider2 {
        float: left;
        width: 300px;
        margin-top: -30px;
        margin-bottom: 125px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 94%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }

    #graphics {
        float: left;
        width: 300px;
        margin-bottom: 60px;
    }

    #graphics p {
        font: normal normal 18px 'Conv_Roboto-Bold';
        text-align: center;
    }

    #graph-left {
         float: left;
         width: 300px;
         height: 400px;
         padding: 30px 0 40px 0;
         background-image: url('images/acons11.png');
         background-repeat: no-repeat;
         background-position: 0px 90px;
     }

    #graph-right {
        float: left;
        width: 300px;
        height: 450px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons22.png');
        background-repeat: no-repeat;
        background-position: 0px 80px;
    }

    #graph-left-ca {
        float: left;
        width: 300px;
        height: 400px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons11.png');
        background-repeat: no-repeat;
        background-position: 0px 90px;
    }

    #graph-right-ca {
        float: left;
        width: 300px;
        height: 450px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons22.png');
        background-repeat: no-repeat;
        background-position: 0px 80px;
    }




    /*........................................................................ FOOTER */

    footer h4 {
        color: #fff;
    }

    #sup {
        float: left;
        width: 300px;
        padding: 50px 0;
        color: #fff;
    }

    #sup > ul {
        float: left;
        width: 300px;
    }

    #sup > ul > li {
        float: left;
        width: 300px;
        height: auto;
    }

    #sup h4 {
        font: normal normal 15px 'robotoregular';
        margin-bottom: 20px;
    }

    #sup p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        margin-bottom: 10px;
    }

    ul#news li {
        float: left;
        width: 100%;
        margin-bottom: 30px;
        padding-top: 20px;
        border-top: 1px solid #777;
    }

    ul#news li:first-child {
        float: left;
        margin-bottom: 30px;
        padding-top: 0px;
        border-top: 0px !important;
    }

    .date {
        float: left;
        width: 100%;
        height: 14px;
        background: url('images/clock.png') top left no-repeat;
    }

    #sup .date p {
        color: #777;
        margin-left: 20px;
    }


    ul#links {
        float: left;
        width: 100%;
    }

    ul#links p {
        float: left;
        font: normal normal 10px 'robotoregular';
    }

    ul#links li {
        float: left;
        width: 100%;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
    }

    ul#links a {
        float: left;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
        text-decoration: underline;
    }

    ul li#info {
        float: left;
        width: 300px;
        margin-right: 20px;
    }

    ul li#contact {
        float: left;
        width: 300px;
        margin-right: 0px;
    }

    li#contact ul li {
        font: normal normal 14px 'robotoregular';
        color: #bbb;
    }

    li#contact ul li.dir {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/direfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.email {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/msgfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.phone {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/telffooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.dir p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.email p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.phone p {
        float: left;
        margin-left: 40px;
    }


    #inf {
        float: left;
        width: 300px;
        padding: 20px 0px;
        color: #fff;
        border-bottom: 6px solid #f00;
    }

    #textf {
        float: left;
        width: 100%;
    }

    #textf p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
    }

    #rrssf {
        float: left;
        width: 100%;
        margin-top: 20px;
    }

    #rrssf ul.rrss-footer li {
        float: left;
        width: 50px;
    }

    #rss-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/rssf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #fb-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/fbf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #tw-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/twf.png');
        background-position: 0px 3px;
        background-repeat: no-repeat;
    }

    #lki-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/inf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }


    /*......................................................... BACKGROUND DECORATION */

    #top-decoration {
        width: 100%;
        height: 66px;
        position: relative;
        background-color: #f00;
        top: 75px;
        z-index: -999;
    }

    #med-decoration {
        width: 100%;
        height: 870px;
        background-color: #373737;
        position: relative;
        top: 900px;
        z-index: -999;
    }

    #line-decoration {
        display: none;
    }

    #line-decoration2 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 1100px;
    }

    #line-decoration3 {
        width: 100%;
        border-bottom: 1px solid #bbb;
        position: relative;
        top: 1560px;
    }

    #deco-sup {
        float: left;
        width: 100%;
        height: 930px;
        background-color: #373737;
        position: relative;
        margin-top: -1000px;
        z-index: -999;
    }

    #deco-inf {
        float:left;
        width: 100%;
        height: 114px;
        background-color: #000;
        position: relative;
        margin-top: -120px;
        z-index: -999;
        border-bottom: 7px solid #f00;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS SLIDER HOME */

    /* =Skitter styles
	----------------------------------------------- */
    .box_skitter {
        position: relative;
        width: 300px;
        height: 200px;
        background: #000;
    }

    .box_skitter img {
        max-width: none;
    } /* Tip for stildv */
    .box_skitter ul {
        display: none;
    }

    .box_skitter .container_skitter {
        overflow: hidden;
        position: relative;
    }

    .box_skitter .image {
        overflow: hidden;
    }

    .box_skitter .image img {
        display: none;
    }

    /* =Box clone
	-------------------------------------------------------------- */
    .box_skitter .box_clone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        overflow: hidden;
        display: none;
        z-index: 20;
    }

    .box_skitter .box_clone img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
    }

    /* =Navigation
	-------------------------------------------------------------- */
    .box_skitter .prev_button {
        position: absolute;
        top: 50%;
        left: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .next_button {
        position: absolute;
        top: 50%;
        right: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .prev_button:hover, .box_skitter .next_button:hover {
        opacity: 0.5 !important;
    }

    /* =Numbers
	-------------------------------------------------------------- */
    .box_skitter .info_slide {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 100;
        background: #000;
        color: #fff;
        font: bold 11px arial;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        opacity: 0.75;
    }

    .box_skitter .info_slide .image_number {
        background: #333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
        background: #cc3333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
    }

    /* =Thumbs
		Change width and height to customization dimension thumb
	-------------------------------------------------------------- */
    .box_skitter .container_thumbs {
        position: relative;
        overflow: hidden;
        height: 50px;
    }

    .box_skitter .info_slide_thumb {
        height: 50px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow: hidden;
        top: auto;
        top: 0;
        left: 0;
        padding: 0 !important;
        opacity: 1.0;
    }

    .box_skitter .info_slide_thumb .image_number {
        overflow: hidden;
        width: 100px;
        height: 50px;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    .box_skitter .info_slide_thumb .image_number img {
        position: absolute;
        top: -30px;
        left: -30px;
        height: 100px;
    }

    .box_skitter .box_scroll_thumbs {
        padding: 0;
    }

    .box_skitter .box_scroll_thumbs .scroll_thumbs {
        position: absolute;
        bottom: 60px;
        left: 50px;
        background: #ccc;
        background: -moz-linear-gradient(-90deg, #555, #fff);
        background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
        width: 200px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999em;
        z-index: 101;
        cursor: pointer;
        border: 0px solid #333;
    }

    /* =Dots
	-------------------------------------------------------------- */
    .box_skitter .info_slide_dots {
        position: absolute;
        bottom: -40px;
        z-index: 151;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }

    .box_skitter .info_slide_dots .image_number {
        background: #333;
        float: left;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        width: 18px;
        height: 18px;
        text-indent: -9999em;
        overflow: hidden;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide_dots .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
        background: #cc3333;
        float: left;
        margin: 0 5px 0 0;
    }

    /* =Loading
	-------------------------------------------------------------- */
    .loading {
        position: absolute;
        top: 50%;
        right: 50%;
        z-index: 10000;
        margin: -16px -16px;
        color: #fff;
        text-indent: -9999em;
        overflow: hidden;
        background: url(imageslider/ajax-loader.gif) no-repeat left top;
        width: 32px;
        height: 32px;
    }

    /* =Label
	-------------------------------------------------------------- */
    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: none;
    }

    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        display: none;
        opacity: 0.8;
        background: #000;
    }

    .box_skitter .label_skitter p {
        padding: 10px;
        margin: 0;
        font: normal 22px arial,tahoma;
        letter-spacing: -1px;
    }

    .box_skitter .progressbar {
        background: #000;
        position: absolute;
        top: 5px;
        left: 15px;
        height: 5px;
        width: 200px;
        z-index: 99;
        border-radius: 20px;
    }

    /* =Preview slide
	-------------------------------------------------------------- */
    .box_skitter .preview_slide {
        display: none;
        position: absolute;
        z-index: 152;
        bottom: 30px;
        left: -40px;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #222;
        -moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        -webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        overflow: hidden;
    }

    .box_skitter .preview_slide ul {
        height: 100px !important;
        overflow: hidden !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }

    .box_skitter .preview_slide ul li {
        width: 100px !important;
        height: 100px !important;
        overflow: hidden !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .box_skitter .preview_slide ul li img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 150px !important;
        width: auto !important;
    }

    /* =Focus
	-------------------------------------------------------------- */
    #overlay_skitter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
        opacity: 1;
        background: #000;
    }

    .box_skitter .focus_button {
        position: absolute;
        top: 50%;
        z-index: 100;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button {
        position: absolute;
        top: 50%;
        z-index: 151;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button.play_button {
    }


    .box_skitter .play_pause_button:hover {
        opacity: 0.5 !important;
    }

    .box_skitter .focus_button:hover {
        opacity: 0.5 !important;
    }

    /* =Example for dimenions
	-------------------------------------------------------------- */
    .box_skitter_large {
        width: 300px;
        height: 200px;
    }

    .box_skitter_small {
        width: 200px;
        height: 100px;
    }

    /* =Default theme
	-------------------------------------------------------------- */
    .box_skitter .focus_button,
    .box_skitter .next_button,
    .box_skitter .prev_button,
    .box_skitter .play_pause_button
    {
        display: block;
        background: url('imageslider/sprite-default.png') no-repeat;
    }

    .box_skitter .next_button {
        background-position: -0px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .prev_button {
        background-position: -42px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button {
        background-position: -0px -0px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button.play_button {
        background-position: -0px -84px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .focus_button {
        background-position: -42px -0px;
        width: 42px;
        height: 42px;
    }

    /* =Square theme
	-------------------------------------------------------------- */

    .skitter-square .play_pause_button,
    .skitter-square .next_button,
    .skitter-square .focus_button,
    .skitter-square .prev_button
    {
        display: block;
        background: url('imageslider/sprite-square.png') no-repeat;
    }

    .skitter-square .play_pause_button {
        background-position: -55px -0px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .play_pause_button.play_button {
        background-position: -0px -0px;
        width: 55px;
        height: 55px;
    }

    .skitter-square .focus_button {
        background-position: -55px -55px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 65px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .next_button {
        background-position: -0px -55px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
    }

    .skitter-square .prev_button {
        background-position: -0px -110px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 65px;
    }

    .skitter-square .info_slide {
        background: transparent;
    }

    .skitter-square .info_slide .image_number {
        background: #fff;
        box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
        font-size: 12px;
        font-weight: normal;
        color:#333;
    }

    .skitter-square .info_slide .image_number:hover {
        background: #ccc;
    }

    .skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
        background: #111;
        color:#fff;
    }

    .skitter-square .info_slide_dots .image_number {
        width: 14px;
        height: 14px;
        box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
        background: #ccc;
    }

    .skitter-square .info_slide_dots .image_number:hover {
        background: #999;
    }

    .skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
        background: #555;
    }

    .skitter-square .progressbar {
        top:0 !important;
        left: 0 !important;
        width: 100%;
        background: #fff;
        border-radius: 0;
        height: 2px;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS CARROUSEL */

    /*Horizontal Orientation CSS*/
    .jscarousal-horizontal
    {
        width: 300px;
        height: 150px;
        margin-left: -21px;
        position: relative; /*overflow: hidden;*/
    }
    .jscarousal-horizontal-back, .jscarousal-horizontal-forward
    {
        float: left;
        width: 23px;
        height: 145px;
        color: White;
        position: relative;
        top: 6px;
        cursor: pointer;
    }
    .jscarousal-horizontal-back
    {
        background-image: url(images/left_arrow.jpg);
        background-repeat: no-repeat;
        background-position: left -10px;
    }
    .jscarousal-horizontal-forward
    {
        background-image: url(images/right_arrow.jpg);
        background-repeat: no-repeat;
        background-position: right -10px;
    }
    .jscarousal-contents-horizontal
    {
        width: 250px;
        height: 150px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    .jscarousal-contents-horizontal > div
    {
        position: absolute;
        width: 100%;
        height: 150px;
    }
    .jscarousal-contents-horizontal > div > div
    {
        float: left;
        margin-left: 8px;
        margin-right: 8px;
    }
    .jscarousal-contents-horizontal img
    {
        width: 250px;
        height: 150px;
    }
    /*Horizontal Orientation CSS Ends*/



    /*Common*/
    .hidden
    {
        display: none;
    }
    .visible
    {
        display: block;
    }
    .thumbnail-active
    {
        filter: alpha(opacity=100);
        opacity: 1.0;
        cursor: pointer;
    }
    .thumbnail-inactive
    {
        filter: alpha(opacity=20);
        opacity: 1;
        cursor: pointer;
    }
    .thumbnail-text
    {
        color: #7A7677;
        font-weight: bold;
        text-align: left;
        display: block;
        padding: 10px 2px 2px 0px;
    }

}


/* ----------------- MOBILE ---------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-------------------------------------------------
-----------------------------------------------*/

@media (max-width:299px) {

    body {
        font: normal normal 10px 'robotoregular';
    }

    #wrapper {
        width: 200px;
        margin: 0px auto;
    }

    #wrapp {
        width: 200px;
        margin: 0px auto;
    }

    #container {
        float: left;
        width: 200px;
        overflow: hidden;
    }

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

    ul {
        list-style: none;
    }

    nav {
        list-style: none;
    }

    h3 {
        font: normal normal 16px 'robotoregular';
    }

    h4 {
        font: normal normal 12px 'robotoregular';
        color: #444;
    }

    /*........................................................................ HEADER */

    header {
        float: left;
        width: 200px;
        height: 200px;
        margin-top: 5px;
        margin-bottom: 30px;
    }

    #top-header {
        float: left;
        width: 100%;
        height: 70px;
    }

    #logo {
        float: left;
        width: 100%;
        height: 70px;
        background: url('images/logo.png');
        background-repeat: no-repeat;
        background-position: 50% 10%;
    }

    #logo h1 {
        display: none;
    }

    #rrss-header {
        display: none;
    }

    ul.top-header {
        float: right;
        width: 100%;
        margin-top: 30px;
        margin-left: 20px;
    }

    ul.top-header li {
        float: left;
        margin: 0 20px 0 20px;
    }

    ul.top-header li a {
        float: right;
        font: normal normal 8px 'robotoregular';
        margin-left: 17px;
        margin-top: -4px;
    }

    li.tw-h {
        background: url('images/twitter.png') top left no-repeat;
    }

    li.fb-h {
        background: url('images/fb.png') top left no-repeat;
    }

    li.rss-h {
        background: url('images/rss.png') top left no-repeat;
    }

    li.mail-h {
        background: url('images/msg.png') top left no-repeat;
        margin: 0px;
    }

    nav {
        float: left;
        background-color: #f00;
        width: 200px;
        height: 130px;
        padding: 15px 0px 15px 0px;
    }

    nav li {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        border-bottom: 1px solid #fff;
        height: 15px;
    }

    nav li:first-child {
        float: left;
    }

    nav li a {
        float: left;
        width: 100%;
        font: normal normal 10px 'robotomedium';
        text-align: center;
        color: #fff;
    }

    nav li a:hover {
        border-bottom: 5px solid #fff;
    }

    nav li a.current {
        border-bottom: 5px solid #fff;
    }

    nav li a.home span {
        display: none;
    }

    nav li a.home {
        width: 100%;
        height: 25px;
        background-image: url('images/home.png');
        background-position: 50% 0px;
        background-repeat: no-repeat;
    }

    nav > li:first-child {
        width: 100%;
        height: 25px;
    }

    div#claim {
        display: none;
    }

    /* .................................................................... CONTENTS */

    /* ....................................................... HOME */

    /* ........................... SLIDER / ACCESO USUARIOS */

    section#slider {
        float: left;
        width: 200px;
        height: 400px;
        margin-top: 30px;
        margin-bottom: 40px;
    }

    #slide {
        float: left;
        width: 200px;
        height: 150px;
    }

    #slide img {
        float: left;
        width: 200px;
        height: 150px;
    }

    #zclient {
        float: left;
        width: 180px;
        height: 244px;
        padding: 10px;
        background-color: #373737;
        border-top: 6px solid #f00;
        color: #fff;
    }

    #zclient h3 {
        font: normal normal 18px 'robotoregular';
        margin-bottom: 10px;
    }

    #zclient p {
        font: normal normal 10px 'robotoregular';
        margin-bottom: 10px;
        color: #bbb;
    }

    form.access {
        float: left;
        width: 200px;
    }

    form.access input {
        float: left;
        width: 160px;
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid #f00;
        color: #bbb;
    }

    form.access input[type=submit] {
        float: left;
        width: 60px;
        padding: 5px;
        color: #fff;
        background-color: #f00;
    }

    form.access p.form {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin: 0px !important;
    }

    form.access p.formm {
        float: left;
        width: 160px;
        font: normal normal 8px Arial, 'robotoregular' !important;
        margin-bottom: 0px !important;
    }

    /* ......................................... SLIDER2 */

    #demo-wrapper
    {
        margin: 0;
        padding: 0;
        width: 160px;
        height: 100px;
        padding: 40px 20px 0px 20px;
    }
    #demo-left
    {
        width: 15%;
        float: left;
    }
    #demo-right
    {
        width: 85%;
        float: left;
    }
    #hWrapperAuto
    {
        margin-top: 20px;
    }
    #demo-tabs
    {
        width: 200px;
        height: 50px;
        color: White;
        margin: 0;
        padding: 0;
    }
    #demo-tabs div.item
    {
        height: 100px;
        float: left;
        border-bottom: none;
        padding: 0;
        margin: 0;
        padding: 10px 4px 4px 4px;
        font-weight: bold;
    }
    #demo-tabs div.item.active-tab
    {
        background-color: Black;
    }
    #demo-tabs div.item.active-tabc
    {
        background-color: Black;
    }
    #v1, #v2
    {
        margin: 20px;
    }
    .visible
    {
        display: block;
    }
    .hidden
    {
        display: none;
    }
    #oldWrapper
    {
        margin-left: 100px;
    }
    .heading
    {
        font-size: 20pt;
        font-weight: bold;
    }

    /*     ...........          */

    section#weare {
        float: left;
        width: 200px;
    }

    .tittle {
        float: left;
        width: 178px;
        padding: 10px;
        border: 1px solid #f00;
        margin-bottom: 40px;
    }

    .tittle h3 {
        font: italic normal 14px 'robotoregular' !important;
        text-align: center;
    }

    .tittle span {
        font-weight: bold;
    }


    /* ......................................... SERVICIOS */

    section#serv {
        float: left;
        width: 200px;
        margin-top: 50px;
        padding: 50px 0;
        text-align: center;
        margin-bottom: 40px;
    }

    ul.serv {
        float: left;
        width: 200px;
    }

    ul.serv h4 {
        font: normal normal 18px 'robotoregular';
        color: #fff;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    ul.serv p {
        font: normal normal 13px 'robotoregular';
        color: #777;
        margin-bottom: 40px;
    }

    ul.serv li {
        float: left;
        width: 200px;
    }

    li.serv1 {
        background-image: url('images/serv1.png');
        background-position: 20px 18px;
        background-repeat: no-repeat;
    }

    li.serv2 {
        background-image: url('images/serv2.png');
        background-position: 40px 12px;
        background-repeat: no-repeat;
    }

    li.serv3 {
        background-image: url('images/serv3.png');
        background-position: 80px 17px;
        background-repeat: no-repeat;
    }

    /* ......................................... ORDER */

    section#order {
        float: left;
        width: 200px;
        margin-bottom: 50px;
    }

    section#order h4 {
        font: normal normal 19px 'robotoregular';
        color: #373737;
    }

    section#order label {
        float: left;
        width: 200px;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    section#order input {
        float: left;
        font: normal normal 11px 'robotoregular';
        padding: 8px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    section#order form select  {
        float: left;
        width: 100%;
        height: 33px;
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        padding: 5px;
        margin-bottom: 10px;
        border: 1px solid #bbb;
    }

    section#order p {
        float: left;
        font: normal normal 12px 'robotoregular';
    }

    p.red {
        float:left;
        color: #f00;
    }

    section#order ul {
        float: left;
        width: 200px;
    }

    section#order ul li {
        float: left;
        width: 100%;
    }

    li.form1 {
        width: 100%;
    }

    li.form2 {
        width: 90%;
    }

    li.form2 input {
        width: 90%;
    }

    li.form3 {
        width: 90%;
    }

    li.form3 input {
        width: 90%;
    }

    li.form3 a {
        font: normal normal 9px 'robotoregular';
        color: #f00;
        width: 90%;
        text-decoration: underline;
        text-align: right;
    }

    li.form4 {
        width: 90%;
    }

    li.form4 input {
        width: 90%;
        margin-bottom: 10px;
    }

    li.form5 {
        width: 90%;
    }

    li.form5 input {
        width: 90%;
    }

    li.form6 {
        width: 90%;
    }

    li.form6 input {
        width: 90%;
    }

    li.form7 {
        width: 90%;
    }

    li.form7 input {
        width: 90%;
    }

    li.form8 {
        float: left;
        width: 90%;
    }

    li.form8 input {
        width: 90%;
    }

    li.form9 {
        width: 90%;
    }

    li.form9 input {
        width: 90%;
    }

    li.form10 input {
        width: 50%;
        margin-top: 50px;
        margin-bottom: 15px;
        background-color: #f00;
        color: #fff;
        font: normal normal 11px 'robotoregular';
    }


    /* ................................................... QUIENES SOMOS */

    .underline {
        float: left;
        width: 100%;
        height: auto;
        margin-top: 40px;
        padding-bottom: 50px;
        background-image: url('images/border.png');
        background-repeat: repeat-x;
        background-position: bottom left;
    }

    .underline h3 {
        font: normal normal 28px 'robotoregular';
    }

    .underline h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #quienessomos p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #quienessomos p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul {
        margin: 40px 0 40px 20px;
    }

    #quienessomos ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 0 0 30px;
    }

    #quienessomos ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #quienessomos ul li.tick {
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }

    #graph {
        float: left;
        width: 90%;
        padding: 30px 0 0 0;
        border: 2% solid #f00;
        background-image: url('images/graphicmob.png');
        background-repeat: no-repeat;
        background-position: 50% 20px;
    }

    #graph p {
        font: normal normal 10px 'robotoregular';
        text-align: center;
        margin: 80px 0 160px 0;
    }

    #graph p.last {
        margin: 80px 0 50px 0;
    }

    #valores {
        float: left;
        width: 200px;
        margin-bottom: 80px;
    }

    #valores h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #valores h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    #values {
        float: left;
        width: 198px;
        border: 1px solid #f00;
    }

    #values ul {
        float: left;
        width: 100%;
    }

    #values ul li {
        float: left;
        width: 80%;
        padding: 150px 10% 40px 10%;
        font: normal normal 15px 'robotoregular';
        text-align: center;
    }

    li.seguridad {
        background-image: url('images/seguridad.png');
        background-position: 70px 30px;
        background-repeat: no-repeat;
    }

    li.experiencia {
        background-image: url('images/experiencia.png');
        background-position: 70px 50px;
        background-repeat: no-repeat;
    }

    li.innovacion {
        background-image: url('images/innovacion.png');
        background-position: 60px 55px;
        background-repeat: no-repeat;
    }

    li.compatibilidad {
        background-image: url('images/compatibilidad.png');
        background-position: 70px 70px;
        background-repeat: no-repeat;
    }

    li.stock {
        background-image: url('images/stock.png');
        background-position: 60px 80px;
        background-repeat: no-repeat;
    }

    /* ................................................... CONTACTO */

    #formc {
        float: left;
        width: 200px;
    }

    #formc h3 {
        font: normal normal 28px 'robotoregular';
        margin-top: 40px;
    }

    #formc h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 10px;
    }

    #formc label {
        float: left;
        width: 100%;
        color: #777;
        margin-top: 20px;
        margin-bottom: 12px;
    }

    #formc label span {
        color: #f00;
    }

    #formc input {
        float: left;
        width: 188px;
        height: 20px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
    }

    #formc input[type=submit] {
        float: left;
        width: 200px;
        height: 40px;
        margin: 30px 0 10px 0;
        font: normal normal 13px 'robotoregular';
        padding: 5px;
        background-color: #f00;
        color: #fff;
    }

    #formc textarea {
        float: left;
        width: 188px;
        height: 40px;
        font: normal normal 11px 'robotoregular';
        padding: 5px;
        border: 1px solid #bbb;
        color: #bbb;
        resize: none;
    }

    #formc ul li.nom {
        float: left;
        width: 188px;
    }

    #formc ul li.nom input {
        float: left;
        width: 188px;
    }

    #infoc {
        float: left;
        width: 178px;
        padding: 0 0px 10px 20px;
        margin-top: 50px;
        margin-bottom: 100px;
        border: 1px solid #f00;
        background-image: url('images/borderl.png');
        background-position: 0px 85px;
        background-repeat: repeat-x;
    }

    #infoc #logoc {
        float: left;
        width: 300px;
        height: 69px;
        padding-top: 10px;
        margin-bottom: 20px;
        background-image: url('images/logo.png');
        background-position: 0px 15px;
        background-repeat: no-repeat;
    }

    #infoc p.parr {
        font: normal normal 12px 'Conv_Roboto-Bold';
        margin-top: 20px;
    }


    /* ................................................... SOLUCIONES */


    .soluciones h3 span {
        font-family: 'Conv_Roboto-Bold';
    }

    .soluciones {
        float: left;
        width: 198px;
        padding: 40px 0 40px 0;
        text-align: center;
        border: 1px solid #f00;
        margin: 30px 0 50px 0;
    }

    #soluciones {
        float: left;
        margin-top: 30px;
    }

    .soluciones h4 {
        font: normal normal 17px 'robotoregular';
        color: #444;
        margin-bottom: 30px;
    }

    .soluciones ul li h4 {
        float: left;
        width: 188px;
        font: normal normal 23px 'robotoregular';
        color: #222;
        margin-bottom: 25px;
        margin-top: 120px;
    }

    .soluciones ul li p {
        float: left;
        width: 188px;
        font: normal normal 14px 'robotoregular';
        color: #777;
    }

    .soluciones ul li p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    .soluciones ul li {
        float: left;
        width: 188px;
    }

    #soluciones a {
        float: left;
        width: 150px;
        height: 20px;
        margin: 10px 0 30px 5px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff;
    }

    li.cons {
        background-image: url('images/cons.png');
        background-repeat: no-repeat;
        background-position: 20px 15px;
    }

    li.integ {
        background-image: url('images/integ.png');
        background-repeat: no-repeat;
        background-position: 40px 15px;
    }

    li.mant {
        background-image: url('images/mant.png');
        background-repeat: no-repeat;
        background-position: 70px 15px;
    }

    #soluciones p {
        font: normal normal 14px 'robotoregular';
        color: #444;
    }

    #soluciones p span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul {
        margin: 15px 0 40px 0px;
    }

    #soluciones ul li {
        font: normal normal 14px 'robotoregular';
        line-height: 25px;
        color: #444;
        padding: 0 5px 0 5px;
    }

    #soluciones ul li span {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #soluciones ul li.tick {
        padding: 0 0 0 20px;
        background-image: url('images/tick.png');
        background-repeat: no-repeat;
        background-position: 0 10px;
    }


    /* .................. INTEGRACIÓN ............*/

    #integracion {
        float: left;
        width: 200px;
        margin-top: 40px;
    }

    #integracion h4 {
        margin-bottom: 30px;
    }

    #integracion .tittle {
        width: 178px;
        padding: 140px 10px 10px 10px;
        background-image: url('images/integ.png');
        background-position: 40px 30px;
        background-repeat: no-repeat;
    }

    #integracion .tittle p {
        float: left;
        width: 100%;
        font: normal normal 12px 'robotoregular';
        color: #777;
        margin-bottom: 30px;
        text-align: center;
    }

    #integracion p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #integracion #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 200px;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 200px;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 90%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 90%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: left;
        width: 50%;
        height: 40px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. MANTENIMIENTO ............*/

    #mantenimiento {
        float: left;
        width: 200px;
        margin-top: 40px;
    }

    #mantenimiento h4 {
        margin-bottom: 30px;
    }

    #mantenimiento .tittle {
        width: 178px;
        padding: 150px 10px 10px 10px;
        background-image: url('images/mant.png');
        background-position: 70px 40px;
        background-repeat: no-repeat;
    }

    #mantenimiento .tittle p {
        font: normal normal 12px 'robotoregular';
        text-align: center;
        color: #777;
        margin-bottom: 30px;
    }

    #mantenimiento p.slide {
        font: normal normal 14px 'Conv_Roboto-Bold';
    }

    #mantenimiento #slider2 {
        margin-top: -30px;
        margin-bottom: 100px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 90%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }


    /* .................. ACONSEJAMOS ............*/

    #aconsejamos {
        float: left;
        width: 200px;
        margin-top: 40px;
    }

    #aconsejamos h4 {
        margin-bottom: 30px;
    }

    #aconsejamos .tittle {
        width: 178px;
        padding: 40px 10px 30px 10px;
        background-image: url('images/aconsejamos.png');
        background-position: 20px 40px;
        background-repeat: no-repeat;
    }

    #aconsejamos .tittle p {
        font: normal normal 12px 'robotoregular';
        color: #777;
        margin-left: 100px;
        margin-bottom: 30px;
    }

    #aconsejamos #slider2 {
        float: left;
        width: 300px;
        margin-top: -30px;
        margin-bottom: 125px;
    }

    ul.integracion {
        float: left;
        width: 100%;
    }

    ul.integracion span {
        color: #f00;
    }

    ul.integracion li {
        float: left;
        width: 100%;
    }

    ul.integracion li label {
        float: left;
        width: 100%;
    }

    ul.integracion li input {
        float: left;
        width: 90%;
        margin-top: 10px;
        padding: 2%;
    }

    ul.integracion li.texta {
        float: left;
        width: 100%;
    }

    ul.integracion li.texta textarea {
        float: left;
        width: 94%;
        height: 120px;
        padding: 2%;
        border: 1px solid #bbb;
        margin-top: 10px;
        resize: none;
    }

    ul.integracion li input[type=submit] {
        float: right;
        width: 200px;
        height: 40px;
        margin: 30px 0 30px 0px;
        font: normal normal 13px 'robotoregular';
        padding: 8px;
        background-color: #f00;
        color: #fff !important;
        border: none;
    }

    #graphics {
        float: left;
        width: 200px;
        margin-bottom: 60px;
    }

    #graphics p {
        font: normal normal 18px 'Conv_Roboto-Bold';
        text-align: center;
    }

    #graph-left {
        float: left;
        width: 200px;
        height: 300px;
        padding: 30px 0 40px 0;
        background-image: url('images/acons111.png');
        background-repeat: no-repeat;
        background-position: 0px 90px;
    }

    #graph-right {
        float: left;
        width: 200px;
        height: 350px;
        padding: 30px 0 40px 0;
        background-color: #ccc;
        background-image: url('images/acons222.png');
        background-repeat: no-repeat;
        background-position: 0px 80px;
    }




    /*........................................................................ FOOTER */

    footer h4 {
        color: #fff;
    }

    #sup {
        float: left;
        width: 300px;
        padding: 50px 0;
        color: #fff;
    }

    #sup > ul {
        float: left;
        width: 300px;
    }

    #sup > ul > li {
        float: left;
        width: 300px;
        height: auto;
    }

    #sup h4 {
        font: normal normal 15px 'robotoregular';
        margin-bottom: 20px;
    }

    #sup p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
        margin-bottom: 10px;
    }

    ul#news li {
        float: left;
        width: 100%;
        margin-bottom: 30px;
        padding-top: 20px;
        border-top: 1px solid #777;
    }

    ul#news li:first-child {
        float: left;
        margin-bottom: 30px;
        padding-top: 0px;
        border-top: 0px !important;
    }

    .date {
        float: left;
        width: 100%;
        height: 14px;
        background: url('images/clock.png') top left no-repeat;
    }

    #sup .date p {
        color: #777;
        margin-left: 20px;
    }


    ul#links {
        float: left;
        width: 100%;
    }

    ul#links p {
        float: left;
        font: normal normal 10px 'robotoregular';
    }

    ul#links li {
        float: left;
        width: 100%;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
    }

    ul#links a {
        float: left;
        font: normal normal 10px 'robotoregular';
        margin-bottom: 14px;
        text-decoration: underline;
    }

    ul li#info {
        float: left;
        width: 300px;
        margin-right: 20px;
    }

    ul li#contact {
        float: left;
        width: 300px;
        margin-right: 0px;
    }

    li#contact ul li {
        font: normal normal 14px 'robotoregular';
        color: #bbb;
    }

    li#contact ul li.dir {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/direfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.email {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/msgfooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.phone {
        float: left;
        width: 100%;
        margin-bottom: 10px;
        background-image: url('images/telffooter.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    li#contact ul li.dir p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.email p {
        float: left;
        margin-left: 40px;
    }

    li#contact ul li.phone p {
        float: left;
        margin-left: 40px;
    }


    #inf {
        float: left;
        width: 300px;
        padding: 20px 0px;
        color: #fff;
        border-bottom: 6px solid #f00;
    }

    #textf {
        float: left;
        width: 100%;
    }

    #textf p {
        font: normal normal 10px 'robotoregular';
        color: #bbb;
    }

    #rrssf {
        float: left;
        width: 100%;
        margin-top: 20px;
    }

    #rrssf ul.rrss-footer li {
        float: left;
        width: 50px;
    }

    #rss-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/rssf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #fb-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/fbf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }

    #tw-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/twf.png');
        background-position: 0px 3px;
        background-repeat: no-repeat;
    }

    #lki-f {
        float: left;
        width: 28px;
        height: 28px;
        background-image: url('images/inf.png');
        background-position: 0px 0px;
        background-repeat: no-repeat;
    }


    /*......................................................... BACKGROUND DECORATION */

    #top-decoration {
        width: 100%;
        height: 160px;
        position: relative;
        background-color: #f00;
        top: 75px;
        z-index: -999;
    }

    #med-decoration {
        width: 100%;
        height: 960px;
        background-color: #373737;
        position: relative;
        top: 920px;
        z-index: -999;
    }

    #deco-sup {
        float: left;
        width: 100%;
        height: 1020px;
        background-color: #373737;
        position: relative;
        margin-top: -1020px;
        z-index: -999;
    }

    #deco-inf {
        float:left;
        width: 100%;
        height: 114px;
        background-color: #000;
        position: relative;
        margin-top: -120px;
        z-index: -999;
        border-bottom: 7px solid #f00;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS SLIDER HOME */

    /* =Skitter styles
	----------------------------------------------- */
    .box_skitter {
        position: relative;
        width: 200px;
        height: 150px;
        background: #000;
    }

    .box_skitter img {
        max-width: none;
    } /* Tip for stildv */
    .box_skitter ul {
        display: none;
    }

    .box_skitter .container_skitter {
        overflow: hidden;
        position: relative;
    }

    .box_skitter .image {
        overflow: hidden;
    }

    .box_skitter .image img {
        display: none;
    }

    /* =Box clone
	-------------------------------------------------------------- */
    .box_skitter .box_clone {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        overflow: hidden;
        display: none;
        z-index: 20;
    }

    .box_skitter .box_clone img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 20;
    }

    /* =Navigation
	-------------------------------------------------------------- */
    .box_skitter .prev_button {
        position: absolute;
        top: 50%;
        left: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .next_button {
        position: absolute;
        top: 50%;
        right: 35px;
        z-index: 152;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .prev_button:hover, .box_skitter .next_button:hover {
        opacity: 0.5 !important;
    }

    /* =Numbers
	-------------------------------------------------------------- */
    .box_skitter .info_slide {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 100;
        background: #000;
        color: #fff;
        font: bold 11px arial;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        opacity: 0.75;
    }

    .box_skitter .info_slide .image_number {
        background: #333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide .image_number_select, .box_skitter .info_slide .image_number_select:hover {
        background: #cc3333;
        float: left;
        padding: 2px 10px;
        margin: 0 5px 0 0;
    }

    /* =Thumbs
		Change width and height to customization dimension thumb
	-------------------------------------------------------------- */
    .box_skitter .container_thumbs {
        position: relative;
        overflow: hidden;
        height: 50px;
    }

    .box_skitter .info_slide_thumb {
        height: 50px;
        -moz-border-radius: 0;
        -webkit-border-radius: 0;
        border-radius: 0;
        overflow: hidden;
        top: auto;
        top: 0;
        left: 0;
        padding: 0 !important;
        opacity: 1.0;
    }

    .box_skitter .info_slide_thumb .image_number {
        overflow: hidden;
        width: 100px;
        height: 50px;
        position: relative;
        margin: 0 !important;
        padding: 0 !important;
        -moz-border-radius: 0 !important;
        -webkit-border-radius: 0 !important;
        border-radius: 0 !important;
    }

    .box_skitter .info_slide_thumb .image_number img {
        position: absolute;
        top: -30px;
        left: -30px;
        height: 100px;
    }

    .box_skitter .box_scroll_thumbs {
        padding: 0;
    }

    .box_skitter .box_scroll_thumbs .scroll_thumbs {
        position: absolute;
        bottom: 60px;
        left: 50px;
        background: #ccc;
        background: -moz-linear-gradient(-90deg, #555, #fff);
        background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#fff));
        width: 200px;
        height: 10px;
        overflow: hidden;
        text-indent: -9999em;
        z-index: 101;
        cursor: pointer;
        border: 0px solid #333;
    }

    /* =Dots
	-------------------------------------------------------------- */
    .box_skitter .info_slide_dots {
        position: absolute;
        bottom: -40px;
        z-index: 151;
        padding: 5px 0 5px 5px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
    }

    .box_skitter .info_slide_dots .image_number {
        background: #333;
        float: left;
        margin: 0 5px 0 0;
        cursor: pointer;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        border-radius: 50px;
        width: 18px;
        height: 18px;
        text-indent: -9999em;
        overflow: hidden;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .info_slide_dots .image_number:hover {
        background: #000;
    }

    .box_skitter .info_slide_dots .image_number_select, .box_skitter .info_slide_dots .image_number_select:hover {
        background: #cc3333;
        float: left;
        margin: 0 5px 0 0;
    }

    /* =Loading
	-------------------------------------------------------------- */
    .loading {
        position: absolute;
        top: 50%;
        right: 50%;
        z-index: 10000;
        margin: -16px -16px;
        color: #fff;
        text-indent: -9999em;
        overflow: hidden;
        background: url(imageslider/ajax-loader.gif) no-repeat left top;
        width: 32px;
        height: 32px;
    }

    /* =Label
	-------------------------------------------------------------- */
    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        display: none;
    }

    .box_skitter .label_skitter {
        z-index: 150;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
        display: none;
        opacity: 0.8;
        background: #000;
    }

    .box_skitter .label_skitter p {
        padding: 10px;
        margin: 0;
        font: normal 22px arial,tahoma;
        letter-spacing: -1px;
    }

    .box_skitter .progressbar {
        background: #000;
        position: absolute;
        top: 5px;
        left: 15px;
        height: 5px;
        width: 200px;
        z-index: 99;
        border-radius: 20px;
    }

    /* =Preview slide
	-------------------------------------------------------------- */
    .box_skitter .preview_slide {
        display: none;
        position: absolute;
        z-index: 152;
        bottom: 30px;
        left: -40px;
        width: 100px;
        height: 100px;
        background: #fff;
        border: 1px solid #222;
        -moz-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        -webkit-box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        box-shadow: rgba(0,0,0,0.7) 2px 2px 5px;
        overflow: hidden;
    }

    .box_skitter .preview_slide ul {
        height: 100px !important;
        overflow: hidden !important;
        margin: 0 !important;
        list-style: none !important;
        display: block !important;
        position: absolute !important;
        top: 0;
        left: 0;
    }

    .box_skitter .preview_slide ul li {
        width: 100px !important;
        height: 100px !important;
        overflow: hidden !important;
        float: left !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        display: block !important;
    }

    .box_skitter .preview_slide ul li img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 150px !important;
        width: auto !important;
    }

    /* =Focus
	-------------------------------------------------------------- */
    #overlay_skitter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 9998;
        opacity: 1;
        background: #000;
    }

    .box_skitter .focus_button {
        position: absolute;
        top: 50%;
        z-index: 100;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button {
        position: absolute;
        top: 50%;
        z-index: 151;
        width: 42px;
        height: 42px;
        overflow: hidden;
        text-indent: -9999em;
        margin-top: -25px;
        opacity: 0;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }

    .box_skitter .play_pause_button.play_button {
    }


    .box_skitter .play_pause_button:hover {
        opacity: 0.5 !important;
    }

    .box_skitter .focus_button:hover {
        opacity: 0.5 !important;
    }

    /* =Example for dimenions
	-------------------------------------------------------------- */
    .box_skitter_large {
        width: 200px;
        height: 150px;
    }

    .box_skitter_small {
        width: 200px;
        height: 100px;
    }

    /* =Default theme
	-------------------------------------------------------------- */
    .box_skitter .focus_button,
    .box_skitter .next_button,
    .box_skitter .prev_button,
    .box_skitter .play_pause_button
    {
        display: block;
        background: url('imageslider/sprite-default.png') no-repeat;
    }

    .box_skitter .next_button {
        background-position: -0px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .prev_button {
        background-position: -42px -42px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button {
        background-position: -0px -0px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .play_pause_button.play_button {
        background-position: -0px -84px;
        width: 42px;
        height: 42px;
    }

    .box_skitter .focus_button {
        background-position: -42px -0px;
        width: 42px;
        height: 42px;
    }

    /* =Square theme
	-------------------------------------------------------------- */

    .skitter-square .play_pause_button,
    .skitter-square .next_button,
    .skitter-square .focus_button,
    .skitter-square .prev_button
    {
        display: block;
        background: url('imageslider/sprite-square.png') no-repeat;
    }

    .skitter-square .play_pause_button {
        background-position: -55px -0px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 10px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .play_pause_button.play_button {
        background-position: -0px -0px;
        width: 55px;
        height: 55px;
    }

    .skitter-square .focus_button {
        background-position: -55px -55px;
        width: 55px;
        height: 55px;
        top: 10px !important;
        left: 65px !important;
        bottom: auto !important;
        right: auto !important;
        margin-top:0;
    }

    .skitter-square .next_button {
        background-position: -0px -55px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 10px;
    }

    .skitter-square .prev_button {
        background-position: -0px -110px;
        width: 55px;
        height: 55px;
        top: auto;
        left: auto;
        bottom: 10px;
        right: 65px;
    }

    .skitter-square .info_slide {
        background: transparent;
    }

    .skitter-square .info_slide .image_number {
        background: #fff;
        box-shadow: rgba(0,0,0,0.2) 1px 1px 0;
        font-size: 12px;
        font-weight: normal;
        color:#333;
    }

    .skitter-square .info_slide .image_number:hover {
        background: #ccc;
    }

    .skitter-square .info_slide .image_number_select, .skitter-square .info_slide .image_number_select:hover {
        background: #111;
        color:#fff;
    }

    .skitter-square .info_slide_dots .image_number {
        width: 14px;
        height: 14px;
        box-shadow: rgba(255,255,255,0.2) 1px 1px 0;
        background: #ccc;
    }

    .skitter-square .info_slide_dots .image_number:hover {
        background: #999;
    }

    .skitter-square .info_slide_dots .image_number_select, .skitter-square .info_slide_dots .image_number_select:hover {
        background: #555;
    }

    .skitter-square .progressbar {
        top:0 !important;
        left: 0 !important;
        width: 100%;
        background: #fff;
        border-radius: 0;
        height: 2px;
    }

    /* ,,,,,,,,,,,,,,,,,, CSS CARROUSEL */

    /*Horizontal Orientation CSS*/
    .jscarousal-horizontal
    {
        width: 200px;
        height: 150px;
        margin-left: -21px;
        position: relative; /*overflow: hidden;*/
    }
    .jscarousal-horizontal-back, .jscarousal-horizontal-forward
    {
        float: left;
        width: 23px;
        height: 145px;
        color: White;
        position: relative;
        top: 6px;
        cursor: pointer;
    }
    .jscarousal-horizontal-back
    {
        background-image: url(images/left_arrow.jpg);
        background-repeat: no-repeat;
        background-position: left -10px;
    }
    .jscarousal-horizontal-forward
    {
        background-image: url(images/right_arrow.jpg);
        background-repeat: no-repeat;
        background-position: right -10px;
    }
    .jscarousal-contents-horizontal
    {
        width: 150px;
        height: 150px;
        float: left;
        position: relative;
        overflow: hidden;
    }
    .jscarousal-contents-horizontal > div
    {
        position: absolute;
        width: 100%;
        height: 150px;
    }
    .jscarousal-contents-horizontal > div > div
    {
        float: left;
        margin-left: 8px;
        margin-right: 8px;
    }
    .jscarousal-contents-horizontal img
    {
        width: 150px;
        height: 150px;
    }
    /*Horizontal Orientation CSS Ends*/



    /*Common*/
    .hidden
    {
        display: none;
    }
    .visible
    {
        display: block;
    }
    .thumbnail-active
    {
        filter: alpha(opacity=100);
        opacity: 1.0;
        cursor: pointer;
    }
    .thumbnail-inactive
    {
        filter: alpha(opacity=20);
        opacity: 1;
        cursor: pointer;
    }
    .thumbnail-text
    {
        color: #7A7677;
        font-weight: bold;
        text-align: left;
        display: block;
        padding: 10px 2px 2px 0px;
    }

}