@charset "utf-8";
/* CSS Document */
body, nav, div, p, a, pre, input, ul, span, img {
	margin:0;
	padding:0;
	border-style:none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

body {
    background: #fff;
    color: #999b9d;
    margin: 0 auto;
    width: 100%;
    height: auto;
    position: absolute;
}

#mainWrapper {
    width: 100%;
    height: 960px;
    transition: right 0.15s ease-in;
    position: relative;
    background-color: rgba(255, 255, 255,1);
}

.noselect {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	-webkit-tap-highlight-color: transparent;	
}

@font-face {
	font-family: nobelB;
	src: url('../fonts/Nobel BL Book.woff');
    -moz-osx-font-smoothing: grayscale;
	
}

@font-face {
	font-family: nobelBold;
	src: url('../fonts/nobelbold-webfont.woff');
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
	font-family: georgiai;
	src: url('../fonts/georgiai.woff');
    -moz-osx-font-smoothing: grayscale;
}


/* HEADER ELEMENTS */
header {
	background: rgb(38,35,36);
	height:148px;
	margin: 0 auto;
	width: 100%;
	z-index: 2;
	position: relative;
}

#kscopeHeader {
	margin: 0 auto;
	width: auto;
	z-index: 2;
	text-align:center;
	background-color: #262324;
}

#kscopeHeader img {
	height: 82px;
    padding: 27px 0 7px 0;
    width: 285px;
	cursor: pointer;
	
}

nav {
    margin: 0 auto;
    height: 25px;
    position: relative;
    z-index: 5;
	pointer-events: none;
}

nav li a{
	pointer-events:auto;
}

.sideNav {
    position: fixed;
    right: 0;
    width: 150px;
    background-color: black;
    height: 100%;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mobileNavToggle {
	visibility:hidden;
    position: absolute;
    right: 20px;
    top: 55px;
    width: 22px;
    height: 22px;
	cursor:pointer;
}

.topBar{
    width: 22px;
    height: 2px;
    background-color: #898989;
    -webkit-transition: -webkit-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -moz-transition: -moz-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -ms-transition: -ms-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -o-transition: -o-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    transition: transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 0;
    right: 0;
}

.midBar{
    width: 22px;
    height: 2px;
    background-color: #898989;
    -webkit-transition: -webkit-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -moz-transition: -moz-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -ms-transition: -ms-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -o-transition: -o-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    transition: transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 7px;
    right: 0;
}

.botBar{
    width: 22px;
    height: 2px;
    background-color: #898989;
    -webkit-transition: -webkit-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -moz-transition: -moz-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -ms-transition: -ms-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -o-transition: -o-transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    transition: transform .1s 0s ease-in-out,top .1s .1s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 14px;
    right: 0;
}

#navList {
    margin: 0 auto;
    width: 735px;
    text-align: center;
    padding: 0 0 0 8px;
	cursor:pointer;
	pointer-events: none;
}

#navList li {
    display: inline-block;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-family: nobelB;
    font-weight: bolder;
    list-style: none;
    line-height: 25px;
    color: #999b9d;
    height: 18px;
    text-align: center;
    padding: 0 17.5px 0 11.5px;
	pointer-events: none;
}

#navList li a {
	display:inline-block;
	height:23px;
	text-decoration:none; 
	color:#999b9d;
    padding-left: 2px;	
	
}

#navList li a:hover {
	border-bottom:1px solid rgb(255,215,0);
}

#navList li a.current{
	border-bottom:1px solid rgb(255,215,0);
}

#navList li a:visited {
	color:#999b9d;
} 

#navList li a:active {
	color:#999b9d;
}


/* MAIN PAGE ELEMENTS */

#sliderContainer{
	padding-top: 32px;	
	max-width:864px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

#sliderFrame{
    transform: translateX(-33.333333333%);
	-webkit-transform: translateX(-33.333333333%);
	position:relative;
	max-height:314px;
	overflow:hidden;
}

.sliders{
	max-width:864px;
	color:white;
	text-align:center;
	float:left;
	position:relative;
}

#aLeft {
    width: 50px;
    height: 100%;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/scroller/leftArrowLarge.svg");
	background-repeat:no-repeat;
	background-position: center;
	opacity:0.5;	
}

#aLeft:hover {
    background: url("../images/scroller/leftArrowLargeHover.svg");
	background-repeat:no-repeat;
	background-position: center;
}

#aRight {
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: url("../images/scroller/rightArrowLarge.svg");
	background-repeat:no-repeat;
	background-position: center;
	opacity:0.5;
}

#aRight:hover {
    background: url("../images/scroller/rightArrowLargeHover.svg");
	background-repeat:no-repeat;
	background-position: center;
}

.sliderImages{
	left:0;
	max-width:864px;
	width:100%;
	height:100%;
	position:relative;
	transition: width 0.4s ease-out;
}

.numbering{
	positon:absolute;
}

.leftFrame{
	width:0px;
	transition: max-width 1s ease-in-out;
	position:relative;
	float:left;
}

.rightFrame{
	width:0px;
	transition: width 1s ease-in-out;
	position:relative;
	float:left;
}


#contentWrapper {
    margin: 0 auto;
    width: 100%;
}

#imageViewerWrapper {
    padding-top: 32px;
	width:100%;	
    margin: 0 auto;
}

