@charset "UTF-8";






/*//// FONTS ///////////////*/
@font-face {
	font-family: 'mono821';
	src: url("fonts/Monospace821BT-Roman.ttf") format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'mono821';
	src: url("fonts/Monospace821BT-Italic.ttf") format('truetype');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'mono821';
	src: url("fonts/Monospace821BT-Bold.ttf") format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'mono821';
	src: url("fonts/Monospace821BT-BoldItalic.ttf") format('truetype');
	font-weight: bold;
	font-style: italic;
}

/* MAIN TEXT STYLES */

body {
	font-family: mono821;
	background-color: #FFFFFF;
	padding: 0;
	margin: 0;
	font-weight: normal;
overscroll-behavior: none;
}

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

p{
	font-size: 1.5vw;
	line-height: 1.5em;
	margin-block-start: 0;
	margin-block-end: 0;
	text-decoration-color: grey;
text-underline-position: under;
}
.navstrip p{
	line-height:5vw;
}

a{
	color: inherit;
	text-decoration: none;
	border: 0;
	outline: 0;
}
p a:hover{
	text-decoration: underline;
	text-decoration-color: grey;
text-underline-position: under;
	cursor:pointer;	
}
h1,h2,h3,h4,h5{
	font-weight: bold;
	line-height: 1.1em;
	margin-block-start: 0;
	margin-block-end: 0
}
h1{
	font-size: 2.25vw
}

#index h1{
	font-size: 6vw;
	text-transform: lowercase;
}

#slider{
	color:white !important;
}

h2{
	font-size: 4.5vw;
	text-transform: lowercase;
}

h3{
	font-size: 6vw;
	text-transform: lowercase;
}

h4{font-size: 7vw}

h5{
font-size: 2.25vw
}

p.quote{
	font-size: 2.25vw;
	font-weight: bold;
	margin: 10vw 0;
}
p.qright{
	margin-left: 23.1vw
}
p.qleft{
	margin-right: 23.1vw
}
p.quote span{
	font-weight:normal;
	font-size: 1.5vw;
	margin-top: .5vw;
}
a.rightbutton{
	float:right;
}
img{
	height: auto;
}

/* DIVS */
/* INDEX */
img#cnicon{float:right;width:5vw;height:5vw;}

div.navstrip{
width:100%; height:5vw;
}

.swiper-container {
	width:100%;
	margin-top:15vw;
	height:calc(100vh - 15vw);
	max-height: 100vw;
	overflow:hidden;
	position:relative;
	list-style: none;
	z-index:1
}

header{
	width: 90vw;
background-color: rgba(255, 255, 255, 0.99);
  -webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
	height: 5vw;
	position: fixed;
	top: 0;
	left: 0;
	padding: 5vw;
transition: top 0.3s;
z-index:9999;
}

div#header{
}
.nav-up {
    top: -15vw;
}

div#slider{
	width:100%;
	margin-top:15vw;
	height:calc(100vh - 15vw);
	max-height: 100vw;
	overflow:hidden;
	position:relative;
}

div.headliner{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position:
	center;
	position:absolute;
	overflow:hidden;
   pointer-events: none;
}
div.headlinker{
	position: relative;
top:0;
left:0;
height:100%;
width:100%;
z-index:9999;

}


.headliner iframe {
	position: absolute;
	width: 100vw;
	height: 56.25vw;
	min-height: calc(100vh - 15vw);
	min-width: calc((100vh - 15vw) * 1.8);
	max-height:100vw;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:-99;
	pointer-events: none;
}



.insetheadliner{
	position: absolute;
	height: 90%;
	width: 90%;
	max-height: 90vw;
	top: 1vh;
	left:5vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}


div.headtitle{
	color:white;
	position: absolute;
	padding: 10vw 20vw 5vw 5vw;
	bottom: 0;
	width:75vw;
	z-index:999;
}
.headtitle p{
	font-size: 2.25vw;
}
.headtitle p span{
	float:right;
}

div#index{
	width: 90vw;
	margin: 5vw;
}

div#servicecont{
	 display:flex;
	 justify-content: space-between;
	 padding-top: 7vw;
gap:2.5vw;
}
div.services{flex-grow: 1; flex-basis:0;
}

.services h3{font-size: 3.5vw; margin-bottom:1vw;}


.bits p a{
	float: right
}

