/* Métatrou Styles ©2020 */

@font-face {font-family: 'EBGaramond12-re'; src: url('../fonts/ebgaramond12-regular.eot'); src: url('../fonts/ebgaramond12-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond12-regular.woff') format('woff'), url('../fonts/ebgaramond12-regular.ttf') format('truetype');unicode-range: U+000-5FF}
@font-face {font-family: 'EBGaramond12-it'; src: url('../fonts/ebgaramond12-italic.eot'); src: url('../fonts/ebgaramond12-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond12-italic.woff2') format('woff2'), url('../fonts/ebgaramond12-italic.woff') format('woff'), url('../fonts/ebgaramond12-italic.ttf') format('truetype'), url('../fonts/ebgaramond12-italic.svg#EBGaramond12_It') format('svg');unicode-range: U+000-5FF}
@font-face {font-family: 'EBGaramond12-sc'; src: url('../fonts/ebgaramond12-sc.eot'); src: url('../fonts/ebgaramond12-sc.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond12-sc.woff2') format('woff2'), url('../fonts/ebgaramond12-sc.woff') format('woff'), url('../fonts/ebgaramond12-sc.ttf') format('truetype'), url('../fonts/ebgaramond12-sc.svg#EBGaramond08_SC') format('svg');unicode-range: U+000-5FF}
@font-face {font-family: 'EBGaramond08-re'; src: url('../fonts/ebgaramond08-regular.eot'); src: url('../fonts/ebgaramond08-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond08-regular.woff2') format('woff2'), url('../fonts/ebgaramond08-regular.woff') format('woff'), url('../fonts/ebgaramond08-regular.ttf') format('truetype'), url('../fonts/ebgaramond08-regular.svg#EBGaramond08_Re') format('svg');unicode-range: U+000-5FF}
@font-face {font-family: 'EBGaramond08-it'; src: url('../fonts/ebgaramond08-italic.eot'); src: url('../fonts/ebgaramond08-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond08-italic.woff2') format('woff2'), url('../fonts/ebgaramond08-italic.woff') format('woff'), url('../fonts/ebgaramond08-italic.ttf') format('truetype'), url('../fonts/ebgaramond08-italic.svg#EBGaramond08_It') format('svg');unicode-range: U+000-5FF}
@font-face {font-family: 'EBGaramond08-sc'; src: url('../fonts/ebgaramond08-sc.eot'); src: url('../fonts/ebgaramond08-sc.eot?#iefix') format('embedded-opentype'), url('../fonts/ebgaramond08-sc.woff2') format('woff2'), url('../fonts/ebgaramond08-sc.woff') format('woff'), url('../fonts/ebgaramond08-sc.ttf') format('truetype'), url('../fonts/ebgaramond08-sc.svg#EBGaramond08_SC') format('svg');unicode-range: U+000-5FF}



html {overflow: auto; height: 100%}

/* Customized WebKit Scrollbar */

