/************************/
/***    Human Logo    ***/
/************************/
@font-face {
	font-family: 'human';
	src:url('../fonts/human_font/fonts/human.eot?vofu0w');
	src:url('../fonts/human_font/fonts/human.eot?#iefixvofu0w') format('embedded-opentype'),
		url('../fonts/human_font/fonts/human.woff?vofu0w') format('woff'),
		url('../fonts/human_font/fonts/human.ttf?vofu0w') format('truetype'),
		url('../fonts/human_font/fonts/human.svg?vofu0w#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'human';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-human_logo_2:before, .icon-human_logo_3:before {
	content: "\e600";
	font-size: 2.8rem;
	color: #342b29;
}

.icon-human_logo_2.small:before, .icon-human_logo_3.small:before {
	font-size: 1.68rem;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}

.icon-human_logo_2.big:before, .icon-human_logo_3.big:before{
	font-size: 2.8rem;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}

/***************************/
/***    HTML/Body CSS    ***/
/***************************/
html, body {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	background-color: #F2F0F1;
	font: 100% normal "nimbus-sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-size: 100%;
}

body {
	font-size: 100%;
	max-width: 1920px;
	margin: 0 auto;
}

.row {
	max-width: 1920px;
}


/***************************/
/***    Copy/Font CSS    ***/
/***************************/
h1 {
	font-size: 3rem;
	font-weight: normal;
}

h2 {
	font-size: 2.25rem;
	font-weight: normal;
}

h3 {
	font-size: 2rem;
	font-weight: normal;
}

h4 {
	font-size: 1.5rem;
	font-weight: normal;
	padding: 10px 0;
}

h5 {
	font-size: 1rem;
	font-weight: normal;
}

h6 {
	font-size: 0.875rem;
	font-weight: normal;
}

.sub-title-font {
	font-size: 1.25rem;
}

.h6-size {
	font-size: 0.875rem;
	font-weight: normal;
}

.copy-font {
	font-size: 0.8rem;
	color: #8B786D !important;
}

.title-sub-category {
	padding-bottom: 0;
}

.case-study-copy {
	margin-top: 2px;
	font-size: 0.875rem;
	color: #342B29;
	margin-bottom: 10px;
}

.font-weight-300 {
	font-weight: 300;
}

.font-weight-500 {
	font-weight: 500;
}

.font-weight-700 {
	font-weight: 700;
}

.hero-letter-spacing {
	letter-spacing: -1.3px;
}

.light-color {
	color: #8B786D !important;
}

.dark-color {
	color: #342B29 !important;
}

.same-font-as-parent {
	font-size: 1rem;
}

/********************************/
/***    Margin/Padding CSS    ***/
/********************************/
.no-margin {
	margin: 0;
}

.margin-top-neg-1 {
	margin-top: -1%;
}

.margin-top-neg-4 {
	margin-top: -4%;
}

.margin-top-0 {
	margin-top: 0;
}

.margin-top-1 {
	margin-top: 1%;
}

.margin-top-2 {
	margin-top: 2%;
}

.margin-top-3 {
	margin-top: 3%;
}

.margin-top-4 {
	margin-top: 4%;
}

.margin-top-5 {
	margin-top: 5%;
}

.margin-bottom-0 {
	margin-bottom: 0%;
}

.margin-bottom-1 {
	margin-bottom: 1%;
}

.margin-left-6 {
	margin-left: 6%;
}

.padding-top-0 {
	padding-top: 0;
}

.padding-bottom-0 {
	padding-bottom: 0;
}

.padding-left-0 {
	padding-left: 0;
}

.padding-right-0 {
	padding-right: 0;
}

.margin-center {
	margin: 0 auto;
}

.margin-bottom-15 {
	margin-bottom: 15px;
}


/**********************/
/***    Link CSS    ***/
/**********************/
a {
	color: #342B29;
	cursor: pointer;
}

a:hover {
	text-decoration: none;
	color: #EF6050 !important;
}

a:visited {
	color: #342B29;
}

.copy-link {
	z-index: 3000;
}

/**********************/
/***    List CSS    ***/
/**********************/
ul {
	padding: 0;
}

li {
	list-style: none;
	background: url(../img/bullet.png) no-repeat left center; /** the image will be vertically aligned in the center **/
  padding-left: 10px; 
}

/**********************************/
/***    General Classes/ID's    ***/
/**********************************/
#container {
	height: 100%;
	width: 100%;
}

#reduce-top-margin {
	margin-top: -20px;
	padding-bottom: 20px;
	max-width: 1602px;
}

