* {
box-sizing: border-box;
}

html {
  font-size: 10px;
}

header {
  height: 7rem;
  width: 100%;
  background-color: #000;
  position: fixed;
  padding-left: 10rem;
  padding-right: 10rem;
  z-index: 1000;

}

body {
  font-family: 'Nunito Sans','Roboto','Muli', 'Questrial', sans-serif;
}

.container {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* grid-template-columns: 2fr 8fr 2fr;
  grid-template-areas:
  "hero hero hero"
  "overview overview overview"
  "failure failure failure"
  "fail_highlight fail_highlight fail_highlight"
  "research research research"
  "info_architecture info_architecture info_architecture"
  "visuals visuals visuals"
  "results results results"
  "prototype prototype prototype"
  "lessons lessons lessons"
  "footer footer footer" */
}


.text {
  color: #636B81;
  font-size: 2rem;
  margin-left: 7rem;
  font-family: "Nunito Sans";
  list-style-type: circle;
  margin-bottom: 2.5rem;
  line-height: 1.7;
}

.flex-container {
  padding: 0rem 0rem;
  align-items: center;
}

h1 {
  font-size: 4.8rem;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  color: #30323E;
  margin-bottom: 30px;
}

h2 {
  color: #25252B;
  font-family: 'Raleway', sans-serif;
  font-size: 4.2rem;
  font-weight: bold;
  margin-bottom: 15px;
  line-height: 1.2;
  max-width: 650px;
}

h3 {
  font-family: 'Raleway', sans-serif;
  color: #FF2770;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  color: #636B81;
  line-height: 1.7;
  font-size: 2rem;
  margin-bottom: 25px;
  max-width: 60ch;
}

.lessons_tip {
  color: #636B81;
  line-height: 1.7;
  font-size: 2rem;
  margin-bottom: 25px;
}

a {
  text-decoration: none;
  color: #FF2770;
}

a:hover {
  text-decoration: underline;
}

.menu_item, .menu_item1 {
  padding-top: 1.3rem;
  font-family: 'Raleway', sans-serif;
}

.menu_item a {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  color: #fff;
  text-decoration: none;
}

.menu_item a:hover {
  color: #d9d9d9;
  padding-bottom: 1rem;
  border-bottom: 3px #fff solid;
}

.menu_item1 a {
  font-family: 'Raleway', sans-serif;
  font-size: 1.8rem;
  color: #fff;
  text-decoration: none;
}

.menu_item1 a:hover {
  color: #d9d9d9;
}

.push {
  margin-right: 15rem;
}


.intro {
  font-family: "Poppins";
  font-size: 2.2rem;
  color: #30323E;
  line-height: 1.8;
}

.hero {
  /* background-image: url("../img/background_goal_celebration.png"); */
  background-size: cover;
  padding-top: 30vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-area: hero;
}

/* ------
Hero section
--------*/

.roles {
  font-family: 'Raleway', sans-serif;
  font-size: 2.2rem;
  font-weight: lighter;
  text-align: center;
  color: #fff;
  grid-area: roles;
}


.hero h1 {
  font-size: 4.8rem;
  font-weight: bold;
  text-align: center;
  color: #fff;
  line-height: 7.1rem;
  margin-top: 30px;
  margin-bottom: 30px;
}

.hero h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  margin-bottom: 70px;
}



/* Basic standard grid structure for sections */

.overview, .research, .info_architecture, .visuals, .results, .lessons {
  padding: 7.5rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 3fr 1fr 1fr 3fr 1fr 1fr;
  grid-row-gap: 10rem;
  grid-column-gap: 4rem;
  /* background-color: #2196F3; */
}

/* Style for intros */

