html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {   margin:0;   padding:0;   border:0;   outline:0;   font-size:100%;   vertical-align:baseline;   background:transparent; } body { line-height: 1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {  display:block; } nav ul, footer ul {   list-style: none; } a {   margin:0;   padding:0;   font-size:100%;   vertical-align:baseline;   background:transparent; outline: none; } input, select {   vertical-align: middle; } table, tbody, tfoot, thead, tr, th, td {  vertical-align: top; } table { border-spacing: 0; }  html {  box-sizing: border-box; } *, *:before, *:after {  box-sizing: inherit; }  .clearfix:before, .clearfix:after {   content: "";   display: table; } .clearfix:after {   clear: both; } .clr { clear: both; }  .hidden { display: none; } .invisible { opacity: 0; } .alignright { text-align: right !important; } .floatright { float: right !important; } .fullwidth { width: 100%; } .nowrap { white-space: nowrap; } .clickable { cursor: pointer; } a { outline: none; text-decoration: none; color: #000; } img { display: block; border: 0; }   html, body{  min-height: 100%;  height: 100%; } body { background: #fff url(../_img/BG_black.png) center top; color: #000; font: 300 14px/17px effra, sans-serif; line-height: 1.2; } #container { max-width: 980px; width: 92%; margin: 0 auto; } #content { padding-top: 20px; } #content a:hover { text-decoration: underline; } h2.block { background: #231f20; font-size: 38px; line-height: 38px; padding-left: 22px; padding-top: 13px; padding-bottom: 13px; color: #fff; font-weight: 700; } h2.block--white { background: #fff; color: #231f20; } h2.expander a { display: block; color: #fff; background-image: url(../_img/plus_pink.png); background-repeat: no-repeat; background-position: right 20px center; text-decoration: none !important; padding-right: 50px; } h2.expander a.opened { background-image: url(../_img/minus_pink.png); } .grid_holder { display: flex; flex-wrap: nowrap; justify-content: space-between; } .grid_holder .grid1 { width: 25%; margin-left: 20px; } .grid_holder .grid3 { width: 75%; } .grid_holder .grid4 { width: 100%; } .mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; } .mb50 { margin-bottom: 50px; } .mb60 { margin-bottom: 60px; }  img.fullwidth { max-width: 100%; height: auto; }  .grid_holder.work_teaser, .grid_holder.testimonials { margin-top: 20px; } .grid_holder.work_teaser .grid2, .grid_holder.testimonials .grid2 { width: 50%; } .grid_holder.testimonials .grid2 { background: #fff;  padding: 20px; } .grid_holder.testimonials .grid2:first-of-type { margin-right: 10px; } .grid_holder.testimonials .grid2:last-of-type { margin-left: 10px; }  .grid_holder.work_teaser .grid2.work_teaser_image { margin-right: 10px; margin-left: 0; } .grid_holder.work_teaser .grid2.work_teaser_image img { max-width: 100%; height: auto; display: block; } .grid_holder.work_teaser .grid2.work_teaser_text { background: #fff;  margin-left: 10px; padding: 20px; font-weight: 400; color: #818084; }  .grid_holder.work_teaser--image_right { flex-direction: row-reverse; } .grid_holder.work_teaser--image_right .grid2.work_teaser_text { margin-left: 0; margin-right: 10px; } .grid_holder.work_teaser--image_right .grid2.work_teaser_image { margin-right: 0; margin-left: 10px; }  #content .grid_holder.work_teaser .grid2.work_teaser_text:hover { text-decoration: none; } .grid_holder.work_teaser p.quote { font-size: 30px; text-indent: -10px; line-height: 1.1; padding-bottom: 20px; color: #818084; font-weight: 400; transition: color 0.2s ease-out; } #content .grid_holder.work_teaser .grid2.work_teaser_text:hover p.quote { color: #222; } .grid_holder.work_teaser p.person { font-size: 20px; padding-bottom: 20px; } .grid_holder.work_teaser p.person strong { font-weight: 400; color: #000; } .grid_holder.work_teaser p.action { font-size: 24px; color: #ff31af; font-weight: 700; }  .testimonials .quote { font-size: 19px; text-indent: -6px;  margin-bottom: 10px; } .testimonials .breaker { border-top: 1px solid #d9dadb; width: 33%; margin-bottom: 10px; display: block; } .testimonials .person { display: flex; } .testimonials .person .photo { width: 64px; height: 64px; margin-right: 15px; } .testimonials .person .photo img { border-radius: 64px; } .testimonials .person .text { font-size: 17px; } .testimonials .person .text em { font-style: normal; color: #777; }   @media (max-width: 1100px) { .grid_holder.work_teaser p.quote {  font-size: 2.65vw;  padding-bottom: 1vw; } .grid_holder.work_teaser p.person {  font-size: 2vw;  padding-bottom: 1vw; } .grid_holder.work_teaser p.action {  font-size: 2.4vw; }   } @media (max-width: 540px) { .mb20 {  margin-bottom: 20px;  } .mb30 {  margin-bottom: 15px;  } .mb60 {  margin-bottom: 30px;  }  .testimonials {  display: block;  }  .grid_holder.work_teaser p.quote {  font-size: 20px;  padding-bottom: 16px; } .grid_holder.work_teaser p.person {  font-size: 16px;  padding-bottom: 16px; }  .grid_holder.work_teaser p.action {  font-size: 18px; } .grid_holder.work_teaser .grid2, .grid_holder.testimonials .grid2 {  width: 100%;  display: block;  margin-left: 0; } .grid_holder.testimonials .grid2:first-of-type, .grid_holder.testimonials .grid2:last-of-type, .grid_holder.work_teaser .grid2.work_teaser_text, .grid_holder.testimonials .grid2 {  margin-left: 0;  margin-right: 0; } .grid_holder.testimonials .grid2:last-of-type {  margin-top: 20px;  }  }  @media (max-width: 440px) { h2.block {  font-size: 30px;  line-height: 32px;  padding-top: 12px;  padding-bottom: 12px; } } @media (max-width: 380px) { h2.block {  font-size: 27px;  line-height: 32px;  padding-top: 10px;  padding-bottom: 10px; } }header { height: 195px; border-bottom: 4px solid #000; margin-bottom: 18px; position: relative; } header h1 a { display: block; background: url(../_img/PIN_logo.png) no-repeat; background: url(../_img/PIN_logo-transparent_BG.png) no-repeat; background-position: left bottom; height: 140px; width: 100px; text-indent: -4500px; background-size: 100px 100px; } nav#globalnav { position: absolute; right: 0; top: 103px; font-size: 16px; line-height: 17px; } #globalnav li { display: inline-block; } #globalnav li a { height: 17px; font-weight: 700; display: block; transition: opacity 0.2s ease-in-out; padding: 0 10px; opacity: 0.4; } #globalnav li a:hover { opacity: 1; } #why #gn_why a, #how #gn_how a, #what #gn_what a, .projects #gn_work a, #about #gn_about a, .news #gn_blog a, #contact #gn_contact a { opacity: 1; } #open_nav, #close_nav { display: none; }  @media (max-width: 740px) { nav#globalnav {  top: 150px; }  }  @media (max-width: 540px) { #open_nav {  position: absolute;  right: 0;  top: 76px;  display: block;  width: 42px;  height: 42px;  background-image:url(../_img/mob_burger_lines_black.png);  background-repeat: no-repeat;  background-size: 32px 28px;  cursor: pointer; }   #close_nav {  display: block;  color: #fff;  position: absolute;  top: 20px;  right: 20px;  font-size: 60px;  cursor: pointer; }   nav#globalnav {  height: 0;  width: 0;  position: fixed;  z-index: 2;  left: 50%;  top: 50%;  background-color: rgba(0,0,0, 0.9);  overflow-x: hidden;  transition: 0.3s;  opacity: 0; } nav#globalnav.mob_open {  height: 100%;  width: 100%;  left: 0;  top: 0;  opacity: 1; }   nav#globalnav ul {  display: block;  position: absolute;  top: 50%;  width: 100%;  text-align: center;  transform: translateY(-50%); }  nav#globalnav ul li {  display: block;  text-align: center; }  #globalnav ul li a {  color: #fff;  display: inline;  width: 100%;  text-align: center;  height: auto;  font-size: 40px;  line-height: 60px; } }footer { clear: both; margin-top: 17px; border-top: 1px solid #777877; height: 52px; } footer ul li, footer p { line-height: 32px; font-weight: 300; font-size: 15px; color: #000; padding: 0; } footer ul { float: right; padding: 0; } footer p a:hover { text-decoration: underline; }