@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
  }
}
@keyframes rotateCircle {
  0% {
    transform: rotateY(15deg);
  }
  50% {
    transform: rotateY(195deg);
  }
  100% {
    transform: rotateY(15deg);
  }
}
/* BLACK COLORS */
/* FONT-FAMILY */
/* FONT-WEIGHT */
/* GENERALS */
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #2e2e3a;
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  /* TEXT */
  /* BOOTSTRAP ACCORDION */
  /* FLIP CARDS */
  /* BUTTONS */
  /* MODALS */
}
body .borderRed {
  border: red solid 1px;
}
body .orange {
  color: #e5942a;
}
body .semibold {
  font-weight: 600;
}
body .pr-30 {
  padding-right: 30px !important;
}
body h3.sectionName {
  font-family: "Roboto", sans-serif;
  color: #e5942a;
  font-size: 5.5vw;
  letter-spacing: 0.5vw;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 5vw;
}
body p.mainText,
body p.secondaryText {
  font-size: 8vw;
  line-height: 10.5vw;
}
body p.mainText {
  font-weight: 700;
}
body p.secondaryText {
  opacity: 0.6;
  font-weight: 500;
}
body div.accordion.accordion-flush {
  border-top: 1px solid #a4a4aa;
}
body div.accordion.accordion-flush div.accordion-item {
  border-bottom: 1px solid #a4a4aa;
  background-color: #2e2e3a;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header {
  background-color: #2e2e3a;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button {
  background-color: #2e2e3a;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #a4a4aa;
  padding: 16px 0;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button::after {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/accordion-button.svg");
  opacity: 0.6;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button:focus {
  border: 0px;
  box-shadow: none;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button:not(.collapsed) {
  background-color: #2e2e3a;
  box-shadow: none;
  color: #ffffff;
}
body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button:not(.collapsed)::after {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/accordion-button.svg");
  transform: rotate(-180deg);
  opacity: 1;
}
body div.accordion.accordion-flush div.accordion-item div.accordion-collapse {
  background-color: #2e2e3a;
}
body div.accordion.accordion-flush div.accordion-item div.accordion-collapse div.accordion-body {
  background-color: #2e2e3a;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 300;
  border-top: 0;
  color: #a4a4aa;
  padding: 0 0 16px 0;
}
body div.flip-box {
  background-color: transparent;
  width: 100%;
  height: 220px;
  perspective: 1000px;
  margin-bottom: 20px;
}
body div.flip-box div.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}
body div.flip-box div.flip-box-inner div.flip-box-front,
body div.flip-box div.flip-box-inner div.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(120deg, #1c2737 13%, #0f151d 87%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-self: center;
  margin-top: 16px;
}
body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text p {
  font-weight: 600;
  color: #a4a4aa;
  font-size: 24px;
  margin-bottom: 0;
}
body div.flip-box div.flip-box-inner div.flip-box-back {
  transform: rotateY(180deg);
}
body div.flip-box div.flip-box-inner div.flip-box-back div {
  width: 75%;
  display: flex;
  flex-direction: column;
  align-self: center;
}
body div.flip-box div.flip-box-inner div.flip-box-back div p {
  font-size: 18px;
  color: #a4a4aa;
  font-family: "Roboto", sans-serif;
  text-align: center;
}
body div.flip-box div.flip-box-inner div.flip-box-back div div.flip-button {
  width: 200px;
  padding-top: 10px;
}
body div.flip-box:hover div.flip-box-inner {
  transform: rotateY(180deg);
}
body a.btn.btn-primary {
  background-color: unset;
  border: 3px solid #e5942a;
  padding: 8px 30px;
  border-radius: 40px;
  color: #e5942a;
  font-family: "Roboto", sans-serif;
}
body .btn-check:focus + .btn-primary,
body .btn-primary:focus,
body .btn-check:active + .btn-primary:focus,
body .btn-check:checked + .btn-primary:focus,
body .btn-primary.active:focus,
body .btn-primary:active:focus,
body .show > .btn-primary.dropdown-toggle:focus,
body .btn-close:focus {
  box-shadow: none;
}
body .modal-backdrop.show {
  opacity: 0.95;
  background-color: #2e2e3a;
}
body div.modal div.modal-dialog.modal-lg {
  min-width: 100vw;
  margin: 0;
}
body div.modal div.modal-dialog.modal-lg div.modal-content {
  min-height: 100vh;
  background-color: #2e2e3a;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body {
  padding: 20px 25px;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close {
  position: fixed;
  right: 24px;
  color: #ffffff;
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/xmark-solid-white.svg");
  opacity: 0.5;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close:hover,
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close:active {
  opacity: 1;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info {
  display: flex;
  flex-direction: column;
  height: calc(90vh - 70px);
  justify-content: center;
  padding: 0;
  font-family: "Roboto", sans-serif;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal {
  padding: 20px 0 30px;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner {
  border-radius: 20px;
  margin: auto;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item img {
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
  height: 30vh;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal button.carousel-control-prev span {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/carousel-left.svg");
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal button.carousel-control-next span {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/carousel-right.svg");
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.modal-info-txt p {
  text-align: center;
  color: #ffffff;
  opacity: 0.85;
}
body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.modal-info-txt p.modal-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  padding-bottom: 10px;
  font-weight: 600;
}

body header {
  background-color: rgba(46, 46, 58, 0.95);
  height: 70px;
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 100;
  padding: 8px 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: " kausanaLogo  hamburgerCont " " leftItems    leftItems " " rightItems   rightItems ";
}
body header div#kausanaLogoCont {
  grid-area: kausanaLogo;
}
body header div#kausanaLogoCont img#kausanaLogo {
  height: 40px;
  margin-top: 5px;
}
body header div#kausanaLogoCont .flip-box {
  display: none;
}
body header div#hamburgerCont {
  grid-area: hamburgerCont;
  padding: 10px 0;
  width: 40px;
  position: relative;
  left: calc(50vw - 70px);
}
body header div#hamburgerCont img#hamburgerIcon,
body header div#hamburgerCont img#closeIcon {
  height: 30px;
  margin-top: 10px;
}
body header div#hamburgerCont div#hamburgerIcon {
  height: 30px;
  padding-left: 10px;
}
body header div#hamburgerCont div#hamburgerIcon div.hamburger-inner,
body header div#hamburgerCont div#hamburgerIcon div.hamburger-inner::after,
body header div#hamburgerCont div#hamburgerIcon div.hamburger-inner::before {
  background-color: #ffffff;
  width: 30px;
  height: 3px;
}
body header div#sections {
  width: 100%;
  padding-left: 0;
  position: absolute;
  top: 70px;
  left: 0;
  overflow: hidden;
  background-color: #2e2e3a;
  height: calc(100vh - 70px);
  opacity: 0.95;
}
body header nav#leftItems, body header nav#rightItems {
  position: relative;
  z-index: 10;
}
body header nav#leftItems div, body header nav#rightItems div {
  text-align: center;
  align-self: center;
  height: 50px;
  padding-top: 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 600;
}
body header nav#leftItems div a, body header nav#rightItems div a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}
body header nav#leftItems div a:hover, body header nav#rightItems div a:hover {
  font-weight: 700;
}
body header nav#leftItems div div.verticalLine, body header nav#rightItems div div.verticalLine {
  display: none;
}
body header nav#leftItems {
  grid-area: leftItems;
}
body header nav#rightItems {
  grid-area: rightItems;
}
body header nav#rightItems #language {
  padding: 10px;
  height: 50px;
  display: flex;
  align-items: center;
}
body header nav#rightItems #colorMode {
  height: 50px;
  padding: 10px;
  cursor: pointer;
}
body header nav#rightItems #colorMode img#color {
  width: 21px;
}
body #callUs a {
  background-color: #e5942a;
  border: 0px;
  padding: 8px 16px;
}
body #callUs a i {
  padding-right: 4px;
}