#imageViewer {
    width: 864px;
    margin: 0 auto;
    height: 347px;
	overflow:hidden;
}

#scrollNavViewer {
    width: 864px;
    height: 315px;
    position: absolute;
    opacity:0;
    z-index:2;
    overflow:hidden;
    cursor: pointer;
}

#scrollNavViewer:hover {
	opacity:1;
	transition: 0.3s ease-out;
}

#scrollLeftViewer {
    position: absolute;
	left:-10px;
    z-index: 3;
    height: 100%;
    width: 50px;
	transition: 0.2s ease-out;
}

#scrollLeftViewer:hover {
	left:0px;
}

#leftScrollLarge {
	left:5px;
	width:50px;
	height:50px;
	background:url(../images/scroller/leftArrowLarge.svg);		
	position: relative;
	top: 50%;
	opacity:0.5;
	transform: translateY(-50%);
	transition: 0.2s ease-out;
}

#leftScrollLarge:hover {
	transition:0.2s ease-out;
	background:url(../images/scroller/leftArrowLargeHover.svg);
}

#rightScrollLarge {
	width:50px;
	height:50px;
	background:url(../images/scroller/rightArrowLarge.svg);		
	position: relative;
	right:5px;
	top: 50%;
	opacity:0.5;
	transform: translateY(-50%);
	transition: 0.2s ease-out;
}

#rightScrollLarge:hover {
	transition:0.2s ease-out;
	background:url(../images/scroller/rightArrowLargeHover.svg);
}

#scrollRightViewer {
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 50px;
	right: -10px;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */
	transition: 0.2s ease-out;
}

#scrollRightViewer:hover {
	right:0px;
}

#bannerType {
    float: left;
    width: 100%;
    padding: 7px 0 7px 0;
    position: absolute;
	bottom: 0px;
    color: #ddd;
    font-size: 0.8em;
    letter-spacing: 0.275em;
    font-family: nobelB;
    text-align: center;
    background: rgba(35,35,36,0.8);
    text-transform: uppercase;
}

#bannerSS {
	height:100%;
	overflow:hidden;
	position:relative;
	text-align:center;
}

.tempIMGBannerOff {
	width: 0px;
	float: left;
	overflow:hidden;
    transition:             width 0.2s ease-out;
        -moz-transition:    width 0.2s ease-out;
        -ms-transition:     width 0.2s ease-out;
        -o-transition:      width 0.2s ease-out;
        -webkit-transition: width 0.2s ease-out;
}

.tempIMGBannerOff {
	height: 100%;	
	width: 0px;
	float: left;
	overflow:hidden;
}

.tempIMGBannerQuickOn {
	height: 100%;
	float: left;
	right: 0px;
	overflow:hidden;
}

.tempIMGBannerOn {
	height: 100%;	
	float: left;
	overflow:hidden;
}

.tempIMGBanner {
	height:100%;
	width:100%;
}

#imageScrollerWrapper {
	text-align:center;
	margin-top:13px;
}

#imageScrollerWrapper img {
    width: 163px;
    display: inline-block;	
}

#imageScroller {
	display:inline-block;	
}

#imageScrollCont {
	float: left;	
}

#leftScroll {
	width:20px;
	height:20px;
	float:left;
	background:url(../images/scroller/leftArrow.svg);		
}

#leftScroll:hover {
	transition:0.4s ease-out;
	background:url(../images/scroller/leftArrowHover.svg);
}

#rightScroll {
	width:20px;
	height:20px;
	display:inline-block;
	background:url(../images/scroller/rightArrow.svg);		
}

#rightScroll:hover {
	transition:0.4s ease-out;
	background:url(../images/scroller/rightArrowHover.svg);
}

.imageScrollIMG {
	transition:0.4s ease-out;
	display:inline-block;
	width:20px;
	height:20px;
	background:url(../images/scroller/bulletCircle.svg);
}

.imageScrollIMG:hover {
	transition:0.4s ease-out;
	background:url(../images/scroller/bulletCircleHover.svg);
}

.imageScrollPressed {
	display:inline-block;
	width:20px;
	height:20px;
	background:url(../images/scroller/bulletCircleHover.svg);
}

#contents {
	text-align:center;
    padding-top: 24px;
    width: auto;
    margin: 0 auto 20px auto;
}

#services {
    text-align: center;
    padding: 0px 25px;
}

h1.design, h1.animation{
	margin:0 5px 0 5px;
}

h1.design::after, h1.animation::after{
    content: '.';
    position: relative;
    right: -3px;
    clear: both;
}

h1.postProduction{
	margin: 0 0.33em;
}

h1 {
	font-size: 1.1em;
    letter-spacing: 0.275em;
    font-family: nobelB;
    text-transform: uppercase;
	text-align: center;
	display:inline;
}

footer {
	width:100%;
	text-align:center;
	display:inline-block;
	position:relative;
	z-index: 4;
}

.footerSpacer {
    padding-top: 11px;
    border-top: 1px #d3d3d3 solid;
    width: 100%;
	max-width:864px;
    display: block;
    margin: 28px auto 0 auto;
}


.footerSpacer::after {
	content:''; display: block; clear:both;	
}

h2 {
    font-size: 0.75em;
    letter-spacing: 0.275em;
    font-family: nobelB;
    text-align: center;
    text-transform: uppercase;
    display: inline;
}

h2.road::after, h2.city::after, h2.country::after {
    content: '.';
    position: relative;
    clear: both;
}

