/******************** Projects ********************/

.project header {
  height: 100%;
  overflow: hidden;
}

.project header .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 100%;
  margin-top: -90px;
}

.project header .text {
  margin: 0 0 0 90px;
  padding: 0 0 100px 0;
  background: url("./../images/line-vert.svg") no-repeat left bottom;
}

.project header h1 {
  font-size: 3rem;
  font-weight: normal;
  letter-spacing: 0.04rem;
}

.project header h2, .project header p {
  margin-top: 0.7rem;
  font-size: 1rem;
  letter-spacing: 0.1rem;
}

.project header p {
  font-weight: lighter;
}

.project header .pic {
  margin: 0 90px 0 0;
  height: 80%;
}

.project header .pic img {
  height: 100%;
  display: block; /* To remove bottom border */
}

.project header .shadow img {
  box-shadow: 0px 10px 10px 3px rgba(0, 0, 0, 0.07);
}

/* @media only screen and (max-width: 1080px) {
  .project header .pic {
    height: 75%;
  }
  .project header h1 {
    font-size: 2.5rem;
  }
}

@media only screen and (max-width: 950px) {
  .project header .text {
    margin: 0 0 0 70px;
  }
  .project header .pic {
    margin: 0 70px 0 0;
  }
}

@media only screen and (max-width: 780px) {
  .project header .text {
    margin: 0 0 0 50px;
  }
  .project header .pic {
    margin: 0 50px 0 0;
  }

  .project header h1 {
    font-size: 2.3rem;
  }
} */

@media only screen and (max-width: 580px) {
  .project header .container {
    margin-top: -80px; /* because margin on nav changed */
  }

  .project header .container {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 100%;
  }

  .project header .text {
    margin: 200px 0 40px 20px;
    padding: 0 0 0 0;
    background: none;
  }

  .project header h1 {
    font-size: 1.8rem;
    letter-spacing: 0.04rem;
  }

  .project header h2, .project header p {
    margin-top: 0.6rem;
    font-size: 0.9rem;
    letter-spacing: 0.09rem;
  }

  .project header .pic {
    margin: 0 20px 0 20px;
    object-fit: contain; /* contains header image in div */
    height: 45%;
  }
}

/********** Main Containers **********/

main .container {
  display: flex;
}

main .container .text, main .container .image {
  width: 50%;
}

main .container .text div {
  margin: 90px 0 0 90px;
  max-width: 400px;
}

main .container .text h3, main .container .text h4 {
  font-size: 1.8rem;
  font-weight: normal;
  letter-spacing: 0.04rem;
}

main .container .text p, main .container .text ol {
  margin-top: 2rem;
  font-size: 1rem;
  font-weight: lighter;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
}

main .container .text ol {
  list-style-type: decimal;
  padding-left: 1.2rem;
}

main .container .image img {
  width: 100%;
  height: 100%;
  display: block; /* To remove bottom border */
}

@media only screen and (max-width: 580px) {
  main .container {
    display: flex;
    flex-direction: column;
  }

  main .container .text,  main .container .image {
    width: 100%;
  }

  main .container .text div {
    margin: 40px 30px 0 30px;
  }

  main .container .text h3 {
    font-size: 1.4rem;
  }

  main .container .text p {
    margin-top: 1rem;
    font-size: 0.8rem;
    line-height: 1.4rem;
  }
}

/********** Project McDonald's **********/

.mcdonalds header {
  background: #FBDBD6;
}

.mcdonalds header .nav .logo {
  background: url("./../images/triangle-header-mcdonalds.svg") no-repeat;
}

/***** Brief *****/

.mcdonalds main .brief {
  background: #CDDCEC;
}

.mcdonalds main .brief {
  height: 720px;
}