.showsOpacity {
  animation-duration: 2s;
  animation-name: showsOpacity;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.hideOpacity {
  animation-duration: 2s;
  animation-name: hideOpacity;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.showsHeight {
  animation-duration: 2s;
  animation-name: showsHeight;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.hideHeight {
  animation-duration: 2s;
  animation-name: hideHeight;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showsOpacity {
  from {
    opacity: 0;
    left: 100vw;
  }
  to {
    opacity: 0.95;
    left: 0;
  }
}
@keyframes hideOpacity {
  from {
    opacity: 0.95;
    left: 0;
  }
  to {
    opacity: 0;
    left: 100vw;
  }
}
@keyframes hideHeight {
  from {
    left: 0;
  }
  to {
    left: 100vw;
  }
}
@keyframes showsHeight {
  from {
    left: 100vw;
  }
  to {
    left: 0;
  }
}
body main {
  position: relative;
  top: 70px;
  padding: 0 5vw;
  overflow-x: hidden;
}

body section#presentation div#first {
  height: calc(100vh - 50px);
}
body section#presentation div#first h1 {
  font-family: "Poppins", sans-serif;
  font-size: 19vw;
  line-height: 18vw;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  right: 1vw;
}
body section#presentation div#first h1 span {
  text-shadow: 0 10px 6px rgba(0, 0, 0, 0.26);
  position: relative;
}
body section#presentation div#first h1 span.lineal {
  -webkit-text-stroke-width: 0.7px;
  -webkit-text-stroke-color: #a4a4aa;
  color: #2e2e3a;
  z-index: 0;
}
body section#presentation div#first h1 span.solid {
  letter-spacing: -3px;
  z-index: 2;
  animation-name: fadeInWhite;
}
body section#presentation div#first div.orangeCircle {
  background-color: #e5942a;
  box-shadow: 0 10px 6px 0 rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(15deg);
  position: relative;
  z-index: 1;
  height: 15vw;
  width: 15vw;
  border-radius: 15vw;
  bottom: 30vw;
  left: 74vw;
}
body section#presentation div#first div.orangeCircle img {
  height: 6vw;
}
body section#presentation div#first div.orangeCircle p {
  display: none;
}
body section#presentation div#first div.orangeLine {
  opacity: 0.1; /* 0.6 */
  background-color: #e5942a;
  height: 2.5px;
  position: relative;
  top: -40px;
  border-radius: 3px;
}
body section#presentation div#first div.orangeLine.left {
  display: none;
}
body section#presentation div#first div.subtitle {
  position: relative;
  top: -20px;
  margin-bottom: -20px;
  animation-name: fadeInWhite;
}
body section#presentation div#first div.subtitle p {
  opacity: 0.6;
  font-size: 20px;
  font-weight: 300;
  margin-bottom: 0;
}
body section#presentation div#second {
  min-height: calc(100vh - 0px);
}
body section#presentation div#second h2 {
  font-family: "Poppins", sans-serif;
  font-size: 10.7vw;
  text-align: center;
  font-weight: 700;
}
body section#presentation div#second h2 span#changingword {
  color: #e5942a;
}
body section#presentation div#second h2 span#console {
  font-weight: 500;
}
body section#presentation div#third div.accordion {
  margin: 35px 0;
}
body section#presentation div#fourth {
  margin: 70px 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-radius: 30px;
  box-shadow: 14px 14px 16px 0 rgba(0, 0, 0, 0.51);
}
body section#presentation div#fourth source, body section#presentation div#fourth img, body section#presentation div#fourth video, body section#presentation div#fourth video source {
  width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body section#presentation div#fourth source, body section#presentation div#fourth img#vertical-photo {
  display: initial;
  -o-object-position: bottom center;
     object-position: bottom center;
}
body section#presentation div#fourth source, body section#presentation div#fourth img#horizontal-photo {
  display: none;
  -o-object-position: top center;
     object-position: top center;
  position: relative;
}
body section#presentation div#fourth picture {
  overflow: hidden;
  border-radius: 30px;
}

div#presentationBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

div#degradedBackground {
  height: 20%;
  width: 100%;
  background-image: linear-gradient(180deg, transparent 0%, #2e2e3a 70%);
  position: absolute;
  top: 85%;
}

@keyframes fadeInWhite {
  0% {
    opacity: 0.01;
    color: transparent;
  }
  1% {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: #ffffff;
  }
}
@keyframes fadeInBlack {
  0% {
    opacity: 0.01;
    color: transparent;
  }
  1% {
    opacity: 0;
    color: transparent;
  }
  to {
    opacity: 1;
    color: #2e2e3a;
  }
}
body section#services {
  margin-top: 80px;
}
body section#services div#whatDoWeDo-img {
  margin: auto auto 50px;
  display: flex;
  justify-content: center;
  margin-top: -130px;
}
body section#services div#whatDoWeDo-img div#mobile {
  display: flex;
  max-width: 300px;
  justify-content: center;
}
body section#services div#whatDoWeDo-img div#mobile source, body section#services div#whatDoWeDo-img div#mobile img {
  max-width: 300px;
  position: relative;
  z-index: 2;
  width: 90vw;
}
body section#services div#whatDoWeDo-img div#carouselMobile {
  max-width: 300px;
  position: absolute;
  z-index: 1;
}
body section#services div#whatDoWeDo-img div#carouselMobile div.carousel-inner {
  position: relative;
  border-radius: 18px;
  top: 20px;
}
body section#services div#whatDoWeDo {
  position: relative;
  margin-bottom: 190px;
  text-align: center;
}
body section#services-cards div#whatDoWeDo-Cards h3.sectionName {
  padding: 20px 0;
}

body section#methodology {
  margin: 100px auto;
}
body section#methodology div#howDoWeDo div#howDoWeDo-section h3 {
  text-align: center;
}
body section#methodology div#howDoWeDo div#howDoWeDo-text p {
  text-align: center;
}
body section#methodology div#howDoWeDo-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "howDoWeDo-work howDoWeDo-development howDoWeDo-techno";
  margin-top: 90px;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button {
  display: flex;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 90px;
  margin-bottom: 26px;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(137deg, #1c2737 12%, #0f151d 87%);
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-icon img {
  width: 56.6px;
  height: 56.6px;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-text p {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #a4a4aa;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button:hover {
  cursor: pointer;
}
body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button.check div.content div.howDoWeDo-text p {
  font-weight: 700;
  color: #ffffff;
}
body section#methodology div#howDoWeDo-buttons div#howDoWeDo-work {
  grid-area: howDoWeDo-work;
}
body section#methodology div#howDoWeDo-buttons div#howDoWeDo-development {
  grid-area: howDoWeDo-development;
}
body section#methodology div#howDoWeDo-buttons div#howDoWeDo-techno {
  grid-area: howDoWeDo-techno;
}
body section#methodology div#howDoWeDo-accordion {
  margin-top: 20px;
}

body section#projects div#whatProjectsDoWeDo {
  position: relative;
}
body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-section h3.sectionName {
  text-align: right;
}
body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-text p.mainText {
  text-align: right;
}
body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-text div.project-button {
  margin-top: 2.5rem;
}
body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-text div.project-button i {
  padding-right: 5px;
}
body section#projects div#whatProjectsDoWeDo-img {
  margin: 50px auto 50px;
  display: flex;
  justify-content: center;
}
body section#projects div#whatProjectsDoWeDo-img div#screen {
  display: flex;
  justify-content: center;
  max-width: 800px;
}
body section#projects div#whatProjectsDoWeDo-img div#screen source, body section#projects div#whatProjectsDoWeDo-img div#screen img {
  max-width: 800px;
  z-index: 2;
  position: relative; /* absolute */
  width: 100%;
}
body section#projects div#whatProjectsDoWeDo-img div#carouselScreen {
  max-width: 800px;
  position: absolute;
  z-index: 1;
}
body section#projects div#whatProjectsDoWeDo-img div#carouselScreen div.carousel-inner {
  position: relative;
  top: 10px;
  width: 85vw;
  max-width: 760px;
}
body section#projectsCards {
  padding-top: 40px;
}
body section#projectsCards p.secondaryText {
  text-align: center;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin-bottom: 40px;
}
body section#projectsCards div.project-card {
  width: 90vw;
  height: calc(100vh - 100px);
  margin-bottom: 30px;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(151deg, #1c2737 12%, #0f151d 88%);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "project-card-text" "project-card-img";
}
body section#projectsCards div.project-card div.project-card-text {
  grid-area: project-card-text;
  padding: 6vw;
}
body section#projectsCards div.project-card div.project-card-text div.project-card-title {
  /* height: 100px; */
}
body section#projectsCards div.project-card div.project-card-text div.project-card-title h4 {
  font-size: 40px;
  font-weight: 700;
}
body section#projectsCards div.project-card div.project-card-text div source, body section#projectsCards div.project-card div.project-card-text div img {
  margin: 13px 0;
}
body section#projectsCards div.project-card div.project-card-text div p {
  color: #a4a4aa;
  font-family: "Roboto", sans-serif;
  padding-left: 4px;
}
body section#projectsCards div.project-card div.project-card-text div div.project-button {
  margin-top: 16px;
}
body section#projectsCards div.project-card div.project-card-text div div.project-button a.btn.btn-primary {
  padding-right: 25px;
}
body section#projectsCards div.project-card div.project-card-text div div.project-button a.btn.btn-primary img.orangeArrow {
  padding-left: 10px;
  margin: 0;
  margin-bottom: 2px;
}
body section#projectsCards div.project-card div.project-card-text div div.project-button a.btn.btn-primary img.orangePhone {
  padding-right: 10px;
  margin: 0;
}
body section#projectsCards div.project-card div.project-card-img {
  grid-area: project-card-img;
  width: 90vw;
  height: auto;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
