* {
	padding:0;
	margin:0;
	outline:0;
}

body {
	display:block;
	background-color:#111;
	color:#f0f0f0;
}

@font-face {
	font-family:"Eurostile";
	font-style:normal;
	font-weight:400;
	src:url(../fuente/eurostile-webfont.eot) format("embedded-opentype"), url(../fuente/eurostile-webfont.woff) format("woff"), url(../fuente/eurostile-webfont.ttf) format("truetype"), url(../fuente/eurostile-webfont.svg) format("svg");
}

.central {
	background:url(../imgs/icono_HL.png);
	display:none;
	width:164px;
	height:164px;
	border-radius:100px;
	position:absolute;
	top:230px;
	left:425px;
	z-index:10;
}

.circ {
	border:none;
	margin:0;
	display:block;
	width:144px;
	height:145px;
	border-radius:90px;
	position:absolute;
}

.circ.le1, .circ.le2, .circ.le3 {
	display:none;
	margin:-105px -73px 0 0;
	top:50%;
	right:50%;
	z-index:5;
}

.circ.le4, .circ.le5, .circ.le6 {
	display:none;
	margin:-105px 0 0 -73px;
	top:50%;
	left:50%;
	z-index:5;
}

h2.title {
	font-family:"Eurostile";
	color:#878786;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-gris.png) right center no-repeat;
	padding-right:15px;
	float:left;
	font-size:14px;
}

.title {
	border:none;
	margin:0;
	display:block;
	position:absolute;
}

.title.t1 {
	display:none;
	top:125px;
	right:140px;
	z-index:5;
	float:left;
	line-height:normal;
}

.t1-hover {
	color:#fd0!important;
	background:url(../imgs/barrita-teletouch.png) right center no-repeat!important;
	text-shadow:0 0 8px #ffdd00, 0 0 8px #fd0;
	-webkit-text-fill-color:#fd0;
	-webkit-text-stroke-color:#fd0;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#fd0;
	-moz-text-stroke-color:#fd0;
	-moz-text-stroke-width:.2px;
}

.title.t2 {
	display:none;
	top:310px;
	right:40px;
	z-index:5;
	float:left;
	line-height:normal;
}

.t2-hover {
	color:#1371b8!important;
	background:url(../imgs/barrita-inhouse.png) right center no-repeat!important;
	text-shadow:0 0 8px #1371b8, 0 0 8px #1371b8;
	-webkit-text-fill-color:#1371b8;
	-webkit-text-stroke-color:#1371b8;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#1371b8;
	-moz-text-stroke-color:#1371b8;
	-moz-text-stroke-width:.2px;
}

.title.t3 {
	display:none;
	top:476px;
	right:110px;
	z-index:5;
	float:left;
}

.t3-hover {
	color:#ee9100!important;
	background:url(../imgs/barrita-sek.png) right center no-repeat!important;
	text-shadow:0 0 8px #ee9100, 0 0 8px #ee9100;
	-webkit-text-fill-color:#ee9100;
	-webkit-text-stroke-color:#ee9100;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#ee9100;
	-moz-text-stroke-color:#ee9100;
	-moz-text-stroke-width:.2px;
}

.title.t4 {
	display:none;
	top:130px;
	left:125px;
	z-index:5;
	float:right;
	background:url(../imgs/barrita-gris.png) left center no-repeat;
	padding-left:15px;
	padding-right:0;
	line-height:normal;
}

.t4-hover {
	color:#fff!important;
	background:url(../imgs/barrita-flipper.png) left center no-repeat!important;
	text-shadow:0 0 8px #ffffff, 0 0 8px #fff;
	-webkit-text-fill-color:#fff;
	-webkit-text-stroke-color:#fff;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#fff;
	-moz-text-stroke-color:#fff;
	-moz-text-stroke-width:.2px;
}

.title.t5 {
	display:none;
	top:310px;
	left:90px;
	z-index:5;
	float:right;
	background:url(../imgs/barrita-gris.png) left center no-repeat;
	padding-left:15px;
	padding-right:0;
	line-height:normal;
}

.t5-hover {
	color:#3baa35!important;
	background:url(../imgs/barrita-inter.png) left center no-repeat!important;
	text-shadow:0 0 8px #3baa35, 0 0 8px #3baa35;
	-webkit-text-fill-color:#3baa35;
	-webkit-text-stroke-color:#3baa35;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#3baa35;
	-moz-text-stroke-color:#3baa35;
	-moz-text-stroke-width:.2px;
}

