@charset "UTF-8";
/* CSS Document */
html, body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	padding:0;
	margin:0;
	background: #f8edd9;
}

/* typography */
/* P22 */

.xlarge_title_serif {
	font-family: 'P22MackinacProBook';
	font-size: 5.4vw;
	line-height: 5vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
	
}

.large_title_serif {
	font-family: 'P22MackinacProBook';
	font-size: 4.5vw;
	line-height: 5.8vw;
	font-weight:80;
	letter-spacing:0px;	
}

.med_title_serif {
	font-family: 'P22MackinacProBook';
	font-size: 4.2vw;
	line-height: 4vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

.title_serif {
	font-family: 'P22MackinacProBook';
	font-size: 3.4vw;
	line-height: 3.4vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

.small_title_serif {
	font-family: 'P22MackinacProBook';
	font-size: 3vw;
	line-height: 2.8vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

.text_serif {
	font-family: 'P22MackinacProBook';
	font-size: 1.2vw;
	line-height: 1.5vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

.text_list_serif {
	font-family: 'P22MackinacProBook';
	font-size: 1.2vw;
	line-height: 1.5vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

/* typography */
/* GT */

.med_sans {
	font-family: 'GT-Walsheim-Medium';
	font-size: 1.2vw;
	line-height: 1.6vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:.5px;	
}

.small_sans  {
	font-family: 'GT-Walsheim-Medium';
	font-size: 1vw;
	line-height: 1.4vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:.5px;	
}

.small_list_sans  {
	font-family: 'GT-Walsheim-Medium';
	font-size: 1vw;
	line-height: 1.4vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:.5px;	
}

.xsmall_sans  {
	font-family: 'GT-Walsheim-Medium';
	font-size: .8vw;
	line-height: 1.2vw;
	font-weight:100;
	font-style: normal;
	letter-spacing:0px;
}

#sticker {
	width:6vw;
	height:6vw;
	z-index: 1;
	position: absolute;
    animation: moveX 2s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@keyframes moveX {
  from { left: 0;  } to { left: calc(100% - 6vw); }
}

@keyframes moveY {
  from { top: 0; } to { top: calc(100% - 6vw); }
}

#logo {
	display: block;
	width: 14vw;
	transition: all .68s ease-in-out 0s;
}

#worklink {
	position: absolute;
	left:120px;
	color:#000;
	opacity: 0;
	transition: all .48s ease-in-out .48s;
}

#worklink a {
	color:#000;
	text-decoration: none;
}

#aboutlink {
	position: absolute;
	right:120px;
	color:#000;
	opacity:0;
	transition: all .48s ease-in-out .48s;
}

#aboutlink a {
	color:#000;
	text-decoration: none;
}

#top {
	width:100%;
	height:20vh;
	background: #f8edd9;
	position: fixed;
	top:0px;
	left:0px;
	border-bottom: 1px solid #000;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .68s ease-in-out 0s;
}

#right {
	width:60px;
	height:100vh;
	background: #f8edd9;
	position: fixed;
	top:0px;
	right:0px;
	border-left: 1px solid #000;
	z-index: 3;
}

#bottom {
	width:calc(100vw - 120px);
	height:12vh;
	position: absolute;
	bottom:0px;
	left:60px;
	border-top: 1px solid #000;
	z-index: 1;
	background: #f8edd9;
	display: flex;
	align-items: center;
	justify-content: center;
}

#left {
	width:60px;
	height:100vh;
	background: #f8edd9;
	position: fixed;
	top:0px;
	left:0px;
	z-index: 3;
	border-right: 1px solid #000;
}

.coloredleft {
	width:100%;
	height:100%;
	background-color: #5288f7;
	position: absolute;
	bottom:100vh;
	transition: all .88s ease-out .08s;
}

.coloredright {
	width:100%;
	height:100%;
	background-color: #fb5737;
	position: absolute;
	bottom:100vh;
	transition: all 1.18s ease-out .28s;
}

.wrapper {
	width:calc(100% - 120px);
	min-height:68vh;
	margin:0 auto;
	position: relative;
	top:20vh;
}