.mcdonalds main .brief .image {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.mcdonalds main .brief .image img {
  display: block; /* To remove bottom border */
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .brief {
    height: 100%; /* overide fixed height */
  }

  .mcdonalds main .brief .image {
    display: inline; /* overide flex */
    margin-top: 40px;
  }

  .mcdonalds main .brief .image img {
    margin: 0 auto;
    width: 75%;  /* overide fixed image width */
    height: 75%; /* overide fixed image height */
  }
}

/***** Audience *****/

.mcdonalds main .audience {
  display: flex;
  flex-direction: column;
}

.mcdonalds main .audience .text {
  width: 100%; /* overide default 50% width */
}

.mcdonalds main .audience .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.mcdonalds main .audience .personas {
  display: flex;
  justify-content: space-between;
  margin: 8rem 90px 8rem 90px;
  text-align: center;
}

.mcdonalds main .audience .personas h4 {
  margin: 20px 20px 0 20px;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.04rem;
}

.mcdonalds main .audience .personas p {
  margin: 1rem 20px 0 20px;
  font-size: 0.8rem;
  font-weight: lighter;
  line-height: 1.2rem;
  letter-spacing: 0.05rem;
}

.mcdonalds main .audience .persona {
  width: 100%;
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .audience {
    height: 100%; /* overide fixed height */
  }
  .mcdonalds main .audience .text div {
    margin-right: 20px;
  }

  .mcdonalds main .audience .personas {
    display: inline; /* overide flex */
    margin: 40px 20px 0 20px;
  }

  .mcdonalds main .audience .persona {
    padding-bottom: 40px;
    width: auto;
  }
}

/***** Objectives *****/

.mcdonalds main .objectives {
  background: #C7E5E4;
}

.mcdonalds main .objectives .text {
  order: 2;
}

.mcdonalds main .objectives .image {
  background: #C0DFDE;
  order: 1;
}

.mcdonalds main .objectives .image img {
  margin-top: 28.125%;
  margin-bottom: 28.125%;
  height: auto;
  width: 81.25%;
  margin-left: 9.375%;
  margin-right: 9.375%;
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .objectives .text {
    order: 1;
  }

  .mcdonalds main .objectives .image {
    background: none;
    order: 2;
  }
}

/***** Card Sort *****/

.mcdonalds main .card-sort {
  background: #EEE;
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .card-sort p {
    padding-bottom: 2rem;
  }
}

/***** IA *****/

.mcdonalds main .ia {
  display: flex;
  flex-direction: column;
}

.mcdonalds main .ia .text {
  width: 100%; /* overide default 50% width */
}

.mcdonalds main .ia .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.mcdonalds main .ia .image {
  margin: 90px auto 90px auto;
  width: 70%; /* overide default 50% width */
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .ia .text div {
    margin-right: 30px;
  }
}

/***** Prototype *****/

.mcdonalds main .prototype {
  background: #C7E5E4;
}

.mcdonalds main .prototype .image {
  background: #C0DFDE url("./../images/prototype-ipad@2x.png") center center no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mcdonalds main .prototype .image img {
  margin-top: 17.96875%;
  margin-bottom: 17.96875%;
  height: auto;
  width: 48.4375%;
  margin-left: 25.78125%;
  margin-right: 25.78125%;
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .prototype .image {
    background-color: #C7E5E4;
  }
}

/***** Design *****/

.mcdonalds main .design {
  display: flex;
  flex-direction: column;
  background: #EEE;
}

.mcdonalds main .design .text {
  width: 100%; /* overide default 50% width */
}

.mcdonalds main .design .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.mcdonalds main .design .screenshots {
  margin: 45px 90px 90px 90px;
  display: flex;
  justify-content: space-between;
}

.mcdonalds main .design .screenshots img {
  width: 30%;
  height: 30%;
  display: block; /* To remove bottom border */
  box-shadow: 10px 10px 8px #888888;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.07);
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .design .text div {
    margin-right: 30px;
  }
  .mcdonalds main .design .screenshots {
    margin: 30px 30px 40px 30px;
    display: flex;
    justify-content: space-between;
  }
}

/***** Quote *****/

.mcdonalds main .quote {
  background: #FBDBD6;
}

.mcdonalds main .quote .text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mcdonalds main .quote .text div {
  max-width: 600px; /* overide detault 400px */
}

.mcdonalds main .quote .text h3 {
  line-height: 2.5rem;
}

.mcdonalds main .quote .text h4 {
  margin-top: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
}

.mcdonalds main .quote .text p {
  margin-top: 0;
}

.mcdonalds main .quote .text .hyperlink a {
  font-weight: lighter;
  margin: 0 0 0 0;
  padding: 0.5rem 2rem 0.5rem 0;
  background: url("./../images/arw-right.svg") no-repeat right;
  transition: all .2s ease-in-out; /* Animation */
}

.mcdonalds main .quote .text .hyperlink a:hover {
  padding-right: 2.4rem ;
  color: black;
}

@media only screen and (max-width: 580px) {
  .mcdonalds main .quote .text {
    display: none;
  }
}

/********** Project Allen & Overy **********/

.ao header {
  background: #F4F3F1;
}

.ao header .nav .logo {
  background: url("./../images/triangle-header-ao.svg") no-repeat;
}

/***** Brief *****/

.ao main .brief {
  background: #5C6F7B url("./../images/proj-ao-brief@2x.jpg") no-repeat center;
  background-size: cover;
  color: white;
}

.ao main .brief {
  height: 720px;
}

.ao main .brief .text  {
  padding-bottom: 2rem;
}

@media only screen and (max-width: 580px) {
  .ao main .brief {
    height: 100%; /* overide fixed height */
  }
}

/***** Audience *****/

.ao main .audience {
  background: #F4F3F1;
}

@media only screen and (max-width: 580px) {
  .ao main .audience p {
    padding-bottom: 2rem;
  }
}

/***** Approach *****/

.ao main .approach {
  background: #DD256E;
  color: white;
}

.ao main .approach .text {
  order: 2;
  padding-bottom: 2rem;
}

.ao main .approach .image {
  background: #C0DFDE;
  order: 1;
}

@media only screen and (max-width: 580px) {
  .ao main .approach .text {
    order: 1;
  }

  .ao main .approach .image {
    background: none;
    order: 2;
  }
}

/***** Prototype *****/

.ao main .prototype {
  background: #F4F3F1;
}

.ao main .prototype .image {
  background: #EEEDEB url("./../images/prototype-ipad@2x.png") center center no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ao main .prototype .image img {
  margin-top: 17.96875%;
  margin-bottom: 17.96875%;
  height: auto;
  width: 48.4375%;
  margin-left: 25.78125%;
  margin-right: 25.78125%;
}


@media only screen and (max-width: 580px) {
  .ao main .prototype .image {
    background-color: #F4F3F1;
  }
}

/***** Design *****/

.ao main .design {
  display: flex;
  flex-direction: column;
  background: #5C6F7B;
  color: white;
}

.ao main .design .text {
  width: 100%; /* overide default 50% width */
}

.ao main .design .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.ao main .design .screenshots {
  margin: 45px 90px 90px 90px;
  display: flex;
  justify-content: space-between;
}

.ao main .design .screenshots img {
  width: 30%;
  height: 30%;
  display: block; /* To remove bottom border */
  box-shadow: 10px 10px 8px #888888;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.07);
}

@media only screen and (max-width: 580px) {
  .ao main .design .text div {
    margin-right: 30px;
  }
  .ao main .design .screenshots {
    margin: 30px 30px 30px 30px;
    display: flex;
    justify-content: space-between;
  }
}

/***** Campaign Update *****/

.ao main .campaign-update {
  display: flex;
  flex-direction: column;
  background: #404E57;
  color: white;
}

.ao main .campaign-update .text {
  width: 100%; /* overide default 50% width */
  padding-bottom: 2rem;
}

.ao main .campaign-update .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.ao main .campaign-update .screencapture {
  margin: 45px 90px 90px 90px;
}

.ao main .campaign-update .screencapture img {
  width: 100%;
  height: 100%;
  display: block; /* To remove bottom border */
  box-shadow: 10px 10px 8px #888888;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.07);
}

@media only screen and (max-width: 580px) {
  .ao main .campaign-update .text div {
    margin-right: 30px;
  }

  .ao main .campaign-update .screencapture {
    margin: 0 30px 30px 30px;
  }
}

/***** Quote *****/

.ao main .quote {
  background: #F4F3F1;
}

.ao main .quote .text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ao main .quote .text div {
}

.ao main .quote .text h3 {
  line-height: 2.5rem;
  font-weight: lighter;
}

.ao main .quote .text h4 {
  font-size: 1rem;
  margin-top: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
}

.ao main .quote .text p {
  margin-top: 0;
}

.ao main .quote .text .hyperlink a {
  font-weight: lighter;
  margin: 0 0 0 0;
  padding: 0.5rem 2rem 0.5rem 0;
  background: url("./../images/arw-right.svg") no-repeat right;
  transition: all .2s ease-in-out; /* Animation */
}

.ao main .quote .text .hyperlink a:hover {
  padding-right: 2.4rem ;
  color: black;
}

.ao main .quote .image {
  background: #EEEDEB;
}

@media only screen and (max-width: 580px) {
  .ao main .quote .text {
    padding-bottom: 60px;
  }
  .ao main .quote .text h3 {
    line-height: 2rem;
  }
  .ao main .quote .text h4 {
    margin-top: 1rem;
  }
}

/********** Project National Grid **********/

.nationalgrid header {
  background: #0074B8;
  color: #fff;
}

.nationalgrid header .nav a {
  color: #fff;
}

.nationalgrid header .nav .logo {
  background: url("./../images/triangle-header-nationalgrid.svg") no-repeat;
}

.nationalgrid header .text {
  background: url("./../images/line-vert-white.svg") no-repeat left bottom;
}

@media only screen and (max-width: 580px) {
  .nationalgrid header .text {
    background: none;
  }
}

/***** Brief *****/

.nationalgrid main .brief {
  background: #00283F url("./../images/proj-nationalgrid-brief@2x.png") no-repeat center;
  background-size: cover;
  color: white;
}

.nationalgrid main .brief {
  height: 720px;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .brief {
    height: 100%; /* overide fixed height */
  }
}

/***** Audience *****/

.nationalgrid main .audience {
  display: flex;
  flex-direction: column;
}

.nationalgrid main .audience .text {
  width: 100%; /* overide default 50% width */
}

.nationalgrid main .audience .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.nationalgrid main .audience .personas {
  display: flex;
  justify-content: space-between;
  margin: 10rem 90px 90px 90px;
  text-align: center;
}

.nationalgrid main .audience .persona {
  width: 12%;
}

.nationalgrid main .audience .persona img {
  width: 100%;
  height: auto;
}

.nationalgrid main .audience .personas h4 {
  margin: 20px 20px 0 20px;
  font-size: 1.2rem;
  font-weight: normal;
  letter-spacing: 0.04rem;
}

.nationalgrid main .audience .personas p {
  margin: 1rem 20px 0 20px;
  font-size: 0.8rem;
  font-weight: lighter;
  line-height: 1.2rem;
  letter-spacing: 0.05rem;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .audience {
    height: 100%; /* overide fixed height */
  }
  .nationalgrid main .audience .text div {
    margin-right: 20px;
  }

  .nationalgrid main .audience .personas {
    margin: 40px 20px 0 20px;
  }

  .nationalgrid main .audience .persona {
    padding-bottom: 40px;
  }
}

/***** Objectives *****/

.nationalgrid main .objectives {
  background: #0074B8;
  color: #FFF;
}

.nationalgrid main .objectives .text {
  order: 2;
}

.nationalgrid main .objectives .image {
  background: #1C80BB;
  order: 1;
}

.nationalgrid main .objectives .image img {
  margin-top: 28.125%;
  margin-bottom: 28.125%;
  height: auto;
  width: 81.25%;
  margin-left: 9.375%;
  margin-right: 9.375%;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .objectives .text {
    order: 1;
  }

  .nationalgrid main .objectives .image {
    background: none;
    order: 2;
  }
}

/***** Card Sort *****/

.nationalgrid main .card-sort {
  background: #EEE;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .card-sort p {
    padding-bottom: 2rem;
  }
}