.title.t6 {
	display:none;
	top:476px;
	left:170px;
	z-index:5;
	float:right;
	background:url(../imgs/barrita-gris.png) left center no-repeat;
	padding-left:15px;
	padding-right:0;
}

.t6-hover {
	color:#a200e0!important;
	background:url(../imgs/barrita-movy.png) left center no-repeat!important;
	text-shadow:0 0 8px #a200e0, 0 0 8px #a200e0;
	-webkit-text-fill-color:#a200e0;
	-webkit-text-stroke-color:#a200e0;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#a200e0;
	-moz-text-stroke-color:#a200e0;
	-moz-text-stroke-width:.2px;
}

.le1 {
	background:url(../imgs/exa_teletouch.png);
}

.le1:hover, .le1-selected {
	background:url(../imgs/exa_teletouch-hover.png);
}

.teletouch {
	background:url(../imgs/teletouch_normal.png);
	width:78px;
	height:77px;
	margin:30px 0 0 32px;
	cursor:pointer;
}

.teletouch:hover, .logo-active1 {
	background:url(../imgs/teletouch_hover.png);
}

#info1 {
	width:200px;
	height:180px;
	position:absolute;
	top:35px;
	right:80px;
	padding:15px;
}

#info1 h2 {
	color:#fd0;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-teletouch.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #ffdd00, 0 0 8px #fd0;
	-webkit-text-fill-color:#fd0;
	-webkit-text-stroke-color:#fd0;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#fd0;
	-moz-text-stroke-color:#fd0;
	-moz-text-stroke-width:.2px;
	margin-top:0;
	margin-bottom:15px;
	line-height:normal;
}

#info1 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha1 {
	background:url(../imgs/superior_derecha.png);
	width:61px;
	height:122px;
	position:absolute;
	top:116px;
	right:465px;
}

.le2 {
	background:url(../imgs/exa_inhouse.png);
}

.le2:hover, .le2-selected {
	background:url(../imgs/exa_inhouse-hover.png);
}

.inhouse {
	background:url(../imgs/inhouse_normal.png);
	width:78px;
	height:77px;
	margin:35px 0 0 32px;
	cursor:pointer;
}

.inhouse:hover, .logo-active2 {
	background:url(../imgs/inhouse_hover.png);
}

#info2 {
	width:200px;
	height:180px;
	position:absolute;
	top:220px;
	right:0;
	padding:15px;
}

#info2 h2 {
	color:#1371b8;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-inhouse.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #1371b8, 0 0 8px #1371b8;
	-webkit-text-fill-color:#1371b8;
	-webkit-text-stroke-color:#1371b8;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#1371b8;
	-moz-text-stroke-color:#1371b8;
	-moz-text-stroke-width:.2px;
	margin-bottom:15px;
	margin-top:0;
	line-height:normal;
}

#info2 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha2 {
	background:url(../imgs/horizontal.png);
	width:72px;
	height:18px;
	position:absolute;
	top:305px;
	right:371px;
}

.le3 {
	background:url(../imgs/exa_seki.png);
}

.le3:hover, .le3-selected {
	background:url(../imgs/exa_seki-hover.png);
}

.seki {
	background:url(../imgs/seki_normal.png);
	width:78px;
	height:77px;
	margin:35px 0 0 32px;
	cursor:pointer;
}

.seki:hover, .logo-active3 {
	background:url(../imgs/seki_hover.png);
}

#info3 {
	width:200px;
	height:180px;
	position:absolute;
	top:400px;
	right:80px;
	padding:15px;
}

#info3 h2 {
	color:#f39100;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-sek.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #f39100, 0 0 8px #f39100;
	-webkit-text-fill-color:#f39100;
	-webkit-text-stroke-color:#f39100;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#f39100;
	-moz-text-stroke-color:#f39100;
	-moz-text-stroke-width:.2px;
	margin-top:0;
	margin-bottom:15px;
	line-height:normal;
}

#info3 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha3 {
	background:url(../imgs/inferior_derecha.png);
	width:61px;
	height:122px;
	position:absolute;
	top:378px;
	right:465px;
}

