/********************************** Projects Page Setting *****************************************/
body {
	opacity: 1; 
}
img.personal_logo {
	max-width: 13%;
}
p.comment {
	color: #8c8c8c;
}
p.highlight1 {
	color:#6e5de4;
}
/*******************************************************  Webdays  ****************************************/
img.webdays_about {
	max-width: 80%;
	padding: 2%;
}
.Questionarier ul {
	list-style: none;
}
.Questionarier h3 {
	padding-left: 0;
}
#internal_budget {
	max-width: 100%;
	margin-top: 10%;
}
/*******************************************************  Gochi  ****************************************/
#gochi_branding {
	padding-bottom: 2%;
}

/*******************************************************  flipped  ****************************************/



/*************************************************** UNIQLO ****************************************/
#uniqlo_research {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	display: block;
	padding: 5% 0 0 8%;
}
#uniqlo_research img {
	max-width: ;
	padding: 5% 0 5% 2%;
}
#uniqlo_research p, h3 {
	padding-left: 8%;
	max-width: 80%;
}
#uniqlo_research ul {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: ;
	overflow: hidden;
	width: 100%;
}
#uniqlo_research ul li {
	float: left;
	max-width: 29em;
	padding: 0 0 2% 5%;
}
/******************** Personas **********************/
#uniqlo_psn {
	padding: 0 0 5% 10%;
	float: left;
}
.uniqlo_sersona {
	max-width: 29%;
	float: left;
	margin: 2%;
}
.uniqlo_sersona img {
	max-width: 100%;
}

/*******************************************************  PAWL  ****************************************/

/****************** Float Left Divs ************************/
.Affinity_Diagram, #PAWL_branding, .wireframe {
	float: left;
}


img.pawl_research {
	max-width: 100%;
}
img.PAWL_persona {
	max-width: 80%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
img.PAWL_journey {
	max-width: 90%;
	margin-bottom: 5%;
}
.PAWL_goal ul li {
	padding: 2% 0 2% 2%;
}
#PAWL_problem {
	padding-bottom: 0;
}
#PAWL_psn {
	margin-bottom: 8%;
}
#PAWL_process {
	padding-top: 0;
}
#PAWL_IA {
	margin-top: 8%;
}
#PAWL_branding {
	margin: 8% 0 12% 0;
}
/******** visual design slides ********/
.visual_design {

}
.visual_design img {
	max-width: 80%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
/***************** Wireframes ***************/
#PAWL_usertesting {
	padding-top: 5%;
}
.wire_detail {
	padding-left: 8%;
}
.wire_detail p {

}
/******************* User Testing ********************/
.wire_intro {
	padding-top: 2%;
}
.PAWL_testresult {
	padding: 0 12% 2% 12%;
}
.PAWL_testresult h3 {
	padding-left: 0;
}
/************************************************* MotivePlus *********************************************/
.project_intro_img {

}
.MotivePlus_img {
	max-width: 100%;
	display : block;
    margin : auto;
    padding: 4% 0 5% 6%;
}
.project_detail {
	overflow: auto;
	padding: 0 10%;
}
.project_detail p {
	font-size: .9em;
	line-height: 1.6;
	margin-block-start: 1em;
    margin-block-end: 1.8em;
}

/**************************** Overview ****************************/
.overview, .design_solutions, .design_process, .research, .synthesis, .personas, .user_flow{
	overflow: auto;
	padding: 0 2%;
}
.overview #overview_content {
	padding: 5% 0 0 8%;
    max-width: 60%;
    float: left;
}
#overview_content p {

}
.overview #role {
	padding: 5% 0 0 8%;
	float: left;
}
#role ul {
	padding-top: 3.2em;
}
#role ul li {
	list-style:none;
	padding-bottom: 12%;
}
#role h6 {
	margin: 0 auto;
	font-weight: 300;
	font-size: .9em;
	color: #454545;
}
#role p {
	margin: 0 auto;
	font-weight: 400;
	font-size: .9em;
}

/**************************** Problem_and_goal ****************************/
.problem_and_goal {
	padding: 5% 2%;
	overflow: auto;
	float: left;
}
.problem_and_goal #problem {
	float: left;
    max-width: 36%;
    margin-left: 8%;
}
.problem_and_goal #hypothesis {
	float: left;
	max-width: 36%;
	margin-left: 10%;
}
.problem_and_goal #design_goals {
	float: left;
	padding: 8% 0 5% 8%;
	max-width: 100%;
}
#design_goals ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0;
  	overflow: hidden;
  	width: 100%;
}
#design_goals ul li {
	float: left;
    max-width: 30em;
    padding: 2% 0 2% 10%;
	
}
#design_goals p {
	
}