.overview_intro, .info_architecture_intro, .research_intro, .visuals_intro, .lessons_intro, .failure_intro {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ------
Overview sections
--------*/


/* ------------ Roles (this is the description on top, with Role, Deliverables and Specs) ------------------------ */

.role {
  padding-top: 8rem;
  padding-bottom: 10rem;
  background-color: #fafafa;
  display: flex;
  grid-area: role;
}

.nut_list {
  align-items: center;
  text-align: center;
}

.nut_list li {
  margin-bottom: 0rem;
  line-height: 3.5rem;
  list-style-type: none;
}

.list_center {
  border-left: 1px solid;
  border-right: 1px solid;
  border-color: #777;
}

.nut_title {
  color: #000;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  font-size: 2.2rem;
}

.nut_desc {
  font-family: 'Raleway', sans-serif;
  color: #000;
  font-size: 1.8rem;
}

/* ----------------- Overview ------------------- */

.overview {
  grid-area: overview;
  background: #fafafa;
}

.overview_intro img {
  width: 120px;
}

.overview_intro {
  grid-area: overview_intro;
}

.solution_info {
  grid-area: solution;
}

.problem_info {
  grid-area: problem;
}

.img_problem {
  grid-area: img_problem;
  display: flex;
  align-items: center;
}

.img_solution {
  grid-area: img_solution;
  display: flex;
  align-items: flex-end;
}

.img_solution img, .img_problem img {
  width: 100%;
}


/* ------
Research section
--------*/

.research {
  display: grid;
  grid-area: research;
  background: #fff;
}

.research_intro {
  grid-area: research_intro;
}

.competitive_block {
  grid-area: competitive_block;
}

.competitive_desc {
  grid-area: competitive_desc;
}

.competitive {
  grid-area: competitive;
}

.scoping {
  grid-area: scoping;
}

.scoping_block {
  grid-area: scoping_block;
  display: flex;
  align-items: center;
}

.survey_block {
  grid-area: survey_block;
}

.survey_desc {
  grid-area: survey_desc;
}

.survey {
  grid-area: survey;
}


/* ------
Info Architecture section
--------*/

.info_architecture {
    background-color: #fff;
    grid-area: info_architecture;
}

.info_architecture_intro {
  grid-area: info_architecture_intro;
}

.user_story_img {
  grid-area: user_story_img;
}

.user_story {
  grid-area: user_story;
}

.user_sto_img {
  grid-area: user_sto_img;
}

.img_content_strategy {
  grid-area: img_content_strategy;
}

.img_content_strategy img {
  width: 100%;
}

.content_strategy {
  grid-area: content_strategy;
}

.content_strategy_2 {
  background-color: #fff;
  grid-area: content_strategy_2;
}

.content_strategy_2_block {
  grid-area: content_strategy_2_block;
}

.content_strategy_2_path {
  grid-area: content_strategy_2_path;
}

.content_strategy_2_path img {
  width: 100%;
}

.personas {
  padding: 7rem 0;
  display: grid;
  grid-area: personas;
  grid-template-columns: .5fr 4fr 4fr .5fr;
  grid-column-gap: 5.6rem;
  grid-row-gap: 5rem;
  grid-template-areas:
  ". persona_intro persona_intro ."
  ". persona1 persona4 ."
  ". persona3 persona2 ."
}

.persona_intro {
  grid-area: persona_intro;
  /* text-align: center; */
}

.persona1 {
  grid-area: persona1;
}

.persona2 {
  grid-area: persona2;
}

.persona3 {
  grid-area: persona3;
}

.persona4 {
  grid-area: persona4;
}

.user_persona {
  padding: 0rem 2rem 2rem;
  box-shadow: 0px 2px 40px rgba(0,0,0,.12);
  margin: 1rem;
}

.user_persona p {
  font-family: 'Raleway', sans-serif;
  font-size: 1.6rem;
  font-weight: 300;
  color: #30323E;
}

.user_persona a {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  font-weight: bold;
  color: #3653FC;
  font-size: 1.6rem;
}

.user_persona_title {
  border-bottom: #777777 1px solid;
  margin-bottom: 7rem;
}

.user_persona_box {
  position: relative;
  top: -30px;
}

/* .persona_pic {
  position: relative;
  top: -30px;
  width: 20rem;
} */

.persona_blockquote {
  font-family: "Questrial";
  color: #30323E;
  text-align: center;
  font-size: 2.4rem !important;
  line-height: 1.6;
  margin-bottom: 4rem;
}

.border_green {
  border-top: #00C853 5px solid;
}

.border_blue {
  border-top: #4A90E2 5px solid;
}

.border_purple {
  border-top: #A654AF 5px solid;
}

.border_pink {
  border-top: #EC407A 5px solid;
}

.user_persona h4 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

/* ------
Wireframes mini-section
--------*/

.wireframes {
  background-color: #fafafa;
}

.wireframes_desc {
  grid-area: wireframes_desc;
}

.wireframes_block {
  grid-area: wireframes_block;
  align-self: center;
}

.wireframes_img {
  grid-area: wireframes_img;
}

.wireframes_test_desc {
  grid-area: wireframes_test_desc;
}

.wireframes_test_block {
  grid-area: wireframes_test_block;
}

.wireframes_pic {
  grid-area: wireframes_pic;
}

.wireframes_conclusion {
  grid-area: wireframes_conclusion;
}

.test_before1 {
  grid-area: test_before1
}

.test_before2 {
  grid-area: test_before2;
}

.test_after {
  grid-area: test_after;
}

.test_recap {
  grid-area: test_recap;
}

.test_challenge {
  grid-area: test_challenge;
}



/* ------------------------------------------
Visuals Section
---------------------------------------------*/

.visuals {
  display: grid;
  background: #fff;
  grid-area: visuals;
}

.visuals_intro {
  grid-area: visuals_intro;
}

.branding {
  grid-area: branding;
}

.branding_block {
  grid-area: branding_block;
  display: flex;
  align-items: center;
}

.branding_img {
  grid-area: branding_img;
}

.branding_block {
  grid-area: branding_block;
}

.branding_img_2 {
  grid-area: branding_img_2;
}

.branding_research {
  grid-area: branding_research;
}

.branding_research_item {
  margin: 10rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

h4 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.hifi {
  grid-area: hifi;
  display: flex;
  flex-direction: column;
}

.hifi_img {
  grid-area: hifi_img;
  display: flex;
  align-items: flex-end;
}

.hifi_2 {
  grid-area: hifi_2;
  display: flex;
  flex-direction: column;
}

.img_hifi_2 {
  grid-area: img_hifi_2;
}

.hifi_3 {
  grid-area: hifi_3;
  display: flex;
  flex-direction: column;
}

.hifi_flow {
  display: flex;
  grid-area: hifi_flow;
  flex-direction: column;
}

.hifi_flow_img {
  grid-area: hifi_flow_img;
  display: flex;
  align-items: center;
}

.hifi_img img, .branding_block img {
  width: 100%;
}


/* ------------------------------------------
Results Section
---------------------------------------------*/

.results {
  display: grid;
  background: #fff;
  grid-area: results;
  grid-column-gap: 4rem;
  grid-row-gap: 5rem;
  grid-template-columns: 1fr 6fr 2fr 2fr 1fr;
}

.results_test1 {
  grid-area: results_test1;
}

.results_test2 {
  grid-area: results_test2;
}

.results_test3 {
  grid-area: results_test3;
}

.results_test_img {
  grid-area: results_test_img;
}

.kpis {
  grid-area: kpis;
}

.img_kpis {
  grid-area: img_kpis;
}

.img_kpis img {
  width: 100%;
}


/* ------------------------------------------
Prototype Section
---------------------------------------------*/

.prototype {
    display: grid;
    padding-top: 20vh;
    grid-template-columns: 2fr 5fr 3fr 2fr;
    grid-area: prototype;
    grid-template-areas:
    ". prototype_desc prototype_pic ."
}

.prototype h1 {
  font-size: 5.4rem;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  margin-top: 30px;
  margin-bottom: 20px;
}

.prototype h2 {
  font-family: 'Raleway', sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 50px;
}

/* ------------------------------------------
Lessons Section
---------------------------------------------*/


.lessons {
  background-color: #fafafa;
  grid-area: lessons;
  grid-template-areas:
  ". lessons_intro lessons_intro lessons_intro lessons_intro lessons_intro lessons_intro ."
  ". . lessons_insights lessons_insights lessons_insights lessons_insights . ."
}

.lessons_intro {
  display: flex;
  flex-direction: column;
  grid-area: lessons_intro;
}

.lessons_insights {
  padding-top: 5rem;
  align-items: center;
  grid-area: lessons_insights;
}


/* -----------
See More
-------------*/

.see_more {
  display: grid;
  grid-template-columns: 6fr 6fr;
  grid-template-areas:
  "more_project_1 more_project_2"
}


.more_project_1 {
  grid-area: more_project_1;
}

.more_project_2 {
  grid-area: more_project_2;
}

.more_project_1, .more_project_2 {
  padding: 0rem 0rem;
}

.more_project_1_layer, .more_project_2_layer {
  padding: 7rem 10rem;
  display: flex;
  align-items: center;
  z-index: 100;
  width: 100%;
  height: 100%;
}

.more_project_1 a:hover, .more_project_2 a:hover{
  text-decoration: none;
}

.more_project_1_layer:hover, .more_project_2_layer:hover {
  background: rgba(0,0,0,.55);
  color: #000;

}

.more_project_1_layer img, .more_project_2_layer img {
  z-index: 30;
  max-width: 25rem;
}

.more_project_1 h2, .more_project_2 h2 {
  color: #fff;
  line-height: 1.4;
}

.more_project_1 p, .more_project_2 p {
  color: #fff;
}


/* ------------------------------------------
Footer Section
---------------------------------------------*/

.footer {
  background: url("../img/background_footer.png");
  background-repeat: no-repeat;
  background-size: cover;
  grid-area: footer;
  padding-top: 7rem;
  padding-bottom: 7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer h1 {
  font-size: 4.4rem;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

.footer h2 {
  color: #fff;
  font-weight: lighter;
  font-family: 'Raleway', sans-serif;
  font-size: 2.4rem;
  text-align: center;
  width: auto;
  margin-bottom: .5rem;
}

.footer p {
  color: #fff;
  font-weight: lighter;
  font-family: 'Raleway', sans-serif;
  font-size: 2rem;
  text-align: center;
  width: auto;
  margin-bottom: .2rem;
}

.contact {
  display: flex;
  align-items: center;
  padding: 10px;
}

.contact li {
  margin-right: 12px;
  margin-left: 12px;
  float: left;
  list-style-type: none;
}

.size {
  color: #FFf;
  width: 48px;
}

.footer a {
  color: #4A90E2;
  text-decoration: none;
}

.footer a:hover {
  color: #FFF;
}



/* .scoping, .competitive, .survey, .user_story, .content_strategy, .content_strategy_2, .branding_img_2, .hifi, .fail_block, .fail_user_story, .fail_conclusion, .fail_hifi, .fail_hifi_block, .fail_conclusion_2, .highlight, .wireframes, .text, .survey_block, .survey_desc { */
  /* padding-top: 10rem; */
  /* padding-bottom: 10rem; */
/* } */


.highlight {
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: #30323E;
  padding-left: 8.33%;
  padding-right: 25%;
}

.highlight h2 {
  font-size: 4rem;
  line-height: 5rem;
  color: #fff;
  margin-bottom: 5rem;
  max-width: 80%;
}

.highlight p {
  font-family: 'Raleway', sans-serif;
  color: #fDfDfD;
  font-weight: 300;
}

.highlight_dark {
  background-color: #FAFAFA;
  padding-bottom: 10rem;
}

.highlight_dark h2 {
  font-size: 3.2rem;
  line-height: 4rem;
}

.highlight_dark p {
  font-family: "Nunito Sans";
  font-weight: 300;
}

.last {
  margin-top: 5rem;
}

.blockquote_line {
  margin-bottom: 2rem;
}

.center {
  position: relative;
  margin-left: -10rem;
  left: 50%;
}

.competitive_img {
  grid-area: competitive_img;
}

.conclusion, .branding_img_2, .hifi_2 {
  padding-bottom: 10rem;
  align-items: center;
  display: flex;
}

.competitive-case1, .competitive-case2 {
  align-items: center;
  display: flex;
}

.competitive-case1 {
  grid-area: competitive-case1;
}

.competitive-case2 {
  grid-area: competitive-case2;
}

.conclusion {
  grid-area: conclusion;
}

.survey_insight {
  font-family: 'Raleway', sans-serif;
  background-color: #30323E;
  display: flex;
  padding: 10rem 15rem;
  flex-direction: column;
  font-weight: 300;
  align-items: center;
  text-align: center;
  grid-area: survey_insight;
}

.survey_insight ul {
  max-width: 650px;
}

.survey_insight li {
  font-family: 'Raleway', sans-serif;
  font-size: 2.4rem;
  margin-bottom: 8rem;
  line-height: 4.7rem;
  font-weight: 300;
  color: #fff;
  list-style-type: none;
}

.research_recap {
  grid-area: research_recap;
  padding: 5rem 8.3%;
}


.prototype_desc {
  grid-area: prototype_desc;
}

.prototype_pic {
  grid-area: prototype_pic;
}

.research img {
  width: 120px;
  margin-bottom: 20px;
}

/* ------
Other Elements
--------*/

.blockquote {

  font-family: "Questrial";
  font-size: 2.8rem;
  line-height: 1.6;
  color: #000;
}

.blockquote_line, .highlight_line {
  width: 10rem;
  background-color: #FF3366;
  height: .7rem;
}

.btn_link {
  margin-top: 5rem;
}

.author {
  font-size: 3.6rem;
  color: #30323E;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 40px;
}

.number {
  color: #FF3366 !important;
  font-size: 7rem !important;
  font-family: "Questrial" !important;
  margin-bottom: 1rem !important;
}

.lessons_number {
  color: #000000;
  font-size: 7rem;
  text-align: center;
  font-family: "Questrial";
  margin-bottom: 3rem;
}

.lessons_tip {
  margin-bottom: 8rem;
}

.img_post {
  /*width: 65rem;*/
}

li {

}

.cs_img {
  width: 100%;
  margin-bottom: 20px;
}

.img_cs1 {
  width: 450px;
  margin-bottom: 20px;
}

.img_style_guide {
  width: 450px;
  margin-left: 7rem;
  margin-bottom: 20px;
}

.img_prototype {
  max-width: 90%;
  margin-left: 5rem;
  margin-bottom: 2rem;
}

.img_competitive {
  min-width: 650px;
  margin-bottom: 20px;
}

.img_branding {
  max-width: 600px;
  margin-left: 5rem;
  margin-bottom: 20px;"
}

.img_hifi {
  width: 100%;
  margin-top: 10rem;
  margin-bottom: 20px;
}

.shadow {
  box-shadow: 0px 20px 40px rgba(0,0,0,.15);
}


/* ----
Buttons
-----
*/

.cta-button {
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  font-size: 1.2rem;
  box-shadow: 0px 20px 40px rgba(0,0,0,.15);
  border-radius: 40px;
  border:0px;
  padding: 20px 75px;
  font-weight: bold;
  min-width: 20%;
  -webkit-transition-duration: 0.2s; /* Safari */
  transition-duration: 0.2s;
}

.cta-button:hover {
  background-color: #FF7EAA;
  color: #ffffff;
  /* font-size: 1.5rem; */
  text-decoration: none;
}

.white {
  background-color: #ffffff;
  color: #3653FC;
}

.white-border {
  color: #FFF;
  border: 1px #fff solid;
}

.blue {
  background-color: #fff;
  color: #7197EF;
}

.light-blue {
  background-color: #64D9F0;
  color: #FFF;
  box-shadow: 0px 0px 0px rgba(0,0,0,.3);
}

.orange {
  background-color: #F7A636;
  color: #FFF;
}

/* .cta-white a {
  font-family: 'Raleway', sans-serif;
  background-color: #ffffff;
  text-decoration: none;
  font-size: 1.6rem;
  color: #4A4A4A;
  box-shadow: 0px 2px 40px rgba(0,0,0,.3);
  border-radius: 40px;
  border:0px;
  padding: 20px 75px;
  font-weight: bold;
  min-width: 20%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.cta-white a:hover {
  background-color: #FF7EAA;
  color: #ffffff;
}

.cta-blue a {
  font-family: 'Raleway', sans-serif;
  background-color: #394D84;
  text-decoration: none;
  font-size: 1.6rem;
  color: #fff;
  box-shadow: 0px 2px 40px rgba(0,0,0,.3);
  border-radius: 40px;
  border:0px;
  padding: 20px 75px;
  letter-spacing: 1px;
  min-width: 20%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

.cta-blue a:hover {
  background-color: #FF7EAA;
  color: #ffffff;
}


.cta-secondary {
  font-family: 'Raleway', sans-serif;
  text-decoration: none;
  font-size: 1.2rem;
  color: #222222;
  border-radius: .4rem;
  border: .1rem solid;
  border-color: #555;
  padding: 1.5rem 3rem;
  font-weight: bold;
  min-width: 20%;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  letter-spacing: .1rem;
}

.cta-secondary:hover {
  background-color: #222;
  color: #ffffff;
  /* font-size: 1.5rem; */
  text-decoration: none;
}

.space {
  margin-left: 5rem;
}