html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1.3;
  font-family: "Poppins", sans-serif;
  background-color: #fbfbfb;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

button {
  background-color: rgba(0, 0, 0, 0);
  border-style: solid;
  border-width: 0px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  box-sizing: border-box;
  font-weight: 300;
  color: #666;
}

mark {
  font-size: 3.5vh;
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0);
  font-weight: 800;
}
mark b {
  font-size: 1.8vh;
}

a {
  font-size: 2vh;
  text-decoration: none;
}

p {
  font-size: 2vh;
  margin-bottom: 2vh;
}

small {
  font-size: 1.8vh;
}

h4 {
  font-size: 3vh;
}

h3 {
  font-size: 3vh;
}

h2 {
  font-size: 4vh;
}

h1 {
  font-size: 5vh;
}

@media (max-width: 767px) {
  h1 {
    font-size: 4vh;
  }
}
.btnStandard {
  width: 20vw;
  padding: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #F05A22;
  border-radius: 4px;
  font-size: 2.3vh;
  color: #F05A22;
  text-align: center;
  cursor: pointer;
}

.btnStandard:hover {
  background-color: #F05A22;
  color: #FFF;
}

@media (max-width: 764px) {
  .btnStandard {
    width: 90%;
    border-width: 3px;
    margin: 0 0 0 5%;
  }
}
header {
  height: 80vh;
  width: 100%;
}

.navBasicInfo {
  width: 100%;
  height: 3.5vh;
  background-image: linear-gradient(to right, #282828, #282828, #282828, #F05A22, #F05A22);
  display: grid;
  grid-template-columns: 60% 40%;
  float: left;
}

.alignNavBasicInfo {
  padding-top: 0.3vh;
  padding-left: 10%;
  display: block;
  grid-column-start: 2;
}
.alignNavBasicInfo p, .alignNavBasicInfo i, .alignNavBasicInfo b, .alignNavBasicInfo a {
  color: #FFF;
}
.alignNavBasicInfo p, .alignNavBasicInfo a {
  float: left;
  margin-right: 5%;
  font-size: 1.8vh;
}
@media (max-width: 767px) {
  .alignNavBasicInfo {
    display: none;
  }
}

nav {
  width: 100%;
  height: 14%;
  box-sizing: border-box;
  padding: 2vh 10vw;
  background-color: #282828;
  display: grid;
  grid-template-columns: 15% 85%;
  grid-template-rows: 100%;
  float: left;
}
nav img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: left;
}

.menuDropDown {
  width: 7vh;
  height: 7vh;
  padding: 0px;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
  grid-column-start: 3;
  justify-self: center;
}
.menuDropDown .barDrop1, .menuDropDown .barDrop2, .menuDropDown .barDrop3 {
  height: 0.75vh;
  width: 100%;
  background-color: #F05A22;
  border-radius: 3px;
  transition-duration: 1s;
}

.menuDropDown.active .barDrop1 {
  margin-top: 50%;
  transform: rotate(-45deg);
  transition-duration: 1s;
}
.menuDropDown.active .barDrop3 {
  margin-top: -65%;
  transform: rotate(45deg);
  transition-duration: 1s;
}
.menuDropDown.active .barDrop2 {
  opacity: 0;
}