::-webkit-scrollbar {width: 20px}
::-webkit-scrollbar-track {background: #eee; border-left: solid 6px white; border-right: solid 8px white}
::-webkit-scrollbar-thumb {background: rgba(70,60,50,0.4); border-left: solid 6px white; border-right: solid 8px white}
::-webkit-scrollbar-thumb:hover {background: rgba(70,60,50,0.8); border-left: solid 5px white; border-right: solid 7px white}
::-webkit-scrollbar-thumb:active {background: rgba(200,40,20,0.8)}
::-webkit-scrollbar-thumb:window-inactive {background: rgba(70,60,50,0.2)}

/* General styles */

body {background: transparent;-webkit-text-size-adjust: 100%; text-rendering: optimizelegibility;  -moz-font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -ms-font-feature-settings: "liga"; font-feature-settings: "liga"; hyphens: none; -ms-hyphens: none; -moz-hyphens: none; -webkit-hyphens: none; margin: 0 auto; font: 16px/18px 'EBGaramond08-re', 'Times New Roman', Times, serif}
::selection {background: rgb(220,60,20); color: white}
::-moz-selection {background: rgb(220,60,20); color: white}

p {margin: 0; padding: 0 0 20px 0; font: 20px/24px 'EBGaramond12-re', Garamond, Baskerville, Garamond, Baskerville, Times, serif; hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto}
a {color: rgba(200,40,0,0.8); text-decoration: none}
a:hover {color: rgba(200,40,0,1); text-decoration: underline}
a: focus {outline: none}
hr {border: 0; height: 0; border-top: 1px solid #ccc}

h1 {color: rgb(50,40,30); font: 45px/43px 'EBGaramond12-sc', Garamond, Baskerville, Times, serif; margin: 0; padding: 0; z-index: 99}
h1.h1it{color: rgb(50,40,30); font: 45px/43px 'EBGaramond12-it', Garamond, Baskerville, Garamond, Baskerville, Times, serif; margin: 0; padding: 0}
h1 a {color: rgba(200,40,0,0.8); text-decoration: none}
h2 {font: 16px/16px 'EBGaramond08-re', Georgia, serif}
h2 a {font: 16px/16px 'EBGaramond08-sc', Garamond, Baskerville, Garamond, Baskerville, Times, serif; color: rgba(200,40,0,0.8)}
h1 a:hover, h2 a:hover {color: rgba(200,40,0,1); text-decoration: underline}

p .it, p .sc {line-height:80%}
.anchor {display: block; height: 65px; margin-top: -65px; visibility: hidden}
.it {font-family: 'EBGaramond12-it', 'Times New Roman', Times, serif}
.sc {font-family: 'EBGaramond12-sc', 'Times New Roman', Times, serif}
sup {font: 14px/0 'EBGaramond08-re', 'Times New Roman', Times, serif}
sup a {color: rgb(50,40,30)}

.linkbox a, body article footer .linkbox a{font: 16px/16px 'EBGaramond08-sc', Garamond, Baskerville, Garamond, Baskerville, Times, serif; cursor: pointer; border: 1px solid rgba(200,40,0,0.05); color: rgba(200,40,0,0.8); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; transition: border 300ms ease; -moz-transition: border 300ms ease; -webkit-transition: border 300ms ease; padding: 1px 6px 3px}
.linkbox a:hover, body article footer .linkbox a:hover { text-decoration: none; border: 1px solid rgba(200,40,0,1); color: rgba(200,40,0,1)}

@media (max-width: 1020px) {
sup {font: 16px/0 'EBGaramond08-sc', 'Times New Roman', Times, serif}
sup a {color: rgb(200,40,0)}
sup a:after {font-size: 24px; vertical-align: text-bottom; content: url(../images/small-marker-icon.svg)}
}

.share-answer {margin: 0; padding: 10px 0; text-align: left; opacity: 0.6; -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; -o-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out}
.share-answer:hover {opacity: 1}
.share-answer:before {display: inline-block; width:18px; margin: 0 4px 0 0; content: url(../images/twitter.svg);}
.share-answer a {font: 10px/14px Arial, sans-serif; text-transform: uppercase; color: #444; vertical-align:text-top}

/* Display Page */

.page {width: 1000px; margin: 180px auto 0; overflow: hidden}

.page header, .page footer {clear: both; float: none; width: 600px; margin: 0 auto; text-align: center}
.page header {padding: 10px 0; margin-bottom: 30px}
.page header figure {position: relative; overflow: hidden; margin: 2% auto; padding: 0}
.page header figure img {width: 100%; max-width: 600px; height: auto !important; height: 100%; }
.page header figure:hover figcaption {opacity: 1}
.page header figure figcaption {opacity: 0; cursor: pointer; position: absolute; bottom: 0; background-color: rgba(255,255,255,0.8); color: rgb(50,40,30); width: 80%; text-align: center; font: 16px/19px 'EBGaramond08-it', Garamond, Baskerville, Times, serif; margin: 0; padding: 5% 10%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out}
.page footer {background-color: transparent; text-align: center; padding: 10px 0; border-top: 1px solid #ccc; line-height: 24px}
.page footer figure {width: 130px; height: 150px; float: left; margin: 0; padding: 10px}
.page .author div{text-align: center; padding: 10px 0; border-bottom: 1px solid #aaa; line-height: 24px}
.page .author div:first-child {border-top: 1px solid #ccc}

.page section {display: inline-block; position: relative; float: left; left: 200px; width: 580px; padding: 0 10px}
.page section .img {display: block; width: 100%; max-width: 300px; height: auto !important; height: 100%; margin: auto}
.page aside {display: inline-block; position: relative; float: left}
.page aside div {padding: 10px; position: relative}
.page .left {left: -600px; width: 200px; text-align: right}
.page .right {width: 200px}
.page:before, .page:after {content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 150px}
.page:after {left: 750px}

.page .heros {text-align: left}
.page .heros img {max-width: 290px; margin-bottom: 10px}
.page .heros p {margin: 5% 0}
.page .heros .name {font: 32px/30px 'EBGaramond08-sc', Garamond, Baskerville, Times, serif; float: left; width: 50%}
.page .heros .bio {margin: 2% 2% 2% 54%; padding: 0; }
.page .heros #map {width: 400px; height: 300px; float: left; margin: 0; padding: 0; border-top: 1px solid rgb(150,140,130)}

.page .chronique {-webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; text-align: justify}
.page .poeme {text-align: center}

.page .volet {width: 200px; height: 300px; float: left}
.page .volet {max-width: 100%; height: 100%; background: #fff; font-size: 16px; line-height: 24px; color: #474747; text-align: left; margin: 0 auto; padding: 0; border-bottom: 1px solid #aaa} 
.page .volet a.link{display: none} 
.page .volet p{height: 0; margin: 0; padding: 0; overflow: hidden; -webkit-transition:height 0.3s ease; -moz-transition:height 0.3s ease; -o-transition:height 0.3s ease; -ms-transition:height 0.3s ease; transition:height 0.3s ease; } 
.page .volet a#un:target ~ p,.page section .volet a#deux:target ~ p,.page section .volet a#trois:target ~ p {height: 120px; overflow: hidden} 
.page .volet .part{background: #fff; border-top: 1px solid #ccc; padding: 6px 6px 0}
.page .volet p{font-size: 16px; line-height: 16px; margin: 6px 0 0} 
.page .volet a {color: rgb(200,40,0); font-variant: small-caps; text-decoration: none} 
.page .volet a:hover {text-decoration: underline} 

/* Adaptative Page */

@media (max-width: 1020px) {
.page {width: 600px}
.page section {display: block; float: none; left: 0}
.page .left, .page .right {left: 0; width: 300px; text-align: left; top: 0}
.page:before, .page:after {left: 0}
.page:after {left: 0}
.page aside div {border-top: 1px solid #ccc; margin-top: -1px}
.page .heros {border-bottom: none} 
.page .intro figure {width: 100%}
}

@media (max-width: 640px) {
.page {margin: 80px auto 0}
.page, .page header {width: 98%}
.page section, .page footer {width: 95%}
.page footer figure{display: none}
.page .heros .name {width: 60%; float: none}
.page .heros .name {width: 95%; height: 100%; padding: 10px 0 0;}
.page .heros .bio, .page .volet {width: 100%; height: auto; float: none; margin: 0; padding: 10px 0}
.page .heros #map {width: 100%; height: 300px; float: none}
.page .chronique {-webkit-columns: 1; -moz-columns: 1; columns: 1}
.page aside {clear: left}
.page .left {left: 0; width: 100%}
.page .right {left: 0; width: 100%}
.page aside {width: 94%; left: 10px}
}

/* Footer */

body footer {font: 16px/16px 'EBGaramond08-re', Georgia, serif}
body footer{background:#000; padding:2% 0 4%; margin: 0}
body footer, body footer a{color: #eee}
body footer a:hover {color: #eee; text-decoration: underline}
body footer .structure{ width: 910px; margin: 0 auto; border-bottom: 1px solid #aaa; padding: 10px 0; text-align: left}
body footer .structure section{display: inline-block; width:28%; min-height: 100%; margin: 0; padding:0; }
body footer .structure section:last-of-type{width:12%}
body footer .structure section ul {font: 16px/48px 'EBGaramond08-sc', Garamond, Baskerville, Garamond, Baskerville, Times, serif; list-style-type: none; margin:0 0 20%; padding:0; text-align: left}
body footer .structure section ul li{font: 16px/24px 'EBGaramond08', Garamond, Baskerville, Garamond, Baskerville, Times, serif; padding: 0 3px;}
body footer .claim{font: 10px/14px sans-serif; text-transform: uppercase; color: #999; margin:4px 0 1px}
@media (max-width: 1020px) {
body footer .structure{width: 92%; margin:0 4%;}
body footer .structure section{width:32%}
body footer .structure section ul li{font: 14px/28px 'EBGaramond08', Garamond, Baskerville, Garamond, Baskerville, Times, serif; padding: 0 5px;}
body footer .structure section:last-of-type {width:100%; height: 80px}
body footer .structure section:last-of-type ul li {display: inline-block} 
body footer .structure section:last-of-type ul li a{text-decoration: none; font: 16px/16px 'EBGaramond08-sc', Garamond, Baskerville, Garamond, Baskerville, Times, serif; cursor: pointer; border: 1px solid #efefef; color: #efefef; border-radius: 4px; -moz-border-radius: 4px; padding: 1px 6px 3px}
body footer .structure section:last-of-type ul li a:hover  {color:#aaa; border: 1px solid #aaa}
}

/* Special */

.macabre {margin: 0 90px; padding:0} @media (max-width: 640px) {.macabre {margin: 0; padding:0}}

.theater {width: 100%; min-height: 769px; background: url(../images/frontispice.png) center top no-repeat #fff; border-top: 1px solid #ccc}
.theater #map{margin: 97px 169px 107px; padding: 0; height: 296px; width: 260px}
@media (max-width: 1020px) {.theater {min-height: 510px}}
@media (max-width: 640px) {.theater {min-height: 0; background: #fff} .theater #map {height: 240px; width: 100%; margin: 0 auto}}

#map.monde {position: absolute;top: 155px; left: 10px; bottom: 10px; right: 10px}
@media (max-width: 640px) {
#map.monde {top: 54px; left: 0px; bottom: 0px; right: 0px} nav {margin-bottom: 10px; box-shadow: 0 4px 5px 0 rgba(80, 80, 80, 0.3); -moz-box-shadow: 0 4px 5px 0 rgba(80, 80, 80, 0.3); -webkit-box-shadow: 0 4px 5px 0 rgba(80, 80, 80, 0.3)} 
nav img {padding: 9px 0;}
}

/* Medias */

.sound, .video {display: block; padding: 0}
.sound {text-align: center; padding-bottom: 17px}
.video {display: inline-block;} 
.video .screen{width: 480px; padding: 20px 60px} 
.videowrapper{position: relative; padding-bottom: 75%; height: 0; } 
.videowrapper iframe{position: absolute; top: 0; left: 0; width: 100%; height: 100%}
@media (max-width: 640px) {
.video {display: block; margin: 0 auto} 
.video .screen{width: 100%; padding: 20px 0} 
}

/* Resume Notes */

.resume {max-width: 100%; overflow: hidden; text-align: center; vertical-align: top; margin: 0 auto 10px; padding: 0}
.resume p.linkbox {text-align: center; margin: 10px 0}
.resume figure {margin: 0; padding: 0}
.resume img {max-width: 100%}
.resume h1 {font: 22px/22px 'EBGaramond08-sc', Garamond, Baskerville, Times, serif; letter-spacing: -1px; word-spacing: 2px; margin: 10px 0}
.resume p { ; padding-bottom: 8px; font: 16px/18px 'EBGaramond08-re', Garamond, Baskerville, Times, serif;  text-align: justify}
.resume p: first-letter {font-size: 46px; line-height: 26px; margin: 5px 5px -5px 0; padding-bottom: 5px; float: left; color: rgb(50,40,30); background: transparent url() 0 0 no-repeat}

/* Garden */

.garden{width: 920px; height: 1000px; margin: 0 auto -63px; text-align: center; padding-top: 280px; background: transparent url(../studio/garden.jpg) top center no-repeat; background-size: 100% auto;}
.garden h1{ font: 64px/86px 'EBGaramond08-re', Garamond, Baskerville, Times, serif; color: white;}
.garden input {width: 200px !important}
.garden nav {background: transparent !important}
.garden nav img{filter: grayscale(100%) contrast(0%) brightness(190%)}
.garden nav.smaller{box-shadow: none}
@media (max-width: 920px) {
.garden{width: 120%; height: 777px; margin: 8% -10% 0; padding-top: 20%; overflow: hidden}
.garden nav {background: white !important}
.garden nav img{filter: none}
}

/* Stories */

.stories{width: 910px; margin: 180px auto 0; text-align: center; padding: 0 0 20px}
.stories section {display: inline-block; width: 240px; min-height: 100%; margin: 0 auto; padding: 20px 30px}
.stories section .linkbox{vertical-align: top}
.stories section p{vertical-align: bottom}
.stories section.first {display: inline-block; width: 240px; min-height:360px; margin: 0 auto; padding: 20px 30px 20px 637px; border-bottom: 1px solid #aaa}
.stories section.first figure {position:absolute; top: 200px; left: calc(50% - 425px);  width: 545px; max-height: 380px; overflow: hidden;}
.stories section.first h1 {font: 45px/43px 'EBGaramond12-sc', Garamond, Baskerville, Times, serif;}
@media (max-width: 920px) {
.stories {width: 95%}
.stories section.first {min-height: 100%; padding: 20px 30px; background: transparent; border: none}
.stories section.first figure {position:inherit; width: 240px;  min-height: auto}
.stories section.first h1 {font: 22px/22px 'EBGaramond08-sc', Garamond, Baskerville, Times, serif;}
}
@media (max-width: 640px) {
.stories {margin: 80px auto 0}
.stories section{display: block; padding: 10px 0 20px}
}

/* Maps */


.first-map{width: 100%; height: 379px; border-top: 1px solid #ccc; border-bottom: 1px solid #aaa; margin: 0 0 50px; text-align: center}
.first-map figcaption{font: 16px/16px 'EBGaramond08-it', Garamond, Baskerville, Times, serif; margin: 0; padding: 10px 0; float: right; text-align: left; color: #171717}
.first #map{height: 100%; width: 100%}
@media (max-width: 920px) {
.first-map{height: 240px}
}

/* Article */

article.page {border-bottom: 1px solid #aaa}
article footer, article footer a{color: rgb(50,40,30)}

/* Campagne Marignan */

#map.conquete {width: 100%; height:590px; margin: 0 auto; border-top: 1px solid #ccc}

.campagne {max-width: 100%; height: 100%; font-size: 16px; line-height: 24px; color: #474747; text-align: left; margin: 0 auto; padding: 0; border-width: 1px 0 1px; border-style: solid; border-color: rgb(150,140,130)}
.campagne a.link{display: none}  
.campagne p{height: 0; padding: 0; overflow: hidden; -webkit-transition:height 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease}
.campagne a#lion:target ~ p,.campagne a#grenoble:target ~ p,.campagne a#embrun:target ~ p,.campagne a#demonte:target ~ p,.campagne a#villafranca:target ~ p,.campagne a#turin:target ~ p,.campagne a#stgermin:target ~ p,.campagne a#novare:target ~ p,.campagne a#buffalore:target ~ p,.campagne a#marignano:target ~ p{height: 120px; padding: 10px 0; }
.campagne .part{padding: 8px 6px 3px; border-bottom: 1px solid #aaa;}
.campagne .part:last-child {border: none}
.campagne img{margin: -12px 2px} 
.campagne p{font-size: 16px; line-height: 16px; margin: 8px 0 0} 
.campagne a {color: rgb(200,40,0); font-variant: small-caps; text-decoration: none} 
.campagne a:hover {text-decoration: underline}

@media (max-width: 1020px) {
#map.conquete {height:200px;}
.campagne {height:395px; margin: -1px auto; overflow-y: scroll; -webkit-overflow-scrolling: touch; box-shadow: inset 0px -8px 12px -10px rgba(80, 80, 80, 0.8)}
.campagne a#lion:target ~ p,.campagne a#grenoble:target ~ p,.campagne a#embrun:target ~ p,.campagne a#demonte:target ~ p,.campagne a#villafranca:target ~ p,.campagne a#turin:target ~ p,.campagne a#stgermin:target ~ p,.campagne a#novare:target ~ p,.campagne a#buffalore:target ~ p,.campagne a#marignano:target ~ p{height: 80px; padding: 10px 0; }
}
@media (max-width: 640px) {
#map.conquete {height:165px}
.campagne {height:155px; margin: 0 auto 1px; border-width: 1px 0 0}
.campagne a#lion:target ~ p,.campagne a#grenoble:target ~ p,.campagne a#embrun:target ~ p,.campagne a#demonte:target ~ p,.campagne a#villafranca:target ~ p,.campagne a#turin:target ~ p,.campagne a#stgermin:target ~ p,.campagne a#novare:target ~ p,.campagne a#buffalore:target ~ p,.campagne a#marignano:target ~ p{height: 60px; padding: 10px 0; }
}

/* Year */

.year {max-width: 100%; font-size: 16px; line-height: 24px; color: #474747; text-align: left; margin: -1px auto 0; padding: 0; overflow: hidden}
.year {-webkit-animation: vmove 2s; -moz-animation: vmove 2s; animation: vmove 2s}
@keyframes vmove {from {height: 0px} to {height: 769px}}
@-moz-keyframes vmove {from {height: 0px} to {height: 769px}}
@-webkit-keyframes vmove {from {height: 0px} to {height: 769px}}
.year a.link{display: none}  
.year p{height: 0; padding: 0; overflow: hidden; -webkit-transition:height 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease}
.year a#january:target ~ p, .year a#february:target ~ p, .year a#march:target ~ p, .year a#april:target ~ p, .year a#may:target ~ p, .year a#june:target ~ p, .year a#july:target ~ p, .year a#august:target ~ p, .year a#september:target ~ p, .year a#october:target ~ p, .year a#november:target ~ p, .year a#december:target ~ p{height: 220px; padding: 10px 0; }
@media (max-width: 1020px) {
.year a#january:target ~ p, .year a#february:target ~ p, .year a#march:target ~ p, .year a#april:target ~ p, .year a#may:target ~ p, .year a#june:target ~ p, .year a#july:target ~ p, .year a#august:target ~ p, .year a#september:target ~ p, .year a#october:target ~ p, .year a#november:target ~ p, .year a#december:target ~ p{height: 130px; padding: 10px 0; }
}
.year .part{border-top: 1px solid #ccc; padding: 8px 6px 3px}
.year .part:last-child{border-bottom: 1px solid #aaa}
.year img{margin: -12px 2px} 
.year p{font-size: 16px; line-height: 16px; margin: 8px 0 0} 
.year a {color: rgb(200,40,0); font-variant: small-caps; text-decoration: none} 
.year a:hover {text-decoration: underline}

.L {top: 50px} .C {top: 100px} .CL {top: 150px} .CC {top: 200px} .CCL {top: 250px} .CCC {top: 300px} .CCCL {top: 350px} .CD {top: 400px} .CDL {top: 450px} .D {top: 500px} .DL {top: 550px} .DC {top: 600px} .DCL {top: 650px} .DCC {top: 700px} .DCCL {top: 750px} .DCCC {top: 800px} .DCCCL {top: 850px} .CM {top: 900px} .CML {top: 950px} .M {top: 1000px} .ML {top: 1050px} .MC {top: 1100px} .MCL {top: 1150px} .MCC {top: 1200px} .MCCL {top: 1250px} .MCCC {top: 1300px} .MCCCL {top: 1350px} .MCD {top: 1400px} .MCDL {top: 1450px} .MD {top: 1500px} .MDL {top: 1550px} .MDC {top: 1600px} .MDCL {top: 1650px} .MDCC {top: 1700px} .MDCCL {top: 1750px} .MDCCC {top: 1800px} .MDCCCL {top: 1850px} .MCM {top: 1900px} .MCML {top: 1950px} .MM {top: 2000px}
@media (max-width: 1020px) {.L, .C, .CL, .CC, .CCL, .CCC, .CCCL, .CD, .CDL, .D, .DL, .DC, .DCL, .DCC, .DCCL, .DCCC, .DCCCL, .CM, .CML, .M, .ML, .MC, .MCL, .MCC, .MCCL, .MCCC, .MCCCL, .MCD, .MCDL, .MD, .MDL, .MDC, .MDCL, .MDCC, .MDCCL, .MDCCC, .MDCCCL, .MCM, .MCML, .MM {top: 0px}}

/* Navigation General */

nav {font:18px/32px 'EBGaramond12-sc', Garamond, Baskerville, Times, serif; letter-spacing:-1px; -moz-letter-spacing:-1px; font-weight:normal; color:rgb(30,20,10); background: #fff; text-align: center; position: fixed; top: 0; left: 0; right: 0; z-index:20}
nav img {width: 250px; padding: 28px 0 10px}
nav ul {list-style-type: none; padding: 0; margin: 0 auto}
nav a {display: inline-block; text-decoration: none; color: rgb(50,40,30)}
nav a:hover {color: rgb(50,40,30); text-decoration: none}
nav .part {visibility: visible; margin: 8px 0 8px 5px; vertical-align:text-bottom}
nav .button { background: rgba(255,255,255,1); text-transform: lowercase; height: 36px; cursor: pointer; border: 1px solid rgba(50,40,30,0.05); border-radius: 4px; transition: border 300ms ease; padding: 0 9px;-webkit-appearance: none;}
nav .button:hover{background: rgba(255,255,255,.7); border: 1px solid rgba(50,40,30,0.8)}
@media (max-width: 640px) {
nav a:hover {color: rgba(200,40,0,0.8); text-decoration: none}
nav ul {height: 0; overflow: hidden; transition: height 300ms linear}
nav a {display: block}
nav .part {border: none; height:64px; margin:0 8px 4px; visibility: hidden; transition: visibility 300ms linear}
nav .part:hover {border: none}
nav .nav, nav .nav:hover {display: block; background: transparent url(../images/nav.svg) 8px 8px no-repeat; transition: background 300ms linear}
#checkbox:checked + nav ul {height: 220px; padding: 0 0 20px; box-shadow: 0 4px 5px 0 rgba(80, 80, 80, 0.3)}
#checkbox:checked + nav .part {visibility: visible}
#checkbox:checked + nav .nav {background: transparent url(../images/nav-close.svg) 8px 8px no-repeat}
nav img {width: 180px; padding: 8px 0 0; margin: auto} 
}

/* Navigation Home Button*/

.checkbox {display: none}
.nav, .home {width:16px}
.home {background: transparent url(../images/tower.svg) 8px 7px no-repeat}
.home a {text-decoration:none}
@media (max-width:640px) {
.home {position:absolute;display:block;left:8px;top:8px}
}
.nav {position:absolute;display:none;top:8px;left:9px}

/* Navigation PopUp*/

nav ul a span {display: none; background:#fdfdfd; box-shadow: 0 4px 14px rgba(0,0,0,0.4); font: 16px/18px 'EBGaramond08-it', Garamond, Baskerville, Times, serif;  height: 58px; width : 120px; position: relative; text-align: center; padding: 10px; top: -52px; left: 48%; margin: -68px; transition: all 300ms linear}
nav ul a span:after {background:#fdfdfd; box-shadow: 5px 5px 8px rgba(0,0,0,0.2); content:''; position:absolute; bottom: -9px; margin-left: -12px; width: 20px; height: 20px; left: 50%; transform: rotate(45deg)}
nav ul a:hover span {display: block}
@media (max-width: 640px) { 
nav ul a span {display: block; background:transparent; box-shadow: 0 0 0 rgba(0,0,0,0); height: auto; width: 210px; position: relative; text-align: center; padding: 5px; top: -10px; left: auto; margin: auto}
nav ul a span:after {display: none}
}

/* Navigation Responsive*/

nav.smaller{box-shadow: 0 4px 5px 0 rgba(80, 80, 80, 0.3)}
@media (min-width: 640px) {
nav.smaller #logo{display: none}
nav.smaller ul li span, nav.smaller ul li:hover span{display: none}
}
@media (max-width: 640px) {
nav.smaller{padding-bottom: 9px}
nav.smaller img{display: inherit}
}

/* Search Form */

.cse .gsc-control-cse, .gsc-control-cse {background-color: transparent !important; border: none !important; padding: 0 !important}
.cse .gsc-search-button-v2, .gsc-search-button-v2{background-color: rgba(200,40,20,0.7) !important; border: none !important; border-radius: 0 !important; padding: 9px 18px !important;}
.cse .gsc-search-button-v2:hover, .gsc-search-button-v2:hover{background-color: rgba(200,40,20,1) !important}
.gs-no-results-result .gs-snippet, .gs-error-result .gs-snippet {background-color:transparent !important; border: none !important; border-radius: 0 !important; color: #c82814 !important;}
.gsc-input-box {border-radius: 0 !important; -webkit-appearance: none !important; padding-bottom: 10px !important; padding-top: 2px !important; max-height: 20px !important;}

/* Popup window */

.popup{position: absolute; display: none; z-index: 50; margin: 0 auto ; padding:10%; top: 200px; left: 25%; width:30%; min-height: 360px; background: white}

/* Contact Form */

.contact {background-color: #fafafa; border-top: 1px solid #ccc; margin: 0; padding: 25px 0 15px; width: 100%}
/* form {display: flex; flex-flow: row wrap; align-items: center; text-align: left; width: 100%; margin: 0 auto}*/
.contact form {display: block; width: 920px; text-align: left; margin: 0 auto; vertical-align: center}
.contact form img{width: 30px; margin-right: 15px; float:left}
label{width: 160px; float: left; font-family: 'EBGaramond12-it', 'Times New Roman', Times, serif; color: #444; padding: 3px 0}
input[type="text"], select{outline: none; width: calc(98% - 350px); border: 1px solid #ccc; color: #c82814; background: #fff; margin: 10px; padding: 0 10px; font: 16px Arial, Helvetica, sans-serif; height: 38px}
input[type="submit"]{background-color: rgba(200,40,20,0.7); width: 110px; border: none;  cursor: pointer; color: #ffffff; font-family: 'Open Sans Condensed', sans-serif; font-size: 15px; margin: 10px 0; padding: 0 16px; text-decoration: none; text-transform: uppercase; height: 40px; }
input[type="submit"]:hover{background-color: rgba(200,40,20,1)}
input::placeholder {color:#bbb}
.contact input [type="submit"] {float:right}
@media (max-width: 1020px) {
.contact {padding: 4% 0;}
.contact form{width: 92%;}
label{width: 80px}
input[type="text"], select{width: calc(100% - 290px)}
}
@media (min-width: 1020px) {
label[for="email"]:after{content:' every month in your inbox.'}
}

/* Cover book */

.frontpage{display: block; width: 650px; margin: 160px auto 0; padding: 20px 0 100px}
.frontpage header{display: inline-block; max-width: 440px; width:100%; vertical-align:top; color: rgb(50,40,30);  text-align: left;}

.frontpage h1{opacity:0; margin: 8% 0 4%; font: 40px/38px 'EBGaramond08-sc', Garamond, Baskerville, Times, serif; text-transform: lowercase; animation: h1 8s ease-out .1s 1 forwards}
@keyframes h1{0%{opacity:0}100%{opacity:1}}
.frontpage h2{opacity:0; margin: 8% 0; font: 15px/20px 'EBGaramond12-sc', Garamond, Baskerville, Times, serif; animation: h2 2s ease-in 1s 1 forwards}
@keyframes h2{0%{opacity:0}100%{opacity:1}}
.frontpage input {width: auto; margin-right: 5%; opacity: 0; animation: input 2s linear 2s 1 forwards; -webkit-appearance: none;}
@keyframes input{0%{opacity:0}100%{opacity:1}}

.frontpage h2 p {font: 18px/26px 'EBGaramond12-it', Garamond, Baskerville, Times, serif; padding: 8px 0;}

.cover{display: inline-block; width: 200px}
.cover figure{position:relative;margin:0 20px}

.glow{display:block;height:100%;width:100%;position:absolute;top:0;left:0;background:url(../images/glow.png) no-repeat;background-size:100%;opacity:0;z-index:4;
animation: glow 1s ease-out 4s 2 alternate}
@keyframes glow{0%{opacity:0}100%{opacity:1}}
@media (prefers-color-scheme: dark){
.glow{display:none}
}

.fade{display:inline-block;max-width:100%;opacity:0;
animation: fade 6s ease-out .1s 1 forwards}
@keyframes fade{0%{opacity:.1}100%{opacity:1}}

@media (max-width: 640px) {
.frontpage {width:90%; margin: 10% 5% 0}
.frontpage h1{margin: 0 10%; font: 32px/30px 'EBGaramond08-sc', Garamond, Baskerville, Times, serif;} 
.frontpage header {display: block; margin: 0 auto 5%; text-align: center}
.cover {width: 50%; display: block; margin: 4% auto 2%}
}


/* Dark page */

body.dark, body.dark nav{background: #000}
body.dark footer, body.dark .page footer, body.dark label, body.dark footer, body.dark footer a, body.dark .page .author div {color:#fefefe}
body.dark .page header figure figcaption {background: rgba(0,0,0,0.6); color:#fefefe}
body.dark nav img{filter: grayscale(100%) contrast(0%) brightness(190%)}
body.dark .contact form img{filter: grayscale(100%) contrast(0%) brightness(190%)}
body.dark img.dark{filter: invert(100%)}
body.dark nav a, body.dark a {color:#eee}
body.dark nav a:hover, body.dark a:hover {color:#ccc}
body.dark nav ul a span {color:rgb(50,40,30) !important}
body.dark nav .button, body.dark .linkbox a, body.dark footer .linkbox a{color:#efefef; border: 1px solid #efefef;-webkit-appearance: none;}
body.dark nav .button, body.dark nav .button:hover { background: transparent}
body.dark nav .nav, body.dark nav .nav, body.dark nav .nav:hover{background: transparent url(../images/nav-dark.svg) 8px 8px no-repeat}
body.dark #checkbox:checked + nav .nav {background: transparent url(../images/nav-dark-close.svg) 8px 8px no-repeat}
body footer .linkbox a {color:#eee; border: 1px solid #eee}
body.dark .linkbox a:hover, body footer .linkbox a:hover  {color:#aaa; border: 1px solid #aaa}
body.dark h1, body.dark h2, body.dark p{color:#efefef}
body.dark .contact {background-color: transparent !important}
@media (max-width: 640px){
body.dark nav ul a span{color:#eee !important}
body.dark .part, body.dark .part:hover {border: #000 !important}
}

/* Dark mode */

@media (prefers-color-scheme: dark){
body, nav{background: #000}
footer, .page footer, label, footer, footer a, .page .author div {color:#fefefe}
.page header figure figcaption {background: rgba(0,0,0,0.6); color:#fefefe}
nav img{filter: grayscale(100%) contrast(0%) brightness(190%)}
.contact form img{filter: grayscale(100%) contrast(0%) brightness(190%)}
img.dark{-webkit-filter: invert(1);filter: invert(1);}
nav a, a {color:#eee}
nav a:hover, a:hover {color:#ccc}
nav ul a span {color:rgb(50,40,30) !important}
nav .button, .linkbox a, footer .linkbox a{color:#efefef; border: 1px solid #efefef}
nav .button, nav .button:hover {background: transparent}
nav .nav, nav .nav, nav .nav:hover{background: transparent url(../images/nav-dark.svg) 8px 8px no-repeat}
#checkbox:checked + nav .nav {background: transparent url(../images/nav-dark-close.svg) 8px 8px no-repeat}
body footer .linkbox a {color:#eee; border: 1px solid #eee}
.linkbox a:hover, body footer .linkbox a:hover  {color:#aaa; border: 1px solid #aaa}
h1, h2, .h1it, .name, p, .text, .sc, .it {color:#efefef}
.contact {background-color: transparent !important}
@media (max-width: 640px){
nav ul a span{color:#eee !important}
.part, .part:hover {border: #000 !important}
}
}