.split {
	width:calc(50% - 1px);
	height:100%;
	position: absolute;
	border-right:1px solid #000;
	z-index: 1;
}

.right {
	left:50%;
}

h1 {
	margin:0;
	padding:40px 0px 36px 0px;
	text-align: center;
}

span.contact {
	display: block;
	font-family: 'GT-Walsheim-Medium';
	font-size: 1.28vw;
	font-style: normal;
	font-weight: 100;
	letter-spacing: .5px;
	text-align: center;
	padding-top:40px;
}

.main_content {
	width:calc(100% - 120px);
	margin:0 auto;
	position: relative;
	top:32vh;
	border-top:1px solid #000;
	border-bottom: 1px solid #000;
}

.workquote_holder {
	width:100%;
	height:auto;
	background: #000;
	position: relative;
}

h2.workquote {
	color:#f8edd9;
	margin:0 auto;
	padding:120px 0px 120px 0px;
	width:80%;
}

.featured {
	width:100%;
	display: flex;
	overflow: hidden;
	border-top:1px solid #000;
}

.blue_bg {
	background: #5288f7;
}

.red_bg {
	background: #fb5737;
}

.green_bg {
	background: #00a75d;
}

.pink_bg {
	background: #ffb8b6;
}

.beige_bg {
	background: #f8edd9;
}

.tags {
	display: inline-block;
	color:#000;
	padding: .8vw 1.4vw;
	text-align: center;
	border-radius: 90px;
	border:1px solid #000;
	margin:.4vw .4vw .4vw 0vw;
}

.buttlink {
	color:#000;
	padding: .8vw 1.4vw;
	text-align: center;
	border-radius: 30px;
	border:1px solid #000;
	margin:.4vw .4vw .4vw 0vw;
	transition: all .48s ease-out .08s;
}

.buttlink:hover {
	color:#f8edd9;
	background: #000;
	transition: all .48s ease-out .08s;
	cursor: pointer;
}

.footer {
	width:100%;
	clear:both;
	background: #000;
	overflow: hidden;
}

.footer_holder {
	display:flex; 
	padding:0px 5% 0 5%;
}

h3.footerquote {
	width:100%;
	padding-right:10%;
	color:#f8edd9;
	margin:0;
	padding:10% 0% 0% 0%;
}

img.fixsticker {
	width:9vw;
	position: absolute;
	bottom:-40px;
	transform: rotate(-9deg)
}


.footer_split {
	width:50%;
	float:left;
	padding-top:10%;
	padding-bottom:5%;
	flex:1;
}

.footer_links {
	display: flex; 
	height: 100%; 
	justify-content: right;
}

.footer_split p {
	font-family: 'GT-Walsheim-Medium';
	font-size: 1.48vw;
	color:#f8edd9;
	font-style: normal;
	font-weight: 100;
	letter-spacing: .5px;
	padding-left: 10%;
	margin: 0;
	padding-bottom: 20px;
}

ul#exp_list {
	list-style-type: none;
	margin:0;
	padding:0%;
}

ul#exp_list li {
	color:#f8edd9;
	padding:0px 0px 8px 0px;
	margin: 0;
}

ul#links {
	list-style-type: none;
	margin: 0px 0px 8px 0px;
	padding:0%;
	overflow: hidden;
	align-self: flex-end;
}

ul#links li {
	color:#f8edd9;
	padding: 6px 12px 6px 12px;
	text-align: center;
	border-radius: 30px;
	border:1px solid #f8edd9;
	float:left;
	margin: 0px 0px 0px 8px;
}

.footer_bar {
	width:100%;
	min-height: 60px;
	position: relative;
	bottom:0px;
	display: flex;
	align-items: center;
}

.footer_bar p {
	color:#f8edd9;
	letter-spacing: .5px;
	padding-left: 5%;
	margin: 0;
	padding-bottom: 20px;
}

.sticker_footer {
	width:3.68vw;
	display: block;
	position: absolute;
	right:5%;
	bottom:30px;
}