h3 {
	font-weight:normal;
	
	/*
    letter-spacing: 0.1em;
    font-family: nobelB;
    text-transform: uppercase;
	font-size: 1em;
	font-weight:normal;
	margin:0;
	padding:0;
	text-align:center;
    -webkit-margin-after: 1em;
	*/
}

h3 a{
    color: #999b9d;
    text-decoration: none;	
}

h4 {
	font-size: 0.75em;
    letter-spacing: 0.275em;
    font-family: nobelB;
    text-transform: uppercase;
	font-weight:normal;
	margin:0;
	padding:0;
	text-align:center;
}

pre br{
    line-height: 29px;
}

.KSBody {
    font-family: georgiai;
	font-size: 1em;
    letter-spacing: 0.014em;
	padding-top: 10px;
}

#vidThumbnails {
	width:100%;
	height:106px;
	margin: 0 auto 14px auto;
	margin-top:55px;
	text-align:center;
	position:relative;
	overflow:hidden;
	cursor:pointer;
}

.vidThumbnailsWrap {
	position:relative;
	width:102px;
	height:102px;
	display:inline-block;
    margin: 3px 3.45px 3px 3.45px;
	padding:0;
}

.vidThumbnailsImages {
	position:absolute;
	display:block;
	z-index:1;
	width: 100%;
	height:100%;
}

.thumbNailTitleWrap:hover {
}

.thumbWork {
	position:absolute;	
}

.tempTitleP2 {
	text-transform:uppercase;
    padding: 0 0 0 5px;
    color: #FFF;
    font-family: nobelBold;
    font-size: 1.2em;
    letter-spacing: 0.25em;
    text-align: center;
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    line-height: 0.9em;
    width: 100%;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}


.tempTitleP {
	text-transform:uppercase;
    padding: 0 0 0 5px;
    color: #FFF;
    font-family: nobelBold;
    font-size: 1em;
    letter-spacing: 0.25em;
    text-align: center;
    max-width: 97px;	
    /* position: absolute; */
    /* top: 50%; */
    /* transform: translateY(-50%); */
    line-height: 0.9em;
    width: 100%;
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.tempSubtitleP {
    padding: 0 3px 0 0;
	margin:3px;
    color: #FFF;
    font-family: nobelB;
    font-size: 0.5em;
	letter-spacing:0.25em;
    text-align: center;
	line-height:1.15em;
}

.thumbNailTitleWrap {
    width: 100%;
    height: 100%;
	top:0;
	left:0;
    display: table;;
	z-index:2;
	opacity:0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.41+0,0.45+0,0.8+100 */
	background: -moz-linear-gradient(top,  rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.45)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.8) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.8) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0.45) 0%,rgba(0,0,0,0.8) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#73000000', endColorstr='#cc000000',GradientType=0 ); /* IE6-9 */
	transition: 0.6s ease-out;
	position:absolute;
	
}

.indexThumbnailTitleWrap {
    width: 102px;
    height: 102px;
    display: table;
}

#moreWork {
    background: url(../images/buttons/moreWork.svg);
    height: 19px;
    width: 130px;
    margin: 0 auto;
	background-repeat:no-repeat;
	cursor:pointer;
}

#moreWork:hover {
	transition:0.4s ease-out;
	background:url(../images/buttons/moreWorkHover.svg);
    height: 19px;
    width: 130px;
	background-repeat:no-repeat;	
}

.moreWorkClass{
    background: url(../images/buttons/moreWork.svg);
    height: 19px;
    width: 130px;
    margin: 35px auto 0 auto;
    background-repeat: no-repeat;
    cursor: pointer;
}

.moreWorkClass:hover {
	transition:0.4s ease-out;
	background:url(../images/buttons/moreWorkHover.svg);
    height: 19px;
    width: 130px;
	background-repeat:no-repeat;	
}


/* INTERACTIVE STANDALONE PLAYER PAGE ELEMENTS */

.interactiveCont{
	line-height:0px;
	/* margin:8px auto 0 auto; */
	text-align: left;
	width: 864px;
}

.interactiveWin {
    width: 864px;
    height: 700px;
    overflow:hidden;
}
.threeDi{
    opacity: 1;
    height: 700px;
    width: 864px;
    overflow:hidden;
	
	position:relative;
}



/* REWORKED INTERACTIVE MAIN PAGE */

.articleWrapper{
	width:600; 
	margin:0 auto;
}

.threeDIHeader{
	margin:11 0 0 30;
	width:600px; 
	font-family:georgiai;
	text-align:left;
	font-size:1.15em;
	letter-spacing: 1px;
}

.intBullet {
	float:left;
	width:20px;
	height:170px;
	margin: 77 17 0 0;
}

.intHeader {
	font-size: 37px;
	margin:0;
	line-height: 37px;
	letter-spacing: 1px;
	padding:0;
	margin-bottom: 30px;
}
.threeDiHeader p:not(.intHeader){
	margin-bottom: 21px;
	line-height: 25px;
	letter-spacing: 0.03em;
	white-space: pre-line;
}

.intHeart{
	height:40px;
	width:40px;
	position:relative;
	top:10px;
}

.threeDIFooter{
	margin:45 0 0 30;
    margin-bottom: 0px;
}

