header {
 position:fixed;
 z-index: 10;
 width:100%;
 margin: 0;
 padding:3.5rem 0 1.5rem 0;
}
.softamerica-logo {
  display:block;
  width:295px;
  height:42px;
  background-image:url("../img/softamericas5.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  z-index: 99;
}
header h1 {
  display:block;
  float: left;
}
header nav {
  display: block;
  float:right;
  margin-top:0.4rem;
}
header nav li {
  font-weight: 400;
  color:#b4ce49;
  font-size: 2.4rem;
  display: inline-block;
  margin-left: 3rem;
}
header nav li:last-child {margin-left: 7rem;}
header nav li a {color:#b4ce49;}
header nav li a:hover {color:#ffffff;}

/* end header on scroll */
header.sec-nav-2 {
  background-color: #ffffff;
  padding: 1.2rem 0 0.8rem 0;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(136,149,100,0.5);
  -moz-box-shadow: 0px 2px 2px 0px rgba(136,149,100,0.5);
  box-shadow: 0px 2px 2px 0px rgba(136,149,100,0.5);
}
.sec-nav-2 nav li a {color: #406184;}
.sec-nav-2 nav li a:hover {color: #8fb03f;}
/*.sec-nav-2 .softamerica-logo {
  background-image:url("../img/softamericas2.png");
}*/
.sec-nav-2 nav {margin-top: 0.4rem;}
/* end header on scroll */
#hero {
  background-image:url("../img/hero-bg2.jpg");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border-bottom:solid 130px #e1e5d6;
  padding:28rem 0 26rem 0;
  color:#ffffff;
}
#hero h1 {
  font-weight: 700;
  font-size: 6.4rem;
  line-height: 1.2;
}
#hero h2 {
  font-weight: 300;
  font-size: 5.5rem;
  line-height: 1.2;
}
section {float:left;}
.cont div {
  width:50%;
  float:left;
}
#company {
  margin-top:-5.6rem;
  padding:0 0 10rem 0;
}
#company div {padding:0 3.8rem;}
#company h4 {margin-top:3rem;}
#company p {margin-top:3.5rem;}
#how {
  background-color: #8fb03f;
  padding:10rem 0 11rem 0;
  color:#ffffff;
}
#how h4 {color:#ffffff;}
#how p {
  max-width: 900px;
  text-align: center;
  margin: auto;
  margin-top:2rem;
}

