@charset "utf-8";

/* CSS Document */
body {

	margin: 0;
	padding: 0;
	background: #f5eee3;
	font-size:16px;	
	-moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

* {margin:0; padding:0;}

::selection {
  background: #7200ff; /* WebKit/Blink Browsers */
  color:#f9f9f9;
}
::-moz-selection {
  background: #7200ff; /* Gecko Browsers */
  color:#f9f9f9;
}

section {
	width:100%;
	top:0;
	left:0;
}

.wrapper {
	position: relative;
	z-index: 3;
	overflow:auto;
	top: calc(100vh - 100px);
}

section.content {
	width:100%;
	background: #f5eee3;
}

section.about {
	background: #f5eee3;
	width:100%;
}

.aboutHolder {
	width:90%;
	overflow: hidden;
	padding-bottom: 60px;
	clear: both;
	margin: 0 auto;
	padding-top: 4%;
}

.about0 {
	width:100%;
	clear:both;
}

.about0awards {
	margin:0 auto; 
	float:none;
	width:100%;
	clear:both;
}

.about1 {
	width:60%;
	float:left;
}

.about50 {
	width:50%;
	float:left;
}

.about2 {
	width:40%;
	float:left;
}

.about3 {
	width:33.333%;
	float:left;
}


#aboutTxt {
	width:50%; 
	margin:0px auto; 
	position:relative;
	padding-bottom:4%;
}

#aboutIntro {
	width:40%; 
	margin:0 auto; 
	position:relative;
}

.aboutIntroImg {
	min-width:100%; 
	position:absolute;
}

.aboutIntroTxt {
	text-align:left; 
	width:68%; 
	padding:12%;
	margin:10% 0% 0% 0%; 
	mix-blend-mode:difference; 
	color:#fff;
	font-family: 'canela'; 
	font-size-adjust:0.5; 
	font-weight:100; 
	font-style:normal;
	font-size: calc(21px + (44 - 21) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(32px + (48 - 32) * ((100vw - 300px) / (1920 - 300)));
}

.intro {
	width:90%;
	margin:0 auto;
	overflow: hidden;
	position:relative;
	padding:4% 0% 4% 0%;
	transition-property: opacity;
    transition-duration: 1.18s;
	transition-timing-function:ease-out;
	z-index: 3;
}


.home {
	width:100vw;
	height:100vh;
	position: fixed;
	top:0;
	left:0;
	z-index: 1;
}

.project {
	background: #111;
	overflow: hidden;
	position: relative;
}

.introVid {
  position: fixed;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  overflow: hidden;
}

video {
	top: 0; 
	left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
}

#grad {
	position: absolute; 
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto; 
	z-index: 2; 
	background: rgb(17,17,17);
    background: linear-gradient(180deg, rgba(17,17,17,1) 0%, rgba(255,255,255,0) 72%);
}

nav {
	width:95%;
	height:100px;
	background: #f5eee3;
	padding: 0% 0% 0% 5%;
	bottom:0;
	z-index: 4;
	position: fixed;
}

.fixed {
	position: fixed;
	top:0;
}

.sneak {
	background-color: #eee;
	background-size: cover;
	background-repeat: no-repeat;
    position: fixed;
    width: 60%;
    height: 60%;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -10%);
    display: none;
    mix-blend-mode: hard-light;
}

.show {
	display: block;
}

ul.list {
	width:90%;
	margin:0 auto;
	overflow: hidden;
	padding:5% 0% 4% 0%;
	margin:0 auto;
	list-style-type: none;
	font-family: 'GT-America'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(24px + (30 - 24) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 0px;	
}

ul.list li.parent {
	border-bottom: 1px solid #000;
	padding:2% 0% 2% 0%;
	width:100%;
	color:#111;
}

ul.list li.parent a{
	text-decoration:none;
	color:#111;
	transition: opacity .2s linear;
}

li.parent:first-child {
	border-top: 1px solid #000;
}

ul.list2 {
	list-style-type: none;
	margin:0;
	padding:0;
	overflow: hidden;
	display: table;
	width:100%;
}

ul.list2 li.child1 {
	width:58%;
	float:left;
	margin-right:2%;
	vertical-align: middle;
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(18px + (28 - 18) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));	
}


