/*
Theme Name: IMH
Theme URI: 
Description: Custom Theme for IMH
Author: DTP
Version: 1.0
Tags: custom
*/

/* CSS Document */

html, body {
	height: 100%;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #3c2313;
	background: #faf9fb;
	margin: 0;
	padding: 0;
	text-align: center;
	background-image: url("images/bg-ff-top.png");
	background-position: top right;
	background-size: 700px 40px;
	background-repeat: repeat-x;
}

h1 {
	font-family: 'AlternateGothicFSNo1', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 40px;
    letter-spacing: 1px;
	line-height: 40px;
	margin: 0;
}

h2 {
	font-family: 'AlternateGothicFSNo1', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 50px;
    letter-spacing: 1px;
	line-height: 50px;
}

h3 {
	font-size: 16px;
	color: #312825;
}

h4 {
	font-family: 'AlternateGothicFSNo1', Arial, sans-serif;
    font-weight: normal;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 20px;
    letter-spacing: 1px;
	line-height: 0;
}

hr {
	border: none;
	background-color: #ccc;
	color: #ccc;
	height: 1px;
	margin: 25px 0 25px 0;
}

a:link { color: #111; text-decoration: underline; }
a:visited { color: #111; text-decoration: underline; }
a:hover { color: #e3c4d2; text-decoration: underline; }
a:active { color: #e3c4d2; text-decoration: underline; }

/*-------------------------------------------
	header
-------------------------------------------*/

#yellow {
	width: 100%;
	height: 100%;
	margin: 0; 
	position: relative;
	background-color: #f3c300;
	background-image: url("images/bg-21.jpg");
	background-position: top right;
	background-size: 400px 400px;
}

section img {
  width: 100%;
  height: 100%;
  max-height: 800px;
}
section.contain img {
  object-fit: contain;
}

#header {
	width: 100%;
	height: 100px;
	margin: 0; 
	position: relative; 
	text-align: center;
	background-image: url("images/bg-ff-top.png");
	background-position: top right;
	background-size: 700px 40px;
	background-repeat: repeat-x;
}

.headerWrap { 
	width: 100%;
	height: 80px;
	margin: 0; 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998; 
	text-align: center;
}

.headerL { 
	width: 160px;
	height: 40px;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
	opacity: 0.0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}
.darklogo {
  opacity: 1.0;
}

#headerTag { 
	width: 250px;
	height: 115px;
	text-align: left;
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: top;
}

#headerR { 
	width: 80px;
	height: 80px;
	text-align: left;
	margin: 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}

.menu-icon {
  background-color: transparent;
  border: none;
  color: white;
  width: 80px;
  height: 80px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
.button1 {
  background-color: transparent;
  color: white;
}

.button1:focus {
  text-decoration: inherit;
  background-color: #b5ced0;
  outline: auto;
}

.button1:hover {
  background-color: #b5ced0;
  color: white;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  background-color: #000;
}

.overlay-content {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: scroll;
  text-align: center;
  margin-top: 0px;
}

#oHeaderWrap {
	width: 100%;
	height: 70px;
	padding: 0;
	text-align: center;
}
#oHeader { 
	display: block !important;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 80px;
}	

#oHeaderL { 
	width: 160px;
	height: 40px;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	box-sizing: border-box;
	display: inline;
	float: left;
}

#oHeaderR { 
	width: 80px;
	height: 80px;
	text-align: left;
	margin: 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
	background-color: #ccc;
}

#navHeader { 
	width: 100%;
	height: auto;
	margin: 0; 
	position: relative; 
	text-align: left;
}

#navContainer { height: auto; padding: 30px 0 30px 0; }

ul.nav-list,
nav { 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	display: block; 
	height: auto; 
	float: none;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 14px;
	text-transform: uppercase;
}

ul.nav-list li.nav-item,
ul.nav-list li.nav-item-ON { 
	display: block !important; 
	text-align: center; 
	float: none !important;
}

ul.nav-list li.nav-item a { 
	display: block; 
	line-height: auto; 
	height: auto; 
	margin: 0; 
	color: #fff; 
	border-top: 1px solid #222; 
	padding: 20px 20px !important;
	text-decoration: none;
}

ul.nav-list li.nav-item a:hover { background-color: #000; color: #b5ced0; }
ul.nav-list li.nav-item a:focus { background-color: #333; }

ul.nav-list li.nav-item-ON a { padding: 10px 20px; color: #fff; border-top: 1px solid #000;}
	
ul.nav-list li.nav-item:first-child a,
ul.nav-list li.nav-item-ON:first-child a
{ border: none;}

.nav-title {
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 80px;
    letter-spacing: 3px;
}

#logoContainer {
	width: 100%;
	height: 220px;
	margin: 0;
	padding: 50px 0 0 0;
	position: relative; 
	text-align: left;
}

#logoTop {
	width: 305px;
	height: 170px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	background-image: url(images/home-logo-x.png);
	background-repeat: no-repeat;
	background-size: 305px 170px;
}
#Lnav {
    width: 305px; height: 170px;
    margin: 0;
	padding: 0;
    position: relative;
}
#Lnav li { margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
#Lnav li a { height: 0px; display: block; padding-top: 170px; overflow: hidden; }
#Lnav1 { left: 0; width: 305px; }