#overlay {
	height: 100%;
	overflow: hidden;
	position: fixed;
	z-index: 100;
}

.overlay-opacity {
	width: 100%;
	background-color: rgba(0,0,0,0);
	-webkit-transition: background 500ms ease;
	-moz-transition: background 500ms ease;
	-ms-transition: background 500ms ease;
	-o-transition: background 500ms ease;
	transition: background 500ms ease;
}

.stopScroll {
	height: 100%;
	overflow: hidden;	
}

.clear {
	clear: both;
}

.clear-line {
	clear: both;
}

.reduce-buffer {
	position: relative;
	top: -20px;
}

.filler {
	z-index: 0;
	width: 100%;
	height: 15%;
	padding-top: 125px;
}

.container {
	width: 85% !important;
}

#video-container {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.hidden-overflow {
	overflow: hidden;
}

.text-center {
	text-align: center;
}

.page-header {
	margin-top: 3%;
  margin-bottom: 0.25%;
  padding-bottom: 0;
}

#bg-vid {
	top: 0 !important;
} 

/************************/
/***    Header CSS    ***/
/************************/
#header {
	position: fixed;
	top: 0;
	left: 7.5%;
	padding-top: 60px;
	z-index: 3800;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	 -khtml-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

#header-bg {
	position: fixed;
	top: -65px;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 3799;
	padding-top: 55px;
	background-color: #F2F0F1;
}

#logo-link {
	height: 43px;
	z-index: 998;
	cursor: pointer;
}

.nav-link {
	color: #342B29; 
  font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	padding: 0px 15px;
}

.nav-link:hover {
	color: #EF6050;
}

#nav-bar {
	padding-top: 20px;
	color: #342B29;
	display: none;
	float: right; 
	padding-right: 30px;
}

.nav-slide-link {
	color: #DDDDDD;
  font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	width: 100%;
}

.nav-slide-link:visited {
	color: #DDDDDD;
}

.slide-link {
	width: 100%;
	border-bottom: 1px solid rgba(221,221,221, 0.3);
	padding: 15px 15px;
}

#slide-top {
	margin-top: 15%;
}

#nav-menu {
	z-index: 1600;
}

.nav-menu-out {
	margin-right: 1.5% !important;
	-webkit-transition: margin-right 500ms ease;
	-moz-transition: margin-right 500ms ease;
	-ms-transition: margin-right 500ms ease;
	-o-transition: margin-right 500ms ease;
	transition: margin-right 500ms ease;
}

.nav-menu-in {
	margin-right: 31.5% !important;
	-webkit-transition: margin-right 500ms ease;
	-moz-transition: margin-right 500ms ease;
	-ms-transition: margin-right 500ms ease;
	-o-transition: margin-right 500ms ease;
	transition: margin-right 500ms ease;
}

#nav-slide {
	width: 100%;
	height: 100%;
	background-color: #242020;
	border-left: 1px solid rgba(221,221,221, 0.8);
	z-index: 4000;
}

.slider-out {
	position: fixed;
	top: 0;
	left: 100%;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

.slider-in {
	position: fixed;
	top: 0;
	left: 70% !important;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}

#reduce-top-margin {
	margin-top: -20px;
	padding-bottom: 20px;
	max-width: 1602px;
}

/****************************/
/***    Hamburger Menu    ***/
/****************************/
.black-line {
	height: 4px;
	width: 24px;
	background-color: #342B29;
	margin: 4px 0px;
}

.hamburger {
	margin-right: 1.5%;
  margin-top: 18px;
  height: 32px;
  width: 24px;
  cursor: pointer;
  padding-right: 25px;
}

.clicked {}

#top-patty {
	-webkit-transition: background-color .25s, -webkit-transform .25s;
		 -moz-transition: background-color .25s, -moz-transform .25s;
		 	-ms-transition: background-color .25s, -ms-transform .25s;
			 -o-transition: background-color .25s, -o-transform .25s;
				  transition: background-color .25s, transform .25s;
}

#bottom-patty {
	-webkit-transition: background-color .25s, -webkit-transform .25s;
		 -moz-transition: background-color .25s, -moz-transform .25s;
		  -ms-transition: background-color .25s, -ms-transform .25s;
			 -o-transition: background-color .25s, -o-transform .25s;
				  transition: background-color .25s, transform .25s;
}

#meat {
	-webkit-transition: background-color .25s;
		 -moz-transition: background-color .25s;
		  -ms-transition: background-color .25s;
			 -o-transition: background-color .25s;
				  transition: background-color .25s;
}