.linksNav {
  height: 100%;
  width: 40%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
  justify-self: end;
  align-items: center;
  justify-items: center;
  float: right;
}
.linksNav a {
  font-size: 2vh;
  color: #FFF;
  text-decoration: none;
}
.linksNav a:hover {
  text-decoration: underline;
  text-decoration-color: #F05A22;
  text-underline-offset: 6px;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
.banners {
  height: 70vh;
  width: 100%;
  position: relative;
  float: left;
}

.banner {
  height: 100%;
  width: 100%;
  padding: 0 5vw;
  display: grid;
  grid-template-columns: 65% 35%;
  grid-template-rows: 100%;
  align-items: center;
  float: left;
  position: relative;
}

.bannerOpacity {
  width: 70%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  position: absolute;
  z-index: 1;
}

.bOne, .bTwo, .bThree {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  background-image: url(../images/bannerTwo.webp);
  background-size: cover, contain;
  background-position: center;
  background-repeat: no-repeat;
}

.boxBannerText {
  width: 85%;
  height: 60%;
  padding: 5%;
  display: grid;
  grid-row-gap: 2vh;
  align-content: center;
  position: relative;
  margin-left: 7.5%;
  z-index: 997;
}
.boxBannerText * {
  color: #FFF;
}
.boxBannerText h3 {
  font-size: 6vh;
  font-weight: 500;
}

.barraBanner1, .barraBanner2, .barraBanner3 {
  background-color: #F05A22;
  position: absolute;
  z-index: 997;
}

.barraBanner1 {
  height: 0.4vw;
  width: 35%;
  top: 0;
  left: 0;
}

.barraBanner2 {
  height: 100%;
  width: 0.4vw;
  top: 0;
  left: 0;
}

.barraBanner3 {
  height: 0.4vw;
  width: 65%;
  bottom: 0;
  left: 0;
}

.imageHeader {
  height: 80%;
  width: 100%;
  object-fit: contain;
  object-position: center;
  align-self: end;
  z-index: 997;
}

@media (max-width: 764px) {
  nav {
    height: 13%;
    grid-template-columns: 30% 40% 30%;
  }
  .linksNav {
    width: 100%;
    height: 0px;
    background: #282828;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    opacity: 0;
    position: absolute;
    top: 10.4%;
    left: 0;
    z-index: 999;
    transition-duration: 1s;
  }
  .linksNav a {
    font-size: 10%;
    opacity: 0;
    transition: font-size 1s;
  }
  .linksNav.active {
    width: 100%;
    height: 21.5vh;
    opacity: 1;
    transition-duration: 1s;
  }
  .linksNav.active a {
    font-size: 120%;
    opacity: 1;
    transition: font-size 1s;
  }
  .banner {
    grid-template-columns: 1fr;
  }
  .banner img {
    display: none;
  }
  .bannerOpacity {
    width: 100%;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  }
  .boxBannerText {
    width: 100%;
    margin: 0px;
  }
  .barraBanner1 {
    display: none;
  }
}
.aboutUs {
  width: 100%;
  height: auto;
  padding: 5vh 10vw;
  display: grid;
  grid-template-columns: 42.5% 55%;
  grid-column-gap: 2.5%;
  float: left;
  margin: 0 0 5vh 0;
}

.descriptionAboutUs {
  height: auto;
  width: 100%;
  display: grid;
  align-self: center;
}
.descriptionAboutUs small {
  color: #F05A22;
  font-weight: 600;
  margin: 0 0 2.5vh 0;
}
.descriptionAboutUs h2 {
  margin: 0 0 3vh 0;
}
.descriptionAboutUs ul {
  margin-bottom: 2vh;
}
.descriptionAboutUs li {
  margin: 0 0 2vh 2vw;
  font-size: 1.8vh;
  font-weight: 200;
}
.descriptionAboutUs li i {
  font-size: 1.3vh;
  margin-right: 10px;
  color: #F05A22;
}

.aboutUsGalery {
  height: 100%;
  width: 100%;
  position: relative;
}

.ourServices small {
  color: #F05A22;
  font-weight: 600;
  margin: 0 0 2.5vh 0;
}
.ourServices h2 {
  margin: 0 0 3vh 0;
}

.titlesServices {
  grid-column-start: 1;
  grid-column-end: 4;
  text-align: center;
}

.titleServiceBox {
  font-size: 2vh;
}

.paragraphyServiceBox {
  text-align: center;
  font-size: 1.5vh;
}

.ourServices {
  height: auto;
  width: 100%;
  padding: 0 10vw 0 10vw;
  display: grid;
  grid-template-columns: repeat(3, 25%);
  grid-template-rows: auto 55vh 50vh;
  grid-column-gap: 3%;
  grid-row-gap: 11vh;
  justify-content: center;
}
.ourServices h2 {
  width: 100%;
  grid-column-start: 1;
  grid-column-end: 4;
  text-align: center;
}

.serviceBox {
  height: 100%;
  min-height: 60vh;
  width: 100%;
  padding: 5%;
  background-color: #FFF;
  border-radius: 8px;
  box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 15% 70% 15%;
  justify-items: center;
}
.serviceBox h3 {
  text-align: center;
  margin: 0 0 2.5vh 0;
}
.serviceBox .contentServicBox p {
  text-align: center;
}
.serviceBox .btnStandard {
  height: 5vh;
  padding: 0px;
  width: 90%;
}

.imageServiceBox {
  width: 9vh;
  height: 9vh;
  border-radius: 8px;
  background-color: #F05A22;
  display: grid;
  justify-content: center;
  align-content: center;
  align-self: center;
  justify-self: center;
  margin-top: -8vh;
}
.imageServiceBox i {
  font-size: 7vh;
  color: #FFF;
}

.marginTop {
  margin-top: 6vh;
}

.lastServices {
  width: 100%;
  padding: 0 10vw;
  display: grid;
  grid-template-columns: 27% 27% 27%;
  grid-template-rows: auto auto auto;
  grid-column-gap: 4%;
  grid-row-gap: 3vh;
  justify-content: center;
  text-align: center;
  margin: 17vh 0 10vh 0;
}
.lastServices small {
  color: #F05A22;
  font-weight: 600;
  margin: 0 0 2.5vh 0;
}

.lastServicesContent {
  grid-column-start: 1;
  grid-column-end: 4;
}

.lastService {
  width: 100%;
  height: 65vh;
  border-radius: 8px;
  box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.3);
}

