@charset "utf-8";
:root {
  --color-negro-pcg : #282828;
  --color-verde-pcg : #758F2A;
  --color-crema-pcg : #E3DCCB;
  --color-blanco    : #FFF;
}
body {
  background-color : var(--color-crema-pcg) !important;
}
textarea {
  resize : none;
}
/*
Al seleccionar un campo de ingreso de texto, o un select, en browser realiza un zoom. (iphone)
http://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone 
*/
@media screen and (-webkit-min-device-pixel-ratio : 0) {
  select, textarea, input {
    font-size : 16px !important;
  }

  input[type="button"],
  input[type="submit"] {
    -webkit-appearance : none;

  }
}
.videoWrapper {
  position       : relative;
  padding-bottom : 75%;
  padding-top    : 0;
  height         : 0;
}
.videoWrapper iframe {
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 100%;
  height   : 100%;
}

.aspectRatio43,
.aspectRatio1,
.aspectRatio169,
.aspectRatio165,
.aspectRatio164 {
  position : relative;
}
:is(.aspectRatio43,
   .aspectRatio1,
   .aspectRatio169,
   .aspectRatio165,
   .aspectRatio164):before {
  display : block;
  content : " ";
  width   : 100%;

}
.aspectRatio1:before {
  padding-top : 100%;
}
.aspectRatio43:before {
  padding-top : calc((3 / 4) * 100%);
  /*padding-top : 75%;*/
}
.aspectRatio169:before {
  padding-top : calc((9 / 16) * 100%);
  /*padding-top : 56.25%;*/
}
.aspectRatio164:before {
  padding-top : calc((4 / 16) * 100%);
  /*padding-top : 12.25%;*/
}
.aspectRatio165:before {
  padding-top : calc((5 / 16) * 100%);
  /*padding-top : 12.25%;*/
}
.backCover {
  background-position : center;
  background-size     : cover;
  background-repeat   : no-repeat;
}
.splide {
  /*opacity:.8;*/
}

.bannerSection {
  z-index   : 1;

  top       : 50%;
  left      : 0;
  width     : 100%;
  transform : translateY(-50%);
}
.cont-bannerSection {
  /*! background-image    : url(/imagenes/fotos/contenedores-envio-rojos-azules-fila.jpg); */
  /*! background-size     : cover; */
  /*! background-position : center; */
  background-color : #282828;
}
.bgServicios {
  background-image      : url(/imagenes/fotos/operacion-contenedores-puerto-serie.jpg);
  background-size       : cover;
  background-position   : center;
  background-attachment : fixed;
}
.bgContacto {
  background-image      : url(/imagenes/fotos/vista-aerea-buque-carga-contenedor-carga-puerto.jpg);
  background-size       : cover;
  background-position   : center;
  background-attachment : fixed;
}
.bgContactoCrema {
  background-color : #FFFFFFD6;
}
.text-shadow {
  text-shadow : 0 0 2px #FFF
}
.fs-normal {
  font-size : 1em;
}
.color-333 {
  color : #333;
}
.footer-logo {
  filter : grayscale(1) invert(1);
}
.mid-portada {
  overflow : hidden;
}

.color-negro-pcg {
  color : var(--color-negro-pcg);
}
.bg-color-negro-pcg {
  background-color : var(--color-negro-pcg);
}
.border-color-negro-pcg {
  border-color : var(--color-negro-pcg);
}
.color-verde-pcg {
  color : var(--color-crema-pcg);
}
.bg-color-verde-pcg {
  background-color : var(--color-verde-pcg);
}
.border-verde-negro-pcg {
  border-color : var(--color-verde-pcg);
}
.color-crema-pcg {
  color : var(--color-crema-pcg);
}
.color-blanco {
  color : var(--color-blanco);
}
.bg-color-crema-pcg {
  background-color : var(--color-crema-pcg);
}
.border-crema-negro-pcg {
  border-color : var(--color-crema-pcg);
}
.gradient-blanco-crema {
  background : rgb(255, 255, 255);
  background : -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(227, 220, 203, 1) 100%);
  background : -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(227, 220, 203, 1) 100%);
  background : linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 41%, rgba(227, 220, 203, 1) 100%);
  filter     : progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#e3dccb", GradientType=1);
}
.fw-normal {
  font-weight : 300 !important;
}
.color-gray {
  color : #999;
}
.bannerSection {

  padding-top : 0;
}
.first-section {
  margin-top : -26px;
}
.text-overlap-style-01 {
  bottom : -110px !important;
}
#splideNosotros .color-blanco {
  line-height : 19px;
}
#splideNosotros .splide__arrow {
  transform : translateY(0);
  top       : 30%;
}