body section#projectsCards div.project-card div.project-card-img source, body section#projectsCards div.project-card div.project-card-img img.project-img {
  min-width: -moz-fit-content;
  min-width: fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
  max-width: 100%;
  max-height: 100%;
}
body section#projectsCards div.project-card div.project-card-img.gradient {
  background-image: linear-gradient(122deg, #29748F 17%, #EC6E1E 94%);
}
body section#projectsCards div.project-card div.project-card-img.gradient div {
  display: flex;
  justify-content: center;
  align-items: center;
}
body section#projectsCards div.project-card div.project-card-img.gradient div p {
  padding: 30px;
  max-width: 350px;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.36);
}
body section#moreProjectsCards div#carousel-more-projects {
  width: 100vw;
  margin-left: -5vw;
}
body section#moreProjectsCards p.secondaryText {
  font-size: 32px;
  font-weight: 400;
}
body section#moreProjectsCards div.owl-dots {
  display: flex;
  justify-content: center;
}
body section#moreProjectsCards div.owl-dots button.owl-dot {
  height: 10px;
  width: 10px;
  margin: 5px;
  border-radius: 10px;
  background-color: #a4a4aa;
}
body section#moreProjectsCards div.owl-dots button.owl-dot.active {
  background-color: #e5942a;
}
body section#moreProjectsCards div.columns {
  padding: 0;
}
body section#moreProjectsCards .owl-carousel .owl-item source, body section#moreProjectsCards .owl-carousel .owl-item img {
  display: inherit;
  width: 23.266px !important;
  margin-left: 10px;
}
body section#moreProjectsCards .owl-carousel .owl-item source, body section#moreProjectsCards .owl-carousel .owl-item img.project-photo {
  width: 100% !important;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  height: 220px;
  margin-left: 0px;
  margin-bottom: 16px;
  border-radius: 20px 20px 0 0;
}
body section#moreProjectsCards .owl-carousel .owl-nav {
  display: none;
}
body section#moreProjectsCards div.item {
  margin: 10px;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(137deg, #1c2737 12%, #0f151d 87%);
  height: 550px;
}
body section#moreProjectsCards div.item div.content {
  margin: 20px;
  height: 310px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
body section#moreProjectsCards div.item div.content h5 {
  color: #a4a4aa;
  font-weight: 700;
  font-size: 24px;
}
body section#moreProjectsCards div.item div.content p {
  color: #a4a4aa;
  font-family: "Roboto", sans-serif;
}
body section#moreProjectsCards div.item div.content div.project-button {
  margin-top: 16px;
  padding-bottom: 25px;
}
body section#moreProjectsCards div.item div.content div.project-button a.btn.btn-primary {
  padding-right: 25px;
}
body section#moreProjectsCards div.item div.content div.project-button a.btn.btn-primary img.orangeArrow {
  margin-bottom: 2px;
}

body section#clients {
  margin-top: 100px;
}
body section#clients div#withWhomDoWeDo div#withWhomDoWeDo-section h3.sectionName {
  text-align: center;
}
body section#clients div#withWhomDoWeDo div#withWhomDoWeDo-text p.mainText {
  text-align: center;
  margin-bottom: 30px;
}
body section#clients div#withWhomDoWeDo-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
body section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card {
  height: 115px;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(151deg, #1c2737 12%, #0f151d 88%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
body section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card picture {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}
body section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card source, body section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card img {
  max-width: 75%;
  max-height: 65px;
  opacity: 0.4;
}

body section#team {
  margin-top: 150px;
}
body section#team div#whoAreKausana div#whoAreKausana-section {
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
body section#team div#whoAreKausana div#whoAreKausana-section h3.sectionName {
  width: 85vw;
}
body section#team div#whoAreKausana div#whoAreKausana-text {
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
body section#team div#whoAreKausana div#whoAreKausana-text p.mainText {
  width: 85vw;
  text-align: right;
}
body section#team div#whoAreKausana-cards {
  position: relative;
  bottom: 50px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
  margin-left: -40px;
  margin-bottom: -350px;
  max-width: 270px;
  max-height: 414px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText {
  padding: 15px 24px;
  height: 350px;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-image: linear-gradient(151deg, #1c2737 12%, #0f151d 88%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
  display: flex;
  flex-direction: column;
  width: calc(50vw - 10px);
  text-align: right;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info h4.name {
  font-size: 28px;
  font-weight: 700;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info p.profession {
  color: #e5942a;
  font-size: 18px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  letter-spacing: 0.15px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div p.description {
  color: #a4a4aa;
  font-family: "Roboto", sans-serif;
  display: none;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.decorativeLine {
  display: none;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks {
  display: flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon {
  height: 40px;
  width: 40px;
  border-radius: 40px;
  border: 3px solid #e5942a;
  background-color: #0f151d;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 14px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon img {
  max-width: 18px;
  max-height: 18px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon img.linkedin {
  margin-bottom: 4px;
  margin-left: 2px;
  padding: 1px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon img.twitter {
  margin-left: 2px;
}
body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon img.facebook {
  margin-right: 2px;
}
body section#team #whoAreKausana-cards {
  width: calc(100vw - 10px);
  margin: 0;
  position: relative;
  left: -5vw;
}
body section#team #whoAreKausana-cards .columns {
  padding: 0;
}
body section#team #whoAreKausana-cards div.owl-item {
  padding: 10px;
}
body section#team #whoAreKausana-cards div.owl-carousel {
  /* div.owl-dots{
      display: flex;
      justify-content: center;
      button.owl-dot{
          height: 10px;
          width: 10px;
          margin: 5px;
          border-radius: 10px;
          background-color: $grey;
      }
      button.owl-dot.active{
          background-color: $orange;
      }
  }  */
}
body section#team #whoAreKausana-cards div.owl-carousel div.owl-dots {
  display: none;
}
body section#teamNames {
  margin-top: -25px;
}
body section#teamNames div#whoAreKausana-names {
  margin-top: 0px;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel {
  margin-left: -5vw;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item {
  width: -moz-fit-content;
  width: fit-content;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name {
  font-size: 50px;
  font-weight: 700;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #ffffff;
  color: #2e2e3a;
  z-index: 0;
  padding-right: 10px;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name:hover {
  color: #ffffff;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name:hover span.name.dash {
  color: #2e2e3a;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name.dash:hover {
  color: #2e2e3a;
}
body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel .owl-nav {
  display: none;
}

body section#contact {
  margin-bottom: 120px;
}
body section#contact div#coffeeKausana {
  margin-top: 100px;
  margin-bottom: 40px;
}
body section#contact div#coffeeKausana div#coffeeKausana-section h3.sectionName {
  text-align: center;
}
body section#contact div#coffeeKausana div#coffeeKausana-text p.mainText {
  text-align: center;
  letter-spacing: -1px;
}
body section#contact div#coffeeKausana-form form {
  width: 100%;
}
body section#contact div#coffeeKausana-form form input, body section#contact div#coffeeKausana-form form textarea {
  width: 100%;
  border-radius: 20px;
  box-shadow: inset 10px 10px 5px 0 rgba(0, 0, 0, 0.42);
  background-image: linear-gradient(90deg, #1c2737 12%, #0f151d 88%);
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  padding: 14px 24px 10px;
  margin-bottom: 18px;
  color: #a4a4aa;
}
body section#contact div#coffeeKausana-form form input:focus-visible,
body section#contact div#coffeeKausana-form form input:focus,
body section#contact div#coffeeKausana-form form textarea:focus-visible,
body section#contact div#coffeeKausana-form form textarea:focus {
  border: none;
  outline: 0px;
  color: #a4a4aa;
}
body section#contact div#coffeeKausana-form form input:-webkit-autofill,
body section#contact div#coffeeKausana-form form input:-webkit-autofill:hover,
body section#contact div#coffeeKausana-form form input:-webkit-autofill:focus,
body section#contact div#coffeeKausana-form form input:-webkit-autofill:active,
body section#contact div#coffeeKausana-form form textarea:-webkit-autofill,
body section#contact div#coffeeKausana-form form textarea:-webkit-autofill:hover,
body section#contact div#coffeeKausana-form form textarea:-webkit-autofill:focus,
body section#contact div#coffeeKausana-form form textarea:-webkit-autofill:active {
  box-shadow: 0 0 0 30px #ffffff inset !important;
  -webkit-text-fill-color: #2e2e3a !important;
  border: 0px !important;
  border-image-width: 0px !important;
}
body section#contact div#coffeeKausana-form form textarea {
  height: 180px;
}
body section#contact div#coffeeKausana-form form button {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.51);
  background-color: #e5942a;
  color: #ffffff;
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  padding: 14px 24px 10px;
}