.imageLastService {
  width: 100%;
  height: 45%;
  object-fit: cover;
  object-position: center;
  border-radius: 8px 8px 0px 0px;
}

.contentLastService {
  height: auto;
  width: 90%;
  margin: 3vh 5%;
}
.contentLastService h2 {
  font-size: 3vh;
  margin: 0 0 2vh 0;
}
.contentLastService p {
  text-align: center;
}

.questions {
  height: 60vh;
  width: 100%;
  padding: 10vh 10vw;
  display: grid;
  grid-template-columns: 35% 60%;
  grid-column-gap: 5%;
  position: relative;
  margin-top: 10vh;
}

.questions::before {
  content: "";
  height: 40%;
  width: 17.5%;
  box-sizing: border-box;
  background-color: #F05A22;
  border-radius: 8px;
  position: absolute;
  bottom: -10%;
  left: 26%;
  z-index: -1;
}

.questionImage {
  height: 50vh;
  width: 100%;
  box-sizing: border-box;
  padding: 15%;
  object-fit: contain;
  object-position: center;
  background-color: #282828;
  border-radius: 8px;
}

.answers {
  height: auto;
  width: 80%;
  float: left;
  margin-left: 10%;
}
.answers h3 {
  margin-bottom: 2.5vh;
}

.question {
  height: auto;
  width: 100%;
  font-size: 2.2vh;
  float: left;
  margin: 0;
  cursor: pointer;
}
.question i {
  margin: 0 10px 0 0;
  transition-duration: 1s;
}

.answer {
  height: 0px;
  width: 100%;
  padding: 0 0 0 10px;
  font-size: 1.8vh;
  float: left;
  margin: 2vh 0 4vh 0;
  opacity: 0;
  transition-duration: 1s;
}

.question.active .answer {
  height: 90px;
  opacity: 1;
  transition-duration: 1s;
}
.question.active i {
  transform: rotate(90deg);
  transition-duration: 1s;
}

.boxTestimonials {
  display: none;
  height: 65vh;
  width: 100%;
  padding: 0 10vw;
  margin: 19vh 0 5vh 0;
}

.testimonials {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 40% 55%;
  grid-column-gap: 5%;
  position: relative;
}
.testimonials img {
  object-fit: contain;
  object-position: center;
}
.testimonials p {
  padding: 50px;
  border-radius: 8px;
  box-shadow: 0 0 10px -4px rgba(0, 0, 0, 0.3);
  font-size: 1.8vh;
  align-self: center;
  justify-self: center;
  position: relative;
}
.testimonials p .fa-quote-left {
  font-size: 4vh;
  position: absolute;
  top: -1.5vh;
  left: -5vh;
}
.testimonials p .fa-quote-right {
  font-size: 4vh;
  position: absolute;
  bottom: -1.5vh;
  right: -5vh;
}
.testimonials .marker {
  width: 2vh;
  height: 2vh;
  font-size: 2.5vh;
  font-weight: 800;
  position: absolute;
  top: 0;
  right: 2vh;
}

.logoClientTestimonials {
  height: 70%;
  width: 70%;
  align-self: center;
  justify-self: center;
}

.logoClientTestimonials.lenovo {
  padding: 25%;
  background-color: #E1251B;
}

.ocultaDesktopB, .ocultaDesktopG {
  display: none;
}