#navBG {
	width: 685px;
	height: 60px;
	padding: 40px 0 0 0;
	margin: 0;
	text-align: right;
	display: inline;
	float: right;
}
#navContainer {
	display: inline-block;
	width: auto;
	height: 60px;
	padding: 0;
	margin: 0;
	text-align: right;
}
#mNavContainer {
	display: none;
}

/* - - - Navigation - - - */

.nav ol, .nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav {
  position: relative;
  display: inline;
  font-family: 'AlternateGothicFSNo1', Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: none;
  font-smoothing: antialiased;
  font-size: 30px;
  letter-spacing: 1px; }

.nav-list {
  text-align: left; }

.nav-item {
  float: left;
  *display: inline;
  zoom: 1;
  position: relative;
}
  
.nav-item a {
  display: block;
  color: #111;
  padding: 10px 0 10px 0;
  margin: 0 0 0 25px;
  text-decoration: none;
}

.nav-item > a:hover {
  color: #be0f34;
}

.nav-item-ON {
  float: left;
  *display: inline;
  zoom: 1;
  position: relative;
}

.nav-item-ON a {
  display: block;
  color: #000;
  padding: 10px 0 10px 0;
  margin: 0 0 0 25px;
  text-decoration: none;
  border-bottom: 2px solid #000;
}

.nav-item-ON > a:hover {
  color: #000; }
  
.nav-item ul {
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  right: 0;
  width: 200px;
  z-index: 200;
}
.nav-item:hover ul {
  display: block;
}
.nav-item li {
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: auto;
  background: #e56924;
  border-bottom: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;

}
.nav-item:hover li a {
  background: none;
}
.nav-item ul a {
  display: block;
  height: auto;
  color: #2d150c;
  padding: 10px;
  text-align: right;
  border-bottom: 0;
}
.nav-item ul a:hover,
.nav-item ul li:hover a {
  border: 0px;
  color: #fff;
  text-decoration: none;
}
  

/*-------------------------------------------
	page structure
-------------------------------------------*/


#homeWrap {
	width: 100%;
	height: auto;
	min-height: 700px;
	margin: 0; 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9997;  
	text-align: left;
	background-image: url("images/home-21.png");
	background-position: top center;
	background-size: 1800px 700px;
	background-repeat: no-repeat;
}

#wrap { 
	width: 1200px;
	height: auto;
	margin: 0 auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#wrapHome { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9999;
}

#homeDate {
	width: 20%;
	height: 100px;
	margin: 0; 
	position: fixed;
	top: 660px;
	left: 0;
	z-index: 9996;  
	text-align: right;
	color: #111;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 10px;
	letter-spacing: 4px;
	line-height: 14px;
}

#homeIND {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	position: fixed;
	top: 330px;
	right: 0px;
	z-index: 9996;  
	text-align: right;
	color: #111;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 170px;
	letter-spacing: 50px;
}

#homeContainer-A { 
	width: 100%;
	height: 700px;
	margin: 200px 0 0 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
	background-image: url("images/home-bg-flower-b.png");
	background-position: top center;
	background-size: 1450px 700px;
	background-repeat: no-repeat;
}
#homeContainer-B { 
	width: 1000px;
	height: auto;
	margin: 0 auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeContainer-C { 
	width: 1000px;
	height: auto;
	margin: 0 auto;
	padding: 200px 0 0 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}

#homeWork-1 { 
	width: 520px;
	height: auto;
	margin: 0px auto;
	padding: 10px;
	text-align: right;
	position: relative;
	z-index: 9991;
	box-sizing: border-box;
	background-image: url("images/sample.png");
	background-size: 520px 436px;
}
#homeWork-1 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-1 a:link { text-decoration: none; }
#homeWork-1 a:visited { text-decoration: none; }
#homeWork-1 a:hover { text-decoration: none; background-color: #e3c5d3; }
#homeWork-1 a:active { text-decoration: none; background-color: #e3c5d3; }

#homeWork-1 img { 
	margin: 0 0 20px 0;
}

.homeWork-1-title {
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	letter-spacing: 4px;
	line-height: 10px;
	margin: 0 20px 0 0;
	padding: 0 0 20px 0;
}

.homeWork-k { color: #111; }
.homeWork-w { color: #fff; }

#homeWork-2 { 
	width: 500px;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: right;
}
#homeWork-2 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-2 a:link { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-2 a:visited { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-2 a:hover { color: #111; text-decoration: none; background-color: #e3c5d3; }
#homeWork-2 a:active { color: #111; text-decoration: none; background-color: #e3c5d3; }

#homeWork-3 { 
	width: 340px;
	height: auto;
	margin: 275px 0 0 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: left;
}
#homeWork-3 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-3 a:link { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-3 a:visited { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-3 a:hover { color: #111; text-decoration: none; background-color: #e3c5d3; }
#homeWork-3 a:active { color: #111; text-decoration: none; background-color: #e3c5d3; }

