/*

	Janice Ng's Portfolio
	CSS: Media Queries

*/
/* ================================================================ 
	[LAPTOP MEDIA QUERY START]   
================================================================  */
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
  /* ========== BASE ========== */
  html, body {
    background-size: 100%; }
  /* ========== HOME PAGE ========== */
  .welcome-msg-index {
    padding: 5em 10em 5em 10em; }
  .surrey h1, .ibm h1, .farmooo h1, .sfu h1, .rayz h1 {
    margin-bottom: 0; }
  .surrey h3, .ibm h3, .farmooo h3, .sfu h3, .rayz h3 {
    width: 50%; }
  /* ========== ABOUT PAGE ========== */
  .welcome-msg-about h3 {
    width: 70%; }
  .who-am-i .who-am-i-text {
    width: 75%;
    margin-right: 5em; }
  .who-am-i .me-img {
    text-align: center;
    margin: 0; }
    .who-am-i .me-img img {
      max-width: 280px; }
  .why-i-design .why-i-design-text {
    width: 75%;
    margin-right: 5em; }
  .why-i-design .diagram-process {
    text-align: center;
    margin: 0; }
    .why-i-design .diagram-process img {
      max-width: 280px; }
  /* ========== WORKS PAGE ========== */
  .descriptions {
    width: 820px; }
  .overview {
    margin: 3em 10em; }
  .objective {
    padding: 5em; }
  .process h4 {
    padding: 5em 10em; } }

/* ================================================================ 
	[LAPTOP MEDIA QUERY END]   
================================================================  */
/* ================================================================ 
	[TABLET MEDIA QUERY START]   
================================================================  */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* ========== BASE ========== */
  html, body {
    background-size: 100%;
    font-size: 16px; }
  h1 {
    font-size: 48px; }
  h2 {
    font-size: 36px; }
  h3 {
    font-size: 24px; }
  h4 {
    font-size: 20px; }
  header {
    width: 92%; }
  .content {
    padding-top: 68px; }
  /* ========== HOME PAGE ========== */
  .welcome-msg-index {
    padding: 3em; }
    .welcome-msg-index h1 {
      margin-right: 1em; }
  .surrey, .ibm, .farmooo, .sfu, .rayz {
    padding: 3em; }
    .surrey h1, .ibm h1, .farmooo h1, .sfu h1, .rayz h1 {
      margin-bottom: 0; }
    .surrey h3, .ibm h3, .farmooo h3, .sfu h3, .rayz h3 {
      width: 60%; }
  /* ========== ABOUT PAGE ========== */
  .welcome-msg-about {
    padding: 3em 3em 10em 3em; }
    .welcome-msg-about h3 {
      width: 75%; }
  .who-am-i {
    padding: 0 3em 3em 3em; }
    .who-am-i .who-am-i-text {
      width: 100%;
      margin-right: 2em; }
    .who-am-i .me-img {
      text-align: center;
      margin: 0; }
      .who-am-i .me-img img {
        max-width: 250px; }
  .why-i-design {
    padding: 3em; }
    .why-i-design .why-i-design-text {
      width: 100%;
      margin-right: 2em; }
    .why-i-design h4 {
      width: 100%; }
    .why-i-design .diagram-process {
      text-align: center;
      margin: 0; }
      .why-i-design .diagram-process img {
        max-width: 250px; }
  .closing-remarks h3 {
    width: 80%; }
  /* ========== WORKS PAGE ========== */
  .welcome-msg-surrey, .welcome-msg-ibm, .welcome-msg-farmooo, .welcome-msg-sfu, .welcome-msg-rayz {
    padding: 3em;
    height: 220px; }
  .welcome-msg-sfu {
    background-position: right center; }
  .descriptions {
    width: 720px;
    margin-bottom: 2em;
    padding: 0 0 2em 0; }
  .type, .role, .tools {
    margin: 0 0.5em; }
  .overview {
    margin: 0 10em 1em 10em; }
  .objective {
    padding: 3em; }
    .objective h2 {
      margin-right: 2em; }
  .process h4 {
    padding: 3em 5em; }
  .process .caption {
    padding: 3em; }
  .process .images-row1, .process .images-row2 {
    margin: 2em; }
  .process .images {
    margin: 3em; }
  .top {
    padding: 2em; }
  .project-nav-ibm, .project-nav-farmooo, .project-nav-sfu, .project-nav-rayz, .project-nav-surrey {
    padding: 3em 0; } }

