@charset "UTF-8";



/* Author: Cristian Santander (@crist0sant0) */

/* Project name: TLI 28-07-2017 */ 

@font-face {

  font-family: 'Alice';

  src: url('../fonts/Alice-Regular.eot');

  src: url('../fonts/Alice-Regular.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Alice-Regular.woff') format('woff'),

    url('../fonts/Alice-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Lato';

  src: url('../fonts/Lato-Regular.eot');

  src: url('../fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Lato-Regular.woff2') format('woff2'),

    url('../fonts/Lato-Regular.woff') format('woff'),

    url('../fonts/Lato-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Lato';

  src: url('../fonts/Lato-Light.eot');

  src: url('../fonts/Lato-Light.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Lato-Light.woff2') format('woff2'),

    url('../fonts/Lato-Light.woff') format('woff'),

    url('../fonts/Lato-Light.ttf') format('truetype');

  font-weight: 300;

  font-style: normal;

}



@font-face {

  font-family: 'Lato';

  src: url('../fonts/Lato-Bold.eot');

  src: url('../fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Lato-Bold.woff2') format('woff2'),

    url('../fonts/Lato-Bold.woff') format('woff'),

    url('../fonts/Lato-Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

}



@font-face {

  font-family: 'Rokkitt';

  src: url('../fonts/Rokkitt-Light.eot');

  src: url('../fonts/Rokkitt-Light.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Rokkitt-Light.woff2') format('woff2'),

    url('../fonts/Rokkitt-Light.woff') format('woff'),

    url('../fonts/Rokkitt-Light.ttf') format('truetype');

  font-weight: 300;

  font-style: normal;

}



@font-face {

  font-family: 'Rokkitt';

  src: url('../fonts/Rokkitt-Regular.eot');

  src: url('../fonts/Rokkitt-Regular.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Rokkitt-Regular.woff2') format('woff2'),

    url('../fonts/Rokkitt-Regular.woff') format('woff'),

    url('../fonts/Rokkitt-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Rokkitt';

  src: url('../fonts/Rokkitt-Bold.eot');

  src: url('../fonts/Rokkitt-Bold.eot?#iefix') format('embedded-opentype'),

    url('../fonts/Rokkitt-Bold.woff2') format('woff2'),

    url('../fonts/Rokkitt-Bold.woff') format('woff'),

    url('../fonts/Rokkitt-Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

}



.transition-all, a, a:hover,

.header.fixed picture.logo img{

  -webkit-transition: all 0.5s ease 0s; /* Safari 4+ */

  -moz-transition:    all 0.5s ease 0s; /* Fx 5+ */

  -o-transition:      all 0.5s ease 0s; /* Opera 12+ */

  transition:         all 0.5s ease 0s; /* IE 10+ */

}

.voltear{

  -moz-transform: scaleX(-1); /* Firefox */

  -o-transform: scaleX(-1); /* Opera */

  -webkit-transform: scaleX(-1); /* Chrome y Safari */

  transform: scaleX(-1); /* w3org */

  filter: FlipH; /* Internet Explorer */

}

.shadow{

  box-shadow: 1px 0 1px rgba(0,0,0,0.5);

  position: relative;

}

body{

  font-family: 'Lato', sans-serif;

  background-color: #fff;

  line-height:normal;

  font-size: 16px;

  color: #242424;

}

p{

  font-family: 'Lato', sans-serif;

  line-height: 1.2;

  text-align: justify;

}

nav.nav .toggl{

  text-align: center;

  padding:5px;

  border-bottom: 1px solid rgba(188,190,192,0.4);

}

nav.nav li{

  display: none;

}

nav.nav .toggl:hover,

nav.nav .toggl:focus{

  cursor: pointer;

}

.tli-icon::before {

  content: "";

  background: url(../img/tliicon.png);

  opacity: 0.15;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  position: absolute;

  z-index: -1;   

  background-size: auto 100%;

  background-repeat: no-repeat;

}

.tli-right{

  width: 100%;

  text-align: right;

}

header.header{

  display: flex;

  flex-direction: row;

  width: 100%;
  height: 100vh;

  flex-wrap: wrap;

  padding: 10px 0;

  align-items: center;

  position: relative;

  background-color: rgba(127,127,127,1);

  z-index: 999;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

header.header.fullback{
}

picture.logo{

  width: 100%;
  text-align: center;
  margin-top: -100px;

}

picture.logo img{

  max-width: 90%;

}
/* CSS NAV */

.toggl{

  width: 100%;

  text-align: center;

  background-color: rgba(27,47,68,0.7);
  position: absolute;
  bottom: 0;
  left: 0;
}

.toggl p{

  color: #fff;

  font-size: 1.2em;

  padding: 10px 5px;

  display: inline-block;

}
.toggl p:after{
  content: ' MENU';
}
.toggl:hover,
.toggl:focus{
  background-color: rgba(27,47,68,0.9);
}
.header.fullback .toggl{
  background-color: rgba(27,47,68,0.9);
}
.toggl:hover p,

.toggl:focus p{

  cursor: pointer;
  color: #fff;

}
header.header.fixed .toggl{
  position: fixed;
  top: 0;
  bottom: inherit;
}
header.header.fixed nav.nav{
  bottom: inherit;
  top: 43px;
  position: fixed;
}
nav.nav{

  width: 100%;
  background-color: rgba(27,47,68,0.9);
  font-family: 'Alice', sans-serif;
  bottom: 43px;
  left: 0;
  position: absolute;
}

nav.nav ul{

  display: flex;

  flex-wrap: wrap;

}

nav.nav li{

  width: 33.33%;

}

nav.nav a{

  line-height: 48px;

  text-align: center;

  width: 100%;

  color: #fff;

}

nav.nav a:hover,

nav.nav a:focus{

  background-color: #1b2f44;

  color: #fff;

}

nav.nav a.active{

  color: #ea1f48;

}

/* FIN CSS NAV */

/* TLI-TOP */

.tli-top picture img{ 

  width: 100%;

  width: 100vw;

  height: 100%;

  height: 100vh;

  object-fit: cover;

  -moz-object-fit: cover;

  -webkit-object-fit: cover;

  -o-object-fit: cover;

  display: block;

  object-position: bottom;

  -moz-object-position: bottom;

  -webkit-object-position: bottom;

  -o-object-position: bottom;

}

.tli-top{

  display: inline-block;

  width: 100%;

  position: relative;

}

.top-article{

  position: absolute;

  top: 16%;

  left: 0;

  background: rgba(0,0,0,0.5);

  color: #fff;

  padding: 10px;

}

.top-article p{

  text-align: justify;

  margin-bottom: 10px;

}

.top-article h1{

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  text-align: center;

  width: 100%;

  color: #fff;

  text-shadow: 1px 1px 1px #000;

  font-size: 1.4em;

}

/* FIN TLI-TOP */

/* TITLE-TEXT */
.nosotros, .services, .aliados,
.contacto-tli{
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.title-text{

  display: inline-block;

  padding: 30px 10px;

  position: relative;

}

.title-text h2,
.contacto-tli h2,
.title-text h3{

  font-size: 1.5em;

  color: #fff;
  text-shadow:1px 1px 1px #000;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  width: 100%;

  text-align: center;

  margin-bottom: 10px;
  text-transform: uppercase;

}
.title-text h3{
  font-size: 1.2em;
}
.title-text{

  text-align: justify;

}

/* FIN TITLE-TEXT */

/* SERVICES */

.services, .nosotros{

  background-color: #fff;

  color: #1b2f44;

  padding: 60px 0 0;

  padding-top: 60px;

}

.services .services-title,
.nosotros .nosotros-title{

  width: 100%;

  text-align: center;

  margin-bottom: 20px;

}

.services h2,
.nosotros h2{

  font-size: 1.5em;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  text-transform: uppercase;
  color: #fff;
  text-shadow: 1px 1px 1px #000;

}

.services .aereo{

  border-top: 1px solid rgba(255,255,255,0.5);

}

.services article,
.nosotros article{

  padding: 2em 1.5em;
  border-bottom: 1px solid rgba(255,255,255,0.5);

}
.nosotros article{
  background-color: rgba(27,47,68,0.7);
  margin: 2em 1em;
  border:none;
}
.services .icon,
.nosotros .icon{

  width: 100%;

  text-align: center;

  font-size: 5em;

  display: inline-block;
  text-shadow: 1px 1px 1px #000;
  color: #fff;

}

.services h3,
.nosotros h3{

  width: 100%;

  text-align: center;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  text-transform: uppercase;

  font-size: 1.4em;

  color: #fff;

  text-shadow: 1px 1px 1px #000;

}

.services p,
.nosotros p{

  color: #fff;
  text-shadow: 1px 1px 1px #000;
  text-align: justify;

}

.services .aereo,

.services .terrestre,

.services .maritimo,

.services .bodegaje{

  background-image: url('../img/tlisky.jpg');

  background-repeat: no-repeat;

  background-size: cover;

  background-position: bottom;

  background-color: #1b2f44;

  background-blend-mode: overlay;
  background-attachment: fixed;

}

.services .terrestre{

  background-image: url('../img/tliroad.jpg');

}

.services .maritimo{

  background-image: url('../img/tlisea.jpg');

}

.services .bodegaje{

  background-image: url('../img/tliwh.jpg');

}

.services .aereo{

  padding-top: 0;

}

.services .aereo .icon{

  font-size: 8em;

  line-height: 0;

   -ms-transform: rotate(-35deg); /* IE 9 */

    -webkit-transform: rotate(-35deg); /* Chrome, Safari, Opera */

    transform: rotate(-35deg);

}

/* FIN SERVICES */

/* ALIADOS */

.aliados{

  padding: 60px 10px 30px;

  display: flex;

  flex-direction: column;

  position: relative;

}

.aliados h2{

  font-size: 1.5em;

  color: #fff;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  width: 100%;

  text-align: center;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.aliados picture{

  padding: 10px 30px;

  width: 100%;

  display: inline-block;

  text-align: center;

}

.aliados img{

  width: 80%;

}

.aliados article{

  width: 100%;

  margin-bottom: 30px;

  padding: 0 1em;
  color: #fff;
}

.aliados h3{

  color: #fff;

  text-transform: uppercase;

  font-family: 'Rokkitt', serif;

  font-size: 1.4em;

  margin-bottom: 10px;

  width: 100%;

  text-align: center;

}

.product{

  padding:0;

  width: 100%;

  display: inline-block;

  text-align: center;

}

.product img{

  width: 100%;

  margin-bottom: -5px;

}

/* FIN ALIADOS */

/* TLI-RIBBON */

.tli-ribbon{

  background-color: #fff;

  color: #ea1f48;

  text-align: center;

  padding: 30px 10px;

}

.tli-ribbon p{

  font-size: 1.5em;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  margin-bottom: 10px;

  text-align: center;

}

.tli-ribbon .tli-button{

  background-color: #1b2f44;

  color: #fff;

}

.tli-ribbon .tli-button:hover,

.tli-ribbon .tli-button:focus{

  background-color: #fff;

  color: #ea1f48;

}

/* FIN TLI-RIBBON */

/* FOOTER */

footer.footer{

  background-color: #0a0c1f;

  color: #fff;

  display: flex;

  padding: 30px 10px;

  flex-direction: column;

}

.footer .copy, .footer .logo{

  padding: 10px;

}

.footer .copy{

  width: 100%;

}

.copy p{

  text-align: center;

}

.footer .logo{

  width: 100%;

  text-align: center;

}

.footer .logo img{

  max-height: 60px;

}

.footer .copy a{

  color: #fff;

  text-decoration: underline;

}

.footer .copy a:hover,

.footer .copy a:focus{

  color: #ea1f48;

}

/* FIN FOOTER */





/* FORM CONTACT */

.tli-top-form{

  position: relative;

}

.form-picture{

  position: absolute;

  top:0;

  width: 100%;

  height: 100%;

  left: 0;

}

.form-picture img{

  width: 100%;

  height: 100%;

  object-fit: cover;

  -moz-object-fit: cover;

  -webkit-object-fit: cover;

  -o-object-fit: cover;

  display: block;

}

.top-form{

  position: relative;

  width: 100%;

  padding: 2em 1em 2em;
  display: none;

}

.top-form h2{

  font-size: 1.5em;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  text-transform: uppercase;

  color: #1b2f44;

  text-align: center;

  margin-bottom: 10px;
  display: none;

}
.pqr-texto h3{
  color: #1b2f44;
  box-shadow: none;
}
.tli-top-form .form-picture::before{

  content: '';

  position: absolute;

  background-color: #1b2f44;

  opacity: 0.6;

  mix-blend-mode: multiply;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.top-form .fieldset{

  display: flex;

  flex-direction: column;

}

.form-group{

  width: 100%;

  margin:0;

  margin-bottom: 10px;

}

.top-form input,

.top-form textarea,

.top-form select{

  background-color: #dfdfdf;

  color: #242424;

  font-family: 'Lato', sans-serif;

  font-size: 1em;

  border: 0;

  width: 100%;

  padding: 5px 10px;

}

.top-form textarea{

  height: 4em;

}
/* CONTACT ZONE */
.contacto-tli{
  padding: 3em 1em;
}
.contacto-tli h2{
  margin-bottom: 2em;
}
.contact-tli-info p span{
  font-size: 1.5em;
  width: 100%;
  display: inline-block;
}
.contact-tli-info p{
  margin-bottom: 0.5em;
  text-align: center;
}
.contact-tli-info .tli-button{
  border: none;
}
.contact-tli-info{
  background-color: rgba(27,47,68,0.85);
  color: #fff;
  text-align: center;
  padding: 1em;
  margin-bottom: 2em;
}
.contact-tli-info h3{
  font-size: 1.4em;
  text-transform: uppercase;
  margin-bottom: 1em;
}
.iframe-tli{
  display: none;
}
/* FIN CONTACT ZONE */
/* FIN FORM CONTACT */



.tli-button,

input[type="submit"]{

  background-color: #ea1f48;

  color: #fff;

  font-family: 'Lato', serif;

  text-transform: uppercase;

  font-size: 1.2em;

  padding: 10px 15px;

  box-shadow:1px 1px 0px 0px #ea1f48 inset;

}

.tli-button:hover,

.tli-button:focus,

input[type="submit"]:hover,

input[type="submit"]:focus{

  background-color: #fff;

  color: #ea1f48;

  box-shadow:1px 1px 0px 0px #ea1f48 inset;

  cursor: pointer;

}

.place-contact{

  display: flex;

  flex-direction: column;

}

.place-title{

  width: 100%;

  font-family: 'Rokkitt', serif;

  font-weight: bold;

  text-align: center;

  border-bottom: 1px solid #1b2f44;

}

.place-title a{

  color: #1b2f44;

  font-size: 1.4em;

  padding: 10px;

  width: 100%;

  text-transform: uppercase;

}

.place-title a:hover,

.place-title a:focus{

  background-color: #1b2f44;

  color: #fff;

}

.place-title.place-blue{

  border-top: 2px solid #ea1f48;

  background-color: #1b2f44;

}

.place-title.place-blue a{

  color: #fff;

}

.place-info{

  background-color: #1b2f44;

  color: #fff;

  display: flex;

  flex-direction: column;

  padding: 1em;

  display: none;

  border-bottom: 2px solid #ea1f48;

}

.place-info p{

  width: 100%;

  text-align: left;

  font-size: 1.2em;

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 5px 0;

  justify-content:center;

}

.place-info span{

  font-size: 1.8em;

}

.place-info iframe{

  width: 100%;

  height: 100%;

  position: relative;

}

.place-info .iframe{

  pointer-events: none;

  width: 100%;

  height: 200px;

  background-color: rgba(0,0,0,0.3);

  display: block;

}

#ibogota{

  display: flex;

}

/* PQR */

.pqr-section{

  display: flex;

  flex-direction: column;

  padding: 1em;

  background-color: #1b2f44;

}

.pqr-box{

  width: 100%;

  display: flex;

  flex-direction: column;

  color: #fff;

  padding: 2em 0;

  border-bottom: 1px solid #ea1f48;

}

.pqr-box:last-child{

  border: none;

}

.pqr-icon{

  width: 100%;

  text-align: center;

  margin-bottom: 10px;

}

.pqr-icon span{

  font-size: 5em;

}

.pqr-title{

  font-size: 1.5em;

  width: 100%;

  text-align: center;

  text-transform: uppercase;

  margin-bottom: 10px;

}

.pqr-box p{



}

/* FIN PQR */

.group-flex{

  display: flex;

  flex-direction: row;

}

.group-flex .group-50{

  width: 50%;

}

.group-flex .group-50:first-child{

  padding-left: 0;

  padding-right: 5px;

}

.group-flex .group-50:last-child{

  padding-right: 0;

  padding-left: 5px;

}

.inumber{

  position: relative;

}

.inumber::after{

  content: ' Kg.';

  color: #666;

  position: absolute;

  top: 5px;

  right: 30px;

}

.icarga,

.itransporte,

.iservicio{

  position: relative;

}

.icarga::after,

.itransporte::after,

.iservicio::after{

  content: 'Tipo de carga';

  color: #666;

  background-color: #dfdfdf;

  position: absolute;

  top: 8px;

  left: 10px;

  font-size: 0.8em;

}

.itransporte::after{

  content: 'Tipo de transporte';

}

.iservicio::after{

  content: 'Servicio Adicional';

  left: 20px;

}

.top-form legend{

  color: #1b2f44;

  margin-bottom: 10px;

  font-size: 1em;

  text-transform: uppercase;

  width: 100%;

}

/* NOTIFICACIONES CONTACT FORM 7 */

div.wpcf7-validation-errors {

    border: none;

    font-size: 1.5em;

    background-color: #95860E;

    color: #fff;

    margin-top: 0em;

    margin-bottom: 1em;

}
div.wpcf7-mail-sent-ok{
  border: none;

    font-size: 1.5em;

    background-color: #398f14;

    color: #fff;

    margin-top: 0em;

    margin-bottom: 1em;
}
div.wpcf7-mail-sent-ng {

    border: none;

    font-size: 1.5em;

    background-color: #FF1A1A;

    color: #fff;

    margin-top: 0em;

    margin-bottom: 0;

    padding-bottom: 1em;

}



span.wpcf7-not-valid-tip {

    color: #fff;

    font-size: 1em;

    font-weight: normal;

    display: block;

    background-color: #FF1A1A;

    padding: 2px 10px;

}

/* MODAL  */

.jmgmodal {

position: fixed; margin: auto;

top:0;left:0;right:0;bottom:0;

background: rgba(34,34,68,.8);

box-sizing: content-box;

visibility: hidden; opacity: 0;

transition: all .12s; z-index: 99;

}

.jmgmodal.visible {

visibility: visible; opacity: 1;

}

.jmgmodal * {box-sizing: inherit}

.jmgmodal .panel {

position: absolute; margin: auto;

top:0;left:0;right:0;bottom:0;

max-width: 600px; max-height: 70vh;

background: #fff; border-radius: 10px;

color: #000; padding: 50px 0;

transform: translateY(-25%);

transition: all .12s;

}

.jmgmodal.nofooter .panel {

padding: 0;

}

.jmgmodal.visible .panel {

transform: none;

}

.jmgmodal .title {

position: absolute; top: 0;

width: 100%; height: 50px;

line-height: 50px;

background: #1b2f44;

font-weight: bolder; padding: 0 2em;

box-shadow: 2px 0 10px rgba(0,0,0,.6);

border-radius: 10px 10px 0 0;

box-sizing: border-box;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

color: #fff;

display: none;

}

.jmgmodal .panel .close {

position: absolute; top: .25em; right: -0.75em;

cursor: pointer; font-size: 25px;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

color: #fff;

}

.jmgmodal .panel .content {

max-height: 100%; overflow: auto;

padding: 1em; box-sizing: border-box;

}

.jmgmodal .panel .content iframe:only-child {

border: 0; width: 100%;

height: 100%; height: 40vh;

min-height: 200px;

}

.jmgmodal .panel .content img:only-child {

width: 100%; max-width: 100%;

}

.jmgmodal .panel .footer {

position: absolute; bottom: 0;

width: 100%; background: #1b2f44;

font-weight: bolder; padding: 0 .5em;

box-shadow: 2px 0 10px rgba(0,0,0,.6);

border-radius: 0 0 10px 10px;

box-sizing: border-box;

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

text-align: right;

}

.jmgmodal .panel .footer .action {

border-radius: 10px; color: #000;

background: #fff; border: 0;

min-width: 80px; min-height: 35px;

font-weight: bold; cursor: pointer;

margin-left: 20px;

transition: all .12s;

}

.jmgmodal .panel .footer .action:hover {

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);

}

.aliados-button{

  display: flex;

  flex-direction: row;

  justify-content: center;

  margin-top: 20px;

}

.aliados-button .tli-button{

  font-size: 0.8em;

  border: none;

  line-height: 2;

  margin:0 10px;

}

.jmgmodal .panel{

  max-width: 80vw;

  max-height: 70vw;

}

@media screen and (orientation: portrait) {}

@media screen and (orientation: landscape) {

  .jmgmodal .panel {

    max-width: 70vw;

    max-height: 45vw;

  }
}
@media screen and (min-width:26.25rem) and (orientation: landscape) {

  .top-article{

    width: 50%;

    left: inherit;

    right: 0;

    top: inherit;

    bottom: 0;

  }
}
@media screen and (min-width:15rem){ /* 240px */
}
@media screen and (min-width:20rem){ /* 320px */
}
@media screen and (min-width:26.25rem){ /* 420px */
}
@media screen and (min-width:30rem){ /* 480px */
}
@media screen and (min-width:37.5rem){ /* 600px */

  .aliados-button .tli-button{

    line-height: 1.5;

  }
}
@media screen and (min-width:48rem){ /* 768px */

  .top-form legend{

    padding: 0 10px;

    font-size: 1.5em;

  }

  nav.nav{

    width: 100;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;

  }

  nav.nav ul{

    justify-content: center;

  }

  nav.nav li{

    display: block;

    width: auto;

  }

  nav.nav a{

    padding:0 10px;

    font-size: 1.2em;

  }

  .toggl{

    display:none;

  }

  picture.logo{

    width: 100%;

  }

  .top-article{

    padding: 2em;

  }

  .top-form{

    padding-bottom: 2em;

  }

  .top-form form{

    max-width: 768px;

    margin: 0 auto;

  }

  .top-article h1, 

  .top-form h2{

    font-size: 2em;

    margin-bottom: 10px;

  }

  .top-article p{

    font-size: 1.2em;

    margin-bottom: 20px;

  }

  .tli-button{

    font-size: 1.5em;
    text-align: center;
    letter-spacing: 0.1em;

  }

  .title-text article{

    padding: 2em;

  }
  .title-text h2, .services h2, .aliados h2, .contacto-tli h2{

    font-size: 2.5em;

  }
  .title-text h3{
    font-size: 2em;
  }
  .contact-tli-info p span {
    font-size: 1.8em;
  }
  .contact-tli-info p{
    font-size: 1.2em;
  }
  .contacto-tli h2{
    margin: 1em 0;
  }
  .title-text p{

    font-size: 1.5em;

  }

  .title-text picture{

    text-align: center;

    width: 100%;

    display: inline-block;

  }

  .services{

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    padding: 0;

    background-color: #fff;

  }

  .services article{

    width: 50%;

    padding: 30px;

    border: none;

  }

  .services h3, .aliados h3, .tli-ribbon p{

    font-size: 2.2em;

  }

  .services p, .aliados p{

    font-size: 1.2em;

  }

  .services h2{

    display: inline-block;

    padding: 3px 20px;

    background-color: #fff;

    color: #ea1f48;

    font-family: 'Rokkitt',sans-serif;

  }

  .services .services-title{

    order: 2;

    margin: 0;

    margin-top: -25px;

    margin-bottom: -25px;

    z-index: 10;

  }

  .services .aereo,

  .services .maritimo,

  .services .terrestre,

  .services .bodegaje{

    border: none;

    z-index: 1;

  }

  .services .aereo, 

  .services .maritimo{

    border-right: 1px solid #fff;

  }

  .services .terrestre, 

  .services .bodegaje{

    border-left: 1px solid #fff;

  }

  .services .aereo, 

  .services .terrestre{

    border-bottom: 1px solid #fff;

    order: 1;

  }

  .services .maritimo, 

  .services .bodegaje{

    border-top: 1px solid #fff;

    order: 3;

  }

  .aliados .aliados-wrapper{

    flex-wrap: wrap;

    display: flex;

    flex-direction: row;

  }

  .aliados article{

    width: 50%;

    padding: 1em;

  }

  .aliados img {

    width: 80%;

  }

  footer.footer{

    display: flex;

    flex-direction: row;

    align-items: center;

  }

  footer.footer .copy{

    width: 70%;

  }

  footer.footer .copy p{

    text-align: left;

  }

  footer.footer .logo{

    width: 30%;

    text-align: right;

  }

  .top-form .fieldset{

    display: -webkit-box;

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-flex-direction: row;

    flex-direction: row;

  }

  .top-form .fieldset > div{

   -webkit-box-flex: 1 0 auto;

    -webkit-flex: 1 0 auto;

    flex: 1 0 auto;

    -webkit-flex-shrink: 0;

    flex-shrink: 0;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

  }

  /* desde aqui */

  .group-50{

    width: 50%;

  }

  .group-100, 

  .group-50{

    padding: 0 10px;

  }

  .form-group .tli-button{

    width: auto;

  }

  .place-contact{

    flex-direction: row;

    flex-wrap: wrap;

  }

  .place-title{

    order: 1;

    width: auto;

    flex-grow: 1;

  }

  .place-title a{

    font-size: 1em;

  }

  .place-info{

    order: 2;

    width: 100%;

    padding: 2em 0 0;

    flex-direction: row;

    flex-wrap: wrap;

    justify-content: center;

  }

  .place-info .iframe{

    margin-top: 10px;

    width: 100%;

    order: 4;

  }

  .place-info p{

    text-align: center;

  }

  .place-info .info-persona,

  .place-info .info-email{

    order: 1;

    width: 50%;

  }

  .place-info .info-telefono,

  .place-info .info-celular{

    order: 2;

    width: 50%;

  }

  .place-info .info-lugar{

    order: 3;

    width: 100%;

  }

  .contact-info{

    display: flex;

    flex-direction: row;

  }

  .contact-box{

    width: 33.33%;

    padding: 2em 0;

  }

  .contact-box .place-info{

    display: block;

    background-color: transparent;

    color: #242424;

    padding: 1em 0 0;

    border: none;

  }

  .contact-box .place-title{

    width: 100%;

    text-align: center;

    font-size: 1.2em;

    border: none;

  }

  .contact-box .place-title a{

    color: #ea1f48;

    pointer-events: none;

    cursor: default;

  }

  .contact-box .place-info p{

    width: 100%;

    font-size: 1em;

    flex-direction: column;

  }

  .contact-box .place-info span{

    width: 100%;

    font-size: 1.5em;

    color: #ea1f48;

  }

  .pqr-section{

    flex-direction: row;

    padding: 2em 1em;

  }

  .pqr-box{

    width: 33.33%;

    border: none;

    border-right: 1px solid #ea1f48;

    padding: 0 1em;

  }

  .pqr-box:last-child{

    border: none;

  }

  .jmgmodal .panel{

    max-width: 60vw;

    max-height: 45vh;

  }
  .nosotros-all{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .nosotros-all h2{
    width: 100%;
    flex-basis: 100%;
  }
  .nosotros-all article{
    width: 45%;
    flex-basis: 45%;
  }
  .services .aereo, .services .terrestre, .services .maritimo, .services .bodegaje {
    background-position: left bottom;
  }
  .contacto-tli {
    padding: 3em 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .contact-tli-info {
    width: 45%;
    margin: 1em;
  }
  .contact-tli-info .tli-button,
  .aliados-button .tli-button{
    font-size: 1em;
  }
  header.header.fixed nav.nav{
    top: 0px;
  }
  .nosotros h3 {
    margin-bottom: 1em;
    font-size: 1.5em;
  }
  .nosotros p{
    font-size: 1.3em;
  }
  .contact-tli-info{
    max-width: 420px;
  }
}
@media screen and (min-width:62rem){ /* 992px */

  nav.nav a{

    font-size: 1.2em;

  }

  .top-article {

    width: 50%;

    left: inherit;

    right: 0;

    top: 100px;

    bottom: inherit;

  }

  .title-text article {

      padding: 2em 3em;

  }

  .tli-ribbon article{

    display: flex;

    flex-direction: row;

    align-items: center;

    max-width: 1024px;

    margin:0 auto;

  }

  .tli-ribbon p{

    width: 70%;

    text-align: left;

  }

  .tli-ribbon a{

    width: 30%;

  }

  .tli-ribbon{

    text-align: center;

  }

  .services article{

    display: flex;

    flex-direction: row;

    align-items: center;

  }

  .services .icon{

    font-size: 10vw;

  }

  .services .aereo .icon{

    font-size: 14vw;

  }

  .services article .icon{

    width: 30%;

  }

  .services article .info{

    width: 70%;

  }

  .services .aereo .icon,

  .services .maritimo .icon{

    order: -1;

  }

  .services .terrestre .info,

  .services .bodegaje .info{

    order: -1;

  }

  .services .aereo{

    padding-top: 30px;

  }

  .place-info .info-persona,

  .place-info .info-email,

  .place-info .info-celular,

  .place-info .info-telefono,

  .place-info .info-lugar{

    padding: 0.5em 2em;

  }

  .place-info .info-persona,

  .place-info .info-telefono{

    justify-content: flex-end;

  }

  .place-info .info-email,

  .place-info .info-lugar{

    justify-content: flex-start;

  }

  .place-info .info-celular,

  .place-info .info-telefono,

  .place-info .info-lugar{

    width: 33.33%;

  }

  .place-info p {

    font-size: 1.4em;

  }

  .place-info .info-celular{

    justify-content: center;

  }

  .place-title a {

    font-size: 1.3em;

  }

  .place-info .iframe {

    height: 300px;

    margin-top: 2em;

  }

  .contact-box .place-info p {

    font-size: 1.2em;

  }

  .contact-box .place-info span {

    font-size: 2em;

  }

  .pqr-section{

    padding: 3em;

  }

  .pqr-title{

    font-size: 2em;

  }

  .pqr-icon span{

    font-size: 6em;

  }

  .pqr-box{

    padding: 0 2em;

  }

  .pqr-box p{

    font-size: 1.2em;

  }
}
@media screen and (min-width:75rem){ /* 1200px */


  .top-article{

    top: 200px;

  }

  .title-text, .aliados{

    text-align: center;

    width: 100%;

  }

  .title-text article, .aliados .aliados-wrapper{

    width: 1024px;

    margin: 0 auto;

    padding: 2em 0;

  }
  .title-text article{
    margin: 2em auto;
    padding: 2em;

  }
  .place-title a {

    font-size: 1.5em;

  }

  .top-form{

    padding-bottom: 3em;

  }

  .form-group{

    margin-bottom: 20px;

  }

  .top-form input, .top-form textarea, .top-form select{

    font-size: 1.2em;

  }

  .icarga::after, .itransporte::after, .iservicio::after{

    font-size: 1em;

  }

  .tli-button, input[type="submit"]{

    font-size: 1.5em;

  }

  .pqr-section{

    justify-content: center;

  }

  .pqr-box{

    width: 350px;

  }
  .nosotros-all {
    width: 1024px;
    margin: 0 auto;
  }
  .services .aereo, .services .maritimo{
    justify-content: right;
  }
  .services .terrestre, .services .bodegaje{
    justify-content: left;
  }
  .services article .info{
    max-width: 420px;
  }
}
@media screen and (min-width: 90rem) {  /* 1440px */
}
@media screen and (min-width: 120rem) {  /* 1920px */
}
.top-form.pqr-form{
  display: block;
}
.top-form.pqr-form h2{
  display: block;
}
.animation-element {
  opacity: 0;
  position: relative;
}
/*animation element sliding left*/

.animation-element.slide-left {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left:nth-of-type(even){
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

.bounce-up {
  opacity: 0;
  -moz-transition: all 700ms ease-out;
  -webkit-transition: all 700ms ease-out;
  -o-transition: all 700ms ease-out;
  transition: all 700ms ease-out;
  -moz-transform: translate3d(0px, 100px, 0px);
  -webkit-transform: translate3d(0px, 100px, 0px);
  -o-transform: translate(0px, 100px);
  -ms-transform: translate(0px, 100px);
  transform: translate3d(0px, 100, 0px);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bounce-up.in-view {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}