/*

	Janice Ng's Portfolio
	CSS: Home Page

*/
/* ================================================================ 
	INDEX PAGE START
================================================================  */
.welcome-msg-index {
  background-image: url('../../img/bg-pattern.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0 0 50% 50%;
  height: auto;
  margin-bottom: 2em;
  padding: 5em 20em 5em 20em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .welcome-msg-index h1, .welcome-msg-index h3 {
    background: linear-gradient(#2A2C7B, #039ED3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }
  .welcome-msg-index h1 {
    margin-right: 2em;
    padding-bottom: 0; }

.surrey, .ibm, .farmooo, .sfu, .rayz {
  background-size: cover;
  background-position: relative center;
  height: auto;
  color: #FFFFFF;
  padding: 5em 6.5em; }
  .surrey h1, .ibm h1, .farmooo h1, .sfu h1, .rayz h1 {
    margin-bottom: 0.2em; }
  .surrey h3, .ibm h3, .farmooo h3, .sfu h3, .rayz h3 {
    width: 40%; }

.surrey {
  background: linear-gradient(rgba(83, 131, 0, 0.75), rgba(83, 131, 0, 0.75)), url("../../img/surrey-cover.jpg"); }

.ibm {
  background: linear-gradient(rgba(0, 63, 105, 0.75), rgba(0, 63, 105, 0.75)), url("../../img/ibm-cover.jpg"); }

.farmooo {
  background: linear-gradient(rgba(130, 92, 37, 0.75), rgba(130, 92, 37, 0.75)), url("../../img/farmooo-cover.jpg"); }

.sfu {
  background: linear-gradient(rgba(166, 25, 46, 0.75), rgba(166, 25, 46, 0.75)), url("../../img/sfu-cover.jpg"); }

.rayz {
  background: linear-gradient(rgba(6, 166, 255, 0.75), rgba(6, 166, 255, 0.75)), url("../../img/rayz-cover.jpg"); }

.surrey, .ibm, .farmooo, .sfu, .rayz {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat; }

/* ========== TEXT LAYOUT ========== */
.client {
  margin-top: 2em; }

/* ================================================================ 
	INDEX PAGE END
================================================================ */
/*

	Janice Ng's Portfolio
	CSS: About Page

*/
/* ================================================================ 
	ABOUT PAGE START
================================================================  */
.welcome-msg-about {
  background: linear-gradient(rgba(42, 44, 123, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/about-profile-cover.jpg");
  background-size: cover;
  background-position: right center;
  border-radius: 0 0 50% 50%;
  height: auto;
  margin-bottom: 2em;
  padding: 6em 6.8em 12em 6.8em;
  color: #FFFFFF; }
  .welcome-msg-about h1 {
    padding-bottom: 0.2em; }
  .welcome-msg-about h3 {
    width: 50%;
    line-height: 1.5em; }

.who-am-i {
  padding: 3em 6.5em 5em 6.5em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .who-am-i h2 {
    color: #039ED3; }
  .who-am-i .who-am-i-text {
    width: 60%;
    margin-right: 10em; }
  .who-am-i .me-img {
    overflow: hidden;
    width: 100%;
    max-width: 300px;
    margin-right: 5em; }

.why-i-design {
  background: linear-gradient(rgba(42, 44, 123, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/about-items.jpg");
  background-size: cover;
  background-position: center center;
  padding: 5em 6.5em 5em 6.5em;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .why-i-design .why-i-design-text {
    width: 60%; }
  .why-i-design .diagram-process {
    overflow: hidden;
    width: 100%;
    max-width: 350px;
    margin-right: 5em; }

.resume {
  padding: 3em 0; }
  .resume h3 {
    text-align: center; }

.closing-remarks {
  background-color: #039ED3;
  padding: 3em 0; }
  .closing-remarks h3 {
    text-align: center;
    width: 50%;
    margin: auto;
    color: #FFFFFF; }

/* ================================================================ 
	ABOUT PAGE END
================================================================  */
/*

	Janice Ng's Portfolio
	CSS: Works Page - MySurrey Portal

*/
/* ================================================================ 
	MYSURREY PORTAL PAGE START
================================================================  */
.welcome-msg-surrey {
  background: linear-gradient(rgba(83, 131, 0, 0.75), rgba(83, 131, 0, 0.75)), url("../../img/surrey1.jpg");
  background-size: cover;
  background-position: bottom center;
  border-radius: 0 0 50% 50%;
  height: 350px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 2em;
  padding: 6em 6.8em 0 6.8em; }
  .welcome-msg-surrey h4 {
    font-style: italic; }

.process .images-row1, .process .images-row2 {
  margin: 3em 3em 0 3em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .process .images-row1 img, .process .images-row2 img {
    width: 50%; }
.process .image-caption {
  background-color: #E4E4E4;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .process .image-caption img {
    width: 50%; }
.process .caption {
  padding: 5em; }
  .process .caption h3 {
    padding-bottom: 2em; }

.project-nav-ibm {
  background: linear-gradient(rgba(3, 158, 211, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/ibm-cover.jpg");
  background-position: center center; }

/*

	Janice Ng's Portfolio
	CSS: Works Page - Report Samples

*/
/* ================================================================ 
	REPORT SAMPLES PAGE START
================================================================  */
.welcome-msg-ibm {
  background: linear-gradient(rgba(0, 63, 105, 0.75), rgba(0, 63, 105, 0.75)), url("../../img/ibm1.jpg");
  background-size: cover;
  background-position: relative center;
  border-radius: 0 0 50% 50%;
  height: 350px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 2em;
  padding: 6em 6.8em 0 6.8em; }
  .welcome-msg-ibm h4 {
    font-style: italic; }

.process .images-row1 {
  margin: 3em 3em 0 3em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .process .images-row1 img {
    width: 50%; }

.project-nav-farmooo {
  background: linear-gradient(rgba(3, 158, 211, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/farmooo-cover.jpg");
  background-position: top center; }

/*

	Janice Ng's Portfolio
	CSS: Works Page - Farmooo

*/
/* ================================================================ 
	FARMOOO PAGE START
================================================================  */
.welcome-msg-farmooo {
  background: linear-gradient(rgba(130, 92, 37, 0.75), rgba(130, 92, 37, 0.75)), url("../../img/farmooo1.jpg");
  background-size: cover;
  background-position: relative center;
  border-radius: 0 0 50% 50%;
  height: 350px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 2em;
  padding: 6em 6.8em 0 6.8em; }
  .welcome-msg-farmooo h4 {
    font-style: italic; }
  .welcome-msg-farmooo img {
    margin-top: 2em; }

.process .images-row1 {
  margin: 3em 3em 0 3em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .process .images-row1 img {
    width: 50%; }

.press-release {
  padding: 5em 6.5em; }
  .press-release li {
    display: block;
    font-size: 24px;
    padding: 1em 0; }

.project-nav-sfu {
  background: linear-gradient(rgba(3, 158, 211, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/sfu-cover.jpg");
  background-position: top center; }

/*

	Janice Ng's Portfolio
	CSS: Works Page - SFU Course Enrollment System

*/
/* ================================================================ 
	SFU COURSE ENROLLMENT SYSTEM PAGE START
================================================================  */
.welcome-msg-sfu {
  background: linear-gradient(rgba(166, 25, 46, 0.75), rgba(166, 25, 46, 0.75)), url("../../img/sfu1.jpg");
  background-size: cover;
  background-position: bottom center;
  border-radius: 0 0 50% 50%;
  height: 350px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 2em;
  padding: 6em 6.8em 0 6.8em; }
  .welcome-msg-sfu h4 {
    font-style: italic; }
  .welcome-msg-sfu img {
    margin-top: 2em; }

.gif-sfu {
  margin: 3em 3em 0 3em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .gif-sfu img {
    width: 50%; }

.process .images-row1, .process .images-row2 {
  margin: 3em 3em 0 3em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .process .images-row1 img, .process .images-row2 img {
    width: 50%; }

.project-nav-rayz {
  background: linear-gradient(rgba(3, 158, 211, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/rayz-cover.jpg");
  background-position: bottom center; }

/*

	Janice Ng's Portfolio
	CSS: Works Page - Rayz

*/
/* ================================================================ 
	RAYZ PAGE START
================================================================  */
.welcome-msg-rayz {
  background: linear-gradient(rgba(6, 166, 255, 0.75), rgba(6, 166, 255, 0.75)), url("../../img/rayz1.jpg");
  background-size: cover;
  background-position: bottom center;
  border-radius: 0 0 50% 50%;
  height: 350px;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 2em;
  padding: 6em 6.8em 0 6.8em; }
  .welcome-msg-rayz h4 {
    font-style: italic; }
  .welcome-msg-rayz img {
    margin-top: 2em; }

.project-nav-surrey {
  background: linear-gradient(rgba(3, 158, 211, 0.75), rgba(3, 158, 211, 0.75)), url("../../img/surrey-cover.jpg");
  background-position: top center; }

/*

	Janice Ng's Portfolio
	CSS: Master

*/
/* ================================================================ 
  BASE STYLE START 
================================================================  */
html, body {
  width: auto;
  height: auto;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 18px;
  background-color: #FFFFFF;
  color: #000000; }

html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p {
  border: 0;
  margin: 0;
  padding: 0; }

h1 {
  font-size: 64px;
  font-weight: 600;
  padding-bottom: 0.8em; }

h2 {
  font-size: 48px;
  font-weight: 600;
  padding-bottom: 1em; }

h3 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.5; }

h4 {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5em; }

p {
  font-weight: 400; }

img {
  max-width: 100%;
  height: auto; }

li {
  list-style: none;
  display: inline-block; }

#bold {
  font-weight: 600; }

/* ================================================================ 
	BASE STYLE END
================================================================  */
/* ================================================================ 
	LAYOUT START
================================================================  */
/* ========== HEADER ========== */
header {
  background-color: #FFFFFF;
  box-shadow: 0px 2px 10px rgba(147, 146, 146, 0.5);
  width: 95%;
  height: auto;
  position: fixed;
  overflow: hidden;
  padding: 0.6em 3em;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  header h4 {
    font-weight: 600; }
  header nav {
    font-size: 18px;
    font-weight: 600; }
  header li {
    padding: 0 1.5em; }
  header .logo {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    header .logo .name {
      padding-left: 1em; }
  header a.logo {
    color: #000000; }
  header a.logo:hover {
    color: #000000; }

/* ========== FOOTER ========== */
footer {
  text-align: center;
  margin: 4em 0; }
  footer h3, footer p {
    color: #039ED3; }
  footer h3 {
    font-weight: 600;
    padding-bottom: 1.5em; }
  footer p {
    font-size: 18px; }
  footer ul {
    padding-bottom: 2em; }
  footer li {
    padding: 0 1em; }

/* ========== ICONS ========== */
.dribbble-hover img:last-child, .flickr-hover img:last-child, .instagram-hover img:last-child, .linkedin-hover img:last-child {
  display: none;
  /* ANIMATION */
  -webkit-transition: 0.15s ease-in, 0.15s ease-out;
  -moz-transition: 0.15s ease-in, 0.15s ease-out;
  -o-transition: 0.15s ease-in, 0.15s ease-out;
  -ms-transition: 0.15s ease-in, 0.15s ease-out;
  transition: 0.15s ease-in, 0.15s ease-out; }

.dribbble-hover:hover img:first-child, .flickr-hover:hover img:first-child, .instagram-hover:hover img:first-child, .linkedin-hover:hover img:first-child {
  display: none;
  /* ANIMATION */
  -webkit-transition: 0.15s ease-in, 0.15s ease-out;
  -moz-transition: 0.15s ease-in, 0.15s ease-out;
  -o-transition: 0.15s ease-in, 0.15s ease-out;
  -ms-transition: 0.15s ease-in, 0.15s ease-out;
  transition: 0.15s ease-in, 0.15s ease-out; }

.dribbble-hover:hover img:last-child, .flickr-hover:hover img:last-child, .instagram-hover:hover img:last-child, .linkedin-hover:hover img:last-child {
  display: inline-block;
  /* ANIMATION */
  -webkit-transition: 0.15s ease-in, 0.15s ease-out;
  -moz-transition: 0.15s ease-in, 0.15s ease-out;
  -o-transition: 0.15s ease-in, 0.15s ease-out;
  -ms-transition: 0.15s ease-in, 0.15s ease-out;
  transition: 0.15s ease-in, 0.15s ease-out; }

.footerwrapper {
  width: 100px;
  overflow: hidden;
  border-top: 2px solid #939292;
  margin: auto;
  padding-top: 3em; }

/* ========== CONTENT ========== */
.content {
  overflow: hidden;
  padding-top: 70px; }

/* ========== POPUP OVERLAY ========== */
.overlay {
  background: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  visibility: hidden;
  opacity: 0;
  z-index: 3; }

.overlay:target {
  visibility: visible;
  opacity: 1;
  z-index: 3; }

.popup {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; }

.popup #close {
  position: absolute;
  top: 1em;
  right: 4em; }

#close:hover img {
  opacity: 0.5;
  /* ANIMATION */
  -webkit-transition: 0.15s ease-in, 0.15s ease-out;
  -moz-transition: 0.15s ease-in, 0.15s ease-out;
  -o-transition: 0.15s ease-in, 0.15s ease-out;
  -ms-transition: 0.15s ease-in, 0.15s ease-out;
  transition: 0.15s ease-in, 0.15s ease-out; }

#video2 {
  z-index: 3; }

/* ========== VIDEO ========== */
.video embed {
  width: 100%;
  height: 100%;
  position: absolute; }

iframe {
  width: 100%;
  height: 100%; }

/* ================================================================ 
	LAYOUT END
================================================================  */
/* ================================================================ 
	LINKS START 
================================================================  */
/* ========== LINKS ========== */
a {
  color: #939292;
  text-decoration: none;
  /* ANIMATION */
  -webkit-transition: 0.15s ease-in, 0.15s ease-out;
  -moz-transition: 0.15s ease-in, 0.15s ease-out;
  -o-transition: 0.15s ease-in, 0.15s ease-out;
  -ms-transition: 0.15s ease-in, 0.15s ease-out;
  transition: 0.15s ease-in, 0.15s ease-out; }

a:hover {
  color: #039ED3; }

.onpage {
  color: #039ED3; }

/* ========== BUTTONS ========== */
.btn-wrapper {
  display: inline-block;
  margin: 5em 0 4em 0;
  padding: 1em 3em;
  border-radius: 1em;
  border: 2px solid #FFFFFF;
  vertical-align: middle;
  position: relative;
  z-index: 1;
  overflow: hidden; }
  .btn-wrapper h4 {
    width: 100%;
    color: #FFFFFF; }
  .btn-wrapper .btn-bg {
    content: '';
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 100%;
    margin: -15px 0 0 1px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFFFFF;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform: scale3d(1, 2, 1);
    transform: scale3d(1, 2, 1);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
    transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1); }
  .btn-wrapper:hover h4 {
    color: #039ED3; }
  .btn-wrapper:hover .btn-bg {
    -webkit-transform: scale3d(9, 9, 1);
    transform: scale3d(9, 9, 1); }

.button-wrap {
  content: '';
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 100%;
  margin: -15px 0 0 1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: scale3d(1, 2, 1);
  transform: scale3d(1, 2, 1);
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1); }

/* ========== VIDEO PLAY BUTTONS ========== */
a#play {
  opacity: 1; }

a#play:hover {
  opacity: 0.5; }

/* ================================================================ 
	LINKS END 
================================================================  */
/* ================================================================ 
	WORKS START
================================================================  */
/* ========== DESCRIPTIONS ========== */
.descriptions {
  width: 1120px;
  text-align: center;
  margin: auto;
  padding: 4em;
  border-bottom: 1px solid #939292;
  display: flex;
  align-items: top;
  justify-content: space-between; }
  .descriptions h3 {
    color: #039ED3;
    padding-bottom: 0.5em; }

.type, .role, .tools {
  width: 33%;
  margin: 0 2em; }

/* ========== OVERVIEW ========== */
.overview {
  text-align: center;
  margin: 3em 20em; }

/* ========== GIF ========== */
.gif {
  text-align: center;
  margin-bottom: 3em; }

.gif-mobile {
  display: none; }

/* ========== OBJECTIVE ========== */
.objective {
  background-color: #E4E4E4;
  padding: 5em 15em;
  display: flex;
  align-items: center;
  justify-content: space-between; }
  .objective h2 {
    margin-right: 3em;
    padding-bottom: 0; }

/* ========== PROCESS ========== */
.process h4 {
  padding: 5em 15em; }
.process .images {
  text-align: center;
  margin: 0 10em; }
  .process .images img {
    padding-bottom: 1em; }

/* ========== PROJECT NAV ========== */
.project-nav-ibm, .project-nav-farmooo, .project-nav-sfu, .project-nav-rayz, .project-nav-surrey {
  display: block;
  text-align: center;
  padding: 5em 0; }
  .project-nav-ibm h3, .project-nav-farmooo h3, .project-nav-sfu h3, .project-nav-rayz h3, .project-nav-surrey h3 {
    margin-top: 1em; }

a.project-nav-ibm, a.project-nav-farmooo, a.project-nav-sfu, a.project-nav-rayz, a.project-nav-surrey {
  color: #FFFFFF; }

a.project-nav-ibm:hover, a.project-nav-farmooo:hover, a.project-nav-sfu:hover, a.project-nav-rayz:hover, a.project-nav-surrey:hover {
  color: #FFFFFF; }
  a.project-nav-ibm:hover img, a.project-nav-farmooo:hover img, a.project-nav-sfu:hover img, a.project-nav-rayz:hover img, a.project-nav-surrey:hover img {
    transform: translateX(10px); }

/* ========== RETURN TOP ========== */
.top {
  text-align: center;
  overflow: hidden;
  padding: 3em; }
  .top img:hover {
    transform: translateY(-10px); }

/* ================================================================ 
	WORKS END
================================================================  */