/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
 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;
}
/*end reset*/
 body {
     background-color: #ffd;
     font-family: Piazzolla, Georgia, serif;
     font-variant-ligatures: common-ligatures;
}
 .indice, .intro-info {
     padding:3rem;
}

.info {
     padding:2rem;
}

.info {
     max-width:40%;
}

header {
padding: 3rem 3rem 0rem 3rem;
}

#intro {

	display: grid;
grid-template-columns: 50% 50%;
  grid-gap: 0rem;
  color: #444;
  
  
}

 footer {
     padding:1rem;
     height:20%;
}
 .info {
     background-color:white;
     line-height:1.5;
}
 header, .intro-info, .indice {
     line-height:1.5;
}

.indice {
 font-size:1.2rem;
}

.indice a, .indice a:visited {
color:white;
text-decoration: none;
}

.indice a:hover {
letter-spacing: 2;
}

.indice a:active {
letter-spacing: 0;}

.indice ul {
list-style-type: disc;
}
 h1 {
     font-size: 8rem;
     font-style: italic;
     letter-spacing:-.8rem;
     display:block;
     line-height:6rem;
}
 h2 {
     font-size:2.4rem;
     letter-spacing:2;
     font-weight:400;
     font-style: italic;
     line-height:3rem;
     hanging-punctuation: first;
     margin-bottom: 1rem;
}


 p {
     font-size:1.2rem;
     line-height:1.5rem;
}
 .intro-info p{
     display:block;
     margin-bottom: 1rem;
}
 p.tecnica, p.medida, p.data {
     font-size: 0.9rem;
     font-style: italic;
}
 p.data {
     margin-bottom: 1rem;
}
 footer p{
     color:white;
     padding: 2rem;
}
 h3 {
     visibility: hidden;
}
 #intro {
     width:100%;
     height:100%;
     background-color:white;
}
  .gravura-intro {
     position: sticky;
     top: 0;
     width:100%;
     height:100%;
     background-position: center;
     background-size: cover;
     background-repeat: no-repeat;
     background-attachment: scroll;
}
/*ver se dá pra pôr isto no js */
 header, #intro {
     background-color: black;
     color: white;
}
 #gravura-1 .gravura-intro {
     background-image: url('gravura-1-intro.jpg');
}
 #gravura-2 .gravura-intro {
     background-image: url('gravura-2-intro.jpg');
}
 #gravura-3 .gravura-intro {
     background-image: url('gravura-3-intro.jpg');
}
 #gravura-4 .gravura-intro {
     background-image: url('gravura-4-intro.jpg');
}
 #gravura-5 .gravura-intro {
     background-image: url('gravura-5-intro.jpg');
}
 #gravura-6 .gravura-intro {
     background-image: url('gravura-6-intro.jpg');
}
 #gravura-7 .gravura-intro {
     background-image: url('gravura-7-intro.jpg');
}
 #gravura-8 .gravura-intro {
     background-image: url('gravura-8-intro.jpg');
}
 #gravura-9 .gravura-intro {
     background-image: url('gravura-9-intro.jpg');
}
 #gravura-10 .gravura-intro {
     background-image: url('gravura-10-intro.jpg');
}
 #gravura-11 .gravura-intro {
     background-image: url('gravura-11-intro.jpg');
}
 #gravura-12 .gravura-intro {
     background-image: url('gravura-12-intro.jpg');
}

 #gravura-13 .gravura-intro {
     background-image: url('gravura-13-intro.jpg');
}

 .cor1, .cor2, .cor3, .cor4, .cor5 {
     position: sticky;
     top: 0;
     mix-blend-mode:multiply;
     width:100%;
     height:100%;
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
     background-attachment: scroll;
}
 .cor1 {
     mix-blend-mode:normal;
     background-color: white;
}

/*Exceptions*/
 #gravura-2 .cor1, #gravura-2 .cor2, #gravura-8 .cor1, #gravura-6 .cor2, #gravura-6 .cor3 {
     mix-blend-mode:normal !important;
}
 #gravura-6 .cor1, #gravura-6 .cor2 {
     background-color:black;
}
 #gravura-6 .cor3 {
     background-color:#e3ddce;
}

 footer {
 background:black;
     height: 200px;
}

 @media (max-width: 600px) {
     .info, .intro-info {
         padding:1rem;
         max-width:75%;
    }
     h1 {
         font-size:4rem;
         letter-spacing:-0.4rem;
         color: white;
    }
     h2 {
         font-size:2rem;
         letter-spacing:2;
         font-weight:400;
         font-style: italic;
         line-height:2rem;
         hanging-punctuation: first;
         margin-bottom: 1rem;
    }
     p {
         font-size:1rem;
         line-height:1rem;
         clear:both;
    }
     p.tecnica, p.medida, p.data {
         float:left;
         clear: right;
         font-size: 0.75rem;
         line-height:1rem;
    }
     p.medida:before {
         content:", ";
    }
     p.data:before {
         content:" – ";
    }
}