* { 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%; background-color: #09f; margin-bottom: 20px; -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); position: fixed; z-index: 10; float: left; }
#headercontainer{ width: 90%; margin: 0; position: relative; }
#contentcontainer {width: 100%; margin: 0 auto; position: relative;  float: none; padding-top: 0px; }

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

/*--------------------------------------------------Header--------------------------------------------------*/
#headercontainer div.logo{position:absolute; left:50px;}
#headercontainer div.menu-tec{position:relative; z-index:200; float:right; }

/*--------------------------------------------------Servicios--------------------------------------------------*/
#servicios { background:#003; width:100%; padding-top: 120px;padding-bottom: 50px;}
#servicios h2 {font-size: 66px; color: #fff; height: 105px;}
#servicios p {color:#FFF; text-align:justify; font-size:18px; padding:5px 0;}
#servicios img { float:left; padding-right:10px;}
#servicios div.tit{ float:left; padding-left:5%; width:40%;}
#servicios div.txto{ float:right; padding-right:5%; width:40%;} 
#servicios ul li { list-style: none; float: left; margin-bottom: 15px;}

/*--------------------------Servicios2----------------------*/
.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:#09f; 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; }

/*--------------------------------------------------Proyectos------------------------------------------------*/
#proyectos { background:#003; padding-top: 120px;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;
}
/*---------------------------------------------Contactos-----------------------------------------------------*/
#contacto { background:#003; padding-top: 120px;padding-bottom: 50px; width:100%;}
#contacto h2 {font-size: 66px; color: #fff; height: 105px; }
#contacto p { padding: 10px 0 10px 40px;color:#FFF; text-align:justify; font-size:18px; }
#contacto p strong{ float:left; padding-bottom:30px; padding-right:5px;}
#contacto div.txto{float:left; padding-left:10%; width:75%;}
/*--------------------------Contactos----------------------*/
#formcont { background:#09f; padding-top: 80px;padding-bottom: 10%; width:100%;}
#formcont div.txto{position:relative; left:50%; width: 900px; margin-left:-450px;}
#formcont textarea { width: 860px; height: 300px; font-family:Arial, Helvetica, sans-serif;}
#formcont label { color: #fff; font-size:24px;} 
#formcont strong { color: #fff; }
#formcont input,textarea {background:#fff; padding: 10px; color: #000; font-size: 25px; border:0;  margin-bottom: 15px; margin-top: -10px; }
#formcont input:hover,textarea:hover { background:#fff; border: 1px solid #003;  margin-bottom: 15px; margin-top: -10px;}
#formcont input:focus,textarea:focus {border: 1px solid #003; margin-bottom: 15px; margin-top: -10px;padding: 8px;}
#formcont input[type="text"] { width: 250px; padding-right:30px;}
#formcont input[type="submit"] {  float:right; color:#000; font-size:14px;cursor: pointer; padding:8px 15px; margin-right:20px;}
input[type="submit"]:active { float:right; color:#fff; font-size:18px;cursor: pointer; padding:8px 15px; margin-right:20px;}




/*--------------------------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) {
#headercontainer{ width: 100%; }
#headercontainer div.logo{position:absolute; left:10px;}	
#headercontainer div.logo img{ height:30px; width:auto;}
/*--------------------------------------------------Servicios--------------------------------------------------*/
#servicios { background:#003; width:100%; padding-top: 60px;padding-bottom: 50px;}
#servicios h2 {font-size: 33px; color: #fff; height: 65px;}
#servicios p {font-size:12px;}
#servicios p.hos {font-size:11px;}
#servicios img { float:left; padding:0 5px 25px 0; width:80px; height:auto;}
#servicios div.tit{ float:left; padding-left:5%; width:40%;}
#servicios div.txto{ float:right; padding-right:5%; width:40%;}
#servicios ul li { height:110px; }
/*--------------------------Servicios2----------------------*/
.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;}
/*--------------------------------------------------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;
}
/*---------------------------------------------Contactos-----------------------------------------------------*/
#contacto {padding-top: 60px;padding-bottom: 50px; } 
#contacto h2 {font-size: 33px; color: #fff; height: 65px; }
#contacto p { padding: 10px 0 10px 20px;color:#FFF; text-align:justify; font-size:14px; }
#contacto p strong{ float:left; padding-bottom:30px; padding-right:3px;}
#contacto div.txto{float:left; padding-left:5%; width:85%;}
/*--------------------------Contactos----------------------*/
#formcont { background:#09f; padding-top: 80px;padding-bottom: 10%; width:100%;}
#formcont div.txto{position:relative; left:50%; width: 80%; margin-left:-40%;}
#formcont textarea { width: 90%; height: 200px; font-family:Arial, Helvetica, sans-serif;}
#formcont label { color: #fff; } 
#formcont strong { color: #fff; }
#formcont input,textarea {background:#fff; padding: 10px; color: #000; font-size: 25px; border:0;  margin-bottom: 15px; margin-top: -10px }
#formcont input:hover,textarea:hover { background:#fff; border: 1px solid #003;  margin-bottom: 15px; margin-top: -10px;}
#formcont input:focus,textarea:focus { border: 1px solid #003; margin-bottom: 15px; margin-top: -10px;padding: 8px;}
#formcont input[type="text"] { width: 87%; padding-right:30px;}
#formcont input[type="submit"] {  float:right; color:#000; font-size:14px;cursor: pointer; padding:8px 15px;margin-right:30px;}
input[type="submit"]:active { float:right; color:#000; font-size:18px;cursor: pointer; padding:8px 15px;margin-right:30px;}

}

@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) {
#servicios div.tit{ float:left; padding-left:5%; width:90%;}
#servicios div.txto{float:left; padding-left:5%; width:90%; padding-top:0;}
#servicios img { width:120px; height:auto; padding: 0 5px 0 0;}
#servicios ul li { height:auto;}#servicios p {font-size:13px;}
#servicios p.hos {font-size:12px;}
.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;}

#proyectos div.txt{ position:relative; width:300px; left:50%; margin-left:-150px;}
#contacto div.txto{ width:90%;}
#contacto p { padding-bottom:20px; font-size:12px; padding-left:5px;}
#contacto p strong{ float:left; padding-bottom:40px; padding-right:3px;}
#formcont input[type="text"] { width: 82%;}
#formcont input[type="submit"] { margin-right:5px;}
input[type="submit"]:active { margin-right:5px;}
}