@charset "UTF-8";
/* CSS Document */
body {
  background: rgb(193, 39, 45);
  background: linear-gradient(90deg, rgba(193, 39, 45, 1) 0%, rgba(102, 24, 40, 1) 100%);
}
@font-face {
  font-family: "Helvetica";
  src: url("fonts/HelveticaNeue-Light-08.ttf");
}
@font-face {
  font-family: "Helvetica-bold";
  src: url("fonts/HelveticaNeue-Bold-02.ttf");
}
@font-face {
  font-family: "Helvetica-thinitalic";
  src: url("fonts/HelveticaNeue-ThinItalic-14.ttf");
}
.background-sodio {
  background-image: none;
  width: 100%;
}
h1 {
  text-transform: uppercase;
  font-size: 22px;
  margin-top: 35px;
  margin-bottom: 15px;
  font-family: Helvetica-bold;
  color: white;
}
.txt{
	text-align: center;
}
.info-txt {
  /* background-color: #B815F5;*/
  height: auto;
  width: 100vw;
}
.info-txt img {
  margin-top: 50px;
  width: 25%;
  height: auto;
	margin-bottom: 30px;
}
.txt2 {
  padding: 0 60px;
  color: white;
	text-align: left;
}
p.quote {
  font-family: "Helvetica-thinitalic" !important;
  text-align: right;
  margin-top: 30px;
  margin-bottom: 0px;
}
p.author {
  font-family: "Helvetica";
  text-align: right;
  margin-top: 0px;
}
.mockup {
  /*background-color: #A21E21;*/
  height: auto;
  width: 100%;
}
.tablet {
  width: 100%;
  height: auto;
  /*	background-color:#485FDA;*/
  position: relative;
  /*  transform: translate(0, -38vh);
  top: 50%;*/
  margin-top: 30px;
}
.carousel-inner {
  display: block;
  position: absolute !important;
  top: 10%;
  margin-top: 4.5%;
  width: 71%;
  margin-left: 15.3%;
}
/*manos*/
.tablet img.tablet-mockup {
  display: block;
  text-align: center;
  width: 100%;
  height: auto;
  top: 0%;
  position: relative;
}
.hands {
  position: absolute !important;
  margin-left: -10px;
  width: 98% !important;
}
.contact {
  width: 100%;
  font-family: Helvetica;
  color: white;
  margin-top: 20px;
  text-align: center;
  font-size: 15px;
}
.contact .phone {
  font-family: Helvetica-bold;
  margin-left: 30px;
  display: block;
}
.contact a .email {
  font-family: Helvetica-bold;
  border: 1px white solid;
  padding: 10px 15px;
  margin-left: 30px;
  font-size: 17px;
  color: white !important;
  text-decoration: none !important;
  display: inline-block;
  margin-top: 15px;
}
.contact a:hover .email {
  font-family: Helvetica-bold;
  background-color: white;
  color: #b418c9 !important;
}
.contact a {
  text-decoration: none !important;
  margin-top: 60px;
}
@media (min-width: 1300px)and (min-height: 720px) {
  .row-flex {
    display: flex;
  }
	
	.txt{
	text-align: left;
}
	
	.info-txt img{
		padding-top:50px;
		margin-left:100px;
	}
	
  .background-sodio {
    /*  width: 100vw;
  height: 100vh;*/
    background-image: url("imgs/sodio-logo-background.png");
    background-size: auto 100%;
    background-position: 42%;
    background-repeat: no-repeat;
  }
  .info-txt {
    /*  background-color: #74F6A5;*/
    height: 100vh;
    width: 42vw;
  }
  .info-txt p {
    color: white;
    font-family: Helvetica;
    font-size: 15px;
  }
  .info-txt img {
    margin-top: 0px;
    width: 300px;
    height: auto;
  }
  .txt {
    width: 100%;
    height: 700px;
    /* background-color: #485FDA;*/
    position: relative;
    transform: translate(0, -350px);
    top: 50%;
  }
  /* .txt {
  width: 100%;
  height: 80vh;
 background-color: #485FDA;
  position: relative;
  transform: translate(0, -40vh);
  top: 50%;
}*/
  .txt2 {
    padding: 0 0 0 100px;
  }
  /*.quote {
  padding-left: 100px;
  position: absolute;
  bottom: 30px;
	
}*/
  .contact {
    font-family: Helvetica;
    color: white;
    position: absolute;
    bottom: 13px;
    right: 20px;
    text-align: right;
    font-size: 15px;
  }
  .mockup {
    /*background-color: #A21E21;*/
    height: 100vh;
    width: 58vw;
    /*  margin-top:0px !important;*/
  }
  .tablet {
    width: 58.3%;
    height: 76vh;
    /*	background-color:#485FDA;*/
    position: absolute;
    transform: translate(0, -38vh);
    top: 50%;
    margin-top: 0px;
  }
  .tablet img.tablet-mockup {
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    top: 0%;
    position: absolute;
    mix-blend-mode: multiply;
  }
  .carousel-inner {
    display: block;
    top: 10%;
    position: absolute;
    margin-top: 5.5%;
    width: 72%;
    margin-left: 15.6%;
    /* height: 55vh;*/
  }
  .hands {
    position: relative;
  }
  .contact .phone {
    display: inline-block;
  }
  .hands {
    margin-left: -10px;
    width: 100% !important;
  }
}
.neilly.carousel-item.active {
  animation-duration: 20s;
  animation-name: animCarousel-neilly;
}
@keyframes animCarousel-neilly {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-81%);
    transform: translateY(-81%);
  }
}

.mexico-pacific.carousel-item.active {
  animation-duration: 20s;
  animation-name: animCarousel-mexico-pacific;
}
@keyframes animCarousel-mexico-pacific {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-77%);
    transform: translateY(-77%);
  }
}

.elrollo.carousel-item.active {
  animation-duration: 13s;
  animation-name: animCarousel-elrollo;
}
@keyframes animCarousel-elrollo {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-55%);
    transform: translateY(-55%);
  }
}

.crim.carousel-item.active {
  animation-duration: 20s;
  animation-name: animCarousel-crim;
}
@keyframes animCarousel-crim {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-81%);
    transform: translateY(-81%);
  }
}

.finergia.carousel-item.active {
  animation-duration: 17s;
  animation-name: animCarousel-finergia;
}
@keyframes animCarousel-finergia {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-76%);
    transform: translateY(-76%);
  }
}

.frank.carousel-item.active {
  animation-duration: 17s;
  animation-name: animCarousel-frank;
}
@keyframes animCarousel-frank {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-74%);
    transform: translateY(-74%);
  }
}
.ceiich.carousel-item.active {
  animation-duration: 20s;
  animation-name: animCarousel-ceiich;
}
@keyframes animCarousel-ceiich {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-69%);
    transform: translateY(-69%);
  }
}

.alanza.carousel-item.active {
  animation-duration: 13s;
  animation-name: animCarousel-alanza;
}
@keyframes animCarousel-alanza {
  from {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0%);
    transform: translateY(0);
  }
  to {
    -webkit-transform: translateY(-59%);
    transform: translateY(-59%);
  }
}