/*
 * 
 *  Author: ACOR d'après Ian Coyle
 *  www.iancoyle.com
 *
 */
 
/* ---------------------------------- */

/*
 *  TABLE OF CONTENTS
 *  
 *  Reset
 *  HTML5
 *  Global
 *  Grid
 *  Layout
 *  
 *  Media Queries
 *   + iPhone/iPod
 *   + iPad
 *
 *  Clear
 *
 */

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

/* @Reset */

html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0 0 0 0;
    width: 100%;
    overflow-x: hidden;
    background: #000;
}

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body,
  div,
  dl,dt,dd,
  ul,ol,li,
  h1,h2,h3,h4,h5,h6,
  pre,
  form,fieldset,
  input,textarea,
  a,
  p,blockquote,
  th,td {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

img {
    border: 0
}

address,
  caption,
  cite,
  code,
  dfn,
  em,
  strong,
  th,
  var {
    font-style: normal;
    font-weight: normal;
}

ol,ul {
    list-style: none;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
}

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

/* @HTML5 */

article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary, mark {
    display: block;
}


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

/* @FONT-FACE */

@font-face {
    font-family: 'PT sans narrow';
}

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

/* @Global */

* {
    font-size: 15px;
    line-height: 17px;
    font-family: 'PT sans narrow',Monaco,Helvetica, Arial, Verdana, sans-serif;
    font-style: normal;
    font-weight: normal !important;
}

p {
    margin: 0 0 20px 0;
    color:white;
    font-size: 15px;
    line-height: 17px;
}

p * {
    font-size: 16px;
}

a {
    color: #9DA06E !important;
    text-decoration: none;
    font-size: 16px !important;   
}

a:hover {
    color: #09DA06E;
}

h1,h2 {
    font-weight: bold;
}

h1 em, h2 em {
    font-weight: italic;
}


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

/* @Layout */


div#wrapper {
    min-height: 1000px;
    width: 100%;
    margin: 0;
    padding: 0 0 50px 0;
}

header {
    margin: 0; 
}
/*****************************article******************************/