#homeWork-4 { 
	width: 250px;
	height: auto;
	margin: 0 230px 0 0;
	position: relative; 
	text-align: right;
	background-color: #E07826;
	display: inline;
	float: right;
}
#homeWork-4 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-4 a:link { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-4 a:visited { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-4 a:hover { color: #111; text-decoration: none; background-color: #e3c5d3; }
#homeWork-4 a:active { color: #111; text-decoration: none; background-color: #e3c5d3; }

#homeWork-5 { 
	width: 370px;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: left;
}
#homeWork-5 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-5 a:link { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-5 a:visited { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-5 a:hover { color: #111; text-decoration: none; background-color: #e3c5d3; }
#homeWork-5 a:active { color: #111; text-decoration: none; background-color: #e3c5d3; }

#homeWork-6 { 
	width: 300px;
	height: auto;
	margin: 80px 160px 0 0;
	position: relative; 
	text-align: RIGHT;
	display: inline;
	float: right;
}
#homeWork-6 a {
	display: block;
	height: auto;
	padding: 0 0 20px 0;
	z-index: 9999;
}
#homeWork-6 a:link { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-6 a:visited { color: #111; text-decoration: none; background-color: #fff; }
#homeWork-6 a:hover { color: #111; text-decoration: none; background-color: #e3c5d3; }
#homeWork-6 a:active { color: #111; text-decoration: none; background-color: #e3c5d3; }

#homeWork-7 { 
	width: 500px;
	height: 310px;
	margin: 200px 0 0 0;
	position: relative; 
	text-align: center;
	background-color: #E07826;
	display: inline;
	float: right;
}
#homeWork-8 { 
	width: 290px;
	height: 290px;
	margin: 20px;
	position: relative; 
	text-align: center;
	background-color: #999;
	display: inline-block;
	vertical-align: top;
}

#mainWork { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #fff;
	background-image: url("images/home-1933-1.jpg");
	background-size: 400px 600px;
}
#mainWork a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}
#mainWork a:link { color: transparent; background-color: transparent; text-decoration: none; }
#mainWork a:visited { color: transparent; background-color: transparent; text-decoration: none; }
#mainWork a:hover { color: #fff; background-image: url("images/home-1933-2.jpg"); background-size: 400px 600px; text-decoration: none; }
#mainWork a:active { color: #fff; background-image: url("images/home-1933-2.jpg"); background-size: 400px 600px; text-decoration: none; }

#mainWorkb { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-image: url("images/home-hyfive-1.jpg");
	background-size: 400px 600px;
}
#mainWorkb a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}
#mainWorkb a:link { color: transparent; background-color: transparent; text-decoration: none; }
#mainWorkb a:visited { color: transparent; background-color: transparent; text-decoration: none; }
#mainWorkb a:hover { color: #fff; background-image: url("images/home-hyfive-2.jpg"); background-size: 400px 600px; text-decoration: none; }
#mainWorkb a:active { color: #fff; background-image: url("images/home-hyfive-2.jpg"); background-size: 400px 600px; text-decoration: none; }

#mainWorkc { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-image: url("images/home-jg.jpg");
	background-size: 400px 600px;
}
#mainWorkc a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}
#mainWorkc a:link { color: transparent; background-color: transparent; text-decoration: none; }
#mainWorkc a:visited { color: transparent; background-color: transparent; text-decoration: none; }
#mainWorkc a:hover { color: #fff; background-image: url("images/home-jg-2.jpg"); background-size: 400px 600px; text-decoration: none; }
#mainWorkc a:active { color: #fff; background-image: url("images/home-jg-2.jpg"); background-size: 400px 600px; text-decoration: none; }

.workTitle { 
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
	font-style: normal;
	font-size: 10px;
	letter-spacing: 4px;
	line-height: 14px;
}

.workClient { 
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	letter-spacing: 4px;
	line-height: 50px;
}

#rotate-text {
   width: 600px;
   height: 400px;
   margin: 0px 0 0 -200px;
   padding: 20px 0 0 0;
   box-sizing: border-box;
   -webkit-transform: translateY(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateY(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    /*-moz-transform-origin: right top; */
    -ms-transform: translateY(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateY(-100%) rotate(-90deg); /* Opera */
    transform: translateY(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: right bottom;
    -moz-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    -o-transform-origin: right bottom;
    transform-origin: right bottom;
}


#blankWrap { 
	width: 1000px;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workWrap { 
	width: 1000px;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workWrap img { 
	margin: 0 0 20px 0;
}

#workWrap img.lazy {
	opacity: 0;
}
#workWrap img:not(.initial) {
	transition: opacity 1s;
}
#workWrap img.initial,
#workWrap img.loaded,
#workWrap img.error {
	opacity: 1;
}

#workWrap img:not([src]) {
visibility: hidden;
}

#logos { 
	width: 300px;
	height: 230px;
	margin: 20px 0 0 0;
	padding: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	background-color: #EE19E9;
}

