@charset "UTF-8";
/* CSS Document */



@font-face {
    font-family: 'microsoft_yi_baitiregular';
    src: url('msyi-webfont.eot');
    src: url('msyi-webfont.eot?#iefix') format('embedded-opentype'),
         url('msyi-webfont.woff') format('woff'),
         url('msyi-webfont.ttf') format('truetype'),
         url('msyi-webfont.svg#microsoft_yi_baitiregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rika_threeextended_sans2';
    src: url('rikathree-extendedsans2-webfont.eot');
    src: url('rikathree-extendedsans2-webfont.eot?#iefix') format('embedded-opentype'),
         url('rikathree-extendedsans2-webfont.woff2') format('woff2'),
         url('rikathree-extendedsans2-webfont.woff') format('woff'),
         url('rikathree-extendedsans2-webfont.ttf') format('truetype'),
         url('rikathree-extendedsans2-webfont.svg#rika_threeextended_sans2') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'helvetica-neue-roman';
    src: url('helvetica-neue-roman-webfont.eot');
    src: url('helvetica-neue-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('helvetica-neue-roman-webfont.woff') format('woff'),
         url('helvetica-neue-roman-webfont.ttf') format('truetype'),
         url('helvetica-neue-roman-webfont.svg#helvetica-neue-roman') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'helvetica-neue-medium';
    src: url('helvetica-neue-medium-webfont.eot');
    src: url('helvetica-neue-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('helvetica-neue-medium-webfont.woff') format('woff'),
         url('helvetica-neue-medium-webfont.ttf') format('truetype'),
         url('helvetica-neue-medium-webfont.svg#helveticaneueneue-medium') format('svg');
    font-weight: normal;
    font-style: normal;
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
body {
    font-family: 'helvetica-neue-medium';
	margin:0%;
	width:100%;
	height:100%;
	background:#FFF;
	overflow-x:hidden;
	overflow-y:scroll;
	font-size:14px;
	letter-spacing:0.025vw;
		  -webkit-font-smoothing: antialiased;

}
body {
    opacity: 1;
    transition: 1s opacity cubic-bezier(.3,.3,.6,1);
}
body.fade-out {
    opacity: 0;
    transition: none;
}
body.studio {
	background:#cc0000;
}
body.is-fixed {
	width:100%;
	height:100vh;
	overflow:hidden;
}
body.index::-webkit-scrollbar, body.home::-webkit-scrollbar, body.studio::-webkit-scrollbar, body.information::-webkit-scrollbar {
  display: none;
}

.index-heading {
	width:100%;
	position:absolute;
	text-align: center;
	top:50%;
	transform:translateY(-50%);
	font-size:21px;
}
a, a .copy  {
	color:#000;
	text-decoration:none;
}
a:hover {
	text-decoration: underline;
}
.header a:hover, a:hover .copy  {
	text-decoration:underline;
}


.header {
	width:20%;
	margin:0;
	left:5vw;
	padding:0;
	text-align:left;
	position:fixed;
	z-index:10000;
	top:50%;
	transform: translateY(-50%);
	box-sizing:border-box;
}
.header a {
	color:#000;
	text-decoration:none;
}
.header a:hover{
}
.header ul, .header li {
	list-style-type: none;
	margin:0;
	padding:0;
}
.header li {
	line-height: 1.4;
}
.heading {
	display:block;
	width:100%;
}
.main {
	width:100%;
	height:100vh;
	position:relative;
	text-align: center;
}
.main img {
	position:absolute;
	width:auto;
	height:82vh;
	left:50%;
	top:5vh;
	transform:translateX(-50%);
}
.main .copy {
	width:100%;
	text-align: center;
	position:absolute;
	bottom:2vh;
}
.contact-information-main {
	position:absolute;
	margin:0;
	text-align:left;
	width:auto;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}
.contact-information-main .copy {
	line-height:1.4;
}
@media (max-width: 1023px) {
.main img {
	position:absolute;
	width:80%;
	height:auto;
	left:auto;
	right:0;
	top:50%;
	transform:translateY(-50%);
}
}
@media (max-width: 767px) {

.main img {
    width: 92%;
    height: auto;
	left:4%;
	right:4%;
	top:50%;
	transform:translateY(-50%);
}	
}


#jen-carey-portfolio {
	width:80%;
	height:100vh;
	margin:0;
	float:right;
	overflow:hidden;	
	background:#FFF;
	position:relative;
}
#portfolio-grid {
	width:80%;
	height:auto;
	margin:0;
	float:right;
	background:#FFF;
	position:relative;
}
.placeholder {
    /* Making it invisible lets the parent container adjust its size */
    visibility : hidden;
}
#jen-carey-portfolio .slide {
	width:100%;
	height:100%;
	background-color:#fff!important;
}
#portfolio-grid .slide {
	position:relative;
	width:25.33332%;
	height:25.33332vh;
	float:left;
	margin:2% 4% 8% 4%;
	background-color:#fff!important;
	box-sizing: border-box;
	margin-bottom:8%;
	cursor:pointer;
	cursor: w-resize;
	    cursor: url(../images/crosshair.png) 1 32, url(../images/crosshair.cur), w-resize;
}
#portfolio-grid .slide.is-active {
	width:80%;
	height:100vh;
	margin:0;
	position:fixed;
	z-index:50;
	background:#fff;
	cursor:pointer;
	cursor: w-resize;
    cursor: url(../images/cross.png) 1 25, url(../images/exit.cur), w-resize;
}
#jen-carey-portfolio .slide img, #portfolio-grid .slide img {
	width:100%;
	height:auto;
}
#portfolio-grid .slide.is-active img {
	height:100%;
	width:auto;
}
.center {
	position: relative;
  	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}