/**************************** Design_solutions ****************************/
.design_solutions {
	background-color: #fafafa;
	padding: 5% 2%;
}
.design_solutions h2 {
	text-align: center;
	margin: 0 0 5% 0;
}
.design_solutions p {
	line-height: 2;
}
.solution1, .solution3 {
	overflow: auto;
	padding: 0 0 2% 8%;
}
.solution2 {
	overflow: auto;
	padding: 0 0 2% 16%;
}
.solution1_detail, .solution2_detail, .solution3_detail {
	float: left;
    max-width: 35%;
    display: inline-block;
    margin: 15% 10%;
}
.solution2_detail {
	margin-left: 15%;
	max-width: 36%;
}

.solution1 img, .solution2 img, .solution3 img {
	float: left;
	max-width: 28%;
	display: inline-block;
}

/**************************** Design_process ****************************/
.design_process {
	padding-top: 8%;
}
.design_process h1 {
	text-align: center;
}
/************* Research *****************/
.research {
	padding:0;
	margin-top: 5%;
}
.research h2 {
	margin: 0 0 5% 8%;
}
.survey, .learnings, .competitors, .Affinity_Diagram, .interviews, .brainstorm, .key_findings{
	padding: 0 12% 2% 12%;
}
.card {
	background-color: rgba(250, 250, 250, 0.4);
	border-radius: .6em;
}
#learnings_detail {
	max-width: 85%;
	padding: 2% 5%;
	margin: 5% 0 5% 8%;
}
/************* Competitors *****************/
.competitors {
	height: 35em;
	margin: 0;
}
.competitors h4 {
	text-align: center;
}
.competitors #slideshow {
	position: relative;
    top: 20em;
}
.text p {
	margin-block-start: 0;
    margin-block-end: 0;
}
/************* Affinity_Diagram *****************/
.Affinity_Diagram {
	padding: 0;
}
.Affinity_Diagram img {
	max-width: 100%;
}
.brainstorm {
	padding-top: 5%;
}
.brainstorm ul {
	max-width: 60%;
    margin-left: 20%;
}
/************* Interview *****************/
.interviews {
	padding-top: 2%;
}
#interview_text {
	max-width: 100%;
}
.insights {
	max-width: 100%;
}
#insight {
	max-width: 29%;
    padding: 0 2% 4% 2%;
    margin: 0 2%;
    float: left;
}
#insight h3 {
	text-align: center;
}
#insight ul {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: .8em;
    line-height: 160%;
    hyphens: auto;
}
#insight ul li {
	padding-bottom: 1em;
}
.key_findings {
	padding-top: 8%;
	float: left;
}
.finding_wrap {
	height: 18em;
    overflow: scroll;
}
#detail {
	padding: 5% 5% 0 5%;
}
#detail h3 {
	text-align: center;
}

/************* Synthesis *****************/
.synthesis {
	padding: 0;
	margin-top: 8%;
}
.synthesis img{
	max-width: 100%;
	padding-left: 5%;
}

/************* Personas *****************/
.personas {
	margin: 2% 0;
}
.slideshow_persona {

}
.avatar {
	max-width: 50%;
    float: left;
    margin: 5%;
    position: relative;
    left: 5%;
}
.persona_detail {
	background-color: rgba(250, 250, 250, 1);
	border-radius: .6em;
	float: left;
    max-width: 100%;
    margin: 5% 5%;	
}
.persona_detail img.psn {
	max-width: 24%;
    float: left;
    margin-left: 12%;
    padding: 8% 0;
    position: relative;
    right: 5%;
}
.slideshow_dot {

}

/**************************** User_flow ****************************/
.avatar img {
	max-width: 100%;
}

/**************************** Wireframes ****************************/
.wireframe {
	margin-top: 5%;
}
.lowfi_wire img {
	max-width: 100%;
}
.wire_flow1, .wire_flow2, .wire_flow3 {
	max-width: 100%;
}
.wire_flow1 p, .wire_flow2 p {
	max-width: 30%;
    margin-right: 2%;
    margin-bottom: 5%;
    padding: 2% 0 2% 4%;
    float: left;
}
.wire_flow3 p {
    padding: 0 0 2% 4%;
    float: left;
}
.wireframe_wrap {
	max-height: 35em;
	overflow: scroll;
	padding: 2% 5%;
	margin-top: 5%;
}


/** slideshow **/ 
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow */
* {box-sizing: border-box}
.mySlides {display: none}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  	color: #;
  	font-size: .8em;
    line-height: 120%;
    position: absolute;
    left: 75%;
    bottom: 50%;
    width: 25%;
    padding-bottom: 1.8em;
}

/* Slideshow Image */
.mySlides img {
	width: 70%;
    position: absolute;
    left: 2%;
    bottom: 50%;
}


/* The dots/bullets/indicators */
.dot, .dot_persona, .dot_visual {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.dot_persona, .dot_visual {
  margin: 0 12px;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.3s;
  animation-name: fade;
  animation-duration: 1.3s;
}

/* Scroll Bar */
::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0,0,0,.2);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

@-webkit-keyframes fade {
  from {opacity: .7} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .7} 
  to {opacity: 1}
}

/* On smaller screens */
@media only screen and (max-width: 300px) {
  
}