@font-face {
	font-family:'dml';
	src:	url('dml.eot');
	src:	url('dml.eot?#iefix')		format('embedded-opentype'),
		url('dml.woff')			format('woff'),
		url('dml.ttf')			format('truetype'),
		url('dml.svg#HelveticaNeue-Light')	format('svg');
	font-style: normal;
	font-stretch: normal;
}

html, body    {overflow:hidden;}
body          {font-family:dml;padding:0;margin:0;color:#000;background:#fff}
b,strong      {color:#111;}
a             {text-decoration:none;color:#000;}
h1,h2,h3      {margin:0;text-align:center;font-weight:normal;}
h1            {font-size:40px;line-height:40px;color:#000;}
h2            {font-size:28px;line-height:28px;margin-bottom:5px}
h3            {font-size:16px;color:#fff;line-height:20px;font-weight:normal;}
h4            {margin:0;text-align:center;font-size:11px;color:#CCC;line-height:30px;font-weight:normal;}
h5            {margin:0;text-transform:uppercase;font-style:italic;font-weight:normal}

header a, footer a, a > *, nav a {color:#fff}
section {background:#fff}

input[type="password"] {padding:10px 20px;font-size:20px;font-family:dml;background:rgba(0,0,0,.8);border:1px solid #666;color:#eee}
.error        {padding-top:15px;color:#be3336;text-transform:uppercase;}

.bars         {position:fixed;top:20px;left:20px;width:30px;height:30px;cursor:pointer;opacity:.8;transition:opacity .4s}
.bars:hover   {opacity:1}
.bars line    {stroke:#ccc;stroke-width:7;stroke-linecap:round}

.home .bars   {display:none;}

nav           {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);color:#fff;opacity:1;transition:opacity .4s,height .4s,background .4s;z-index:100;pointer-events:none;opacity:0;}
.home .inner,
nav .inner    {right:auto;}


.info a,
.spotdesc a {border-bottom:1px dotted #000}


.menu nav     {opacity:1;pointer-events:auto}
.menu .bars,
.menu .spots a > div,
.menu .scroll,
.menu header .inner {opacity:0;pointer-events:none;}

main          {position:absolute;top:0;left:0;width:100vw;height:100%;overflow:hidden;}
header        {position:relative;height:100vh;background:#333 no-repeat center / cover;color:#fff;overflow:hidden;}
.video video,
header video  {position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0;transition:opacity 1s;object-fit:cover}
header.playing video {opacity:1;}
header.playing.about > div[data-spot] {background:Transparent!important}

div.video      {position:absolute;top:0;left:0;right:0;bottom:0;background:#000;opacity:0;transition:opacity .4s;}
div.video h2   {position:absolute;right:0;left:0;text-align:left;text-overflow:ellipsis;white-space:nowrap;bottom:45px;color:#fff;font-size:20px}
div.video h2:before {position:absolute;line-height:16px;font-size:16px;left:0;top:-16px;content:"Now Playing";}
div.video .btn {position:absolute;left:50%;bottom:40px;transform:translateX(-50%);-webkit-transform:translateX(-50%);margin:0;}

div.video .controls {position:absolute;left:50px;bottom:50px;right:50px;height:100px;font-size:12px;color:#fff;transition:opacity .4s;}
div.video .pause    {position:absolute;left:0;bottom:0;width:39px;height:39px;border:2px solid #fff;border-radius:25px;display:block;}
div.video  .time    {position:absolute;left:60px;line-height:39px;bottom:0;}
div.video  .duration{position:absolute;right:70px;line-height:39px;bottom:0;}
div.video .progress {left:120px;right:130px;bottom:14px;height:11px;Background:Transparent}
div.video .progress:before {position:absolute;left:0;top:5px;right:0;height:1px;background:#fff;content:""}
div.video .progress > div  {top:3px;bottom:3px;background:#fff}
div.video .close          {transition:opacity .4s;top:50px;right:50px;left:auto;bottom:auto;transform:none;-webkit-stransform:none;padding:7px 14px;min-width:0;}
div.video .volume         {position:absolute;bottom:3px;right:0;width:47px;height:19px;padding:8px;}
div.video .volume span    {display:inline-block;margin:0 1px;border:1px solid #eee;width:5px;height:17px;pointer-events:none;transition:background .4s,border-color .4s;}
div.video .volume span.on {background:#fff;border-color:#fff;}

.mobile div.video .volume   {display:none;}
.mobile div.video .duration {right:0;}
.mobile div.video .progress {right:60px;}

.pause:after                {position: absolute;top: 9px;left: 9px;right: 9px;bottom: 9px;background: url(pause.svg) center / contain no-repeat;content:"";}
.video.paused .pause:after  {background-image: url(play.svg);}

.video video,
.video div.video {opacity:1}


.btn, nav, nav *,
header *:not(input) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.over              {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.25);opacity:1;transition:opacity .4s;font-size:18px;}
.inner             {position:absolute;left:150px;right:150px;max-width:800px;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);transition:opacity .4s;}
.inner .logo       {display:block;font-size:30px;line-height:26px;height:60px;margin-bottom:10px;text-transform:uppercase;}
.inner .logo span  {font-size:18px;line-height:18px;text-transform:none;}
.inner ul          {padding:15px 0;margin:15px 0;border-top:1px solid #fff;border-bottom:1px solid #fff;}
.inner li          {list-style:none;line-height:30px;text-transform:uppercase;font-size:25px}

.over .share       {height:33px;text-align:center;vertical-align:middle;display:inline-block;}
.over .share > a   {display:inline-block;width:33px;height:33px;margin:0 5px;cursor:pointer;opacity:.5;transition:opacity .4s}
.over .share svg   {width:100%;height:100%;}
.over .share path  {fill:white;}
.over .share > a:hover {opacity:1}

.over > div > .share {margin-top:20px;margin-left:20px}

.over > .share     {position:absolute;width:150px;left:50%;bottom:90px;transform:translateX(-50%);-webkit-transform:translateX(-50%);}
.progress          {position:absolute;height:5px;left:0;right:0;bottom:0;background:rgba(200,200,200,.5);opacity:0;transition:opacity 1s;}
.progress > div    {position:absolute;display:block;top:0;left:0;bottom:0;width:0;background:#ccc;pointer-events:none;}
.playing .progress {opacity:1;}

.container       {position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;-webkit-overflow-scrolling:touch;background:#fff}
.scroll          {position:absolute;top:0;right:0;width:15px;z-index:1000;opacity:0.5;transition:opacity .4s;}
.scroll.on,
.scroll:hover    {opacity:1;}
.scroll::after   {position:absolute;top:4px;left:4px;right:4px;bottom:4px;border-radius:10px;background:#ccc;content:""}

.video .scroll   {display:none;}

.playing .over   {background:rgba(0,0,0,.2);}

.inactive .scroll,
.inactive div.video .close,
.inactive div.video .controls,
.inactive header.playing:not(.paused) .over {opacity:0;}
.inactive header.playing.about > *:not(video)   {opacity:0 !important;}

footer        {background:#333;padding:80px 0 50px 0;text-align:center;color:#888}
footer ul         {display:inline;padding:0;margin:0;}
footer li         {display:inline-block;position:relative;list-style:none;padding:0 10px;line-height:25px;}
footer li a       {color:#888;}
footer li:after             {content:"|";position:absolute;left:-5px;top:0;bototm:0;width:10px;text-align:center;}
footer li:first-child:after {display:none;}
footer .spotbox   {padding-top:30px;font-size:13px;opacity:.5;transition:opacity .4s;}
footer .spotbox:hover {opacity:1;}
.slide                {position:absolute;top:0;left:0;width:100%;height:100%;background:no-repeat center / cover;transition:opacity 1.5s;}
.slide:nth-child(n+2) {opacity:0;}


header .pages       {position:absolute;left:0;bottom:20px;list-style:none;width:100%;text-align:center;margin:0;padding:0;}
header .pages li    {display:inline-block;width:14px;height:16px;position:relative;font-size:12px;}
header .pages a     {display:inline-block;margin:3px;width:8px;height:8px;border-radius:8px;border:1px solid #ccc;position:relative;cursor:pointer;}
header .pages .selected a {background:#CCC;}

header .pages div   {position:absolute;left:50%;top:-30px;background:#ccc;padding:5px 10px;line-height:15px;white-space:nowrap;opacity:0;border-radius:3px;transition:opacity .4s;transform:translateX(-50%);-webkit-transform:translateX(-50%);pointer-events:none;color:#111}
header .pages div::after {position:absolute;left:50%;bottom:-10px;border:5px solid Transparent;border-top-color:#ccc;transform:translateX(-5px);-webkit-transform:translateX(-5px);content:""}
header .pages li:hover div {opacity:1;}

header h1    {text-align:left;text-transform:uppercase;color:#fff;font-size:35px;line-height:40px;}
header h2    {text-align:left;text-transform:uppercase;color:#fff;font-size:18px;line-height:22px;}
/*

header.project h1   {position:absolute;right:20px;bottom:88px;color:#fff}
header.project h2   {position:absolute;right:20px;bottom:60px}
header.project h3   {position:absolute;right:20px;bottom:40px;color:#fff}
header.project .btn {position:absolute;left:50%;bottom:40px;transform:translateX(-50%);-webkit-transform:translateX(-50%);margin:0;}
*/

header.project[data-video]::after                      {position:absolute;top:50%;left:50%;width:30vh;height:30vh;opacity:.8;transition:opacity .4s;pointer-events:none;background:url(largeplay.svg) center no-repeat;background-size:contain;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:""}
header.project[data-video].playing:not(.paused)::after {opacity:0;}

.left, .right, .down {position:absolute;width:50px;height:50px;top:50%;opacity:.4;transition:opacity .4s;cursor:pointer;}
.left         {transform:translateY(-50%);-webkit-transform: translateY(-50%);left:40px}
.right        {transform:translateY(-50%) rotate(-180deg);-webkit-transform: translateY(-50%) rotate(-180deg);right:40px}
.down         {transform:translateX(-50%) rotate(-90deg);-webkit-transform: translateX(-50%) rotate(-90deg);left:50%;bottom:20px;top:auto;}

.left:hover, .right:hover, .down:hover {opacity:.8;}
.left svg, .right svg, .down svg     {width:100%;height:100%;}
.left g,   .right g,   .down g       {fill:#fff}

.btn          {display:inline-block;padding:7px 15px;min-width:100px;text-align:center;margin:20px 0;border:1px solid #fff;text-transform:uppercase;font-size:12px;cursor:pointer;color:#fff;transition:background .4s,color .4s;vertical-align:middle}
.btn:hover    {color:#333;background:#fff}
.circle       {display:inline-block;width:100px;height:100px;background:no-repeat center / cover;border-radius:150px;filter:grayscale(100%);-webkit-filter:grayscale(100%);box-shadow:0 0 5px 0 rgba(255,255,255,0.5)}

header .btn   {margin-bottom:0;}

.clients,
.info         {max-width:1000px;padding:120px 60px;margin:0 auto;color:#666;font-size:18px;line-height:30px;}
hr            {display:block;height:0;border:0;border-bottom:1px solid #CCC;margin:20px 0;max-width:60%;margin:30px auto;}

.timeline         {margin:0 auto;color:#666;font-size:18px;line-height:30px;}
.timeline > *       {display:block;position:relative;overflow:hidden;margin-bottom:10px;}
.timeline > *[data-video]        {cursor:pointer;}
/*
.timeline > *[data-video]::after {position:absolute;top:0;left:0;right:0;bottom:0;background:url(play.png) no-repeat center;opacity:.8;transition:opacity .4s;content:""}
*/
.timeline > *[data-video]::after                      {position:absolute;top:50%;left:50%;width:25vw;height:25vw;opacity:.8;transition:opacity .4s;pointer-events:none;background:url(largeplay.svg) center / contain;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);content:""}

.timeline > *:hover::after       {opacity:1}
.timeline > * > img {width:100%;display:block;}
.timeline > * > div {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);}
.timeline .title  {position:absolute;right:20px;bottom:20px;color:#fff;font-size:26px;line-height:26px;}

.spots               {background:#666;}
.spots > a           {position:relative;display:inline-block;width:50%;padding-top:32%;height:0;vertical-align:middle;background:no-repeat center / cover;cursor:pointer;}
.spots > a > div     {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.2);text-transform:uppercase;transition:background .4s,opacity .4s;}
.spots > a > div > div {position:absolute;top:50%;left:5%;right:5%;transform:translateY(-50%);-webkit-transform:translateY(-50%);}
.spots > a:hover > div {background:rgba(0,0,0,.6)}

.spots > a > div > div {position:absolute;text-align:right;right:20px;left:20px;}
.spots > a .client   {bottom:42px;color:#FFF;font-size:26px;line-height:26px;}
.spots > a .title    {bottom:20px;color:#be3336;font-style:italic;font-size:20px;line-height:20px;}
.spots > a .director {bottom:20px;color:#fff;font-size:26px;line-height:26px;}

.quotes              {height:400px;overflow:hidden;position:relative;}
.quotes > div        {position:absolute;top:0;left:0;right:0;bottom:0;opacity:1;transition:opacity 1s;}
.quotes > div:nth-child(n+2) {opacity:0;}
.quotes > div > div  {position:absolute;left:5%;width:90%;top:50%;transform:translateY(-50%);-webkit-transform:translateY(-50%);text-align:center;}

.quotes .quote         {vertical-align:middle;line-height:40px;font-size:30px;}
.quotes .quote:before  {font-size:40px;content:"“";}
.quotes .quote:after   {font-size:40px;content:"”";}

.quotes span         {display:block;padding:20px 0 0 0;font-size:18px;}

.clients > a         {display:inline-block;width:20%;height:0;padding:20% 0 0 0;background:no-repeat center / cover;}
header.features      {background:black;}

.features > a[data-spot]  {position:absolute;top:0;left:0;right:0;bottom:0;background:no-repeat center / cover;opacity:0;transition:opacity .5s;pointer-events:none;cursor:pointer;}
.features video      {position:absolute;top:0;left:0;width:100%;height:100%;opacity:1}
.features h1         {border:0;font-size:50px;line-height:50px;padding:0;margin:0;color:#fff}
.features h2         {border:0;font-size:30px;line-height:40px;padding:0;margin:0;position:relative;display:inline-block;}
.features h2::before,
.features h2::after  {position:absolute;left:-100px;top:50%;width:80px;height:1px;background:#be3336;content:"";}
.features h2::after  {left:auto;right:-100px;}
.features h3         {color:#fff;font-size:18px;line-height:22px;}

.about > div         {position:absolute;top:0;left:0;right:0;bottom:0;background:no-repeat center / cover;opacity:0;transition:opacity .5s;pointer-events:none;cursor:pointer;}

.blog > a            {display:block;position:relative;max-width:600px;margin:0 auto;padding:30px 30px 30px 200px;height:140px;color:#888;border-bottom:1px solid #CCC;overflow:hidden;}
.blog > a h1         {text-align:left;font-size:26px;line-height:30px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blog > a h2         {text-align:left;font-size:20px;line-height:25px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.blog > a .img       {width:140px;height:140px;border-radius:300px;position:absolute;top:30px;left:30px;background:no-repeat center / cover}
.blog > a .intro     {max-height:36px;overflow:hidden;line-height:18px}
.blog > a .btn       {margin-left:0;}
.blog > a:last-child {border-bottom:0;}

.blog.munderbar      > a:not(.munderbar)      {display:none;}
.blog.things-we-like > a:not(.things-we-like) {display:none;}

.spots.project> a .client    {bottom:56px;font-size:30px;line-height:30px;}
.spots.project > a .title    {bottom:36px;}
.spots.project > a .director {font-size:14px;line-height:14px;}

.locations section {border-bottom:1px solid #CCC;text-align:center;padding:50px 0;line-height:23px}
.locations section:last-child {border:0}
.locations h2      {font-size:40px;line-height:40px;color:#000;font-weight:normal;font-style:normal;margin-bottom:10px;}
.locations ul      {list-style:none;display:inline;padding:0;margin:0;}
.locations li      {display:inline-block;height:140px;width:140px;margin:20px 0 0 0;overflow:hidden;}
.locations li:first-child {margin-left:0;}
.locations li .img {position:absolute;top:0;left:50%;width:100px;height:100px;background:no-repeat center / cover;border-radius:200px;transform:translateX(-50%);-webkit-transform:translateX(-50%)}
.locations li a    {display:inline-block;padding-top:110px;color:#888;font-size:13px;position:relative;min-width:120px;line-height:16px;min-height:32px;white-space:nowrap}

.social a         {display:inline-block;width:30px;height:30px;margin:20px 5px;background:no-repeat center / cover;cursor:pointer;}
.social .facebook {background-image:url(facebook.png)}
.social .twitter  {background-image:url(twitter.png)}
.social .vimeo    {background-image:url(vimeo.png)}
.social .newsletter{background-image:url(mailinglist.png)}

.spotdesc {padding:40px 60px;text-align:center;max-width:1000px;margin:0 auto;}

/*
.home .spots > a    {width:50%;padding-top:32%;}


@media screen and (max-width:1025px) {
  .spots > a    {width:50%;padding-top:32%;}
}
*/

@media screen and (max-width:1025px) {
  header.project[data-video]::after {left:150px;bottom:50px;top:auto;width:50px;height:50px;transform:none;-webkit-transform:none;}
  header .pages {display:none;}
}

@media screen and (max-width:700px) {
  .spots > a    {width:100%;padding-top:56%;}

  .down         {display:none;}

  .btn:not(.playbutton),
  header .circle,
  header .over svg    {display:none;}
  .over > div:not(.share) {min-width:90%;}

  .clients, .spotdesc,
  .info  {padding:70px 25px;line-height:25px;}

  h1 {font-size:24px !important;line-height:25px !important;margin-bottom:5px;}
  h2 {font-size:18px !important;}

  .spotdesc     {text-align:left;}

  .quotes                {height:220px}
  .quotes .quote         {line-height:20px;font-size:16px;}
  .quotes .quote:before  {font-size:20px;}
  .quotes .quote:after   {font-size:20px;}
  .quotes span           {font-size:10px;}

  .timeline .title       {line-height:15px;font-size:12px;}
  .timeline > *          {margin:0;}

  div.video .btn {display:block}

  .blog > a h1     {font-size:18px;line-height:22x;}
  .blog > a h2     {font-size:14px;line-height:16px;}
  .blog > a .btn   {display:inline-block;}

  .features h2::before,
  .features h2::after,
  .about .left,
  .about .right {display:none;}

  .inner {left:50px;right:50px !important;min-width:auto !important}

  .home .inner ul a,
  nav a         {font-size:15px;color:#fff}

  .home .inner li , 
  nav .inner li {font-size:15px;line-height:20px;}

  .home .inner h5,
  nav h5         {font-size:10px;}

  .info, .timeline,
  .over            {font-size:14px;line-height:22px;}
}

@media screen and (max-width:500px) {
  .left, .right {display:none;}

  .blog > a        {padding:200px 20px 20px 20px;height:auto;}
  .blog > a .img   {left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%)}
  .blog > a .btn   {display:none;}

  footer li         {font-size:13px;}

  .inner           {left:20px;right:20px !important;min-width:auto !important}
  
  div.video .controls {left:20px;bottom:20px;right:20px;height:70px;}
  div.video .close    {right:20px;top:20px;}

  video {object-fit:contain !important}
  header.project[data-video]::after {left:20px;b ottom:20px;}
}