:root {
  --color-primary: #2a4072;
  --color-secondary: #1e72bd;
  --color-accent: #fff;
  --color-headings: #222;
  --color-body: #666;
  --color-body-darker: #302d2d;
  --color-border: #ccc;
  --border-radius: 30px;
}

*,
*::after,
*::before {
  box-sizing: border-box; /* The size and height will be apply to the border box without increment the size of the visible box */
}

/* ----------------- Typography ------------------- */

html {
  /* 62.5% of 16px = 10px */
  font-size: 62.5%;
}

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  /*font-family: Inter, Arial, Helvetica, sans-serif;*/
  font-size: 2.4rem;
  line-height: 1.5;
  color: var(--color-body);
}

h1,
h2,
h3 {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: var(--color-secondary);
  margin-bottom: 1rem;
  line-height: 1.1;
  letter-spacing: 0.1rem;
}

h1 {
  /* 1 x font size of the html element */
  font-size: 4rem;
}

h2 {
  font-size: 2.4rem;
}
h3 {
  font-size: 2rem;
}

p {
  margin-top: 0;
}

.subtitulo {
  font-size: 1.6rem;
}

.separador {
  height: 1px;
  background: #ccc;
  margin: 2rem 0rem;
}

.separador--blue {
  height: 1px;
  background: var(--color-secondary);
  opacity: 0.4;
  width: 96vw;
  margin: 0 auto;
}

.split {
  max-width: 80%;
  margin: 0rem auto;
  background: var(--color-primary);
  height: 1px;
}

@media screen and (min-width: 1024px) {
  body {
    font-size: 1.8rem;
  }
  h1 {
    font-size: 4rem;
  }
  h2 {
    font-size: 3rem;
  }
  h3 {
    font-size: 2.4rem;
  }
}

/* ------------------- Links --------------------- */
a {
  text-decoration: none;
}

.link-arrow {
  color: var(--color-secondary);
  text-transform: uppercase;
  font-size: 2rem;
  font-weight: bold;
}

.link-arrow::after {
  content: "-->";
  margin-left: 5px;
  transition: margin 0.15s;
}

.link-arrow:hover::after {
  margin-left: 10px;
}

@media screen and (min-width: 1024px) {
  .link-arrow {
    font-size: 1.5rem;
  }
}
/* ------------------- Top Button --------------------- */

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 2rem; /* Place the button at the bottom of the page */
  right: 2rem; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: var(--color-primary); /* Set a background color */
  color: #ccc; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0.8rem 1.8rem; /* Some padding */
  border-radius: 5px; /* Rounded corners */
  font-size: 3rem; /* Increase font size */
}

#myBtn:hover {
  background-color: #000; /* Add a dark-grey background on hover */
  color: #fff;
}

/* ------------------- Badges --------------------- */

.badge {
  border-radius: 20px;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem 2rem;
  white-space: nowrap; /* Prevents a badge to wrapping into a second line, appear always in a single line */
}

.badge--primary {
  background: var(--color-primary);
  color: #fff;
}

.badge--secondary {
  background: var(--color-secondary);
  color: #fff;
}

.badge--small {
  font-size: 1.6rem;
}

@media screen and (min-width: 1024px) {
  .badge {
    font-size: 1.5rem;
  }
  .badge--small {
    font-size: 1.2rem;
  }
}

/* -------------------- Lists ---------------------- */

.list {
  list-style: none; /* get ride of the default bullet points */
  padding-left: 0; /* get ride of the default padding applied for the browsers */
  color: var(--color-headings);
}

.list--inline .list__item {
  display: inline-block;
  margin-right: 2rem;
}

.list--tick {
  list-style-image: url(../images/tick.svg);
  padding-left: 3rem; /* to show them in the screen, need to apply some padding */
}

.list--tick .list__item {
  padding-left: 0.5rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 1024px) {
  .list--tick .list__item {
    padding-left: 0;
  }
}

/* -------------------------- Icons ------------------------ */
.icon {
  width: 50px; /* Use absolute units (px), because the icon size does not change between devices */
  height: 50px;
}

.icon--primary {
  fill: var(--color-primary); /* use fill to color for svg icons */
}

.icon--secondary {
  fill: var(--color-secondary); /* use fill to color for svg icons */
}

.icon--white {
  fill: #fff;
}

.icon--black {
  fill: #302d2d;
}

.icon--yellow {
  fill: yellowgreen;
}

.icon-container {
  background: #f2f5f8;
  width: 64px;
  height: 64px;
  border-radius: 100%;
  display: inline-flex; /* span are inline elements, we need to specify display as block */
  justify-content: center;
  align-items: center;
}

.icon-container--white {
  background: #fff;
}

.icon-container--empresa {
  background: #edf0f2;
}

.icon-container--big {
  width: 100px;
  height: 100px;
}

/* -------------------------- Boton ------------------------ */

.boton {
  border-radius: 5px;
  background-color: #fff;
  border: none;
  color: var(--color-primary);
  text-align: center;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  padding: 1rem 2rem;
  transition: all 0.8s;
  cursor: pointer;
}

.boton--present {
  background: var(--color-secondary);
  color: #fff;
  font-size: 2rem;
  margin-top: 2rem;
  border-radius: 4px;
  letter-spacing: 0.1rem;
}

.boton--serveis {
  background: var(--color-secondary);
  color: #fff;
  margin-top: 0;
  margin-bottom: 2rem;
  border-radius: 4px;
}

.pedo {
  background: yellowgreen;
}

.boton--portafolis {
  background: rgba(30, 114, 189, 0.7);
  border: 0px solid var(--color-secondary);
  color: #fff;
  font-size: 2rem;
  margin-top: 0;
  text-transform: uppercase;
}

