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

/* meyer reset 2.0 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ================================= structure ================================= */

@font-face {
    font-family: 'aleothin';
    src: url('fonts/aleo-light-webfont.eot');
    src: url('fonts/aleo-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aleo-light-webfont.woff2') format('woff2'),
         url('fonts/aleo-light-webfont.woff') format('woff'),
         url('fonts/aleo-light-webfont.ttf') format('truetype'),
         url('fonts/aleo-light-webfont.svg#latothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aleoregular';
    src: url('fonts/aleo-regular-webfont.eot');
    src: url('fonts/aleo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aleo-regular-webfont.woff2') format('woff2'),
         url('fonts/aleo-regular-webfont.woff') format('woff'),
         url('fonts/aleo-regular-webfont.ttf') format('truetype'),
         url('fonts/aleo-regular-webfont.svg#latothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'aleobold';
    src: url('fonts/aleo-bold-webfont.eot');
    src: url('fonts/aleo-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aleo-bold-webfont.woff2') format('woff2'),
         url('fonts/aleo-bold-webfont.woff') format('woff'),
         url('fonts/aleo-bold-webfont.ttf') format('truetype'),
         url('fonts/aleo-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latothin';
    src: url('fonts/lato-thin-webfont.eot');
    src: url('fonts/lato-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-thin-webfont.woff2') format('woff2'),
         url('fonts/lato-thin-webfont.woff') format('woff'),
         url('fonts/lato-thin-webfont.ttf') format('truetype'),
         url('fonts/lato-thin-webfont.svg#latothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latobold';
    src: url('fonts/lato-bold-webfont.eot');
    src: url('fonts/lato-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-bold-webfont.woff2') format('woff2'),
         url('fonts/lato-bold-webfont.woff') format('woff'),
         url('fonts/lato-bold-webfont.ttf') format('truetype'),
         url('fonts/lato-bold-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoblack';
    src: url('fonts/lato-black-webfont.eot');
    src: url('fonts/lato-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/lato-black-webfont.woff2') format('woff2'),
         url('fonts/lato-black-webfont.woff') format('woff'),
         url('fonts/lato-black-webfont.ttf') format('truetype'),
         url('fonts/lato-black-webfont.svg#latobold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* ======================== temp index ========================= */

body#temp-index{
	width:100vw;
	font-family: 'aleothin', sans-serif;
	font-size:16px;
	line-height:1.6em;
	font-weight:300;
}

#temp-index #container{
	width:100vw;
}

#temp-index #logo-wrapper{width:200px;
height:200px;
margin:80px auto 50px auto;}

#temp-index .logo{
margin:0 auto;
}

#temp-index article{
	width:40vw;

margin:0 auto;}

#temp-index p{
	color:#666;
	margin-bottom:0.8em;
	text-align:justify;
}

#temp-index p.sign{margin-left:1.6em;}

#temp-index a:link, #temp-index a:visited{
	color:#000;
	text-decoration:none;
	font-family:aleobold, sans-serif;
}

#temp-index a:hover{
	text-decoration:underline;
}

/* ====================== home page ======================= */

#home header h2,
#notfound header h2{
	-ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
	position:relative;
	right:15px;
	top:-55px;}

#home article h2{
	border-bottom:1px solid #000;
	padding:0 0 8px 0;
	text-align:center;
	text-transform:uppercase;
	font-family:latobold, sans-serif;
	font-size:0.8em;
	margin:0 0 0.8em 0;
	letter-spacing:0.025em;
}

#home p.centered{
	border-bottom:1px solid #000;
	padding-bottom:0.8em;
}

/* ======================= page structure ====================== */

body{
	width:100vw;
	font-family: 'aleothin', sans-serif;
	font-size:16px;
	line-height:1.6em;
	font-weight:300;
	text-rendering:optimizeLegibility;
}

header{
	width:270px;
	height:50vh;
	text-align:center;
	float:right;
	position:fixed;
	right:0;
	top:0;
	z-index:10;
}

header h2{
	font-family:latobold;
	text-transform:uppercase;
	margin: 120px 0 0 30px;
	font-size:0.6em;
	letter-spacing:1em;
	text-align:center;
}


#main{
	width:100vw;
	height:100vh;
}

/* ------------------------- footer -------------------------- */

footer{
}

/* ----------------------------- nav ---------------------------- */

nav{
	width:170px;
	height:100vh;
	background:#fff;
	text-align:right;
	padding-right:20px;
	border-right:1px solid #666;
	position:fixed;
	left:-191px;
	top:0;
	z-index:9;
	transition: left 0.5s ease;
	}

