* {margin: 0; padding: 0;}
a {text-decoration: none;}
html {background: #F2F2F2;}
body {position: relative; width: 100%; font-size: 100%; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #FFF;}



/* Base grid */
.grid {position: relative; display: flex; flex-wrap: wrap; width: 850px; margin: 0 auto;}

[class*="grid-"] {position: relative; padding: 0 15px; box-sizing: border-box;}

.grid-12 {flex: 0 0 100%;}
.grid-11 {flex: 0 0 91.6666667%;}
.grid-10 {flex: 0 0 83.3333333%;}
.grid-9 {flex: 0 0 75%;}
.grid-8 {flex: 0 0 66.6666666%;}
.grid-7 {flex: 0 0 58.3333333%;}
.grid-6 {flex: 0 0 50%;}
.grid-5 {flex: 0 0 16.6666667%;}
.grid-4 {flex: 0 0 33.3333333%;}
.grid-3 {flex: 0 0 25%;}
.grid-2 {flex: 0 0 16.6666667%;}
.grid-1 {flex: 0 0 8.3333333%;}

.gray-box-small {width: 820px;}
.gray-box {width: 820px;}



/* Basic elements */
p, li {font-size: 1.125rem; letter-spacing: -0.0312rem; line-height: 1.875rem; margin-bottom: 1.25rem; color: #333;}
ul, ol {padding-left: 1.4em;}

h1, h2, h3, h4 {font-family: "Merriweather", serif; font-weight: bold;}
h2 {font-size: 4rem; letter-spacing: -0.1rem; line-height: 4.25rem; margin-bottom: 4.5rem; color: #FFF;}
h3 {font-size: 2.50rem; letter-spacing: -0.05rem; line-height: 3rem; margin-bottom: 1.875rem; color: #FFF}
h4 {font-size: 1.75rem; letter-spacing: -0.0625rem; line-height: 1.75rem; margin-bottom: 2.125rem; margin-top: 2.4em; color: #FFF}

strong {font-weight: bold;}
figure {padding-top: 1.5rem; margin-bottom: 3rem;}
figcaption {margin-top: 0.6rem;; font-size: 1rem; line-height: 1.25rem; letter-spacing: -0.05rem; font-style: italic; color: #666;}

.button {display: inline-block; padding: 1rem 2.4rem; border-radius: 100px; background: #333; color: #FFF; width: auto;}
.button:hover {background: #000;}
.photo-full {width: 100%;}
.photo-rounded {border-radius: 12px;}
.photo-border {border: 1px solid #ccc;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.wia {display: block; width: 54px;}
.wia-white {margin-bottom: 2.7rem; opacity: 0.5;}
.wia-white:before {content: url("data:image/svg+xml; utf8, <svg width='56' height='8' xmlns='http://www.w3.org/2000/svg'><g stroke='%23FFF' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><path d='M1 0l6 7.4L14 0l7 7.4L27 0M43 7.4L49 0l6 7.4M32 7.4L38 0l-6 7.4z'/></g></svg>")}
.wia-orange {margin-bottom: 6rem;}
.wia-orange:before {content: url("data:image/svg+xml; utf8, <svg width='56' height='8' xmlns='http://www.w3.org/2000/svg'><g stroke='%23F77419' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><path d='M1 0l6 7.4L14 0l7 7.4L27 0M43 7.4L49 0l6 7.4M32 7.4L38 0l-6 7.4z'/></g></svg>")}
.wia-blue {margin-bottom: 6rem;}
.wia-blue:before {content: url("data:image/svg+xml; utf8, <svg width='56' height='8' xmlns='http://www.w3.org/2000/svg'><g stroke='%2300A2E6' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><path d='M1 0l6 7.4L14 0l7 7.4L27 0M43 7.4L49 0l6 7.4M32 7.4L38 0l-6 7.4z'/></g></svg>")}
.wia-black {margin-bottom: 6rem;}
.wia-black:before {content: url("data:image/svg+xml; utf8, <svg width='56' height='8' xmlns='http://www.w3.org/2000/svg'><g stroke='%23333' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><path d='M1 0l6 7.4L14 0l7 7.4L27 0M43 7.4L49 0l6 7.4M32 7.4L38 0l-6 7.4z'/></g></svg>")}
.wia-purple {margin-bottom: 6rem;}
.wia-purple:before {content: url("data:image/svg+xml; utf8, <svg width='56' height='8' xmlns='http://www.w3.org/2000/svg'><g stroke='%238c3ff1' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'><path d='M1 0l6 7.4L14 0l7 7.4L27 0M43 7.4L49 0l6 7.4M32 7.4L38 0l-6 7.4z'/></g></svg>")}

.section-context p {font-size: 1.25rem; line-height: 2.25rem;}
.footnote {margin-bottom: 6rem;}
.footnote-p {font-size: 1rem; color: #666; font-style: italic;}



/* Colors & Opacity */
.orange-text {color: #F77419;}
.orange-bg {background: url(img/gshow_header.png) no-repeat top center #F77419;}
.orange-selection *::selection {background-color: rgba(247, 116, 25, 0.2);}

.blue-text {color: #00A2E6;}
.blue-bg {background: url(img/porto_header.png) no-repeat top center  #00A2E6;}
.blue-selection *::selection {background-color: rgba(0, 162, 230, 0.2);}

.black-text {color: #333;}
.black-bg {background: url(img/ipikkus_header.png) no-repeat top center #333;}
.black-selection *::selection {background-color: rgba(51, 51, 51, 0.2);}

.purple-text {color: #8c3ff1;}
.purple-a {font-weight: bold; color: #8c3ff1; padding-right: 24px; background: url(img/external.svg) no-repeat center right;}
.purple-a:hover {color: #550AB7;}
.purple-bg {background: url(img/solo_header.png) no-repeat top center #8c3ff1; background-size: cover;}
.purple-selection *::selection {background-color: rgba(140, 63, 241, 0.2);}

.magenta-text {color: #ED0677;}
.magenta-a {font-weight: bold; color:#ED0677;}
.magenta-a:hover {color: #980A4F;}
.magenta-bg {background: url(img/support_header.png) no-repeat top center #ED0677; background-size: cover;}
.magenta-selection *::selection {background-color: rgba(237, 6, 119, 0.2);}

.opacity-25 {opacity: 0.25;}
.opacity-5 {opacity: 0.5;}



/* Structure */
header {font-size: 1rem; margin-bottom: 7rem; padding: 7rem 0; box-sizing: border-box;}
main {background: #FFF;}
section {margin-bottom: 6rem;}
nav {position: relative; width: 100%; padding: 4rem 0; background-color: #F2F2F2;}
footer {width: 100%; background: #f2f2f2; padding-bottom: 5rem ;}



/* Logo */
.logo {position: fixed; display: block; top: 15px; left: 20px; z-index: 99; font-family: "Merriweather", serif; font-weight: bold;}
.logo-w, .logo-ianke {display:block; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; font-size: 1.875rem; color: #333; letter-spacing: -0.125rem; opacity: .5; transition: opacity .3s ease-out, width .3s;}
.logo-ianke {opacity: 0; width: 50px;}
.logo:hover .logo-w {opacity: 0;}
.logo:hover .logo-ianke {opacity: 0.8; width: 200px;}



/* Header */
.project-logo {display: block; margin-bottom: 3rem; color: #FFF; font-size:2em;}
.project-date {font-size: 1rem; letter-spacing: -0.0312rem; margin-bottom: 0; color: #FFF;font-weight: 200;}



/* Footer */
footer a {transition: opacity .3s ease-out; cursor: pointer;}
footer a:hover {opacity: 1;}
.footer-logo {font-family: "Merriweather", serif; font-weight: bold; font-size: 2rem; color: #333; letter-spacing: -0.125rem; opacity: 0.2;}
.footer-icons a {display: block; float: right; width: 40px; height: 40px; margin-left: 6px; opacity: 0.2;}
.footer-icons-mail {background: url(img/mail.png) no-repeat center;}
.footer-icons-linkedin {background: url(img/linkedin.png) no-repeat center;}



/* Gray Box */
.gray-box {background-color: #F2F2F2; border-radius: 5px; padding: 4.5rem 0;}
.gray-box .line-right {border-right:1px solid #D9D9D9;}
.gray-box li:last-child {margin-bottom: 0;}
.gray-box ul {padding-left: 0;}
.gray-box li {list-style: none;}
.gray-box h4 {margin-top: 0;}

.gray-box-small {background-color: #F2F2F2; border-radius: 3px; margin: 2rem auto 3rem; padding: 1.5rem 0; text-align: center;}

.gray-box-full {position: relative; width: 100%; margin: 3.75rem 0 5rem; padding: 4rem 0; background-color: #F2F2F2}



/* Home */
.home-header {margin-bottom: 0; padding: 10rem 0 2rem 0;}
.home-header h2 {font-size: 4.9rem; line-height: 5.2rem; margin-bottom: 0.25em;}
.home-header h3 {color: #999;}

.home-intro {font-weight: 400; font-size: 1.4rem; line-height: 2rem; letter-spacing: -0.03rem; margin-bottom: 2rem; color: #666;}
.home-intro-spacer {margin-bottom: 6rem;}

.home-areas {text-align: center; padding-bottom: 110px; margin-bottom: 6rem; background: url(img/home_cycle.png) no-repeat bottom center;}
.home-areas ul {padding-left: 0;}
.home-areas li {list-style: none; font-weight: lighter; font-size: 1.375rem; line-height: 1.875rem; letter-spacing: -0.0625rem; margin-bottom: 0;}
.home-areas span {display:block; font-family: "Merriweather", serif; font-weight: bold; font-size: 2.4rem; line-height: 2.5rem; letter-spacing: -0.15rem; margin-bottom: 1.75rem; color: #333;}

.home-areas-research, .home-areas-prototype, .home-areas-validation {padding-top: 175px;}
.home-areas-research {background: url(img/home_research.svg) no-repeat top center;}
.home-areas-prototype {background: url(img/home_prototyping.svg) no-repeat top center;}
.home-areas-validation {background: url(img/home_validation.svg) no-repeat top center;}

.home-areas-arrows:before, .home-areas-arrows:after {content: ""; display: block; position: absolute; top: 180px; width: 53px; height: 33px; background: url(img/home_arrow.png) no-repeat center;}
.home-areas-arrows:before {left: 10px;}
.home-areas-arrows:after {right: 18px;}



/* Cases */
.cases-table {display: table; border-collapse: separate; border-spacing: 0 2rem; width: 100%;}
.cases-row {display: table-row;}
.case {position:relative; display: table-cell; box-sizing: border-box; width: 100%; height: 365px; margin-bottom: 2rem; border-radius: 5px; padding: 50px; vertical-align: middle;}
.case:hover {opacity: 0.8;}
.case img {display: block; margin-bottom: 1.5em;} 
.case span {font-family: "Merriweather", serif; font-size: 3.5rem; font-weight:bold; letter-spacing: -0.15rem; line-height: 3.75rem; margin-bottom: 0; color: #FFF;}
.case .project-logo {margin-bottom: 24px;}
.case .sub-title {font-size: 1.75rem; letter-spacing: 0; line-height: 2rem; margin-bottom: 0; margin-top: 1rem; display: block;}


/* Solo */
.myob-logo {display: block; width: 120px;}
.fullwidth-tldr ul {padding-left: 32px;}
.fullwidth-tldr li {list-style: disc; margin-bottom: 8px;}
.discovery {height: 500px; width: auto;}


/* Support */
.support-ul li {margin-bottom: 8px;}
.support-ul li:last-of-type {margin-bottom: 24px;}

/* Gshow */
.gshow-usability {display:flex; width: 100%; justify-content: space-between;}
.gshow-usability img {width: 262px; display: block;}

.quote {padding: 1rem 0 3rem 0;}
.quote-open {background: url(img/quote_open.png) no-repeat top right; opacity: 0.6;}
.quote-content {text-align: center; font-style: italic; font-weight: lighter; font-size: 1.5rem; line-height: 2.2rem; letter-spacing: -0.05rem; color: #333;}
.quote-close {background: url(img/quote_close.png) no-repeat bottom left; opacity: 0.6;}

.gshow-flow03 {text-align: right;}



/* Ipikkus */
.ipikkus-roles ul {padding-left: 0;}
.ipikkus-roles li {list-style: none;}
.ipikkus-roles-title {font-size: 1.6rem; letter-spacing: -0.05rem; font-weight: bold;}



/* Breakpoints */
@media (max-width: 850px) {
	/* Base grid */
	.grid {width: 100%;}
	[class*="grid-"] {flex: 0 0 100%;}


	/* Basic elements */
	h2 {font-size: 4rem; line-height: 4rem;} 
	.wia-black {margin-bottom: 3rem;}


	/* Structure */
	header {padding: 6rem 0;} 
	footer {padding-bottom: 2.5rem;}


	/* Logo */
    .logo {top: 10px; left: 15px;}
	

	/* Footer */
	.footer-text {flex: 0 0 60%; padding-right: 0;}
	.footer-icons {flex: 0 0 40%; padding-left: 0;}
	
	
	/* Gray Box */
	.gray-box-tldr {margin-bottom: 4rem;}
	.gray-box .line-right {border: none;}



	/* Home */
	.home-header {padding: 7rem 0 1rem 0;}
	.home-header h2 {font-size: 4rem; line-height: 4rem; letter-spacing: -0.2rem;}
	.home-header h3 {font-size: 2rem;}
	.home-intro {font-size: 1.4rem; line-height: 2rem; margin-bottom: 2rem;}
	.home-intro-spacer {margin-bottom: 3rem;}
	.home-areas {margin-bottom:0; padding-bottom: 2rem; background: none;}
	.home-areas-research, .home-areas-prototype, .home-areas-validation {margin-bottom: 4rem;}
	.home-areas-arrows:before, .home-areas-arrows:after {display: none;}
	.home-areas-validation-long {width: 190px; margin: 0 auto;}


	/* Cases */
	.case {height:auto; padding:3.2rem; background-size: cover;}
	.case img {width: 40%; max-width: 140px;}
	.case span {font-size: 3rem; line-height: 3.2rem; letter-spacing: -0.15rem;}


	/* Solo */
	.discovery {height: auto; width: 100%;}


	/* Gshow */
	.quote {padding: 1rem 0 2.8rem 0;}
	.quote-content {margin: 1rem 0;}
	.gshow-usability {display: block;}
	.gshow-usability img {width: 100%; margin-bottom: 1rem;}
	.quote-open, .quote-close {height: 60px; background-position: center;}
	.gshow-flow01 {width: 100%; max-width: 812px;}
	.gshow-flow03 {text-align: center;}
	.gshow-ab img {width: 100%; max-width: 315px;}

	
	/* Porto Seguro */
	.porto_flow01 {width: 100%; max-width: 750px;}
	.porto-before-after .grid-6 {flex: 0 0 50%;}
	.porto-before-after img {width: 100%;}
	.porto-fields .grid-6 {text-align: center;}
	.porto-fields img {width: 100%; max-width: 395px;}


	/* Ipikkus */
	.ipikkus-roles {padding: 4rem 0 1rem;}
	.ipikkus-roles .grid-4 {margin-bottom: 3rem;}
	.ipikkus-wire figure {text-align: center;}
	.ipikkus-wire-desk {width: 100%; max-width: 536px;}
	.ipikkus-wire-mobile {width: 100%; max-width: 253px;}
}

@media (max-width: 500px) {
	/* Basic elements */
	h2 {font-size: 3rem; line-height: 3rem;} 


	/* Structure */
	header {padding: 3rem 0;} 
	
	
	/* Structure */
	footer {padding-bottom: 1.5rem;}


	/* Footer */
	.footer-logo {font-size: 1.8rem;}


	/* Home */
	.home-header h2 {font-size: 3.4rem;}
	.home-intro {font-size: 1.2rem; line-height: 2rem;}


	/* Cases */
	.case {height: fit-content; padding:2rem;}
	.case span {font-size: 2.3rem; line-height: 2.5rem; letter-spacing: -0.15rem;}

}