/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* Atributos */

:root{
  --azul: #00ADDD;
  --oscuro: #040238;
  --rojo: #DB1544;
  --opaco:  rgba(4, 2, 56, 0.7);
  --font: 'Roboto', sans-serif;
  --tituloP: Impact, sans-serif;
  --tituloS: 'Anton', sans-serif;
}

.ocultar{
  display: none;
}

.mostrar{
  display: block;
}

.btn-header{
  width: 60%;
  padding: 0.5rem;
  border: solid 2px white;
  border-radius: 5px;
  margin: 0 auto;
  background-color: var(--opaco);
  margin-top: 5rem;
}

.btn-header a{
  color: white;
  font-size: 1.1rem;
  text-decoration: none;
  font-family: var(--font);
}

.contenedor{
  width: 85%;
  margin: 0 auto;
}

.contenedor-servicios{
  width: 70%;
  height: 0px;
  margin: 0 auto;
}

.contenedor-body{
  width: 70%;
  margin: 0 auto;
}

/* Header movil */

.logo-header img{
  width: 203px;
}

.menu-superior{
  display: none;
}

@media (min-width: 1025px) {
  .menu-superior{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--oscuro);
    font-family: var(--font);
    color: white;
    padding: 0 0;
    font-size: 0.9rem;
  }

  .contacto-barra{
    padding-left: 1rem;
  }

  .contacto-barra a{
    text-decoration: none;
    color: white;
    font-weight: 300;
    padding: 0 0.5rem;
  }

  .redes-barras{
    padding-right: 1rem;
    font-size: 1.3rem;
  }

  .redes-barras a{
    padding-left: 1rem;
    text-decoration: none;
    color: white;
  }
}

.menu-header{ 
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  position: absolute;
}

.barras-movil i{
  scale: 1.5;
  color: white;
}

@media (min-width: 1025px) {
  .barras-movil i{
    display: none;
  }

  .logo-header{
    display: none;
  }
}

/* Menu movil */

.menu-movil{
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: flex-end;
  padding: 2rem;
  font-size: 1.2rem;
  font-weight: 500;
  height: 1000px;
  position: absolute;
  right: 0;
}

.menu-movil:after{
  content: '';
  background-color: black;
  width: 100px;
  height: 3.5px;
}

.servicios-movil{
  font-family: var(--font);
  text-align: end;
}

.menu-servicios-movil{
  display: flex;
  flex-direction: column;
  font-weight: 300;
}

.menu-movil a{
  color: black;
  text-transform: capitalize;
  font-family: var(--font);
  text-decoration: none;
  padding: 1rem 0;
}

.menu-movil a:last-child{
  margin-bottom: 2rem;
}

/* Contenido Header */

.contenido-header{
  font-family: var(--font);
  max-width: 100%;
  height: 700px;
}

.navegacion{
  display: none;
  max-width: 100%;
}

@keyframes roll {
  from {left: 90%; top: 10px; transform: rotate(20deg);}
  to {left: 85.5%; top: -20px; transform: rotate(0deg);}
}

.animacion{
  animation-name: roll;
  animation-duration: 1s;
}

.anos{
  position: absolute;
  right: 1rem;
}

.anos img{
  width: 180px;  
}

.main-logo{
  padding: 0 1rem;
}

.main-logo img{
  width: 300px;
}

.menu{
  display: flex;
  font-family: var(--font);
  justify-content: flex-end;
  align-items: center;
  padding: 0 1rem;
  color: white;
  font-size: 1.2rem;
  margin-right: 10rem;
}

.menu a{
  text-decoration: none;
  padding: 0 0.5rem;
  text-transform: uppercase;
  color: white;
}

.menu a:hover{
  color: red;
}

.menu p i{
  padding: 0 1rem;
}