/***** Prototype *****/

.nationalgrid main .prototype {
  background: #3B144A;
  color: #fff;
}

.nationalgrid main .prototype .image {
  background: #421F4F url("./../images/prototype-ipad@2x.png") center center no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nationalgrid main .prototype .image img {
  margin-top: 17.96875%;
  margin-bottom: 17.96875%;
  height: auto;
  width: 48.4375%;
  margin-left: 25.78125%;
  margin-right: 25.78125%;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .prototype .image {
    background-color: #3B144A;
  }
}

/***** Search *****/

.nationalgrid main .search {
  background: #FFF;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .search p {
    padding-bottom: 2rem;
  }
}

/***** Design *****/

.nationalgrid main .design {
  background: #0074B8;
  background: #3B144A;
  background: #EEE;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .design p {
    padding-bottom: 2rem;
  }
}

/***** Map *****/

.nationalgrid main .map {
  display: flex;
  flex-direction: column;
}

.nationalgrid main .map .text {
  width: 100%; /* overide default 50% width */
}

.nationalgrid main .map .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.nationalgrid main .map .screencapture {
  margin: 45px 90px 90px 90px;
}

.nationalgrid main .map .screencapture img {
  width: 100%;
  height: 100%;
  display: block; /* To remove bottom border */
  box-shadow: 10px 10px 8px #888888;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.07);
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .map .text div {
    margin-right: 30px;
    padding-bottom: 2rem;
  }

  .nationalgrid main .map .screencapture {
    margin: 0 30px 30px 30px;
  }
}

