:root {
  --itgeo-ci: #2f4da3;
  --itgeo-ci-hover: #1137a1;
  --itgeo-footer: #1137a1;
  --itgeo-highlight: #ff3532;
  --dev-outline: 0px solid red;
}

body {
  padding-bottom: 0;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: #000000;
}

.bgblue a,
.bgblue a:link,
.bgblue a:visited,
.bgblue a:hover,
.bgblue a:active,
footer a,
footer a:link,
footer a:visited,
footer a:hover,
footer a:active {
  color: #fff;
}

a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:active {
  background-color: var(--itgeo-ci);
  color: #fff;
}

a.btn-primary:hover {
  background-color: var(--itgeo-ci-hover);
}

a.btn-light,
a.btn-light:link,
a.btn-light:visited,
a.btn-light:hover,
a.btn-light:active {
  background-color: white;
  color: #2f4da3;
}
a.btn-light:hover {
  color: #1137a1;
}

.bg-itgeo-footer {
  background-color: var(--itgeo-footer);
  color: white;
}

/*https://www.youtube.com/watch?v=zT9Ftmw0-uc*/
a {
  outline-color: transparent;
}

/* *:focus{
    outline: 1px solid var(--itgeo-ci);
}*/
.logo {
  width: 200px;
}

/*icon color */
.bi {
  color: var(--itgeo-ci);
}

/*.h2, h2 {
    font-size: calc(1.725rem + .9vw);
}*/

/* components */
.infobox {
  display: grid;
  grid-template-areas:
    "one"
    "two";
  box-shadow: 0 8px 22px 3px #e9e4e4;
  margin-bottom: 4rem;
}

.hero .infobox {
  background-color: var(--itgeo-ci);
  color: white;
  box-shadow: 0 8px 22px 3px #7f7d7d;
}

.infobox div {
  outline: var(--dev-outline);
}

.infobox div:nth-child(1) {
  grid-area: one;
}

.infobox div:nth-child(2) {
  grid-area: two;
}

.infobox__content {
  display: flex;
  align-items: center;
  /*padding: 3rem 4rem 0 4rem;*/
  padding: 2rem;
}
.carousel-box .infobox__content {
  background-color: var(--itgeo-ci);
  color: white;
}

.infobox__img {
  /* padding: 2rem 4rem 0 4rem;*/
  padding: 2rem;
}

.carousel {
  padding: 2rem 10%;
}

.carousel-control-next,
.carousel-control-prev {
  width: 10%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--itgeo-ci);
  border-radius: 50%;
}

@media (min-width: 1024px) {
  .infobox {
    grid-template-columns: 50% 50%;
  }

  .carousel-box .infobox {
    grid-template-columns: 30% 70%;
  }

  .base {
    grid-template-areas: "one two";
  }

  .reverse {
    grid-template-areas: "two one";
  }
}