article {
background: #d4330e; /* Old browsers */
background: -moz-linear-gradient(-45deg,  #d4330e 0%, #e4b173 46%, #e4b173 46%, #f0e1de 64%, #f0e1de 64%, #74869c 98%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#d4330e), color-stop(46%,#e4b173), color-stop(46%,#e4b173), color-stop(64%,#f0e1de), color-stop(64%,#f0e1de), color-stop(98%,#74869c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #d4330e 0%,#e4b173 46%,#e4b173 46%,#f0e1de 64%,#f0e1de 64%,#74869c 98%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #d4330e 0%,#e4b173 46%,#e4b173 46%,#f0e1de 64%,#f0e1de 64%,#74869c 98%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #d4330e 0%,#e4b173 46%,#e4b173 46%,#f0e1de 64%,#f0e1de 64%,#74869c 98%); /* IE10+ */
background: linear-gradient(135deg,  #d4330e 0%,#e4b173 46%,#e4b173 46%,#f0e1de 64%,#f0e1de 64%,#74869c 98%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4330e', endColorstr='#74869c',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    -moz-box-shadow: 0 0 20px #111;
    -webkit-box-shadow: 0 0 20px #111;
    z-index: 99999;
}

article figure {
    background: transparent;
    position: fixed;
    top: 250px;
    min-height: 400px;
    left: 400px;
    margin: 0;
    padding: 0;
}

._mobile article {
    position: relative
}

._mobile article figure {
    position: absolute
}

article header {
    position: absolute;
    margin: 10% 0 0 5%;
    width: 40%;
    height: 100%
    overflow: hidden;
    top: 0;
    padding: 0 0 0 10px;
}
.right1{
margin-left:50%;
}

.right2{
margin-left:60%;
}


article h1 {
    width: 100%;
    margin: 0 0 0 0;
    font-family: 'PT sans narrow', Didot,DidotReplacement,"Didot" !important;
    font-style: italic;
    text-transform: none;
    font-size: 40px;
    line-height: 40px;
}

article p {
    display:block;
    position:relative;
    font-family: 'Open sans condensed';
    font-style: normal;
    text-shadow:1px 1px 1px #111;
    font-size: 25px;
    line-height: 45px;
    z-index:10;
    text-align:justify;
}

article a {
    color: #9DA06E !important;
    text-decoration: none;
    font-size: 25px !important ;  
}

article em {
    color: #9DA06E;
    text-decoration: none;
    font-size: 25px  !important; 
    font-style:italic; 
}


article sup {
    font-family:'PT sans narrow';
    font-size: 11px;
    color: #777;
}

/***************************** animated stuff ******************************/
.span3{ 
font-size:23px;
line-height:28px;
}

.span3 em { 
font-style:italic !important;
font-size:1.3rem!important;
line-height:1.7rem;
}

.big { 
font-size:30px;
line-height:28px;
}

.signature {
font-size:12px !important;
line-height:14px!important;
}

.head1 {
display:block;
height:90px;
margin-top:150px;
}

.head2 {
display:block;
height:200px;
margin-top:250px;
}

.head3{
display:block;
height:120px;
margin-top:470px;
}

.head4{
display:block;
height:20px;
margin-top:570px;
}


.head11 {
display:block;
height:90px;
margin-top:70px;
}

.head12 {
display:block;
height:200px;
margin-top:190px;
}

.head13{
display:block;
height:120px;
margin-top:370px;
}

.head14{
display:block;
height:20px;
margin-top:590px;
}

.head21 {
display:block;
height:100px;
margin-top:200px;
width:30%;
}

.head22 {
display:block;
height:50px;
margin-top:320px;
width:30%;
}

.head31{
display:block;
height:120px;
margin-top:510px;
margin-left:7%;
width:35%;
}

.head32{
display:block;
height:20px;
margin-top:700px;
margin-left:7%;
width:35%;
}

.head41{
display:block;
height:120px;
margin-top:100px;
width:30%;
}

.head42{
display:block;
height:20px;
margin-top:400px;
width:30%;
}


/********************** misc ********************/

.footnotes {
    margin: 50px 0 0 0;
}

.footnotes a {
    font-size: 11px;
    color: #777
}

.column {
    margin: 0 0 0 50px;
    padding: 0 0 0 0;
    border: 1px solid #fff;
}

.content-frame .content {
	display:block;
	z-index:100;
	width: 80%;
	height: 100% !important;
	margin: 0 10% auto;
}

.commentaire {
	display:block;
	z-index:100;
	width:60%;
	margin:5% 20% 0;
	}
	
.commentaire p{
	font-size:16x !important;
	line-height:18px !important;
	}
		
.commentaire em {
	font-style:italic;
	font-size:18x;
	line-height:20px;
	}


.content-frame iframe {
	display:block;
	margin:20% 5%;
	width: 90%;
	height:90%;
	min-height:600px;
	max-height:700px;
	margin: 0 auto;
	border:0;
	position:relative;
	z-index:100;
	}
 	
/*********************** fullscreen ***********************/

.fullscreen * {
    color: #fff !important;
}

.fullscreen .background {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:auto !important;
}


/*********************** pages ***********************/
.small_page {  
display:block;
position absolute;
left:0;
right:0;
height:120% !important;
}

.normal_page {  
display:block;
position absolute;
left:0;
right:0;
height:130% !important;
}

.large_page {  
display:block;
position absolute;
left:0;
right:0;
height:145% !important;
}

.verylarge_page {  
display:block;
position absolute;
left:0;
right:0;
height:200% !important;
}


.last_page {
display:block;
position absolute;
left:0;
right:0;
height:110% !important;
}

.title_page,
{
display:block;
position absolute;
left:0;
right:0;
height:100% !important;
}


.title_page h1, .title_page p {
    text-align: center;
}

.title_page header {
    position: absolute;
    left: 0;
    top:0;
    margin: 0;
    width:100%;
    height:100%;
    padding: 0;
}

.title_page h1 {
    color: #fff;
    font-size: 90px;
    line-height: 70px;
    letter-spacing: 30px;
    font-family: 'Open sans condensed';
    font-style: italic;
    text-align: center !important;
    padding: 0;
    text-transform:none;
    margin: 0;
    width: 100%;
    text-shadow:1px 1px 1px #111;
}

.title_page h2 {
    position: absolute;
    left: 50px;
    top: 50px;
}
     
/* ---------------------------------- */

/* Media */

figure img {
    display: block;
}

.panoramic img {
    min-width: 556px;
    width: 90%;
}

@media screen and (min-width:1350px) {
   
    .panoramic img {
        width: 900px;
    }
}
   
/* ---------------------------------- */

/* Video */

.video-vimeo {
    display: block;
    position: relative;
    margin: 0 0 25px 0;
    width: 880px;
    height: 495px;
    background: #f5f5f5 url(../img/preload_video.gif) 50% 50% no-repeat;
}

.vimeo-video,
     .video-vimeo img,
     .video-vimeo iframe {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1350px), (max-height: 700px) {
    
    .video-vimeo {
        width: 651px;
        height: 366px;
    }
}  
  
  /* Video icons */
     
.i-video {
    display: block;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -43px 0 0 -43px;
    text-align: center;
    vertical-align: center;
    cursor: pointer !important;
    border: 0;
    opacity: 0.9;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border: 2px solid #fff;
}

.i-video span {
    display: block;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
    margin: 30px 0 0 33px;
    border-left: 20px solid #fff;
    border-top: 10px solid rgba(0,0,0,0);
    border-bottom: 10px solid rgba(0,0,0,0);
}

.i-video:hover {
    border: 2px solid #ccc;
}

.i-video:hover span {
    border-left-color: #ccc;
}


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


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

/* Nav */

#toc {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #000;
    width: 400px;
    height: 400px;
    z-index: 999999;
    display: none;
    padding: 25px 50px 50px 50px;
    margin: -250px 0 0 -250px;
    opacity: .9
}

#toc h1,
  #toc h2,
  #toc p {
    text-align: center;
    color: #fff;
}