.mainCustomers {
  width: 100%;
  height: auto;
  padding: 10vh 0;
  padding-top: 20vh;
}
.mainCustomers h2 {
  text-align: center;
}

.Customers {
  width: 80%;
  height: auto;
  padding: 5vh 10vw;
  padding-bottom: 20vh;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
  float: left;
  margin-left: 20vh;
}

@media (max-width: 767px) {
  .descriptionAboutUs {
    display: block;
  }
  .aboutUs {
    grid-template-columns: 1fr;
  }
  .aboutUsGalery {
    float: left;
    margin: 1vh 0 4vh 0;
  }
  .aboutUsGalery .mainImage {
    height: 40vh;
  }
  .aboutUsGalery .complementaryImage {
    height: 25vh;
    width: 50%;
  }
  .boxTwoImages {
    display: none !important;
  }
  .lastServices {
    grid-template-columns: 100%;
  }
  .lastService {
    height: 55vh;
  }
  .lastServicesContent {
    grid-column-end: 2;
  }
  .titlesServices {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .serviceBox {
    min-height: 60vh;
  }
  .marginTop {
    margin: 0;
  }
  .ourServices {
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(6, 53vh);
  }
  .questions {
    height: auto;
    grid-template-columns: 1fr;
    margin: 3vh 0 0 0;
  }
  .questions::before {
    height: 30vh;
    width: 45%;
    top: 20vh;
    bottom: unset;
    left: 3%;
  }
  .questionImage {
    height: 40vh;
    padding: 10%;
    object-fit: contain;
    margin: 0 0 12vh 0;
  }
  .answers {
    width: 90%;
    margin: 0 0 0 5%;
  }
  .boxTestimonials {
    display: none;
    margin: 0 0 5vh 0;
  }
  .boxTestimonials {
    height: 170vh;
  }
  .logoClientTestimonials {
    height: 35vh;
    width: 100%;
    align-self: start;
  }
  .testimonials p {
    width: 90%;
    padding: 3vh 5%;
    margin: 3vh 5%;
  }
  .testimonials {
    grid-template-columns: 1fr;
  }
  .testimonials .marker {
    top: -4vh;
  }
  .ocultaSmartphoneB, .ocultaSmartphoneG {
    display: none;
  }
  .mainCustomers {
    padding: 2vh 0;
  }
  .Customers {
    grid-template-columns: 1fr;
    grid-row-gap: 5vh;
    justify-items: center;
    align-items: center;
    margin: 0;
  }
}
footer {
  width: 100%;
  height: auto;
  padding: 5vh 10vw;
  background-color: #282828;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
footer h3 {
  font-size: 2.5vh;
  color: #F05A22;
}
footer a, footer p {
  font-size: 1.8;
  color: #FFF;
}
footer a:hover {
  text-decoration: underline #F05A22;
}
footer a i.fa-angle-right {
  color: #F05A22;
}

.ourServicesFooter, .contactFooter, .address, .aboutCompanyFooter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-row-gap: 2vh;
}

.contactFooter {
  height: 75%;
}
.contactFooter p {
  margin: 0;
}
.contactFooter .fa-phone, .contactFooter .fa-instagram, .contactFooter .fa-linkedin {
  color: #F05A22;
  margin: 0 5px 0 0;
}
.contactFooter a:hover {
  text-decoration: none;
}

.mapsAddress {
  width: 100%;
  height: 30vh;
}

.aboutCompanyFooter {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-items: center;
}
.aboutCompanyFooter h3 {
  width: 100%;
  font-size: 2vh;
  float: left;
  margin-top: 3vh;
}
.aboutCompanyFooter b {
  color: #FFF;
}

.logoFooter {
  height: 10vh;
  width: 50%;
  object-fit: contain;
  object-position: center;
  float: left;
}

.ocultaSmartphoneB {
  display: block;
}

.ocultaSmartphoneG {
  display: grid;
}

@media (max-width: 767px) {
  footer {
    grid-template-columns: 1fr;
  }
  footer h3 {
    margin-top: 3.5vh;
  }
  .ocultaDesktopB {
    display: block;
  }
  .ocultaDesktopG {
    display: grid;
  }
  .ocultaSmartphoneB, .ocultaSmartphoneG {
    display: none;
  }
}

/*# sourceMappingURL=home.css.map */