/*
Theme Name: Antony Nobilo
Theme URI: http://antonynobilo.com
Author: Daniel Apt
Author URI: http://iamapt.com/
Description: The theme and main design for http://antonynobilo.com. 
Version: 1.0
Tags: modern, minimal, fullscreen, imagery, portfolio, dynamic
*/

/*
  HTML5 Reset :: style.css
  ----------------------------------------------------------
  We have learned much from/been inspired by/taken code where offered from:
  
  Eric Meyer          :: http://meyerweb.com
  HTML5 Doctor        :: http://html5doctor.com
  and the HTML5 Boilerplate :: http://html5boilerplate.com
  
-------------------------------------------------------------------------------*/

/* Let's default this puppy out
-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}                 

/* consider resetting the default cursor: https://gist.github.com/murtaugh/5247154 */

article, aside, figure, footer, header, nav, section, details, summary {display: block;}

/* Responsive images and other embedded objects
   Note: keeping IMG here will cause problems if you're using foreground images as sprites.
   If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img,
object,
embed {max-width: 100%;}

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

/* we use a lot of ULs that aren't bulleted. 
  don't forget to restore the bullets within content. */
ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, 
blockquote:after, 
q:before, 
q:after {content: ''; content: none;}

a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}

del {text-decoration: line-through;}

abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}

/* tables still need cellspacing="0" in the markup */
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}

hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}

input, select {vertical-align: middle;}

pre {
    white-space: pre; /* CSS2 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}

input[type="radio"] {vertical-align: text-bottom;}
input[type="checkbox"] {vertical-align: bottom;}
.ie7 input[type="checkbox"] {vertical-align: baseline;}
.ie6 input {vertical-align: text-bottom;}

select, input, textarea {font: 99% sans-serif;}

table {font-size: inherit; font: 100%;}

small {font-size: 85%;}

strong {font-weight: bold;}

td, td img {vertical-align: top;} 

/* Make sure sup and sub don't screw with your line-heights
  gist.github.com/413930 */
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

/* standardize any monospaced elements */
pre, code, kbd, samp {font-family: monospace, sans-serif;}

/* hand cursor on clickable elements */
.clickable,
label, 
input[type=button], 
input[type=submit], 
input[type=file], 
button {cursor: pointer;}

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea {margin: 0;}

/* make buttons play nice in IE */
button {width: auto; overflow: visible;}
 
/* scale images in IE7 more attractively */
.ie7 img {-ms-interpolation-mode: bicubic;}

/* prevent BG image flicker upon hover */
.ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

/* let's clear some floats */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }  
.clearfix:after { clear: both; }  
.clearfix { zoom: 1; }  

/* ======================= STYLING ======================= */

body, html {
    height:100%;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

* {
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* ------- TYPOGRAPHY ------- */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on October 29, 2013 */

@font-face {
    font-family: 'BigCaslonMedium';
    src: url('fonts/bigcaslon.eot');
    src: url('fonts/bigcaslon.eot') format('embedded-opentype'),
         url('fonts/bigcaslon.woff') format('woff'),
         url('fonts/bigcaslon.ttf') format('truetype'),
         url('fonts/bigcaslon.svg#BigCaslonMedium') format('svg');
}


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

}

@font-face {
  font-family: 'Akzidenz Extra Bold Condensed';
  src: url('fonts/akzidenz_grotesk_extra_bold_condensed-webfont.eot');
  src: url('fonts/akzidenz_grotesk_extra_bold_condensed-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/akzidenz_grotesk_extra_bold_condensed-webfont.woff') format('woff'),
       url('fonts/akzidenz_grotesk_extra_bold_condensed-webfont.ttf') format('truetype'),
       url('fonts/akzidenz_grotesk_extra_bold_condensed-webfont.svg#berthold_akzidenz_groteskBdCn') format('svg');
  font-weight: normal;
  font-style: normal;

}


body {
    /*font-family: 'Berthold Akzidenz Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;*/
    font-family: 'berthold_akzidenz_grotesk_bMd', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --------- HEADER --------- */

body {
  min-width: 1050px;
}

header {
   height: 10%;
   position: fixed;
   top: 0;
   border-bottom: 2px solid black;
   min-width: 1050px;
   width: 95%;
   padding:0px 2.5%;
   z-index: 3;
   background: white;
}

.boxsizing header {
  padding: 0 22px;
  width: 100%;
}

header:before {
  content: '';
  height: 100%;
  vertical-align: middle;
  display: inline-block;
}

header h1 {
    display: inline-block;
    vertical-align:middle;
    width: 450px;
}

header h1 img {
  width: 80%;
  height:auto;
}

header a {
    color: black;
    text-decoration: none;

  -webkit-transition: color 0.3s ease-out; 
     -moz-transition: color 0.3s ease-out; 
       -o-transition: color 0.3s ease-out; 
          transition: color 0.3s ease-out; 

}

header a:hover, header a.current {
    color: #b81515;
}

/* the navigational menu showing links to all pages / sections */

header #pages {
  display:inline-block;
  vertical-align:middle; 
  font-size:10px;
  text-transform: uppercase;
}

header #pages li {
  display: inline-block;
  margin-right:30px;
}