#casestudyWrap { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 40px 40px;
	position: relative; 
	text-align: left;
	box-sizing: border-box;
	color: #111;
	font-size: 16px;
	line-height: 24px;
}
#casestudyImage-d { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative; 
	text-align: left;
	box-sizing: border-box;
}
#casestudyImage-m { 
	display: none;
}

.example-pager { text-align: center; width: 100%; z-index: 500; top: 0px; overflow: hidden; }
.example-pager span { font-size: 30px; width: 10px; height: 10px; margin: 0 5px 0 5px; display: inline-block; color: #ccc; }
.example-pager span.cycle-pager-active { color: #a62327;}
.example-pager > * { cursor: pointer;}

.example-pager-p { text-align: center; width: 100%; z-index: 500; top: 0px; overflow: hidden; }
.example-pager-p span { font-size: 30px; width: 10px; height: 10px; margin: 0 5px 0 5px; display: inline-block; color: #ccc; }
.example-pager-p span.cycle-pager-active { color: #a62327;}
.example-pager-p > * { cursor: pointer;}


.casestudyGray { 
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 12px;
    letter-spacing: 4px;
	line-height: 34px;
	text-transform: uppercase;
	color: #666;
}


#videoWrap { 
	width: 1000px;
	height: 560px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}


#feed-1 { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	position: relative;
}
#feed-2 { 
	width: 500px;
	height: auto;
	text-align: left;
	margin: 135px 0 0 330px;
	padding: 0;
	position: relative;
}
#feed-3 { 
	width: 430px;
	height: 430px;
	text-align: left;
	margin: 130px 0 0 0;
	padding: 0;
	position: relative;
}
#feed-4 { 
	width: 340px;
	height: 340px;
	text-align: left;
	margin: 540px 0 0 0;
	padding: 0;
	position: relative;
}
#feed-5 { 
	width: 215px;
	height: 215px;
	text-align: left;
	margin: 200px 0 0 220px;
	padding: 0;
	position: relative;
}
#feed-6 { 
	width: 340px;
	height: 340px;
	text-align: left;
	margin: 240px 0 0 0;
	padding: 0;
	position: relative;
}
#feed-7 { 
	width: 350px;
	height: 350px;
	text-align: left;
	margin: 250px 0 0 0;
	padding: 0;
	position: relative;
}
#feed-8 { 
	width: 110px;
	height: 110px;
	text-align: left;
	margin: 110px 0 0 25px;
	padding: 0;
	position: relative;
}
#feed-9 { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 130px 0 0 0;
	padding: 0;
	position: relative;
}
#feed-10 { 
	width: 700px;
	height: auto;
	text-align: left;
	margin: 130px auto;
	padding: 0;
	position: relative;
}
#feed-11 { 
	width: 410px;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	position: relative;
}
#feed-12 { 
	width: 340px;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	position: relative;
}

#feed-column-L { 
	width: 440px;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	position: relative;
	float: left;
	display: inline;
}
#feed-column-R { 
	width: 340px;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	position: relative;
	float: right;
	display: inline;
}

#feed-video-450 { 
	width: 450px;
	height: 337;
	text-align: left;
	margin: 0 0 100px 0;
	padding: 0;
	position: relative;
}

#workFull { 
	width: 1000px;
	height: auto;
	margin: 0 0 20px 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#workFull { 
	width: 1000px;
	height: auto;
	margin: 0 0 20px 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#workContainer { 
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
	padding: 0 0 20px 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workCopy { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px;
	position: relative; 
	text-align: left;
	box-sizing: border-box;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 14px;
	text-transform: uppercase;
}

#homeArrowBTN {
	width: 400px;
	height: auto;
	margin: 30px auto;
	padding: 0;
	text-align: center;
	color: #000;
	position: relative;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	letter-spacing: 2px;
    font-weight: normal;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    background-image: url("images/arrow.png");
	background-position: center right;
	background-size: 400px 20px;
	background-repeat: no-repeat;
}
#homeArrowBTN a {
	display: block;
	height: auto;
	padding: 24px 20px 20px 20px;
}
#homeArrowBTN a:link { color: #3c2313; text-decoration: none; }
#homeArrowBTN a:visited { color: #3c2313; text-decoration: none; }
#homeArrowBTN a:hover { color: #b5ced0; text-decoration: none; }
#homeArrowBTN a:active { color: #b5ced0; text-decoration: none; }

#homeCopy {
	width: 500px;
	height: auto;
	margin: 0 auto;
	padding: 40px 0 80px 0;
	position: relative; 
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 14px;
	text-transform: uppercase;
}







#nHeader {
	width: 100%;
	height: 400px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#lHeader {
	width: 100%;
	height: 230px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}
#sHeader {
	width: 100%;
	height: 800px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 600px;
	height: 800px;
	margin: 0 100px 0 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 1200px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 800px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 150px;
	letter-spacing: 2px;
	line-height: 120px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 30px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
