/*MEDIA QUERIES*/
@media screen and (max-width:1730px){
       /*NAVBAR*/
       nav #navbar ul.navbar-nav li.nav-item {
              width: 200px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 21px;
       }
       /*Catalogo + slogan + empresa*/
       nav #navbar ul.navbar-nav li.nav-item-catalogue{
              width: 250px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a,
       article.slogan h1,
       main .company h3.title{
              font-size: 26px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a img{
              padding: .2rem 2.4rem;
       }


       /*INDEX*/
       section.slide{
              border-bottom: .5rem solid #3e8bc0;
              border-top: .5rem solid #3e8bc0; 
       }
       /*empresa*/
       main .company .description p{
              font-size: 23px;
       }
       /*clientes + contacto*/
       main .customers .title h3,
       section.contact .form-part-1 .title h3{
              font-size: 28px;
       }
       /*contacto*/
       section.contact .form button[type="submit"] {
              font-size: 21px;
              padding: 6px 12px;
       }
       section.contact .location .media .media-body p{
              font-size: 19x; 
              text-shadow: 0px 3px 9px #000;
       }

       /*CATALOGUE*/
       /*nav*/
       nav .bg-top-nav {
              height: 3.7rem;
       }
       /*accordion*/
      main.main-catalogue .card-header .btn-link {
              font-size: .85em;
       }  
}
@media screen and (max-width:1630px){
       /*NAVBAR*/
       nav #navbar ul.navbar-nav li.nav-item {
              width: 190px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 20px;
       }
       /*btn top*/
       #btn-top {
              height: 60px;
              width: 60px;
       }

       /*INDEX*/
       /*Catalogo + slogan + empresa*/
       nav #navbar ul.navbar-nav li.nav-item-catalogue{
              width: 240px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a,
       article.slogan h1{
              font-size: 25px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a img{
              padding: .2rem 2.3rem;
       }
       /*empresa*/
       main .company h3.title {
              font-size: 24px;
       }
       main .company .description p{
              font-size: 22px;
       }
       /*contacto*/
       section.contact .form button[type="submit"] {
              font-size: 20px;
              padding: 5px 10px;
              top: -1.1rem;
       }
       section.contact .location .media .media-body p{
              font-size: 18x; 
       }
}
@media screen and (max-width:1470px){
       /*General*/
       body{
              font-size: 19px;
       }

       /*Navabar*/
       nav .bg-top-nav {
              height: 3.4rem;
       }

       /*INDEX*/
       /*Slide*/
       section.slide{
              border-bottom: .4rem solid #3e8bc0;
              border-top: .4rem solid #3e8bc0; 
       }
       /*empresa*/
       main .company .responsible-company .text p{
              font-size: 19px;
       }

       /*Catalogue*/
       .main-catalogue .accordion-body a.card-body {
              font-size: .84em;
      }
}
@media screen and (max-width:1370px){
       /*General*/
       body {
              font-size: 17.5px;
       }

       /*NAVBAR*/
       nav #navbar ul.navbar-nav li.nav-item {
              width: 195px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 19px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue{
              width: 235px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a,
       article.slogan h1{
              font-size: 23px;
       }


       /*INDEX*/
       /*empresa*/
       main .company h3.title {
              font-size: 23px;
       }
       main .company .description p{
              font-size: 20px;
       }
       main .company .responsible-company .text p{
              font-size: 18px;
       }
       /*clientes+ contacto*/
       main .customers .title h3, section.contact .form-part-1 .title h3 {
              padding: 1.1rem 0;
              font-size: 26px;
       }
       /*contacto*/
       section.contact .form button[type="submit"] {
              font-size: 19px;
       }
       section.contact .location .media .media-body p{
              font-size: 17px; 
       }
       section.contact .location .media img {
              height: 90px;
              margin: .6rem .7rem 0 0;
       }


       /*CATALOGUE*/
       /*accordion*/
       main.main-catalogue .card-header .btn-link {
              font-size: .8em;
       }
       .main-catalogue .accordion-body a.card-body {
              padding: 1.25rem 1.1rem;
       }
}
@media screen and (max-width:1270px){
       /*General*/
       body {
              font-size: 17.5px;
       }

       /*btn top*/
       #btn-top {
              height: 56px;
              width: 56px;
              font-size: 1em;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan{
              padding: 4rem 2rem 2rem 2rem;
       }
       article.slogan h1{
              font-size: 21px;
       }
       /*empresa*/
       main .company{
              position: relative;
              top: -1rem;
       }
       /*clientes + contacto*/
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: 1.3rem 0;
              font-size: 26px;
       }
       main .customers .title, 
       section.contact .form-part-1 .title {
              margin-bottom: 3rem;
       }
       /*contacto*/
       section.contact .form label {
              font-size: 18px;
              text-shadow: 0px 3px 9px #000;
       }
       section.contact .form input[type="text"],
       section.contact .form input[type="email"], 
       section.contact .form textarea {
              font-size: 17px;
              padding: 7px 14px;
       }
       section.contact .form button[type="submit"] {
              top: -1.2rem;
       }

       /*CATALOGUE*/
       .main-catalogue .accordion-body a.card-body {
              padding: 1.25rem .5rem;
      }
 }