/* ================================================================ 
	[TABLET MEDIA QUERY END]   
================================================================  */
/* ================================================================ 
	[MOBILE MEDIA QUERY START]   
================================================================  */
@media only screen and (min-width: 318px) and (max-width: 767px) {
  /* ========== BASE ========== */
  html, body {
    background-size: 100%;
    font-size: 16px; }
  h1 {
    font-size: 32px; }
  h2 {
    font-size: 24px; }
  h3 {
    font-size: 20px; }
  h4 {
    font-size: 18px; }
  /* ========== LAYOUT ========== */
  header {
    padding: 0.6em 1em; }
    header li {
      padding: 0 1em 0 0.5em; }
    header .name {
      display: none; }
  footer li {
    padding: 0 0.5em; }
  footer p {
    font-size: 16px; }
  footer img {
    width: 48px; }
  /* ========== BUTTONS ========== */
  a.btn {
    margin: 3em 0 2em 0; }
  a.btn:hover {
    margin-top: 3em; }
  .close {
    width: 32px;
    height: auto; }
  .content {
    padding-top: 68px; }
  /* ========== HOME PAGE ========== */
  .welcome-msg-index {
    display: block;
    padding: 2em; }
    .welcome-msg-index h1 {
      padding-bottom: 0.5em; }
  .surrey, .ibm, .farmooo, .sfu, .rayz {
    padding: 2em; }
    .surrey h1, .ibm h1, .farmooo h1, .sfu h1, .rayz h1 {
      margin-bottom: 0; }
    .surrey h3, .ibm h3, .farmooo h3, .sfu h3, .rayz h3 {
      width: 80%; }
  .client {
    margin-top: 1em; }
  /* ========== ABOUT PAGE ========== */
  .welcome-msg-about {
    padding: 2em 2em 4em 2em; }
    .welcome-msg-about h3 {
      width: 100%; }
  .who-am-i {
    padding: 0 2em 2em 2em;
    display: block;
    align-items: flex-start;
    justify-content: flex-start; }
    .who-am-i .who-am-i-text {
      width: 100%;
      margin-right: 0; }
    .who-am-i .me-img {
      max-width: none;
      margin: 2em 0 0 0;
      text-align: center; }
      .who-am-i .me-img img {
        max-width: 250px; }
  .why-i-design {
    padding: 2em;
    display: block;
    align-items: flex-start;
    justify-content: flex-start; }
    .why-i-design .why-i-design-text {
      width: 100%;
      margin-right: 0; }
    .why-i-design img {
      padding-top: 2em; }
    .why-i-design .diagram-process {
      max-width: none;
      margin-right: 0;
      text-align: center; }
  .resume {
    padding: 2em; }
  .closing-remarks {
    padding: 2em; }
    .closing-remarks h3 {
      width: 100%; }
  /* ========== WORKS PAGE ========== */
  .welcome-msg-surrey, .welcome-msg-ibm, .welcome-msg-farmooo, .welcome-msg-sfu, .welcome-msg-rayz {
    padding: 2em;
    height: 200px; }
    .welcome-msg-surrey img, .welcome-msg-ibm img, .welcome-msg-farmooo img, .welcome-msg-sfu img, .welcome-msg-rayz img {
      width: 48px;
      height: auto; }
  .welcome-msg-sfu {
    background-position: right center; }
  .descriptions {
    width: 220px;
    margin-bottom: 2em;
    padding: 0 0 2em 0;
    display: block; }
  .type, .role, .tools {
    width: 100%;
    margin: 0; }
    .type h3, .role h3, .tools h3 {
      margin-top: 1em; }
  .overview {
    margin: 0 2em 1em 2em; }
  .gif-mobile {
    display: block;
    margin-bottom: 2em; }
  .gif, .gif-sfu {
    display: none; }
  .objective {
    padding: 2em;
    display: block;
    align-items: flex-start;
    justify-content: flex-start; }
    .objective h2 {
      padding-bottom: 0.5em; }
  .process h4 {
    padding: 2em; }
  .process .image-caption {
    display: block; }
    .process .image-caption img {
      width: 100%; }
  .process .caption {
    padding: 2em; }
  .process .images-row1, .process .images-row2 {
    margin: 2em;
    display: block; }
    .process .images-row1 img, .process .images-row2 img {
      width: 100%;
      height: auto; }
  .process .images {
    margin: 0; }
  .top {
    padding: 1em; }
  .project-nav-ibm, .project-nav-farmooo, .project-nav-sfu, .project-nav-rayz, .project-nav-surrey {
    padding: 2em 0; }
  /* FARMOOO */
  .press-release {
    padding: 2em; }
    .press-release li {
      font-size: 18px; } }

/* ================================================================ 
	[MOBILE MEDIA QUERY END]   
================================================================  */