/************************* Tablet resolutions **************************/

@media screen and (max-width: 820px) {
  header, main, footer {
    padding: 0 20px;
  }

    .bannerCanvas {
      height: 70%;
    }
  
      .bannerImages {
        height: 60%;
      }

        .bannerImage1 {
          left: 18%;
        }

        .bannerImage2 {
          top: 0;
          left: 0;          
        }

        .bannerImage4 {
          top: 0;
          right: 0;
        }

        .bannerImage5 {
          right: 18%;
        }

      .bannerName {
        height: 30%;
        font-size: 90px;
      }
}

@media screen and (max-width: 601px) {
  footer {
    height: 89px;
  }

        .bannerImage3 {
          left: calc(50% - 70px);
        }
  
          .bannerImage {
            width: 140px;
            height: 140px;
          }

      .bannerName {
        height: 25%;
        font-size: 65px;
      }

  .expBlock, .eduBlock, .pubBlock {    
    width: 100%;
    display: block;
    padding: 15px 0;
  }

    .expBlock:hover,
    .eduBlock:hover {
      background-color: inherit;
    }

    .expBlockPeriod, .eduBlockPeriod, .pubBlockYear {
      width: 100%;
      margin-bottom: 10px;
    }

    .expBlockContent, .eduBlockContent, .pubBlockContent {
      width: 100%;
      margin-bottom: 10px;
    }
}

@media screen and (max-width: 428px) {
  footer {
    height: 139px;
  }

        .bannerImage3 {
          left: calc(50% - 50px);
        }
  
          .bannerImage {
            width: 90px;
            height: 90px;
          }

      .bannerName {
        font-size: 40px;
      }

      .bannerText {
        font-size: 12px;
      }

  .projBlock {
    width: 100%;
  }

    .contactButton {
      font-size: 20px;
      padding: 10px 20px;
    }

    .socialMedia {
      margin: 0 5px;
    }

      .iconSocial {
        width: 40px;
        height: 40px;
      }

  .iconEmail {
    width: 20px;
    height: 20px;
  }
}

@media screen and (max-width: 360px) {
  footer {
    height: 169px;
  }

        .bannerImage3 {
          left: calc(50% - 40px);
        }
  
          .bannerImage {
            width: 80px;
            height: 80px;
          }

      .bannerName {
        font-size: 35px;
      }  
}