@media (min-width: 1025px) {
  .navegacion{
    width: 85%;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    position: absolute;
  }

  .menu-header{
    display: none;
  }   
  
  .contenido-servicios{
    position: relative;
    display: inline-block;
  }  
  
  .menu-servicios{
    display: none;
    position: absolute;
    background-color: var(--opaco);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .menu-servicios a{
    color: white;
    text-transform: capitalize;
    font-weight: lighter;
    padding: 12px 16px;
    display: block;
  }
  
  .menu-servicios a:hover{
    color: red;
  }
  
  .contenido-servicios:hover .menu-servicios{
    display: block;
  }
  
  .contenido-servicios:hover .link-servicios{
    color: red;
  }
}

/* Aduana */

.webp .header-aduana{
  background-image: url(/img/header/logistica-aduanera.webp);
}

.no-webp .header-aduana{
  background-image: url(/img/header/logistica-aduanera.jpg);
}

.header-aduana{
  background-position: center;
  background-size: cover;
  height: 700px;
  text-align: center;
  color: white;
  max-width: 100%;
}

.fondo{
  background-color: rgba(4, 2, 56, 0.5);
  height: 570px;
  max-width: 100%;
}

.info-header{
  width: 100%;
  padding-top: 130px;
  font-size: 15px;
}
.info-header p{
  margin: 0 auto;
  font-weight: 500;
  padding: 0 2rem;
}

.info-header h4{
  margin: 0 auto;
  margin-top: 5rem;
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.8rem;
}

.info-header h1{
  margin: 0;
  font-family: var(--tituloP);
  font-weight: 900;
  font-size: 1.5rem;
  padding: 0 0 1rem 0;
}

@media (min-width: 768px) {
  .info-header{
    text-align: left;
  }

  .btn-header{
    margin: 1rem 0 0 3rem;
    text-align: center;
    width: 30%;
  }

  .info-header p{    
    font-weight: 500;
    font-size: 1rem;
    padding: 0 3rem;
  }
  
  .info-header h4{
    margin: 8rem 0 0 3rem;
    font-family: var(--font);
    font-weight: 300;
    font-size: 1rem;
  }
  
  .info-header h1{
    margin: 0;
    font-weight: 900;
    font-size: 2.5rem;
    padding: 0 0 1rem 0;
    padding: 0 3rem;
  }
}

@media (min-width: 1025px) {
  .header-aduana{
    height: 700px;
  }

  .info-header{
    text-align: center;
  }

  .btn-header{
    margin: 0 auto;
    margin-top: 3rem;
    text-align: center;
    padding: 1rem 0;
    width: 20%;
  }

  .info-header h4{
    margin: 9rem 0 0 0;
    font-family: var(--font);
    font-weight: 300;
    font-size: 1rem;
  }
}

/* Importamos */

.webp .header-importamos{
  background-image: url(/img/header/importarmercancia.webp);
}

.no-webp .header-importamos{
  background-image: url(/img/header/importarmercancia.jpg);
}

.header-importamos{
  background-position: center;
  background-size: cover;
  height: 700px;
  text-align: center;
  color: white;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .header-importamos{
    height: 700px;
  }
}

/* Envíos */

.webp .header-envios{
  background-image: url(/img/header/fletes-internacionales-1.webp);
}

.no-webp .header-envios{
  background-image: url(/img/header/fletes-internacionales-1.jpg);
}

.header-envios{
  background-position: center;
  background-size: cover;
  height: 700px;
  text-align: center;
  color: white;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .header-envios{
    height: 700px;
  }
}

/* Seguros */

.webp .header-seguro{
  background-image: url(/img/header/asegurar-carga.webp);
}

.no-webp .header-seguro{
  background-image: url(/img/header/asegurar-carga.jpg);
}

.header-seguro{
  background-position: center;
  background-size: cover;
  height: 700px;
  text-align: center;
  color: white;
  max-width: 100%;
}

@media (min-width: 1025px) {
  .header-seguro{
    height: 700px;
  }
}

/* Servicios home */

.parallax{
  background-image: url(/img/mapafondo.jpg);
  opacity: 0.2;
  min-height: 2000px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 768px) {
  .parallax{
    min-height: 500px;
  }
}

.btn-serv{
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid 2px var(--rojo);
  border-radius: 3px;
  margin-bottom: 1rem;
  width: 70%;
}

.btn-serv a{
  text-decoration: none;
  color: var(--rojo);
  font-family: var(--font);
  font-weight: 500;
}

.servicios-home{
  display: grid;  
  position: relative;
  top: -2050px;
}

@media (min-width: 768px) {
  .servicios-home{
    top: -625px;
    scale: 0.7;
    margin-left: -9rem;
  }
}

@media (min-width: 800px) {
  .servicios-home{
    top: -625px;
    scale: 0.7;
    margin-left: -9rem;
  }

  .parallax{
    min-height: 500px;
  }
}

@media (min-width: 820px) {
  .servicios-home{
    top: -700px;
    scale: 0.9;
    margin-left: -6rem;
  }

  .parallax{
    min-height: 650px;
  }
}

@media (min-width: 1025px) {
  .servicios-home{
    top: -700px;
    scale: 1;
    margin-left: 0;
  }

  .parallax{
    min-height: 650px;
  }
}

@media (min-width: 768px) {
  .btn-serv{
    display: none;
  }
}

@media (min-width: 768px) {
  .servicios-home{
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;    
  }
}

.servicios-home h2{
  font-family: var(--tituloS);
  font-weight: normal;
  font-size: 2rem;
  color: var(--oscuro);
}

.servicios-home p{
  font-family: var(--font);
  color: grey;
  line-height: 1.8rem;
  font-size: 1.2rem;
}

.servicios-home p span{
  font-weight: bold;
}

.servicios-home h2::after{
  content: "";
  background-color: var(--rojo);
  width: 50px;
  height: 2px;
  display: block;
}

.img-servicios-home::after{
  content: "";
  background-color: var(--rojo);
  width: 100%;
  height: 10px;
  display: block;
  box-shadow: 0px 1px 20px 10px grey;
}

.aduana-home{
  width: 275px;
}

.flete-home{
  width: 275px;
}

.almacen-home{
  width: 275px;
}

.barra-tel{
  background-color: var(--rojo);
  color: white;
  font-family: var(--font);
  font-weight: 300;
  padding: 0.8rem 0;
  font-size: 1rem;
  position: relative;
  top: -140px;
  margin-bottom: -5rem;
}

.barra-tel p{
  margin: 0;
}

.barra-tel p span{
  font-weight: bold;
}

.tel-barra{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.numero-home a{
  text-decoration: none;
  color: white;
  font-weight: 700;
  padding-left: 0.5rem;
}

@media (min-width: 768px) {
  .barra-tel{
    font-size: 0.9rem;
    top: -70px;
    margin-bottom: -3rem;
  }

  .contenedor-body{
    width: 80%;
  }
}

@media (min-width: 800px) {
  .barra-tel{
    font-size: 1rem;
    top: -70px;
  }

  .contenedor-body{
    width: 80%;
  }
}

/* Meta -home */

.meta-home{
  text-align: center;
  font-family: var(--font);
  font-weight: 100;
  color: gray;
  font-size: 1.1rem;
  width: 80%;
  margin: 0 auto;
}

.meta-home p span{
  font-weight: bold;
}

.meta-home h3{
  color: black;
  font-weight: 500;
  padding-top: 1rem;
}

.meta-home h3::before{
  content: '';
  background-color: var(--rojo);
  width: 100px;
  height: 2px;
  display: block;
  margin: 1rem auto;
}

.info-us-home{
  padding-bottom: 2rem;
}

.nosotros-home{
  font-family: var(--font);
  width: 90%;
  margin: 0 auto;
}

.nosotros-home h2 span{
  font-weight: 100;
}

.nosotros-home h2{
  font-family: var(--tituloP);
  color: var(--oscuro);
  font-weight: normal;
  font-size: 2rem;
}

.nosotros-home h2::after{
  content: "";
  background-color: var(--rojo);
  width: 60px;
  height: 2px;
  display: block;
  margin-top: 1rem;
}

.nosotros-home p{
  color: gray;
  text-align: justify;
}

.p-ulitmo::after{
  content: "";
  background-color: var(--rojo);
  width: 60px;
  height: 2px;
  display: block;
  position: relative;
  top: 70px;
  left: 85%;
}

.nosotros-home p span{
  font-weight: 700;
}

.nosotros-home a{
  text-decoration: none;
  color: black;
  padding-left: 2rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.img-us-home{
  padding-top: 3rem;
}

.img-us-home img{
  width: 100%;
}

@media (min-width: 768px) {
  .nosotros-home{
    width: 50%;
  }

  .p-ulitmo::after{
    left: 80%;
  }

  .img-us-home{
    margin-top: -5rem;
  }
  
  .info-us-home{
    margin: 0 auto;
    display: flex;
    width: 80%;
    align-items: center;
    justify-content: space-between;
  }
}

@media (min-width: 800px) {
  .img-us-home{
    margin-top: -2rem;
  }
}

@media (min-width: 1024px) {
  .img-us-home{
    margin-right: 5rem;
  }
}

/* Envio home */

.webp .parallax-envio{
  background-image: url(/img/agencia-de-aduanas-colombia.webp);
}

.no-webp .parallax-envio{
  background-image: url(/img/agencia-de-aduanas-colombia.jpg);
}

.parallax-envio{  
  opacity: 1;
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2rem;
}

.contenido-envios-home{
  width: 95%;
  margin: 0 auto;
  height: 0px;
}

.envios-home{
  font-family: var(--font);
  color: white;
  text-align: center;
  position: relative;
  top: -500px;
}

.envios-home h2{  
  text-shadow: 0px 2px 5px black;
  font-weight: 900;
  font-size: 1.5rem;
  font-family: var(--tituloP);
}

.envios-home h4{
  margin-top: -1rem;
  margin-bottom: 0;
  font-size: 1.3rem;
}

.envios-home p{
  line-height: 2rem;
  font-weight: 500;
}

.envios-home p span{
  font-weight: 900;
}

.envios-home img{
  width: 100%;
  box-shadow: 0px 2px 5px grey;
}

@media (min-width: 768px) {
  .parallax-envio{
    min-height: 400px;
  }

  .envios-home{
    top: -390px;
  }

  .contenido-envios-home{
    width: 80%;
  }

  .envios-home h2{  
    font-size: 2rem;
  }

  .envios-home h4{
    font-size: 1.6rem;
  }
}

@media (min-width: 1280px) {
  .envios-home img{
    width: 60%;
  }
}

/* Mapa */


.mapa{
  height: 320px;
}

.mapa img{
  height: 300px;
  width: 300px;
}

.contenido-sucursales{
  width: 80%;
  margin: 0 auto;
  padding-top: 5rem;
}

@media (min-width: 768px) {
  .contenido-sucursales{
    padding-top: 16rem;
  }

  .mapa{
    height: 450px;
    padding: 0 6rem;
  }

  .mapa img{
    height: 400px;
    width: 400px;
  }
}

@media (min-width: 1024px) {
  .mapa{
    height: 450px;
    width: 400px;
    padding: 0 0rem;
  }

  .contenido-sucursales{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-width: 50%;
    align-items: center;
    padding-top: 22rem;
  }

  .mapa img{
    height: 400px;
    width: 400px;
  }
}

@media (min-width: 1280px) {
  .contenido-sucursales{
    padding-top: 15rem;
  }

  .mapa{
    height: 350px;
    width: 400px;
  }

  .mapa img{
    height: 400px;
    width: 400px;
  }
}

@media (min-width: 1500px) {
  .contenido-sucursales{
    padding-top: 18rem;
    align-items: center;
    max-width: 80%;
  }

  .mapa{
    height: 400px;
    padding: 0 10rem;
  }

  .mapa img{
    height: 400px;
    width: 400px;
  }
}

@media (min-width: 2100px) {
  .contenido-sucursales{
    max-width: 50%;
    font-size: 1.3rem;
  }

  .envios-home img{
    width: 40%;
  }
}

.nom-suc{
  font-family: var(--tituloS);
  color: white;
  background-color: rgb(60, 60, 60);
  text-align: center;
  width: 50px;
  height: 40px;
  padding: 0.5rem;
  font-size: 0.6rem;
  border-radius: 10px;
  position: relative;
  top: -90px;
  left: -24px;
  display: none;
  position: absolute;
  z-index: 1;
}

.rojo{
  color: var(--rojo);
}

.nom-suc p{
  margin: 0;
}

.nom-suc i{
  color: rgb(60, 60, 60);
  position: relative;
  top: -12px;
  font-size: 2rem;
  margin: 0;
}

@keyframes glow{
  0%,10% {font-size: 1.5rem;}
  10%,20% {font-size: 1.7rem;}
  20%, 100% {font-size: 1.5rem;}
}

.u-bog{
  position: relative;
  display: inline-block;
  width: 25px;
  top: -222px;
  left: 120px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-bog:hover .nom-suc{
  display: block;
}

.u-bun{
  position: relative;
  width: 25px;
  display: inline-block;
  top: -220px;
  left: 30px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-bun:hover .nom-suc{
  display: block;
}

.u-med{
  position: relative;
  width: 25px;
  display: inline-block;
  top: -250px;
  left: 50px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-med:hover .nom-suc{
  display: block;
}

.u-cuc{
  position: relative;
  width: 25px;
  display: inline-block;
  top: -270px;
  left: 80px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-cuc:hover .nom-suc{
  display: block;
}

.u-ctg{
  position: relative;
  width: 25px;
  display: inline-block;
  top: -315px;
  left: 5px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-ctg:hover .nom-suc{
  display: block;
}

.u-baq{
  position: relative;
  width: 25px;
  display: inline-block;
  top: -320px;
  left: -10px;
  font-size: 1.5rem;
  animation-name: glow;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-delay: 0s;
}

.u-baq:hover .nom-suc{
  display: block;
}

@media (min-width: 768px) {
  .u-bog{
    top: -290px;
    left: 160px;
  }
  
  .u-bun{
    top: -280px;
    left: 50px;
  }
  
  .u-med{
    top: -330px;
    left: 90px;
  }
  
  .u-cuc{
    top: -365px;
    left: 140px;
  }
  
  .u-ctg{
    top: -410px;
    left: 50px;
  }
  
  .u-baq{
    top: -415px;
    left: 40px;
  }
}

@media (min-width: 800px) {
  .u-bog{
    top: -70px;
    left: -240px;
  }
  
  .u-bun{
    top: -280px;
    left: 70px;
  }
  
  .u-med{
    top: -330px;
    left: 120px;
  }
  
  .u-cuc{
    top: -350px;
    left: 170px;
  }
  
  .u-ctg{
    top: -410px;
    left: 75px;
  }
  
  .u-baq{
    top: -415px;
    left: 65px;
  }
}

@media (min-width: 1024px) {
  .u-bog{
    top: -290px;
    left: 160px;
  }
  
  .u-bun{
    top: -280px;
    left: 50px;
  }
  
  .u-med{
    top: -325px;
    left: 80px;
  }
  
  .u-cuc{
    top: -350px;
    left: 135px;
  }
  
  .u-ctg{
    top: -400px;
    left: 45px;
  }
  
  .u-baq{
    top: -405px;
    left: 35px;
  }
}

.contenido-mapa{
  font-family: var(--tituloS);
  font-size: 1.4rem;
}

.contenido-mapa p{
  margin: 0;
}

.contenido-mapa p span{
  font-weight: 900;
}

.contenido-mapa h2{
  margin: 0;
  padding-bottom: 1rem;
  font-weight: 100;
}

.contenido-mapa h2::after{
  content: "";
  background-color: var(--rojo);
  width: 60px;
  height: 3px;
  display: block;
  margin-top: 1rem;
}

.info-mapa{
  font-family: var(--font);
  color: gray;
  padding-bottom: 1.5rem;
}

.btn-mapa{
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid 2px var(--rojo);
  border-radius: 3px;
  margin-bottom: 1rem;
  width: 35%;
}

.btn-mapa a{
  text-decoration: none;
  color: var(--rojo);
  font-family: var(--font);
  font-weight: 500;
  font-size: 1.1rem;
}

@media (min-width: 1024px) {
  .contenido-mapa{
    font-size: 1rem;
  }
}

@media (min-width: 1500px) {
  .contenido-mapa{
    font-size: 1.2rem;
  }
}

/* Contador */

.webp .parallax-conteo{
  background-image: url(/img/header/fletes-internacionales-1.webp);
}

.no-webp .parallax-conteo{
  background-image: url(/img/header/fletes-internacionales-1.jpg);
}

.parallax-conteo{  
  opacity: 0.85;
  filter: blur(2px);
  min-height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2rem;
}

@media (min-width: 1280px) {
  .parallax-conteo{
    margin-top: 6rem;
  }
}

.opaco-conteo{
  background-color: rgba(0,0,0,0.4);
  height: 1200px;
  position: relative;
  top: -1200px;
}

@media (min-width: 768px) {
  .parallax-conteo{
    min-height: 350px;
  }

  .opaco-conteo{
    height: 350px;
    top: -350px;
  }
}

.t-conteo{
  color: white;
  font-family: var(--font);
  width: 90%;
  text-align: center;
  margin: 0 auto;
  padding-top: 100px;
}

.contenido-conteo{
  color: white;
  font-family: var(--font);
  width: 90%;
  text-align: center;
  margin: 0 auto;
  padding-top: 100px;
}

@media (min-width: 768px) {
  .t-conteo{
    padding-top: 40px;
  }
  
  .contenido-conteo{
    display: flex;
    padding-top: 40px;
    justify-content: space-between;
  }
}

.t-conteo{
  font-size: 2rem;
  font-weight: 800;
}

.t-conteo::after{
  content: "";
  background-color: var(--azul);
  width: 90px;
  height: 3px;
  display: block;
  margin: 0 auto;
  margin-top: 1rem;
}

.contenido-conteo i{
  font-size: 3rem;
}

.contenido-conteo p{
  margin: 0;
}

#añosExp{
  font-size: 4.5rem;
  font-weight: 700;
  margin: 0;
}

.anos-exp{
  font-size: 1.5rem;
  padding-bottom: 2rem;
}

#clientesCont{
  font-size: 4.5rem;
  font-weight: 700;
  margin: 0;
}

.clientes-conte{
  font-size: 1.5rem;
  padding-bottom: 2rem;
}

#totSer{
  font-size: 4.5rem;
  font-weight: 700;
  margin: 0;
}

.servicios-conteo{
  font-size: 1.5rem;
  padding-bottom: 2rem;
}

.total-conteo{
  display: flex;
  justify-content: center;
}

@media (min-width: 768px) {
  .contenido-conteo i{
    font-size: 2.5rem;
  }

  #añosExp,
  #clientesCont,
  #totSer{
    font-size: 3rem;
  }
}

/* Whatsapp y llamar fijo */

.fixed-whatsapp{
  background-repeat: no-repeat;
  padding: 1.5rem 0;
  width: 170px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: 20px;
  left: -0.8rem;
  z-index: 1;
}

.fixed-whatsapp i{
  color: white;
}

.llamar{
  background-repeat: no-repeat;
  padding: 1.5rem 0;
  width: 170px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: 80px;
  left: -0.8rem;
  z-index: 1;
}

.llamar i{
  color: white;
}

/* Footer */

.blanco{
  height: 1200px;
}

@media (min-width: 1024px) {
  .blanco{
    height: 350px;
  }
}

footer{
  background-color: #f9f9f9;
  clip-path: polygon(70% 2%, 100% 0, 100% 100%, 0 100%, 0 0);
  margin-top: -1200px;
}

.nosotros-footer{
  display: none;
}

@media (min-width: 768px) {
  footer{
    margin-top: -340px;
  }
}

@media (min-width: 1024px) {
  footer{
    margin-top: -350px;
    clip-path: polygon(70% 5%, 100% 0, 100% 100%, 0 100%, 0 0);
    display: flex;
    justify-content: space-between;
    padding-left: 3rem;
  }

  .nosotros-footer{
    display: block;
    padding-top: 2rem;
    width: 30%;
    color: grey;
    font-size: 1rem;
    line-height: 1.8rem;
    font-family: "Gotham-Book",Sans-serif;
  }

  .nosotros-footer img{
    max-width: 300px;
  }

  .sucursales{
    width: 40%;
  }

  .ubicacion{
    width: 30%;
    padding-top: 2rem;
  }
}

.sucursales{
  padding-top: 2rem;
  text-align: center;
  max-width: 90%;
  font-family: "BebasNeue-Regular",Sans-serif;
  padding-bottom: 2rem;
}

.info-suc{
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .info-suc{
    display: block;
  }

  #telBog{
    padding-left: 10rem;
  }

  .sucursal{
    text-align: left;
    padding-left: 1rem;
  }

  .suc-sec{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.info-suc a{
  text-decoration: none;
  font-family: "Gotham-Book",Sans-serif;
  color: grey;
  padding-top: 1rem;
}

#telBog{
  padding-top: 3rem;
}

.sucursal i{
  color: var(--azul);
}

.sucursal p{
  padding-top: 1rem;
}

.ubicacion{
  text-align: center;  
  padding-bottom: 1rem;
}

.ubicacion img{
  max-width: 90%;
}

.ubicacion p{
  font-family: "BebasNeue-Regular",Sans-serif;
  text-align: left;
  padding-left: 5%;
}

.copy{
  background-color: var(--oscuro);
  color: rgb(180, 179, 179);
  font-family: var(--font);
  height: 130px;
  text-align: center;
  padding-top: 1rem;
}

#iconosFooter{
  display: flex;
  justify-content: space-evenly;
  max-width: 50%;
  margin: 0 auto;
}

#iconosFooter a{
  color: white;
}

.copy a{
  text-decoration: none;
  color: rgb(180, 179, 179);
  font-size: 1.2rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .copy{
    display: flex;
    padding: 0 2rem;
    height: 70px;
  }

  #iconosFooter{
    width: 20%;
  }
}

/* Agencia de aduanas /*

/* Aduana */

.servicio-aduana{
  background-image: url(/img/servicios/agenteaduanas.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  color: white;
  max-width: 100%;
  padding-bottom: 3rem;
}

.info-head-aduana{
  width: 90%;
  padding-top: 130px;
  font-size: 15px;
  margin: 0 auto;
}

.info-head-aduana h4{
  margin: 0 auto;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.1rem;
}

.info-head-aduana h1{
  margin: 0;
  font-family: var(--tituloP);
  font-weight: 400;
  font-size: 1.6rem;
  padding: 0 0 1rem 0;
  letter-spacing: 0.2rem;
}

.form-contacto h4{
  font-family: var(--font);
  font-weight: 300;
  font-size: 1.1rem;
}

.form-contacto h1{
  margin: 0;
  font-family: var(--tituloP);
  font-weight: 400;
  font-size: 2rem;
  padding: 0 0 1rem 0;
  letter-spacing: 0.2rem;
}

.info-head-aduana ul{
  list-style-type: none;
  padding-left: 20px;
  text-align: left;
}

.info-head-aduana li{
  color: red;
  padding-bottom: 1rem;
  display: flex;
}

.info-head-aduana p{
  color: white;
  padding-left: 1rem;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 20px;
  margin: 0;
}

@media (min-width: 1024px) {
  .servicio-aduana{
    display: flex;
    padding: 8rem 8rem;
  }

  .info-head-aduana{
    max-width: 100%;
    padding-right: 1rem;
  }

  .form-contacto{
    width: 50%;
    padding-left: 1rem;
  }
}


/* Forms servicios */

.form-servicios{
  display: flex;
  flex-direction: column;
  background-color: rgba(4, 2, 56, 0.7);
  padding: 2rem 2rem;
  border-radius: 10px;
  border: solid 2px white;
  max-width: 80%;
  max-height: 400px;
  margin: 0 auto;
}

.form-servicios input, textarea{
  margin-bottom: 0.5rem;
  padding: 0.8rem 0rem;
  background-color: transparent;
  color: white;
  border: none;
  border-bottom:solid 1px white;
  outline: none;
}

.terminos-form a{
  text-decoration: none;
  color: white;
}

.btn-form{
  margin-top: 1rem;  
}

.btn-form input{
  border: solid 1px white;
  padding: 0.5rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
}

/* Animación form */

@keyframes bounce{
  0% {top: 0px;}
  25% {top: -50px;}
  50% {top: 0px;}
  75% {top: -30px;}
  100% { top: 0px;}
}

.form-servicios{
  animation-name: bounce;
  animation-duration: 0.8s;
  position: relative;
}

/* logos-instituciones */

.logos-instituciones img{
  width: 120px;
}

.log-ins img{
  width: 180px;
}

.logos-instituciones{
  display: flex;
  flex-wrap: wrap;
  margin-left: 0px;
}

@media (min-width: 1024px) {
  .logos-instituciones{
    justify-content: center;
  }
  .logos-instituciones img{
    width: 180px;
  }

  .log-ins img{
    width: 250px;
  }
}

/* Animación logos institucionales */

@keyframes in-left{
  0% {
    transform: translateX(-1500px)
  }
  100% {
    transform: scale(1);
  }
}

@keyframes in-right{
  0% {
    transform: translateX(1500px)
  }
  100% {
    transform: scale(1);
  }
}

.logos-instituciones.animate{
  animation: in-left 1s ease-out;
}

/* Contenido aduana servicio */

.aduana-service{
  max-width: 95%;
  margin: 0 auto;
}

.titulos{
  font-family: var(--tituloP);
  font-size: 30px;
  font-weight: 300;
  letter-spacing: 2px;
  word-wrap: break-word;
  color: var(--oscuro);
}

.animah1.anima{
  animation: fantasma 1.3s ease-out;
}

@keyframes fantasma{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.titulos::after{
  content: "";
  background-color: var(--rojo);
  width: 60px;
  height: 2px;
  display: block;
  margin-top: 1rem;
}

.content-service{
  text-align: center;
}

.content-service.animate{
  animation: in-left 1s ease-out;
}

.content-service p{
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  width: 93%;
  line-height: 1.5rem;
  text-align: justify;
  margin: 0 auto;
  color: gray;
}

.content-service ul{
  list-style-type: none;
  padding-left: 20px;
  text-align: left;
}

.content-service li{
  color: red;
  padding-bottom: 1rem;
  display: flex;
}

.content-service p{
  color: grey;
  font-family: var(--font);
  font-weight: 300;
  font-size: 1rem;
  line-height: 20px;
  max-width: 100%;
}

.img-content{
  max-width: 90%;
  text-align: center;
  border-radius: 2px;
  -webkit-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.59);
  -moz-box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.59);
  box-shadow: 0px 0px 12px 1px rgba(0,0,0,0.59);
  border-bottom: 5px solid red;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .aduana-service{
    padding: 0 7rem;
  }
  .content-service{
    display: flex;
  }

  .content-service p{
    margin-bottom: 2rem;
  }
}

.particulas{
  padding-bottom: 1rem;
}

#particles-js{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 400px;
  background-color: #f2f7f8;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.aduana-slider{
  text-align: center;
}