.threeDIFooter p:not(.intTest){
	text-align: left;
	font-size:1.15em;
	margin-top:0px;
	line-height: 30px;
	letter-spacing: 0.005em;
	white-space: pre-line;
	font-family:georgiai;	
}

.intTest{
	text-align: left;
	font-size:1.15em;
	margin: 7 0 0 30; 
	font-family:georgia;
	font-weight:bold;
}


.tempBackground{
	position:absolute;
	z-index: 10;
	top:-55;
	left:-262;
	pointer-events: none;
	opacity:0.2;
	display:none;
}

.threeDIButton{
	width:100%;
    height: auto;
	position:relative;
	margin: 49 0 0 0
}

.intHoverButton{
	position:absolute;
	background-color:black;
	opacity:0;
	z-index:10; 
	width:100%; 
	height:100%;
	transition:opacity 0.2s ease-out;
	pointer-events:auto;
	cursor: pointer;
}

.threeDIButtonWrapper:hover .intHoverButton {
	opacity:0.125;
	box-shadow: 2px 2px 2px black;
}

.threeDIButtonWrapper{
	transition:opacity 0.2s ease-out;

}

#threeDIlot {
    position: relative;
    top: 0;
    left: 0;
	width:100%;
	height:auto;
}

.threeDIVid{
	position:absolute;
	bottom:1;
	right:-1;
	pointer-events: none;
	height:70%;
	transition: height 0.2s ease-out;	
}

.threeDIButtonWrapper:hover .threeDIVid{
}

.threeDIButtonWrapper{
	background-color:#FBFBFB;
	pointer-events: none;
}

/* WORK PAGE ELEMENTS */

.thumbWrapper{
	line-height:0px;
	margin:8px auto 0 auto;
    text-align: left;
}

.thumbContainer{
	display:inline-block;
	margin-left:8px;
	margin-right:8px;
	margin-bottom:16px;
	position:relative;
    overflow: hidden;	
}

.noMargin{
	margin-left:0;
	margin-right:0;
}

.thumbBoxes {
	width:100%;
}

.thumbTitleWrap {
	background-color:black;
	opacity:0;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
    transition: opacity 0.6s ease-out;
	z-index:1;	
	
}

.thumbTitleWrap:hover {
	opacity:0.8;
}

.thumbClick {
	opacity:0;
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
    display: table;	
	z-index:2;
    transition: opacity 0.6s ease-out;
    background-color: rgba(0,0,0,0.8);	
	overflow:hidden;
	cursor:pointer;
}

#archives {
    background: url(../images/buttons/archives.svg);
    height: 19px;
    width: 130px;
    margin: 0 auto;
    margin-top: 7px;
	cursor:pointer;
}

#archives:hover {
	transition:0.4s ease-out;
	background:url(../images/buttons/archivesHover.svg);
}

.grid {
  background: #DDD;
}

#workSizer {
    text-align: left;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
}

.grid-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 8px;
    width: 204px;
    height: 204px;
	overflow: hidden;
}

.grid-item img {
    width: 204px;
    height: 204px;
}

.thumbNailTitleWrap:not(.indexThumbnailTitleWrap) {
    width: 204px;
    height: 204px;
}



#workSizer {
    max-width: 880px;
    margin: 0 auto;
    line-height: 0;	
}

workGrid::after{ content:''; display: block; clear:both;}

iframe:not(.gMap):not(#showReel):not(.threeDi) {
    background-color: black;
    display: block;
    margin: 0 auto;
    opacity: 0;
    height: 0;	
    position: absolute;
    top: 0;
    left: 0;	
}

#map{
    width: 864px;
    height: 245px;
    display: inline-block;
    position: relative;
    overflow: hidden;
	cursor:pointer;
}

/* THUMBNAILS VIDEO PAGE */
/* Center Image on Page */
.centerImgDiv {
	position:fixed;
	top:0;
	left:0;
    height: 100%;      /* equals max image height */
    width: 100%;
    white-space: nowrap;
    text-align: center; 
	margin: 0;
	background-color:rgba(0,0,0,0.85);
	z-index:5;
}


.centerImgHelper{
    display: inline-block;
    height: auto;
	width: 90%;
    vertical-align: middle;

	
}

.centerFrameCont {
    height: 100%;      /* equals max image height */
    width: 100%;
    white-space: nowrap;
    text-align: center; 
	margin: 0;
}

.centerFrameCont:before,
.centerFrameCont {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
	margin:0;
}
/*  Player  */


#playerImage{
    position: relative;
    width: 864px;
    margin: 0 auto;
}

#playerImgCont {
    display: block;
    margin: 0 auto;
	background-size:auto;
}

#lrgPlayerBtn {
    position: absolute;
    width: 864px;
    height: 100%;
	background-image:url(../images/buttons/playButtonLRG.svg);
	opacity:0.7;
    top: 0;
    left: 0;
	transition:opacity 0.3s ease-in-out;
}

#lrgPlayerBtn:hover {
	opacity:1;
	cursor:pointer;	
}

.videoThumbnailSml {
	display:inline-block;
    margin: 8px;
    max-width: calc(50% - 16px);	
	position:relative;
	background-color:black;
    cursor: pointer;	
}

.videoThumbnailSml:hover{
}

.videoThumbnailSml img {
    width: 100%;
    height: auto;
}

.videoThumbnailSml img{
	opacity: 1;
	transition:opacity 0.3s ease-in-out;
}