nav ul li a{
	font-family: latobold, sans-serif;
	text-transform:uppercase;
	font-size:0.7em;
	letter-spacing:0.05em;
}

nav a:link, nav a:visited{
	text-decoration:none;
	color:#8D8D8D;
}

nav a:hover, nav a.active{
	color:#000;
	position:relative;
	left:8px;
}

nav a:hover:after, nav a.active:after{
	content:url(images/pointer.svg);
	position:relative;
	left:12px;
}

nav ul li.menuToggle{
	text-indent:-9999px;
	display:block;
	width:50px;
	height:30px;
	background:url(images/menuToggle.svg);
	position:relative;
	left:190px;
	top:-10px;
	text-align:left;
	z-index:9999;
	}

nav:hover{	
	left:0px;
}

nav ul{
	border-bottom:1px solid #ccc;
	padding:1.6em 0 1.6em 0;
}

nav p{
	text-align:right;
}

/* =========================== sub nav (based on photography) ============================ */

nav ul ul{
	display:none;
}

nav ul ul li{
	position:relative;
	top:4.1em;
}

nav ul:nth-child(2){
	border:0;
}

nav ul li:hover > ul{
	display:block;
	padding:0;
	position:absolute;
	height:480px;
	width:50px;
	background: rgba(0, 0, 0, 0.65);
	top:45px;
	left:190px;
}
nav ul ul li a{
	display:block;
	height:30px;
	width:100px;
	text-indent:-100%;
	white-space:nowrap;
	overflow:hidden;
	margin-bottom:2.1em;
	text-align:left;
	padding-left:110px;
	position:relative;
	top:-2px;
	z-index:10;
}

nav ul ul li a:link,
nav ul ul li a:visited{
	/*text-indent:-200px;
	white-space:nowrap;
	overflow:hidden;*/
}

nav ul ul li a:hover{
	
	color:#fff;
	padding-right:50px;
	left:0px;
}

.sub-link{
	display:none;
}

nav ul ul li a:hover > .sub-link{
	display:inline;
	position:relative;
	left:0;
	background:#7d7d7d;
	padding:3px 12px 3px 3px;
	}
	
nav ul ul li a:hover:after{
	content:url(images/pointer-grey.svg);
	position:relative;
	left:-8px;
	display:inline-block;
	width:8px;
	height:8px;
}

nav ul ul li:nth-child(2) a:hover:after{
	left:7px;
}

nav ul ul li:nth-child(3) a:hover:after{
	left:33px;
}

nav ul ul li:nth-child(4) a:hover:after{
	left:-39px;
}

nav ul ul li:nth-child(5) a:hover:after{
	left:18px;
}

nav ul ul li:nth-child(6) a:hover:after{
	left:11px;
}

nav ul ul li:nth-child(7) a:hover:after{
	left:33px;
}

nav ul ul li:nth-child(8) a:hover:after{
	left:-22px;
}

.sub-photography{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px 0;
	}
	
.sub-photography:hover{
}

.sub-landscape{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -35px;
	}

.sub-macro{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -70px;
	}

.sub-sports{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -105px;
	}

.sub-portrait{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -175px;
	}
	
.sub-nighttime{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -140px;
	}

.sub-studio{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -210px;
	}
	
.sub-misc{
	background:url(images/photography/photo-side-icons.png) no-repeat;
	background-position:15px -244px;
	}

.hidden-image{
	display:none;
}

/* =========================== mainBody icon ul ============================= */

#main-icon-menu{
	width:70vw;
	max-width:750px;
	text-align:center;
	margin-bottom:1.6em;
	margin-top:1.6em;
	position:relative;
	left:-20px;
}

#main-icon-menu li{
	display:inline-block;
	width:85px;
	height:83px;
}

#main-icon-menu li a:link,
#main-icon-menu li a:visited{
	text-transform:uppercase;
	font-family:latobold;
	color:#999;
	text-decoration:none;
	font-size:0.7em;
	margin-right:0;
	display:inline-block;
	height:43px;
	opacity:0.3;
	line-height:0.9em;
	padding-top:60px;
	width:100px;
	letter-spacing:0.025em;
}

#main-icon-menu li a:hover{
	opacity:1;
	text-indent:0px;
	COLOR:#000;
}

#main-icon-menu li a{
	height:53px;
}

.main-icon-active{
	opacity:1!important;
}

.background{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:13px 0;
}

.landscape{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:-99px 0;
}

.macro{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:-212px 0;
}

.sports{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:-323px 0;
	position:relative;
	top:0.8em;
}

.nighttime{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:-436px 0;
}

.portrait{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	background-position:-547px 0;
}

.studio{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	height:53px;
	background-position:-659px 0;
}

