*{
    margin: 0; padding: 0; box-sizing: border-box;
}
body {
    font-family: 'Lato', sans-serif; color: #2c2c2c; font-size: 14px; overflow-x: hidden;
}
ul{
    padding: 0px; margin: 0px; list-style: none;
}
a{
    color: inherit; text-decoration: none; cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0; padding: 0; font-weight: 500;
}
h1, h2, h3, h4 {
    font-family: 'Fjalla One', sans-serif;
}
.hide {
    display: none;
}
.phone-movil {
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
    background: #ff7800; width: 50px; height: 50px; display: none; position: fixed;
    right: 3%; bottom: 3%; border-radius: 50%; z-index: 10; text-align: center;
    line-height: 60px;
}
.phone-movil i{
    font-size: 30px; color: #fff;
}
.phone-movil:hover{
    background: #c35c00;
}
#container {
    padding: 0 0 0 200px;
}
.btn-big {
    background: rgba(0, 0, 0, 0.5); padding: 20px 100px; border-bottom: 3px solid #ff7800; color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 18px;
    font-family: 'Fjalla One', sans-serif; display: inline-block;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
    cursor: pointer;
}
.btn-big:hover {
    background: #ff7800;
}
.btn {
    font-size: 14px; text-transform: uppercase; font-family: 'Fjalla One', sans-serif; color: #ff7800;
    position: absolute; bottom: 35px; border-bottom: 3px solid #2c2c2c; cursor: pointer;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.btn:hover {
    border-bottom: 3px solid #ff7800;
}
.btn:focus, .btn:visited, .btn:active  {
    outline: none;
}
/*ICONO TOGGLE*/
.toggleIcon {
    width: 0.8em;
    height: 0.8em;
    left: 0;
    top: 5px;
    position: absolute;
}
.toggleIcon::before, .toggleIcon::after {
  content: '';
  position: absolute;
  background: #ff7800;
  -webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
          transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
}
.toggleIcon::before {
  width: 2px;
  height: 100%;
  left: calc(50% - 2px);
  margin-left: 1px;
}
.toggleIcon::after {
  width: 100%;
  height: 2px;
  top: calc(50% - 1px);
}
.iconactive .toggleIcon::before {
  opacity: 0;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  text-shadow: 0 0 3px #333;
}
.iconactive .toggleIcon::after {
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
/********** BURGER **********/
.burger-container {
    display: block; width: 100%; cursor: pointer;
}
.burger{
    position: relative; z-index: 30; width: 40px; margin: 0 auto; height: 42px;
    display: inline-block; cursor: pointer;
 }

.burger-brick {
    height: 4px; background: #fff;  margin-top: 7px; border-radius: 3px; -webkit-transition: 0.3s ease-out;
    -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out;
    transition: 0.3s ease-out;
}
.open .burger-brick:first-child {
    -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg); transform: rotate(45deg);margin-top: 15px;  background-color:#ff7800;
 }
.open .burger-brick:last-child {
    -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg); transform: rotate(-45deg); margin-top: -15px; background-color: #ff7800;
}
.open .middle {
    -webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0); background-color: #ff7800;
 }

.burger{
    transition: .3s all ease-in-out; -webkit-transition: .3s all ease-in-out; -moz-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out; -ms-transition: .3s all ease-in-out; cursor: pointer;
 }