.le4 {
	background:url(../imgs/exa_flipper.png);
}

.le4:hover, .le4-selected {
	background:url(../imgs/exa_flipper-hover.png);
}

.flipper {
	background:url(../imgs/flipper_normal.png);
	width:78px;
	height:77px;
	margin:34px 0 0 34px;
	cursor:pointer;
}

.flipper:hover, .logo-active4 {
	background:url(../imgs/flipper_hover.png);
}

#info4 {
	width:200px;
	height:180px;
	position:absolute;
	top:33px;
	left:65px;
	padding:15px;
}

#info4 h2 {
	color:#fff;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-flipper.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #ffffff, 0 0 8px #fff;
	-webkit-text-fill-color:#fff;
	-webkit-text-stroke-color:#fff;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#fff;
	-moz-text-stroke-color:#fff;
	-moz-text-stroke-width:.2px;
	margin-top:0;
	margin-bottom:15px;
	line-height:normal;
}

#info4 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha4 {
	background:url(../imgs/superior_izquierda.png);
	width:61px;
	height:122px;
	position:absolute;
	top:118px;
	left:455px;
}

.le5 {
	background:url(../imgs/exa_inter.png);
}

.le5:hover, .le5-selected {
	background:url(../imgs/exa_inter-hover.png);
}

.inter {
	background:url(../imgs/inter_normal.png);
	width:78px;
	height:77px;
	margin:32px 0 0 34px;
	cursor:pointer;
}

.inter:hover, .logo-active5 {
	background:url(../imgs/inter_hover.png);
}

#info5 {
	width:200px;
	height:180px;
	position:absolute;
	top:220px;
	left:-9px;
	padding:15px;
}

#info5 h2 {
	color:#3da838;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-inter.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #3da838, 0 0 8px #3da838;
	-webkit-text-fill-color:#3da838;
	-webkit-text-stroke-color:#3da838;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#3da838;
	-moz-text-stroke-color:#3da838;
	-moz-text-stroke-width:.2px;
	margin-top:0;
	margin-bottom:15px;
	line-height:normal;
}

#info5 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha5 {
	background:url(../imgs/horizontal.png);
	width:72px;
	height:18px;
	position:absolute;
	top:305px;
	left:361px;
}

.le6 {
	background:url(../imgs/exa_movy.png);
}

.le6:hover, .le6-selected {
	background:url(../imgs/exa_movy-hover.png);
}

.movy {
	background:url(../imgs/movy_normal.png);
	width:78px;
	height:77px;
	margin:35px 0 0 32px;
	cursor:pointer;
}

.movy:hover, .logo-active6 {
	background:url(../imgs/movy_hover.png);
}

#info6 {
	width:200px;
	height:180px;
	position:absolute;
	top:399px;
	left:65px;
	padding:15px;
}

#info6 h2 {
	color:#a200e0;
	font-family:"Eurostile", sans-serif;
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	background:url(../imgs/barrita-movy.png) right center no-repeat;
	padding-right:15px;
	float:left;
	text-shadow:0 0 8px #a200e0, 0 0 8px #a200e0;
	-webkit-text-fill-color:#a200e0;
	-webkit-text-stroke-color:#a200e0;
	-webkit-text-stroke-width:.2px;
	-moz-text-fill-color:#a200e0;
	-moz-text-stroke-color:#a200e0;
	-moz-text-stroke-width:.2px;
	margin-top:0;
	margin-bottom:15px;
	line-height:normal;
}

#info6 button {
	background:url(../imgs/boton_mas.png);
	border:none;
	width:18px;
	height:18px;
	cursor:pointer;
}

#flecha6 {
	background:url(../imgs/inferior_izquierda.png);
	width:61px;
	height:122px;
	position:absolute;
	top:380px;
	left:455px;
}

#info1 h1, #info2 h1, #info3 h1, #info4 h1, #info5 h1, #info6 h1 {
	color:#fff;
	font-family:"Eurostile", sans-serif;
	font-size:12px;
	text-transform:uppercase;
	float:left;
	font-weight:400;
	margin-right:10px;
	margin-top:5px;
	line-height:normal;
}

#info1 p, #info2 p, #info3 p, #info4 p, #info5 p, #info6 p {
	color:#fff;
	font-family:"Eurostile", sans-serif;
	font-size:13px;
	font-weight:400;
	min-height:120px;
	clear:both;
	line-height:16px;
	margin:0;
}