.videoThumbnailSml img:hover{
	opacity: 0.45;
}

.video3upThumbnailSml {
	display:inline-block;
    margin: 8px;
    max-width: calc(33.33% - 16px);	
	max-height: 239px;
	position:relative;
	background-color:black;
    cursor: pointer;	
}

.video3upThumbnailSml:hover{
}

.video3upThumbnailSml img {
    width: 100%;
    height: auto;
}

.video3upThumbnailSml img{
	opacity: 1;
	transition:opacity 0.3s ease-in-out;
}

.video3upThumbnailSml img:hover{
	opacity: 0.45;
}


.videoThumbnailSml2 {
	display:inline-block;
    margin: 8px;
    max-width: 424px;	
	max-height: 239px;
	position:relative;
}

.videoThumbnailSml2 img {
    width: 100%;
    height: auto;
}

.thumbVidTitle {
	color:#646464;
	text-align: center;
    display: block;
	margin-left:10px;
	margin-right:10px;
    margin-top: 21px;
    margin-bottom: 0.35em;
    letter-spacing: 0.261em;
}

.agency {
	color:#646464;
	font-family: nobelB;
    font-size: 0.70em;
    text-transform: uppercase;
    text-align: center;
    margin:0;
    letter-spacing: 0.26em;
}

.thumbVidSpiel {
	max-width: 840px;
    margin: 7px auto 0 auto;
    text-align: center;
    padding: 10px 40px 0 40px;
}

#spielImage {
    padding: 25px 0 0 0;
	width:880px;
}


.imagesText {
	color:#646464;
    font-family: nobelB;
    font-size: 0.70em;
    text-transform: uppercase;
    text-align: center;
	margin: 28px 0 0 0;
    letter-spacing: 0.26em;	
	font-weight: bolder;
}

.thumbnailSpacer {
    border-top: 1px #d3d3d3 solid;
    width: 100%;
	max-width:864px;
    display: block;
    margin: 40px auto 0 auto;
}

.relatedVids {
    margin: 9px auto 0 auto;
    text-align: center;
    width: 880px;
    line-height: 0px;	
}

.smallPlayerBtn {
    width: 100%;
    height: 100%;
	background-image: url(../images/buttons/playButtonSML.svg);	
    background-color: rgba(0,0,0,0);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
	transition:background-color 0.35s ease-in-out;
	cursor:pointer;
}

.smallPlayerBtn:hover {
    background-color: rgba(0,0,0,0.45);
}

/* ABOUT US ELEMENTS */
#basePhotos {
	margin-top:50px;
	width:100%;
	text-align:center;
}

#basePhotos img {
    display: block;
    margin: 0 auto;
}

.ourServices{
	margin-top:36px;
	margin-bottom: 8px;
	display: inline-block;
}

.servicesText {
	padding: 0 50px;
}

.servicesText span:after{
    content: '\a';
	white-space: pre;	
}

.textBreak {
	text-align:center;
	line-height: 1.5em;
	margin-top: 33px;
}

.producer {
    margin: 36px 0 10px 0;
    display: inline-block;
}

/* REEL ELEMENTS */
.videoWrapper {
	text-align:center;
	padding-top:8px
}

/* CONTACT US ELEMENTS */

#mapCont {
	text-align:center;
}

/* FOOTER ELEMENTS */
.ui-button-icon-only .ui-icon {
	left:0;
	top:0;
	width:30px;
	height:30px;
	margin:0;
	padding:0;
-webkit-appearance: none;	
	background-color:red;
}

#facebook {
    background-image: url(../images/icons/facebookGreyIcon.svg);
	width:27px;
	height:27px;
	margin:0 2px;
	padding:0;
	background-repeat: no-repeat;
    background-size: contain;	
	-webkit-appearance: none;
	border-radius:5px;
	border-style:none;
	cursor:pointer;
}

#facebook:hover {
    background-image: url(../images/icons/facebookClrIcon.svg);
}

#vimeo {
    background-image: url(../images/icons/VimeoGreyIcon.svg);
	width:27px;
	height:27px;
	margin:0 2px;
	padding:0;
	background-repeat: no-repeat;
    background-size: contain;	
	-webkit-appearance: none;
	border-radius:5px;
	border-style:none;
	cursor:pointer;
}

#vimeo:hover {
    background-image: url(../images/icons/VimeoClrIcon.svg);
}

#socialMediaCont {
	text-align:center;	
	margin: 7px 0px;
}

@-ms-viewport{
  width: device-width;
}


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

#workSizer {
    text-align: left;
    max-width: 660px;
    margin: 0 auto;
}

.relatedVids {
    width: 100%;
    line-height: 0px;	
}
	
#spielImage {
    padding: 10px 0 0 0;
	width:100%;
}

.videoThumbnailSml {
    margin: 8px;
    width: calc(50% - 16px);
    width: -webkit-calc(50% - 16px);
    width: -moz-calc(50% - 16px);
}

.tempTitleP2 {
    font-size: 0.7em;
}

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

#services {
    text-align: center;
    padding: 20px 20px 0px 20px;
}

#basePhotos {
	margin-top: 5%;
}

#basePhotos img {
	width:100%;
	height:auto;
}
/* THUMBNAIL PAGE */

.thumbVidSpiel {
    white-space: normal;	
}

#playerImgCont {
	width:100%;
}

