html, head {
	margin:0;
	padding:0;
}	
		
body {
	background-color: #FFF;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.strike, .strikeout {
	text-decoration: line-through;
	color: rgba(0, 0, 0, 0.3);
}

@font-face {
	font-family: 'BM'; 
	src:  url('../type/Basel-Large.woff2') format('woff2'),
	url('../type/Basel-Large.woff') format('woff');
}

@font-face {
    font-family: 'BR'; 
    src:  url('../type/Basel-Large.woff2') format('woff2'),
    url('../type/Basel-Large.woff') format('woff');
}

.clearBoth {
    clear:both;
}

.details {
	position:fixed;
	width:12%;
	min-width:120px;
	max-width:132px;
	float:left;
	bottom:16px;
	left: 16px;
	z-index:10;
	padding:16px 32px 32px 16px;
	border-radius:4px;
	background-color: rgba(255, 255, 255, 0.7);
	border:1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.details .name {
	font-size:36px;
	font-weight:400;
	font-family: 'BM', serif;
	bottom:40px;
}

.details .subname {
	font-size:36px;
	font-family: 'Helvetica', serif;
	margin:16px 0 0 0;
}

.shimmy {
	position:absolute;
	bottom:2vw;
	display: block;
	left: 2vw;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 20px;
    border-radius:6px;  
    max-width:120px;
    background-color:rgba(44,44,44,0.16);
}

.shimmy .name {
	font-size:16px;
	font-weight:400;
	font-family: 'BM', serif;
}

.shimmy .subname {
	font-size:12px;
	font-family: 'BM', serif;
    font-weight: normal;
	margin:16px 0 0 0;
}

.shimmy .subsubname {
    font-size:10px;
    font-family: 'BR', serif;
    font-weight: normal;
    margin:16px 0 0 0;
}

.hotline {
	height:2px;
	margin-top:-22px;
	margin-left:-22px;
	margin-right:-22px;
	border-radius:8px;
}

.i .hotline {
	background-color: rgba(250, 42, 32, 1);
}

.shimmy .logo {
	height:24px;
	width:88px;
	margin: 0 0 16px 0;
	background-position: center left;
	background-size:20px auto;
	background-repeat: no-repeat;
}

.google .logo {
	background-image: url(../img/icon-google.png);	
    background-size:20px auto;	
}

.rylo .logo {
	background-image: url(../img/icon-rylo.svg);
    background-size:auto 12px;
}

.balance .logo {
    background-image: url(../img/icon-balance.png);
    background-size:auto 20px;
}

.ig .logo {
    background-image: url(../img/icon-ig.png);
    background-size:20px auto;	
}

.fb .logo {
    background-image: url(../img/icon-fb.png);
    background-size:20px auto;	
}

.spotify .logo {
    background-image: url(../img/icon-spotify.png);
    background-size:20px auto;	
}



.avatar {
	height:44px;
	width:44px;
	background-color: #ccc;
	border-radius:22px;
	margin: 0 0 16px 0;
	background-image: url(../img/me.jpg);
	background-position: center center;
	background-size:cover;
}

.avatar:hover {
  transition: all .2s ease-in-out;
  transform: scale(1.5,1.5);
}

.wrapper {
	position: relative;
	margin:16px auto;
  display: grid;
	grid-gap:16px;
    grid-template-columns: 
    [col1-start] 20%  
    [col2-start] 20%  
    [col3-start] 20% 
    [col4-start] 20% 
    [col5-start] 20% 
    [col5-end];
    grid-template-rows: 
    [row1-start] auto 
    [row2-start] auto 
    [row3-start] auto 
    [row4-start] auto 
    [row5-start] auto
    [row6-start] auto 
    [row7-start] auto
    [row8-start] auto
    [row9-start] auto 
    [row10-start] auto
    [row11-start] auto
    [row12-start] auto 
    [row13-start] auto
    [row14-start] auto
    [row15-start] auto 
    [row16-start] auto
    [row17-start] auto
    [row18-start] auto
    [row19-start] auto 
    [row20-start] auto
    [row20-end];
    color: #444;
    width:64vw;
    min-width:600px;
    max-width:840px;
    padding-bottom:320px;
    padding-right:64px;
    left:44px;
}

.box {
    background-color: #444;
    color: #fff;
    border-radius: 4px;
    padding: 32px;
    font-size: 150%;
    height:360px;
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.01),
    0 6.7px 5.3px rgba(0, 0, 0, 0.02),
    0 12.5px 10px rgba(0, 0, 0, 0.03),
    0 22.3px 17.9px rgba(0, 0, 0, 0.04),
    0 41.8px 33.4px rgba(0, 0, 0, 0.05),
    0 100px 80px rgba(0, 0, 0, 0.06);
    position: relative;
}