.misc{
	background:url(images/photography/photo-icons-main.png) no-repeat;
	height:53px;
	background-position:-771px 0;
}

/* --------------------------------------------------------------- */


/* ======================== typography ============================ */

h1{text-indent:-9999px;display:block;text-align:left;}

article{width:70vw;
max-width:750px;
margin:125px auto 0 auto;
position:relative;
left:-10px;
padding-bottom:4px;

}

#home article{
	border-bottom:2px solid #000;
	margin-top:125px;
}

p{
	color:#000;
	margin-bottom:0.8em;
	text-align:justify;
	display:block;
}

p.address{
	font-size:0.6em;
	margin-top:2.6em;
	font-family:aleobold, sans-serif;
	color:#000;
}

.centered{
	text-align:center;
}

.mainBody blockquote {
    font-size: 3.2em;
    float: right;
    width: 20rem;
    font-family: latothin;
    line-height: 3.15rem;
    margin-left: 1.6rem;
	color:#D7D7D7;
	margin-bottom:0.8rem;
}

.mainBody blockquote::after{
	content: "\201D";
	color:#000;
	font-family:latoblack;
}

#home article p:first-of-type:first-letter, article.mainBody p:first-of-type:first-letter{
	font-family:aleobold, sans-serif;
	float:left; 
	font-size:3.1em;
	padding-top:7px;
	padding-right:4px;
	padding-bottom:-2px;
	line-height:0.8em;
	color:#999;
}

/*#home article:before{
	content:url(images/phoenix.svg);
	text-align:center;	
	border-bottom:1px solid #000;
	display:block;
	margin-bottom:0.6em;
	display:block;
	height:75px;
	}*/
	
#home article:after{
	border:none;
	margin-bottom:-1.6em;
	height:20px;
}
	
article.mainBody:before{
	content:url(images/half-circle-top.svg);
	text-align:center;	
	border-bottom:1px solid #000;
	display:block;
	margin-bottom:0.6em;
	display:block;
	height:23px;
	}
	
article.mainBody:after{
	content:url(images/half-circle-bottom.svg);
	text-align:center;	
	border-top:1px solid #000;
	display:block;
	margin-top:1.3em;
	display:block;
	height:23px;
	}	
		
#fullpage h2, .panel h2, .mainBody h2{
	font-family:latobold, sans-serif;
	text-transform:uppercase;
	font-size:0.7em;
	letter-spacing:0.05em;
	text-align:center;
	padding-bottom:0.8em;
	border-bottom:1px solid #000;
	margin-bottom:1.6em;
	letter-spacing:0.05em;
}

#postContainer h2{
	font-family:latobold, sans-serif;
	text-transform:uppercase;
	font-size:0.7em;
	letter-spacing:0.05em;
	text-align:center;
	padding-bottom:0.8em;
	margin-bottom:1.6em;
	letter-spacing:0.05em;
}

#main a:link, a:visited,
.panel a:link, a:visited,
.mainBody a:link, .mainBody a:visited{
	font-family:aleobold;
	color:black;
	text-decoration:none;
	font-size:0.9em;
}

#main a:hover,
.panel a:hover,
.mainBody a:hover{
	text-decoration:underline;
}

strong{
	font-family:aleobold, serif;
}

/* ============================ design panels =========================== */

design-wrap{
	height:200vh;
}

.panel{
	width:100vw;
	height:100vh;
	position:relative;
}

.panelText{
	width:350px;
	height:100vh;
	top:0;
	z-index:10;
	background:rgba(255, 255, 255, 0.85);
	float:right;
}

.panelText p{
	font-size:0.75em;
	color:#000;
	line-height:1.650
}

.panelArticle{
	width:280px;
	margin:40px;
	top:50vh;
	border:none;
}

.panelText h2{
	border:none;
	text-align:left;
	margin:0;
	padding:0;
	font-family:latobold, sans-serif;
	font-size:0.7em;
	text-transform:uppercase;
	letter-spacing:0.05em;
}

.panelArticle a{
	font-family:aleoregular;
	text-decoration:none;
	color:#000;
}

.panelArticle a:hover{
	text-decoration:underline;
}

/* ------------------------ panel backgrounds ------------------------ */