.boton--portafolis:hover {
  background: #fff;
  color: var(--color-secondary);
}

.boton span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.8s;
}

.boton span:after {
  content: "\00bb";
  position: absolute;
  opacity: 0;
  top: 0;
  right: -2rem;
  transition: 0.8s;
}

.boton:hover span {
  padding-right: 2rem;
}

.boton:hover span:after {
  opacity: 1;
  right: 0;
}

/* -------------------------- Buttons ------------------------ */

.btn {
  border-radius: 40px;
  border: 0;
  cursor: pointer;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 1rem 0; /* vertical margin respect another elements */
  outline: 0;
  padding: 2rem 4vw; /* Makes the padding in proportion of the viewport instead of rem measure */
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap; /* to don't have a second line if the text is bigger than the button */
}

.btn .icon {
  width: 2rem;
  height: 2rem;
  margin-right: 1rem;
  vertical-align: middle;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: #4a79a1;
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
}

.btn--secondary:hover {
  background: #4b8cc4;
}

.btn--accent {
  background: var(--color-secondary);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  max-width: 30rem;
}
.btn--accent:hover {
  background: var(--color-accent);
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

.btn--outline {
  background: #fff;
  color: var(--color-headings);
  border: 2px solid var(--color-headings);
}
.btn--outline:hover {
  background: var(--color-headings);
  color: #fff;
}

.btn--stretched {
  padding-left: 6rem;
  padding-right: 6rem;
}

.btn--block {
  width: 100%;
  display: inline-block;
}

.btn--ultimos {
  background: var(--color-primary);
  color: #fff;
  border-radius: 20px;
  font-size: 1.4rem;
  padding: 1rem 4vw;
}

.btn--ultimos:hover {
  background: #4a79a1;
}

.btn--serveis {
  background: var(--color-secondary);
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  max-width: 30rem;
  font-size: 1.4rem;
  padding: 1rem 4vw;
  font-weight: 400;
}
.btn--serveis:hover {
  background: var(--color-accent);
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1.5rem;
  }
}

/* -------------------------- Inputs ------------------------ */

.input {
  padding: 1.5rem 3.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  outline: 0; /* get ride of the outline when click the input box */
  color: var(--color-headings);
  font-size: 2rem;
}

::placeholder {
  color: #cdcbd7;
}

/* Group an input field or input component with something else */
.input-group {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  display: flex;
}

.input-group .input {
  border: 0;
  flex-grow: 1; /* Make the input field grow to take all the available space */
  padding: 1.5rem 2rem;
  width: 0; /* If does not establisha width, the browser will assign one, with width: 0, and flex-growth: 1, input will take the available space of the container */
}

.input-group .btn {
  margin: 4px;
}

@media screen and (min-width: 1024px) {
  .input {
    font-size: 1.5rem;
  }
}

/* -------------------------- Cards ------------------------ */

.card {
  border-radius: 7px;
  box-shadow: 0 0 20px 10px #f3f3f3;
  overflow: hidden;
}

.card__header,
.card__body {
  padding: 2rem 3rem;
}

.card--primary .card__header {
  background: var(--color-primary);
  color: #fff;
}

.card--secondary .card__header {
  background: var(--color-secondary);
  color: #fff;
}

.card--primary .badge--primary {
  background: #126de4;
}

.card--secondary .badge--secondary {
  background: #02cdf1;
}

/* -------------------------- Plans ------------------------ */

.plan {
  transition: 0, 2s ease-out;
}

.plan__name {
  color: #fff;
  margin: 0;
  font-weight: 500;
  font-size: 2.4rem;
}

.plan__price {
  font-size: 6rem;
}

.plan__billing-cycle {
  font-size: 2.4rem;
  font-weight: 300;
  opacity: 0.8;
  margin-right: 1rem;
}

.plan__description {
  font-size: 2rem;
  font-weight: 300;
  letter-spacing: 1px;
  display: block;
}

.plan .list__item {
  margin-bottom: 2rem;
}

.plan--popular {
  transform: scale(1.1); /* If the Plan is Popular we make the size 10% bigger*/
}

.plan--popular .card__header {
  position: relative;
}

.plan--popular .card__header::before {
  content: url(../images/popular.svg);
  width: 40px;
  display: inline-block;
  position: absolute;
  top: -6px;
  right: 5%;
}

.plan:hover {
  transform: scale(1.05);
}

.plan--popular:hover {
  transform: scale(1.15);
}

@media screen and (min-width: 1024px) {
  .plan__name {
    font-size: 1.4rem;
  }

  .plan__price {
    font-size: 5rem;
  }

  .plan__billing-cycle {
    font-size: 1.6rem;
  }

  .plan__description {
    font-size: 1.7rem;
  }
}

/* -------------------------- Media ------------------------ */

.media {
  display: flex;
}

.media__title {
  margin-top: 0;
}

.media__body {
  margin: 0 2rem;
}

.media__image {
  margin-top: 1rem;
}

/* -------------------------- Quotes ------------------------ */

.quote {
  font-size: 3rem;
  font-style: italic;
  color: var(--color-body-darker);
  line-height: 1.3;
}

.quote__text::before {
  content: open-quote;
}

.quote__text::after {
  content: close-quote;
}

.quote__author {
  font-size: 3rem;
  font-weight: 500;
  font-style: normal;
  margin-bottom: 0;
}

.quote__organization {
  color: var(--color-headings);
  opacity: 0.4;
  font-size: 2rem;
  font-style: normal;
}

.quote__icon {
  position: relative;
  bottom: 10px;
}

@media screen and (min-width: 1024px) {
  .quote {
    font-size: 2rem;
  }

  .quote__author {
    font-size: 2.4rem;
  }

  .quote__organization {
    font-size: 1.6rem;
  }
}
/* -------------------------- Parrilla ------------------------ */