#toc p {
    color: #ccc;
    padding: 0 0 15px 0;
}

#toc p a {
    color: #ccc;
    border-bottom: 1px dashed #ccc;
}

#toc p a:hover {
    border: 0;
    color: #999;
}

#toc h1 {
    font-family: 'PT sans narrow',Didot,DidotReplacement;
    font-size: 25px;
    font-style: italic;
    text-transform: uppercase;
    line-height: 30px;
    margin: 50px 0 0 0;
    letter-spacing: 4px;
}

#toc h2 {
    padding: 0 0 0 0;
    color: #fff;
    font-size: 11px;
}

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

/* Modal */

#modal {
    width: 600px;
    height: 250px;
    padding: 0;
    position: fixed;
    top: 55%;
    left: 50%;
    z-index: 999999;
    margin: -125px 0 0 -300px;
    overflow: hidden;
    display: none;
}

#modal .bg {
    background: #111;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .96;
    z-index: 1
}

#modal .modal-details {
    position: absolute;
    top: 50px;
    left: 225px;
    z-index: 2
}

#modal figure {
    position: absolute;
    z-index: 2;
    display: block;
    width: 200px;
    height: 200px !important;
    left: 25px;
    top: 25px;
    background: url(http://cloud.iancoyle.com/edits/global/img/camera.png) 0 0 no-repeat;
}

#modal.canon figure {
    background-position: 0 0
}

#modal.horizon figure {
    background-position: -200px 0
}

#modal.minox figure {
    background-position: -400px 0
}

#modal.hasselblad figure {
    background-position: -600px 0
}

#modal.yashica figure {
    background-position: -800px 0
}

#modal.diana figure {
    background-position: -1000px 0
}

#modal.sx70 figure {
    background-position: -1200px 0
}

#modal.holga figure {
    background-position: -1400px 0
}

#modal.japan figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/japan.png) 0 50% no-repeat;
}

#modal.pdx figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/oregon.png) 0 50% no-repeat;
}

#modal.colorado figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/colorado.png) 0 50% no-repeat;
}

#modal.georgia figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/georgia.png) 0 50% no-repeat;
}

#modal.sfo figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/california.png) 0 50% no-repeat;
}

#modal.italy figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/italy.png) 0 50% no-repeat;
}

#modal.world figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/world.png) 0 50% no-repeat;
}

#modal.pennsylvania figure {
    background: url(http://cloud.iancoyle.com/edits/global/img/pennsylvania.png) 0 50% no-repeat;
}

#modal._active {
    display: block;
    top: 50%;
}

.modal-details h1,
  .modal-details h2,
  .modal-details p {
    text-align: center;
    color: #fff
}

.modal-details h1, 
  .modal-details h2 {
    font-family: 'Pt sans narrow', Didot,DidotReplacement, "Didot";
    font-size: 25px;
    font-style: italic;
    text-transform: uppercase;
    line-height: 30px;
}