@media screen and (max-width:1199.98px){
       /*General*/
       body {
              font-size: 16.5px;
       }

       /*Catalogue*/
       .main-catalogue .accordion-body a.card-body {
              font-size: .9em;
       }
}
@media screen and (max-width:1170px){
       /*general*/
       .contain {
              padding: 1.5rem 4rem;
       }
       body {
              font-size: 15.8px;
       }

       /*Nabvar*/
       nav .bg-top-nav {
              height: 3.3rem;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan {
              top: -2.3rem;
       }
       article.slogan h1{
              font-size: 19px;
       }
       /*empresa*/
       main .company h3.title {
              font-size: 21px;
              padding: 9px;
       }
       main .company .description p {
              font-size: 18px;
       } 
       main .company .responsible-company .leaf img {
              height: 50px;
       }
       main .company .responsible-company .text p {
              font-size: 16px;
       }
       /*clientes +contacto*/
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: 1.1rem 0;
              font-size: 24px;
       }
       /*contacto*/
       section.contact .form button[type="submit"] {
              font-size: 18px;
              padding: 4px 9px;
              top: -1rem;
       }
       section.contact .location .media img {
              height: 80px;
              margin: .5rem .6rem 0 0;
       }
       .success p::before {
              padding: 8px;
       }

       /*Catalogue*/
       .main-catalogue .accordion-body .card-body {
              border-top: .4rem solid rgba(62,139,193,0.85);
       }

}
@media screen and (max-width:1070px){
       /*general*/
       .contain {
              padding: 1.5rem 3rem;
       }
       /*navabar*/
       nav #navbar ul.navbar-nav li.nav-item {
              width: 175px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 18px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue {
              width: 220px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a {
              font-size: 21px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a img {
              padding: .3rem 2rem;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan h1 {
              font-size: 17px;
       }
       /*empresa*/
       main .company h3.title {
              font-size: 19px;
              padding: 8px;
       }
       main .company .description p {
              font-size: 17px;
       }
       /*clientes + contacto*/
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: 1rem 0;
              font-size: 23px;
       }
       main .customers .title, section.contact .form-part-1 .title{
              margin-bottom: .5;
       }
       /*contacto*/
       section.contact .form label {
              font-size: 17px;
              text-shadow: 0px 2px 8px #000;
       }
       section.contact .form input[type="text"], 
       section.contact .form input[type="email"], 
       section.contact .form textarea {
              padding: 6px 12px;
       }
       section.contact .form button[type="submit"] {
              font-size: 17px;
       }
       section.contact .location .media .media-body p {
              font-size: 16px;
       }
       section.contact .location .media img {
              height: 75px;
              margin: .4rem .5rem 0 0;
       }

       /*CATALOGUE*/
       /*accordion*/
       main.main-catalogue .card-header .btn-link {
              font-size: .75em;
              padding: .75rem 0;
       }
}
@media screen and (max-width:991.98px){
       /*CATALOGUE*/
       header .catalogue-title h1{
              font-size: 1.25em;
              line-height: 1.25em;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: .93em;
       }
}
@media screen and (max-width:970px){
       /*general*/
       .contain {
              padding: 1.5rem 1.5rem;
       }

       /*Btn top*/
       #btn-top {
              height: 52px;
              width: 52px;
}

       /*navbar*/
       nav #navbar ul.navbar-nav li.nav-item {
              width: 158px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 17px;
              padding: 3px 6px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue {
              width: 185px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a {
              font-size: 20px;
       }
       nav .bg-top-nav {
              height: 2.5rem;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan {
              top: -2rem;
              padding: 3.5rem 2rem 1.5rem 2rem;
       }
       article.slogan h1 {
              font-size: 16px;
       }
       /*empresa*/
       main .company h3.title {
              font-size: 18px;
              padding: 7px;
       }
       main .company .description p {
              font-size: 16px;
       }
       main .company .responsible-company .leaf img {
              height: 40px;
       }
       main .company .responsible-company .text p {
              font-size: 15px;
       }
       /*clientes + contacto*/
       main .customers .title h3, section.contact .form-part-1 .title h3 {
              font-size: 22px;
       }
       /*contacto*/
       section.contact .form button[type="submit"] {
              font-size: 16px;
              padding: 3px 8px;
              border: 3px solid #fff;
              top: -.9rem; 
       }
       section.contact .location .media img {
              height: 70px;
       }

       /*CATALOGUE*/
       main.main-catalogue .card-header .btn-link {
              font-size: .7em;
       }
}
@media screen and (max-width:870px){
       /*general*/
       body {
              font-size: 15px;
       }
       .contain {
              padding: 1.5rem 1rem;
       }
       /*nav*/
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 15px;
              border: 3px solid #fff;
              padding: 2px 6px;
              margin: 0 .25rem;
       }
       nav #navbar ul.navbar-nav li.nav-item {
              width: 140px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue {
              width: 170px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a {
              font-size: 18px;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a img {
              padding: .2rem 1.5rem;
       }

       /*INDEX*/
       /*slogas*/
       article.slogan {
              top: -1.8rem;
       }
       /*contacto*/
       section.contact .form label {
              font-size: 16px;
       }
       section.contact .form input[type="text"], 
       section.contact .form input[type="email"], 
       section.contact .form textarea {
                     font-size: 15px;
              padding: 7px 10px;
              margin: .3rem;
       }
       section.contact .form-part-1 .bg-form {
              padding: .4rem .8rem;
       }
       section.contact .location .media .media-body p {
              font-size: 15px;
       }
       section.contact .location .media img {
              height: 65px;
       }

       /*Contact*/
       /*form*/
       .error p::before {
              padding: 7px 9px;
       }

       /*CATALOGUE*/
       /*accordion*/
       main.main-catalogue .card-header .btn-link {
              font-size: .68em;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: .9em;
       }
}
@media screen and (max-width:767.9px){
       /*general*/
       .contain {
              padding: 1.3rem 2rem;
       }

       /*navabar*/
       nav .bg-top-nav {
              height: 0;
       }
       nav.bg-nav{
              background: linear-gradient(to bottom, #bebfc1,#fefefe 100%);
              border-bottom:6px solid #fff;
              border-image-source: linear-gradient(to bottom, #c5c4c0, #fff, #c5c4c0, #fff);
              border-image-slice: 30;
       }
       nav .logo{
              height: 72px;
       }
       nav .logo img{
              height: 100%;
              animation: run 5s ease-in-out;
       }
       nav #navbar ul.navbar-nav{
              border-top: 2px solid #c2c2c2;
              margin: .8rem .8rem;
       }
       nav #navbar ul.navbar-nav li.nav-item {
              align-self: flex-start;
              width: auto;
       }
       nav #navbar ul.navbar-nav .nav-item a,
       nav #navbar ul.navbar-nav li.nav-item-catalogue a{
              border: none;
              background: none;
              color: #939393;
              font-size: 16px;
              position: inherit;
              transition: color .8s ease;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a {
              color: #3e8bc0;
       }
       nav #navbar ul.navbar-nav li.nav-item-catalogue a:hover{
              background: transparent;
              border: none;
              color: #fff;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan {
              background: transparent;
              padding: 2rem 2.5rem;
              position: inherit;
       }
       article.slogan h1 {
              font-size: 17px;
              margin-bottom: 0;
              padding-bottom: 3px;
              border-bottom: 2px solid #c2c2c2;
       }
       /*slide*/
       section.slide {
              border-bottom: .35rem solid rgba(62,139,192,0.7);
              border-top: .35rem solid rgba(62,139,192,0.7);
              position: inherit;
       }
       /*empresa*/
       main .company {
              position: inherit;
              margin-top: 1.5rem;
       }
       main .company .description p {
              font-size: 15px;
       }
       main .company .responsible-company .leaf img {
              height: 30px;
       }
       main .company .responsible-company .text p {
              font-size: 14px;
       }
       main .company .responsible-company {
              height: 230px;
       }
       /*clientes*/
       main .customers .image {
              padding: 1.5rem 0;
       }
       /*contacto*/
       main .customers .title, 
       section.contact .form-part-1 .title {
              margin-bottom: 2rem;
       }
       section.contact .form label {
              font-size: 15px;
              text-shadow: 0px 2px 6px #000;
       }
       section.contact .form input[type="text"], 
       section.contact .form input[type="email"], 
       section.contact .form textarea {
              font-size: 14px;
              padding: 5px 8px;
              margin: .2rem;
       }
       section.contact .location .media img {
              height: 65px;
       }

       /*CATALOGUE*/
       main.main-catalogue {
              border-top: .4rem solid #3e8bc1;
       }
       main.main-catalogue .card-header .btn-link {
              font-size: .71em;
        }
        .main-catalogue .accordion-body .card-body:hover::before{
              width: 48px; height: 40px;
       }
}
@media screen and (max-width:670px){
       /*navabar*/
       nav.bg-nav {
              padding-bottom: 0;
       }
       nav .logo {
              height: 67px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 15px;
       }
       nav #navbar ul.navbar-nav {
              margin: .5rem .5rem;
       }

       /*btn top*/
       #btn-top {
              height: 45px;
              width: 45px;
              font-size: .95em;
              box-shadow: 0 17px 17px -15px rgba(42,51,59,0.7), inset 0 -4px rgba(42,51,59,0.4);
       }
       #btn-top:hover{
              box-shadow: 0 17px 17px -15px rgba(42,51,59,0.7), inset 0 -4px rgba(42,51,59,0.4);
       }

       /*INDEX*/
       /*slogan*/
       article.slogan h1 {
              font-size: 16px;
       }
       /*empresa*/
       main .company h3.title {
              font-size: 17px;
              padding: 6px;
       }
       main .company .responsible-company {
              height: 180px;
              margin-bottom: 1.5rem;
       }
       /*clientes + contacto*/
       main .customers .title h3, section.contact .form-part-1 .title h3 {
              padding: .9rem 0;
              font-size: 20px;
       }
       /*clientes*/
       main .customers .image {
              padding: 1.3rem 0;
       }
       /*contacto*/
       section.contact .form-part-1 {
              margin-top: 1.8rem;
       }
       section.contact .form-part-1 .title {
              margin-bottom: 1.8rem;
       }
       section.contact .location .media img {
              height: 60px;
       }
       section.contact .location .media .media-body p {
              font-size: 14px;
       }
       .success p::before {
              padding: 7px;
       }

       /*Catalogue*/
       main.main-catalogue {
              border-top: .35rem solid #3e8bc1;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: .85em;
       }
}
@media screen and (max-width:570px){
       /*general*/
       body {
              font-size: 14px;
       }
       /*navbar*/
       nav .logo {
              height: 60px;
       }
       .navbar-toggler {
              padding: .15rem .5rem;
       }
       .navbar-toggler-icon {
              width: 1.3em;
              height: 1.3em;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan h1 {
              font-size: 14px;
       }
       /*empresa*/
       main .company .description p {
              font-size: 14px;
       }
       main .company .responsible-company {
              height: 140px;
              margin-bottom: 1rem;
       }
       /*clientes*/
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: .8rem 0;
              font-size: 18px;
       }
       /*contacto*/
       section.contact .form label {
              font-size: 14px;
              text-shadow: 0px 2px 5px #000;
       }
       section.contact .form-part-1 .bg-form {
              padding: .7rem;
       }
       section.contact .form input[type="text"], 
       section.contact .form input[type="email"], 
       section.contact .form textarea {
              font-size: 14px;
              padding: 3px 5px;
              margin: .1rem;
       }
       section.contact .form-part-2 .bg-form {
              padding: .4rem .6rem;
       }
       section.contact .form button[type="submit"] {
              font-size: 15px;
              border: 3px solid #fff;
       }
       section.contact .location .media img {
              height: 55px;
       }
       .error p::before {
              padding: 6px 8px;
       }

       /*CATALOGUE*/
       header .catalogue-title h1 {
              letter-spacing: 0px;
       }
       main.main-catalogue .card-header .btn-link {
              font-size: .68em;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: 1em;
       }
       .main-catalogue .accordion-body .card-body:hover::before{
              width: 48px; height: 44px;
       }
}
@media screen and (max-width:470px){
       /*General*/
       body {
              font-size: 13px;
       }
       /*navabar*/
       nav .logo {
              height: 55px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 14px;
       }

       /*Btn top*/
       #btn-top {
              height: 40px;
              width: 40px;
              box-shadow: 0 14px 14px -13px rgba(42,51,59,0.7), inset 0 -4px rgba(42,51,59,0.4);
       }
       #btn-top:hover{
              box-shadow: 0 14px 14px -13px rgba(42,51,59,0.7), inset 0 -4px rgba(42,51,59,0.4);
       }

       /*INDEX*/
       /*empresa*/
       main .company h3.title {
              font-size: 16px;
              padding: 6px;
       }
       main .company .description p {
              font-size: 13px;
       }
       main .company .responsible-company {
              height: 120px;
       }
       main .company .responsible-company .text p {
              font-size: 12px;
       }
       /*clientes +contacto*/
       main .customers .title, 
       section.contact .form-part-1 .title {
              margin-bottom: 1.5rem;
       }
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: .7rem 0;
              font-size: 16px;
       }
       section.contact .location .media .media-body p {
              font-size: 13px;
       }
       .success p::before {
              padding: 6px;
       }

       /*Catalogue*/
       main.main-catalogue .card-header .btn-link {
              font-size: .59em;
              padding: .6rem 0;
       }
}
@media screen and (max-width:370px){
       /*general*/
       body {
              font-size: 13px;
       }
       .contain {
              padding: 1.3rem;
       }
       /*nabar*/
       nav .logo {
              height: 50px;
       }
       nav #navbar ul.navbar-nav .nav-item a {
              font-size: 13px;
       }
       nav #navbar ul.navbar-nav .nav-item a, 
       nav #navbar ul.navbar-nav li.nav-item-catalogue a {
              font-size: 14px;
       }

       /*btn top*/
       #btn-top {
              height: 36px;
              width: 36px;
              font-size: .85em;
       }

       /*INDEX*/
       /*slogan*/
       article.slogan h1 {
              font-size: 13px;
       }
       /*clientes + contacto*/
       main .customers .title h3, 
       section.contact .form-part-1 .title h3 {
              padding: .7rem 0;
              font-size: 14px;
       }
       /*contacto*/
       section.contact .form label {
              font-size: 13px;
       }
       section.contact .form input[type="text"], 
       section.contact .form input[type="email"], 
       section.contact .form textarea {
              font-size: 13px;
       }
       section.contact .form button[type="submit"] {
              font-size: 14px;
              border: 2px solid #fff;
       }
       section.contact .form button[type="submit"] {
              top: -.8rem;
       }
       .media img {
              height: 45px;
       }
       section.contact .location .media .media-body p {
              font-size: 11.4px;
       }
       .error p::before {
              padding: 5px 7px;
       }

       /*Catalogue*/
       main.main-catalogue {
              border-top: .3rem solid #3e8bc1;
       }
       main.main-catalogue .card-header .btn-link {
              font-size: .56em;
              padding: .5rem 0;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: .88em;
       }
       .main-catalogue .accordion-body .card-body {
              border-top: .3rem solid rgba(62,139,193,0.85);
       }
       .main-catalogue .accordion-body .card-body:hover::before {
              width: 45px; height: 45px;
       }
       .main-catalogue .accordion-body .card-body::after {
              font-size: 8px;
       }
}
@media screen and (max-width:320px){
       /*btn top*/
       #btn-top {
              height: 33px;
              width: 33px;
              font-size: .8em;
       }

       /*contact*/
       .success p::before {
              padding: 5px;
       }
       /*catalogue*/
       header .catalogue-title h1 {
              font-size: 1em;
              line-height: 1em;
       }
       main.main-catalogue .card-header .btn-link {
              font-size: .475em;
              padding: .43rem 0;
       }
       .main-catalogue .accordion-body a.card-body {
              font-size: .76em;
       }
       .main-catalogue .accordion-body .card-body:hover::before {
              width: 35px;
              height: 35px;
       }
}