#lrgPlayerBtn {
    position: absolute;
    width: 100%;
	opacity:0.7;
    z-index: 2;	
}

#playerImage {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

iframe:not(.gMap) {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%;*/
}

#imageViewer {
	position: absolute;
	width: 100%;
	height: auto;
}

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 8px;
	height: 0;
}

.sliderWrapper {
	position: relative;
	padding-bottom: 37.5%; /* 960:360 */
	padding-top: 25px;
	height: 0;
}

.whoAreWe {
	text-align:center;
	margin-top:10px;	
}

#map{
	width:100%; 
	display: inline-block;
}
	
.thumbWrapper{
	line-height:0px;
	margin:8px auto 0 auto;
    text-align: left;
	width:
}




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

h2.city:after {
    content: '\a';
	white-space: pre;	
}

nav{
	z-index:1;	
}

#workSizer {
    max-width: 440px;
    margin: 0 auto;
}
	
	#navList	 {
		width:650px;
	}
	
#navList li {
    display: inline-block;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-family: nobelB;
    font-weight: bolder;
    list-style: none;
    line-height: 25px;
    color: #999b9d;
    height: 18px;
    text-align: center;
    padding: 0 10;
}
	


}

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

header{
	height:95px;	
}

.mobileNavToggle {
	visibility:visible;
    top: 60px;
    opacity: 0.4;
}

#mainWrapper {
    width: 100%;
    height: 100vh;
    transition: right 0.15s ease-in;
    position: relative;
    background-color: rgba(255, 255, 255,1);
    right:0px;
}

#kscopeHeader img{
	padding: 10px 0 3px 0;
    width: 220px;
}

nav {
    position: fixed;
    right: 0;
    top: 0;
    width: 150px;
    background-color: #262324;
    height: 100%;
    z-index: -1;
}

#navHider {
    position: fixed;
    background-color: white;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#navList {
    margin: 125px auto;
    width: 150px;
    text-align: center;
    padding: 0 0 0 0px;
    cursor: pointer;
}

#navList li {
    display: inline-block;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-family: nobelB;
    list-style: none;
    line-height: 25px;
    color: #999b9d;
    width: 150px;
    height: 20px;
    text-align: center;
    padding: 10px 0px;
}
/*
#rightScrollLarge{
	background:url(../images/scroller/rightArrow.svg);		
}

#rightScrollLarge:hover {
	background:url(../images/scroller/rightArrowHover.svg);		

}

#leftScrollLarge{
	background:url(../images/scroller/leftArrow.svg);		
}

#leftScrollLarge:hover {
	background:url(../images/scroller/leftArrowHover.svg);		
}
*/
#bannerType{
	font-size: 80%;
    padding: 5px 0 5px 0;	
}

#contentWrapper {
/*    margin: 15px auto 10px auto;*/
	margin:0;
	padding: 10px 0;
    width: 100%;
    z-index: 2;
    position: relative;
	background-color:white;
}

#contents{
	padding-top:0px;
}

#services {
    text-align: center;
    padding: 15px 20px 0px 20px;
}

h1 {
	font-size: 90%;
}

h2 {
    font-size: 0.6em;
}

h3 {
	font-size: 90%;	
    margin-bottom: 0.6em;
}

h4 {
    display: block;
}


h2 {
    margin-top: 0px;
    margin-bottom: 0px;
}

.thumbWrapper{
	line-height:0px;
	margin:23px auto 0 auto;
    text-align: left;
}

.producer {
    margin: 20px 0 10px 0;
    display: inline-block;
}

.KSBody {
    font-size: 90%;
    white-space: normal;	
}

.KSBody:not(#mainBody) {
    padding: 10px 10px 0px 10px;
}

.ourServices {
	margin-top: 20px;
}

#vidThumbnails {
    margin-top: 10px;
	height:80px;
}

.vidThumbnailsWrap {
	width:80px;
	height:80px;
}

.vidThumbnailsImages {
	width:80px;
	height:80px;
}

.thumbNailTitleWrap:not(.thumbWork) {
	width:80px;
	height:80px;
}

.tempTitleP {
    padding: 0 0 0 4px;
    font-size: 1em;
}

.tempTitleP2 {
    font-size: 0.7em;
}


#imageViewerWrapper {
	padding-top:8px;
}

#sliderContainer {
	padding-top:8px;
}

.video3upThumbnailSml {
    margin: 4px;
    width: calc(50% - 8px);
    width: -webkit-calc(50% - 8px);
    width: -moz-calc(50% - 8px);
	cursor: pointer;
}

.videoThumbnailSml {
    margin: 4px;
    width: calc(50% - 8px);
    width: -webkit-calc(50% - 8px);
    width: -moz-calc(50% - 8px);
	cursor: pointer;
}

#imageScrollerWrapper{
	margin-top:7px;
}



#moreWork {
	margin-top:10px;
}

.footerSpacer {
    margin: 7px auto 0 auto;
    padding-top: 8px;	
}

.gMap {
	width:220px;
	height:180px;
	margin:0 auto;
}

#mapCont {
	margin:0px;
	text-align:center;
}
.servicesText span{
 display:block;	
}

.textBreak {
	text-align:center;
	line-height: 1.5em;
	margin-top: 15px;
}
	
/* INTERACTIVE MAIN PAGE */
.articleWrapper{
	width:90%; 
	margin:0 auto;
}