@media (max-width: 1023px) {
#portfolio-grid .slide.is-active {	
	width:80%;
	left:20%;
}
#portfolio-grid .slide.is-active img {
	height:auto;
	width:100%;
}
}
@media (max-width: 767px) {
#portfolio-grid .slide {
	height:auto;
	}
#portfolio-grid .slide img {
	transform:none;
	left:auto;
	right:auto;
	top:auto;
}
#portfolio-grid .slide.is-active {
    width: 100%;
    left: 0;
	height:84vh;
}
#portfolio-grid .slide.is-active img {
	top:40%;
	transform:translateY(-50%);
}
}

.controls {
	clear:both;
	position:relative;
	width:120px;
	margin:20px auto 0 auto;
	text-align:center;	
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.slider-back-1 {
position:absolute;
top:0;
left:20%;
width:40%;
height:100vh;
z-index:100;
background:none!important;
 -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	transition:0.3s;
		cursor:pointer;
	cursor: w-resize;
  cursor: url(../images/arrow-l.png) 1 25, url(../images/arrow-l.cur), w-resize;

}
.slider-next-1 {
position:absolute;
top:0;
right:0;
width:40%;
height:100vh;
z-index:100;
background:none!important;
 -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
		transition:0.3s;
	cursor:pointer;
	cursor: w-resize;
     cursor: url(../images/arrow-r.png) 1 25, url(../images/arrow-r.cur), w-resize;
	
}
.slider-next-1:hover, .slider-back-1:hover  {
background:none!important;
}

.slider-back-1, .slider-next-1  {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
}





.footer {
	width:20%;
	padding:2% 0 2% 5%;
	position:absolute;
	left:0;
	bottom:0;
	z-index:10000;
    font-family: 'helvetica-neue-roman';	
}

#footer {
	width:80%;
	float:right; 
	padding:30px 0 30px 0;
	text-align:center;
	font-size:10px;
	background:#fff;
}
.home #footer {
	width:100%;
}
#footer a {
	color:#000;
}
#footer a:hover{
	color:#999;
}



@media (max-width: 1280px) {
	#footer {
	font-size:9px;
}

}

@media (max-width: 767px) {
.body {
	width:100%;	
}
.header {
width:100%;
	left:0;
	top:2%;
	transform:none;
}
.header ul {
    padding: 0 4%;
}
.header li {
    margin-bottom: 1.7vw;
}
#portfolio-grid {
	width:100%;
	height:84vh;
	top:16vh;
	overflow-x: hidden;
	overflow-y: scroll;
}
#portfolio-grid .slide {
    position: relative;
    width: 92%;
    margin-bottom: 14%;
}
.header, .contact-information-main {
	font-size:12px;
}
#jen-carey-portfolio {
	width:90%;
	height:70vh;
	margin:10% 5% 0 5%;
}
.slider-back-1, .slider-next-1 {
	height:80vh;
	
}
#footer {
	width:90%;
	margin:0 5%;
	font-size:8px;
}

#footer a {
	color:#000;
}
#footer a:hover{
	color:#999;
}
}

@media (max-width: 540px) {
	

#jen-carey-portfolio {
	width:90%;
	height:73vh;
	margin:10% 5% 0 5%;
}
.slider-back-1, .slider-next-1 {
	height:80vh;
}
#footer {
	width:100%;
	margin:0;
	padding:30px 0 0 0;
	font-size:6px;
}

#footer a {
	color:#000;
}
#footer a:hover{
	color:#999;
}


	
}


@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 

#jen-carey-portfolio .slide img {
	height:100%;
	width:auto;

}
#jen-carey-portfolio {
	width:90%;
	height:66vh;
	margin:8% 5% 0 5%;
}

#footer {
	padding:30px 0 0 0;
	font-size:6px;
}

}





/* Portrait */
@media screen and (orientation:portrait) {
   #jen-carey-portfolio .slide img {
	height:auto;
	width:100%;
}
.contact-information-main {
	width:92%;
	left: 4%;
    top: 50%;
    transform: translateY(-50%);
}
}
/* Landscape */
@media screen and (orientation:landscape) {
    #jen-carey-portfolio .slide img {
	height:100%;
	width:auto;
}
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 


.contact-information-main {
	width:50%;
}
}