ul.list2 li.child1 span {
	padding-left:0%;
	letter-spacing: 0px;
	transition: all .4s ease .04s;		
}

ul.list2 li.child1 span:hover {
	padding-left:2%;
	letter-spacing: 1px;
	transition: all .4s ease .08s;		
}

ul.list2 li.child1 span:after {
	transition: all .4s ease .08s;
	 content: ' →';
	 opacity:0;		
}

ul.list2 li.child1 span:hover:after {
	transition: all .6s ease .18s;
	opacity:1;	
}

ul.list2 li.child2 {
	width:18%;
	float:left;
	margin-right:2%;
	vertical-align: middle;
}

ul.list2 li.child3 {
	width:20%;
	float:left;
	vertical-align: middle;
	text-align: right;
}

h1 {
	display:inline;
	font-family: "GT-America"; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(22px + (40 - 22) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(22px + (42 - 22) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 0px;
	color:#fff;
}

.blackTxt {
	color:#111;
}

.IntroAboutText {
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(21px + (44 - 21) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(32px + (48 - 32) * ((100vw - 300px) / (1920 - 300)));
	color:#111;
	padding:0% 0% 4% 0%;
	text-align: center;
}

.mailtext {
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(18px + (30 - 18) * ((100vw - 300px) / (1920 - 300)));
	color:#111;
	letter-spacing: 1;
	
}

.smtext {
	font-family: 'GT-America'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(14px + (18 - 14) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(22px + (28 - 22) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 0px;
	color:#111;
}


h2.introText {
	display:inline;
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(26px + (50 - 26) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(28px + (52 - 28) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 1px;
	color:#fff;
	padding-right: 1%;
}

h2.navItem {
	display:inline;
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(26px + (50 - 26) * ((100vw - 300px) / (1920 - 300)));
	line-height: 100px;
	letter-spacing: 0px;
	color:#fff;
	padding-right: 1%;
}

h2.navCon {
	display:inline;
	font-family: 'GT-America'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(14px + (22 - 14) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 0px;
	color:#111;
	float: right;
	line-height: 100px;
	padding-right: 5%;
	transition: all 1s ease .18s;
	cursor: pointer;
}

h2 a {
	text-decoration: none;
	color:#111;
}

.arrow, .arrow2 {
	display:inline;
	font-family: 'GT-America';  font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(22px + (44 - 22) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(24px + (48 - 24) * ((100vw - 300px) / (1920 - 300)));
	letter-spacing: 0px;
	color:#fff;
	padding:0px;
}

.on span{
	display: none;
}

.on:after {
	content: "↑"
}



ul#awards {
	list-style-type: none;
	overflow: hidden;
	margin: 0% auto;
	text-align: center; 
}

ul#awards li{
	display: inline-block;
	margin-top:4%;
	vertical-align: top;
	width: 33.1%;
}

ul#awards li span{
	text-align: center;
	display: block;
}

ul#awards li span a{
	color:#111;
}
span.awtitle{ 
	font-family: 'canela'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(18px + (28 - 18) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(28px + (32 - 28) * ((100vw - 300px) / (1920 - 300)));
	padding-bottom: 2%;	
}

span.awdesc{ 
	font-family: 'GT-America'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
}

ul#clients {
	list-style-type: none;
	overflow: hidden;
	margin: 0% auto;
	text-align: center;
	width:80%; 
}

ul#clients li{
	display: inline-block;
	margin-top:2%;
	vertical-align: top;
	width: 24%;
}

img.clogos {
	max-width:100%;
	height:auto;
	width:68%;
	text-align: center;
	opacity: .68;
}

.dot {
  height: 20px;
  width: 20px;
  background-color: #00ff7e;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
}

span.dottext {
	font-family: 'GT-America'; font-size-adjust:0.5; font-weight:100; font-style:normal;
	font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1920 - 300)));
	line-height: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
	padding-right: 8px;
}

.navCon:hover span.dottext:after{
    content: 'Available for hire';
}