:root {
	--width-burger: 4rem;
}


* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; position:relative; }
html.modal_open body { position:relative; left:-3px; }
body { background:#fff; font-size:62.5%; }
body * { font-family:"Heebo", sans-serif; font-size:1.5rem; line-height:1.25; }
strong { font-size:inherit; }
.cf:after, .w:after {content:""; display:table; clear:both;}
#screen { display:none; }
.nosel { -webkit-tap-highlight-color:transparent !important; }

body { scrollbar-width:thin; scrollbar-color:#888 #eee; }
body::-webkit-scrollbar { position:relative; left:-3px; width:7px; }
body::-webkit-scrollbar-track { background:#eee; }
body::-webkit-scrollbar-thumb { background-color:#888; border-radius:20px; border:1px solid #eee; }

h1 { font-weight:600; font-size:1.8rem; margin-bottom:4rem; position:relative; }
h1 span { display:inline-block; font-size:1.5rem; top:-0.3rem; position:relative; }
h2 { font-weight:600; font-size:2.6rem; margin-bottom:4rem; }
h3 { font-weight:400; font-size:1.4rem; margin-bottom:6rem; line-height:1.45; }
h3.hunch { margin-bottom:3rem; }
ul, p { font-size:1.5rem; font-weight:300; line-height:1.6; margin-bottom:2rem; }
p.focus { font-size:1.8rem; font-weight:200; }
p.tall { margin-bottom:6rem; }

ul.list { padding-left:4rem; list-style-type:none; position:relative; }
ul.list:before { content:" "; display:block; position:absolute; height:1rem; top:1rem; left:0rem; border-left:1px solid #000; }
ul.list li { position:relative; margin-bottom:1rem; }
ul.list li:before { content:" "; display:block; position:relative; width:1rem; top:1rem; left:-4rem; border-top:1px solid #000; }

div.squares { position:relative; display:flex; align-items:center; }
div.squares:before, div.squares:after { content:" "; position:absolute; display:block; width:4rem; height:4rem; border:1px solid #000; }
div.squares:after { border-width:1px 1px 0 0; top:0; right:0; }
div.squares:before { border-width:0 0 1px 1px; bottom:0; left:0; }

div.c { width:100%; padding:0 3rem; margin:0 auto; }

header { padding:2rem 0; height:70rem; background:url(./../images/temple.png) bottom right no-repeat, linear-gradient(0deg, rgba(202,223,226,1) 0%, rgba(195,223,227,1) 35%, rgba(142,227,237,1) 100%); }
header nav { margin-bottom:10rem; }
header nav menu { width:100%; float:right; text-align:right; }
header nav menu a:link, header nav menu a:visited, header nav menu a:hover, header nav menu a:active { color:#162b30; font-size:1.3rem; font-weight:700; margin-left:4rem; text-transform:uppercase; text-decoration:none; }
header nav menu a.ext { margin-left:10rem; position:relative; font-weight:300; }
header nav menu a.ext:after { content:">"; font-size:1rem; margin-left:0.5rem; position:relative; top:-1px; }
header p.focus { font-size:1.7rem; font-weight:300; }

header #burger { outline:none; float:right; right:-0.9rem; width:var(--width-burger); height:calc(var(--width-burger) / 1.33); position:relative; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; transition:.25s ease-in-out; cursor:pointer; transform:scale(0.66); }
header #burger span { display:block; position:absolute; height:calc(var(--width-burger) / 7.5); width:100%; background:#000; border-radius:2px; opacity:1; left:0; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); -webkit-transition:.2s ease-in-out; -moz-transition:.2s ease-in-out; -o-transition:.2s ease-in-out; transition:.2s ease-in-out; }
header #burger span:nth-child(1) { top:0; }
header #burger span:nth-child(2), #burger span:nth-child(3) { top:calc(var(--width-burger) / 3.33); } /* 18px */
header #burger span:nth-child(4) { top:calc(calc(var(--width-burger) / 3.33) * 2); }
html.subnav_open header #burger span { height:6px; }
html.subnav_open header #burger span:nth-child(1) { top:calc(var(--width-burger) / 3.33); width:0%; left:50%; }
html.subnav_open header #burger span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
html.subnav_open header #burger span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
html.subnav_open header #burger span:nth-child(4) { top:calc(var(--width-burger) / 3.33); width:0%; left:50%; }

main section { display:flex; align-items:center; margin:0; padding:12rem 0; }
main section.about { background:#f9f9f9; }

main section.dragon { height:45rem; background:#000 url(./../images/dragon.png) center right -30rem no-repeat; }
main section.dragon p { color:#fff; }
main section.services { background:#fff; }
main section.services ul:before { height:13.5rem; }
main section.scenarios { height:50rem; background:#000 url(./../images/beijing.png) top left no-repeat; background-size:cover; }
main section.scenarios h2, main section.scenarios p { color:#fff; text-align:center; }
main section.scenarios p { font-size:2.4rem; }
main section.scenarios .splide__track { margin-bottom:8rem !important; }
main section.scenarios .splide__pagination { color:#fea; transform:translateX(-50%) translateY(10rem); }

main section.team .col { margin-bottom:4rem; height:50rem; }

main section.team .col a.expand { display:block; -webkit-tap-highlight-color:transparent; width:100%; padding:1rem; text-align:center; margin-bottom:1rem; border:1px solid #ccc; text-decoration:none; color:#999; font-size:1.2rem; font-weight:300; border-color:#000 #0000 #0000 #0000; }
main section.team .col a.expand:hover { color:#888; }
main section.team .col a.expand:before { content:"+"; text-align:center; width:2rem; margin-right:1rem; }
main section.team .col a.expand.active { color:#000; border-color:#0000 #0000 #000 #0000;  }
main section.team .col a.expand.active:before { content:"-"; }
main section.team .col p.bio { position:relative; width:102%; text-align:justify; }

div.biography div.img { text-align:center; margin-top:1.5rem; margin-bottom:2rem; }
div.biography div.img img { border-radius:50%; }
div.biography p { font-size:1.25rem; }
div.biography p.name { width:100%; font-size:1.4rem; font-weight:600; margin-bottom:0; }
div.biography p.title { width:40%; float:left }
div.biography p.contact { width:50%; float:right; text-align:right; }
div.biography p.bio { display:none; }
div.biography a.close { display:none; color:#ccc; text-decoration:none; font-weight:300; margin:3rem 0 1rem 0; }

.jquery-modal > div.biography p.bio { display:block; }
.jquery-modal > div.biography a.close { display:block; }
.jquery-modal > div.biography a.expand { display:none; }


footer { height:67rem; background:url(./../images/stockholm.png) top center no-repeat; background-size:cover; position:relative; }
footer img { width:12rem; position:absolute; bottom:2rem; right:2rem; }




/*
	----------------------------------------------
	R E S P O N S I B L Y   R E S P O N S I V E  ?
	----------------------------------------------
*/


@media only screen and (max-width:767px)
{
	/*	Misc */
	#screen { height:10px; }

	h2 { font-weight:600; font-size:2.6rem; margin-bottom:2rem; }
	h3 { font-size:1.8rem; margin-bottom:2rem; }

	ul, p { font-size:1.5rem; }
	p.focus { font-size:1.6rem; }
	p.tall { margin-bottom:4rem; }

	div.cols.three > div.col { width:100%; }
	div.cols.four > div.col { width:100%; }
	div.cols.five > div.col { width:100%; }
	div.cols.six > div.col { width:100%; }

	header { background-size:80%; }
	header nav { margin-bottom:5rem; }
	header h1 { margin-bottom:2rem; }
	header div.cols.four > div.col { width:100%; }
	header p.focus { font-size:1.5rem; font-weight:300; }

	main section { padding:6rem 0; }

	main section.about div.cols.four > div.col.squares { width:100%; padding:4rem 0; }
	main section.about div.cols.four > div.col.squares.center { margin-top:4rem; }
	main section.about div.cols.four > div.col.squares.center p { width:75%; margin:0 auto; }

	main section.dragon { height:auto; background:#000 url(./../images/dragon.png) center right -65rem no-repeat; }
	main section.dragon p { width:50%; font-size:1.6rem; color:#fff; }

	main section.services ul:before { height:calc(100% - 3.6rem); }

	main section.scenarios { height:auto; background:#000 url(./../images/beijing.png) top left no-repeat; background-size:cover; }
	main section.scenarios p { font-size:1.7rem; }

	main section.team .col { margin-bottom:6rem; height:auto; }
	main section.team .col p.name { font-size:1.6rem; }

	main section.team .col p.bio { width:100%; font-size:1.4rem; }

	footer { height:50rem; }
}

@media only screen and (max-width:320px)
{
	main section.services ul:before { height:calc(100% - 5.4rem); }

	footer { height:50rem; }
}

@media only screen and (max-width:1023px)
{
	header #burger { display:block; }
	header #overlay { max-height:none; position:fixed; transition:0.3s; z-index:9999; opacity:0; width:100%; height:calc(100% + 3rem); left:200vw; top:-3rem; background:rgba(255,255,255,0.9); overflow:hidden; display:flex; align-items:center; justify-content:center; }
	header #overlay menu { position:relative; }
	header #overlay menu a { display:block; color:#444; width:100%; font-size:3rem; text-align:center; text-decoration:none; font-weight:300; position:relative; opacity:0; transition:0.6s; margin:0 0 3rem 0; }
	header #overlay menu a.active { color:var(--color-logo); }
	header #overlay menu a:hover { color:#000; }
	header #overlay menu a.ext { margin-top:10rem; font-size:1.4rem !important; }
	html.subnav_open header #overlay { opacity:1; left:0; }
	html.subnav_open header #overlay #burger { display:block; position:absolute; top:4.8rem; right:2.1rem; }
	html.subnav_open header #overlay menu a { opacity:1; }
}

@media only screen and (min-width:768px) and (max-width:1280px)
{
	/*	Misc */
	#screen { height:30px; }

	h1 { font-size:2.8rem; margin-bottom:4rem; }
	h1 span { font-size:2.3rem; top:-0.3rem; }
	h2 { font-size:2.8rem; margin-bottom:3rem; }
	h3 { font-size:2.2rem; margin-bottom:3rem; }

	div.cols.three > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.three > div.col:nth-child(3n) { margin-right:0; }
	div.cols.four > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.four > div.col:nth-child(3n) { margin-right:0; }
	div.cols.five > div.col { width:calc((100% - 6rem) / 2); float:left; margin-right:6rem; }
	div.cols.five > div.col:nth-child(2n) { margin-right:0; }
	div.cols.six > div.col { width:calc((100% - 6rem) / 2); float:left; margin-right:6rem; }
	div.cols.six > div.col:nth-child(2n) { margin-right:0; }

	header { background-size:50%; height:60rem; }
	header p.focus { font-size:1.5rem; font-weight:300; }

	main section { padding:6rem 0; }
	main section.about div.cols.four > div.col:nth-child(1) { width:100%; float:left; margin-right:0; margin-bottom:2rem; }
	main section.about div.cols.four > div.col:nth-child(2) { width:calc((100% - 12rem) / 2); float:left; margin-right:6rem; }
	main section.about div.cols.four > div.col:nth-child(3) { width:calc((100% - 12rem) / 2); float:left; margin-right:0; }

	main section.about div.cols.four > div.col.squares { width:100%; margin-top:3rem; padding:4rem 0; }
	main section.about div.cols.four > div.col.squares.center p { width:24rem; margin:0 auto; }

	main section.dragon { height:auto; background:#000 url(./../images/dragon.png) center right -30rem no-repeat; background-size:75%; }
	main section.dragon p { width:48%; font-size:1.6rem; color:#fff; }

	main section.services div.cols.three > div.col { width:calc((100% - 6rem) / 2); float:left; margin-right:6rem; }
	main section.services div.cols.three > div.col:nth-child(3n) { margin-right:0; }

	main section.services div.cols.three > div.col.first { width:100%; float:left; margin-right:0; padding-bottom:0rem; border-bottom:1px dashed #eee; margin-bottom:3rem; }
	main section.services div.cols.three > div.col.first p { width:calc(50% - 3rem); float:left; }
	main section.services div.cols.three > div.col.first ul { width:calc(50% - 3rem); float:right; }
	main section.services div.cols.three > div.col.first ul li { font-size:1.3rem; }

	main section.services ul:before { height:calc(100% - 4.2rem); }

	main section.scenarios p { font-size:1.7rem; }

	main section.team .col { margin-bottom:6rem; height:32rem; }

	footer { height:50rem; }
}

@media only screen and (min-width:1024px)
{
	/*	Misc */
	#screen { height:40px; }
	#burger { display:none; }
	header nav menu { position:relative; width:76rem; top:-2.3rem !important; }
	main section.dragon p { width:40%; font-size:1.6rem; color:#fff; }
}


@media only screen and (min-width:1281px)
{
	/*	Misc */
	#screen { height:50px; }

	h1 { font-weight:600; font-size:2.8rem; margin-bottom:4rem; position:relative; }
	h1 span { display:inline-block; font-size:2.5rem; top:-0.3rem; position:relative; }
	h2 { font-weight:600; font-size:3.6rem; margin-bottom:4rem; }
	h3 { font-weight:400; font-size:2.4rem; margin-bottom:6rem; line-height:1.45; }
	h3.hunch { margin-bottom:3rem; }
	ul, p { font-size:1.5rem; font-weight:300; line-height:1.6; margin-bottom:2rem; }
	p.focus { font-size:1.8rem; font-weight:200; }
	p.tall { margin-bottom:6rem; }

	ul.list { padding-left:4rem; list-style-type:none; position:relative; }
	ul.list:before { content:" "; display:block; position:absolute; height:1rem; top:1rem; left:0rem; border-left:1px solid #000; }
	ul.list li { position:relative; margin-bottom:1rem; }
	ul.list li:before { content:" "; display:block; position:relative; width:1rem; top:1rem; left:-4rem; border-top:1px solid #000; }

	div.cols {}
	div.cols.three > div.col { width:calc((100% - 12rem) / 3); float:left; margin-right:6rem; }
	div.cols.three > div.col:nth-child(3n) { margin-right:0; }
	div.cols.four > div.col { width:calc((100% - 18rem) / 4); float:left; margin-right:6rem; }
	div.cols.four > div.col:nth-child(4n) { margin-right:0; }
	div.cols.five > div.col { width:calc((100% - 24rem) / 5); float:left; margin-right:6rem; }
	div.cols.five > div.col:nth-child(5n) { margin-right:0; }
	div.cols.six > div.col { width:calc((100% - 30rem) / 6); float:left; margin-right:6rem; }
	div.cols.six > div.col:nth-child(6n) { margin-right:0; }

	div.squares { position:relative; display:flex; align-items:center; }
	div.squares:before, div.squares:after { content:" "; position:absolute; display:block; width:4rem; height:4rem; border:1px solid #000; }
	div.squares:after { border-width:1px 1px 0 0; top:0; right:0; }
	div.squares:before { border-width:0 0 1px 1px; bottom:0; left:0; }

	div.c { width:144rem; padding:0 6rem; margin:0 auto; }

	header { padding:4rem 0; height:60rem; background:url(./../images/temple.png) bottom right no-repeat, linear-gradient(0deg, rgba(202,223,226,1) 0%, rgba(195,223,227,1) 35%, rgba(142,227,237,1) 100%); }
	header nav { margin-bottom:12rem; }
	header nav menu { width:80rem; float:right; text-align:right; }
	header nav menu a:link, header nav menu a:visited, header nav menu a:hover, header nav menu a:active { color:#162b30; font-size:1.3rem; font-weight:700; margin-left:4rem; text-transform:uppercase; text-decoration:none; }
	header nav menu a.ext { margin-left:12rem; position:relative; font-weight:300; }
	header nav menu a.ext:after { content:">"; font-size:1rem; margin-left:0.5rem; position:relative; top:-1px; }
	header p.focus { font-size:1.7rem; font-weight:300; }

	main section { display:flex; align-items:center; margin:0; padding:12rem 0; }
	main section.about { background:#f9f9f9; }
	main section.about div.cols.four > div.col.squares { width:calc((100% - 30rem) / 4); float:right; padding:8rem 0; }
	main section.about div.cols.four > div.col.squares.center p { width:23rem; margin:0 auto; display:block; }

	main section.dragon { height:45rem; background:#000 url(./../images/dragon.png) center right 40rem no-repeat; }
	main section.dragon p { width:100%; color:#fff; }
	main section.services { background:#fff; }
	main section.services ul:before { height:13.5rem; }
	main section.scenarios { height:50rem; background:#000 url(./../images/beijing.png) top left no-repeat; background-size:cover; }
	main section.scenarios h2, main section.scenarios p { color:#fff; text-align:center; }
	main section.scenarios p { font-size:2.4rem; }
	main section.scenarios .splide__track { margin-bottom:8rem !important; }
	main section.scenarios .splide__pagination { color:#fea; transform:translateX(-50%) translateY(10rem); }

	main section.team .col { margin-bottom:4rem; height:32rem; }

	footer { height:67rem; background:url(./../images/stockholm.png) top center no-repeat; background-size:cover; position:relative; }
	footer img { width:12rem; position:absolute; bottom:2rem; right:2rem; }
}

@media only screen and (min-width:1440px)
{
	/*	Misc */
	#screen { height:40px; }

	main section.dragon { background-position:center right -10rem; }
	main section.dragon p { width:50%; font-size:1.6rem; color:#fff; }
}


@media only screen and (min-width:1681px)
{
	/*	Misc */
	#screen { height:60px; }
	main section.dragon { background-position:center right 10rem; }
	main section.dragon p { width:100%; font-size:2rem; color:#fff; }
}}

@media only screen and (min-width:1682px)
{
	main section.dragon { background-position:center right 20rem; }
}