/***** Quote *****/

.nationalgrid main .quote {
  background: #0074B8;
  color: #fff;
}

.nationalgrid main .quote .text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nationalgrid main .quote .text div {
  max-width: 600px; /* overide detault 400px */
}

.nationalgrid main .quote .text h3 {
  margin-bottom: 2rem;
  line-height: 2.5rem;
}

.nationalgrid main .quote .text h4 {
  margin-top: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
}

.nationalgrid main .quote .text p {
  margin-top: 0;
}

.nationalgrid main .quote .text .hyperlink a {
  font-weight: lighter;
  margin: 0 0 0 0;
  padding: 0.5rem 2rem 0.5rem 0;
  background: url("./../images/arw-right-white.svg") no-repeat right;
  transition: all .2s ease-in-out; /* Animation */
  color: #fff;
}

.nationalgrid main .quote .text .hyperlink a:hover {
  padding-right: 2.4rem ;
  color: #fff;
}

@media only screen and (max-width: 580px) {
  .nationalgrid main .quote .text {
    padding-bottom: 60px;
  }
  .nationalgrid main .quote .text h3 {
    line-height: 2rem;
  }
  .nationalgrid main .quote .text h4 {
    margin-top: 1rem;
  }
}

/********** Project The Guardian **********/

.theguardian header {
  background: #45AEC6;
  color: #fff;
}