.casestudy-link { 
	font-size: 8px;
}
#XsHeadDescription { 
	width: 50%;
	height: auto;
	text-align: left;
	margin: 30px 0 30px 0;
	padding: 30px 0 30px 200px;
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	letter-spacing: 1px;
	line-height: 32px;
	color: #111;
	background-color: #faf9fb;;
	box-sizing: border-box;
	background-image: url(ximages/bg-scopy.png);
	background-size: 50px 50px;
	background-repeat: no-repeat;
	background-position: 60px 15px;
}
#sHeadDescription { 
	width: 75%;
	height: auto;
	text-align: left;
	margin: 30px 0 30px 0;
	padding: 30px;
	color: #111;
	box-sizing: border-box;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 12px;
    letter-spacing: 3px;
	line-height: 18px;
	text-transform: uppercase;
}
#sHeaderR { 
	width: 200px;
	height: 200px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 200px;
  height: 200px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}

#stokelyArrow { 
	width: 50px;
	height: 30px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 180px;
    bottom: 100px;
    z-index: 999;
	background-image: url(images/stokely-arrow.png);
	background-size: 50px 30px;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 180px;
    bottom: 100px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}
#stokelyArrow-Vn { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 180px;
    bottom: -20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}


#workL { 
	width: 350px;
	height: 100vh;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: left;
	box-sizing: border-box;
	display: inline;
	float: left;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 12px;
    letter-spacing: 3px;
	line-height: 18px;
	text-transform: uppercase;
}
.smnav a:link { color: #111; text-decoration: underline; }
.smnav a:visited { color: #111; text-decoration: underline; }
.smnav a:hover { color: #e3c4d2; text-decoration: underline; }
.smnav a:active { color: #e3c4d2; text-decoration: underline; }

.smnavON a:link { color: #111; text-decoration: none; }
.smnavON a:visited { color: #111; text-decoration: none; }
.smnavON a:hover { color: #111; text-decoration: none; }
.smnavON a:active { color: #111; text-decoration: none; }

#workR { 
	width: 1200px;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}

#hltnText { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
}
#hltn { 
	width: 200px;
	height: auto;
	margin: 40px auto;
	padding: 0;
}


#subWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#subWrapWork { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 40px 0 0;
	box-sizing: border-box;
	background-color: #DEF606;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	column-count: 3;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}

#subWrapWork p {
	width: 100%;
	display: inline-block;
	line-height: 24px;
}



#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 40px 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 370px; box-sizing: border-box; padding: 10px; min-width: 250px; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}
#portVid { 
	width: 1000px;
	height: 560px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}


#homeCallout-Blank {
	width: 300px;
	height: 300px;
	margin: 10px;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
	position: relative; 
	display: inline-block;
	vertical-align: top;
}
#homeCallout-A {
	width: 300px;
	height: 300px;
	margin: 10px;
	padding: 0 10px 0 10px;
	box-sizing: border-box;
	position: relative; 
	display: inline-block;
	vertical-align: top;
	color: #e0dfd2;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
	background-color: #111;
	font-family: din-2014, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 24px;
	text-align: justify;
}
#homeCallout-A a {
	display: block;
	height: auto;
	padding: 0;
}
#homeCallout-A a:link { color: #faf9fb; text-decoration: none; }
#homeCallout-A a:visited { color: #faf9fb; text-decoration: none; }
#homeCallout-A a:hover { color: #faf9fb; text-decoration: none; }
#homeCallout-A a:active { color: #faf9fb; text-decoration: none; }

#homeCallout-A img{
	position:absolute;
	top:0;
	left:0;
	z-index:0
}

#homeCallout-A a:hover img { 
	opacity: 0.25;
}


#homeCallout-title {
	position:absolute;
	bottom: 10px;
	font-family: din-2014, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	letter-spacing: 2px;
	line-height: 24px;
}

.hc-left { float: left; }
.hc-right { float: right; }


.control-label {
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	letter-spacing: 2px;
	line-height: 60px;
	color: #111;
}

.gform_wrapper .gform_footer input[type=submit] {
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 50px;
	letter-spacing: 2px;
	line-height: 60px;
	color: #111;
}


#workWrap img.lazy { opacity: 0; }
#workWrap img:not(.initial) { transition: opacity 1s; }
#workWrap img.initial,
#workWrap img.loaded,
#workWrap img.error { opacity: 1; }
#workWrap img:not([src]) { visibility: hidden; }


.ui-loader {
  display: none !important;
}


/*--- Clear ---*/

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

/*--- Footer ---*/

#homePFcontainer { 
	width: 100%;
	height: 350px;
	text-align: center;
	margin: 200px 0 0 0;
	padding: 0;
	background-image: url(images/bg-homepf.png);
	background-size: 100px 100px;
	background-position: bottom;
	background-repeat: repeat-x;
}
#homePF { 
	width: 350px;
	height: 350px;
	text-align: left;
	margin: 0 auto;
	padding: 0;
}

#footer {
	width: 100%;
	height: 200px;
	padding: 0;
	margin: 0;
	text-align: center;
	background-color: #fff;
}
#footerL {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px 20px 0 0;
	position: relative; 
	text-align: right;
	font-family: "Courier New", Courier, monospace;
    font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 14px;
	box-sizing: border-box;
}
#footerL a:link { color: #111; text-decoration: none; }
#footerL a:visited { color: #111; text-decoration: none; }
#footerL a:hover { color: #e3c4d2; text-decoration: none; }
#footerL a:active { color: #e3c4d2; text-decoration: none; }