@media (min-width : 576px) {
  .text-overlap-style-01 {
    bottom : -83px !important;
  }

  .cont-bannerSection {
    background-size       : 100%;
    background-position   : top;
    background-attachment : fixed;
    background-repeat     : no-repeat;
  }

  .cont-bannerSection .padding-9-rem-left.text-overlap-style-01 {
    padding-left  : 0;
    padding-right : 0;
    font-size     : 27vw !important;
    text-align    : left;
    transition    : .5s;
    margin-bottom : -46px !important;
  }
}
@media (min-width : 768px) {

  footer .footer-logo img {
    
    margin-left: -7px;
  }
  #splideNosotros .backCover {
    filter     : grayscale(1);
    transition : .5s;
  }

  #splideNosotros .splide__slide:hover .backCover {
    filter     : grayscale(0);
    transition : .5s;
  }

  .text-overlap-style-01 {
    bottom : -115px !important;
  }

  .bannerSection {
    /*padding-top : 50px !important;*/
  }

  .cont-bannerSection {
    background-size     : cover;
    background-position : center;
  }

  .cont-bannerSection .padding-9-rem-left.text-overlap-style-01 {
    padding-left  : 0 !important;
    padding-right : 21px !important;
    font-size     : 197px !important;
    text-align    : right !important;
    transition    : .5s;
    margin-bottom : -10px !important;
  }
}
@media (min-width : 992px) {

  .negative-margin {
    margin-top : -9% !important;
    transition : .5s;
  }

  .cont-bannerSection {
    background-size     : cover;
    background-position : center;
  }

  .videoWrapper {

    padding-bottom : calc((4 / 16) * 100%) !important;

  }

  .cont-bannerSection .padding-9-rem-left.text-overlap-style-01 {
    padding-left  : 0 !important;
    padding-right : 22px !important;
    font-size     : 223px !important;
    text-align    : left;
    transition    : .5s;
    margin-bottom : 0;
    bottom        : -112px !important;
  }

  .cont-arbol {

    margin-bottom : -84px;
    text-align    : right !important;
    transition    : .5s;
  }

  .cont-arbol img {
    margin-right : 1em;
    transition   : .5s;
  }
}
@media (min-width : 1200px) {
  .cont-bannerSection {
    background-size     : cover;
    background-position : center;
  }

  .cont-arbol {

    margin-bottom : -84px;
    text-align    : right !important;
    transition    : .5s;
  }

  .cont-arbol img {
    margin-right : 20em;
    transition   : .5s;
  }
}
@media (min-width : 1400px) {
  .cont-bannerSection {
    background-size     : cover;
    background-position : center;
  }
}

.line-height-initial {
  line-height : initial !important;
}
.sticky .header-light, .sticky .header-light.header-always-fixed-scroll {
  background-color : #FFF !important;
}
header.sticky {
  z-index  : 2;
  position : relative;


}
.negative-margin {
  margin-top : 0;
  transition : .5s;
}

.cont-bannerSection .padding-9-rem-left.text-overlap-style-01 {
  padding-left  : 0;
  padding-right : 0;
  font-size     : 45vw;
  text-align    : center;
  transition    : .5s;
  margin-bottom : -19px;

}
.cont-arbol {
  margin-bottom : -53px;
  text-align    : center;
  transition    : .5s;
}
.cont-arbol img {
  max-width        : 100px;
  width            : 100%;
  background-color : #FFF;
  border-radius    : 500px;
  padding          : .5em;
  transition       : .5s;
}

#splidePortada .splide__slide .backCover {
  transition : 1s !important;
}

#splidePortada .splide__slide.is-next .backCover {
  filter          : blur(2px);
  background-size : 100% !important;
  transition      : 1s ease-out !important;
}

#splidePortada .splide__slide.is-active .backCover {
  background-size : 120% !important;
  transition      : 2s ease-in !important;
  filter          : blur(0);
}

#splidePortada .splide__slide.is-prev .backCover {
  filter          : blur(2px);
  background-size : 100% !important;
  transition      : 1s ease-out !important;
}


header .navbar .navbar-brand img, header.side-menu .logo img, header .sidebar-nav-menu .navbar-brand img {
  max-height : 81px !important;
}
#splidePortada {
  opacity : .7;
}
#splideClientes .splide__arrow--prev {
  left: -1em !important;
}
#splideClientes .splide__arrow--next {
  right: -1em !important;
}
.stars {
  color: #d2d202;
  display: block;
  text-align: left;
}
footer .footer-logo img {
  max-height: 4em!important;
}