.arranmore-one{
	background:url(images/design/arranmore-01.jpg) no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.arranmore-two{
	background:url(images/design/arranmore-02.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
 	background-size: cover;
}

.edges-one{
	background:url(images/design/edges-01.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.edges-two{
	background:url(images/design/edges-02.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.taobh-one{
	background:url(images/design/taobh-tire-01.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.taobh-two{
	background:url(images/design/taobh-tire-02.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.uscots-one{
	background:url(images/design/ulster-scots-01.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.uscots-two{
	background:url(images/design/ulster-scots-02.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.lyit-one{
	background:url(images/design/college-material-01.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-one{
	background:url(images/photography/ramelton-01.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-two{
	background:url(images/photography/ramelton-02.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-three{
	background:url(images/photography/ramelton-03.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-four{
	background:url(images/photography/ramelton-04.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-five{
	background:url(images/photography/ramelton-05.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-six{
	background:url(images/photography/ramelton-06.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-seven{
	background:url(images/photography/ramelton-07.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-eight{
	background:url(images/photography/ramelton-08.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-nine{
	background:url(images/photography/ramelton-09.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.ramelton-ten{
	background:url(images/photography/ramelton-10.jpg) no-repeat center center; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* ----------------------- posts section -------------------------- */

#postContainer{
	width:70vw;
	max-width:750px;
	margin:0 auto;
	padding:0;
	position:relative;
	left:-10px;
}

.post{
	width:34vw;
	max-width:355px;
	display:inline-block;
	margin-right:1.6em;
	margin-bottom:1.6em;
	vertical-align:top;
	background: rgba(1, 1, 1, 0.05);
	transition:width 0.5s ease;
}

#video .post{
	width:100%;
	display:block;
	max-width:750px;
	}

.video-wrapper{
		position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.post:nth-child(odd){
	margin-right:0;
}

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

.post h3{
	padding:1.6em 1.6em 0 1.6em;
	margin:0;
	text-transform:uppercase;
	font-size:0.7em;
	font-family:latobold;
	letter-spacing:0.025em;
}

.post p{
	padding: 0.8em 1.6em 0 1.6em;
	margin:0;
	font-size:0.8em;
}

.post p:last-child{
	padding-bottom:1.6em;
}

/* ----------------- jquery fullpage overrides -------------------- */

#fp-nav ul li a span, .fp-slidesNav ul li a span{
	background:#fff!important;
}

.fp-controlArrow{
	top:98vh!important;
	bottom:2vh!important;
}

.fp-controlArrow.fp-prev{
	border-width: 12px 25px 12px 0!important;
}

.fp-controlArrow.fp-next{
	border-width: 12px 0 12px 25px !important;
    right: 360px!important;
}

.fp-slidesNav.bottom{
	margin:0 auto 0 -180px!important;
}


#fp-nav{
	margin-top:-100px!important;
}

#fp-nav ul li a span{
	background:#000!important;
}

/* ============================ media queries ===================== */

@media screen and (max-width: 890px) {
	
header{
	float:none;
	width:100vw;
	height:160px;
	display:block;
	position:relative;
	top:0;
	text-align:center;
	}
	
.logo{margin:-10px 0 0 0; position:relative; left:-8px;width:50px; height:50px;}

#home header{height:100px;}
#home.logo{margin:-10px 0 0 0; position:relative; left:-4px;}

.logo{display:none;}

header{display:none;}

header h2{
	display:none;
}

.panelText p{
	font-size:0.9em;line-height:1.4em;}


article{margin:0 auto 20px auto;}
article.mainBody::before{
	content: url("images/inkwell-logo-semi.svg");
	height:56px;
	margin:10px 0 0 0;
}

.post{
	width:30vw;
}

}

@media screen and (max-width: 1240px) {
	
.mainBody h2, #home article h2{
	padding-top:0.8em;
}
	
article{
	margin-top:60px;
}
	
article.mainBody::before{
	content: url("images/inkwell-logo-semi.svg");
	height:56px;
	margin:10px 0 0 0;
}

.logo{display:none;}


}

@media screen and (max-width: 1062px) {
	.post{
		width:100%;
		max-width:100%;
}
}

@media screen and (max-width: 44em){
.panelText{
	width:100vw;
	float:none;
	height:40vh;
	bottom:40px;
	top:inherit;
	position:absolute;
	}

.panelArticle{
	width:80vw;
	margin:0 auto;
	top:10px;
	left:0;
}

.panelText p{
	font-size:0.85em;
	font-family:aleothin, sans-serif;
	color:#666;
}

.fp-controlArrow{
	margin-top:-10px!important;
}

.fp-controlArrow.fp-prev{
	border-width: 12px 25px 12px 0!important;
	margin:-15px 0 0 10px!important;
	}

.fp-controlArrow.fp-next{
	border-width: 12px 0 12px 25px !important;
    right: 0px!important;
	margin:-15px 10px 0 0!important;}

.fp-slidesNav.bottom{
	margin:0 auto 0 -18px!important;
	bottom:-1px!important;
}

.post{
	width:100%;
	max-width:100%;
	margin-right:0;
}

.mainBody blockquote{
	float:none;
	margin-left:0;
}

}