.clickedTop {
	background-color: #EF6050 !important;
  -webkit-transform-origin: 75% 100%;
		 -moz-transform-origin: 75% 100%;
		  -ms-transform-origin: 75% 100%;
			 -o-transform-origin: 75% 100%;
  				transform-origin: 75% 100%;
	-webkit-transform: rotate(15deg);
		 -moz-transform: rotate(15deg);
			-ms-transform: rotate(15deg);
			 -o-transform: rotate(15deg);
    			transform: rotate(15deg);
}

.clickedBottom {
	background-color: #EF6050 !important;
  -webkit-transform-origin: 75% 100%;
		 -moz-transform-origin: 75% 100%;
		  -ms-transform-origin: 75% 100%;
			 -o-transform-origin: 75% 100%;
  				transform-origin: 75% 100%;
	-webkit-transform: rotate(-15deg);
		 -moz-transform: rotate(-15deg);
			-ms-transform: rotate(-15deg);
			 -o-transform: rotate(-15deg);
    			transform: rotate(-15deg);
}

.clickedMeat {
	background-color: #EF6050 !important;
}

.clickedColor {
	background-color: #EF6050 !important;
}

/********************************/
/***    Footer / Nav Arrow    ***/
/********************************/
#nav-arrow1 {
/*	background: url('../img/arrow.png');
	position: fixed;
	top: 90%;
	width: 55px;
	height: 55px;
	cursor: pointer;
	margin-left: 12px;
	-webkit-transform: rotate(180deg); 
	   -moz-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	     -o-transform: rotate(180deg);
	        transform: rotate(180deg);
/*	-webkit-transition: background 1500ms ease;
	 	 -moz-transition: background 1500ms ease;
			-ms-transition: background 1500ms ease;
			 -o-transition: background 1500ms ease;
					transition: background 1500ms ease;*/
}

/*============= firefox workaround for nav arrow ================*/
#arrow-black {
	background-image: url('../img/arrow/outline-black.png');
	background-repeat: no-repeat;
	width: 56px;
	height: 56px;
	bottom: 8%;
	margin-left: 12px;
	cursor: pointer;
	position: fixed;
}

.arrow-red {
	width: 56px;
	height: 56px;
	bottom: 8%;
	margin-left: 12px;
	cursor: pointer;
	position: fixed;
	display: none;
}

.arrow-red:before, .arrow-red:after {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 56px;
	height: 56px;
	opacity: 1;
}

.arrow-red:before {
	/*background-image: url('../img/arrow.png');*/
	background-image: url('../img/arrow/outline-red.png');
	background-repeat: no-repeat;
	z-index: 1;
	-webkit-transition: opacity 1s;
	-moz-transition: opacity 1s;
	-o-transition: opacity 1s;
	transition: opacity 1s;
}

.arrow-red:after {
	/*background-image: url('../img/arrow_red.png');*/
	background-image: url('../img/arrow/solid-red.png');
	background-repeat: no-repeat;
	opacity: 0;
	-webkit-transition: opacity 2s;
	-moz-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
}

.arrow-red.hovered:before {
  opacity: 0;
}

.arrow-red.hovered:after {
	opacity: 1;
}

.left-arrow {
	position: absolute;
	left: 3%;
	top: 38%;
	width: 55px;
	height: 55px;
	cursor: pointer;
	z-index: 995;
	display: none;
	-webkit-transform: rotate(-90deg); /* Safari and Chrome */
   -moz-transform: rotate(-90deg); /* Firefox */
    -ms-transform: rotate(-90deg); /* IE 9 */
     -o-transform: rotate(-90deg); /* Opera */
        transform: rotate(-90deg);
}

.right-arrow {
	position: absolute;
	right: 3%;
	top: 38%;
	width: 55px;
	height: 55px;
	cursor: pointer;
	z-index: 995;
	display: none;
	-webkit-transform: rotate(90deg); /* Safari and Chrome */
   -moz-transform: rotate(90deg); /* Firefox */
    -ms-transform: rotate(90deg); /* IE 9 */
     -o-transform: rotate(90deg); /* Opera */
        transform: rotate(90deg);
}

.arrow-bg {
	background-color: #DEDCDD;
	border-radius: 50%;
}

#footer {
	height: 100px;
}

#arrow {
	width: 100%;
}

.selected {
  color: #EF6050 !important;
}

.option {
	color: #8B786D;
}

/**************************/
/***    Case Studies    ***/
/**************************/
#case-study-bg {
	position: absolute;
	top: 0;
	left: 0;
}

#in-laptop {
	position: absolute;
	overflow: hidden;
	display: none;
	opacity: 0;
}

#address-bar {
	position: absolute;
	overflow: hidden;
	display: none;
	opacity: 0;
	z-index: 100;
}