.threeDIHeader{
	margin:0 0 0 0;
	width:100%; 
	font-family:georgiai;
	text-align:left;
	font-size:1em;
	letter-spacing: 1px;
}

.intBullet {
    float: left;
    /* width: 20px; */
    height: 144;
    margin: 60 17 0 0;
}

.intHeader {
	font-size: 30px;
	margin:0;
	line-height: 37px;
	letter-spacing: 1px;
	padding:0;
	margin-bottom: 15px;
}
.threeDiHeader p:not(.intHeader){
	margin-bottom: 10px;
	line-height: 25px;
	letter-spacing: 0.03em;
	white-space: normal;
}

.intHeart{
	height:37px;
	width:37px;
	position:relative;
	top:8px;
}

.threeDIFooter{
	margin:10 3% 0 3%;
    margin-bottom: 0px;
}

.threeDIFooter p:not(.intTest){
	text-align: left;
	font-size:1em;
	margin-top:0px;
	line-height: 25px;
	letter-spacing: 0.005em;
	white-space: normal;
	font-family:georgiai;	
}

.intTest{
	text-align: left;
	font-size:1em;
	margin: 7 0 0 30; 
	font-family:georgia;
	font-weight:bold;
}


.tempBackground{
	position:absolute;
	z-index: 10;
	top:-55;
	left:-262;
	pointer-events: none;
	opacity:0.2;
	display:none;
}

.threeDIButton{
	width:100%;
	height:auto;
	position:relative;
	margin: 20 0;
}

.intHoverButton{
	position:absolute;
	background-color:black;
	opacity:0;
	z-index:10; 
	width:100%; 
	height:100%;
	transition:opacity 0.2s ease-out;
	pointer-events:auto;
	cursor: pointer;
}

.intHoverButton:hover {
	opacity:0.125;
	box-shadow: 2px 2px 2px black;
}

.threeDIVid{
	position:absolute;
	right:-1;
	bottom:1;
	pointer-events: none;
	height:70%;
}

	#threeDIlot {
		height:auto;
		width:100%;
		
	}	
	#threeDIlot svg {
		height:auto;
		width:100%;
		
	}		
	
.threeDIButtonWrapper{
	background-color:#FBFBFB;
	pointer-events: none;
}	

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

#workSizer {
    text-align: left;
    max-width: 332px;
    margin: 0 auto;
}



.grid-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 8px;
    width: 150px;
    height: 150px;
}

.grid-item img {
    width: 150px;
    height: auto;
}

.thumbNailTitleWrap {
    width: 150px;
    height: 150px;
}

.thumbNailTitleWrap:not(.indexThumbnailTitleWrap){
    width: 150px;
    height: 150px;		
}
	
/* INTERACTIVE MAIN PAGE */
.articleWrapper{
	width:90%; 
	margin:0 auto;
}

.threeDIHeader{
	margin:11 0 0 0;
	width:100%; 
	font-family:georgiai;
	text-align:left;
	font-size:0.8em;
	letter-spacing: 1px;
}

.intBullet {
    float: left;
    /* width: 20px; */
    height: 144;
    margin: 55 8 0 0;
}

.intHeader {
	font-size: 26px;
	margin:0;
	line-height: 37px;
	letter-spacing: 1px;
	padding:0;
	margin-bottom: 15px;
}
.threeDiHeader p:not(.intHeader){
	margin-bottom: 10px;
	line-height: 25px;
	letter-spacing: 0.03em;
	white-space: normal;
}

.intHeart{
    height: 30px;
    width: 30px;
	position:relative;
	top:8px;
}

.threeDIFooter{
	margin:10 3% 0 3%;
    margin-bottom: 0px;
}

.threeDIFooter p:not(.intTest){
	text-align: left;
	font-size:0.8em;
	margin-top:0px;
	line-height: 25px;
	letter-spacing: 0.005em;
	white-space: normal;
	font-family:georgiai;	
}

.intTest{
	text-align: left;
	font-size:1em;
	margin: 7 0 0 30; 
	font-family:georgia;
	font-weight:bold;
}


.tempBackground{
	position:absolute;
	z-index: 10;
	top:-55;
	left:-262;
	pointer-events: none;
	opacity:0.2;
	display:none;
}

.threeDIButton{
	width:100%;
	height:auto;
	position:relative;
	margin: 20 0;
}

.intHoverButton{
	position:absolute;
	background-color:black;
	opacity:0;
	z-index:10; 
	width:100%; 
	height:100%;
	transition:opacity 0.2s ease-out;
	pointer-events:auto;
	cursor: pointer;
}

.intHoverButton:hover {
	opacity:0.125;
	box-shadow: 2px 2px 2px black;
}

.threeDIVid{
	position:absolute;
	bottom:1;
	right:-1;
	pointer-events: none;
	height:70%;
}

	#threeDIlot {
		height:auto;
		width:100%;
		
	}	
	#threeDIlot svg {
		height:auto;
		width:100%;
		
	}		
	
.threeDIButtonWrapper{
	background-color:#FBFBFB;
	pointer-events: none;
}		

}

@media screen and ( max-width:450px ){
h1.animation::after {
    content: '\a';
	white-space: pre;	
}

.tempTitleP {
    padding: 0 0 0 2px;
    font-size: 0.9em;
}

.tempTitleP2 {
    font-size: 1em;
}

#workSizer {
    text-align: left;
    max-width: 332px;
    margin: 0 auto;
}
}