.modal-details ul {
    width: 500px;
    margin: 50px 0 0 0;
}

.modal-details ul li {
    float: left;
    width: 150px;
}




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

/* @media: iPad */
 


@media only screen and (max-device-width: 1024px) and (min-device-width: 480px) {
  
    
    article.title_page {
        min-height: 718px;
        height: 718px;
    }

    article {
        margin-bottom: 10px;
    }

    .background {
        height: 100%;
        width: auto !important;
    }

    body {
        width: 1024px !important;
        min-width: 1024px !important;
    }

    .extras {
        right: -10px;
    }

    .panoramic img {
        width: 560px;
    }

    .video-vimeo {
        width: 550px;
        height: 309px;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {


    article {
        padding-bottom: 100px;
    }

    article .column {
        width: 100%;
        margin: 0;
        top: 0;
        padding: 0;
        height: auto;
        position: static;
    }

    article .column header {
        width: 400px       !important;
        margin: 50px auto   !important;
        height: auto      !important;
        padding: 0        !important;
        position: static;
        left: 0;
    }

    article .column header h1 {
        width: 80%                  !important;
        margin: 80px auto 50px auto !important;
        font-size: 45px             !important;
        text-align: center;
        line-height: 45px;
    }

    
    article figure {
        width: 100%;
        left: 0;
        text-align: center;
        min-height: auto;
        margin-top: 75px;
    }

    article figure img {
        display: inline;
    }

   

    .video-vimeo {
        width: 651px;
        height: 366px;
        margin: 0 auto 10px auto;
    }
}
  
  
/* ---------------------------------- */

/* @media: iPhone */  
  
@media only screen and (max-device-width: 480px) {
  
    
    * {
        padding: 0 !important;
        left: 0;
    }

    .hints span {
        display: inline;
    }

    .hints em {
        display: none;
    }

    article {
        position: relative;
        height: auto;
        padding: 0;
        min-height: auto;
        margin-bottom: 10px;
    }

    article.interlude {
        display: none;
    }

    article.video ,
    article.title_page,
    article.credits,
    article.chapter {
        height: 550px !important;
        min-height: 550px !important;
        width: 100% !important;
        top: auto !important;
    }

    article.video {
        height: 600px !important;
    }

    article hgroup {
        display: none;
    }

    article.title_page header h1 {
        font-size: 60px;
        line-height: 60px;
        margin-bottom: 20px;
        letter-spacing: 8px;
    }

    article#cover header h1 {
        margin-bottom: 0;
    }

    article.credits header h1,
      article.chapter header h1 {
        font-size: 40px;
        line-height: 40px;
        margin-bottom: 40px;
    }

    article.credits header {
        padding: 50px 0;
        position: relative;
        top: 50px;
        width: 300px;
        display: block !important;
        left: 10px !important;
        margin: 25px 0 0 0 !important;
    }

    article.chapter header p {
        width: 100%;
        display: block;
        font-size: 10px;
        width: 300px;
    }

    article .column {
        width: 100%;
        margin: 0;
        top: 0;
        padding: 0;
        height: auto;
        position: static;
    }

    article .column header {
        width: 300px       !important;
        margin: 0 auto     !important;
        height: auto       !important;
        padding: 0         !important;
        position: static;
        left: 0;
    }

    article .column header h1 {
        width: 100%                  !important;
        margin: 70px auto 30px auto !important;
        font-size: 36px             !important;
        text-align: center;
        line-height: 40px;
    }

    article figure {
        left: 0;
        top: 0;
        width: 90%;
        padding: 0            !important;
        margin: 5% auto       !important;
        position: relative    !important;
        height: auto          !important;
        min-height: auto      !important;
    }

    figure img {
        width: 100%           !important;
        display: block;
    }


    .fullscreen .background {
        height: 100%;
        width: auto;
    }

    .video-vimeo {
        width: 250px;
        height: 140px;
        margin: 0 auto 10px auto;
    }

    body {
        min-width: 100%     !important;
        width: 100%         !important;
        max-width: 100%     !important;
    }
}

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

    #cover {
        height: 400px !important;
        min-height: 400px !important;
    }
}

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

/* @Clear */

.clear-self:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
    margin-bottom: 0;
}

.clear-self {
    display: block;
}

html[xmlns] .clear-self {
    display: block;
}

* html .clear-self {
    height: 1%;
}