/***************************/
/***    Media Queries    ***/
/***************************/

@media only screen and (max-width: 1280px) {
	.icon-human_logo_2.big:before, .icon-human_logo_3.big:before {
		font-size: 2.2rem;
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		-o-transition: all 0.5s ease;
		-ms-transition: all 0.5s ease;
	}

	.icon-human_logo_2:before, .icon-human_logo_3:before{
		font-size: 2.2rem;
	}
	.human-tout {
		top: -7px !important;
	}

}

@media only screen and (max-device-width: 768px) {
	.nav-slide-link {
		font-size: 2rem;
	}
}

@media only screen and (max-width: 1199px) {
	.hamburger {
		margin-top: 6px;
	}
}


@media only screen and (min-width: 1600px) {
	.nav-link {
		font-size: 1.2rem;
	}
}

/********************************************/
/***    Tablet and Phone Media Queries    ***/
/********************************************/

/********/
/* iPad */
/********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	.icon-human_logo_2:before, .icon-human_logo_3:before {
		font-size: 1.68rem;
	}

	.slider-in {
		position: fixed;
		top: 0;
		left: 70% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	.nav-menu-in {
		margin-right: 31.5% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	#header {
		padding-top: 35px;
	}

	#header-bg {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 55px;
		z-index: 997;
		background-color: #F2F0F1;
	}

	#nav-bar {
		padding-top: 5px;
	}

	#nav-menu {
		margin-top: 0px;
	}

	.page-header {
		margin-top: 0%;
	}
}

/*******************/
/* iPad (portrait) */
/*******************/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	.left-arrow, .right-arrow {
		top: 30%;
	}
}

/**********************/
/*** iPhone 2G - 4S ***/
/**********************/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	html, body {
		font: 50% normal "nimbus-sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
                font-size: 50%;  /* this was added on March 1st 2016 to Chrome font-size issue*/
		overflow: visible !important;
	}

	li {
		background: url(../img/small-bullet.png) no-repeat left center;
		padding-left: 7px;
	}

	h3 {
		font-size: 2.2rem;
	}

	h4 {
		font-size: 1.7rem;
	}

	h5 {
		font-size: 1.3rem;
	}

	h6 {
		font-size: 1.15rem;
	}

	.slider-in {
		position: fixed;
		top: 0;
		left: 60% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	.nav-menu-in {
		margin-right: 41.5% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	.h6-size {
		font-size: 1.15rem;
	}

	.logo-caption {
		font-size: 2em;
	}

	.case-study-copy {
		font-size: 1.15rem;
	}

	.infographic-copy {
		line-height: 1.25rem;
	}

	.icon-human_logo_2:before, .icon-human_logo_3:before {
		font-size: 2.5rem;
	}

	#header {
		padding-top: 30px;
		margin-bottom: 0;
		margin-top: 2%;
	}

	#header-bg {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding-top: 30px;
		z-index: 997;
		background-color: #F2F0F1;
	}

	#index-header-bg, #header-bg {
		padding-top: 50px;
	}

	.black-line {
		height: 3px;
		width: 18px;
		background-color: #342B29;
		margin: 3px 0px;
	}

	.hamburger {
		margin-right: 2%;
	  margin-top: 5px;
	  height: 30px;
	  width: 24px;
	  cursor: pointer;
	  padding-right: 25px;
	}

	.filler {
		height: 0;
		padding-top: 18%;
	}

	#nav-bar {
		padding-top: 5px;
	}

	#nav-menu {
		margin-top: 0px;
	}

	.page-header {
		margin-top: 0%;
	}
}

/*********************************/
/*** iPhone 2G - 4S (portrait) ***/
/*********************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
	.page-header {
		margin-top: 3%;
	}

	#slide-top {
		margin-top: 20%;
	}

	.left-arrow, .right-arrow {
		top: 27%;
		height: 40px;
		width: 40px;
	}

	.left-arrow {
		left: 2%;
	}

	.right-arrow {
		right: 2%;
	}
}

/**********************************/
/*** iPhone 2G - 4S (landscape) ***/
/**********************************/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
	.slider-in {
		position: fixed;
		top: 0;
		left: 70% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	.nav-menu-in {
		margin-right: 31.5% !important;
		-webkit-transition: all 500ms ease;
		-moz-transition: all 500ms ease;
		-ms-transition: all 500ms ease;
		-o-transition: all 500ms ease;
		transition: all 500ms ease;
	}

	.slide-link {
		padding: 7px;
	}

	#slide-top {
		margin-top: 2%;
	}
}