#how div p:nth-of-type(1) {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top:5rem;
}
#services {padding:12rem 0 8rem 0;}
#services img {margin-top: 7rem;}
#services p {
  font-size: 2.4rem;
  margin-top: 6rem;
  font-weight: 700;
  color:#5a666e;
}
#products {padding: 5rem 0 11rem 0;}
#products .cont div, #products .cont {
  padding: 2rem 0 2rem 0;
  display:block;
}
#products .cont div {padding: 5rem 7rem;}
#products .cont div:first-child {text-align: right;}
#products .cont:nth-of-type(3) div:first-child {text-align: left;}
#products .cont div:last-child {padding-top:8rem;}
#products .cont:nth-of-type(3) div {float: right;}
#products .cont h6 {
  font-weight: 900;
  color: #8fb03f;
  font-size: 3rem;
  text-align: left;
}
#products .cont li {
  font-size: 2.2rem;
  text-align: left;
  line-height: 1.3;
  margin-top: 1.8rem;
  background-image:url("../img/bullet.png");
  background-repeat: no-repeat;
  background-position: 0 11px;
  padding-left: 20px;
}
#products .cont ul {margin-top: 5rem;}
#products span {
  display:block;
  width:36rem;
  height: auto;
  float:right;
}
#banking-operating-system {
  background-image:url("../img/bos-bg3.jpg");
  border-bottom:solid 11px #b4ce49;
  padding:125px 0;
  background-size: cover;
  background-attachment: fixed;
  color:#ffffff;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#banking-operating-system h3 {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1.6;
  max-width: 900px;
  margin:auto;
}
#mambu {padding:11rem 0 13rem 0;}
#mambu .cont {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#mambu p {
  font-weight: 700;
  font-size: 2.5rem;
}
#mambu img {
  width: auto;
  height: auto;
  margin-top:5rem;
}
#mambu img:first-of-type {margin-top:9.5rem;}
#contact {
  background-color: #353a40;
  padding:100px 0;
  color:#cad1d9;
  width:100%;
  float:left;
}
#contact .cont {text-align: left;}
#contact h4 {
  font-weight: 900;
  color:#b4ce49;
  font-size: 5rem;
}
#contact h5 {
  font-weight: 700;
  font-size: 2.5rem;
  margin-top: 3.2rem;
}
#contact .cont div:first-of-type p {
  margin-top: 1.4rem;
  max-width: 80%;
}
.footer-bottom {
  background-color: #9abb4c;
  border-top:solid 12px #b4ce49;
  padding:4rem 0 5rem 0;
  color:#ffffff;
  float:left;
  width:100%;
}
.footer-bottom .cont {text-align: left;}
.footer-bottom .cont ul li {
  font-weight: 700;
  font-size: 1.7rem;
  margin-top:0.4rem;
}
.footer-bottom .cont ul li:nth-of-type(2) {margin-top:1.7rem;}
.footer-bottom .cont ul li a {color:#ffffff;}
/* FORMULARIO */
.form {padding:0 0 0 6rem;}
.input-softa, .textarea-softa {
  width:100%;
  background-color: #e4e7e3;
  color:#5b676f;
  font-size: 2rem;
  font-weight: 400;
  border-radius: 4px;
  border:none;
  font-family: 'Lato', sans-serif;
  padding:11px;
  margin-top:1.2rem;
  box-sizing: border-box;
  resize: vertical;
}
.form .input-softa:first-child {margin-top:0rem;}
.textarea-softa {height: 17.5rem;}
.send-softa {
  width:100%;
  background-color: #9abb4c;
  color:#ffffff;
  font-size: 2rem;
  font-weight: 700;
  border-radius: 4px;
  border:none;
  font-family: 'Lato', sans-serif;
  padding:11px;
  margin-top:1.2rem;
  box-sizing: border-box;
  cursor: pointer;
}
.cont div .contact-message {
  width:100%;
  padding-top:1.5rem;
}
.contact-message h6 {
  font-size:3rem;
  font-weight: 700;
  color:#b4ce49;
  text-align: center;
  line-height: 1.2;
}
.contact-message p {
  font-size:2rem;
  margin:auto;
  font-weight: 400;
  color:#b4ce49;
  text-align: center;
}
.modal {
  display: none;
  width: 100%;
  max-width: 1000px!important;
}

.credits {
  float:right;
  color:#caeb64;;
  font-size: 1.7rem;
  font-weight: 900;
  margin-top:-1.7rem;
}
.deco {
  position:absolute;
  display: block;
  bottom:0;
  left: 0;
  width:100%;
  height: 8rem;
  background-image:url("../img/deco-02.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.deco2 {
  position:absolute;
  display: block;
  bottom:0;
  left: 0;
  margin-bottom:-0.7rem;
  width:100%;
  height: 0.7rem;
  background-image:url("../img/deco-b03.svg");
  background-repeat: no-repeat;
  background-position: -1rem center;
  background-size: cover;
}
#nav-mobile {
  display:none;
}
#icon-toogle {display:none;}
/* RESPONSIVE */
@media only screen and (max-width: 1120px) {
  .deco {height: 5rem;}
  .deco2 {
    margin-bottom:-0.7rem;
    height: 0.7rem;
    background-position: -20rem center;
  }
  .softamerica-logo {
    width:200px!important;
    height:27px!important;
    margin-top:0rem;
  }
  #icon-toogle {
    display:block;
    width:auto;
    height:auto;
    float: right;
    padding: 2px;
    margin-top:-3px;
    margin-bottom:-1px;
    margin-right:10px;
    color: #b4ce49;
    font-size: 2.5rem;
    font-weight: 900;
    cursor: pointer;
    /*transform: rotate(0deg);*/
  }
  #icon-toogle {
    transform: rotate(0deg);
  }

  #icon-toogle.icon-toogle {transform: rotate(90deg);}
  .sec-nav-2 #icon-toogle {color: #406184;}
  header nav {display:none;}
  #nav-mobile {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color: #ffffff;
    flex-direction: column;
    justify-content: center;
  }
  #nav-mobile ul {
    margin: auto;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    align-items:center;
    height: 95vh;
    justify-content: center;
  }
  #nav-mobile ul li a {
    color:#406184;
    font-size: 2.5rem;
    font-weight: 700;
    display:block;
    padding:1rem;
    margin-top:1.5rem;
  }
  header.sombra {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }
  #hero {
    padding:18rem 0 15rem 0;
    border:none;
  }
  #hero h1 {font-size: 4.2rem;}
  #hero h2 {
    font-size: 3.5rem;
    margin-top:1.2rem;
  }
  .cont > div {width:100%;}
  #company {
    margin-top: 0rem;
    padding: 0 0 6rem 0;
  }
  #company div div {
    margin-top:5rem;
    padding:0;
  }
  #company > div {padding:0 2rem;}
  #how {padding: 7rem 0 7rem 0;}
  #how div p:nth-of-type(1) {margin-top: 3.5rem;}
  #services {padding: 7rem 0 4rem 0;}
  #products .cont div {padding: 0rem;}
  #products .cont {padding: 2rem 2rem;}
  #products .cont h6 {
    font-size: 3rem;
    text-align: center;
    line-height: 1.2;
  }
  #products span {width: 100%;}
  #products {padding: 5rem 0 8rem 0;}
  #banking-operating-system {padding: 7rem 0;}
  #banking-operating-system h3 {
    font-size: 2.1rem!important;
    font-weight: 800;
    line-height: 1.4;
  }
  #mambu {padding: 7rem 0 8.5rem 0;}
  #contact {padding: 6rem 0 7.5rem 0;}
  #contact .cont div:first-of-type p {max-width: 100%;}
  .form {padding: 5rem 0 0 0;}
  footer ul {
    float: left;
    width: 100%;
}
  .credits {
    float: left;
    margin-top: 3.5rem;
    font-weight: 700;
    font-size: 1.4rem;
    margin-left: 0.1rem;
}
#products .cont div:first-of-type {
  margin-top:4rem;
  padding:0 5rem;
  text-align: center;
}
#products .cont:nth-child(2) div:first-of-type {margin-top:0;text-align: center;}
#products .cont:nth-of-type(3) div:first-child {text-align:center;}
#products .cont div:nth-child(2) {padding:0 4rem;}
#products .cont div:last-child {padding-top: 3rem;}
#products .cont ul {margin-top: 3rem;}
#mambu img {margin-top: 3rem;}
#mambu img:first-of-type {margin-top: 5.5rem;}
p {font-size: 2.0rem;}
#how div p:nth-of-type(1) {font-size: 2.2rem;}
#products .cont li {
  font-size: 2.0rem;
  line-height: 1.2;
  margin-top: 1.2rem;
}
}

/* Estilos para lazy load  */
img {
  display: block;
  border: 0;
  width: auto;
  height: auto;
}
a img {
  opacity: 0;
}
img:not(.initial) {
  transition: opacity 1s;
}
img.initial,
img.loaded,
img.error {
  opacity: 1;
}
img:not([src]) {
  visibility: hidden;
}
#services .cont a img, .cont div img {
  margin-left:auto;
  margin-right:auto;
}
/* END Estilos para lazy load  */