.graytext { color: #999; }
.address { margin: 0 0 0 100px; }



/* tablet Wide
--------------------------------------------- */
@media (min-width: 1400px) and (max-width: 1550px) {

#workL { 
	width: 350px;
}
#workR { 
	width: 1000px;
}

.grid-sizer,
.grid-item { width: 320px; box-sizing: border-box; padding: 10px; min-width: 250px; }

}

/* tablet Wide
--------------------------------------------- */
@media (min-width: 1100px) and (max-width: 1399px) {

#workL { 
	width: 250px;
}
#workR { 
	width: 850px;
}

.grid-sizer,
.grid-item { width: 370px; box-sizing: border-box; padding: 10px; min-width: 250px; }

}


/* tablet Wide
--------------------------------------------- */
@media (min-width: 1000px) and (max-width: 1099px) {

#wrap { 
	width: 900px;
	height: 600px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#mainWork { 
	width: 300px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWork a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 300px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkb a {
	display: block;
	height: 600px;
	padding: 0;
}

#mainWorkc { 
	width: 300px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkc a {
	display: block;
	height: 600px;
	padding: 0;
}

#rotate-text {
   width: 600px;
   height: 300px;
   margin: 0 0 0 -300px;
}




#sHeaderContainer { 
	width: 1000px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 700px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}


#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 310px; box-sizing: border-box; padding: 10px; }
/* 2 columns */
.grid-item--width2 { width: 40%; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
	
}
#portVid { 
	width: 800px;
	height: 448px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}


}




/* tablet Wide
--------------------------------------------- */
@media (min-width: 850px) and (max-width: 999px) {

#wrap { 
	width: 800px;
	height: 1200px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#mainWork { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWork a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkb a {
	display: block;
	height: 600px;
	padding: 0;
}

#mainWorkc { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkc a {
	display: block;
	height: 600px;
	padding: 0;
}

#rotate-text {
   width: 600px;
   height: 400px;
   margin: 0 0 0 -200px;
}



#sHeader {
	width: 100%;
	height: 667px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 500px;
	height: 667px;
	margin: 0 50px 0 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderContainer { 
	width: 800px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 580px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 80px;
	letter-spacing: 2px;
	line-height: 80px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 50px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 100px;
    bottom: 100px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 800px;
	height: 448px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 370px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
	
}
#portVid { 
	width: 700px;
	height: 392px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}




/* tablet
--------------------------------------------- */
@media (min-width: 768px) and (max-width: 849px) {
	
#wrap { 
	width: 700px;
	height: 1050px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#mainWork { 
	width: 350px;
	height: 525px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 350px 525px;
}
#mainWork a {
	display: block;
	height: 525px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 350px;
	height: 525px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 350px 525px;
}
#mainWorkb a {
	display: block;
	height: 350px;
	padding: 0;
}

#mainWorkc { 
	width: 350px;
	height: 525px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 350px 525px;
}
#mainWorkc a {
	display: block;
	height: 350px;
	padding: 0;
}

#rotate-text {
   width: 525px;
   height: 350px;
   margin: 0 0 0 -175px;
}


#sHeader {
	width: 100%;
	height: 667px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 500px;
	height: 667px;
	margin: 0 50px 0 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 750px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 500px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 80px;
	letter-spacing: 2px;
	line-height: 80px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 100px;
    bottom: 100px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 700px;
	height: 392px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 370px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
	
}
#portVid { 
	width: 700px;
	height: 392px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}

/* wide mobile
--------------------------------------------- */
@media (min-width: 668px) and (max-width: 767px) {

#wrap { 
	width: 600px;
	height: 900px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#mainWork { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWork a {
	display: block;
	height: 450px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWorkb a {
	display: block;
	height: 300px;
	padding: 0;
}

#mainWorkc { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWorkc a {
	display: block;
	height: 300px;
	padding: 0;
}

#rotate-text {
   width: 450px;
   height: 300px;
   margin: 0 0 0 -150px;
}


#sHeader {
	width: 100%;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 400px;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 650px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 500px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 80px;
	letter-spacing: 2px;
	line-height: 80px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 600px;
	height: 336px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 315px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
	
}
#portVid { 
	width: 600px;
	height: 336px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}

/* wide mobile
--------------------------------------------- */
@media (min-width: 568px) and (max-width: 667px) {

#wrap { 
	width: 400px;
	height: 1800px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#mainWork { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWork a {
	display: block;
	height: 600px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkb a {
	display: block;
	height: 600px;
	padding: 0;
}

#mainWorkc { 
	width: 400px;
	height: 600px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 400px 600px;
}
#mainWorkc a {
	display: block;
	height: 600px;
	padding: 0;
}

#rotate-text {
   width: 600px;
   height: 400px;
   margin: 0 0 0 -200px;
}

