@font-face{ 
  font-family: 'MountainsofChristmas';
  src: url('../_style/MountainsofChristmas-webfont.woff') format('woff');
}

* {
	font-family: Montserrat, Avenir, sans-serif;
	font-size: 1em;
  	
  	padding: 0;
  	background-color: transparent; 
  	color: inherit;
 	border-color: inherit;
  	box-sizing: border-box;
  	position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;
}

:root {
  --white:  #ebe8e4; 
  --cream:  #e4dfdb; /* rgba(235,232,228,1) */
  --creig:  #dbd5d0;
  --beige:  #d8d0cb;
  --cafe:   #af8e7a; 
  --brown:  #6F5353; 
  --blood:  #821032;  
  --brood:  #640032;
  --blues:  #0F7A86; /* #2094a0;*/
  --brock:  #544;
  --black:  #322;
  --hover:  #1E6168;
}


.hidden { display: none !important;  }


.planche {  overflow: hidden; }

.planche p { position: fixed; bottom: 10%; top: unset; width: 50%; min-width: 18rem; line-height: 2.3rem; 
	font-size: 1.7em; text-align: center; }
p span { font-family: MountainsofChristmas, Trattatello, fantasy; position: relative; font-size: 2em; top: 0.5rem; color: #af8e7a; font-weight: 700; }

.planche a      { display: block; top: unset; bottom: 15%; right: 0; left: 0; font-size: 1.3em; text-align: center; text-decoration: none; color: var(--blues); }
.planche a svg  { display: inline-block; height: 1.3em; width: 1.3em; opacity: 1; position: relative; top: 0.5em; margin: 0.25em;}


svg {  width: 80%; height: 80%; isolation: isolate; overflow: initial; background-color: transparent; fill-rule: evenodd; fill: currentColor; opacity: 0.2; margin: 0.5em auto auto;}
svg.land { height: 100%; width: 200%; margin: 0 -50%; }
svg.port { height: 200%; width: 100%; margin: -50% 0; }
svg.full { height: 200%; width: 200%; margin: -50%; }

.planche.title p { bottom: 20%; font-size: 3em; line-height: 2em;  }

svg.close { z-index: 1; position: fixed; height: 1.5em; width: 1.5em; top: 0.5em; left: 0.75em; right: unset; }


@media only screen and (max-width: 421px) {
  .planche p { width: 100%; padding: 0 1rem; min-width: unset; font-size: 1em; line-height: 1.35rem; }
  p span { top: 0.2rem; }
  .planche.title p { font-size: 2em; }
}