#canvas1 {
	position:absolute;
	top:3px;
	left:-90px;
}

#canvas2 {
	position:absolute;
	top:3px;
	left:-90px;
}

#canvas3 {
	position:absolute;
	top:3px;
	left:-90px;
}

#canvas4 {
	position:absolute;
	top:3px;
	right:-90px;
}

#canvas5 {
	position:absolute;
	top:3px;
	right:-90px;
}

#canvas6 {
	position:absolute;
	top:3px;
	right:-90px;
}

#homehl {
	display:block;
}


/*Portafolio*/

#f1_container, #f2_container, #f3_container,
#f4_container, #f5_container, #f6_container,
#f7_container, #f8_container, #f9_container,
#f10_container, #f11_container, #f12_container {
  position: relative;
   perspective: 1000px;
  z-index: 1;
}


#f1_card, #f2_card, #f3_card,
#f4_card, #f5_card, #f6_card,
#f7_card, #f8_card, #f9_card,
#f10_card, #f11_card, #f12_card {
  width: 100%;
  height: 100% !important;
  transform-style: preserve-3d;
  transition: all 1.0s linear;

}
#f1_container:hover #f1_card, #f2_container:hover #f2_card, #f3_container:hover #f3_card,
#f4_container:hover #f4_card, #f5_container:hover #f5_card, #f6_container:hover #f6_card,
#f7_container:hover #f7_card, #f8_container:hover #f8_card, #f9_container:hover #f9_card,
#f10_container:hover #f10_card, #f11_container:hover #f11_card, #f12_container:hover #f12_card{

-webkit-box-shadow: -1px 2px 30px 15px #000000 !important;
box-shadow: -1px 2px 30px 15px #000000 !important;
 transition: all 0.1s linear;
 zoom:100%;
 cursor: pointer;
}
#f1_container.spined #f1_card, #f2_container.spined #f2_card, #f3_container.spined #f3_card,
#f4_container.spined #f4_card, #f5_container.spined #f5_card, #f6_container.spined #f6_card,
#f7_container.spined #f7_card, #f8_container.spined #f8_card, #f9_container.spined #f9_card,
#f10_container.spined #f10_card, #f11_container.spined #f11_card, #f12_container.spined #f12_card{
   transform: rotateY(180deg) !important;
 transition: all 0.2s linear !important;
}
#f1_container.spined #f1_card{
  -webkit-box-shadow:inset -1px 2px 10px 5px #ffdb20 !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #ffdb20 !important;
  box-shadow:inset -1px 2px 10px 5px #ffdb20 !important;
}
#f3_container.spined #f3_card{
  -webkit-box-shadow:inset -1px 2px 10px 5px #1c73b6 !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #1c73b6 !important;
  box-shadow:inset -1px 2px 10px 5px #1c73b6 !important;
}
#f5_container.spined #f5_card{
  -webkit-box-shadow:inset -1px 2px 10px 5px #f1911f !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #f1911f !important;
  box-shadow:inset -1px 2px 10px 5px #f1911f !important;
}
#f7_container.spined #f7_card{

  -webkit-box-shadow:inset -1px 2px 10px 5px #a11fdd !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #a11fdd !important;
  box-shadow:inset -1px 2px 10px 5px #a11fdd !important;
}
#f9_container.spined #f9_card{
  -webkit-box-shadow:inset -1px 2px 10px 5px #40a83d !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #40a83d !important;
  box-shadow:inset -1px 2px 10px 5px #40a83d !important;
}
#f11_container.spined #f11_card{
  -webkit-box-shadow:inset -1px 2px 10px 5px #ffffff !important;
  -moz-box-shadow:inset -1px 2px 10px 5px #ffffff !important;
  box-shadow:inset -1px 2px 10px 5px #ffffff !important;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.back.face{position: absolute;}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: left;
  background-color: #000E31;
  height: 100px;
}
.back img{display: block;max-width: 60%;margin: 1% auto}
.back p{display: block;
  padding: 0.5% 8%;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  font-size: 14px !important;
}
.nomargen{margin-left: 0 !important}
.simargen{margin-left: 2.5641025641026% !important}
.blue{background-color: #09f; border: 1px dashed #ccc}
.absolute{position: absolute;}