/* when a display is > 1500px, make the navigation centered */
@media all and (min-width:1500px){
  header #pages {
    position:absolute;
    left:50%;
    top:50%;
    
    -webkit-transform: translateY(-50%); 
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
  
  }
  
  header #pages>ul {
    position:relative;
    left:-50%;
  }
}

/* submenu */

.sub-menu {
  position:absolute;
  display:none;
}

li:hover .sub-menu {
  display:block;
}

/* the navigational menu showing links to all social media */
header #social {
  position:absolute;
  top:50%;
  right:20px;
  -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%);
          transform: translateY(-50%);
}

#social li {
  float: left;
}

header #social a {
  display: inline-block;
  width:20px;
  height:20px;
  background:red;
   text-indent:-9999px;
  margin-right: 10px;
  float: left;
}

#social .facebook {
  background: url('images/icons/facebook.png') top left no-repeat;
}

#social .twitter {
  background: url('images/icons/twitter.png') top left no-repeat;
}

/* -------- SECTIONS -------- */

#ajax-loader {
  position:absolute;
  top:40%;
  left:50%;
}

#sections {
    position: relative;
    top: 10%;

    height: 83%;
}

#sections section {
    width: 100%;
    height:100%;
}

/* ----------- BIO ----------- */

#bio {
  color: #4e4e4e;
  width:90%;
  height: 90%;
  padding:5%;
}

.boxsizing #bio {
  width: 100%;
  height: 100%;
  padding: 5%;
}

#bio #content {
  float:left;
  width: 35%;
  text-align: justify;
  font-family: 'BigCaslonMedium', 'Times New Roman', Georgia, serif;
  font-size:14px;
  line-height:1.4;
}

#content h2:first-child {
  margin-top: 0px;
}

#content h2 {
  margin-top:50px;
}

#bio p {
  margin-bottom:10px;
}

#bio h2 {
  font-family:'Akzidenz Extra Bold Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:23px;
  text-transform: uppercase;
}

#bio a {
  color:black;
  text-decoration:none;
}

#bio a:hover {
  text-decoration:underline;
}

/* -- adressess */

#bio #addresses {
  float:left;
  margin-left: 4%;
  width: 18%;
  line-height: 1.4;
}

#addresses div {
  margin-bottom: 16px;
}

#addresses p {
  font-family: 'Helvetica CY', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style:italic;
  color: #070707;
  line-height:1.2;
}

/* -- antony portrait */

#bio #image {
  width: 33%;
  float:left; 
  margin-left: 4%;
}

#image img {
  width:100%;
  height: auto;
}

/* ---------- INTRO ---------- */

#intro {
  background: center center scroll no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index:2;
  position:relative;
}

#intro img {
    height: 100%;
    margin: 0 auto;
    display:block;
}

/* -------- PORTFOLIO -------- */

#portfolio-wrapper {
  height: 100%;
}

.spacer {
  height: 9%;
  background:white;
}

.column {
  float:left;
  width:12%;
  padding: 0 0.25%;
}

.boxsizing .column {
  width: 12.5%;
  padding: 0 2px;
}

#portrait-template .column {
  width: 50%;
}

.column img {
  width:100%;
}

.thumbnail {
  position:relative;
  font-family: 'Akzidenz Extra Bold Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin-bottom: 2px;
}

.thumbnail a {
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  text-align:center;
  color:white;
  
  
  -webkit-transition: opacity 0.5s ease-out; 
     -moz-transition: opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
          transition: opacity 0.5s ease-out; 

}

.opacity .thumbnail a {
  background: white;
  color: black;
}

.thumbnail a:hover {
  opacity: 0.7;
}

.thumbnail span {
  position:absolute;
  width:100%;
  left:0;
  top:50%;
  height:50%;
  margin-top:-15%;
}

#portrait-template .thumbnail span {
  display: none;
}

/* --------- OVERLAY -------- */
#sections #overlay {
  height: 83%;
}

#overlay {
  display: none;
  position: fixed;
  top: 10%;
  z-index: 0;
  background: white;
}

