/* Welcome to Compass. In this file you should write your main styles. (or centralize your imports) Import this file using the following HTML or equivalent: <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; }

body { font-family: 'Roboto', Verdana, Arial, sans-serif; }

a { color: #4d4d4d; text-decoration: none; }

p { font-size: 14px; font-weight: 300; line-height: 1.6; margin-bottom: 20px; }
p.strong { font-size: 18px; font-weight: 500; }

.fl { float: left; }

.fr { float: right; }

.clear { clear: both; }

.msj { border: 1px solid; font-size: 13px; display: none; margin: 20px 0; padding: 8px 35px 8px 14px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.msj.success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
.msj.error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
.msj.info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; }

.wrapper { margin: 0 auto; width: 1170px; }

#hideMenu { position: fixed; top: -90px; right: 0; width: 100%; z-index: 99; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#hideMenu .ico { border-radius: 50%; background: #fe0083; cursor: pointer; height: 50px; padding: 15px 0 0 10px; position: absolute; top: 20px; right: 20px; width: 50px; z-index: 2; }
#hideMenu .ico span { background: #FFF; display: block; height: 4px; margin-bottom: 3px; width: 30px; }
#hideMenu ul { background: rgba(0, 0, 0, 0.8); display: none; height: 90px; width: 100%; }
#hideMenu ul li { float: left; text-align: center; width: 25%; }
#hideMenu ul li a { color: #FFF; display: block; height: 90px; line-height: 90px; }
#hideMenu.view { top: 0; }

header { background: url(../images/banner-bg.jpg) no-repeat; background-size: auto 550px; color: #FFF; height: 550px; padding-top: 30px; position: relative; text-align: center; text-transform: uppercase; width: 100%; }
header #logo { background: url(../images/logo.png) no-repeat; display: inline-block; height: 133px; margin-bottom: 25px; text-indent: -9999px; width: 133px; }
header nav { color: #FFF; font-size: 14px; }
header nav a { color: #FFF; display: inline-block; margin: 0 5px; }
header nav a.fb { background: url(../images/facebook.png) no-repeat; height: 15px; text-indent: -9999px; width: 7px; }
header nav a.tw { background: url(../images/twitter.png) no-repeat; height: 15px; text-indent: -9999px; width: 11px; }
header nav a.ig { background: url(../images/instagram.svg) no-repeat; height: 18px; text-indent: -9999px; width: 18px; position: relative; top: -2px; }
header h1 { font-size: 30px; font-weight: 900; margin-top: 130px; }
header h2 { font-size: 18px; font-weight: 300; margin-top: 10px; }

.arrowDown { background: url(../images/arrow-down.png) no-repeat; background-size: 100% 100%; bottom: 0; height: 47px; left: 0; position: absolute; width: 100%; z-index: 9; }

.arrowUp { background: url(../images/arrow-up.png) no-repeat; background-size: 100% 100%; height: 47px; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }

section h1 { font-size: 30px; font-weight: 900; text-transform: uppercase; }
section .hB { margin: 10px 0; overflow: hidden; }
section .hB span { border-radius: 50%; float: left; height: 6px; margin-right: 5px; width: 6px; }
section .hB span.c { background: #009bdb; }
section .hB span.m { background: #fe0083; }
section .hB span.y { background: #feee00; }
section .hB span.k { background: #211915; }

.lines { clear: both; height: 7px; width: 100%; }
.lines span { float: left; height: 7px; width: 25%; }
.lines span.c { background: #009bdb; }
.lines span.m { background: #fe0083; }
.lines span.y { background: #feee00; }
.lines span.k { background: #211915; }

#nosotros { overflow: hidden; padding: 120px 0; }
#nosotros img.fr { margin-left: 20px; }

#servicios { background: url(../images/products_header_original.jpg) no-repeat center center #FFF; background-size: 100%; overflow: hidden; }
#servicios .wrapper { overflow: hidden; padding: 100px 0; }
#servicios .wrapper #boxs { float: left; width: 735px; }
#servicios .wrapper #boxs .box { background: #FFF; float: left; height: 240px; margin: 0 5px 5px 0; overflow: hidden; padding: 15px; text-align: center; width: 240px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#servicios .wrapper #boxs .box img { margin-top: 60px; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#servicios .wrapper #boxs .box h3 { font-size: 13px; font-weight: 900; margin-top: 15px; text-transform: uppercase; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#servicios .wrapper #boxs .box .line { background: #fe0083; display: inline-block; height: 1px; margin: 10px 0; width: 130px; }
#servicios .wrapper #boxs .box p { font-size: 12px; opacity: 0; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#servicios .wrapper #boxs .box:hover { background: #211915; }
#servicios .wrapper #boxs .box:hover h3, #servicios .wrapper #boxs .box:hover p { color: #FFF; opacity: 1; }
#servicios .wrapper #boxs .box:hover img { margin-top: 10px; }
#servicios .wrapper article { float: right; overflow: hidden; padding-left: 30px; width: 420px; }

#galeria-de-trabajos { padding: 50px 0; text-align: center; }
#galeria-de-trabajos .hB span { float: none; display: inline-block; }
#galeria-de-trabajos #boxsDiamonds, #galeria-de-trabajos #boxsDiamonds2 { margin: 0 auto; max-width: 1200px; overflow: hidden; padding: 50px 0 135px; }
#galeria-de-trabajos #boxsDiamonds .box, #galeria-de-trabajos #boxsDiamonds2 .box { position: relative; }
#galeria-de-trabajos #boxsDiamonds .box img, #galeria-de-trabajos #boxsDiamonds2 .box img { position: relative; z-index: 1; }
#galeria-de-trabajos #boxsDiamonds .box a, #galeria-de-trabajos #boxsDiamonds2 .box a { background: rgba(0, 0, 0, 0.7); color: #feee00; display: block; font-size: 120px; font-weight: 900; height: 100%; left: 0; line-height: 250px; position: absolute; top: 0; opacity: 0; width: 100%; z-index: 2; transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; }
#galeria-de-trabajos #boxsDiamonds .box a:hover, #galeria-de-trabajos #boxsDiamonds2 .box a:hover { opacity: 1; }
#galeria-de-trabajos #boxsDiamonds2 .box { display: block; height: 200px; margin: 0 auto 100px; overflow: hidden; width: 200px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); }
#galeria-de-trabajos #boxsDiamonds2 .box img { left: -42px; position: absolute; top: -42px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); }
#galeria-de-trabajos #boxsDiamonds2 .box a { height: 282px; left: -42px; top: -42px; width: 282px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); }

#contacto { overflow: hidden; }
#contacto .contMap { margin-bottom: 50px; position: relative; }
#contacto .contMap #map { height: 460px; width: 100%; }
#contacto .tit { text-align: center; }
#contacto .tit .hB { margin: 0 0 30px; }
#contacto .tit .hB span { float: none; display: inline-block; }
#contacto .datta { float: right; width: 370px; }
#contacto .datta div { border-bottom: 1px solid #cdcdcd; font-size: 14px; line-height: 1.4; padding: 10px 0 10px 50px; width: 100%; }
#contacto .datta div.map { background: url(../images/data1.png) no-repeat 0 center; }
#contacto .datta div.phone { background: url(../images/data2.png) no-repeat 0 center; }
#contacto .datta div.mail { background: url(../images/data3.png) no-repeat 0 center; }
#contacto form { float: left; width: 750px; }
#contacto form .w50 { float: left; width: 50%; padding-right: 10px; }
#contacto form .w50:last-child { padding-left: 10px; padding-right: 0; }
#contacto form label { font-size: 14px; font-weight: 500; line-height: 1.4; }
#contacto form input[type="text"], #contacto form input[type="email"], #contacto form textarea { border: 1px solid #e3e8eb; font-family: inherit; height: 40px; margin-bottom: 10px; padding: 0 10px; width: 100%; }
#contacto form textarea { height: 175px; padding: 10px; }
#contacto form input[type="submit"] { background: #278dc5; border: none; color: #FFF; font-family: inherit; font-weight: 500; padding: 0 30px; text-transform: uppercase; height: 41px; }

footer { background: #e5e5e5; border-top: 10px solid #d8d8d8; color: #808080; font-size: 11px; margin-top: 50px; overflow: hidden; padding: 30px 0; }
footer .fl img { margin-bottom: 10px; }
footer .fr { text-align: right; }
footer .fr img { margin-top: 10px; }

@media screen and (max-width: 1024px) { .wrapper { width: 100%; }
  #nosotros { padding-left: 20px; padding-right: 20px; }
  #nosotros img.fr { width: 50%; }
  #servicios .wrapper { padding-left: 20px; padding-right: 20px; }
  #servicios .wrapper article { margin-bottom: 30px; padding-left: 0; width: 100%; }
  #servicios .wrapper #boxs { text-align: center; width: 100%; }
  #servicios .wrapper #boxs .box { float: none; display: inline-block; }
  #contacto .wrapper, footer .wrapper { padding-left: 20px; padding-right: 20px; }
  #contacto .datta { width: 35%; }
  #contacto form { width: 60%; } }
@media screen and (max-width: 768px) { #contacto .datta, #contacto form { width: 100%; }
  #contacto .datta { margin-bottom: 30px; }
  #hideMenu ul { width: 88%; } }
/* Nokia Lumia 520 */
@media screen and (max-width: 533px) { #contacto form .w50, #contacto form .w50:last-child { padding: 0; width: 100%; }
  footer .fl, footer .fr { text-align: left; width: 100%; }
  footer .fr { margin-top: 20px; }
  #hideMenu ul { height: auto; overflow: hidden; width: 100%; }
  #hideMenu ul li { width: 100%; }
  #hideMenu ul li a { height: auto; line-height: 1; padding: 15px 0; } }
/* iPhone 4 */
@media screen and (max-width: 480px) { #nosotros img.fr { display: none; } }
/* iPhone 6 Plus */
@media screen and (max-width: 414px) { header h1 { margin-top: 70px; }
  header nav a { margin-bottom: 10px; } }
/* iPhone 6 */
@media screen and (max-width: 375px) { #servicios .wrapper #boxs { max-width: 100%; } }
/* iPhone 4 */