body {
  background-image: url(./images/circles-dark/circles-dark.png);
}

.contain {
  width: 82%;
}

.serif {
  font-family: Georgia, "Times New Roman", Times, serif;
}

.main {
  width: 101.0542%;
  height: 433px;
  overflow: scroll;
}

.port-thumb {
  width: 300px;
  height: 150px;
}

.text-teal {
  color: #4aaaa5 !important;
}

.btn-teal {
  background-color: #4aaaa5;
  border-color: #4aaaa5;
}

.border-teal {
  border: #4aaaa5 !important;
}

.bg-teal {
  background-color: #4aaaa5 !important;
}
.text-reset:hover {
  color: #4aaaa5 !important;
}

/* media queries */

@media only screen and (max-width: 980px) {
  .main {
    width: 700px;
    left: 15px;
  }

  .col-duo {
    max-width: 50% !important;
  }

  .text-reset {
    color: #4aaaa5 !important;
  }
}

@media only screen and (max-width: 768px) {
  .main {
    left: -25px;
    width: 570px;
  }

  .navclear {
    clear: both;
    margin-left: -25px !important;
  }

  .clear-about {
    padding-right: 5px !important;
    padding-bottom: 5px !important;
  }

  .clear-port {
    padding: 5px !important;
  }

  .clear-contact {
    padding-top: 5px !important;
    padding-left: 5px !important;
    padding-bottom: 5px !important;
  }

  .clear-contain {
    width: 100% !important;
  }

  .port-thumb {
    width: 250px;
    height: 130px;
  }
}

@media screen and (max-width: 640px) {
  .main {
    width: 103%;
    left: -6px;
  }

  .port-main {
    width: 100%;
    left: 0px;
  }

  .col-duo {
    max-width: 100% !important;
  }

  .navclear {
    clear: both;
    text-align: center;
    width: 100%;
    margin-left: 0px !important;
    padding: 0px !important;
  }

  .container {
    max-width: 100%;
  }

  .clear-about {
    padding-top: 5px !important;
  }

  .clear-row {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }

  .port-thumb {
    width: 300px;
    height: 150px;
  }
}