.location {
	font-size:12px;
	font-family: 'BM', serif;
	margin:16px 0 0 0;
	display:block;
	position:absolute;
	bottom:2vw;
	right:16px;
	text-shadow: 1px 1px 25px black;
}

.arrow {
	opacity:0.3;
}



.a {
    grid-column: col1-start / col3-start;
    grid-row: row1-start;
    background-image: url(../img/a.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.b {
    grid-column: col3-start / col5-end;
    grid-row: row1-start;
    background-image: url(../img/b.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.c {
    grid-column: col1-start / col4-start;
    grid-row: row2-start;
    background-image: url(../img/c.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
	}

.d {
    grid-column: col4-start / col-5-end;
    grid-row: row2-start ;
    background-image: url(../img/d.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.e {
    grid-column: col1-start / col5-end ;
    grid-row: row3-start ;
    background-image: url(../img/e.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.f {
    grid-column: col1-start / col3-start;
    grid-row: row4-start ;
    background-image: url(../img/f.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.g {
    grid-column: col3-start / col5-end;
    grid-row: row4-start;
    background-image: url(../img/g.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.h {
    grid-column: col1-start / col4-start;
    grid-row: row5-start;
    background-image: url(../img/h.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
	}

.i {
    grid-column: col4-start / col-5-end;
    grid-row: row5-start ;
    background-image: url(../img/i.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.j {
    grid-column: col1-start / col5-end ;
    grid-row: row6-start;
    margin:0;
    background-image: url(../img/j.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.k {
    grid-column: col1-start / col3-start;
    grid-row: row7-start ;
    background-image: url(../img/k.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.l {
    grid-column: col3-start / col5-end;
    grid-row: row7-start;
    background-image: url(../img/l.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.m {
    grid-column: col1-start / col4-start;
    grid-row: row8-start;
    background-image: url(../img/m.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.n {
    grid-column: col4-start / col-5-end;
    grid-row: row8-start ;
    background-image: url(../img/n.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.o {
    grid-column: col1-start / col5-end ;
    grid-row: row9-start;
    margin:0;
    background-image: url(../img/o.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.p {
    grid-column: col1-start / col3-start;
    grid-row: row10-start ;
    background-image: url(../img/p.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.q {
    grid-column: col3-start / col5-end;
    grid-row: row10-start;
    background-image: url(../img/q.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.r {
    grid-column: col1-start / col4-start;
    grid-row: row11-start;
    background-image: url(../img/r.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.s {
    grid-column: col4-start / col-5-end;
    grid-row: row11-start ;
    background-image: url(../img/s.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.t {
    grid-column: col1-start / col5-end ;
    grid-row: row12-start;
    margin:0;
    background-image: url(../img/t.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.u {
    grid-column: col1-start / col3-start;
    grid-row: row13-start ;
    background-image: url(../img/u.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.v {
    grid-column: col3-start / col5-end;
    grid-row: row13-start;
    background-image: url(../img/v.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.w {
    grid-column: col1-start / col4-start;
    grid-row: row14-start;
    background-image: url(../img/w.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.x {
    grid-column: col4-start / col-5-end;
    grid-row: row14-start ;
    background-image: url(../img/x.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.y {
    grid-column: col1-start / col5-end ;
    grid-row: row15-start;
    margin:0;
    background-image: url(../img/y.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.z {
    grid-column: col1-start / col3-start;
    grid-row: row16-start ;
    background-image: url(../img/z.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.aa {
    grid-column: col3-start / col5-end;
    grid-row: row16-start;
    background-image: url(../img/aa.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.bb {
    grid-column: col1-start / col4-start;
    grid-row: row17-start;
    background-image: url(../img/bb.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.cc {
    grid-column: col4-start / col-5-end;
    grid-row: row17-start ;
    background-image: url(../img/cc.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}



.dd {
    grid-column: col1-start / col5-end ;
    grid-row: row18-start;
    margin:0;
    background-image: url(../img/dd.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}



.ee {
    grid-column: col1-start / col3-start;
    grid-row: row19-start ;
    background-image: url(../img/ee.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.ff {
    grid-column: col3-start / col5-end;
    grid-row: row19-start;
    background-image: url(../img/ff.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.gg {
    grid-column: col1-start / col4-start;
    grid-row: row20-start;
    background-image: url(../img/gg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.hh {
    grid-column: col4-start / col-5-end;
    grid-row: row20-start ;
    background-image: url(../img/hh.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
    margin-right:16px;
}


.evenmore {
    clear:both;
    position: absolute;
    bottom:0px;
    width:100%;
    margin-top:64px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'BM', serif;
    bottom: 40px;
    color:#111;
}

.more {
    float:left;
    width:50%;
    height:240px;
    margin-top:16px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'BM', serif;
}

.more a {
  text-decoration: none;
  color: #00ade0;
}

.more li, .more ul {
    list-style-type: none;
    list-style-position: inside;
    padding:16px 0;
    margin:0;
    font-size:12px;
}

.more li:nth-child(odd) { 
    clear: both;
    border-bottom:1px solid #EFEFEF;
}

.more li:nth-child(even) {
  float:right;
  margin-top:-52px;
  font-family: 'BR', serif;
}

.footeritem {
    float:left;
    width:88px;
    height:88px;
    margin-right:32px;
}

.footeritem a {
    display:block;
    width:100%;
    height:100%;
}

.hamul {
  background-image: url(../img/footer-hamul.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.sohohouse {
    background-image: url(../img/footer-sohohouse.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover; 
}

.square {
  background-image: url(../img/footer-square.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.supersystem {
  background-image: url(../img/footer-supersystem.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.tgd {
  background-image: url(../img/footer-tgd.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 50% auto; 
}

.threads {
  background-image: url(../img/footer-threads.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.fig1 {
  background-image: url(../img/footer-fig1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.nike {
  background-image: url(../img/footer-nike.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.ea {
  background-image: url(../img/footer-ea.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; 
}

.moretitle {
font-size:96px;
font-weight:400;
font-family: 'BM', serif;
bottom:40px;
border-bottom:1px solid #DEDEDE;
display: block;
width:100%;
grid-column: col1-start / col-5-end;
grid-row: row1-start ;
}

.moresubtitle {
font-size:32px;
font-weight:400;
font-family: 'BM', serif;
bottom:40px;
border-bottom:1px solid #DEDEDE;
display: block;
width:100%;
grid-column: col1-start / col-5-end;
grid-row: row2-start ;
}

p {
  grid-column: col1-start / col-5-end;
  margin:0;
}





@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 


.wrapper {
  width:80vw !important;
  left:0 !important;
}

.details {
	position: relative;
    max-width: 100%;
    float: left;
    margin: 120px 40px 0px 40px;
    height: auto;
    width: 83%;
}

.details .name {
  font-size:32px;
}

.details .subname {
  font-size:24px;
  float:left;
  width:33%;
}

.shimmy {
max-width: 100%;
width: 92.5%;
padding: 32px;
left: 0;
bottom: 0;
border-radius: 12px 0 0 12px;
}

.shimmy .logo {
background-size: auto 40px;
background-position: center center;
height: 64px;
width: 64px;
margin: 0 20px 0 0;
float: left;
}

.rylo .logo{
  background-size: 60px auto !important;
}

.balance .logo{
  background-size: 60px auto !important;
}

.shimmy .subname {
font-size: 27px;
float: left;
margin-right: 20px;
margin-top: 12px;
}

.shimmy .subsubname {
  display:none;
}

.more {
  font-size:32px;
}

.avatar {
  width:64px;
  height:64px;
  border-radius: 32px;
}

.footeritem {
	float: left;
    width: 100px;
    height: 100px;
    margin-right: 32px;
    margin-bottom: 32px;
}

.more li, .more ul {
  font-size:30px;
}

.more li:nth-child(even) {
margin-top:-80px;
}

.e, .j, .o, .t, .y, .dd {
  display: none;
}

.f, .g, .k, .l, .v, .u, .z, .aa, .p, .q, .ee, .ff{
  margin-top:-16px;
}

}