@media ( max-width: 1024px ) {
    
    #welcomearea {
        max-width: 100%;
        height: auto;
    }
    
    #welcome {
        max-width: 600px;
        height: auto;
    }
    
}

@media ( max-width: 850px ) {
    body {
        overflow-x: hidden;
    }
    
    #header {
        width: 100%;
        background-position: center;
    }
    
    #container {
        width: 99%!important;
        margin:0;
    }
    
    #submenu {
        border-width: 0px 0px 0px 0px;
        display: inline-block;
        position: relative;
    }
    
    .footer {
        width: 95%!important;
        margin:0;
    }
    
    .maintable {
        padding: 0;
    }
    
    .thumbnails .image, .thumbnails .thumbnail {
        max-width: 12vw;
        height: auto;
        padding: 0px;
    }
    
    .thumbnails {
        padding: 0;
    }
    
    a:link .image, a:visited .image {
        border: 0px solid #888;
    }
    
    .bread a {
        font-size: 20px;
    }
    
    .tableh1 {
        font-size: 18px;
    }
    
    .tableh1::before {
        font-size: 20px;
    }
    
    h5 {
        font-size: 18px;
    }
    
    h5::before {
        font-size: 20px;
    }
    
    .catrow .image {
        display: none;
    }
    
    .catlink a {
        font-size: 14px!important;
    }
    
    .catlink::before {
        display: none;
    }
    
    .thumb_title_views, .thumb_caption_ctime {
        display: none;
    }
    
    .thumb_resolution {
        display: none;
    }
    
    .stats {
        font-size: 7px;
    }
    
    a:link .middlethumb,a:visited .middlethumb,a:focus .middlethumb,a:hover .middlethumb,a:active .middlethumb{
    border: 0px solid #CBD7DE;
    max-width: 14vw;
    height: auto;
    }
    
    .strip_image {
        max-width: 14vw;
        height: auto;
    }
    
    .filmstrip_background {
        display: none;
    }
    
    .display_media img {
    max-width: 70%;
    height: auto;
    }
    
    .thumb_title {
        font-size: 8px;
    }
    
    .catrow {
        font-size: 10px;
    }
    
    .album_stat {
        font-size: 7px;
    }
    
    #menu {
        display: none;
    }
   
   #welcomearea {
       display: none;
   }

    #welcome {
        display: none;
    }
    
    #welcome-mobile {
        display: block;
        padding: 5px;
        max-width: 97%;
        text-align: justify;
        line-height: 23px;
    }
   
   #intro {
       display: none;
   }
   
   #projaff {
       max-width: 100%;
       margin: 0px;
       display: block;
       position: relative;
   }
   
   #project {
       max-width: 100%;
       display: block;
       position: relative;
       float: none;
       margin: 20px auto;
   }
   
   #affiliates {
       max-width: 100%;
       display: block;
       position: relative;
       float: none;
       margin: 20px auto;
   }
   
   .text {
       font-size: 15px;
   }
   
   .footer {
       width: 95%;
   }
   
   .footer p {
       font-size: 11px;
    line-height: 15px;
    font-family: 'Anuphan', sans-serif;
   }
   
   .credit {
       width: 95%
   }
   
   .aff a, .aff a:hover {
       font-size: 6pt;
   }
   
   .aff b {
       font-size: 6pt;
   }
 
   
   h4 {
       text-align: center;
       margin-bottom: 10px;
   }
   
   h6 {
       font-size: 20px;
       line-height: 100%;
   }

    .catdesc {
        display: none;
    }

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #FAFAFA;
  position: relative;
  display: block;
  max-width: 100%;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  font-family: 'Playfair Display', serif;
  text-transform: uppercase;
  font-weight: 700;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #FAFAFA;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  color: black;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #FAFAFA;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #FAFAFA;
  color: #FAFAFA!important;
}


}