.parrilla {
  display: grid;
}

.parrilla--grey {
  background: lightgrey;
}

@media screen and (min-width: 1024px) {
  .parrilla--1x2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .parrilla--1x3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .parrilla--1x4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .parrilla--1x6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* -------------------------- Grids ------------------------ */

.grid {
  display: grid;
}

@media screen and (min-width: 768px) {
  /* Grid 1x2 => 1 row 2 cols */
  .grid--1x2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .grid--1x3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--1x4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid--1x6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* -------------------------- Testimonials ------------------------ */

.testimonial {
  padding: 3rem;
}

.testimonial__image {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .testimonial .quote,
  .testimonial .quote__author {
    font-size: 2.4rem;
  }

  .testimonial .quote {
    margin-left: 6rem;
  }
}

@media screen and (min-width: 1024px) {
  .testimonial .quote,
  .testimonial .quote__author {
    font-size: 3rem;
  }

  .testimonial .quote {
    margin-left: 6rem;
  }
}

/* -------------------------- Callouts ------------------------ */

.callout {
  padding: 4rem;
  border-radius: 5px;
}

.callout--primary {
  background: var(--color-primary);
  color: #fff;
}

.callout__heading {
  color: #fff;
  margin-top: 0;
  font-size: 3rem;
}

.callout .btn {
  justify-self: center;
  align-self: center;
}

.callout__content {
  text-align: center;
}

@media screen and (min-width: 768px) {
  .callout .grid--1x2 {
    grid-template-columns: 1fr auto; /* auto will make the column of content widther to fit the button */
  }

  .callout__content {
    text-align: left;
  }

  .callout .btn {
    justify-self: start;
    margin: 0 2rem;
  }
}

/* -------------------------- Collapsibles ------------------------ */

.collapsible__header {
  display: flex;
  justify-content: space-between; /* Push the items to the edges of the containers and add space between them */
}

.collapsible__heading {
  margin-top: 0;
  font-size: 3rem;
}

.collapsible__chevron {
  transform: rotate(-90deg);
  transition: 0.3s;
}

/* We can't add transition to the display element, then we use overflow and max-height 
to make the transition */
.collapsible__content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s; /* We animate all the properties(opacity and max-height) */
}

/* Use the js function -> this.classList.toggle("collapsible--expanded");
Search for the collapsible classes and toggle(alternate) the .collapsible--expanded class
If the .collapsible--expanded class is removed, the class will collapse, if not is expanded
*/

/* If expanded, icon in original position */
.collapsible--expanded .collapsible__chevron {
  transform: rotate(0);
}
/* The max-height of the content are will be 100% of the viewport allowing to stretch vertically,
 but not more than his content if we have used the height property. */
.collapsible--expanded .collapsible__content {
  max-height: 100vh;
  opacity: 1;
}

/* -------------------------- Cabecera ------------------------ */

.cabecera {
  --padding-vertical: 1rem;
  padding: var(--padding-vertical) 0rem;
  margin: 1rem 0rem;
}

.fondo {
  background: #f2f4f8;
}

.cabecera--blue {
  background: var(--color-secondary);
}

.cabecera--white {
  background: #f2f5f8;
  margin-bottom: 4rem;
}

.cabecera--nomargin {
  padding: 1rem 0rem;
  margin-top: 1rem;
  margin-bottom: 0;
}

.cabecera--skewed-right {
  padding-bottom: calc(var(--padding-vertical) + 4rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 100%);
  background: var(--color-secondary);
}

.cabecera--skewed-left {
  padding-bottom: calc(var(--padding-vertical) + 4rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 75%);
}

.cabecera__contenido {
  text-align: center;
  margin-bottom: 0rem;
}

.cabecera__titulo {
  font-size: 6rem;
  font-weight: normal;
  margin-top: 2rem;
  color: #fff;
  letter-spacing: 0.2rem;
}

.cabecera__texto {
  font-size: 2.2rem;
  text-align: center;
  padding: 2rem 2rem;
  color: var(--color-secondary);
  letter-spacing: 0.1rem;
}

.cabecera__texto--portafolis {
  color: #a9a9a9;
}

.cabecera__texto__serveis {
  font-size: 2.6rem;
  font-style: italic;
  color: var(--color-secondary);
  margin: 2rem;
}

@media screen and (min-width: 768px) {
  .cabecera__texto__serveis {
    padding-right: 4rem;
    display: inline-block;
  }
}

/* -------------------------- Blocks ------------------------ */

.block {
  --padding-vertical: 1rem;
  padding: var(--padding-vertical) 2rem;
  margin-top: 0rem;
}

.block__header {
  text-align: center;
  margin-bottom: 4rem;
}

.block__header__serveis {
  text-align: right;
  margin-right: 4rem;
}

.block__heading {
  margin-top: 2rem;
}

.block--dark {
  background: #b3b3b3;
  color: #fff;
}

.block--dark h1,
.block--dark h2,
.block--dark h3 {
  color: #fff;
}

.block--grey .block__heading {
  color: #fff;
}

.block--grey {
  background: #f2f5f8;
  color: var(--color-secondary);
}

.block--grey h1,
.block--grey h2,
.block--grey h3 {
  color: var(--color-secondary);
}

.block--grey .block__heading {
  color: var(--color-secondary);
}

.block--skewed-right {
  padding-bottom: calc(var(--padding-vertical) + 4rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}

.block--skewed-left {
  padding-bottom: calc(var(--padding-vertical) + 1rem);
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}

.container {
  max-width: 80%;
  margin: 0 auto;
}

.container--portfolio {
  max-width: 80vw;
  margin: 0 auto;
}

.container--industrial {
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .container--industrial {
    max-width: 66%;
    margin: 0 auto;
  }
}

.container--90 {
  max-width: 90%;
  margin: 0rem auto;
}

.container--95 {
  max-width: 95%;
  margin: 0rem auto;
}

.container--max {
  /*max-width: 100%;
  margin: 0 auto;*/
  max-width: 100vw;
  margin: 0 auto;
  padding: 0;
}
.container--grey {
  max-width: 80%;
  margin: 0 auto;
  background: #f2f4f8;
}
.container--max--grey {
  /*max-width: 100%;
  margin: 0 auto;*/
  max-width: 100vw;
  margin: 0;
  padding: 0;
  background: #f2f4f8;
}

/* -------------------------- Navigation Bar ------------------------ */

.nav {
  background: #fff;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0 1rem;
  align-items: center;
  text-transform: capitalize;
  background: chartreuse;
}

.nav__list {
  width: 100%; /* Combine with flex-wrap, makes the list of items go in another line */
  margin: 0;
}

.nav__item {
  padding: 0.5rem 2rem;
  border-bottom: 1px solid #ccc;
}

.nav__item > a {
  color: var(--color-primary);
  transition: color 0.3s;
}

.nav__item > a:hover {
  color: var(--color-secondary);
}

.nav__item > a > img {
  max-width: 4rem;
  max-height: 4rem;
  transform: translateY(5px);
}

.nav__item_logos {
  padding: 0.5rem 2rem;
  border-bottom: 1px solid #ccc;
  align-content: space-around;
}

.nav__item_logos > a {
  color: var(--color-primary);
  transition: color 0.3s;
}

.nav__item_logos > a:hover {
  color: var(--color-secondary);
}

.nav__item_logos > a > img {
  max-width: 4rem;
  max-height: 4rem;
  transform: translateY(5px);
}

.nav__toggler {
  opacity: 0.5;
  transition: box-shadow 0.15s;
  cursor: pointer;
}
/* The opacity and box-shadow will only be applied to navigation bars that are expanded */
.nav.collapsible--expanded .nav__toggler {
  opacity: 1;
  box-shadow: 0 0 0 3px var(--color-secondary);
  border-radius: 5px;
}

.nav__logo {
  transform: translateY(
    5px
  ); /* Move the logo to place it in the middle of the component, in case the image it's not well centered in Photoshop, for example more margin top that bottom */
}

@media screen and (min-width: 768px) {
  .nav__toggler {
    display: none; /* Hide the nav toggler */
  }

  .nav__list {
    width: auto;
    display: flex;
    font-size: 1.6rem;
    max-height: 100%; /* Make the navigation list always visible */
    opacity: 1;
  }

  .nav__item {
    border: 0;
  }

  .nav__item > a > img {
    width: 3rem;
    height: 3rem;
    transform: translateY(0px);
  }

  .nav__item_logos {
    border: 0;
  }

  .nav__item_logos > a > img {
    width: 3rem;
    height: 3rem;
    transform: translateY(0px);
  }

  .nav__logo {
    display: block;
  }
}

/* ---------------------- Navigation Bar 2 ---------------- */

.logo {
  text-align: center;
  padding: 1rem 0rem;
  height: 104px; /* Avoid Problem with Bootstrap Height, make the height fixed*/
}

/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: rgba(144, 144, 144, 0.8);
  text-align: center;
  padding: 0.5rem 1.2rem;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.2rem;
  text-transform: uppercase;
  transition: color 0.8s;
}

/* Change the color of links on hover */
.topnav a:hover {
  color: var(--color-body-darker);
  text-decoration: none;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  color: var(--color-secondary);
}

/* Align Items right */
.topnav .right {
  float: right;
  padding: 0;
}

.topnav > a > img {
  width: 30px;
  height: 30px;
  padding: 0;
  margin-right: 1rem;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icono {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 698px) {
  /*.topnav a:not(:first-child) {
    display: none;
  }*/

  .topnav {
    border-bottom: 0px solid rgba(204, 204, 204, 0.3);
  }

  .topnav a {
    display: none;
    padding: 1rem 1rem;
    font-size: 1.2rem;
    line-height: 1.5;
    letter-spacing: 0.1rem;
    color: rgba(112, 112, 112, 1);
  }
  .topnav > a > img {
    width: 30px;
    height: 30px;
    padding: 0rem;
  }
  .topnav a.icono {
    float: right;
    display: block;
    padding: 0;
  }
  .topnav a.icono > img {
    padding: 0rem;
  }
  .topnav a.social {
    float: right;
    display: block;
    padding-right: 1rem;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 698px) {
  .topnav.responsive_bar {
    position: relative;
  }
  .topnav.responsive_bar a.icono {
    position: absolute;
    right: 0;
    top: 0;
    border: 0;
  }
  .topnav.responsive_bar a {
    float: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid rgba(204, 204, 204, 0.3);
  }

  .topnav.responsive_bar a.right.social {
    border: 0;
  }

  .topnav.responsive_bar a.right.social > img.linke {
    position: absolute;
    right: 10rem;
    top: 0;
  }

  .topnav.responsive_bar a.right.social > img.insta {
    position: absolute;
    right: 5rem;
    top: 0;
  }

  .topnav.responsive_bar a.right.social > img.idioma {
    position: absolute;
    right: 15rem;
    top: 0;
  }

  .topnav.responsive_bar a:last-child {
    border: 0;
  }
}

/* -------------------------- Hero ------------------------ */

.hero {
  clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}

.hero__tagline {
  font-size: 2rem;
  color: #b9c3cf;
  letter-spacing: 1px;
  margin: 2rem 0 5rem;
}

.hero__image {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .hero {
    padding-top: 0;
  }
  .hero__content {
    text-align: left;
    align-self: center;
  }
}

/* -------------------------- Domain Block ------------------------ */

.block-domain .input-group {
  box-shadow: 0 0 30px 20px #e6ebee;
  border: 0;
  margin: 4rem auto;
  max-width: 670px;
}

.block-domain__prices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 6rem);
  font-size: 2rem;
  font-weight: 600;
  justify-items: center;
  max-width: 700px;
  margin: 0 auto;
}

/* repeat repeat(auto-fit, minmax(10rem, 1fr)) Distribute the items equally in the container
If in the future we add or quit one, will be equally distributed as well, need to define minmax*/
@media screen and (min-width: 768px) {
  .block-domain__prices {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }
}

/* -------------------------- Plans Block ------------------------ */

.block-plans .grid {
  gap: 8rem 4rem; /* Rows (8rem) for mobile version, Columns (4rem) for desktop devices*/
}

.block-plans .card {
  max-width: 500px;
  margin: 0 auto;
}

/* -------------------------- Features Block ------------------------ */

.feature {
  gap: 4rem 2rem;
  margin: 12rem 0;
}

.feature:first-of-type {
  margin-top: 6rem; /* Control the margin between the Header and the Features */
}

.feature__heading {
  margin: 1rem 0;
}

.feature__image {
  width: 100%; /* Make the image responsive */
}

@media screen and (min-width: 768px) {
  .feature:nth-of-type(odd) {
    background: lightgrey;
  }
  .feature:nth-of-type(odd) .feature__content {
    order: 2; /* We target the even features (.feature:nth-of-type(even)) and alter the order (2) (1, would by the default order), now the image come first and then the image, the image takes the first position on the grid */
  }
}

/* -------------------------- Showcase Block ------------------------ */

.block-showcase__image > img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .block-showcase .grid {
    grid-template-columns: 50% 50%;
  }

  .block-showcase__image {
    justify-self: end;
  }

  .block-showcase__image > img {
    width: auto;
    max-width: 700px;
  }
}

