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

/* HTML5 tags */
body {  font-family: 'Play', sans-serif; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2); }

::selection { background-color: rgba(153,153,153,0.5); }
::-moz-selection { background-color: rgba(153,153,153,0.5); border: 10px solid red; }

/*--------------------------------------------------------------------------*/

a {text-decoration: none;}
a:hover { color: #fff; text-decoration: none;}
a.wi { color: #Fff; text-decoration: none; padding-bottom: 2px; }
a.wi:hover{ color: #fff; text-decoration: none; border-bottom: 1px solid #fff; padding-bottom: 2px; }
p.pie { float: left; font-size: 14px; line-height: 20px; color:#fff; text-align:right; padding-right:5px;}
p.pie2 { font-size: 14px; line-height: 20px; color:#fff; text-align:center;}
a.pie { font-size: 14px; color: #fff; text-decoration: none; }
strong.pie { font-family: KeffeesatzBold, Arial; font-size: 16px;}

header { padding: 5px 0; width: 100%; margin-bottom: 25px; position: fixed; z-index: 10; float: left; }

#contentcontainer {width: 100%; margin: 0 auto; position: relative;  float: none; padding-top: 0px; }

/*--------------------------SECCIONES----------------------*/
section { margin-bottom: 0px; float: left; }

/*--------------------------------------------------INDEX-------------------------------------------------------*/
/*--------------------------INICIO----------------------*/
#intro  { background:#fff;width:100%; padding: 0;}
#intro h2 a { padding-bottom: 0px; }
#intro div.logo{ position:absolute; left:50px; z-index:200; padding-top:50px;}
#intro div.menu-tec{ position:absolute; z-index:200; float:right; right:50px; padding-top:50px;}
/*--------------------------Servicios----------------------*/
.hexagon {
  position: relative;
  width: 280px; 
  height: 161.66px;
  background-color:#F90;
  margin: 80.83px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 140px solid transparent;
  border-right: 140px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 80.83px solid #F90;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 80.83px solid #F90;
}
#serv { background:#003; padding-top: 80px;padding-bottom: 10%; width:100%;}
#serv div.txto{position:relative; left:50%; width: 900px; margin-left:-450px; padding-bottom:60px;}
#serv h2 {font-size: 66px; color: #fff; height: 105px;}
#serv p {color:#FFF; text-align:center; font-size:18px;}
#serv ul.work {position:relative; left:50%; width: 900px; margin-left:-450px;}
#serv ul.work li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }
#serv ul.work2 {position:relative; left:50%; width: 600px; margin-left:-300px;}
#serv ul.work2 li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }
/*-------------------------- Frases----------------------*/
#tips {  background: url(../img/bgp1.jpg) no-repeat center center scroll; -webkit-background-size: cover;
    		-moz-background-size: cover; -o-background-size: cover; background-size: cover; width:100%; padding-top: 50px;padding-bottom:400px;}
#tips h2 {padding-left: 50px;font-size: 66px; color: #fff; height: 105px; float: left;}
#tips h2 strong{font-size: 65px; color: #ccc;}
#tips p {color:#FFF; text-align:justify; font-size:18px; float:left;}
#tips div.tit{ float:left; width:55%;}
#tips div.txto{float:right; padding-right:8%; width:45%;}
/*--------------------------Frases 2----------------------*/
#tip2 { background:#003;width:100%;  padding-top: 80px;padding-bottom: 80px;}
#tip2 h2 { padding-left: 25px; font-size: 66px; color: #fff; height: 105px; float: left;}
#tip2 p {color:#FFF; text-align:center; font-size:52px;}
#tip2 div.txto{float:left; padding:60px 30px; width:45%; background:#09F; margin-left:10%;}
#tip2 div.txto2{float:left; padding:0 30px; height:300px; width:45%; background:#F90;}
#tip2 div.txto2 p{ margin-top:20px;}
#tip2 div.txto3{float:left; margin-left:10%;}
#tip2 table.tabtip{display:none;}
/*--------------------------Proyectos----------------------*/
#proyectos { background:#09F; padding-top: 50px;padding-bottom: 50px; width:100%;}
#proyectos h2 {font-size: 66px; color: #fff; height: 105px; }
#proyectos p {color:#FFF; text-align:justify; font-size:18px;}
#proyectos div.txt{ position:relative; width:1010px; left:50%; margin-left:-505px;}
#proyectos ul.work img {  -webkit-border-radius: 5px; }
#proyectos ul.work { padding: 0; margin: 0; list-style-type: none;}
#proyectos ul.work li {position: relative;float: left;width: 320px; height: 255px;overflow: hidden;margin: 0 15px 10px 0; }
/*#proyectos li:hover .info {display: block;}*/
#proyectos .info {
 display: block;
 position:relative;
 bottom: 200px;
 z-index: 10;
 background: rgba(255,153,0,0.8);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
 width: 280px;
 color: #fff;
 padding: 10px;
}
/*--------------------------logos----------------------*/
#logos { background:#fff;width:100%;  padding-top: 30px;padding-bottom: 30px;}
#logos div.txto{ position:relative; width:95%; left:50%; margin-left:-45%;}
#logos img{ padding:0 10px;}
/*--------------------------Pie----------------------*/
#mapa { width:100%;}
footer { float: left; background:#003; width:100%;padding-top: 5px;}
footer p{ float:right; color:#FFF; padding-right:20px; }
#reds{ float:left; margin-left:5%; z-index:2;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 768px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#intro div.logo{ position:absolute; left:20px; z-index:200; padding-top:20px;}
#intro div.logo img{ width:200px; height:auto; }
#intro div.menu-tec{ position:absolute; z-index:202; float:right; right:20px; padding-top:20px;}
/*--------------------------Servicios----------------------*/
#serv { padding-top: 50px;padding-bottom: 10%;}
.hexagon { position: relative; width: 150px; height: 86.60px; margin: 43.30px 0;}
.hexagon:before,.hexagon:after { content: ""; position: absolute; width: 0; border-left: 75px solid transparent; border-right: 75px solid transparent;}
.hexagon:before { bottom: 100%; border-bottom: 43.30px solid #F90;}
.hexagon:after { top: 100%; width: 0; border-top: 43.30px solid #F90;}
#serv h2 {font-size: 33px; color: #fff; height: 65px;}
#serv ul.work {position:relative; left:50%; width: 500px; margin-left:-250px; } 
#serv ul.work li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }
#serv ul.work2 {position:relative; left:50%; width: 330px; margin-left:-165px;}
#serv ul.work2 li { list-style: none; float: left; margin-left: 15px; margin-bottom: 15px; }
#serv p {color:#FFF; text-align:center; font-size:12px;}
#serv p img{ height:50px; width:auto;}
#serv div.txto{position:relative; left:50%; width: 90%; margin-left:-45%; padding-bottom:60px;}
/*-------------------------- Frases----------------------*/
#tips { padding-top: 30px;padding-bottom:250px;}
#tips h2 {padding-left: 50px;font-size: 40px; color: #fff; height: 60px; float: left;}/*--------------------------Frases 2----------------------*/
#tip2 { background:#003;width:100%;  padding-top: 50px;padding-bottom: 50px;}
#tip2 h2 { padding-left: 25px; font-size: 30px; color: #fff; height: 60px; float: left;}
#tip2 p {color:#FFF; text-align:center; font-size:24px;}
#tip2 div.txto{float:left; padding:34px 15px; width:45%; background:#09F; margin-left:10%;}
#tip2 div.txto2{float:left; padding:0 15px; height:150px; width:45%; background:#F90;}
#tip2 div.txto2 p{ margin-top:20px;}
#tip2 div.txto3{float:left; margin-left:10%;}
#tip2 img{ width:150px; height:auto;}
/*--------------------------------------------------Proyectos------------------------------------------------*/
#proyectos { padding-top: 60px;padding-bottom: 50px; }
#proyectos h2 {font-size: 33px; color: #fff; height: 65px; }
#proyectos p {color:#FFF; text-align:justify; font-size:14px;}
#proyectos div.txt{ position:relative; width:580px; left:50%; margin-left:-290px;}
#proyectos ul.work img {  -webkit-border-radius: 5px; width: 280px; height:auto;}
#proyectos ul.work { padding: 0; margin: 0; list-style-type: none;}
#proyectos ul.work li {position: relative;float: left;width: 280px; height: 230px;overflow: hidden;margin: 0 10px 10px 0; }
/*#proyectos li:hover .info {display: block;}*/
#proyectos .info {
 display: block;
 position:relative;
 bottom: 200px;
 z-index: 10;
 background: rgba(255,153,0,0.8);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50000000,endColorstr=#50000000);
 width: 260px;
 color: #fff;
 padding: 10px;
}
/*--------------------------logos----------------------*/
#logos { padding-top: 10px;padding-bottom: 10px;}
#logos div.txto{ position:relative; width:90%; left:50%; margin-left:-45%; text-align:center;}
#logos img{ padding:0 5px;}

footer { float:none; width:100%; }
footer p{ text-align:center; background:#003;padding: 5px;} 
}

@media all and (max-width: 479px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 479px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#intro div.logo{ position:absolute; left:10px; z-index:200; padding-top:20px;}
#intro div.logo img{ width:150px; height:auto; }
#intro div.menu-tec{ position:absolute; z-index:202; float:right; right:5px; padding-top:5px;}

.hexagon { position: relative; width: 280px; height: 161.66px; background-color:#F90; margin: 80.83px 0;}
.hexagon:before,.hexagon:after { content: ""; position: absolute; width: 0; border-left: 140px solid transparent; border-right: 140px solid transparent;}
.hexagon:before { bottom: 100%; border-bottom: 80.83px solid #F90;}
.hexagon:after { top: 100%; width: 0; border-top: 80.83px solid #F90;}
#serv { padding-bottom: 25%;}  
#serv ul.work {position:relative; left:50%; width: 300px; margin-left:-150px;} 
#serv ul.work li { list-style: none; float: left; margin-left: 7px; margin-bottom: 15px; }
#serv ul.work2 {position:relative; left:50%; width: 300px; margin-left:-150px;}
#serv ul.work2 li { list-style: none; float: left; margin-left: 7px; margin-bottom: 15px; }
#serv p {color:#FFF; text-align:center; font-size:18px;}
#serv p img{ height:120px; width:auto;} 
/*-------------------------- Frases----------------------*/
#tips { padding-top: 20px;padding-bottom:200px;}
#tips h2 {padding-left: 0;font-size: 34px; color: #fff; height:25px; float: left; text-align:center;}
#tips div.tit{ float:left; width:90%; padding-left:5%}
/*--------------------------Frases 2----------------------*/
#tip2 { background:#003;width:100%;padding-top: 50px;padding-bottom: 50px;}
#tip2 p {color:#FFF; text-align:center; font-size:25px; padding:25px 0;}
#tip2 div{display:none;}
#tip2 img.txto4{display:none;}
#tip2 table.tabtip{display:block; position:relative; float:left;left:4%;}

#proyectos div.txt{ position:relative; width:300px; left:50%; margin-left:-150px;}
}