/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@media only screen and (min-width: 500px){
  .hidden-text,
  .nav-div i,
  .arrow-left {
    display: none;
  }
  .nav-div,
  .nav-ul {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .home-icons {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 40px 0;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .body-section {
    padding: 0 10%;
  }
  .story-second-section {
    margin: 7% 0;
    padding: 4% 0;

  }
}
@media only screen and (min-width: 800px) {
  .story-first-section {
    grid-template-columns: repeat(auto-fit, minmax(200px, 46%));
    grid-gap: 8%;
  }
  .story-second-selection {
    padding: 5%;
  }
  .story-second-section {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .story-hidden {
    display: none;
  }
  .story-second-text {
    grid-template-columns: repeat(auto-fit, minmax(100px, 46%));
    grid-gap: 8%;
  }
  .page-num {
    display: none;
  }
}
/* *************************************************TABLET RESPONSIVE ***************************************** */
@media only screen and (max-width: 800px) {
  /* SECOND SECTION */
  .second-section-div {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .img-div {
    padding-top: 9%;
    padding-bottom: 9%;
  }
  .text-content {
    min-width: 75%;
  }
  .article-div {
    -ms-grid-columns:46% 8% 46%;
    grid-template-columns:46% 46%;
    height: 200px;
    grid-gap: 8%;
  }
  .news {
    margin: 40px 0;
  }
  .hidden {
    display: none;
  }
  .little-article,
  .little-article img {
    min-width: 35vw;
  }
  /* THIRD SECTION */
  .article-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .article-1 {
    min-width: 100%;
  }
  .article-2 {
    min-width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(200px, 46%));
    grid-gap: 8%;
    margin-top: 40px;
  }
  .photo5 {
    display: none;
  }
  /* FOOTER*/
  .footer-div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .ul-logo {
    margin-bottom: 50px;
  }
  .ul-logo,
  .icons-email {
    min-width: 100%;
  }
  .icons {
    max-width: 30%;
    margin-top: 50px;
  }
  /* *********************************STORY PAGE TABLET RESPONSIVE ************************** */
  .story-first-section {
    grid-template-columns: repeat(auto-fit, minmax(240px, 100%));
  }
  .story-second-selection {
    padding: 15%;
  }
  [type="date"],
  [type="text"] {
    min-width: 100%;
  }
  .story-second-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-top: 40px;
  }
  .story-second-text {
    min-width: 100%;
    margin-top: 50px;
  }
  .text-heading {
    min-width: 50%;
  }
  .story-third-text {
    min-width: 100%;
  }
  .page-num {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 30px;
    font-size: 13px;
  }
}
/* ************************************************MOBILE RESPONSIVE ************************************* */
@media (max-width: 500px) {
  /* NAVIGATION*/
  .menu-toggle{
    display: block;
    width: 40px;
    height: 40px;
    margin: 10px;
    background: #f6f8f9;
    float: right;
    cursor: pointer;
    text-align: center;
  }
  .menu-toggle::before {
    content: "\f0c9";
    font-family: fontAwesome;
    font-size: 25px;
  }
  .menu-toggle.active::before {
    content: "\f00d";
    font-family: fontAwesome;
    font-size: 25px;
    color: #202124;
  }
  nav {
    display: none;
  }
  nav.active {
    display: block;
  }
  .nav-div,
  .nav-ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .nav-ul {
    margin: 0 7%;
  }
  .nav-div {
    margin: 10% 0 15% 0;
  }
  .nav-div li {
    margin-top: 40px;
  }
  .show-icon {
    display: block;
  }

  .hidden-text {
    text-decoration: none;
    vertical-align: middle;
  }
  .nav-div img {
    vertical-align: middle;
    width: 13px;
    margin-right: 20px;
  }
  .nav-div i {
    margin-right: 20px;
  }

  /* SECOND SECTION */
  .text-content {
    min-width: 90%;
  }
  .second-section-text {
    max-width: 100%;
  }
  .article-div {
    grid-template-columns: repeat(auto-fit, minmax(240px, 50%));
    height: 500px;
  }
  .top-article-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .little-article,
  .little-article img {
    min-width: 100%;
  }
  .little-article {
    margin-bottom: 40px;
  }
  .bottom-logo-div,
  .uls ul:first-child,
  .email {
    display: none;
  }
  .icons {
    min-width: 80%;
  }
  .article-2 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 100%));
  }
  /* ***********************STORY PAGE MOBILE *************************** */
  .arrow-left {
    display: inline-block;
    margin: 5%;
  }
  .story-second-text {
    grid-template-columns: repeat(auto-fit, minmax(100px, 100%));
    grid-gap: 20px;
    margin-bottom: 30px;
  }
  .home-icons {
    display: none;
  }
  .body-section {
    padding: 0;
  }
  .story-second-section,
  .story-third-section {
    padding: 40px 20px;
  }
  .text-heading {
    font-size: 24px;
    min-width: 100%;
    margin-top: 40px;
  }
}