/* -------------------------- Footer ------------------------ */

.footer {
  background: var(--color-secondary);
  color: #fff;
  margin-top: 0rem;
  padding: 2rem 0rem 4rem 0rem;
}

.footer a {
  color: #fff;
  transition: color 0.3s;
}

.footer a:hover {
  color: #777;
}

.footer__section {
  padding: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

.footer__section .list {
  margin: 0;
}

.footer__heading {
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
  font-size: 2.4rem;
  padding-top: 1rem;
  color: #fff;
}

.footer__brand {
  margin: 6rem 0rem 0rem 0rem;
  text-align: center;
}

.footer__brand img {
  /* TODO: Consider refactoring this and applying it to all images. */
  width: 100%;
  max-width: 209px; /* Don't make the image larger than the original */
}

.footer__social img {
  /* TODO: Consider refactoring this and applying it to all images. */
  max-width: 33px;
  max-width: 33px; /* Don't make the image larger than the original */
  opacity: 1;
}

.footer__copyright {
  padding-top: 1rem;
  font-size: 1.4rem;
  color: #ccc;
  opacity: 0.8;
}

.footer .collapsible__content {
  color: #fff;
  opacity: 0.7;
  font-size: 2rem;
  margin-top: 1rem;
}

@media screen and (min-width: 768px) {
  .footer__sections {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  }

  .footer .collapsible__chevron {
    display: none;
  }

  .footer .collapsible__content {
    max-height: 100%;
    color: #fff;
    opacity: 0.7;
    font-size: 1.8rem;
    margin-top: 0rem;
  }

  .footer__brand {
    order: -1; /* Move the Logo to be the first item (left)*/
    margin-top: 3rem;
  }

  .footer__copyright {
    font-size: 1.6rem;
    opacity: 0.6;
  }

  .footer__section {
    border: 0;
  }

  .footer__heading {
    font-size: 2rem;
    padding-top: 2.6rem;
    padding-bottom: 1rem;
    opacity: 0.9;
  }
}

/* -------------------------- Slideshow (Index) ------------------------ */

.slideshow-container {
  /* max-width: 1140px; 
  position: relative;
  margin: 2rem auto;*/
  margin: 1rem auto;
  max-height: 535px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

.fade > img {
  width: 100%;
  object-fit: cover;
}

@-webkit-keyframes fade {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

/* -------------------------- Ficha (Index, Serveis ------------------------ */

.ficha {
  text-align: center;
  padding: 2rem 4rem;
}

.ficha__titulo {
  font-size: 1.8rem;
  font-weight: normal;
  color: var(--color-secondary);
  padding: 1rem 0rem;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
}

.ficha__titulo--empresa {
  padding: 0rem;
}

.ficha__texto {
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.1rem;
  color: #302d2d;
  opacity: 0.7;
}

.ficha__texto--italic {
  font-style: italic;
}

/* -------------------------- Serveis Block ------------------------ */

.serveis__contenido {
  text-align: center;
  padding: 2rem 4rem;
}

.serveis__titulo {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 2.2rem;
  color: var(--color-primary);
  padding-bottom: 1.6rem;
  font-weight: normal;
}

.serveis__texto {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #000;
}

/* -------------------------- Empresa Block ------------------------ */

.empresa {
  align-items: center;
  grid-gap: 2.5rem;
}

.empresa--top {
  align-items: start;
}

.empresa__contenido {
  text-align: left;
  padding: 0rem 0rem;
}

.empresa__contenido2 {
  text-align: right;
  padding-top: 8rem;
}

.empresa__titulo {
  font-size: 3rem;
  color: var(--color-secondary);
}

.empresa__texto {
  margin-top: 2rem;
  font-size: 1.8rem;
  color: rgba(144, 144, 144, 1);
  margin-bottom: 4rem;
  line-height: 1.8;
}
.empresa__image {
  width: 100%; /* Make the image responsive */
}

.empresa__image__border {
  width: 100%; /* Make the image responsive */
  border: 1px solid #ccc;
}

.empresa__image__border:hover {
  transform: scale(1.02);
  transition: 0.8s ease;
}

@media screen and (min-width: 1024px) {
  .empresa__contenido {
    padding: 0rem 4rem;
  }
}

.empresa__serveis__contenido {
  text-align: center;
  padding: 4rem 4rem;
  margin: 0rem 0rem;
  background: #f2f5f8;
}

.empresa__serveis__contenido:nth-child(odd) {
  background: #edf0f2;
}

.empresa__serveis__titulo {
  font-size: 2.2rem;
  color: var(--color-primary);
  padding-bottom: 1.6rem;
  cursor: pointer;
}

.empresa__serveis__texto {
  font-size: 1.6rem;
  color: #000;
  padding: 0rem;
}
/* Show Hide Text Block

.empresa__serveis__texto {
  visibility: hidden;
  padding: 3rem;
}

.empresa__serveis__titulo:hover + .empresa__serveis__texto {
  display: block;
  font-size: 1.6rem;
  color: #fff;
  padding: 2rem;
  background: var(--color-secondary);
  border-radius: 10px;
  visibility: visible;
}*/

/* -------------------------- Presentacion Block ------------------------ */

.present {
  align-items: center;
  gap: 4rem 0rem;
  margin-bottom: 4rem;
  grid-template-columns: repeat(1, 1fr);
}

.present:nth-of-type(even) {
  background: #fff;
}

.present > picture > img {
  width: 100%;
  padding: 0rem 4rem 4rem 4rem;
}

.present__contenido {
  text-align: left;
  margin: 0rem 4rem;
}

.present__contenido__right {
  text-align: left;
  margin: 0rem 0rem;
}

.present__contenido__right > picture > a > img {
  margin: 0rem 0rem 0rem 0rem;
}

.present__titulo {
  font-size: 4rem;
  font-weight: normal;
  color: var(--color-secondary);
  padding-bottom: 2rem;
  letter-spacing: 0.1rem;
}

.present__titulo--italic {
  font-style: italic;
  font-weight: 100;
}

.present__texto {
  font-size: 1.8rem;
  line-height: 1.8;
  color: #787878;
  max-width: 120ch;
}

.present__texto--empresa {
  color: #444;
}

.present__contenido__right__texto {
  color: #a9a9a9;
  font-size: 1.8rem;
}

.present__contenido__right__texto > h3 {
  font-size: 3rem;
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 100;
}

.present__separador {
  height: 1px;
  background: #ccc;
  margin: 0rem 0rem;
}

@media screen and (min-width: 1200px) {
  .present {
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
  }
  .present--contacte {
    align-items: flex-start;
  }
  .present__contenido {
    text-align: left;
    padding-left: 6rem;
    margin-top: 3rem;
  }
  .present:nth-of-type(odd) .present__contenido {
    order: 2; /* We target the even features (.feature:nth-of-type(even)) and alter the order (2) (1, would by the default order), now the image come first and then the image, the image takes the first position on the grid */
  }
  .present__titulo {
    font-size: 4rem;
  }
  .present__texto {
    max-width: 70ch;
  }

  .present > picture > img {
    width: 100%;
    padding: 4rem;
  }

  .present__contenido__right > picture > a > img {
    margin: 4em 0rem 2rem 0rem;
  }

  .present__separador {
    display: none;
  }
}
/* -------------------------- Intro Block ------------------------ */

.intro {
  align-items: center;
  gap: 4rem 4rem;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  grid-template-columns: repeat(1, 1fr);
}

article.grid.grid--1x2.intro {
  margin-top: 1rem;
}

.intro:nth-of-type(odd) {
  background: #fff;
}

.intro:first-of-type {
  margin-top: 6rem; /* Control the margin between the Header and the Features */
}

.intro__content {
  text-align: center;
  background: #f2f5f8;
  padding: 2rem;
}

.intro__heading {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 2.4rem;
  margin: 1rem 0;
  color: var(--color-secondary);
  font-weight: normal;
}

.intro__text {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 2rem;
  color: var(--color-body);
  padding: 2rem 2rem 2rem 0;
  line-height: 1.6;
}

.intro__image {
  width: 100%; /* Make the image responsive */
  padding: 2rem;
}

/*@media screen and (min-width: 768px) {
  .intro:nth-of-type(odd) .intro__content {
    order: 2; /* We target the even features (.feature:nth-of-type(even)) and alter the order (2) (1, would by the default order), now the image come first and then the image, the image takes the first position on the grid */
/*}
  .intro {
    grid-template-columns: repeat(1, 1fr);
  }
}*/

@media screen and (min-width: 1200px) {
  .intro {
    grid-template-columns: repeat(2, 1fr);
  }
  .intro__content {
    text-align: left;
  }

  .intro:nth-of-type(odd) .intro__content {
    order: 2; /* We target the even features (.feature:nth-of-type(even)) and alter the order (2) (1, would by the default order), now the image come first and then the image, the image takes the first position on the grid */
  }
  .intro__text {
    font-size: 1.6rem;
    color: #000;
  }
}

/* -------------------------- Slideshow Ultimos Proyectos Block ------------------------ */

.ultimo {
  padding-bottom: 6rem;
}

.ultimo__heading {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: normal;
  text-align: left;
  margin: 0rem 0;
  color: var(--color-secondary);
  padding: 0 0 2rem 0rem;
}

.ultimo-slideshow-container {
  /* max-width: 1140px; 
  position: relative;
  margin: 2rem auto;*/
  margin: 0rem auto;
  max-height: 512px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}

/* Hide the images by default */
.mySlidesUltimos {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.ultimo_slides_text {
  color: #fff;
  font-size: 1rem;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.fade_away {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

.fade_away > img {
  width: 100%;
  object-fit: cover;
}

@-webkit-keyframes fade_away {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade_away {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

@media all and (max-width: 768px) {
  .ultimo__heading {
    text-align: center;
  }
}

/* --------------- Typewriter -----------------  */

.typewriter {
  display: flex;
  justify-content: left;
  align-items: center;
}
.typewriter p {
  font-size: 4rem;
  padding: 2rem;
  font-weight: 100;
  font-style: italic;
  letter-spacing: 0.1rem;
  text-align: center;
  overflow: hidden;
  color: var(--color-secondary);
}
.typewriter p span.typed-text {
  font-weight: 100;
  color: #666;
}
.typewriter p span.cursor {
  display: inline-block;
  background-color: var(--color-secondary);
  opacity: 0.4;
  margin-left: 0.1rem;
  width: 2px;
  animation: blink 1s infinite;
}
.typewriter p span.cursor.typing {
  animation: none;
}
@keyframes blink {
  0% {
    background-color: var(--color-secondary);
  }
  49% {
    background-color: var(--color-secondary);
  }
  50% {
    background-color: transparent;
  }
  99% {
    background-color: transparent;
  }
  100% {
    background-color: #ccc;
  }
}

@media screen and (min-width: 1200px) {
  .typewriter p {
    padding: 2rem 1rem 0rem 7rem;
  }
}

/* Clients */

.clients__heading {
  margin: 2rem 0;
  color: var(--color-secondary);
  text-align: center;
}

.clients__text {
  text-align: center;
  color: var(--color-body);
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

/* -------------------------- Equip Block ------------------------ */

.equip {
  display: grid;
  margin-bottom: 4rem;
}

.equip__titulo {
  font-size: 4rem;
  font-weight: 100;
  font-style: italic;
  color: var(--color-secondary);
  padding-bottom: 1rem;
  letter-spacing: 0.1rem;
  text-align: center;
  margin-top: 0;
}

.equip__titulo--clients {
  font-size: 4rem;
  padding-top: 4rem;
}

.equip__texto {
  font-size: 2rem;
  line-height: 1.8;
  color: #787878;
  text-align: center;
  padding-bottom: 3rem;
}

.equip__texto--clients {
  padding-bottom: 4rem;
}

.equip__contenido {
  margin: 1rem;
  padding: 0rem;
  border: 1px solid #fff;
  position: relative;
}

.equip__contenido:hover {
  transform: scale(1.05);
  transition: 0.8s ease;
}

.equip__contenido img {
  width: 100%;
}

.sobre {
  position: absolute;
  bottom: 0.5rem;
  left: 0rem;
  background: rgb(30, 114, 189);
  background: rgba(30, 114, 189, 0.8); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.8s ease;
  opacity: 0;
  color: #fff;
  font-size: 1.6rem;
  font-style: italic;
  letter-spacing: 0.1rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.equip__contenido:hover .sobre {
  opacity: 1;
}

@media screen and (min-width: 768px) {
  .equip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .equip {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------- Client Block ------------------------ */

.client {
  display: grid;
  margin-bottom: 4rem;
}

.client__titulo {
  font-size: 3rem;
  color: var(--color-secondary);
  text-align: center;
}

.client__texto {
  font-size: 2.2rem;
  color: #a9a9a9;
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.client__contenido {
  margin: 2rem;
  padding: 0;
  border: 1px solid #ccc;
  position: relative;
}

.client__contenido:hover {
  border: 1px solid #185b97;
  transform: scale(1.05);
  transition: 0.8s ease;
}

.client__contenido img {
  width: 100%;
  display: block;
}

@media screen and (max-width: 768px) {
  .client {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 768px) {
  .client {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1024px) {
  .client {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1300px) {
  .client {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------------- Equip Block ------------------------ */

.gallery {
  border: 1px solid #ccc;
  margin-bottom: 2rem;
  position: relative;
}

.gallery:hover {
  border: 1px solid #185b97;
  transform: scale(1.05);
  transition: 0.8s ease;
}

.gallery img {
  display: block;
  width: 100%;
  height: auto;
}

.desc {
  font-size: 1.4rem;
  padding: 1rem;
  text-align: center;
}
/* ---- Overlay test ---- */

.overlay {
  position: absolute;
  bottom: 0;
  background: rgba(24, 91, 151);
  background: rgba(24, 91, 151, 0.6); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
  transition: 0.8s ease;
  opacity: 0;
  color: white;
  font-size: 2rem;
  padding: 2rem 1rem;
  text-align: center;
}

/* When you mouse over the container, fade in the overlay title */
.gallery:hover .overlay {
  opacity: 1;
}

/* ------------- */

.responsive {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .responsive {
    padding: 0 1rem;
    float: left;
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  .responsive {
    padding: 0 1rem;
    float: left;
    width: 33.33333%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/* -------------------------- Slider Clients Block ------------------------ */

.customer-logos {
  background: #f2f5f8;
  padding: 8rem 8rem;
}

.slick-slide {
  margin: 0px 1rem;
}

.slick-slide img {
  width: 100%;
}

.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before,
.slick-track:after {
  display: table;
  content: "";
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

/* -------------------------- Contacte Form Block ------------------------ */

.container--contact {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea,
#contact button[type="submit"] {
  font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif;
}

#contact {
  padding: 0rem;
  margin-bottom: 0rem;
}

fieldset {
  border: medium none !important;
  margin: 0;
  min-width: 100%;
  padding: 0;
  width: 100%;
}

#contact input[type="text"],
#contact input[type="email"],
#contact input[type="tel"],
#contact input[type="url"],
#contact textarea {
  font-size: 1.6rem;
  width: 100%;
  border: 2px solid #ccc;
  background: #fff;
  margin: 2rem 0;
  padding: 2rem;
  cursor: pointer;
}

#contact input[type="text"]:hover,
#contact input[type="email"]:hover,
#contact input[type="tel"]:hover,
#contact input[type="url"]:hover,
#contact textarea:hover {
  -webkit-transition: border-color 0.3s ease-in-out;
  -moz-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  border: 2px solid var(--color-secondary);
}

#contact textarea {
  height: 15rem;
  max-width: 100%;
}

#contact button[type="submit"] {
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  border-radius: 0px;
  background: var(--color-secondary);
  color: #fff;
  margin: 0 0 1rem;
  padding: 2rem;
  font-size: 1.8rem;
}

#contact button[type="submit"]:hover {
  background: var(--color-primary);
  -webkit-transition: background 0.3s ease-in-out;
  -moz-transition: background 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

#contact button[type="submit"]:active {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

#contact input:focus,
#contact textarea:focus {
  outline: 0;
  border: 1px solid #999;
}
::-webkit-input-placeholder {
  color: #888;
}
:-moz-placeholder {
  color: #888;
}
::-moz-placeholder {
  color: #888;
}
:-ms-input-placeholder {
  color: #888;
}

/* -------------------------- Portafolis Block ------------------------ */

/* Override bootstrap classes */
.item img {
  margin: 0rem auto;
  max-height: 675px;
  width: 100%;
}

.carousel-inner {
  border: 0px solid #ccc;
}

.carousel-caption {
  margin-bottom: 3rem;
}

.portafolis {
  margin-bottom: 4rem;
  text-align: center;
}

.portafolis__titulo {
  font-size: 3.4rem;
  font-weight: 100;
  font-style: italic;
  color: var(--color-secondary);
  padding-bottom: 0rem;
  letter-spacing: 0.1rem;
  margin-top: 4rem;
}

.portafolis__texto {
  font-size: 2rem;
  line-height: 1.8;
  color: #a9a9a9;
  margin-bottom: 4rem;
}

/* -------------------------- Galeria Block ------------------------ */

.galeria {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 5vw);
  grid-gap: 1.5rem;
}

.galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galeria__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.galeria__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;

  /** Alternative Syntax **/
  /* grid-column: 3 / span 2;  */
  /* grid-row: 1 / span 2; */
}

.galeria__item--3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4;
  grid-row: 1 / span 5; */
}

.galeria__item--4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4;  */
  /* grid-row: 3 / span 3; */
}

.galeria__item--5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 1 / span 4; */
  /* grid-row: 6 / span 3; */
}

.galeria__item--6 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;

  /** Alternative Syntax **/
  /* grid-column: 5 / span 4; */
  /* grid-row: 6 / span 3; */
}

/* -------------------------- Grid Gallery Block ------------------------ */

.grid-gallery {
  display: grid;
  grid-auto-rows: 250px;
  grid-gap: 2rem;
  grid-auto-flow: row dense;
  max-width: 1200px;
  margin: 0 auto;
}

.grid-gallery__item {
  opacity: 0.9;
}

.grid-gallery__item:hover {
  transform: scale(1.03);
  transition: 0.8s ease;
  border: 1px solid #ccc;
  opacity: 1;
}

.grid-gallery__item:nth-child(1) {
  grid-column: span 3;
}

.grid-gallery__item:nth-child(5) {
  grid-column: span 2;
  grid-row: span 1;
}

/*
@media all and (min-width: 320px) {
  .grid-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
}*/

@media all and (max-width: 698px) {
  .grid-gallery {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid-gallery__item {
    grid-column: span 3;
  }
  .grid-gallery__item:nth-child(5) {
    grid-column: span 3;
  }
}
/*
@media all and (min-width: 768px) {
  .grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media all and (min-width: 1024px) {
  .grid-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}*/
/*
.grid-gallery__item:nth-child(11n + 1) {
  grid-column: span 1;
}

.grid-gallery__item:nth-child(11n + 4) {
  grid-column: span 2;
  grid-row: span 1;
}

.grid-gallery__item:nth-child(11n + 6) {
  grid-column: span 3;
  grid-row: span 1;
}

.grid-gallery__item:nth-child(11n + 7) {
  grid-column: span 1;
  grid-row: span 2;
}

.grid-gallery__item:nth-child(11n + 8) {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-gallery__item:nth-child(11n + 9) {
  grid-row: span 3;
}
*/
.grid-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*-------------------- Lightbox --------------------------*/

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
/* TODO: Grid responsive in small screens */
.column {
  float: left;
  width: 25%;
  padding: 0;
  text-align: center;
  margin-bottom: 1rem;
}

/* The Modal (background) */
/* TODO: Margin Bottom for the thumbnails */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 2rem;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  /* position: relative;
  background-color: #fff000;
  margin: auto;
  padding: 0;
  width: 70%;
  max-width: 1200px;*/
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /*width: 90%;
  max-width: 1200px;*/
  width: 100%;
  height: 100%;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 35px;
  font-weight: bold;
  z-index: 2;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides_lightbox {
  display: none;
}

/* TODO: image good ratio when gets bigger 
.mySlides img {
  max-height: 400px;
}
*/
.mySlides_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mySlides2_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides2_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mySlides3_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides3_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mySlides4_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides4_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mySlides5_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides5_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mySlides6_lightbox {
  width: 100%;
  height: 100%;
}

.mySlides6_lightbox img {
  object-fit: contain;
  height: 90%;
  max-width: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Next & previous buttons */
.prev__lightbox,
.next__lightbox {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next__lightbox {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev__lightbox:hover,
.next__lightbox:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: red;
  padding: 2px 16px;
  color: blue;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}