body footer {
  border-top: #a4a4aa 1px solid;
  position: relative;
  top: 70px;
}
body footer div#kausanaInfo {
  margin: 30px 5vw 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: " kausanaInfoLogo kausanaNetworks " " kausanaInfoTxt  kausanaInfoTxt ";
}
body footer div#kausanaInfo div#kausanaInfoLogo {
  grid-area: kausanaInfoLogo;
}
body footer div#kausanaInfo div#kausanaInfoLogo img {
  height: 35px;
}
body footer div#kausanaInfo div#kausanaInfoTxt {
  grid-area: kausanaInfoTxt;
}
body footer div#kausanaInfo div#kausanaInfoTxt p {
  font-family: "Roboto", sans-serif;
  color: #a4a4aa;
  margin-bottom: 0;
  padding-bottom: 5px;
}
body footer div#kausanaInfo div#kausanaNetworks {
  grid-area: kausanaNetworks;
  display: flex;
  justify-self: flex-end;
  padding-top: 3px;
}
body footer div#kausanaInfo div#kausanaNetworks a div.kausanaNetworks-icon img {
  width: 30px;
  margin-left: 16px;
}
body footer div#contactUs h6, body footer div#weCanHelpYou h6 {
  color: #ffffff;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}
body footer div#contactUs {
  margin: 30px 5vw 40px;
}
body footer div#contactUs div.contactKausana {
  display: flex;
  margin-bottom: 12px;
}
body footer div#contactUs div.contactKausana div.contactKausana-icon img {
  margin-right: 10px;
}
body footer div#contactUs div.contactKausana div.contactKausana-txt p {
  font-family: "Roboto", sans-serif;
  color: #a4a4aa;
  margin-bottom: 0;
}
body footer div#contactUs div.contactKausana div.contactKausana-txt p a {
  color: #a4a4aa;
}
body footer div#weCanHelpYou {
  margin: 30px 5vw 10px;
}
body footer div#weCanHelpYou input {
  width: 100%;
  color: #a4a4aa;
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  background-color: #2e2e3a;
  border-bottom: 1px solid #a4a4aa;
  padding-bottom: 20px;
}
body footer div#weCanHelpYou input#footerEmail:focus,
body footer div#weCanHelpYou input#footerEmail:focus-visible {
  outline: 0px;
  color: #a4a4aa;
}
body footer div#weCanHelpYou div {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
body footer div#weCanHelpYou div button#sendFooterEmail {
  position: relative;
  bottom: 48px;
  background-color: unset;
}
body footer div#weCanHelpYou div button#sendFooterEmail img {
  width: 32px;
}

body.lightMode {
  /* LIGHT COLORS */
  /* GENERALS */
  background-color: #E0E5EC;
  color: #2e2e3a;
  /* TEXT */
  /* BOOTSTRAP ACCORDION */
  /* FLIP CARDS */
  /* BUTTONS */
  /* MODALS */
  /* HEADER */
  /* PRESENTATION */
  /* METHODOLOGY */
  /* PROJECTS */
  /* CLIENTS */
  /* TEAM */
  /* section#team{
      #whoAreKausana-cards{
          div.owl-carousel{
              div.owl-dots{
                  button.owl-dot{
                      background-color: $grey;
                  }
                  button.owl-dot.active{
                      background-color: $orange;
                  }
              } 
          }
      }
  } */
  /* CONTACT */
  /* FOOTER */
}
body.lightMode .orange {
  color: #e5942a;
}
body.lightMode h3.sectionName {
  color: #e5942a;
}
body.lightMode div.accordion.accordion-flush {
  border-top: 1px solid #707072;
}
body.lightMode div.accordion.accordion-flush div.accordion-item {
  border-bottom: 1px solid #707072;
  background-color: #E0E5EC;
}
body.lightMode div.accordion.accordion-flush div.accordion-item h2.accordion-header {
  background-color: #E0E5EC;
}
body.lightMode div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button {
  background-color: #E0E5EC;
  color: #707072;
}
body.lightMode div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button:not(.collapsed) {
  background-color: #E0E5EC;
  color: #2e2e3a;
  font-weight: 600;
}
body.lightMode div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button::after {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/accordion-button-black.svg");
  opacity: 0.6;
}
body.lightMode div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button:not(.collapsed)::after {
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/accordion-button-black.svg");
  opacity: 1;
}
body.lightMode div.accordion.accordion-flush div.accordion-item div.accordion-collapse {
  background-color: #E0E5EC;
}
body.lightMode div.accordion.accordion-flush div.accordion-item div.accordion-collapse div.accordion-body {
  background-color: #E0E5EC;
  color: #707072;
}
body.lightMode div.flip-box {
  background-color: transparent;
}
body.lightMode div.flip-box div.flip-box-inner div.flip-box-front,
body.lightMode div.flip-box div.flip-box-inner div.flip-box-back {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode div.flip-box div.flip-box-inner div.flip-box-front div.flip-text p {
  color: #707072;
}
body.lightMode div.flip-box div.flip-box-inner div.flip-box-back div p {
  color: #707072;
  font-family: "Roboto", sans-serif;
}
body.lightMode a.btn.btn-primary {
  background-color: unset;
  border: 3px solid #e5942a;
  color: #e5942a;
}
body.lightMode .modal-backdrop.show {
  opacity: 0.95;
  background-color: #E0E5EC;
}
body.lightMode div.modal div.modal-dialog.modal-lg div.modal-content {
  background-color: #E0E5EC;
}
body.lightMode div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close {
  color: #2e2e3a;
  background-image: url("https://kausana-web.s3.us-east-1.amazonaws.com/img/icons/xmark-solid-black.svg");
  opacity: 0.5;
}
body.lightMode div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close:hover,
body.lightMode div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.d-flex button.btn-close:active {
  opacity: 1;
}
body.lightMode div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.modal-info-txt p {
  color: #2e2e3a;
}
body.lightMode header {
  background-color: #E0E5EC;
}
body.lightMode header div#sections {
  background-color: #E0E5EC;
}
body.lightMode header nav#leftItems div a, body.lightMode header nav#rightItems div a {
  color: #2e2e3a;
}
body.lightMode header div#hamburgerCont div#hamburgerIcon div.hamburger-inner,
body.lightMode header div#hamburgerCont div#hamburgerIcon div.hamburger-inner::after,
body.lightMode header div#hamburgerCont div#hamburgerIcon div.hamburger-inner::before {
  background-color: #2e2e3a;
}
body.lightMode div#degradedBackground {
  height: 20%;
  width: 100%;
  background-image: linear-gradient(180deg, transparent 0%, #E0E5EC 70%);
  position: absolute;
  top: 85%;
}
body.lightMode section#presentation div#first h1 span {
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}
body.lightMode section#presentation div#first h1 span.lineal {
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: rgba(164, 164, 170, 0);
  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  color: #2e2e3a;
  opacity: 0.8 !important;
}
body.lightMode section#presentation div#first h1 span.solid {
  color: #2e2e3a !important;
}
body.lightMode section#presentation div#first div.orangeCircle {
  background-color: #e5942a;
  box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.1), 9px 9px 16px rgba(0, 0, 0, 0.1);
}
body.lightMode section#presentation div#first div.orangeCircle p {
  color: #E0E5EC;
}
body.lightMode section#presentation div#first div.orangeLine {
  background-color: #e5942a;
}
body.lightMode section#presentation div#first div.subtitle {
  color: #2e2e3a !important;
}
body.lightMode section#presentation div#second h2 span#changingword {
  color: #e5942a;
}
body.lightMode section#presentation div#fourth {
  box-shadow: -10px -10px 14px #eaedf1, 14px 14px 16px rgba(0, 0, 0, 0.2);
}
body.lightMode section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-icon {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-text p {
  color: #707072;
}
body.lightMode section#methodology div#howDoWeDo-buttons div.howDoWeDo-button.check div.content div.howDoWeDo-text p {
  color: #2e2e3a;
}
body.lightMode section#projectsCards div.project-card {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#projectsCards div.project-card div.project-card-text div p {
  color: #707072;
}
body.lightMode section#projectsCards div.project-card div.project-card-img.gradient div p {
  color: #ffffff;
  text-shadow: 0 3px 6px rgba(0, 0, 0, 0.36);
}
body.lightMode section#moreProjectsCards div.owl-dots button.owl-dot {
  background-color: #707072;
}
body.lightMode section#moreProjectsCards div.owl-dots button.owl-dot.active {
  background-color: #e5942a;
}
body.lightMode section#moreProjectsCards div.item {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#moreProjectsCards div.item div.content h5 {
  color: #2e2e3a;
  opacity: 0.9;
}
body.lightMode section#moreProjectsCards div.item div.content p {
  color: #707072;
}
body.lightMode section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#clients div#withWhomDoWeDo-cards div.withWhomDoWeDo-card img {
  filter: invert(100%);
}
body.lightMode section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText {
  box-shadow: -5px -5px 10px #eaedf1, 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info p.profession {
  color: #e5942a;
}
body.lightMode section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div p.description {
  color: #707072;
}
body.lightMode section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon {
  background-color: #E0E5EC !important;
}
body.lightMode section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name {
  -webkit-text-stroke-color: #2e2e3a;
  -webkit-text-stroke-width: 0.7px;
  color: #E0E5EC;
}
body.lightMode section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name:hover {
  color: #2e2e3a;
}
body.lightMode section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name:hover span.name.dash {
  color: #E0E5EC;
}
body.lightMode section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name.dash:hover {
  color: #E0E5EC;
}
body.lightMode section#contact div#coffeeKausana-form form input, body.lightMode section#contact div#coffeeKausana-form form textarea {
  box-shadow: inset -5px -5px 10px #eaedf1, inset 9px 9px 16px rgba(0, 0, 0, 0.1);
  background-image: linear-gradient(120deg, #E0E5EC 13%, #E0E5EC 87%);
}
body.lightMode section#contact div#coffeeKausana-form form button {
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.21);
}
body.lightMode footer {
  border-top: #707072 1px solid;
}
body.lightMode footer div#kausanaInfo div#kausanaInfoTxt p {
  color: #707072;
}
body.lightMode footer div#contactUs h6, body.lightMode footer div#weCanHelpYou h6 {
  color: #2e2e3a;
}
body.lightMode footer div#contactUs div.contactKausana div.contactKausana-txt p {
  color: #707072;
}
body.lightMode footer div#contactUs div.contactKausana div.contactKausana-txt p a {
  color: #707072;
}
body.lightMode footer div#weCanHelpYou input {
  color: #707072;
  background-color: #E0E5EC;
  border-bottom: 1px solid #707072;
}

