body {margin: 0px 0px 0px 0px;font-family: 'Pathway Gothic One', sans-serif; background-color: #f4f4f4;}

li{list-style: none;}

a{text-decoration: none; }

h1 {font-size: 3em; text-align: center; margin: 0.5em 0em 0.5em 0em;}

h2 {font-size: 2em; text-align: center;}

h3 {font-size: 1.4em; text-align: center; color: rgb(88, 87, 87); margin: 0; font-weight:normal; display: block;}

i {margin-right: 5px;}

img {width: 100%;}

.logo { width:150px; margin: auto;}

.iconos{width: 64px;}



footer{background: black;}

.animacion1 {margin-left: -290px; animation: 6s rotate linear infinite; width: 555px;}



@keyframes rotate {from {transform: rotate(0deg);}

    to {transform: rotate(360deg);}}

@-webkit-keyframes rotate {from {-webkit-transform: rotate(0deg);}

  to {-webkit-transform: rotate(360deg);}}



.cabecera{display: grid; grid-template-columns: 1fr 4fr; background-image: url("../img/banner-web.jpg"); background-repeat: no-repeat; background-size: cover; width: 100%; background-position: center center;}



nav {background: #f4f4f4;}

nav ul{display: flex;flex-wrap: wrap;margin: 0 auto;align-items: center;justify-content: center; }

nav ul li.btn{display: none;}

nav ul li .btn .hide i:before{content: '\f00d';}

nav ul li.items {width: auto;text-align: center;justify-content: center;padding: 15px ;order: 3;}



nav  li.items:hover{background-color:#bebcbc;transition: linear .2s;}



nav ul li.logo{flex: 1;width: 120px;}

nav ul li a {color: black; font-size: 20px;padding: 18px;}

.logo img{width: 100px;}

.productos{display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;text-align: center;}

.item {background-color: white;}

.texto-gris{color:  #707b7c ;margin: 0;margin-bottom: 7px;}

.boton {display: inline-block;text-decoration: none;background: #0D2D66; color: white; line-height: 2.5em; padding: 0 2em;border-radius: 2em; margin-top: -18px;border: none;}



.marcas{background: white;}

.logos{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;grid-gap: 50px;text-align: center;align-items: center;padding: 5em;}





.cata{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;grid-gap: 20px;text-align: center;align-items: center;padding: 2em;}

.cata img{width: 100%;}

 

form {text-align: center; width: 70%; margin: auto; padding: 10px;}

  input{width: 100%;margin-bottom: 15px; padding: 7px; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc;}

  textarea {width: 100%;margin-bottom: 15px; padding: 7px; box-sizing: border-box; border: none; border-bottom: 1px solid #ccc; font-family:sans-serif; }

.formulario {display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; margin-top: 50px; }

.datos {margin: auto;}



.pie {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 20px; color: white; margin-top: 10px;}

.pie li {font-size: 1.2em; margin-bottom: 10px;}

.pie a {text-decoration-line: none; color: #fff;}



.consulta {text-align: center; height: 850px; }



.ficha{background: white; text-align: center;}

.portafolio{display: grid; grid-template-columns: 1fr 1fr 1fr;grid-gap: 10px;}

.descripcion{margin: 0em 2em 0em 2em; text-align: center;}

.articulo p{font-size: 1.5em;}

.btn-anterior {font-size: 1.5em; padding: 12px;}

.btn-anterior a{color: rgb(88, 87, 87);}

.descarga{display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fit, 200px); justify-content: center; grid-auto-rows: 325px;}

.descarga img {width: 100%;}

.descarga a{background-color:#0D2D66;  color: white; padding: 10px 40px 10px 40px; border-radius: 8px; margin-top: 10px; display: inline-block;}



@media (max-width: 1366px){}

@media (max-width: 850px){

    .animacion1 { width: 450px; margin-left: -250px;}

    .cabecera{background-image: url("../img/banner-movil.jpg"); height: 450px; width: 100%;}

    nav {padding: 10px 10px;}

    nav ul li.items {width: 100%; display:none;}

    nav ul li.btn{display: block;}

    nav ul li.items.show{display: block;}

    .productos {grid-template-columns: 1fr 1fr;}

    .pie {grid-template-columns: 1fr 1fr;}

    h3 {font-size: 1em; padding: 5px 30px 5px 30px;}

    .logos{grid-template-columns: 1fr 1fr; padding: 1em;}

    h1{margin-bottom: 0px;}

    h2{font-size: 1.5em;}

    .cata{grid-template-columns: 1fr 1fr 1fr 1fr;}

    .articulo{display: grid; grid-template-columns: 1fr;}

    .articulo p{ font-size: 1em; margin-top: 1em;}

    .portafolio{grid-template-columns: 1fr 1fr;}

}



@media (max-width: 480px){

    .productos{grid-gap: 5px;}

    .cata{grid-gap:5px;}

    .animacion1 { width: 300px; margin-left: -200px;}

    .cabecera{background-image: url("../img/banner-movil.jpg"); height: 300px; width: 100%;}

    .pie {grid-template-columns: 1fr;}

    h3 {font-size: 0.8em; padding: 5px 20px 5px 20px;}

    .logos{grid-template-columns: 1fr 1fr; padding: 0.5em;}

    h1{margin-bottom: 0px; font-size: 2em;}

    h3 {font-size: 1.2em;}

    .cata{grid-template-columns: 1fr 1fr; padding: 5px;}

    .formulario{grid-template-columns: 1fr;}

    form {width: 95%;}

    .consulta {height:900px;}

    .productos .boton{line-height: 2em; padding: 0 1em;}

    .descarga{grid-template-columns: repeat(auto-fit, 160px); grid-auto-rows: 280px;}

    .descarga a{padding: 10px 20px 10px 20px;}

    

    

}