#slideshow-control {
  position:absolute;
  z-index:500;
  height:100%;
  width:100%;
}

#slideshow-control a{
  width:33%;
  height:100%;
  display:block;
  position:absolute;
  text-indent:-9999px;
  top:0;
}

.cursor-left {
  left:0;
  cursor:url('images/arrow-left.png'), url('http://antonynobilo.com/wp-content/themes/antony-nobilo/images/arrow-left.cur'), w-resize;
}

.cursor-right {
  right:0;
  cursor:url('images/arrow-right.png'), url('http://antonynobilo.com/wp-content/themes/antony-nobilo/images/arrow-right.cur'), e-resize;
}

.cursor-back {
  left:33%;
  width:34%;
  cursor:url('images/back-to-thumbnails.png'), url('http://antonynobilo.com/wp-content/themes/antony-nobilo/images/arrow-down.cur'), auto;
}

#overlay ul, #overlay li {
  height:100%;
  width:100%;
}

#overlay li {
  background:white;
}

#overlay img{
  height:100%;
  display: block;
  margin: 0 auto;
}

/* ----------- FILM ---------- */

#sections #film {
  height: auto;
  width:1150px;
  margin:0 auto;
}

#film {
  padding:2% 0;
}

.film-post {
  margin-bottom:60px;
  width: 100%;
}

.film-post:last-child {
}

.media, .description {
  float: left;
}

.media {
  width:60%;
}

.media iframe {
  width:100%;
}

.description {
  margin-left:2%;
  color:#4e4e4e;
  font-family:'BigCaslonMedium', 'Times New Roman', Georgia, serif;
  width:38%;
}

.description h2 {
  margin-bottom:20px;
  font-family:'Akzidenz Extra Bold Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:23px;
  text-transform: uppercase;
}
/* ----------- NEWS ---------- */

#snap-control {
  position:fixed;
  z-index: 3;
  top:10%;
  height:83%;
  width:100%;
}

#snap-control a {
  height:50%;
  width:100%;
  display:block;
  text-indent:-9999px;
}

.cursor-up {
  cursor: url('images/arrow-up.png'),url('http://antonynobilo.com/wp-content/themes/antony-nobilo/images/arrow-up.cur'), n-resize;
}

.cursor-down { 
  cursor: url('images/arrow-down.png'), url('http://antonynobilo.com/wp-content/themes/antony-nobilo/images/arrow-down.cur'), s-resize;
}

#counter {
  font-family:'Akzidenz Extra Bold Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:20px;
  line-height:50px;
  text-align:center;
  position:absolute;
  width:100%;
  left:0;
}

#news article {
background: top left no-repeat scroll;
  -webkit-background-size: cover;
          background-size: cover;
	width:100%;
	height: 100%;
}

/* --------- FOOTER --------- */

footer {
    min-width: 1050px;
    width: 95%;
    position: fixed;
    height: 7%;
    bottom: 0;
    left: 0;
    background: white;
    z-index: 1;
    font-size:10px;
    border-top: 2px solid rgb(0, 0, 0);
    padding: 0 2.5%;
    color: #aaa;
}

.boxsizing footer {
  width: 100%;
  padding: 0 22px;
}

/* center content in footer */

footer:before {
  content: '';
  height: 100%;
  vertical-align: middle;
  display: inline-block;
} 

footer div {
  vertical-align: middle;
  display: inline-block;
  position:relative;
  width:99%;
  text-transform:uppercase;
}

footer a {
  color:black;
  text-decoration:none;
  
   -webkit-transition: color 0.3s ease-out; 
     -moz-transition: color 0.3s ease-out; 
       -o-transition: color 0.3s ease-out; 
          transition: color 0.3s ease-out; 

}

footer a:hover {
  color:red;
}

footer p {
  position:absolute;
  width:400px;
  background:white;
  top:0;
  display:none;
  z-index:3;
  -webkit-transition:opacity 0.5s;
  text-transform: none;
}

.opacity footer p {
  display:block;
  opacity:0;
    -webkit-transition: opacity 0.5s ease-out; 
     -moz-transition: opacity 0.5s ease-out; 
       -o-transition: opacity 0.5s ease-out; 
          transition: opacity 0.5s ease-out; 
}

footer div:hover p {
  display:block;
}

.opacity footer div:hover p {
  opacity:1;
}

footer small {
  position: absolute;
  top:0;
  right:0;
}

footer small a {
  color: #aaa;
}

footer small a:hover {
  color: #666;
}

#cursor-preload {
  width: 0;
  height: 0;
  opacity: 0;
}