@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
html,
body {
  position: relative;
  height: 100%;
  width: 100%;
}

.dropdown {
  float: right;
  overflow: hidden;
}

.show{
    color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.dropdown-content a {
  /* float: none; */
  padding: 6px;
  right: 80px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.swiper-container {
  width: 100%;
  height: 55vh;
  background-color: #000;
}

/* Swiper slides */
.swiper-slide {
  position: relative;
}

.slide-1 {
  background-color: #fff;
}

.slide-captions {
  position: absolute;
  top: 35%;
  left: 20%;
  text-align: center;
  color: #fff;
  z-index: 999;
  transform: translateY(-50%);
}
.slide-captions .current-title {
  margin: 0;
  text-align: center;
  font-size: 48px;
  font-weight: 600;
  color: #fff;
  /* text-shadow: 0 5px 5px #941313, 0 0 5px #000; */
}
.swiper-pagination-bullet-active {
  background-color: #fff;
}

/* Swiper pagination */
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 20px;
}
.swiper-button-prev,
.swiper-button-next {
  color: #fff;
}

.group:hover .group-hover\:block {
  display: block !important;
}

#learn-more {
  fill-opacity: 0;
  fill: #fff;
  stroke: #fff;
  stroke-width: 2;
  border-radius: 5px;
  stroke-linejoin: round;
  transition: all 250ms ease-in;
  cursor: pointer;
}
#learn-more:hover {
  fill-opacity: 1;
}
#learn-more:hover ~ .learn-more-text {
  fill: #005fa4;
}

.learn-more-text {
  font-family: "Roboto";
  fill: #fff;
  pointer-events: none;
  font-size: 14px;
  transition: all 250ms ease-in;
}

.center {
  fill: #005fa4;
}

.pointer {
  fill: #fff;
  stroke: #3b8fc0;
  stroke-width: 2;
}

.nav-copy {
  font-family: "Roboto";
  fill: #fff;
  fill-opacity: 1;
  transition: all 250ms ease-in;
}
.nav-copy.changing {
  fill-opacity: 0;
}

.service {
  cursor: pointer;
}
.service text {
  font-size: 14px;
  font-family: "Roboto";
  text-anchor: middle;
}
.service .icon-wrapper {
  transform-origin: 50% 50%;
}
.service .icon-wrapper,
.service .icon-wrapper > * {
  transition: all 250ms ease-in;
}
.service circle {
  fill: #005fa4;
}
.service circle.shadow {
  fill-opacity: 0;
  filter: url(#service-shadow);
}
.service use {
  fill: #fff;
}
.service text {
  fill: #4d4d4d;
}
.service.active .icon-wrapper,
.service:hover .icon-wrapper {
  transform: scale(1.15) translateY(-5px);
}
.service.active .icon-wrapper,
.service.active .icon-wrapper > *,
.service:hover .icon-wrapper,
.service:hover .icon-wrapper > * {
  transition: all 250ms ease-out;
}
.service.active .icon-wrapper circle.shadow,
.service:hover .icon-wrapper circle.shadow {
  fill-opacity: 0.4;
}
.service.active text,
.service:hover text {
  fill: #005fa4;
  font-weight: bold;
}
/* oil and gas */
.circle-container {
  display: flex;
  justify-content: center;
}
.circle-container .outer-circle {
  width: 250px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.circle-container .outer-circle .inner-circle {
  width: 150px;
  height: 150px;
  box-sizing: content-box;
  border: 50px solid #286aa4;
  transform: rotate(45deg);
  border-radius: 50%;
}
.circle-container .outer-circle .inner-circle .inner-circle-content {
  background: #ffffff;
  border: 5px solid #ffffff;
  box-sizing: border-box;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
}
.circle-container .outer-circle .inner-circle .inner-circle-content span {
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
}
.circle-container .outer-circle .inner-circle .inner-circle-content svg {
  margin-top: 15px;
}
.circle-container .outer-circle svg path {
  stroke: #286aa4;
  fill: #286aa4;
}
.circle-container .outer-circle:not(:first-child) {
  margin-left: -49px;
}
.circle-container .outer-circle:nth-child(odd) .inner-circle {
  border-top-color: transparent;
  border-left-color: transparent;
}
.circle-container .outer-circle:nth-child(even) {
  margin-top: 1px;
}
.circle-container .outer-circle:nth-child(even) .inner-circle {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

@media screen and (max-width: 640px) {
  .dropdown {
    display: none;
  }
  .swiper-container {
    width: 100%;
    height: 30vh;
    background-color: #000;
  }
  .slide-captions {
    position: absolute;
    top: 35%;
    left: 8%;
    text-align: center;
    color: #fff;
    z-index: 999;
    transform: translateY(-50%);
  }
  .slide-captions .current-title {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    /* text-shadow: 20px 10px 10px #000, 0 0 5px #630e0e; */
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 5px;
  }
}
@media (max-width: 767px) {
    .circle-container {
        display: flex;
        justify-content: center;
      }
      .circle-container .outer-circle {
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
      }
      .circle-container .outer-circle .inner-circle {
        width: 91px;
        height: 91px;
        box-sizing: content-box;
        border: 30px solid #286aa4;
        transform: rotate(45deg);
        border-radius: 50%;
      }
      .circle-container .outer-circle .inner-circle .inner-circle-content {
        background: #ffffff;
        border: 5px solid #ffffff;
        box-sizing: border-box;
        border-radius: 50%;
        width: 100%;
        height: 100%;
        transform: rotate(-45deg);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.3);
      }
      .circle-container .outer-circle .inner-circle .inner-circle-content span {
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
      }
      .circle-container .outer-circle .inner-circle .inner-circle-content svg {
        margin-top: 5px;
      }
      .circle-container .outer-circle svg path {
        stroke: #286aa4;
        fill: #286aa4;
      }
      .circle-container .outer-circle:not(:first-child) {
        margin-left: -49px;
      }
      .circle-container .outer-circle:nth-child(odd) .inner-circle {
        border-top-color: transparent;
        border-left-color: transparent;
      }
      .circle-container .outer-circle:nth-child(even) {
        margin-top: 1px;
      }
      .circle-container .outer-circle:nth-child(even) .inner-circle {
        border-bottom-color: transparent;
        border-right-color: transparent;
      }

}