.js body{overflow:hidden}
.js body.overflow{overflow:auto}
sup{top:-2em;font-size:.3em}
.header{position:absolute;z-index:1000;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:flex-start;align-items:flex-start;width:100%;padding:2.5em;pointer-events:none}

/* the page (header background) that is being moved up (initial view) */
.page--mover{position:fixed;width:100%;height:100vh;pointer-events:none;/*background:#C00*/}

/* the title of the initial view */
.title-wrap{position:absolute;z-index:101;width:100%;/*margin:10vh 0 0;*/margin:0px; text-align:center;pointer-events:none}
.title{line-height:1;position:relative;text-indent:.2em;text-transform:uppercase;font-style:italic}
.title--main{font-size:5.75em;margin:0 auto;color:#FFF}
.title--sub{font-size:1.15em;font-weight:700;display:block;margin:0;color:#EEE;margin-top:10px}

.title img { width: 100%; max-width: 950px;}

@media screen and (min-width: 100em) {
.title--main { /*font-size: 7vw;*/ }
.title--sub { font-size: 1.35vw; }
}

/* static page with grid */
.page--static{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;-webkit-align-items:center;align-items:center;max-width:1220px;margin:0 auto;padding:2em 0 0;text-align:center}
.page__title{padding:0 2em;font-style:italic;text-transform:uppercase}
.page__title-main{font-size:2em;margin:0 auto;padding:1em 0 0;color:#FFF}
.page__title-sub{font-size:1.05em;margin:.5em 0 4em}

.device{position:fixed;z-index:1000;bottom:0;left:50%;width:45vh;height:45vh;margin:0 0 0 -22.5vh;/*background: url(../img/device.svg) no-repeat 50% 0%;*/background-size:100%}
.device__screen{position:absolute;top:25.5%;left:8.5%;width:83%;height:100%;/*background: url(../img/screen.jpg) no-repeat 50% 0%;*/background-size:100%}

/* Button */
.button{margin:0;padding:0;border:none;background:none}
.button--view{position:fixed;z-index:1000;bottom:1.5em;left:50%;width:3em;height:1.75em;margin:0 0 0 -1.5em;-webkit-animation:pointDown .6s .6s ease-in infinite alternate forwards;animation:pointDown .6s .6s ease-in infinite alternate forwards;fill:#000}

@-webkit-keyframes pointDown {
from{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}


@keyframes pointDown {
from{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
}


.button--view path{-webkit-transition:fill .3s;transition:fill .3s;fill:inherit}
.button--view:hover,.button--view:focus{outline:none;fill:#c00}
.button--load{width:7em;color:#a3b0bd}
.button--load svg{width:2.5em}
.button__text{font-size:.65em;font-weight:700;display:block;margin:.85em 0 0;text-indent:3px;letter-spacing:3px;text-transform:uppercase;color:inherit;-webkit-transition:color .3s;transition:color .3s}
.polaroid__base,.polaroid__loader{-webkit-transition:fill .3s;transition:fill .3s;fill:#FFF}
.button--load:hover,.button--load:focus{color:#03a9f4;outline:none}
.button:hover .polaroid__base,.button:focus .polaroid__base,.button:hover .polaroid__loader,.button:focus .polaroid__loader{fill:#c00}
.polaroid__inner{fill:#c00}
.button--loading .polaroid__loader circle{-webkit-animation:fadeInOut .3s ease-in infinite alternate forwards;animation:fadeInOut .3s ease-in infinite alternate forwards}
.button--loading .polaroid__loader circle:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}
.button--loading .polaroid__loader circle:nth-child(3){-webkit-animation-delay:.2s;animation-delay:.2s}


@-webkit-keyframes fadeInOut {
from{opacity:0}
to{opacity:1}
}


@keyframes fadeInOut {
from{opacity:0}
to{opacity:1}
}


.button--hidden{pointer-events:none;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.grid{position:relative;z-index:100;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-justify-content:center;justify-content:center;max-width:100%;margin:0 auto;padding:0 0 1em;list-style:none}
.grid__item{display:block;-webkit-flex:none;flex:none;width:33.33%;padding:10px;transform:rotate(-2deg)}
.js .grid__item{opacity:0}
.grid__item--hidden{opacity:0}
.grid__link{display:block;padding:13px 13px 0;background:#fff;box-shadow:3px 2px 10px #000}
.grid__img{display:block;width:100%;transform:rotate(2deg)}
.grid__item-title{font-family:"wigwag-bold",sans-serif;line-height:1;position:relative;overflow:hidden;margin:0;padding:1em .5em;text-align:left;white-space:nowrap;text-overflow:ellipsis;color:#000;background:#fff}

/* Loader (styles defined in square-loader.min.css) */
.la-square-loader{position:absolute;top:60%;left:50%;color:#FFF;opacity:0;-webkit-transform:translate3d(-50%,-50%,0) scale3d(1.35,1.35,1);transform:translate3d(-50%,-50%,0) scale3d(1.35,1.35,1)}
.la-square-loader > div{border-radius:2px}
.js .la-square-loader{opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}
.view--loaded .la-square-loader{opacity:0}


/* Visibility/pointer events of items depending on state (loaded) */
.js .grid,.js .device,.js .button--view{opacity:0}
.view--loaded .grid,.view--loaded .device,.view--loaded .button--view{opacity:1}
.view--loaded .button--view{-webkit-transition:opacity .3s;transition:opacity .3s}
.js .page--static{pointer-events:none}
.view--grid .page--static{pointer-events:auto}


/* Media query for smaller screens */
@media screen and (max-width: 56em) {
.header{padding:1em}
.title-wrap{font-size:53%;/*margin:85px 0 0*/margin:0px;}
.page__title-main{font-size:1.3em}
.page__title-sub{margin-bottom:1em}
.grid__item{width:50%;max-width:none}	
}