/****************************** 
Desktop - 1550px
******************************/

@media only screen and (max-width: 1550px) {
  .hero-container {
    width: 70%;
  }

  form {
    width: 50%;
  }
}

/****************************** 
Desktop - 1300px
******************************/

@media only screen and (max-width: 1300px) {
  .hero-container {
    width: 90%;
  }

  .grid-container {
    width: 90%;
  }
}

/****************************** 
Desktop - 1250px
******************************/

@media only screen and (max-width: 1250px) {
  /**********   Global  **********/

  .sidebar {
    width: 20%;
  }

  main,
  footer {
    margin-left: 20%;
  }

  /**********  Backgrounds  **********/

  .background-image {
    height: auto;
  }

  .light-overlay {
    height: 100%;
  }

  .dark-overlay {
    height: 100%;
    padding: 20px;
    margin: 0;
  }

  /**********  Main Content  **********/

  .main-container {
    width: 90%;
    margin: 0;
    padding: 20px 0;
  }

  .grid-container {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  /**********  Portfolio  **********/

  .project-grid {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
  }

  /**********  Footer  **********/

  form {
    width: 80%;
  }
}

/****************************** 
Desktop - 1050px
******************************/

@media only screen and (min-width: 1050px) {
  /**********  Portfolio  **********/

  .project-btn {
    transition: 0.5s ease;
    opacity: 0;
    position: absolute;
    width: 60%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 1.2rem;
    padding: 10px 10px;
    border-radius: 5px;
    font-weight: 500;
  }

  .project-img-wrapper:hover .project-btn {
    opacity: 1;
  }
}

@media only screen and (max-width: 1050px) {
  /**********   Global  **********/

  header {
    display: none;
  }

  main,
  footer {
    margin-left: 0;
  }

  .my-alert {
    margin: 0;
  }

  /**********   Main Content  **********/

  .heading-2 {
    text-align: center;
  }

  /**********  Portfolio  **********/

  .project-btn {
    display: none;
  }

  /**********  Footer  **********/

  form {
    width: 80%;
  }
  #status {
    width: 80%;
  }
}

/****************************** 
Tablets - 870px
******************************/

@media only screen and (max-width: 870px) {
  /**********   Main Content  **********/

  .hero-wrapper {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .profile-picture {
    text-align: center;
  }

  .profile-picture img {
    padding-bottom: 25px;
  }

  h1 {
    text-align: center;
  }

  .heading-1 p {
    text-align: left;
  }

  .project-container {
    width: 90%;
  }
}

/****************************** 
Tablets - 768px
******************************/

@media only screen and (max-width: 768px) {
  /**********   Global  **********/

  main,
  footer {
    margin: 0;
  }

  a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 400;
  }

  /**********  Header  **********/

  .sidebar {
    display: none;
  }

  .sidebar {
    display: none;
  }

  /**********  Backgrounds  **********/

  .dark-overlay {
    background-color: rgba(0, 0, 0, 0.88);
  }

  .dark-overlay {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.85),
      rgba(0, 0, 0, 0.95)
    );
  }

  .background-image {
    height: auto;
  }

  .light-overlay {
    height: 100%;
  }

  .dark-overlay {
    height: 100%;
    padding: 20px;
    margin: 0;
  }

  /**********   Main Content  **********/

  .main-container {
    width: 90%;
    margin: 0;
  }

  .heading-1,
  .heading-2 {
    text-align: center;
  }

  .heading-1 {
    width: 80%;
  }

  .heading-2 {
    padding: 0 0 25px 0;
    width: 100%;
  }

  .social-links-2 {
    margin-top: 50px;
  }

  .social-links-2 li:hover {
    border-bottom: none;
  }

  .grid-container {
    -ms-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    margin: 0;
  }
}

/****************************** 
Phones - 505px
******************************/

@media only screen and (max-width: 505px) {
  /**********  Global  **********/

  main,
  footer {
    margin: 0;
  }

  /**********  Header  **********/

  .sidebar {
    display: none;
  }

  /**********  Backgrounds  **********/
  .background-image {
    height: auto;
  }

  .light-overlay {
    height: 100%;
  }

  .dark-overlay {
    height: 100%;
    padding: 20px;
    margin: 0;
  }

  /**********  Main Content  **********/

  .main-container {
    width: 100%;
    margin: 0;
    padding: 20px 0;
  }

  .hero-container {
    width: 90%;
    padding: 20px 0;
  }

  .social-links-2 li {
    display: inline-block;
    height: 65px;
  }

  .social-links-2 {
    margin-top: 40px;
  }

  .skill-icon img {
    padding: 15px 20px;
  }

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

  /**********  Portfolio  **********/

  .project-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  /**********  Footer  **********/

  form {
    width: 90%;
  }

  .form-container {
    width: 100%;
  }

  #status {
    width: 90%;
  }
}

/****************************** 
Phones - 400px
******************************/

@media only screen and (max-width: 400px) {
  /**********  Main Content  **********/

  h1 {
    font-size: 2rem;
  }

  .main-container {
    width: 95%;
  }

  .grid-container {
    width: 80%;
  }

  .icon-grid img {
    padding: 10px;
  }

  /**********  Portfolio  **********/

  .project-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }

  /**********  Footer  **********/

  form {
    width: 80%;
  }

  #status {
    width: 80%;
  }

  .social-links-2 img {
    width: 100%;
    padding: 0 5px;
  }
}

/****************************** 
Phones - 375px
******************************/

@media only screen and (max-width: 375px) {
  form {
    width: 95%;
  }
}

/****************************** 
Phones - 280px
******************************/

@media only screen and (max-width: 280px) {
  form {
    width: 98%;
  }

  .form-container {
    width: 100%;
  }

  /**********  Portfolio  **********/

  .social-links-2 p {
    display: none;
  }

  .social-links-2 {
    margin-top: 20px;
  }

  .social-links-2 li {
    height: 0px;
    padding: 15px 0;
  }
}