.thumbcontainer{
	width:97.5vw;
	height: auto;
	max-height:26vw;
	overflow:hidden;
	margin: 0 0 5vw -2.5vw;
	transition: max-height 0.4s linear;
}
.thumbcontainer.expand{
	max-height:110vw;
}
.indexitem{
	width: 20.6vw;
	height: 26vw;
	margin: 0 0 0 2.5vw;
	float:left;
}
.thumbnail{
	width: 20.6vw;
	height: 15vw;
	margin: 1.7vw 0 1vw 0;
	position: relative;
	overflow:hidden;
	background-size: cover;
	background-position: top center;
}
.insetthumb{
	position: absolute;
	width: 18.6vw;
	height: 13vw;
	top: 1vw;
	left:1vw;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.overlay{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-image: radial-gradient(rgba(0,0,0,0) 50%, rgba(0,0,0,0.1));
}

.indexitem:hover p.compactnormal{
	display:none;
}
.compacthover{
	display:none;
	text-decoration: underline !important;
}
.indexitem:hover p.compacthover{
	display:block;
}




/* ARTICLE */

div#article, div#nextarticle{
	width: 100%;
	margin: 20vw 0 15vw 0;
}
div#article h1, div#nextarticle h1{
	width:70vw;
	margin: 0 0 5vw 5vw;
        font-size: 9vw;
	text-transform: lowercase;
}


div#nextarticle{height: 60vh; overflow:hidden;opacity:0.5; margin-bottom:0; position:relative; top:2vw;}
div#nextarticle:hover{opacity:1;}
div#nextarticle a{text-decoration: none}

div#articlebody{
	width:90vw;
	margin-left: 5vw;
	column-count: 2;
	column-gap: 5vw;
}
p.intro{
	font-size: 2.25vw;
	margin-bottom: 2vw;
	column-span: all;
}

p.aboutintro{
	font-size: 2.25vw;
	margin-bottom: 2vw;
break-after: column;
}

#creative img{
	margin-top: 5vw
}
img.wide{
	width:100%;
}
img.spread{
	margin-left:5vw;
	width:90vw;
}
img.narrow{
	width:61%;
	margin-left:5vw;
}
img.bordernarrow{
	width:61%;
	border: solid 1px #111;
	margin-left:5vw;	
}
img.borderwide{
	border: solid 1px #111;
	margin-left:5vw;
	width:90vw;
}
.vimeo {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	margin-top: 5vw;
}
.video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.cap {
margin: 2vw 5vw;
}
.cap p::before{
content: "Above: ";
white-space: nowrap;
}

@media screen and (max-width: 480px){


p{
	font-size: 3vw;
}
h5{
	font-size: 4.5vw
}
h2, #index h1{
	font-size: 9vw;
}
h3{
	font-size: 11vw;
}


img#cnicon{right:3vw;top:3vw;width:9vw;height:9vw;}

div.navstrip{
width:100%; height:5vw;
}
.navstrip p{
	line-height:9vw;
}

header{
	height: 9vw;
}

div#header{
}
.nav-up {
    top: -19vw;
}



.headtitle p{
	font-size: 4.5vw;
	line-height:1.1em;
}

div#article h1, div#nextarticle h1{
	width:90vw;
}

div#servicecont{
	 display:block;
	 padding: 10vw 0;
}

p.quote{
	font-size: 4.5vw;
margin-top:15vw;
}
p.quote span{
	font-size: 3vw;
	margin-top: 1vw;
	display:block;
	line-height:4.5vw;
	margin-bottom: 15vw;
}

.indexitem{
	width: 43.7vw;
	height: 51vw;
	margin: 0 0 0 2.5vw;
}

.thumbnail{
	width: 43.7vw;
	height: 31vw;
	margin: 3.4vw 0 2vw 0;
}

div#servicecont{
	 flex-wrap:wrap;
justify-content:space-between;
gap:5vw;
}


.insetthumb{
	width: 41.7vw;
	height: 29vw;
}

.thumbcontainer{
	max-height:102vw;
	transition: max-height 0.8s linear;
	margin: 0 0 10vw -2.5vw;

}
.thumbcontainer.expand{
	max-height:600vw;
}

div#article{
	margin: 30vw 0 30vw 0;
}
div#creative{
	margin-top:5vw;
}

p.intro, p.aboutintro{
	font-size: 4.5vw;
}

div#articlebody{
	column-count: 1;
}
.cap {
margin: 4vw 5vw;
}

.headliner iframe {
height: 100vw;
width: calc(100vw  * 1.8);
	min-height: 100vw;
	min-width: calc(100vw  * 1.8);
	max-height:100vw;

}
img.narrow{
	width:90%;
}
img.bordernarrow{
	width:90%;
}


}
@media (max-aspect-ratio: 100/115) {

.headliner iframe {
height: 100vw;
width: calc(100vw  * 1.8);
	min-height: 100vw;
	min-width: calc(100vw  * 1.8);
	max-height:100vw;
}
}