#sHeader {
	width: 100%;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 400px;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 550px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 400px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 80px;
	letter-spacing: 2px;
	line-height: 80px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 500px;
	height: 280px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 280px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
	
}
#portVid { 
	width: 500px;
	height: 280px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}


/* wide mobile
--------------------------------------------- */
@media (min-width: 480px) and (max-width: 567px) {

#sHeader {
	width: 100%;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 400px;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: right;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 480px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 365px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 80px;
	letter-spacing: 2px;
	line-height: 80px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 18px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 450px;
	height: 252px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 40px 0 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: right;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 300px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 50%;
	height: auto;
	margin: 0;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}
#portVid { 
	width: 400px;
	height: 224px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}



/* wide mobile
--------------------------------------------- */
@media (min-width: 400px) and (max-width: 479px) {

#sHeader {
	width: 100%;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 400px;
	height: 533px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: left;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 400px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 285px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	letter-spacing: 2px;
	line-height: 60px;
	color: #111;
}
#sHeadCopy { 
	width: 300px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 16px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 100px;
	height: 100px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 100px;
  height: 100px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 0px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 380px;
	height: 213px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 20px 0 20px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: left;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 300px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}
#portVid { 
	width: 340px;
	height: 190px;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

}



/* wide mobile
--------------------------------------------- */
@media (min-width: 360px) and (max-width: 399px) {

#sHeader {
	width: 100%;
	height: 480px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 360px;
	height: 480px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: left;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 360px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 250px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	letter-spacing: 2px;
	line-height: 60px;
	color: #111;
}
#sHeadCopy { 
	width: 250px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 16px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 80px;
	height: 80px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 80px;
  height: 80px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	width: 20px;
	height: 100px;
	text-align: left;
	margin: 0;
	padding: 0;
	position: absolute;
    left: 50px;
    bottom: 20px;
    z-index: 999;
	background-image: url(images/arrow-v.png);
	background-size: 20px 100px;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 300px;
	height: 168px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 20px 0 20px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: left;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 300px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}

}


/* mobile
--------------------------------------------- */
@media (max-width: 479px) {

#casestudyImage-d { 
	display: none;
}
#casestudyImage-m { 
	display: inherit;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: relative; 
	text-align: left;
	box-sizing: border-box;
}

}

/* mobile
--------------------------------------------- */
@media (max-width: 359px) {
	
#sHeader {
	width: 100%;
	height: 400px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #f1f1f1;
}

#sHeaderPhoto {
	width: 300px;
	height: 400px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #fff;
	float: left;
}

#sHeaderWrap { 
	width: 100%;
	height: 300px;
	text-align: left;
	position: absolute;
    left: 0px;
    top: 0px;
    z-index: 999;
}

#sHeaderContainer { 
	width: 300px;
	height: auto;
	margin: 0 auto; 
	position: relative; 
	text-align: left;
}

#sHeaderL { 
	width: 200px;
	height: auto;
	text-align: left;
	margin: 15px 0 0 15px;
	padding: 0;
	display: inline;
	float: left;
}
#sHeadLogo { 
	width: 150px;
	height: auto;
	text-align: left;
	margin: 0 0 20px 0;
	padding: 0;
}
#sHeadTitle { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 0;
	padding: 0;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 60px;
	letter-spacing: 2px;
	line-height: 60px;
	color: #111;
}
#sHeadCopy { 
	width: 250px;
	height: auto;
	text-align: left;
	margin: 20px 0 0 0;
	padding: 0;
	font-weight: 400;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 4px;
	line-height: 16px;
	text-transform: uppercase;
	color: #111;
}
#sHeaderR { 
	width: 80px;
	height: 80px;
	text-align: left;
	margin: 10px 0 0 0;
	padding: 0;
	display: inline;
	float: right;
	font-size: 36px;
	color: #fff;
}
.menu-icon-work {
  background-color: transparent;
  border: none;
  color: white;
  width: 80px;
  height: 80px;
  padding: 0;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 0;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
}
#stokelyArrow-V { 
	display: none;
}

#blankWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	padding: 40px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}
#workWrap { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}

#videoWrap { 
	width: 300px;
	height: 168px;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	background-color: #fff;
}

#workL { 
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0 20px 0 20px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}
#workR { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inherit;
	float: none;
}

#hltnText { 
	width: 250px;
	height: auto;
	margin: 0 auto;
	padding: 0;
	display: inline;
	float: left;
}
#hltn { 
	width: 180px;
	height: auto;
	margin: 10px 0 10px 0;
	padding: 0;
	display: inline;
	float: left;
}

#subWrapPort { 
	width: 100%;
	height: auto;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	padding: 0 0 0 0;
	box-sizing: border-box;
}

/* fluid 5 columns */
.grid-sizer,
.grid-item { width: 300px; box-sizing: border-box; padding: 10px; }

#portOneCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
}
#portTwoCol { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 10px;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	display: inline;
	float: left;
}

}





@media only screen and (max-width: 999px) {
	
	
#lHeader {
	width: 100%;
	height: 170px;
}