.theguardian header .nav a {
  color: #fff;
}

.theguardian header .nav .logo {
  background: url("./../images/triangle-header-theguardian.svg") no-repeat;
}

.theguardian header .text {
  background: url("./../images/line-vert-white.svg") no-repeat left bottom;
}

@media only screen and (max-width: 580px) {
  .theguardian header .text {
    background: none;
  }
}

/***** Brief *****/

.theguardian main .brief {
  background: url("./../images/proj-theguardian-brief@2x.jpg") no-repeat center;
  background-size: cover;
}

.theguardian main .brief {
  height: 720px;
}

@media only screen and (max-width: 580px) {
  .theguardian main .brief {
    height: 100%; /* overide fixed height */
  }
}

/***** Audience *****/

.theguardian main .audience {
  display: flex;
  flex-direction: column;
}

.theguardian main .audience .text {
  width: 100%; /* overide default 50% width */
}

.theguardian main .audience .text div {
  margin-right: 90px;
  max-width: 600px; /* overide detault 400px */
}

.theguardian main .audience .personas {
  display: flex;
  justify-content: space-between;
  margin: 10rem 90px 90px 90px;
  text-align: center;
}

.theguardian main .audience .persona {
  width: 12%;
}

.theguardian main .audience .persona img {
  width: 100%;
  height: auto;
}

.theguardian main .audience .personas h4 {
  margin: 20px 0 0 0;
  font-size: 0.8rem;
  font-weight: normal;
  letter-spacing: 0.04rem;
  line-height: 1.2rem;
}

@media only screen and (max-width: 580px) {
  .theguardian main .audience {
    height: 100%; /* overide fixed height */
  }


  .theguardian main .audience .text div {
    margin-right: 20px;
  }

  .theguardian main .audience .personas {
    display: inline; /* overide flex */
    margin: 40px 20px 0 20px;
  }

  .theguardian main .audience .persona {
    margin: 0 auto;
    padding-bottom: 40px;
    width: 40%;
  }
}

/***** User Testing *****/

.theguardian main .user-testing {
  background: #EA6A23;
  color: #fff;
}

@media only screen and (max-width: 580px) {
  .theguardian main .user-testing p {
    padding-bottom: 2rem;
  }
}

/***** Mission *****/

.theguardian main .mission {
  background: #666;
  color: #FFF;
}

.theguardian main .mission .text {
  order: 2;
  padding-bottom: 2rem;
}

.theguardian main .mission .image {
  order: 1;
}

/***** IA *****/

.theguardian main .ia {
  background: #EEE;
}

.theguardian main .ia .image {
  background: #DDD;
}

.theguardian main .ia .image img {
  margin-top: 15.15625%;
  margin-bottom: 15.15625%;
  height: auto;
  width: 81.25%;
  margin-left: 9.375%;
  margin-right: 9.375%;
}

