@media all and  (max-width: 1280px)
{

}
@media all and  (max-width: 1050px), all and (max-width: 1195px)
{

@media all and  (max-width: 1024px)
{

}
@media all and  (max-width: 979px)
{

}
@media all and  (max-width: 880px)
{

}

@media all and  (max-width: 820px)
{

}

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

}

@media all and  (max-width: 768px)
{

}

@media all and  (max-width: 670px)
{
    
}

@media all and  (max-width: 640px)
{
   #llamada #inge {z-index: 2;    max-width: 230px;
    bottom: -158px;display: none;
}
}

@media all and (max-width: 580px)
{

}
@media all and (max-width: 376px)
{
    .margenBanner .navbar .menu {display: none;}
    .margenBanner .navbar .responsivo{display: block;}
    .margenBanner .navbar .menu li {display: block;}
    .margenBanner .navbar .menu li.separacion{display:none;}
    #header .encabezado .columna {float: none;width: 100%;}
    #header .encabezado .columna .datos {text-align: center;}
    #header .encabezado .columna {min-height: 60px;}
    #header .encabezado .columna #logotipo {bottom: 1%;left: 20%;max-width: 225px;}
    #header .encabezado .columna .datos #contacto {background-position: center bottom;}
    .margenBanner .navbar .menu {width: 100%;list-style: none;    padding-bottom: 5px;top:38px;z-index: 999;position: absolute;background: #1ca9e2;}
    .margenBanner .navbar .menu li {padding: 5px 10px;}
    .margenBanner .navbar .menu li:hover{background: #ffbc00;color: #fff;}
    .margenBanner .navbar .menu li:hover a{color: #fff;}


    .margenBanner .banner .contenido h2 {font-size: 1.7em;padding-left: 8px;}
    .margenBanner .banner .contenido h1 {font-size: 2em;padding-left: 8px;}

    #datos .contenido .dato {
    width: 100%;
    float: none;}

    #hacemos .contenido p {padding: 20px 0;}

    #llamada{
            min-height: 425px;
    width: 100%;
    background: url("../images/backgroundLlamada.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    }
    #llamada h1 {font-size: 2.5em !important;
    z-index: 8;position: relative;    padding-top: 0%;}
  #datos .contenido {padding: 10px 0;}
  #datos {min-width: 300px;}
#proyectos {min-height: 480px;}


.margenBanner .banner .form-contacto {  position: relative;
    margin: 0 auto;top:100px;}

#hacemos .servicios .servicio {float: none; width: 100%;    padding-bottom: 10px;}
#hacemos .servicios {width: 100%;}



#hacemos .servicios .servicio .box{width: 90%;margin: 0 auto;position: relative;overflow: hidden;height: 100%; min-height: 300px;}


#hacemos .servicios .servicio .box img{position: relative;left: 0;  -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;
  -ms-transition: all 300ms ease-out;transition: all 300ms ease-out;width: 100%;height: 300px;}
#hacemos .servicios .servicio .box .overbox {opacity: .8; }
#hacemos .servicios .servicio .box .overbox a{color: #fff; text-decoration: none;width: 45px;  height: 45px;position: relative;
    border: 2px solid #fff;border-radius: 50%;padding: 2% 6%;}
#hacemos .servicios .servicio .box:hover .overbox {background-color: #00294c;position: absolute;top: 0;left: 0;color: #fff;z-index: 100;
  -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;
  transition: all 300ms ease-out;opacity: 0;  width: 100%;height: 100%;text-align: center;}

#hacemos .servicios .servicio .box .overtext{ -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;transition: all 300ms ease-out;transform: translateY(40px);-webkit-transform: translateY(40px);}

#hacemos .servicios .servicio .box .title {top: 32%;position: relative;opacity: 1;  transform: translateY(0px); -webkit-transform: translateY(0px);}

#hacemos .servicios .servicio .box:hover .title,.box:focus .title {font-size: 2.5em;text-transform: uppercase;opacity: 0;transition-delay: 0.1s;transition-duration: 0.2s;
        font-family: 'Arial',sans-serif;font-size: 3em;}
#hacemos .servicios .servicio .box .tagline {opacity: 1;transform: translateX(0px);-webkit-transform: translateX(0px);}
#hacemos .servicios .servicio .box:hover .tagline,.box:focus .tagline {top: 40%;position: relative;font-size: 1.2em; font-family: 'Raleway',sans-serif; opacity: 0;transition-delay: 0.2s;transition-duration: 0.2s;}

/*#hacemos .servicios .servicio .box .overbox a {padding: 0% 4%;}
#hacemos .servicios .servicio .box {margin: 0 auto;}
#hacemos .servicios .servicio .box:hover .overbox {opacity: 0;}
#hacemos .servicios .servicio .box .overbox {opacity: .8;}
#hacemos .servicios .servicio .box .title {opacity: 1;}
#hacemos .servicios .servicio .box:hover .title,.box:focus .title {opacity: 0;}
#hacemos .servicios .servicio .box .tagline {opacity: 1;}
#hacemos .servicios .servicio .box:hover .tagline,.box:focus .tagline {opacity: 0;}
#hacemos .servicios .servicio .box .tagline {top: 25%;}
#hacemos .servicios .servicio .box .overbox a {top: 67px}*/

#datos .datos {min-height: 780px;}
#somos .contenido p { padding: 1% 4%;
    text-align: justify;
}
#llamada #logotipo {max-width: 320px !important;
    position: relative;
    z-index: 4;padding: 10px 10px 14% 10px;}
    #llamada #inge {z-index: 2;    max-width: 230px;
    bottom: -158px;display: none;
}

    #llamada a {position: relative;z-index: 10;    left: 8%;}
#llamada a {padding: 10px 40px;}
.clearfix {
    display: none;}
    #proyectos .contenido {
    text-align: center;
    padding-bottom: 10%;
}
    .modal-contacto .formulario form .campo1 {
    width: 100%;
    float: none;}
    .modal-contacto .formulario form .campos .formCampo {
    width: 90%;}
    .modal-contacto .formulario form .campos .formCampoTA {
    width: 89.5%;}
    .outer-box {border-radius: 50%;width: 100%;height: auto;display: block;position: relative;
    margin: 0px;background: black;max-width: 280px;min-height: 280px;}

    #datos .datos {
    background: url("../images/backgroundDatosmovil.jpg");
    background-repeat: repeat-y;
    background-position: 0 0;
    background-size: contain;}

    .modal-contacto .formulario p.texto {padding: 4px;margin: 5px 5px;font-size: .9em;}
    .modal-contacto .formulario h3 {margin:15px 0 0px 0; padding: 0;}
    .modal-contacto .formulario form .campo1 {padding-bottom: 12px;}
    .modal-contacto .formulario form .campos .campo2 textarea {
    height: 70px;}
    .outer-box .inner-box p {top:43%;}
    #header .encabezado {min-height: 140px;}
    #header .encabezado .columna .datos #telefono {font-size: 1em;}
    .margenBanner .banner .form-contacto .form .campoBoton input.boton {padding: 12px 108px;}
}

@media all and (max-width: 320px)
{

}