@media screen and (min-width: 380px) {
  body {
    /* PRESENTATION */
  }
  body section#presentation div#first {
    height: calc(100vh - 130px);
  }
}
@media screen and (min-width: 480px) {
  body {
    /* PRESENTATION */
    /* PROJECT */
    /* TEAM */
    /* TEAM NAMES */
  }
  body section#presentation div#first {
    height: calc(100vh - 130px);
  }
  body section#presentation div#first div.orangeLine {
    top: -50px;
  }
  body section#presentation div#first div.subtitle p {
    font-size: 4.5vw;
  }
  body section#presentation div#second h2 {
    font-size: 8.7vw;
  }
  body section#projectsCards div.project-card div.project-card-img.gradient div p {
    padding: 50px;
    font-size: 40px;
  }
  body section#team div#whoAreKausana-cards {
    bottom: 140px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-left: -60px;
    max-width: 360px;
    max-height: 530px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText {
    padding: 24px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    width: 225px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info h4.name {
    font-size: 30px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info p.profession {
    font-size: 20px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.socialNetworks div.socialNetworks-icon {
    height: 50px;
    width: 50px;
    border-radius: 50px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.socialNetworks div.socialNetworks-icon img {
    max-width: 18px !important;
    max-height: 18px !important;
  }
  body section#team #whoAreKausana-cards {
    width: 95vw;
  }
  body section#team #whoAreKausana-cards div.owl-item {
    padding: 15px;
  }
  body section#teamNames {
    margin-top: -120px;
  }
}
@media screen and (min-width: 560px) {
  body {
    /* GENERALS */
    /* BOOTSTRAP ACCORDION */
    /* FLIP CARDS */
    /* PRESENTATION */
    /* METHODOLOGY */
    /* TEAM */
    /* MODALS */
  }
  body h3.sectionName {
    font-size: 26px;
    letter-spacing: 2.8px;
    margin-bottom: 20px;
  }
  body p.mainText,
  body p.secondaryText {
    font-size: 44.8px;
    line-height: 55px;
  }
  body div.accordion.accordion-flush div.accordion-item h2.accordion-header button.accordion-button {
    font-size: 23px;
    letter-spacing: 0.7px;
    padding: 18px 0;
  }
  body div.accordion.accordion-flush div.accordion-item div.accordion-collapse div.accordion-body {
    font-size: 23px;
    padding: 0 0 18px 0;
  }
  body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text {
    width: 70%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div {
    width: 50%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div div.flip-button {
    width: auto;
  }
  body section#presentation div#first {
    height: calc(100vh - 70px);
  }
  body section#presentation div#first div.orangeLine {
    top: -65px;
  }
  body section#presentation div#first div.subtitle {
    top: -35px;
    margin-bottom: -35px;
  }
  body section#presentation div#first div.subtitle p {
    font-size: 29px;
  }
  body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-icon {
    width: 112px;
    height: 112px;
  }
  body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content div.howDoWeDo-text p {
    font-size: 24px;
  }
  body section#methodology div#howDoWeDo-accordion {
    margin-top: 40px;
  }
  body section#team div#whoAreKausana div#whoAreKausana-section h3.sectionName {
    width: 472px;
  }
  body section#team div#whoAreKausana div#whoAreKausana-text p.mainText {
    width: 472px;
  }
  body section#team div#whoAreKausana-cards {
    bottom: 160px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    max-width: 370px;
    max-height: 560px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    width: 245px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info h4.name {
    font-size: 35px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info p.profession {
    letter-spacing: 1.2px;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info {
    position: relative;
    top: 30px;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item source, body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item img {
    height: 50vh;
  }
}
@media screen and (min-width: 630px) {
  body {
    /* PRESENTATION */
    /* TEAM */
  }
  body section#presentation div#first h1 {
    text-align: center;
  }
  body section#presentation div#first div.subtitle p {
    text-align: center;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-left: -20px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    width: 255px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info h4.name {
    font-size: 40px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info p.profession {
    letter-spacing: 1.5px;
  }
}
@media screen and (min-width: 768px) {
  body {
    /* GENERALS */
    /* FLIP CARDS */
    /* PRESENTATION */
    /* PROJECTS */
    /* TEAM */
    /* TEAM NAMES */
    /* CONTACT */
    /* FOOTER */
  }
  body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text {
    width: 50%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div {
    width: 50%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div div.flip-button {
    width: auto;
  }
  body section#presentation div#first {
    height: calc(100vh - 70px);
  }
  body section#presentation div#first h1 {
    font-size: 18.5vw;
    line-height: 16.5vw;
  }
  body section#presentation div#first h1 span.lineal {
    -webkit-text-stroke-width: 1px;
  }
  body section#presentation div#first div.orangeCircle {
    height: 13vw;
    width: 13vw;
    border-radius: 13vw;
    bottom: 27vw;
    left: 74vw;
  }
  body section#presentation div#first div.orangeCircle img {
    height: 5.5vw;
  }
  body section#presentation div#first div.orangeLine {
    height: 3px;
    border-radius: 3px;
  }
  body section#presentation div#first div.orangeLine.left {
    display: inherit;
    width: calc(90vw - 620px);
    left: 620px;
    top: -75px;
  }
  body section#presentation div#first div.orangeLine.right {
    width: calc(90vw - 650px);
    top: -29px;
  }
  body section#presentation div#first div.subtitle {
    top: -100px;
    margin-bottom: -100px;
  }
  body section#presentation div#first div.subtitle p {
    display: flex;
    flex-direction: column;
    font-size: 29px;
  }
  body section#presentation div#first div.subtitle p span.left {
    text-align: left;
  }
  body section#presentation div#first div.subtitle p span.right {
    text-align: right;
  }
  body section#projects div#whatProjectsDoWeDo-img div#carouselScreen div.carousel-inner {
    top: 19px;
  }
  body section#projectsCards p.secondaryText {
    font-size: 27px;
    line-height: 35px;
  }
  body section#projectsCards div.project-card {
    width: 90vw;
    height: auto;
    margin-bottom: 40px;
  }
  body section#projectsCards div.project-card div.project-card-text {
    padding: 40px;
  }
  body section#projectsCards div.project-card div.project-card-text div.project-card-title h4 {
    font-size: 44px;
  }
  body section#projectsCards div.project-card div.project-card-text div p {
    font-size: 18px;
  }
  body section#projectsCards div.project-card div.project-card-img {
    height: 480px;
  }
  body section#team div#whoAreKausana div#whoAreKausana-section h3.sectionName {
    text-align: right;
  }
  body section#team div#whoAreKausana-cards {
    bottom: 80px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-bottom: -440px;
    margin-left: -30px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText {
    height: 440px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    text-align: left;
    width: calc(50vw - 60px);
    padding-left: 40px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div {
    width: calc(50vw - 60px);
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div p.description {
    padding-left: 40px;
    display: inherit;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.decorativeLine {
    display: flex;
    background-color: #e5942a;
    height: 2px;
    width: 200px;
    border-radius: 2px;
    margin: 20px 0px 10px 40px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks {
    padding-left: 40px;
    justify-content: flex-start;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks div.socialNetworks-icon {
    margin-left: 0px;
    margin-right: 14px;
  }
  body section#team #whoAreKausana-cards {
    width: 90vw;
    left: 0;
  }
  body section#teamNames {
    margin-top: -40px;
  }
  body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name {
    font-size: 60px;
  }
  body section#contact div#coffeeKausana {
    margin-top: 120px;
  }
  body section#contact div#coffeeKausana-form {
    /* form{
        display: grid;
        gap: 0 20px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:"name email phone"
                            "message message message"
                            "message message message"
                            "message message message"
                            "coffeeButton coffeeButton coffeeButton";
        input#name{
            grid-area: name;
        }
        input#email{
            grid-area: email;
        }
        input#phone{
            grid-area: phone;
        }
        textarea#message{
            grid-area: message;
            height: auto;
        }
        button#coffeeButton{
            grid-area: coffeeButton;
        }
        input{
            height: 51px;
        }
        button{
            height: 51px;                    
        }
    } */
  }
  body section#contact div#coffeeKausana-form div.pip-forms {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body section#contact div#coffeeKausana-form .pipedriveWebForms {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  body footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: " kausanaInfo  contactUs" " weCanHelpYou contactUs ";
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  body footer div#kausanaInfo {
    margin: 30px 0 0 5vw;
    grid-area: kausanaInfo;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: " kausanaInfoLogo " " kausanaInfoTxt  " " kausanaNetworks ";
  }
  body footer div#kausanaInfo div#kausanaInfoLogo {
    grid-area: kausanaInfoLogo;
  }
  body footer div#kausanaInfo div#kausanaInfoTxt {
    grid-area: kausanaInfoTxt;
  }
  body footer div#kausanaInfo div#kausanaNetworks {
    grid-area: kausanaNetworks;
    padding-top: 10px;
    justify-self: flex-start;
  }
  body footer div#kausanaInfo div#kausanaNetworks a {
    height: 30px;
  }
  body footer div#kausanaInfo div#kausanaNetworks a div.kausanaNetworks-icon img {
    margin-right: 16px;
    margin-left: 0px;
  }
  body footer div#contactUs h6, body footer div#weCanHelpYou h6 {
    margin-top: 5px;
    margin-bottom: 25px;
  }
  body footer div#contactUs {
    grid-area: contactUs;
    margin: 30px 5vw 40px 0;
  }
  body footer div#weCanHelpYou {
    grid-area: weCanHelpYou;
    margin: 30px 0 40px 5vw;
  }
  body.lightMode section#presentation div#first h1 span {
    text-shadow: 0 10px 6px rgba(0, 0, 0, 0.1);
  }
  body.lightMode section#presentation div#first h1 span.lineal {
    text-shadow: 0 10px 6px rgba(0, 0, 0, 0.1);
  }
}
@media screen and (min-width: 880px) {
  body {
    /* METHODOLOGY */
    /* PROJECTS */
    /* MODALS */
  }
  body section#methodology div#howDoWeDo-buttons div.howDoWeDo-button div.content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body section#methodology div#howDoWeDo-buttons div#howDoWeDo-work {
    justify-content: start;
  }
  body section#methodology div#howDoWeDo-buttons div#howDoWeDo-development {
    justify-content: center;
  }
  body section#methodology div#howDoWeDo-buttons div#howDoWeDo-techno {
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  body section#projectsCards {
    width: 100%;
    max-width: 1400px;
    margin: auto;
  }
  body section#projectsCards div.project-card {
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 1fr;
    grid-template-areas: "project-card-text project-card-img";
    height: 590px;
    max-width: 1400px;
    width: 100%;
  }
  body section#projectsCards div.project-card div.project-card-text {
    grid-area: project-card-text;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  body section#projectsCards div.project-card div.project-card-img {
    grid-area: project-card-img;
    height: auto;
    width: auto;
    border-radius: 0 20px 20px 0;
  }
  body section#projectsCards div.project-card.inverted {
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: "project-card-img project-card-text";
  }
  body section#projectsCards div.project-card.inverted div.project-card-img {
    border-radius: 20px 0 0 20px;
  }
  body section#moreProjectsCards div.item {
    height: 510px;
  }
  body section#moreProjectsCards div.item div.content {
    height: 270px;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body {
    align-self: center;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info {
    max-width: 880px;
    display: flex;
    align-items: center;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal {
    min-width: 708px !important;
    width: 88.5vh !important;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner {
    min-height: 400px !important;
    min-width: 708px !important;
    height: 50vh !important;
    width: 88.5vh !important;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item source, body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item img {
    min-height: 400px !important;
    min-width: 708px !important;
    height: 50vh !important;
    width: 88.5vh !important;
  }
}
@media screen and (min-width: 900px) {
  body {
    /* PRESENTATION */
    /* CLIENTS */
    /* TEAM */
  }
  body section#presentation div#first div.orangeCircle img {
    display: none;
  }
  body section#presentation div#first div.orangeCircle p {
    display: initial;
    text-align: center;
    text-transform: uppercase;
    padding: 6px;
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 0;
  }
  body section#presentation div#first div.orangeLine.left {
    top: -95px;
  }
  body section#presentation div#first div.orangeLine.right {
    top: -49px;
  }
  body section#presentation div#first div.subtitle {
    top: -120px;
    margin-bottom: -120px;
  }
  body section#clients {
    margin-top: 220px;
    margin-bottom: 200px;
  }
  body section#clients div#withWhomDoWeDo-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  body section#team {
    padding-top: 100px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-left: 20px;
  }
}
@media screen and (min-width: 1024px) {
  body {
    /* GENERALS */
    /* FLIP CARDS */
    /* HEADER */
    /* PRESENTATION */
    /* SERVICES */
    /* PROJECT */
    /* CONTACT */
  }
  body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text {
    width: 95%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div {
    width: 95%;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div div.flip-button {
    width: auto;
  }
  body header {
    height: 80px;
    padding: 0px 5vw;
    display: grid;
    grid-template-columns: 4fr 1fr 4fr;
    grid-template-rows: 1fr;
    grid-template-areas: "leftItems kausanaLogo rightItems";
  }
  body header div#kausanaLogoCont {
    grid-area: kausanaLogo;
    margin: auto;
  }
  body header div#kausanaLogoCont img#kausanaLogo {
    margin-top: 0;
  }
  body header div#hamburgerCont {
    display: none !important;
  }
  body header nav#leftItems, body header nav#rightItems {
    display: flex !important;
    animation: none;
  }
  body header nav#leftItems div, body header nav#rightItems div {
    display: flex;
    align-items: center;
    padding-top: 0;
  }
  body header nav#leftItems div div.verticalLine, body header nav#rightItems div div.verticalLine {
    display: initial;
    padding: 9px 21px 0;
    font-size: 20px;
  }
  body header nav#leftItems {
    grid-area: leftItems;
    justify-self: flex-start;
  }
  body header nav#rightItems {
    grid-area: rightItems;
    justify-self: flex-end;
  }
  body header nav#rightItems div div.verticalLine {
    /* padding: 9px 40px 0; */
    padding: 9px 20px 0;
  }
  body header nav#rightItems #language {
    padding: 10px 10px 10px 0px;
  }
  body section#presentation div#first h1 span.lineal {
    position: relative;
    top: 10px;
  }
  body section#presentation div#first div.orangeCircle {
    left: 76vw;
  }
  body section#presentation div#first div.orangeCircle p {
    padding: 15px;
  }
  body section#presentation div#first div.orangeLine.left {
    top: -115px;
  }
  body section#presentation div#first div.orangeLine.right {
    top: -69px;
  }
  body section#presentation div#first div.subtitle {
    top: -140px;
    margin-bottom: -140px;
  }
  body section#presentation div#second {
    height: calc(100vh - 90px);
  }
  body section#presentation div#second h2 {
    font-size: 6.3vw;
  }
  body section#presentation div#third {
    display: grid;
    gap: 60px;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "sectionName-ppt whoAreWe";
  }
  body section#presentation div#third #whoAreWe-section {
    grid-area: sectionName-ppt;
    display: flex;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  body section#presentation div#third #whoAreWe-section h3.sectionName {
    width: 150px;
    line-height: 35px;
    text-align: right;
    padding-top: 5px;
  }
  body section#presentation div#third div#whoAreWe-text {
    grid-area: whoAreWe;
  }
  body section#presentation div#fourth {
    height: calc(100vh - 70px);
    border-radius: 40px;
  }
  body section#presentation div#fourth source, body section#presentation div#fourth img#vertical-photo {
    display: none;
  }
  body section#presentation div#fourth source, body section#presentation div#fourth img#horizontal-photo {
    display: initial;
    width: 90vw;
  }
  body section#presentation div#fourth picture {
    border-radius: 40px;
  }
  body section#services {
    display: grid;
    gap: 40px;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "whatDoWeDo whatDoWeDo-img";
    /* margin-top: 60px; */
  }
  body section#services div#whatDoWeDo-img {
    grid-area: whatDoWeDo-img;
    margin: auto;
    /* margin-top: -130px;   */
    margin-top: -30px;
  }
  body section#services div#whatDoWeDo-img div#mobile {
    display: inherit;
    justify-content: center;
    max-width: 400px;
  }
  body section#services div#whatDoWeDo-img div#mobile source, body section#services div#whatDoWeDo-img div#mobile img {
    max-width: 400px;
    position: relative;
    width: auto;
  }
  body section#services div#whatDoWeDo-img div#carouselMobile {
    max-width: 400px;
  }
  body section#services div#whatDoWeDo {
    position: relative;
    top: 0 !important;
    grid-area: whatDoWeDo;
    align-self: center;
    margin-top: 70px;
    margin-bottom: 0;
    text-align: left;
  }
  body section#services-cards div#whatDoWeDo-Cards h3.sectionName {
    padding-top: 100px;
    text-align: center;
  }
  body section#services-cards div#whatDoWeDo-Cards div#gridCards {
    max-width: 1260px;
    margin: auto;
    margin-top: 50px !important;
    display: grid;
    gap: 30px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "methodology-card projects-card";
  }
  body section#services-cards div#whatDoWeDo-Cards div#gridCards div#methodology-card {
    grid-area: methodology-card;
  }
  body section#services-cards div#whatDoWeDo-Cards div#gridCards div#projects-card {
    grid-area: projects-card;
  }
  body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-section h3.sectionName {
    line-height: 35px;
  }
  body section#projectsCards div.project-card {
    height: 560px;
  }
  body section#projectsCards div.project-card div.project-card-img.gradient div p {
    padding: 0;
  }
  body section#contact {
    max-width: 1100px;
    margin: 0 auto 120px;
  }
  body section#contact div#coffeeKausana-form form {
    max-width: 1100px;
    display: grid;
    gap: 0 20px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas: "name email phone" "message message message" "message message message" "message message message" ". . coffeeButton";
  }
  body section#contact div#coffeeKausana-form form input#name {
    grid-area: name;
  }
  body section#contact div#coffeeKausana-form form input#email {
    grid-area: email;
  }
  body section#contact div#coffeeKausana-form form input#phone {
    grid-area: phone;
  }
  body section#contact div#coffeeKausana-form form textarea#message {
    grid-area: message;
    height: auto;
  }
  body section#contact div#coffeeKausana-form form button#coffeeButton {
    grid-area: coffeeButton;
  }
  body section#contact div#coffeeKausana-form form input {
    margin-bottom: 22px;
  }
  body section#contact div#coffeeKausana-form form button {
    height: 51px;
  }
}
@media screen and (min-width: 1200px) {
  body {
    /* HEADER */
    /* PRESENTATION */
    /*  METHODOLOGY */
    /* PROJECTS */
    /* CLIENTS */
    /* TEAM */
    /* TEAM NAMES */
    /* CONTACT */
    /* FOOTER */
  }
  body header div#kausanaLogoCont img#kausanaLogo {
    display: none;
  }
  body header div#kausanaLogoCont .flip-box {
    display: initial;
    height: 40px;
  }
  body header div#kausanaLogoCont .flip-box .flip-box-inner {
    height: 40px;
    width: 155px;
  }
  body header div#kausanaLogoCont .flip-box .flip-box-inner .flip-box-front,
  body header div#kausanaLogoCont .flip-box .flip-box-inner .flip-box-back {
    background-image: unset;
    box-shadow: none;
  }
  body section#presentation div#first {
    max-width: 80vw;
    margin: auto;
  }
  body section#presentation div#first h1 {
    font-size: 17.2vw;
    line-height: 15vw;
  }
  body section#presentation div#first h1 span.solid {
    letter-spacing: -10px;
  }
  body section#presentation div#first div.orangeCircle {
    height: 12vw;
    width: 12vw;
    border-radius: 12vw;
    bottom: 24vw;
    left: 68vw;
  }
  body section#presentation div#first div.orangeCircle p {
    font-size: 1.3vw;
    line-height: 1.6vw;
  }
  body section#presentation div#first div.orangeLine.left {
    top: -125px;
    width: calc(80vw - 620px);
  }
  body section#presentation div#first div.orangeLine.right {
    width: calc(80vw - 650px);
    top: -79px;
  }
  body section#presentation div#first div.subtitle {
    top: -150px;
    margin-bottom: -150px;
  }
  body section#methodology {
    max-width: 1050px;
  }
  body section#methodology div#howDoWeDo {
    width: 1050px;
  }
  body section#projects {
    display: grid;
    gap: 30px;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "whatProjectsDoWeDo-img whatProjectsDoWeDo";
  }
  body section#projects div#whatProjectsDoWeDo {
    grid-area: whatProjectsDoWeDo;
    width: 400px;
  }
  body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-section h3.sectionName {
    text-align: left;
  }
  body section#projects div#whatProjectsDoWeDo div#whatProjectsDoWeDo-text p.mainText {
    text-align: left;
  }
  body section#projects div#whatProjectsDoWeDo-img {
    grid-area: whatProjectsDoWeDo-img;
    margin: -5px auto 50px;
    width: 100%;
    justify-content: left;
  }
  body section#projects div#whatProjectsDoWeDo-img div#screen {
    width: -moz-max-content;
    width: max-content;
  }
  body section#projects div#whatProjectsDoWeDo-img div#screen source, body section#projects div#whatProjectsDoWeDo-img div#screen img {
    width: 690px;
    max-width: 100%;
    position: relative;
  }
  body section#projects div#whatProjectsDoWeDo-img div#carouselScreen {
    width: 690px;
    max-width: 100%;
  }
  body section#projects div#whatProjectsDoWeDo-img div#carouselScreen div.carousel-inner {
    top: 18px;
    left: 18px;
    width: 660px;
    max-width: 100%;
  }
  body section#projectsCards {
    margin-top: 0 !important;
  }
  body section#projectsCards p.secondaryText {
    padding: 20px;
    font-size: 38px;
    line-height: 50px;
  }
  body section#projectsCards div.project-card {
    height: 510px;
  }
  body section#clients div#withWhomDoWeDo-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  body section#clients div#withWhomDoWeDo-cards source, body section#clients div#withWhomDoWeDo-cards img {
    max-width: 135px;
    max-height: 70px;
  }
  body section#team {
    display: grid;
    grid-template-columns: 390px auto;
    grid-template-areas: "whoAreKausana whoAreKausana-cards";
    margin-top: 240px;
  }
  body section#team div#whoAreKausana {
    grid-area: whoAreKausana;
    margin-right: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 80px;
    padding-top: 54px;
  }
  body section#team div#whoAreKausana div#whoAreKausana-section h3.sectionName {
    width: 350px;
    margin-top: -5px;
  }
  body section#team div#whoAreKausana div#whoAreKausana-text p.mainText {
    width: 350px;
    margin-bottom: 0;
  }
  body section#team div#whoAreKausana-cards {
    grid-area: whoAreKausana-cards;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-left: -30px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    width: calc(90vw - 780px);
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div {
    width: calc(90vw - 780px);
  }
  body section#team #whoAreKausana-cards {
    width: unset;
  }
  body section#teamNames div#whoAreKausana-names div.columns div.owl-carousel div.item p.name {
    font-size: 70px;
  }
  body section#contact div#coffeeKausana-form div.pip-forms {
    flex-direction: row;
  }
  body section#contact div#coffeeKausana-form .pipedriveWebForms {
    margin-bottom: 0;
  }
  body footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas: " kausanaInfo contactUs weCanHelpYou";
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
  body footer div#kausanaInfo {
    margin: 30px 0 40px 5vw;
    grid-area: kausanaInfo;
  }
  body footer div#contactUs {
    grid-area: contactUs;
    margin: 30px 0 40px;
  }
  body footer div#weCanHelpYou {
    grid-area: weCanHelpYou;
    margin: 30px 5vw 40px 0;
  }
}
@media screen and (min-width: 1478px) {
  body {
    /* GENERALS */
    /* FLIP CARDS */
    /* PRESENTATION */
    /* SERVICES */
    /* PROJECTS */
    /* CLIENTS */
    /* TEAM */
    /* MODALS */
  }
  body div.flip-box {
    height: 260px;
    perspective: 1000px;
    margin-bottom: 32px;
  }
  body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text {
    max-width: 400px;
  }
  body div.flip-box div.flip-box-inner div.flip-box-front div.flip-text p {
    font-size: 28px;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div {
    max-width: 350px;
  }
  body div.flip-box div.flip-box-inner div.flip-box-back div p {
    font-size: 20px;
  }
  body section#presentation div#first {
    max-width: 1180px;
  }
  body section#presentation div#first h1 {
    font-size: 254px;
    line-height: 220px;
  }
  body section#presentation div#first h1 span.solid {
    letter-spacing: -12px;
  }
  body section#presentation div#first div.orangeCircle {
    height: 178px;
    width: 178px;
    border-radius: 178px;
    bottom: 354px;
    left: 1005px;
  }
  body section#presentation div#first div.orangeCircle p {
    font-size: 19px;
    line-height: 23.6px;
  }
  body section#presentation div#first div.orangeLine.left {
    width: 560px;
    top: -150px;
  }
  body section#presentation div#first div.orangeLine.right {
    width: 530px;
    top: -104px;
  }
  body section#presentation div#first div.subtitle {
    top: -175px;
    margin-bottom: -175px;
  }
  body section#presentation div#second {
    height: calc(100vh - 90px);
  }
  body section#presentation div#second h2 {
    font-size: 94px;
  }
  body section#presentation div#third {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-areas: "sectionName-ppt whoAreWe";
  }
  body section#presentation div#third #whoAreWe-section {
    grid-area: sectionName-ppt;
  }
  body section#presentation div#third div#whoAreWe-text {
    grid-area: whoAreWe;
  }
  body section#services {
    width: 75vw;
    margin: auto;
    /* margin-top: -130px; */
    margin-top: 100px;
  }
  body section#services section#services-cards p.secondaryText {
    padding: 40px 100px;
  }
  body section#services-cards {
    margin: 50px auto 150px;
  }
  body section#projects {
    gap: 80px;
    margin-left: -100px;
    gap: 55px;
    margin-left: -125px;
  }
  body section#projects div#whatProjectsDoWeDo-img {
    margin-bottom: 0;
    justify-content: flex-end;
  }
  body section#projects div#whatProjectsDoWeDo-img div#screen {
    justify-content: right;
    max-width: 1000px;
  }
  body section#projects div#whatProjectsDoWeDo-img div#screen source, body section#projects div#whatProjectsDoWeDo-img div#screen img {
    width: 90%;
    left: 100px;
    max-width: 1000px;
  }
  body section#projects div#whatProjectsDoWeDo-img div#carouselScreen {
    width: 90%;
    display: flex;
    justify-content: right;
    margin-right: 30px;
  }
  body section#projects div#whatProjectsDoWeDo-img div#carouselScreen div.carousel-inner {
    width: 850px;
  }
  body section#projects div#whatProjectsDoWeDo {
    padding-top: 115px;
    width: 472px;
  }
  body section#projectsCards p.secondaryText {
    padding: 40px 100px;
  }
  body section#projectsCards div.project-card {
    height: 480px;
  }
  body section#clients {
    margin-top: 270px;
  }
  body section#clients div#withWhomDoWeDo-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; /* deberían ser 5 */
  }
  body section#team {
    max-width: 1400px;
    margin: 240px auto 0;
    padding-top: 200px;
    /* div#whoAreKausana-names{
        min-width: 100vw;
        border: green solid 1px;
        margin-left: -5vw;
        div.columns{
            div.owl-carousel {
                border: red solid 1px;
            }
        }
    } */
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo source, body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-photo img {
    margin-left: 30px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    width: 580px;
    padding-left: 100px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.decorativeLine {
    margin-left: 100px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div {
    width: 580px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div p.description {
    padding-left: 100px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks {
    padding-left: 100px;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal {
    min-width: 880px !important;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner {
    min-height: 495px !important;
    min-width: 880px !important;
  }
  body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item source, body div.modal div.modal-dialog.modal-lg div.modal-content div.modal-body div.modal-info div.carouselModal div.carousel-inner .carousel-item img {
    min-height: 495px !important;
    min-width: 880px !important;
  }
}
@media screen and (min-width: 1578px) {
  body {
    /* TEAM */
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info {
    padding-left: 50px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.decorativeLine {
    margin-left: 50px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div p.description {
    padding-left: 50px;
  }
  body section#team div#whoAreKausana-cards div.whoAreKausana-card div.whoAreKausana-cardText div.whoAreKausana-info-bottom div.socialNetworks {
    padding-left: 50px;
  }
}
/* NOTEBOOKS / PANTALLAS PEQUEÑAS */
@media screen and (max-height: 720px) and (min-width: 915px) and (orientation: landscape) {
  body {
    /* PRESENTATION */
    /* SERVICES */
    /* METHODOLOGY */
    /* PROJECTS */
    /* CLIENTS */
    /* TEAM */
    /* CONTACT */
  }
  body section#presentation div#first {
    margin: auto;
    max-width: 65vw;
  }
  body section#presentation div#first h1 {
    font-size: 14vw;
    line-height: 12.4vw;
  }
  body section#presentation div#first div.subtitle {
    top: -140px;
    margin-bottom: -140px;
  }
  body section#presentation div#first div.subtitle p {
    font-size: 25px;
  }
  body section#presentation div#first div.orangeLine.left {
    top: -118px;
    width: calc(65vw - 540px);
    left: 540px;
  }
  body section#presentation div#first div.orangeLine.right {
    width: calc(65vw - 570px);
    top: -78px;
  }
  body section#presentation div#first div.orangeCircle {
    height: 10vw;
    width: 10vw;
    border-radius: 10vw;
    bottom: 20vw;
    left: 55vw;
  }
  body section#presentation div#first div.orangeCircle p {
    font-size: 1.1vw;
    line-height: 1.5vw;
  }
  body section#services div#whatDoWeDo-img div#mobile {
    max-width: 300px;
  }
  body section#services div#whatDoWeDo-img div#mobile source, body section#services div#whatDoWeDo-img div#mobile img {
    max-width: 300px;
  }
  body section#services div#whatDoWeDo-img div#carouselMobile {
    max-width: 300px;
  }
  body section#services div#whatDoWeDo-img div#carouselMobile div.carousel-inner {
    top: 18px;
  }
}
/* CELULAR ROTADO */
@media screen and (max-height: 420px) and (max-width: 915px) and (orientation: landscape) {
  body {
    /* PRESENTATION */
  }
  body section#presentation div#first {
    height: 100vh;
  }
}/*# sourceMappingURL=kausanaStyle.css.map */