@media only screen and (max-width: 580px) {
  .theguardian main .ia p {
    padding-bottom: 2rem;
  }
}

/***** Direction *****/

.theguardian main .direction {
  background: #F8E84D;
}

@media only screen and (max-width: 580px) {
  .theguardian main .direction p {
    padding-bottom: 2rem;
  }
}

/***** Design *****/

.theguardian main .design {
  display: flex;
  flex-direction: column;
  background: #EEEEEE;
}

.theguardian main .design .text {
  width: 100%; /* overide default 50% width */
}

.theguardian main .design .text div {
  margin-right: 90px;
  max-width: 800px; /* overide detault 400px */
}

.theguardian main .design .screenshots {
  margin: 45px 90px 90px 90px;
  display: flex;
  justify-content: space-between;
}

.theguardian main .design .screenshots img {
  width: 30%;
  height: 30%;
  display: block; /* To remove bottom border */
  box-shadow: 10px 10px 8px #888888;
  box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.07);
}

.theguardian main .design .screencapture {
  margin: 0 90px 90px 90px;
}

@media only screen and (max-width: 580px) {
  .theguardian main .design .text div {
    margin-right: 30px;
  }
  .theguardian main .design .screenshots {
    margin: 30px 30px 30px 30px;
    display: flex;
    justify-content: space-between;
  }
}

/***** Quote *****/

.theguardian main .quote {
  background: #45AEC6;
  color: #fff;
}

.theguardian main .quote .text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.theguardian main .quote .text div {
  max-width: 600px; /* overide detault 400px */
}

.theguardian main .quote .text h3 {
  line-height: 2.5rem;
}

.theguardian main .quote .text h4 {
  margin-top: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
}

.theguardian main .quote .text p {
  margin-top: 0;
}

.theguardian main .quote .text .hyperlink a {
  font-weight: lighter;
  margin: 0 0 0 0;
  padding: 0.5rem 2rem 0.5rem 0;
  background: url("./../images/arw-right-white.svg") no-repeat right;
  transition: all .2s ease-in-out; /* Animation */
  color: #fff;
}

.theguardian main .quote .text .hyperlink a:hover {
  padding-right: 2.4rem ;
  color: #fff;
}

@media only screen and (max-width: 580px) {
  .theguardian main .quote .text {
    padding-bottom: 60px;
  }
  .theguardian main .quote .text h3 {
    line-height: 2rem;
  }
  .theguardian main .quote .text h4 {
    margin-top: 1rem;
  }
}

/********** Project Baby Friendly **********/

.babyfriendly header {
  background: #0DB69F;
  color: #fff;
}

.babyfriendly header .nav a {
  color: #fff;
}

.babyfriendly header .nav .logo {
  background: url("./../images/triangle-header-bf.svg") no-repeat;
}

.babyfriendly header .text {
  background: url("./../images/line-vert-white.svg") no-repeat left bottom;
}

.babyfriendly header .shadow img {
  box-shadow: 0px 30px 10px 3px rgba(0, 0, 0, 0.07);
}

@media only screen and (max-width: 580px) {
  .babyfriendly header .text {
    background: none;
  }
}

/***** Brief *****/

.babyfriendly main .brief {
  background: url("./../images/proj-bf-brief@2x.jpg") no-repeat center;
  background-size: cover;
}

.babyfriendly main .brief {
  height: 720px;
}