@media screen and ( max-width:450px ){
.tempTitleP {
    padding: 0 0 0 2px;
    font-size: 0.65em;
    letter-spacing: 0.15em;
	
}
	
	.footerSpacer {
    margin: 0px auto 0 auto;
    padding-top: 0px;	
}

h1.animation::after {
    content: '\a';
	white-space: pre;	
}

#workSizer {
    text-align: left;
    max-width: 236px;
    margin: 0 auto;
}

.grid-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 8px;
    width: 102px;
    height: 102px;
}

.grid-item img {
    width: 102px;
    height: auto;
}

.thumbNailTitleWrap {
    width: 102px;
    height: 102px;
}

.thumbNailTitleWrap:not(.indexThumbnailTitleWrap){
    width: 102px;
    height: 102px;		
}
	
/* INTERACTIVE MAIN PAGE */
.articleWrapper{
	width:90%; 
	margin:0 auto;
}

.threeDIHeader{
	margin:11 0 0 0;
	width:100%; 
	font-family:georgiai;
	text-align:left;
	font-size:0.72em;
	letter-spacing: 1px;
}

.intBullet {
    float: left;
    /* width: 20px; */
    height: 118;
    margin: 45 8 0 0;;
}

.intHeader {
	font-size: 1.6em;
	margin:0;
	line-height: 37px;
	letter-spacing: 1;
	padding:0;
	margin-bottom: 8px;
}
.threeDiHeader p:not(.intHeader){
	margin-bottom: 14px;
	line-height: 18px;
	letter-spacing: 0.03em;
	white-space: normal;
}

.intHeart{
    height: 22px;
    width: 22px;
	position:relative;
	top:5px;
}

.threeDIFooter{
	margin:10 3% 0 3%;
    margin-bottom: 0px;
}

.threeDIFooter p:not(.intTest){
	text-align: left;
	font-size:0.72em;
	margin-top:0px;
	line-height: 17px;
	letter-spacing: 0.005em;
	white-space: normal;
	font-family:georgiai;	
}

.intTest{
	text-align: left;
	font-size:0.8em;
	margin: 8 0 0 30; 
	font-family:georgia;
	font-weight:bold;
}


.tempBackground{
	position:absolute;
	z-index: 10;
	top:-55;
	left:-262;
	pointer-events: none;
	opacity:0.2;
	display:none;
}

.threeDIButton{
	width:100%;
	height:auto;
	position:relative;
	margin: 20 0;
}

.intHoverButton{
	position:absolute;
	background-color:black;
	opacity:0;
	z-index:10; 
	width:100%; 
	height:100%;
	transition:opacity 0.2s ease-out;
	pointer-events:auto;
	cursor: pointer;
}

.intHoverButton:hover {
	opacity:0.125;
	box-shadow: 2px 2px 2px black;
}

.threeDIVid{
	position:absolute;
	bottom:1;
	right:-1;
	pointer-events: none;
	height:70%;
}

	#threeDIlot {
		height:auto;
		width:100%;
		
	}	
	#threeDIlot svg {
		height:auto;
		width:100%;
		
	}		
	
.threeDIButtonWrapper{
	background-color:#FBFBFB;
	pointer-events: none;
}		
	
}

@media screen and (max-device-width: 1000px) 
              and (orientation:landscape){

#mainWrapper {
    width: 100%;
	height: 100vh;
    transition: right 0.15s ease-in;
    position: relative;
    background-color: rgba(255, 255, 255,1);
	right:0px;
}

#contentWrapper{
    z-index: 2;
    position:relative;
	padding:0;
}

nav {
    position: fixed;
    right: 0;
    top: 0;
    width: 150px;
    background-color: #262324;
    height: 100%;
    z-index: -2;
}

#navHider {
    position: fixed;
    background-color: white;
    width: 100%;
    height: 100%;
    z-index: -2;
    top: 0;
}

#navList {
    margin: 125px auto;
    width: 150px;
    text-align: center;
    padding: 0 0 0 0px;
    cursor: pointer;
}

#navList li {
    display: inline-block;
    letter-spacing: 3px;
    font-size: 0.8em;
    font-family: nobelB;
    list-style: none;
    line-height: 25px;
    color: #999b9d;
    width: 150px;
    height: 20px;
    text-align: center;
    padding: 10px 0px;
}

.mobileNavToggle {
	top:30px;
	visibility:visible;
	
}

header{
	height:80px;
	padding:0;
}

.tempTitleP {
    padding: 0 0 0 2px;
    font-size: 0.8em;
}

#kscopeHeader img{
	padding: 0px 0 5px 0;
    width: 140px;
	margin:0;
}

#navList {
    margin: 60px auto 45px auto;
    width: 150px;
    text-align: center;
    padding: 0 0 0 0px;
    cursor: pointer;
}

#workSizer {
    text-align: left;
    max-width: 498px;
    margin: 0 auto;
}

.grid-item {
    display: inline-block;
    cursor: pointer;
    position: relative;
    margin: 8px;
    width: 150px;
    height: 150px;
}

.grid-item img {
    width: 150px;
    height: auto;
}

.thumbNailTitleWrap:not(.indexThumbnailTitleWrap){
    width: 150px;
    height: 150px;		
}

.tempTitleP2 {
    font-size: 0.7em;
}

}