.submenu .nav li a:hover { background-color:transparent !important;}

.connect-hero, .connect-sql{
  background-color: #003860;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position:relative;
  color: white;
  border-bottom:1px solid gainsboro;
  z-index:0;
}


.connect-sql .diagram{
  margin: 40px 0px 20px;
}

.source-description {
    background-color: #00a0ff;
    background: linear-gradient(90deg, rgba(0, 160, 255, .7) 0%, rgba(23, 124, 184, 1) 100%);
    color: #fff;
    h2: #fff !important;
    border-bottom: 1px solid gainsboro;
}


.connect-about-hero {
  height: 375px;
}

.connect-about-hero img {
    width: 110%;
    position: absolute;
    top: -8em;
    left: 3em;
}

.sql-img-up,
.sql-img-down {
  position: absolute;
  left: 50%;
  margin-left: -180px;
  text-align: center;
  border: 1px solid white;
  padding: 0 4px;
  opacity: .8;
  font-size: .8em;
}

.sql-img-up {
    top: -34px;
    left: 343px;
}

.sql-img-down {
  top: 98px;
  left: 343px;
}

.connect-desc {
  position: absolute;
   left: 57.5%;
   margin-left: -90px;
   top: 104px;
   width: 180px;
   text-align: center;
}

.text-top, .text-bottom{
  position:absolute;
  left:78.6%;
  margin-left:-390px;
  width:180px;
  text-align:center;
}

.text-top{
  top:25px;
}

.text-bottom{
  top:153px;
}

.img-labels{
  display:block;
}

@media(max-width:980px){
  .connect-about-hero img {
      width: 100%;
      position: absolute;
      top: -4em;
      left: 2em;
  }

  .img-labels{
    display:none;
  }
  .connect-about-hero img {
      display:block;
  }
}

@media(max-width:640px){
  .connect-about-hero img {
      display:none;
  }
}

@media (min-width: 1250px) {
  .connect-about-hero img {
      width: 100%;
      top: -9em;
      left: 2em;
  }
  .text-top, .text-bottom{ left:65%; }
  .connect-desc { left: 49%;  }
}