.babyfriendly main .container.brief .text {
  margin: 4rem auto;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

.babyfriendly main .container.brief .text div {
  margin: 0 auto;
  max-width: 600px;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .brief {
    height: 100%; /* overide fixed height */
  }
}

/***** Idea Analysis *****/

.babyfriendly main .idea-analysis {
  text-align: center;
}

.babyfriendly main .idea {
  background: #FFDA1F;
}

.babyfriendly main .idea div  {
  background: url("./../images/proj-bf-icon-light-bulb.svg") no-repeat center;
}

.babyfriendly main .analysis {
  background: #F3D01E;
}

.babyfriendly main .analysis div  {
  background: url("./../images/proj-bf-magnifing-glass.svg") no-repeat center;
}

.babyfriendly main .idea-analysis .text {
  display: flex;
  justify-content: center;
}

.babyfriendly main .idea-analysis .text div {
  margin: 5rem 0 15rem 0;
  padding: 15rem 0 0 0;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .idea-analysis p {
    padding-bottom: 2rem;
  }
  .babyfriendly main .idea-analysis .text div {
    margin: -5rem 0 4rem 0;
    padding: 15rem 3rem 0 3rem;
  }
}

/***** Affinity mapping *****/

.babyfriendly main .affinity {
  background: url("./../images/proj-bf-affinity@2x.jpg") no-repeat center;
  background-size: cover;
}

.babyfriendly main .affinity {
  height: 720px;
}

.babyfriendly main .container.affinity .text {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

.babyfriendly main .container.affinity .text div {
  background: url("./../images/proj-bf-icon-affinity.svg") no-repeat center;
  margin: 0 auto 15rem auto;
  padding: 20rem 0 0 0;
  max-width: 600px;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .affinity {
    height: 100%; /* overide fixed height */
    padding: 0 3rem 0 3rem;
  }
}

/***** Persona *****/

.babyfriendly main .persona {
  background: #666666;
  color: #fff;
}

.babyfriendly main .persona .text div {
  margin: 90px;
  max-width: 100%;
}

.babyfriendly main .persona .text h4 {
  margin: 4rem 0 0 0;
  font-size: 1.2rem;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .persona .text div {
    margin: 3rem 2rem;
    max-width: 100%;
  }
}

/***** Idea Analysis *****/

.babyfriendly main .problem-solution {
  text-align: center;
  color: #fff;
}

.babyfriendly main .problem {
  background: #31C0AD;
}

.babyfriendly main .solution {
  background: #0DB69F url("./../images/proj-bf-solution-triangle.svg") no-repeat left center;
}

.babyfriendly main .problem-solution .text {
  display: flex;
  justify-content: center;
}

.babyfriendly main .problem-solution .text div {
  margin: 17rem 0;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .problem-solution .text div {
    margin: 5rem 0;
  }
  .babyfriendly main .problem-solution p {
    padding-bottom: 2rem;
  }
}

/***** Design patterns *****/

.babyfriendly main .design-patterns {
  background: url("./../images/proj-bf-design-patterns@2x.jpg") no-repeat center;
  background-size: cover;
}

.babyfriendly main .design-patterns {
  height: 640px;
}

.babyfriendly main .container.design-patterns .text {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
}

.babyfriendly main .container.design-patterns .text div {
  background: url("./../images/proj-bf-magnifing-glass.svg") no-repeat center;
  margin: 0 auto 12rem auto;
  padding: 16rem 0 0 0;
  max-width: 500px;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .design-patterns {
    height: 100%; /* overide fixed height */
  }
}

/***** Prototype *****/

.babyfriendly main .prototype {
  background: #eee;
}

.babyfriendly main .prototype.one .text, .babyfriendly main .prototype.three .text {
  order: 2;
}

.babyfriendly main .prototype.one .image, .babyfriendly main .prototype.three .image {
  order: 1;
}

.babyfriendly main .prototype.four .text {
  background: #0DB69F;
  color: #fff;
}

.babyfriendly main .prototype.four .image {
  background-color: #31C0AD;
}

.babyfriendly main .prototype .text {
  padding-bottom: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.babyfriendly main .prototype .text h3 {
  line-height: 2.5rem;
}

.babyfriendly main .prototype .text h4 {
  margin-top: 2rem;
  line-height: 1.8rem;
  letter-spacing: 0.05rem;
  font-size: 1.2rem;
}

.babyfriendly main .prototype .text p {
  margin-top: 1rem;
}

.babyfriendly main .prototype .image {
  background: #DDDDDD url("./../images/prototype-iphone@2x.png") center center no-repeat;
  background-size: contain;
  display: flex;
  justify-content: center;
  align-items: center;
}

.babyfriendly main .prototype .image img {
  margin-top: 20.3125%;
  margin-bottom: 20.3125%;
  height: auto;
  width: 34.375%;
  margin-left: 32.8125%;
  margin-right: 32.8125%;
}

@media only screen and (max-width: 580px) {
  .babyfriendly main .prototype.one .text, .babyfriendly main .prototype.three .text {
    order: 1;
  }
  .babyfriendly main .prototype.one .image, .babyfriendly main .prototype.three .image {
    order: 2;
  }

  .babyfriendly main .prototype .text h3 {
    line-height: 2rem;
  }
  .babyfriendly main .prototype .text h4 {
    margin-top: 1rem;
  }

  .babyfriendly main .prototype .text {
    padding-bottom: 45px;
  }
}

/********** End **********/