.open .middle {
    -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);
}
.show {
    opacity: 1; left: 200px;
}
/*NAVEGACION*/
.nav-container {
    max-width: 640px; background: #fff; position: relative; z-index: 100;
}
.nav-barleft {
    height: 100vh;  position: fixed;
}
.nav-barleft-gray {
    position: relative; background: #2c2c2c; width: 200px; text-align: center; height: 100%; z-index: 10;
}
.nav-barleft-gray img{
    width: 78%; padding: 30px 0;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.redes i {
    color: #fff; font-size: 25px; display: block; padding: 15px 0; cursor: pointer;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
.redes i:hover {
    color: #ff7800;
}
.redes {
    margin: 100px 0 0;
}
.redes .fa-mobile {
    font-size: 40px;
}
/*NAV RIGHT*/
nav {
    position: absolute; left: -440px; width: 440px; top: 0; font-size: 14px; height: 100%; background: #fff;
    padding: 20px 0 20px 90px; opacity: 0; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.12); overflow: hidden;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
nav h6 {
    font-family: 'Fjalla One', sans-serif; font-size:14px; opacity: 0.7; margin: 50px 0 0; letter-spacing: 1px;
}
nav ul {
    margin: 30px 0;
}
nav ul li {
    font-family: 'Fjalla One', sans-serif; font-size: 30px; color: #232421; line-height: 50px; position: relative; cursor: pointer; z-index: 1;
}
nav ul li:before {
    content: ''; width: 20px; height: 15px; background: #ff7800; position: absolute; right:-20px; top: 50%; transform: translateY(-50%); opacity: 0;
    -webkit-transition: 0.3s ease-out;  -moz-transition: 0.3s ease-out;-ms-transition: 0.3s ease-out;-o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
nav ul li:hover:before {
    right: 0; opacity: 1; width: 80px;
}
.visitanos {
    letter-spacing: 1px; opacity: 0.7; padding-right: 90px;
}
.visitanos p {
     margin: 0 0 15px;
}
.visitanos a {
    border-bottom: 1px solid #ff7800;
}
/*CONTAINER*/
.row {
    max-width: 1400px; margin: 0 auto; width: 90%;
}
/*FOOTER*/
footer {
    background: #000; display: table; width: 100%; position: relative; z-index: 1;
}
.footer-container {
    color: #fff; padding: 60px 0; display: table;
}
.footer-container h4{
    font-size: 20px; text-transform: uppercase; margin-bottom: 15px;
}
.col {
    float: left;
}
.mapa-sitio {
    width: 14%;
}
.ponte-contacto {
    width: 20%;
}
.redes-footer {
    width: 14%;
}
.opacity-70 {
    opacity: 0.7; font-size: 13px;
}
.opacity-70 h1 {
    font-size: 13px; font-family: 'Lato', sans-serif;
    line-height: 140%; padding-right: 10px;
}
.mapa-sitio ul li {
    padding: 3px 0;
}
.redes-footer .fa {
    font-size: 20px; margin-right: 10px;
}
.ponte-contacto p {
    line-height: 160%;
}
.ponte-contacto p:last-child{
    margin-top: 20px;
}
.sucribirse {
    width: 25%;
}
.sucribirse input[type='checkbox'] {

}
.sucribirse .check {
    margin-top: 10px; color: #b2b2b2; font-size: 13px;
}
.sucribirse form {
    position: relative;
}
.sucribirse input[type='email'] {
    appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */
    border: 1px solid #fff; width: 100%; background: transparent;
    height: 40px; color: #fff; padding: 0 110px 0 10px;
}
.sucribirse input[type='submit'] {
    appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */
    height: 40px; border: none; background: #5b5b5b; color: #fff; text-transform: uppercase;
    font-family: 'Fjalla One', sans-serif; font-size: 16px; position: absolute;
    top:0; right: 0; width: 100px; border: 1px solid #fff;
}
.aviso-privacidad {
    margin: 70px 0 0; padding-left: 40px;
}
.aviso-privacidad p {
    margin-bottom: 15px;
}

/*NUESTROS CLIENTES*/
.nuestros-clientes-wrap {
    background: #000; padding: 50px 0;
}
.nuestros-clientes-container .owl-theme .owl-nav{
    display: none;
}
.nuestros-clientes-container h2 {
    font-size: 48px; color: #ff7800; text-align: center; text-transform: uppercase; letter-spacing: 7px;
    margin-bottom: 20px;
}
.logotipo-clientes {
    background-size: contain; background-repeat: no-repeat; background-position: center;
    width: auto; height: 145px;
}
/* PARSLEY */
.parsley-required, .parsley-type {
    color: rgba(255, 0, 0, 0.63); font-size: 11px;
}
/*============ MOVIL ===============*/
@media screen and (max-width: 1500px){
    /*NAV*/
    #container {padding: 0 0 0 170px;}
    .nav-barleft-gray {width: 170px;}
    .show {left: 170px;}
    nav {width: 400px; padding: 20px 0 20px 60px;}
    .visitanos {padding-right: 60px;}
    nav ul li {font-size: 25px; line-height: 45px;}
    nav h6 {font-size: 13px;}

}
@media screen and (max-width: 1300px){
    /*NAV*/
    #container {padding: 0 0 0 150px;}
    .nav-barleft-gray {width: 150px;}
    .show {left: 150px;}
    nav {width: 380px; padding: 20px 0 20px 50px;}
    .visitanos {padding-right: 50px;}
    nav ul li {line-height: 40px;}
    /*FOOTER*/
    .mapa-sitio {display: none}
    .sucribirse {width: 35%;}
}
@media screen and (max-width: 1200px){
    /*NAV*/
    #container {padding: 0 0 0 115px;}
    .nav-barleft-gray {width: 115px;}
    .show {left: 115px;}
}
@media screen and (max-width: 1100px){
    /*FOOTER*/
    .ponte-contacto {display: none}
    .redes-footer {width: 20%;}
}
@media screen and (max-width: 1000px){
    .phone-movil  {display: block;}
    /*NAV*/
    #container {padding:60px 0 0;}
    .redes{display: none;}
    .nav-container {max-width: 100%; width: 100%; position: fixed;}
    .nav-barleft-gray {width: 100%; display: table; text-align: inherit;}
    .nav-barleft {width: 100%; position: relative; height: auto;}
    .nav-barleft-gray img {max-width: 120px; padding: 5px 0; left: 5%; position: relative; }
    .show {left: 0; }
    nav {top: 60px;height: 100%; min-height: 100%; max-height: 100%; position: fixed; overflow-y: auto; padding-bottom: 100px; width: 50%;}
    .burger-container {display: inline-block; width: auto; position: absolute; right: 25px; top: 54%; transform: translateY(-50%);}
    nav h6 {display: none;}
    /*FOOTER*/
    .sucribirse {width: 50%;}
    .aviso-privacidad {width: 30%;}
    .footer-container {padding: 40px 0;}
}
@media screen and (max-width: 850px){
    /*NAV*/
    #container {padding:60px 0 0;}

    /*FOOTER*/
    .aviso-privacidad {width: 100%; margin: 20px 0 0; padding-left: 0px;}
    .redes-footer {width: 40%;}
}
@media screen and (max-width: 650px){
    /*NAV*/
    nav {top: 48px; width: 75%; min-width: 290px; padding: 20px 0 20px 30px; }
    #container {padding:48px 0 0;}
    .burger-container {top: 54%;}
    .nav-barleft-gray img {max-width: 95px;}
    /*FOOTER*/
    .sucribirse {width: 70%;}
    .redes-footer {width: 30%;}
}
@media screen and (max-width: 500px){
    /*FOOTER*/
    .redes-footer{width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.44); margin-bottom: 15px;}
    .redes-footer h4 {display: inline-block;}
    .redes-footer .opacity-70 {float: right;}
    .redes-footer br {display: none;}
    .sucribirse br {display: none;}
    .redes-footer .fa {font-size: 25px;}
    .sucribirse {width: 100%;}
    .aviso-privacidad {margin: 40px 0 0;}
}