#headerTag { 
	display: none;
}
#homeIND {
	display: none;
}
#homeContainer-A { 
	width: 100%;
	height: auto;
	margin: 200px 0 200px 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeContainer-B { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeContainer-C { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 200px 0 0 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}

#homeWork-1 { 
	width: 500px;
	height: 450px;
	margin: 0px auto;
	padding: 0;
	text-align: right;
	position: relative;
	z-index: 9991;
	box-sizing: border-box;
}
#homeWork-2 { 
	width: 500px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: right;
}
#homeWork-3 { 
	width: 340px;
	height: 340px;
	margin: 275px 0 0 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: left;
}
#homeWork-4 { 
	width: 250px;
	height: 400px;
	margin: 0 230px 0 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: right;
}
#homeWork-5 { 
	width: 370px;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: left;
}
#homeWork-6 { 
	width: 300px;
	height: auto;
	margin: 80px 160px 0 0;
	position: relative; 
	text-align: right;
	display: inline;
	float: right;
}


}

@media only screen and (max-width: 900px) {
	
#homeContainer-A { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeContainer-B { 
	width: 100%;
	height: auto;
	margin: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeContainer-C { 
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	position: relative; 
	text-align: center;
	box-sizing: border-box;
	z-index: 9990;
}
#homeWork-1 { 
	width: 500px;
	height: auto;
	margin: 0px auto;
	padding: 0;
	text-align: right;
	position: relative;
	z-index: 9991;
	box-sizing: border-box;
}
#homeWork-2 { 
	width: 500px;
	height: auto;
	margin: 40px;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-3 { 
	width: 340px;
	height: auto;
	margin: 40px;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-4 { 
	width: 250px;
	height: auto;
	margin: 40px;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-5 { 
	width: 370px;
	height: auto;
	margin: 40px;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-6 { 
	width: 300px;
	height: auto;
	margin: 40px;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}

#header {
	width: 100%;
	height: 70px;
	margin: 0; 
	position: relative; 
	text-align: left;
	background-color: #faf9fb;
}

.headerWrap { 
	width: 100%;
	height: 70px;
	margin: 0; 
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998; 
	text-align: left;
}
.headerL { opacity: 1.0; }

#logoContainer { 
	display: none;
}

#sHeadDescription { 
	width: 100%;
	height: auto;
	text-align: left;
	margin: 30px 0 30px 0;
	padding: 30px;
	color: #111;
	box-sizing: border-box;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 16px;
	text-transform: uppercase;
}

}

@media (max-width: 567px) {

#wrap { 
	width: 300px;
	height: 1350px;
	margin: 40px auto;
	position: relative; 
	text-align: center;
	background-color: #eaeef3;
	box-sizing: border-box;
}

#homeArrowBTN {
	width: 300px;
	height: auto;
	margin: 30px auto;
	padding: 0;
	text-align: center;
	color: #000;
	position: relative;
	font-family: alternate-gothic-no-1-d,sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
	letter-spacing: 2px;
    font-weight: normal;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    background-image: url("images/arrow.png");
	background-position: center right;
	background-size: 400px 20px;
	background-repeat: no-repeat;
}

#homeCopy {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 40px;
	box-sizing: border-box;
	position: relative; 
	text-align: center;
	font-family: "Courier New", Courier, monospace;
	font-weight: 400;
    font-style: normal;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: none;
    font-smoothing: antialiased;
    font-size: 10px;
    letter-spacing: 4px;
	line-height: 14px;
	text-transform: uppercase;
}

#mainWork { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWork a {
	display: block;
	height: 450px;
	padding: 0;
	-webkit-transition: all ease-out .5s;
	-moz-transition: all ease-out .5s;
	-o-transition: all ease-out .5s;
	transition: all ease-out .5s;
}

#mainWorkb { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWorkb a {
	display: block;
	height: 300px;
	padding: 0;
}

#mainWorkc { 
	width: 300px;
	height: 450px;
	margin: 0;
	position: relative; 
	text-align: center;
	display: inline;
	float: left;
	color: #3c2313;
	background-size: 300px 450px;
}
#mainWorkc a {
	display: block;
	height: 300px;
	padding: 0;
}

#rotate-text {
   width: 450px;
   height: 300px;
   margin: 0 0 0 -150px;
}

}


@media (max-width: 500px) {

#homeWork-1 { 
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0;
	text-align: right;
	position: relative;
	z-index: 9991;
	box-sizing: border-box;
}
#homeWork-2 { 
	width: 100%;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-3 { 
	width: 340px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-4 { 
	width: 250px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-5 { 
	width: 370px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-6 { 
	width: 300px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}

}

@media (max-width: 400px) {

#homeWork-1 { 
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0;
	text-align: right;
	position: relative;
	z-index: 9991;
	box-sizing: border-box;
}
#homeWork-2 { 
	width: 100%;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-3 { 
	width: 280px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-4 { 
	width: 250px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-5 { 
	width: 280px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}
#homeWork-6 { 
	width: 280px;
	height: auto;
	margin: 40px 0 40px 0;
	position: relative; 
	text-align: right;
	display: inline-block;
	float: none;
}

}