.info-slide{
  height: 300px;
  text-align: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.info-slide i{
  font-size: 2rem;
  color: var(--rojo);
}

.info-slide h2{
  font-size: 1.5rem;
  font-family: "BebasNeue-Regular",Sans-serif;
  font-weight: 500;
  color: var(--oscuro);
}

.p-slide{
  margin: 0 auto;
  background-color: var(--oscuro);
  -webkit-box-shadow: 0px 3px 9px 1px rgba(0,0,0,0.29);
-moz-box-shadow: 0px 3px 9px 1px rgba(0,0,0,0.29);
box-shadow: 0px 3px 9px 1px rgba(0,0,0,0.29);
  border-radius: 20px;
  padding: 1rem;
  max-width: 80%;
}

.p-slide p{
  color: white;
  font-size: 1rem;
  font-family: "Gotham-Book",Sans-serif;
}

.inquietudes{
  background-color: var(--oscuro);
  color: white;
  text-align: center;
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
  font-family: "Gotham-Book",Sans-serif;
  margin-bottom: 1200px;
}

@media (min-width: 768px) {
  .inquietudes{
    margin-bottom: 350px;
  }
}

.inquietudes h3{
  margin: 0;
  padding-top: 1rem;
}

.i-deco{
  font-size: 1rem;
  border: white 4px solid;
  width: 20px;
  padding: 10px;
  border-radius: 600px;
  margin: 0 auto;
  margin-top: 2rem;
}

.link-ph a{
  text-decoration: none;
  color: var(--rojo);
}

.link-dir a{
  text-decoration: none;
  color: var(--rojo);
}

@media (min-width: 1024px) {
  .content-inq{
    display: flex;
    justify-content: center;
  }

  .service-inq{
    display: flex;
    align-items: center;
    padding: 0 1rem;
    font-size: 16px;
  }

  .inquietudes h3{
    text-align: left;
  }

  .info-ser-inq{
    margin-left: 1rem;
  }

  .info-ser-inq p{
    margin: 0;
  }
}

/* FLETES INTERNACIONALES */

.servicio-envios{
  background-image: url(/img/servicios/enviointernacional.jpg);
}

/* Almacenamiento */

.servicio-almacenamiento{
  background-image: url(/img/servicios/Mesa-de-trabajo-1-100-5.jpg);
}

/* Nosotros */

.nosotros{
  background-image: url(/img/servicios/Recurso-2.png);
}

.nosotros h4{
  font-family: var(--font);
  font-weight: 500;
}

.nosotros h3{
  font-family: var(--font);
  font-size: 18px;
}

@media (min-width: 1024px) {
  .head-nosotros{
    margin-top: -4rem;
    height: 300px;
  }

  .head-nosotros h4{
    font-size: 40px;
  }

  .head-nosotros h1{
    font-size: 50px;
  }
}

.img-head-nosotros{
  text-align: center;
  margin-top: -50px;
}

.img-head-nosotros img{
  max-width: 80%;  
}

.info-nosotros{
  max-width: 80%;
  margin: 0 auto;
  font-family: var(--font);
  font-weight: 400;
  line-height: 25px;
  font-size: 15px;
  color: gray;
}

.img-info-nosotros{
  text-align: center;
}

.img-info-nosotros img{
  max-width: 70%;
}

@media (min-width: 1024px){
  .img-head-nosotros{
    margin-top: -150px;
  }

  .info-nosotros{
    display: flex;
    align-items: center;
  }

  .info-nosotros p{
    padding-right: 3rem;
    line-height: 2rem;
    font-size: 18px;
  }

  .img-info-nosotros{
    max-width: 25%;
  }
}

/* Duda */

.duda{
  background-color: var(--rojo);
  padding: 0.5rem 0.5rem;
  color: white;
  font-family: "Gotham-Book",Sans-serif;
}

.duda p{
  margin: 0;
}

.duda span{
  font-weight: 900;
}

.tel-duda{
  text-align: right;
}

.tel-duda a{
  text-decoration: none;
  color: white;
  font-weight: 900;
}

@media (min-width:1024px){
  .content-duda{
    margin: 0 auto;
    max-width: 80%;
  }
}

.info-mision p{
  line-height: 25px;
  padding-bottom: 2rem;
}

.info-mision img{
  max-width: 80%;
  padding-bottom: 2rem;
}

@media (min-width:1024px){
  .info-mision img{
    max-width: 75%;
    margin: 0 auto;
  }

  .img-vision{
    max-width: 75%;
    margin: 0 auto;
  }

  .mision-vision{
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 1rem;
    max-width: 100%;
  }

  .info-mision{
    display: flex;
    flex-direction: column;
  }

  .vision{
    grid-column: 2 3;
  }
}

.acreditacion{
  margin-top: -1200px;
  text-align: center;
}

@media (min-width:1024px){
  .acreditacion{
    max-width: 80%;
    margin: -350px auto 0 auto;
  }
}

.acreditacion h1{
  font-family: var(--tituloP);
  letter-spacing: 2.5px;
  font-weight: lighter;
}

.acreditacion h1::after{
  content: "";
  background-color: var(--rojo);
  width: 60px;
  height: 2px;
  display: block;
  margin-top: 1rem;
  margin: 0 auto;
}

.info-doc a{
  text-decoration: none;
  color: var(--oscuro);
  font-family: var(--tituloP);
  letter-spacing: 2.5px;
}

.info-doc h2{
  font-family: var(--tituloP);
  letter-spacing: 2.5px;
  font-weight: lighter;
}

.info-doc i{
  color: var(--rojo);
  font-size: 50px;
}

@media (min-width:1024px){

  .doc-acred{
    display: flex;
    justify-content: space-between;
  }
}

/* Contactenos */

.contactenos{
  background-image: url(/img/Mesa-de-trabajo-1-100-7.jpg);
  height: 200px;
}

.datos-contacto{
  margin: 0 auto;
  color: var(--rojo);
  margin-top: -50px;
  font-family: var(--font);
}

.content-contact{
  text-align: center;
}

@media (min-width: 1024px) {
  .content-contact{
    display: flex;
    max-width: 70%;
    margin: 0 auto;
    justify-content: space-between;
  }

  .service-contact{
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
  }

  .i-contact{
    margin-top: -1rem;
    margin-right: 1rem;
  }

  .info-ser-contact h3{
    margin: 0;
    text-align: left;
  }
}

.service-contact{
  border-bottom: 5px solid var(--rojo);
  max-width: 95%;
  margin: 0 auto;
  background-color: white;
  margin-bottom: 2rem;
}

.i-contact{
  padding-top: 1rem;
  font-size: 30px;
}

.link-ph-contact{
  display: flex;
  flex-direction: column;
  padding-bottom: 1rem;
}

.link-ph-contact a{
  text-decoration: none;
  color: var(--rojo);
}

.link-dir-contact{
  padding-bottom: 1rem;
}

.link-dir-contact a{
  text-decoration: none;
  color: black;
}

/* form contacto */

.fondo-form-contact{
  text-align: center;
  background-image: url(/img/mapafondo.jpg);
  opacity: 0.2;
  height: 700px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1200px;
}

@media (min-width: 1024px){
  .fondo-form-contact{
    background-size: 1800px;
  }
}

.contacto-form{
  text-align: center;
  margin-top: -650px;
  height: 600px;
  font-family: var(--font);
}

.contacto-form h2{
  font-family: var(--tituloS);
  color: var(--oscuro);
  letter-spacing: 1px;
  font-weight: 500;
}

.contacto-form h1::after{
  margin: 1rem auto;
}

@media (min-width:1024px){
  .contacto-form{
    display: flex;
    max-width: 70%;
    justify-content: space-between;
    margin: -700px auto 0 auto;
    align-items: center;
  }

  .form-tit{
    text-align: center;
    width: 50%;
  }

  .form-tit h2{
    font-size: 35px;
  }

  .form-tit h1{
    font-size: 40px;
  }

  .form-contactenos{
    width: 50%;
  }
}

.form-contact{
  display: flex;
  flex-direction: column;
  max-width: 80%;
  margin: 0 auto;
}

.form-contact input{
  border: none;
  border-radius: 5px;
  border-bottom: solid 1px var(--rojo);
  padding: 20px 10px;
}

.form-contact textarea{
  border: none;
  border-radius: 5px;
  border-bottom: solid 1px var(--rojo);
  padding: 20px 10px;
}

.terminos-form-contact a{
  text-decoration: none;
  color: var(--rojo);
}

.btn-form-contact{
  padding-top: 1rem;
}

.btn-form-contact input{
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid 2px var(--rojo);
  border-radius: 3px;
  margin-bottom: 1rem;
  width: 70%;
  background-color: white;
}

/* Terminos y condiciones */

.terminos{
  background-image: url(/img/servicios/Recurso-2.png);
}

@media (min-width:1024px){
  .terminos{
    height: 100px;
  }
}

.term-cond p{
  text-align: center;
  font-family: "Gotham-Book",Sans-serif;
  font-size: 16px;
  color: grey;
  padding: 2rem;
}

@media (min-width:1024px){
  .term-cond p{
    max-width: 70%;
    margin: 0 auto;
    letter-spacing: 1px;
  }
}

/* Blog */

.blog{
  background-image: url(/img/header/logistica-aduanera.jpg);
  height: 300px;
}

@media (min-width:1024px){
  .blog{
    height: 200px;
  }
}

.fondo-pub{
  background-image: url(/img/mapafondo.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 2000px;
  opacity: 0.3;
}

.publicaciones{
  position: relative;
  top: -2100px;
  margin: 0 auto;
  margin-bottom: -1900px;
}

.img-pub-1{
  background-image: url(/img/free-bg-new-1.jpg);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
}

.publicacion{
  max-width: 95%;
  margin: 0 auto;
  -webkit-box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 30px -15px rgba(0,0,0,0.75);
  border-radius: 10px;
  margin-bottom: 1rem;
  margin-top: 1rem;
  background-color: white;
}

.info-pub{
  padding: 2rem;
  font-size: 15px;
  color: #777;
  font-family: var(--font);
}

.info-pub a{
  text-decoration: none;
  color: #B7B4B4;
  font-family: var(--font);
}

.info-pub h2{
  font-weight: 400;
}

.info-pub p{
  padding-bottom: 1rem;
}

.info-pub a:last-child{
  text-decoration: none;
  color: var(--rojo);
  font-family: var(--font);
  font-size: 12px;
}

.fecha-pub{
  font-family: var(--font);
  color: #B7B4B4;
  padding: 0.3rem 2rem;
  border-top: solid 1px #adadad;
  font-size: 12px;
}

.img-pub-2{
  background-image: url(/img/counter-bg-1.jpg);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
}

.img-pub-3{
  background-image: url(/img/servicios/Recurso-2.png);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
}

.img-pub-4{
  background-image: url(/img/agencia-de-aduanas-colombia.jpg);
  height: 200px;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
}

.sidebar-blog{
  max-width: 90%;
  margin: 0 auto;
}

.sidebar-blog img{
  max-width: 300px;
}

.info-suc-blog{
  display: flex;
  flex-direction: column;
}  

.sidebar-blog p{
  font-family: var(--font);
  justify-content: center;
  color: #B7B4B4;
}

.info-suc-blog a{
  padding-top: 1rem;
}

.datos-bog-blog p{
  color: black;
  margin: 0;
}

.datos-bog-blog a{
  color: #777;
  text-decoration: none;
}

.datos-bog-blog i{
  color: var(--azul);
}

.btn-serv-blog{
  text-align: center;
  padding: 0.5rem 1rem;
  border: solid 2px var(--rojo);
  border-radius: 3px;
  margin-bottom: 1rem;
  margin-top: 2rem;
  width: 70%;
}

.btn-serv-blog a{
  text-decoration: none;
  color: var(--rojo);
  font-family: var(--font);
  font-weight: 500;
}

.indice-blog h1{
  font-family: var(--font);
  color: var(--rojo);
  font-weight: 400;
}

.indice-blog ul{  
  list-style-type: circle;  
  color: var(--rojo);
}

.indice-blog li{
  margin-left: -1rem;
}

.indice-blog a{
  text-decoration: none;
  color: #777;
  font-family: var(--font);
  font-size: 15px;
}

@media (min-width: 1024px) {
  .publicaciones{
    display: flex;
    justify-content: space-evenly;
    max-width: 80%;
    top: -2000px;
  }

  .content-pub{
    max-width: 70%;
  }    

  .sidebar-blog{
    max-width: 20%;
    margin-top: 100px;
  }
}

/* Puyblicaciones */

.head-posts1{
  background-image: url(/img/free-bg-new-1.jpg);
}

.head-posts2{
  background-image: url(/img/counter-bg-1.jpg);
}

.head-posts3{
  background-image: url(/img/servicios/Recurso-2.png);
}

.head-posts4{
  background-image: url(/img/agencia-de-aduanas-colombia.jpg);
}

.comillas li{
  list-style: none;
}

.contenedor-blog{
  max-width: 90%;
  margin: 0 auto;
  background-color: white;
}

@media (min-width: 1024px){
  .contenedor-blog{
    max-width: 60%;
    margin-top: -200px;
  }
}

.tag{
  color: #707070;
  font-family: var(--font);
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 1.5px;
  padding-top: 1rem;
}

.tag p{
  text-align: center;
}

.articulo{
  text-align: center;
  font-family: var(--font);
  color: #707070;
}

.articulo h1{
  color: #a02521;
  margin-bottom: 1rem;  
  font-weight: 500;
}

.articulo h1::after{
  content: "";
  background-color: var(--oscuro);
  width: 60px;
  height: 2px;
  display: block;
  margin: 1rem auto 0 auto;
}

.articulo span{
  font-weight: 600;
}

.articulo p{
  text-align: left;
  line-height: 30px;
}

.articulo a{
  text-decoration: none;
  color: var(--rojo);
}

.uvt{
  text-align: left;
}

.uvt li{
  font-weight: 700;
  line-height: 30px;
}

.uvt span{
  font-weight: 400;
}

.articulo img{
  max-width: 95%;
}

.niveles{
  text-align: left;
}

.niveles li{
  line-height: 30px;
  padding-bottom: 1rem;
}

.fecha-creacion{
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dotted;
  border-width: 1px 0 1px 0;
  border-color: #B7B4B4;
  margin: 2rem 0;
  color: #B7B4B4;
}

.fecha-creacion i{
  color: rgba(165,104,104,.64);
  padding-right: 1rem;
}

.compartenos-tit{
  font-family: var(--font);
  text-transform: uppercase;
  color: #a02521;
  font-weight: 400;
  letter-spacing: -2px;
  font-size: 20px;
}

@media (min-width: 1024px){
  .compartenos{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1rem;
    margin-bottom: 1rem;
  }
}

.red-social a{
  display: flex;
  align-items: center;
  font-family: var(--font);
  cursor: pointer;
}

.red-social p{
  margin: 0;
  width: 300px;
}

@media (min-width: 1024px){
  .red-social{
    margin: 0 auto;
  }

  .red-social p{
    width: 200px;
  }
}

.fb{
  margin-bottom: 1rem;
}

.fb i{
  background-color: #4267B2;
  padding: 12px;
  font-size: 18px;
  color: white;
}

.fb p{
  background-color: #294e96;
  padding: 10.5px;
  color: white;
  font-size: 15px;
}

.twtr{
  margin-bottom: 1rem;
}

.twtr i{
  background-color: #00acee;
  padding: 12px;
  font-size: 18px;
  color: white;
}

.twtr p{
  background-color: #027baa;
  padding: 10.5px;
  color: white;
  font-size: 15px;
}

.lnkd{
  margin-bottom: 1rem;
}

.lnkd i{
  background-color: #0072b1;
  padding: 12px;
  font-size: 18px;
  color: white;
}

.lnkd p{
  background-color: #035581;
  padding: 10.5px;
  color: white;
  font-size: 15px;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .sr-only class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: " ";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  /*
   * Printing Tables:
   * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
   */
  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}